/* hey LOOP · Fassung Fable · „Der goldene Faden“
   Eine Linie verbindet jede Darstellung: vom Hero bis zum Impuls. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/inter-latin-400-normal.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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/inter-latin-500-normal.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/inter-latin-600-normal.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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/inter-latin-ext-400-normal.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+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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/inter-latin-ext-500-normal.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+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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/inter-latin-ext-600-normal.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+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --nacht: #0C0D11;
  --nacht-2: #14161C;
  --nacht-3: #1C1F27;
  --nacht-linie: #2C2F3A;
  --papier: #F3EEE4;
  --papier-2: #EAE3D4;
  --papier-linie: #D6CDBA;
  --tinte: #16171B;
  --tinte-2: #4A4740;
  --hell: #F4EFE5;
  --hell-2: #CFC8BA;
  --gold: #C9A44F;
  --gold-hell: #E8CD85;
  --gold-tinte: #5A420C;
  --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --sans: 'Inter', sans-serif;
  --rand: clamp(22px, 4.5vw, 110px);
  --weich: cubic-bezier(.2, .7, .2, 1);
  --dauer: .7s;
  --schatten: 0 30px 80px rgba(0, 0, 0, .45);
}

html { font-size: clamp(13px, 0.877vw + 3.37px, 24.5px); scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--nacht); color: var(--hell); font-family: var(--sans); font-weight: 400; line-height: 1.5; overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.015em; }
h3, h4 { font-family: var(--sans); margin: 0; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
strong { font-weight: 600; }

/* ---------- Lader ---------- */
.lader { position: fixed; inset: 0; z-index: 50; background: var(--nacht); display: grid; place-items: center; transition: opacity .45s ease, visibility 0s linear .45s; }
html:not(.js) .lader { display: none; }
.lader.weg { opacity: 0; visibility: hidden; }
.lader-innen { display: grid; justify-items: start; gap: 1.6rem; }
.lader-innen img { width: 14rem; height: auto; }
.lader-zahl { font-size: 5rem; line-height: 1; font-weight: 400; color: var(--hell); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lader-linie { display: block; width: 14rem; height: 2px; background: var(--nacht-linie); position: relative; overflow: hidden; }
.lader-linie::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Fortschritt ---------- */
.fortschritt { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; pointer-events: none; }
.fortschritt i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
html:not(.js) .fortschritt { display: none; }

/* ---------- Abschnitte ---------- */
.abschnitt { position: relative; padding: clamp(5rem, 10vh, 9rem) var(--rand); }
.abschnitt.nacht { background: var(--nacht); color: var(--hell); }
.abschnitt.papier { background: var(--papier); color: var(--tinte); }
.abschnitt.papier + .abschnitt.papier { padding-top: 2rem; }
.abschnitt.papier::before { content: ''; position: absolute; left: var(--rand); top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--gold) 0 0) no-repeat; background-size: 2px 100%; opacity: .55; pointer-events: none; }
.abschnitt.papier > * { position: relative; }
.abschnitt.papier .kopf, .abschnitt.papier .baukasten, .abschnitt.papier .zweispalter, .abschnitt.papier .quintessenz, .abschnitt.papier .schlusszeile, .abschnitt.papier .schritte-buehne, .abschnitt.papier .nutzen { margin-left: 3.5rem; }

.kopf { display: grid; gap: 1.1rem; justify-items: start; margin-bottom: 3.2rem; }
.kopf.breit { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "oben ." "titel text"; column-gap: 5rem; align-items: end; }
.kopf.breit .nr, .kopf.breit .kicker { grid-area: oben; }
.kopf.breit h2 { grid-area: titel; }
.kopf.breit .unterzeile { grid-area: text; }
.nr, .kicker { font-size: 1.25rem; font-weight: 500; letter-spacing: .14em; display: inline-flex; align-items: center; gap: .9rem; line-height: 1.2; }
.nr::before, .kicker::before { content: ''; width: 2.6rem; height: 2px; background: currentColor; }
.nacht .nr, .nacht .kicker { color: var(--gold); }
.papier .nr, .papier .kicker { color: var(--gold-tinte); }
h2 { font-size: 3.45rem; line-height: 1.06; max-width: 15em; }
h2.einzeilig { white-space: nowrap; max-width: none; font-size: min(3.45rem, 3.78vw); letter-spacing: -.02em; }
.unterzeile { font-size: 1.5rem; line-height: 1.5; max-width: 34em; }
.nacht .unterzeile { color: var(--hell-2); }
.papier .unterzeile { color: var(--tinte-2); }
p { font-size: 1.5rem; max-width: 34em; }
.schlusszeile { font-family: var(--sans); font-size: 2.05rem; font-weight: 500; line-height: 1.3; max-width: 26em; margin-top: 4rem; padding-top: 2rem; border-top: 2px solid var(--gold); }
.papier .schlusszeile { color: var(--tinte); }

/* ---------- Hero / Schluss ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 2rem; padding-top: 2.2rem; overflow: clip; isolation: isolate; }
.hero-bild { position: absolute; inset: 0; z-index: -1; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; transform: scale(var(--zoom, 1)); transform-origin: 70% 50%; }
.hero-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--nacht) 0 34%, rgba(12, 13, 17, .78) 52%, rgba(12, 13, 17, .25) 72%, rgba(12, 13, 17, 0) 100%), linear-gradient(0deg, var(--nacht) 0, rgba(12, 13, 17, 0) 22%); }
.hero-kopf { display: flex; align-items: center; }
.logo { display: inline-block; }
.logo img { width: 11rem; height: auto; }
.hero-text { align-self: center; display: grid; gap: 1.6rem; justify-items: start; max-width: 82%; padding: 2rem 0 4rem; }
h1 { font-size: 5.05rem; line-height: 1.04; letter-spacing: -.022em; }
.schluss h2 { font-size: 5.05rem; line-height: 1.04; max-width: 10em; }
.gold { color: var(--gold-hell); }
.kernaussage { font-size: 1.85rem; font-weight: 500; line-height: 1.38; max-width: 32em; color: var(--hell); }
.faden-strich { display: block; width: 5rem; height: 2px; background: var(--gold); }
.hero .unterzeile { max-width: 36em; }
.unterzeile.gross { font-size: 1.85rem; font-weight: 500; color: var(--hell); max-width: 28em; }
br.laptop { display: inline; }
br.handy { display: none; }

/* ---------- s01b Vorgeschichte ---------- */
.vorgeschichte { padding-top: clamp(4rem, 8vh, 7rem); }
.vorgeschichte h2 { max-width: 16em; }
.vorgeschichte-kopf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 5rem; align-items: end; }
.vorgeschichte-kopf .kopf { margin-bottom: 0; }
.doppelbild { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 3.2rem 0 0; }
.tafel-bild { position: relative; aspect-ratio: 2.2 / 1; overflow: hidden; background: var(--nacht-2); }
.tafel-bild img { width: 100%; height: 100%; object-fit: cover; }
.skala { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; width: 100%; color: var(--gold-hell); }
.skala path { fill: none; stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke; }
.skala .punkte { stroke-dasharray: 2 14; stroke-width: 3; opacity: .7; }
.vorgeschichte-text { max-width: 36em; }

/* ---------- s02 Baukasten ---------- */
.verbindung { padding-bottom: 4rem; }
.verbindung .kopf { margin-bottom: 2.8rem; }
.verbindung .schlusszeile { border-top: 0; padding-top: 0; margin-top: 2.6rem; }
.baukasten { display: flex; gap: 3rem; align-items: flex-start; position: relative; padding-bottom: 2.2rem; }
.fakt { flex: 1 1 0; min-width: 0; transition: flex-grow var(--dauer) var(--weich); }
.fakt.fokus { flex-grow: 2.4; }
.fakt-kopf { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.fakt-nr { font-size: 2.4rem; color: var(--gold-tinte); font-weight: 400; line-height: 1; letter-spacing: -.02em; transition: font-size var(--dauer) var(--weich); }
.fakt-titel { font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: .02em; transition: font-size var(--dauer) var(--weich); }
.fakt.fokus .fakt-nr, .fakt.fokus .fakt-titel { font-size: 3.6rem; }
.fakt p { margin-top: 1.2rem; color: var(--tinte-2); max-width: 24em; }
.fakt::after { content: ''; display: block; width: 4rem; height: 2px; background: var(--gold); margin-top: 1.6rem; }
.faden-verbindung { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--weich); }
html:not(.js) .faden-verbindung, .baukasten.verbunden .faden-verbindung { transform: scaleX(1); }

/* ---------- s03 Flow ---------- */
.zweispalter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 5rem; row-gap: 1.6rem; align-items: start; }
.spalte-titel { font-size: 1.5rem; font-weight: 600; line-height: 1.3; padding-bottom: 1rem; border-bottom: 2px solid var(--papier-linie); grid-row: 1; align-self: stretch; display: flex; align-items: flex-end; }
.spalte-titel.heute, .kette-heute, .ergebnis.heute { grid-column: 1; }
.spalte-titel.loop, .kreislauf, .ergebnis.loop { grid-column: 2; }
.kette-heute, .kreislauf { grid-row: 2; align-self: center; }
.ergebnis { grid-row: 3; display: grid; gap: .4rem; padding-top: .6rem; }
.ergebnis li { font-size: 1.5rem; line-height: 1.4; padding-left: 1.6rem; position: relative; color: var(--tinte); }
.ergebnis li::before { content: ''; position: absolute; left: 0; top: .75em; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--gold-tinte); }
.ergebnis.loop li::before { background: var(--gold); border-color: var(--gold); }

.kette-heute { display: grid; gap: 1.2rem; padding-top: .6rem; }
.kette-linie { grid-column: 1 / 8; grid-row: 2; width: 100%; height: 6rem; color: var(--gold-tinte); }
.kette-linie path, .kette-linie circle { fill: none; stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.kette-linie .stark { stroke-width: 6; }
.kette-linie .tick { stroke: var(--papier-linie); stroke-width: 2; }
.kette-linie .knoten { fill: var(--papier); }
.stationen { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: auto 6rem auto; }
.station { font-size: 1.25rem; line-height: 1.25; font-weight: 500; color: var(--tinte); text-align: left; grid-column: calc(var(--i) + 1) / span 2; padding-left: 25%; }
.station.oben { grid-row: 1; align-self: end; padding-bottom: .5rem; }
.station.unten { grid-row: 3; align-self: start; padding-top: .5rem; }
.stationen .stoerung { display: none; }
.legende { display: flex; gap: 2.4rem; flex-wrap: wrap; padding-top: .4rem; }
.legende-eintrag { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.25rem; font-weight: 500; color: var(--tinte-2); }
.legende-eintrag svg, .stoerung svg { width: 3rem; height: 1.45rem; color: var(--gold-tinte); }
.legende-eintrag path, .stoerung path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.legende-eintrag .stark, .stoerung .stark { stroke-width: 4; }

.kreislauf { display: grid; justify-items: center; }
.ring { position: relative; width: 100%; max-width: 27rem; aspect-ratio: 1; margin: .8rem 0 .6rem; }
.ring-linie { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold-tinte); }
.ring-linie .seg { fill: none; stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke; }
.ring-linie .rueck { stroke-dasharray: 6 10; stroke-width: 3; }
.ring-linie .knoten { fill: var(--papier); stroke: var(--gold-tinte); stroke-width: 3; vector-effect: non-scaling-stroke; }
.ring-station { position: absolute; font-size: 1.25rem; font-weight: 500; line-height: 1.25; color: var(--tinte); max-width: 7.2em; display: grid; gap: .15rem; }
.ring-station.oben { transform: translate(-50%, 0); text-align: left; }
.ring-station.unten { transform: translate(-50%, 0); }
.ring-station.links { transform: translate(-100%, -50%); text-align: left; }
.ring-station.rechts { transform: translate(0, -50%); }
.ring-nr { font-size: 1.25rem; color: var(--gold-tinte); letter-spacing: .1em; }
.ring-mitte { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.85rem; font-weight: 600; letter-spacing: -.01em; color: var(--hell); background: var(--nacht); border: 2px solid var(--gold); border-radius: 100px; padding: .55em 1.3em; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.rueckpfeil { position: absolute; left: 7%; top: 15%; font-size: 1.25rem; font-weight: 500; color: var(--gold-tinte); transform: rotate(-32deg); transform-origin: left center; white-space: nowrap; }

.quintessenz { margin-top: 5rem; padding-top: 2.6rem; border-top: 2px solid var(--papier-linie); display: grid; gap: 2rem; }
.quintessenz h3 { font-size: 1.85rem; font-weight: 600; }
.aussagen { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.aussage { display: grid; gap: .6rem; }
.aussage h4 { font-size: 1.25rem; font-weight: 500; letter-spacing: .14em; color: var(--gold-tinte); margin-bottom: .4rem; }
.aussage p { font-size: 1.85rem; line-height: 1.35; max-width: 20em; }
.aussage strong { color: var(--gold-tinte); font-weight: 600; }

/* ---------- s04 Prinzip ---------- */
.prinzip { display: grid; align-content: start; padding-top: 3.8rem; padding-bottom: 3.8rem; }
.prinzip .kopf { margin-bottom: 1.6rem; }
.prinzip .kopf.breit, .plattform .kopf.breit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.prinzip-buehne { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.core { grid-column: 2; grid-row: 1; display: grid; justify-items: center; gap: .8rem; position: relative; }
.core-ring { width: 100%; max-width: 19rem; aspect-ratio: 1; border-radius: 50%; padding: 5px; background: radial-gradient(closest-side, transparent 94%, rgba(201, 164, 79, .5) 96%, transparent 100%); position: relative; }
.core-ring::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 164, 79, .22), rgba(201, 164, 79, 0) 72%); z-index: 0; }
.core-film { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); background: var(--nacht-2); }
.core-film video { width: 100%; height: 100%; object-fit: cover; }
.core-unten { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .6rem 1.6rem; margin-top: 2.6rem; }
.knoten-titel { font-size: 1.5rem; font-weight: 600; letter-spacing: .18em; }
.knoten-liste { display: flex; gap: .9rem; align-items: center; font-size: 1.25rem; color: var(--hell-2); }
.knoten-liste i { font-style: normal; color: var(--gold); }
.mitte-plakette { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 2; font-size: 1.5rem; font-weight: 600; color: var(--hell); border: 2px solid var(--gold); border-radius: 100px; padding: .45em 1.3em; background: var(--nacht); white-space: nowrap; }
.seite { display: grid; gap: 1.6rem; align-content: center; padding: 2.4rem 2.6rem; border: 1px solid var(--nacht-linie); background: linear-gradient(180deg, rgba(28, 31, 39, .7), rgba(20, 22, 28, .4)); border-radius: 6px; grid-row: 1; }
.seite.intern { grid-column: 1; }
.seite.markt { grid-column: 3; }
.seite h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: .16em; color: var(--gold); }
.rollen { display: grid; gap: .3rem; }
.rollen li { font-size: 2.05rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.faehigkeiten { display: grid; gap: .5rem; padding-top: 1.4rem; border-top: 1px solid var(--nacht-linie); }
.faehigkeiten li { font-size: 1.5rem; color: var(--hell-2); padding-left: 1.5rem; position: relative; }
.faehigkeiten li::before { content: ''; position: absolute; left: 0; top: .7em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gold); }
.leitungen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--gold); overflow: visible; }
.leitungen path { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .75; }
.leitungen circle { fill: var(--gold-hell); }

/* ---------- s05a–c Kapitel ---------- */
.kapitel .kopf { margin-bottom: 3.6rem; }
.schritte-buehne { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 4rem; align-items: start; }
.schritte { display: grid; gap: 3.6rem; }
.schritt { position: relative; padding-left: 4.4rem; display: grid; gap: 1.3rem; justify-items: start; }
.schritt-kopf { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.schritt-nr { position: absolute; left: 0; top: 0; font-size: 2.4rem; line-height: 1; color: var(--gold-tinte); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.schritt h3 { font-size: 2.05rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; max-width: 22em; }
.schritt p { color: var(--tinte); max-width: 30em; }
.schritt .vorspann { font-weight: 500; }
.liste { display: grid; gap: .8rem; justify-items: start; width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips span { font-size: 1.3rem; line-height: 1.25; padding: .4em .9em; border: 1.5px solid var(--papier-linie); border-radius: 100px; background: #FBF8F1; color: var(--tinte); }
.kernsatz { font-family: var(--sans); font-size: 2.05rem; font-weight: 600; line-height: 1.3; color: var(--tinte); border-left: 4px solid var(--gold); padding-left: 1.2rem; margin-top: .4rem; }
.nachsatz { color: var(--tinte-2); }
.schritt::before { content: ''; position: absolute; left: 1.15rem; top: 3.3rem; bottom: -2rem; width: 2px; background: var(--gold-tinte); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--weich) .25s; }
.schritt::after { content: ''; position: absolute; left: calc(1.15rem - 6px); bottom: -1.7rem; width: 12px; height: 12px; border-right: 2px solid var(--gold-tinte); border-bottom: 2px solid var(--gold-tinte); transform: rotate(45deg); opacity: 0; transition: opacity .35s ease .95s; }
.schritt.an::before, html:not(.js) .schritt::before { transform: scaleY(1); }
.schritt.an::after, html:not(.js) .schritt::after { opacity: 1; }
.schritt:last-child::before, .schritt:last-child::after { display: none; }
.tafel { position: sticky; top: 8vh; height: 76vh; height: 76svh; display: grid; }
.tafel figure { grid-area: 1 / 1; position: relative; overflow: hidden; border-radius: 6px; box-shadow: var(--schatten); background: var(--nacht-2); opacity: 0; transition: opacity .7s ease; }
.tafel figure img { width: 100%; height: 100%; object-fit: cover; }
.tafel figure:first-child, .tafel figure.aktiv { opacity: 1; }
.tafel[data-aktiv] figure:first-child:not(.aktiv) { opacity: 0; }
.nutzen { margin-top: 5rem; padding-top: 3rem; border-top: 2px solid var(--papier-linie); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 4rem; align-items: center; }
.nutzen-text { display: grid; gap: 1.4rem; }
.nutzen h3 { font-size: 2.05rem; font-weight: 600; letter-spacing: -.01em; }
.nutzen-liste { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 2rem; }
.nutzen-liste li { font-size: 1.5rem; line-height: 1.35; padding-left: 1.6rem; position: relative; }
.nutzen-liste li::before { content: ''; position: absolute; left: 0; top: .72em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--gold); }
.nutzen-bild { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; box-shadow: var(--schatten); }
.nutzen-bild img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- s06 Plattform ---------- */
.fluss { display: grid; grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1.3fr) 6rem minmax(0, 1fr); align-items: stretch; margin-bottom: 4rem; }
.plattform { padding-top: 4rem; }
.plattform .kopf { margin-bottom: 1.6rem; }
.saeule { border: 1px solid var(--nacht-linie); border-radius: 6px; padding: 2.4rem 2.4rem 2.6rem; display: grid; gap: 1.4rem; align-content: start; background: linear-gradient(180deg, rgba(28, 31, 39, .7), rgba(20, 22, 28, .4)); }
.saeule.loop { border-color: var(--gold); background: var(--nacht-2); overflow: hidden; position: relative; }
.saeule h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: .16em; color: var(--gold); }
.saeule ul { display: grid; gap: .35rem; }
.saeule li { font-size: 1.5rem; line-height: 1.25; padding-left: 1.5rem; position: relative; color: var(--hell); }
.saeule li::before { content: ''; position: absolute; left: 0; top: .72em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gold); }
.saeule-film { margin: -2.4rem -2.4rem 1rem; aspect-ratio: 3.3 / 1; overflow: hidden; border-bottom: 1px solid var(--nacht-linie); }
.saeule-film video { width: 100%; height: 100%; object-fit: cover; }
.fluss-pfeil { display: grid; align-items: center; color: var(--gold); padding: 0 .6rem; }
.fluss-pfeil svg { width: 100%; height: 1.6rem; }
.fluss-pfeil path { fill: none; stroke: currentColor; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.karte { background: var(--nacht-2); border: 1px solid var(--nacht-linie); border-radius: 6px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.karte figure { aspect-ratio: 16 / 9; overflow: hidden; }
.karte img { width: 100%; height: 100%; object-fit: cover; }
.karte-text { padding: 2.2rem 2.4rem 2.6rem; display: grid; gap: 1.1rem; align-content: start; }
.karte h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: .18em; color: var(--gold); }
.kette-kurz { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; font-size: 1.25rem; font-weight: 500; color: var(--hell); }
.kette-kurz i { font-style: normal; color: var(--gold); }
.karte p { color: var(--hell-2); max-width: 26em; }

/* ---------- s06b Menschen ---------- */
.menschen { padding-top: 2rem; }
.menschen h2 { max-width: 14em; }
.personen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; max-width: 60em; margin-top: 1rem; }
.person { padding-top: 1.6rem; border-top: 2px solid var(--gold); display: grid; gap: .6rem; }
.person h3 { font-size: 2.05rem; font-weight: 600; letter-spacing: -.01em; }
.person p { color: var(--hell-2); }
.personen-satz { margin-top: 3rem; color: var(--hell); font-size: 1.5rem; }

/* ---------- s07 Schluss ---------- */
.schluss .hero-bild img { object-position: 78% 50%; }
.schluss .hero-bild::after { background: linear-gradient(90deg, var(--nacht) 0 34%, rgba(12, 13, 17, .78) 52%, rgba(12, 13, 17, .25) 72%, rgba(12, 13, 17, 0) 100%), linear-gradient(0deg, var(--nacht) 0, rgba(12, 13, 17, 0) 22%); }

/* ---------- s08 Impuls ---------- */
.impuls { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 5rem; align-items: center; }
.impuls h2 { max-width: 14em; }
.impuls .kopf { margin-bottom: 2.4rem; }
.impuls-text { display: grid; gap: 2.4rem; justify-items: start; }
.impuls-satz { font-size: 1.85rem; font-weight: 500; line-height: 1.4; max-width: 24em; color: var(--hell); }
.ansprech { display: grid; gap: .6rem; justify-items: start; padding-top: 2rem; border-top: 2px solid var(--gold); }
.ansprech h3 { font-size: 2.05rem; font-weight: 600; margin-bottom: .4rem; }
.kontaktzeile { font-size: 1.85rem; text-decoration: none; color: var(--gold-hell); border-bottom: 2px solid transparent; transition: border-color .3s ease; }
.kontaktzeile:hover { border-color: var(--gold-hell); }
.impuls-bild { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.impuls-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.impuls-bild::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 120px 60px var(--nacht); }
.impuls-ring { position: absolute; inset: -6%; width: 112%; height: 112%; color: var(--gold); }
.impuls-ring .seg { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ---------- Einblendung (nur mit JavaScript) ---------- */
.js .auf { opacity: 0; transform: translateY(1.4rem); transition: opacity .65s ease, transform .75s var(--weich); will-change: opacity, transform; }
.js .auf.an { opacity: 1; transform: none; }
.js .fakt.auf { transition: opacity .65s ease, transform .75s var(--weich), flex-grow var(--dauer) var(--weich); }
.js .zeichnen path, .js .zeichnen circle.seg { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .zeichnen.fertig path, .js .zeichnen.fertig circle.seg { stroke-dashoffset: 0; }
.js .zeichnen .knoten { opacity: 0; transition: opacity .4s ease; }
.js .zeichnen.fertig .knoten { opacity: 1; }
.js .zeichnen .punkte { stroke-dasharray: 2 14; }
.js .zeichnen.fertig .punkte { stroke-dasharray: 2 14; }

@media (prefers-reduced-motion: reduce) {
  .js .auf { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .zeichnen path, .js .zeichnen circle.seg { stroke-dashoffset: 0 !important; }
  .js .zeichnen .knoten { opacity: 1 !important; }
  .fakt, .fakt-nr, .fakt-titel, .faden-verbindung, .tafel figure, .lader, .schritt::before, .schritt::after { transition: none !important; }
  .schritt::before { transform: scaleY(1) !important; }
  .schritt::after { opacity: 1 !important; }
  .faden-verbindung { transform: scaleX(1) !important; }
}

/* ---------- Breiten ---------- */
@media (min-width: 2600px) {
  .abschnitt { padding-left: calc((100vw - 2380px) / 2); padding-right: calc((100vw - 2380px) / 2); }
  .abschnitt.papier::before { left: calc((100vw - 2380px) / 2); }
}
@media (max-width: 1500px) {
  .schritte-buehne, .nutzen { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 3rem; }
}
@media (max-width: 979px) {
  :root { --rand: clamp(22px, 6vw, 48px); }
  html { font-size: 13px; }
  .abschnitt { padding: 4rem var(--rand); }
  .abschnitt.papier .kopf, .abschnitt.papier .baukasten, .abschnitt.papier .zweispalter, .abschnitt.papier .quintessenz, .abschnitt.papier .schlusszeile, .abschnitt.papier .schritte-buehne, .abschnitt.papier .nutzen { margin-left: 0; }
  .abschnitt.papier::before { display: none; }
  h1 { font-size: 2.65rem; }
  h2 { font-size: 2.4rem; max-width: none; }
  h2.einzeilig { white-space: normal; font-size: 2.4rem; }
  .schluss h2 { font-size: 2.65rem; }
  br.laptop { display: none; }
  br.handy { display: inline; }
  .hero { padding-top: 1.6rem; gap: 1rem; }
  .hero-text { max-width: none; padding: 2rem 0 4rem; gap: 1.4rem; }
  .hero-bild img { object-position: 62% 30%; }
  .hero-bild::after { background: linear-gradient(0deg, var(--nacht) 0 42%, rgba(12, 13, 17, .78) 62%, rgba(12, 13, 17, .25) 85%, rgba(12, 13, 17, 0) 100%); }
  .logo img { width: 8.5rem; }
  .kernaussage, .unterzeile.gross, .impuls-satz { font-size: 1.5rem; }
  .doppelbild { grid-template-columns: 1fr; }
  .vorgeschichte-kopf, .abschnitt .kopf.breit { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; align-items: start; }
  .kopf.breit .nr, .kopf.breit .kicker, .kopf.breit h2, .kopf.breit .unterzeile { grid-area: auto; grid-column: 1; }
  .vorgeschichte-kopf .kopf { margin-bottom: 1.6rem; }
  .baukasten { flex-direction: column; gap: 2.4rem; }
  .fakt.fokus { flex-grow: 1; }
  .fakt.fokus .fakt-nr, .fakt.fokus .fakt-titel { font-size: 2.4rem; }
  .zweispalter { grid-template-columns: 1fr; grid-template-rows: auto; }
  .spalte-titel.heute, .kette-heute, .ergebnis.heute, .spalte-titel.loop, .kreislauf, .ergebnis.loop { grid-column: 1; grid-row: auto; }
  .spalte-titel.heute { order: 1; } .kette-heute { order: 2; } .ergebnis.heute { order: 3; } .spalte-titel.loop { order: 4; } .kreislauf { order: 5; } .ergebnis.loop { order: 6; }
  .ergebnis.heute { margin-bottom: 3rem; }
  .kette-linie { display: none; }
  .stationen { grid-template-columns: 1fr; grid-template-rows: none; row-gap: .5rem; padding-left: 2.2rem; border-left: 2px solid var(--gold-tinte); }
  .station, .station.oben, .station.unten, .station.letzte { grid-column: 1; grid-row: auto; padding: 0; position: relative; text-align: left; }
  .station::before { content: ''; position: absolute; left: calc(-2.2rem - 8px); top: .3em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gold-tinte); background: var(--papier); }
  .stationen .stoerung { display: block; padding: .2rem 0; }
  .ring { max-width: 22rem; margin: 4rem auto 3.5rem; }
  .zweispalter { grid-template-columns: 1fr; }
  .ring-station { font-size: 1.25rem; max-width: 7.5em; }
  .ring-mitte { font-size: 1.25rem; padding: .5em 1em; }
  .rueckpfeil { left: 0; top: -16%; transform: none; }
  .aussagen { grid-template-columns: 1fr; gap: 2.4rem; }
  .prinzip-buehne { grid-template-columns: 1fr; gap: 2rem; }
  .core { grid-column: 1; grid-row: 1; }
  .seite.intern { grid-column: 1; grid-row: 2; }
  .seite.markt { grid-column: 1; grid-row: 3; }
  .leitungen { display: none; }
  .schritte-buehne { grid-template-columns: 1fr; }
  .tafel { position: static; height: auto; grid-template-columns: 1fr; order: -1; margin-bottom: 2rem; }
  .tafel figure { aspect-ratio: 16 / 10; }
  .nutzen { grid-template-columns: 1fr; }
  .nutzen-liste { grid-template-columns: 1fr; }
  .fluss { grid-template-columns: 1fr; gap: .8rem; }
  .fluss-pfeil { justify-items: center; padding: .2rem 0; }
  .fluss-pfeil svg { width: 1.6rem; height: 3rem; transform: rotate(90deg); }
  .karten { grid-template-columns: 1fr; }
  .personen { grid-template-columns: 1fr; }
  .impuls { grid-template-columns: 1fr; }
  .impuls-bild { max-width: 20rem; justify-self: start; }
  .schritt { padding-left: 3.4rem; }
}
@media (max-width: 979px) and (min-width: 600px) {
  .karten { grid-template-columns: 1fr 1fr; }
}