/* Liakim Live · Funnel im Firmament-System
   Aufbau nach Sektionsfolge des akquise.de-Funnels, Gestaltung aus „Firmament":
   zwei Tinten (Indigo, Papier), Amethyst als Licht, kein Gold, Kanten aus dem Schirm. */

@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/google-sans-flex-latin.woff2") format("woff2");
  font-weight: 1 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  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: "Google Sans Flex";
  src: url("../fonts/google-sans-flex-latin-ext.woff2") format("woff2");
  font-weight: 1 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

:root {
  --papier: #F7F3EA;
  --karte: #FBF9F4;
  --karte-2: #F0EBDF;
  --tinte: #211B43;
  --tinte-2: #514B6E;
  --tinte-3: #7D7893;
  --nacht: #100D24;
  --nacht-2: #1A1638;
  --stich: #2B2453;
  --am: #5A45D4;
  --am-hell: #E9E4FB;
  --am-n: #B3A1FF;
  --cy: #4CC9DD;
  --linie: rgba(33, 27, 67, .15);
  --linie-fein: rgba(33, 27, 67, .07);
  --linie-n: rgba(247, 243, 234, .16);
  --nav-h: 68px;
  --rand: 24px;
  --breite: 1200px;
  --schrift: "Google Sans Flex", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 420;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Filmkorn wie im Archiv (liakim-archiv, globals.css): dieselbe Kachel, dieselbe Stärke 0,2.
   Auf Okans Wunsch (12.10.2026) auch auf dem Handy; statische Kachel ohne Filter, eigene Ebene. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background: url("../media/korn.png") repeat; background-size: 128px 128px; opacity: .2;
  transform: translateZ(0);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
svg { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinte); color: var(--papier); padding: 10px 16px; text-decoration: none; }
.sprung:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--am); outline-offset: 3px; }
[data-kante]:focus-visible { clip-path: none !important; }

/* ── Schrift ─────────────────────────────────────────────── */
.weit { font-stretch: 151%; font-weight: 300; letter-spacing: -.01em; }
.akzent { color: var(--am); }
.h-xl, .h-l, .h-m { color: var(--tinte); text-wrap: balance; }
.h-xl { font-size: clamp(46px, 7vw, 92px); line-height: .96; font-weight: 660; letter-spacing: -.04em; }
.h-xl .weit { font-weight: 260; letter-spacing: -.02em; }
.h-xl--satz { font-size: clamp(38px, 5.3vw, 74px); line-height: 1.02; max-width: 1060px; }
.h-l { font-size: clamp(32px, 4.1vw, 54px); line-height: 1.04; font-weight: 620; letter-spacing: -.032em; }
.h-l .weit { letter-spacing: -.015em; }
.h-m { font-size: clamp(24px, 2.3vw, 31px); line-height: 1.1; font-weight: 620; letter-spacing: -.025em; }
.unterzeile { font-size: 17px; line-height: 1.5; color: var(--tinte-2); max-width: 600px; margin-inline: auto; text-wrap: pretty; }
.unterzeile strong { color: var(--tinte); font-weight: 580; }
strong, b { font-weight: 600; }

/* ── Rahmen und Abschnitte ───────────────────────────────── */
.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: clamp(72px, 9vw, 120px); position: relative; }
.abschnitt--eng { padding-block: clamp(40px, 5vw, 64px); }
.kopf { text-align: center; display: grid; justify-items: center; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
.mitte { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.fussnote { margin-top: 18px; font-size: 13px; color: var(--tinte-3); text-align: center; }
.fussnote--mitte { text-align: center; }

/* ── Augenbraue (Pille mit zwei kleinen Rädern) ──────────── */
.augenbraue {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; background: var(--karte); color: var(--tinte);
  font-size: 13.5px; font-weight: 540; letter-spacing: .005em;
  box-shadow: inset 0 0 0 1px var(--linie);
}
.augenbraue svg { width: 14px; height: 14px; color: var(--am); flex: none; }
.augenbraue--nacht { background: rgba(247, 243, 234, .07); color: var(--papier); box-shadow: inset 0 0 0 1px var(--linie-n); }
.augenbraue--nacht svg { color: var(--am-n); }

/* ── Kanten: die JS-Datei setzt clip-path; vorher gelten gerade Linien ── */
[data-kante].kante-an { box-shadow: none; }
.kante-linie { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; background: none !important; border-radius: 0 !important; color: inherit !important; pointer-events: none; overflow: visible; z-index: 3; }
.kante-linie path { fill: none; stroke: var(--kante-farbe, var(--linie)); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ── Knöpfe ──────────────────────────────────────────────── */
.knopf {
  --kante-farbe: transparent;
  position: relative;
  display: inline-flex; align-items: center; gap: 16px;
  min-height: 52px; padding: 9px 9px 9px 22px;
  background: var(--tinte); color: var(--papier);
  font-size: 16px; font-weight: 520; letter-spacing: -.005em; line-height: 1.15;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .25s;
}
.knopf .weit { font-weight: 330; }
.knopf__pfeil { display: grid; place-items: center; width: 40px; height: 34px; background: rgba(247, 243, 234, .14); flex: none; transition: background-color .25s; }
.knopf__pfeil svg { width: 19px; height: 19px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.knopf:hover { background: #2E2760; transform: translateY(-1px); }
.knopf:hover .knopf__pfeil { background: var(--am); }
.knopf:hover .knopf__pfeil svg { transform: translateX(3px); }
.knopf:active { transform: translateY(0) scale(.99); }
.knopf--hell { background: var(--papier); color: var(--tinte); }
.knopf--hell .knopf__pfeil { background: rgba(33, 27, 67, .08); }
.knopf--hell:hover { background: #fff; }
.knopf--hell:hover .knopf__pfeil { background: var(--am); color: var(--papier); }
.knopf--klein { min-height: 46px; font-size: 15px; }
.knopf--nav { min-height: 44px; font-size: 15px; padding: 6px 6px 6px 18px; gap: 12px; }
.knopf--nav .knopf__pfeil { width: 36px; height: 30px; }

/* ── Navigation ─────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  background: rgba(247, 243, 234, .8);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--linie-fein);
}
.nav__innen { height: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); }
.marke__signet { width: 34px; height: 34px; color: var(--tinte); }
.marke__wort { white-space: nowrap; font-size: 19px; font-weight: 640; letter-spacing: -.02em; }
.marke__wort .weit { font-weight: 300; }

/* ── 1 · Hero ───────────────────────────────────────────── */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 72px)); padding-bottom: clamp(56px, 7vw, 96px); isolation: isolate; }
.hero__raster {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 6 - 1px), var(--linie-fein) calc(100% / 6 - 1px), var(--linie-fein) calc(100% / 6));
  background-size: min(100%, 1440px) 100%; background-position: center top; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(#000 0%, #000 60%, transparent 95%); mask-image: linear-gradient(#000 0%, #000 60%, transparent 95%);
}
.hero__kopf { text-align: center; display: grid; justify-items: center; gap: 20px; }
.hero__kopf .unterzeile { max-width: 560px; }
.hero__buehne { position: relative; margin-top: clamp(36px, 5vw, 56px); max-width: 1040px; }
.buehne {
  position: relative; aspect-ratio: 16 / 8.6; background: var(--nacht); overflow: hidden; color: var(--papier);
  display: grid; grid-template-columns: 1fr; align-items: end; justify-items: end;
}
.buehne__himmel { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.buehne__himmel img { width: min(118%, 1100px); max-width: none; aspect-ratio: 1; opacity: .95; }
@media (prefers-reduced-motion: no-preference) {
  .buehne__himmel img { animation: drehen 360s linear infinite; }
}
@keyframes drehen { to { transform: rotate(-360deg); } }
.buehne::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 30%, rgba(16, 13, 36, .55) 100%); pointer-events: none; }
.buehne__mitte { position: relative; z-index: 2; padding: clamp(20px, 3.4vw, 40px); align-self: start; max-width: 380px; }
.buehne__l { width: 26px; height: 26px; color: var(--am-n); margin-bottom: 12px; }
.buehne__satz { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.25; font-weight: 560; letter-spacing: -.015em; text-wrap: balance; }
.buehne__satz .weit { color: var(--am-n); }
.buehne__figur {
  position: relative; z-index: 2; width: clamp(150px, 26vw, 300px); aspect-ratio: 100 / 118; object-fit: cover; object-position: center top;
  margin-right: clamp(16px, 3vw, 40px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118' preserveAspectRatio='none'%3E%3Cpath d='M0 118V50C0 22 22 0 50 0s50 22 50 50v68Q91.7 109 83.3 118Q75 109 66.7 118Q58.3 109 50 118Q41.7 109 33.3 118Q25 109 16.7 118Q8.3 109 0 118Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118' preserveAspectRatio='none'%3E%3Cpath d='M0 118V50C0 22 22 0 50 0s50 22 50 50v68Q91.7 109 83.3 118Q75 109 66.7 118Q58.3 109 50 118Q41.7 109 33.3 118Q25 109 16.7 118Q8.3 109 0 118Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Hero-Video auf der Bühne (wie das Hero-Video bei akquise.de). Grund des Videos ist #FBFAF6,
   dieselbe Fläche trägt die Bühne, damit Video und Rahmen verschmelzen. */
.buehne--video { aspect-ratio: 16 / 9; background: #FBFAF6; box-shadow: inset 0 0 0 1px var(--linie); display: block; }
.buehne--video::after { display: none; }
.buehne__poster, .buehne__poster img, .buehne__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.buehne__poster img, .buehne__video { object-fit: cover; }
.buehne__video { opacity: 0; transition: opacity .6s ease; }
.buehne__video.laeuft { opacity: 1; }
.buehne__pause {
  position: absolute; left: 16px; bottom: 16px; z-index: 5; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgba(33, 27, 67, .72); color: var(--papier); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .2s, transform .2s;
}
.buehne__pause:hover { background: var(--tinte); transform: scale(1.06); }
.buehne__pause svg { width: 18px; height: 18px; }
.buehne__pause[hidden] { display: none; }
/* Belege hängen beim Video weiter außen, damit sie keine Gesichter verdecken */
.hero__buehne--video .beleg--1 { left: -7%; top: 7%; }
.hero__buehne--video .beleg--2 { right: -7%; top: 5%; }
.hero__buehne--video .beleg--3 { left: -7%; top: auto; bottom: 12%; }
.hero__buehne--video .beleg--4 { right: -7%; top: auto; bottom: 18%; }
.hero__buehne--video + .hero__karte-rahmen .hero__karte { margin-top: clamp(24px, 3vw, 36px); }

.beleg {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; background: var(--karte); color: var(--tinte);
  text-decoration: none; line-height: 1.15; box-shadow: inset 0 0 0 1px var(--linie);
}
.beleg b { display: block; font-size: 15px; font-weight: 620; letter-spacing: -.01em; }
.beleg small { display: block; font-size: 12.5px; color: var(--tinte-2); margin-top: 2px; }
.beleg__gross { font-size: 28px !important; font-weight: 680 !important; color: var(--am); letter-spacing: -.03em !important; }
.beleg--2 { flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 18px; }
.beleg__zeichen { width: 34px; height: 34px; display: grid; place-items: center; background: var(--am-hell); color: var(--am); flex: none; }
.beleg__zeichen svg { width: 18px; height: 18px; }
.beleg__zeichen--live i { width: 10px; height: 10px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 0 4px rgba(76, 201, 221, .2); }
@media (prefers-reduced-motion: no-preference) { .beleg__zeichen--live i { animation: puls 2.4s ease-in-out infinite; } }
@keyframes puls { 50% { box-shadow: 0 0 0 7px rgba(76, 201, 221, .05); } }
.beleg__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--am-n); }
.beleg--1 { left: -3%; top: 12%; }
.beleg--2 { right: -3%; top: 9%; }
.beleg--3 { left: -2%; bottom: 22%; }
.beleg--4 { right: -4%; top: 44%; }
.beleg--4:hover { background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .beleg { animation: schweben 7s ease-in-out infinite; }
  .beleg--2 { animation-delay: -2s; } .beleg--3 { animation-delay: -4s; } .beleg--4 { animation-delay: -5.5s; }
}
@keyframes schweben { 50% { transform: translateY(-6px); } }

.hero__karte-rahmen { position: relative; z-index: 5; }
.hero__karte {
  position: relative; max-width: 720px; margin: clamp(-48px, -4vw, -24px) auto 0; padding: clamp(24px, 3.4vw, 40px);
  background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie);
  display: grid; gap: 22px; justify-items: start;
}
.hero__lead { font-size: 17px; color: var(--tinte-2); text-wrap: pretty; }
.hero__lead strong { color: var(--tinte); }
.hero__stimmen { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--tinte-2); text-decoration: none; }
.hero__stimmen:hover span:last-child { color: var(--am); text-decoration: underline; text-underline-offset: 3px; }

.initialen { display: inline-flex; }
.initialen i { width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 640; background: var(--am-hell); color: var(--am); box-shadow: 0 0 0 2px var(--karte); }
.initialen i:first-child { margin-left: 0; }
.initialen i:nth-child(2) { background: var(--tinte); color: var(--papier); }
.initialen i:nth-child(3) { background: var(--karte-2); color: var(--tinte); }
.initialen i:nth-child(4) { background: var(--am); color: var(--papier); }

/* Schirmliste: Aufzählung mit kleinem Schirm, je Zeile eine Bahn weiter gedreht */
.schirmliste { display: grid; gap: 12px; }
.schirmliste li { position: relative; padding-left: 30px; color: var(--tinte); font-size: 15.5px; line-height: 1.45; }
.schirmliste svg { position: absolute; left: 0; top: .12em; width: 18px; height: 18px; color: var(--am); }
.schirmliste li:nth-child(2) svg { transform: rotate(30deg); }
.schirmliste li:nth-child(3) svg { transform: rotate(60deg); }
.schirmliste li:nth-child(4) svg { transform: rotate(90deg); }

/* ── 2 · Warum jetzt ─────────────────────────────────────── */
.frage-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); max-width: 1120px; margin-inline: auto; }
.frage { display: grid; grid-template-rows: 1fr auto; gap: 10px; }
.frage__blase { position: relative; padding: 24px 26px 26px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); }
.frage__blase h3 { font-size: 18px; font-weight: 620; letter-spacing: -.015em; margin-bottom: 8px; }
.frage__blase p { font-size: 15.5px; color: var(--tinte-2); }
.frage__leiste { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 8px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); min-width: 0; }
.frage__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--karte-2); font-size: 13px; font-weight: 560; flex: none; }
.frage__chip svg { width: 15px; height: 15px; color: var(--am); }
.frage__stand { flex: 1; min-width: 0; text-align: right; font-size: 13px; color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frage__stand b { color: var(--am); font-weight: 620; font-feature-settings: "tnum" 1; }
.frage__senden { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: var(--papier); flex: none; }
.frage__senden svg { width: 17px; height: 17px; }

/* ── 3 · App ─────────────────────────────────────────────── */
.app-karte { position: relative; display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: clamp(20px, 3vw, 40px); padding: clamp(16px, 2vw, 22px); background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); }
.app-karte__text { padding: clamp(14px, 2.4vw, 30px) clamp(8px, 1.4vw, 16px); display: grid; align-content: center; justify-items: start; gap: 22px; }
.marke-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--am-hell); color: var(--am); font-size: 12.5px; font-weight: 620; letter-spacing: .02em; }
.marke-chip svg { width: 12px; height: 12px; }
.hakenliste { display: grid; gap: 14px; }
.hakenliste li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.45; }
.haken-rund { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--am); color: var(--papier); margin-top: .1em; flex: none; }
.haken-rund svg { width: 13px; height: 13px; }
.zeit { display: inline-flex; align-items: center; gap: .25em; font-size: .82em; font-weight: 620; line-height: 1; padding: .3em .55em .28em .4em; border-radius: 99px; background: rgba(90, 69, 212, .11); color: var(--am); white-space: nowrap; vertical-align: .08em; font-feature-settings: "tnum" 1; }
.zeit svg { width: 1em; height: 1em; }
.app-karte__geraete { position: relative; min-height: 440px; background: var(--nacht); overflow: hidden; display: grid; place-items: center; padding: 40px 24px; }
.app-karte__geraete::before { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 70%; background: radial-gradient(ellipse at center, rgba(124, 92, 255, .35), transparent 70%); }
.laptop { position: relative; width: min(100%, 560px); transform: perspective(1400px) rotateY(-16deg) rotateX(7deg) rotateZ(1deg); transform-origin: 60% 50%; }
.laptop__schirm { background: #0A0817; padding: 2.2% 2.2% 3%; border-radius: 14px 14px 4px 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.laptop__schirm img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 4px; }
.laptop__fuss { height: 14px; margin: 0 -6%; background: linear-gradient(#2a2640, #14111f); border-radius: 0 0 14px 14px; }
.telefon { position: absolute; right: 6%; bottom: 8%; width: clamp(110px, 16%, 170px); background: #0A0817; padding: 6px; border-radius: 26px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -20px rgba(0, 0, 0, .8); transform: rotate(5deg); }
.telefon img { border-radius: 20px; aspect-ratio: 390 / 844; object-fit: cover; }

/* ── 4 · Vier Lehren ─────────────────────────────────────── */
.lehren { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.lehre { position: relative; padding: 12px 12px 22px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); display: grid; gap: 14px; align-content: start; }
.lehre__bild { position: relative; aspect-ratio: 1; background: var(--papier); overflow: hidden; }
.lehre__bild img { width: 100%; height: 100%; object-fit: contain; padding: 17% 9% 15%; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.lehre:hover .lehre__bild img { transform: scale(1.05) rotate(-4deg); }
.lehre__kopf { position: absolute; top: 22px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.lehre__nr { font-size: 13px; font-weight: 300; font-stretch: 151%; color: var(--am); }
.lehre__chip { font-size: 11.5px; font-weight: 600; padding: 4px 9px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); }
.lehre__name { position: relative; margin-top: -42px; margin-inline: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; padding: 10px 14px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); z-index: 2; }
.lehre__name b { font-size: 16px; font-weight: 640; letter-spacing: -.015em; }
.lehre__name .weit { font-size: 12.5px; color: var(--tinte-2); }
.lehre > p { padding-inline: 10px; font-size: 14px; color: var(--tinte-2); line-height: 1.45; }
.lehre > p strong { color: var(--tinte); }

/* ── 5 · Syncretism ──────────────────────────────────────── */
.spur { position: relative; height: 44px; max-width: 1120px; margin: 0 auto 28px; display: grid; align-items: center; }
.spur__skala { height: 16px; background:
  repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px calc(100% / 12)),
  repeating-linear-gradient(90deg, var(--linie-fein) 0 1px, transparent 1px calc(100% / 72)),
  var(--karte-2);
  box-shadow: inset 0 0 0 1px var(--linie-fein); }
.spur__knauf { position: absolute; left: calc(50% - 32px); top: 0; width: 64px; height: 44px; display: grid; place-items: center; background: var(--tinte); color: var(--papier); }
.spur__knauf svg { width: 24px; height: 24px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .spur__knauf { animation: spur-lauf linear both; animation-timeline: view(); animation-range: cover 15% cover 55%; }
    @keyframes spur-lauf { from { left: 0; } to { left: calc(100% - 64px); } }
  }
}
.weg { display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: clamp(14px, 2vw, 24px); max-width: 1120px; margin-inline: auto; align-items: start; }
.weg__spalte { display: grid; gap: 14px; }
.weg__spalte--vorher, .weg__spalte--nachher { margin-top: 0; }
.weg__pille { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 20px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); }
.weg__pille b { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.weg__pille span { font-size: 13px; color: var(--tinte-3); }
.weg__pille--hell { background: var(--am-hell); }
.weg__pille--hell span { color: var(--am); font-weight: 600; }
.weg__karte { position: relative; padding: 14px 14px 22px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); display: grid; gap: 18px; }
.weg__spalte--vorher .weg__karte, .weg__spalte--nachher .weg__karte { margin-inline: 10px; }
.weg__bild { aspect-ratio: 1; background: var(--papier); overflow: hidden; display: grid; place-items: center; }
.weg__bild img { width: 92%; height: 92%; object-fit: contain; }
.weg__bild--blass img { filter: grayscale(1) contrast(.85); opacity: .7; }
.weg__liste { display: grid; gap: 10px; padding-inline: 6px; }
.weg__liste li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.35; color: var(--tinte-2); }
.weg__liste svg { width: 18px; height: 18px; color: var(--tinte-3); margin-top: .05em; }
.weg__liste--verblasst li:nth-child(3) { opacity: .55; filter: blur(.4px); }
.weg__liste--verblasst li:nth-child(4) { opacity: .3; filter: blur(1.2px); }
.weg__liste--l li { grid-template-columns: 22px 1fr; color: var(--tinte); }
.weg__liste--l svg { width: 20px; height: 20px; color: var(--am); }
.weg__liste--l b, .weg__liste--l div { display: block; }
.weg__liste--l b { font-size: 15.5px; }
.weg__liste--l div { font-size: 14px; color: var(--tinte-2); }
.weg__fazit { padding: 0 6px; font-size: 14px; color: var(--tinte-2); }
.weg__fazit b { display: block; font-size: 16px; color: var(--tinte); }
.weg__karte--mitte { padding: 16px 16px 28px; }
.weg__foto { aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--karte-2); }
.weg__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.weg__punkte { display: grid; gap: 18px; padding: 4px 18px 0; }
.weg__punkte li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: center; font-size: 15px; color: var(--tinte-2); line-height: 1.35; }
.weg__punkte b { display: block; font-size: 18px; color: var(--tinte); font-weight: 620; letter-spacing: -.015em; }
.weg__icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--tinte); color: var(--am-n); }
.weg__icon svg { width: 24px; height: 24px; }

/* ── 6 · Band mit Figur ──────────────────────────────────── */
#unterschied .rahmen, #lehrer .rahmen { position: relative; }
.band { position: relative; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 72px); min-height: 360px; display: grid; align-items: center; }
.band__text { max-width: 600px; display: grid; gap: 20px; justify-items: start; }
.band__text p { color: var(--tinte-2); font-size: 16.5px; text-wrap: pretty; }
.band__text p strong { color: var(--tinte); }
.band__figur {
  position: absolute; right: calc(var(--rand) + clamp(16px, 4vw, 64px)); bottom: 7px; z-index: 4;
  width: clamp(240px, 31vw, 400px); aspect-ratio: 100 / 112; object-fit: cover; object-position: center top;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' preserveAspectRatio='none'%3E%3Cpath d='M0 112V50C0 22 22 0 50 0s50 22 50 50v62Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' preserveAspectRatio='none'%3E%3Cpath d='M0 112V50C0 22 22 0 50 0s50 22 50 50v62Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
#unterschied .rahmen { padding-top: 120px; }
#unterschied .band { min-height: 340px; }
.band .h-l { font-size: clamp(30px, 3.3vw, 44px); }
.band__text { position: relative; z-index: 5; }
.l-ecke { position: absolute; width: 38px; height: 38px; color: var(--tinte); opacity: .85; z-index: 3; }
.l-ecke--or { top: 16px; right: 16px; transform: rotate(180deg); }
.l-ecke--ul { bottom: 16px; left: 16px; }
.l-ecke--hell { color: var(--papier); opacity: .7; }
.band--foto { grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 3vw, 48px); padding-right: clamp(16px, 2vw, 22px); padding-block: clamp(16px, 2vw, 22px); padding-left: clamp(24px, 5vw, 72px); }
.band--foto .band__text { padding-block: clamp(16px, 3vw, 40px); }
.band__foto { height: 100%; min-height: 380px; overflow: hidden; }
.band__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

/* ── 8 · Fächer mit drei Schlüsseln ──────────────────────── */
#schluessel, .hero, #vergleich { overflow-x: clip; }
.faecher { position: relative; height: clamp(360px, 46vw, 560px); display: flex; justify-content: center; align-items: flex-end; max-width: 1040px; margin-inline: auto; }
.faecher__karte { position: absolute; bottom: 0; width: clamp(180px, 25vw, 310px); transition: transform .6s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 26px 30px rgba(33, 27, 67, .18)); }
.faecher__karte img { width: 100%; }
.faecher__karte--1 { transform: translateX(-78%) rotate(-12deg); transform-origin: 50% 110%; }
.faecher__karte--2 { transform: translateY(-4%); z-index: 2; }
.faecher__karte--3 { transform: translateX(78%) rotate(12deg); transform-origin: 50% 110%; }
.faecher:hover .faecher__karte--1 { transform: translateX(-88%) rotate(-15deg); }
.faecher:hover .faecher__karte--3 { transform: translateX(88%) rotate(15deg); }
.faecher__karte:hover { z-index: 3; }
.faecher__karte--2:hover { transform: translateY(-8%); }

/* ── 9, 18, 22 · Duo: Bild links, Nacht rechts ───────────── */
.duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; background: var(--nacht); color: var(--papier); overflow: hidden; }
.duo__foto, .duo__bild { position: relative; min-height: 320px; }
.duo__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--nacht) 100%); }
.duo__bild { display: grid; place-items: center; overflow: hidden; }
.duo__bild img { width: 82%; max-width: 480px; }
.duo__text { position: relative; z-index: 2; padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 64px); display: grid; gap: 20px; align-content: center; justify-items: start; }
.duo__text .h-l { color: var(--papier); font-size: clamp(30px, 3.5vw, 46px); }
.duo__text .akzent { color: var(--am-n); }
.duo__text > p { color: rgba(247, 243, 234, .8); font-size: 16.5px; max-width: 470px; text-wrap: pretty; }
.notiz { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; font-size: 15px; color: rgba(247, 243, 234, .82); max-width: 470px; }
.notiz svg { width: 34px; height: 34px; color: var(--papier); padding: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linie-n); }
.notiz .weit { color: var(--papier); }
.notiz small { display: block; margin-top: 4px; font-size: 12.5px; opacity: .8; }
.notiz--hell { color: var(--tinte-2); }
.notiz--hell svg { color: var(--am); box-shadow: inset 0 0 0 1px var(--linie); }
.notiz--hell .weit { color: var(--tinte); }
.duo--sw .duo__foto img { filter: grayscale(1) contrast(1.05); object-position: 50% 30%; }
.duo--eingang .duo__bild { background: var(--nacht); }

/* ── 10 · Sieben Stationen (Stapel) ──────────────────────── */
.stapel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 1040px; margin-inline: auto; }
.station {
  position: sticky; top: calc(var(--nav-h) + 20px + var(--i) * 14px);
  display: grid; grid-template-columns: 1fr minmax(260px, 44%); gap: clamp(18px, 3vw, 36px);
  padding: clamp(18px, 2.2vw, 24px); background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie);
  min-height: min(560px, calc(100svh - var(--nav-h) - 60px));
}
.station__text { padding: clamp(10px, 2vw, 24px) clamp(6px, 1.4vw, 18px); display: grid; gap: 14px; align-content: start; }
.station__text > p { color: var(--tinte-2); font-size: 15.5px; max-width: 46ch; }
.station__titelzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.station__titel { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.04; font-weight: 640; letter-spacing: -.03em; }
.station__titel .weit { display: block; color: var(--am); }
.station__nr { flex: none; padding: 6px 12px; background: var(--karte-2); font-size: 13.5px; font-weight: 560; white-space: nowrap; }
.station__claim { font-size: 16px; color: var(--tinte) !important; font-weight: 540; }
.station__lern { font-size: 14px; color: var(--tinte-3) !important; margin-top: 4px; }
.station .schirmliste { gap: 9px; }
.station .schirmliste li { font-size: 14.5px; }
.station__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 8px; }
.station__preis { padding: 9px 16px; background: var(--karte-2); font-size: 15px; font-weight: 600; }
.station__preis .weit { color: var(--tinte-2); margin-right: 4px; }
.station__link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 560; color: var(--am); text-decoration: none; }
.station__link svg { width: 17px; height: 17px; transition: transform .25s; }
.station__link:hover svg { transform: translateX(3px); }
.station__bild { position: relative; background: var(--nacht); overflow: hidden; display: grid; place-items: center; padding: 28px 20px 88px; min-height: 360px; }
.station__bild::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 35%, rgba(124, 92, 255, .25), transparent 70%); }
.station__karte { position: relative; width: min(54%, 220px); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); transform: rotate(-3deg); }
.facher-klein { position: absolute; left: 50%; bottom: -24px; width: 86%; height: 110px; transform: translateX(-50%); }
.facher-klein i { position: absolute; bottom: 0; left: calc(50% - 26px); width: 52px; height: 86px; background: var(--stich); box-shadow: inset 0 0 0 1px rgba(179, 161, 255, .35); border-radius: 3px; transform-origin: 50% 160%; }
.facher-klein i:nth-child(1) { transform: rotate(-30deg); } .facher-klein i:nth-child(2) { transform: rotate(-20deg); }
.facher-klein i:nth-child(3) { transform: rotate(-10deg); } .facher-klein i:nth-child(4) { transform: rotate(0deg); }
.facher-klein i:nth-child(5) { transform: rotate(10deg); } .facher-klein i:nth-child(6) { transform: rotate(20deg); }
.facher-klein i:nth-child(7) { transform: rotate(30deg); }
.facher-klein i.an { background: var(--am-n); box-shadow: none; translate: 0 -14px; }
.stapel-ende { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; max-width: 760px; margin: clamp(48px, 6vw, 80px) auto 0; }
.stapel-ende > div { display: grid; gap: 16px; justify-items: start; }
.stapel-ende p { color: var(--tinte-2); }
.stapel-ende__foto { aspect-ratio: 4 / 5; overflow: hidden; }
.stapel-ende__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ── 11 · Begleitung ─────────────────────────────────────── */
.begleit { display: grid; gap: clamp(20px, 3vw, 32px); }
.begleit__karte { position: relative; display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(18px, 3vw, 40px); padding: clamp(16px, 2vw, 22px); background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); min-height: 460px; }
.begleit__text { position: relative; padding: clamp(14px, 2vw, 22px) clamp(8px, 1.4vw, 14px) 56px; display: grid; gap: 28px; align-content: start; }
.begleit__nr { position: absolute; left: clamp(8px, 1.4vw, 14px); bottom: 14px; font-size: 15px; font-weight: 300; font-stretch: 151%; color: var(--tinte-3); }
.iconliste { display: grid; gap: 20px; }
.iconliste li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; font-size: 14.5px; line-height: 1.45; color: var(--tinte-2); }
.iconliste b { color: var(--tinte); }
.iconliste__i { width: 34px; height: 34px; display: grid; place-items: center; background: var(--tinte); color: var(--am-n); }
.iconliste__i svg { width: 18px; height: 18px; }
.begleit__ansicht { position: relative; background: var(--nacht); overflow: hidden; display: grid; place-items: center; padding: 28px; min-height: 340px; }
.begleit__ansicht::before { content: ""; position: absolute; inset: auto 0 -30% 0; height: 70%; background: radial-gradient(ellipse at 50% 100%, rgba(124, 92, 255, .32), transparent 70%); }
.laptop--schraeg { transform: perspective(1400px) rotateY(-18deg) rotateX(10deg) rotateZ(-3deg) translateX(4%); }
.begleit__ansicht--foto { padding: 0; }
.begleit__ansicht--foto::before { display: none; }
.begleit__ansicht--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.begleit__ansicht--skript { background: var(--karte-2); align-items: start; padding-bottom: 0; }
.begleit__ansicht--skript::before { display: none; }
.begleit__ansicht--skript img { width: min(78%, 440px); box-shadow: 0 30px 60px -20px rgba(33, 27, 67, .35), 0 0 0 1px var(--linie); transform: rotate(-2deg) translateY(6%); }
.mini-chat { position: relative; width: min(100%, 520px); background: var(--nacht-2); box-shadow: 0 0 0 1px var(--linie-n), 0 30px 60px -20px rgba(0, 0, 0, .7); color: var(--papier); transform: perspective(1200px) rotateX(8deg) rotateZ(-2deg); border-radius: 12px; overflow: hidden; }
.chat__punkte { display: inline-flex; gap: 8px; }
.chat__punkte i { width: 12px; height: 12px; border-radius: 50%; }
.chat__punkte i:nth-child(1) { background: #B63D4D; }
.chat__punkte i:nth-child(2) { background: var(--am-n); }
.chat__punkte i:nth-child(3) { background: var(--cy); }
.mini-chat__kopf { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--stich); }
.mini-chat__kopf small { margin-left: auto; font-size: 12px; opacity: .65; }
.mini-chat__nachricht { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--linie-n); font-size: 14px; }
.mini-chat__nachricht b { font-size: 13.5px; }
.mini-chat__nachricht p { color: rgba(247, 243, 234, .8); }
.mini-chat__nachricht--blass { opacity: .4; filter: blur(.6px); }
.mini-chat__av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--am-n); color: var(--nacht); font-size: 11px; font-weight: 680; flex: none; }

/* ── 12 · Stimmen ────────────────────────────────────────── */
.stimme-gross { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); padding: clamp(16px, 2vw, 22px); background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); }
.stimme-gross__links { display: grid; gap: 14px; align-content: start; }
.stimme-gross__blase { position: relative; background: var(--nacht); color: var(--papier); padding: clamp(28px, 3.4vw, 44px); --kante-farbe: transparent; min-height: 300px; display: grid; align-content: center; gap: 20px; }
.stimme-gross__blase p { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.45; font-weight: 440; text-wrap: pretty; }
.stimme-gross__marke { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--papier); color: var(--tinte); font-size: 13px; font-weight: 560; --kante-farbe: transparent; }
.stimme-gross__marke svg { width: 13px; height: 13px; color: var(--am); }
.stimme-gross__wer { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.stimme-gross__wer b { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.stimme-gross__wer small { margin-left: auto; color: var(--tinte-3); font-size: 13px; }
.stimme-gross__rechts { display: grid; gap: 30px; align-content: center; padding: clamp(10px, 2vw, 28px) clamp(4px, 1vw, 16px); }
.block { display: grid; gap: 10px; }
.block__t { font-size: 21px; font-weight: 300; font-stretch: 151%; color: var(--tinte); letter-spacing: -.01em; }
.block__z { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 16px; color: var(--tinte); line-height: 1.45; }
.block__i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--am); color: var(--papier); margin-top: .05em; }
.block__i svg { width: 14px; height: 14px; }
.karussell { margin-top: clamp(24px, 3vw, 36px); }
.karussell__spur { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 48px) / 3)); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.karussell__spur::-webkit-scrollbar { display: none; }
.stimme { position: relative; scroll-snap-align: start; padding: 26px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); display: grid; gap: 20px; align-content: space-between; }
.stimme blockquote { font-size: 15.5px; line-height: 1.5; color: var(--tinte); }
.stimme figcaption { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.karussell__knoepfe { display: flex; gap: 10px; margin-top: 22px; }
.rund { width: 40px; height: 40px; display: grid; place-items: center; background: var(--tinte); color: var(--papier); border: 0; cursor: pointer; border-radius: 50%; transition: background-color .2s, opacity .2s; }
.rund:hover { background: var(--am); }
.rund[disabled] { opacity: .35; cursor: default; }
.rund svg { width: 18px; height: 18px; }

/* ── 13 · Deck im Lauf ───────────────────────────────────── */
.abschnitt--deck { overflow: hidden; }
.lauf { display: grid; gap: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lauf__reihe { display: flex; gap: 18px; width: max-content; }
.lauf__reihe img { width: clamp(130px, 13vw, 180px); aspect-ratio: 7 / 12; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .lauf__reihe { animation: laufen 70s linear infinite; }
  .lauf__reihe--rueck { animation-direction: reverse; animation-duration: 80s; }
  .lauf:hover .lauf__reihe { animation-play-state: paused; }
}
@keyframes laufen { to { transform: translateX(-50%); } }

/* ── 14 · Mosaik ─────────────────────────────────────────── */
.mosaik { display: grid; grid-template-columns: 1.1fr 1.15fr 1.55fr; grid-template-rows: 280px 340px; gap: 18px; }
.mosaik figure { position: relative; overflow: hidden; background: var(--karte-2); }
.mosaik img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.mosaik figure:hover img { transform: scale(1.04); }
.mosaik__1 { grid-column: 2 / 4; grid-row: 2; }
.mosaik__2 { grid-column: 1; grid-row: 1 / 3; }
.mosaik__3 { grid-column: 2; grid-row: 1; }
.mosaik__3 img { object-position: 50% 35%; }
.mosaik__4 { grid-column: 3; grid-row: 1; }
.mosaik__4 img { object-position: 50% 30%; }
.mosaik__5 { display: none; }

/* ── 15 · Vorstellung ────────────────────────────────────── */
.vorstellung { position: relative; display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 4vw, 56px); background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); align-items: center; }
.vorstellung__stapel { position: relative; aspect-ratio: 7 / 9; }
.vorstellung__stapel > * { position: absolute; width: 74%; aspect-ratio: 7 / 10; }
.vorstellung__hinten2 { left: 2%; top: 6%; transform: rotate(-9deg); object-fit: cover; }
.vorstellung__hinten { left: 10%; top: 3%; transform: rotate(-4deg); object-fit: cover; }
.vorstellung__vorne { left: 22%; top: 0; transform: rotate(3deg); background: var(--nacht); padding: 12px; filter: drop-shadow(0 30px 40px rgba(33, 27, 67, .25)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.vorstellung:hover .vorstellung__vorne { transform: rotate(1deg) translateY(-6px); }
.vorstellung__vorne img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.vorstellung__vorne .l-ecke { width: 26px; height: 26px; }
.vorstellung__text { display: grid; gap: 16px; justify-items: start; }
.vorstellung__text > p { color: var(--tinte-2); max-width: 60ch; text-wrap: pretty; }
.vorstellung__text > p strong { color: var(--tinte); }
.vorstellung__zeichen { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 22px; font-weight: 640; letter-spacing: -.02em; }
.vorstellung__zeichen svg { width: 46px; height: 46px; color: var(--tinte); }

/* ── 16 · Haltung ────────────────────────────────────────── */
.haltung { padding-bottom: clamp(56px, 7vw, 96px); overflow: hidden; }
.haltung__fotos { display: grid; grid-template-columns: repeat(3, 1fr); height: clamp(300px, 38vw, 560px); }
.haltung__fotos figure { overflow: hidden; }
.haltung__fotos img { width: 100%; height: 100%; object-fit: cover; }
.haltung__fotos figure:nth-child(1) img { object-position: 50% 30%; }
.werte { display: grid; gap: 16px; margin-top: 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.werte__reihe { display: flex; gap: 18px; width: max-content; padding-inline: 9px; }
.wert { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: center; width: 400px; padding: 20px 24px 20px 20px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); flex: none; }
.wert__i { width: 58px; height: 58px; display: grid; place-items: center; background: var(--tinte); color: var(--am-n); }
.wert__i svg { width: 28px; height: 28px; }
.wert__t { display: inline-block; padding: 3px 10px; margin-bottom: 6px; background: var(--am-hell); color: var(--am); font-size: 13.5px; font-weight: 620; }
.wert p:last-child { font-size: 15px; color: var(--tinte); line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .werte__reihe { animation: laufen 60s linear infinite; }
  .werte__reihe--rueck { animation-direction: reverse; animation-duration: 68s; }
  .werte:hover .werte__reihe { animation-play-state: paused; }
}

/* ── 17 · Vergleich ──────────────────────────────────────── */
.vergleich { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; max-width: 1120px; margin-inline: auto; align-items: center; }
.vergleich__anders { position: relative; grid-column: 1; grid-row: 1; align-self: start; margin-top: 50px; padding: 36px 40px 40px; background: var(--karte-2); box-shadow: inset 0 0 0 1px var(--linie); margin-right: -30px; }
.vergleich__t { font-size: 24px; font-weight: 600; letter-spacing: -.02em; text-align: center; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--linie); }
.vergleich__anders ul { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.vergleich__anders li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; color: var(--tinte-2); }
.vergleich__anders svg { width: 20px; height: 20px; color: var(--papier); background: var(--tinte); border-radius: 50%; }
.vergleich__faecher { grid-column: 1; grid-row: 2; position: relative; height: 260px; }
.vergleich__faecher img { position: absolute; bottom: -40px; left: 10%; width: 120px; transform-origin: 50% 150%; filter: drop-shadow(0 14px 20px rgba(33, 27, 67, .2)); }
.vergleich__faecher img:nth-child(1) { transform: rotate(-28deg); } .vergleich__faecher img:nth-child(2) { transform: rotate(-14deg) translateX(30px); }
.vergleich__faecher img:nth-child(3) { transform: rotate(0deg) translateX(60px); } .vergleich__faecher img:nth-child(4) { transform: rotate(14deg) translateX(90px); }
.vergleich__faecher img:nth-child(5) { transform: rotate(28deg) translateX(120px); }
.vergleich__wir { position: relative; grid-column: 2; grid-row: 1 / 3; z-index: 2; background: var(--karte); box-shadow: inset 0 0 0 1px var(--tinte); --kante-farbe: var(--tinte); padding: 0 0 clamp(28px, 3vw, 40px); display: grid; justify-items: center; gap: 26px; outline: 8px solid var(--nacht); outline-offset: -8px; }
.vergleich__wir-kopf { width: 100%; display: flex; justify-content: center; align-items: center; gap: 14px; padding: 34px 20px 28px; border-bottom: 1px solid var(--linie); font-size: clamp(30px, 3.4vw, 44px); font-weight: 660; letter-spacing: -.03em; background: var(--karte-2); }
.vergleich__wir-kopf svg { width: 56px; height: 56px; color: var(--tinte); }
.vergleich__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-inline: clamp(20px, 3vw, 44px); }
.vergleich__chips li { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); font-size: 15px; font-weight: 500; }
.vergleich__satz { font-size: clamp(26px, 2.8vw, 36px); font-weight: 640; letter-spacing: -.03em; text-align: center; line-height: 1.05; }
.vergleich__satz .weit { color: var(--am); display: block; }

/* ── 19 · Schritte ───────────────────────────────────────── */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 36px); max-width: 1160px; margin-inline: auto; }
.schritt { position: relative; padding: 36px 30px 44px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); display: grid; justify-items: center; gap: 18px; text-align: center; align-content: start; }
.schritt__ansicht { width: 100%; min-height: 290px; display: grid; place-items: center; }
.schritt__nr { padding: 6px 14px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); font-size: 14px; font-weight: 520; }
.schritt__nr .weit { color: var(--am); }
.schritt__t { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.schritt__t .weit { color: var(--am); }
.minikal, .miniform, .miniliste { position: relative; width: min(100%, 290px); background: #fff; box-shadow: inset 0 0 0 1px var(--linie); padding: 18px; text-align: left; }
.minikal__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 15px; }
.minikal__kopf span { display: flex; gap: 6px; }
.minikal__kopf i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--karte-2); }
.minikal__kopf svg { width: 14px; height: 14px; }
.minikal__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; text-align: center; font-size: 12.5px; font-feature-settings: "tnum" 1; }
.minikal__raster span { display: grid; place-items: center; height: 30px; }
.minikal__raster .tag { color: var(--tinte-3); font-size: 11.5px; font-weight: 560; }
.minikal__raster .aus { color: rgba(33, 27, 67, .3); }
.minikal__raster .frei { position: relative; }
.minikal__raster .frei::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--am); }
.minikal__raster .heute { background: var(--karte-2); border-radius: 8px; }
.minikal__raster .gewaehlt { background: var(--am); color: var(--papier); border-radius: 8px; font-weight: 640; }
.miniform { display: grid; gap: 10px; }
.miniform__feld { display: grid; gap: 2px; padding: 9px 12px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie-fein); font-size: 13.5px; color: var(--tinte-2); border-radius: 6px; }
.miniform__feld small { font-size: 11px; color: var(--tinte-3); font-weight: 560; }
.miniform__feld--gross { min-height: 70px; align-content: start; }
.miniform__knopf { display: block; text-align: center; padding: 11px; background: var(--tinte); color: var(--papier); font-size: 14px; font-weight: 560; border-radius: 6px; }
.miniliste { display: grid; gap: 8px; }
.miniliste__kopf { display: flex; justify-content: space-between; align-items: center; font-size: 15px; margin-bottom: 4px; }
.miniliste__kopf svg { width: 16px; height: 16px; color: var(--tinte-3); }
.miniliste__z { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--papier); border-radius: 8px; font-size: 13.5px; }
.miniliste__z s { color: var(--tinte-3); }
.miniliste__z--fertig { background: var(--am-hell); }
.miniliste__z--blass { opacity: .45; filter: blur(.5px); }
.miniliste__o { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linie); flex: none; }

/* ── 20 · FAQ ────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1120px; margin-inline: auto; align-items: start; }
.faq__spalte { display: grid; gap: 16px; }
.faq__eintrag { position: relative; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); }
.faq__eintrag summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 24px; cursor: pointer; font-size: 16.5px; font-weight: 540; }
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__zeichen { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: var(--papier); flex: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .2s; }
.faq__zeichen svg { width: 16px; height: 16px; }
.faq__eintrag[open] .faq__zeichen { transform: rotate(45deg); background: var(--am); }
.faq__eintrag summary:hover .faq__zeichen { background: var(--am); }
.faq__eintrag p { padding: 0 24px 24px; margin-top: -6px; color: var(--tinte-2); font-size: 15.5px; max-width: 60ch; }

/* ── 21 · Reinschauen ────────────────────────────────────── */
.reinschauen { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding-left: max(var(--rand), calc((100vw - var(--breite)) / 2)); }
.reinschauen__text { display: grid; gap: 18px; justify-items: start; }
.reinschauen__text p { color: var(--tinte-2); }
.reinschauen__spur { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 34vw, 460px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: var(--rand); }
.reinschauen__spur::-webkit-scrollbar { display: none; }
.kanal { position: relative; scroll-snap-align: start; aspect-ratio: 4 / 5; overflow: hidden; text-decoration: none; color: var(--papier); background: var(--nacht); --kante-farbe: transparent; }
.kanal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.kanal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(16, 13, 36, .9) 100%); }
.kanal--nacht img { object-fit: contain; object-position: 50% 20%; }
.kanal:hover img { transform: scale(1.04); }
.kanal__text { position: absolute; left: 24px; right: 80px; bottom: 24px; z-index: 2; display: grid; gap: 2px; }
.kanal__text small { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--am-n); }
.kanal__text b { font-size: 26px; font-weight: 640; letter-spacing: -.025em; }
.kanal__text span { font-size: 14px; opacity: .8; }
.kanal__knopf { position: absolute; right: 22px; bottom: 26px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--papier); color: var(--tinte); transition: transform .3s; }
.kanal__knopf svg { width: 22px; height: 22px; }
.kanal:hover .kanal__knopf { transform: scale(1.08); }

/* ── 23 · Fuß ────────────────────────────────────────────── */
.fuss { padding-top: clamp(64px, 8vw, 104px); padding-bottom: 32px; border-top: 1px solid var(--linie-fein); }
.fuss__oben { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: clamp(28px, 4vw, 64px); align-items: end; }
.fuss__person { display: grid; gap: 6px; justify-items: start; }
.fuss__figur { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; box-shadow: 0 0 0 2px var(--papier), 0 0 0 3px var(--am-n); }
.fuss__name { font-size: 30px; font-weight: 640; letter-spacing: -.03em; }
.fuss__rolle { color: var(--tinte-2); font-size: 14.5px; line-height: 1.45; }
.fuss__werte { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; font-size: 14.5px; }
.fuss__zitat { display: grid; gap: 8px; justify-items: start; }
.fuss__zitat p { font-size: 17px; font-weight: 520; line-height: 1.35; letter-spacing: -.01em; max-width: 34ch; }
.fuss__zitat small { font-size: 12.5px; color: var(--tinte-3); }
.fuss__signet { width: 52px; height: 52px; color: var(--tinte); margin-top: 8px; }
.fuss__spalten { display: flex; gap: clamp(32px, 5vw, 80px); }
.fuss__spalten div { display: grid; gap: 10px; align-content: start; }
.fuss__spalten a { font-size: 14.5px; text-decoration: none; color: var(--tinte); }
.fuss__spalten a:hover { color: var(--am); }
.fuss__kopf { font-size: 14px; color: var(--tinte-3); margin-bottom: 4px; font-weight: 600; }
.fuss__schutz { margin-top: clamp(40px, 5vw, 64px); padding: 24px 0; border-top: 1px solid var(--tinte); display: grid; gap: 8px; }
.fuss__schutz p:last-child { font-size: 13.5px; color: var(--tinte-2); max-width: 110ch; }
.fuss__unten { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 13.5px; }
.fuss__unten a { text-decoration: none; }
.fuss__unten a:hover { color: var(--am); }
.fuss__unten span { margin-left: auto; color: var(--tinte-3); }

/* ── Entwickeln statt Einblenden: Stich wird scharf (nur mit Scroll-Zeitachse) ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kopf > *, .frage, .lehre, .weg__spalte, .stimme-gross, .schritt, .faq__eintrag, .mosaik figure, .vergleich__wir, .vergleich__anders, .begleit__karte, .app-karte, .band, .duo, .vorstellung, .faecher__karte {
      animation: entwickeln linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    @keyframes entwickeln { from { filter: blur(8px) brightness(1.25); opacity: .25; translate: 0 18px; } to { filter: none; opacity: 1; translate: 0 0; } }
    .faecher__karte { animation-name: entwickeln-karte; }
    @keyframes entwickeln-karte { from { opacity: .2; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
  }
}

/* ── Mittlere Breiten ────────────────────────────────────── */
@media (max-width: 1080px) {
  .lehren { grid-template-columns: repeat(2, 1fr); }
  .weg { grid-template-columns: 1fr 1fr; }
  .weg__spalte--mitte { grid-column: 1 / -1; order: -1; }
  .weg__spalte--vorher .weg__karte, .weg__spalte--nachher .weg__karte { margin-inline: 0; }
  .fuss__oben { grid-template-columns: 1fr 1fr; }
  .fuss__spalten { grid-column: 1 / -1; }
  .vergleich { grid-template-columns: 1fr; }
  .vergleich__anders { grid-column: 1; grid-row: 1; margin: 0 0 -10px; }
  .vergleich__wir { grid-column: 1; grid-row: 2; }
  .vergleich__faecher { display: none; }
}

/* ── Schmale Breiten (Handy) ─────────────────────────────── */
@media (max-width: 760px) {
  :root { --rand: 16px; --nav-h: 60px; }
  body { font-size: 16px; }
  .nur-breit { display: none; }
  .marke__wort { font-size: 17px; }
  .marke__signet { width: 30px; height: 30px; }
  .knopf--nav { font-size: 14px; padding-left: 14px; min-height: 40px; }
  .knopf--nav .knopf__text { white-space: nowrap; }
  .knopf--nav .knopf__pfeil { width: 30px; height: 28px; }
  .knopf { font-size: 14.5px; gap: 10px; padding-left: 16px; white-space: nowrap; }
  .knopf:not(.knopf--nav) { width: 100%; justify-content: space-between; }
  .knopf .weit { font-stretch: 122%; font-weight: 360; }
  .knopf__pfeil { width: 36px; height: 32px; }
  .station__titelzeile { flex-wrap: wrap-reverse; gap: 10px; }
  .hero__karte { padding: 22px 18px; }
  .unterzeile { font-size: 16px; }
  .hero__buehne { margin-top: 28px; padding-inline: 16px; }
  .buehne { aspect-ratio: 4 / 5; grid-template-columns: 1fr; align-items: end; justify-items: end; }
  .buehne--video { aspect-ratio: 4 / 5; }
  .hero__buehne--video .beleg--1 { left: 2px; top: -18px; }
  .hero__buehne--video .beleg--2 { right: 2px; top: -18px; }
  .hero__buehne--video .beleg--3 { left: 2px; bottom: -20px; }
  .hero__buehne--video .beleg--4 { display: none; }
  .buehne__pause { left: auto; right: 12px; bottom: 12px; width: 34px; height: 34px; }
  .hero__buehne--video + .hero__karte-rahmen .hero__karte { margin-top: 34px; }
  .buehne__himmel img { width: 150%; }
  .buehne__figur { width: 58%; margin-right: 18px; }
  .beleg { padding: 7px 11px 7px 8px; gap: 8px; }
  .beleg b { font-size: 13px; } .beleg small { font-size: 11px; }
  .beleg__gross { font-size: 22px !important; }
  .beleg__zeichen { width: 28px; height: 28px; }
  .beleg__avatar { width: 28px; height: 28px; }
  .beleg--1 { left: 2px; top: -16px; }
  .beleg--2 { right: 2px; top: 22%; }
  .beleg--3 { left: 2px; bottom: 10px; }
  .beleg--4 { right: 2px; bottom: auto; top: -22px; }
  .hero__karte { margin-top: -16px; }
  .frage-raster { grid-template-columns: 1fr; }
  .app-karte { grid-template-columns: 1fr; }
  .app-karte__geraete { min-height: 280px; padding: 30px 16px 40px; }
  .telefon { width: 92px; border-radius: 18px; padding: 4px; } .telefon img { border-radius: 14px; }
  .lehren { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lehre { padding: 8px 8px 16px; gap: 10px; }
  .lehre__kopf { top: 14px; left: 14px; right: 14px; }
  .lehre__chip { display: none; }
  .lehre__name { margin-top: -30px; margin-inline: 4px; padding: 8px 10px; }
  .lehre__name b { font-size: 14px; } .lehre__name .weit { font-size: 11px; }
  .lehre > p { font-size: 13px; padding-inline: 4px; }
  .weg { grid-template-columns: 1fr; }
  .weg__punkte { padding-inline: 6px; }
  .band { min-height: 0; }
  #unterschied .rahmen { padding-top: 176px; }
  #unterschied .band { padding-top: 36px; }
  .band__figur { width: 190px; right: 50%; transform: translateX(50%); bottom: auto; top: 0; }
  .band--foto { grid-template-columns: 1fr; padding: 16px; padding-bottom: 16px; }
  .band--foto .band__text { padding: 12px 8px; }
  .band__foto { min-height: 300px; }
  .faecher { height: 340px; }
  .faecher__karte { width: 46%; }
  .faecher__karte--1 { transform: translateX(-56%) rotate(-10deg); }
  .faecher__karte--3 { transform: translateX(56%) rotate(10deg); }
  .duo { grid-template-columns: 1fr; min-height: 0; }
  .duo__foto { min-height: 300px; }
  .duo__foto::after { background: linear-gradient(180deg, transparent 50%, var(--nacht) 100%); }
  .duo__bild { min-height: 340px; } .duo__bild img { width: 70%; }
  .station { grid-template-columns: 1fr; position: relative; top: auto; min-height: 0; }
  .station__bild { min-height: 300px; order: -1; padding-bottom: 76px; }
  .station__karte { width: 42%; }
  .stapel-ende { grid-template-columns: 1fr; }
  .stapel-ende__foto { max-width: 240px; }
  .begleit__karte { grid-template-columns: 1fr; min-height: 0; }
  .begleit__ansicht { min-height: 260px; padding: 20px; }
  .stimme-gross { grid-template-columns: 1fr; }
  .stimme-gross__blase { min-height: 0; }
  .karussell__spur { grid-auto-columns: 84%; gap: 14px; }
  .mosaik { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 220px; gap: 10px; }
  .mosaik__1 { grid-column: 1 / 3; grid-row: 3; }
  .mosaik__2 { grid-column: 1; grid-row: 1 / 3; }
  .mosaik__3 { grid-column: 2; grid-row: 1; }
  .mosaik__4 { grid-column: 2; grid-row: 2; }
  .vorstellung { grid-template-columns: 1fr; padding: 20px 20px 32px; }
  .vorstellung__stapel { max-width: 300px; width: 100%; justify-self: center; }
  .haltung__fotos { grid-template-columns: 1fr 1fr; height: 260px; }
  .haltung__fotos figure:nth-child(3) { display: none; }
  .wert { width: 300px; grid-template-columns: 46px 1fr; padding: 16px; gap: 14px; }
  .wert__i { width: 46px; height: 46px; }
  .vergleich__anders { padding: 26px 22px; }
  .vergleich__anders ul { grid-template-columns: 1fr; gap: 12px; }
  .vergleich__chips li { font-size: 14px; padding: 10px 14px; }
  .schritte { grid-template-columns: 1fr; }
  .schritt__ansicht { min-height: 0; }
  .faq { grid-template-columns: 1fr; }
  .faq__eintrag summary { padding: 20px; font-size: 16px; }
  .faq__eintrag p { padding: 0 20px 20px; }
  .reinschauen { grid-template-columns: 1fr; padding-left: var(--rand); }
  .reinschauen__spur { grid-auto-columns: 78%; }
  .kanal__text b { font-size: 22px; }
  .fuss__oben { grid-template-columns: 1fr; }
  .fuss__unten span { margin-left: 0; width: 100%; }
}

@media (max-width: 420px) {
  .nur-mittel { display: none; }
  .band { padding-inline: 18px; }
  .band--foto { padding: 12px; }
  .duo__text { padding-inline: 20px; }
}
@media (max-width: 380px) {
  .knopf { white-space: normal; }
}

/* ── Anmeldefenster (js/funnel.js → /api/lead) und Cookie-Banner, seit dem Umzug auf syncretism.live ── */
[hidden] { display: none !important; }
body.optin-open { overflow: hidden; }
.optin { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.optin__overlay { position: absolute; inset: 0; background: rgba(16, 13, 36, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.optin__card { position: relative; width: min(100%, 480px); max-height: calc(100svh - 40px); overflow: auto; background: var(--karte); padding: 40px 36px 30px; box-shadow: 0 40px 80px -30px rgba(16, 13, 36, .55); --kante-farbe: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .optin:not([hidden]) .optin__card { animation: optin-rein .45s cubic-bezier(.2, .8, .2, 1); }
  @keyframes optin-rein { from { opacity: 0; transform: translateY(18px) scale(.98); } }
}
.optin__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--karte-2); color: var(--tinte); display: grid; place-items: center; cursor: pointer; z-index: 4; }
.optin__close:hover { background: var(--am-hell); color: var(--am); }
.optin__close svg { width: 20px; height: 20px; }
.optin__body, .optin__success { display: grid; gap: 16px; justify-items: center; text-align: center; }
.optin__signet { width: 52px; height: 52px; color: var(--tinte); }
.optin__title { font-size: clamp(26px, 3vw, 32px); line-height: 1.05; font-weight: 640; letter-spacing: -.03em; text-wrap: balance; }
.optin__text { color: var(--tinte-2); font-size: 15.5px; max-width: 36ch; text-wrap: pretty; }
.optin__text strong { color: var(--tinte); }
.optin__form { width: 100%; display: grid; gap: 10px; margin-top: 4px; }
.optin__input { width: 100%; font: inherit; font-size: 16px; color: var(--tinte); padding: 14px 16px; background: #fff; border: 1px solid rgba(33, 27, 67, .32); border-radius: 3px; outline: none; transition: border-color .2s, box-shadow .2s; }
.optin__input::placeholder { color: var(--tinte-3); }
.optin__input:focus { border-color: var(--am); box-shadow: 0 0 0 3px rgba(90, 69, 212, .15); }
.optin__input.invalid { border-color: #B63D4D; box-shadow: 0 0 0 3px rgba(182, 61, 77, .12); }
.optin__consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; text-align: left; font-size: 13.5px; color: var(--tinte-2); line-height: 1.4; padding: 6px 2px; border-radius: 3px; }
.optin__consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--am); }
.optin__consent a { color: var(--am); }
.optin__consent.invalid { color: #B63D4D; }
.optin__submit { width: 100%; justify-content: space-between; margin-top: 6px; border: 0; cursor: pointer; font-family: inherit; }
.optin__note { font-size: 13px; color: var(--tinte-3); }
.miniform__feld--haken { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.miniform__feld--haken i { width: 14px; height: 14px; border-radius: 3px; background: var(--am); flex: none; }

.consent-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 110; width: min(calc(100% - 24px), 620px); display: flex; align-items: center; gap: 16px 22px; padding: 16px 18px 16px 22px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie), 0 24px 50px -20px rgba(16, 13, 36, .4); border-radius: 4px; }
.consent-banner__text { flex: 1; font-size: 14px; color: var(--tinte-2); line-height: 1.45; }
.consent-banner__text a { color: var(--am); }
.consent-banner__actions { display: flex; gap: 8px; flex: none; }
.consent-banner .button { font: inherit; font-size: 14.5px; font-weight: 540; padding: 10px 18px; border-radius: 3px; cursor: pointer; border: 0; }
.consent-banner .button-secondary { background: var(--karte-2); color: var(--tinte); }
.consent-banner .button-secondary:hover { background: var(--am-hell); }
.consent-banner .button-primary { background: var(--tinte); color: var(--papier); }
.consent-banner .button-primary:hover { background: #2E2760; }
@media (max-width: 560px) {
  .optin { padding: 0; align-items: end; }
  .optin__card { width: 100%; max-height: 92svh; padding: 34px 20px 24px; }
  .consent-banner { flex-direction: column; align-items: stretch; bottom: 10px; padding: 16px; }
  .consent-banner__actions .button { flex: 1; }
}