/* Reisewunschliste – Startseite. Kartenwand bei Nacht: eine Weltkarte, Foto-Nadeln, zwei Signalfarben. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fläche */
  --wand: #0a0e16;
  --land: #1e293c;
  --linie: #263247;
  --netz: #0f1520;
  --netz-weite: clamp(96px, 12vw, 150px);

  /* Flächen für Objekte auf der Wand */
  --tafel: #0b111c;
  --feld: #111827;
  --feld-rand: #1c2537;
  --feld-aktiv: #121a29;
  --knopf-dunkel: #182033;
  --knopf-dunkel-hover: #222c44;
  --linie-stark: #3a465c;
  --gruen-feld: #12261e;
  --metall-dunkel: #8e99aa;
  --metall-hell: #dfe5ee;
  --handy-gehaeuse: #04060a;
  --handy-kante: #2a3245;
  --handy-rand: #0b0f17;
  --handy-glas: #0f1521;

  /* Text */
  --text: #eef1f6;
  --text-leise: #a3aebf;
  --text-gedaempft: #7f8a9c;

  /* Signal: Indigo nur für Aktion und Wunsch, Grün nur für Besuchtes */
  --indigo: #5b5bf0;
  --indigo-druck: #4a49dc;
  --indigo-hell: #8a8afa;
  --gruen: #3dbe7c;
  --auf-indigo: #ffffff;

  /* Schrift */
  --schrift-anzeige: "Archivo", "Arial Narrow", sans-serif;
  --schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1-groesse: clamp(2.55rem, 7.4vw + 0.6rem, 5.4rem);
  --h2-groesse: clamp(2rem, 4.2vw + 0.9rem, 3.5rem);
  --anzeige-breite: 78%;

  /* Raster und Abstände */
  --rand: clamp(16px, 4.5vw, 56px);
  --spalte: 1240px;
  --abschnitt: clamp(88px, 12vw, 168px);
  --held-oben: clamp(18px, 4vw, 56px);

  /* Bühne im Einstieg (Regler) */
  --handy-breite: clamp(212px, 58vw, 300px);
  --karte-breite: 262%;
  --karte-x: -71%;
  --karte-y: 64px;
  --pin-groesse: clamp(52px, 13vw, 66px);

  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--wand);
  background-image:
    linear-gradient(90deg, var(--netz) 1px, transparent 1px),
    linear-gradient(var(--netz) 1px, transparent 1px);
  background-size: var(--netz-weite) var(--netz-weite);
  background-position: calc(50% + var(--netz-weite) / 2) 0;
  color: var(--text);
  font: 400 1rem/1.55 var(--schrift-text);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--indigo); color: var(--auf-indigo); }
:focus-visible { outline: 2px solid var(--indigo-hell); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--linie-stark) var(--wand); }

.springen {
  position: absolute; left: var(--rand); top: -60px; z-index: 50;
  background: var(--text); color: var(--wand); padding: 10px 14px; border-radius: 8px; font-weight: 600;
}
.springen:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.spalte { width: min(100% - 2 * var(--rand), var(--spalte)); margin-inline: auto; }

h1, h2, .anzeige {
  font-family: var(--schrift-anzeige);
  font-stretch: var(--anzeige-breite);
  letter-spacing: -0.012em;
  word-spacing: 0.06em;
  text-wrap: balance;
}
h1 { font-size: var(--h1-groesse); font-weight: 860; line-height: 0.97; }
h2 { font-size: var(--h2-groesse); font-weight: 820; line-height: 1; }
.text-gross { font-size: clamp(1.05rem, 0.4vw + 0.98rem, 1.2rem); color: var(--text-leise); max-width: 60ch; }
.text-gross + .text-gross { margin-top: 0.9em; }
.zusatz { margin-top: 18px; font-size: 0.94rem; color: var(--text-gedaempft); max-width: 56ch; }
.zusatz strong { color: var(--text-leise); font-weight: 600; }

/* ------------------------------------------------------------------ Kopfzeile */
.kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 12px;
  background: var(--wand); box-shadow: 0 0 0 100vmax var(--wand); clip-path: inset(0 -100vmax);
}
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 650 1rem/1 var(--schrift-anzeige); font-stretch: 96%; }
.marke img { width: 32px; height: 32px; border-radius: 8px; }
.kopf-play {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font: 600 0.84rem/1 var(--schrift-text); padding: 10px 14px; border-radius: 99px;
  background: var(--knopf-dunkel); color: var(--text); transition: background-color 0.2s;
}
.kopf-play:hover { background: var(--knopf-dunkel-hover); }
/* Sprachlink zur englischen Seite neben dem Play-Knopf (seit 18.10.2026, wie auf travelwishmap.com) */
.kopf-rechts { display: flex; align-items: center; gap: 6px; }
.kopf-sprache {
  font: 600 0.84rem/1 var(--schrift-text); color: var(--text-leise); text-decoration: none;
  padding: 10px 10px; border-radius: 99px; transition: color 0.2s;
}
.kopf-sprache:hover { color: var(--text); }
.marke, .kopf-play, .kopf-sprache { white-space: nowrap; }
.nur-schmal { display: none; }
@media (max-width: 420px) { .nur-breit { display: none; } .nur-schmal { display: inline; } }
@media (max-width: 359px) { .ab-360 { display: none; } }   /* „Zu Google Play“ wird unter 360 px zu „Google Play“ */

/* Kopfzeile auf schmalen Handys (Prüfung 18.10.2026): Logo nie zusammendrücken, Abstände enger */
.marke picture, .marke img { flex: none; }
.marke img { object-fit: contain; }
/* Große Handy-Schrift (Bedienungshilfen): Name kürzt sich mit „…“, statt den Kopf zu sprengen */
.marke { min-width: 0; }
.marke__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kopf-rechts { flex: none; }
@media (max-width: 389px) { .kopf { gap: 8px; } .kopf-rechts { gap: 2px; } .kopf-sprache { padding: 9px 6px; } }
@media (max-width: 359px) { .kopf { gap: 6px; } .kopf-play { padding: 9px 9px; } .kopf-sprache { padding: 9px 4px; } .marke { font-size: 0.9rem; gap: 7px; } }

/* ------------------------------------------------------------------ Google-Play-Knopf */
.play {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px; border-radius: 99px;
  background: var(--indigo); color: var(--auf-indigo); text-decoration: none;
  font: 650 1.03rem/1 var(--schrift-text);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.75);
  transition: background-color 0.2s, transform 0.3s var(--kurve), box-shadow 0.3s;
}
.play:hover { background: var(--indigo-druck); transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(0, 0, 0, 0.8); }
.play:active { transform: translateY(0); }
.play svg { width: 17px; height: 19px; flex: none; }

/* Offizielles Google-Play-Badge (Grafik unverändert von Google, Größe nur über die Höhe) */
.play-badge { display: inline-block; line-height: 0; border-radius: 8px; transition: transform 0.3s var(--kurve); }
.play-badge img { height: 58px; width: auto; }
.play-badge:hover { transform: translateY(-2px); }
.play-badge:focus-visible { outline: 3px solid var(--indigo); outline-offset: 4px; }
.held .play-badge { margin-top: 24px; }
.schluss .play-badge { margin-top: 30px; }

/* ------------------------------------------------------------------ Nadeln */
.pin {
  position: absolute; left: var(--x); top: var(--y);
  width: 0; height: 0; z-index: 3;
}
.pin__kopf {
  position: absolute; left: calc(var(--pin-groesse) / -2); top: calc(var(--pin-groesse) * -1 - 22px);
  width: var(--pin-groesse); height: var(--pin-groesse);
  border-radius: 15px; border: 3px solid var(--indigo-hell); background: var(--land);
  box-shadow: 0 10px 18px -6px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: border-color 0.5s var(--kurve);
}
.pin__kopf img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.pin::before { /* Metallnadel */
  content: ""; position: absolute; left: -1px; top: -23px; width: 2px; height: 22px; border-radius: 1px;
  background: linear-gradient(90deg, var(--metall-dunkel), var(--metall-hell) 60%, var(--metall-dunkel));
}
.pin::after { /* Einstichschatten */
  content: ""; position: absolute; left: 1px; top: -3px; width: 12px; height: 5px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); filter: blur(1.5px);
}
.pin__haken {
  position: absolute; right: -10px; top: -10px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gruen); border: 2px solid var(--wand); display: grid; place-items: center;
  transform: scale(0); transition: transform 0.45s var(--kurve);
}
.pin__haken svg { width: 12px; height: 12px; }
.pin--besucht .pin__kopf { border-color: var(--gruen); }
.pin--besucht .pin__haken { transform: scale(1); }
.pin--wunsch .pin__kopf { opacity: 0.94; }
.pin__etikett {
  position: absolute; left: 0; top: 10px; transform: translateX(-50%);
  display: none; white-space: nowrap; text-align: center;
  font: 600 0.78rem/1.25 var(--schrift-text); color: var(--text-leise);
}
.pin__etikett b { display: block; font: 760 0.95rem/1.1 var(--schrift-anzeige); font-stretch: 86%; color: var(--text); }
.pin__etikett--rechts { left: calc(var(--pin-groesse) / 2 + 12px); top: calc(var(--pin-groesse) * -1 - 16px); transform: none; text-align: left; }
.pin__etikett .status { font-weight: 650; }
.pin--etikett-mobil .pin__etikett, .schluss__wand .pin__etikett, .europa .pin__etikett, .pin--ki .pin__etikett { display: block; }
@media (max-width: 959px) { .pin__land { display: none; } .europa .pin__land { display: inline; } }

/* Einstich beim Laden: Nadeln sind ohne JS sofort da, mit JS stechen sie einmal ein */
.bewegt .held .pin { animation: einstich 0.7s var(--kurve) both; animation-delay: calc(0.35s + var(--i, 0) * 0.12s); }
@keyframes einstich {
  from { transform: translateY(-16px) scale(1.08); opacity: 0; }
  60% { opacity: 1; }
  to { transform: none; opacity: 1; }
}

/* ------------------------------------------------------------------ Handy */
.handy {
  position: relative; width: var(--handy-breite);
  border-radius: calc(var(--handy-breite) * 0.18); padding: calc(var(--handy-breite) * 0.035);
  background: var(--handy-gehaeuse);
  box-shadow: 0 0 0 1.5px var(--handy-kante), 0 0 0 4px var(--handy-rand), 0 40px 70px -20px rgba(0, 0, 0, 0.85);
}
.handy__bild { position: relative; overflow: hidden; border-radius: calc(var(--handy-breite) * 0.145); aspect-ratio: 640 / 1184; background: var(--handy-glas); }
.handy__bild img, .handy__bild video { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ------------------------------------------------------------------ Einstieg */
.held { position: relative; overflow: hidden; padding-bottom: 0; }
.held__inhalt { position: relative; z-index: 5; padding-top: var(--held-oben); }
.held h1 { max-width: 13ch; }
.held .einstieg { margin-top: 18px; font-size: clamp(1rem, 0.35vw + 0.95rem, 1.17rem); color: var(--text-leise); max-width: 54ch; }
.held .play { margin-top: 24px; width: 100%; }
.held__hinweis { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 0.86rem; color: var(--text-leise); }
.held__hinweis span:last-child { color: var(--text-gedaempft); }

.buehne { position: relative; margin-top: 34px; }
.buehne::before { content: ""; display: block; padding-bottom: calc(var(--karte-breite) / 2.2572 + var(--karte-y)); }
.wandkarte { position: absolute; left: var(--karte-x); top: var(--karte-y); width: var(--karte-breite); aspect-ratio: 2.2572; }
.wandkarte > img { width: 100%; height: 100%; }
.buehne .handy { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; }

/* ------------------------------------------------------------------ Abschnitte */
.abschnitt { position: relative; padding-block: var(--abschnitt); overflow-x: clip; }
.abschnitt h2 + .text-gross { margin-top: 22px; }

.zwei { display: grid; gap: clamp(48px, 7vw, 96px); align-items: center; }

/* Karte: Wunsch oder besucht */
.markieren { position: relative; display: grid; place-items: center; min-height: 520px; }
.markieren .handy { --handy-breite: clamp(220px, 60vw, 290px); }
.markieren__karte { position: absolute; left: -40%; right: -40%; top: 6%; aspect-ratio: 2.2572; opacity: 0.9; pointer-events: none; }
.markieren__karte img { width: 100%; height: 100%; }
.markieren { grid-template-columns: 1fr; gap: 0; }
.demo-pin {
  --pin-groesse: clamp(84px, 22vw, 104px);
  position: relative; z-index: 4; margin-top: -54px; width: min(100%, 420px);
  display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 18px;
  padding: 14px 16px 16px; border-radius: 22px; background: var(--tafel); border: 1px solid var(--linie);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.9);
}
.demo-pin__text { padding-bottom: 6px; }
.demo-pin .etikett { margin-top: 0; }
.demo-pin .pin { position: relative; left: auto; top: auto; display: block; width: var(--pin-groesse); height: calc(var(--pin-groesse) + 24px); margin-top: -46px; }
.demo-pin .pin__kopf { left: 0; top: 0; border-width: 4px; border-radius: 22px; }
.demo-pin .pin__kopf img { border-radius: 18px; }
.demo-pin .pin::before { left: calc(var(--pin-groesse) / 2 - 1px); top: var(--pin-groesse); height: 24px; }
.demo-pin .pin::after { left: calc(var(--pin-groesse) / 2 + 1px); top: calc(var(--pin-groesse) + 21px); }
.demo-pin .pin__haken { width: 30px; height: 30px; right: -11px; top: -11px; }
.demo-pin .pin__haken svg { width: 16px; height: 16px; }
.etikett {
  margin-top: 14px; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font: 600 0.86rem/1.2 var(--schrift-text); color: var(--text-leise);
}
.etikett b { font: 760 1rem/1 var(--schrift-anzeige); font-stretch: 86%; color: var(--text); }
.status { font-weight: 650; color: var(--indigo-hell); }
.status--besucht { color: var(--gruen); }
.umschalter {
  margin-top: 16px; appearance: none; border: 1px solid var(--linie-stark); background: var(--feld-aktiv); color: var(--text);
  font: 600 0.9rem/1 var(--schrift-text); padding: 12px 16px; border-radius: 99px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; transition: border-color 0.2s, background-color 0.2s;
}
.umschalter:hover { border-color: var(--gruen); }
.umschalter[aria-pressed="true"] { border-color: var(--gruen); background: var(--gruen-feld); }
.umschalter__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--indigo-hell); transition: background-color 0.3s; }
.umschalter[aria-pressed="true"] .umschalter__punkt { background: var(--gruen); }

/* Erinnerungen */
.erinnerung { position: relative; display: grid; place-items: center; }
.erinnerung .handy { --handy-breite: clamp(220px, 60vw, 290px); }
.karteikarte {
  position: absolute; right: 0; bottom: 8%; z-index: 3; width: min(240px, 58%);
  background: var(--tafel); color: var(--text); border: 1px solid var(--linie); border-radius: 16px; padding: 12px 12px 14px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.8);
}
.karteikarte img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.karteikarte p { margin-top: 10px; font: 500 0.82rem/1.35 var(--schrift-text); color: var(--text-leise); }
.sterne { color: var(--text-leise); }
.sterne .leer { color: var(--linie-stark); }
.karteikarte b { display: block; font: 780 1.06rem/1.1 var(--schrift-anzeige); font-stretch: 86%; color: var(--text); }
.sterne { margin-top: 6px; display: flex; gap: 2px; }
.sterne svg { width: 15px; height: 15px; }

/* KI-Reisepilot */
.ki { position: relative; display: grid; place-items: center; }
.ki .handy { --handy-breite: clamp(220px, 60vw, 290px); }
.pin--ki .pin__kopf { display: grid; place-items: center; background: var(--tafel); color: var(--indigo-hell); }
.pin--ki .pin__kopf svg { width: 46%; height: 46%; }

/* Listen und Filter */
.liste-demo { background: var(--tafel); border: 1px solid var(--linie); border-radius: 22px; padding: 14px; }
.filter { display: flex; gap: 6px; padding: 4px; background: var(--feld-aktiv); border-radius: 99px; }
.filter button {
  flex: 1; appearance: none; border: 0; background: transparent; color: var(--text-leise); cursor: pointer;
  font: 600 0.9rem/1 var(--schrift-text); padding: 11px 10px; border-radius: 99px; transition: background-color 0.25s, color 0.25s;
}
.filter button:hover { color: var(--text); }
.filter button[aria-selected="true"] { background: var(--indigo); color: var(--auf-indigo); }
.eintraege { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 8px; }
.eintrag {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--feld); border: 1px solid var(--feld-rand);
}
.eintrag[hidden] { display: none; }
.eintrag img { width: 52px; height: 52px; border-radius: 11px; object-fit: cover; border: 2px solid var(--indigo-hell); }
.eintrag--besucht img { border-color: var(--gruen); }
.eintrag b { display: block; font: 760 1.02rem/1.15 var(--schrift-anzeige); font-stretch: 88%; }
.eintrag span { font-size: 0.85rem; color: var(--text-gedaempft); }
.eintrag .status { font-size: 0.82rem; }
.beispiel { margin-top: 10px; font-size: 0.78rem; color: var(--text-gedaempft); text-align: right; }

/* So geht's: eine Route mit vier Stationen */
.route { position: relative; margin-top: 56px; list-style: none; padding: 0; display: grid; gap: 34px; counter-reset: station; }
.route__linie { position: absolute; left: 27px; top: 10px; width: 3px; height: calc(100% - 40px); overflow: visible; }
.route__waagrecht { display: none; }
.route__linie line { stroke: var(--linie-stark); stroke-width: 2; stroke-dasharray: 6 8; stroke-linecap: round; }
.station { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.station__nadel {
  position: relative; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--land); border: 3px solid var(--linie-stark); font: 850 1.35rem/1 var(--schrift-anzeige); font-stretch: 80%;
  box-shadow: 0 10px 18px -6px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.4);
}
.station__nadel::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 14px; margin-left: -1px; background: linear-gradient(90deg, var(--metall-dunkel), var(--metall-hell) 60%, var(--metall-dunkel)); }
.station h3 { font: 800 1.35rem/1.1 var(--schrift-anzeige); font-stretch: 84%; margin-top: 4px; }
.station p { margin-top: 6px; color: var(--text-leise); max-width: 46ch; }

/* Kostenlos und Pro */
.vergleich { margin-top: 48px; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.paket { padding: 30px 0 34px; }
.paket + .paket { border-top: 1px solid var(--linie); }
.paket h3 { font: 830 1.7rem/1 var(--schrift-anzeige); font-stretch: 82%; }
.paket__unter { margin-top: 8px; font-size: 0.95rem; color: var(--text-leise); max-width: 40ch; }
.paket ul { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 10px; }
.paket li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.paket li svg { width: 20px; height: 20px; margin-top: 2px; color: var(--text-gedaempft); }
.preis-hinweis { margin-top: 28px; max-width: 70ch; color: var(--text-leise); }

/* Für Android, auf Deutsch */
.deutsch { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
.deutsch__satz { font: 860 clamp(2.4rem, 7vw, 5.6rem)/0.95 var(--schrift-anzeige); font-stretch: 76%; letter-spacing: -0.015em; }
.deutsch__satz em { font-style: normal; color: var(--indigo-hell); }

.europa { position: relative; margin: 0; aspect-ratio: 4 / 3; }
.europa > img { width: 100%; height: 100%; object-fit: cover; }
.europa .pin { --pin-groesse: clamp(64px, 16vw, 84px); }
.europa::after { content: none; }

/* Fragen */
.fragen { margin-top: 44px; border-top: 1px solid var(--linie); }
.frage-eintrag { border-bottom: 1px solid var(--linie); }
.frage-eintrag summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font: 720 clamp(1.08rem, 0.5vw + 1rem, 1.3rem)/1.25 var(--schrift-anzeige); font-stretch: 92%;
}
.frage-eintrag summary::-webkit-details-marker { display: none; }
.frage-eintrag summary:hover { color: var(--auf-indigo); }
.frage-eintrag summary svg { width: 22px; height: 22px; flex: none; color: var(--text-gedaempft); transition: transform 0.35s var(--kurve); }
.frage-eintrag[open] summary svg { transform: rotate(45deg); }
.frage-eintrag p { padding: 0 0 24px; color: var(--text-leise); max-width: 68ch; }

/* Schluss */
.schluss { color: var(--text); padding-block: clamp(96px, 13vw, 176px) clamp(72px, 9vw, 120px); overflow: hidden; position: relative; border-top: 1px solid var(--linie); }
.schluss h2 { font-size: clamp(2.6rem, 7vw + 0.4rem, 6rem); line-height: 0.95; max-width: 12ch; }
.schluss p { margin-top: 20px; font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem); color: var(--text-leise); max-width: 40ch; }
.schluss .play { margin-top: 30px; }
.schluss__raster { display: grid; gap: 40px; align-items: center; }
.schluss__wand { position: relative; --pin-groesse: clamp(52px, 13vw, 64px); --sk-breite: 230%; --sk-y: 40px; }
.schluss__wand::before { content: ""; display: block; padding-bottom: calc(var(--sk-breite) / 2.2572 + var(--sk-y) + 8px); }
.schluss__karte { position: absolute; left: -76%; top: var(--sk-y); width: var(--sk-breite); aspect-ratio: 2.2572; }
.schluss__karte > img { width: 100%; height: 100%; }

/* Fußzeile */
.fuss { padding-block: 56px 40px; color: var(--text-gedaempft); font-size: 0.9rem; }
.fuss__oben { display: grid; gap: 28px; }
.fuss .marke { color: var(--text); }
.fuss nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.fuss nav a { color: var(--text-leise); text-decoration: none; }
.fuss nav a:hover { color: var(--text); text-decoration: underline; }
.fuss__klein { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--linie); display: grid; gap: 6px; font-size: 0.8rem; }

/* Route zeichnet sich beim Erscheinen */
.bewegt .route .route__linie { clip-path: inset(0 0 100% 0); transition: clip-path 1.6s var(--kurve) 0.2s; }
.bewegt .route.da .route__linie { clip-path: inset(0 0 0 0); }

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext { padding-block: clamp(48px, 8vw, 96px); max-width: min(100% - 2 * var(--rand), 760px); }
.rechtstext h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4rem); }
.rechtstext h2 { margin-top: 2.2em; font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); }
.rechtstext p { margin-top: 0.7em; color: var(--text-leise); max-width: 68ch; }
.rechtstext .zurueck { margin-top: 3em; }
.rechtstext a:not(.play) { color: var(--text); }

/* ------------------------------------------------------------------ Einblenden (nur mit JS, Inhalt ist ohne JS sichtbar) */
.bewegt .auftauchen { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--kurve), transform 0.9s var(--kurve); }
.bewegt .auftauchen.da { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ Breitere Bildschirme */
@media (max-width: 379px) {
  .kopf-play { font-size: 0.78rem; padding: 9px 11px; white-space: nowrap; }
  .marke { font-size: 0.94rem; gap: 8px; }
  .marke img { width: 28px; height: 28px; }
  .play { font-size: 0.95rem; padding: 0 18px; gap: 10px; white-space: nowrap; }
}

@media (min-width: 560px) {
  .held .play { width: auto; }
  .held__hinweis { justify-content: flex-start; }
  .vergleich { grid-template-columns: 1fr 1fr; }
  .paket + .paket { border-top: 0; border-left: 1px solid var(--linie); padding-left: clamp(24px, 4vw, 56px); }
}
@media (min-width: 960px) {
  :root { --karte-breite: 268%; --karte-x: -73%; --karte-y: 120px; --handy-breite: 300px; --pin-groesse: 70px; --abschnitt: clamp(72px, 7vw, 112px); }
  .held { padding-bottom: clamp(24px, 4vw, 72px); }
  .held h1 { font-size: clamp(2.9rem, 7.93vw - 28px, 5.4rem); }
  .held__raster { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 32px; align-items: center; }
  .held__inhalt { padding-top: clamp(40px, 7vh, 96px); padding-bottom: 80px; }
  .buehne { margin-top: 24px; }
  .buehne .handy { top: 40px; }
  .zwei { grid-template-columns: 1fr 1fr; }
  .zwei--tausch > :first-child { order: 2; }
  .route { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .route__linie { left: 28px; top: 27px; width: calc(75% - 28px); height: 3px; }
  .route__senkrecht { display: none; }
  .route__waagrecht { display: inline; }
  .bewegt .route .route__linie { clip-path: inset(0 100% 0 0); }
  .station { grid-template-columns: 1fr; gap: 18px; align-content: start; }
  .station h3 { margin-top: 0; min-height: 0; }
  .deutsch { grid-template-columns: 1fr 1fr; }
  .markieren { min-height: 640px; }
  .demo-pin { position: absolute; left: -2%; bottom: 6%; margin-top: 0; width: 380px; }
  .fuss__oben { grid-template-columns: 1fr auto; align-items: start; }
  .schluss__raster { grid-template-columns: 1fr 1.1fr; }
  .schluss__wand { --sk-breite: 140%; --sk-y: 30px; }
  .schluss__karte { left: -4%; }
  .pin__etikett { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bewegt .auftauchen { opacity: 1; transform: none; }
}