/* ═══════════════════════════════════════════════════════════════════════════
   Midnight Quests — Auftritt seit 27.10.2026 (neu aufgebaut, eigenständig).

   Dieses Stylesheet ersetzt style.css + quests.css auf ALLEN Seiten von
   Midnight Quests: Startseite, Entwicklung und die kleinen Seiten
   (Registrieren, Whitepaper, Datenschutz, Konto löschen). style.css und
   quests.css werden von keiner Seite mehr geladen.

   ── FARBREGEL: Haus × App ───────────────────────────────────────────────────
   HAUS (mi-su.me, hw-immo.org): Schwarz und Weiß tragen die Seite. Gold NUR an
   dem, was man bedient (Verweise, Hauptknopf beim Überfahren, Linien beim
   Überfahren, Fokus) und an genau zwei Zierstellen: der zweiten Zeile der
   Hauptüberschrift und dem kurzen Strich vor den Abschnittsüberschriften.
   Rot nur in winzigen Marken (Spiegelstriche, Punkt „live“, Grundsatz-Balken).
   APP (Midnight Quests, Palette „Trail“): Wegweiser-Grün #5EC98B auf Nachtschwarz
   #07070A. Die Quest-Marker sind der App ANGELEHNT, nicht kopiert: offen
   (Grün) und gesperrt (Grau) wie dort; „erledigt“ ist hier hell statt Blau und
   die Kettenstufe hat kein Gold — so bleiben Blau und Gold dem Haus bzw. der
   Bedienung vorbehalten.

   KOMBINATION:
   1. Grund, Fläche, Schrift, Linien = Haus (Schwarz/Weiß). Der Grund ist das
      Nachtschwarz der App, nicht das Warmschwarz des Hauses.
   2. TRAIL-GRÜN gehört den EIGENEN ZEICHNUNGEN der App: Logo-Nadel und -Ring,
      Wege/Routen, aufgedeckter Nebel, Quest-Marker „offen“, Fortschrittsskalen,
      die eine Akzentfläche jedes Symbols und Messwerte. Nie an Fließtext, nie
      an etwas, das man bedient.
   3. GOLD bleibt die Bedienfarbe des Hauses. Das Gold der Kettenstufen aus der
      App kommt in Zeichnungen NICHT vor — dort liest sich eine Kette über
      gestrichelte grüne Verbindungen und das graue Schloss.
   4. ROT bleibt winzig: Spiegelstriche, Zustandspunkt, Eyebrow-Punkt.
   Die Akzentfläche der Symbole hängt an --akzent-flaeche: ein Wert, ein Tausch.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  --ink:      #08080A;  /* Grund: das Nachtschwarz der App */
  --ink-2:    #0E0E11;  /* gehobene Fläche, Bänder */
  --ink-3:    #141418;  /* Karte */
  --forest:   #26262B;  /* ruhige Fläche (aktiver Sprachknopf) */
  --slate:    #5E5E64;  /* leise */
  --olive:    #8F8C88;  /* gedämpfte Beschriftung */
  --sage:     #C4C1BC;  /* Fließtext */
  --mint:     #F4F2EE;  /* hervorgehoben = Weiß */
  --paper:    #F4F2EE;  /* Überschriften = Weiß */

  --gold:      #C9A45C; /* Bedienung */
  --gold-hell: #DDBE7E; /* Gold als Schrift auf Schwarz */
  --rot:       #C0313E; /* nur winzige Marken */
  --rot-hell:  #E25D69;

  --trail:      #5EC98B; /* Wegweiser-Grün — die Farbe der App */
  --trail-soft: #9BE8BB;
  --trail-dim:  rgba(94,201,139,.14);
  --locked:     #7A7F87; /* gesperrt, wie in der App */
  --akzent-flaeche: var(--trail);

  --line:     rgba(244,242,238,.10);
  --line-2:   rgba(244,242,238,.20);

  /* Namen, die app.js und eingebettete Stile benutzen */
  --bg: var(--ink);
  --surface: var(--ink-3);
  --surface-2: #1B1B20;
  --surface-3: #25252B;
  --text: var(--paper);
  --text-2: var(--sage);
  --text-3: var(--olive);
  --border: var(--line);
  --border-2: var(--line-2);
  --radius: 12px;
  --radius-lg: 0px;

  --font: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  --mono: 'M PLUS 1 Code', ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --page: 1180px;
  --nav-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); background: var(--ink); color: var(--sage);
  line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--trail-dim); color: var(--paper); }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--mono); }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.navbar {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
.navbar.scrolled {
  background: rgba(8,8,10,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--page); margin: 0 auto; height: 100%;
  padding: 0 28px; display: flex; align-items: center; gap: 24px;
}
.nav-logo { display: flex; align-items: center; gap: 11px; font-weight: 900; letter-spacing: -.4px;
            color: var(--paper); font-size: 16px; flex: none; }
.mq-mark { width: 26px; height: 26px; flex: none; color: var(--trail); }
.mq-mark circle, .mq-mark path { vector-effect: non-scaling-stroke; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-link { font-size: 13.5px; font-weight: 500; color: var(--sage); transition: color .15s; white-space: nowrap; }
.nav-link:hover { color: var(--paper); }
.nav-link:focus-visible { outline-offset: 5px; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-request { padding: 8px 18px; font-size: 13px; }
.lang-toggle { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang-btn {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; padding: 4px 10px; border-radius: 999px;
  color: var(--olive); transition: background .15s, color .15s;
}
.lang-btn:hover { color: var(--paper); }
.lang-btn.lang-active, .lang-btn.on { background: var(--forest); color: var(--mint); }
.hamburger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
             color: var(--sage); border: 1px solid var(--line); border-radius: 10px; }
.hamburger:hover { color: var(--paper); border-color: var(--line-2); }
.mobile-nav {
  display: none; flex-direction: column;
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(8,8,10,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); padding: 10px 0 18px;
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
}
.mobile-nav.open { display: flex; }
.mobile-nav-link { display: block; padding: 13px 28px; font-size: 15.5px; color: var(--sage); }
.mobile-nav-link:hover { color: var(--paper); }
/* Fortschritt durch die Seite: ein Wegstrich in der Farbe der App, unten an der Leiste. */
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--trail); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ── Knöpfe, Eyebrow, Verweise ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; font-size: 14.5px; font-weight: 700; line-height: 1.3;
  transition: transform .15s, background .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--mint); color: var(--ink); }
.btn-primary:hover { background: var(--gold); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--paper); }
.btn-ghost:hover { border-color: var(--gold); background: rgba(244,242,238,.05); }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:disabled:hover { transform: none; background: var(--mint); }
.btn .mq-mark { width: 18px; height: 18px; color: var(--ink); }
.btn-dl-ver { font-size: .84em; opacity: .66; font-weight: 700; }
.patreon-mark { font-family: var(--mono); font-size: 12px; letter-spacing: 1.4px; }
.btn-patreon-text { letter-spacing: 0; }
/* Leiser Weg neben den zwei Hauptknöpfen: ein Verweis, kein dritter Knopf. */
.btn-quiet { padding: 10px 2px; border-radius: 0; font-size: 14px; font-weight: 500; color: var(--sage); }
.btn-quiet:hover { transform: none; color: var(--gold-hell); }
.btn-quiet .patreon-mark { padding-bottom: 2px; border-bottom: 1px solid var(--line-2); transition: border-color .2s; }
.btn-quiet:hover .patreon-mark { border-color: var(--gold); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--olive);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 10px; margin-bottom: 28px;
}
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--rot); display: block; flex: none; }

.mq-note {
  border-left: 1px solid var(--line-2); padding: 2px 0 2px 16px;
  color: var(--olive); font-size: 13.5px; line-height: 1.7; margin: 18px 0; max-width: 64ch;
}
.mq-note a, .link { color: var(--gold-hell); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mq-note a:hover, .link:hover { text-decoration-thickness: 2px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; padding: calc(var(--nav-h) + 76px) 0 150px; overflow: hidden;
  background:
    radial-gradient(60% 70% at 76% 44%, rgba(94,201,139,.07), transparent 70%),
    radial-gradient(120% 90% at 88% 16%, #212227 0%, #15161A 48%, #0D0E11 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  --cut: 96px;
}
/* Die schräge Kante bekommt eine feine Linie, wie ein Schnitt auf der Bauzeichnung. */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--cut); pointer-events: none;
  background: linear-gradient(to bottom right, transparent calc(50% - 2px), rgba(244,242,238,.22) calc(50% - 2px), rgba(244,242,238,.22) 50%, transparent 50%);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg svg { position: absolute; right: -6%; top: -8%; width: 90%; min-width: 760px; height: auto; opacity: .22; color: var(--olive); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,17,0) 55%, rgba(13,14,17,.55)); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.hero-in { position: relative; max-width: 640px; }
.hero-title {
  font-size: clamp(44px, 6.4vw, 84px); line-height: .98; letter-spacing: -3px; font-weight: 900;
  color: var(--paper); margin-bottom: 26px;
}
.hero-title .hero-accent { display: block; font-style: normal; color: var(--gold-hell); }
.hero-sub { font-size: clamp(16px, 1.55vw, 18.5px); max-width: 54ch; color: var(--sage); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-join-note { margin-top: 26px; }
.download-hint { margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--olive); min-height: 1em; }
.hero-emblem { position: relative; width: min(540px, 100%); aspect-ratio: 1; justify-self: end; }
.hero-emblem .emb { width: 100%; height: 100%; }

/* Die Zeichnung: Nadel, Ring und Wegpunkte aus dem App-Logo; darum Lineal, Nebel, Route, Marker. */
.emb text, .fig-svg text, .rail-svg text { font-family: var(--mono); fill: var(--olive); font-size: 9.5px; letter-spacing: .6px; }
.emb .e-card { font-size: 13px; fill: var(--paper); text-anchor: middle; dominant-baseline: central; }
.emb .e-deg { font-size: 8.5px; text-anchor: middle; dominant-baseline: central; fill: var(--slate); }
.e-n { text-anchor: middle; font-size: 9px; fill: var(--sage); }
.emb .z-linie, .fig-svg .z-linie, .rail-svg .z-linie { fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.emb .z-fein, .fig-svg .z-fein, .rail-svg .z-fein { stroke-width: .8; stroke: var(--olive); }
.e-r0 { opacity: .55; }
.e-tk { stroke: var(--olive); stroke-width: .9; }
.e-tk2 { stroke: var(--sage); stroke-width: 1.3; opacity: .7; }
.e-tk3 { stroke: var(--paper); stroke-width: 2.2; }
.e-r1 { opacity: .6; }
.e-ground { fill: #060608; }
.e-lit { fill: #20222A; }
.e-cont path { fill: none; stroke: var(--paper); stroke-opacity: .30; stroke-width: 1; }
#e-st circle, #f-st circle { fill: var(--olive); fill-opacity: .42; }
.e-spin { fill: none; stroke: var(--olive); stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 1.5 7; stroke-linecap: round; transform-box: view-box; transform-origin: 240px 240px; }
.e-route, .f-route { stroke: var(--paper) !important; opacity: .92; stroke-width: 1.6; }
.e-dot, .f-dot { fill: none; stroke: var(--trail); stroke-width: 9; stroke-linecap: round; stroke-dasharray: .0001 2; stroke-dashoffset: -.9999; }
.e-link, .f-link { fill: none; stroke: var(--trail); stroke-opacity: .72; stroke-width: 1.7; stroke-dasharray: 3 6; stroke-linecap: round; }
.e-sight, .f-sight { stroke: var(--trail) !important; stroke-opacity: .5; }
.e-pulse { fill: none; stroke: var(--trail); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.e-lring { stroke: var(--trail) !important; stroke-width: 2.2 !important; opacity: .55; }
.e-wp { fill: var(--trail); }
.e-wp-s { opacity: .55; }
.e-nn { fill: var(--trail); }
.e-ns { fill: var(--trail); opacity: .4; }
.e-pv { fill: var(--ink); }
.e-pvr { fill: none; stroke: var(--trail); stroke-width: 2.4; }
.e-needle { transform-origin: 240px 240px; transform-box: view-box; }
.e-nn, .e-ns, .e-pv, .e-pvr { transform-origin: 240px 240px; transform-box: view-box; }
.e-meta-t { fill: var(--olive); font-size: 9.5px; }
.e-hdg { fill: var(--trail); }
.e-scale { stroke: var(--olive); }
/* Quest-Marker, der App angelehnt: dunkler Rand, Scheibe in der Farbe des Zustands.
   Offen = Trail-Grün und gesperrt = Grau wie in der App; erledigt = hell statt Blau, Kettenstufe ohne Gold
   (siehe Farbregel oben). */
.mk-rim { fill: #06100B; opacity: .92; }
.mk-done .mk-disc { fill: var(--paper); }
.mk-open .mk-disc { fill: var(--trail); }
.mk-locked .mk-disc { fill: var(--locked); }
.mk-g { fill: none; stroke: #06110B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-gf { fill: #06110B; stroke: none; }
.mk { transform-box: fill-box; transform-origin: center; }

/* ── Ablauf der Zeichnung beim Laden ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-in > * { animation: einblenden .9s var(--ease) backwards; }
  .hero-in > :nth-child(2) { animation-delay: .1s; }
  .hero-in > :nth-child(3) { animation-delay: .2s; }
  .hero-in > :nth-child(4) { animation-delay: .3s; }
  .hero-in > :nth-child(5) { animation-delay: .4s; }
  .hero-in > :nth-child(6) { animation-delay: .5s; }
  .hero-emblem { animation: einblenden 1.1s var(--ease) .1s backwards; }
  /* Auf Telefon und Tablet steht das Zeichen UNTER dem Text. Damit der Aufbau nicht ungesehen
     abläuft, hält er an, bis das Zeichen im Bild ist (quests-neu.js setzt dann .ist-sichtbar).
     Nur mit Skript: .reveal-an gibt es ohne Skript nicht, dann läuft alles wie gewohnt. */
  .reveal-an .hero-emblem:not(.ist-sichtbar) .emb,
  .reveal-an .hero-emblem:not(.ist-sichtbar) .emb * { animation-play-state: paused; }

  .emb .e-r0, .emb .e-tk, .emb .e-r1, .emb .e-lring, .emb .e-sight, .emb .e-route, .emb .e-scale, .emb .e-clr { stroke-dasharray: 1; }
  .emb .e-r0   { animation: zeichnen 1.4s var(--ease) .10s backwards; }
  .emb .e-tk   { animation: zeichnen 1.5s var(--ease) .20s backwards; }
  .emb .e-tk2  { animation-delay: .30s; }
  .emb .e-tk3  { animation-delay: .40s; }
  .emb .e-r1   { animation: zeichnen 1.4s var(--ease) .60s backwards; }
  .emb .e-labels { animation: aufblenden .9s ease 1.3s backwards; }
  .emb .e-fog  { animation: aufblenden 1s ease .8s backwards; }
  .emb .e-lit  { animation: aufblenden 1s ease .8s backwards; }
  .emb .e-clr  { animation: zeichnen 2s var(--ease) 1s backwards; }
  .emb .e-eye  { transform-box: fill-box; transform-origin: center; animation: wachsen .9s var(--ease) 2.3s backwards; }
  .emb .e-route { animation: zeichnen 2s var(--ease) 1s backwards; }
  .emb .e-dot  { animation: wandern 2s var(--ease) 1s backwards; }
  .emb .e-sight { animation: zeichnen 1s var(--ease) 2.5s backwards; }
  .emb .e-link { animation: aufblenden .8s ease 3s backwards; }
  .emb .e-m1 .mk { animation: markersetzen .6s var(--ease) 1.7s backwards; }
  .emb .e-m2 .mk { animation: markersetzen .6s var(--ease) 2.2s backwards; }
  .emb .e-m3 .mk { animation: markersetzen .6s var(--ease) 2.8s backwards; }
  .emb .e-nums { animation: aufblenden .8s ease 3s backwards; }
  .emb .e-lring { animation: zeichnen 1.2s var(--ease) 1.6s backwards; }
  .emb .e-wp-n { transform-box: fill-box; transform-origin: center; animation: markersetzen .5s var(--ease) 2.7s backwards; }
  .emb .e-wp-s { transform-box: fill-box; transform-origin: center; animation: markersetzen .5s var(--ease) 2.9s backwards; }
  .emb .e-nn { animation: nadel .9s var(--ease) 3s backwards; }
  .emb .e-ns { animation: nadel .9s var(--ease) 3.2s backwards; }
  .emb .e-pv, .emb .e-pvr { animation: aufblenden .5s ease 3.5s backwards; }
  .emb .e-meta { animation: aufblenden .9s ease 1.6s backwards; }
  .emb .e-scale { animation: zeichnen 1s var(--ease) 1.8s backwards; }
  /* Leerlauf: ruhig. Rad, Ping vom Standort, Atem des offenen Markers. */
  .emb .e-spin { animation: drehen 140s linear infinite; }
  .emb .e-pulse { animation: ping 5.2s ease-out 3.8s infinite; }
  .emb .e-m2 .mk-rim { animation: atmen 4.8s ease-in-out 4s infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wandern { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -.9999; } }
@keyframes aufblenden { from { opacity: 0; } }
@keyframes wachsen { from { transform: scale(.01); } }
@keyframes markersetzen { from { opacity: 0; transform: scale(.2); } }
@keyframes nadel { from { opacity: 0; transform: scaleY(.1); } }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes ping { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: .55; } 100% { opacity: 0; transform: scale(1); } }
@keyframes atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes einblenden { from { opacity: 0; transform: translateY(24px); } }
@keyframes gauge { from { width: 0; } }
@keyframes plus { from { transform: scaleX(0); } }

/* ── Leiste unter dem Hero: Stand der App, soweit gemessen ────────────────── */
.ribbon { border-block: 1px solid var(--line); background: var(--ink-2); position: relative; z-index: 2; }
.ribbon-in { display: flex; flex-wrap: wrap; gap: 8px 38px; padding-block: 15px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--olive); }
.ribbon-in b { font-weight: 400; color: var(--olive); margin-right: 8px; }
.ribbon-in em { font-style: normal; color: var(--paper); }
.ribbon-in .rb-live em { color: var(--trail); }

/* ── Abschnitte ──────────────────────────────────────────────────────────── */
.sec { padding: 100px 0; position: relative; }
.sec.alt { background: var(--ink-2); border-block: 1px solid var(--line); }
.sec-label {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--olive);
}
.sec-label::before { content: ''; width: 28px; height: 1px; background: var(--gold); flex: none; }
.sec-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sec-label .n { font-family: var(--mono); font-weight: 400; color: var(--olive); letter-spacing: 1px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; margin-bottom: 52px; }
.sec-title { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -1.5px; font-weight: 900; color: var(--paper); max-width: 24ch; }
.sec-sub { margin-top: 16px; font-size: 16.5px; max-width: 60ch; color: var(--sage); }

/* ── Karten (Grammatik von hw-immo.org / mi-su.me) ───────────────────────── */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 30px); }
.cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.c6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: 0;
  padding: clamp(22px, 2.2vw, 30px);
  transition: border-color .35s, box-shadow .35s, transform .35s var(--ease);
}
.card::before, .card::after {
  content: ''; position: absolute; pointer-events: none; background: var(--line-2);
  transition: width .45s var(--ease), height .45s var(--ease), background-color .35s;
}
.card::before { left: -11px; top: -1px; width: 46px; height: 1px; }
.card::after  { left: -1px; top: -11px; width: 1px; height: 46px; }
.card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 34px -14px rgba(0,0,0,.7); }
.card:hover::before { width: 96px; background: var(--gold); }
.card:hover::after  { height: 96px; background: var(--gold); }
a.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.card-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.card-icon { display: block; width: 60px; height: 60px; flex: none; color: var(--paper); }
.card-icon svg { width: 100%; height: 100%; }
.card-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; line-height: 1.5; text-transform: uppercase; color: var(--olive); text-align: right; padding-top: 2px; }
.card-kicker i { font-style: normal; color: var(--olive); margin-right: 6px; }
.card h3 { font-size: clamp(18px, 1.7vw, 21px); font-weight: 900; letter-spacing: -.4px; line-height: 1.25; color: var(--paper); }
.card p { font-size: 14.5px; color: var(--sage); }
.card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.card-punkte { display: grid; gap: 6px; font-size: 14px; color: var(--paper); }
.card-punkte li { position: relative; padding-left: 22px; line-height: 22px; }
.card-punkte li::before { content: ''; position: absolute; left: 0; top: 10px; width: 11px; height: 2px; background: var(--rot); }

.zeichnung { --strich: 2.2; --strich-fein: 1.2; overflow: visible; }
.zeichnung .z-linie { fill: none; stroke: currentColor; stroke-width: var(--strich); stroke-linecap: square; stroke-linejoin: miter; }
.zeichnung .z-fein { stroke-width: var(--strich-fein); }
.zeichnung .z-akzent { fill: var(--akzent-flaeche); }

/* Einblenden beim Scrollen. Ausgeblendet wird nur, wenn das Skript .reveal-an gesetzt hat. */
.reveal-an [data-reveal]:not(.ist-sichtbar) { opacity: 0; transform: translateY(24px); }
.reveal-an [data-reveal].ist-sichtbar { opacity: 1; animation: einblenden .8s var(--ease) var(--verzug, 0ms) backwards; }
@media (prefers-reduced-motion: no-preference) {
  /* Gezeichnet wird, sobald die Karte eingeblendet wird. */
  .reveal-an .ist-sichtbar .zeichnung .z-linie { stroke-dasharray: 1; animation: zeichnen 1.1s var(--ease) calc(var(--verzug, 0ms) + 200ms) both; }
  .reveal-an .ist-sichtbar .zeichnung .z-flaeche { transform-box: fill-box; transform-origin: 50% 100%; animation: aufbauen .9s var(--ease) calc(var(--verzug, 0ms) + 650ms) both; }
  .reveal-an .ist-sichtbar .gauge i::after { animation: gauge 1.1s var(--ease) calc(var(--verzug, 0ms) + 500ms) backwards; }
  .reveal-an .steps.ist-sichtbar::after { animation: plus 1.6s var(--ease) .2s backwards; }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal-an .fig .f-frame, .reveal-an .fig .f-tk, .reveal-an .fig .f-route, .reveal-an .fig .f-sight, .reveal-an .fig .f-clr,
  .reveal-an .fig .f-north .z-linie, .reveal-an .fig .f-scale .z-linie { stroke-dasharray: 1; }
  .reveal-an .fig.ist-sichtbar .f-frame { animation: zeichnen 1.2s var(--ease) .1s backwards; }
  .reveal-an .fig.ist-sichtbar .f-tk { animation: zeichnen 1.4s var(--ease) .3s backwards; }
  .reveal-an .fig.ist-sichtbar .e-fog, .reveal-an .fig.ist-sichtbar .e-lit { animation: aufblenden 1s ease .3s backwards; }
  .reveal-an .fig.ist-sichtbar .f-clr { animation: zeichnen 2.2s var(--ease) .7s backwards; }
  .reveal-an .fig.ist-sichtbar .f-route { animation: zeichnen 2.2s var(--ease) .7s backwards; }
  .reveal-an .fig.ist-sichtbar .f-dot { animation: wandern 2.2s var(--ease) .7s backwards; }
  .reveal-an .fig.ist-sichtbar .f-eye { transform-box: fill-box; transform-origin: center; animation: wachsen .9s var(--ease) 2.6s backwards; }
  .reveal-an .fig.ist-sichtbar .f-sight { animation: zeichnen 1s var(--ease) 2.7s backwards; }
  .reveal-an .fig.ist-sichtbar .f-m1 .mk { animation: markersetzen .6s var(--ease) 1.5s backwards; }
  .reveal-an .fig.ist-sichtbar .f-m2 .mk { animation: markersetzen .6s var(--ease) 2.2s backwards; }
  .reveal-an .fig.ist-sichtbar .f-m3 .mk { animation: markersetzen .6s var(--ease) 3s backwards; }
  .reveal-an .fig.ist-sichtbar .f-link, .reveal-an .fig.ist-sichtbar .f-nums { animation: aufblenden .8s ease 3.2s backwards; }
  .reveal-an .fig.ist-sichtbar .f-north .z-linie, .reveal-an .fig.ist-sichtbar .f-scale .z-linie { animation: zeichnen 1s var(--ease) 1.2s backwards; }
  .reveal-an .fig.ist-sichtbar .f-labs { animation: aufblenden 1s ease 1.6s backwards; }
  .fig .f-pulse { animation: ping 5.2s ease-out 3.8s infinite; }
  .fig .f-m2 .mk-rim { animation: atmen 4.8s ease-in-out 4s infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes aufbauen { from { opacity: 0; transform: scaleY(.15); } to { opacity: 1; transform: none; } }

/* ── Die Karte: Kartenblatt mit Nebel, Route und Kette ───────────────────── */
.map-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.fig { position: relative; }
.fig-svg { width: 100%; height: auto; overflow: visible; }
.fig-svg .f-frame { stroke: var(--line-2); stroke-width: 1.2; }
.fig-svg .f-tk { stroke: var(--olive); }
.fig-svg .f-lab { font-size: 9px; fill: var(--slate); text-anchor: middle; dominant-baseline: central; }
.fig-svg .f-scale .f-lab { fill: var(--olive); text-anchor: start; }
.fig-svg .f-north .z-linie { stroke: var(--olive); }
.f-river { fill: none; stroke: var(--paper); stroke-opacity: .34; stroke-width: 1.6; }
.f-way { fill: none; stroke: var(--paper); stroke-opacity: .42; stroke-width: 1.1; }
.f-pulse { stroke-width: 1.6; }
.legend { display: grid; gap: 10px; margin: 26px 0 0; font-size: 13.5px; color: var(--sage); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.legend li { display: flex; align-items: center; gap: 12px; }
.sw { width: 16px; height: 16px; flex: none; position: relative; }
.sw-lit { background: #15151B; border: 1px solid var(--line-2); }
.sw-fog { background: #08080B; border: 1px solid var(--line-2); background-image: radial-gradient(circle, rgba(143,140,136,.7) 1px, transparent 1.2px); background-size: 4px 4px; }
.sw-open, .sw-done, .sw-lock { border-radius: 50%; border: 2.5px solid #06100B; box-shadow: 0 0 0 1px var(--line-2); }
.sw-open { background: var(--trail); } .sw-done { background: var(--paper); } .sw-lock { background: var(--locked); }

/* Fortschrittsskala „aufgedeckt“. Der Balken bleibt bei null, bis jemand gelaufen ist. */
.mq-cover { margin-top: 34px; max-width: 460px; }
.mq-cover-label { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--olive); margin-bottom: 9px; }
.mq-cover-bar { position: relative; height: 12px; border-bottom: 1px solid var(--line-2); background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(10% - .1px)); }
.mq-cover-fill { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: var(--trail); transition: width 1.1s var(--ease); }

/* ── Unterwegs: drei Profile mit Skalen ──────────────────────────────────── */
.gauges { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.gauge { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--olive); }
.gauge i { display: block; position: relative; height: 10px; border-bottom: 1px solid var(--line-2); background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(20% - .1px)); }
.gauge i::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 3px; width: calc(var(--v, 0) * 100%); background: var(--trail); }

/* ── Gemeinsam: die Regel in drei Schritten ──────────────────────────────── */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 34px; margin: 0 0 58px; padding-top: 30px; }
.steps::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--line-2); }
.steps::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 3px; background: var(--trail); transform-origin: 0 50%; }
.step { position: relative; }
.step::before { content: ''; position: absolute; left: 0; top: -30px; width: 11px; height: 11px; background: var(--ink); border: 2px solid var(--paper); transform: rotate(45deg) translate(1px, 1px); z-index: 1; }
.sec.alt .step::before { background: var(--ink-2); }
.step .n { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; color: var(--olive); }
.step h3 { font-size: 21px; font-weight: 900; letter-spacing: -.5px; color: var(--paper); margin: 4px 0 6px; }
.step p { font-size: 14.5px; max-width: 34ch; }

/* ── Markt ───────────────────────────────────────────────────────────────── */
.mq-kind { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 999px; }
.mq-kind button { padding: 7px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--olive); transition: background .15s, color .15s; }
.mq-kind button.on { background: var(--forest); color: var(--mint); }
.mq-kind button:not(.on):hover { color: var(--paper); }
.market-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-btn { padding: 6px 15px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--sage); border: 1px solid var(--line); transition: border-color .15s, color .15s, background .15s; }
.filter-btn:hover { border-color: var(--line-2); color: var(--paper); }
.filter-btn.active { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }
.market-more { text-align: center; margin-top: 34px; }
.listing-card {
  position: relative; background: var(--ink-3); border: 1px solid var(--line); border-radius: 0; cursor: pointer;
  transition: border-color .35s, box-shadow .35s, transform .35s var(--ease);
  animation: einblenden .6s var(--ease) backwards;
}
.listing-card:nth-child(2) { animation-delay: .05s; } .listing-card:nth-child(3) { animation-delay: .1s; }
.listing-card:nth-child(4) { animation-delay: .15s; } .listing-card:nth-child(5) { animation-delay: .2s; }
.listing-card:nth-child(n+6) { animation-delay: .25s; }
.listing-card::before, .listing-card::after { content: ''; position: absolute; pointer-events: none; background: var(--line-2); transition: width .45s var(--ease), height .45s var(--ease), background-color .35s; }
.listing-card::before { left: -11px; top: -1px; width: 46px; height: 1px; }
.listing-card::after  { left: -1px; top: -11px; width: 1px; height: 46px; }
.listing-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 14px 34px -14px rgba(0,0,0,.7); }
.listing-card:hover::before { width: 96px; background: var(--gold); }
.listing-card:hover::after { height: 96px; background: var(--gold); }
.listing-img { width: 100%; height: 180px; object-fit: cover; background: var(--surface-2); }
.listing-img-placeholder { height: 180px; display: grid; place-items: center; background: var(--ink-2); border-bottom: 1px solid var(--line); color: var(--olive); }
.listing-img-placeholder svg { width: 76px; height: 76px; }
.listing-body { padding: 18px 20px 20px; }
.listing-category-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.listing-category { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--olive); }
.listing-title { font-size: 16px; font-weight: 900; letter-spacing: -.2px; color: var(--paper); margin-bottom: 4px; line-height: 1.3; }
.listing-car { font-size: 13px; color: var(--olive); margin-bottom: 8px; }
.listing-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.listing-price { font-size: 17px; font-weight: 900; color: var(--paper); }
.listing-seller { font-size: 12px; color: var(--olive); }
.mq-bubble { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }
.mq-unit { color: var(--olive); font-size: 12px; font-weight: 500; margin-left: 4px; }
.mq-badge-service, .mq-badge-item { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--line-2); color: var(--sage); }
.mq-badge-service { background: var(--forest); color: var(--paper); }
.mq-price-big { font-size: 22px; font-weight: 900; color: var(--paper); margin-bottom: 10px; }
.skeleton-card { height: 300px; background: linear-gradient(90deg, var(--ink-3) 25%, var(--surface-2) 50%, var(--ink-3) 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; border: 1px solid var(--line); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.empty-msg { color: var(--olive); font-size: 14px; padding: 28px 0; text-align: center; font-family: var(--mono); letter-spacing: .3px; }

/* ── Entwicklung (Anreißer) ──────────────────────────────────────────────── */
.dev-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.dev-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lock-i { width: 14px; height: 14px; flex: none; }
.rail-card { padding-bottom: 20px; gap: 6px; }
.rail-card .rail-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--olive); }
.rail-svg { width: 100%; height: auto; overflow: visible; margin: 14px 0 4px; }
.rail-svg .rail-base { stroke: var(--line-2); stroke-width: 1.2; }
.rail-svg .rail-ticks { stroke: var(--paper); stroke-width: 2; stroke-linecap: butt; opacity: .9; }
.rail-svg .r-lab { font-size: 14px; fill: var(--olive); }
.rail-read { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--olive); }
.rail-read b { font-weight: 400; margin-right: 10px; }
.rail-read em { font-style: normal; color: var(--trail); }
.rail-pip { fill: var(--trail); }
.rail-pulse { fill: none; stroke: var(--trail); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-an .ist-sichtbar .rail-base { stroke-dasharray: 1; animation: zeichnen 1.4s var(--ease) .2s backwards; }
  .reveal-an .ist-sichtbar .rail-ticks { stroke-dasharray: 1; animation: zeichnen 2s var(--ease) .5s backwards; }
  .rail-pulse { animation: ping 4.2s ease-out 2.4s infinite; }
}

/* ── Konto ───────────────────────────────────────────────────────────────── */
.acc-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.acc-card { padding: clamp(24px, 3vw, 34px); }
.acc-links { display: grid; gap: 4px; font-size: 14.5px; }
.acc-links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--paper); transition: color .15s, padding .25s var(--ease); max-width: 440px; }
.acc-links a::after { content: '→'; color: var(--olive); transition: color .15s, transform .25s var(--ease); }
.acc-links a:hover { color: var(--gold-hell); }
.acc-links a:hover::after { color: var(--gold-hell); transform: translateX(5px); }

/* ── Coins und Häuser ────────────────────────────────────────────────────── */
.houses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); margin-top: 18px; }
.house { flex-direction: row; align-items: center; gap: 16px; padding: 20px 22px; }
.house .card-icon { width: 46px; height: 46px; }
.house b { display: block; font-size: 15px; font-weight: 900; color: var(--paper); letter-spacing: -.2px; }
.house span.t { display: block; font-size: 12.5px; line-height: 1.5; color: var(--olive); }
.sub-h { font-size: 20px; font-weight: 900; letter-spacing: -.5px; color: var(--paper); margin: 64px 0 4px; }
.sub-p { font-size: 15px; color: var(--sage); max-width: 56ch; }
.card.kreis { border-color: var(--line-2); }

/* ── Mitgliedschaft ──────────────────────────────────────────────────────── */
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.ms-card { gap: 0; }
.ms-card--best { border-color: var(--paper); }
.ms-card--best::before, .ms-card--best::after { background: var(--paper); }
.ms-band { position: absolute; top: -13px; right: 22px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; padding: 4px 11px; background: var(--paper); color: var(--ink); }
.ms-name { font-size: 18px; font-weight: 900; letter-spacing: -.3px; color: var(--paper); margin: 0 0 8px; }
.ms-price { font-size: 40px; font-weight: 900; letter-spacing: -1.6px; line-height: 1.05; color: var(--paper); }
.ms-per { font-size: 13px; color: var(--olive); margin: 4px 0 18px; }
.ms-coins { display: flex; align-items: baseline; gap: 10px; padding: 13px 15px; margin-bottom: 18px; border: 1px solid var(--line); background: var(--ink-2); }
.ms-coins b { font-family: var(--mono); font-size: 22px; font-weight: 400; color: var(--paper); }
.ms-coins span { font-size: 12.5px; color: var(--olive); }
.ms-list { display: grid; gap: 9px; margin: 0 0 24px; }
.ms-list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 22px; color: var(--paper); }
.ms-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 11px; height: 2px; background: var(--rot); }
.ms-btn { margin-top: auto; }
.ms-btn.btn { width: 100%; }
.ms-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); margin-top: 32px; }
.ms-how .ms-note { margin-top: 12px; }
.ms-note { font-size: 14px; line-height: 1.7; color: var(--sage); max-width: 62ch; }
.ms-legal { font-size: 13px; line-height: 1.75; color: var(--olive); max-width: 78ch; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ── Fuß ─────────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 30px 0 44px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--olive); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { color: var(--sage); }
.foot-links a:hover { color: var(--gold-hell); }
.foot-brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; }
.foot-brand .mq-mark { width: 20px; height: 20px; }

/* ── Fenster (Anzeige, Anzeige aufgeben) und Formulare ───────────────────── */
.modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 16px; }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-box {
  position: relative; z-index: 1; width: min(640px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 0; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: modal-in .22s ease;
}
.modal-box::before, .modal-box::after { content: ''; position: absolute; pointer-events: none; background: var(--line-2); }
.modal-box::before { left: -11px; top: -1px; width: 46px; height: 1px; }
.modal-box::after  { left: -1px; top: -11px; width: 1px; height: 46px; }
@keyframes modal-in { from { opacity: 0; transform: scale(.97) translateY(8px); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.modal-header h3 { font-size: 18px; font-weight: 900; letter-spacing: -.3px; color: var(--paper); }
.modal-close { width: 30px; height: 30px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; color: var(--olive); transition: color .15s, border-color .15s; flex: none; }
.modal-close:hover { color: var(--paper); border-color: var(--gold); }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.form-row { margin-bottom: 18px; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.form-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--olive); letter-spacing: .3px; margin-bottom: 7px; }
.form-input {
  width: 100%; font: inherit; font-size: 15px; color: var(--paper); background: var(--ink-2);
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color .15s;
}
.form-input:focus { border-color: var(--gold); }
.form-input::placeholder { color: var(--olive); opacity: .8; }
.form-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.form-select { cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23C4C1BC' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }
.form-select option { background: var(--ink-2); color: var(--paper); }
body.modal-open { overflow: hidden; }

/* ── Entwicklungsseite ───────────────────────────────────────────────────── */
.dv-head { position: relative; }
.dv-hero { padding: calc(var(--nav-h) + 56px) 0 28px; position: relative; overflow: hidden;
  background: radial-gradient(60% 90% at 84% 30%, rgba(94,201,139,.06), transparent 70%), radial-gradient(120% 90% at 88% 16%, #1D1E23 0%, #111215 52%, #08080A 100%); }
.dv-hero .hero-bg svg { opacity: .16; }
.dv-hero-in { position: relative; max-width: 880px; }
.dv-title { font-size: clamp(40px, 5.4vw, 68px); line-height: 1; letter-spacing: -2.4px; font-weight: 900; color: var(--paper); margin-bottom: 20px; }
.dv-lead { max-width: 60ch; font-size: 17px; color: var(--sage); }
.dv-note { max-width: 62ch; font-size: 13.5px; color: var(--olive); margin-top: 16px; padding-left: 16px; border-left: 1px solid var(--line-2); }
.dv-wrap { max-width: 880px; margin: 0 auto; padding: 36px 28px 110px; position: relative; }
.dv-rail { position: relative; padding-left: 46px; }
.dv-rail::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 30px; width: 1px; background: var(--line-2); }
.dv-rail::after { content: ''; position: absolute; left: 9px; top: 8px; width: 3px; height: var(--dv-prog, 0px); max-height: calc(100% - 38px); background: var(--trail); pointer-events: none; }
.dv-entry { position: relative; margin-bottom: 52px; }
.dv-entry::before { content: ''; position: absolute; left: -43px; top: 6px; width: 11px; height: 11px; background: var(--ink); border: 2px solid var(--paper); transform: rotate(45deg); }
.dv-entry.minor::before { width: 8px; height: 8px; left: -41px; top: 8px; border-color: var(--olive); border-width: 1.5px; }
.dv-when { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--olive); }
.dv-title-h { font-size: clamp(20px, 2.3vw, 25px); font-weight: 900; letter-spacing: -.6px; line-height: 1.25; color: var(--paper); margin: 6px 0 12px; }
.dv-body { color: var(--sage); font-size: 15px; line-height: 1.7; max-width: 68ch; }
.dv-body p { margin: 0 0 11px; }
.dv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.dv-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; padding: 3px 9px; color: var(--olive); border: 1px solid var(--line); }
.dv-tag.v { color: var(--paper); border-color: var(--line-2); }
.login-gate { position: relative; background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 0; }
.login-gate::before, .login-gate::after { content: ''; position: absolute; pointer-events: none; background: var(--line-2); }
.login-gate::before { left: -11px; top: -1px; width: 46px; height: 1px; }
.login-gate::after  { left: -1px; top: -11px; width: 1px; height: 46px; }
.login-gate h3 { font-size: 22px; font-weight: 900; letter-spacing: -.5px; color: var(--paper); }
.dv-foot { border-top: 1px solid var(--line); padding: 26px 0 40px; font-size: 13px; color: var(--olive); text-align: center; }
.dv-foot a { color: var(--sage); margin: 0 8px; }
.dv-foot a:hover { color: var(--gold-hell); }

/* ── Kleine Seiten: Registrieren, Konto löschen, Whitepaper, Datenschutz ──── */
/* Gleicher Kopf wie die Entwicklungsseite (Leiste, Konturen, Titel), gleicher Fuß wie die Startseite.
   Die Konturen kommen als Bild aus quests-kontur.svg, damit sie nicht in jeder Seite stehen. */
.pg-hero {
  position: relative; overflow: hidden; padding: calc(var(--nav-h) + 52px) 0 34px;
  background: radial-gradient(60% 90% at 84% 30%, rgba(94,201,139,.06), transparent 70%), radial-gradient(120% 90% at 88% 16%, #1D1E23 0%, #111215 52%, #08080A 100%);
}
.pg-hero::before {
  content: ''; position: absolute; right: -6%; top: -14%; width: 90%; min-width: 760px; aspect-ratio: 1200 / 760;
  background: url(quests-kontur.svg) no-repeat center / contain; opacity: .15; pointer-events: none;
}
.pg-hero-in { position: relative; max-width: 880px; }
.pg-hero-in.schmal { max-width: 720px; }
.pg-title { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -2.2px; font-weight: 900; color: var(--paper); margin-bottom: 18px; }
.pg-lead { max-width: 60ch; font-size: 17px; color: var(--sage); }
.pg-stand { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--olive); margin: -6px 0 16px; }
.pg-wrap { max-width: 880px; margin: 0 auto; padding: 44px 28px 110px; position: relative; }
.pg-wrap.schmal { max-width: 720px; }
.pg-card { display: block; padding: clamp(24px, 3vw, 36px); }
.pg-card:hover { transform: none; box-shadow: none; }
.pg-sub { display: flex; align-items: center; gap: 12px; margin: 30px 0 11px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--olive); }
.pg-card > .pg-sub:first-child { margin-top: 0; }
.pg-sub::after { content: ''; flex: 1; height: 1px; background: var(--line); }
[lang-block] { display: none; }
[lang-block].on { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .pg-hero-in > * { animation: einblenden .9s var(--ease) backwards; }
  .pg-hero-in > :nth-child(2) { animation-delay: .1s; }
  .pg-hero-in > :nth-child(3) { animation-delay: .2s; }
  .pg-hero-in > :nth-child(4) { animation-delay: .3s; }
}

/* Lesetext (Whitepaper, Datenschutz): eine ruhige Spalte, Gold nur an Verweisen und am kurzen Strich. */
.doc h2 { display: flex; align-items: baseline; gap: 14px; margin: 58px 0 10px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; letter-spacing: -.8px; line-height: 1.2; color: var(--paper); }
.doc h2:first-child { margin-top: 0; }
.doc h2::before { content: ''; width: 22px; height: 1px; background: var(--gold); flex: none; align-self: center; }
.doc h2 .n { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 1px; color: var(--olive); }
.doc h3 { margin: 24px 0 4px; font-size: 17px; font-weight: 900; letter-spacing: -.3px; color: var(--paper); }
.doc p { margin: 10px 0; max-width: 68ch; font-size: 16px; line-height: 1.78; color: var(--sage); }
.doc strong { color: var(--paper); font-weight: 700; }
.doc a:not(.btn) { color: var(--gold-hell); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.doc a:not(.btn):hover { text-decoration-thickness: 2px; }
.doc code { font-family: var(--mono); font-size: .9em; color: var(--paper); background: var(--ink-3); border: 1px solid var(--line); padding: 1px 6px; }
.doc .card { display: block; margin: 26px 0; padding: clamp(22px, 2.4vw, 30px); }
.doc .card h3 { margin: 22px 0 4px; font-size: clamp(17px, 1.6vw, 19px); }
.doc .card h3:first-child { margin-top: 0; }
.doc .card p { max-width: none; font-size: 15px; line-height: 1.72; }
.doc .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px 30px; margin: 28px 0; }
.doc .two .card { margin: 0; }
.doc .btn { margin-top: 12px; }

/* Formularseiten: Zugang anfragen, Konto löschen. */
.rg-types { display: grid; gap: 10px; }
.rg-type { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 14px 16px; background: var(--ink-2); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.rg-type:hover { border-color: var(--line-2); }
.rg-type.on { border-color: var(--paper); background: var(--ink-3); }
.rg-type input { margin: 3px 0 0; accent-color: var(--gold); flex: none; }
.rg-type b { display: block; font-size: 14.5px; font-weight: 900; color: var(--paper); }
.rg-type span { font-size: 13px; color: var(--sage); }
.rg-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; font-size: 13.5px; color: var(--sage); cursor: pointer; }
.rg-consent input { margin: 3px 0 0; accent-color: var(--gold); flex: none; }
.rg-consent a, .rg-legal .body a { color: var(--gold-hell); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rg-msg, .dl-msg { display: none; margin-top: 16px; padding: 12px 16px; font-size: 13.5px; line-height: 1.6; color: var(--paper); background: var(--ink-2); border-left: 2px solid var(--line-2); }
.rg-msg.err, .dl-msg.err { display: block; border-left-color: var(--rot); }
.rg-msg.ok, .dl-msg.ok { display: block; border-left-color: var(--trail); }
.dl-msg.done { display: block; border-left-color: var(--rot); font-weight: 700; }
.rg-legal { margin-top: 34px; }
.rg-legal details { background: var(--ink-3); border: 1px solid var(--line); padding: 0 20px; margin-bottom: 12px; }
.rg-legal summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 700; color: var(--paper); }
.rg-legal summary::-webkit-details-marker { display: none; }
.rg-legal summary::after { content: '+'; color: var(--gold); font-family: var(--mono); font-size: 18px; font-weight: 400; }
.rg-legal details[open] summary::after { content: '−'; }
.rg-legal .body { padding: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--sage); }
.rg-legal .body p { margin: 0 0 10px; }
.rg-legal dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; font-size: 14px; }
.rg-legal dt { color: var(--olive); }
.rg-legal dd { margin: 0; color: var(--sage); }
.dl-warn { margin: 0 0 26px; padding: 4px 0 4px 18px; max-width: 64ch; border-left: 2px solid var(--rot); font-size: 14px; line-height: 1.7; color: var(--sage); }
.dl-warn b { color: var(--paper); }
.dl-list { display: grid; gap: 4px; margin: 12px 0 0; }
.dl-list li { position: relative; padding-left: 22px; line-height: 22px; color: var(--paper); }
.dl-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 11px; height: 2px; background: var(--rot); }
/* Löschen ist unumkehrbar: umrandet statt gefüllt — Rot bleibt eine Marke, keine Fläche. */
.btn-danger { border: 1px solid var(--rot); color: var(--rot-hell); background: transparent; }
.btn-danger:hover { background: var(--rot); border-color: var(--rot); color: #fff; }
.btn-danger:disabled:hover { background: transparent; color: var(--rot-hell); }

/* ── Schmale Fenster ─────────────────────────────────────────────────────── */
@media (max-width: 1140px) {
  .nav-links { display: none; }
  .hamburger { display: inline-flex; }
  .nav-actions { margin-left: auto; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.c6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .houses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-emblem { justify-self: center; width: min(400px, 82vw); order: 2; }
  .hero { padding-bottom: 120px; }
  .map-grid, .dev-grid, .acc-grid { grid-template-columns: 1fr; }
  .ms-grid { grid-template-columns: 1fr; max-width: 560px; }
  .ms-how { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 34px; padding-top: 0; padding-left: 34px; }
  .steps::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .steps::after { left: 3px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; transform-origin: 50% 0; }
  .step::before { left: -34px; top: 5px; }
  .cards.c2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav-request { display: none; }
  .sec { padding: 72px 0; }
  .hero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 64px; --cut: 44px; }
  .hero-bg svg { right: -40%; opacity: .18; }
  .wrap, .nav-inner, .dv-wrap { padding-left: 20px; padding-right: 20px; }
  .cards, .cards.c3, .cards.c6, .cards.c2, .houses { grid-template-columns: 1fr; }
  .market-grid { grid-template-columns: 1fr; }
  .legend { grid-template-columns: 1fr; }
  .form-2col { grid-template-columns: 1fr; gap: 0; }
  .pg-hero { padding-top: calc(var(--nav-h) + 34px); padding-bottom: 26px; }
  .pg-wrap { padding: 32px 20px 80px; }
  .pg-hero::before { right: -40%; opacity: .12; }
  .rg-legal dl { grid-template-columns: 1fr; gap: 2px 0; }
  .sec-head { margin-bottom: 38px; }
  .fig-svg .f-lab, .fig-svg .f-scale, .emb .e-deg { display: none; }
  .fig-svg .f-m .mk { transform: scale(1.7); }
  .emb .e-meta-d { display: none; }
  .dv-rail { padding-left: 38px; }
  .dv-entry::before { left: -35px; } .dv-entry.minor::before { left: -33px; }
}
@media (max-width: 600px) {
  .nav-logo span { display: none; }
  .hero-btns .btn { flex: 1 1 100%; }
  .hero-title { letter-spacing: -2px; }
  .ribbon-in { gap: 6px 22px; font-size: 10.5px; }
  .gauge { grid-template-columns: 62px minmax(0, 1fr); }
  /* Die Monatsmarken der Entwicklungsleiste tragen Information: auf dem Telefon größer setzen,
     sonst schrumpft die Schrift mit der Zeichnung auf 5 px. */
  .rail-svg .r-lab { font-size: 22px; }
}
@media (max-width: 480px) {
  .rail-svg .r-lab { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; } .navbar { display: none; } }