/* =========================================================================
   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}
/* Silbentrennung in Ueberschriften: „auto" greift nur dann, wenn ein Wort
   sonst nicht in die Zeile passt – kurze Ueberschriften bleiben also
   ungetrennt. Vorher stand hier „manual" zusammen mit overflow-wrap, und
   dann zerhackte der Browser lange Woerter ohne Trennstrich mitten im Wort
   („ununterbroche | n"). Mit lang="de" trennt er jetzt nach deutschen Regeln.
   hyphenate-limit-chars verhindert Schnipsel wie „e-" am Zeilenende.      */
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.06;letter-spacing:-.022em;
  overflow-wrap:break-word;
  -webkit-hyphens:auto;hyphens:auto;
  -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:3;
  hyphenate-limit-chars:8 4 3}
/* 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)}
/* Die Wortmarke dyn-a-mind bleibt immer klein, auch in Kapitälchen-Zeilen. */
.wortmarke{text-transform:none;letter-spacing:.02em}

/* Der Daumenabdruck über dem Kicker „Meine DNA". */
.dna-zeichen{display:block;width:auto;height:64px;margin-bottom:.85rem}
@media(min-width:900px){.dna-zeichen{height:84px}}

/* 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:.62rem;letter-spacing:.26em;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-vor{font-size:var(--t-s);font-weight:600;color:var(--grau);line-height:1;margin-bottom:.15rem}
.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}
/* Macht sichtbar, dass der Bewertungskasten zum Profil führt. */
.bewertung-link{display:inline-flex;align-items:center;gap:.3em;margin-left:.5em;color:var(--blau);font-weight:600;white-space:nowrap}
.bewertung:hover .bewertung-link svg{transform:translateX(2px);transition:transform var(--weich)}

/* ---------- 13. Video ---------------------------------------------------- */
.video--hoch{aspect-ratio:9/16 !important;max-width:380px;margin-inline:auto}
.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}
/* Bleibt von einem Zweispalter nur eine Spalte übrig – etwa weil der
   Videoplatz noch nicht belegt ist –, nimmt sie die volle Breite ein,
   statt eine leere Hälfte stehen zu lassen. */
.duo>*:only-child{grid-column:1/-1}
@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)}

/* Auszeichnungssiegel (Orhideal) neben den Zahlenblöcken. */
.siegel-block{display:flex;align-items:center;gap:1.15rem;margin-top:var(--r6)}
.siegel{width:auto;height:92px;flex:none}
.siegel-block p{margin:0;max-width:36ch;font-size:var(--t-xs);line-height:1.45}
@media(min-width:900px){.siegel{height:116px}}

/* Auszeichnungen auf dunklem Grund: alle fünf auf gleich großer weißer Fläche,
   damit quadratische Siegel und breite Schriftzüge gleich viel Gewicht haben. */
.siegel-wand{gap:var(--r5)}
.siegel-wand img{height:78px;width:78px;object-fit:contain;background:#fff;border-radius:12px;padding:8px;opacity:1}
.siegel-wand img:hover{transform:scale(1.05)}

/* Eingabezeilen der Selbsttests: Bezeichnung links, Betrag rechts. */
.geldzeile{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--grau-linie)}
.geldzeile:last-child{border-bottom:0}
.geldzeile label{flex:1;font-size:var(--t-s);line-height:1.3}
.geldzeile input{width:7.5rem;padding:.45rem .6rem;text-align:right;font:inherit;font-size:var(--t-s);
  color:var(--tinte);background:var(--weiss);border:1px solid var(--grau-linie);border-radius:8px;
  -moz-appearance:textfield}
.geldzeile input::-webkit-outer-spin-button,.geldzeile input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.geldzeile input:focus-visible{outline:2px solid var(--blau);outline-offset:1px;border-color:var(--blau)}
.geldzeichen{width:1ch;color:var(--grau);font-size:var(--t-s)}


/* ---- Terminleiste (Hinweis auf den naechsten Seminartermin) ---- */
.terminleiste{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.35rem .9rem;
  padding:.85rem 1.25rem;background:var(--blau);color:#fff;text-decoration:none;text-align:center;
  font-size:var(--t-s);line-height:1.4;transition:background .2s}
.terminleiste:hover{background:#00337A}
.terminleiste-tag{font-weight:700;letter-spacing:.01em}
.terminleiste-text{color:#D6E2F5}
.terminleiste-pfeil{display:inline-flex;align-items:center}
.terminleiste:focus-visible{outline:3px solid var(--gruen);outline-offset:-3px}
@media(max-width:600px){.terminleiste{font-size:var(--t-xs);padding:.75rem 1rem}
  .terminleiste-pfeil{display:none}}

/* ===== 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} }

/* ===== 40 · Formularmeldung bei einem Fehler ===============================
   Dieselbe Box wie sonst, nur in warnender Farbe. Der Text traegt die
   Aussage, die Farbe unterstuetzt sie nur - Farbe allein genuegt nicht.  */
.hinweisbox--fehler{border-color:#c0392b;background:rgba(192,57,43,.06)}
.hinweisbox--fehler b{color:#9c2d21}


/* ===== 41 · Rechner auf Papier ============================================
   Die Ergebnistafel ist am Bildschirm dunkelblau. Auf Papier wäre das eine
   Tonerwüste und kaum zu lesen – deshalb hier hell und schwarz.          */
@media print{
  .rechner{grid-template-columns:1fr;gap:1rem}
  .rechner-eingabe{background:none;border:0;padding:0}
  .regler input[type=range],.regler .skala,.zusatz,.hinweisbox--blau{display:none}
  .regler-kopf{border-bottom:1px solid #bbb;padding-bottom:.2rem}
  .regler-wert{color:#000}
  .rechner-ergebnis{background:#fff;color:#000;border:1px solid #999;padding:1rem}
  .ergebnis-zahl,.ergebnis-zeile b,.ergebnis-etikett{color:#000!important}
  .ergebnis-zahl{font-size:1.6rem}
  .ergebnis-zusatz,.ergebnis-fuss,.ergebnis-zeile span{color:#333}
  .ergebnis-teiler{background:#bbb}
}


/* ===== 42 · Tonaufnahme, CD-Bild und Kapitelliste ========================= */
.tonband{background:var(--tinte-tief);border-radius:var(--radius-xl);
  padding:clamp(1.1rem,.8rem + 1vw,1.6rem);margin-top:var(--r6);display:grid;gap:.7rem}
.tonband audio{width:100%;display:block;min-height:40px}
.tonband p{color:#9BA6B4;font-size:var(--t-mini);margin:0}
.tonband a{color:var(--gruen)}
.cd-bild{display:block;width:100%;max-width:440px;margin-inline:auto;height:auto;
  filter:drop-shadow(0 18px 42px rgba(0,47,93,.3))}
.spuren{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;counter-reset:spur}
@media(min-width:760px){ .spuren{grid-template-columns:1fr 1fr;gap:.55rem var(--r6)} }
.spuren li{counter-increment:spur;display:flex;gap:.85rem;align-items:baseline;
  border-bottom:1px solid var(--grau-linie);padding-bottom:.5rem;font-size:1rem}
.spuren li::before{content:counter(spur,decimal-leading-zero);color:var(--blau);
  font-weight:700;font-variant-numeric:tabular-nums;flex:none}
@media print{ .tonband{display:none} }


/* ===== 43 · Hörkarte neben dem Foto ======================================= */
.hoerkarte{margin-top:var(--r5);background:var(--tinte-tief);border-radius:var(--radius-xl);
  padding:clamp(1rem,.7rem + .9vw,1.4rem);display:grid;gap:var(--r4);
  grid-template-columns:132px 1fr;align-items:center}
@media(max-width:460px){ .hoerkarte{grid-template-columns:1fr;justify-items:center;text-align:center} }
.hoerkarte-cd{display:block;line-height:0}
.hoerkarte-cd img{width:132px;height:auto;display:block;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.45));transition:transform var(--weich)}
.hoerkarte-cd:hover img{transform:scale(1.04)}
.hoerkarte-text{display:grid;gap:.5rem;min-width:0}
.hoerkarte .marke{color:var(--gruen);margin:0}
.hoerkarte-marke{letter-spacing:.07em;white-space:nowrap}
.hoerkarte-titel{margin:0;font-weight:700;font-size:1.02rem;line-height:1.3;color:#fff}
.hoerkarte-titel a{color:inherit;text-decoration:none}
.hoerkarte-titel a:hover{text-decoration:underline}
.hoerkarte audio{width:100%;display:block;min-height:38px}
.hoerkarte-fuss{margin:0;font-size:var(--t-mini);color:#9BA6B4}
.hoerkarte-fuss a{color:var(--gruen)}
@media print{ .hoerkarte{display:none} }


/* Dreiklang im Seitenkopf (ABSENDEN) */
.dreiklang{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.55rem}
.dreiklang li{position:relative;padding-left:1.15rem;line-height:1.45}
.dreiklang li::before{content:"";position:absolute;left:0;top:.6em;
  width:.46rem;height:.46rem;border-radius:50%;background:var(--blau)}
.dreiklang strong{font-weight:700}
.sektion--dunkel .dreiklang li::before{background:var(--gruen)}
.dreiklang-schluss{margin-top:.75rem}


/* ===== 44 · Fehlzeiten-Rechner ============================================
   Die beiden Auswahlfelder sitzen in einem fieldset, damit die Beschriftung
   vorgelesen wird. Der Browser malt da sonst einen Rahmen hin, und die
   Beschriftung eines legend erbt nicht die Regeln fuer label.           */
#fehlzeitenrechner fieldset.regler{border:0;padding:0;margin:0;min-width:0}
#fehlzeitenrechner legend.regler-kopf{display:block;padding:0;
  font-size:.92rem;font-weight:700;color:var(--tinte)}
#fehlzeitenrechner select{width:100%;min-width:0;padding:.6rem;font:inherit;
  color:var(--tinte);background:#fff;border:1px solid var(--grau-linie);
  border-radius:var(--radius-s)}
#fehlzeitenrechner select:focus-visible{outline:2px solid var(--blau);outline-offset:2px}

@media print{
  #fehlzeitenrechner select{border:0;padding:0;background:none;font-weight:600;
    -webkit-appearance:none;appearance:none}
  #fehlzeitenrechner .regler-kopf{border-bottom:1px solid #bbb;padding-bottom:.2rem}
}


/* ===== 45 · Ergebnis als PDF verschicken ==================================
   Ein Feld, ein Knopf. Auf Papier hat der Block nichts zu suchen.      */
.rechner-versand{max-width:52rem;margin:var(--r7) auto 0;padding:var(--r6);
  background:#fff;border:1px solid var(--grau-linie);border-radius:var(--radius-m)}
.rechner-versand .marke{margin:0}
.rechner-versand .klein{color:#5A6472;margin-top:.6rem}
.versand-reihe{display:flex;gap:.75rem;align-items:flex-start;flex-wrap:wrap;margin-top:1.1rem}
.versand-reihe .feld{flex:1 1 17rem;min-width:0;margin:0}
.versand-reihe .btn{flex:none}
@media print{ .rechner-versand{display:none} }


/* ===== 46 · Selbsttest Coaching-Ausbildung ================================
   Nutzt die Bausteine des Rechners. Nur die Textfelder und die legend
   brauchen eigene Regeln.                                              */
#ausbildungstest fieldset.regler{border:0;padding:0;margin:0;min-width:0}
#ausbildungstest legend.regler-kopf{display:block;padding:0;
  font-size:.92rem;font-weight:700;color:var(--tinte);line-height:1.4}
#ausbildungstest .regler-kopf label{line-height:1.4}
#ausbildungstest select,#ausbildungstest textarea{width:100%;min-width:0;padding:.6rem;
  font:inherit;color:var(--tinte);background:#fff;border:1px solid var(--grau-linie);
  border-radius:var(--radius-s);margin-top:.5rem}
#ausbildungstest textarea{resize:vertical;line-height:1.5}
#ausbildungstest select:focus-visible,#ausbildungstest textarea:focus-visible{
  outline:2px solid var(--blau);outline-offset:2px}
#at-beobachtungen .ergebnis-block + .ergebnis-block{margin-top:1.1rem}

@media print{
  #ausbildungstest input[type=range],#ausbildungstest .skala,#ausbildungstest .zusatz{display:none}
  #ausbildungstest select,#ausbildungstest textarea{border:0;padding:0;background:none;
    -webkit-appearance:none;appearance:none;font-weight:600}
  #ausbildungstest .regler-kopf{border-bottom:1px solid #bbb;padding-bottom:.2rem}
}

/* ===== 47 · Selbsttest: eigene Saetze und die Uebung ======================
   Die Zitate stehen im dunklen Ergebnisfeld, deshalb helle Schrift und
   eine gruene Kante. Gruen nur auf dunklem Grund, so steht es im CD.
   Das Journalfeld liegt ausserhalb von #ausbildungstest und braucht
   eigene Regeln. druck-spiegel haelt den getippten Text fuer den
   Ausdruck fest, weil ein Textfeld beim Drucken abschneidet.            */
.at-zitat{border-left:3px solid var(--gruen);padding:.1rem 0 .1rem var(--r4);margin-top:.9rem}
.at-zitat-etikett{font-size:var(--t-mini);letter-spacing:.1em;text-transform:uppercase;color:#9BA6B4}
.at-zitat-satz{margin-top:.3rem;color:#EDEFF3;font-size:1.02rem;line-height:1.55}
#at-eigene-text{margin-top:1.1rem}

.ergebnis-zusatz--hell{color:#C8D2DE}
.uebung-anfang{color:#D3DCE8}
.uebung-titel{font-size:1.15rem;font-weight:700;color:#fff;line-height:1.3;margin:.2rem 0 .3rem}
#at-uebung .ergebnis-zusatz + .ergebnis-zusatz{margin-top:.7rem}
#at-journal{width:100%;min-width:0;margin-top:.6rem;padding:.7rem;font:inherit;
  color:var(--tinte);background:#fff;border:1px solid var(--grau-linie);
  border-radius:var(--radius-s);resize:vertical;line-height:1.6}
#at-journal:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
#at-journal-echo{margin-top:.6rem;color:var(--gruen)}
#at-uebung .ergebnis-fuss{margin-top:.6rem}
.druck-spiegel{display:none}

@media print{
  .at-zitat{border-left:3px solid #666}
  .at-zitat-etikett{color:#555}
  .at-zitat-satz{color:#000}
  .uebung-titel{color:#000}
  #at-journal{display:none}
  #at-journal-echo{display:none}
  .druck-spiegel{display:block;white-space:pre-wrap;color:#000;font-weight:600;
    border-left:3px solid #666;padding-left:.7rem;margin-top:.5rem}
}

/* ===== 48 · Was aufs Papier gehoert und was nicht ========================
   Beim Ausdruck eines Rechners oder Selbsttests will niemand Hero,
   Werbeblock und dunkle Flaechen auf dem Blatt haben. nicht-drucken
   nimmt sie heraus, nur-druck holt die Anschrift dazu, weil Kopf und
   Fuss im Druck ohnehin verschwinden.                                   */
.nur-druck{display:none}
@media print{
  .nicht-drucken{display:none!important}
  .nur-druck{display:block;font-size:var(--t-mini);color:#333;line-height:1.5;
    margin-top:1rem;padding-top:.6rem;border-top:1px solid #bbb}
  #at-uebung .uebung-anfang{color:#000!important}
  .ergebnis-zusatz--hell{color:#333!important}
}

/* ===== 49 · Zweite Stufe im Fehltagerechner ==============================
   Die Umrechnung in verkaufte Stuecke braucht ein Zahlenfeld. Es sieht
   aus wie die Auswahlfelder daneben, damit die Spalte ruhig bleibt.      */
.eingabe-stufe{margin-top:var(--r5);padding-top:var(--r5);border-top:1px solid var(--grau-linie)}
.eingabe-stufe p:not(.marke){margin-top:.5rem;font-size:.92rem;color:var(--grau);line-height:1.55}
.rechner-eingabe input[type=number]{width:100%;min-width:0;margin-top:.5rem;padding:.6rem;
  font:inherit;color:var(--tinte);background:#fff;border:1px solid var(--grau-linie);
  border-radius:var(--radius-s)}
.rechner-eingabe input[type=number]:focus-visible{outline:2px solid var(--blau);outline-offset:2px}

@media print{
  .eingabe-stufe{border-top:0;padding-top:0;margin-top:.8rem}
  .rechner-eingabe input[type=number]{border:0;padding:0;background:none;font-weight:700;
    -webkit-appearance:none;appearance:none}
}

/* ===== 50 · Stimmen: Raster aus Hochkant-Videos =========================
   Sieben Teilnehmer-Videos im 9:16-Format. Zwei nebeneinander auf dem
   Handy, mehr auf groesseren Schirmen. Es laedt nichts, bis jemand tippt. */
.stimmen-raster{display:grid;gap:var(--r5);grid-template-columns:repeat(2,1fr);margin-top:var(--r6)}
@media(min-width:620px){ .stimmen-raster{grid-template-columns:repeat(3,1fr)} }
@media(min-width:980px){ .stimmen-raster{grid-template-columns:repeat(4,1fr)} }
.stimmen-raster .video--hoch{max-width:none;margin-inline:0}
.stimmen-raster .video video{object-fit:cover}