/* =============================================================================
   auftritt.css, das Gestaltungssystem der Website seit dem Neuauftritt 30.09.2026
   -----------------------------------------------------------------------------
   Entstanden aus der Startseite Fassung D (entwuerfe/startseite-2026-09-30).
   Loest fundament.css fuer alle Seiten der Website ab. fundament.css bleibt fuer
   die Kursbereiche (modul.css, Hubs) und als Rueckweg liegen.
   Ueberschriften Geologica, Fliesstext Inter. Navy, Blau fuer Handlungen,
   Karmesin nur als Akzent (Punkt, Strich, Ziffern).
   Bausteine: Kopfzeile mit Handymenue, Fuss, Knoepfe, Abschnitte, Titel,
   Karten, Fliesstext (.text) fuer Beitraege und Rechtstexte, Formulare,
   und die Bausteine der Startseite (Team-Karte, Stufen, Werkstatt, Selbstcheck).
   ============================================================================= */


@font-face{font-family:'Geologica';font-weight:700;font-display:swap;src:url(schriften/geologica-bold.woff2) format('woff2')}
@font-face{font-family:'Geologica';font-weight:500;font-display:swap;src:url(schriften/geologica-medium.woff2) format('woff2')}
@font-face{font-family:'Geologica';font-weight:400;font-display:swap;src:url(schriften/geologica-regular.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url(schriften/inter-latin-normal.woff2) format('woff2')}

:root{
  --nacht:#0A1624; --navy:#0F2032; --navy2:#1E3A5F; --blau:#2F6099; --blau-hell:#8FB4E0;
  --rot:#922B3E; --sand:#F1F4F9; --papier:#FEFEFE; --text:#374151; --leise:#6B7280;
  --linie:rgba(15,32,50,.10); --linie-d:rgba(255,255,255,.12);
  --kopf:'Geologica',system-ui,sans-serif; --lauf:'Inter',system-ui,sans-serif;
  --breite:1160px; --rand:clamp(16px,4vw,32px);
  --abschnitt:clamp(48px,6vw,80px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--lauf);color:var(--text);background:var(--papier);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--kopf);color:var(--navy);line-height:1.1;letter-spacing:-.02em;hyphens:manual;overflow-wrap:break-word}
h2{font-size:clamp(28px,3.2vw,42px);font-weight:700}
h3{font-size:19px;font-weight:700}
.punkt{color:var(--rot)}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
section{padding:var(--abschnitt) 0}
.marke{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blau)}
.marke::before{content:"";width:22px;height:2px;background:var(--rot)}
.dunkel .marke{color:var(--blau-hell)}
.titel{max-width:760px;margin-bottom:clamp(28px,3.5vw,44px)}
.titel h2{margin-top:14px}
.titel p{font-size:17px;color:var(--leise);margin-top:12px;max-width:58ch}
.dunkel{background:var(--navy);color:rgba(255,255,255,.78)}
.dunkel h2,.dunkel h3{color:#fff}
.dunkel .titel p{color:rgba(255,255,255,.66)}
.sand{background:var(--sand)}

/* Knoepfe */
.knopf{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:15px;
  text-decoration:none;transition:transform .15s,box-shadow .15s,background-position .6s;white-space:nowrap;border:0}
.knopf:hover{transform:translateY(-1px)}
.knopf.voll{background:linear-gradient(135deg,#2F6099,#26507F);color:#fff;box-shadow:0 12px 26px -14px rgba(47,96,153,.8)}
.knopf.hell{background:#fff;color:var(--navy);box-shadow:0 12px 26px -16px rgba(0,0,0,.6)}
.knopf.rand{border:1.5px solid rgba(255,255,255,.3);color:#fff;background:transparent}
.knopf.rand-dunkel{border:1.5px solid rgba(15,32,50,.25);color:var(--navy);background:transparent}
.pfeil{width:16px;height:16px}
/* Glanzstreifen beim Überfahren, übernommen von .btn aus fundament.css (Thomas, 01.10.2026:
   „den tollen Glanzeffekt“ hatte der alte Auftritt). Auf hellen Knöpfen ein blauer Schimmer. */
.knopf{position:relative;overflow:hidden;isolation:isolate}
.knopf::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;pointer-events:none;z-index:-1;
  transform:skew(-20deg);transition:left 1.4s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.25) 45%,rgba(255,255,255,.45),rgba(255,255,255,.25) 55%,transparent)}
.knopf.hell::before,.knopf.rand-dunkel::before{background:linear-gradient(120deg,transparent,rgba(47,96,153,.10) 45%,rgba(47,96,153,.20),rgba(47,96,153,.10) 55%,transparent)}
.knopf:hover::before{left:125%}
.knopf.voll{background-size:200% 200%;background-image:linear-gradient(135deg,#2F6099,#26507F,#2F6099)}
.knopf.voll:hover{background-position:100% 100%;box-shadow:0 4px 10px rgba(20,41,63,.22),0 22px 44px -18px rgba(20,41,63,.5),inset 0 1px 0 rgba(255,255,255,.18)}
.knopf .pfeil{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.knopf:hover .pfeil{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.knopf::before{display:none}}
.zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center}


/* 1 Kopf */
.kopf{position:relative;background:radial-gradient(900px 520px at 80% 20%,#1E3A5F 0%,var(--navy) 50%,var(--nacht) 100%);color:#fff;overflow:hidden;padding:104px 0 56px}
.kopf::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%)}
.kopf .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.kopf h1{color:#fff;font-size:clamp(38px,4.8vw,64px);font-weight:700;letter-spacing:-.03em;margin:16px 0 22px}
.zeilen{list-style:none;display:grid;gap:10px;margin-bottom:18px}
.zeilen li{display:flex;gap:14px;align-items:baseline;font-family:var(--kopf);font-weight:500;font-size:clamp(17px,1.45vw,20px);color:#fff;line-height:1.35}
.zeilen li span{flex:none;font-size:12px;font-weight:700;color:#E07A8E;letter-spacing:.06em;transform:translateY(-2px)}
.schluss{color:rgba(255,255,255,.7);font-size:16px;max-width:46ch;margin-bottom:26px}
.schluss b{color:#fff;font-weight:600}
.absender{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:22px;border-top:1px solid var(--linie-d)}
.absender img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 18%;background:#D9E5F2;border:2px solid rgba(255,255,255,.2)}
.absender b{display:block;color:#fff;font-size:15px}
.absender small{display:block;color:rgba(255,255,255,.6);font-size:13px;line-height:1.45}

/* Team-Bild: Inseln oder ein Weg */
.team{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--linie-d);border-radius:22px;padding:18px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.team-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.team-kopf b{font-family:var(--kopf);font-size:14px;color:#fff;font-weight:500}
.schalter{display:inline-flex;background:rgba(0,0,0,.28);border-radius:999px;padding:4px}
.schalter button{border:0;background:transparent;color:rgba(255,255,255,.7);font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;transition:background .25s,color .25s}
.schalter button[aria-pressed="true"]{background:#fff;color:var(--navy)}
.buehne{position:relative;height:380px}
.person{position:absolute;left:0;top:0;width:min(56%,270px);display:flex;gap:10px;align-items:center;background:#fff;color:var(--navy);border-radius:14px;padding:10px 12px;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.6);transform:translate(var(--x1),var(--y1)) rotate(var(--r1));transition:transform .9s cubic-bezier(.2,.8,.2,1),width .9s cubic-bezier(.2,.8,.2,1)}
.person i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--kopf);font-weight:700;font-size:13px;color:#fff;background:var(--f)}
.person b{display:block;font-size:13px;line-height:1.2}
.person small{display:block;font-size:12px;color:var(--leise);line-height:1.3}
.person .haken{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;background:#E6F2EA;color:#2E7D4F;display:grid;place-items:center;font-size:13px;opacity:0;transition:opacity .4s .5s}
.person .heute{display:block}.person .morgen{display:none}
.geordnet .person{transform:translate(var(--x2),var(--y2)) rotate(0deg);width:100%}
.geordnet .person .heute{display:none}.geordnet .person .morgen{display:block}
.geordnet .person .haken{opacity:1}
.weg-linie{position:absolute;left:21px;top:22px;bottom:70px;width:2px;background:linear-gradient(var(--blau-hell),rgba(143,180,224,.2));opacity:0;transition:opacity .6s .4s}
.geordnet .weg-linie{opacity:1}
.akademie-band{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;background:var(--rot);color:#fff;border-radius:14px;padding:12px 14px;
  opacity:0;transform:translateY(12px);transition:opacity .5s .6s,transform .5s .6s}
.akademie-band b{font-family:var(--kopf);font-size:14px;font-weight:700}
.akademie-band small{display:block;font-size:12px;color:rgba(255,255,255,.8)}
.geordnet .akademie-band{opacity:1;transform:none}
.team-fuss{font-size:12px;color:rgba(255,255,255,.5);margin-top:10px}

@media(max-width:940px){
  .kopf{padding:96px 0 48px}
  .kopf .wrap{grid-template-columns:1fr}
  .buehne{height:360px}
}
@media(prefers-reduced-motion:reduce){.person,.akademie-band,.weg-linie{transition:none}}
/* Handy: breitere Karten, halber Versatz, damit nichts verdeckt wird oder uebersteht */
@media(max-width:560px){.buehne{height:410px}.person{width:80%;transform:translate(calc(var(--x1) * .45),var(--y1)) rotate(calc(var(--r1) * .6))}.geordnet .person{transform:translate(var(--x2),var(--y2))}}

/* 2 Schmerz */
.saetze{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.satz{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:20px 20px 18px;position:relative}
.satz q{display:block;font-family:var(--kopf);font-weight:500;font-size:19px;color:var(--navy);line-height:1.3;quotes:"„" "“"}
.satz small{display:block;margin-top:10px;font-size:13px;color:var(--leise)}
.aufloesung{margin-top:22px;font-size:17px;max-width:70ch}
.aufloesung b{color:var(--navy)}
.herkunft{font-size:12px;color:var(--leise);margin-top:10px}
@media(max-width:820px){.saetze{grid-template-columns:1fr}}

/* 3 Stufen zum Anklicken */
.stufen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.stufe{position:relative;text-align:left;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:14px 14px 16px;color:var(--navy);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.stufe small{display:block;font-size:12px;font-weight:700;color:var(--rot);letter-spacing:.06em}
.stufe b{display:block;font-family:var(--kopf);font-size:16px;margin-top:4px;line-height:1.25}
.stufe em{display:block;font-style:normal;font-size:12px;color:var(--leise);margin-top:2px}
.stufe::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--blau);transition:width .35s}
.stufe[aria-selected="true"]{border-color:rgba(47,96,153,.45);box-shadow:0 14px 30px -20px rgba(47,96,153,.7)}
.stufe[aria-selected="true"]::after{width:100%}
.tafel{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(18px,3vw,36px)}
.tafel h3{font-size:22px;margin-bottom:8px}
.tafel .spalte small{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blau);margin-bottom:6px}
.tafel .spalte p{font-size:15px}
.tafel[hidden]{display:none}
.stimme{display:flex;gap:18px;align-items:flex-start;margin-top:22px;padding:22px 24px;border-radius:16px;background:var(--navy);color:rgba(255,255,255,.8)}
.stimme .zeichen{font-family:var(--kopf);font-size:54px;line-height:.8;color:#E07A8E}
.stimme blockquote{font-family:var(--kopf);font-weight:500;font-size:clamp(17px,1.6vw,20px);color:#fff;line-height:1.35}
.stimme cite{display:block;font-style:normal;font-size:13px;margin-top:8px;color:rgba(255,255,255,.6)}
.stimme .nach{margin-top:10px;font-size:15px}
@media(max-width:860px){.stufen{grid-template-columns:1fr 1fr}.tafel{grid-template-columns:1fr}}

/* Nutzen */
.nutzen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.nutz{border-radius:16px;padding:20px;background:var(--sand)}
.nutz b{font-family:var(--kopf);font-size:19px;color:var(--navy)}
.nutz p{margin-top:6px;font-size:15px}
.nutz .vorher{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;color:var(--rot);background:#F7E9EC;padding:4px 10px;border-radius:999px}
@media(max-width:820px){.nutzen{grid-template-columns:1fr}}

/* 4 Beweis und Werkstatt */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:clamp(28px,4vw,44px)}
.zahl{border:1px solid var(--linie-d);border-radius:14px;padding:16px}
.zahl b{display:block;font-family:var(--kopf);font-size:clamp(28px,3vw,38px);color:#fff;line-height:1}
.zahl span{display:block;font-size:13px;margin-top:6px;line-height:1.4}
@media(max-width:820px){.zahlen{grid-template-columns:1fr 1fr}}
.werkstatt{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:stretch}
.bereiche{display:grid;gap:4px;align-content:start}
.bereiche button{display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:1px solid transparent;color:rgba(255,255,255,.72);border-radius:10px;padding:6px 12px;font-size:14px;font-weight:500;transition:background .2s,color .2s}
.bereiche button::before{content:"";width:7px;height:7px;border-radius:50%;background:#3FA46A;box-shadow:0 0 0 3px rgba(63,164,106,.18)}
.bereiche button[aria-selected="true"]{background:rgba(255,255,255,.08);border-color:var(--linie-d);color:#fff}
.bildschirm{background:linear-gradient(160deg,#16304D,#0F2032);border:1px solid var(--linie-d);border-radius:18px;padding:clamp(20px,3vw,30px);display:grid;grid-template-columns:1fr 1fr;gap:22px;min-height:250px}
.bildschirm .status{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.55)}
.bildschirm .status span{display:inline-flex;align-items:center;gap:8px;color:#8FD3A8;font-weight:600}
.bildschirm .status span::before{content:"";width:8px;height:8px;border-radius:50%;background:#3FA46A;animation:puls 1.8s infinite}
@keyframes puls{50%{box-shadow:0 0 0 6px rgba(63,164,106,0)}0%{box-shadow:0 0 0 0 rgba(63,164,106,.6)}}
.bildschirm h3{font-size:22px;margin-bottom:8px}
.bildschirm .teil{border-radius:12px;padding:14px;background:rgba(255,255,255,.05)}
.bildschirm .teil small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blau-hell);margin-bottom:4px;font-weight:600}
.bildschirm .teil p{font-size:14px;color:rgba(255,255,255,.8)}
.bildschirm .teile{display:grid;gap:10px}
@media(max-width:860px){.werkstatt{grid-template-columns:1fr}.bereiche{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding-bottom:6px}.bildschirm{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bildschirm .status span::before{animation:none}}
.kante{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,3vw,40px);align-items:center;margin-top:clamp(36px,5vw,60px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--linie-d)}
.kante img{border-radius:16px}
.kante h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:10px}
.kante ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.kante li b{display:block;color:#fff;font-size:15px}
.kante li span{font-size:13px}
@media(max-width:860px){.kante{grid-template-columns:1fr}}

/* 5 Selbstcheck */
.check{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(18px,3vw,36px);align-items:start}
.fragen{display:grid;gap:10px}
.frage{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:14px 16px}
.frage p{font-size:15px;color:var(--navy);font-weight:500}
.jn{display:inline-flex;background:var(--sand);border-radius:999px;padding:3px;flex:none}
.jn button{border:0;background:transparent;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--leise)}
.jn button[aria-pressed="true"]{background:var(--navy);color:#fff}
.ergebnis{position:sticky;top:96px;background:var(--navy);color:rgba(255,255,255,.8);border-radius:18px;padding:24px}
.ergebnis small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blau-hell);font-weight:600}
.ergebnis h3{color:#fff;font-size:22px;margin:8px 0 8px}
.ergebnis .leiter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0 18px}
.ergebnis .leiter span{height:6px;border-radius:3px;background:rgba(255,255,255,.14);transition:background .3s}
.ergebnis .leiter span.an{background:#E07A8E}
.ergebnis .hinweis{font-size:12px;color:rgba(255,255,255,.5);margin-top:12px}
@media(max-width:860px){.check{grid-template-columns:1fr}.ergebnis{position:static}}

/* 6 Fall und Coaches */
.paar{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.karte{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--linie);display:flex;flex-direction:column}
.karte img{aspect-ratio:16/8;object-fit:cover;width:100%}
.karte .innen{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.karte h3{font-size:clamp(20px,2vw,24px)}
.karte blockquote{font-size:15px;color:var(--text);border-left:3px solid var(--rot);padding-left:14px}
.karte cite{font-style:normal;font-size:13px;color:var(--leise)}
.karte ul{list-style:none;display:grid;gap:6px;font-size:15px}
.karte ul li::before{content:"✓";color:var(--blau);font-weight:700;margin-right:8px}
.karte .zeile{margin-top:auto;padding-top:8px}
.karte.coach{background:var(--navy);border-color:var(--navy);color:rgba(255,255,255,.8)}
.karte.coach h3{color:#fff}
.karte.coach ul li::before{color:var(--blau-hell)}
@media(max-width:860px){.paar{grid-template-columns:1fr}}

/* 7 YouTube */
.kanaele{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:14px}
.kanal{display:flex;gap:14px;align-items:flex-start;text-decoration:none;background:#fff;border:1px solid var(--linie);border-radius:16px;padding:18px;transition:box-shadow .2s,transform .2s}
.kanal:hover{transform:translateY(-2px);box-shadow:0 16px 30px -20px rgba(15,32,50,.5)}
.kanal .yt{flex:none;width:40px;height:40px;border-radius:12px;background:#C4302B;display:grid;place-items:center}
.kanal b{display:block;color:var(--navy);font-family:var(--kopf);font-size:16px}
.kanal span{display:block;font-size:14px;margin-top:2px}
.kanal small{display:block;font-size:12px;color:var(--blau);margin-top:6px}
.themen{background:var(--sand);border-radius:16px;padding:18px}
.themen small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);font-weight:600}
.themen ul{list-style:none;margin-top:8px;display:grid;gap:8px}
.themen li{font-size:14px;color:var(--navy);display:flex;gap:8px}
.themen li::before{content:"▶";font-size:10px;color:var(--rot);transform:translateY(5px)}
@media(max-width:900px){.kanaele{grid-template-columns:1fr}}

/* 8 Person und Gespraech */
.schluss-block{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px);align-items:center}
.schluss-block .foto{border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#EEF3F9,#D9E5F2);padding-top:28px}
.schluss-block .foto img{width:88%;margin-left:auto}
.schluss-block h2{margin:14px 0 12px}
.schluss-block .wer{font-size:16px;max-width:56ch}
.gespraech{margin-top:24px;background:var(--navy);border-radius:18px;padding:24px;color:rgba(255,255,255,.8)}
.gespraech h3{color:#fff;font-size:24px}
.gespraech p{margin:8px 0 18px;font-size:15px}
@media(max-width:860px){.schluss-block{grid-template-columns:1fr}.schluss-block .foto{max-width:360px}}




/* ===== Fassung D: heller Kopf, Ergaenzungen ===== */

.hkopf{background:linear-gradient(180deg,#FEFEFE 0%,var(--sand) 100%);padding:108px 0 64px}
.hkopf .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.hkopf h1{font-size:clamp(34px,4.4vw,58px);font-weight:700;letter-spacing:-.03em;margin:14px 0 20px;line-height:1.08}
.nb{white-space:nowrap}
.hkopf .zeilen li{color:var(--navy)}
.hkopf .zeilen li span{color:var(--rot)}
.hkopf .schluss{color:var(--text);max-width:50ch;font-size:16px}
.hkopf .schluss b{color:var(--navy)}
.hkopf .absender{border-top-color:var(--linie)}
.hkopf .absender b{color:var(--navy)}
.hkopf .absender small{color:var(--leise)}
.buehne-a{position:relative;padding-bottom:70px}
.buehne-a .foto{border-radius:20px;overflow:hidden;aspect-ratio:4/3.1}
.buehne-a .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.buehne-a .etikett{position:absolute;left:16px;top:16px;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--navy);box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.fenster{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(15,32,50,.55),0 0 0 1px var(--linie)}
.fenster .balken{display:flex;gap:6px;align-items:center;padding:9px 12px;background:#F3F5F8;border-bottom:1px solid var(--linie)}
.fenster .balken i{width:9px;height:9px;border-radius:50%;background:#D5DAE1}
.fenster .balken span{margin-left:10px;font-size:11px;color:var(--leise);background:#fff;border-radius:6px;padding:2px 10px}
.buehne-a .fenster{position:absolute;width:62%;right:-10px;bottom:0}
@media(max-width:940px){.hkopf{padding:96px 0 48px}.hkopf .wrap{grid-template-columns:1fr}}
/* Handy: der Film steht direkt unter der Überschrift, der Text folgt (Thomas, 01.10.2026). */
@media(max-width:940px){.hkopf .wrap>div:first-child{display:contents}
  .hkopf .wrap>div:first-child>*{order:3}.hkopf .wrap>div:first-child>.marke,.hkopf .wrap>div:first-child>h1{order:1}
  .hkopf .buehne-film{display:contents}.hkopf .vc-film{order:2;margin:14px 0 28px}
  .hkopf .wrap>div:first-child>.absender{order:5}.hkopf .hub-karte{order:4;margin:26px 0 0}.hkopf .wrap{row-gap:0}}
@media(max-width:600px){.nb{white-space:normal}.buehne-a .fenster{right:0;width:72%}}

/* Abschnitt 2: Saetze links, Team-Karte rechts (jetzt hell eingebettet, Karte bleibt dunkel) */
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.zweispalt .saetze{grid-template-columns:1fr;gap:10px}
.team{background:linear-gradient(160deg,#1E3A5F,#0F2032)}
@media(max-width:900px){.zweispalt{grid-template-columns:1fr}}

/* Drei Stufen */
.stufen.drei{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.stufen.drei{grid-template-columns:1fr}
  /* Handy: Karte und Text wie ein Akkordeon, der Pfeil zeigt, dass man aufklappen kann. */
  .stufen .stufe{padding-right:52px;cursor:pointer}
  .stufen .stufe small::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2px solid var(--blau);border-bottom:2px solid var(--blau);transform:translateY(-75%) rotate(45deg);transition:transform .25s}
  .stufen .stufe[aria-selected="true"] small::after{transform:translateY(-25%) rotate(-135deg)}
  .stufen .tafel{margin:-2px 0 8px;border-top-left-radius:0;border-top-right-radius:0}}

/* Was aus einem erklaerten Prozess entsteht */
.entsteht{display:grid;grid-template-columns:1fr auto 1fr 1fr 1fr;gap:14px;align-items:stretch;margin-top:18px}
.quelle{background:var(--navy);color:#fff;border-radius:16px;padding:18px;display:flex;flex-direction:column;justify-content:center}
.quelle small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blau-hell);font-weight:600}
.quelle b{font-family:var(--kopf);font-size:18px;margin-top:4px;line-height:1.25}
.pfeilspalte{display:grid;place-items:center;color:var(--rot);font-size:26px;font-weight:700}
.ergebnisk{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:18px}
.ergebnisk .ico{width:38px;height:38px;border-radius:10px;background:#E8EFF8;display:grid;place-items:center;margin-bottom:10px}
.ergebnisk b{display:block;font-family:var(--kopf);font-size:17px;color:var(--navy)}
.ergebnisk p{font-size:14px;margin-top:4px}
.entsteht-fuss{margin-top:14px;font-size:15px;color:var(--text)}
.entsteht-fuss b{color:var(--navy)}
@media(max-width:900px){.entsteht{grid-template-columns:1fr}.pfeilspalte{transform:rotate(90deg);height:24px}}

/* Nach aussen */
.aussen{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,48px);align-items:center}
.aussen .szene{background:var(--sand);border-radius:16px;padding:20px;border-left:4px solid var(--rot)}
.aussen .szene small{font-size:12px;color:var(--leise)}
.aussen .szene p{font-family:var(--kopf);font-weight:500;font-size:18px;color:var(--navy);line-height:1.35;margin-top:4px}
.nutzungen{display:grid;gap:10px}
.nutzung{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:14px 16px}
.nutzung i{flex:none;font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--kopf);font-weight:700;font-size:13px}
.nutzung b{display:block;color:var(--navy);font-size:16px}
.nutzung span{font-size:14px}
@media(max-width:900px){.aussen{grid-template-columns:1fr}}

/* Frage des Inhabers */
.frageblock{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--navy);border-radius:22px;padding:clamp(24px,4vw,44px);color:rgba(255,255,255,.8)}
.frageblock q{display:block;font-family:var(--kopf);font-weight:700;font-size:clamp(24px,2.6vw,34px);color:#fff;line-height:1.2;quotes:"„" "“"}
.frageblock small{display:block;margin-top:10px;font-size:13px;color:rgba(255,255,255,.55)}
.frageblock .antwort p{font-size:17px}
.frageblock .antwort p+p{margin-top:10px}
.frageblock .antwort b{color:#fff}
@media(max-width:860px){.frageblock{grid-template-columns:1fr}}

/* Erster Monat */
.monat{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,48px);align-items:start}
.monat ul{list-style:none;display:grid;gap:10px}
.monat li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:14px 16px;font-size:15px}
.monat li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:#E6F2EA;color:#2E7D4F;display:grid;place-items:center;font-size:13px;font-weight:700}
.monat li b{color:var(--navy)}
.danach{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:22px}
.danach .reihe{display:grid;gap:14px;margin-top:12px}
.danach .reihe div{display:grid;grid-template-columns:118px 1fr;gap:12px;font-size:15px}
.danach .reihe small{font-weight:700;color:var(--rot);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
@media(max-width:860px){.monat{grid-template-columns:1fr}}

.ergebnis .leiter{grid-template-columns:repeat(3,1fr)}

/* ---------- Kopfzeile, auf allen Seiten gleich ---------- */
.leiste{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(254,254,254,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linie)}
.leiste .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
.leiste .logo{flex:none}
.leiste .logo img{height:30px;width:auto}
.leiste .menue{display:flex;gap:24px;align-items:center;margin-left:auto}
.leiste .menue a{color:var(--text);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
/* Zwischen Burger und breitem Bildschirm rückt das Menü enger, damit „Für Coaches“ in eine Zeile passt. */
@media(min-width:901px) and (max-width:1060px){.leiste .menue{gap:14px}.leiste .menue a{font-size:13.5px}}
.leiste .menue a:hover,.leiste .menue a[aria-current="page"]{color:var(--navy)}
.leiste .menue a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--rot)}
.leiste .tel{flex:none;color:#fff;background:var(--blau);font-weight:600;font-size:14px;text-decoration:none;padding:9px 16px;border-radius:999px}
.burger{display:none;flex:none;width:42px;height:42px;border:1px solid var(--linie);border-radius:12px;background:#fff;position:relative}
.burger i,.burger i::before,.burger i::after{position:absolute;left:11px;width:18px;height:2px;background:var(--navy);border-radius:2px;content:"";transition:transform .2s,opacity .2s}
.burger i{top:19px}.burger i::before{left:0;top:-6px}.burger i::after{left:0;top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
  .burger{display:block}
  .leiste .tel{display:none}
  .leiste .menue{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;box-shadow:0 20px 40px -20px rgba(15,32,50,.4);padding:8px var(--rand) 18px}
  .leiste .menue.offen{display:flex}
  .leiste .menue a{padding:12px 0;font-size:16px;border-bottom:1px solid var(--linie)}
  .leiste .menue a[aria-current="page"]{box-shadow:none;color:var(--rot)}
  .leiste .menue .tel-menue{display:block;margin-top:14px;text-align:center;border:0;background:var(--blau);color:#fff;border-radius:999px;padding:13px}
}
@media(min-width:901px){.leiste .menue .tel-menue{display:none}}

/* Erster Abschnitt unter der festen Kopfzeile */
.seitenkopf{padding:clamp(104px,12vw,136px) 0 clamp(40px,5vw,64px);background:linear-gradient(180deg,#FEFEFE 0%,var(--sand) 100%)}
.seitenkopf h1{font-size:clamp(32px,4.2vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin-top:14px;max-width:22ch}
.seitenkopf .lead{font-size:clamp(17px,1.4vw,19px);color:var(--text);margin-top:16px;max-width:60ch}
.seitenkopf .lead b{color:var(--navy)}
.seitenkopf.zwei .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:900px){.seitenkopf.zwei .wrap{grid-template-columns:1fr}}
.brotkrumen{font-size:13px;color:var(--leise);margin-bottom:6px}
.brotkrumen a{color:var(--blau);text-decoration:none}

/* ---------- Fliesstext fuer Beitraege und Rechtstexte ---------- */
.text{max-width:720px}
.text > * + *{margin-top:16px}
.text h2{font-size:clamp(24px,2.4vw,30px);margin-top:44px}
.text h3{font-size:20px;margin-top:30px}
.text h2 + *,.text h3 + *{margin-top:10px}
.text p,.text li{font-size:17px;line-height:1.7}
.text ul,.text ol{padding-left:22px}
.text li + li{margin-top:6px}
.text a{color:var(--blau);text-decoration:underline;text-underline-offset:3px}
.text strong,.text b{color:var(--navy)}
.text blockquote{border-left:3px solid var(--rot);padding:6px 0 6px 18px;font-family:var(--kopf);font-weight:500;font-size:19px;color:var(--navy)}
.text table{width:100%;border-collapse:collapse;font-size:15px}
.text th,.text td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
.text th{color:var(--navy);font-weight:600;background:var(--sand)}
.text .kasten,.kasten{background:var(--sand);border-radius:16px;padding:20px 22px}
.text .kasten > * + *{margin-top:10px}
.text img{border-radius:14px}
.tabelle-rolle{overflow-x:auto}

/* ---------- Formulare ---------- */
.formular{display:grid;gap:14px;max-width:560px}
.formular label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--navy)}
.formular input[type=text],.formular input[type=email],.formular input[type=tel],.formular input[type=date],.formular select,.formular textarea{
  font:inherit;font-weight:400;font-size:16px;color:var(--text);background:#fff;border:1.5px solid rgba(15,32,50,.18);border-radius:12px;padding:12px 14px;width:100%}
.formular textarea{min-height:120px;resize:vertical}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:3px solid rgba(47,96,153,.25);border-color:var(--blau)}
.formular .haken{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--text)}
.formular .haken input{margin-top:4px;width:18px;height:18px;flex:none}
.formular button{justify-self:start;border:0;cursor:pointer}
.hinweis-klein{font-size:13px;color:var(--leise)}

/* ---------- Fuss, auf allen Seiten gleich ---------- */
.fuss{background:var(--nacht);color:rgba(255,255,255,.62);font-size:14px;padding:clamp(40px,5vw,60px) 0 26px}
.fuss .spalten{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.fuss .marke-fuss img{height:30px;width:auto}
.fuss .marke-fuss p{margin-top:12px;max-width:30ch;color:rgba(255,255,255,.72)}
.fuss .marke-fuss .bvmw{margin-top:14px;height:26px;width:auto;opacity:.85}
.fuss b{display:block;color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.fuss a{display:block;color:rgba(255,255,255,.72);text-decoration:none;padding:3px 0}
.fuss a:hover{color:#fff}
.fuss .unten a{display:inline;margin-right:16px;padding:0}
.fuss .unten{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:34px;padding-top:18px;border-top:1px solid var(--linie-d);font-size:13px;color:rgba(255,255,255,.5)}
@media(max-width:860px){.fuss .spalten{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fuss .spalten{grid-template-columns:1fr}}

/* ---------- Abschluss-Band mit Gespraech, fuer Unterseiten ---------- */
.band-gespraech{background:var(--navy);border-radius:22px;padding:clamp(24px,4vw,40px);color:rgba(255,255,255,.8);display:grid;grid-template-columns:1.3fr auto;gap:24px;align-items:center}
.band-gespraech h2{color:#fff;font-size:clamp(24px,2.6vw,32px)}
.band-gespraech p{margin-top:8px}
@media(max-width:760px){.band-gespraech{grid-template-columns:1fr}}

/* ---------- Einblenden: nur was beim Laden unterhalb des Bildschirms liegt ---------- */
.auf.wartet{opacity:0;transform:translateY(14px)}
.auf.da{opacity:1;transform:none;transition:opacity .6s,transform .6s}
@media(prefers-reduced-motion:reduce){.auf.wartet{opacity:1;transform:none}}

/* Sprungziele nicht unter der festen Kopfzeile verstecken */
[id]{scroll-margin-top:84px}

/* ---------- Einwilligungsleiste (einwilligung.js), uebernommen aus fundament.css 30.09.2026 ----------
   Das Skript baut die Leiste selbst, ihr Aussehen stand nur in fundament.css. Ohne diesen Block
   steht der Bannertext ungestaltet unter dem Fuss. Der Widerrufsverweis haengt sich an
   `footer .frow`, deshalb traegt die untere Fusszeile auch die Klasse frow. */
:root{--akzent:#2F6099;--ease:cubic-bezier(.22,.61,.36,1);--line:rgba(20,41,63,.12);--muted:#374151;--navy-mid:#1E3A5F;--paper:#FFFFFF;--r-m:18px;--r-s:10px;--shadow-l:0 4px 8px rgba(20,41,63,.05),0 36px 80px rgba(20,41,63,.13)}
@keyframes ew-auf{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.ew{
  position:fixed; left:0; right:0; bottom:0; z-index:200; padding:14px;
  display:flex; justify-content:center; pointer-events:none;
  animation:ew-auf .28s var(--ease);
}
@keyframes ew-auf{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.ew{animation:none}}

.ew__kasten{
  pointer-events:auto; background:var(--paper); border-radius:var(--r-m);
  padding:11px 15px; width:100%; max-width:940px;

  /* Der Rahmen steht in der Hausfarbe und ist 1,5 Punkt stark, damit die
     Leiste als eigener Gegenstand vor der Seite steht und nicht als heller
     Streifen darauf. Als `box-shadow` und nicht als `border`: der Schatten
     liegt ausserhalb des Kastens und aendert kein einziges Mass, ein Rahmen
     haette 3 Punkt Breite und 3 Punkt Hoehe gekostet. */
  box-shadow:var(--shadow-l), 0 0 0 1.5px var(--navy-mid);

  /* Ein Gitter und keine Zeile, damit die Knoepfe zwischen Ober- und
     Unterkante des Kastens stehen und nicht nur neben dem Satz. Der
     Unterschied sind zwoelf Punkte: die Fusszeile mit Datenschutz und
     Impressum haengt unter dem Satz, zieht die Mitte nach unten, und die
     Knoepfe blieben oben. Deshalb laeuft die Knopfspalte ueber alle drei
     Reihen und wird darin mittig gesetzt. Gemessen am 29.08.2026. */
  display:grid; grid-template-columns:1fr auto; column-gap:14px;
  grid-template-areas:
    "satz knoepfe"
    "wahl knoepfe"
    "fuss knoepfe";
}

/* Aufgeklappt nimmt Ebene zwei die volle Breite, und die Knoepfe stehen wieder
   allein neben dem Satz. Ueber die ganze offene Hoehe mittig waeren sie weit
   weg von den Kaestchen, ueber die sie entscheiden. */
.ew--offen .ew__kasten{
  grid-template-areas:
    "satz knoepfe"
    "wahl wahl"
    "fuss fuss";
}

/* Die Zeile bleibt im Markup stehen, im Gitter zaehlen aber ihre Kinder. */
.ew__zeile{display:contents}

/* 15 Punkt und am Desktop eine Zeile. Der Satz ist die einzige Stelle, an der
   ein Besucher etwas liest, bevor er drueckt; kleiner gesetzt wuerde er
   ueberflogen statt gelesen. */
.ew__satz{grid-area:satz; margin:0; font-size:.9375rem; line-height:1.45; color:var(--muted)}

/* Feste Spaltenbreite und darin zwei gleiche Haelften. Ohne die feste Breite
   richtete sich jeder Knopf nach seinem eigenen Wort, und beim Wechsel von
   „Alle annehmen" auf „Auswahl speichern" spraenge die ganze Reihe. Mit
   `flex:1 1 0` teilen sich beide den Platz unabhaengig vom Inhalt: gleich
   breit, und gleich breit bleibend. */
.ew__knoepfe{grid-area:knoepfe; align-self:center; display:flex; gap:8px; width:308px}
.ew__knoepfe .ew__btn{flex:1 1 0; min-width:0}
.ew__btn{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.8rem; font-weight:600; letter-spacing:.005em;
  padding:8px 15px; min-height:36px; border:0; border-radius:999px; cursor:pointer; white-space:nowrap;
  background:var(--paper); color:var(--navy-mid);
  box-shadow:inset 0 0 0 2px var(--navy-mid);
  transition:transform .2s var(--ease);
}
.ew__btn:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.ew__btn:hover{transform:none}}

/* Alle annehmen gefuellt, Nur Notwendige weiss mit kraeftigem Rahmen. Das ist eine
   Rangfolge und die riskanteste Stelle der Leiste. Was sie halten laesst:
   gleiche Groesse, gleiche Form, gleiche Schrift, derselbe Kontrastwert.
   Kein Grau, kein Textlink, kein kleinerer Knopf. Gehoert ins Anwaltsgespraech. */
.ew__btn--satt{background:var(--navy-mid); color:#fff; box-shadow:none}

/* Anpassen: der dritte Weg, und deshalb steht er nicht in der Knopfreihe,
   sondern eine Zeile tiefer in der Fusszeile. Er entscheidet nichts, er klappt
   nur auf. Dort kann er die Gleichrangigkeit der beiden echten Knoepfe nicht
   mehr stoeren, und die Reihe oben bleibt eine Wahl zwischen zweien.
   `font:inherit` ist hier keine Kosmetik: ein `button` bringt von sich aus die
   Schrift des Systems mit und schleppte sonst die Titelschrift der Knopfreihe
   mit hierher. Erst damit steht „Anpassen" in Schrift, Groesse, Schnitt und
   Farbe genau wie „Datenschutz" daneben. */
.ew__anpassen{
  font:inherit; color:var(--muted); background:none; border:0; padding:0;
  text-decoration:underline; text-underline-offset:.18em; cursor:pointer;
}
.ew__anpassen:hover{color:var(--akzent)}

/* Ebene zwei, erst auf Klick */
.ew__wahl{grid-area:wahl; display:none; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); gap:8px}
.ew--offen .ew__wahl{display:grid}
.ew__wahl label{
  display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  background:var(--sand); border-radius:var(--r-s); padding:10px 13px;
}
.ew__wahl input{margin:2px 0 0; width:17px; height:17px; flex:none; accent-color:var(--akzent); cursor:pointer}
.ew__wahl span{font-size:.75rem; line-height:1.5; color:var(--muted)}
.ew__wahl b{
  display:block; font-family:"Literata",Georgia,serif; font-weight:600;
  font-size:.85rem; color:var(--navy);
}
.ew__klein{margin:2px 0 0; font-size:.72rem; line-height:1.5; color:var(--muted)}
.ew__klein a{color:var(--akzent); text-decoration:underline; text-underline-offset:.18em}

/* Dicht unter den Satz, zwei Punkt Abstand. Die Fusszeile gehoert zum Satz und
   nicht als eigener Block darunter: sie traegt das Kleingedruckte, das der
   Satz nicht mehr fasst. */
.ew__fuss{grid-area:fuss; margin-top:2px; display:flex; flex-wrap:wrap; gap:2px 8px; align-items:center; font-size:.78125rem}
.ew__fuss a{color:var(--muted); text-decoration:underline; text-underline-offset:.18em}
.ew__fuss a:hover{color:var(--akzent)}
.ew__punkt{color:var(--muted); opacity:.55}

/* Der Widerrufsverweis in der Fusszeile. Er wird vom Skript gesetzt, nicht ins
   HTML geschrieben: ohne JavaScript gaebe es sonst einen toten Link auf
   neunzehn Seiten. */
.ew-widerruf{color:inherit; text-decoration:underline; text-underline-offset:.18em}

@media(max-width:760px){
  .ew{padding:0}
  .ew__kasten{
    border-radius:var(--r-m) var(--r-m) 0 0; padding:14px 16px;
    max-height:84vh; overflow-y:auto;
    /* Einspaltig gestapelt, Reihenfolge wie im Markup: Satz, Knoepfe, Ebene
       zwei, Fusszeile. Alles steht mittig, denn es gibt keine zweite Spalte
       mehr, an der sich eine linke Kante ausrichten koennte. */
    grid-template-columns:1fr;
    grid-template-areas: "satz" "knoepfe" "wahl" "fuss";
    text-align:center;
  }
  .ew--offen .ew__kasten{grid-template-areas: "satz" "knoepfe" "wahl" "fuss"}
  .ew__fuss{justify-content:center}

  /* Ausgenommen von der Mitte: Ebene zwei. Ein Kaestchen mit mehrzeiligem Text
     daneben liest man an der linken Kante entlang; zentriert faengt jede Zeile
     woanders an und das Kaestchen steht ueber dem Nichts. */
  .ew__wahl, .ew__wahl label, .ew__klein{text-align:left}

  /* Am Handy wird nicht mit der Maus gezielt: die Knoepfe bleiben 42 Punkt hoch,
     auch wenn die Schrift kleiner geworden ist. Darunter trifft man daneben.
     Die feste Spaltenbreite von 308 Punkt faellt hier weg, sonst raete sie ueber
     das Bild hinaus. Bei 320 Punkt Bildbreite bleiben nach Polster und Abstand
     rund 130 Punkt je Knopf: dafuer braucht es schmaleres Polster und
     `white-space:normal`, sonst passen „Nur Notwendige" und „Auswahl speichern"
     nicht nebeneinander. */
  .ew__knoepfe{margin-top:11px; width:auto}
  .ew__knoepfe .ew__btn{
    flex:1 1 0; min-width:0; white-space:normal;
    padding-left:8px; padding-right:8px; min-height:42px;
  }
}
.fuss .ew-widerruf{display:inline;color:rgba(255,255,255,.72)}

/* ---------- Platz fuer ein Video, das noch gedreht wird (Aufnahmen 03./04.10.2026) ----------
   Beim Einsetzen des Films den ganzen Block durch <figure class="film"><video ...></figure> ersetzen.
   Suche im Quelltext nach "VIDEO-PLATZ". */
.video-platz{aspect-ratio:16/9;width:100%;border-radius:16px;border:1.5px dashed rgba(47,96,153,.35);background:linear-gradient(160deg,#EEF3F9,#E3EBF5);display:grid;place-items:center;text-align:center;padding:20px}
.video-platz .rund{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:0 auto 10px;box-shadow:0 10px 24px -14px rgba(15,32,50,.5)}
.video-platz b{display:block;font-family:var(--kopf);color:var(--navy);font-size:17px}
.video-platz small{display:block;color:var(--leise);font-size:13px;margin-top:4px}

/* ---------- Filme, seit 01.10.2026 (Startvideo, Rundgang) ----------
   Kein Selbststart, weil die Filme Ton haben: `controls`, `preload="none"`, Standbild als poster.
   `object-fit:contain`, damit nichts beschnitten wird; ein Film mit anderem Seitenverhaeltnis
   setzt `aspect-ratio` am video selbst (Rundgang 1920/1248). */
.film{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#132A42;box-shadow:0 30px 60px -36px rgba(15,32,50,.55),0 0 0 1px var(--linie)}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#132A42}
/* Endflaeche: wenn der Film zu Ende ist, liegt sie ueber dem letzten Bild (Thomas, 01.10.2026:
   das letzte Bild als Standbild „guckt komisch“, und am Ende gehoert ein Aufruf hin). */
.film-ende{position:absolute;inset:0;background:rgba(15,32,50,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:20px}
.film-ende[hidden]{display:none}
.film-ende p{margin:0;font-family:var(--kopf);font-weight:700;font-size:clamp(20px,3vw,30px);line-height:1.2;color:#fff}
.film-nochmal{background:none;border:0;padding:4px;color:rgba(255,255,255,.78);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.film-nochmal:hover{color:#fff}
/* Film-Knopf auf einem Foto und das Filmfenster, seit 01.10.2026. Der Knopf sitzt auf dem
   Kopf-Foto der Startseite und auf dem Portrait von /thomas-kohns und oeffnet #filmfenster. */
.film-start{position:absolute;left:16px;top:58px;z-index:2;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border:0;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 14px 30px -14px rgba(15,32,50,.6);font:inherit;text-align:left;cursor:pointer;color:var(--navy);transition:transform .2s}
.film-start:hover{transform:translateY(-2px)}
.film-start .rund{flex:none;width:40px;height:40px;border-radius:50%;background:#EEF3F9;display:grid;place-items:center}
.film-start .txt b{display:block;font-size:14px;line-height:1.2}
.film-start .txt small{display:block;font-size:12px;color:var(--leise)}
.kopf-foto{position:relative}
.kopf-foto .film-start{top:auto;bottom:16px}
@media(max-width:600px){.film-start{top:52px;left:12px;padding:6px 12px 6px 6px}.film-start .rund{width:32px;height:32px}.kopf-foto .film-start{top:auto;bottom:12px}}
.filmdialog{border:0;padding:0;margin:auto;background:transparent;width:min(960px,calc(100vw - 32px));max-width:none;max-height:none;overflow:visible}
.filmdialog::backdrop{background:rgba(10,22,36,.8)}
.filmdialog .zu{position:absolute;right:10px;top:10px;z-index:3;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);font-size:22px;line-height:1;cursor:pointer}
/* Seit 01.10.2026: Coaches-Karte auf Navy braucht die helle Auszeichnung wie .dunkel .marke,
   und die Folgemonate im Block „Der Einstieg“ stehen als zwei Schritte. */
.karte.coach .marke{color:var(--blau-hell)}
.danach ol.folge{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:f}
.monat .danach ol.folge li{display:block;position:relative;background:none;border:0;border-radius:0;padding:0 0 0 34px;font-size:15px;line-height:1.5;counter-increment:f}
.monat .danach ol.folge li::before{content:counter(f);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--navy2);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
/* Auf der Startseite steht der Film-Knopf in der Textspalte unter den Knoepfen: auf dem Foto
   verdeckte er das Gesicht (01.10.2026). */
.film-start.im-text{position:static;margin-top:16px;box-shadow:0 0 0 1px var(--linie),0 10px 24px -16px rgba(15,32,50,.45)}
/* Rechts im Kopf der Startseite steht seit 01.10.2026 abends der Film selbst. */
.buehne-film{align-self:center}
.buehne-film .film{box-shadow:0 40px 80px -40px rgba(15,32,50,.55),0 0 0 1px var(--linie)}
/* Ueberschriften brechen ausgewogen um, damit kein Wort allein in der letzten Zeile steht
   (Thomas, 01.10.2026: „Das Problem ist selten die / KI.“). Browser ohne Unterstuetzung brechen wie bisher. */
h1,h2,h3{text-wrap:balance}
.weg-kopf{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:clamp(24px,3vw,36px)}
.weg-kopf .titel{margin-bottom:0}
.weg-bild{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;max-height:250px;width:100%;justify-self:end;box-shadow:0 30px 60px -36px rgba(15,32,50,.5)}
@media(max-width:860px){.weg-kopf{grid-template-columns:1fr}.weg-bild{justify-self:start;max-width:420px}}
.weg-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.weg-bild figcaption{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--navy);box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
/* /demo: der Beispielkurs als Vorschau im Kopf, seit 01.10.2026 abends. */
.demo-vorschau{margin-top:22px}
.demo-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.demo-chips li{background:#fff;border:1px solid var(--linie);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--navy)}
.ohne-mail{margin-top:14px;padding-top:12px;border-top:1px solid var(--linie);font-size:14px;color:var(--leise)}
.ohne-mail a{font-weight:600;color:var(--blau)}
/* Kopf der Startseite, Variante C (01.10.2026 abends): die Musterakademie als gekippte Karte hinter
   dem Film, darunter eine Karte zu /demo. */
.vc{position:relative}
.vc-film{position:relative;padding:44px 34px 0 0}
.vc .hub-hinten{position:absolute;top:0;right:0;width:68%;transform:rotate(3.5deg);transform-origin:top right;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -30px rgba(15,32,50,.6),0 0 0 1px var(--linie)}
.vc .hub-hinten img{display:block;width:100%}
.vc .film{position:relative;z-index:1}
.vc .hub-karte{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 34px 0 auto;max-width:340px;padding:12px 12px 12px 18px;background:#fff;border:1px solid var(--linie);border-radius:16px;box-shadow:0 18px 36px -24px rgba(15,32,50,.5);text-decoration:none;color:var(--navy);transition:transform .2s,box-shadow .2s}
.vc .hub-karte:hover{transform:translateY(-2px);box-shadow:0 22px 40px -22px rgba(15,32,50,.55)}
.vc .hub-karte b{display:block;font-size:15px}
.vc .hub-karte small{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--blau)}
.vc .pfeilkreis{flex:none;width:38px;height:38px;border-radius:50%;background:var(--navy2);color:#fff;display:grid;place-items:center}
.vc .pfeilkreis svg{width:18px;height:18px}
@media(max-width:600px){.vc-film{padding:30px 16px 0 0}.vc .hub-karte{max-width:none;margin-left:0;margin-right:0}}
/* Startseite, Runde 01.10.2026 abends */
@media(min-width:901px){.zweispalt.dunkel-links > .team{order:-1}}
.aussen .szenen{display:grid;gap:12px;margin-top:20px}
.aussen .szenen .szene p{font-size:17px}
.kanaele.zwei{grid-template-columns:1fr 1fr}
.kanal.mit-bild{flex-direction:column;gap:0;padding:0;overflow:hidden}
.kanal.mit-bild img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.kanal.mit-bild > div{padding:16px 18px 18px}
@media(max-width:900px){.kanaele.zwei{grid-template-columns:1fr}}
/* Die Schritte der Folgemonate ueber die volle Breite, leicht eingerueckt (weniger Weissraum). */
.danach .reihe ol.folge{grid-column:1/-1;margin-left:18px}
/* /demo: oben der Rundgang, seit 01.10.2026 spaet. */
.demo-film{margin-top:22px}
#kurs h2{margin:12px 0 12px}
/* Leiste unter den Filmen, Machart wie .vleiste im Hub (01.10.2026). */
.vleiste{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;margin-top:10px;position:relative;z-index:1}
/* Seit 01.10.2026, 21:45 auch am Desktop eine Zeile (Thomas); die Gruppen bleiben im DOM für später. */
.vleiste .vreihe{display:contents}
.vleiste .vreihe+.vreihe button:first-child{margin-left:8px}
.vleiste .tl{margin-right:2px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--leise)}
/* Flach wie das Wort Tempo (Thomas, 01.10.2026: „viel zu prägnant“). */
.vleiste button{font:inherit;font-size:11px;line-height:14px;font-weight:600;cursor:pointer;padding:0 6px;border:1px solid var(--linie);border-radius:5px;background:transparent;color:var(--leise);white-space:nowrap}
.vleiste button:hover{background:var(--sand);color:var(--navy)}
.vleiste button.an{background:var(--navy);border-color:var(--navy);color:#fff}
.vleiste .vsprung{color:var(--navy)}
/* Handy: alle Knöpfe in einer Zeile, ohne das Wort Tempo (Thomas, 01.10.2026). */
@media(max-width:600px){.vleiste{gap:3px}.vleiste .tl{display:none}.vleiste .vreihe+.vreihe button:first-child{margin-left:0}
  .vleiste button{padding:0 5px}}
.filmdialog .vleiste{background:rgba(255,255,255,.96);border-radius:12px;padding:8px}

/* Zusätzliche Handlungsaufforderungen der Startseite (01.10.2026). */
.team-link{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--linie-d);font-size:14px;color:rgba(255,255,255,.75);text-decoration:none}
.team-link b{color:#fff}
.team-link .pfeil{width:16px;height:16px;color:#fff;transition:transform .2s}
.team-link:hover .pfeil{transform:translateX(3px)}
section.zwischenruf{background:var(--navy);padding:clamp(30px,4vw,44px) 0}
.zwischenruf .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px 32px;flex-wrap:wrap}
.zwischenruf p{margin:0;color:rgba(255,255,255,.75);font-size:16px}
.zwischenruf p b{display:block;margin-bottom:4px;color:#fff;font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
/* Derselbe Glanz am Knopf oben rechts im Menü und am Menüknopf auf dem Handy (Thomas, 01.10.2026). */
.leiste .tel,.leiste .menue .tel-menue{position:relative;overflow:hidden;isolation:isolate;transition:transform .15s,box-shadow .15s}
.leiste .tel::before,.leiste .menue .tel-menue::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;pointer-events:none;z-index:-1;
  transform:skew(-20deg);transition:left 1.4s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.25) 45%,rgba(255,255,255,.45),rgba(255,255,255,.25) 55%,transparent)}
.leiste .tel:hover::before,.leiste .menue .tel-menue:hover::before{left:125%}
.leiste .tel:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(20,41,63,.55)}
@media(prefers-reduced-motion:reduce){.leiste .tel::before,.leiste .menue .tel-menue::before{display:none}}

/* Box unten links statt Leiste über die volle Breite, nur am Desktop. Seit 02.10.2026 auf
   tkohns.de und die-vertriebsausbildung.de gleich (Thomas). Grund: größte Feldstudie dazu
   (Utz u. a. 2019, rund 83.000 Besucher einer deutschen Seite): Box unten links 37,1 %
   Interaktion, schmale Leiste unten 9,6 %. Am Handy bleibt es die Leiste unten.
   Recherche: 05 Marketing/zz WissensHub-Kontext/reports/Cookie Banner Leiste oder Fenster.md */
@media (min-width: 761px) {
  .ew { justify-content: flex-start; padding: 24px; }
  .ew__kasten, .ew--offen .ew__kasten { max-width: 410px; padding: 20px 22px 16px;
    grid-template-columns: 1fr; grid-template-areas: "satz" "knoepfe" "wahl" "fuss"; }
  .ew__satz { font-size: 1rem; line-height: 1.5; }
  .ew__knoepfe { width: auto; margin-top: 16px; }
  .ew__knoepfe .ew__btn { min-height: 44px; font-size: .9rem; }
  .ew__fuss { margin-top: 12px; }
}

/* Handy flacher, seit 02.10.2026 (Thomas: „wirkt noch recht groß“). Kleinere Schrift,
   weniger Polster, linksbündig; die Knöpfe bleiben 40 Punkt hoch, damit man sie trifft.
   Steht hinter dem Handy-Block oben und überschreibt ihn deshalb. */
@media (max-width: 760px) {
  .ew__kasten { padding: 10px 14px 8px; text-align: left; }
  .ew__satz { font-size: .8125rem; line-height: 1.4; }
  .ew__knoepfe { margin-top: 8px; }
  .ew__knoepfe .ew__btn { min-height: 40px; font-size: .8rem; }
  .ew__fuss { justify-content: flex-start; margin-top: 6px; font-size: .75rem; }
}