/* ============================================================
   Maria Lengemann 2027
   Aufbau:
     1. Marken-Tokens
     2. Flaechen-Varianten (weiss, grau, petrol, beere)
     3. Grundlagen und Typografie
     4. Bausteine (Buttons, Kicker, Konturschrift, Links)
     5. Kopf- und Fussbereich
     6. Module, je Modul ein Block
     7. Scroll-Animationen
     8. Responsiv

   Regel fuer neue Module: niemals feste Farben schreiben, immer die
   --f-Tokens aus Abschnitt 2 nutzen. Dann dreht das Modul die Schrift-,
   Linien- und Buttonfarben automatisch mit, sobald jemand im Backend
   die Flaeche umstellt.
   ============================================================ */

/* ============================================================
   1. Marken-Tokens
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Markenfarben */
  --petrol:#2FC0AE;         /* Akzent, Buttons, Links, Linien, Schraffur */
  --petrol-tief:#1C8A80;    /* dunkleres Petrol: Laufleiste, Hover, Text auf Hell */
  --auf-petrol:#081413;     /* Text auf Petrol, fast schwarz, nie weiss */

  --beere:#8E2A55;          /* Flaechenfarbe */
  --beere-hell:#D96A96;     /* Schrift, Raender, Icons auf dunklem Grund */
  --auf-beere:#FFF4F8;      /* helle Schrift auf Beere-Flaeche */
  --beere-hauch:#FBF2F6;

  --weiss:#FFFFFF;
  --grau:#F4F2F3;
  --linie:#E4DFE2;

  --ink:#17131A;            /* Fliesstext und Ueberschriften */
  --muted:#5E5860;
  --dim:#8B848F;

  --maxw:1320px;
  --pad:clamp(1.25rem,5vw,4.5rem);

  /* Breite ohne Bildlaufleiste. 100vw zaehlt sie mit und erzeugt sonst
     einen waagerechten Ueberlauf. Den Wert setzt theme.js. */
  --sbw:0px;
  --vw:calc(100vw - var(--sbw));

  --easing:cubic-bezier(.22,.61,.36,1);
  --easing-out:cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   2. Flaechen-Varianten
   Jede Sektion traegt genau eine dieser Klassen. Sie definiert die
   --f-Tokens neu, alles darin folgt automatisch.
   ============================================================ */
/* Die Standardwerte stehen zusaetzlich global, damit Bausteine ausserhalb
   einer Sektion (Kopfleiste, Fussbereich) ebenfalls Farben haben. Innerhalb
   einer Sektion ueberschreibt .flaeche sie. */
:root,
.flaeche{
  --f-grund:var(--weiss);
  --f-titel:var(--ink);
  --f-text:var(--muted);
  --f-kicker:var(--beere);
  --f-strich:var(--petrol);
  --f-linie:var(--linie);
  --f-akzent:var(--petrol-tief);   /* Akzentschrift, muss auf der Flaeche lesbar sein */
  --f-deko:var(--petrol);          /* Deko-Flaechen, Ringe, Quadrate */

  --f-btn-bg:var(--beere);
  --f-btn-fg:var(--auf-beere);
  --f-btn-fill:var(--petrol);
  --f-btn-fill-fg:var(--auf-petrol);

  --f-btn2-fg:var(--ink);
  --f-btn2-linie:var(--linie);
  --f-btn2-fill:var(--beere);
  --f-btn2-fill-fg:var(--auf-beere);
}

.flaeche{
  background:var(--f-grund);
  color:var(--f-text);
}

.flaeche--grau{ --f-grund:var(--grau); }

.flaeche--petrol{
  --f-grund:var(--petrol);
  --f-titel:var(--auf-petrol);
  --f-text:rgba(8,20,19,.8);
  --f-kicker:var(--auf-petrol);
  --f-strich:var(--auf-petrol);
  --f-linie:rgba(8,20,19,.22);
  --f-akzent:var(--auf-petrol);
  --f-deko:var(--auf-petrol);

  --f-btn-bg:var(--auf-petrol);
  --f-btn-fg:var(--weiss);
  --f-btn-fill:var(--weiss);
  --f-btn-fill-fg:var(--auf-petrol);

  --f-btn2-fg:var(--auf-petrol);
  --f-btn2-linie:rgba(8,20,19,.32);
  --f-btn2-fill:var(--auf-petrol);
  --f-btn2-fill-fg:var(--weiss);
}

.flaeche--beere{
  --f-grund:var(--beere);
  --f-titel:var(--auf-beere);
  --f-text:rgba(255,244,248,.82);
  --f-kicker:var(--auf-beere);
  --f-strich:var(--petrol);
  --f-linie:rgba(255,244,248,.24);
  --f-akzent:var(--petrol);
  --f-deko:var(--petrol);

  --f-btn-bg:var(--auf-beere);
  --f-btn-fg:var(--beere);
  --f-btn-fill:var(--petrol);
  --f-btn-fill-fg:var(--auf-petrol);

  --f-btn2-fg:var(--auf-beere);
  --f-btn2-linie:rgba(255,244,248,.34);
  --f-btn2-fill:var(--auf-beere);
  --f-btn2-fill-fg:var(--beere);
}

/* ============================================================
   3. Grundlagen und Typografie
   ============================================================ */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--weiss);color:var(--ink);
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Sora',sans-serif;line-height:1.02;letter-spacing:-.035em;font-weight:700;color:var(--f-titel,var(--ink))}
p{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
/* Sprungmarke vor einer Sektion. Der Abstand nach oben haelt die
   Kopfleiste von der Ueberschrift fern. */
.ml27-anker{display:block;height:0;overflow:hidden;scroll-margin-top:6rem}

.h-xl{font-size:clamp(2.6rem,16.5cqi,7rem);font-weight:800}
.h-lg{font-size:clamp(2.4rem,6vw,5rem)}
.h-md{font-size:clamp(1.75rem,3.2vw,2.75rem)}

.lead{font-size:clamp(1.05rem,1rem + .5vw,1.35rem);line-height:1.6;max-width:56ch;color:var(--f-text)}

.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;word-wrap:normal!important}
.skip-link:focus{position:fixed;top:1rem;left:1rem;z-index:200;background:var(--ink);color:var(--weiss);padding:.8rem 1.2rem;border-radius:.6rem;clip:auto;width:auto;height:auto}

/* ============================================================
   4. Bausteine
   ============================================================ */

/* Kicker */
.kicker{
  font-size:.82rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f-kicker);display:inline-flex;align-items:center;gap:.7rem;
}
.kicker::before{content:'';width:2.6rem;height:2px;background:var(--f-strich);flex:none}

/* Konturschrift ohne Innenlinien.
   -webkit-text-stroke umrandet jeden Teilpfad einer Glyphe einzeln. Sora
   setzt ihre Buchstaben aus ueberlappenden Teilpfaden zusammen, dadurch
   entstehen dort Linien quer durch die Buchstaben. Der Umriss kommt
   deshalb aus versetzten Schatten der gefuellten Form. --kgrund muss die
   Flaeche hinter dem Text sein. */
.kontur{
  --kfarbe:currentColor;--kdicke:1px;--kgrund:var(--f-grund);
  color:var(--kgrund);
  text-shadow:
    calc(var(--kdicke) * -1) 0 var(--kfarbe),
    var(--kdicke) 0 var(--kfarbe),
    0 calc(var(--kdicke) * -1) var(--kfarbe),
    0 var(--kdicke) var(--kfarbe),
    calc(var(--kdicke) * -.72) calc(var(--kdicke) * -.72) var(--kfarbe),
    calc(var(--kdicke) * .72) calc(var(--kdicke) * -.72) var(--kfarbe),
    calc(var(--kdicke) * -.72) calc(var(--kdicke) * .72) var(--kfarbe),
    calc(var(--kdicke) * .72) calc(var(--kdicke) * .72) var(--kfarbe);
}

/* Buttons: Fuellung waechst aus der Grundlinie, Beschriftung rollt */
.btn{
  --bg:var(--f-btn-bg);--fg:var(--f-btn-fg);--fill:var(--f-btn-fill);--fill-fg:var(--f-btn-fill-fg);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.7rem;padding:1.15rem 2.4rem;min-height:3.9rem;
  font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
  background:var(--bg);color:var(--fg);border:0;border-radius:999px;
  overflow:hidden;isolation:isolate;cursor:pointer;
  transition:color .38s var(--easing);
}
.btn__fill{
  position:absolute;left:50%;bottom:0;z-index:-1;
  width:150%;aspect-ratio:1;translate:-50% 0;
  background:var(--fill);border-radius:50%;
  transform:translateY(90%) scale(.28);
  transition:transform .58s var(--easing-out);
}
.btn:hover .btn__fill,.btn:focus-visible .btn__fill{transform:translateY(18%) scale(1)}
.btn:hover,.btn:focus-visible{color:var(--fill-fg)}
.btn__label{display:block;position:relative;overflow:hidden;height:1.35em}
.btn__label span{display:block;transition:transform .42s var(--easing-out)}
.btn__label span+span{position:absolute;inset:0;transform:translateY(105%)}
.btn:hover .btn__label span,.btn:focus-visible .btn__label span{transform:translateY(-105%)}
.btn:hover .btn__label span+span,.btn:focus-visible .btn__label span+span{transform:translateY(0)}

.btn--zweit{
  --bg:transparent;--fg:var(--f-btn2-fg);--fill:var(--f-btn2-fill);--fill-fg:var(--f-btn2-fill-fg);
  box-shadow:inset 0 0 0 1.5px var(--f-btn2-linie);
}

/* Textlink mit wachsender Unterstreichung */
.tlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Sora',sans-serif;font-weight:600;color:var(--f-kicker);
  padding-block:.3rem;position:relative;
}
.tlink::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--f-strich);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--easing-out);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);transform-origin:left}
.tlink svg{transition:translate .38s var(--easing-out)}
.tlink:hover svg{translate:.35rem 0}

/* Kennzahl-Karte, liegt auf einem Bild */
.zahl{
  position:absolute;z-index:3;
  background:var(--beere);color:var(--auf-beere);
  border-radius:1.4rem;padding:1.5rem 1.9rem;
  display:flex;align-items:center;gap:1.1rem;
  box-shadow:0 40px 70px -34px rgba(110,31,65,.75);
}
.zahl b{font-family:'Sora',sans-serif;font-weight:800;line-height:.86;letter-spacing:-.05em;font-size:clamp(3.4rem,5.2vw,4.6rem)}
.zahl span{font-family:'Sora',sans-serif;font-weight:600;line-height:1.2;letter-spacing:-.015em;font-size:clamp(1rem,1.3vw,1.18rem);max-width:14ch}
.zahl--petrol{background:var(--auf-petrol);color:var(--weiss);box-shadow:0 40px 70px -34px rgba(8,20,19,.7)}

/* Zeilenweise einlaufende Ueberschrift.
   Das Innenmass unten gibt den Unterlaengen Platz, sonst kappt
   overflow das g und das y. */
.zeile{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.zeile>span{display:block;transform:translateY(110%);transition:transform 1s var(--easing-out);transition-delay:var(--d,0ms)}
.zeile.sichtbar>span{transform:translateY(0)}

/* ============================================================
   5. Kopf- und Fussbereich
   ============================================================ */
.hdr{position:sticky;top:0;z-index:90;padding:1.4rem var(--pad);transition:padding .5s var(--easing-out)}
.hdr__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:.55rem .55rem .55rem .6rem;border-radius:999px;
  background:transparent;box-shadow:0 0 0 0 rgba(23,19,26,0);
  transition:background .5s var(--easing-out),box-shadow .5s var(--easing-out),padding .5s var(--easing-out);
}
.hdr.angedockt{padding-block:.7rem}
.hdr.angedockt .hdr__inner{
  background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 24px 60px -34px rgba(23,19,26,.55),inset 0 0 0 1px rgba(23,19,26,.06);
  padding-inline:1.1rem .55rem;
}

.brand{display:flex;align-items:center;gap:1rem;flex:none}
.brand__mark{
  width:3.6rem;height:3.6rem;border-radius:50%;flex:none;
  display:grid;place-items:center;position:relative;isolation:isolate;
  background:var(--beere);color:var(--auf-beere);
  font-family:'Sora',sans-serif;font-weight:800;font-size:1.18rem;letter-spacing:.01em;
  transition:color .4s var(--easing);overflow:hidden;
}
.brand__mark img{width:100%;height:100%;object-fit:cover}
.brand__mark::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--petrol);border-radius:50%;transform:scale(0);transition:transform .55s var(--easing-out)}
.brand:hover .brand__mark{color:var(--auf-petrol)}
.brand:hover .brand__mark::before{transform:scale(1)}
.brand__mark::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--petrol);z-index:-2;transform:scale(.86);opacity:0;transition:transform .55s var(--easing-out),opacity .45s}
.brand:hover .brand__mark::after{transform:scale(1);opacity:1}
.brand__name{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:1.32rem;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.brand__role{display:block;margin-top:.3rem;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

.nav{display:flex;align-items:center;gap:2.4rem;list-style:none}
.nav__item{position:relative}
.nav__link{
  display:block;position:relative;overflow:hidden;height:1.6em;line-height:1.6;
  font-family:'Sora',sans-serif;font-size:1.04rem;font-weight:600;letter-spacing:-.015em;
  background:none;border:0;color:var(--ink);cursor:pointer;
}
.nav__link>span:not(.rolle),.rolle>span{display:block;transition:transform .45s var(--easing-out)}
.nav__link>span:not(.rolle)+span,.rolle>span+span{position:absolute;inset:0;transform:translateY(105%);color:var(--beere)}
.nav__item:hover .nav__link>span:not(.rolle),.nav__item:hover .rolle>span,
.nav__link:focus-visible>span:not(.rolle),.nav__link:focus-visible .rolle>span{transform:translateY(-105%)}
.nav__item:hover .nav__link>span:not(.rolle)+span,.nav__item:hover .rolle>span+span,
.nav__link:focus-visible>span:not(.rolle)+span,.nav__link:focus-visible .rolle>span+span{transform:translateY(0)}

.nav__trigger{display:flex;align-items:center;gap:.45rem;overflow:visible;height:1.6em}
.nav__trigger .rolle{position:relative;overflow:hidden;height:1.6em;line-height:1.6;display:block}
.nav__trigger svg{transition:rotate .35s var(--easing-out);flex:none}
.nav__item:hover .nav__trigger svg{rotate:180deg}

.nav__menu{
  position:absolute;top:calc(100% + 1.4rem);left:50%;translate:-50% 0;min-width:16rem;
  background:var(--weiss);border-radius:1.3rem;padding:.5rem;list-style:none;
  box-shadow:0 34px 70px -34px rgba(23,19,26,.5),inset 0 0 0 1px rgba(23,19,26,.07);
  opacity:0;visibility:hidden;transform:translateY(-.6rem);
  transition:opacity .35s,transform .35s var(--easing-out),visibility .35s;
}
.nav__item:hover .nav__menu,.nav__item:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav__menu a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1rem;border-radius:.9rem;color:var(--ink);
  font-family:'Sora',sans-serif;font-weight:600;font-size:1rem;
  transition:background .3s,color .3s;
}
.nav__menu a:hover{background:var(--beere-hauch);color:var(--beere)}
.nav .btn{padding:.85rem 1.8rem;min-height:3.3rem}

.burger{
  display:none;width:2.4rem;height:2.4rem;flex:none;padding:0;
  border:0;background:none;cursor:pointer;position:relative;z-index:2;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;
}
.burger span{
  display:block;height:2.5px;border-radius:2px;background:var(--ink);
  transition:width .35s var(--easing-out),transform .45s var(--easing-out),background .3s;
}
.burger span:nth-child(1){width:30px}
.burger span:nth-child(2){width:22px}

/* Geoeffnet kreuzen sich beide Striche. Auf dem dunklen Vollbild-Menue
   muessen sie hell sein, sonst waeren sie unsichtbar. */
body.menue-offen .burger span{width:30px;background:var(--weiss)}
body.menue-offen .burger span:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
body.menue-offen .burger span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg)}

/* Bei offenem Menue steht der Kopfbereich auf dunklem Grund, Wortmarke
   und Zusatzzeile muessen dort hell sein. */
body.menue-offen .hdr{z-index:95}
body.menue-offen .brand__name{color:var(--weiss)}
body.menue-offen .brand__role{color:rgba(255,255,255,.6)}
body.menue-offen .hdr__inner{background:transparent;box-shadow:none}

/* Vollbild-Menue */
.overlay{
  position:fixed;inset:0;z-index:85;background:var(--ink);color:var(--weiss);
  display:flex;flex-direction:column;justify-content:center;gap:.35rem;
  padding:7rem var(--pad) 3rem;list-style:none;
  clip-path:circle(0% at calc(100% - 3.5rem) 3.5rem);
  transition:clip-path .8s var(--easing-out);overflow-y:auto;
}
body.menue-offen .overlay{clip-path:circle(150% at calc(100% - 3.5rem) 3.5rem)}
body.menue-offen{overflow:hidden}
.overlay a{
  font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(2rem,9vw,3.4rem);line-height:1.18;color:var(--weiss);
  opacity:0;transform:translateY(1.2rem);
  transition:opacity .5s var(--easing-out),transform .6s var(--easing-out),color .3s;
}
body.menue-offen .overlay a{opacity:1;transform:none;transition-delay:calc(var(--i) * 60ms + 180ms)}
.overlay a:hover{color:var(--petrol)}
.overlay__klein{
  margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1.4rem;
  opacity:0;transform:translateY(1.2rem);
  transition:opacity .5s var(--easing-out),transform .6s var(--easing-out);
}
body.menue-offen .overlay__klein{opacity:1;transform:none;transition-delay:calc(var(--i) * 60ms + 180ms)}
.overlay__klein a{font-size:1rem;font-family:'Inter',sans-serif;font-weight:500;color:rgba(255,255,255,.66);opacity:1;transform:none}

.footer{
  background:var(--ink);color:rgba(255,255,255,.72);
  padding-block:clamp(4rem,7vw,6rem) 0;overflow:hidden;
}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,4rem)}
.footer__brand p{max-width:38ch;font-size:.98rem}
.footer h4{
  font-family:'Sora',sans-serif;font-size:.86rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--petrol);margin-bottom:1.4rem;font-weight:700;
}
.footer ul{list-style:none;display:grid;gap:.8rem}
.footer ul a{font-size:1rem;position:relative;display:inline-block}
.footer ul a::after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--petrol);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--easing-out)}
.footer ul a:hover{color:var(--weiss)}
.footer ul a:hover::after{transform:scaleX(1);transform-origin:left}
.footer__bottom{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.9rem}
.footer__bottom a:hover{color:var(--weiss)}
/* Der Knopf sieht aus wie die Rechtslinks daneben. */
.cookie-knopf{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;position:relative;
}
.cookie-knopf::after{
  content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--petrol);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--easing-out);
}
.cookie-knopf:hover{color:var(--weiss)}
.cookie-knopf:hover::after{transform:scaleX(1);transform-origin:left}
.footer__zug{
  margin-top:clamp(2rem,4vw,3.5rem);text-align:center;
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.01em;line-height:.82;
  font-size:clamp(2.2rem,10.2vw,9.5rem);
  --kgrund:var(--ink);--kfarbe:rgba(255,255,255,.3);--kdicke:1.4px;
  white-space:nowrap;user-select:none;
  /* Liegt auf der Unterkante auf und wird dort vom Fussbereich
     angeschnitten. Den Grund darunter deckt die Flaeche in body::after ab. */
  transform:translateY(.14em);
}

/* Faengt den Bereich ab, den mobile Browser beim Ueberscrollen unter der
   Seite zeigen. Liegt hinter allem und ist nur dort sichtbar. */
body::after{
  content:'';position:fixed;left:0;right:0;bottom:0;height:50vh;
  background:var(--ink);z-index:-1;pointer-events:none;
}

/* ============================================================
   6. Module
   ============================================================ */

/* Grundabstand jeder Sektion, per ACF ueberschreibbar */
.sek{
  padding-block:var(--abstand-oben,clamp(4.5rem,9vw,8.5rem)) var(--abstand-unten,clamp(4.5rem,9vw,8.5rem));
  /* Deko-Flaechen und randlose Bilder duerfen nach aussen ragen, aber nie
     die Seite waagerecht scrollbar machen. */
  overflow-x:clip;
}
.sek__kopf{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sek__kopf h2{margin:1.3rem 0 1.1rem}
.sek__kopf--mitte{margin-inline:auto;text-align:center}
.sek__kopf--mitte .kicker{justify-content:center}

/* --- Modul: hero_person ------------------------------------ */
.s-hero_person{position:relative;overflow:clip;padding-block:var(--abstand-oben,clamp(2rem,4vw,3.5rem)) var(--abstand-unten,clamp(4rem,8vw,8rem))}
.s-hero_person__grid{
  max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.s-hero_person__text{container-type:inline-size}
.s-hero_person h1{margin:1.6rem 0 .9rem}
/* Kompakte Fassung fuer lange Ueberschriften, damit der Kopfbereich in den
   ersten Bildschirm passt. */
.s-hero_person--kompakt h1{font-size:clamp(2.2rem,10.5cqi,4.4rem)}
.s-hero_person__rollen{
  font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(1.05rem,1.6vw,1.4rem);
  color:var(--f-akzent);letter-spacing:-.01em;margin-bottom:1.5rem;
}
.s-hero_person .lead{margin-bottom:2.4rem}
.s-hero_person__btns{display:flex;flex-wrap:wrap;gap:1rem}
.s-hero_person__media{position:relative;justify-self:end;width:100%}
.s-hero_person__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:1.5rem 0 0 1.5rem}
.s-hero_person__ring{position:absolute;right:-3rem;top:-3rem;width:11rem;height:11rem;border-radius:50%;border:1.5px solid var(--f-deko);opacity:.55;z-index:-1}
.s-hero_person .zahl{left:-3.5rem;bottom:3.5rem}
/* Spiegelverkehrte Fassung: Bild an der linken Fensterkante. */
.s-hero_person--links .s-hero_person__grid{
  padding-left:0;padding-right:var(--pad);
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
}
.s-hero_person--links .s-hero_person__media{order:-1;justify-self:start}
.s-hero_person--links .s-hero_person__media img{border-radius:0 1.5rem 1.5rem 0}
.s-hero_person--links .s-hero_person__ring{right:auto;left:-3rem}
.s-hero_person--links .zahl{left:auto;right:-2rem;bottom:2.6rem}

/* --- Modul: karten_drei ------------------------------------ */
.s-karten_drei__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.2vw,1.8rem);align-items:start}
.s-karten_drei__karte{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--weiss);border-radius:1.6rem;color:var(--ink);
  padding:clamp(2rem,2.8vw,2.8rem) clamp(1.8rem,2.4vw,2.4rem) clamp(3.4rem,4.6vw,4.6rem);
  box-shadow:inset 0 0 0 1px var(--linie);
  transition:box-shadow .5s,color .45s var(--easing);
}
.s-karten_drei__karte:nth-child(2){margin-top:clamp(1rem,3vw,3rem)}
.s-karten_drei__karte:nth-child(3){margin-top:clamp(.5rem,1.5vw,1.5rem)}
.s-karten_drei__fuellung{position:absolute;inset:0;z-index:-1;background:var(--petrol);transform:translateY(101%);transition:transform .65s var(--easing-out)}
.s-karten_drei__karte:hover{box-shadow:0 46px 80px -44px rgba(23,19,26,.55),inset 0 0 0 1px transparent;color:var(--auf-petrol)}
.s-karten_drei__karte:hover .s-karten_drei__fuellung{transform:translateY(0)}
.s-karten_drei__num{
  font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(3.6rem,5vw,5.2rem);
  line-height:.8;letter-spacing:0;display:block;margin-bottom:1.4rem;
  --kgrund:var(--weiss);--kfarbe:var(--linie);--kdicke:1.3px;
  transition:color .45s var(--easing),text-shadow .45s var(--easing);
}
.s-karten_drei__karte:hover .s-karten_drei__num{--kgrund:var(--petrol);--kfarbe:rgba(8,20,19,.45)}

/* Die Ziffer fuellt sich beim Scrollen von unten nach oben. Die gefuellte
   Kopie liegt deckungsgleich ueber der Kontur, --fuellung setzt theme.js. */
.s-karten_drei__num{position:relative}
.s-karten_drei__voll{
  position:absolute;left:0;top:0;text-shadow:none;
  color:var(--f-kicker);
  clip-path:inset(calc(100% - var(--fuellung,0%)) 0 0 0);
  transition:clip-path .18s linear,color .45s var(--easing);
}
.s-karten_drei__karte:hover .s-karten_drei__voll{color:var(--auf-petrol)}
.s-karten_drei__karte h3{font-size:clamp(1.4rem,2.1vw,1.85rem);margin-bottom:.9rem;color:inherit}
.s-karten_drei__karte p{color:var(--muted);font-size:1rem;transition:color .45s var(--easing)}
.s-karten_drei__karte:hover p{color:rgba(8,20,19,.82)}
.s-karten_drei__pfeil{position:absolute;right:clamp(1.8rem,2.4vw,2.4rem);bottom:clamp(1.8rem,2.4vw,2.4rem);opacity:0;translate:-.6rem .6rem;transition:opacity .45s,translate .55s var(--easing-out)}
.s-karten_drei__karte:hover .s-karten_drei__pfeil{opacity:1;translate:0 0}

/* --- Modul: karten_raster ----------------------------------
   Gleiche Optik wie karten_drei, die Spaltenzahl steht am Modul.
   Die Fuellung beim Ueberfahren und die Ziffernfarbe folgen der
   Auswahl im Backend, Vorgabe ist die Flaechenfarbe. */
.s-karten_raster{--kr-fuell:var(--petrol);--kr-fuell-fg:var(--auf-petrol);--kr-spalten:3}
.s-karten_raster--sp2{--kr-spalten:2}
.s-karten_raster--sp3{--kr-spalten:3}
.s-karten_raster--sp4{--kr-spalten:4}
.s-karten_raster--beere{--kr-fuell:var(--beere);--kr-fuell-fg:var(--auf-beere)}
.s-karten_raster--petrol{--kr-fuell:var(--petrol);--kr-fuell-fg:var(--auf-petrol)}
/* Auf petrolfarbener Flaeche wuerde Petrol auf Petrol laufen. */
.flaeche--petrol.s-karten_raster:not(.s-karten_raster--petrol){--kr-fuell:var(--beere);--kr-fuell-fg:var(--auf-beere)}
.s-karten_raster__grid{
  display:grid;grid-template-columns:repeat(var(--kr-spalten),minmax(0,1fr));
  gap:clamp(1.2rem,2.2vw,1.8rem);align-items:stretch;
}
/* Auf weisser Flaeche heben sich graue Karten ab, auf allen anderen weisse. */
.s-karten_raster{--kr-karte:var(--weiss)}
.flaeche--weiss.s-karten_raster{--kr-karte:var(--grau)}
.s-karten_raster__karte{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  background:var(--kr-karte);border-radius:1.6rem;color:var(--ink);
  padding:clamp(1.6rem,2.4vw,2.4rem);
  box-shadow:inset 0 0 0 1px var(--linie);
  transition:box-shadow .5s,color .45s var(--easing);
}
/* Bei drei und vier Karten stehen sie leicht gegeneinander versetzt. */
.s-karten_raster:not(.s-karten_raster--gerade) .s-karten_raster__karte:nth-child(2){margin-top:clamp(1rem,3vw,3rem)}
.s-karten_raster:not(.s-karten_raster--gerade) .s-karten_raster__karte:nth-child(3){margin-top:clamp(.5rem,1.5vw,1.5rem)}
.s-karten_raster:not(.s-karten_raster--gerade) .s-karten_raster__karte:nth-child(4){margin-top:clamp(1.4rem,3.6vw,3.6rem)}
.s-karten_raster__fuellung{position:absolute;inset:0;z-index:-1;background:var(--kr-fuell);transform:translateY(101%);transition:transform .65s var(--easing-out)}
.s-karten_raster__karte:hover{box-shadow:0 46px 80px -44px rgba(23,19,26,.55),inset 0 0 0 1px transparent;color:var(--kr-fuell-fg)}
.s-karten_raster__karte:hover .s-karten_raster__fuellung{transform:translateY(0)}
.s-karten_raster__num{
  position:relative;display:block;margin-bottom:1.1rem;
  font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(2.8rem,4vw,4.4rem);
  line-height:.8;letter-spacing:0;
  --kgrund:var(--kr-karte);--kfarbe:var(--linie);--kdicke:1.3px;
  transition:color .45s var(--easing),text-shadow .45s var(--easing);
}
.s-karten_raster__karte:hover .s-karten_raster__num{--kgrund:var(--kr-fuell);--kfarbe:rgba(8,20,19,.45)}
.s-karten_raster__voll{
  position:absolute;left:0;top:0;text-shadow:none;color:var(--kr-fuell);
  clip-path:inset(calc(100% - var(--fuellung,0%)) 0 0 0);
  transition:clip-path .18s linear,color .45s var(--easing);
}
.s-karten_raster__karte:hover .s-karten_raster__voll{color:var(--kr-fuell-fg)}
.s-karten_raster__karte h3{font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:.7rem;color:inherit}
.s-karten_raster__karte p{color:var(--muted);font-size:.98rem;transition:color .45s var(--easing)}
.s-karten_raster__karte:hover p{color:color-mix(in srgb,var(--kr-fuell-fg) 85%,transparent)}

/* --- Modul: kennzahlen ------------------------------------
   Ohne Kaesten: die Werte stehen als grosse Umrissschrift auf der
   Flaeche, darueber eine feine Linie, die beim Einlauf aufzieht. */
.s-kennzahlen__band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  grid-template-rows:auto auto;
  gap:clamp(2rem,3.4vw,3.2rem);align-items:stretch;
}
.s-kennzahlen__zelle{
  position:relative;display:flex;flex-direction:column;gap:.6rem;
  padding-top:clamp(1.3rem,2.2vw,1.9rem);
}
/* Wert und Beschreibung liegen auf gemeinsamen Zeilen, dadurch fluchtet die
   Beschreibung auch dann, wenn ein Wert zweizeilig umbricht. */
@supports (grid-template-rows:subgrid){
  .s-kennzahlen__zelle{
    display:grid;grid-row:span 2;grid-template-rows:subgrid;
    row-gap:.6rem;align-content:start;
  }
}
/* Auf farbigen Flaechen tragen Linie, Umriss und Fuellung Weiss, sonst die
   Schriftfarbe der Flaeche. */
.s-kennzahlen{--kz-farbe:var(--f-titel)}
.flaeche--petrol.s-kennzahlen,
.flaeche--beere.s-kennzahlen{--kz-farbe:var(--weiss)}
.s-kennzahlen__linie{
  position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;
  background:var(--kz-farbe);opacity:.9;transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--easing-out) .1s;
}
[data-einlauf].sichtbar .s-kennzahlen__linie{transform:scaleX(1)}
.s-kennzahlen__wert{
  position:relative;display:block;
  font-family:'Sora',sans-serif;font-weight:300;letter-spacing:-.02em;
  font-size:clamp(2.1rem,2.85vw,2.85rem);line-height:1.16;
  /* Unterlaengen brauchen Platz, sonst schneidet die Zeilenbox das g ab. */
  padding-bottom:.08em;
  text-wrap:balance;overflow-wrap:break-word;
  --kgrund:var(--f-grund);--kfarbe:var(--kz-farbe);--kdicke:1px;
}
/* Die gefuellte Kopie liegt deckungsgleich darueber, --fuellung setzt theme.js.
   Der negative Wert unten laesst die Fuellung ueber die Zeilenbox hinaus, damit
   Unterlaengen mitlaufen. */
.s-kennzahlen__voll{
  position:absolute;left:0;top:0;text-shadow:none;color:var(--kz-farbe);
  clip-path:inset(calc(100% - var(--fuellung,0%)) 0 -.3em 0);
  transition:clip-path .18s linear;
}
.s-kennzahlen__text{
  color:var(--kz-farbe);opacity:.92;
  font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.45;
  font-weight:400;max-width:24ch;
}

/* --- Modul: textblock -------------------------------------- */
.s-textblock__inner{max-width:var(--maxw)}
.s-textblock--lesespalte .s-textblock__inner{max-width:48rem}
.s-textblock--zwei .s-textblock__text{columns:2;column-gap:clamp(2rem,4vw,4rem)}
.s-textblock--zwei .s-textblock__text p{break-inside:avoid}
.s-textblock__text p{margin-bottom:1.2rem}
.s-textblock__text p:last-child{margin-bottom:0}
.s-textblock__text h3{font-size:clamp(1.3rem,2vw,1.7rem);margin:2rem 0 .8rem;color:var(--f-titel)}
.s-textblock--gross .s-textblock__text > p:first-child{
  font-size:clamp(1.15rem,1.7vw,1.35rem);color:var(--f-titel);
}
.s-textblock__btn{margin-top:clamp(1.8rem,3vw,2.6rem)}

/* --- Modul: formular ---------------------------------------
   Links die Kontaktwege, rechts das Formular. Die Felder von Fluent
   Forms bekommen hier die Optik der uebrigen Eingaben. */
.s-formular__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.s-formular h2{margin:1.4rem 0 1.2rem}
.s-formular__text{max-width:46ch}
.s-formular__text p{margin-bottom:1rem}
.s-formular__wege{list-style:none;margin:clamp(2rem,3.4vw,2.8rem) 0 0;padding:0}
.s-formular__wege li{padding:1rem 0;border-top:1px solid var(--f-linie);display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-items:baseline}
.s-formular__wege li:last-child{border-bottom:1px solid var(--f-linie)}
.s-formular__label{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--f-kicker);min-width:7rem;
}
.s-formular__wege a{font-family:'Sora',sans-serif;font-weight:600;color:var(--f-titel);transition:color .3s}
.s-formular__wege a:hover{color:var(--f-kicker)}
.s-formular__form{
  background:color-mix(in srgb,var(--f-titel) 5%,transparent);
  border:1px solid var(--f-linie);border-radius:1.6rem;
  padding:clamp(1.6rem,2.8vw,2.4rem);
}
/* Fluent Forms im Markenstil. */
.s-formular__form .ff-el-group{margin-bottom:1.1rem}
.s-formular__form .ff-el-input--label label{
  font-family:'Sora',sans-serif;font-weight:600;font-size:.95rem;color:var(--f-titel);margin-bottom:.4rem;
}
.s-formular__form .ff-el-form-control{
  width:100%;padding:.95rem 1.1rem;border-radius:.9rem;
  border:1px solid var(--f-linie);background:var(--weiss);color:var(--ink);
  font-family:'Inter',sans-serif;font-size:1rem;line-height:1.5;
  transition:border-color .3s,box-shadow .3s;
}
.s-formular__form .ff-el-form-control:focus{
  border-color:var(--petrol);box-shadow:0 0 0 3px color-mix(in srgb,var(--petrol) 28%,transparent);outline:none;
}
.s-formular__form textarea.ff-el-form-control{min-height:9rem;resize:vertical}
.s-formular__form .ff-el-is-error .ff-el-form-control{border-color:var(--beere)}
.s-formular__form .error.text-danger,
.s-formular__form .ff-el-is-error .text-danger{color:var(--beere);font-size:.88rem;margin-top:.35rem}
.s-formular__form .ff-btn-submit{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1.05rem 2rem;border:0;border-radius:2.6rem;cursor:pointer;
  background:var(--f-btn-bg);color:var(--f-btn-fg);
  font-family:'Sora',sans-serif;font-weight:600;font-size:1rem;letter-spacing:-.01em;
  transition:background .35s,color .35s,translate .35s var(--easing-out);
}
.s-formular__form .ff-btn-submit:hover{background:var(--f-btn-fill);color:var(--f-btn-fill-fg);translate:0 -2px}
/* Fluent Forms schreibt die Knopffarben pro Formular in einen eigenen
   Style-Block mit hoeherer Spezifitaet. Deshalb hier ausdruecklich. */
.s-formular__form .fluentform .ff-btn-submit.ff_btn_style{
  background-color:var(--f-btn-bg) !important;
  border-color:var(--f-btn-bg) !important;
  color:var(--f-btn-fg) !important;
  border-radius:2.6rem !important;
  min-width:0 !important;
}
.s-formular__form .fluentform .ff-btn-submit.ff_btn_style:hover{
  background-color:var(--f-btn-fill) !important;
  border-color:var(--f-btn-fill) !important;
  color:var(--f-btn-fill-fg) !important;
}
.s-formular__form .ff-message-success{
  padding:1.2rem 1.4rem;border-radius:1rem;background:var(--weiss);
  border:1px solid var(--petrol);color:var(--ink);
}
.s-formular__form .ff-el-group.ff-el-form-bottom{margin-bottom:0}
/* Datenschutz-Hinweis mit Kaestchen. Das Kaestchen bleibt oben buendig,
   damit der mehrzeilige Text sauber daneben laeuft. */
.s-formular__form .ff-el-group.ff_gdpr_wrapper,
.s-formular__form .ff-el-group:has(.ff_gdpr_field){margin-block:1.4rem}
.s-formular__form .ff_gdpr_field{
  width:1.15rem;height:1.15rem;margin:.15rem .7rem 0 0;flex:none;
  accent-color:var(--beere);cursor:pointer;
}
.s-formular__form .ff-el-form-check-label:has(.ff_gdpr_field),
.s-formular__form label:has(.ff_gdpr_field){
  display:flex;align-items:flex-start;gap:0;
  font-size:.92rem;line-height:1.5;color:var(--f-text);cursor:pointer;
}
.s-formular__form label:has(.ff_gdpr_field) a{color:var(--f-kicker);text-decoration:underline;text-underline-offset:.2em}

/* --- Modul: seiteninhalt -----------------------------------
   Rechtstexte aus dem Editor. Lange Dokumente bekommen ein
   Verzeichnis, das zu den Zwischenueberschriften springt. */
.s-seiteninhalt--lesespalte .s-seiteninhalt__inner{max-width:48rem}
.s-seiteninhalt__text{font-size:clamp(1rem,.97rem + .2vw,1.08rem)}
.s-seiteninhalt__text h2{
  font-size:clamp(1.5rem,2.4vw,2rem);margin:2.6rem 0 1rem;color:var(--f-titel);
  scroll-margin-top:6rem;
}
.s-seiteninhalt__text h3{font-size:clamp(1.2rem,1.8vw,1.45rem);margin:2rem 0 .7rem;color:var(--f-titel)}
.s-seiteninhalt__text h4{font-size:1.1rem;margin:1.6rem 0 .6rem;color:var(--f-titel)}
.s-seiteninhalt__text p{margin-bottom:1.1rem}
.s-seiteninhalt__text ul,.s-seiteninhalt__text ol{margin:0 0 1.2rem 1.2rem}
.s-seiteninhalt__text li{margin-bottom:.4rem}
.s-seiteninhalt__text a{color:var(--f-kicker);text-decoration:underline;text-underline-offset:.2em}
.s-seiteninhalt__text a:hover{text-decoration-thickness:2px}
.s-seiteninhalt__text strong{color:var(--f-titel)}
.ml27-verzeichnis{
  margin-bottom:clamp(2.4rem,4vw,3.4rem);padding:clamp(1.4rem,2.4vw,2rem);
  border-radius:1.4rem;background:var(--grau);
}
.flaeche--grau .ml27-verzeichnis{background:var(--weiss)}
.ml27-verzeichnis ol{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.ml27-verzeichnis li{margin-bottom:.5rem;break-inside:avoid;font-size:.95rem}
.ml27-verzeichnis a{color:var(--f-titel);transition:color .3s}
.ml27-verzeichnis a:hover{color:var(--f-kicker)}

/* --- Modul: logowand ---------------------------------------
   Logos stehen in gleich grossen Feldern, damit unterschiedliche
   Seitenverhaeltnisse die Reihe nicht auseinanderziehen. */
.s-logowand__text{max-width:60ch;margin-bottom:clamp(2rem,3.4vw,3rem)}
.s-logowand__text--unten{margin:clamp(2rem,3.4vw,3rem) 0 0}
.s-logowand__text p{margin-bottom:.9rem}
.s-logowand__text p:last-child{margin-bottom:0}
.s-logowand__raster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:clamp(1rem,2vw,1.8rem);align-items:center;
}
.s-logowand__feld{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(.6rem,1.2vw,1rem);
}
/* Die Logodateien tragen einen weissen Grund. multiply blendet ihn in die
   Flaeche ein, dadurch wirken sie freigestellt, auch auf Grau oder Farbe. */
.s-logowand__feld img{
  width:100%;height:auto;max-height:2.8rem;object-fit:contain;
  mix-blend-mode:multiply;
  filter:grayscale(1);opacity:.7;transition:filter .45s,opacity .45s,scale .5s var(--easing-out);
}
.s-logowand__feld:hover img{filter:grayscale(0);opacity:1;scale:1.05}
.s-logowand--farbig .s-logowand__feld img{filter:none;opacity:1}

/* --- Modul: text_klebt -------------------------------------
   Das Bild bleibt stehen, solange der Textstrang daneben laeuft.
   sticky wirkt nur, wenn kein Elternteil overflow versteckt, deshalb
   traegt die Sektion overflow-x:clip statt hidden. */
.s-text_klebt__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.s-text_klebt--rechts .s-text_klebt__media{order:2}
.s-text_klebt--links .s-text_klebt__grid{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.s-text_klebt--links .s-text_klebt__media{order:0}
.s-text_klebt__media{position:sticky;top:clamp(5.5rem,9vh,7.5rem);align-self:start}
.s-text_klebt__bild{position:relative}
.s-text_klebt__bild img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:1.5rem}
.s-text_klebt__quadrat{
  position:absolute;z-index:-1;width:60%;aspect-ratio:1;border-radius:1.5rem;
  background:var(--f-deko);opacity:.16;
}
.s-text_klebt--rechts .s-text_klebt__quadrat{right:-1.6rem;bottom:-1.6rem}
.s-text_klebt--links .s-text_klebt__quadrat{left:-1.6rem;bottom:-1.6rem}
.s-text_klebt__block{margin-bottom:clamp(3rem,6vw,5rem)}
.s-text_klebt__block:last-of-type{margin-bottom:0}
.s-text_klebt__block h2{margin:1.1rem 0 1.3rem}
.s-text_klebt__text p{margin-bottom:1.2rem}
.s-text_klebt__text p:last-child{margin-bottom:0}
/* Stationen: Jahr steht als Marke ueber der Zeile. */
.s-text_klebt__stationen{list-style:none;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0}
.s-text_klebt__stationen li{
  position:relative;padding:0 0 1.4rem 1.6rem;margin-bottom:1.4rem;
  border-left:1.5px solid var(--f-linie);
}
.s-text_klebt__stationen li:last-child{margin-bottom:0;padding-bottom:0}
.s-text_klebt__stationen li::before{
  content:'';position:absolute;left:-.36rem;top:.42rem;width:.72rem;height:.72rem;
  border-radius:50%;background:var(--f-strich);
}
.s-text_klebt__marke{
  display:block;font-family:'Sora',sans-serif;font-weight:700;
  color:var(--f-titel);margin-bottom:.25rem;
}
.s-text_klebt__btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(2.4rem,4vw,3.4rem)}

/* Werkzeuge im Textstrang: Gruppen mit Schlagwortliste. */
.ml27-werkzeuge{margin-top:clamp(1.6rem,2.6vw,2.2rem)}
.ml27-werkzeuge__gruppe{margin-bottom:clamp(1.4rem,2.4vw,2rem)}
.ml27-werkzeuge__gruppe:last-child{margin-bottom:0}
.ml27-werkzeuge__titel{
  font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--f-kicker);margin-bottom:.9rem;
}
.ml27-werkzeuge__liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.ml27-werkzeuge__liste li{
  padding:.5rem 1rem;border-radius:2rem;font-size:.95rem;
  color:var(--f-titel);box-shadow:inset 0 0 0 1.5px var(--f-linie);
  transition:box-shadow .35s,background .35s;
}
.ml27-werkzeuge__liste li:hover{background:var(--f-titel);color:var(--f-grund);box-shadow:inset 0 0 0 1.5px transparent}

/* Veroeffentlichungen im Textstrang, nach Rubrik gruppiert. */
.ml27-artikel{margin-top:clamp(1.8rem,3vw,2.6rem)}
.ml27-artikel__rubrik{margin-bottom:clamp(1.8rem,3vw,2.4rem)}
.ml27-artikel__rubrik:last-child{margin-bottom:0}
.ml27-artikel__titel{
  font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--f-kicker);margin-bottom:.8rem;font-family:'Inter',sans-serif;
}
.ml27-artikel__liste{list-style:none;margin:0;padding:0}
.ml27-artikel__liste li{border-top:1px solid var(--f-linie)}
.ml27-artikel__liste li:last-child{border-bottom:1px solid var(--f-linie)}
.ml27-artikel__liste a,
.ml27-artikel__liste li > span:first-child{
  display:flex;align-items:baseline;gap:.6rem 1rem;flex-wrap:wrap;
  padding:.75rem 0;transition:color .3s;
}
.ml27-artikel__liste a:hover{color:var(--f-kicker)}
.ml27-artikel__liste a svg{margin-left:auto;flex:none;align-self:center;opacity:0;translate:-.4rem 0;transition:opacity .35s,translate .45s var(--easing-out)}
.ml27-artikel__liste a:hover svg{opacity:1;translate:0 0}
.ml27-artikel__name{font-family:'Sora',sans-serif;font-weight:600;color:var(--f-titel);font-size:1.02rem}
.ml27-artikel__quelle{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--f-text);opacity:.75}

/* --- Modul: zitatband -------------------------------------- */
.s-zitatband{position:relative;overflow:hidden;padding-block:var(--abstand-oben,clamp(5rem,10vw,9rem)) var(--abstand-unten,clamp(5rem,10vw,9rem))}
.s-zitatband__marke{
  position:absolute;right:calc(var(--pad) * .5);top:-3rem;
  font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(14rem,30vw,30rem);line-height:1;color:var(--f-titel);opacity:.08;pointer-events:none;
}
.s-zitatband__inner{position:relative;max-width:min(100%,48rem)}
.s-zitatband p{
  font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.14;
  font-size:clamp(1.8rem,4.6vw,3.8rem);
}
/* Die Woerter hellen beim Scrollen nacheinander auf. Startwert bewusst
   sehr blass, damit der Wechsel deutlich sichtbar wird. */
.s-zitatband .wort{
  display:inline-block;color:color-mix(in srgb,var(--f-titel) 12%,transparent);
  transform:translateY(.12em) scale(.985);transform-origin:left bottom;
  transition:color .35s var(--easing),transform .45s var(--easing-out);
}
.s-zitatband .wort.an{color:var(--f-titel);transform:none}
.s-zitatband__linie{height:2px;background:var(--f-titel);opacity:.3;margin-top:clamp(2rem,4vw,3.5rem);transform:scaleX(var(--p,0));transform-origin:left}

/* --- Modul: text_bild -------------------------------------- */
.s-text_bild__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.s-text_bild__media{position:relative}
.s-text_bild__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0 1.5rem 1.5rem 0}
.s-text_bild__quadrat{position:absolute;right:-1.6rem;bottom:-2.6rem;width:11rem;height:11rem;background:var(--f-deko);border-radius:1.4rem;z-index:-1}
.s-text_bild__body h2{margin:1.3rem 0 1.2rem}
.s-text_bild__body p{margin-bottom:2rem;max-width:52ch}
.s-text_bild .zahl{right:-2.5rem;top:3rem}

/* Bild rechts: Reihenfolge drehen und die Rundungen spiegeln */
.s-text_bild--rechts .s-text_bild__media{order:2}
.s-text_bild--rechts .s-text_bild__media img{border-radius:1.5rem 0 0 1.5rem}
.s-text_bild--rechts .s-text_bild__quadrat{right:auto;left:-1.6rem}
.s-text_bild--rechts .zahl{right:auto;left:-2.5rem}
.s-text_bild--rechts .s-text_bild__grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}

/* --- Modul: ruf_laufband ----------------------------------- */
.s-ruf_laufband__inner{text-align:center}
.s-ruf_laufband h2{margin:1.4rem auto 1.3rem;max-width:16ch}
.s-ruf_laufband__inner>p{margin:0 auto 2.6rem;max-width:56ch}
.s-ruf_laufband .kicker{justify-content:center}
.s-ruf_laufband__band{
  margin-top:clamp(3rem,6vw,5rem);padding-block:clamp(1.4rem,2.4vw,2.2rem);
  border-block:1px solid var(--f-linie);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.s-ruf_laufband__spur{display:flex;width:max-content;animation:ml27-lauf var(--tempo,34s) linear infinite}
.s-ruf_laufband__band:hover .s-ruf_laufband__spur{animation-play-state:paused}
.s-ruf_laufband__spur>span{
  display:inline-flex;align-items:center;gap:clamp(2rem,4vw,3.5rem);
  padding-right:clamp(2rem,4vw,3.5rem);
  font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.7rem,3.6vw,3rem);color:var(--f-titel);white-space:nowrap;
}
.s-ruf_laufband__spur>span::after{content:'';width:.7rem;height:.7rem;border-radius:50%;background:var(--f-strich);flex:none}
/* Jedes zweite Wort als Umriss, gleiche Technik wie .kontur */
.s-ruf_laufband__spur>span:nth-child(even){
  --kgrund:var(--f-grund);--kfarbe:var(--f-kicker);--kdicke:1.1px;letter-spacing:.01em;
  color:var(--kgrund);
  text-shadow:
    calc(var(--kdicke) * -1) 0 var(--kfarbe), var(--kdicke) 0 var(--kfarbe),
    0 calc(var(--kdicke) * -1) var(--kfarbe), 0 var(--kdicke) var(--kfarbe),
    calc(var(--kdicke) * -.72) calc(var(--kdicke) * -.72) var(--kfarbe),
    calc(var(--kdicke) * .72) calc(var(--kdicke) * -.72) var(--kfarbe),
    calc(var(--kdicke) * -.72) calc(var(--kdicke) * .72) var(--kfarbe),
    calc(var(--kdicke) * .72) calc(var(--kdicke) * .72) var(--kfarbe);
}
@keyframes ml27-lauf{to{transform:translateX(-50%)}}

/* --- Modul: romane ----------------------------------------- */
.s-romane__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem)}
.s-romane__buch{perspective:1200px}
.s-romane__cover{
  position:relative;border-radius:1.1rem;overflow:hidden;background:var(--grau);
  box-shadow:0 34px 60px -42px rgba(23,19,26,.65);
  transform-origin:left center;
  transition:transform .7s var(--easing-out),box-shadow .7s var(--easing-out);
}
.s-romane__buch:hover .s-romane__cover{transform:rotate(2.6deg) rotateY(-9deg) translateX(.6rem);box-shadow:-14px 44px 70px -38px rgba(23,19,26,.7)}
.s-romane__cover img{width:100%;aspect-ratio:7/10;object-fit:cover}
.s-romane__cover::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.42),transparent 55%);opacity:0;transition:opacity .7s}
.s-romane__buch:hover .s-romane__cover::after{opacity:1}
.s-romane__buch h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:2.4rem 0 .9rem}
.s-romane__meta{font-size:1rem;margin-bottom:1.5rem;max-width:34ch;color:var(--f-text)}

/* --- Modul: newsletter ------------------------------------- */
.s-newsletter{position:relative;overflow:hidden}
.s-newsletter__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.s-newsletter h2{margin:1.4rem 0 1.2rem}
.s-newsletter__grid>div>p{max-width:46ch}
.s-newsletter__form{background:color-mix(in srgb,var(--f-titel) 9%,transparent);border:1px solid var(--f-linie);border-radius:1.6rem;padding:clamp(1.7rem,2.8vw,2.5rem)}
.s-newsletter__form input[type=email],.s-newsletter__form input[type=text]{
  width:100%;min-height:3.9rem;padding:0 1.4rem;border-radius:999px;
  border:1px solid var(--f-linie);background:color-mix(in srgb,var(--f-titel) 10%,transparent);
  color:var(--f-titel);font:inherit;font-size:1rem;
}
.s-newsletter__form input::placeholder{color:color-mix(in srgb,var(--f-titel) 55%,transparent)}
.s-newsletter__form input:focus{outline:2px solid var(--petrol);outline-offset:2px}
.s-newsletter__form input[type=text],
.s-newsletter__form input[type=email]{margin-bottom:.7rem}

/* Das Anmeldeformular liefert das Newsletter-Werkzeug selbst. Hier bekommt
   es die Optik des Themes, ohne dass am Werkzeug etwas geaendert wird. */
.s-newsletter__form .sib-terms-label{
  display:flex;gap:.8rem;align-items:flex-start;
  font-size:.85rem;line-height:1.5;color:var(--f-text);margin:1.1rem 0 1.4rem;
}
.s-newsletter__form .sib-terms-label input[type=checkbox]{
  width:1.05rem;height:1.05rem;flex:none;margin-top:.28rem;accent-color:var(--petrol);
}
.s-newsletter__form .sib-terms-label a{color:var(--f-titel);text-decoration:underline;text-underline-offset:.2em}
.s-newsletter__form .sib-default-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3.9rem;padding:1.15rem 2.4rem;width:auto;
  font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
  background:var(--f-btn-bg);color:var(--f-btn-fg);
  border:0;border-radius:999px;cursor:pointer;
  transition:background .38s var(--easing),color .38s var(--easing);
}
.s-newsletter__form .sib-default-btn:hover,
.s-newsletter__form .sib-default-btn:focus-visible{background:var(--f-btn-fill);color:var(--f-btn-fill-fg)}
.s-newsletter__form .sib_msg_disp{font-size:.9rem;line-height:1.5}
.s-newsletter__form .sib_loader{margin-bottom:.4rem}
.s-newsletter__ring{position:absolute;left:-6rem;bottom:-8rem;width:24rem;height:24rem;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--f-deko) 45%,transparent)}

/* --- Modul: instagram -------------------------------------- */
.s-instagram__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;padding-inline:.7rem}
.s-instagram__item{position:relative;display:block;overflow:hidden;border-radius:1.1rem;background:var(--grau)}
.s-instagram__item img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:scale .85s var(--easing-out)}
.s-instagram__item:hover img{scale:1.05}
.s-instagram__cap{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.3rem;
  background:linear-gradient(to top,rgba(28,138,128,.95),rgba(28,138,128,.3) 62%,transparent);
  color:var(--weiss);font-size:.88rem;line-height:1.45;opacity:0;transition:opacity .45s;
}
.s-instagram__item:hover .s-instagram__cap{opacity:1}
.s-instagram__fuss{text-align:center;margin-top:2.8rem}

/* ------------------------------------------------------------
   Seiten ohne Module: schlichte Grundformatierung fuer Rechtstexte
   und alles, was noch nicht auf den Baukasten umgestellt ist.
   ------------------------------------------------------------ */
.ml27-inhalt{margin-top:clamp(2rem,4vw,3rem);max-width:72ch}
.ml27-inhalt h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:2.4rem 0 .9rem}
.ml27-inhalt h3{font-size:clamp(1.2rem,1.8vw,1.5rem);margin:2rem 0 .7rem}
.ml27-inhalt p,
.ml27-inhalt ul,
.ml27-inhalt ol{margin-bottom:1.1rem}
.ml27-inhalt ul,
.ml27-inhalt ol{padding-left:1.4rem}
.ml27-inhalt li{margin-bottom:.4rem}
.ml27-inhalt a{color:var(--beere);text-decoration:underline;text-underline-offset:.18em}
.ml27-inhalt a:hover{color:var(--petrol-tief)}
.ml27-inhalt strong{color:var(--ink)}


/* --- Modul: seitenkopf ------------------------------------- */
/* Gleicher oberer Abstand wie beim Kopfbereich der Startseite, damit
   Kicker und Ueberschrift auf allen Seiten auf einer Hoehe beginnen. */
.s-seitenkopf{--abstand-oben:clamp(2rem,4vw,3.5rem)}
.s-seitenkopf__text{max-width:62ch}
.s-seitenkopf__text h1,
.s-seitenkopf__text h2{margin:1.3rem 0 1.2rem}
.s-seitenkopf__media{margin-top:clamp(2.5rem,5vw,4rem);overflow:clip}
.s-seitenkopf__media img{
  width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:1.5rem;
  /* Hochformat-Motive werden hier stark beschnitten, der obere Bildbereich
     trifft das Wesentliche meist besser als die Mitte. */
  object-position:center 25%;
}

/* --- Modul: blog_liste ------------------------------------- */
/* Steht die Liste direkt unter einem Seitenkopf, ruecken die Karten
   naeher heran. Sonst wirkt die Seite beim Aufrufen leer. */
.s-seitenkopf + .s-blog_liste{--abstand-oben:clamp(2rem,3.5vw,3rem)}
/* Rechtstexte und andere Editor-Inhalte schliessen direkt an die
   Ueberschrift an, sonst klafft eine Luecke unter der H1. */
.s-seitenkopf:has(+ .s-seiteninhalt){--abstand-unten:clamp(1.2rem,2vw,2rem)}
.s-seitenkopf + .s-seiteninhalt{--abstand-oben:clamp(1.2rem,2vw,2rem)}
.s-blog_liste__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.6rem)}
.s-blog_liste__karte{
  display:flex;flex-direction:column;
  background:var(--weiss);color:var(--ink);border-radius:1.5rem;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--linie);
  transition:transform .55s var(--easing-out),box-shadow .5s;
}
.s-blog_liste__karte:hover{transform:translateY(-.5rem);box-shadow:0 44px 78px -46px rgba(23,19,26,.5),inset 0 0 0 1px transparent}
.s-blog_liste__bild{display:block;overflow:hidden;background:var(--grau);aspect-ratio:3/2}
.s-blog_liste__bild img{width:100%;height:100%;object-fit:cover;transition:scale .8s var(--easing-out)}
.s-blog_liste__karte:hover .s-blog_liste__bild img{scale:1.05}
.s-blog_liste__body{display:flex;flex-direction:column;flex:1;padding:clamp(1.5rem,2.2vw,2rem)}
.s-blog_liste__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-bottom:1rem;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--dim);
}
.s-blog_liste__kat{
  color:var(--beere);position:relative;padding-left:1.1rem;
}
.s-blog_liste__kat::before{
  content:'';position:absolute;left:0;top:50%;translate:0 -50%;
  width:.45rem;height:.45rem;border-radius:50%;background:var(--petrol);
}
.s-blog_liste__karte h3{
  font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.16;margin-bottom:.9rem;color:var(--ink);
}
.s-blog_liste__karte h3 a{transition:color .3s}
.s-blog_liste__karte:hover h3 a{color:var(--beere)}
.s-blog_liste__auszug{color:var(--muted);font-size:.98rem;margin-bottom:1.4rem;flex:1}
.s-blog_liste__body .tlink{align-self:flex-start;color:var(--beere)}
.s-blog_liste__body .tlink::after{background:var(--petrol)}

/* Blaetterleiste */
.ml27-blaettern{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.ml27-blaettern .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:3rem;height:3rem;padding:0 1rem;border-radius:999px;
  font-family:'Sora',sans-serif;font-weight:600;font-size:1rem;color:var(--f-titel);
  box-shadow:inset 0 0 0 1.5px var(--f-linie);
  transition:background .35s,color .35s,box-shadow .35s;
}
.ml27-blaettern .page-numbers:hover{background:var(--beere);color:var(--auf-beere);box-shadow:inset 0 0 0 1.5px transparent}
.ml27-blaettern .page-numbers.current{background:var(--beere);color:var(--auf-beere);box-shadow:inset 0 0 0 1.5px transparent}
.ml27-blaettern .dots{box-shadow:none}
.ml27-blaettern .dots:hover{background:none;color:var(--f-titel)}

/* --- Einzelner Blogbeitrag --------------------------------- */
.s-beitrag__kopf{padding-block:clamp(2.5rem,5vw,4rem) 0;overflow:clip}
.s-beitrag__kopf .kicker{margin-bottom:1.4rem}
.s-beitrag{--titelbreite:58rem;--lesebreite:48rem}
/* Kicker, Ueberschrift, Kennzahlen und Bild stehen in einer gemeinsamen
   Spalte, die mittig ueber der Lesespalte darunter sitzt. */
.s-beitrag__spalte{max-width:var(--titelbreite);margin-inline:auto}
.s-beitrag__titel{
  font-size:clamp(2.1rem,4.6vw,4rem);max-width:var(--titelbreite);margin-bottom:1.6rem;
}
.s-beitrag__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--dim);
}
.s-beitrag__meta span{position:relative;padding-left:1.2rem}
.s-beitrag__meta span::before{
  content:'';position:absolute;left:0;top:50%;translate:0 -50%;
  width:.45rem;height:.45rem;border-radius:50%;background:var(--petrol);
}
/* Das Kopfbild bleibt auf der Breite der Ueberschrift, es laeuft nicht
   ueber die volle Seite. Dieselbe Obergrenze wie .s-beitrag__titel. */
.s-beitrag__bild{margin-top:clamp(2.5rem,5vw,3.5rem)}
/* Steht auf derselben senkrechten Linie wie Ueberschrift und Datum und
   ragt links wie rechts gleich weit ueber die Lesespalte hinaus. */
.s-beitrag__bild img{
  width:100%;max-width:var(--titelbreite);
  aspect-ratio:16/9;object-fit:cover;border-radius:1.5rem;
}

.s-beitrag__inhalt{padding-block:clamp(3rem,6vw,5rem)}
/* Zwei Beitraege tragen Lesezeit und Autorin zusaetzlich im Editor-Inhalt.
   Der Kopfbereich zeigt beides ohnehin, deshalb bleibt die Zeile im Text
   ausgeblendet. Der Inhalt selbst wird nicht angetastet. */
.s-beitrag__text .ml-meta-bar{display:none}
/* Etwas groesser als der Grundtext, weil die Lesespalte hier breiter
   ist als die Textspalten der Module. */
.s-beitrag__text{
  margin-top:0;max-width:var(--lesebreite);margin-inline:auto;
  font-size:clamp(1.06rem,1rem + .3vw,1.2rem);
}
.s-beitrag__text h2{font-size:clamp(1.6rem,2.8vw,2.3rem);margin:2.8rem 0 1rem}
.s-beitrag__text h3{font-size:clamp(1.3rem,2vw,1.65rem);margin:2.2rem 0 .8rem}
.s-beitrag__text p{margin-bottom:1.3rem}
.s-beitrag__text img{border-radius:1.1rem;margin-block:1.8rem}
/* Zitat im Beitrag: kein Kasten, sondern eine freistehende Aussage.
   Das Anfuehrungszeichen liegt als Zeichen dahinter, links steht eine
   kurze Marke in Petrol. */
.s-beitrag__text blockquote{
  position:relative;isolation:isolate;
  /* Oben mehr Luft, weil das Anfuehrungszeichen dort hineinragt. */
  margin:clamp(3.4rem,6vw,4.6rem) 0 clamp(2.2rem,4vw,3rem);
  padding:.3rem 0 .3rem clamp(1.4rem,2.6vw,2.2rem);
  font-family:'Sora',sans-serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.38;color:var(--ink);
}
.s-beitrag__text blockquote::before{
  content:'';position:absolute;left:0;top:.2em;bottom:.2em;width:3px;
  border-radius:3px;background:var(--petrol);
}
.s-beitrag__text blockquote::after{
  content:'\201C';position:absolute;z-index:-1;
  left:clamp(.7rem,1.6vw,1.3rem);top:-.28em;
  font-family:'Sora',sans-serif;font-weight:800;font-size:3.6em;line-height:1;
  color:var(--petrol);opacity:.16;pointer-events:none;
}
.s-beitrag__text blockquote p{margin-bottom:.6rem}
.s-beitrag__text blockquote p:last-child{margin-bottom:0}
.s-beitrag__text blockquote cite{
  display:block;margin-top:.9rem;
  font-family:'Inter',sans-serif;font-size:.92rem;font-weight:500;font-style:normal;
  letter-spacing:.06em;text-transform:uppercase;color:var(--beere);
}

.s-beitrag__autor{
  display:flex;gap:clamp(1.2rem,2.4vw,2rem);align-items:center;
  max-width:var(--lesebreite);margin:clamp(3rem,5vw,4.5rem) auto 0;
  padding:clamp(1.6rem,2.6vw,2.2rem);border-radius:1.5rem;background:var(--grau);
}
.s-beitrag__autorbild{
  flex:none;display:block;width:6.5rem;height:6.5rem;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px var(--weiss),0 0 0 4.5px var(--petrol);
}
.s-beitrag__autorbild img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--easing-out)}
.s-beitrag__autor:hover .s-beitrag__autorbild img{scale:1.06}
.s-beitrag__autor h2{font-size:1.7rem;line-height:1.15;margin:.55rem 0 .6rem}
.s-beitrag__autor h2 a{transition:color .3s}
.s-beitrag__autor h2 a:hover{color:var(--beere)}
.s-beitrag__autor p{color:var(--muted);font-size:.98rem;margin-bottom:1rem}
.s-beitrag__autor .tlink{color:var(--beere)}
.s-beitrag__autor .tlink::after{background:var(--petrol)}

/* --- Seite nicht gefunden ---------------------------------- */
.s-vierhundertvier{text-align:center}
.s-vierhundertvier h1{margin:1.4rem auto 1.2rem;max-width:16ch}
.s-vierhundertvier .lead{margin-inline:auto;margin-bottom:2.4rem}
.s-vierhundertvier .kicker{justify-content:center}
.s-vierhundertvier__btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* ============================================================
   7. Scroll-Animationen
   ============================================================ */
[data-einlauf]{opacity:0;transition:opacity .9s var(--easing-out),transform .9s var(--easing-out);transition-delay:var(--d,0ms)}
[data-einlauf="hoch"]{transform:translateY(2.6rem)}
[data-einlauf="links"]{transform:translateX(-3rem)}
[data-einlauf="rechts"]{transform:translateX(3rem)}
[data-einlauf="skalieren"]{transform:scale(.94)}
[data-einlauf].sichtbar{opacity:1;transform:none}

/* Der Scroll-Versatz liegt auf --schub. Elemente, die beides tragen,
   bekommen eine eigene Regel, damit sich Einlauf und Versatz nicht beissen. */
.versatz{transform:translate3d(0,var(--schub,0px),0)}
[data-einlauf].versatz{transition:opacity .9s var(--easing-out)}
[data-einlauf="hoch"].versatz{transform:translate3d(0,calc(var(--schub,0px) + 2.6rem),0)}
[data-einlauf="hoch"].versatz.sichtbar{transform:translate3d(0,var(--schub,0px),0)}
[data-einlauf="skalieren"].versatz{transform:translate3d(0,var(--schub,0px),0) scale(.94)}
[data-einlauf="skalieren"].versatz.sichtbar{transform:translate3d(0,var(--schub,0px),0)}

/* ============================================================
   8. Responsiv
   ============================================================ */
@media(min-width:1100px){
  /* Der Kopfbereich bleibt im Blick: Das Bild bestimmt die Hoehe der
     Sektion, deshalb ist es an die Fensterhoehe gebunden. Ohne diese
     Grenze waechst es auf breiten Bildschirmen immer weiter und
     schiebt Ueberschrift und Text unter die Sichtkante. */
  /* Der Kopfbereich soll in den ersten Bildschirm passen, auch auf
     breiten und flachen Monitoren. Bild, Schriftgroessen und Abstaende
     richten sich deshalb zusaetzlich nach der Fensterhoehe. Die
     rem-Werte bleiben die Obergrenze, svh greift nur, wenn es eng wird. */
  .s-hero_person__media img{
    height:min(calc(100svh - 15rem),44rem);
    max-height:min(calc(100svh - 15rem),44rem);
    min-height:22rem;
    object-fit:cover;object-position:center 20%;
  }
  .s-hero_person h1{
    font-size:min(16.5cqi,7rem,13.5svh);
    margin:min(1.6rem,2.4svh) 0 min(.9rem,1.4svh);
  }
  .s-hero_person--kompakt h1{font-size:min(10.5cqi,4.4rem,9svh)}
  .s-hero_person__rollen{
    font-size:min(1.4rem,2.4svh);
    margin-bottom:min(1.5rem,2.2svh);
  }
  .s-hero_person .lead{
    font-size:min(1.35rem,2.1svh);
    margin-bottom:min(2.4rem,3.4svh);
  }
  .s-hero_person__btns .btn{min-height:min(3.9rem,7svh);padding-block:min(1.15rem,1.8svh)}

  /* Randlose Bilder. Das Hero-Raster hat rechts keinen Innenabstand,
     dort fehlt nur der Rand zwischen Containerkante und Fenster. */
  .s-hero_person__media{
    --bleed:max(0px,(var(--vw) - var(--maxw)) / 2);
    margin-right:calc(var(--bleed) * -1);width:calc(100% + var(--bleed));
  }
  /* Spiegelverkehrt laeuft das Bild nach links aus dem Raster. Dort liegt
     zusaetzlich der Innenabstand des Rasters dazwischen. */
  .s-hero_person--links .s-hero_person__media{
    --bleed:calc(max(0px,(var(--vw) - var(--maxw)) / 2) + var(--pad));
    margin-right:0;margin-left:calc(var(--bleed) * -1);width:calc(100% + var(--bleed));
  }
  .s-text_bild__media{
    --bleed:calc(max(0px,(var(--vw) - var(--maxw)) / 2) + var(--pad));
    margin-left:calc(var(--bleed) * -1);width:calc(100% + var(--bleed));
  }
  .s-text_bild--rechts .s-text_bild__media{
    margin-left:0;margin-right:calc(var(--bleed) * -1);
  }
}
@media(max-width:1240px){
  .s-hero_person .zahl{left:-1.5rem}
  .s-text_bild .zahl{right:-1rem}
  .s-text_bild--rechts .zahl{right:auto;left:-1rem}
}
@media(max-width:620px){
  .zahl{padding:1.1rem 1.4rem;gap:.9rem}
}
@media(max-width:1100px){
  .s-hero_person__grid{grid-template-columns:1fr;padding-inline:var(--pad)}
  .s-hero_person__media{justify-self:stretch;margin-top:2.6rem}
  /* Das Portraet bleibt im Hochformat, es wird nicht beschnitten. */
  .s-hero_person__media img{border-radius:1.5rem;aspect-ratio:4/5}
  .s-text_bild__grid,.s-text_bild--rechts .s-text_bild__grid{grid-template-columns:1fr}
  .s-text_bild__media img,.s-text_bild--rechts .s-text_bild__media img{border-radius:1.5rem;aspect-ratio:4/5}
  .s-text_bild--rechts .s-text_bild__media{order:0}
  .s-text_bild__quadrat{right:-.8rem;bottom:-1.6rem;width:8rem;height:8rem}
  .s-newsletter__grid{grid-template-columns:1fr}
  .s-formular__grid{grid-template-columns:1fr}
  .s-karten_drei__grid{grid-template-columns:1fr 1fr}
  .s-karten_drei__karte:nth-child(3){grid-column:1 / -1;margin-top:0}

  /* Der gespiegelte Kopfbereich steht ab hier ebenfalls einspaltig. */
  .s-hero_person--links .s-hero_person__grid{padding-inline:var(--pad);grid-template-columns:1fr}
  .s-hero_person--links .s-hero_person__media{order:0;justify-self:stretch}
  .s-hero_person--links .s-hero_person__media img{border-radius:1.5rem}
  .s-hero_person--links .zahl{right:auto}

  /* Vier Karten passen ab hier nicht mehr nebeneinander. */
  .s-karten_raster--sp4 .s-karten_raster__grid,
  .s-karten_raster--sp3 .s-karten_raster__grid{grid-template-columns:1fr 1fr}
  .s-kennzahlen__band{grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,2.4rem)}
  .s-karten_raster--sp3 .s-karten_raster__karte:nth-child(3){grid-column:1 / -1}
  .s-karten_raster__karte{margin-top:0 !important}

  /* Das Bild steht nicht mehr, es geht ueber den Textstrang. */
  .s-text_klebt__grid,
  .s-text_klebt--links .s-text_klebt__grid{grid-template-columns:1fr}
  .s-text_klebt__media,
  .s-text_klebt--rechts .s-text_klebt__media,
  .s-text_klebt--links .s-text_klebt__media{position:static;order:0;margin-bottom:2.6rem}
  .s-text_klebt__bild img{aspect-ratio:3/2}
  .s-textblock--zwei .s-textblock__text{columns:1}

  /* Die Kennzahl bleibt am Bild und steht mittig auf der unteren Kante,
     zur Haelfte darueber hinaus. */
  .zahl,
  .s-hero_person .zahl,
  .s-text_bild .zahl,
  .s-text_bild--rechts .zahl{
    position:absolute;left:50%;right:auto;top:auto;bottom:-2rem;
    translate:-50% 0;margin:0;width:max-content;max-width:calc(100% - 2rem);
  }
  .zahl b{font-size:clamp(2.6rem,11vw,3.4rem)}
  .zahl span{max-width:none}

  /* Platz fuer den herausragenden Teil der Kennzahl-Karte. */
  .s-hero_person__media{margin-bottom:3rem}
  .s-text_bild__media{margin-bottom:5.6rem}
}
@media(max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .s-blog_liste__grid{grid-template-columns:1fr 1fr}
  .s-seitenkopf__media img{aspect-ratio:3/2}
  .s-beitrag__bild img{aspect-ratio:3/2}
  .s-beitrag__autor{flex-direction:column;text-align:center;align-items:center}
  .s-beitrag__autor .kicker{justify-content:center}
  .s-karten_drei__grid{grid-template-columns:1fr}
  .s-karten_drei__karte:nth-child(2),.s-karten_drei__karte:nth-child(3){margin-top:0}
  .s-karten_raster--sp2 .s-karten_raster__grid{grid-template-columns:1fr}
  .s-instagram__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .s-romane__grid{grid-template-columns:1fr 1fr}
  .s-romane__cover img{aspect-ratio:7/10}
}
@media(max-width:620px){
  .s-karten_raster__grid,
  .s-karten_raster--sp3 .s-karten_raster__grid,
  .s-karten_raster--sp4 .s-karten_raster__grid{grid-template-columns:1fr}
  .s-karten_raster--sp3 .s-karten_raster__karte:nth-child(3){grid-column:auto}
  .s-kennzahlen__band{grid-template-columns:1fr;gap:2rem}
  .s-logowand__raster{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.8rem}
  .ml27-verzeichnis ol{columns:1}
  .s-formular__wege li{flex-direction:column;gap:.2rem}
  .s-kennzahlen__zelle{padding-top:1.2rem}
  .s-kennzahlen__wert{font-size:clamp(2.4rem,10vw,3.2rem)}
  .s-kennzahlen__text{max-width:none;font-size:1.05rem}
  /* Feste Abstaende aus dem Backend waeren auf dem Handy zu viel Leerraum. */
  .s-kennzahlen{padding-block:clamp(3.4rem,13vw,5.5rem)}
  .s-text_klebt__bild img{aspect-ratio:4/3}
  .s-text_klebt__btns .btn{flex:1 1 100%}
  .ml27-artikel__liste a svg{display:none}
  .s-blog_liste__grid{grid-template-columns:1fr}
  .s-seitenkopf__media img,
  .s-beitrag__bild img{aspect-ratio:4/3}
  .s-vierhundertvier__btns .btn{flex:1 1 100%}
  .s-romane__grid{grid-template-columns:1fr;gap:3rem}
  /* Buchcover behalten ihr Hochformat und stehen komplett im Bild. */
  .s-romane__cover{max-width:84%}
  .s-romane__cover img{aspect-ratio:7/10}
  .s-hero_person__btns .btn{flex:1 1 100%}
  /* Erste Spalte ueber die volle Breite, darunter Seiten und Folgen
     nebeneinander. Beide Bloecke sitzen mittig im Fussbereich, der Text
     darin bleibt linksbuendig. */
  .footer__grid{
    grid-template-columns:1fr 1fr;gap:2.4rem 2rem;
    max-width:min(100%,20.5rem);margin-inline:auto;
  }
  .footer__brand{grid-column:1 / -1}
  .s-zitatband__marke{display:none}
  .zahl{padding:1.2rem 1.5rem;gap:.9rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-einlauf]{opacity:1;transform:none}
  .zeile>span{transform:none}
  .versatz{transform:none}
  .s-zitatband .wort{color:var(--f-titel)}
}