/* revolutioncoaching.de · Fassung 15 (04.11.2026, abends). Struktur der Fassung 12. Besley für alles, Wortmarke als Text in derselben Schrift, eigene Zeichnungen am Platz der Figuren, Farben seit 06.11.2026: Weiß, Beige, Grau, Anthrazit, Orange zuerst, dazu Blau, Lila, Petrol (siehe :root).
   Raster: 12 Spalten, Zwischenraum 32 px, Satzspiegel 1200 px. Keine Karten, Pillen, Ringe, Wellen, Handschrift. */
:root {
  /* Farben (06.11.2026, Stefans Vorgabe, Werte aus stefanOS): Weiß, Beige, Grau und Anthrazit tragen die Seite. */
  --weiss: #FBF9F6; --beige: #F5F3F0; --grau: #EDEAE6; --anthrazit: #28241E;
  --tinte: #1D1B18; --neben: #746D66; --linie: #D6D1CA; --dunkel-neben: #C4BCB2; --dunkel-linie: #403A33; --licht: #EDE8E2; --dunkel-grau: #8A8279;
  /* Die erste Kontrastfarbe ist Orange. Blau, Lila und Petrol zu gleichen Teilen, je mit einem Thema; die hellen Fassungen stehen auf Anthrazit. */
  --orange: #F25C2A; --orange-tief: #E14D1F;
  --blau: #2E6BB8; --blau-hell: #5B5FE6; --lila: #7A6891; --lila-hell: #9A87B0; --petrol: #0A786E; --petrol-hell: #0EA899;
  --papier: var(--weiss); --ton: var(--grau); --feld: var(--grau); --du: var(--orange);
  --rolle: var(--blau); --rolle-hell: var(--blau-hell); --energie: var(--lila); --energie-hell: var(--lila-hell); --entscheidung: var(--petrol); --entscheidung-hell: var(--petrol-hell);
  --papier-hauch: rgba(251, 249, 246, .08); --evol-hauch: rgba(242, 92, 42, .55); --ton-aus: rgba(237, 234, 230, 0);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--papier); scroll-behavior: smooth; }
body { background: var(--papier); color: var(--tinte); font-family: 'Besley', Georgia, serif; font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; }   /* Schrift-Schritt (05.11.2026): keine Kursiven mehr, Betonung nur über Farbe (Stefan: „Einladung zu einer silbernen Hochzeit“) */
ul { list-style: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
section { padding: 96px 0 120px; }
section + section { border-top: 1px solid var(--linie); }
.akzent { color: var(--du); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transition: color .15s; }
.akzent:hover { color: var(--tinte); }
a:focus-visible { outline: 2px solid var(--du); outline-offset: 4px; border-radius: 1px; }
.foot a:focus-visible { outline-color: var(--papier); }
.neben { color: var(--neben); }
.k { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--neben); }

/* Wortmarke: Text in der Seitenschrift. E und L gespiegelt, EVOL in Terrakotta. */
.wm { display: inline-block; white-space: nowrap; font-size: 30px; line-height: 1; letter-spacing: .1em; font-weight: 700; color: var(--tinte); }
.sp { display: inline-block; transform: scaleX(-1); }
.ac { color: var(--du); }
.wm .co { font-size: .5em; letter-spacing: .3em; margin-left: .6em; text-transform: uppercase; color: var(--neben); font-weight: 500; }

/* Kopf */
.head { padding: 40px 0 0; }
.head .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; }
.marke { flex: 1 1 auto; min-width: 0; }
.nav { flex: none; display: flex; align-items: baseline; gap: 28px; font-size: 16px; color: var(--neben); white-space: nowrap; }
.nav a:hover { color: var(--tinte); }
.nav .akzent { color: var(--du); }
.nav .lang { padding-left: 16px; border-left: 1px solid var(--linie); }
@media (max-width: 1180px) and (min-width: 901px) { .wm .co { display: none; } .nav { gap: 20px; } }   /* Marke und Navigation passen sonst nicht nebeneinander */
@media (max-width: 1000px) and (min-width: 901px) { .nav { gap: 14px; font-size: 15px; } .nav .lang { padding-left: 12px; } }

/* Hero: das Satzbild */
/* Runde 10: Hero mit Feld. Links Satz und Lead, rechts (Spalte 9 bis 12, bis an den Bildrand) das Anthrazit-Feld mit dem Chemistry Check. */
.hero { padding: 0; position: relative; overflow: hidden; container-type: inline-size; }
.hero > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
.hero-links { grid-column: 1 / 9; padding: 112px 0 112px; }
.hero-links .lead { margin-top: 56px; }
.hero-feld { --rand: calc((100cqw - min(1200px, 100cqw)) / 2 + 32px); grid-column: 9 / 13; position: relative; overflow: hidden; container-type: inline-size;
  margin-left: -48px; margin-right: calc(-1 * var(--rand)); margin-top: 40px; padding: 0 var(--rand) 112px 48px; background: var(--anthrazit); color: var(--papier);
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 560px; }   /* nur das Wort und der Button; Button endet bündig mit dem Lead */
.hero-feld > :not(.wasserzeichen) { position: relative; z-index: 1; }
.feld-knopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; background: var(--du); color: var(--papier); font-size: 24px; line-height: 1.2; transition: background .2s; }   /* Hell auf Orange 3,45:1, ab 24 px große Schrift */
.feld-knopf:hover { background: var(--orange-tief); }
.feld-knopf:focus-visible { outline: 2px solid var(--papier); outline-offset: 3px; }
/* Leise Zeichnung im Hintergrund des Heros, rechts, ohne Konkurrenz zur Headline */
.ton { background: var(--ton); }
h1 { font-weight: 700; font-size: 92px; line-height: .95; letter-spacing: -.03em; max-width: 12ch; }   /* Aussagen in schwerer Besley wie das Stimmen-Plakat, eine Stufe leiser (700 statt 800) */
/* Das Satzbild: die Person steht voll in Tinte, das Geschäft tritt zurück (leicht, grau). */
h1 .umriss { color: var(--neben); }
/* Runde 3: Ströme und Strang. Rechts die Ströme vor dir, der Kreis für den Menschen, links der glatte Strang; die Wahl formt den Strang. */
.strom { margin-top: 88px; margin-left: calc(25% + 8px); display: grid; grid-template-columns: 1fr auto; column-gap: 28px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.schalterleiste { border: 0; display: grid; grid-template-rows: repeat(5, 60px); align-items: center; }
.schalter { display: flex; align-items: center; cursor: pointer; font-size: 17px; color: var(--neben); }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter span { padding-bottom: 2px; border-bottom: 1.5px solid transparent; transition: color .3s, border-color .3s; }
.schalter:has(input:checked) span { color: var(--tinte); border-bottom-color: var(--du); }
.schalter:has(input:focus-visible) span { outline: 2px solid var(--tinte); outline-offset: 4px; }
.schalter:hover span { color: var(--tinte); }
.buehne { position: relative; height: 300px; }
.buehne svg { display: block; width: 100%; height: 100%; overflow: visible; }
.buehne path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.buehne .fuelle { stroke: var(--tinte); stroke-width: 1; opacity: .1; }
.buehne .s { stroke: var(--tinte); stroke-width: 1.4; opacity: .2; transition: opacity .4s; }
.buehne .fluss { stroke: var(--tinte); stroke-width: 1.4; stroke-dasharray: 2 10; opacity: 0; transition: opacity .4s; }
.buehne .strang { stroke: var(--du); stroke-width: 3.5; transition: d .9s cubic-bezier(.65, 0, .35, 1); }
.mensch { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid var(--tinte); background: var(--papier); display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--tinte); }
.jetztlinie { position: absolute; left: 50%; top: -10px; bottom: 0; border-left: 1px dashed var(--neben); }
.jetztlinie span { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); padding-bottom: 8px; font-size: 16px; line-height: 1.2; color: var(--tinte); }
.gelebt { position: absolute; right: calc(100% + 16px); top: var(--e); transform: translateY(-50%); white-space: nowrap; font-size: 16px; line-height: 1.2; color: var(--du); transition: top .9s cubic-bezier(.65, 0, .35, 1); }
.strom:has(#st-0:checked) .s0, .strom:has(#st-1:checked) .s1, .strom:has(#st-2:checked) .s2, .strom:has(#st-3:checked) .s3, .strom:has(#st-4:checked) .s4 { opacity: .9; }
.strom:has(#st-0:checked) .f0, .strom:has(#st-1:checked) .f1, .strom:has(#st-2:checked) .f2, .strom:has(#st-3:checked) .f3, .strom:has(#st-4:checked) .f4 { opacity: 1; }
.unterzeile { grid-column: 1 / -1; margin-top: 18px; font-size: 15px; color: var(--neben); }
.unterzeile span { margin-left: 8px; }
@keyframes fliessen { to { stroke-dashoffset: 24; } }
@media (prefers-reduced-motion: no-preference) { .buehne .fluss { animation: fliessen 1.2s linear infinite; } }
@media (prefers-reduced-motion: reduce) { .buehne .strang, .gelebt { transition: none; } }

/* Runde 2: der Schmetterlingseffekt. Gerechnet (Lorenz 1963). Zeichnet sich beim Scrollen, wo der Browser das kann; sonst steht es fertig da. */
.schmetterling { margin-top: 88px; margin-left: calc(25% + 8px); display: grid; grid-template-columns: 420px 1fr; column-gap: 56px; align-items: end; }
.schmetterling svg { display: block; width: 100%; height: auto; overflow: visible; }
.schmetterling path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.schmetterling .tinte { stroke: var(--tinte); stroke-width: 1.5; }
.schmetterling .alt { stroke: var(--tinte); stroke-width: 1.3; opacity: .28; }
.schmetterling .eigen { stroke: var(--du); stroke-width: 2; }
.schmetterling .anstoss { fill: var(--du); }
.schmetterling .legende ul { margin-top: 14px; }
.schmetterling .legende li { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--linie); font-size: 17px; }
.schmetterling .legende li:last-child { border-bottom: 1px solid var(--linie); }
.schmetterling .muster { flex: none; width: 28px; height: 2px; background: var(--tinte); }
.schmetterling .m-anstoss { width: 11px; height: 11px; border-radius: 50%; background: var(--du); margin: 0 8.5px; }
.schmetterling .m-eigen { background: var(--du); height: 2.5px; }
.schmetterling .m-alt { opacity: .28; }
.schmetterling .quelle { margin-top: 14px; font-size: 14px; color: var(--neben); }
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes auftauchen { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .schmetterling .tinte { animation: zeichnen linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
    .schmetterling .anstoss { transform-box: fill-box; transform-origin: center; animation: auftauchen linear both; animation-timeline: view(); animation-range: cover 35% cover 38%; }
    .schmetterling .alt, .schmetterling .eigen { animation: zeichnen linear both; animation-timeline: view(); animation-range: cover 38% cover 52%; }
  }
}

/* Runde 1: das Spiegel-Element. EVOL dreht sich als Ganzes um die senkrechte Achse; von hinten gelesen: LOVE. */
/* Korrektur Runde 1: REVOLUTION zart, schräg, rechts oben im Hintergrund des Hero; EVOL dreht sich einmal beim Laden zu LOVE */
.wasserzeichen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
.wasserzeichen .wz { transform: rotate(-6deg); transform-origin: 0 50%; font-size: min(140px, calc(14.2vw - 66.7px)); line-height: .88; letter-spacing: .06em; white-space: nowrap; perspective: 1400px; }   /* gestapelt R, EVOL, UTION, senkrecht mittig über dem Button; LOVE bleibt ganz im Feld (Stefan 05.11.: „so, dass es den Platz ausnutzt“) */
.wasserzeichen .wz > * { display: block; }
.wasserzeichen .evol { width: max-content; }
.wasserzeichen .rv { color: var(--papier-hauch); }
.wasserzeichen .evol { display: block; color: var(--evol-hauch); transform-origin: 50% 55%; animation: evol-laden 4.2s cubic-bezier(.65, 0, .35, 1) .9s 1 backwards; }
.wasserzeichen .evol .sp { display: inline-block; transform: scaleX(-1); }
.hero-feld .wasserzeichen { position: relative; inset: auto; z-index: 0; flex: 1; display: grid; align-content: center; padding: 40px 0; }
@media (prefers-reduced-motion: reduce) { .wasserzeichen .evol { animation: none; } }
.spiegelwort { margin-top: 56px; }
.spiegelwort .wort { font-size: min(120px, 11vw); line-height: 1; font-weight: 400; letter-spacing: .06em; white-space: nowrap; perspective: 1400px; cursor: default; }
.spiegelwort .rv { color: var(--tinte); }
.spiegelwort .evol { display: inline-block; color: var(--du); transform-origin: 50% 55%; transform: rotateY(0deg); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); animation: evol-laden 4.2s cubic-bezier(.65, 0, .35, 1) .9s 1 backwards; }
.spiegelwort .evol .sp { display: inline-block; transform: scaleX(-1); }
.spiegelwort .wort:hover .evol { transform: rotateY(180deg); }
@keyframes evol-laden { 0% { transform: rotateY(0deg); } 26% { transform: rotateY(180deg); } 74% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.spiegelwort .lies { margin-top: 14px; font-size: 15px; color: var(--neben); }
@media (prefers-reduced-motion: reduce) { .spiegelwort .evol { animation: none; transition: none; } }
.hero-unten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; margin-top: 56px; align-items: end; }
.lead { grid-column: 1 / 8; font-size: 22px; line-height: 1.5; max-width: 44ch; }
.lead p + p { margin-top: 16px; }
.figur { display: block; height: auto; }
.zeichnung { width: 100%; color: var(--tinte); }
.zeichnung .p { fill: var(--papier); }
.ton .zeichnung .p { fill: var(--ton); }
.dunkel .zeichnung { color: var(--papier); }
.dunkel .zeichnung .p { fill: var(--anthrazit); }
.handlung { grid-column: 9 / 13; font-size: 19px; line-height: 1.5; }
.handlung .zeichnung { max-width: 320px; margin-bottom: 20px; }
.handlung .neben { display: block; margin-top: 6px; }
.fakten { margin-top: 96px; border-top: 1px solid var(--linie); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
.fakt { grid-column: span 4; padding-top: 20px; }
.fakt .k { margin-bottom: 8px; }
.fakt p { font-size: 18px; line-height: 1.5; max-width: 30ch; }

/* Abschnittskopf: Label in Spalte 1 bis 3, Überschrift ab Spalte 4 */
.kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.kopf .k { grid-column: 1 / 4; grid-row: 1; padding-top: 12px; }
.kopf .figur { grid-column: 1 / 4; grid-row: 2; width: 100%; max-width: 260px; margin-top: 24px; }
h2 { grid-column: 4 / 13; grid-row: 1 / span 2; font-weight: 700; font-size: 48px; line-height: 1.04; letter-spacing: -.02em; max-width: 20ch; }
.kopf .einordnung { grid-column: 4 / 11; grid-row: 3; margin-top: 28px; }
.zwei { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; margin-top: 64px; align-items: start; }
/* Text 1: Coaching ohne Überschrift. Die Grafik steht oben neben dem Label; darunter die Anlässe groß in Grau, dann die Wende in Tinte. */
.kopf.ohne-h2 { height: 0; }
.kopf.ohne-h2 + .strom { margin-top: 51.2px; }   /* „jetzt“ steht auf der Grundlinie des Labels */
.anlass { margin-top: 120px; }
/* Text 1b (Stefan: „if we list things, can they be a bit alternate“): die Anlässe im Zickzack, ungerade links ab Spalte 1, gerade rechtsbündig bis Spalte 12 */
.anlaesse { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; }
.anlaesse li { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; color: var(--neben); text-wrap: balance; }
.anlaesse li:nth-child(odd) { grid-column: 1 / 8; }
.anlaesse li:nth-child(even) { grid-column: 6 / 13; text-align: right; }
.anlaesse .r .h { margin-right: calc(-.225em - var(--rsb, 0em)); }   /* hängender Schlusspunkt: Vorschub 0,235 em minus Laufweite; die Buchstaben stehen auf der Kante */
@media (min-width: 901px) { .anlaesse li.r { left: 0 !important; } }   /* rechtsbündig: kein Ausgleich am linken Rand */
/* Die Wende als Höhepunkt: der Anlass klein in Grau, „Es geht um dich.“ groß in Tinte */
.wende { margin-top: 96px; margin-left: calc(25% + 8px); }
.wende .vor { display: block; font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; color: var(--neben); }
.wende .dich { display: block; margin-top: 8px; font-size: min(100px, calc((75vw - 56px) / 8.5)); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--tinte); white-space: nowrap; }   /* eine Zeile: „Es geht um dich.“ ist in 700 8,4 em breit */
.wende em { color: var(--du); }
/* Beim Scrollen wechselt „Es geht um dich.“ vom Grau des Geschäfts in Tinte und Orange. Nur Farbe, die Schrift bleibt scharf. */
@keyframes zu-dir { from { color: var(--neben); } }
@keyframes zu-dir-dunkel { from { color: var(--dunkel-neben); } }   /* Text 2: der Plakatsatz der Haltung, auf Anthrazit */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wende { view-timeline: --wende block; }
    .wende .dich, .wende .dich em { animation: zu-dir linear both; animation-timeline: --wende; animation-range: entry 60% cover 55%; }
    .plakatsatz { view-timeline: --plakat block; }
    .plakatsatz.breit .z, .plakatsatz.breit em { animation: zu-dir-dunkel linear both; animation-timeline: --plakat; animation-range: entry 60% cover 55%; }
    .plakatsatz.spalte .z, .plakatsatz.spalte em { animation: zu-dir linear both; animation-timeline: --plakat; animation-range: entry 60% cover 55%; }
    .dunkel .plakatsatz.spalte .z { animation-name: zu-dir-dunkel; }
    .um-feld .plakatsatz.spalte .z { animation-name: zu-feld; }
  }
}
.zwei > :first-child { grid-column: 4 / 8; }
.zwei > :last-child { grid-column: 9 / 13; }
.text { font-size: 19px; line-height: 1.6; max-width: 48ch; }
.text p + p { margin-top: 20px; }
.gross { font-size: 28px; font-weight: 600; line-height: 1.28; letter-spacing: -.01em; }
.gross em { color: var(--du); }

/* Coaching: vier Zeilen zwischen Linien */
.zeilen li { padding: 18px 0; border-top: 1px solid var(--linie); font-size: 24px; font-weight: 500; line-height: 1.35; }
.zeilen li:last-child { border-bottom: 1px solid var(--linie); }
.zeilen.klein li { font-size: 19px; padding: 12px 0; }
.text .immer { margin-top: 20px; margin-bottom: 10px; }
.text .zeilen + .gross { margin-top: 28px; }

/* Haltung: der Anthrazit-Block. Einstieg ist der Spiegel: REVOLUTION, darunter gespiegelt, LOVE liest sich vorwärts. */
.dunkel { background: var(--anthrazit); color: var(--papier); padding: 104px 0 120px; border-top: 0; }
.dunkel + section { border-top: 0; }
.dunkel .k { color: var(--dunkel-neben); }
.dunkel .weg { color: var(--dunkel-neben); }
.spiegel { grid-column: 4 / 13; grid-row: 1 / span 2; font-size: 72px; line-height: 1; letter-spacing: .08em; font-weight: 700; color: var(--papier); }
.spiegel .oben, .spiegel .unten { white-space: nowrap; }
.spiegel .unten { margin-top: 12px; color: var(--dunkel-linie); }
.spiegel .unten .rev { display: inline-block; transform: scaleX(-1); }
.spiegel .k { margin-top: 22px; letter-spacing: .01em; font-weight: 400; }
/* Runde 4: die Linie, die sich hinlegt. Grundzustand = Endzustand (ohne Scroll-Zeitleiste oder bei reduzierter Bewegung). */
.liegen { grid-column: 4 / 13; grid-row: 1 / span 2; position: relative; margin-top: 8px; view-timeline: --liegen block; }
.liegen svg { display: block; width: 100%; height: auto; overflow: visible; }
.liegen path, .liegen circle { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.liegen .linie { stroke: var(--licht); stroke-width: 2; }   /* Papier zu 90 % auf Anthrazit, deckend: keine Naht am Knick */
.liegen .klinge { transform-box: view-box; transform: rotate(0deg); opacity: 0; }
.liegen .griff { stroke-opacity: 0; }   /* liegt sie, übernimmt die feste Linie .ganz (gestochen scharf) */
.liegen .pfeil { opacity: 0; }
.liegen .du { stroke: var(--du); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.liegen .vorher, .liegen .nachher { position: absolute; transform: translateY(-50%); font-size: 17px; line-height: 1.2; white-space: nowrap; }
.liegen .vorher { color: var(--dunkel-neben); opacity: 0; }
.liegen .nachher { left: var(--nx); top: var(--ny); color: var(--papier); }
@keyframes hinlegen { from { transform: rotate(-62deg); } to { transform: rotate(0deg); } }
@keyframes aufhellen { from { stroke: var(--dunkel-grau); } to { stroke: var(--licht); } }
@keyframes weg { from { opacity: 1; } to { opacity: 0; } }
@keyframes da { from { opacity: 0; } to { opacity: 1; } }
/* Strich-Deckkraft statt Ebenen-Deckkraft: keine eigene Ebene, die Linie bleibt scharf. Liegend bleibt nur .ganz, ein Strich ohne Naht. */
@keyframes strich-an { from { stroke-opacity: 0; } to { stroke-opacity: 1; } }
@keyframes strich-aus { from { stroke-opacity: 1; } to { stroke-opacity: 0; } }
@keyframes kreis { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .liegen .klinge { animation: hinlegen ease-in-out both, weg linear both; animation-timeline: --liegen; animation-range: cover 34% cover 58%, cover 57.5% cover 58.5%; }
    .liegen .ganz { animation: strich-an linear both; animation-timeline: --liegen; animation-range: cover 56% cover 57%; }
    .liegen .griff { animation: strich-aus linear both; animation-timeline: --liegen; animation-range: cover 57% cover 58%; }
    .liegen .linie { animation: aufhellen linear both; animation-timeline: --liegen; animation-range: cover 34% cover 58%; }
    .liegen .vorher { animation: weg linear both; animation-timeline: --liegen; animation-range: cover 35% cover 42%; }
    .liegen .pfeil { animation: weg linear both; animation-timeline: --liegen; animation-range: cover 52% cover 57%; }
    .liegen .du { animation: kreis ease-out both; animation-timeline: --liegen; animation-range: cover 55% cover 61%; }
    .liegen .nachher { animation: da linear both; animation-timeline: --liegen; animation-range: cover 59% cover 65%; }
  }
}
.dunkel .liebe { margin-top: 72px; margin-left: calc(25% + 8px); color: var(--papier); }
/* Text 2 (05.11.2026): der Vorsatz ist Nebenzeile (600, gedämpft). Der Satz in Plakatgröße füllt die ganze Breite, so wie „Es geht um dich.“
   seine Spalten füllt: --e ist die Tintenbreite der ersten Zeile in em, gemessen. Darunter die drei Absätze als drei Zeilen im Zickzack. */
.satz { margin-top: 72px; margin-left: calc(25% + 8px); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; color: var(--dunkel-neben); text-wrap: balance; }
.plakatsatz { font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.plakatsatz .z { display: block; white-space: nowrap; }
.plakatsatz.breit { --e: 9.607; margin-top: 64px; font-size: calc(min(1136px, 100vw - 64px) / var(--e)); color: var(--papier); }
:lang(en) .plakatsatz.breit { --e: 9.456; }
.plakatsatz.breit em { color: var(--du); }
/* Text 3 (05.11.2026): im Ablauf steht der Plakatsatz ab Spalte 4 und füllt sie bis zum Rand, wie „Es geht um dich.“ */
.plakatsatz.spalte { margin-top: 112px; margin-left: calc(25% + 8px); font-size: calc((min(1136px, 100vw - 64px) * .75 - 8px) / var(--e)); color: var(--tinte); }
#ablauf .plakatsatz { --e: 11.105; } #how .plakatsatz { --e: 10.384; }
#ueber-mich .plakatsatz { --e: 9.083; } #about .plakatsatz { --e: 7.92; }
.plakatsatz.spalte em { color: var(--du); }
.dunkel .plakatsatz.spalte { color: var(--papier); }   /* Text 4: Über mich, auf Anthrazit */
.nachsatz { margin-top: 40px; margin-left: calc(25% + 8px); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; color: var(--neben); text-wrap: pretty; }
.dunkel .nachsatz, .dunkel .kopf .vorsatz { color: var(--dunkel-neben); }
/* erste Grundlinie auf der des Labels */
.kopf .vorsatz { grid-column: 4 / 13; grid-row: 1; margin-top: -12px; font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; color: var(--neben); text-wrap: pretty; }
.anlaesse.drei { margin-top: 112px; }
.dunkel .anlaesse li { color: var(--dunkel-neben); }

/* Ablauf: drei Schritte, große Ziffern */
.wegstrecke { margin-top: 72px; margin-left: calc(25% + 8px); view-timeline: --weg block; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.step { padding-top: 24px; padding-right: 24px; }
/* Runde 5: der Weg. Grundzustand: du steht neben ich am Anfang (ohne Scroll-Zeitleiste oder bei reduzierter Bewegung).
   Spalte = (100% - 2 Abstände) / 3; Spalte 2 beginnt bei Spalte + Abstand, Spalte 3 bei 2 Spalten + 2 Abstände. */
.ablaufweg { --spalt: 32px; --sp: calc((100% - 2 * var(--spalt)) / 3); position: relative; height: 40px; }
.ablaufweg .voll, .ablaufweg .offen, .ablaufweg .marken, .ablaufweg .punkt { position: absolute; top: 50%; }
.ablaufweg .voll { left: 0; width: calc(2 * var(--sp) + 2 * var(--spalt)); height: 1.5px; margin-top: -.75px; background: var(--tinte); }
.ablaufweg .offen { left: calc(2 * var(--sp) + 2 * var(--spalt)); right: 0; height: 1.5px; margin-top: -.75px; background: repeating-linear-gradient(90deg, var(--tinte) 0 2px, transparent 2px 9px); }
.ablaufweg .marken { left: calc(var(--sp) + var(--spalt)); width: var(--sp); height: 14px; margin-top: -7px; background: linear-gradient(90deg, var(--tinte) 0 1.5px, transparent 1.5px) 0 0 / calc((100% - 1.5px) / 7) 100% repeat-x; }
.ablaufweg .punkt { left: calc(2 * var(--sp) + 2 * var(--spalt) + var(--an) * var(--sp)); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--du); }
.ablaufweg .kreis { position: absolute; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: var(--ton); font-size: 13px; line-height: 1; color: var(--tinte); }
.ablaufweg .coaching { left: 0; width: 84px; margin-left: 0; border-radius: 17px; border: 1.5px solid var(--tinte); }   /* Kapsel in Kreishöhe, bündig mit dem Linienanfang; Wort 59 px */
.ablaufweg .du { left: 105px; border: 2px solid var(--du); }
@keyframes gehen { from { left: 105px; } to { left: calc(100% - 17px); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ablaufweg .du { animation: gehen linear both; animation-timeline: --weg; animation-range: cover 18% cover 52%; }
  }
}
.step .num { display: block; font-size: 56px; font-weight: 700; line-height: 1; color: var(--tinte); margin-bottom: 28px; }
.step h3 { font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 10px; }
.step p { font-size: 17px; line-height: 1.6; }
.punkte { margin-top: 16px; }
.punkte li { padding: 8px 0; font-size: 16px; line-height: 1.5; border-top: 1px solid var(--linie); }

/* Stimmen, Schritt 4e: das Plakat. Feld in Orange-Rot, Zitate in schwerer Besley (800). Timo in Tinte auf Orange (4,1 zu 1, nur große Schrift);
   Cristina auf Anthrazit, das ab Spalte 4 bis an den rechten Bildrand hereinsteht, Zitat in Orange (3,2 zu 1, große Schrift), Namen in Papier.
   Unter 24 px steht auf Orange nur fette Schrift ab 19 px (gilt als große Schrift). Spalte = (100cqw - 11 Abstände) / 12. */
.feld { background: var(--du); color: var(--tinte); padding: 112px 0 104px; border-top: 0; overflow-x: clip; }
.feld + section { border-top: 0; }
.feld .wrap { container-type: inline-size; }
.stimmen { --sp: calc((100cqw - 11 * 32px) / 12); --rand: calc((100vw - 100cqw) / 2);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 72px; }
.stimme { --fs: min(64px, calc((8 * var(--sp) + 224px) * .0857), calc((var(--rand) - 6px) / .582)); }   /* 64 px bei acht Spalten Satzbreite; das hängende Zeichen (0,582 em) passt immer in den Rand */
.stimme:nth-child(1) { grid-column: 1 / 10; }
.stimme:nth-child(2) { grid-column: 4 / 13; margin-right: calc(-1 * var(--rand)); padding: 88px var(--rand) 88px calc(var(--sp) + 32px); background: var(--anthrazit); color: var(--papier); }   /* Text ab Spalte 5 */
.stimme blockquote { font-size: var(--fs); line-height: .98; font-weight: 800; letter-spacing: -.02em; text-indent: -.582em; }   /* Anführungszeichen hängt: Vorschub 0,602 em minus Laufweite */
.stimme:nth-child(2) blockquote { color: var(--du); }
.stimme blockquote::before { content: "\201E"; display: inline-block; text-indent: 0; }   /* eigener Satzlauf: kein Unterschneiden mit dem ersten Buchstaben */
.stimme blockquote::after { content: "\201C"; }
.en .stimme blockquote::before { content: "\201C"; }
.en .stimme blockquote::after { content: "\201D"; }
.stimme figcaption { margin-top: 28px; font-size: 20px; line-height: 1.4; font-weight: 700; display: grid; }
.stimme .wer { font-weight: 800; }

/* Über mich: Text links, Foto rechts im Format 3:4 */
.um > :first-child { grid-column: 4 / 9; }
.um > :last-child { grid-column: 10 / 13; }
.foto { aspect-ratio: 3 / 4; background: var(--feld); display: flex; align-items: center; justify-content: center; color: var(--neben); font-size: 15px; }
.weg { margin-top: 32px; font-size: 15px; color: var(--neben); }
/* Text 4b (05.11.2026): Über mich ohne Treppe. Absatz und Einleitung in Textgröße ab Spalte 4, das Immer-weiter groß in Grau (600, 40 px),
   dann das Feld in Orange-Rot bis an den Rand mit dem Satz vom eigenen Weg in Tinte. */
.dunkel.mit-feld { padding-bottom: 0; }
.um-text { margin-top: 64px; margin-left: calc(25% + 8px); }
.um-text > p { max-width: calc((100% - 8 * 32px) / 9 * 5 + 4 * 32px); font-size: 19px; line-height: 1.6; }
.um-text > p + p { margin-top: 20px; }
.last { margin-top: 14px; }
.last li { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; color: var(--dunkel-neben); text-wrap: pretty; }
.last li + li { margin-top: 16px; }
.um-feld { margin-top: 112px; background: var(--du); color: var(--tinte); padding: 104px 0 112px; }
.um-feld .plakatsatz.spalte { margin-top: 0; color: var(--tinte); }
.um-feld .nachsatz { color: var(--tinte); }
@keyframes zu-feld { from { color: var(--dunkel-neben); } }

/* Einstieg: Kalender im Rahmen */
/* Runde 8: das Treffen. Formen wie im Ablauf, innen durchsichtig, damit die Überschneidung als Umriss sichtbar wird. */
.treffen { position: relative; height: 34px; margin-top: 56px; margin-left: calc(25% + 8px); view-timeline: --treffen block; overflow: hidden; }
.treffen .form { position: absolute; top: 0; height: 34px; display: grid; place-items: center; font-size: 13px; line-height: 1; color: var(--tinte); }
.treffen .coaching { left: 0; width: 84px; border-radius: 17px; border: 1.5px solid var(--tinte); }
.treffen .du { left: 76px; width: 34px; border-radius: 50%; border: 2px solid var(--du); }   /* überschneidet die Kapsel um 8 px */
.treffen .du::after { content: ""; position: absolute; left: calc(100% + 6px); top: 50%; width: 2000px; height: 1.5px; margin-top: -.75px; background: repeating-linear-gradient(90deg, var(--neben) 0 2px, transparent 2px 9px); }   /* die Spur, die du gekommen ist; endet am rechten Rand */
@keyframes kommen { from { left: calc(100% - 34px); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .treffen .du { animation: kommen ease-out both; animation-timeline: --treffen; animation-range: cover 20% cover 55%; }
  }
}
.einstieg .zwei > :first-child { grid-column: 4 / 7; }
.einstieg .zwei > :last-child { grid-column: 7 / 13; }
.cal { border: 1px solid var(--tinte); padding: 12px; background: var(--papier); }
.calendly-inline-widget { min-width: 320px; height: 700px; }
.fallback { margin-top: 14px; font-size: 15px; }

/* Impressum: zwei Abschnitte im Kleid der Seite */
.imp { padding: 72px 0 64px; }
.imp .zwei { margin-top: 40px; }
.imp .text p + p { margin-top: 14px; }
.imp + .imp { border-top: 1px solid var(--linie); }
/* Rechtsseiten (05.11.2026): Impressum und Datenschutz ab Spalte 4, Textbreite wie die Absätze der Seite */
.recht .rtext { margin-top: 48px; margin-left: calc(25% + 8px); max-width: 640px; font-size: 17px; line-height: 1.6; }
.rblock + .rblock { margin-top: 32px; }
.rblock h3 { font-size: 19px; font-weight: 500; line-height: 1.35; margin-bottom: 8px; }
.rblock p + p, .rblock ul + p, .rblock p + ul { margin-top: 10px; }
.rliste { list-style: none; }
.rliste li { padding-left: 18px; position: relative; }
.rliste li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 6px; height: 1.5px; background: var(--tinte); }
.rliste li + li { margin-top: 6px; }

/* Kontakt, Schritt 6: groß im dunklen Fuß. Mail in Orange auf Anthrazit (3,2 zu 1, nur große Schrift). */
.foot .kontakt { margin-bottom: 64px; }
.foot .kontakt::after { content: ""; display: block; height: 1px; margin-top: 104px; background: var(--dunkel-linie); }   /* Trennlinie im Satzspiegel, bündig mit der Linie unten */
.foot .kontakt h2 { color: var(--papier); }
.foot .kontakt .k { color: var(--dunkel-neben); }
.kontakt .mail { margin-top: 48px; margin-left: calc(25% + 8px); font-size: 48px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.kontakt .neben { margin-top: 18px; margin-left: calc(25% + 8px); font-size: 17px; color: var(--dunkel-neben); }
.foot .akzent { border-bottom-width: 2px; }
.foot .akzent:hover { color: var(--papier); }

/* Fuß */
.foot { background: var(--anthrazit); color: var(--dunkel-neben); padding: 112px 0 40px; font-size: 14px; }
.foot .fusszeile { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 24px; align-items: end; }
.foot .wm { font-size: 26px; color: var(--papier); }
.foot .wm .co { color: var(--dunkel-neben); }
/* Runde 9: der Abschluss. Kommt der Fuß ins Bild, dreht sich EVOL in der Marke um die senkrechte Achse und zeigt LOVE; am Seitenende bleibt LOVE stehen.
   An das Scrollen gebunden (Scroll-Zeitleiste); ohne sie oder bei reduzierter Bewegung bleibt REVOLUTION. */
.foot .fusszeile { view-timeline: --fuss block; }   /* Schritt 6: Zeitleiste an der Markenzeile, der Fuß ist durch den Kontakt höher */
.foot .wm { perspective: 900px; }
.foot .wm .ac { display: inline-block; transform-origin: 50% 55%; }
@keyframes zu-love { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .foot .wm .ac { animation: zu-love ease-in-out both; animation-timeline: --fuss; animation-range: entry 55% entry 100%; }   /* beginnt, wenn die Marke sichtbar ist; endet am Seitenende */
  }
}
.foot .rechts { text-align: right; }
.foot .rechts span { display: block; }
.foot .rechts span + span { margin-top: 8px; }
.foot .u { border-bottom: 1px solid var(--dunkel-neben); }
.foot .unten { grid-column: 1 / -1; border-top: 1px solid var(--dunkel-linie); padding-top: 18px; margin-top: 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot a:hover { color: var(--papier); }

@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  section { padding: 64px 0 80px; }
  .head { padding-top: 28px; }
  .head .wrap { flex-wrap: wrap; row-gap: 14px; }
  .nav { gap: 16px; font-size: 15px; }
  .nav a:not(.lang):not(.akzent) { display: none; }
  .wm { font-size: min(24px, 6.4vw); }
  .hero > .wrap { grid-template-columns: 1fr; }
  .hero-links { grid-column: auto; padding: 56px 0 48px; }
  .hero-links .lead { margin-top: 36px; }
  .hero-feld { grid-column: auto; margin: 0 -20px; min-height: 0; padding: 0 20px 40px; }
  .wasserzeichen .wz { font-size: 26cqw; }
  .hero-feld .wasserzeichen { padding: 48px 0 64px; }
  .feld-knopf { font-size: 24px; padding: 16px 18px; }
  h1 { font-size: 54px; line-height: 1.02; }
  .hero-unten { grid-template-columns: 1fr; row-gap: 28px; margin-top: 36px; }
  .lead, .handlung { grid-column: auto; }
  .handlung .zeichnung { max-width: 240px; }
  .schmetterling { margin-left: 0; margin-top: 56px; grid-template-columns: 1fr; row-gap: 24px; }
  .strom { margin-left: 0; margin-top: 56px; column-gap: 14px; }
  .schalterleiste { grid-template-rows: repeat(5, 46px); }
  .schalter { font-size: 14px; }
  .buehne { height: 230px; }
  .mensch { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .mensch { font-size: 11px; }
  .jetztlinie span { font-size: 13px; }
  .gelebt { right: auto; left: 0; top: var(--o); transform: translateY(-100%); white-space: normal; width: 40%; font-size: 13px; }
  .unterzeile { grid-column: 1 / -1; }
  .unterzeile span { display: block; margin: 4px 0 0; }
  .schmetterling svg { max-width: 360px; }
  .handlung { margin-top: 0; }
  .lead { font-size: 19px; }
  .fakten { margin-top: 64px; grid-template-columns: 1fr; }
  .fakt { grid-column: auto; padding: 18px 0; border-bottom: 1px solid var(--linie); }
  .fakt:last-child { border-bottom: 0; }
  .kopf { grid-template-columns: 1fr; row-gap: 14px; }
  .kopf .k, h2, .kopf .einordnung, .kopf .figur, .spiegel { grid-column: auto; grid-row: auto; }
  .kopf .figur { max-width: 220px; margin-top: 8px; }
  h2 { font-size: 34px; }
  .kopf .einordnung { margin-top: 20px; }
  .zwei { grid-template-columns: 1fr; row-gap: 36px; margin-top: 40px; }
  .anlass { margin-top: 64px; }
  .anlaesse { grid-template-columns: 1fr; row-gap: 26px; }
  .anlaesse li { font-size: 24px; }
  .anlaesse li:nth-child(odd) { grid-column: auto; margin-right: 14%; }   /* Telefon: abwechselnd eingerückt statt rechtsbündig */
  .anlaesse li:nth-child(even) { grid-column: auto; margin-left: 14%; text-align: left; }
  .anlaesse .r .h { margin-right: 0; }
  .wende { margin-top: 56px; margin-left: 0; }
  .wende .vor { font-size: 22px; }
  .wende .dich { margin-top: 6px; font-size: min(52px, calc((100vw - 40px) / 8.5)); }
  .kopf.ohne-h2 { height: 0; }
  .kopf.ohne-h2 + .strom { margin-top: 51.6px; }   /* Telefon: Label und „jetzt“ auf einer Grundlinie, über der Grafik */
  .zwei > :first-child, .zwei > :last-child, .um > :first-child, .um > :last-child, .einstieg .zwei > :first-child, .einstieg .zwei > :last-child { grid-column: auto; }
  .text { font-size: 18px; }
  .gross { font-size: 24px; }
  .zeilen li { font-size: 21px; padding: 14px 0; }
  .dunkel { padding: 72px 0 88px; }
  .spiegel { font-size: min(36px, 9.4vw); letter-spacing: .06em; margin-top: 12px; }
  .liegen { grid-column: auto; grid-row: auto; margin-top: 20px; }
  .liegen .vorher, .liegen .nachher { font-size: 13px; }
  .liegen .vorher { white-space: normal; width: 36%; }
  .liegen .nachher { left: var(--kx); top: var(--ky); transform: translate(-50%, -100%); }
  .spiegel .unten { margin-top: 6px; }
  .dunkel .liebe { margin-left: 0; margin-top: 48px; }
  .satz { margin-left: 0; font-size: 22px; margin-top: 48px; }
  .plakatsatz.breit { margin-top: 28px; font-size: calc((100vw - 40px) / var(--e)); }
  .plakatsatz.spalte { margin-top: 64px; margin-left: 0; font-size: calc((100vw - 40px) / var(--e)); }
  .nachsatz { margin-left: 0; margin-top: 24px; font-size: 22px; }
  .kopf .vorsatz { grid-column: auto; grid-row: auto; margin-top: 6px; font-size: 22px; }
  .anlaesse.drei { margin-top: 56px; }
  .kontakt .mail, .kontakt .neben { margin-left: 0; }
  .wegstrecke { margin-top: 48px; margin-left: 0; }
  .steps { grid-template-columns: 1fr; row-gap: 40px; margin-top: 8px; }
  .step { padding-right: 0; border-top: 1px solid var(--linie); }
  /* Telefon: der Weg bleibt beim Lesen der Schritte oben stehen, du geht mit */
  .ablaufweg { --spalt: 12px; position: sticky; top: 0; z-index: 2; height: 56px; background: var(--ton); }
  .ablaufweg .kreis { top: 28px; width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 12px; }
  .ablaufweg .coaching { left: 0; width: 76px; margin-left: 0; border-radius: 15px; }
  .ablaufweg .du { left: 95px; }
  @keyframes gehen { from { left: 95px; } to { left: calc(100% - 15px); } }
  .ablaufweg::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; background: linear-gradient(var(--ton), var(--ton-aus)); pointer-events: none; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .ablaufweg .du { animation-range: contain 0% contain 85%; }
    }
  }
  .step .num { font-size: 44px; margin-bottom: 18px; }
  .feld { padding: 72px 0 72px; }
  .stimmen { grid-template-columns: 1fr; row-gap: 56px; }
  .stimme:nth-child(n) { grid-column: auto; --fs: 32px; }
  .stimme:nth-child(2) { margin-left: 28px; margin-right: -20px; padding: 48px 20px 52px 32px; }   /* Telefon: die Fläche steht von rechts herein, links bleibt Orange */
  .stimme blockquote { line-height: 1.02; }
  .stimme figcaption { margin-top: 20px; font-size: 19px; }
  .foto { max-width: 280px; }
  .recht .rtext { margin-left: 0; margin-top: 32px; font-size: 16px; }
  .treffen { margin-left: 0; margin-top: 40px; height: 30px; }
  .treffen .form { height: 30px; font-size: 12px; }
  .treffen .coaching { width: 76px; border-radius: 15px; }
  .treffen .du { left: 69px; width: 30px; }
  @keyframes kommen { from { left: calc(100% - 30px); } }
  .um-text { margin-left: 0; margin-top: 40px; }
  .um-text > p { max-width: none; font-size: 18px; }
  .last li { font-size: 22px; }
  .last li + li { margin-top: 10px; }
  .um-feld { margin-top: 64px; padding: 64px 0 72px; }
  .um-feld .nachsatz { font-size: 24px; }   /* Tinte auf Orange-Rot 4,1 zu 1: ab 24 px gilt große Schrift (3 zu 1) */
  .kontakt .mail { font-size: 30px; line-height: 1.6; margin-top: 24px; }   /* bricht nach dem @ um; Zeilenabstand, damit die Unterstreichung nicht in die zweite Zeile ragt */
  .foot { padding-top: 72px; }
  .foot .kontakt { margin-bottom: 48px; }
  .foot .kontakt::after { margin-top: 72px; }
  .foot .fusszeile { grid-template-columns: 1fr; }
  .foot .wm { font-size: min(22px, 6.4vw); }
  .foot .rechts { text-align: left; }
}
@media (max-width: 360px) {
  .kontakt .mail { font-size: 26px; }   /* „revolutioncoaching.de“ passt auch bei 320 px in eine Zeile, Orange bleibt große Schrift */
}

/* Farben (06.11.2026, Stefans Vorgabe nach den VHS-Kassetten): Weiß, Beige, Grau und Anthrazit tragen die Seite.
   Die erste Kontrastfarbe ist immer Orange (du, die Handlung, die Marke, Stimmen). Blau, Lila und Petrol kommen zu gleichen Teilen dazu,
   je mit einem Thema: Rolle Blau, Entscheidungen Petrol, Energie Lila. Kein Pink, kein Lila als große Fläche, nie als Streifen. */

/* Textlinks auf hellem Grund: Schrift in Tinte, Orange als Unterstreichung (Orange auf Weiß reicht nur für große Schrift) */
.akzent { color: var(--tinte); border-bottom-color: var(--du); }
.akzent:hover { color: var(--neben); }
.nav .akzent { color: var(--tinte); }
.foot .akzent { color: var(--du); }

/* Coaching: die drei Themen färben ihren Strom, sobald du ihn wählst */
.strom:has(#st-1:checked) :is(.s1, .f1) { stroke: var(--rolle); }
.strom:has(#st-2:checked) :is(.s2, .f2) { stroke: var(--entscheidung); }
.strom:has(#st-3:checked) :is(.s3, .f3) { stroke: var(--energie); }
.schalter:has(#st-1:checked) span { border-bottom-color: var(--rolle); }
.schalter:has(#st-2:checked) span { border-bottom-color: var(--entscheidung); }
.schalter:has(#st-3:checked) span { border-bottom-color: var(--energie); }

/* Haltung auf Anthrazit: was rauskommt, in den Farben der Themen */
.anlaesse.drei li:nth-child(2) { color: var(--entscheidung-hell); }
.anlaesse.drei li:nth-child(3) { color: var(--rolle-hell); }
.anlaesse.drei li:nth-child(4) { color: var(--energie-hell); }

/* Ablauf: die drei Schritte in Blau, Lila, Petrol */
.step:nth-child(1) .num { color: var(--blau); }
.step:nth-child(2) .num { color: var(--lila); }
.step:nth-child(3) .num { color: var(--petrol); }

/* Über mich: Beige für das Immer-weiter, dann der eigene Weg auf Anthrazit. Kein Orange-Feld mehr. */
.dunkel.mit-feld { background: var(--beige); color: var(--tinte); }
.dunkel.mit-feld .k, .dunkel.mit-feld .kopf .vorsatz, .last li { color: var(--neben); }
.um-feld { background: var(--anthrazit); color: var(--papier); }
.um-feld .plakatsatz.spalte { color: var(--papier); }
.um-feld .nachsatz { color: var(--dunkel-neben); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .um-feld .plakatsatz.spalte .z { animation-name: zu-dir-dunkel; } } }