/* =========================================================================
   DESIGN-SYSTEM  ·  winfried-schroeter.de
   Alle Farben, Schriften, Abstaende und Bausteine an EINER Stelle.
   ========================================================================= */

/* ---------- 1. Schriften ------------------------------------------------- */
/* CD/CI-Manual: Logo-Schrift INDUSTRY (nur im Logo), Text Arial,
   bei Platzmangel Arial Narrow. Systemschriften = nichts nachzuladen,
   kein Datenschutzthema, sofortiger Seitenaufbau.                          */

/* ---------- 2. Design-Token ---------------------------------------------- */
:root{
  /* Farben – Basis */
  --papier:      #FFFFFF;   /* Grund                                  */
  --papier-2:    #EAF0F9;   /* abgesetzte Flaechen, leicht blau       */
  --weiss:       #FFFFFF;
  --tinte:       #14181F;   /* Schwarz/Anthrazit, Fliesstext          */
  --tinte-tief:  #002F5D;   /* CD: dunkles Blau, Hintergrundflaechen  */
  --grau:        #5A6472;   /* Sekundaertext        6,9:1 auf Weiss   */
  --grau-linie:  #DCE1E8;

  /* Farben – Marke, verbindlich aus dem CD/CI-Manual */
  --blau:        #00449e;   /* Pantone 541 · Primaerfarbe   9,0:1     */
  --blau-tief:   #002F5D;   /* dunkles Blau                           */
  --blau-hauch:  #EBF0F8;
  --spirale:     #4C5775;   /* helleres Blau der Spirale              */
  --gruen:       #6bff33;   /* Pantone 360 · NUR auf dunklem Grund    */
  --gruen-tief:  #2F7A0F;   /* abgeleitet, wenn Gruen auf Hell noetig */
  --gruen-hauch: #F0FBE9;

  /* Schrift */
  --schrift-text:    Arial, 'Helvetica Neue', Helvetica, 'Liberation Sans', sans-serif;
  --schrift-schmal:  'Arial Narrow', 'Helvetica Neue Condensed', 'Liberation Sans Narrow', Arial, sans-serif;
  --schrift-display: var(--schrift-text);

  /* Typo-Skala (fluid) */
  --t-xxl: clamp(2.75rem, 1.5rem + 5.4vw, 5.6rem);
  --t-xl:  clamp(2.3rem, 1.3rem + 3.9vw, 4.3rem);
  --t-l:   clamp(1.75rem, 1.2rem + 2.1vw, 2.8rem);
  --t-m:   clamp(1.3rem, 1.05rem + 0.95vw, 1.75rem);
  --t-s:   clamp(1.02rem, 0.97rem + 0.24vw, 1.14rem);
  --t-xs:  0.875rem;
  --t-mini:0.75rem;

  /* Abstaende */
  --r1:.25rem; --r2:.5rem; --r3:.75rem; --r4:1rem;  --r5:1.5rem;
  --r6:2rem;   --r7:3rem;  --r8:4rem;   --r9:6rem;  --r10:8rem;
  --sektion: clamp(4rem, 2rem + 8vw, 8.5rem);

  /* Form */
  --radius:   14px;
  --radius-s: 8px;
  --radius-xl:26px;
  --container: 1240px;
  --schmal:    760px;

  /* Schatten */
  --schatten-s: 0 1px 2px rgba(20,22,26,.05), 0 2px 8px rgba(20,22,26,.04);
  --schatten-m: 0 2px 4px rgba(20,22,26,.05), 0 12px 32px rgba(20,22,26,.08);
  --schatten-l: 0 4px 8px rgba(20,22,26,.06), 0 24px 60px rgba(20,22,26,.13);

  /* Bewegung */
  --weich: .38s cubic-bezier(.22,.68,.35,1);
}

/* ---------- 3. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--schrift-text);font-size:var(--t-s);line-height:1.68;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
/* KEINE Silbentrennung in Ueberschriften. Ein getrenntes Wort in einer
   Ueberschrift faellt sofort auf und liest sich schlecht – lieber bricht
   die Zeile frueher um. „overflow-wrap" bleibt als Notnagel stehen, damit
   ein sehr langes Wort auf dem Handy nicht seitlich herauslaeuft.
   Im Fliesstext wird ohnehin nicht getrennt (dort ist nichts gesetzt).  */
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.06;letter-spacing:-.022em;
  overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}
/* Browser geben blockquote und figure standardmaessig 40px Seitenrand –
   das verengte die Zitatkarten auf zwei Drittel ihrer Breite.        */
blockquote,figure,figcaption,dl,dd{margin:0}
p{margin:0 0 var(--r4)}
p:last-child{margin-bottom:0}
a{color:var(--blau);text-decoration-thickness:1px;text-underline-offset:3px}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:3px}
::selection{background:var(--gruen);color:#0C1A00}

/* ---------- 4. Layout ---------------------------------------------------- */
.huelle{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.15rem,4.5vw,3rem)}
.huelle-schmal{max-width:var(--schmal);margin-inline:auto}
.sektion{padding-block:var(--sektion)}
.sektion-eng{padding-block:calc(var(--sektion)*.62)}
.sektion--dunkel{background:var(--tinte-tief);color:#EDEAE4}
.sektion--dunkel h1,.sektion--dunkel h2,.sektion--dunkel h3{color:#fff}
.sektion--dunkel .lead,.sektion--dunkel .grau{color:#B3B8C0}
.sektion--sand{background:var(--papier-2)}
.raster{display:grid;gap:var(--r5)}
@media(min-width:700px){ .r-2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .r-3{grid-template-columns:repeat(3,1fr)} .r-4{grid-template-columns:repeat(4,1fr)} }
/* Im schmalen Textbereich (760 px) waeren drei Karten nur gut 200 px breit –
   lange Woerter wie „Einzelcoaching" wurden dort mitten im Wort umbrochen.
   Dort also zwei Spalten.                                                */
@media(min-width:960px){ .huelle-schmal .r-3{grid-template-columns:repeat(2,1fr)}
                         .huelle-schmal .r-4{grid-template-columns:repeat(2,1fr)} }
.nur-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 5. Typografie-Bausteine -------------------------------------- */
.display{font-size:var(--t-xxl);font-weight:700;line-height:1.0;letter-spacing:-.035em}
.h-xl{font-size:var(--t-xl);font-weight:700;line-height:1.06;letter-spacing:-.03em}
.h-l {font-size:var(--t-l);font-weight:700;line-height:1.14;letter-spacing:-.025em}
.h-m {font-size:var(--t-m);font-weight:700;letter-spacing:-.02em;line-height:1.28}
.schmal{font-family:var(--schrift-schmal)}
.lead{font-size:clamp(1.1rem,1rem + .55vw,1.36rem);line-height:1.6;color:var(--grau);font-weight:400}
.grau{color:var(--grau)}
/* Kleingedrucktes: Quellenangaben, Einordnungen, Hinweise unter einem Block. */
.klein{font-size:var(--t-xs);line-height:1.55}
.kursiv{font-style:italic}

.marke{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t-mini);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blau);margin-bottom:var(--r4);
}
/* Statt eines Kreises steht die Marken-Spirale vor der Zeile. Sie nimmt
   über currentColor automatisch die Farbe der Zeile an – blau auf hell,
   grün auf dunkel. Kein zweites Bild, keine Sonderregeln.               */
.marke::before{content:"";width:16px;aspect-ratio:324/352;flex:none;background:currentColor;
  -webkit-mask-image:url('/assets/img/marke/spirale-maske.png');
          mask-image:url('/assets/img/marke/spirale-maske.png');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-position:center;  mask-position:center}
.sektion--dunkel .marke{color:var(--gruen)}

/* Wo statt der Textzeile das echte Logo einer Marke steht (Coaching-Akademie).
   Feste Hoehe, Breite ergibt sich – so bleibt es auf dem Telefon lesbar und
   nimmt oben nicht zu viel Platz weg.                                     */
.marken-logo{display:block;height:clamp(64px, 6vw, 104px);width:auto;
  margin-bottom:var(--r5)}

.kopfblock{max-width:85ch;margin-bottom:var(--r7)}
.kopfblock h1,.kopfblock h2{text-wrap:balance}
/* Ueberschriften auf moeglichst gleich lange Zeilen verteilen. Damit bleibt
   selten ein einzelnes Wort allein in der letzten Zeile stehen.
   Aeltere Browser ignorieren die Angabe einfach.                        */
h1,h2,h3,.h-xl,.h-l,.h-m{text-wrap:balance}
.kopfblock .lead{margin-top:var(--r4)}

/* ---------- 6. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.7rem;border-radius:100px;font-size:.95rem;font-weight:600;
  letter-spacing:-.005em;text-decoration:none;border:1.5px solid transparent;
  transition:background var(--weich),color var(--weich),border-color var(--weich),transform .18s ease,box-shadow var(--weich);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none;transition:transform var(--weich)}
.btn:hover svg{transform:translateX(3px)}

.btn--primaer{background:var(--blau);color:#fff;box-shadow:0 4px 14px rgba(0,68,158,.26)}
.btn--primaer:hover{background:var(--blau-tief);box-shadow:0 8px 26px rgba(0,68,158,.34)}

.btn--rand{background:transparent;color:var(--tinte);border-color:var(--grau-linie)}
.btn--rand:hover{border-color:var(--tinte);background:var(--tinte);color:#fff}

.btn--hell{background:#fff;color:var(--tinte)}
.btn--hell:hover{background:var(--gruen);color:#0C1A00}

.btn--geist{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.btn--geist:hover{border-color:#fff;background:#fff;color:var(--tinte)}

.btn-reihe{display:flex;flex-wrap:wrap;gap:var(--r3);margin-top:var(--r6)}


.textlink{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.93rem;
  color:var(--blau);text-decoration:none;
  border-bottom:1.5px solid rgba(0,68,158,.3);padding-bottom:2px;
  transition:border-color var(--weich),gap var(--weich);
}
.textlink:hover{border-color:var(--blau);gap:.7rem}
/* Auf Geraeten, die mit dem Finger bedient werden, die Tippflaeche der
   Pfeil-Links auf gut 40 px erhoehen. Am Bildschirm mit Maus bleibt alles
   wie es ist.                                                            */
@media(pointer:coarse){ .textlink{padding-top:7px;padding-bottom:9px} }
.sektion--dunkel 
.textlink{color:var(--gruen);border-color:rgba(151,217,63,.4)}
.sektion--dunkel .textlink:hover{border-color:var(--gruen)}

/* ---------- 7. Kopfbereich / Navigation ---------------------------------- */
.kopf{
  position:sticky;top:0;z-index:900;
  background:rgba(251,249,246,.82);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--weich),background var(--weich),box-shadow var(--weich);
}
.kopf.ist-gescrollt{border-bottom-color:var(--grau-linie);box-shadow:0 1px 20px rgba(20,22,26,.05)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:var(--r5);min-height:78px}

.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--tinte);flex:none}
.logo img{height:40px;width:auto}
.logo .logo-text[hidden]{display:none}
.logo .logo-text{color:var(--blau)}
.logo .logo-marke{letter-spacing:.26em;color:var(--spirale)}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-name{font-size:1.12rem;font-weight:700;letter-spacing:-.02em}
.logo-marke{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--grau);margin-top:.22rem}

.nav{display:none}
@media(min-width:1080px){
  .nav{display:block}
  .nav>ul{display:flex;align-items:center;gap:.35rem;list-style:none}
  .nav a,.nav-schalter{
    display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
    padding:.6rem .8rem;border-radius:8px;font-size:.9rem;font-weight:500;
    color:var(--tinte);text-decoration:none;transition:background var(--weich),color var(--weich);
  }
  .nav a:hover,.nav-schalter:hover{background:var(--blau-hauch);color:var(--blau)}
  .nav a.ist-aktiv,.nav-schalter.ist-aktiv{color:var(--blau);font-weight:600}
  .nav-punkt{position:relative}
  .nav-pfeil{opacity:.5;transition:transform var(--weich)}
  .hat-menue:hover .nav-pfeil,.hat-menue:focus-within .nav-pfeil{transform:rotate(180deg)}
  .nav-untermenue{
    position:absolute;top:calc(100% + 8px);left:0;min-width:264px;list-style:none;
    background:#fff;border:1px solid var(--grau-linie);border-radius:var(--radius);
    box-shadow:var(--schatten-l);padding:.5rem;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--weich),transform var(--weich),visibility var(--weich);
  }
  .hat-menue:hover .nav-untermenue,.hat-menue:focus-within .nav-untermenue{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-untermenue a{display:block;padding:.65rem .8rem;border-radius:var(--radius-s);font-size:.9rem;white-space:normal}
}
.kopf-aktion{display:flex;align-items:center;gap:var(--r3);flex:none}
.kopf-aktion .btn{padding:.7rem 1.25rem;font-size:.88rem}
@media(max-width:1079px){ .kopf-aktion .btn{display:none} }

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;align-items:center;border-radius:10px;transition:background var(--weich)}
.burger:hover{background:var(--papier-2)}
.burger span{display:block;width:22px;height:1.8px;background:var(--tinte);border-radius:2px;transition:transform var(--weich),opacity var(--weich)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
@media(min-width:1080px){ .burger{display:none} }

/* Mobile Menue */
.menue-mobil{
  position:fixed;inset:78px 0 0;z-index:890;background:var(--papier);
  padding:var(--r5) 0 var(--r8);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
}
.menue-mobil.ist-offen{opacity:1;visibility:visible;transform:translateY(0)}
.menue-mobil ul{list-style:none}
.menue-mobil>.huelle>ul>li{border-bottom:1px solid var(--grau-linie)}
.menue-mobil .m-haupt{
  display:block;padding:1.05rem 0 .5rem;font-size:1.32rem;font-weight:700;
  letter-spacing:-.025em;color:var(--tinte);text-decoration:none;
}
.menue-mobil ul ul{padding:0 0 1rem}
.menue-mobil ul ul a{display:block;padding:.5rem 0 .5rem 1rem;font-size:.98rem;color:var(--grau);text-decoration:none;border-left:2px solid var(--grau-linie)}
.menue-mobil ul ul a:hover{color:var(--blau);border-color:var(--gruen)}
.menue-mobil .m-aktion{margin-top:var(--r6);display:grid;gap:var(--r3)}

/* Sticky-CTA auf Mobil */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:880;
  display:flex;gap:.6rem;padding:.7rem clamp(1.15rem,4.5vw,3rem) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(251,249,246,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--grau-linie);
  transform:translateY(105%);transition:transform .35s ease;
}
.sticky-cta.ist-sichtbar{transform:translateY(0)}
.sticky-cta .btn{flex:1;padding:.85rem 1rem;font-size:.9rem}
@media(min-width:1080px){ .sticky-cta{display:none} }

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{position:relative;background:var(--tinte-tief);color:#fff;overflow:hidden;isolation:isolate}
.hero-bild{position:absolute;inset:0;z-index:-2}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:62% 28%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(11,13,16,.95) 0%, rgba(11,13,16,.82) 38%, rgba(11,13,16,.30) 72%, rgba(11,13,16,.12) 100%),
    linear-gradient(to top, rgba(11,13,16,.85) 0%, transparent 45%);
}
.hero-innen{position:relative;padding-block:clamp(4.5rem,3.5rem + 11vw,9.5rem)}
.hero-innen>*{max-width:46rem}
.hero h1{color:#fff;margin-bottom:var(--r5)}
.hero h1 em{font-style:normal;color:var(--gruen)}
.hero .lead{color:#D6D9DE;max-width:38rem}
.hero-fuss{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r5);
  margin-top:var(--r7);padding-top:var(--r5);border-top:1px solid rgba(255,255,255,.15);
  font-size:var(--t-xs);color:#A9AEB6;
}
.hero-fuss strong{color:#fff;font-weight:600}

/* Bild-Platzhalter (bis Originalfotos geliefert sind) */
.platzhalter{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;padding:var(--r6);min-height:220px;
  background:
    repeating-linear-gradient(45deg,rgba(0,68,158,.05) 0 12px,transparent 12px 24px),
    var(--papier-2);
  border:1.5px dashed rgba(0,68,158,.34);border-radius:var(--radius);
  color:var(--blau);font-size:var(--t-xs);font-weight:600;
}
.platzhalter span{display:block;font-weight:400;color:var(--grau);max-width:34ch;line-height:1.5}
.platzhalter::before{content:"BILD FOLGT";font-size:var(--t-mini);letter-spacing:.18em;opacity:.7}

/* ---------- 9. Vertrauensleiste / Logos ---------------------------------- */
.vertrauen{border-block:1px solid var(--grau-linie);background:var(--weiss)}
.vertrauen-innen{display:grid;gap:var(--r6);padding-block:var(--r6)}
.vertrauen-titel{font-size:var(--t-mini);letter-spacing:.18em;text-transform:uppercase;color:var(--grau);text-align:center}
.logo-wand{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:var(--r5) var(--r6);align-items:center;justify-items:center;
}
.logo-wand img{
  /* Feste Flaeche, Logo darin eingepasst: dann wirken breite Schriftzuege und
     quadratische Zeichen gleich gross. Die Dateien sind freigestellt und
     bereits auf dieselbe Flaeche gebracht.                                */
  height:52px;width:130px;object-fit:contain;
  /* In Farbe, nur leicht zurueckgenommen. Die frueheren Filter haben helle
     Logos so weit aufgehellt, dass sie auf dem Telefon verschwanden.      */
  opacity:.88;
  transition:filter var(--weich),opacity var(--weich),transform var(--weich);
}
.logo-wand a:hover img,.logo-wand img:hover{filter:none;opacity:1;transform:scale(1.05)}

/* ---------- 10. Karten --------------------------------------------------- */
.karte{
  position:relative;display:flex;flex-direction:column;
  background:var(--weiss);border:1px solid var(--grau-linie);border-radius:var(--radius);
  overflow:hidden;transition:transform var(--weich),box-shadow var(--weich),border-color var(--weich);
}
.karte::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--blau);transform-origin:left;
  transition:transform var(--weich);
}
a.karte{text-decoration:none;color:inherit}
.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-m);border-color:transparent}
/* Die blaue Oberkante ist jetzt immer da – beim Überfahren hebt sich die Karte. */
.karte-bild{aspect-ratio:16/10;background:var(--papier-2);overflow:hidden}
.karte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.karte:hover .karte-bild img{transform:scale(1.045)}
.karte-inhalt{padding:var(--r5);display:flex;flex-direction:column;gap:var(--r3);flex:1}
.karte-inhalt>
.textlink{margin-top:auto;align-self:flex-start;padding-top:var(--r2)}
.karte-etikett{
  align-self:flex-start;font-size:var(--t-mini);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blau);background:var(--blau-hauch);padding:.34rem .7rem;border-radius:100px;
}
.karte-etikett--gruen{color:var(--gruen-tief);background:var(--gruen-hauch)}

/* Kompetenz-Karte mit Nummer */
/* Nummernkarten tragen dieselbe blaue Oberkante wie die Zitatkarten –
   damit alle Kartenarten als eine Familie zu erkennen sind.            */
.komp{position:relative;padding:var(--r6) var(--r5);background:var(--weiss);
  border:1px solid var(--grau-linie);border-top:3px solid var(--blau);
  border-radius:var(--radius);transition:transform var(--weich),box-shadow var(--weich)}
.sektion--dunkel .komp{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
  border-top-color:var(--gruen)}
.sektion--dunkel .komp h3{color:#fff}
.sektion--dunkel .komp p{color:#9BA6B4}
.komp:hover{transform:translateY(-4px);box-shadow:var(--schatten-m)}
.komp-nr{font-size:1.55rem;font-weight:700;line-height:1;color:var(--blau);margin-bottom:var(--r4);letter-spacing:-.02em}
.sektion--dunkel .komp-nr{color:var(--gruen)}
.komp h3{margin-bottom:var(--r3)}
.komp p{color:var(--grau);font-size:.97rem}

/* ---------- 11. Zahlen --------------------------------------------------- */
.zahlen{display:grid;gap:var(--r6);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.zahl{text-align:left;border-left:3px solid var(--blau);padding-left:var(--r4)}
.sektion--dunkel .zahl{border-left-color:var(--gruen)}
.zahl-wert{font-size:clamp(2.2rem,1.5rem + 2.3vw,3.2rem);font-weight:700;line-height:1;letter-spacing:-.035em}
.zahl-text{font-size:var(--t-xs);color:var(--grau);margin-top:.55rem;line-height:1.45}
/* „über" gehoert zur Zahl, ist aber kein Zahlzeichen: eigene kleine Zeile
   darueber. Sonst bricht „über 45.000" mitten entzwei.                  */
.zahl-wert{white-space:nowrap}
.zahl-vor{display:block;font-size:.42em;font-weight:600;letter-spacing:.04em;
  color:var(--grau);margin-bottom:.1em}
.sektion--dunkel .zahl-text{color:#A9AEB6}

/* ---------- 12. Zitate --------------------------------------------------- */
.zitat{
  display:flex;flex-direction:column;gap:var(--r4);height:100%;
  padding:var(--r6) var(--r5);background:var(--weiss);
  border:1px solid var(--grau-linie);border-radius:var(--radius);
}
.zitat-text{font-size:1.16rem;line-height:1.5;letter-spacing:-.015em;font-weight:400}
.zitat-text::before{content:"„"}
.zitat-text::after{content:"“"}
.zitat-quelle{display:flex;align-items:center;gap:.85rem;margin-top:auto;padding-top:var(--r4);border-top:1px solid var(--grau-linie)}
.zitat-quelle img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.zitat-initial{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--blau-hauch);color:var(--blau);font-weight:600;font-size:.95rem;
}
.zitat-name{font-weight:600;font-size:.93rem;line-height:1.3}
.zitat-rolle{font-size:var(--t-xs);color:var(--grau);line-height:1.3}
.zitat--gross{grid-column:1/-1;text-align:center;align-items:center;padding:var(--r8) var(--r6)}
.zitat--gross .zitat-text{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.35rem);max-width:24ch;margin-inline:auto}
.zitat--gross .zitat-quelle{border:0;justify-content:center}

/* Bewertungs-Badge */
.bewertung{display:inline-flex;align-items:center;gap:.75rem;padding:.7rem 1.15rem;background:var(--weiss);border:1px solid var(--grau-linie);border-radius:100px;text-decoration:none;color:inherit;transition:box-shadow var(--weich),transform var(--weich)}
.bewertung:hover{box-shadow:var(--schatten-m);transform:translateY(-2px)}
.sterne{display:flex;gap:2px;color:#E8A317}
.sterne svg{width:15px;height:15px;fill:currentColor}
.bewertung-text{font-size:var(--t-xs);color:var(--grau)}
.bewertung-text strong{color:var(--tinte);font-weight:600}

/* ---------- 13. Video ---------------------------------------------------- */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--tinte-tief)}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* DSGVO-Vorschaltung fuer YouTube */
.video-schutz{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--r3);text-align:center;padding:var(--r5);background:var(--tinte-tief);color:#D6D9DE;cursor:pointer}
.video-schutz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.video-schutz>*{position:relative;z-index:1}
.video-schutz p{font-size:var(--t-xs);max-width:36ch;color:#A9AEB6}
.abspielen{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:background var(--weich),transform var(--weich)}
.video-schutz:hover .abspielen{background:var(--gruen);border-color:var(--gruen);transform:scale(1.07)}
.abspielen svg{width:24px;height:24px;fill:#fff;margin-left:4px}
.video-schutz:hover .abspielen svg{fill:#0C1A00}
/* Video-Platzhalter fuer noch fehlende Filme */

.video--platzhalter{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--r3);text-align:center;padding:var(--r6);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px),var(--tinte-tief);
  border:1.5px dashed rgba(107,255,51,.45);color:#C9CDD4;
}
.video--platzhalter .marke{color:var(--gruen);justify-content:center}
.video--platzhalter p{font-size:var(--t-xs);color:#9BA1AA;max-width:40ch}

/* ---------- 14. Aufzaehlungen -------------------------------------------- */
.haken{list-style:none;display:grid;gap:var(--r3)}
.haken li{position:relative;padding-left:2rem;line-height:1.6}
.haken li::before{
  content:"";position:absolute;left:0;top:.52em;width:13px;height:8px;
  border-left:2px solid var(--gruen-tief);border-bottom:2px solid var(--gruen-tief);
  transform:rotate(-45deg);border-radius:1px;
}
.punkte{list-style:none;display:grid;gap:var(--r3)}
.punkte li{position:relative;padding-left:1.5rem;color:var(--grau)}
.punkte li::before{content:"";position:absolute;left:.1rem;top:.62em;width:8px;height:8px;border-radius:50%;border:2px solid var(--blau);box-sizing:border-box}
.sektion--dunkel .punkte li::before{border-color:var(--gruen)}

/* ---------- 15. Ablauf / Module ------------------------------------------ */
.modul{border-top:1px solid var(--grau-linie)}
.modul:last-child{border-bottom:1px solid var(--grau-linie)}
.modul-kopf{display:flex;align-items:flex-start;gap:var(--r5);width:100%;text-align:left;padding:var(--r5) 0;transition:color var(--weich)}
.modul-kopf:hover{color:var(--blau)}
.modul-nr{font-size:.95rem;font-weight:700;color:var(--blau);flex:none;min-width:3rem;padding-top:.3rem}
.sektion--dunkel .modul-nr{color:var(--gruen)}
.modul-titel{flex:1;font-size:var(--t-m);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.modul-plus{flex:none;width:30px;height:30px;border:1.5px solid var(--grau-linie);border-radius:50%;display:grid;place-items:center;transition:transform var(--weich),background var(--weich),border-color var(--weich)}
.modul-kopf[aria-expanded="true"] .modul-plus{transform:rotate(45deg);background:var(--blau);border-color:var(--blau);color:#fff}
.modul-koerper{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--weich)}
.modul-koerper>div{overflow:hidden}
.modul-kopf[aria-expanded="true"]+.modul-koerper{grid-template-rows:1fr}
.modul-inhalt{padding:0 0 var(--r5) 4.5rem;color:var(--grau);max-width:64ch}
@media(max-width:640px){ .modul-inhalt{padding-left:0} }

/* ---------- 16. Formular ------------------------------------------------- */
.formular{display:grid;gap:var(--r4)}
.feld{display:grid;gap:.45rem}
.feld label{font-size:var(--t-xs);font-weight:600}
.feld .hinweis{font-size:var(--t-mini);color:var(--grau);font-weight:400}
.feld input,.feld textarea,.feld select{
  width:100%;padding:.85rem 1rem;font:inherit;font-size:.97rem;color:var(--tinte);
  background:var(--weiss);border:1.5px solid var(--grau-linie);border-radius:var(--radius-s);
  transition:border-color var(--weich),box-shadow var(--weich);
}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,68,158,.18);
}
.feld textarea{min-height:150px;resize:vertical}
.feld-paar{display:grid;gap:var(--r4)}
@media(min-width:620px){ .feld-paar{grid-template-columns:1fr 1fr} }
.zustimmung{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--t-xs);color:var(--grau);line-height:1.55}
.zustimmung input{width:24px;height:24px;flex:none;margin-top:.15rem;accent-color:var(--blau)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 17. Kontaktzeile --------------------------------------------- */
.kontakt-direkt{display:grid;gap:var(--r4)}
.kontakt-zeile{display:flex;align-items:center;gap:var(--r4);padding:var(--r4);background:var(--weiss);border:1px solid var(--grau-linie);border-radius:var(--radius);text-decoration:none;color:inherit;transition:border-color var(--weich),transform var(--weich)}
.kontakt-zeile:hover{border-color:var(--blau);transform:translateX(3px)}
.kontakt-zeile svg{width:20px;height:20px;flex:none;color:var(--blau)}
.kontakt-zeile b{display:block;font-size:.95rem}
.kontakt-zeile span{font-size:var(--t-xs);color:var(--grau)}

/* ---------- 18. Fußbereich ----------------------------------------------- */
.fuss{background:var(--tinte-tief);color:#B3B8C0;padding-block:var(--r9) var(--r6);font-size:.92rem}
.fuss a{color:#D6D9DE;text-decoration:none;transition:color var(--weich)}
.fuss a:hover{color:var(--gruen)}
.fuss-raster{display:grid;gap:var(--r7);margin-bottom:var(--r8)}
@media(min-width:860px){ .fuss-raster{grid-template-columns:1.5fr 1fr 1fr 1.2fr} }
.fuss h4{font-size:var(--t-mini);letter-spacing:.16em;text-transform:uppercase;color:#9AA3AE;margin-bottom:var(--r4)}
.fuss ul{list-style:none;display:grid;gap:.7rem}
.fuss .logo-name{color:#fff}
.fuss .logo-marke{color:#9AA3AE}
.fuss-text{margin-top:var(--r4);max-width:34ch;line-height:1.6;color:#9BA1AA;font-size:.9rem}
.social-reihe{display:flex;gap:.6rem;margin-top:var(--r5)}
.social-icon{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);transition:background var(--weich),border-color var(--weich),transform var(--weich);
}
.social-icon svg{width:17px;height:17px;fill:#D6D9DE;transition:fill var(--weich)}
.social-icon:hover{background:var(--gruen);border-color:var(--gruen);transform:translateY(-3px)}
.social-icon:hover svg{fill:#0C1A00}
.fuss-unten{display:flex;flex-wrap:wrap;gap:var(--r4) var(--r5);justify-content:space-between;align-items:center;padding-top:var(--r5);border-top:1px solid rgba(255,255,255,.12);font-size:var(--t-xs);color:#9AA3AE}
.fuss-recht{display:flex;flex-wrap:wrap;gap:var(--r5)}

/* ---------- 19. Newsletter ----------------------------------------------- */
.newsletter{background:var(--blau);color:#fff;border-radius:var(--radius-xl);padding:clamp(2rem,1.2rem + 3.4vw,3.6rem)}
.newsletter h3{color:#fff;margin-bottom:var(--r3)}
.newsletter p{color:#BBD0EE;max-width:42ch}
.newsletter form{display:flex;flex-wrap:wrap;gap:var(--r3);margin-top:var(--r5)}
.newsletter input{flex:1 1 240px;padding:.9rem 1.1rem;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);border-radius:100px;color:#fff;font:inherit;font-size:.95rem}
.newsletter input::placeholder{color:#B7CCE9}
.newsletter input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.16)}
.newsletter .klein{font-size:var(--t-mini);color:#B7CCE9;margin-top:var(--r4)}

/* ---------- 20. Hinweisbox ----------------------------------------------- */
.hinweisbox{
  border-left:3px solid var(--gruen-tief);background:var(--gruen-hauch);
  padding:var(--r5);border-radius:0 var(--radius-s) var(--radius-s) 0;font-size:.95rem;
}
.hinweisbox--blau{border-color:var(--blau);background:var(--blau-hauch)}
.hinweisbox--archiv{border-color:var(--grau);background:var(--papier-2);color:var(--grau)}
.hinweisbox b{display:block;margin-bottom:.35rem;color:var(--tinte)}

/* Archiv-Markierung fuer historische Inhalte */
.archiv-marke{
  display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-mini);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grau);
  background:var(--papier-2);border:1px solid var(--grau-linie);
  padding:.28rem .65rem;border-radius:100px;
}

/* ---------- 21. Brotkrumen ----------------------------------------------- */
.krumen{padding-block:var(--r5) 0;font-size:var(--t-xs);color:var(--grau)}
.krumen + .sektion-eng{padding-top:var(--r6)}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.krumen a{color:var(--grau);text-decoration:none}
.krumen a:hover{color:var(--blau)}
.krumen li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.krumen [aria-current]{color:var(--tinte)}

/* ---------- 22. Bild/Text-Sektion ---------------------------------------- */
.duo{display:grid;gap:var(--r7);align-items:center}
/* Rasterfelder duerfen schrumpfen: sonst sprengt ein langes deutsches
   Kompositum wie „Fuehrungskraefteentwicklung" die Spaltenaufteilung. */
.duo>*,.raster>*{min-width:0}
@media(min-width:900px){
  .duo{grid-template-columns:1fr 1fr;gap:var(--r9)}
  .duo--breit{grid-template-columns:1.15fr .85fr}
  .duo--gedreht>*:first-child{order:2}
}
.duo-bild{border-radius:var(--radius-xl);overflow:hidden;position:relative}
.duo-bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo-bild--quer img{aspect-ratio:4/3}

/* ---------- 23. Bewegung -------------------------------------------------- */
.zeigen{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.zeigen.ist-da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .zeigen{opacity:1;transform:none}
}

/* ---------- 24. Rechtstexte ---------------------------------------------- */
.rechtstext{max-width:74ch}

.rechtstext h2{font-size:1.28rem;font-weight:600;margin:var(--r7) 0 var(--r4)}

.rechtstext h3{font-size:1.05rem;font-weight:600;margin:var(--r6) 0 var(--r3)}
.rechtstext p,.rechtstext li{color:#3A4049;font-size:.98rem;line-height:1.72}
.rechtstext ul,.rechtstext ol{margin:0 0 var(--r4) 1.2rem;display:grid;gap:.5rem}
.rechtstext address{font-style:normal;line-height:1.75}

/* ---------- 25. Druck ---------------------------------------------------- */
@media print{
  .kopf,.fuss,.sticky-cta,.menue-mobil,.btn,.newsletter{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
}

/* ---------- 26. Logo-Slider ----------------------------------------------- */
.slider{overflow:hidden;position:relative;padding-block:var(--r5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.slider-spur{display:flex;width:max-content;gap:var(--r8);align-items:center;
  animation:laufen 46s linear infinite}
.slider:hover .slider-spur,.slider:focus-within .slider-spur{animation-play-state:paused}
.slider img{height:52px;width:130px;object-fit:contain;flex:none;
  /* In Farbe, nur leicht zurueckgenommen – siehe .logo-wand img. */
  opacity:.88;transition:filter var(--weich),opacity var(--weich)}
.slider img:hover{opacity:1}
.sektion--dunkel .slider img{filter:grayscale(1) brightness(3.4) contrast(.55);opacity:.72}
.sektion--dunkel .slider img:hover{filter:grayscale(1) brightness(4) contrast(.6);opacity:1}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .slider{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .slider-spur{animation:none;width:auto}
}

/* ---------- 27. Heller Hero (CD: clean, hell, Blautöne) ------------------- */
.hero--hell{background:var(--papier);color:var(--tinte);isolation:auto}
.hero--hell::after{display:none}
.hero--hell .hero-innen{padding-block:0}
.hero--hell .hero-innen>*{max-width:none}
.hero-split{display:grid;gap:var(--r7);align-items:center;
  padding-block:clamp(2.5rem,1.5rem + 5vw,5rem)}
@media(min-width:960px){ .hero-split{grid-template-columns:1.16fr .84fr;gap:var(--r8)} }
.hero-split h1{color:var(--tinte);margin-bottom:var(--r5);max-width:16ch}
.hero-split h1{font-size:clamp(2.4rem,1.5rem + 3.4vw,3.75rem);max-width:none}
.hero-split h1 em{font-style:normal;color:var(--blau);
  background-image:linear-gradient(var(--gruen),var(--gruen));
  background-size:100% .085em;background-position:0 92%;background-repeat:no-repeat;
  padding-bottom:.04em}
.hero-split .lead{color:var(--grau);max-width:44ch}
.hero-split .marke{color:var(--blau)}
.hero-split .hero-fuss{border-top-color:var(--grau-linie);color:var(--grau)}
.hero-split .hero-fuss strong{color:var(--tinte)}
.hero-foto{border-radius:var(--radius-xl);overflow:hidden;position:relative;box-shadow:var(--schatten-l)}
.hero-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
@media(min-width:960px){ .hero-foto img{aspect-ratio:5/6} }
/* Kringel als Marken-Stilelement hinter dem Bild */
.hero-foto{overflow:visible}
.hero-foto img{border-radius:var(--radius-xl)}
/* Die Spirale sitzt jetzt klein in der Ecke jedes Bildes – siehe Abschnitt 33. */

/* ---------- 28. Dunkler Hero: Marken-Eyebrow und Maßstab ------------------ */
.hero:not(.hero--hell) .marke{color:var(--gruen)}
.hero:not(.hero--hell) .display{font-size:clamp(2.4rem,1.5rem + 3.4vw,3.75rem)}
.hero:not(.hero--hell) .hero-innen>*{max-width:52rem}

/* ---------- 29. Persönliche Geschichte (Erzählabschnitt) ------------------ */
.geschichte{max-width:60ch;margin-inline:auto}
.geschichte p{font-size:clamp(1.06rem,1rem + .35vw,1.2rem);line-height:1.72;color:#2A303A}
.sektion--dunkel .geschichte p{color:#C8D0DA}
.geschichte p + p{margin-top:1.15rem}
.geschichte .auftakt{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);font-weight:700;
  letter-spacing:-.028em;line-height:1.18;color:var(--tinte);margin-bottom:1.5rem}
.sektion--dunkel .geschichte .auftakt{color:#fff}
.geschichte blockquote{margin:2rem 0;padding-left:1.4rem;border-left:3px solid var(--gruen-tief);
  font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem);font-weight:700;letter-spacing:-.022em;
  line-height:1.3;color:var(--tinte)}
.sektion--dunkel .geschichte blockquote{border-left-color:var(--gruen);color:#fff}
.geschichte .signatur{margin-top:2rem;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.sektion--dunkel .geschichte .signatur{color:#8F9AA8}

/* ---------- 30. Rechner (interaktives Werkzeug) --------------------------- */
.rechner{display:grid;gap:var(--r6);align-items:start}
@media(min-width:900px){ .rechner{grid-template-columns:.95fr 1.05fr;gap:var(--r7)} }

.rechner-eingabe{background:var(--weiss);border:1px solid var(--grau-linie);
  border-radius:var(--radius-xl);padding:clamp(1.5rem, 1rem + 1.6vw, 2.2rem);display:grid;gap:var(--r5)}
.regler{display:grid;gap:.6rem}
.regler-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.regler-kopf label{font-size:.92rem;font-weight:700;color:var(--tinte)}
.regler-wert{font-size:1.15rem;font-weight:700;color:var(--blau);font-variant-numeric:tabular-nums}
.regler input[type=range]{width:100%;accent-color:var(--blau);height:24px}
.regler .skala{display:flex;justify-content:space-between;font-size:var(--t-mini);color:var(--grau);font-variant-numeric:tabular-nums}
.regler .zusatz{font-size:var(--t-xs);color:var(--grau);line-height:1.45}

.stufen{display:grid;gap:.5rem}
.stufen-titel{font-size:.92rem;font-weight:700;color:var(--tinte)}
.stufe{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem .9rem;border:1.5px solid var(--grau-linie);
  border-radius:var(--radius-s);cursor:pointer;transition:border-color var(--weich),background var(--weich)}
.stufe:hover{border-color:var(--blau)}
.stufe:has(input:checked){border-color:var(--blau);background:var(--blau-hauch)}
.stufe input{margin-top:.2rem;accent-color:var(--blau);width:18px;height:18px;flex:none}
.stufe b{display:block;font-size:.9rem;color:var(--tinte)}
.stufe span{display:block;font-size:var(--t-xs);color:var(--grau);line-height:1.45;margin-top:.15rem}

.rechner-ergebnis{background:var(--tinte-tief);color:#D3DCE8;border-radius:var(--radius-xl);
  padding:clamp(1.5rem, 1rem + 1.6vw, 2.2rem);display:grid;gap:var(--r5)}
.ergebnis-block{display:grid;gap:.35rem}
.ergebnis-etikett{font-size:var(--t-mini);letter-spacing:.16em;text-transform:uppercase;color:var(--gruen)}
.ergebnis-zahl{font-size:clamp(2.4rem, 1.5rem + 3.4vw, 3.9rem);font-weight:700;line-height:1;
  letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.ergebnis-zusatz{font-size:.92rem;color:#9BA6B4;line-height:1.5}
.ergebnis-teiler{height:1px;background:rgba(255,255,255,.14)}
.ergebnis-zeile{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.95rem}
.ergebnis-zeile span{color:#9BA6B4}
.ergebnis-zeile b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ergebnis-fuss{font-size:var(--t-mini);color:#9AA4B2;line-height:1.55}

/* Kostenaufschlüsselung: einfaches Balkendiagramm, eine Farbe, Länge = Menge */
.kostenbalken{display:grid;gap:.55rem;margin-top:var(--r5)}
.kb-zeile{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem}
.kb-kopf{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.88rem}
.kb-kopf span{color:var(--grau)}
.kb-kopf b{color:var(--tinte);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.kb-spur{height:12px;background:var(--papier-2);border-radius:4px;overflow:hidden}
.kb-fuellung{height:100%;background:var(--blau);border-radius:0 4px 4px 0}
.sektion--dunkel .kb-kopf span{color:#9BA6B4}
.sektion--dunkel .kb-kopf b{color:#fff}
.sektion--dunkel .kb-spur{background:rgba(255,255,255,.1)}
.sektion--dunkel .kb-fuellung{background:var(--gruen)}
.kb-quelle{font-style:normal;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grau);border:1px solid var(--grau-linie);border-radius:99px;padding:.12rem .5rem;
  margin-left:.35rem;white-space:nowrap;display:inline-block;vertical-align:.08em}
.stufe:has(input[type=checkbox]:checked){border-color:var(--blau);background:var(--blau-hauch)}
.stufen{border:0;padding:0;margin:0;min-width:0}
.stufen legend{padding:0}
@media(min-width:900px){ .rechner .rechner-ergebnis{position:sticky;top:calc(var(--kopf-h,80px) + 1.25rem)} }

/* ---------- 31. Marke: Logo und Spiralen-Wasserzeichen -------------------- */
/* Das Logo liegt jetzt lokal im Projekt (entnommen aus dem CD-Handbuch).     */
.logo img{height:44px;width:auto}
@media(max-width:600px){ .logo img{height:38px} }

/* Wasserzeichen ohne zusaetzliches Markup: die Spirale als Maske ueber
   ::after, dadurch faerbbar und auf jedem Grund einsetzbar.                 */
.sektion--dunkel,.sektion--sand,.hero--hell{position:relative;overflow:hidden}
.sektion--dunkel>.huelle,.sektion--sand>.huelle,.hero--hell>.huelle{position:relative;z-index:1}

.sektion--dunkel::after,.sektion--sand::after,.hero--hell::after{
  content:"";position:absolute;pointer-events:none;z-index:0;display:block;
  aspect-ratio:324/352;
  -webkit-mask-image:url('/assets/img/marke/spirale-maske.png');
          mask-image:url('/assets/img/marke/spirale-maske.png');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-position:center;  mask-position:center;
}
.sektion--dunkel::after{background:var(--gruen);opacity:.10;
  width:min(44rem,74vw);right:-10%;top:-16%}
.sektion--sand::after{background:var(--blau);opacity:.055;
  width:min(38rem,68vw);left:-9%;bottom:-20%}
.hero--hell::after{background:var(--blau);opacity:.042;display:block;
  inset:auto;left:-9%;top:-14%;width:min(36rem,54vw)}

/* Der dunkle Hero bringt sein eigenes ::after fuer den Farbverlauf mit –
   dort bleibt das Wasserzeichen aus.                                        */
.hero:not(.hero--hell)::after{mask-image:none;-webkit-mask-image:none}

@media print{ .sektion--dunkel::after,.sektion--sand::after,.hero--hell::after{display:none} }

/* ---------- 32. Zitate: Fehler behoben und mehr Farbe -------------------- */
/* Name und Rolle standen inline nebeneinander – jetzt untereinander.        */
.zitat-name,.zitat-rolle{display:block}
.zitat-quelle>span:last-child{min-width:0}

.zitat{position:relative;overflow:hidden;border-top:3px solid var(--blau)}
.zitat::before{content:"„";position:absolute;top:-.35em;right:.25em;
  font-size:7rem;line-height:1;color:var(--blau-hauch);z-index:0;pointer-events:none}
.zitat>*{position:relative;z-index:1}
.zitat-initial{background:var(--blau);color:#fff}
.zitat-text{color:var(--tinte)}
.sektion--dunkel .zitat{background:rgba(255,255,255,.06);border-color:var(--gruen);border-top-width:3px}
.sektion--dunkel .zitat::before{color:rgba(255,255,255,.08)}
.sektion--dunkel .zitat-text{color:#fff}
.sektion--dunkel .zitat-initial{background:var(--gruen);color:#0C1A00}
.sektion--dunkel .zitat-quelle{border-top-color:rgba(255,255,255,.16)}
.sektion--dunkel .zitat-name{color:#fff}
.sektion--dunkel .zitat-rolle{color:#9BA6B4}

/* ---------- 33. Signet: die Spirale klein in der Ecke jedes Bildes -------- */
/* Ein Bildzeichen statt eines Wasserzeichens – wie eine Signatur.
   Es liegt auf dem Bildrahmen, nicht im Bild, und braucht kein Markup.      */
.hero-foto,.duo-bild,.karte-bild{position:relative}
.hero-foto::before,.duo-bild::after,.karte-bild::after{
  content:"";position:absolute;right:.8rem;bottom:.8rem;z-index:2;pointer-events:none;
  aspect-ratio:324/352;background:var(--gruen);
  -webkit-mask-image:url('/assets/img/marke/spirale-maske.png');
          mask-image:url('/assets/img/marke/spirale-maske.png');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
/* Groesse in Prozent der Bildbreite: das Signet waechst und schrumpft
   automatisch mit dem Bild, auf jeder Bildschirmbreite.                    */
.hero-foto::before,.duo-bild::after,.karte-bild::after{
  width:clamp(18px, 10%, 60px); right:4%; bottom:3.5%}
@media print{ .hero-foto::before,.duo-bild::after,.karte-bild::after{display:none} }

/* ---------- 34. Telefon: Tippflaechen und Eingabefelder ------------------- */
/* iOS zoomt beim Antippen in jedes Feld, dessen Schrift kleiner als 16px
   ist. Deshalb hier genau 16px – das verhindert das Hineinspringen.        */
.feld input,.feld textarea,.feld select{font-size:1rem}
.newsletter input{font-size:1rem}

/* Schieberegler: sichtbare Spur bleibt schlank, die Tippflaeche wird gross. */
.regler input[type=range]{height:44px;margin-block:-6px;cursor:pointer}

/* Rechtliche Links im Fuss auf Fingergroesse bringen */
.fuss-recht{gap:var(--r3) var(--r5)}
.fuss-recht a{display:inline-block;padding-block:.55rem;padding-inline:.4rem;margin-inline:-.4rem}
.fuss ul a{display:inline-block;padding-block:.5rem}
/* Der Abstand in der Liste wird dafuer kleiner – der Fuss bleibt gleich hoch,
   die Antippflaeche waechst von 31 auf 40 Pixel.                          */
.fuss ul{gap:.2rem}

/* Logo-Antippflaeche auf dem Telefon */
@media(max-width:600px){ .logo img{height:40px} }

/* Auswahlfelder des Rechners sind bereits ganze Zeilen – hier nur sicherstellen,
   dass die runden Schalter gross genug bleiben.                            */
.stufe input{width:24px;height:24px}

/* ---------- 35. Startseite: Bühnen-Auftakt und zwei Türen ---------------- */
/* A – der Auftakt: Bühnenfoto über die volle Breite, Text unten links.      */
.buehne{position:relative;min-height:min(80vh, 680px);display:flex;align-items:flex-end;
  isolation:isolate;overflow:hidden;background:var(--tinte-tief)}
.buehne-bild{position:absolute;inset:0;z-index:-2}
.buehne-bild img{width:100%;height:100%;object-fit:cover;object-position:32% 42%}
.buehne::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(0,20,45,.30) 0%, rgba(0,20,45,.64) 46%, rgba(0,18,40,.94) 100%)}
.buehne-innen{padding-block:clamp(2.5rem, 1.5rem + 5vw, 5rem);width:100%;position:relative;z-index:1}
.buehne h1{color:#fff;font-size:clamp(2.1rem, 1.2rem + 3.5vw, 4rem);font-weight:700;line-height:1.02;
  letter-spacing:-.035em;max-width:17ch;margin-bottom:1.3rem;text-wrap:balance}
.buehne h1 em{font-style:normal;color:var(--gruen)}
.buehne .lead{color:#D8DEE6;max-width:52ch}
.buehne .marke{color:var(--gruen)}
.buehne-fuss{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;margin-top:var(--r6);padding-top:var(--r5);
  border-top:1px solid rgba(255,255,255,.2);font-size:var(--t-xs);color:#A9B4C2}
.buehne-fuss strong{color:#fff;font-weight:600}
/* Das Signet sitzt hier nicht in der Ecke – das Bild ist der Hintergrund.   */
.buehne-bild::after{content:none}

/* C – zwei Türen: der Besucher sortiert sich selbst.                        */
.tueren{display:grid}
@media(min-width:820px){ .tueren{grid-template-columns:1fr 1fr} }
.tuer{position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  min-height:min(56vh, 420px);text-decoration:none;color:inherit}
.tuer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.tuer::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(0,18,42,.14), rgba(0,18,42,.42))}
.tuer:hover img,.tuer:focus-visible img{transform:scale(1.04)}
.tuer--unternehmen img{object-position:60% 30%}
.tuer--persoenlich img{object-position:62% 32%}
.tuer-inhalt{padding:clamp(1.6rem, 1rem + 3vw, 3rem);position:relative;z-index:1;width:100%}
/* Die dunkle Abdeckung haengt am TEXT, nicht an einer festen Hoehe der Tuer.
   Sonst rutscht sie auf dem Handy – wo der Text mehr Zeilen braucht – unter
   die erste Zeile, und die Schrift steht auf dem hellen Foto.
   So bleibt die Lesbarkeit unabhaengig davon, wie hell das Bild ist.
   Nachgemessen am gerenderten Pixel: pruefung/pixel-kontrast.js            */
.tuer-inhalt::before{content:"";position:absolute;inset:-4rem 0 0 0;z-index:-1;
  background:linear-gradient(180deg, rgba(0,18,42,0) 0, rgba(0,18,42,.72) 4rem, rgba(0,18,42,.86) 100%)}
.tuer-inhalt .marke{color:var(--gruen)}
.tuer-inhalt h2{color:#fff;font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;margin-bottom:.7rem}
.tuer-inhalt p{color:#C6CEDA;max-width:34ch;font-size:.99rem}
.tuer-inhalt .textlink{color:var(--gruen);border-color:rgba(107,255,51,.45);margin-top:1.1rem}
.tuer:hover .textlink{border-color:var(--gruen);gap:.7rem}

/* ---------- 36. Fußbereich: echtes Logo in der Negativfassung ------------ */
.fuss-logo{height:58px;width:auto;margin-bottom:var(--r4)}
@media(max-width:600px){ .fuss-logo{height:50px} }

/* ---------- 37. Kontrast: Lesbarkeit auf dunklem Grund -------------------
   Geprueft mit pruefung/kontrast.js gegen WCAG 2.2 AA (4,5:1 bzw. 3:1).
   Zwei Fehlerquellen werden hier geschlossen:
   a) Bausteine, die ihre Textfarbe fest auf --grau setzen, standen auf dem
      dunklen Blau bei 2,2:1 – unlesbar.
   b) Umgekehrt vererbten dunkle Sektionen ihre hellen Schriftfarben in
      Karten, die selbst weiss sind: weisse Schrift auf weiss.          */

/* a) Fliesstext-Bausteine auf dunklem Grund */
.sektion--dunkel .punkte li,
.sektion--dunkel .modul-inhalt{color:#C8D0DA}          /* 8,6:1 */

/* Fliesstext-Links auf dunklem Grund: Gruen statt Marken-Blau (1,5:1) */
.sektion--dunkel .modul-inhalt a,
.sektion--dunkel .punkte a,
.sektion--dunkel .geschichte a,
.sektion--dunkel .lead a,
.sektion--dunkel .huelle>p a{color:var(--gruen)}        /* 10,2:1 */

/* b) Helle Karten in dunklen Sektionen behalten ihre eigenen Farben */
.sektion--dunkel .karte h1,
.sektion--dunkel .karte h2,
.sektion--dunkel .karte h3{color:var(--tinte)}
.sektion--dunkel .karte,
.sektion--dunkel .karte p,
.sektion--dunkel .karte .grau,
.sektion--dunkel .karte .lead{color:var(--grau)}        /* 6,0:1 auf Weiss */
.sektion--dunkel .karte .textlink{color:var(--blau);border-color:rgba(0,68,158,.3)}

/* Dunkle Kompetenz-Karte in heller Sektion: eigene Klasse statt Inline-Stil */
.komp--dunkel{background:var(--tinte-tief);border-color:transparent;color:#EDEFF3}
.komp--dunkel h3{color:#fff}
.komp--dunkel p{color:#B7C0CC}                          /* 7,3:1 */
.komp--dunkel .komp-nr{color:var(--gruen)}
.komp--dunkel .textlink{color:var(--gruen);border-color:rgba(107,255,51,.4)}
.komp--dunkel .textlink:hover{border-color:var(--gruen)}

/* ===== 38 · Breites Bildband ================================================
   Ein Foto ueber die volle Spaltenbreite, Kinoformat. Nutzt Rundung und
   Innenschatten von .duo-bild, nur das Seitenverhaeltnis ist anders.       */
.duo-bild--band img{aspect-ratio:21/9}
@media (max-width:600px){ .duo-bild--band img{aspect-ratio:3/2} }

/* ===== 39 · Videoband =======================================================
   Eine stumme Schleife ueber die volle Spaltenbreite: sie ist Bild, nicht
   Film. Kein Ton, keine Knoepfe, kein Vollbild. Wer im Betriebssystem
   "Bewegung reduzieren" eingestellt hat, bekommt das Standbild - genau wie
   jeder, dessen Browser die Datei nicht abspielt.                          */
.videoband{border-radius:var(--radius-xl);overflow:hidden;position:relative;
  background:var(--tinte-tief)}
.videoband video,.videoband>img{display:block;width:100%;aspect-ratio:16/9;
  object-fit:cover}
.videoband>img{display:none}
@media (prefers-reduced-motion:reduce){
  .videoband video{display:none}
  .videoband>img{display:block}
}
/* Signet auch hier, wie auf jedem anderen Bild */
.videoband::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  aspect-ratio:324/352;background:var(--gruen);
  -webkit-mask-image:url('/assets/img/marke/spirale-maske.png');
          mask-image:url('/assets/img/marke/spirale-maske.png');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));
  width:clamp(18px, 10%, 60px); right:4%; bottom:3.5%}
@media print{ .videoband::after{display:none} .videoband video{display:none}
  .videoband>img{display:block} }