/* Schriften liegen lokal, damit ohne Einwilligung keine Verbindung zu
Google entsteht. Nachladen: siehe fonts/LIESMICH.md */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/pjs-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/pjs-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/pjs-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/pjs-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Nur fuer das Wasserzeichen der Denkfehler-Section */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/spacegrotesk-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/spacegrotesk-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* =====================================================================
NMT Hauptdomain · Hub /mentaltrainer-ausbildung/ · Design v1
Worte: Content-Wireframe Hub v1.2 (24.07.), Design-System: Startseite v1
Quelle: DESIGN_SYSTEM.md + tokens.css + Content-Wireframe v2.1
Berry-Regel B: Berry nur auf dunklen Flaechen. Genau 2 Berry-Buttons.
Gold: ausschliesslich Trust, ausschliesslich mit Lichtspiel.
===================================================================== */
:root{
--indigo:#36325F; --indigo-deep:#2A2750; --violet:#665687; --lavender:#7A6C9C;
--berry:#963669; --berry-deep:#7A2D56;
/* Lavender #7A6C9C ist als TEXT auf Dunkel zu kontrastarm (2,5:1). Diese
aufgehellte Stufe erreicht ueberall mindestens 4,6:1. Das Original bleibt
fuer Raender und dekorative Flaechen. */
--lavender-text:#A99BC4;
--gold:#c99e44; --gold-deep:#8a6d2a; --gold-light:#e9c877; --gold-pale:#efd9a0;
--warm:#FFFDF8;
--soft:color-mix(in oklab, var(--indigo) 4%, var(--warm));
--soft-2:color-mix(in oklab, var(--indigo) 8%, var(--warm));
--line:color-mix(in oklab, var(--lavender) 22%, transparent);
--line-strong:color-mix(in oklab, var(--indigo) 18%, var(--warm));
--heading:#36325F; --body:#4A4A4A; --muted:#71717A;
--on-dark:#FFFFFF; --on-dark-soft:rgba(255,255,255,.85); --on-dark-mute:rgba(255,255,255,.65);
--f-head:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
--f-body:'DM Sans',system-ui,-apple-system,sans-serif;
/* Fliesstext-Stufen. Drei Rollen, drei Werte, keine Zwischengroessen:
--fs-text laufender Text in Prosa-Abschnitten (body)
--fs-komp Text innerhalb von Bauteilen: Karten, FAQ, Schritte, Footer
--fs-klein Bildunterschriften, Meta-Zeilen, Rechtliches */
--fs-komp:.9375rem; /* 15px */
--fs-klein:.8125rem; /* 13px */
--fs-h1:clamp(2.25rem,4.5vw,3.5rem);
--fs-h2:clamp(1.75rem,3vw,2.5rem);
--fs-h3:clamp(1.25rem,2vw,1.5rem);
/* Der Rahmen der Seite. Stand 29.07. von 1200 auf 1040 herunter: die
Lesespalte ist 820 breit und sitzt linksbuendig (.narrow--kante), bei
1200 klaffte daneben eine Luecke von 380 Pixeln, waehrend Karten und
Stufen die volle Breite liefen. Die Seite wirkte dadurch nach links
gerutscht. Bei 1040 sind es noch 220, das liest sich als Rand statt
als Loch. Weiter herunter geht nicht: bei 960 fallen die vier
Begriffskarten auf drei Zeilen je Absatz. */
--max:1040px;
/* Die Kopfzeile bleibt auf der alten Breite. Sie traegt sieben Menuepunkte
plus Logo plus Schaltflaeche, bei 1040 bricht „Kostenloses Informations-
gespraech buchen" auf zwei Zeilen. Der Inhalt darunter hat das Problem
nicht, deshalb zwei getrennte Rahmen. */
--max-kopf:1200px;
--r:12px; --r-sm:8px; --r-pill:50px;
/* Textspalte der Hero. Entspricht der Breite des Formate-Balkens,
damit Ueberschrift und Balken rechts buendig enden. */
--hero-col:700px;
/* Drei Abstufungen statt eines Werts, damit die Seite atmet */
--pad-y:clamp(72px,8vw,124px);
--pad-y-weit:clamp(96px,11vw,168px);
--pad-y-eng:clamp(56px,6vw,88px);
--ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
/* Bedienelemente erben die Schrift nicht von selbst, sie fallen sonst auf
Arial zurueck. Betrifft heute nur Knoepfe ohne Text, waere aber eine
Falle, sobald dort einmal Text steht. */
button,input,select,textarea{font:inherit;color:inherit}
/* Fokusring fuer die Tastatur. Der Chrome-Standard ist blau und liegt eng am
Element, auf Indigo verschwindet er fast. Deshalb ein eigener Ring in der
Markenfarbe, mit Abstand, damit er auch auf gleichfarbigen Flaechen traegt.
Nur :focus-visible, die Maus loest ihn also nicht aus. */
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.section--dark :focus-visible,.finale :focus-visible,
.hdr :focus-visible,.mnav :focus-visible,.announce :focus-visible,
.ft :focus-visible,.lese :focus-visible,.wand-sek :focus-visible{outline-color:#fff}
/* scroll-behavior:smooth und Lenis schliessen sich aus. Sobald der weiche
Lauf aktiv ist, setzt html.lenis die Regel wieder auf auto. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
html.lenis body{min-height:100%}
html.lenis-stopped{overflow:hidden}
body{
margin:0;background:var(--warm);color:var(--body);
font-family:var(--f-body);font-size:17px;line-height:1.65;
overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--heading);margin:0 0 .5em;letter-spacing:-.02em;line-height:1.14}
h1{font-size:var(--fs-h1);font-weight:800}
h2{font-size:var(--fs-h2);font-weight:800}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.25}
h4{font-size:1.0625rem;font-weight:700;line-height:1.3}
p{margin:0 0 1.1em}
strong,b{font-weight:500;color:var(--heading)}
.wrap{width:min(100% - 40px, var(--max));margin-inline:auto}
/* Zwei Klassen tief, damit die Regel unabhaengig von der Reihenfolge
gegen .wrap gewinnt. Gilt nur fuer die Kopfzeile, nicht fuer den Fuss. */
.hdr .wrap{width:min(100% - 40px, var(--max-kopf))}
/* 620 px ergeben bei 17 px DM Sans rund 74 Zeichen je Zeile.
Bei 720 px waren es gemessen 86, deutlich ueber der Lesbarkeitsgrenze. */
.narrow{width:min(100%,620px);margin-inline:auto}
/* Kopf und Fliesstext laufen bewusst gleich breit (Blendi 26.07.):
eine Kante fuer alles, Konsistenz schlaegt hier das enge Lesemass. */
.narrow--weit{width:min(100%,820px)}
/* ALT (bis 29.07.): margin-inline:0 auto. Der Kopf begann an der linken Kante
des vollbreiten Blocks darunter, damit beide Kanten fluchten.
NEU (Blendi 29.07., am MacBook geprueft): mittig. Die Lesespalte ist 820
breit, der Rahmen 1040. Linksbuendig ergab das bei 1512 Fensterbreite
229 Pixel Luft links und 464 rechts, also exakt das Doppelte. Die Seite
kippte sichtbar nach links. Mittig sind es 339 zu 354.
Der Preis: Kopf und Karten fluchten links nicht mehr, die vollbreiten
Bloecke treten jetzt symmetrisch nach beiden Seiten aus der Lesespalte
heraus. Das ist Absicht, nicht Schlamperei. */
.narrow--kante{margin-inline:auto}
h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.section{padding-block:var(--pad-y);position:relative}
.section--soft{background:var(--soft)}
/* Zwei weiche Lichtkreise ueber dem Indigo-Verlauf, damit die dunklen
Flaechen nicht als glatte Farbfelder wirken. Gleiche Sprache wie Kuvert,
Leseprobe und Zieh-Vergleich. */
.section--dark{position:relative;isolation:isolate;color:var(--on-dark-soft);
background:linear-gradient(158deg,var(--indigo) 0%,var(--indigo-deep) 100%)}
.section--dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(circle 420px at 84% 12%,color-mix(in oklab,var(--lavender) 34%,transparent),transparent 66%),
radial-gradient(circle 340px at 12% 92%,color-mix(in oklab,var(--berry) 22%,transparent),transparent 70%)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--on-dark)}
.section--dark strong,.section--dark b{color:var(--on-dark)}
.section--dark .lead{color:var(--on-dark-soft)}
/* Heller Text auf Dunkel wirkt duenner und braucht mehr Luft */
.section--dark p,.section--dark li,.finale p{line-height:1.72}
.section--dark .eyebrow{color:var(--lavender-text)}
.section--tight{padding-block:clamp(48px,5vw,72px)}
/* Die drei Wendepunkte der Seite bekommen mehr Luft davor und danach */
.section--weit{padding-block:var(--pad-y-weit)}
.section--eng{padding-block:var(--pad-y-eng)}
.eyebrow{
font-family:var(--f-head);font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.14em;color:var(--violet);
margin:0 0 14px;display:block;
}
.lead{font-size:clamp(1.0625rem,1.6vw,1.3125rem);line-height:1.55;color:var(--body)}
.small{font-size:var(--fs-klein);color:var(--muted);line-height:1.55}
.center{text-align:center}
.mb0{margin-bottom:0}
@keyframes pf{
0%,100%{transform:rotate(45deg) translate(0,0);opacity:.4}
50%{transform:rotate(45deg) translate(3.5px,3.5px);opacity:1}
}
.stars{
/* Effekt der Goldsiegel: plastische Scheibe je Stern plus periodischer Lichtlauf.
Die Sternform ist eine Maske, dadurch wird auch der Lichtlauf mitbeschnitten. */
position:relative;overflow:hidden;
display:inline-block;width:80px;height:15px;flex:none;vertical-align:middle;
background:radial-gradient(circle at 32% 26%, var(--gold-pale), var(--gold) 50%, var(--gold-deep) 100%);
background-size:20% 100%;background-repeat:repeat-x;
filter:drop-shadow(0 1px 2px rgba(138,109,42,.35));
-webkit-mask-image:url("data:image/svg+xml,");
mask-image:url("data:image/svg+xml,");
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.stars::after{
content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:56%;pointer-events:none;
background:linear-gradient(108deg,transparent 0%,rgba(255,255,255,.4) 26%,#fff 50%,rgba(255,255,255,.4) 74%,transparent 100%);
mix-blend-mode:screen;
transform:translateX(-190%);animation:sweep 5s ease-in-out infinite;
}
/* Der Streif laeuft einmal durch und ruht dann. Die Sternmaske zerlegt ihn in
fuenf Stuecke, deshalb ist er breiter und heller als beim runden Siegel. */
@keyframes sweep{
/* Takt bleibt bei 5 s. Nur das Gleitfenster ist breiter, dadurch wandert der
Streif langsamer hinueber: 2,3 s statt 1,4 s. */
0%,42%{transform:translateX(-190%)}
88%,100%{transform:translateX(370%)}
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--f-head);font-weight:700;font-size:var(--fs-komp);line-height:1;
padding:16px 26px;border-radius:var(--r);text-decoration:none;border:1.5px solid transparent;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
cursor:pointer;
}
.btn--indigo{background:var(--indigo);color:#fff}
.btn--indigo:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(54,50,95,.25)}
/* Haupt-CTA auf Dunkel: weiss gefuellt, Indigo-Schrift. Gleiche Erscheinung wie
im Kopfbereich, damit es als EIN Handlungsaufruf gelesen wird. */
.btn--on-dark{background:#fff;color:var(--indigo);box-shadow:0 6px 22px rgba(0,0,0,.34)}
.btn--on-dark:hover{background:var(--warm);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.btn--berry{background:var(--berry);color:#fff}
.btn--berry:hover{background:var(--berry-deep);transform:translateY(-3px);box-shadow:0 8px 25px rgba(150,54,105,.4)}
.btn--ghost{background:transparent;color:var(--indigo);border-color:rgba(54,50,95,.18)}
.btn--ghost:hover{transform:translateY(-3px);border-color:rgba(54,50,95,.4);box-shadow:0 8px 25px rgba(54,50,95,.12)}
.btn--ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn--ghost-dark:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btn--violet{background:var(--violet);color:#fff}
.btn--violet:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(102,86,135,.4)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.link-arrow{
font-family:var(--f-head);font-weight:700;font-size:var(--fs-komp);color:var(--indigo);
text-decoration:none;display:inline-flex;align-items:center;gap:8px;
padding-bottom:2px;background-image:linear-gradient(var(--berry),var(--berry));
background-size:0% 1.5px;background-repeat:no-repeat;background-position:left bottom;
transition:background-size .3s var(--ease);
position:relative;
}
/* Der Link ist 25 px hoch, ein Daumen braucht 44. Die Flaeche waechst
unsichtbar nach oben und unten, die Unterstreichung bleibt am Text. */
.link-arrow::after{content:"";position:absolute;left:0;right:0;top:50%;
height:44px;transform:translateY(-50%)}
.link-arrow:hover{background-size:100% 1.5px}
.link-arrow svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.section--dark .link-arrow{color:#fff;background-image:linear-gradient(var(--berry),var(--berry))}
/* ---------- Cards ---------- */
.card{
background:var(--warm);border-radius:var(--r);border:1px solid rgba(122,108,156,.15);
box-shadow:0 4px 16px rgba(54,50,95,.06),0 1px 3px rgba(54,50,95,.04);
padding:clamp(22px,2.4vw,30px);
transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.card--lift:hover{
transform:translateY(-3px);
box-shadow:0 12px 35px rgba(54,50,95,.1),0 4px 12px rgba(54,50,95,.06);
border-color:rgba(122,108,156,.32);
}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tag{
display:inline-block;font-family:var(--f-head);font-size:.75rem;font-weight:700;
letter-spacing:.04em;padding:6px 12px;border-radius:var(--r-sm);
background:color-mix(in oklab,var(--violet) 12%,var(--warm));color:var(--indigo);
}
.pill{
display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-klein);font-weight:500;
padding:9px 16px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);
color:var(--on-dark-soft);white-space:nowrap;
}
.pill--light{border-color:rgba(54,50,95,.14);color:var(--body);background:var(--warm)}
/* ---------- Ankuendigungsleiste ---------- */
/* Labor Nr. 29, ins Ruhige uebersetzt: weiche Lichtkreise, die langsam wandern,
dazu eine leuchtende Umrandung der Leiste. Berry und Lavender nur als Licht. */
.announce{
position:relative;isolation:isolate;overflow:hidden;
background:var(--indigo-deep);color:rgba(255,255,255,.9);
font-size:var(--fs-klein);text-align:center;padding:11px 46px;line-height:1.45;
box-shadow:inset 0 0 0 1px rgba(122,108,156,.16);
}
.announce__glow{
position:absolute;inset:-140% 0;z-index:0;pointer-events:none;filter:blur(26px);opacity:.5;
}
.announce__glow::before,.announce__glow::after{content:"";position:absolute;inset:0}
.announce__glow::before{
background:
radial-gradient(circle 90px at 14% 50%, var(--lavender), transparent 65%),
radial-gradient(circle 76px at 62% 50%, var(--lavender), transparent 65%);
animation:kreise-a 26s ease-in-out infinite alternate;
}
.announce__glow::after{
background:
radial-gradient(circle 82px at 38% 50%, var(--berry), transparent 65%),
radial-gradient(circle 70px at 88% 50%, var(--berry), transparent 65%);
animation:kreise-b 34s ease-in-out infinite alternate;
}
@keyframes kreise-a{from{transform:translateX(-4%)}to{transform:translateX(7%)}}
@keyframes kreise-b{from{transform:translateX(6%)}to{transform:translateX(-5%)}}
/* Umrandung: feine Linie oben und unten, im selben Licht */
.announce::before,.announce::after{
content:"";position:absolute;left:0;right:0;height:1px;z-index:2;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(122,108,156,.7) 22%,rgba(150,54,105,.8) 50%,rgba(122,108,156,.7) 78%,transparent);
background-size:220% 100%;animation:saum 18s linear infinite;
}
.announce::before{top:0}
.announce::after{bottom:0}
@keyframes saum{to{background-position:-220% 0}}
.announce__txt{position:relative;z-index:3}
/* Der Lichteffekt bleibt auch beim Scrollen bestehen. */
/* Unsichtbare 44px-Trefferflaeche, gleiche Technik wie beim Logo. */
.announce__close::after{content:"";position:absolute;inset:-9px}
.announce__close{
position:absolute;top:50%;right:14px;transform:translateY(-50%);z-index:4;
width:26px;height:26px;padding:0;display:grid;place-items:center;
background:transparent;border:0;border-radius:50%;cursor:pointer;
color:rgba(255,255,255,.5);transition:color .2s ease,background .2s ease;
}
/* Der sichtbare Kreis bleibt 26 px, die Trefferflaeche waechst auf 44. */
.announce__close::after{content:"";position:absolute;inset:-9px}
.announce__close:hover{color:#fff;background:rgba(255,255,255,.12)}
.announce__close svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.announce.is-zu{display:none}
.announce a{color:#fff;font-weight:500;text-underline-offset:3px;position:relative}
/* Die Textzeile ist 17 px hoch, die Trefferflaeche waechst unsichtbar auf 44 */
.announce a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* ---------- Header ---------- */
/* Kopfbereich liegt fest ueber dem Video und ist zuerst durchsichtig.
Beim Scrollen legt sich Indigo darunter, wie im Astro-Prototyp. */
.hdr{
position:fixed;inset:0 0 auto 0;z-index:60;background:transparent;
transition:background .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s ease;
}
/* Schutzverlauf ueber der Hero: das Video hat helle Stellen, an denen die
weisse Navigation auf 1,2:1 Kontrast faellt und praktisch verschwindet.
Der Verlauf haelt den Bereich hinter Logo und Navigation dunkel genug
(gemessen ueber 5:1) und laeuft darunter aus, damit die Hero offen bleibt. */
.hdr::before{
content:"";position:absolute;inset:0 0 -52px 0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,
rgba(26,22,52,.82) 0%,
rgba(26,22,52,.70) 64%,
rgba(26,22,52,0) 100%);
transition:opacity .3s var(--ease);
}
.hdr.is-stuck::before{opacity:0}
.hdr.is-stuck{
background:rgba(54,50,95,.92); /* Indigo mit 92 Prozent Deckung */
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
box-shadow:0 8px 30px -18px rgba(0,0,0,.6);
}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:74px}
.logo{display:block;text-decoration:none;flex:0 0 auto;position:relative}
/* Das Logo ist 32 px hoch, die Trefferflaeche waechst unsichtbar auf 44 */
.logo::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.logo__stage{position:relative;display:block;width:224px;aspect-ratio:300/44}
.logo__still,.logo__anim{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.logo__anim{opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
/* Waehrend die Animation laeuft, ist das Standbild ausgeblendet. Faellt die
Animation aus (Safari kann kein VP9 mit Alpha), bleibt das Standbild sichtbar. */
.logo.is-playing .logo__still{opacity:0}
.logo.is-playing .logo__anim{opacity:1}
.logo__still{transition:opacity .45s var(--ease)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a:not(.btn){
font-family:var(--f-head);font-weight:700;font-size:var(--fs-klein);color:var(--on-dark-soft);
text-decoration:none;padding:10px 11px;border-radius:var(--r-sm);
transition:background .2s ease,color .2s ease;text-shadow:0 1px 10px rgba(14,11,38,.45);
}
.nav a:not(.btn):hover{background:rgba(255,255,255,.1);color:#fff}
.nav__cta{margin-left:8px}
.nav__cta .btn{padding:12px 17px;font-size:var(--fs-klein)}
.burger{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-sm);padding:10px;margin-left:auto;cursor:pointer;
min-width:44px;min-height:44px;place-items:center}
.burger svg{width:20px;height:20px;stroke:#fff}
/* Mobil-Menue: Indigo-Overlay oeffnet sich als Kreis vom Burger aus, die
Eintraege gleiten gestaffelt herein. Der Schliessen-Knopf wird per JS exakt
auf die Burger-Position gelegt, dadurch wirkt er wie der verwandelte Burger. */
.mnav{
position:fixed;inset:0;z-index:70;
background:linear-gradient(158deg,var(--indigo) 0%,var(--indigo-deep) 100%);
padding:96px 28px 44px;overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
clip-path:circle(0px at var(--bx,calc(100% - 44px)) var(--by,44px));
visibility:hidden;transition:clip-path .5s var(--ease),visibility 0s .5s;
}
.mnav.is-open{
clip-path:circle(150% at var(--bx,calc(100% - 44px)) var(--by,44px));
visibility:visible;transition:clip-path .7s var(--ease);
}
.mnav__close{
position:fixed;top:16px;right:20px;box-sizing:border-box;cursor:pointer;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
border-radius:var(--r-sm);padding:10px;display:grid;place-items:center;
min-width:44px;min-height:44px;
opacity:0;transform:rotate(-90deg);transition:opacity .3s ease,transform .45s var(--ease);
}
.mnav.is-open .mnav__close{opacity:1;transform:none;transition-delay:.12s}
.mnav__close svg{width:20px;height:20px;stroke:#fff}
.mnav h3{font-size:.6875rem;text-transform:uppercase;letter-spacing:.14em;color:var(--lavender-text);margin:30px 0 8px}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav a{display:block;padding:14px 0;font-family:var(--f-head);font-weight:800;font-size:clamp(1.375rem,6vw,1.625rem);
letter-spacing:-.01em;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12)}
.mnav ul a{font-family:var(--f-body);font-weight:500;font-size:1.0625rem;color:var(--on-dark-soft);padding:11px 0}
/* Der CTA darf die grossen Link-Regeln von .mnav a nicht erben */
.mnav a.btn{width:100%;margin-top:32px;font-weight:700;font-size:var(--fs-komp);
color:var(--indigo);padding:16px 26px;border-bottom:0;letter-spacing:0;
text-align:center;line-height:1.35}
/* Eintraege erscheinen nacheinander, sobald der Kreis sie freigegeben hat */
.mnav>*:not(.mnav__close){opacity:0;transform:translateX(-26px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
/* Das Logo macht die Einflug-Kaskade nicht mit, es soll wirken, als
bliebe es vom Header einfach stehen. Steht nach der Kaskaden-Regel,
gleiche Spezifitaet, spaeter gewinnt. */
#mnav .mnav__logo{position:absolute;display:block;opacity:1;transform:none;transition:none;z-index:1;padding:0;border:0;background:none;line-height:0}
#mnav .mnav__logo img{height:100%;width:auto;display:block}
/* Der Menue-CTA bleibt einzeilig, die Schrift federt auf schmalen
Geraeten leicht nach unten (Blendi 29.07.). */
#mnav .btn{white-space:nowrap;font-size:clamp(.8125rem,3.8vw,.9375rem);padding-inline:clamp(14px,4vw,26px)}
.mnav.is-open>*:not(.mnav__close){opacity:1;transform:none}
.mnav.is-open>*:nth-child(2){transition-delay:.14s}
.mnav.is-open>*:nth-child(3){transition-delay:.2s}
.mnav.is-open>*:nth-child(4){transition-delay:.26s}
.mnav.is-open>*:nth-child(5){transition-delay:.32s}
.mnav.is-open>*:nth-child(6){transition-delay:.38s}
.mnav.is-open>*:nth-child(7){transition-delay:.44s}
.mnav.is-open>*:nth-child(8){transition-delay:.5s}
.mnav.is-open>*:nth-child(9){transition-delay:.56s}
.mnav.is-open>*:nth-child(10){transition-delay:.62s}
/* Mit Maus: ein Berry-Strich schiebt sich in die Randspalte vor den Eintrag */
@media (hover:hover){
.mnav a:not(.btn){position:relative}
.mnav a:not(.btn)::before{content:"";position:absolute;left:-24px;top:50%;width:15px;height:3px;border-radius:2px;
background:var(--berry);opacity:0;transform:translate(-8px,-50%);transition:opacity .25s ease,transform .3s var(--ease)}
.mnav a:not(.btn):hover::before,.mnav a:not(.btn):focus-visible::before{opacity:1;transform:translate(0,-50%)}
}
body.is-locked{overflow:hidden}
/* Fortschrittsbalken (z-index 100) waehrend des offenen Menues ausblenden */
body.is-locked .progress{visibility:hidden}
/* Megamenue */
.has-mega{position:relative}
.mega{
position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);
width:min(92vw,660px);background:var(--warm);border:1px solid var(--line);
border-radius:var(--r);box-shadow:0 24px 60px rgba(54,50,95,.14);
padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:26px;
opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s var(--ease),visibility .22s;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:12px}
.mega ul{list-style:none;margin:0;padding:0}
.mega li+li{margin-top:2px}
/* Die Klappkarte liegt innerhalb der Navigation und erbt deren weisse Schrift
samt Textschatten. Auf dem hellen Papier ist das unsichtbar, deshalb hier
zurueck auf Indigo. */
.mega a:not(.btn){color:var(--indigo);text-shadow:none}
.mega li a:not(.btn){display:block;padding:9px 11px;font-size:var(--fs-komp);font-weight:500;font-family:var(--f-body);border-radius:var(--r-sm)}
.mega li a:not(.btn):hover,.mega li a:not(.btn):focus-visible{background:var(--soft-2);color:var(--berry)}
/* ---------- Hero ---------- */
.hero .wrap{position:relative;z-index:1}
.hero{
position:relative;background:var(--indigo-deep);color:var(--on-dark-soft);
min-height:100svh;display:flex;overflow:hidden;
}
/* Inhalt sitzt unten, damit oben moeglichst viel vom Video sichtbar bleibt */
.hero .wrap{
display:flex;flex-direction:column;justify-content:flex-end;
/* Vorlauf und Abstaende bewusst knapp: je hoeher die Hero wird, desto mehr
schneidet object-fit:cover seitlich vom 16:9-Video weg. */
/* Ein Takt fuer alle Abstaende im unteren Hero-Stapel: Headline, Formatleiste,
Knoepfe, Trust-Zeile und der Rest bis zur Unterkante liegen im selben Raster.
Unten kommt der Platz fuer den Scroll-Pfeil dazu (20px Abstand + 39px Pfeil). */
--takt:clamp(20px,3.4vh,32px);
padding-top:120px;padding-bottom:calc(var(--takt) + 60px);
gap:var(--takt);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg video,.hero__bg img{
width:100%;height:100%;object-fit:cover;object-position:50% 50%;
filter:brightness(.86) saturate(1.04);
}
.hero__bg::after{
content:"";position:absolute;inset:0;
/* Uebernommen aus dem Astro-Prototyp, Hero.astro */
background:
linear-gradient(180deg, rgba(36,32,95,.42) 0%, rgba(34,30,84,.54) 38%, rgba(24,21,58,.97) 100%),
linear-gradient(78deg, rgba(24,21,58,.62) 0%, rgba(24,21,58,0) 64%);
}
.hero__in{position:relative;z-index:1;max-width:var(--hero-col);margin-right:auto;margin-left:0}
.hero__trust{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
gap:12px 30px;align-items:center;justify-content:center;
}
.hero__trust li{
display:inline-flex;align-items:center;gap:10px;color:#fff;opacity:.94;
font-size:var(--fs-komp);font-weight:500;text-shadow:0 1px 10px rgba(14,11,38,.5);
}
.avatar-cluster{display:inline-flex;align-items:center;flex:0 0 auto}
.avatar-cluster img{
width:34px;height:34px;border-radius:50%;object-fit:cover;
border:2px solid rgba(255,255,255,.92);margin-left:-10px;
box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.avatar-cluster img:first-child{margin-left:0}
/* Original-ZFU-Siegel, gleiche Groesse wie die Absolvent:innen-Kreise.
Heller Kreis dahinter, sonst geht das dunkle Siegel auf dem Video unter. */
.zfu-siegel{
width:34px;height:34px;flex:0 0 34px;object-fit:contain;border-radius:50%;
background:rgba(255,255,255,.94);padding:1px;
box-shadow:0 2px 10px rgba(0,0,0,.35);
}
/* Scroll-Hint aus dem Animations-Labor, Nr. 58, Variante Pfeil */
.hero__scroll{
position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;
display:grid;place-items:center;padding:12px;text-decoration:none;
}
.hero__scroll i{
display:block;width:15px;height:15px;
border-right:1.8px solid var(--lavender-text);border-bottom:1.8px solid var(--lavender-text);
transform:rotate(45deg);animation:pf 1.5s var(--ease) infinite;
}
.hero__scroll:hover i{border-color:#fff}
.hero h1{color:#fff;margin-bottom:.42em}
/* Vorzeile im Hero: Gemessen am 31.07. lag sie ueber den Fotos bei
Kontrast 2.62 bis 2.98, gefordert sind 4.5 (12px zaehlen als kleine
Schrift). Auf massivem Indigo ist dieselbe Farbe mit 4.60 bzw. 5.43
voellig in Ordnung — deshalb wird NUR hier aufgehellt und nicht die
Variable --lavender-text, an der auch Symbole, der Scrollpfeil und ein
Farbverlauf haengen. #D8D2E4 erreicht 4.57 auf der Diplom-Seite und
5.20 auf der Terminseite. Der Schatten zaehlt fuer die Norm nicht mit,
hilft aber gegen unruhige Bildstellen. */
.hero .eyebrow{color:#D8D2E4;text-shadow:0 1px 12px rgba(14,11,38,.55)}
.hero__lead{font-size:clamp(1.0625rem,1.7vw,1.3125rem);color:var(--on-dark-soft);margin-bottom:0;max-width:600px}
.hero__formats{
display:inline-flex;flex-wrap:wrap;margin:0;align-self:flex-start;width:max-content;max-width:min(100%,var(--hero-col));
border-radius:var(--r-pill);overflow:hidden;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
box-shadow:0 8px 30px rgba(12,10,34,.28);
}
.fmt{
display:inline-flex;align-items:center;gap:10px;
padding:13px 20px;font-size:var(--fs-komp);font-weight:500;color:#fff;
white-space:nowrap;position:relative;
}
.fmt .mob{display:none}
br.mob{display:none}
.btn__kurz{display:none}
.fmt+.fmt::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:1px;height:22px;background:rgba(255,255,255,.2);
}
.fmt svg{width:19px;height:19px;flex:0 0 19px;stroke:var(--lavender-text);stroke-width:1.7;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.hero__cta{margin-bottom:0}
.hero__note{font-size:var(--fs-klein);color:var(--on-dark-mute);margin:20px 0 0}
/* Hero-Choreografie, 5 Beats */
.js .beat{opacity:0;transform:translateY(16px);animation:beat .8s var(--ease) forwards}
/* .js-Praefix noetig: die Kurzform '.js .beat' setzt animation-delay implizit
auf 0 und wuerde schwaechere Selektoren schlagen. */
.js .beat-1{animation-delay:.05s}.js .beat-2{animation-delay:.17s}.js .beat-3{animation-delay:.29s}
.js .beat-4{animation-delay:.41s}.js .beat-5{animation-delay:.53s}
@keyframes beat{to{opacity:1;transform:none}}
/* ---------- Trust-Leiste ---------- */
.trust{background:var(--warm);border-block:1px solid var(--line)}
.trust__in{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:clamp(18px,2.2vw,28px);padding-block:clamp(24px,3vw,34px);
}
.trust__gruppe{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);flex-wrap:wrap;justify-content:center}
/* Goldener Trenner, oben und unten auslaufend */
.trust__trenner{
width:1px;align-self:stretch;min-height:64px;flex:0 0 1px;
background:linear-gradient(180deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent);
opacity:.75;
}
/* Siegel mit Bildunterschrift */
.siegel{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;text-align:center;max-width:136px}
.siegel img{height:46px;width:auto;object-fit:contain}
/* Breite Wortmarke: bei gleicher Hoehe wirkt sie doppelt so schwer wie die runden Siegel */
.siegel img[alt="Ö-Cert"]{height:32px}
.siegel__zeile{display:none}
.siegel span{font-size:var(--fs-klein);line-height:1.3;color:var(--body)}
/* Bewertung: grosse Zahl, Sterne daneben, Zeile darunter */
.bewertung{display:flex;align-items:center;gap:16px}
.bewertung__zahl{
font-family:var(--f-head);font-weight:800;font-size:clamp(2.25rem,3.4vw,2.875rem);
color:var(--indigo);line-height:.95;letter-spacing:-.03em;
}
.bewertung__rechts{display:flex;flex-direction:column;gap:8px}
/* Groesser als im Hero, hier tragen die Sterne den Block mit */
.bewertung .stars{width:104px;height:20px}
.bewertung__rechts .small{font-size:var(--fs-klein);color:var(--muted)}
/* Gruenderin ganz rechts */
.gruenderin{display:flex;align-items:center;gap:14px}
.gruenderin img{
width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 52px;
border:2px solid rgba(255,255,255,.95);box-shadow:0 2px 12px rgba(54,50,95,.18);
}
.gruenderin b{
display:block;font-family:var(--f-head);font-weight:800;font-size:1.0625rem;
color:var(--indigo);line-height:1.2;letter-spacing:-.01em;white-space:nowrap;
}
.gruenderin__sub{display:block;font-size:var(--fs-klein);color:var(--muted);line-height:1.35;margin-top:3px}
/* ---------- Einstiegstueren als Flip-Karten (Labor Nr. 27) ---------- */
.tuer{
perspective:1400px;
height:clamp(370px,30vw,430px);width:100%;cursor:pointer;text-align:inherit;
font:inherit;color:inherit;display:block;
}
.tuer__innen{
display:block;position:relative;width:100%;height:100%;
transform-style:preserve-3d;transition:transform .7s var(--ease);
}
.tuer:hover .tuer__innen,
.tuer:focus-visible .tuer__innen,
.tuer.is-offen .tuer__innen{transform:rotateY(180deg)}
.tuer:focus-visible{outline:2px solid var(--berry);outline-offset:4px;border-radius:var(--r)}
.tuer__seite{
position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
border-radius:var(--r);padding:clamp(24px,2.6vw,32px);
display:flex;flex-direction:column;
box-shadow:0 10px 34px rgba(54,50,95,.16);
}
/* Vorderseite: Symbol oben mittig, darunter die Ueberschrift */
.tuer__vorn{
background:linear-gradient(158deg,var(--indigo) 0%,var(--indigo-deep) 100%);
color:#fff;align-items:center;justify-content:center;text-align:center;gap:20px;
overflow:hidden;isolation:isolate;
}
/* Der Hinweis sitzt am Fuss der Karte, nicht mitten im Satz.
Zwei Klassen, damit die spaetere Regel .tuer__vorn>* ihn nicht zurueckholt. */
.tuer__vorn .tuer__hinweis{position:absolute;left:0;right:0;bottom:clamp(18px,2vw,24px);justify-content:center;z-index:1}
/* Dieselbe Lichtsprache wie in der Webinar-Leiste: weiche Kreise, die langsam wandern */
.tuer__vorn::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
/* Fensterlicht (Labor-Variante 1): ein breiter diagonaler Lichtbalken von
oben links, daneben eine schmalere zweite Bahn. Statisch wie Tageslicht. */
background:
linear-gradient(118deg, rgba(255,250,240,.30) 0%, rgba(255,250,240,.10) 26%, transparent 46%),
linear-gradient(118deg, transparent 40%, rgba(216,205,240,.14) 52%, transparent 66%);
}
.tuer__vorn::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 22%);
}
.tuer__vorn>*{position:relative;z-index:1}
.tuer__ic{
width:66px;height:66px;border-radius:50%;display:grid;place-items:center;flex:0 0 66px;
border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);
}
/* Heruntergeladene Symbole als Flaeche in Berry. Berry als Mikro-Akzent ist erlaubt.
Reines Berry auf Indigo kaeme nur auf 1,7:1, deshalb ein warmer Schein dahinter
und ein feiner Lichtrand, damit das Symbol sich abhebt. */
.tuer__ic{
background:radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--berry) 26%, transparent), transparent 70%);
border-color:color-mix(in oklab, var(--berry) 40%, rgba(255,255,255,.24));
}
.tuer__ic svg{
width:34px;height:34px;fill:var(--berry);stroke:none;
filter:drop-shadow(0 0 6px rgba(150,54,105,.55)) drop-shadow(0 1px 0 rgba(255,255,255,.18));
}
.tuer:hover .tuer__ic{background:radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--berry) 38%, transparent), transparent 72%)}
.tuer__vorn h3{color:#fff;margin:0;font-size:clamp(1.25rem,1.9vw,1.5rem)}
.tuer__hinweis{
font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.32);margin:0;font-family:var(--f-head);font-weight:600;
display:flex;align-items:center;gap:6px;transition:color .3s var(--ease);
}
.tuer:hover .tuer__hinweis{color:rgba(255,255,255,.5)}
.tuer__hinweis svg{width:10px;height:10px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.tuer__hinweis .mob{display:none}
/* Rueckseite: der Text, ruhig gesetzt */
.tuer__hinten{
/* Rueckseite hell, damit der laengere Text bequem zu lesen ist.
Nur die Vorderseite, das Deckblatt, bleibt Indigo. */
background:var(--warm);color:var(--body);
transform:rotateY(180deg);justify-content:center;
border:1px solid rgba(122,108,156,.22);
}
.tuer__hinten p{margin:0;padding-top:22px;font-size:clamp(.9375rem,1.15vw,1rem);line-height:1.62}
.tuer__hinten::before{
content:"";position:absolute;top:clamp(24px,2.6vw,32px);left:clamp(24px,2.6vw,32px);
width:34px;height:3px;border-radius:2px;background:var(--berry);
}
/* ---------- Positionierung: Anker-Saetze ---------- */
/* ---------- BRAIN-Stationen mit Faden ---------- */
/* Gehirn zeichnet sich */
/* ---------- Zahlen: Rasterlinien statt Kaesten ---------- */
/* Zahlen als flaches Mosaik (Bento-Variante 2): gleichrangige helle Kacheln
in unterschiedlichen Breiten, ein Berry-Punkt je Kachel als Akzent */
.mosaik{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.mkachel{background:var(--warm);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;position:relative}
.mkachel::before{content:"";position:absolute;top:20px;right:18px;width:7px;height:7px;border-radius:50%;background:var(--berry);opacity:.85}
.mk-3{grid-column:span 3}
.mk-2{grid-column:span 2}
.mk-breit{grid-column:span 6;display:flex;align-items:baseline;gap:14px}
.mk-breit .zahl__t{margin:0;max-width:none}
.zahl__pre{
display:block;font-family:var(--f-head);font-weight:700;font-size:.6875rem;
text-transform:uppercase;letter-spacing:.12em;color:var(--violet);margin-bottom:8px;
}
.zahl__n{
display:block;font-family:var(--f-head);font-weight:800;
font-size:clamp(2rem,3.6vw,2.75rem);color:var(--indigo);
line-height:1;letter-spacing:-.03em;margin-bottom:10px;
}
.zahl__t{margin:0;font-size:var(--fs-komp);line-height:1.5;color:var(--body);max-width:34ch}
/* ---------- Vier Prinzipien: nummerierte Liste ---------- */
/* ---------- Kreislauf: Warum Neuromentaltraining ---------- */
/* Vier Prinzipien als Runde: links der Ring mit laufendem Berry-Punkt
(24s, 6s je Viertel), rechts die Karte mit fuellender Konturziffer.
Bildlage und Tiefe sind fixe Endwerte aus dem Labor (26.07.):
Zoom 112 %, X +1, Y 0, Tiefe 42 %. */
#akademie .narrow p b{font-family:var(--f-head);font-weight:700;color:var(--heading)}
.kreislauf{display:flex;justify-content:center;align-items:center;gap:52px;margin-top:clamp(40px,5vw,60px)}
.rad{--radb:290px;position:relative;width:var(--radb);aspect-ratio:1;flex:0 0 auto}
.rad svg{width:100%;height:100%;display:block}
.rad .ring{fill:none;stroke:var(--line);stroke-width:2}
.rad .zug{fill:none;stroke:var(--violet);stroke-width:2;stroke-linecap:round;stroke-dasharray:635;stroke-dashoffset:635;transition:stroke-dashoffset 1.4s var(--ease)}
.rad.is-in .zug{stroke-dashoffset:0}
/* Nullgross und mittig: ein rotierendes Vollflaechen-Quadrat wuerde mit seiner
gedrehten Box die Seite horizontal aufblaehen (Kantenlaenge mal Wurzel 2). */
.orbit{position:absolute;left:50%;top:50%;width:0;height:0;animation:kl-runde 24s linear infinite;animation-play-state:paused;will-change:transform}
.rad.is-in .orbit{animation-play-state:running}
.orbit i{position:absolute;left:-5px;top:calc(var(--radb)/-2 - 5px);width:10px;height:10px;border-radius:50%;background:var(--berry);box-shadow:0 0 12px 2px color-mix(in oklab,var(--berry) 45%,transparent)}
@keyframes kl-runde{to{transform:rotate(360deg)}}
.punkt{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--soft);border:2px solid var(--lavender);transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease)}
.punkt.aktiv{border-color:var(--berry);background:var(--berry);transform:scale(1.2)}
.punkt.p1{top:-6px;left:50%;margin-left:-6px}
.punkt.p2{right:-6px;top:50%;margin-top:-6px}
.punkt.p3{bottom:-6px;left:50%;margin-left:-6px}
.punkt.p4{left:-6px;top:50%;margin-top:-6px}
.mitte{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.hirnbild{position:absolute;inset:5px;border-radius:50%;overflow:hidden;border:1px solid var(--line)}
.treiben{position:absolute;inset:0}
.hirnbild img{position:absolute;left:calc(50% + 1px);top:50%;transform:translate(-50%,-50%);height:112%;width:auto;max-width:none;
/* Tiefe 42 %: blur .42*2.5 / saturate 1-.42*.22 / brightness 1-.42*.03 */
filter:blur(1.05px) saturate(.908) brightness(.987)}
.hirnbild::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 46%,rgba(30,26,60,.30),rgba(30,26,60,.07) 58%,transparent 76%);opacity:.42}
.mitte__titel{position:relative;font-family:var(--f-head);font-weight:800;font-size:clamp(1.125rem,4vw,1.375rem);letter-spacing:-.01em;color:#fff;text-shadow:0 1px 3px rgba(16,13,38,.8),0 3px 10px rgba(16,13,38,.6),0 8px 26px rgba(16,13,38,.45)}
.mitte__titel.neu{animation:kl-wechsel .5s var(--ease)}
.karte{flex:0 1 420px;min-height:252px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 26px;border:1px solid var(--line);border-radius:var(--r);background:var(--warm);box-shadow:0 12px 32px color-mix(in oklab,var(--indigo) 9%,transparent)}
.karte__zahl{position:relative;display:inline-block;font-family:var(--f-head);font-weight:800;font-size:3.25rem;line-height:1;letter-spacing:-.02em}
.karte__zahl i{font-style:normal;color:transparent;-webkit-text-stroke:1.5px color-mix(in oklab,var(--violet) 50%,transparent)}
.karte__zahl b{position:absolute;inset:0;color:var(--berry);-webkit-text-stroke:1.5px var(--berry);clip-path:inset(100% 0 0 0)}
.karte.neu .karte__zahl b{animation:kl-fuellen .85s var(--ease) .1s forwards}
@keyframes kl-fuellen{to{clip-path:inset(0 0 0 0)}}
.karte h3{margin:14px 0 8px;font-size:1.25rem}
.karte p{margin:0;font-size:var(--fs-komp);line-height:1.55;max-width:36ch}
.karte.neu h3,.karte.neu p{animation:kl-wechsel .5s var(--ease)}
@keyframes kl-wechsel{from{opacity:0;transform:translateY(6px)}}
.untertext{text-align:center;font-size:1.0625rem;color:var(--body);margin:30px auto 0;max-width:44ch;text-wrap:balance}
.untertext b{font-family:var(--f-head);font-weight:800;color:var(--heading)}
/* Ruhe-Fallback: klassische Liste statt Animation */
.runde{list-style:none;margin:34px 0 0;padding:0;display:none}
.runde li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.runde i{font-style:normal;font-family:var(--f-head);font-weight:800;font-size:var(--fs-klein);letter-spacing:.06em;color:var(--violet);padding-top:3px}
.runde p{margin:0;font-size:var(--fs-komp);line-height:1.55}
/* ---------- Ausbildungs-Karten ---------- */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.course{position:relative;display:flex;flex-direction:column}
/* Reihenfolge beachten: .course--hero muss NACH .course stehen, sonst gewinnt display:flex */
.course--hero{
grid-column:span 3;display:grid;grid-template-columns:1.2fr 1fr;
align-items:stretch;padding:0;background:var(--warm);border:1.5px solid rgba(122,108,156,.28);
box-shadow:0 10px 40px rgba(54,50,95,.08);
}
/* Interaktive Hero-Karte: neigt sich zum Mauszeiger, ein Glanzlicht folgt ihm.
Nur fuer Maus-Geraete; Touch und reduzierte Bewegung bekommen die ruhende Karte. */
.karte3d{transform:perspective(1100px);transform-style:preserve-3d;will-change:transform}
.karte3d::before{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
background:radial-gradient(circle at var(--mx,50%) var(--my,38%),
color-mix(in oklab,var(--lavender) 26%,transparent),transparent 62%);
opacity:0;transition:opacity .45s var(--ease);
}
@media (hover:hover) and (pointer:fine){
.karte3d:hover{border-color:rgba(122,108,156,.45);box-shadow:0 18px 55px rgba(54,50,95,.14),0 6px 16px rgba(54,50,95,.07)}
.karte3d:hover::before{opacity:1}
/* Nur der Text schwebt vor der Karte, dadurch bekommt die Neigung Tiefe.
Das Bild bleibt in der Kartenebene: vorgeholt wuerde es perspektivisch
groesser und ragte an der Kante ueber die Karte hinaus. */
.js .casc.is-in.karte3d>.hero-kurs__inhalt{transform:translateZ(24px)}
}
.course .meta{font-size:var(--fs-klein);color:var(--muted);margin:0 0 12px;font-weight:500}
.course p{font-size:var(--fs-komp);flex:1}
.course .link-arrow{margin-top:14px;align-self:flex-start}
.course__facts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.course__facts li{display:flex;gap:10px;font-size:var(--fs-komp);align-items:flex-start}
.course__facts svg{width:16px;height:16px;flex:0 0 16px;margin-top:5px;stroke:var(--berry)}
/* Hero-Karte zweigeteilt: links Text samt CTA, rechts das Gehirn randlos bis zur Kante */
.hero-kurs__inhalt{
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
padding:clamp(26px,3.2vw,44px);
}
.hero-kurs__inhalt p{flex:none}
.hero-kurs__inhalt .btn{margin-top:6px}
.hero-kurs__bild{
position:relative;overflow:hidden;background:var(--indigo-deep);
border-radius:0 calc(var(--r) - 1.5px) calc(var(--r) - 1.5px) 0;min-height:320px;
}
.hero-kurs__bild video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* ---------- Leseprobe: Blaetterbuch im Vollbild ----------
Die Ebene liegt fix ueber allem. Wo echtes Vollbild geht, wird zusaetzlich
requestFullscreen genutzt; die Gestaltung ist in beiden Faellen dieselbe. */
.lese{
position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
align-items:center;justify-content:center;overflow:hidden;
padding:24px 24px calc(112px + env(safe-area-inset-bottom,0px));
background:radial-gradient(130% 110% at 80% -12%,var(--violet) 0%,var(--indigo-deep) 55%,#221E3C 100%);
}
.lese[hidden]{display:none}
/* Zwei weiche Lichtkreise geben der Flaeche Tiefe, wie in den dunklen Sektionen */
.lese::before,.lese::after{content:"";position:absolute;border-radius:50%;aspect-ratio:1;pointer-events:none}
.lese::before{top:-22%;right:-6%;width:min(620px,66%);
background:radial-gradient(circle,color-mix(in oklab,var(--lavender) 45%,transparent),transparent 68%)}
.lese::after{bottom:-28%;left:-12%;width:min(560px,60%);
background:radial-gradient(circle,color-mix(in oklab,var(--berry) 26%,transparent),transparent 70%)}
.lese__buch{position:relative;z-index:1;margin:0 auto;touch-action:pan-y;
max-width:min(980px,94vw,calc((100vh - 190px)*1.4))}
.lese__seite{background:var(--warm);overflow:hidden}
.lese__seite img{width:100%;height:100%;object-fit:cover;display:block}
.lese .stf__item{box-shadow:0 34px 90px -34px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.14),0 0 70px -8px color-mix(in oklab,var(--lavender) 35%,transparent)}
.lese__zu{
position:absolute;top:18px;right:22px;z-index:10;width:46px;height:46px;aspect-ratio:1;
box-sizing:border-box;padding:0;display:flex;align-items:center;justify-content:center;
border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);cursor:pointer;
transition:background .2s ease}
.lese__zu:hover{background:rgba(255,255,255,.18)}
.lese__zu svg{width:20px;height:20px;stroke:#fff}
.lese__leiste{
position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);
z-index:6;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;width:max-content;max-width:92vw}
.lese__leiste button,.lese__pdf{
font-family:var(--f-head);font-weight:700;font-size:var(--fs-komp);line-height:1;
border:1.5px solid rgba(255,255,255,.34);background:rgba(255,255,255,.08);color:#fff;
border-radius:var(--r-sm);padding:11px 16px;cursor:pointer;text-decoration:none;
display:inline-flex;align-items:center;gap:7px;transition:background .2s ease,border-color .2s ease}
.lese__leiste button:hover,.lese__pdf:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}
.lese__pdf svg{width:15px;height:15px;flex:0 0 auto}
.lese__zoomhinweis{
position:absolute;top:calc(18px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
z-index:6;margin:0;padding:9px 15px;border-radius:var(--r-pill);
background:rgba(0,0,0,.35);color:#fff;font-size:var(--fs-klein);
opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.lese__zoomhinweis.zeigen{opacity:1}
@media (max-width:720px){
.lese{padding:16px 14px calc(104px + env(safe-area-inset-bottom,0px))}
/* Einzelseite: Hochformat, die Hoehe ist das Mass */
.lese__buch{max-width:min(94vw,calc((100vh - 190px)*.71))}
.lese__zu{top:12px;right:14px;width:42px;height:42px}
}
/* ---------- Markengeschichte: Kuvert und Brief ----------
Bild der Sektion: ein Brief, der auf einem dunklen Schreibtisch liegt. Das
Kuvert ist ein Gegenstand aus dem Indigo der Marke, der Bogen ist warmes
Papier. Die Formen entstehen ueber clip-path statt ueber Rahmen-Dreiecke,
dadurch skaliert das Kuvert mit einer einzigen Variablen. */
.mg__buehne{display:flex;justify-content:center;margin-top:clamp(30px,4vw,44px);
transition:opacity .4s var(--ease),transform .5s var(--ease)}
.mg.ist-offen .mg__buehne{opacity:0;transform:scale(.94);pointer-events:none;height:0;margin:0;overflow:hidden}
.kuvert{
--kb:min(330px,78vw);
position:relative;width:var(--kb);aspect-ratio:2/1;
background:none;border:0;padding:0;cursor:pointer;
perspective:900px;
transition:transform .3s var(--ease);
}
.kuvert:hover{transform:translateY(-4px)}
.kuvert:focus-visible{outline:2px solid var(--lavender-text);outline-offset:14px;border-radius:4px}
.kuvert__ruecken{position:absolute;inset:0;border-radius:3px;background:var(--indigo-deep);
box-shadow:0 2px 4px rgba(0,0,0,.3),0 22px 46px -18px rgba(0,0,0,.6)}
/* Der Bogen steckt im Kuvert und faehrt beim Oeffnen heraus */
.kuvert__blatt{
position:absolute;left:7%;top:9%;width:86%;height:74%;z-index:2;
background:var(--warm);border-radius:2px;
transition:transform .5s var(--ease) .16s,opacity .3s ease .5s;
}
.mg.ist-offen .kuvert__blatt{transform:translateY(-42%) scale(1.03);opacity:0}
/* Vorderseite mit V-Ausschnitt, darueber die Verschlussklappe */
/* drop-shadow folgt der clip-path-Kontur, dadurch bekommen die Papierkanten
Tiefe, ohne dass ein Rahmen die Diagonale nachzeichnen muesste. */
.kuvert__front{
position:absolute;inset:0;z-index:3;border-radius:0 0 3px 3px;
background:linear-gradient(168deg,color-mix(in oklab,var(--violet) 34%,var(--indigo)) 0%,var(--indigo) 100%);
clip-path:polygon(0 0,50% 44%,100% 0,100% 100%,0 100%);
filter:drop-shadow(0 -1px 0 rgba(255,255,255,.13));
}
.kuvert__klappe{
position:absolute;left:0;top:0;width:100%;height:58%;z-index:4;
background:linear-gradient(180deg,color-mix(in oklab,var(--violet) 72%,var(--indigo-deep)) 0%,color-mix(in oklab,var(--violet) 30%,var(--indigo-deep)) 100%);
clip-path:polygon(0 0,100% 0,50% 100%);
transform-origin:top center;
filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));
transition:transform .48s var(--ease),z-index 0s .24s;
}
.mg.ist-offen .kuvert__klappe{transform:rotateX(180deg);z-index:1}
/* Absender wie auf einem echten Briefumschlag */
.kuvert__marke{
position:absolute;left:0;right:0;top:calc(13% - 5px);z-index:5;display:flex;justify-content:center;
transition:opacity .3s ease;
}
.mg.ist-offen .kuvert__marke{opacity:0}
.kuvert__marke img{width:52%;height:auto;opacity:.82}
.kuvert__hinweis{
position:absolute;left:0;right:0;bottom:11%;z-index:5;
font-family:var(--f-head);font-weight:700;font-size:var(--fs-klein);
letter-spacing:.12em;text-transform:uppercase;color:var(--lavender-text);
transition:color .3s ease,opacity .3s ease;
}
.kuvert:hover .kuvert__hinweis{color:#fff}
.mg.ist-offen .kuvert__hinweis{opacity:0}
/* Der Briefbogen. Er bleibt im Quelltext stehen, damit die Geschichte
auffindbar bleibt, und wird nur zusammengelegt. */
.mg__huelle{max-height:0;overflow:hidden;opacity:0;visibility:hidden;
transition:opacity .5s var(--ease)}
.mg.ist-offen .mg__huelle{max-height:none;overflow:visible;opacity:1;visibility:visible}
/* Der Fokus wandert beim Oeffnen per Skript auf den Bogen, damit Screenreader
und Tastatur dort weiterlesen. Ein Rahmen darum waere hier nur Stoerung. */
.mg__huelle:focus{outline:none}
.mg__brief{
max-width:min(100%,748px);margin-inline:auto;background:var(--warm);color:var(--body);
border-radius:var(--r);padding:clamp(28px,5vw,64px) clamp(22px,5vw,68px) clamp(32px,5vw,56px);
box-shadow:0 2px 6px rgba(0,0,0,.22),0 40px 90px -40px rgba(0,0,0,.7);
}
.mg__kopf{display:flex;justify-content:center;margin-bottom:clamp(26px,3.5vw,38px);
padding-bottom:clamp(20px,3vw,28px);border-bottom:1px solid var(--line)}
.mg__kopf img{width:min(228px,62%);height:auto}
.mg__brief h3{
font-size:clamp(1.25rem,2.8vw,1.75rem);line-height:1.28;color:var(--indigo);
margin:0 0 clamp(22px,3vw,30px);text-wrap:balance;
}
.mg__brief h4{
font-size:clamp(1.0625rem,2.2vw,1.3125rem);line-height:1.32;color:var(--indigo);
margin:clamp(38px,5vw,52px) 0 14px;text-wrap:balance;
}
.mg__brief p{margin:0 0 1.3em;font-size:1.0625rem;line-height:1.78;max-width:64ch}
.mg__brief p:last-child{margin-bottom:0}
.mg__auftakt{font-size:1.1875rem;line-height:1.7;color:var(--indigo)}
/* Der eine Satz, um den sich alles dreht. Kein Randstreifen, sondern Luft
und ein Berry-Zitatzeichen, wie in den Stimmen der Seite. */
.mg__gedanke{margin:clamp(30px,4vw,42px) 0;text-align:center}
.mg__gedanke span{display:block;font-size:var(--fs-klein);color:var(--muted);margin-bottom:12px}
.mg__gedanke b{
display:block;font-family:var(--f-head);font-weight:800;
font-size:clamp(1.1875rem,3vw,1.5rem);line-height:1.35;color:var(--indigo);
letter-spacing:-.01em;
}
.mg__claim{
margin:clamp(40px,5vw,56px) 0 clamp(26px,3vw,34px);text-align:center;
font-family:var(--f-head);font-weight:800;
font-size:clamp(1.375rem,3.8vw,1.9375rem);line-height:1.32;color:var(--indigo);
letter-spacing:-.02em;max-width:none;text-wrap:balance;
}
.mg__claim::after{content:"";display:block;width:56px;height:2px;margin:20px auto 0;background:var(--berry)}
.mg__gruss{margin-top:clamp(34px,4vw,46px)}
/* Unterschrift als Maske: die SVG-Datei liefert nur die Form, die Farbe kommt
von hier. Dadurch laesst sich der Platzhalter spaeter gegen Eves echten
Scan tauschen, ohne dass jemand im SVG die Farbe nachziehen muss. */
.mg__unterschrift{
width:min(206px,56%);aspect-ratio:260/96;margin:10px 0 6px;
background:var(--indigo);
-webkit-mask:url("/eve-unterschrift.svg") left center/contain no-repeat;
mask:url("/eve-unterschrift.svg") left center/contain no-repeat;
}
.mg__rolle{font-size:var(--fs-klein);color:var(--muted)}
.mg__fuss{display:flex;justify-content:center;margin-top:clamp(34px,4vw,44px)}
/* Handy: eine Stufe kleiner und enger gesetzt. Bei rund 315 px Textbreite
stehen sonst nur gut 30 Zeichen je Zeile. Die Regel gehoert hierher, direkt
hinter die Grundwerte, sonst gewinnt die spaeter notierte Grundregel. */
@media (max-width:720px){
.mg__brief p{font-size:1rem;line-height:1.72}
.mg__auftakt{font-size:1.0625rem}
.kuvert{--kb:min(304px,84vw)}
}
/* ---------- Einblick: der Seitenstapel ----------
Rhythmus statt gleichmaessiger Abstaende: Eyebrow und Headline stehen eng
beieinander, danach oeffnet sich der Raum zum Text und noch weiter zum
Knopf. Die grosse Trennung liegt zwischen Textspalte und Stapel. */
.einblick{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.einblick__txt{max-width:34rem}
.einblick__txt h2{margin-bottom:18px}
.einblick__txt p{margin:0 0 clamp(24px,3vw,32px)}
/* Spezifisch genug, um die Absatz-Regel darueber zu schlagen */
.einblick__txt .einblick__mini{margin:14px 0 0;font-size:var(--fs-klein);color:var(--lavender-text)}
.einblick__ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Drei echte Seiten, aufgefaechert. Bei Mauskontakt spreizen sie sich leicht,
das Blatt in der Mitte bleibt ruhig und haelt den Blick. */
.stapel{position:relative;aspect-ratio:1.15;justify-self:center;width:min(100%,540px)}
.stapel__bl{position:absolute;width:52%;border-radius:6px;overflow:hidden;
box-shadow:0 22px 50px -18px rgba(0,0,0,.62);transition:transform .5s var(--ease)}
.stapel__bl img{width:100%;height:auto;display:block}
.stapel__bl:nth-child(1){left:2%;top:12%;transform:rotate(-9deg)}
.stapel__bl:nth-child(2){left:24%;top:4%;transform:rotate(-2deg)}
.stapel__bl:nth-child(3){left:46%;top:14%;transform:rotate(7deg)}
@media (hover:hover){
.stapel:hover .stapel__bl:nth-child(1){transform:rotate(-13deg) translate(-7px,-7px)}
.stapel:hover .stapel__bl:nth-child(3){transform:rotate(11deg) translate(7px,-5px)}
}
/* ---------- Alltag: Zieh-Vergleich Vorher / Nachher ----------
Zwei Ebenen uebereinander, die obere wird per clip-path beschnitten, die
Linie liegt auf demselben Wert. Kopf und Karte laufen auf einer Breite. */
.moment__kopf,.zieh{width:min(100%,880px);margin-inline:auto}
.zieh{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
box-shadow:0 10px 40px rgba(54,50,95,.08);background:var(--warm);touch-action:pan-y}
/* isolation gibt jeder Ebene einen eigenen Stapelkontext. Ohne das steigt die
Marke der Vorher-Ebene darueber und bleibt auch ganz rechts sichtbar. */
.zieh__lage{position:relative;isolation:isolate}
.zieh__lage--nach{position:absolute;inset:0;clip-path:inset(0 0 0 84%);will-change:clip-path;
background:
radial-gradient(circle 320px at 82% 14%,color-mix(in oklab,var(--lavender) 46%,transparent),transparent 68%),
radial-gradient(circle 280px at 18% 92%,color-mix(in oklab,var(--berry) 30%,transparent),transparent 70%),
linear-gradient(158deg,var(--indigo) 0%,var(--indigo-deep) 100%)}
.zieh__marke{position:absolute;top:20px;font-family:var(--f-head);font-weight:700;font-size:var(--fs-klein);
letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:var(--r-pill);z-index:2;
white-space:nowrap;transition:opacity .25s ease}
.zieh__lage--vor .zieh__marke{left:clamp(20px,3vw,38px);background:var(--soft-2);color:var(--violet);border:1px solid var(--line)}
.zieh__lage--nach .zieh__marke{right:clamp(20px,3vw,38px);background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.zieh__inhalt{padding:clamp(64px,7vw,78px) clamp(20px,3vw,38px) clamp(24px,3vw,34px)}
.zzeile{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start;padding:14px 0;min-height:84px}
.zzeile+.zzeile{border-top:1px solid var(--line)}
.zieh__lage--nach .zzeile+.zzeile{border-top-color:rgba(255,255,255,.14)}
.zzeile b{font-family:var(--f-head);font-weight:800;font-size:var(--fs-komp);color:var(--indigo);white-space:nowrap;padding-top:2px}
.zzeile p{margin:0;font-size:1rem;line-height:1.5;color:var(--body)}
.zieh__lage--nach .zzeile b{color:#fff}
.zieh__lage--nach .zzeile p{color:rgba(255,255,255,.86)}
.zieh__linie{position:absolute;top:0;bottom:0;width:2px;background:var(--lavender);z-index:3;pointer-events:none;left:84%}
.zieh__griff{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
background:var(--warm);border:1px solid var(--line);box-shadow:0 4px 16px rgba(54,50,95,.18);
display:flex;align-items:center;justify-content:center;gap:4px}
.zieh__griff i{display:block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}
.zieh__griff i.l{border-right:6px solid var(--violet)}
.zieh__griff i.r{border-left:6px solid var(--violet)}
/* Daumenbreite null: sonst haelt der Browser an beiden Enden eine halbe
Daumenbreite frei und die Linie erreicht die Kartenkante nie. */
.zieh input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;
-webkit-appearance:none;appearance:none;background:none}
.zieh input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:100%}
.zieh input[type=range]::-moz-range-thumb{width:0;height:100%;border:0;background:none}
.zieh input[type=range]::-moz-range-track{background:none}
.js .zieh:not(.beruehrt) .zieh__griff{animation:zpuls 2.4s var(--ease) infinite}
@keyframes zpuls{0%,100%{box-shadow:0 4px 16px rgba(54,50,95,.18)}
50%{box-shadow:0 4px 16px rgba(54,50,95,.18),0 0 0 12px rgba(122,108,156,.14)}}
.zieh__ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.zieh__ctl button{font-family:var(--f-head);font-weight:700;font-size:var(--fs-komp);padding:11px 20px;border-radius:var(--r-pill);
border:1.5px solid var(--line);background:var(--warm);color:var(--indigo);cursor:pointer;
transition:border-color .2s ease,background .2s ease}
.zieh__ctl button:hover{border-color:var(--violet);background:#fff}
.zieh__hinweis{margin:0;font-size:var(--fs-klein);color:var(--muted)}
/* Ohne JavaScript stehen beide Seiten schlicht untereinander */
html:not(.js) .zieh__lage--nach{position:static;clip-path:none;border-top:1px solid var(--line)}
html:not(.js) .zieh__linie,html:not(.js) .zieh input,html:not(.js) .zieh__ctl{display:none}
/* ---------- Stimmen-Wand ----------
Uebernommen von der ZNMT-Salespage: Zettel an einer Wand, jeder mit
Klebestreifen und eigener Neigung. Mobil untereinander, ab 900 Pixel
frei auf der Flaeche verteilt. Klick oeffnet die volle Rueckmeldung. */
.wand-sek{position:relative;overflow:hidden;color:#fff;
background:var(--indigo-deep) url("/stimmen-bg.jpg") center/cover}
.wand-sek::before{content:"";position:absolute;inset:0;z-index:0;
background:linear-gradient(160deg,rgba(26,22,52,.2),rgba(26,22,52,.42))}
.wand-sek .wrap{position:relative;z-index:1}
.wand-sek h2{color:#fff}
.wand-sek .eyebrow{color:var(--lavender-text)}
/* Sektionskopf als angeklebtes Schild */
.wand__schild{position:relative;display:inline-block;width:min(680px,100%);
background:rgba(43,40,80,.55);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:clamp(24px,3vw,32px);
transform:rotate(-2deg);box-shadow:0 18px 50px rgba(0,0,0,.38)}
.wand__schild p{margin:12px 0 0;color:rgba(255,255,255,.84)}
.wand__schild .small{margin-top:10px;color:rgba(255,255,255,.66)}
.wand__band{position:absolute;width:98px;height:auto;pointer-events:none;z-index:2;
filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))}
.wand__band--l{top:-15px;left:-16px;transform:rotate(-48deg)}
.wand__band--r{top:-15px;right:-16px;transform:rotate(48deg)}
/* Mobil zwei wischbare Reihen statt zehn Zettel untereinander. Gestapelt
waere die Wand rund 2.300 Pixel hoch, also fast drei Bildschirme. */
.wand{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;gap:16px;
margin-top:clamp(34px,4vw,48px);padding:22px 4px 8px;
overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
overscroll-behavior-x:contain}
.wand::-webkit-scrollbar{display:none}
.wand .zettel{scroll-snap-align:center}
.wand .zettel:nth-child(2n){transform:rotate(1.6deg)}
.wand .zettel:nth-child(3n){transform:rotate(-2.2deg)}
.wand__wisch{margin:14px 0 0;text-align:center;font-size:var(--fs-klein);color:rgba(255,255,255,.66)}
.zettel{position:relative;width:min(74vw,268px);background:var(--warm);border:0;border-radius:3px;
padding:26px 20px 20px;box-shadow:0 12px 26px rgba(0,0,0,.34);cursor:pointer;text-align:left;
transform:rotate(-1.5deg);transition:transform .22s var(--ease),box-shadow .22s var(--ease);font:inherit}
.zettel:hover,.zettel:focus-visible{transform:rotate(0deg) scale(1.04);box-shadow:0 22px 44px rgba(0,0,0,.45);z-index:5}
.zettel__band{position:absolute;top:0;left:50%;width:112px;height:auto;
transform:translate(-50%,-50%) rotate(-3deg);pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.22))}
.zettel__foto{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;object-fit:cover;
border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.22);z-index:1}
.zettel .stars{margin-bottom:10px}
.zettel__q{font-family:var(--f-head);font-weight:700;color:var(--indigo);font-size:1.0625rem;line-height:1.35;
margin:0;padding-right:38px;letter-spacing:-.01em}
.zettel__wer{color:var(--muted);font-size:var(--fs-klein);margin:12px 0 0}
.zettel--danke{padding:14px 14px 12px}
.zettel--danke img.zettel__bild{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block;margin-bottom:9px}
.zettel--danke .zettel__wer{margin:0;text-align:center;font-family:var(--f-head);font-weight:700;color:var(--violet);
font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}
@media (min-width:900px){
.wand{display:block;position:relative;min-height:880px;max-width:1060px;margin-inline:auto;
overflow:visible;padding:0}
.wand__wisch{display:none}
.zettel{position:absolute;width:212px;max-width:none;margin:0}
.wand .zettel:nth-child(2n),.wand .zettel:nth-child(3n){transform:none}
.zettel:nth-child(1){left:0;top:51px;transform:rotate(-5deg)}
.zettel:nth-child(2){left:80%;top:329px;transform:rotate(4deg)}
.zettel:nth-child(3){left:53.9%;top:48px;transform:rotate(-3deg)}
.zettel:nth-child(4){left:25.4%;top:319px;transform:rotate(5deg)}
.zettel:nth-child(5){left:58.9%;top:620px;transform:rotate(-4deg)}
.zettel:nth-child(6){left:27.1%;top:50px;transform:rotate(4deg)}
.zettel:nth-child(7){left:80%;top:8px;transform:rotate(-4deg)}
.zettel:nth-child(8){left:51.7%;top:349px;transform:rotate(3deg)}
.zettel:nth-child(9){left:0;top:377px;transform:rotate(-5deg)}
.zettel:nth-child(10){left:26%;top:618px;transform:rotate(-4deg)}
.zettel:nth-child(2n) .zettel__band{transform:translate(-46%,-50%) rotate(6deg);width:96px}
.zettel:nth-child(3n) .zettel__band{transform:translate(-54%,-50%) rotate(-8deg);width:104px}
.zettel:hover,.zettel:focus-visible{transform:rotate(0deg) scale(1.06);box-shadow:0 26px 50px rgba(0,0,0,.5);z-index:6}
}
/* Stimme im Grossen */
.stimme{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
padding:20px;background:rgba(26,22,52,.68)}
.stimme.is-offen{display:flex}
.stimme__karte{position:relative;background:var(--warm);border-radius:var(--r);width:min(100%,560px);
max-height:calc(100dvh - 40px);overflow-y:auto;padding:clamp(26px,3.4vw,38px);
box-shadow:0 30px 70px rgba(0,0,0,.5)}
.stimme__zu{position:absolute;top:12px;right:12px;width:38px;height:38px;aspect-ratio:1;box-sizing:border-box;padding:0;
display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);
background:var(--warm);cursor:pointer;transition:background .2s ease}
.stimme__zu:hover{background:var(--soft-2)}
.stimme__zu svg{width:17px;height:17px;stroke:var(--indigo)}
.stimme__kopf{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-right:34px}
.stimme__kopf img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px}
.stimme__name{font-family:var(--f-head);font-weight:800;color:var(--indigo);display:block;line-height:1.25}
.stimme__rolle{font-size:var(--fs-klein);color:var(--muted)}
.stimme__text{margin:0;font-size:1rem;line-height:1.7}
.stimme__bild{width:100%;height:auto;border-radius:var(--r-sm);display:block}
.stimme__bu{margin:14px 0 0;text-align:center;font-size:var(--fs-klein);color:var(--muted)}
/* ---------- Team ---------- */
.person{text-align:center}
.person img{
width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);margin-bottom:14px;
filter:saturate(.94);transition:filter .3s var(--ease),transform .3s var(--ease);
}
.person:hover img{filter:saturate(1.04);transform:translateY(-3px)}
.person h3{margin-bottom:2px;font-size:var(--fs-komp)}
.person h3 .caps{text-transform:uppercase;letter-spacing:.01em}
.person .small{font-size:var(--fs-klein)}
/* ---------- Team-Karussell ----------
Ohne JavaScript bleibt das gewohnte Raster stehen. Mit JavaScript wird
daraus eine Buehne: die aktive Person vorn, die Nachbarn zurueckgesetzt. */
.team__buehne{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(16px,2vw,24px)}
.team__karte{margin:0}
.team__karte figcaption{display:block}
.team__pfeil,.team__info,.team__punkte{display:none}
.js .team{position:relative}
/* overflow-x:clip statt hidden: schneidet die wartenden Karten seitlich ab,
ohne einen Scrollbereich zu erzeugen, und laesst oben und unten Platz fuer
die vergroesserte Mittelkarte samt Schatten. */
.js .team__buehne{display:block;position:relative;height:var(--teamh,420px);overflow-x:clip}
.js .team__karte{
position:absolute;left:50%;top:0;width:var(--teamw,250px);margin:0;
transform:translateX(-50%);cursor:pointer;will-change:transform,opacity;
transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease);
}
.js .team__karte img{
aspect-ratio:3/4;margin:0;box-shadow:0 10px 34px rgba(54,50,95,.14);
transition:box-shadow .55s var(--ease);
}
.js .team__karte:hover img{transform:none;filter:saturate(.94)}
/* Nachbarn treten zurueck: kleiner, blasser, entsaettigt. Kein Graustich,
der laesst warme Portraets kalt wirken. */
.js .team__karte[data-lage="fern"]{opacity:0;pointer-events:none}
.js .team__karte[data-lage="seite"]{filter:saturate(.55) brightness(.99)}
.js .team__karte[data-lage="rand"]{filter:saturate(.42) brightness(.98)}
.js .team__karte[data-lage="mitte"]{filter:saturate(1);z-index:10;cursor:default}
.js .team__karte[data-lage="mitte"] img{box-shadow:0 22px 60px rgba(54,50,95,.22)}
.js .team__karte figcaption{display:none}
.js .team__pfeil{
display:grid;place-items:center;position:absolute;top:var(--teampf,190px);z-index:20;
width:48px;height:48px;aspect-ratio:1;padding:0;border-radius:50%;cursor:pointer;
background:var(--warm);border:1px solid var(--line);box-shadow:0 2px 12px rgba(54,50,95,.08);
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.js .team__pfeil:hover{transform:scale(1.08);border-color:var(--violet);box-shadow:0 6px 20px rgba(54,50,95,.14)}
.js .team__pfeil svg{width:20px;height:20px;stroke:var(--indigo)}
.js .team__pfeil--zurueck{left:0}
.js .team__pfeil--vor{right:0}
/* Die Hub-Beschreibungen sind laenger als auf der Startseite, deshalb mehr
Grundhoehe und eine Lesebreite: sonst springt der Block beim Wechsel. */
.js .team__info{display:block;text-align:center;margin-top:22px;min-height:96px;
max-width:640px;margin-inline:auto}
.js .team__info h3{margin:0 0 3px;font-size:1.0625rem;text-wrap:balance}
.js .team__info .caps{text-transform:uppercase;letter-spacing:.01em}
.js .team__info p{margin:0;font-size:var(--fs-klein);color:var(--muted)}
.js .team__info.wechselt{animation:team-ein .4s var(--ease)}
@keyframes team-ein{from{opacity:0;transform:translateY(7px)}}
/* Abstand 22 px wie bei den Ausbildungs-Punkten: die unsichtbare
Trefferflaeche darf nur bis zur halben Luecke reichen, sonst faengt
der Nachbarpunkt den Tipper ab. */
.js .team__punkte{display:flex;justify-content:center;gap:22px;margin-top:18px}
.js .team__punkte button{
width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:color-mix(in oklab,var(--lavender) 40%,transparent);
transition:transform .3s var(--ease),background .3s var(--ease);
position:relative;
}
/* Der Punkt bleibt optisch 9 px klein, treffbar wird er 31 x 44. */
.js .team__punkte button::after{content:"";position:absolute;inset:-18px -11px}
.js .team__punkte button[aria-current="true"]{background:var(--violet);transform:scale(1.3)}
.js .team:focus-visible{outline:2px solid var(--violet);outline-offset:12px;border-radius:var(--r)}
/* ---------- Schritte ---------- */
/* Die Bahn fuellt sich mit dem Lesefortschritt, die Schritte schalten sich
frei, sobald die Fuellung sie erreicht. Angefangenes will abgeschlossen
werden, der Blick zieht dadurch bis zum letzten Schritt. */
.steps{position:relative;padding-left:56px}
.steps__bahn{position:absolute;left:19px;top:18px;bottom:18px;width:2px;
background:color-mix(in oklab,var(--lavender) 26%,transparent)}
.steps__fuell{position:absolute;left:0;top:0;width:100%;height:0;background:var(--berry)}
.step{position:relative;padding:16px 0}
.step__n{
position:absolute;left:-56px;top:15px;width:40px;height:40px;border-radius:50%;
background:var(--warm);border:1.5px solid var(--line-strong);display:grid;place-items:center;
font-family:var(--f-head);font-weight:800;font-size:var(--fs-komp);color:var(--indigo);
transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.step p{margin:0;font-size:var(--fs-komp)}
.js .step.ist-da .step__n{background:var(--berry);border-color:var(--berry);color:#fff;transform:scale(1.06)}
.js .step h3,.js .step p{transition:opacity .4s var(--ease)}
.js .step:not(.ist-da) h3,.js .step:not(.ist-da) p{opacity:.5}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
font-family:var(--f-head);font-weight:700;font-size:1.0625rem;color:var(--indigo);
line-height:1.35;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
border-right:2px solid var(--berry);border-bottom:2px solid var(--berry);
transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{overflow:hidden}
.faq details .faq__a p{padding:0 8px 24px 0;margin:0;font-size:var(--fs-komp);max-width:60ch}
.faq details[open] .faq__a{animation:slide .4s var(--ease)}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* ---------- Abschluss ---------- */
/* ---------- Finale ----------
Startet als Karte und oeffnet sich beim Scrollen auf die volle Breite.
Der Schnitt laeuft ueber clip-path statt ueber width: kein Umbruch im
Layout, der Text bleibt ruhig stehen, waehrend die Flaeche waechst. */
.finale{
--p:0;
background:
radial-gradient(90% 70% at 22% 12%, rgba(122,108,156,.34) 0%, transparent 56%),
linear-gradient(160deg, var(--indigo) 0%, var(--indigo-deep) 100%);
color:var(--on-dark-soft);
}
/* Auf Dunkel brauchen Kopfzeile und Headline helle Farben. Ohne das erbten
sie Indigo aus der Grundregel und standen dunkel auf dunkel. */
.finale h2{color:#fff}
.finale .eyebrow{color:var(--lavender-text)}
.js .finale{
clip-path:inset(
calc(var(--p) * 34px)
calc(var(--p) * 5.2%)
round calc(var(--p) * 26px)
);
will-change:clip-path;
}
@media (prefers-reduced-motion:reduce){ .js .finale{clip-path:none} }
/* ---------- Belegzeile im Finale ----------
Statt vier gleich aussehender Text-Pillen: links die zwei Zahlen, rechts
die echten Siegel auf hellen Plaketten. Die bunten Logos brauchen einen
hellen Grund, auf dem Indigo waeren sie kaum lesbar. */
/* Bewusst zweizeilig: die Textspalte ist 620 px breit, nebeneinander waeren
Zahlen und Siegel ohnehin umgebrochen und ein Trennstrich stuende quer. */
.fbeleg{display:flex;flex-direction:column;align-items:center;
gap:clamp(22px,2.6vw,30px);margin-top:clamp(30px,3.6vw,42px)}
.fbeleg__zahlen{display:flex;flex-wrap:wrap;gap:clamp(24px,3.4vw,44px);justify-content:center}
.fbeleg__z{display:flex;flex-direction:column;align-items:center;gap:2px;
font-size:var(--fs-klein);color:var(--lavender-text);line-height:1.35;text-align:center}
.fbeleg__z b{display:flex;align-items:center;gap:5px;font-family:var(--f-head);font-weight:800;
font-size:1.5rem;color:#fff;letter-spacing:-.02em;line-height:1}
.fbeleg__z svg{width:17px;height:17px;fill:var(--gold)}
.fbeleg__siegel{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:stretch}
/* Gleiche Mindestbreite, sonst stehen drei verschieden breite Plaketten
nebeneinander und die Reihe wirkt zufaellig. */
.fbeleg__s{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
min-width:118px;min-height:74px;
background:rgba(255,255,255,.94);border-radius:var(--r-sm);padding:11px 14px;
box-shadow:0 6px 20px rgba(0,0,0,.24);
transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
/* Ö-Cert ist eine breite Wortmarke, S-QS und ZFU sind runde Siegel. Damit
alle drei optisch gleich gewichtet wirken, brauchen die runden mehr Hoehe. */
.fbeleg__s img{height:30px;width:auto;object-fit:contain;display:block}
.fbeleg__s--sqs img{height:46px}
.fbeleg__s--zfu img{height:48px}
.fbeleg__s:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.32)}
/* Die Plaketten kommen nacheinander herein, sobald die Zeile im Bild ist */
.js .fbeleg .fbeleg__s,.js .fbeleg .fbeleg__z{
opacity:0;transform:translateY(12px);
transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .fbeleg.is-in .fbeleg__s,.js .fbeleg.is-in .fbeleg__z{opacity:1;transform:none}
.js .fbeleg.is-in .fbeleg__z:nth-child(1){transition-delay:.02s}
.js .fbeleg.is-in .fbeleg__z:nth-child(2){transition-delay:.1s}
.js .fbeleg.is-in .fbeleg__s:nth-child(1){transition-delay:.2s}
.js .fbeleg.is-in .fbeleg__s:nth-child(2){transition-delay:.29s}
.js .fbeleg.is-in .fbeleg__s:nth-child(3){transition-delay:.38s}
@media (max-width:720px){
.fbeleg{gap:22px}
.fbeleg__s{padding:9px 12px;min-width:102px;min-height:66px}
.fbeleg__s img{height:25px}
.fbeleg__s--sqs img{height:40px}
.fbeleg__s--zfu img{height:42px}
}
/* ---------- Footer ---------- */
.ft{background:var(--indigo-deep);color:var(--on-dark-mute);padding-block:clamp(56px,6vw,80px) 30px;font-size:var(--fs-komp)}
.ft h3{color:#fff;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;font-weight:700}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.ft ul{list-style:none;margin:0;padding:0}
.ft li+li{margin-top:9px}
.ft a{text-decoration:none;color:var(--on-dark-mute);transition:color .2s ease}
.ft a:hover{color:#fff}
.ft__legal{
margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.11);
display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--fs-klein);
}
/* Form der Hero-Formatzeile, aber als Milchglas: halbdurchlaessig, damit der
Indigo-Grund durchschimmert. Nicht weiter herunter als etwa 50 Prozent,
sonst faellt die dunkle Oe-Cert-Wortmarke unter den noetigen Kontrast. */
.ft__seals{
display:inline-flex;flex-wrap:wrap;margin-top:20px;width:max-content;max-width:100%;
border-radius:var(--r-pill);overflow:hidden;
background:rgba(255,255,255,.52);
border:1px solid rgba(255,255,255,.42);
backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
box-shadow:0 8px 30px rgba(12,10,34,.3),inset 0 1px 0 rgba(255,255,255,.4);
}
.ft__seals span{position:relative;display:inline-flex;align-items:center;justify-content:center;
padding:11px 20px;transition:background .25s ease}
.ft__seals span:hover{background:rgba(255,255,255,.22)}
.ft__seals span+span::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:1px;height:26px;background:rgba(54,50,95,.2);
}
.ft__seals img{height:22px;width:auto;object-fit:contain;display:block}
.ft__seals .ft__seal--rund img{height:34px}
/* Social-Icons (Mangel aus der Abnahme, Blendi 31.07.): Profile aus der
Fusszeile der alten Hauptdomain uebernommen. Runde Flaeche mit fester
Groesse und place-items — dieselbe Bauweise wie der Menueknopf, damit
das Symbol wirklich mittig sitzt und der Kreis kein Ei wird. */
/* Zwei Klassen tief, sonst gewinnt .ft ul (list-style/margin/padding
fuer die drei Link-Spalten) und der Abstand faellt auf 0 —
gemessen 31.07., die Icons klebten an der Siegelleiste.
display:contents auf dem li ist der eigentliche Punkt: Als eigene
Kaesten brachten die li eine Textzeile mit, und weil sich Flex-Kinder
an der Schriftlinie ausrichten, sass das erste Symbol neun Pixel
hoeher als die anderen zwei (Blendi 31.07.: "bitte allignmen").
Mit display:contents faellt der li-Kasten weg, die drei Links werden
selbst zu den Flex-Kindern, und alle drei stehen exakt gleich hoch.
Gemessen danach: Versatz 0, Leiste 42 statt 51 Pixel hoch.
Die role-Angaben im Markup sind dazu noetig, weil aeltere Safari-
Versionen bei display:contents die Listen-Bedeutung verwerfen. */
.ft .ft__social{list-style:none;display:flex;gap:10px;margin:22px 0 0;padding:0}
.ft__social li{display:contents}
.ft__social a{display:grid;place-items:center;width:42px;height:42px;box-sizing:border-box;
border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#fff;
transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.ft__social a:hover{background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.45);transform:translateY(-2px)}
.ft__social svg{width:19px;height:19px;display:block}
.ft__logo{width:236px;height:auto;margin-bottom:18px}
/* ---------- BRAIN-Scroll-Buehne ---------- */
/* Komplett in Code nachgebaute Choreografie des Seedance-Videos, dadurch auf
jeder Bildschirmgroesse scharf: Buchstaben falten sich horizontal auf,
das Papier-Gehirn setzt sich aufs I, der Swoosch ordnet alles in die linke
Saeule, dann erscheinen die fuenf Texte. Alles nur transform und opacity. */
.strecke{position:relative;height:400vh;background:var(--soft)}
.buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.wortlage{position:absolute;inset:0;perspective:1000px}
.bst{position:absolute;left:0;top:0;line-height:1;transform-origin:0 0;will-change:transform}
.bstk{display:inline-block;font-style:normal;font-family:var(--f-head);font-weight:800;letter-spacing:.01em;line-height:1;
transform-origin:50% 100%;will-change:transform,opacity;
background:linear-gradient(180deg,#8577AB 0%,#584B7B 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(2px 3px 4px rgba(54,50,95,.22)) drop-shadow(-1px -1px 0 rgba(255,255,255,.4))}
.hirnflug{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity;opacity:0;
filter:drop-shadow(3px 5px 7px rgba(54,50,95,.22))}
.texte{position:absolute;inset:0;pointer-events:none}
.tzeile{position:absolute;left:0;top:0;width:min(56vw,600px);opacity:0;will-change:transform,opacity;transform:translate(24px,-50%)}
.tzeile h3{font-family:var(--f-head);font-weight:800;font-size:clamp(1rem,1.9vh,1.375rem);color:var(--heading);margin:0 0 4px;letter-spacing:-.01em}
.tzeile p{margin:0;font-size:clamp(.8125rem,1.55vh,1rem);line-height:1.45;color:var(--body)}
/* Ruhemodus-Ersatz: klassische Liste, standardmaessig aus */
.ruhe-liste{display:none;padding:56px 0;background:var(--soft)}
.ruhe-liste ul{list-style:none;margin:0;padding:0}
.ruhe-liste li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line);max-width:640px}
.ruhe-liste i{font-style:normal;font-family:var(--f-head);font-weight:800;font-size:1.5rem;color:var(--violet)}
.ruhe-liste h3{font-family:var(--f-head);font-size:1.0625rem;margin:0 0 4px;color:var(--heading)}
.ruhe-liste p{margin:0;font-size:var(--fs-komp);line-height:1.55}
/* Buchstaben-Kaskade (Labor 12) fuer die fuenf E-Woerter der Schlusszeile:
jedes Wort baut sich Buchstabe fuer Buchstabe auf, die Woerter nacheinander.
Verzoegerungen setzt das Skript je Buchstabe. */
.ewort{white-space:nowrap;font-family:var(--f-head);font-weight:700;color:var(--heading);
font-size:clamp(1.0625rem,1.9vw,1.375rem);letter-spacing:-.005em;line-height:1.35}
#ekaskade{max-width:none}
/* Die Botschaft traegt die Zeile, die fuenf E-Woerter begleiten sie */
#ekaskade strong{display:block;margin-bottom:12px;font-family:var(--f-head);font-weight:800;
font-size:clamp(1.375rem,2.7vw,1.9375rem);letter-spacing:-.015em;line-height:1.22;text-wrap:balance}
.ewoerter{display:inline-flex;flex-wrap:wrap;justify-content:center;column-gap:.55em;row-gap:.1em}
.js .ewort .eb{display:inline-block;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rev.is-in .eb{opacity:1;transform:none}
/* ---------- Ausbildungs-Karussell ---------- */
/* Nachbau des Live-Karussells der Hauptdomain, uebersetzt ins Seitendesign:
aktive Karte mittig mit Bild links, Nachbarn geblurrt dahinter, Pfeile
und Punkte. Wischen und Pfeiltasten steuert das Skript. */
/* Zwischentitel: trennt den Einstieg (Hero-Karte) von den weiteren Wegen.
Oben viel Luft, unten wenig, damit er zum Karussell gehoert und nicht
zwischen den Bloecken schwebt. */
.courses__titel{
margin:clamp(46px,5vw,68px) 0 clamp(18px,2.2vw,26px);
font-size:clamp(1.1875rem,2.3vw,1.4375rem);
}
.spec__stage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:360px auto}
/* clip haelt die angeschnittenen Nachbarfolien in der Bahn, ohne der Seite
einen waagrechten Scrollweg zu geben. Vertikal bleibt Platz fuer Schatten. */
.spec__carousel{grid-column:1/-1;grid-row:1;position:relative;height:360px;overflow-x:clip;overflow-clip-margin:24px}
.spec__slide{position:absolute;top:0;left:50%;width:100%;max-width:960px;height:100%;
display:flex;background:var(--warm);border-radius:var(--r);overflow:hidden;
box-shadow:0 4px 24px rgba(54,50,95,.08);border:1px solid var(--line);
transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease);
pointer-events:none;opacity:0;filter:blur(6px);transform:translate(-50%,0) scale(.82);z-index:0}
.spec__slide--active{opacity:1;filter:blur(0);transform:translate(-50%,0) scale(1);z-index:3;
pointer-events:auto;box-shadow:0 12px 48px rgba(54,50,95,.13)}
.spec__slide--prev{opacity:.35;filter:blur(4px);transform:translate(calc(-50% - 240px),0) scale(.82);z-index:1}
.spec__slide--next{opacity:.35;filter:blur(4px);transform:translate(calc(-50% + 240px),0) scale(.82);z-index:1}
.spec__slide-image{width:42%;min-width:42%;height:100%;background-size:cover;background-position:center;flex-shrink:0}
/* Geraete-Mockup (Online-Selbststudium): komplett zeigen statt anschneiden;
der Bildrand ist exakt --warm und verschmilzt so mit der Karte */
.spec__slide-image--geraete{background-size:contain;background-repeat:no-repeat;background-color:var(--warm)}
.spec__slide-content{flex:1;padding:32px 38px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0}
.spec__slide-title{font-size:clamp(1.1875rem,1.8vw,1.4375rem);margin:10px 0 4px}
.spec__slide-desc{font-size:var(--fs-komp);line-height:1.6;color:var(--body);margin:0 0 18px}
.spec__arrow{grid-row:1;align-self:center;z-index:10;width:48px;height:48px;border-radius:50%;
background:var(--warm);border:1px solid var(--line);box-shadow:0 2px 12px rgba(54,50,95,.08);
display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.spec__arrow:hover{background:var(--soft-2);box-shadow:0 4px 20px rgba(54,50,95,.12);transform:scale(1.06)}
.spec__arrow svg{width:18px;height:18px;color:var(--indigo)}
/* Der Ueberstand bleibt unter dem Seitenrand von 20px, sonst bekommt die
Seite bei mittleren Fensterbreiten einen waagrechten Scrollweg. */
.spec__arrow--prev{grid-column:1;justify-self:start;margin-left:-16px}
.spec__arrow--next{grid-column:2;justify-self:end;margin-right:-16px}
.spec__dots{grid-column:1/-1;grid-row:2;justify-self:center;display:flex;align-items:center;gap:22px;margin-top:28px}
.spec__dot{width:10px;height:10px;border-radius:50%;background:color-mix(in oklab,var(--indigo) 12%,transparent);
border:0;padding:0;cursor:pointer;transition:background .3s ease,transform .3s ease}
/* Der Punkt bleibt optisch 10 px klein, treffbar wird er 32 x 44. Die Flaeche
waechst horizontal nur bis zur halben Luecke, sonst faengt der Nachbarpunkt
den Klick ab. Deshalb steht der Abstand oben auf 22 statt 10 px. */
.spec__dot{position:relative}
.spec__dot::after{content:"";position:absolute;inset:-17px -11px}
.spec__dot:hover{background:color-mix(in oklab,var(--lavender) 40%,transparent)}
.spec__dot--active{background:var(--violet);transform:scale(1.2)}
/* ---------- Scroll-Reveal + Kaskade ---------- */
.js .rev{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rev.is-in{opacity:1;transform:none}
.js .casc>*{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .casc.is-in>*{opacity:1;transform:none}
.casc.is-in>*:nth-child(1){transition-delay:.02s}
.casc.is-in>*:nth-child(2){transition-delay:.09s}
.casc.is-in>*:nth-child(3){transition-delay:.16s}
.casc.is-in>*:nth-child(4){transition-delay:.23s}
.casc.is-in>*:nth-child(5){transition-delay:.3s}
.casc.is-in>*:nth-child(6){transition-delay:.37s}
.casc.is-in>*:nth-child(7){transition-delay:.44s}
.casc.is-in>*:nth-child(8){transition-delay:.51s}
/* Fortschritts-Faden oben */
.progress{position:fixed;top:0;left:0;height:2px;z-index:100;width:100%;
/* scaleX statt width: width loest bei jedem Scroll-Ereignis Layout aus,
transform laeuft auf der GPU. Auf dem Handy der groesste Unterschied. */
transform:scaleX(0);transform-origin:0 0;
background:linear-gradient(90deg,var(--violet),var(--berry));transition:transform .1s linear}
/* ---------- Platzhalter ---------- */
.ph{
border:1.5px dashed rgba(122,108,156,.4);border-radius:var(--r);
background:repeating-linear-gradient(135deg,var(--soft) 0 11px,var(--soft-2) 11px 22px);
display:grid;place-items:center;text-align:center;padding:24px;
color:var(--muted);font-size:var(--fs-klein);min-height:150px;
}
.ph--dark{border-color:rgba(255,255,255,.22);color:var(--on-dark-mute);
background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 11px,rgba(255,255,255,.06) 11px 22px)}
/* =====================================================================
RESPONSIVE
===================================================================== */
@media (max-width:1040px){
.trust__in{flex-direction:column;align-items:stretch;gap:26px;padding-block:30px}
/* Gestapelt zaehlt nur das Siegel selbst: Beschriftungen brauchen mehr Platz
als die Spalte hergibt und stehen auf den Detailseiten. Logos in einer Reihe. */
.trust__gruppe{--siegel-abstand:clamp(22px,6vw,44px);justify-content:center;flex-wrap:nowrap;gap:var(--siegel-abstand)}
/* Optischer Ausgleich: die Oe-Cert-Wortmarke ist luftig gesetzt, ihr Kasten
endet aber hart am T. Gleicher Kantenabstand wirkt dadurch groesser als
zwischen den kompakten runden Siegeln. */
.siegel:first-child{margin-right:calc(var(--siegel-abstand)*-.4)}
.siegel span{display:none}
.siegel{max-width:none}
/* Eine Sammelzeile ersetzt die drei Einzeltexte */
.siegel__zeile{display:block;text-align:center;margin-top:-14px;
font-size:var(--fs-klein);color:var(--muted);letter-spacing:.04em}
.trust__trenner{
width:100%;height:1px;min-height:0;flex:0 0 1px;align-self:auto;
background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent);
}
.bewertung,.gruenderin{justify-content:center}
.gruenderin b{white-space:normal}
.courses{grid-template-columns:repeat(2,1fr)}
.course--hero{grid-column:span 2;grid-template-columns:1fr}
/* Gestapelt liegt das Gehirn wie bei den Karussell-Karten oben */
.hero-kurs__bild{order:-1;min-height:200px;border-radius:calc(var(--r) - 1.5px) calc(var(--r) - 1.5px) 0 0}
.ft__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.mk-3{grid-column:span 6}
.mk-2{grid-column:span 3}
.mkachel:nth-child(5).mk-2{grid-column:span 6}
.mk-breit{flex-wrap:wrap;gap:6px}
.kreislauf{flex-direction:column;gap:28px}
.rad{--radb:min(72vw,270px)}
.karte{flex:none;width:min(100%,420px)}
.nav{display:none}
.burger{display:block}
.hdr__in{min-height:66px}
}
@media (max-width:720px){
body{font-size:16px}
/* Fliesstext ist mobil 16px. Komponententext lag ebenfalls bei 15 und war damit
nicht unterscheidbar. Eine Stufe tiefer stellt den Unterschied wieder her. */
:root{--fs-komp:.875rem} /* 14px */
/* Typo-Skala fuers Handy. Die Desktop-Werte (36/28/20 als Untergrenze) waren
auf kleinen Schirmen zu gross: die Hero-Headline lief ueber sieben Zeilen.
Die drei Stufen schrumpfen hier gemeinsam mit festem Verhaeltnis 1,25
(8vw / 6,4vw / 5,12vw), damit die Hierarchie in jeder Breite gleich bleibt.
Ab rund 450px sind die Desktop-Werte wieder erreicht. */
:root{
--fs-h1:clamp(1.75rem,8vw,2.25rem); /* 28 bis 36 */
--fs-h2:clamp(1.4375rem,6.4vw,1.75rem); /* 23 bis 28 */
--fs-h3:clamp(1.1875rem,5.12vw,1.25rem); /* 19 bis 20 */
}
/* Schauzahlen: standen mit 36 und 32px ueber der Headline und damit an der
Spitze der Seite. Auf dem Handy zwischen h1 und h2 einsortieren. */
.bewertung__zahl,.zahl__n{font-size:clamp(1.5rem,6.9vw,1.75rem)} /* 24 bis 28 */
/* 216 px lassen neben dem Burger noch rund 80 px Luft */
.logo__stage{width:216px}
.wrap{width:min(100% - 32px, var(--max))}
.hdr .wrap{width:min(100% - 32px, var(--max-kopf))}
/* Metatexte am Handy 14 statt 13 Pixel, Lesbarkeits-Untergrenze
(Polish-Runde 29.07., gilt auf allen drei Seiten gleich). */
:root{--fs-klein:.875rem}
/* Footer-Links bekommen 44px-Tippflaechen, optisch nur etwas mehr Luft. */
.ft a{display:inline-block;padding-block:10px;margin-block:-6px}
.tuer{height:auto;min-height:348px}
.tuer__hinweis .desk{display:none}
.tuer__hinweis .mob{display:inline}
.courses{grid-template-columns:1fr}
.course--hero{grid-column:span 1}
/* Einblick gestapelt: der Seitenstapel kommt nach oben, wie bei den
Kurskarten. Er traegt die Aussage, der Text erklaert sie nur. */
.einblick{grid-template-columns:1fr;gap:clamp(34px,7vw,46px)}
/* etwas schmaler als der Textblock: die gekippten Blaetter sollen nicht
an den Bildschirmkanten kleben */
.stapel{order:-1;aspect-ratio:1.25;width:min(92%,420px)}
/* Zieh-Vergleich: Beschriftung ueber den Satz, sonst bleibt fuer den Text
kaum Breite. Hoehere Zeilen, weil beide Ebenen gleich hoch sein muessen. */
.zzeile{grid-template-columns:1fr;gap:5px;min-height:132px;padding:12px 0}
.zzeile b{padding-top:0}
.zzeile p{font-size:var(--fs-komp)}
.zieh__inhalt{padding:60px 18px 22px}
.zieh__marke{font-size:.6875rem;padding:6px 11px}
.zieh__lage--vor .zieh__marke{left:18px}
.zieh__lage--nach .zieh__marke{right:18px}
/* Der Scroll-Pfeil ist auf dem Handy aus, also braucht es unten keinen Extraplatz.
Der Abstand zur Unterkante kommt allein aus dem Takt der .hero .wrap. */
.hero{min-height:min(84svh,680px);padding-block:clamp(56px,8vw,80px) 0}
.hero .wrap{padding-bottom:var(--takt)}
.hero__trust{margin-top:0;padding-top:0;gap:14px 22px}
.hero__trust li{font-size:var(--fs-klein)}
/* Hochkant schneidet cover seitlich stark. Eve steht bei 22 bis 42 Prozent
der Bildbreite. 29 Prozent entsprechen rund 50 px Bildversatz nach links
gegenueber 26 Prozent und holen ihre Geste ins Bild. */
.hero__bg video,.hero__bg img{object-position:29% 50%}
.announce{padding:10px 42px;font-size:var(--fs-klein)}
br.mob{display:inline}
.announce__close{right:9px}
.hero__scroll{display:none}
.hero__formats{flex-direction:row;flex-wrap:nowrap;align-self:stretch;width:auto;border-radius:var(--r)}
.fmt{flex:1 1 0;min-width:0;flex-direction:column;gap:7px;padding:13px 4px;
font-size:var(--fs-klein);line-height:1.25;text-align:center;white-space:nowrap}
.fmt+.fmt::before{left:0;right:auto;top:50%;bottom:auto;width:1px;height:30px;transform:translateY(-50%)}
.fmt .desk{display:none}
.fmt .mob{display:inline}
.cta-row .btn{width:100%}
/* Karussell mobil: eine Karte, Bild oben, Pfeile neben den Punkten */
.spec__stage{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:16px}
.spec__carousel{width:100%;height:auto;order:1;margin-bottom:22px;display:grid}
.spec__slide{grid-row:1;grid-column:1;position:relative;left:0;flex-direction:column;transform:none;
opacity:0;visibility:hidden;filter:none;height:auto;pointer-events:none}
.spec__slide--active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.spec__slide--prev,.spec__slide--next{opacity:0;visibility:hidden;transform:none}
.spec__slide-image{width:100%;min-width:100%;height:190px}
.spec__slide-content{padding:22px 20px 26px}
.spec__arrow{position:static;width:44px;height:44px;margin:0;flex-shrink:0}
.spec__arrow--prev{order:2}
.spec__arrow--next{order:4}
.spec__dots{order:3;margin:0}
/* Alleinstehende Sektions-Buttons stehen mobil mittig statt am linken Rand */
.rev:has(>.btn:only-child){text-align:center}
/* Motion auf dem Handy: Faktor 0,8 auf alle Einblendezeiten, kuerzere Wege.
Die Kaskaden-Verzoegerung faellt flach: mobil stapeln die Raster einspaltig,
die Karten kommen also ohnehin nacheinander in den sichtbaren Bereich. */
.js .rev{transform:translateY(24px);transition-duration:.55s,.55s}
.js .casc>*{transition-duration:.5s,.5s}
.js .casc.is-in>*{transition-delay:.04s}
.js .beat{animation-duration:.65s}
.js .beat-1{animation-delay:.04s}.js .beat-2{animation-delay:.12s}.js .beat-3{animation-delay:.2s}
.js .beat-4{animation-delay:.28s}.js .beat-5{animation-delay:.37s}
.tuer__innen{transition-duration:.55s}
/* Hero-Knoepfe: Schrift und Innenabstand schrumpfen mit, damit die Beschriftung
bis hinunter zu 292px in einer Zeile bleibt. */
.hero__cta .btn{font-size:clamp(.8125rem,4vw,.9375rem);padding-inline:clamp(14px,5vw,26px)}
.steps{padding-left:48px}
.steps::before{left:16px}
.step__n{left:-48px;width:34px;height:34px;font-size:var(--fs-klein)}
.ft__grid{grid-template-columns:1fr;gap:32px}
.faq summary{font-size:1rem;padding-right:36px}
.rv{flex:0 0 82vw}
}
/* Unter 400px passt die lange Beschriftung nicht in eine Zeile,
ohne die Schrift unlesbar klein zu machen. Darum die Kurzfassung. */
@media (max-width:400px){
.hero__cta .btn__lang{display:none}
.hero__cta .btn__kurz{display:inline}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
.rev,.casc>*{opacity:1 !important;transform:none !important}
.ewort .eb{opacity:1 !important;transform:none !important}
.mnav>*{opacity:1 !important;transform:none !important}
/* Stehende Ziffer: alle vier Bloecke voll lesbar, kein Abblenden */
.js .stick__t{opacity:1 !important}
/* Der Haken im Diplom-Balken steht sofort da */
.js .bahn__check{stroke-dashoffset:0 !important}
/* Die Schritt-Bahn laeuft nicht mit, also stehen alle Schritte voll da */
.step h3,.step p{opacity:1 !important}
/* Beim NEURO-Einlauf sind nicht die Zeilen versetzt, sondern ihre Teile.
Ohne diese Zeile blieben Buchstabe, Titel und Text unsichtbar. */
.nmod .nmod__l,.nmod h3,.nmod p{opacity:1 !important;transform:none !important}
.steps__fuell{height:100% !important}
.strecke{display:none !important}
.ruhe-liste{display:block !important}
.rad .zug{stroke-dashoffset:0 !important}
.kreislauf,.untertext{display:none !important}
.runde{display:block !important}
.tuer__innen{transform:none !important}
.tuer__hinten{transform:none;opacity:0;transition:none}
.tuer:hover .tuer__hinten,.tuer:focus-visible .tuer__hinten,.tuer.is-offen .tuer__hinten{opacity:1}
.beat{opacity:1;transform:none}
}
/* =====================================================================
HUB /mentaltrainer-ausbildung/ · Bausteine nur fuer diese Seite
===================================================================== */
/* Tabellen (Formate, Preise, Termine): eine Karte, die innen scrollt */
.htab{overflow-x:auto;margin:clamp(24px,3vw,34px) 0 16px;border-radius:var(--r);
border:1px solid var(--line);background:var(--warm);box-shadow:0 10px 34px rgba(54,50,95,.07)}
.htab table{width:100%;border-collapse:collapse;font-size:var(--fs-komp);min-width:680px}
.htab--schmal table{min-width:520px}
.htab th,.htab td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.htab thead th{background:var(--indigo);color:#fff;font-family:var(--f-head);font-weight:700;border-bottom:0}
.htab tbody th{font-family:var(--f-head);font-weight:700;color:var(--indigo);background:var(--soft);width:min(230px,28%)}
.htab tr:last-child th,.htab tr:last-child td{border-bottom:0}
.htab td{color:var(--body)}
/* =====================================================================
Termine aus dem Live-Feed (Blendi 28.07.)
Regionen links, Durchgaenge rechts. Die Daten kommen aus
/wp-json/nmt/v1/termine auf der Subdomain, dieselbe Quelle, aus der
auch die Kaufseiten rechnen. Die Tabelle im Quelltext bleibt als
Rueckfallebene stehen: ohne JavaScript oder bei einem Serverfehler
sieht man weiterhin alle Termine.
===================================================================== */
.tmnsplit{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
gap:clamp(18px,2.6vw,34px);align-items:start;margin:clamp(24px,3vw,34px) 0 16px}
.tmnregionen{list-style:none;margin:0;padding:0;border:1px solid var(--line);
border-radius:var(--r);background:#fff;overflow:hidden}
.tmnregionen li + li{border-top:1px solid var(--line)}
.tmnregionen button{width:100%;text-align:left;border:0;background:none;cursor:pointer;
padding:13px 18px;font-family:var(--f-head);font-weight:700;font-size:var(--fs-komp);
color:var(--indigo);display:flex;justify-content:space-between;gap:12px;align-items:center;
transition:background .2s var(--ease),color .2s var(--ease)}
.tmnregionen button:hover{background:var(--soft)}
.tmnregionen button[aria-pressed="true"]{background:var(--indigo);color:#fff}
.tmnregionen small{font-weight:400;font-size:var(--fs-klein);opacity:.8}
.tmnliste{display:grid;gap:8px}
.tmn{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;
background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:14px 18px;text-decoration:none;color:inherit;
transition:border-color .2s var(--ease),transform .2s var(--ease)}
.tmn:hover{border-color:var(--violet);transform:translateY(-1px)}
.tmn__tag{text-align:center;font-family:var(--f-head);font-weight:800;color:var(--indigo);
line-height:1.05}
.tmn__tag span{display:block;font-size:1.25rem}
.tmn__tag small{display:block;font-size:.7rem;font-weight:700;color:var(--muted);
text-transform:uppercase;letter-spacing:.06em}
.tmn__region{display:block;font-family:var(--f-head);font-weight:700;color:var(--indigo);
font-size:1rem;line-height:1.3}
.tmn__meta{display:block;font-size:var(--fs-klein);color:var(--muted)}
/* Weicht der Abschluss vom Diplom ab, steht er als eigene Zeile da. */
.tmn__abschluss{color:var(--violet);font-family:var(--f-head);font-weight:700;margin-top:2px}
.tmnchip{display:inline-block;padding:4px 11px;border-radius:var(--r-pill);
font-family:var(--f-head);font-weight:700;font-size:var(--fs-klein);white-space:nowrap}
.tmnchip--praesenz{background:color-mix(in oklab,var(--violet) 12%,transparent);color:var(--violet)}
.tmnchip--online{background:color-mix(in oklab,var(--berry) 10%,transparent);color:var(--berry)}
.tmnchip--kompakt{background:color-mix(in oklab,var(--gold) 22%,transparent);color:#8a6a1f}
@media (max-width:820px){
.tmnsplit{grid-template-columns:1fr}
/* Die Regionen werden zur waagrechten Leiste, sonst kostet die Liste
am Handy einen halben Bildschirm, bevor der erste Termin kommt. */
.tmnregionen{display:flex;flex-wrap:wrap;gap:8px;border:0;background:none;overflow:visible}
.tmnregionen li + li{border-top:0}
.tmnregionen button{width:auto;border:1px solid var(--line);border-radius:var(--r-pill);
background:#fff;padding:9px 16px}
}
@media (max-width:560px){
.tmn{grid-template-columns:46px minmax(0,1fr);row-gap:8px;align-items:start}
.tmn > .tmnchip{grid-column:2;justify-self:start}
}
/* Der Fuss steht unter der Terminspalte, nicht unter den Regionen, und ist
dort mittig gesetzt. Das Raster wird gespiegelt, damit die Kante exakt
sitzt. :has greift nur, wenn die Live-Liste wirklich steht: laeuft die
Tabelle als Rueckfallebene, bleibt der Fuss schlicht linksbuendig. */
.tmnfuss{margin-top:clamp(18px,2.4vw,26px)}
#termine:has(.tmnsplit) .tmnfuss{display:grid;
grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:clamp(18px,2.6vw,34px)}
#termine:has(.tmnsplit) .tmnfuss__in{grid-column:2;text-align:center}
@media (max-width:820px){
#termine:has(.tmnsplit) .tmnfuss{display:block}
#termine:has(.tmnsplit) .tmnfuss__in{text-align:center}
/* Bricht der Link auf zwei Zeilen, wandert der Pfeil sonst allein an den
rechten Rand. Als Textfluss bleibt er am letzten Wort. */
.tmnfuss__in .link-arrow{display:inline;line-height:1.5}
.tmnfuss__in .link-arrow svg{display:inline;vertical-align:-3px;margin-left:6px}
}
/* NEURO-Module: Buchstabe als Wegmarke, Karte je Modul */
/* clip statt hidden: die Module warten vor dem Reveal 46px ausserhalb,
das darf auf schmalen Schirmen keinen Seitwaertsscroll erzeugen.
clip macht daraus keinen Scroll-Container, sticky bleibt heil. */
/* Module links, Seminarfoto rechts. Das Bild bleibt beim Scrollen stehen,
solange die Modulliste laeuft: so hat man die fuenf Schritte und den Raum,
in dem sie stattfinden, gleichzeitig vor Augen. */
.nmodgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
gap:clamp(22px,3.2vw,46px);align-items:start;margin-top:clamp(26px,3vw,36px)}
.nmodfoto{position:sticky;top:clamp(96px,12vh,124px);margin:0}
/* Eigener Rahmen um das Bild, damit die Bildunterschrift ausserhalb bleibt.
--hoch schiebt den Ausschnitt nach oben: das Bild ist um genau diesen
Betrag hoeher als der Rahmen und haengt oben heraus. object-position
koennte das nicht, das Bild fuellt den Rahmen senkrecht exakt aus. */
.nmodfoto__rahmen{--hoch:50px;position:relative;aspect-ratio:4/5;overflow:hidden;
border-radius:var(--r);background:var(--soft)}
.nmodfoto__rahmen img{position:absolute;left:0;top:calc(var(--hoch) * -1);
width:100%;height:calc(100% + var(--hoch));display:block;
object-fit:cover;object-position:50% 50%}
.nmodfoto figcaption{margin:10px 2px 0;font-size:var(--fs-klein);color:var(--muted)}
.nmodliste{display:grid;gap:14px;
overflow-x:clip;padding-inline:2px;margin-inline:-2px}
@media (max-width:900px){
/* Am Handy laeuft das Bild unter der Liste mit, sticky waere dort sinnlos. */
.nmodgrid{grid-template-columns:1fr;gap:clamp(20px,4vw,28px)}
.nmodfoto{position:static;margin-top:6px}
.nmodfoto__rahmen{aspect-ratio:1/1}
}
.nmod{display:flex;gap:18px;align-items:flex-start;background:var(--warm);
border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.nmod__l{flex:0 0 auto;width:46px;height:46px;border-radius:12px;
background:linear-gradient(150deg,var(--violet),var(--indigo));color:#fff;
display:grid;place-items:center;font-family:var(--f-head);font-weight:800;font-size:1.25rem}
.nmod h3{margin:3px 0 6px;font-size:1.0625rem}
.nmod p{margin:0;font-size:var(--fs-komp)}
/* Einlauf je Modul (Blendi 28.07.): der Buchstabe kommt von links, Titel
und Text folgen von rechts. Jede Zeile loest fuer sich aus, dadurch
liest sich der Weg N E U R O beim Scrollen wie eine Bewegung.
Die Zeile selbst darf sich nicht mitbewegen, sonst gaebe es einen
zweiten Versatz ueber dem eigentlichen Einlauf. */
.js .nmod.rev{opacity:1;transform:none}
.js .nmod.rev .nmod__l{opacity:0;transform:translateX(-46px)}
.js .nmod.rev h3,
.js .nmod.rev>div>p{opacity:0;transform:translateX(46px)}
.js .nmod.rev .nmod__l,
.js .nmod.rev h3,
.js .nmod.rev>div>p{
transition:opacity .8s var(--ease),transform .95s var(--ease)}
.js .nmod.rev.is-in .nmod__l,
.js .nmod.rev.is-in h3,
.js .nmod.rev.is-in>div>p{opacity:1;transform:none}
/* Klare Reihenfolge: erst steht der Buchstabe, dann setzt der Titel ein,
zuletzt der Text. Die Abstaende sind bewusst gross genug, dass man die
drei Schritte einzeln wahrnimmt statt als einen Block. */
.js .nmod.rev.is-in .nmod__l{transition-delay:0s}
.js .nmod.rev.is-in h3{transition-delay:.42s}
.js .nmod.rev.is-in>div>p{transition-delay:.78s}
/* Zitat: Berry-Zeichen, zentriert. Gleiche Sprache wie die Stimmen. */
.zitat{position:relative;margin:clamp(26px,3.4vw,38px) auto 0;max-width:620px;
padding-top:34px;text-align:center;font-family:var(--f-head);font-weight:800;
font-size:clamp(1.25rem,2.6vw,1.625rem);line-height:1.3;color:#fff}
/* Das deutsche Anfuehrungszeichen ist ein Tiefzeichen, seine Tinte sitzt
am Boden der Schriftbox. Deshalb weit genug nach oben schieben. */
.zitat::before{content:"\201E";position:absolute;top:-32px;left:50%;transform:translateX(-50%);
font-size:3.4rem;line-height:1;color:color-mix(in oklab,var(--berry) 55%,#fff)}
/* Methodenkoffer: eine offene Kiste in Perspektive, in die die Methoden
hineinfallen. Matter.js rechnet nur die Physik, die Methoden bleiben
echte Textelemente und damit lesbar und auswaehlbar.
Ohne JavaScript liegen sie schlicht als Liste in der Kiste. */
/* Die ganze Methoden-Section teilt sich eine Spalte: Kopf, Kiste und Notiz
stehen auf derselben linken Kante. */
.msp{width:min(100%,880px);margin-inline:auto}
.mkiste{position:relative;margin:clamp(26px,3.4vw,40px) auto 0;
max-width:880px;height:clamp(300px,36vw,420px);
border-radius:4px;overflow:hidden;touch-action:none;
background:linear-gradient(180deg,var(--indigo-deep) 0%,var(--indigo) 42%);
box-shadow:0 24px 58px rgba(12,10,34,.34)}
.mkiste *{user-select:none;-webkit-user-select:none}
/* Die Seitenwaende laufen nach hinten zusammen, das gibt der Kiste Tiefe */
.mkiste__wand{position:absolute;top:0;bottom:0;width:56px;pointer-events:none}
.mkiste__wand--l{left:0;background:linear-gradient(90deg,rgba(0,0,0,.34),transparent);
clip-path:polygon(0 0,100% 8%,100% 92%,0 100%)}
.mkiste__wand--r{right:0;background:linear-gradient(270deg,rgba(0,0,0,.34),transparent);
clip-path:polygon(100% 0,0 8%,0 92%,100% 100%)}
.mkiste__kante{position:absolute;left:0;right:0;top:0;height:16px;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.44),transparent)}
.mkiste__boden{position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
background:linear-gradient(0deg,rgba(0,0,0,.30),transparent)}
/* Jede Methode traegt einen eigenen Rahmen. Ohne ihn verschmelzen zwei
gleichfarbige Pillen im Stapel zu einer Flaeche. */
.mkarte{position:absolute;top:0;left:0;will-change:transform;cursor:grab;
display:inline-flex;align-items:center;white-space:nowrap;
font-family:var(--f-head);font-weight:700;font-size:var(--fs-komp);
letter-spacing:-.01em;padding:11px 19px;border-radius:100px;border:2px solid}
.mkarte:active{cursor:grabbing}
.mkarte--voll{background:var(--warm);color:var(--indigo);border-color:var(--indigo)}
.mkarte--kontur{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.mkarte--berry{background:var(--berry);color:#fff;border-color:var(--berry-deep)}
/* Die gegriffene Methode kommt nach vorn und hebt sich ab */
.mkarte.is-gegriffen{z-index:5;box-shadow:0 12px 30px rgba(12,10,34,.5);cursor:grabbing}
html:not(.js) .mkiste{height:auto;padding:clamp(22px,3.4vw,34px);
display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
html:not(.js) .mkarte{position:static}
/* Hinweis auf die Bedienung. Ohne JavaScript und bei reduzierter Bewegung
liegen die Methoden still da, dann waere der Hinweis eine Luege. */
/* Bricht der Hinweis am Handy auf zwei Zeilen, soll das Symbol an der
ersten Zeile stehen, nicht mittig zwischen beiden schweben. */
.mkiste__tipp{display:flex;align-items:flex-start;gap:9px;margin:14px auto 0;
font-size:var(--fs-klein);color:var(--lavender-text)}
.mkiste__tipp svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;stroke:currentColor;
stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
html:not(.js) .mkiste__tipp{display:none}
@media (prefers-reduced-motion: reduce){.mkiste__tipp{display:none}}
@media (max-width:640px){
/* schmaler Schirm: mehr Fallhoehe, kleinere Methoden, sonst stapelt
sich der Haufen bis ueber den Kistenrand */
.mkiste{height:520px}
.mkarte{font-size:.86rem;padding:9px 14px}
}
/* =====================================================================
Bausteine der Neuroresilienz-Seite (Blendi 28.07.)
Alles andere kommt unveraendert von der Hub-Seite: Kopf, Menue, Hero,
Trust, .narrow, .card, .grid, .htab, .nmod, .faq, .finale, .ft.
===================================================================== */
/* Fuer einen einzelnen, schmalen Block reicht deutlich weniger Hoehe. */
/* Zwei Siegel nebeneinander, leicht ueberlappend wie die Absolvent:innen-
Kreise daneben. Heller Kreis dahinter, sonst gehen die dunklen Siegel
auf dem Foto unter. Reihenfolge Ö-Cert vor S-QS wie im Fussbeleg. */
.siegel-paar{display:inline-flex;align-items:center;flex:0 0 auto}
.siegel-paar img{width:34px;height:34px;flex:0 0 34px;object-fit:contain;
border-radius:50%;background:rgba(255,255,255,.94);padding:3px;
margin-left:-9px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.siegel-paar img:first-child{margin-left:0}
.section--knapp{padding-block:clamp(30px,3.4vw,48px)}
/* Die feste Zeilenfuehrung der H1 stimmt nur, solange die Zeile passt.
Am Handy bricht sie ein zweites Mal und ergibt einen zerfransten Block,
deshalb dort freier Umbruch. Dasselbe gilt fuer die lange Eyebrow. */
@media (max-width:820px){
.hero--hub h1 br{display:none}
.nur-desk{display:none}
}
/* Wegweiser: wer die Voraussetzung nicht erfuellt, soll nicht ratlos
weiterscrollen, sondern einen zweiten Weg angeboten bekommen. */
.wegweiser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:16px clamp(20px,3vw,40px);max-width:960px;margin-inline:auto;
background:var(--soft-2);border:1px solid var(--line);border-radius:var(--r);
padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,34px)}
.wegweiser p{font-size:var(--fs-komp);max-width:62ch}
.wegweiser__frage{font-family:var(--f-head);font-weight:700;color:var(--indigo);
font-size:1.0625rem;margin:0 0 6px}
/* Bildband. Steht zwischen Einleitung und Liste, genau dort, wo der
Abschnitt sonst zu einer langen Textwand wird. Linke Kante wie der Text,
nach rechts darf es breiter laufen.
Beim Sichtbarwerden faehrt es aus 1,04 auf 1 zurueck, langsam und ohne
Ueberschwingen. Das ist dieselbe Kurve wie im ganzen Projekt, nur
traeger, damit ein grosses Bild nicht huepft. */
/* Die Karte hat dasselbe Seitenverhaeltnis wie die Bilddatei. Bei Zoom 1
ist damit das vollstaendige Bild zu sehen, nichts wird angeschnitten.
Erst wer groesser zoomt, schneidet bewusst an. */
/* Statt einer festen Hoehe ein unsichtbares Mass im selben Rasterfeld wie
der Text: die Karte ist mindestens so hoch wie das Bildformat, waechst
aber mit, falls der Text mehr Platz braucht. Ohne das wuerde bei engen
Fenstern die letzte Zeile abgeschnitten. */
.bildband{position:relative;margin:clamp(30px,4vw,46px) auto 0;max-width:1000px;
display:grid;
border-radius:var(--r);overflow:hidden;box-shadow:0 18px 52px rgba(54,50,95,.14);
background:#141130;isolation:isolate}
/* Zwei getrennte Ebenen, damit sich Bildausschnitt und Reveal nicht in die
Quere kommen: der Rahmen faehrt beim Sichtbarwerden von 1,05 zurueck, das
Bild darin traegt Zoom und Versatz. Beide Werte stehen als Variablen, das
Kontrollfeld unter ?ctrl=1 schreibt direkt darauf. */
/* Werte von Blendi, 29.07. Bei diesem Versatz laesst das Bild links
einen Streifen frei, deshalb deckt der Schleier dort voll. */
.bildband{--bz:1.22;--bx:19%;--by:3%}
.bildband__mass{grid-area:1/1;width:100%;aspect-ratio:16/9;pointer-events:none}
.bildband__bild{position:absolute;inset:0;overflow:hidden;z-index:0;
transform:scale(1.05);transition:transform 1.4s var(--ease)}
.js .bildband.rev.is-in .bildband__bild{transform:none}
.bildband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 50%;transform-origin:center;
transform:translate(var(--bx),var(--by)) scale(var(--bz))}
/* Der Text liegt im Bild, deshalb ein Schleier. Links deckt er fast voll,
nach rechts laeuft er aus, damit das Gehirn frei bleibt. Der zweite
Verlauf von unten faengt die Zeilen ab, die auf die helle Hand fallen. */
.bildband::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
/* Die ersten 18 Prozent decken voll. Dort liegt der Textanfang, und
dort endet je nach Versatz auch das Bild. Beides verschwindet unter
derselben Farbe wie der Kartengrund, deshalb ist keine Kante zu
sehen. Danach laeuft der Schleier weich aus. */
linear-gradient(94deg, #141130 0%, #141130 18%, rgba(20,17,48,.92) 32%,
rgba(20,17,48,.64) 58%, rgba(20,17,48,.22) 82%,
rgba(20,17,48,.04) 100%),
linear-gradient(0deg, rgba(20,17,48,.42) 0%, rgba(20,17,48,0) 40%)}
/* Der Text liegt als eigene Ebene ueber dem Bild und wird mittig gesetzt,
damit er unabhaengig von der Bildhoehe sitzt. */
.bildband__text{grid-area:1/1;position:relative;z-index:2;
display:flex;flex-direction:column;justify-content:center;
padding:clamp(28px,4vw,52px) clamp(24px,4vw,56px);
max-width:660px}
.bildband__kopf{font-family:var(--f-head);font-weight:700;color:#fff;
font-size:clamp(1.0625rem,2vw,1.25rem);letter-spacing:-.01em;margin:0 0 16px}
.bildband__text ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.bildband__text li{position:relative;padding-left:26px;font-size:var(--fs-komp);
line-height:1.55;color:#fff}
.bildband__text li::before{content:"";position:absolute;left:0;top:.62em;
width:9px;height:2px;border-radius:1px;background:#D46E9F}
.bildband__folge{margin:clamp(18px,2.2vw,24px) 0 0;font-size:var(--fs-komp);
line-height:1.65;color:var(--on-dark-soft)}
/* Der Schlusssatz traegt den Abschnitt, deshalb weiss und im Kopfschnitt. */
.bildband__frage{margin:clamp(14px,1.8vw,18px) 0 0;font-family:var(--f-head);
font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.35;
font-size:clamp(1.0625rem,1.8vw,1.1875rem);max-width:44ch}
/* Zeile fuer Zeile, deutlich nacheinander (Blendi 29.07.). Der Versatz
von 260 ms ist gross genug gegenueber der Laufzeit von 700 ms, dass jede
Zeile erkennbar einzeln ankommt. Der ganze Einlauf dauert damit gut zwei
Sekunden. Das ist bewusst laenger als die uebliche Faustregel, weil hier
gelesen und nicht nur wahrgenommen werden soll. Der Weg ist auf 30 px
verlaengert, sonst wirkt eine langsame Bewegung zaeh statt ruhig. */
.js .bildband.rev .bildband__kopf,
.js .bildband.rev .bildband__text li,
.js .bildband.rev .bildband__folge,
.js .bildband.rev .bildband__frage{opacity:0;transform:translateX(-30px);
transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js .bildband.rev.is-in .bildband__kopf{transition-delay:.15s}
.js .bildband.rev.is-in .bildband__text li:nth-child(1){transition-delay:.45s}
.js .bildband.rev.is-in .bildband__text li:nth-child(2){transition-delay:.71s}
.js .bildband.rev.is-in .bildband__text li:nth-child(3){transition-delay:.97s}
.js .bildband.rev.is-in .bildband__text li:nth-child(4){transition-delay:1.23s}
.js .bildband.rev.is-in .bildband__text li:nth-child(5){transition-delay:1.49s}
.js .bildband.rev.is-in .bildband__folge{transition-delay:1.75s}
.js .bildband.rev.is-in .bildband__frage{transition-delay:2.01s}
.js .bildband.rev.is-in .bildband__kopf,
.js .bildband.rev.is-in .bildband__text li,
.js .bildband.rev.is-in .bildband__folge,
.js .bildband.rev.is-in .bildband__frage{opacity:1;transform:none}
@media (max-width:760px){
/* Am Handy waere ein Text ueber dem Bild entweder unleserlich oder das
Bild waere unter dem Schleier nicht mehr zu erkennen. Deshalb hier
zwei Zonen in einer Karte: oben das vollstaendige Bild, darunter der
Text auf Indigo. Nichts wird angeschnitten, nichts wird zugedeckt. */
.bildband{display:block;--bz:1;--bx:0%;--by:0%}
.bildband__mass{display:none}
/* display:block noetig: als haette der Rahmen sonst keine
Breite, sobald er nicht mehr absolut liegt. */
.bildband__bild{position:relative;display:block;width:100%;aspect-ratio:16/9}
.bildband::before{display:none}
.bildband__text{position:relative;inset:auto;max-width:none;
background:var(--indigo-deep);padding:clamp(24px,6vw,32px)}
}
@media (prefers-reduced-motion: reduce){
.bildband__bild{transform:none!important}
.bildband__kopf,.bildband__text li,
.bildband__folge,.bildband__frage{opacity:1!important;transform:none!important}
}
/* ⚠️ TEMP: Kontrollfeld fuer den Bildausschnitt, nur mit ?ctrl=1 sichtbar.
Vor der Uebergabe an Eve ersatzlos loeschen, samt Markup und Skript. */
.ctrl{position:fixed;right:16px;bottom:16px;z-index:99;display:none;
background:var(--indigo-deep);color:#fff;border-radius:var(--r);
padding:16px 18px;box-shadow:0 18px 52px rgba(12,10,34,.45);
font-family:var(--f-body);font-size:13px;width:264px}
.ctrl.is-da{display:block}
.ctrl h4{font-family:var(--f-head);font-weight:700;font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:#A99BC4;margin:0 0 12px}
.ctrl label{display:block;margin-bottom:10px}
.ctrl label span{display:flex;justify-content:space-between;margin-bottom:4px}
.ctrl input[type=range]{width:100%;accent-color:#D46E9F}
.ctrl code{display:block;margin-top:10px;padding:8px 10px;border-radius:6px;
background:rgba(255,255,255,.1);font-size:11px;line-height:1.5;word-break:break-all}
.ctrl button{margin-top:10px;width:100%;border:1px solid rgba(255,255,255,.3);
background:transparent;color:#fff;border-radius:999px;padding:8px;cursor:pointer;
font-family:var(--f-head);font-weight:700;font-size:12px}
.ctrl button:hover{background:rgba(255,255,255,.12)}
/* Aufzaehlungen im Fliesstext. Die Einleitung endet auf Komma, die Punkte
laufen als ein Satz weiter, deshalb keine Bullets, sondern eine feine
Kante als Ordnung. */
.nliste{max-width:820px;margin-top:clamp(20px,2.6vw,28px)}
.nliste__kopf{font-family:var(--f-head);font-weight:700;color:var(--indigo);
font-size:1.0625rem;margin:0 0 12px}
.nliste ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nliste li{position:relative;padding-left:26px;font-size:var(--fs-komp)}
.nliste li::before{content:"";position:absolute;left:0;top:.62em;
width:9px;height:2px;border-radius:1px;background:var(--berry)}
@media (min-width:820px){.nliste--zwei ul{grid-template-columns:1fr 1fr;gap:10px 32px}}
/* Die Bahn ueber dem Ausgangspunkt. Der erste Balken steht schon voll, weil
das Diplom geschafft ist, der zweite fuellt sich zeitversetzt danach. Das
Bild sagt "hier kommt etwas dazu", damit der Text es nicht noch einmal
behaupten muss. Gefuellt wird ueber scaleX, nicht ueber width, das laeuft
auf dem Compositor und ruckelt auch auf dem Handy nicht. */
.bahn{margin:clamp(26px,3.4vw,36px) 0 clamp(24px,3vw,32px)}
.bahn__gleis{display:grid;grid-template-columns:1fr 1.2fr;gap:6px;margin-bottom:14px}
.bahn__ab{height:10px;border-radius:999px;background:var(--soft-2);
position:relative;overflow:hidden}
/* Nicht --ease. Die Kurve der Seite ist ein Expo-Out, die schiebt vier
Fuenftel des Wegs in das erste Drittel der Zeit. Bei einem langen Balken
sieht das aus, als schnappe er vor und bleibe dann haengen. Diese Kurve
laeuft gleichmaessiger an und wird erst am Ende langsamer. */
.bahn__ab i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
background:var(--lavender);transition:transform 1.8s cubic-bezier(.45,.05,.25,1)}
.bahn__ab--jetzt i{background:var(--berry)}
/* Die Bahn liegt im .rev-Block, das is-in haengt also am Elternteil.
Der zweite Balken setzt an, wenn der erste bei gut vier Fuenfteln steht.
Ohne diese Ueberlappung zerfaellt die Strecke in zwei Ereignisse. */
.js .rev.is-in .bahn__ab i{transform:none;transition-delay:.3s}
.js .rev.is-in .bahn__ab--jetzt i{transition-delay:1.75s}
/* Der Haken im Diplom-Balken zeichnet sich, sobald die Fuellung
vollgelaufen ist (0,3 s Start plus 1,8 s Fuellweg). Erst voll, dann
abgehakt: die zeichnende Linie liest sich als Vorgang. Ohne JS und
bei reduzierter Bewegung steht er sofort da. */
.bahn__check{position:absolute;left:50%;top:50%;width:10px;height:10px;
transform:translate(-50%,-50%);fill:none;stroke:#fff;stroke-width:4.5;
stroke-linecap:round;stroke-linejoin:round}
.js .bahn__check{stroke-dasharray:24;stroke-dashoffset:24}
.js .rev.is-in .bahn__check{stroke-dashoffset:0;
transition:stroke-dashoffset .4s var(--ease) 2.15s}
.bahn__namen{display:grid;grid-template-columns:1fr 1.2fr;gap:6px;
font-family:var(--f-head);font-weight:700;font-size:var(--fs-klein);color:var(--muted)}
.bahn__namen b{color:var(--indigo)}
/* Nummernspalte statt Bullet-Liste. Grosse Ziffern lesen sich als Curriculum
und passen zu einer Zielgruppe, die bereits ausgebildet ist. Die Zeilen
trennt eine feine Kante, nicht eine Karte, damit der Fliesstext-Charakter
der Aufzaehlung erhalten bleibt. */
.nummern-block{margin-top:clamp(20px,2.6vw,28px)}
.nummern{list-style:none;counter-reset:n;margin:0;padding:0;display:grid;gap:0}
.nummern li{counter-increment:n;display:grid;grid-template-columns:64px 1fr;gap:18px;
padding:16px 0;border-bottom:1px solid var(--line);
font-size:var(--fs-komp);align-items:baseline}
.nummern li:last-child{border-bottom:0}
.nummern li::before{content:"0" counter(n);font-family:var(--f-head);font-weight:800;
font-size:1.25rem;color:var(--berry);letter-spacing:-.02em}
@media (max-width:560px){.nummern li{grid-template-columns:44px 1fr;gap:12px}}
/* Ruhigere Stufe der Kaskade. Die Standardwerte sind auf Karten-Grids
gerechnet und lassen fuenf Zeilen fast gleichzeitig ankommen. Hier soll
jede Zeile fuer sich eintreffen, deshalb ein Schritt von 0,42 s zwischen
den Zeilen und ein langer, weich auslaufender Weg. Fuenf Zeilen brauchen
damit gut drei Sekunden. Muss nach .casc stehen, gleiche Spezifitaet.
Der Beobachter loest schon aus, bevor der Block ganz im Bild ist
(rootMargin -8%), die erste Zeile ist also da, wenn man sie liest. */
.js .casc--ruhig>*{transform:translateY(26px);
transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.casc--ruhig.is-in>*:nth-child(1){transition-delay:.1s}
.casc--ruhig.is-in>*:nth-child(2){transition-delay:.52s}
.casc--ruhig.is-in>*:nth-child(3){transition-delay:.94s}
.casc--ruhig.is-in>*:nth-child(4){transition-delay:1.36s}
.casc--ruhig.is-in>*:nth-child(5){transition-delay:1.78s}
.casc--ruhig.is-in>*:nth-child(6){transition-delay:2.2s}
.casc--ruhig.is-in>*:nth-child(7){transition-delay:2.62s}
.casc--ruhig.is-in>*:nth-child(8){transition-delay:3.04s}
/* Mittelstufe zwischen Standard (70 ms Schritt) und ruhig (420 ms).
Fuer Listen mit sieben und mehr Zeilen: die ruhige Stufe braeuchte dort
ueber vier Sekunden, das ist beim Scrollen zu lang. */
.js .casc--mittel>*{transform:translateY(24px);
transition:opacity .8s var(--ease),transform .9s var(--ease)}
.casc--mittel.is-in>*:nth-child(1){transition-delay:.06s}
.casc--mittel.is-in>*:nth-child(2){transition-delay:.32s}
.casc--mittel.is-in>*:nth-child(3){transition-delay:.58s}
.casc--mittel.is-in>*:nth-child(4){transition-delay:.84s}
.casc--mittel.is-in>*:nth-child(5){transition-delay:1.10s}
.casc--mittel.is-in>*:nth-child(6){transition-delay:1.36s}
.casc--mittel.is-in>*:nth-child(7){transition-delay:1.62s}
.casc--mittel.is-in>*:nth-child(8){transition-delay:1.88s}
/* Vier Begriffe als Karten statt als Tabelle. Die beiden eigenen stehen auf
Weiss mit Kante, die beiden verwandten liegen flach im Hintergrundton.
Damit ist alles ohne Klick sichtbar und gewichtet, und am Handy stapeln
sich die Karten, statt dass eine Tabelle quer scrollen muss. Der Preis:
der Vergleich Zeile fuer Zeile faellt weg. */
.vierk{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px);
margin-top:clamp(22px,3vw,32px)}
.vk{border-radius:var(--r);padding:clamp(18px,2.2vw,24px);border:1px solid var(--line);
background:#fff;display:flex;flex-direction:column}
.vk--nah{background:var(--soft-2);border-color:transparent;color:var(--muted)}
.vk h4{font-size:1.0625rem;margin:0 0 6px}
.vk--nah h4{color:var(--muted)}
.vk__kern{font-size:var(--fs-komp);font-family:var(--f-head);font-weight:700;
color:var(--indigo);margin:0 0 10px}
.vk--nah .vk__kern{color:var(--muted)}
.vk__kurz{font-size:var(--fs-komp);margin:0 0 12px}
.vk__ich{font-size:var(--fs-klein);color:var(--muted);margin:0 0 14px}
.vk__wo{margin-top:auto;font-family:var(--f-head);font-weight:700;font-size:var(--fs-klein)}
.vk__wo small{display:block;font-weight:400;color:var(--muted);margin-top:2px}
.vk--wir .vk__wo{color:var(--berry)}
.vk--nah .vk__wo{color:var(--muted)}
/* Nur noch zwei Konzeptkarten: zweispaltig und mittig (Blendi 30.07.) */
.vierk--zwei{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin-inline:auto}
@media (max-width:900px){.vierk{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.vierk{grid-template-columns:1fr}}
/* Selbst-Check. Aus acht Aussagen zum Lesen werden acht zum Anklicken.
Bewusst echte