/* METAMOR Seiten-Muster: Bauteile. Jedes Muster hat ein eigenes Präfix. Nur Tokens aus basis.css. */

/* ── Navigation ─────────────────────────────────────────────── */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--onyx) 92%, transparent); transition: transform 320ms var(--kurve); }
.nav.weg { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
.nav .rahmen { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.nav-marke { font: 700 22px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; margin-right: auto; }
.nav-links { display: flex; gap: 22px; }
.nav-links a { text-decoration: none; color: var(--tinte-2); font-size: 15px; }
.nav-links a:hover { color: var(--tinte); }
.nav .knopf, .nav-marke { white-space: nowrap; }
@media (max-width: 760px) { .nav-links { display: none; } .nav-marke { font-size: 18px; } .nav .knopf { padding: 10px 14px; font-size: 14px; } }

/* ── Held mit Befehl (Vorbild: Werkzeug-Seiten wie tasteskill.dev) ── */
.held-befehl { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(72px, 10vw, 140px); }
.held-befehl > * { min-width: 0; }
.held-befehl h1 { font-size: clamp(48px, 7.4vw, 104px); }
.held-befehl .lead { margin-top: 28px; }
.befehl { margin-top: 36px; display: flex; align-items: center; gap: 12px; max-width: 560px; background: var(--nacht-2); border-radius: var(--r-mittel); padding: 8px 8px 8px 18px; }
.befehl code { flex: 1; font: 500 15px/1.4 var(--mono); color: var(--tinte); overflow-x: auto; white-space: nowrap; }
.befehl code::before { content: '$ '; color: var(--gold); }
.befehl button { min-height: 40px; padding: 8px 14px; border: 0; border-radius: var(--r-klein); background: var(--nacht-3); color: var(--tinte); font: 600 14px var(--text); cursor: pointer; }
.befehl button[data-kopiert] { color: var(--signal); }
.held-aktionen { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.vorschau { background: var(--nacht-1); border-radius: var(--r-gross); padding: 20px; display: grid; gap: 14px; transform: rotate(-1.5deg); }
.vorschau-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-klein); background: var(--nacht-2); font-size: 14px; }
.vorschau-zeile b { font-weight: 600; }
.vorschau-zeile.an { background: var(--glut-hauch); color: var(--glut); }
@media (max-width: 860px) { .held-befehl { grid-template-columns: 1fr; } .vorschau { transform: none; } }

/* ── Held mit Bild (Vorbild: Angebotsseiten von Coaches) ── */
.held-bild { display: grid; grid-template-columns: 1fr 1fr; min-height: min(88vh, 860px); }
.held-bild h1 { font-size: clamp(44px, 6vw, 96px); }
.held-bild-text { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: clamp(48px, 7vw, 112px) var(--rand); padding-left: max(var(--rand), calc((100vw - 1240px) / 2 + var(--rand))); }
.held-bild-flaeche { position: relative; background: var(--nacht-2); overflow: hidden; }
.held-bild-flaeche canvas, .held-bild-flaeche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .held-bild { grid-template-columns: 1fr; } .held-bild-flaeche { aspect-ratio: 4 / 3; } }

/* ── Für wen (Vorbild: Fähigkeiten im Plakatformat) ── */
.fuerwen { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
.fuerwen-kopf { grid-column: 1 / 6; position: sticky; top: 120px; align-self: start; display: grid; gap: 20px; }
.fuerwen-liste { grid-column: 6 / 13; list-style: none; margin: 0; padding: 0; display: grid; }
.fuerwen-liste li { display: grid; gap: 6px; padding-block: 22px; border-top: 1px solid var(--rand-deko); transition: opacity 200ms var(--kurve); }
.fuerwen-liste strong { font: 600 clamp(22px, 2.4vw, 32px)/1.15 var(--display); text-transform: uppercase; }
.fuerwen-liste span { color: var(--tinte-2); }
@media (hover: hover) { .fuerwen-liste:hover li { opacity: .38; } .fuerwen-liste li:hover { opacity: 1; } }
@media (max-width: 860px) { .fuerwen-kopf, .fuerwen-liste { grid-column: 1 / -1; position: static; } .fuerwen-liste { margin-top: 32px; } }

/* ── Ablauf (Vorbild: „So läuft es ab“, Linie zeichnet sich beim Scrollen) ── */
.ablauf { display: grid; gap: 48px; }
.ablauf-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--schritte, 4), 1fr); gap: 24px; position: relative; counter-reset: schritt; }
.ablauf-schritte::before { content: ''; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--rand-deko); }
.ablauf-schritte::after { content: ''; position: absolute; left: 0; top: 27px; height: 2px; width: calc(var(--fortschritt, 0) * 100%); background: var(--gold); transition: width 600ms var(--kurve); }
.ablauf-schritte li { position: relative; z-index: 1; display: grid; gap: 12px; align-content: start; counter-increment: schritt; }
.ablauf-schritte li::before { content: counter(schritt, decimal-leading-zero); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--nacht-2); color: var(--gold); font: 700 20px var(--display); box-shadow: 0 0 0 6px var(--onyx); }
.ablauf-schritte li.optional::before { background: var(--onyx); box-shadow: inset 0 0 0 1px var(--rand-bedien), 0 0 0 6px var(--onyx); }
.ablauf-schritte p { color: var(--tinte-2); font-size: 15px; }
@media (max-width: 860px) {
  .ablauf-schritte { grid-template-columns: 1fr; gap: 32px; }
  .ablauf-schritte::before, .ablauf-schritte::after { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .ablauf-schritte::after { height: calc(var(--fortschritt, 0) * 100%); width: 2px; transition: height 600ms var(--kurve); }
  .ablauf-schritte li { grid-template-columns: 56px 1fr; column-gap: 20px; }
  .ablauf-schritte li::before { grid-row: span 2; }
}

/* ── Angebots-Leiter (Vorbild: drei Stufen, die mittlere empfohlen) ── */
.leiter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.stufe { display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 18px; background: var(--nacht-1); border-radius: var(--r-gross); padding: 32px 28px; }
.stufe.empfohlen { background: var(--nacht-2); box-shadow: inset 0 0 0 2px var(--glut); transform: translateY(-16px); }
.stufe-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stufe-preis { font: 700 clamp(48px, 5vw, 72px)/.9 var(--display); }
.stufe-takt { margin-top: -12px; font-size: 14px; color: var(--tinte-3); }
.stufe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.stufe li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--tinte-2); font-size: 15px; }
.stufe li::before { content: ''; width: 10px; height: 10px; margin-top: 7px; border-radius: 2px; background: var(--gold); }
.stufe .knopf { width: 100%; }
.stufe:not(.empfohlen) .knopf { background: var(--nacht-3); color: var(--tinte); }
.leiter-fuss { margin-top: 28px; text-align: center; }
@media (max-width: 960px) { .leiter { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .stufe.empfohlen { transform: none; order: -1; } }

/* ── Stimmen (nur echte Stimmen, Platzhalter bleiben sichtbar markiert) ── */
.stimmen { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.stimme { margin: 0; display: grid; gap: 18px; align-content: space-between; background: var(--nacht-1); border-radius: var(--r-gross); padding: 32px; }
.stimme.gross blockquote { font: 600 clamp(24px, 2.6vw, 34px)/1.25 var(--display); }
.stimme blockquote { margin: 0; font-size: 17px; line-height: 1.55; }
.stimme figcaption { color: var(--tinte-3); font-size: 14px; }
.stimmen-rechts { display: grid; gap: 24px; }
.platzhalter { outline: 1px dashed var(--rand-bedien); outline-offset: -8px; color: var(--tinte-3); }
@media (max-width: 860px) { .stimmen { grid-template-columns: 1fr; } }

/* ── FAQ (Akkordeon mit details/summary, funktioniert ohne Skript) ── */
.faq { display: grid; grid-template-columns: 5fr 7fr; gap: 24px 64px; }
.faq-kopf { position: sticky; top: 120px; align-self: start; display: grid; gap: 20px; }
.faq-liste { display: grid; }
.faq details { border-top: 1px solid var(--rand-deko); }
.faq details:last-child { border-bottom: 1px solid var(--rand-deko); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font: 600 18px/1.35 var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--nacht-2); color: var(--gold); font: 500 20px/1 var(--mono); transition: transform 240ms var(--kurve); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 48px 24px 0; color: var(--tinte-2); }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } .faq-kopf { position: static; } }

/* ── Karte ziehen (das eine lebendige Element; Vorbild: Kartenstapel auf Coach-Seiten) ── */
.ziehen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.ziehen-text { display: grid; gap: 20px; }
.stapel { position: relative; width: min(320px, 78vw); aspect-ratio: 5 / 8; margin-inline: auto; perspective: 1400px; }
.stapel-karte { position: absolute; inset: 0; border-radius: 18px; background: var(--nacht-2); }
.stapel-karte:nth-child(1) { transform: translate(10px, 10px) rotate(4deg); }
.stapel-karte:nth-child(2) { transform: translate(5px, 5px) rotate(2deg); }
.zug { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform 800ms var(--kurve); border-radius: 18px; }
.zug.offen { transform: rotateY(180deg) translateY(-8px); }
.zug-seite { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; display: grid; place-items: center; padding: 28px; text-align: center; }
.zug-ruecken { background: var(--nacht-3); box-shadow: inset 0 0 0 1px var(--rand-deko); }
.zug-ruecken svg { width: 46%; height: auto; color: var(--gold); }
.zug-vorne { transform: rotateY(180deg); background: var(--nacht-1); box-shadow: inset 0 0 0 2px var(--gold); align-content: center; gap: 18px; }
.zug-vorne .label { justify-self: center; }
.zug-vorne p { font: 600 clamp(20px, 2.2vw, 26px)/1.3 var(--display); text-transform: uppercase; }
.ziehen-aktion { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .ziehen { grid-template-columns: 1fr; } }

/* ── Abschluss mit drei Fakten ── */
.abschluss { display: grid; gap: 24px; justify-items: start; padding: clamp(28px, 4.5vw, 64px); border-radius: var(--r-gross); background: var(--nacht-1); box-shadow: inset 4px 0 0 var(--glut); }
.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; }
.fakt { display: grid; gap: 4px; }
.fakt strong { font: 700 clamp(28px, 3vw, 40px)/1 var(--display); text-transform: uppercase; }
.fakt span { color: var(--tinte-3); font-size: 14px; }
@media (max-width: 640px) { .fakten { grid-template-columns: 1fr; } }

/* ── Kontakt ── */
.kontakt { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }
.formular { display: grid; gap: 16px; }
.feld { display: grid; gap: 6px; }
.feld label { font-size: 14px; color: var(--tinte-2); }
.feld input, .feld textarea { width: 100%; min-height: 44px; padding: 12px 14px; border: 0; border-radius: var(--r-klein); background: var(--nacht-2); color: var(--tinte); font: inherit; box-shadow: inset 0 0 0 1px var(--rand-bedien); }
.feld textarea { min-height: 140px; resize: vertical; }
.zustimmung { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; color: var(--tinte-2); }
.zustimmung input { width: 18px; height: 18px; accent-color: var(--glut); }
.formular-meldung { min-height: 1.5em; font-size: 14px; color: var(--signal); }
@media (max-width: 860px) { .kontakt { grid-template-columns: 1fr; } }

/* ── Fuß: der Name kehrt groß zurück ── */
.fuss { padding-block: 64px 32px; display: grid; gap: 40px; }
.fuss-name { font: 700 clamp(56px, 13vw, 200px)/.85 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: var(--nacht-3); }
.fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; color: var(--tinte-3); font-size: 14px; }
.fuss-zeile nav { display: flex; flex-wrap: wrap; gap: 20px; }
.fuss-zeile button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.fuss-bruecke { max-width: 60ch; color: var(--tinte-2); font-size: 15px; line-height: 1.6; padding: 18px 20px; border: 1px solid var(--rand-deko); border-left: 3px solid var(--gold); border-radius: 12px; background: var(--nacht-2); }
.fuss-bruecke b { color: var(--tinte); font-weight: 600; }
.fuss-bruecke a { color: var(--gold); }

/* ── Einwilligung (Cookie-Banner, lädt Statistik erst nach Ja) ── */
.einwilligung { position: fixed; z-index: 50; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin-inline: auto; display: grid; gap: 16px; padding: 24px; border-radius: var(--r-gross); background: var(--nacht-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--rand-deko); }
.einwilligung[hidden] { display: none; }
.einwilligung-wahl { display: grid; gap: 10px; }
.einwilligung-wahl label { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; color: var(--tinte-2); }
.einwilligung-wahl input { accent-color: var(--glut); width: 18px; height: 18px; }
.einwilligung-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.einwilligung-knoepfe .knopf { flex: 1 1 auto; }

/* ── Regal (Vorbild: 3D-Karussell eines Repo-Schaufensters) ── */
.regal { position: relative; display: grid; gap: 28px; padding-block: 48px; overflow: hidden; }
.regal-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.regal-zaehler { font: 500 13px var(--mono); color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.regal-zaehler b { color: var(--gold); font-weight: 500; }
.regal-buehne { position: relative; height: clamp(380px, 52vw, 520px); perspective: 1600px; touch-action: pan-y; cursor: grab; outline: none; }
.regal-buehne:active { cursor: grabbing; }
.regal-fach { position: absolute; left: 50%; top: 50%; width: clamp(220px, 26vw, 320px); aspect-ratio: 3 / 4; margin: 0; border-radius: var(--r-gross); background: var(--nacht-1); box-shadow: inset 0 0 0 1px var(--rand-deko); display: grid; grid-template-rows: 1fr auto; overflow: hidden; transition: transform 700ms var(--kurve), opacity 700ms var(--kurve); }
.regal-fach.aktiv { box-shadow: inset 0 0 0 2px var(--glut); }
.regal-fach canvas { width: 100%; height: 100%; }
.regal-fach figcaption { display: grid; gap: 6px; padding: 16px 18px 18px; background: var(--nacht-2); }
.regal-fach figcaption strong { font: 600 18px/1.2 var(--display); text-transform: uppercase; }
.regal-fach figcaption span { font-size: 13px; color: var(--tinte-3); }
.regal-steuer { display: flex; justify-content: center; align-items: center; gap: 12px; }
.regal-steuer button:not(.knopf) { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--nacht-2); color: var(--tinte); font: 500 18px var(--mono); cursor: pointer; }
.melde-dialog { border: 0; padding: 0; border-radius: var(--r-gross); background: var(--nacht-2); color: var(--tinte); width: min(480px, calc(100vw - 32px)); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.melde-dialog::backdrop { background: rgba(11, 10, 9, .72); }
.melde-dialog form { display: grid; gap: 18px; padding: 28px; }
.melde-dialog .schliessen { justify-self: end; background: none; border: 0; color: var(--tinte-3); font: 500 14px var(--mono); cursor: pointer; }

/* ── Bauteil-Galerie (Vorbild: Bauteil-Bibliotheken mit Filterleiste) ── */
.galerie-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.galerie-filter button { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--nacht-2); color: var(--tinte-2); font: 500 14px var(--text); cursor: pointer; }
.galerie-filter button[aria-pressed="true"] { background: var(--tinte); color: var(--onyx); }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 32px; }
.galerie-eintrag { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-gross); overflow: hidden; background: var(--nacht-1); text-decoration: none; transition: transform 240ms var(--kurve); }
.galerie-eintrag:hover { transform: translateY(-4px); }
.galerie-eintrag[hidden] { display: none; }
.galerie-fenster { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--onyx); }
.galerie-fenster iframe { position: absolute; top: 0; left: 0; width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; }
.galerie-text { display: grid; gap: 6px; padding: 18px 20px 20px; }
.galerie-text strong { font: 600 20px/1.2 var(--display); text-transform: uppercase; }
.galerie-text span { color: var(--tinte-3); font-size: 14px; }

/* ── Kapitel-Marke (Vorbild: „↓ 02 · Angebot“ als Übergang zwischen Abschnitten, morgensystems.com) ── */
.kapitel { display: flex; align-items: center; gap: 12px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); }
.kapitel b { color: var(--gold); font-weight: 500; }
.kapitel::after { content: ''; flex: 1; height: 1px; background: var(--rand-deko); transform-origin: left; transform: scaleX(var(--linie, 1)); transition: transform 900ms var(--kurve); }
.bereit .kapitel[data-auftritt]::after { --linie: 0; }
.bereit .kapitel[data-auftritt].da::after { --linie: 1; }

/* ── Laufband (Vorbild: Systemnamen laufen unter dem Held durch, morgensystems.com) ── */
.laufband { overflow: hidden; padding-block: 18px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.laufband-spur { display: flex; gap: 12px; width: max-content; animation: laufband var(--laufzeit, 38s) linear infinite; }
.laufband:hover .laufband-spur, .laufband:focus-within .laufband-spur { animation-play-state: paused; }
.laufband-spur span { padding: 10px 16px; border-radius: 999px; background: var(--nacht-2); color: var(--tinte-2); font-size: 15px; white-space: nowrap; }
@keyframes laufband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .laufband-spur { animation: none; flex-wrap: wrap; width: auto; } .laufband { mask-image: none; } }

/* ── Vom Chaos zum System (Vorbild: Aufgaben laufen links hinein, rechts kommt ein Ablauf heraus, morgensystems.com) ── */
.chaos { display: grid; grid-template-columns: 1.2fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: 380px; }
.chaos-feld { position: relative; height: 340px; overflow: hidden; }
.chaos-aufgabe { position: absolute; left: var(--x); top: var(--y); padding: 9px 14px; border-radius: 999px; background: var(--nacht-2); color: var(--tinte-2); font-size: 14px; white-space: nowrap; transform: rotate(var(--r)); transition: left 900ms var(--kurve), top 900ms var(--kurve), transform 900ms var(--kurve), opacity 500ms var(--kurve); }
.chaos-aufgabe.zieht { left: calc(100% - 40px); top: calc(50% - 18px); transform: rotate(0deg) scale(.4); opacity: 0; }
.chaos-kern { width: clamp(96px, 11vw, 132px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--nacht-1); color: var(--gold); font: 700 clamp(18px, 1.8vw, 22px)/1 var(--display); text-transform: uppercase; letter-spacing: .04em; border: 2px solid var(--gold); outline: calc(var(--puls, 0) * 18px) solid var(--gold-hauch); transition: outline-width 420ms var(--kurve); }
.chaos-ausgang { display: grid; gap: 14px; padding: 24px; border-radius: var(--r-gross); background: var(--nacht-1); box-shadow: inset 0 0 0 1px var(--rand-deko); transition: opacity 500ms var(--kurve), transform 500ms var(--kurve); }
.chaos-ausgang strong { font: 600 clamp(20px, 2vw, 26px)/1.2 var(--display); text-transform: uppercase; }
.chaos-ausgang .knopf { justify-self: start; }
.chaos-ausgang.wartet { opacity: .35; transform: translateY(8px); }
.chaos-zaehler { font: 500 13px var(--mono); color: var(--tinte-3); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .chaos { grid-template-columns: 1fr; justify-items: center; }
  .chaos-feld { width: 100%; height: 260px; }
  .chaos-aufgabe { font-size: 13px; padding: 8px 11px; }
  .chaos-aufgabe.zieht { left: calc(50% - 40px); top: calc(100% - 10px); }
  .chaos-ausgang { width: 100%; }
}

/* ── Kennzahlen (Zahlen zählen beim Auftauchen hoch) ── */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; padding-block: 28px; border-block: 1px solid var(--rand-deko); }
.kennzahl { display: grid; gap: 4px; }
.kennzahl strong { font: 700 clamp(32px, 3.6vw, 48px)/1 var(--display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.kennzahl span { color: var(--tinte-3); font-size: 14px; }

/* ── Drei Wege (Angebote ohne Preis, je mit kurzer Marke darüber) ── */
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.weg { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; padding: 28px; border-radius: var(--r-gross); background: var(--nacht-1); transition: transform 240ms var(--kurve), background 240ms var(--kurve); }
.weg:hover { transform: translateY(-4px); background: var(--nacht-2); }
.weg.haupt { box-shadow: inset 0 0 0 2px var(--glut); }
.weg ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--tinte-2); font-size: 15px; }
.weg li::before { content: '· '; color: var(--gold); }
.weg-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.weg-links a:not(.knopf) { color: var(--tinte-2); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 8px 14px; border-radius: 999px; background: var(--nacht-2); color: var(--tinte-2); font-size: 14px; }
@media (max-width: 960px) { .wege { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .wege { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) 12px; scrollbar-width: none; }
  .wege::-webkit-scrollbar { display: none; }
  .weg { flex: 0 0 84%; scroll-snap-align: center; }
}

/* ── Rechner „Was kostet Warten?“ (Vorbild: Kostenrechner mit laufendem Zähler, morgensystems.com) ── */
.rechner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: var(--r-gross); background: var(--nacht-1); }
.rechner-regler { display: grid; gap: 26px; }
.regler { display: grid; gap: 10px; }
.regler label { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--tinte-2); }
.regler output { font: 600 18px var(--text); color: var(--tinte); font-variant-numeric: tabular-nums; }
.regler input[type=range] { width: 100%; accent-color: var(--glut); min-height: 28px; }
.rechner-ergebnis { display: grid; gap: 10px; }
.rechner-gross { font: 700 clamp(48px, 7vw, 92px)/.95 var(--display); color: var(--glut); font-variant-numeric: tabular-nums; }
.rechner-gross small { font: 500 16px var(--text); color: var(--tinte-3); margin-left: 8px; }
.rechner-zeile { color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.rechner-uhr { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--glut-hauch); color: var(--glut); font: 500 13px var(--mono); font-variant-numeric: tabular-nums; }
.rechner-uhr::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: uhr 1.2s ease-in-out infinite; }
@keyframes uhr { 50% { opacity: .25; } }
@media (max-width: 860px) { .rechner { grid-template-columns: 1fr; } }

/* ── Gründer (Person, Haltung, Zitat) ── */
.gruender { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.gruender-bild { aspect-ratio: 4 / 5; border-radius: var(--r-gross); background: var(--nacht-2); display: grid; place-items: center; padding: 24px; text-align: center; color: var(--tinte-3); font-size: 14px; outline: 1px dashed var(--rand-bedien); outline-offset: -10px; }
.gruender blockquote { margin: 0; padding-left: 20px; box-shadow: inset 3px 0 0 var(--gold); font: 600 clamp(22px, 2.4vw, 30px)/1.25 var(--display); text-transform: uppercase; }
.vertrauen { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--tinte-3); font: 500 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 860px) { .gruender { grid-template-columns: 1fr; } }

/* ── Projekt-Deck (Tonis Idee 22.10.2026: gefächertes Hologramm-Kartendeck, Klick zeigt Vorher und Nachher) ── */
.deck { position: relative; display: grid; gap: 20px; }
.deck-buehne { position: relative; height: clamp(430px, 40vw, 540px); perspective: 1800px; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.deck-buehne:focus-visible { outline: 2px solid var(--glut); outline-offset: 8px; border-radius: var(--r-gross); }
.deck-karte { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%; position: absolute; left: 50%; bottom: 6%; width: clamp(210px, 19vw, 270px); aspect-ratio: 5 / 7; margin-left: calc(clamp(210px, 19vw, 270px) / -2);
  border: 0; padding: 0; border-radius: 20px; background: var(--nacht-1); color: var(--tinte); text-align: left; cursor: pointer; overflow: hidden;
  transform-origin: 50% 135%; transform-style: preserve-3d; transition: transform 640ms var(--kurve), opacity 500ms var(--kurve), box-shadow 400ms var(--kurve);
  box-shadow: inset 0 0 0 1px var(--rand-deko), 0 24px 50px -28px rgba(0, 0, 0, .9); }
.deck-karte.vorn { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 1px var(--gold-hauch), 0 30px 70px -26px rgba(0, 0, 0, .95), 0 0 60px -10px var(--gold-hauch); }
.deck-karte.oeffnet { transition-duration: 320ms; }
/* Beim Ziehen folgt die Karte direkt dem Finger, danach gleitet sie mit dem normalen Übergang weiter */
.deck-buehne.zieht .deck-karte, .regal-buehne.zieht .regal-fach { transition: none; }
.deck-buehne.zieht, .regal-buehne.zieht { cursor: grabbing; }
.deck-karte, .regal-fach { will-change: transform; }
/* Hologramm: Rasterlinien, Schimmer folgt dem Zeiger, Kante leuchtet */
.deck-karte::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(201, 162, 75, .07) 3px 4px); }
.deck-karte::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 300ms var(--kurve); mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(244, 238, 229, .22), transparent 42%),
              linear-gradient(115deg, transparent 30%, rgba(201, 162, 75, .18) 45%, rgba(232, 134, 48, .14) 52%, transparent 66%);
  background-size: 100% 100%, 220% 220%; background-position: center, calc(var(--mx) * 1.2) 50%; }
.deck-karte.vorn::after { opacity: 1; }
.deck-glyph { position: absolute; inset: 0 0 38% 0; display: block; }
.deck-glyph canvas { width: 100%; height: 100%; display: block; }
.deck-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 6px; padding: 18px 18px 20px; background: linear-gradient(transparent, var(--nacht-1) 28%); }
.deck-text .label { display: flex; justify-content: space-between; gap: 8px; }
.deck-text strong { font: 700 clamp(24px, 2.4vw, 30px)/1 var(--display); text-transform: uppercase; }
.deck-text span:last-child { color: var(--tinte-2); font-size: 14px; line-height: 1.4; }
.deck-beispiel { padding: 3px 7px; border-radius: 6px; background: var(--nacht-3); color: var(--tinte-3); }
.deck-hinweis { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); color: var(--tinte-3); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.deck-steuer { display: flex; justify-content: center; align-items: center; gap: 14px; }
.deck-steuer button:not(.knopf) { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--nacht-2); color: var(--tinte); font: 500 18px var(--mono); cursor: pointer; }
.deck-zaehler { min-width: 72px; text-align: center; font: 500 13px var(--mono); color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.deck-zaehler b { color: var(--gold); font-weight: 500; }
@media (max-width: 700px) { .deck { overflow-x: clip; } }
@media (prefers-reduced-motion: reduce) { .deck-karte { transition-duration: 0ms; } .deck-karte::after { display: none; } }

/* Detail: Vorher und Nachher */
.deck-detail { border: 0; padding: 0; width: min(1080px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: 22px; background: var(--nacht-1); color: var(--tinte); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px var(--rand-deko); overflow: auto; }
.deck-detail[open] { animation: detail-auf 520ms var(--kurve); }
.deck-detail::backdrop { background: rgba(11, 10, 9, .78); backdrop-filter: blur(6px); }
@keyframes detail-auf { from { opacity: 0; transform: translateY(24px) scale(.94) rotateX(6deg); } }
.detail-innen { display: grid; gap: 28px; padding: clamp(22px, 4vw, 44px); }
.detail-kopf { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.detail-kopf h2 { font-size: clamp(32px, 4.4vw, 56px); }
.detail-kopf p { margin-top: 10px; }
.detail-zu { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--nacht-2); color: var(--tinte); font: 500 18px var(--mono); cursor: pointer; }
.detail-unten { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
.detail-punkte { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.detail-punkte li { display: grid; gap: 4px; padding-left: 16px; box-shadow: inset 2px 0 0 var(--rand-deko); }
.detail-punkte li b { font: 600 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.detail-punkte li.nach { box-shadow: inset 2px 0 0 var(--glut); }
.detail-rechnung { display: grid; gap: 10px; padding: 22px; border-radius: var(--r-gross); background: var(--nacht-2); }
.detail-rechnung .zeit { font: 700 clamp(30px, 3.4vw, 44px)/1 var(--display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.detail-rechnung .zeit s { color: var(--tinte-3); text-decoration-thickness: 2px; }
.detail-rechnung .zeit em { font-style: normal; color: var(--glut); }
@media (max-width: 860px) { .detail-unten { grid-template-columns: 1fr; } .deck-detail { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; } }

/* Vergleich mit Schieber */
.vergleich { --p: 50%; position: relative; display: grid; border-radius: var(--r-gross); overflow: hidden; background: var(--onyx); box-shadow: inset 0 0 0 1px var(--rand-deko); }
.vergleich-ebene { grid-area: 1 / 1; min-width: 0; padding: clamp(14px, 2.4vw, 26px); }
.vergleich-ebene.nach { clip-path: inset(0 0 0 var(--p)); background: var(--nacht-2); }
.vergleich-marke { position: absolute; top: 12px; z-index: 2; padding: 5px 10px; border-radius: 999px; font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.vergleich-marke.vor { left: 12px; background: var(--nacht-3); color: var(--tinte-3); }
.vergleich-marke.nach { right: 12px; background: var(--glut-hauch); color: var(--glut); }
.vergleich-griff { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--gold); z-index: 3; pointer-events: none; }
.vergleich-griff::after { content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--glut-tinte); font: 700 15px var(--mono); }
.vergleich-regler { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vergleich-regler:focus-visible + .vergleich-griff::after { outline: 2px solid var(--glut); outline-offset: 3px; }

/* Nachgebaute Oberfläche im Vergleich (gezeichnet, kein Bild) */
.mock { display: grid; gap: 10px; padding-top: 30px; }
.mock-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.mock-kopf b { font-weight: 600; }
.mock-kopf span { color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.mock ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mock li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--nacht-1); font-size: 14px; }
.mock li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock li em { flex: none; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; font-style: normal; padding: 3px 7px; border-radius: 6px; }
.mock li.rot em { background: rgba(229, 72, 77, .14); color: var(--krit); }
.mock li.grau { opacity: .55; }
.mock li.grau em { background: var(--nacht-3); color: var(--tinte-3); }
.mock li.gold em { background: var(--gold-hauch); color: var(--gold); }
.mock li.gruen em { background: rgba(61, 220, 132, .12); color: var(--signal); }
.mock li.schief:nth-child(odd) { transform: rotate(-.6deg) translateX(4px); }
.mock li.schief:nth-child(even) { transform: rotate(.5deg) translateX(-3px); }
.mock-fuss { color: var(--tinte-3); font-size: 13px; }

/* ── Merkzettel: gewählte Karte und Rechner-Ergebnis landen im Kontaktformular ── */
.merkzettel { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-mittel); background: var(--glut-hauch); }
.merkzettel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.merkzettel li { padding: 6px 12px; border-radius: 999px; background: var(--nacht-1); color: var(--tinte); font-size: 14px; animation: merk-rein 420ms var(--kurve); }
@keyframes merk-rein { from { opacity: 0; transform: translateY(6px) scale(.96); } }

/* ── Klebe-Leiste: auf dem Handy nach dem Hook immer ein Weg zum Erstgespräch ── */
.klebe-leiste { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: none; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--nacht-1) 94%, transparent); box-shadow: 0 -1px 0 var(--rand-deko); transform: translateY(110%); transition: transform 360ms var(--kurve); }
.klebe-leiste.zeigen { transform: none; }
.klebe-leiste span { font-size: 14px; color: var(--tinte-2); }
@media (max-width: 760px) { .klebe-leiste { display: flex; } }