/* ==========================================================================
   Agentur Heßling & Partner – Design-System
   Behutsames Facelift: Markenfarben und Schriften bleiben, Raster,
   Typografie, Kontraste und Interaktionen sind neu aufgebaut.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  color-scheme: light;

  /* Marke */
  --navy:#192B47;          /* Primärfarbe, Flächen und Buttons             */
  --navy-800:#20355A;
  --navy-700:#2A4571;
  --navy-050:#EEF2F8;
  --blue:#246CB4;          /* Akzent für Text und Links – 5,3:1 auf Weiß   */
  --blue-strong:#1D5893;
  --blue-tint:#4682B4;     /* nur dekorativ (Verläufe, Icons auf Dunkel)   */
  --blue-050:#EBF3FB;

  /* Flächen */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-alt:#F4F7FB;
  --surface-navy:#192B47;

  /* Text */
  --text:#2B3440;          /* 12,1:1 auf Weiß                              */
  --muted:#5A6673;         /*  5,6:1 auf Weiß                              */
  --on-dark:#FFFFFF;
  --on-dark-muted:#C3CEDD; /*  8,4:1 auf --navy                            */

  /* Linien */
  --border:#DFE7F0;
  --border-strong:#93A6BC; /* Bedienelement-Rahmen, >=3:1                  */

  /* Status */
  --star:#F5A623;

  /* Radien */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Abstände (8-Punkt-Raster) */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* Schatten */
  --sh-1:0 1px 2px rgba(25,43,71,.06), 0 1px 3px rgba(25,43,71,.08);
  --sh-2:0 4px 12px rgba(25,43,71,.08), 0 2px 4px rgba(25,43,71,.04);
  --sh-3:0 12px 32px rgba(25,43,71,.12), 0 4px 8px rgba(25,43,71,.06);
  --sh-4:0 24px 64px rgba(25,43,71,.18);

  /* Bewegung */
  --dur:220ms; --dur-fast:140ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Ebenen */
  --z-header:40; --z-float:50; --z-drawer:60; --z-dialog:80;

  /* Maße */
  --wrap:1180px;
  --wrap-narrow:760px;
  --header-h:88px;
}

@media (max-width:860px){ :root{ --header-h:72px; } }

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--blue); text-underline-offset:3px; }
a:hover{ color:var(--blue-strong); }
h1,h2,h3,h4{ font-family:Montserrat,"Open Sans",sans-serif; font-weight:700; line-height:1.18; margin:0; letter-spacing:-.015em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--navy); color:#fff; }

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

/* ---------- 3. Layout-Bausteine ------------------------------------------ */
.wrap{ width:min(100% - 2 * clamp(16px,5vw,40px), var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2 * clamp(16px,5vw,40px), var(--wrap-narrow)); }
.section{ padding-block:clamp(56px,8vw,104px); }
.section--alt{ background:var(--surface-alt); }
.section--navy{ background:var(--surface-navy); color:var(--on-dark); }
.section--tight{ padding-block:clamp(40px,6vw,72px); }

.skip-link{
  position:absolute; left:16px; top:-100px; z-index:100;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:var(--r-sm);
  font-weight:700; text-decoration:none; transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:16px; color:#fff; }

/* Abschnittskopf */
.sec-head{ max-width:62ch; margin-bottom:clamp(32px,4vw,52px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
  margin-bottom:var(--s-3);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; border-radius:2px; }
.sec-head--center .eyebrow::before{ display:none; }
.section--navy .eyebrow{ color:#8FC3F0; }
.sec-title{ font-size:clamp(28px,4vw,42px); }
.sec-sub{ margin-top:var(--s-4); font-size:clamp(16px,1.6vw,18.5px); color:var(--muted); }
.section--navy .sec-sub{ color:var(--on-dark-muted); }

/* ---------- 4. Buttons --------------------------------------------------- */
.btn{
  --btn-bg:var(--navy); --btn-fg:#fff; --btn-bd:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px; border:2px solid var(--btn-bd);
  border-radius:var(--r-pill); background:var(--btn-bg); color:var(--btn-fg);
  font-family:Montserrat,sans-serif; font-weight:700; font-size:15.5px;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.btn:hover{ --btn-bg:var(--navy-700); --btn-bd:var(--navy-700); color:#fff; box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(1px); }
.btn--accent{ --btn-bg:var(--blue); --btn-bd:var(--blue); }
.btn--accent:hover{ --btn-bg:var(--blue-strong); --btn-bd:var(--blue-strong); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--navy); --btn-bd:var(--border-strong); }
.btn--ghost:hover{ --btn-bg:var(--navy-050); --btn-bd:var(--navy); color:var(--navy); box-shadow:none; }
.btn--on-dark{ --btn-bg:#fff; --btn-fg:var(--navy); --btn-bd:#fff; }
.btn--on-dark:hover{ --btn-bg:#E7EDF6; --btn-bd:#E7EDF6; color:var(--navy); }
.btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.55); }
.btn--outline-light:hover{ --btn-bg:rgba(255,255,255,.14); --btn-bd:#fff; color:#fff; }
.btn--sm{ min-height:44px; padding:0 20px; font-size:14.5px; }
.btn--block{ width:100%; }
.btn .ico{ width:18px; height:18px; flex:none; }

/* ---------- 5. Header ---------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--dur) var(--ease);
}
.header.is-stuck{ box-shadow:var(--sh-2); }
.header__inner{ display:flex; align-items:center; gap:clamp(10px,2.5vw,24px); height:var(--header-h); }
.brand{ display:flex; align-items:center; flex:none; text-decoration:none; }
/* Das Logo ist randlos freigestellt – die angegebene Hoehe ist also auch die
   sichtbare Hoehe des Schriftzugs. Beim alten Bild lag rund ein Drittel der
   Flaeche als durchsichtiger Rand darum herum, deshalb wirkte es kleiner.
   10vw nutzt auf dem Handy die Breite neben dem Menueknopf fast aus: bei
   375 px sind es 37,5 px Hoehe und 257 px Breite, bei 320 px bleiben neben
   dem Knopf noch gut 10 px Luft. Ab 500 px steht die volle Groesse.
   Mehr als 50 px gehen nicht: Bei 1260 px Fensterbreite bleiben neben Menue
   und Rufnummer-Knopf (Karriere, Schadenmeldung) nur rund 350 px fuer das
   Logo – 50 px Hoehe ergeben 343 px Breite. */
.brand img{ height:clamp(32px,10vw,50px); width:auto; }
.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:2px; list-style:none; }
.nav__link{
  display:inline-flex; align-items:center; min-height:44px; padding:0 9px;
  border-radius:var(--r-sm); color:var(--text); text-decoration:none;
  font-family:Montserrat,sans-serif; font-weight:600; font-size:14.5px; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__link:hover{ background:var(--navy-050); color:var(--navy); }
.nav__link[aria-current="page"],
.nav__link.is-active{ color:var(--blue); background:var(--blue-050); }
.header__cta{ flex:none; }
.burger{
  display:none; width:48px; height:48px; margin-left:auto; padding:0;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer;
}
.burger span{
  display:block; width:22px; height:2px; background:var(--navy); border-radius:2px;
  position:relative; transition:background var(--dur-fast) var(--ease);
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px;
  background:var(--navy); border-radius:2px; transition:transform var(--dur) var(--ease);
}
.burger span::before{ top:-7px; }
.burger span::after{ top:7px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

/* Das groessere Logo und der zusaetzliche Punkt „Karriere“ brauchen mehr
   Platz als vorher – deshalb uebernimmt das Menue jetzt schon unterhalb von
   1260 px statt erst unterhalb von 1024 px. */
@media (max-width:1259px){
  .nav,.header__cta{ display:none; }
  .burger{ display:flex; }
}

/* Mobile-Navigation */
.drawer{
  position:fixed; inset:var(--header-h) 0 0; z-index:var(--z-drawer);
  background:#fff; padding:var(--s-5) 0 var(--s-8);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.drawer.is-open{ transform:none; opacity:1; visibility:visible; }
.drawer__list{ list-style:none; display:grid; gap:2px; }
.drawer__link{
  display:flex; align-items:center; min-height:56px; padding:0 var(--s-4);
  border-radius:var(--r-md); text-decoration:none; color:var(--text);
  font-family:Montserrat,sans-serif; font-weight:600; font-size:18px;
  border-bottom:1px solid var(--border);
}
.drawer__link:hover{ background:var(--navy-050); color:var(--navy); }
.drawer__actions{ display:grid; gap:var(--s-3); margin-top:var(--s-6); }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero{ position:relative; isolation:isolate; color:var(--on-dark); overflow:hidden; background:var(--navy); }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(15,26,45,.86) 0%, rgba(15,26,45,.72) 45%, rgba(15,26,45,.9) 100%);
}
.hero__inner{ display:grid; align-content:center; min-height:min(84svh,760px); padding-block:clamp(72px,11vw,120px); }
.hero__kicker{
  /* justify-self, sonst zieht das Raster die Pille auf die volle Breite */
  display:inline-flex; align-items:center; gap:10px; align-self:start; justify-self:start;
  padding:8px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  font-family:Montserrat,sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.04em;
  margin-bottom:var(--s-5);
}
.hero__kicker .dot{ width:8px; height:8px; border-radius:50%; background:#4ADE80; flex:none; }
/* Die zweite Zeile lautet immer „für <Wortwechsel>“ und darf nicht umbrechen.
   Das laengste Wort ist „Finanzierungen“ – zusammen 18 Zeichen. Auf schmalen
   Geraeten bestimmt deshalb die Fensterbreite die Schriftgroesse, sonst
   stuende „für“ allein auf einer Zeile ueber dem wechselnden Wort. */
.hero h1{ font-size:clamp(24px,7.2vw,64px); max-width:16ch; }
@media (min-width:520px){ .hero h1{ font-size:clamp(38px,6.2vw,64px); } }
.hero__text{ margin-top:var(--s-5); max-width:52ch; font-size:clamp(16.5px,1.8vw,19px); color:#DDE6F1; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
.hero__badges{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5);
  margin-top:clamp(32px,5vw,56px); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.18); list-style:none;
}
.hero__badges li{
  display:flex; align-items:center; gap:9px;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:.13em; text-transform:uppercase; color:#C9D8E8;
}
.hero__badges svg{ width:16px; height:16px; color:#8FC3F0; flex:none; }

/* Rotator – die drei Begriffe liegen uebereinander und blenden weich
   ineinander ueber: das ausgehende Wort steigt nach oben aus, das neue
   kommt von unten herein. Nur Opazitaet und Transform, damit der Wechsel
   auf der GPU laeuft und nichts umbricht.

   Der ganze Block bildet eine eigene Zeile und bricht in sich nicht um:
   „für“ und das wechselnde Wort bleiben zusammen. */
.rotator{ display:block; color:#8FC3F0; white-space:nowrap; }
/* Die Woerter selbst sind absolut positioniert und haetten damit keine
   Breite. Der unsichtbare Platzhalter traegt das laengste Wort und spannt
   die Box auf – so springt die Zeile beim Wechsel nicht. */
.rotator__list{ position:relative; display:inline-block; vertical-align:top; min-height:1.18em; }
.rotator__sizer{ display:block; visibility:hidden; white-space:nowrap; }
.rotator__word{
  position:absolute; left:0; top:0; white-space:nowrap;
  opacity:0; transform:translate3d(0,.42em,0) scale(.985); filter:blur(5px);
  transition:opacity 620ms var(--ease), transform 620ms var(--ease), filter 620ms var(--ease);
  will-change:opacity, transform;
}
.rotator__word.is-current{ opacity:1; transform:none; filter:blur(0); }
.rotator__word.is-out{ opacity:0; transform:translate3d(0,-.42em,0) scale(.985); filter:blur(5px); }

/* Fallback ohne JS bzw. bei reduzierter Bewegung: alle Begriffe in einer Reihe.
   Dann darf die Zeile umbrechen, sonst laufen drei Woerter aus dem Bild. */
.no-js .rotator,
.rotator--static{ white-space:normal; }
.no-js .rotator__list,
.rotator--static .rotator__list{ min-height:0; }
.no-js .rotator__sizer,
.rotator--static .rotator__sizer{ display:none; }
.no-js .rotator__word,
.rotator--static .rotator__word{
  position:static; display:inline; opacity:1; transform:none; filter:none; transition:none;
  white-space:normal;
}
.no-js .rotator__word + .rotator__word::before,
.rotator--static .rotator__word + .rotator__word::before{ content:" · "; }

/* ---------- 7. Karten & Raster ------------------------------------------- */
.grid{ display:grid; gap:clamp(16px,2.4vw,28px); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); }

.card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,32px); box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.card--link:hover,.card--link:focus-within{ box-shadow:var(--sh-3); border-color:#C7D6E6; transform:translateY(-3px); }
.card__icon{
  display:grid; place-items:center; width:56px; height:56px; margin-bottom:var(--s-4);
  border-radius:var(--r-md); background:var(--blue-050); color:var(--blue-strong);
}
.card__icon svg{ width:28px; height:28px; }
.card__title{ font-size:21px; }
.card__text{ margin-top:var(--s-3); color:var(--muted); font-size:16px; }
.card__action{ margin-top:var(--s-5); }
/* macht die ganze Karte klickbar, Ziel bleibt der eigentliche Link */
.stretched::after{ content:""; position:absolute; inset:0; border-radius:inherit; }

/* ---------- 8. Über uns -------------------------------------------------- */
.about{ display:grid; gap:clamp(28px,4vw,56px); align-items:start; grid-template-columns:minmax(0,1fr); }
@media (min-width:940px){ .about{ grid-template-columns:minmax(0,420px) minmax(0,1fr); } }

.owner{
  background:var(--navy); color:var(--on-dark); border-radius:var(--r-xl);
  padding:clamp(24px,3vw,32px); box-shadow:var(--sh-3); position:relative; overflow:hidden;
}
.owner::before{
  content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(70,130,180,.45),transparent 68%);
}
.owner > *{ position:relative; }
.owner__photo{
  width:132px; aspect-ratio:1; border-radius:50%; object-fit:cover; object-position:top center;
  border:4px solid rgba(255,255,255,.9); background:#fff; margin-bottom:var(--s-4);
}
.owner__name{ font-size:26px; }
.owner__role{ margin-top:6px; color:#8FC3F0; font-weight:700; font-size:15px; font-family:Montserrat,sans-serif; }
.owner__quals{ list-style:none; margin-top:var(--s-4); display:grid; gap:8px; }
.owner__quals li{ display:flex; gap:10px; font-size:15px; color:var(--on-dark-muted); }
.owner__quals svg{ width:17px; height:17px; flex:none; margin-top:4px; color:#8FC3F0; }
.owner__contact{
  margin-top:var(--s-5); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.18); display:grid; gap:6px;
}
.owner__contact a{ color:#fff; display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:15.5px; word-break:break-word; }
.owner__contact svg{ width:18px; height:18px; flex:none; color:#8FC3F0; }

.about__lead{ font-size:clamp(18px,2vw,21px); font-weight:600; color:var(--text); }
.about__body{ margin-top:var(--s-4); color:var(--muted); display:grid; gap:var(--s-4); }
.langs{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s-5); }
.langs li{
  padding:7px 14px; border-radius:var(--r-pill); background:var(--blue-050);
  color:var(--navy); font-size:14px; font-weight:600; border:1px solid #D6E5F5;
}
.facts{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s-4); margin-top:var(--s-6); }
.facts li{ border-left:3px solid var(--blue); padding-left:var(--s-4); }
.facts b{ display:block; font-family:Montserrat,sans-serif; font-size:clamp(26px,3.4vw,34px); color:var(--navy); line-height:1.1; }
.facts span{ font-size:14.5px; color:var(--muted); }

/* ---------- 9. Standorte ------------------------------------------------- */
.loc{ overflow:hidden; padding:0; }
.loc__media{ position:relative; margin:0; }
.loc__media img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
/* Die ganze Kachel ist die Schaltflaeche (grosses Ziel), die Beschriftung sitzt
   als kompaktes Chip oben links – dort verdeckt sie weder den Schriftzug am
   Gebaeude noch den Eingang. */
.loc__play{
  position:absolute; inset:0; width:100%;
  display:flex; align-items:flex-start; justify-content:flex-start; padding:14px;
  background:linear-gradient(180deg,rgba(15,26,45,.42) 0%,rgba(15,26,45,.08) 42%,rgba(15,26,45,.06) 100%);
  border:0; cursor:pointer; color:#fff; text-align:left;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:15px;
  transition:background var(--dur) var(--ease);
}
.loc__play:hover{ background:linear-gradient(180deg,rgba(15,26,45,.55) 0%,rgba(15,26,45,.28) 60%,rgba(15,26,45,.3) 100%); }
.loc__chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 18px 7px 7px; border-radius:var(--r-pill);
  background:rgba(15,26,45,.86); backdrop-filter:blur(6px);
  box-shadow:var(--sh-2);
  transition:background var(--dur-fast) var(--ease);
}
.loc__play:hover .loc__chip{ background:rgba(15,26,45,.95); }
.loc__play .circle{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%; flex:none;
  background:#fff; color:var(--navy);
  transition:transform var(--dur) var(--ease);
}
.loc__play:hover .circle{ transform:scale(1.08); }
.loc__play .circle svg{ width:16px; height:16px; margin-left:2px; }
.loc__body{ padding:clamp(22px,3vw,30px); }
.loc__title{ font-size:24px; }
.loc__rows{ list-style:none; margin-top:var(--s-4); display:grid; gap:var(--s-3); }
.loc__rows > li{ display:flex; gap:12px; font-size:15.5px; color:var(--muted); }
.loc__rows svg{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--blue); }
.loc__hours{ margin:0; padding:0; list-style:none; display:grid; gap:4px; width:100%; }
.loc__hours li{ display:flex; justify-content:space-between; gap:16px; color:var(--muted); }
.loc__hours b{ color:var(--text); font-weight:600; }
.loc__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }

/* Nur ein Standort: eine breite Karte, auf grossen Bildschirmen Bild links,
   Angaben rechts – statt einer halbleeren Zweierreihe. */
.loc-single{ max-width:1040px; margin-inline:auto; }
@media (min-width:860px){
  .loc--wide{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
  .loc--wide .loc__media img{ height:100%; aspect-ratio:auto; min-height:340px; }
  .loc--wide .loc__body{ align-self:center; }
}

/* ---------- 10. Care4Kids-Teaser ----------------------------------------- */
.teaser{
  display:grid; gap:clamp(24px,4vw,48px); align-items:center;
  background:linear-gradient(135deg,var(--navy) 0%, #22406B 100%);
  color:var(--on-dark); border-radius:var(--r-xl); padding:clamp(28px,4vw,56px);
  box-shadow:var(--sh-3); overflow:hidden; position:relative;
}
@media (min-width:900px){ .teaser{ grid-template-columns:1.15fr .85fr; } }
/* Auf dunklem Grund braucht die Bereichsauszeichnung einen hellen Blauton –
   das Akzentblau der Website waere hier nicht lesbar. */
.teaser .eyebrow{ color:#8FC3F0; }
.teaser h2{ font-size:clamp(26px,3.4vw,38px); }
.teaser p{ margin-top:var(--s-4); color:#DDE6F1; max-width:52ch; }
.teaser__list{ list-style:none; display:grid; gap:10px; margin-top:var(--s-5); }
.teaser__list li{ display:flex; gap:10px; align-items:flex-start; color:#DDE6F1; font-size:15.5px; }
.teaser__list svg{ width:18px; height:18px; flex:none; margin-top:5px; color:#8FC3F0; }
.teaser__media{ justify-self:center; width:100%; }
.teaser__media img{
  width:100%; max-width:var(--teaser-media, 100%); margin-inline:auto;
  border-radius:var(--r-lg); box-shadow:var(--sh-4);
}
/* Startseite: die Paketgrafik soll den Text nicht erschlagen */
.teaser__media--sm{ --teaser-media:300px; }
/* Care4Kids-Seite: freigestelltes Portraet – kein Rahmen, kein Schatten,
   sonst zeichnet sich das Rechteck um den Kreis ab. */
.teaser__media--portrait{ --teaser-media:200px; }
.teaser__media--portrait img{ border-radius:0; box-shadow:none; }
/* Kontaktkarte mit einer Person: schmaler, Foto direkt neben dem Text –
   in voller Breite blieb rechts viel leere Flaeche. */
.teaser--narrow{ max-width:860px; margin-inline:auto; }
@media (min-width:900px){ .teaser--narrow{ grid-template-columns:1fr 220px; } }

/* ---------- 10b. Care4Kids-Pakete ---------------------------------------- */
.pkgs{ display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); align-items:start; }
.pkg{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); overflow:hidden;
}
.pkg--featured{ border-color:var(--navy); box-shadow:var(--sh-3); }
.pkg__flag{
  position:absolute; top:18px; right:-38px; width:150px; padding:6px 0; transform:rotate(45deg);
  background:var(--blue); color:#fff; text-align:center;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.pkg__head{ padding:clamp(24px,3vw,30px) clamp(22px,3vw,28px) 0; }
.pkg__badge{
  display:inline-flex; align-items:baseline; gap:2px; padding:10px 18px; border-radius:var(--r-md);
  background:var(--navy); color:#fff; font-family:Montserrat,sans-serif; font-weight:700; font-size:24px; line-height:1;
}
.pkg__badge .four{ color:#4682B4; }
.pkg__badge .suffix{ font-size:15px; margin-left:2px; }
.pkg__price{ margin-top:var(--s-4); font-family:Montserrat,sans-serif; font-weight:700; font-size:30px; color:var(--navy); }
.pkg__price small{ font-family:"Open Sans",sans-serif; font-weight:400; font-size:15px; color:var(--muted); }
.pkg__list{ list-style:none; display:grid; gap:var(--s-4); padding:var(--s-5) clamp(22px,3vw,28px); margin:0; }
.pkg__list > li{ display:flex; gap:12px; font-size:15.5px; color:var(--text); }
.pkg__list > li > svg{ width:19px; height:19px; flex:none; margin-top:4px; color:var(--blue); }
.pkg__sub{ list-style:none; display:grid; gap:6px; margin-top:8px; padding:0; }
.pkg__sub li{ display:flex; gap:8px; font-size:14.5px; color:var(--muted); }
.pkg__sub li::before{ content:"↳"; color:var(--blue); flex:none; }
.pkg__extra{ font-weight:700; color:var(--blue-strong); }
.pkg__foot{ margin-top:auto; padding:0 clamp(22px,3vw,28px) clamp(24px,3vw,30px); }

/* ---------- 11. Team ----------------------------------------------------- */
/* Alle drei Bereiche stehen untereinander – nichts ist hinter einem Reiter
   versteckt. Die Zwischenueberschrift traegt eine feine Linie, damit die
   Gruppen auch ohne Umschalter klar getrennt bleiben. */
.team-group + .team-group{ margin-top:clamp(40px,5vw,64px); }
.team-group__title{
  display:flex; align-items:center; gap:var(--s-4);
  margin-bottom:clamp(20px,2.6vw,28px);
  font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--navy);
}
.team-group__title::after{
  content:""; flex:1; height:1px; background:var(--border-strong); opacity:.55;
}

.person{
  position:relative; display:flex; flex-direction:column; text-align:left; width:100%;
  padding:0; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; cursor:pointer; box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.person:hover{ box-shadow:var(--sh-3); transform:translateY(-3px); border-color:#C7D6E6; }
/* Die Portraets sind runde Freisteller. Statt sie in ein Quadrat zu zwingen,
   bekommen sie eine eigene Flaeche mit weichem Farbverlauf: der Kreis sitzt
   darin bewusst, die Ecken der Karte wirken nicht mehr leer. */
.person__media{
  position:relative; display:block; padding:var(--s-5) var(--s-5) var(--s-4);
  background:radial-gradient(78% 78% at 50% 34%, #E4EEF9 0%, #EEF3FA 58%, #F7FAFD 100%);
  border-bottom:1px solid var(--border);
}
/* Der weisse Kreis liegt als Hintergrund direkt im Bild, nicht mehr als
   eigenes Pseudoelement: dessen Prozentbreite bezog sich auf die Polsterbox
   der Flaeche, die des Bildes auf die Inhaltsbox. Zwischen 1025 und 1240 px
   Fensterbreite war der Kreis dadurch bis zu 24 px groesser als das Foto und
   schaute als weisser Rand darunter hervor. */
.person__img{
  position:relative; display:block; width:min(80%, 176px); margin-inline:auto;
  aspect-ratio:1; object-fit:cover; object-position:top center;
  background:#fff; border-radius:50%; box-shadow:var(--sh-2);
  transition:transform var(--dur) var(--ease);
}
.person:hover .person__img{ transform:scale(1.045); }
/* Flex-Spalte, damit „Kontakt“ in allen Karten einer Reihe auf gleicher
   Hoehe steht – auch wenn eine Funktionsbezeichnung zweizeilig umbricht. */
.person__body{ display:flex; flex-direction:column; flex:1; padding:var(--s-4) var(--s-4) var(--s-5); }
.person__name{ display:block; font-size:17.5px; font-family:Montserrat,sans-serif; font-weight:700; color:var(--navy); line-height:1.25; }
.person__role{ display:block; margin-top:4px; font-size:14.5px; color:var(--muted); line-height:1.45; }
.person__more{ margin-top:auto; padding-top:var(--s-3); display:inline-flex; align-self:flex-start; align-items:center; gap:6px; color:var(--blue); font-weight:700; font-size:14px; }
.person__more svg{ width:15px; height:15px; transition:transform var(--dur-fast) var(--ease); }
.person:hover .person__more svg{ transform:translateX(3px); }

/* ---------- 12. Bewertungen ---------------------------------------------- */
.rating{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-3) var(--s-5);
  padding:var(--s-5); background:#fff; border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); margin-bottom:clamp(28px,4vw,44px);
}
.rating__score{ font-family:Montserrat,sans-serif; font-weight:700; font-size:40px; color:var(--navy); line-height:1; }
.rating__meta{ display:grid; gap:4px; }
.stars{ display:flex; gap:3px; color:var(--star); }
.stars svg{ width:19px; height:19px; }
.rating__count{ font-size:14.5px; color:var(--muted); }
.rating__src{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--muted); }
/* Kompaktes Band direkt unter dem Hero: die Uebersicht rueckt naeher ans Laufband. */
.reviews-band .rating{ margin-bottom:clamp(18px,2.4vw,26px); }

/* Laufband: die Karten ziehen langsam von rechts nach links und halten an,
   sobald die Maus darauf liegt oder der Fokus hineinwandert. Das Skript
   haengt eine zweite, identische Reihe an – erst dann laeuft die Animation
   (Klasse .is-ready), sonst gaebe es eine Luecke im Umlauf. */
.marquee{
  --mq-gap:20px;
  --mq-dur:78s;
  position:relative; overflow:hidden; padding:4px 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
/* Kein Innenabstand: die Verschiebung um -50% minus einer halben Luecke
   trifft nur dann exakt den Anfang der Kopie. */
.marquee__track{ display:flex; gap:var(--mq-gap); width:max-content; }
.marquee.is-ready .marquee__track{
  animation:marquee-run var(--mq-dur) linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state:paused; }
.marquee .review{ width:min(84vw,340px); flex:none; }

@keyframes marquee-run{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(calc(-50% - var(--mq-gap) / 2),0,0); }
}

/* Ohne Skript und bei reduzierter Bewegung steht das Band still und laesst
   sich stattdessen von Hand schieben – sonst waeren die hinteren
   Bewertungen nicht erreichbar. */
.no-js .marquee,
.marquee:not(.is-ready){ overflow-x:auto; scrollbar-width:thin; }
@media (prefers-reduced-motion:reduce){
  .marquee{ overflow-x:auto; scrollbar-width:thin; }
  .marquee__track{ animation:none; }
}

/* Beratungssprachen: dieselbe Mechanik, eine Zeile Chips statt Karten. Eine
   Reihe ist rund 1.050 px lang und damit breiter als die Spalte – nur dann
   schliesst der Umlauf ohne Luecke. Ohne Skript und bei reduzierter Bewegung
   brechen die Chips wie frueher um, statt eine Bildlaufleiste zu bekommen. */
.marquee--langs{ --mq-gap:8px; --mq-dur:40s; margin-top:var(--s-5); padding:2px 0; }
.marquee--langs .langs{ margin-top:0; flex-wrap:nowrap; }
.marquee--langs .langs li{ flex:none; white-space:nowrap; }
.no-js .marquee--langs,
.marquee--langs:not(.is-ready){ overflow:visible; -webkit-mask-image:none; mask-image:none; }
.no-js .marquee--langs .langs,
.marquee--langs:not(.is-ready) .langs{ flex-wrap:wrap; width:auto; }

.review{
  display:flex; flex-direction:column; gap:var(--s-3);
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s-5); box-shadow:var(--sh-1);
}
.review__head{ display:flex; align-items:center; gap:12px; }
.review__avatar{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%; flex:none;
  background:var(--navy); color:#fff; font-family:Montserrat,sans-serif; font-weight:700; font-size:16px;
}
.review__name{ font-family:Montserrat,sans-serif; font-weight:700; font-size:15.5px; color:var(--navy); }
.review__date{ font-size:13.5px; color:var(--muted); }
.review__text{ font-size:15.5px; color:var(--text); }

/* ---------- 13. Partner & Footer ----------------------------------------- */
.partners{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:clamp(16px,2.6vw,28px); }
/* Die Logos bringen einen weissen Hintergrund mit. Damit dessen Kante auf der
   getoenten Flaeche nicht als Rechteck auffaellt, sitzt jedes Logo bewusst auf
   einer weissen Kachel gleicher Hoehe. */
.partners > *{
  display:flex; align-items:center; justify-content:center;
  flex:0 1 246px; min-height:112px; padding:20px clamp(20px,3vw,30px);
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--sh-1);
}
/* Nur die verlinkte Kachel (ARCD) reagiert auf den Zeiger. */
.partners > a{ transition:box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.partners > a:hover{ box-shadow:var(--sh-2); border-color:#C7D6E6; }
/* Sehr unterschiedliche Seitenverhaeltnisse: statt einer festen Hoehe (die den
   breiten Schriftzug in die Breite zog) begrenzen wir Breite und Hoehe – das
   Bild waehlt selbst, welche Kante zuerst anschlaegt, und bleibt unverzerrt. */
.partners img{
  width:auto; height:auto; max-width:100%; max-height:68px; object-fit:contain;
}
@media (max-width:520px){
  .partners > *{ flex:1 1 100%; min-height:96px; }
  .partners img{ max-height:60px; }
}
.partner{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:10px 18px;
  border:1px solid var(--border); border-radius:var(--r-md); background:#fff;
  color:var(--navy); font-family:Montserrat,sans-serif; font-weight:700; font-size:15px;
  text-decoration:none; box-shadow:var(--sh-1);
  transition:box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.partner:hover{ box-shadow:var(--sh-2); border-color:#C7D6E6; color:var(--navy); }
.partner small{ display:block; font-family:"Open Sans",sans-serif; font-weight:400; font-size:13px; color:var(--muted); }

.footer{ background:var(--navy); color:var(--on-dark-muted); padding-block:clamp(48px,6vw,72px) var(--s-6); }
.footer a{ color:var(--on-dark-muted); text-decoration:none; }
.footer a:hover{ color:#fff; text-decoration:underline; }
.footer__grid{ display:grid; gap:clamp(28px,4vw,48px); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
/* Breite statt Hoehe vorgeben: Eine Fussspalte ist am Desktop nur rund 260 px
   breit. Mit fester Hoehe (54 px = 370 px Breite) kappte max-width:100% die
   Breite, die Hoehe blieb stehen – das Logo wurde gestaucht. */
.footer__logo{ width:min(100%,300px); height:auto; margin-bottom:var(--s-4); }
.footer h3{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:var(--s-4); }
.footer ul{ list-style:none; display:grid; gap:6px; }
.footer li a{ display:inline-flex; align-items:center; min-height:36px; font-size:15.5px; }
.footer address{ font-style:normal; font-size:15.5px; }
.social{ display:flex; gap:10px; margin-top:var(--s-4); }
.social a{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff;
  transition:background var(--dur-fast) var(--ease);
}
.social a:hover{ background:rgba(255,255,255,.22); }
.social svg{ width:21px; height:21px; }
.footer__bar{
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); justify-content:space-between; align-items:center;
  margin-top:clamp(36px,5vw,56px); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.16); font-size:14.5px;
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:var(--s-4); list-style:none; }

/* ---------- 14. Dialoge -------------------------------------------------- */
dialog{
  width:min(100% - 32px, 620px); padding:0; border:0; border-radius:var(--r-xl);
  background:#fff; color:var(--text); box-shadow:var(--sh-4);
}
dialog::backdrop{ background:rgba(11,20,35,.62); backdrop-filter:blur(3px); }
dialog[open]{ animation:dlg-in var(--dur) var(--ease); }
@keyframes dlg-in{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
.dlg__head{ display:flex; align-items:flex-start; gap:var(--s-4); padding:clamp(22px,3vw,30px) clamp(22px,3vw,30px) 0; }
.dlg__title{ font-size:22px; }
.dlg__close{
  margin-left:auto; flex:none; display:grid; place-items:center; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.dlg__close:hover{ background:var(--navy-050); }
.dlg__close svg{ width:18px; height:18px; }
.dlg__body{ padding:var(--s-4) clamp(22px,3vw,30px) clamp(22px,3vw,30px); }
.dlg__list{ list-style:none; display:grid; gap:10px; }
.dlg__list a{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:0 18px;
  border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none;
  color:var(--text); font-weight:600;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dlg__list a:hover{ background:var(--navy-050); border-color:var(--navy); color:var(--navy); }
.dlg__list svg{ width:18px; height:18px; margin-left:auto; flex:none; color:var(--blue); }
.dlg__note{
  margin-top:var(--s-4); padding:var(--s-4); border-radius:var(--r-md);
  background:var(--blue-050); border:1px solid #D6E5F5; font-size:14.5px; color:var(--text);
}
.dlg__note p + p{ margin-top:var(--s-3); }

/* Personen-Dialog */
.pdlg{ display:grid; gap:var(--s-4); }
.pdlg__top{ display:flex; align-items:center; gap:var(--s-4); }
.pdlg__img{ width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:top center; flex:none; background:var(--navy-050); }
.pdlg__name{ font-size:22px; color:var(--navy); }
.pdlg__role{ margin-top:4px; color:var(--muted); font-size:15px; }
.pdlg__rows{ list-style:none; display:grid; gap:4px; }
.pdlg__rows a,.pdlg__rows span{ display:flex; align-items:center; gap:12px; min-height:48px; font-size:15.5px; word-break:break-word; }
.pdlg__rows svg{ width:19px; height:19px; flex:none; color:var(--blue); }

/* Video-Dialog */
dialog.vdlg{ width:min(100% - 24px, 980px); background:#0B1423; }
.vdlg .dlg__head{ padding:16px 16px 0; }
.vdlg .dlg__title{ color:#fff; font-size:18px; }
.vdlg .dlg__close{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:#fff; }
.vdlg .dlg__close:hover{ background:rgba(255,255,255,.26); }
.vdlg .dlg__body{ padding:16px; }
.vdlg video{ width:100%; aspect-ratio:16/9; border-radius:var(--r-md); background:#000; }

/* ---------- 14a. Erstinformation vor der Terminanfrage -------------------
   § 15 VersVermV verlangt die Erstinformation beim ersten Geschaeftskontakt.
   Eine Terminanfrage ist genau das – deshalb liegt dieser kurze Hinweis
   davor, mit dem Weg zur vollstaendigen Fassung. Bewusst knapp: Die
   Pflichtangaben in Langform stehen unter /erstinfo/ und im PDF.

   Ohne JavaScript fuehrt der Terminknopf direkt auf /erstinfo/ – dort steht
   dasselbe und der Weg zu WhatsApp gleich mit. Der Hinweis laesst sich also
   nicht umgehen.                                                          */
.erst{ display:grid; gap:var(--s-4); }
.erst__facts{
  list-style:none; display:grid; gap:8px;
  padding:var(--s-4); border-radius:var(--r-md);
  background:var(--surface-alt); border:1px solid var(--border);
  font-size:14.5px; color:var(--text);
}
.erst__facts b{ display:block; font-family:Montserrat,sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.erst__facts li + li{ padding-top:8px; border-top:1px solid var(--border); }
.erst__links{ list-style:none; display:grid; gap:8px; }
.erst__links a{
  display:flex; align-items:center; gap:10px; min-height:48px; padding:0 16px;
  border:1px solid var(--border); border-radius:var(--r-md);
  text-decoration:none; color:var(--text); font-weight:600; font-size:15px;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.erst__links a:hover{ background:var(--navy-050); border-color:var(--navy); color:var(--navy); }
.erst__links svg{ width:18px; height:18px; flex:none; color:var(--blue); }
.erst__go{ margin-top:var(--s-1); }
/* Auf den Funnel-Seiten setzt funnel.css .btn auf nowrap – hier darf die
   Beschriftung notfalls umbrechen, statt aus dem Knopf zu laufen. */
.erst__go .btn{ width:100%; padding:0 16px; white-space:normal; line-height:1.3; }

/* ---------- 14b. WhatsApp-Knopf ------------------------------------------
   Sitzt fest in der unteren rechten Ecke und scrollt mit. Der Knopf ist ein
   gewoehnlicher Link – ohne Skript, ohne eingebettetes WhatsApp-Widget und
   damit ohne zusaetzliche Verbindung zu Meta. Erst der Klick oeffnet
   WhatsApp; vorher wird nichts geladen.

   Bewusst unter der Menue-Ebene (--z-float < --z-drawer), damit er das
   geoeffnete Mobilmenue und Dialoge nicht ueberlagert.                    */
.wa-fab{
  position:fixed; right:clamp(14px,3.5vw,26px); bottom:clamp(14px,3.5vw,26px);
  z-index:var(--z-float);
  display:grid; place-items:center; width:58px; height:58px;
  border-radius:50%; background:#25D366; color:#fff;
  box-shadow:0 6px 18px rgba(16,74,40,.34), 0 2px 6px rgba(16,74,40,.24);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur-fast) var(--ease);
}
.wa-fab:hover{ background:#1FBA59; color:#fff; transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,74,40,.4); }
.wa-fab:active{ transform:translateY(0); }
.wa-fab svg{ width:31px; height:31px; }
/* Der ruhige Puls macht den Knopf auffindbar, ohne zu blinken. Er laeuft
   dreimal und haelt dann an – Dauerbewegung waere im Sichtfeld stoerend. */
.wa-fab::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:wa-ping 2.4s var(--ease) 3;
}
@keyframes wa-ping{
  0%{ transform:scale(1); opacity:.7; }
  70%,100%{ transform:scale(1.55); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .wa-fab::before{ animation:none; } }
/* Ist das Mobilmenue offen, waere der Knopf nur ein Fremdkoerper darueber. */
.drawer.is-open ~ .wa-fab{ opacity:0; visibility:hidden; }

/* ---------- 15. Einblenden beim Scrollen --------------------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 520ms var(--ease), transform 520ms var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }
.no-js .reveal{ opacity:1; transform:none; }

/* ---------- 16. Rechts- und Textseiten ----------------------------------- */
.page-head{ background:var(--navy); color:var(--on-dark); padding-block:clamp(48px,7vw,84px); }
.page-head h1{ font-size:clamp(30px,4.6vw,46px); }
.page-head p{ margin-top:var(--s-4); color:var(--on-dark-muted); max-width:60ch; }
.crumb{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; font-size:14.5px; margin-bottom:var(--s-4); color:var(--on-dark-muted); }
.crumb a{ color:#8FC3F0; text-decoration:none; }
.crumb a:hover{ text-decoration:underline; color:#fff; }
.crumb li + li::before{ content:"/"; margin-right:8px; opacity:.6; }

.prose{ max-width:75ch; }
.prose h2{ font-size:clamp(22px,2.6vw,28px); margin-top:clamp(36px,4vw,52px); padding-top:var(--s-5); border-top:1px solid var(--border); }
.prose > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:19px; margin-top:var(--s-6); color:var(--navy); }
.prose h4{ font-size:17px; margin-top:var(--s-5); color:var(--navy); font-family:"Open Sans",sans-serif; }
.prose p{ margin-top:var(--s-4); color:var(--muted); }
.prose ul{ margin-top:var(--s-4); padding-left:22px; list-style:disc; color:var(--muted); display:grid; gap:8px; }
.prose a{ word-break:break-word; }
.prose .upper{ text-transform:uppercase; font-size:15px; }
.prose address{ font-style:normal; margin-top:var(--s-4); color:var(--muted); }
.prose__toc{
  margin-top:var(--s-5); padding:var(--s-5); background:var(--surface-alt);
  border:1px solid var(--border); border-radius:var(--r-lg);
}
.prose__toc h2{ margin:0; padding:0; border:0; font-size:17px; }
.prose__toc ol{ margin-top:var(--s-3); padding-left:20px; display:grid; gap:6px; }
.prose__toc a{ min-height:32px; display:inline-flex; align-items:center; }

/* ---------- 17. Hilfsklassen --------------------------------------------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.center{ text-align:center; }
.mt-5{ margin-top:var(--s-5); }
.mt-6{ margin-top:var(--s-6); }
.mt-7{ margin-top:var(--s-7); }
.tabular{ font-variant-numeric:tabular-nums; }