/* v4: blauer Kopfbereich mit Bogen, Logo + Menü weiß auf dem Blau, Footer mit Bogen.
   Ergänzt style.css, ändert sie nicht. */
:root{
  --blue:#174670;                      /* Blau am oberen Rand des Header-Bogens bzw. am unteren Rand des Footer-Bogens */
  --h:clamp(130px,9.53vw,183px);       /* Höhe des Kopfbereichs (Bogen: 1920 x 183 px) */
  --logo-top:clamp(14px,1.6vw,30px);
  --logo-h:clamp(30px,2.92vw,56px);
  --logo-shift:150px;                  /* so weit rückt das Logo nach links aus der 900-px-Spalte (bei schmalen Fenstern weniger) */
  --fb:var(--h);                       /* Footer-Bogen genauso hoch wie der Header-Bogen: gleiche Skalierung, gleich dicker Umriss */
}

/* ---------- Kopfbereich (fest oben) ---------- */
.v4-head{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--h);
  pointer-events:none;transition:filter .25s ease}
.v4-bow{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none}
.v4-spacer{height:var(--h);background:#fff}   /* hält den Platz frei, damit nichts springt */

.v4-in{position:relative;max-width:900px;height:100%;margin:0 auto;padding:var(--logo-top) 20px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.v4-logo{display:block;line-height:0;flex:0 1 auto;min-width:0;
  margin-left:calc(-1 * max(0px, min(var(--logo-shift), (100vw - 900px) / 2)))}
.v4-logo:hover{background:none}
.v4-logo img{display:block;height:var(--logo-h);width:auto;max-width:100%}

.v4-nav{flex:0 0 auto;margin-top:calc((var(--logo-h) - 37px) / 2)}
.v4-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.v4-nav a{display:block;padding:8px 11px;color:#fff;text-decoration:none;font-size:1rem;line-height:1.3;white-space:nowrap}
.v4-nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.v4-nav a[aria-current]{font-weight:700;box-shadow:inset 0 -3px 0 #fff}

.v4-toggle{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.v4-burger{display:none}

/* Nach dem Scrollen: weicher Schatten entlang des Bogens (Größe bleibt gleich; Klasse setzt header-v4.js) */
.v4-head.is-small{filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))}
/* Nur Logo, Menü und Burger sind klickbar; der übrige Kopfbereich lässt Klicks auf den Inhalt darunter durch */
.v4-logo,.v4-nav,.v4-burger{pointer-events:auto}

/* ---------- Tablet & Smartphone: Burger-Menü ---------- */
@media (max-width:800px){
  :root{--h:clamp(104px,27vw,130px);--logo-top:clamp(14px,4.2vw,26px);--logo-h:clamp(26px,7.6vw,40px)}
  .v4-burger{display:block;position:absolute;right:12px;top:calc(var(--logo-top) + (var(--logo-h) - 23px) / 2);padding:10px 8px;cursor:pointer}
  .v4-burger span,.v4-burger span::before,.v4-burger span::after{display:block;content:"";width:26px;height:3px;background:#fff;border-radius:2px}
  .v4-burger span{position:relative}
  .v4-burger span::before{position:absolute;top:-8px}
  .v4-burger span::after{position:absolute;top:8px}
  .v4-toggle:focus-visible + .v4-burger{outline:3px solid #fff}
  .v4-nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;background:#fff;box-shadow:0 8px 16px rgba(0,0,0,.18);border-top:1px solid #e3e6e4}
  .v4-toggle:checked ~ .v4-nav{display:block}
  .v4-nav ul{flex-direction:column;gap:0;padding:8px 20px 14px}
  .v4-nav a{padding:12px 4px;color:var(--ink);white-space:normal}
  .v4-nav a:hover{background:var(--signal);color:#fff}
  .v4-nav a[aria-current]{color:var(--navy);box-shadow:inset 3px 0 0 var(--signal);padding-left:10px}
}
@media (prefers-reduced-motion:reduce){.v4-head{transition:none}}

/* ---------- Footer: Bogen als oberer Abschluss ---------- */
/* Der Bogen reicht ca. 42 % seiner Höhe in den Footer hinein, der Text steht auf dem dunklen Teil. */
.v-v4 .site-footer{position:relative;isolation:isolate;background:var(--blue);border-top:0;padding-top:8px;color:#e8eef4;
  margin-top:max(0px,calc(var(--fb) * .58 - 36px))}
.v-v4 .foot-bow{position:absolute;z-index:-1;left:0;right:0;bottom:calc(100% - var(--fb) * .42);
  display:block;width:100%;height:var(--fb);pointer-events:none}
.v-v4 .site-footer a{color:#fff;text-decoration:none}
.v-v4 .site-footer a:hover{background:none;text-decoration:underline}
.v-v4 .foot{flex-direction:row-reverse}     /* Links links, Adresse rechts */
.v-v4 .foot > div{text-align:right}
.v-v4 .foot{font-size:.9rem;line-height:1.6}   /* Links und Kontaktdaten etwas kleiner */