/* ============================================================
   _base.css — nur Rahmen: Reset, Nav, Footer, Mobile-Callbar.
   Der INHALT jeder Variante bringt sein eigenes CSS mit.
   Alle Farben laufen über Variablen, damit jede Variante
   den Rahmen umfärben kann, ohne ihn neu zu schreiben.
   ============================================================ */

:root{
  --navy:#0a1a30;
  --blue:#1c4c9c;
  --sky:#8fb6e8;
  --ink:#14202c;
  --paper:#fff;
  --line:rgba(20,32,44,.13);

  /* vom Rahmen genutzt — pro Variante überschreibbar */
  --nav-bg:rgba(255,255,255,.95);
  --nav-fg:#14202c;
  --nav-line:rgba(20,32,44,.12);
  --nav-acc:#1c4c9c;
  --foot-bg:#0a1a30;
  --foot-fg:rgba(255,255,255,.74);
  --wrap:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--nav-acc);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#14202c;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:90;background:var(--nav-bg);backdrop-filter:saturate(1.3);border-bottom:1px solid var(--nav-line);color:var(--nav-fg)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 26px;height:76px;display:flex;align-items:center;gap:28px}
.nav .brand{display:flex;align-items:center;margin-right:auto}
.nav .brand img{height:54px;width:auto}
.nav .links{display:flex;gap:26px;font:500 14.5px/1 Inter,system-ui,sans-serif;letter-spacing:.01em}
.nav .links a{opacity:.8;padding:6px 0;border-bottom:1.5px solid transparent;transition:border-color .2s,opacity .2s}
.nav .links a:hover{opacity:1;border-color:var(--nav-acc)}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav .nbtn{background:var(--nav-acc);color:#fff;font:700 14.5px/1 Inter,system-ui,sans-serif;padding:13px 20px;transition:background .2s}
.nav .nbtn:hover{background:var(--navy)}
.burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.burger span{display:block;width:22px;height:2px;background:currentColor}
.mm{display:none;position:fixed;inset:74px 0 0;background:var(--nav-bg);color:var(--nav-fg);z-index:89;padding:28px 24px;flex-direction:column;gap:6px}
.mm.open{display:flex}
.mm a{font:600 20px/2.1 Inter,system-ui,sans-serif;border-bottom:1px solid var(--nav-line)}
.mm .mm-cta{margin-top:22px;display:grid;gap:10px}
.mm .mm-cta a{text-align:center;border:0;padding:15px;font-size:16px;line-height:1.2}
.mm .mm-cta .a1{background:var(--nav-acc);color:#fff}

@media(max-width:940px){.nav .links{display:none}
  .burger{display:flex}
}

/* ---------- Footer ---------- */
.ft{background:var(--foot-bg);color:var(--foot-fg);padding:74px 0 0;font:400 15px/1.7 Inter,system-ui,sans-serif}
.ft-in{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:44px}
.ft img.logo{height:50px;width:auto;margin-bottom:18px}
.ft h4{font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ft a{display:block;padding:3px 0;transition:color .2s}
.ft a:hover{color:#fff}
.ft-contact span{display:block;padding:3px 0}
.ft-bot{border-top:1px solid rgba(255,255,255,.14);padding:22px 0 30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px}
/* Ohne nowrap bricht der Trenner zwischen Impressum und Datenschutz um
   und der Mittelpunkt steht allein auf einer Zeile. */
.ft-bot span{white-space:nowrap}
/* .ft a ist display:block (fuer die Linkspalten) — im Fuss muessen die
   beiden Links nebeneinander stehen, sonst landet der Trenner allein
   auf einer Zeile. */
.ft-bot a{display:inline;padding:0}
@media(max-width:820px){.ft-top{grid-template-columns:1fr 1fr}.ft-top>div:first-child{grid-column:1/-1}}
@media(max-width:520px){.ft-top{grid-template-columns:1fr}}

/* ---------- Mobile Callbar ---------- */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;grid-template-columns:1fr 1fr;background:var(--navy);border-top:1px solid rgba(255,255,255,.15)}
.mbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;color:#fff;font:700 15px/1 Inter,system-ui,sans-serif}
.mbar a:first-child{background:var(--nav-acc)}
@media(max-width:940px){.mbar{display:grid}body{padding-bottom:54px}}

/* ---------- Varianten-Fahne (nur für den Vergleich, fliegt später raus) ---------- */
.vflag{position:fixed;left:0;bottom:0;z-index:120;background:#111;color:#fff;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;padding:11px 15px;display:flex;gap:14px;align-items:center}
.vflag a{color:#8fb6e8;font-weight:600;letter-spacing:0}
@media(max-width:940px){.vflag{bottom:54px}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}