/* ---------- Schrift (selbst gehostet, SIL OFL: fonts/OFL.txt für Outfit, fonts/OFL-IBM-Plex-Sans.txt) ----------
   Outfit für Überschriften, IBM Plex Sans für Text und Fakten (Begründung: docs/ENTSCHEIDUNGEN.md). */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/outfit-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/outfit-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/outfit-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }

/*
  Design-Tokens. Alle Maße auf der Seite kommen von hier (Prüfliste in docs/design/prinzipien.md).
  Farben: docs/design/farben.md, nicht ändern. Weiße Fläche, Blau als Hauptfarbe, Gelb nur als Akzent,
  Grün/Rot/Gelb-Orange nur beim Swipen.
*/
:root {
  /* Farben (Palette) */
  --bg: #ffffff;
  --bg-soft: #f3f6fa;
  --ink: #12233f;
  --muted: #5b6b82;
  --line: #dfe6ef;
  --blue: #0a5bd3;
  --blue-dark: #0b3d91;
  --blue-deep: #082b6b;
  --blue-tint: #e8f0fd;
  --yellow: #ffc21a;
  --yes: #13a05a;
  --no: #e0484e;
  --star: #f2a100;
  /* abgeleitete Töne (Kontrast geprüft, siehe DESIGN-AUDIT.md) */
  --ink-2: #34445c;          /* Fließtext auf Weiß, 9,9:1 */
  --line-strong: #7a8ba3;    /* Rahmen von Eingabefeldern, 3,5:1 */
  --on-blue: #e4ecfa;        /* Text auf Blau */
  --on-blue-2: #c9d8f2;      /* Nebentext auf Blau, ≥ 7:1 auf blue-dark */
  --yellow-hover: #ffd24d;
  --yes-ink: #0b7a43;        /* „Da hin“ als Text auf Weiß, 5,4:1 */
  --no-ink: #c0343a;         /* „Nö“ als Text auf Weiß, 5,1:1 */
  --star-ink: #8a5a00;       /* „Traumziel“ als Text auf Weiß, 6,0:1 */
  --error: #b42318;
  --error-bg: #fff1f0;
  --error-line: #f5c2bd;
  --photo-ph: linear-gradient(160deg, #eef3f9 0%, #d9e2ee 100%);

  /* Abstände: nur diese Stufen (4/8-px-Raster) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --gutter: var(--s-4);
  --section-y: var(--s-7);
  --content: 1152px;
  --wide: 1632px;            /* breite Abschnitte am Desktop (Ziele, Kosten, FAQ) */

  /* Radien: knapp für Flächen und Bedienelemente (bis 6), weicher nur für Dinge, die man anfasst und wegwischt
     (Karte, Spielknöpfe, Ergebnis). Innen = außen − Rand: Karte 16 mit 6 Rand → Foto 10. Keine Pillen. */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 6px;

  /* Höhen: kompakt (Navigation, Werkzeugleisten) und Formulare */
  --header-h: 64px;
  --header-compact: 52px;
  --control: 44px;
  --control-lg: 56px;
  /* Store-Badges: gleich hoch, ≥ 40 px. Hat die Google-Datei eingebauten Rand (PNG), --badge-h-google erhöhen,
     bis das sichtbare Google-Badge mindestens so groß ist wie das von Apple. */
  --badge-h: 48px;
  --badge-h-google: var(--badge-h);

  /* Typografie: feste Skala, rem-basiert (wächst mit der Schriftgröße des Systems) */
  --font-head: Outfit, system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-xs: .8125rem;                                   /* 13 */
  --fs-sm: .9375rem;                                   /* 15 */
  --fs-md: 1.0625rem;                                  /* 17 */
  --fs-lg: 1.25rem;                                    /* 20 */
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);  /* 17–20 */
  --fs-xl: clamp(1.375rem, 1.25rem + .5vw, 1.75rem);   /* 22–28 */
  --fs-2xl: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);   /* 28–40 */
  --fs-3xl: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);   /* 36–60 */
  --lh-tight: 1.05;
  --lh-head: 1.2;
  --lh-body: 1.6;
  --measure: 31em;                                     /* ≈ 65 Zeichen bei 17 px */

  /* Flächen trennen sich über Farbe und 1-px-Linien. Unscharfe, dunkelblaue Schatten nur für Dinge, die aufliegen:
     Karte, Spielknöpfe, Ergebnis, Kostenkasten (docs/ENTSCHEIDUNGEN.md, ein Test prüft das) */
  --shadow-sm: none;
  --shadow-md: 0 0 0 1px var(--line);
  --shadow-lg: 0 0 0 1px var(--line);
  --shadow-float: none;
  --ring: 0 0 0 4px rgba(255, 194, 26, .85);

  /* Bewegung: kurz (150–350 ms), federnd statt linear */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 350ms;
}
@media (min-width: 480px) { :root { --gutter: var(--s-5); } }
@media (min-width: 768px) { :root { --section-y: var(--s-8); } }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Blau unter allem: Wenn der Kopf beim Hochscrollen zurückgleitet oder der Browser oben und unten nachfedert,
   blitzt nichts Weißes auf. Weiß ist nur der Inhalt (main). */
html {
  background: var(--blue-deep);
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; interpolate-size: allow-keywords;
  /* Anker und Fokus landen unter dem (kompakten) Kopf, nicht dahinter */
  scroll-padding-top: calc(var(--header-compact) + var(--s-4));
}
@media (max-height: 500px) and (orientation: landscape), (max-width: 19.99em) { html { scroll-padding-top: var(--s-4); } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; background: var(--bg); }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
h1, h2, h3, .logo, .done-title, .store {
  font-family: var(--font-head);
}
h1, h2, h3 { font-weight: 800; line-height: var(--lh-head); letter-spacing: -.015em; text-wrap: balance; }
p, li, dd, figcaption, summary, label { text-wrap: pretty; }
p, li, dd, label { overflow-wrap: break-word; }
/* Silbentrennung nur, wo die Zeile sehr kurz wird: 320-px-Handys oder große Systemschrift (em folgt der Schriftgröße) */
@media (max-width: 22.5em) { p, li, dd, label, h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
ul, ol { padding: 0; list-style: none; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--blue-dark); }
button, input, select { font: inherit; }
img, svg { max-width: 100%; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: var(--r-sm); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s-3); top: 0; z-index: 50; transform: translateY(-110%);
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-weight: 600;
}
.skip:focus { transform: translateY(var(--s-3)); color: #fff; }

.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-breit { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 1000px) { .wrap-breit { padding-left: clamp(var(--s-5), 3vw, var(--s-8)); padding-right: clamp(var(--s-5), 3vw, var(--s-8)); max-width: calc(var(--wide) + 2 * var(--s-8)); } }

/* ---------- Kopf ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20; background: var(--blue-deep); color: #fff;
  view-transition-name: site-header;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
/* Kompakt beim Scrollen: nur per transform (die Leiste rutscht 12 px nach oben, der Inhalt 6 px nach unten),
   damit sich nichts im Layout verschiebt */
.site-header.is-compact { transform: translateY(calc(var(--header-compact) - var(--header-h))); box-shadow: 0 1px 0 rgba(255, 255, 255, .16); }
.header-inner { transition: transform var(--t-slow) var(--ease-out); }
.site-header.is-compact .header-inner { transform: translateY(calc((var(--header-h) - var(--header-compact)) / 2)); }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; visibility: hidden; }
/* Handy quer: wenig Höhe, Kopfleiste scrollt mit statt Platz zu belegen */
@media (max-height: 500px) and (orientation: landscape) { .site-header { position: relative; } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--header-h); }
/* Sehr große Systemschrift auf dem Handy: Kopf darf zweizeilig werden und scrollt dann mit */
@media (max-width: 19.99em) { .header-inner { flex-wrap: wrap; gap: 0 var(--s-3); padding-block: var(--s-2); } .site-header { position: relative; } }
.logo {
  display: inline-flex; align-items: center; min-height: var(--control);
  font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1; color: #fff; text-decoration: none; white-space: nowrap;
}
.logo span { color: var(--yellow); }
.logo:hover { color: #fff; }
.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--control); padding: 0 var(--s-3);
  color: var(--on-blue-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; border-radius: var(--r-pill);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
/* Aktiver Abschnitt: Text weiß, feine Linie wächst aus der Mitte */
.nav a { position: relative; }
.nav a:not(.nav-cta)::after {
  content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 8px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transition: transform var(--t-base) var(--ease-out);
}
.nav a[aria-current] { color: #fff; }
.nav a[aria-current]::after { transform: scaleX(1); }
.nav .nav-cta[aria-current] { box-shadow: inset 0 0 0 2px var(--blue-deep); }
/* Gelb bleibt dem einen Haupt-Knopf je Ansicht vorbehalten (farben.md); der Kopf-Link ist darum umrandet. */
.nav .nav-cta { color: var(--blue-deep); background: var(--yellow); padding: 0 var(--s-4); margin-left: var(--s-2); }
.nav .nav-cta:hover { color: var(--blue-deep); background: var(--yellow-hover, #ffd24d); }
.nav a:active { transform: scale(.96); }
@media (max-width: 767px) { .nav-optional { display: none; } }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--control); padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-pill); cursor: pointer; text-decoration: none; text-align: center;
  font-weight: 600; font-size: var(--fs-md); line-height: 1.25;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
.btn:active:not(:disabled), .tile:active, .chip-f:active, .undo:active:not(:disabled), .reset:active:not(:disabled) { transform: scale(.96); transition-duration: 80ms; transition-timing-function: var(--ease-out); }
/* Beschriftung im Ladezustand: beide Texte liegen übereinander, die Breite des Knopfs bleibt stehen */
.btn-stack { display: inline-grid; place-items: center; }
.btn-stack > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--s-2); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-out); }
.btn-busy { opacity: 0; transform: translateY(4px); }
.is-loading .btn-label { opacity: 0; transform: translateY(-4px); }
.is-loading .btn-busy { opacity: 1; transform: none; }
.btn-busy::before {
  content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-ghost { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }
.btn-ghost:hover { background: var(--blue-tint); color: var(--blue-dark); }
.btn-yellow { background: var(--yellow); color: var(--blue-deep); }
.btn-yellow:hover { background: var(--yellow-hover); color: var(--blue-deep); }
.btn-block { width: 100%; }
.btn-small { font-size: var(--fs-sm); padding: 0 var(--s-4); }

/* Store-Hinweise („Bald im …“). Später durch offizielle Badges ersetzen, siehe README. */
.stores { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.store {
  display: inline-flex; flex-direction: column; justify-content: center;
  flex: 1 1 8.5em; max-width: 12em; min-height: var(--control-lg); padding: var(--s-2) var(--s-4); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; font-weight: 800; font-size: var(--fs-md); line-height: 1.2;
}
.store small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); }
.store.is-soon { border: 1.5px dashed rgba(255, 255, 255, .4); color: #fff; cursor: default; }
.store.is-soon small { color: var(--on-blue-2); }
/* Textlink, solange die offizielle Badge-Datei fehlt oder noch lädt (gleiche Höhe wie das Badge) */
.store-link { border: 1.5px solid rgba(255, 255, 255, .6); color: #fff; min-height: var(--badge-h); transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
.store-link small { color: var(--on-blue-2); }
.store-link:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: #fff; }
/* Offizielle Badges: unverändert, ohne Bewegung, ohne Hover-Effekt. Freiraum ≥ 1/4 der Höhe ringsum
   (Abstand zwischen den Badges ≥ 2 × Freiraum + Fokusring), Fokusring außerhalb des Freiraums. */
.stores.has-links { gap: calc(var(--badge-h) / 2 + var(--s-2)); padding: calc(var(--badge-h) / 4) 0; }
.store-badge { display: inline-block; line-height: 0; border-radius: var(--r-xs); flex: none; }
.store-badge img { display: block; height: var(--badge-h); width: auto; max-width: none; }
.store-badge.store-google img { height: var(--badge-h-google); }
.store-badge:focus-visible { outline-offset: calc(var(--badge-h) / 4); }
.store-badge, .store-badge:active, .store-badge:hover { transform: none; transition: none; }

/* ---------- Bühne: Die Seite ist das Spiel ----------
   Ein blaues Feld über die ganze Breite. In der Mitte der Fotostapel, links wächst der Stapel „Nö“,
   rechts „Da hin“. Handy: alles untereinander, die Stapel als zwei kompakte Zähler unter den Knöpfen.
   Die Kartenhöhe folgt der Fensterhöhe, damit Überschrift, Karte und Knöpfe in den ersten Bildschirm passen. */
.buehne { background: linear-gradient(180deg, var(--blue-deep) 0%, var(--blue-dark) 100%); color: #fff; overflow-x: hidden; overflow-x: clip; }
.spielfeld {
  --card-h: clamp(240px, calc(100svh - var(--header-h) - 404px), 440px);
  /* Eine Spalte für Karte, Fortschritt und Knöpfe: Auf dem Handy so breit wie der Inhalt (die Karte wird bei
     wenig Höhe flacher statt schmaler), ab Desktop so breit wie die Karte im Hochformat. */
  --spalte: min(100%, 26rem);
  --mini-w: 30px; --mini-h: 40px;
  /* Karte: Außenradius 16, weißer Rand 6, Foto darin 10 (innen = außen − Rand) */
  --card-r: var(--r-xl); --card-pad: 6px;
  display: grid; justify-items: center; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: 'title title' 'lead lead' 'stage stage' 'status status' 'controls controls' 'no yes' 'fakten fakten';
  width: 100%; max-width: calc(var(--wide) + 2 * var(--s-8)); margin: 0 auto; padding: var(--s-4) var(--gutter) var(--s-4);
}
/* Handy: Überschrift, Satz und Kurzfakten sind eigene Zeilen im Raster (Fakten unter dem Spiel); am Desktop ein Block links */
.buehne-text { display: contents; }
.buehne-cta { display: none; }
.spielfeld h1 { grid-area: title; justify-self: start; font-size: min(var(--fs-3xl), 9.2vw); line-height: var(--lh-tight); letter-spacing: -.025em; margin-bottom: var(--s-2); }
.hl { color: var(--yellow); }

/* Kurzfakten: vier Zusagen, jede führt zu dem Abschnitt, der sie belegt */
.fakten {
  grid-area: fakten; justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-4);
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid rgba(255, 255, 255, .16);
}
.fakten a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; height: 100%;
  padding: var(--s-2); margin-inline: calc(-1 * var(--s-2)); border-radius: var(--r-md); color: #fff; text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--t-fast) var(--ease-out);
}
.fakten a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.fakten svg { grid-row: 1 / 3; width: 24px; height: 24px; fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fakten strong { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.fakten span { font-size: var(--fs-xs); line-height: 1.4; color: var(--on-blue-2); }
@media (max-width: 22.5em) { .fakten { grid-template-columns: minmax(0, 1fr); } }
.lead { grid-area: lead; justify-self: start; font-size: var(--fs-sm); line-height: 1.5; color: var(--on-blue); max-width: 30em; margin-bottom: var(--s-4); }
.eyebrow { font-size: var(--fs-xs); line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: var(--s-3); }
.buehne .eyebrow, .waitlist .eyebrow { color: var(--on-blue-2); }

.stage {
  grid-area: stage; position: relative; width: var(--spalte); aspect-ratio: 3 / 4; max-height: var(--card-h);
  container-type: inline-size; border-radius: var(--card-r); z-index: 2;
}
.stage:focus-visible { outline-offset: 6px; }
.stage-msg { height: 100%; display: grid; place-items: center; padding: var(--s-4); font-size: var(--fs-sm); color: var(--on-blue-2); text-align: center; border: 1px dashed rgba(255, 255, 255, .4); border-radius: var(--card-r); }
.js .stage-nojs { display: none; }
html:not(.js) .controls, html:not(.js) .status, html:not(.js) .stapel { display: none; }

/* Karte wie ein Fotoabzug: weißer Rand, unten ein Streifen für die Ortsnummer. Auf dem Foto liegt nichts.
   Rückmeldung beim Ziehen: Der Rand färbt sich, im Streifen steht die Entscheidung. */
.card {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--card-pad) var(--card-pad) 0;
  background: #fff; color: var(--ink); border-radius: var(--card-r); box-shadow: 0 1px 2px rgba(4, 20, 50, .2), 0 18px 40px rgba(4, 20, 50, .32);
  /* Senkrechtes Scrollen gehört immer der Seite; waagerecht entscheidet js/spiel.js */
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  will-change: transform, opacity; opacity: 0;
}
.card.dragging { cursor: grabbing; }
/* Blindkarten beim Neumischen: nur die Rückseite */
.card.is-blind { pointer-events: none; z-index: 5; }
.card.is-blind::before { content: ''; flex: 1; margin-bottom: 36px; border-radius: calc(var(--card-r) - var(--card-pad)); background: var(--blue-tint); }
.media { position: relative; flex: 1; min-height: 0; border-radius: calc(var(--card-r) - var(--card-pad)); overflow: hidden; background: var(--photo-ph); }
.card-strip { display: grid; align-items: center; min-height: 36px; padding: 0 var(--s-2); font-size: var(--fs-xs); line-height: 1.2; }
.card-strip > * { grid-area: 1 / 1; }
.card-nr { color: var(--muted); font-variant-numeric: tabular-nums; }
.card-w { justify-self: end; opacity: 0; font-family: var(--font-head); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.card-w.yes { color: var(--yes-ink); }
.card-w.no { color: var(--no-ink); }
.card-w.sup { color: var(--star-ink); }
.ring { position: absolute; inset: 0; border: var(--s-1) solid; border-radius: inherit; opacity: 0; pointer-events: none; }
.ring.yes { border-color: var(--yes); }
.ring.no { border-color: var(--no); }
.ring.sup { border-color: var(--star); }

/* Fragekarte: nur Typografie */
.frage-flaeche {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4); border-radius: calc(var(--card-r) - var(--card-pad)); background: var(--blue-tint); color: var(--blue-deep); overflow: hidden;
}
.frage-kopf { font-size: var(--fs-xs); line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--blue-dark); }
.frage-text { font-family: var(--font-head); font-weight: 800; font-size: clamp(.875rem, 7.6cqw, 2.5rem); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.frage-fuss { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--blue-dark); }
@container (min-width: 380px) { .frage-flaeche { padding: var(--s-5); } }
/* Sehr kleine Karte (Handy quer, Zoom 200 %) */
@container (max-width: 200px) { .frage-flaeche { padding: var(--s-3) var(--s-2); gap: var(--s-1); } .frage-kopf { font-size: .6875rem; letter-spacing: .04em; } .frage-fuss { font-size: var(--fs-xs); } }

/* Stand: Fortschritt und Tendenz in Alltagssprache. Feste Höhe, damit beim Umschreiben nichts springt. */
.status { grid-area: status; width: var(--spalte); margin-top: var(--s-3); z-index: 1; }
.fortschritt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
.leiste { display: block; height: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.leiste i { display: block; height: 100%; background: var(--yellow); transform-origin: left center; transform: scaleX(0); transition: transform var(--t-slow) var(--ease-out); }
.zaehler { font-size: var(--fs-xs); line-height: 1.5; color: var(--on-blue-2); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.tendenz { display: grid; align-items: start; min-height: 3em; margin-top: var(--s-1); font-size: var(--fs-sm); line-height: 1.5; color: var(--on-blue); }
.tendenz span { grid-area: 1 / 1; transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.tendenz span[aria-hidden='true'] { opacity: 0; transform: translateY(var(--s-1)); }
.tendenz.is-leer span { color: var(--on-blue-2); }

/* Drei Knöpfe, exakt gleich groß; sie unterscheiden sich nur in der Farbe des Zeichens und der Kante */
.controls { grid-area: controls; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); width: var(--spalte); margin-top: var(--s-2); z-index: 1; }
.wahl {
  display: grid; justify-items: center; align-content: center; gap: var(--s-1); height: var(--control-lg); padding: 0 var(--s-1);
  background: #fff; color: var(--ink); border: 0; border-radius: var(--r-lg); cursor: pointer; box-shadow: 0 1px 2px rgba(4, 20, 50, .18), 0 6px 16px rgba(4, 20, 50, .18);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) var(--ease-out), opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
.wahl svg { width: 20px; height: 20px; color: var(--kante); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wahl.no { --kante: var(--no); }
.wahl.sup { --kante: var(--star); }
.wahl.yes { --kante: var(--yes); }
.wahl-text { white-space: nowrap; }
.wahl:hover:not(:disabled) { background: var(--blue-tint); }
@media (hover: hover) and (pointer: fine) { .wahl:hover:not(:disabled) { transform: translateY(-2px); } }
.wahl:active:not(:disabled) { transform: scale(.96); transition-duration: 80ms; }
.wahl:disabled { opacity: .35; cursor: default; }
.wahl:focus-visible { outline-offset: 3px; }

/* Stapel der gewischten Karten. Die oberste Miniatur holt die letzte Karte zurück. */
.stapel { --zug: 0; display: flex; margin-top: var(--s-2); min-width: 0; }
/* Handy und Tablet hochkant: beide Zähler bilden eine Zeile so breit wie die Knöpfe */
.stapel.no { grid-area: no; justify-self: end; width: min(100%, 13rem); }
.stapel.yes { grid-area: yes; justify-self: start; width: min(100%, 13rem); justify-content: flex-end; }
.stapel-btn {
  display: flex; align-items: center; gap: var(--s-2); min-height: var(--control); min-width: var(--control); padding: 0;
  background: none; border: 0; border-radius: var(--r-md); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; text-align: left;
}
.stapel.yes .stapel-btn { flex-direction: row-reverse; text-align: right; }
.stapel-btn:disabled { cursor: default; }
.stapel-text { color: var(--on-blue-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stapel-btn:not(:disabled) .stapel-text { text-decoration: underline; text-underline-offset: 3px; }
.minis { position: relative; flex: none; width: calc(var(--mini-w) + 24px); height: var(--mini-h); transform: scale(calc(1 + .12 * var(--zug))); transform-origin: 50% 100%; }
.mini {
  --k: 0; --r: 0deg;
  position: absolute; top: 0; left: 0; width: var(--mini-w); height: var(--mini-h); border: 2px solid #fff; border-radius: var(--r-xs);
  background: #fff var(--photo-ph); overflow: hidden; box-shadow: 0 0 0 1px rgba(8, 43, 107, .28);
  transform: translateX(calc(var(--k) * 4px)) rotate(var(--r));
}
.stapel.yes .mini { left: auto; right: 0; transform: translateX(calc(var(--k) * -4px)) rotate(var(--r)); }
.mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini.is-traum { border-color: var(--star); }
.mini.is-frage { display: grid; place-items: center; background: var(--blue-tint); color: var(--blue-deep); font-size: .625rem; font-weight: 600; line-height: 1; }
.mini.is-unterwegs { visibility: hidden; }

/* Desktop und Handy quer: Die Stapel stehen links und rechts der Karte, ihre Miniaturen wachsen nach oben */
@media (min-width: 1000px), (min-width: 560px) and (max-height: 500px) and (orientation: landscape) {
  .spielfeld { --spalte: calc(var(--card-h) * .75); }
  .stage { max-height: none; }
  .zahl[data-n='0'], .zahl[data-n='0']::after { visibility: hidden; }
  .spielfeld h1 .zeile { display: block; }
  .stapel { align-self: end; flex-direction: column; gap: var(--s-3); margin: 0; }
  .stapel.no { justify-self: end; align-items: flex-end; width: auto; }
  .stapel.yes { justify-self: start; align-items: flex-start; width: auto; justify-content: flex-start; }
  .stapel-btn, .stapel.yes .stapel-btn { flex-direction: column; gap: var(--s-2); text-align: center; }
  .stapel.no .stapel-btn { align-items: flex-end; }
  .stapel.yes .stapel-btn { align-items: flex-start; }
  .stapel-name { display: none; }
  .zahl::after { content: ' Karten'; }
  .zahl[data-n='1']::after { content: ' Karte'; }
  .minis { width: var(--mini-w); height: calc(var(--mini-h) + 14 * var(--mini-step)); }
  .mini, .stapel.yes .mini { top: auto; bottom: 0; left: 0; right: auto; transform: translateY(calc(var(--i) * -1 * var(--mini-step))) rotate(var(--r)); }
}
/* Desktop: links Überschrift, Satz und Warteliste, rechts das Spiel. Gleiche Inhaltsbreite wie die Abschnitte
   darunter; die Karte so hoch, wie das Fenster erlaubt, und schmal genug, dass links Platz für den Text bleibt. */
@media (min-width: 1000px) and (min-height: 501px) {
  .spielfeld {
    --card-h: min(clamp(300px, calc(100svh - var(--header-h) - 252px), 600px), 46vw);
    --mini-w: 40px; --mini-h: 54px; --mini-step: 5px;
    --card-r: var(--r-2xl); --card-pad: 8px;
    grid-template-columns: minmax(0, 1fr) 5.5rem var(--spalte) 5.5rem;
    grid-template-areas: 'text no stage yes' 'text . status .' 'text . controls .';
    column-gap: var(--s-5);
    padding: var(--s-6) clamp(var(--s-5), 3vw, var(--s-8)) var(--s-7);
  }
  .buehne-text { display: block; grid-area: text; align-self: center; justify-self: start; max-width: 36rem; padding-right: var(--s-6); }
  .fakten { margin-top: var(--s-7); padding-top: var(--s-5); max-width: 34rem; gap: var(--s-2) var(--s-5); }
  .spielfeld h1 { font-size: clamp(2.5rem, 1rem + 2.6vw, 4.75rem); margin: 0; }
  .lead { font-size: var(--fs-lead); margin: var(--s-4) 0 0; max-width: 24em; }
  .buehne-text { max-width: 44rem; }
  .buehne-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
  .buehne-cta .btn { min-height: var(--control-lg); padding-inline: var(--s-6); font-size: var(--fs-md); }
  .buehne-cta p { font-size: var(--fs-sm); line-height: 1.5; color: var(--on-blue-2); max-width: 16em; }
  .status { margin-top: var(--s-4); }
  .tendenz { justify-items: center; text-align: center; }
  .controls { margin-top: var(--s-2); gap: var(--s-3); }
}
/* Handy quer: Text und Stapel links, Knöpfe rechts neben der Karte; die Höhe reicht nicht für Knöpfe darunter */
@media (min-width: 560px) and (max-height: 500px) and (orientation: landscape) {
  .spielfeld {
    --card-h: min(clamp(160px, calc(100svh - var(--header-h) - 64px), 720px), 50vw);
    --mini-w: clamp(36px, 5.2vw, 90px); --mini-h: calc(var(--mini-w) * 4 / 3); --mini-step: 2px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas: 'title stage controls' 'lead stage controls' 'piles stage controls' '. status .' 'fakten fakten fakten';
    column-gap: clamp(var(--s-4), 3vw, var(--s-8)); padding: var(--s-2) clamp(var(--s-5), 3vw, var(--s-8));
  }
  .stapel.no { grid-area: piles; justify-self: start; }
  .stapel.yes { grid-area: piles; justify-self: end; align-self: end; }
  .tendenz { display: none; }
  .status { margin-top: var(--s-2); }
  .controls { align-self: center; justify-self: start; width: min(100%, 15rem); grid-template-columns: 1fr; margin: 0; }
  .wahl { height: var(--control); grid-auto-flow: column; justify-content: start; gap: var(--s-2); padding-inline: var(--s-3); }
  .spielfeld h1 { font-size: clamp(1.25rem, 3.4vw, 2rem); margin: 0; }
  .lead { font-size: var(--fs-xs); margin: var(--s-2) 0 0; max-width: 17em; }
  .fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-4); }
}
/* Sehr große Systemschrift: Überschrift darf nicht aus dem Bild laufen */
@media (max-width: 22.5em) { .spielfeld h1 { font-size: 1.75rem; } .zaehler { min-width: 0; } }
/* Kleine Handys (z. B. 375 × 667): etwas kleinere Überschrift, damit Karte und Knöpfe im ersten Bildschirm bleiben */
@media (max-width: 599px) and (max-height: 740px) and (orientation: portrait) {
  .spielfeld { --card-h: clamp(200px, calc(100svh - var(--header-h) - 330px), 440px); }
  .spielfeld h1 { font-size: 1.75rem; margin-bottom: var(--s-3); }
  .lead { display: none; }
}

/* Ladezustand: die erste Karte steht schon da, die Fotofläche atmet, bis Daten und Bild da sind */
.laden-karte { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--card-pad) var(--card-pad) 0; background: #fff; border-radius: var(--card-r); }
.laden-karte .media { animation: atmen 1.4s var(--ease-out) infinite alternate; }
.laden-karte .card-strip { color: var(--muted); }
@keyframes atmen { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .laden-karte .media { animation: none; } }

/* ---------- Auflösung ----------
   Die Orte waren geheim, jetzt werden sie aufgedeckt: erst die gemochten Karten mit Namen, dann die drei
   Ziele, die am besten passen, dann Warteliste und „Nochmal“. */
.buehne.is-aufgeloest .spielfeld { display: none; }
.aufloesung { display: grid; gap: var(--s-7); width: 100%; max-width: calc(var(--wide) + 2 * var(--s-8)); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-7); }
.aufl-teil, .aufl-ende { min-width: 0; max-width: var(--content); }
@media (min-width: 1000px) { .aufloesung { padding: var(--s-6) clamp(var(--s-5), 3vw, var(--s-8)) var(--s-8); } }
/* Sehr breite Fenster: aufgedeckte Orte links, die drei Ziele rechts daneben */
@media (min-width: 1500px) {
  .aufloesung { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: var(--s-8); align-items: start; }
  .aufl-teil, .aufl-ende { max-width: none; }
  .aufl-ende, #aufl-leer { grid-column: 1 / -1; }
  .orte { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
}
.aufloesung h2 { font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -.02em; }
.aufloesung h2:focus { outline: none; }
.aufloesung .eyebrow { margin-bottom: var(--s-2); }
.aufl-text { color: var(--on-blue); max-width: var(--measure); margin-top: var(--s-3); }

.orte { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
/* Mittlere Breite: alle aufgedeckten Orte in einer Reihe. Ab 1500 px stehen sie in der linken Spalte (oben) und brechen um */
@media (min-width: 900px) and (max-width: 1499.98px) { .orte { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.ort { perspective: 700px; }
.ort-karte { display: grid; height: 100%; transform-style: preserve-3d; will-change: transform; }
.ort-karte.is-offen { transform: rotateY(180deg); }
.ort-seite { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 4px 4px 0; background: #fff; color: var(--ink); border-radius: var(--r-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ort-seite.hinten { transform: rotateY(180deg); }
.ort-foto { aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; }
.ort-text { padding: var(--s-1) var(--s-1) var(--s-2); font-size: var(--fs-xs); line-height: 1.3; min-height: 3.6em; color: var(--muted); }
.ort-text strong { display: block; font-family: var(--font-head); font-weight: 800; color: var(--ink); overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.ort.is-traum .ort-seite { box-shadow: inset 0 0 0 3px var(--star); }

.top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); align-items: start; }
.platz { display: flex; flex-direction: column; min-width: 0; padding: 6px 6px 0; background: #fff; color: var(--ink); border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(4, 20, 50, .2), 0 12px 32px rgba(4, 20, 50, .24); }
.platz:first-child { grid-column: 1 / -1; }
.platz-foto { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; }
.platz:first-child .platz-foto { aspect-ratio: 16 / 10; }
.platz-text { display: grid; gap: var(--s-2); padding: var(--s-3); }
.platz-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--s-3); }
.platz-rang { font-size: var(--fs-xs); line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.platz-pct { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-xl); line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.platz-name { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-lg); line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.platz-name span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); letter-spacing: 0; color: var(--muted); margin-top: 2px; }
.platz-grund { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.platz-fakten { display: grid; gap: 2px; padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.platz-fakten b { font-weight: 600; color: var(--ink); }
.platz:first-child .platz-text { padding: var(--s-4); }
.platz:first-child .platz-name { font-size: var(--fs-2xl); }
.platz:first-child .platz-pct { font-size: var(--fs-2xl); }
.platz:first-child .platz-grund { font-size: var(--fs-md); }
@media (min-width: 900px) {
  .top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); }
  .platz:first-child { grid-column: auto; }
  .platz-text { padding: var(--s-4); }
  .platz:first-child .platz-text { padding: var(--s-5); }
}

.aufl-ende { display: grid; gap: var(--s-6); padding-top: var(--s-6); border-top: 1px solid rgba(255, 255, 255, .2); }
@media (min-width: 900px) { .aufl-ende { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); align-items: start; } }
.aufl-note { color: var(--on-blue); max-width: 30em; margin-bottom: var(--s-4); }
.btn-hell { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.btn-hell:hover { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }

@keyframes rise { from { opacity: 0; transform: translateY(var(--s-3)); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Abschnitte ---------- */
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-head { max-width: var(--measure); margin-bottom: var(--s-6); }
.section-title { font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -.02em; margin-bottom: var(--s-3); }
.section-sub { color: var(--muted); font-size: var(--fs-md); }
h3 { font-size: var(--fs-lg); line-height: 1.3; margin-bottom: var(--s-2); }
.band-soft { background: var(--bg-soft); }

/* Fotos: feste Proportion, ruhige Platzhalterfläche, sanftes Einblenden, kein Layoutsprung */
[data-photo] { background: var(--photo-ph); }
.media img, [data-photo] img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t-slow) var(--ease-out); }
.js .media img:not(.is-loaded), .js [data-photo] img:not(.is-loaded) { opacity: 0; }
.media img.is-failed, [data-photo] img.is-failed { visibility: hidden; }
.media img { -webkit-user-drag: none; pointer-events: none; }

/* Ziele */
#ziele { overflow-anchor: none; }
.dest-grid { position: relative; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.dest.is-leaving { position: absolute; margin: 0; pointer-events: none; z-index: 0; }
.dest-empty { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-5) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); color: var(--ink-2); animation: rise var(--t-slow) var(--ease-out) both; }
.more-wrap { display: flex; justify-content: center; margin-top: var(--s-5); }
.more-wrap:has(#more[hidden]) { margin-top: 0; }

/* Filter wie Airbnb: große Chips, sofortige Wirkung, Trefferzahl, Zurücksetzen mit einem Tipp */
.filters { margin-bottom: var(--s-5); }
.chips {
  display: flex; gap: var(--s-2); margin: 0 calc(-1 * var(--gutter)); padding: var(--s-1) var(--gutter) var(--s-2);
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--s-7)), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--s-7)), transparent);
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: var(--s-1) 0 var(--s-1); -webkit-mask-image: none; mask-image: none; } }
.chip-f {
  flex: none; scroll-snap-align: start; min-height: var(--control); padding: 0 var(--s-4); border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
.chip-f:hover { border-color: var(--ink); }
.chip-f[aria-pressed='true'] { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.chip-f[aria-pressed='true']::before { content: '✓'; display: inline-block; margin-right: var(--s-1); font-weight: 800; animation: pop var(--t-base) var(--ease-spring) both; }
.chip-f:focus-visible, .reset:focus-visible { outline-offset: 2px; border-radius: var(--r-pill); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.month select {
  min-height: var(--control); padding: 0 var(--s-7) 0 var(--s-4); border-radius: var(--r-pill); border: 1.5px solid var(--line-strong);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230a5bd3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--s-4) center / 12px 8px;
  color: var(--ink); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; appearance: none; -webkit-appearance: none; max-width: 100%;
  transition: border-color var(--t-fast) var(--ease-out);
}
.month select:hover { border-color: var(--ink); }
.month select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.hits { flex: 1 1 auto; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.reset {
  min-height: var(--control); padding: 0 var(--s-3); margin-right: calc(-1 * var(--s-3)); border: 0; border-radius: var(--r-pill); background: none;
  color: var(--blue); font-weight: 600; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  transition: color var(--t-fast) var(--ease-out), opacity var(--t-base) var(--ease-out), background-color var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
.reset:hover:not(:disabled) { color: var(--blue-dark); background: var(--blue-tint); }
.reset:disabled { opacity: 0; pointer-events: none; }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }

@media (min-width: 600px) { .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } }
@media (min-width: 1000px) { .dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); } }
/* Kacheln ohne Kasten: großes Foto, darunter Text an einer Haarlinie */
.dest { display: flex; flex-direction: column; background: #fff; }
.dest-img { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; position: relative; }
.dest-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-3) 0 0; }
.dest h3 { margin-bottom: var(--s-1); }
.dest h3 span { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.dest-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted);
}
.dest-tag { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s-3); }
.price { flex: none; font-weight: 600; color: var(--ink); letter-spacing: .08em; font-size: var(--fs-sm); }
.price i { font-style: normal; color: #8494aa; }
/* Desktop: Überschrift links, Filter rechts daneben */
@media (min-width: 1000px) {
  .ziele-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-8); align-items: end; margin-bottom: var(--s-6); }
  .ziele-kopf .section-head, .ziele-kopf .filters { margin-bottom: 0; }
}

/* Geld: drei Spalten am Desktop, Trennung nur über Haarlinien. Die Tabelle ist ein Beleg, kein Kasten. */
.geld { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1000px) { .geld { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-8); } }
.geld-kopf p { color: var(--ink-2); max-width: 24em; }
.geld-punkte > div { padding: var(--s-4) 0; border-top: 1px solid var(--line-strong); }
.geld-punkte > div:first-child { padding-top: 0; border-top: 0; }
.geld-punkte p { color: var(--ink-2); max-width: var(--measure); }
/* Was eine Buchung kostet: zwei gleich lange Balken zeigen „gleicher Preis“, darunter zwei kurze Zeilen */
.receipt {
  width: 100%; max-width: 30rem; padding: var(--s-5); background: #fff; color: var(--ink);
  border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(18, 35, 63, .08);
}
.beleg-titel { font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -.01em; }
.vergleich { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.v-zeile { display: grid; gap: var(--s-2); }
.v-name { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); }
.v-balken {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--control); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-lg); background: var(--blue); color: #fff; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
}
.v-balken b { flex: none; padding: 2px var(--s-2); border-radius: var(--r-sm); background: #fff; color: var(--blue-deep); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.beleg-liste { display: grid; margin-top: var(--s-5); font-size: var(--fs-sm); line-height: 1.4; }
.beleg-liste > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.beleg-liste dt { color: var(--ink-2); }
.beleg-liste dd { font-weight: 600; }
.beleg-liste .beleg-provision { margin-top: var(--s-2); padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-lg); background: var(--blue-tint); }
.beleg-provision dt, .beleg-provision dd { color: var(--blue-deep); }
@media (min-width: 480px) { .receipt { padding: var(--s-6); } }

/* FAQ: eine ruhige Spalte in der Mitte, Überschrift darüber; nichts klebt beim Scrollen */
.faq-wrap { display: grid; justify-items: center; }
.faq-wrap .section-title { text-align: center; margin-bottom: var(--s-6); text-wrap: balance; }
.faq { width: 100%; max-width: 48rem; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-4) var(--s-7) var(--s-4) 0; position: relative; min-height: var(--control-lg);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-lg); line-height: 1.3; transition: color var(--t-fast) var(--ease-out);
}
.faq summary:hover { color: var(--blue-dark); }
.faq summary:focus-visible { outline-offset: -2px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: var(--s-2); top: 28px; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg);
  transition: transform var(--t-base) var(--ease-spring);
}
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq details p { color: var(--ink-2); padding: 0 0 var(--s-5); max-width: var(--measure); }
/* Ausklappen animiert, wo der Browser es kann; sonst klappt es ohne Animation auf */
.faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--t-base) var(--ease-out), content-visibility var(--t-base) allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details p { transition: opacity var(--t-base) var(--ease-out), translate var(--t-base) var(--ease-out); }
.faq details:not([open]) p, .faq details.is-closing p { opacity: 0; translate: 0 -4px; }
@starting-style { .faq details[open] p { opacity: 0; translate: 0 -4px; } }
.faq summary { -webkit-tap-highlight-color: transparent; }

/* Warteliste: blaues Feld über die ganze Breite */
.waitlist-band { background: var(--blue-deep); color: #fff; padding: var(--section-y) 0; }
.waitlist { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .waitlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); align-items: center; } }
.waitlist-text > p { color: var(--on-blue); margin-bottom: var(--s-5); max-width: 30em; }
.promise { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.promise li { position: relative; padding-left: var(--s-6); color: var(--on-blue); line-height: 1.5; }
.promise li::before {
  content: ''; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow);
}
.promise li::after {
  content: ''; position: absolute; left: 7px; top: calc(.1em + 4px); width: 6px; height: 10px;
  border: solid var(--blue-deep); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* ---------- Anmeldeformular (gemeinsam für Hero und Karte) ---------- */
.signup-label { display: block; font-weight: 600; line-height: 1.4; margin-bottom: var(--s-2); }
.signup-input {
  display: block; width: 100%; min-height: var(--control-lg); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); font-size: var(--fs-md); line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.signup-input::placeholder { color: var(--muted); opacity: 1; }
.signup-input:hover { border-color: var(--ink-2); }
.signup-input:focus-visible { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
.signup-input[aria-invalid='true'] { border-color: var(--error); background: #fff7f7; }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); align-items: start; min-height: var(--control); margin-top: var(--s-4); }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
.consent input[aria-invalid='true'] { outline: 2px solid var(--error); outline-offset: 2px; border-radius: var(--r-xs); }
.consent label { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); cursor: pointer; max-width: 34em; }
.field-error {
  display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--error); line-height: 1.4;
  animation: rise var(--t-base) var(--ease-out) both;
}
.field-error::before {
  content: '!'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: #d92d20; color: #fff; font-size: .75rem; font-weight: 800; line-height: 1;
}
.form-alert {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--error-bg); border: 1px solid var(--error-line);
  color: #912018; font-size: var(--fs-sm); line-height: 1.5; max-width: 34em; animation: rise var(--t-base) var(--ease-out) both;
}
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fineprint { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-4); line-height: 1.5; max-width: var(--measure); }

.signup-btn { min-height: var(--control-lg); font-size: var(--fs-md); }
.signup-card .signup-btn { margin-top: var(--s-5); }
.signup-btn:disabled { cursor: progress; }
.btn-primary.signup-btn:disabled { background: var(--blue-dark); }
.btn-yellow.signup-btn:disabled { background: var(--yellow-hover); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Karte im Abschnitt #warteliste */
.signup-card { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: var(--s-5) var(--s-4); }
@media (min-width: 480px) { .signup-card { padding: var(--s-6); } }

/* Erfolg (Zustandswechsel animiert) */
.signup-done:focus { outline: none; }
.signup.is-morphing { overflow: clip; overflow-clip-margin: var(--s-2); }
.done-icon {
  display: grid; place-items: center; width: var(--control-lg); height: var(--control-lg); border-radius: 50%; background: var(--blue-tint); color: var(--blue);
}
.done-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.done-title { font-weight: 800; font-size: var(--fs-xl); line-height: var(--lh-head); letter-spacing: -.01em; text-wrap: balance; }
.done-text { color: var(--ink-2); }
.done-text strong { color: var(--ink); overflow-wrap: anywhere; hyphens: none; }
.signup-card .signup-done { display: grid; gap: var(--s-3); animation: rise var(--t-slow) var(--ease-out) both; }
.signup-form.is-back { animation: rise var(--t-slow) var(--ease-out) both; }
.done-steps { counter-reset: s; display: grid; gap: var(--s-3); margin: var(--s-1) 0; padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-soft); }
.done-steps li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); align-items: center; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.done-steps li::before {
  content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 800; font-size: var(--fs-xs); color: var(--muted);
}
.done-steps li.is-done { color: var(--ink); }
.done-steps li.is-done::before { content: '✓'; background: var(--blue); box-shadow: none; color: #fff; }
.done-steps li.is-next { color: var(--ink); font-weight: 600; }
.done-steps li.is-next::before { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); background: var(--blue-tint); }
.done-hint { font-size: var(--fs-sm); color: var(--muted); }

/* Kompaktes Formular auf Blau (in der Auflösung) */
.signup-blau { max-width: 34em; width: 100%; }
.signup-blau .signup-label { color: #fff; }
.signup-row { display: grid; gap: var(--s-2); }
@media (min-width: 480px) { .signup-row { grid-template-columns: minmax(0, 1fr) auto; } }
.signup-blau .signup-input { border-color: transparent; }
.signup-blau .signup-input:focus-visible { box-shadow: var(--ring); }
.signup-blau .consent label { color: var(--on-blue-2); }
.signup-blau .consent a { color: #fff; }
.signup-blau .consent input { accent-color: var(--yellow); }
.signup-blau .field-error { color: #fff; }
.signup-blau .field-error::before { background: var(--yellow); color: var(--blue-deep); }
.signup-blau .signup-input[aria-invalid='true'] { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow); background: #fff; }
.signup-blau .consent input[aria-invalid='true'] { outline-color: var(--yellow); }
.signup-blau .form-alert { background: #fff; }
.signup-blau .signup-done {
  display: grid; grid-template-columns: var(--control-lg) minmax(0, 1fr); gap: var(--s-4); align-items: start;
  background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-float);
  animation: rise var(--t-slow) var(--ease-out) both;
}
@media (max-width: 379px) { .signup-blau .signup-done { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); } }
.signup-blau .done-title { font-size: var(--fs-lg); margin-bottom: var(--s-1); }
.signup-blau .done-text { font-size: var(--fs-sm); }

/* ---------- Ergebnisseiten: bestätigt, abgemeldet, Fehlerseiten des Workers ---------- */
.result-page { background: var(--bg-soft); }
.result-wrap { padding-top: var(--s-7); padding-bottom: var(--s-8); }
.result-panel {
  max-width: 560px; margin: 0 auto; background: #fff; border-radius: var(--r-xl); padding: var(--s-6) var(--s-5); text-align: center;
  box-shadow: var(--shadow-lg); animation: rise var(--t-slow) var(--ease-out) both;
}
@media (min-width: 560px) { .result-panel { padding: var(--s-7); } }
.result-panel h1 { font-size: var(--fs-2xl); margin: var(--s-5) 0 var(--s-3); }
.result-panel p { color: var(--ink-2); margin: 0 auto var(--s-3); max-width: 30em; }
.result-panel > .btn { margin-top: var(--s-3); }
.result-icon {
  display: inline-grid; place-items: center; width: var(--s-8); height: var(--s-8); border-radius: 50%; background: var(--blue-tint); color: var(--blue);
}
.result-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.result-panel[data-kind='error'] .result-icon { background: #fff4d6; color: #8a5a00; }
.result-panel[data-kind='error'] .result-icon svg { stroke-width: 3; }
.result-panel .done-steps { text-align: left; margin: var(--s-5) 0 var(--s-6); }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-5); }
.result-panel .result-small { font-size: var(--fs-sm); color: var(--muted); margin: var(--s-5) auto 0; }

/* ---------- Fuß ---------- */
.site-footer { background: var(--blue-deep); border-top: 1px solid rgba(255, 255, 255, .14); padding: var(--s-5) 0; font-size: var(--fs-sm); color: var(--on-blue-2); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between; align-items: center; }
.footer-inner > p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.logo-sm { font-size: var(--fs-lg); min-height: 0; color: #fff; }
.site-footer .logo span { color: var(--yellow); }
.footer-links { display: flex; gap: var(--s-5); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--control); color: #fff; }
.footer-links a:hover { color: var(--yellow); }

/* ---------- Unterseiten (Impressum, Datenschutz, 404) ---------- */
.page { padding-top: var(--s-7); padding-bottom: var(--s-8); max-width: calc(46em + 2 * var(--gutter)); }
.page h1 { font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -.02em; }
.page h2 { font-size: var(--fs-lg); line-height: 1.3; margin: var(--s-7) 0 var(--s-3); }
.page p, .page ul { color: var(--ink-2); max-width: var(--measure); }
.page p + p { margin-top: var(--s-3); }
.page ul { list-style: disc; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.page a { overflow-wrap: anywhere; }
.draft-note { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: #fff8e6; border: 2px dashed var(--star); color: #8a5a00 !important; font-size: var(--fs-sm); }
.ph { background: #fff1c2; color: #6b4500; padding: 0 var(--s-1); border-radius: var(--r-xs); font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.notfound { display: grid; gap: var(--s-7); align-items: center; padding-top: var(--s-7); padding-bottom: var(--s-8); }
@media (min-width: 768px) { .notfound { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-8); } }
.notfound h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -.025em; margin-bottom: var(--s-4); }
.notfound p { color: var(--ink-2); margin-bottom: var(--s-5); max-width: 30em; }
.lost-card { position: relative; width: 100%; max-width: 280px; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; margin: 0 auto; transform: rotate(4deg); border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line-strong); }
.lost-card [data-scene] svg { display: block; width: 100%; height: 100%; }
.stamp { position: absolute; top: var(--s-6); right: var(--s-5); font-family: var(--font-head); font-weight: 800; font-size: 1.625rem; line-height: 1.2; padding: var(--s-1) var(--s-3); border: 4px solid; border-radius: var(--r-md); letter-spacing: .06em; white-space: nowrap; background: #fff; color: var(--no-ink); transform: rotate(12deg); }
.lost-card > [data-scene] { position: absolute; inset: 0; }
.lost-card .stamp { opacity: 1; }

/* ---------- Seitenwechsel (Cross-Document View Transitions, wo unterstützt; sonst normal) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: var(--t-base) var(--ease-in-out) both vt-out; }
::view-transition-new(root) { animation: var(--t-slow) var(--ease-out) both vt-in; }
::view-transition-group(site-header) { animation-duration: var(--t-slow); animation-timing-function: var(--ease-out); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Druck ---------- */
@media print {
  .site-header { position: static; transform: none !important; }
  .spielfeld, .aufloesung, .filters, .more-wrap, .skip { display: none !important; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::details-content { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}