/* Seite „Neon Companion“ im Stil „Greetings from Leonida“: Urlaubspost aus Leonida. Alle Farben aus tokens.css, Regeln in DESIGN.md. */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:16px; }
body{ margin:0; background:var(--shell); color:var(--ink); font:400 17px/1.6 "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--pink-deep); text-underline-offset:3px; }
a:focus-visible, button:focus-visible{ outline:3px solid var(--pink-deep); outline-offset:3px; }
h1, h2, h3{ text-wrap:balance; }
p, li, figcaption{ text-wrap:pretty; }
.sr-only{ position:absolute; 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:12px; top:-60px; z-index:30; background:var(--ink); color:var(--shell); padding:10px 14px; }
.skip:focus{ top:12px; }
.wrap{ max-width:1200px; margin-inline:auto; padding-left:max(clamp(16px, 3vw, 34px), env(safe-area-inset-left, 0px)); padding-right:max(clamp(16px, 3vw, 34px), env(safe-area-inset-right, 0px)); }

/* ---------- Kopf: Postkarte im Sonnenuntergang (Signatur) ---------- */
.hero{ position:relative; overflow:hidden; text-align:center; padding-top:max(14px, env(safe-area-inset-top, 0px));
  background:linear-gradient(180deg, var(--gold) 0%, #FF8A4C 34%, var(--pink) 68%, #8E3497 100%); }
.hero-sun{ position:absolute; left:50%; top:60%; width:min(62vw, 500px); aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(circle, #FFF6D8 0 56%, #FFE3A0 63%, rgba(255, 214, 140, 0) 71%); }
.hero-top{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:6px 20px; flex-wrap:wrap; }
.topnav{ display:flex; flex-wrap:wrap; gap:4px 20px; }
.topnav a{ color:var(--ink); font:700 15px/1 "Karla", sans-serif; text-decoration:none; padding:12px 2px 10px; border-bottom:2px solid transparent; }
.topnav a:hover{ border-color:var(--ink); }
/* Schreibschrift mit dunkler Kontur (acht Schatten rundum) und Versatz, damit sie auf dem Himmel lesbar ist */
.hero-greet{ position:relative; margin:18px 0 -.14em; font:400 clamp(40px, 6vw, 68px)/1 "Yellowtail", "Brush Script MT", cursive; color:var(--white); transform:rotate(-4deg);
  text-shadow:-2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink), 5px 5px 0 var(--ink); }
.hero-letters{ position:relative; margin:0; display:flex; justify-content:center; font:400 clamp(40px, 14.5vw, 188px)/.95 "Bowlby One", "Arial Black", sans-serif; letter-spacing:.01em; }
.letter{ color:var(--pink); -webkit-text-stroke:3px var(--ink); filter:drop-shadow(5px 5px 0 var(--white)) drop-shadow(5px 5px 0 var(--ink)); }
/* Bildpfade stehen hier und nicht in einer CSS-Variablen: url() in Variablen löst der Browser relativ zu dieser Datei auf */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .letter{ background-position:center; background-size:cover; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; }
  .letter-l{ background-image:url(../img/letters/l.webp); }
  .letter-e{ background-image:url(../img/letters/e.webp); }
  .letter-o{ background-image:url(../img/letters/o.webp); }
  .letter-n{ background-image:url(../img/letters/n.webp); }
  .letter-i{ background-image:url(../img/letters/i.webp); }
  .letter-d{ background-image:url(../img/letters/d.webp); }
  .letter-a{ background-image:url(../img/letters/a.webp); }
}
.postmark{ position:absolute; right:clamp(10px, 3vw, 34px); top:clamp(66px, 9vw, 96px); width:clamp(104px, 13vw, 150px); aspect-ratio:1; color:var(--ink);
  transform:rotate(12deg); animation:stamp .32s cubic-bezier(.3, .7, .2, 1) .3s both; }
.postmark svg{ display:block; width:100%; height:100%; }
.postmark .ring{ font:700 11px "Karla", sans-serif; letter-spacing:.14em; fill:currentColor; }
.postmark .num{ font:400 34px "Bowlby One", sans-serif; fill:currentColor; }
@keyframes stamp{ from{ transform:rotate(3deg) scale(1.25); } to{ transform:rotate(12deg) scale(1); } }
/* Meer wie auf der Souvenirkarte: flaches Türkis mit gezeichneten Wellen, darin die Sonnenspiegelung als Wellenstriche */
.hero-sea{ position:relative; height:64px; margin-top:8px; background-color:var(--sea);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16'%3E%3Cpath d='M0 10q7-7 14 0t14 0' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='2'/%3E%3C/svg%3E"); }
.hero-sea svg{ position:absolute; left:50%; top:6px; width:min(52vw, 380px); height:52px; transform:translateX(-50%); }
.hero-band{ position:relative; background:var(--sea-deep); color:var(--white); }
.hero-band p{ margin:0; padding-block:16px 20px; font:600 17px/1.45 "Karla", sans-serif; }

/* ---------- Abschnitte ---------- */
main{ padding-bottom:48px; }
.sec{ padding-top:clamp(32px, 5vw, 56px); }
.script-h{ margin:0 0 4px; font:400 clamp(36px, 4.6vw, 54px)/1.05 "Yellowtail", "Brush Script MT", cursive; color:var(--pink-head); transform:rotate(-2deg); transform-origin:left center; }
.lead{ margin:0 0 18px; max-width:62ch; color:var(--ink-soft); }
.pair{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:0 clamp(24px, 3.4vw, 44px); align-items:start; }

/* Souvenirkarte */
.souvenir{ margin:0; }
.souvenir svg{ display:block; width:100%; height:auto; aspect-ratio:1 / 1; border:6px solid var(--white); box-shadow:0 0 0 2px var(--ink), 8px 8px 0 var(--ink); }
.souvenir svg text{ font:700 22px "Karla", sans-serif; letter-spacing:.08em; fill:var(--ink); paint-order:stroke; stroke:var(--sand); stroke-width:7px; stroke-linejoin:round; }
.souvenir .pin{ cursor:pointer; }
.souvenir svg text.here-t{ font:400 30px "Bowlby One", sans-serif; letter-spacing:.04em; fill:var(--ink); stroke:none; }
/* Name des Staates quer über den Norden, leise wie auf einer Landkarte */
.souvenir svg text.map-title{ font:400 36px "Bowlby One", sans-serif; letter-spacing:.3em; fill:var(--ink); fill-opacity:.22; stroke:none; }
.souvenir .pin:focus-visible{ outline:none; }
.souvenir .pin:focus-visible circle:first-of-type{ stroke:var(--pink-deep); stroke-width:6; }
.souvenir figcaption{ margin-top:16px; font-size:14px; color:var(--ink-soft); }

/* News als Postkarten-Rückseiten */
.postcards{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.postcard-news{ display:grid; grid-template-columns:minmax(0, 1fr) 112px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
.postcard-news .msg{ padding:14px 16px; border-right:2px solid rgba(42, 16, 51, .16); min-width:0; }
.postcard-news h3{ margin:0; font:700 18px/1.3 "Karla", sans-serif; }
.postcard-news p{ margin:6px 0 0; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.postcard-news .src{ font-size:13px; }
.postcard-news .addr{ padding:12px; display:grid; align-content:start; gap:10px; }
.stamp-status{ display:inline-block; border:2px dashed currentColor; border-radius:2px; padding:6px 8px; font:700 12px/1.3 "Karla", sans-serif; letter-spacing:.08em; text-transform:uppercase; text-align:center; }
/* Alles, was nicht offiziell ist, kommt als schräger Gummistempel */
.stamp-status.rubber{ border:3px double currentColor; border-radius:5px; padding:6px 8px 4px; transform:rotate(-7deg); background:rgba(255, 255, 255, .6);
  font:400 13px/1.25 "Bowlby One", sans-serif; letter-spacing:.06em; }
.stamp-status.rubber time{ font:700 11px/1.2 "Karla", sans-serif; letter-spacing:.08em; }
.rubber-big{ position:absolute; right:clamp(12px, 18%, 190px); top:-18px; z-index:1; pointer-events:none; padding:6px 16px 3px; border:4px double currentColor; border-radius:8px;
  background:rgba(255, 255, 255, .8); font:400 clamp(22px, 3vw, 34px)/1 "Bowlby One", sans-serif; letter-spacing:.06em; text-transform:uppercase; transform:rotate(-9deg); }
.st-official{ color:var(--st-official); }
.st-reported{ color:var(--st-reported); }
.st-rumor{ color:var(--st-rumor); }
.st-confirmed{ color:var(--st-confirmed); }
.st-patched{ color:var(--st-patched); }
/* Lage auf der Karte: geschätzt (gepunktet, wie mit Bleistift) oder geprüft (durchgezogen) */
.pos-tag{ display:inline-block; vertical-align:middle; border:2px dotted currentColor; border-radius:2px; padding:4px 8px; font:700 12px/1.3 "Karla", sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.pos-estimated{ color:var(--ink-soft); }
.pos-confirmed{ color:var(--st-confirmed); border-style:solid; }
.place-pos{ margin:12px 0 0; font-size:15px; color:var(--ink-soft); }
.place-pos .pos-tag{ margin-right:6px; }
.ln{ display:block; height:2px; background:rgba(42, 16, 51, .16); }

/* Orte als Foto-Postkarten */
.photo-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
.postcard{ margin:0; background:var(--white); padding:10px 10px 14px; border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
.photo-row .postcard:nth-child(odd){ transform:rotate(-1.5deg); }
.photo-row .postcard:nth-child(even){ transform:rotate(1.5deg); }
.postcard img{ width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border-radius:2px; }
.postcard figcaption{ display:grid; gap:4px; margin-top:8px; }
.postcard .cap{ font:400 30px/1.05 "Yellowtail", "Brush Script MT", cursive; color:var(--pink-deep); }
.postcard .kind{ font:700 12px/1 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.postcard .blurb{ font-size:15px; line-height:1.45; }
.postcard .pic-note{ font-size:13px; line-height:1.4; color:var(--ink-soft); }
.also-h{ margin:30px 0 10px; font:700 18px/1.3 "Karla", sans-serif; }
.also{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.also li{ background:var(--white); border-radius:999px; box-shadow:0 0 0 2px var(--ink); padding:8px 14px; font-size:15px; }
.also span{ color:var(--ink-soft); }

/* Fahrzeuge als Gepäckanhänger */
.tags{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.tag{ position:relative; display:grid; gap:6px; align-content:start; background:var(--gold); border:2px solid var(--ink); border-radius:4px; padding:16px 16px 14px 42px; box-shadow:4px 4px 0 var(--ink); }
.tag::before{ content:""; position:absolute; left:14px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:var(--shell); border:2px solid var(--ink); }
.tag b{ font:400 20px/1.15 "Bowlby One", sans-serif; }
.tag span{ font-size:15px; }
.tag .stamp-status{ justify-self:start; margin-top:4px; background:var(--white); font-size:11px; padding:4px 7px; }
/* Anhänger mit Foto: Loch oben in der Mitte, Bild darunter */
.tag-photo{ padding:34px 12px 14px; }
.tag-photo::before{ left:50%; top:11px; margin:0 0 0 -7px; }
.tag-photo img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border-radius:2px; box-shadow:0 0 0 2px var(--ink); margin-bottom:6px; }

/* ---------- Unterseiten ---------- */
.pagehead{ background:var(--gold); border-bottom:3px solid var(--ink); padding-top:env(safe-area-inset-top, 0px); }
.pagehead-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 24px; padding-block:10px; }
/* Wortmarke: „Neon“ in Schreibschrift, „Companion“ in Blockschrift, darunter die Unterzeile. Auch der Kopf der Startseite (dort als h1). */
.wordmark{ display:inline-grid; grid-template-columns:auto auto; justify-content:start; align-items:baseline; column-gap:8px; margin:0; text-align:left; text-decoration:none; color:var(--ink); }
.wm-script{ font:400 36px/.8 "Yellowtail", "Brush Script MT", cursive; color:var(--pink-deep); text-shadow:0 0 10px rgba(255, 241, 199, .9); }
.wm-block{ font:400 24px/1 "Bowlby One", "Arial Black", sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.wm-tag{ grid-column:1 / -1; margin-top:6px; font:700 11px/1.2 "Karla", sans-serif; letter-spacing:.14em; text-transform:uppercase; }
/* Beim Überfahren leuchtet „Neon“ kurz auf wie eine Leuchtröhre */
a.wordmark:hover .wm-script, a.wordmark:focus-visible .wm-script{ text-shadow:0 0 6px rgba(255, 111, 168, .9), 0 0 16px rgba(242, 78, 139, .55); animation:neon-on .5s steps(1) both; }
@keyframes neon-on{ 0%{ opacity:.35; } 20%{ opacity:1; } 30%{ opacity:.5; } 45%, 100%{ opacity:1; } }
.topnav a[aria-current]{ border-color:var(--ink); }
.pagehead-count{ font:700 13px/1 "Karla", sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.pagehead-count b{ font:400 18px/1 "Bowlby One", sans-serif; letter-spacing:0; }
.page{ padding-top:clamp(20px, 4vw, 40px); }
.page > .script-h:first-child, .page > h1.script-h{ margin-top:8px; }
.crumbs{ margin:0 0 14px; font-weight:700; font-size:15px; }
.crumbs a::before{ content:"‹ "; }
.more{ margin:18px 0 0; font-weight:700; }
.card-link{ color:inherit; text-decoration:none; }
.card-link:hover{ text-decoration:underline; text-decoration-thickness:2px; }
.postcards-wide{ max-width:780px; }
.spoiler-note{ font-style:italic; }
.btn{ display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border:0; border-radius:4px; background:var(--ink); color:var(--shell); font:700 15px/1 "Karla", sans-serif; text-decoration:none; cursor:pointer; box-shadow:4px 4px 0 var(--pink); }
.btn[aria-pressed="true"]{ background:var(--st-confirmed); box-shadow:4px 4px 0 var(--ink); }
.btn-line{ display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border-radius:4px; color:var(--ink); font:700 15px/1 "Karla", sans-serif; text-decoration:none; box-shadow:inset 0 0 0 2px var(--ink); }
.kind{ margin:0; font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }

/* Einzelseite als große Postkarte */
.entry{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 150px; max-width:900px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 8px 8px 0 var(--ink); }
.entry-msg{ padding:clamp(18px, 3vw, 30px); border-right:2px solid rgba(42, 16, 51, .16); min-width:0; }
.entry-h{ margin:4px 0 12px; font:400 clamp(30px, 4.6vw, 52px)/1.08 "Bowlby One", "Arial Black", sans-serif; }
.entry-lead{ margin:0 0 14px; font-size:19px; line-height:1.55; max-width:60ch; }
.entry-addr{ padding:16px; display:grid; align-content:start; gap:12px; }
.entry .src{ font-size:14px; color:var(--ink-soft); }
.entry-text{ max-width:68ch; margin-top:24px; }
.place{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px 36px; align-items:start; }
.place .entry{ grid-column:1 / -1; }
.place-photo{ transform:rotate(-1deg); }
.place-map svg{ max-width:520px; }

/* Spoiler: Postkarte, die man selbst umdreht */
.spoiler{ margin:0 0 14px; }
.spoiler summary{ list-style:none; cursor:pointer; display:grid; gap:6px; padding:22px; text-align:center; border-radius:4px;
  background:linear-gradient(180deg, var(--gold), var(--pink)); box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
.spoiler summary::-webkit-details-marker{ display:none; }
.spoiler-front{ font:400 34px/1 "Yellowtail", "Brush Script MT", cursive; color:var(--white); text-shadow:2px 2px 0 var(--ink); }
.spoiler-hint{ font:700 13px/1.2 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.spoiler[open] summary{ margin-bottom:14px; }

/* Fahrzeug-Einzelseite */
.tag-big{ max-width:640px; padding:24px 24px 20px 56px; box-shadow:8px 8px 0 var(--ink); }
.tag-big::before{ left:20px; }
.tag-big .entry-h{ margin:0 0 6px; }
.ride{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px 36px; align-items:start; }
.ride-photo{ transform:rotate(1deg); }

/* ---------- Postkarte des Tages ---------- */
.daily{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 8px 8px 0 var(--ink); }
.daily-front{ margin:0; padding:12px; border-right:2px solid rgba(42, 16, 51, .16); }
.daily-front img{ width:100%; height:100%; min-height:220px; object-fit:cover; border-radius:2px; }
.daily-back{ display:grid; grid-template-columns:minmax(0, 1fr) 120px; min-width:0; }
.daily-msg{ padding:18px 18px 16px; min-width:0; }
.daily-kicker{ margin:0; font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.daily-title{ margin:6px 0 8px; font:400 clamp(24px, 2.6vw, 32px)/1.1 "Bowlby One", sans-serif; }
.daily-caption{ margin:0 0 10px; font:400 22px/1.2 "Yellowtail", "Brush Script MT", cursive; color:var(--pink-deep); }
.daily-fact{ margin:0 0 14px; }
.daily-more{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; font-weight:700; }
.daily-addr{ padding:14px 12px; display:grid; align-content:start; gap:10px; }
.daily-mark{ display:grid; place-items:center; align-content:center; width:100px; aspect-ratio:1; border:3px solid var(--ink); border-radius:50%; transform:rotate(-10deg); text-align:center;
  font:700 11px/1.15 "Karla", sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.daily-mark b{ font:400 26px/1 "Bowlby One", sans-serif; letter-spacing:0; }
.daily-credit{ font-size:12px; color:var(--ink-soft); line-height:1.3; }

/* Archiv: offene Postkarten und verschlossene Umschläge */
.daily-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap:22px 18px; }
.dg-card{ margin:0; height:100%; background:var(--white); padding:8px 8px 12px; border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
.dg-photo{ position:relative; aspect-ratio:16 / 9; overflow:hidden; border-radius:2px; background:var(--sand); }
.dg-photo img{ width:100%; height:100%; object-fit:cover; }
.dg-envelope{ display:none; position:absolute; inset:0; place-items:center; text-align:center; color:var(--ink); font:700 12px/1.25 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(to bottom right, transparent 49.5%, rgba(42, 16, 51, .25) 50%, transparent 50.5%) top left / 50% 55% no-repeat,
             linear-gradient(to bottom left, transparent 49.5%, rgba(42, 16, 51, .25) 50%, transparent 50.5%) top right / 50% 55% no-repeat, var(--gold); }
.dg-envelope span{ background:var(--white); padding:6px 10px; border-radius:4px; box-shadow:0 0 0 2px var(--ink); }
.dg-envelope b{ font:400 18px/1 "Bowlby One", sans-serif; letter-spacing:0; }
.dg-card figcaption{ display:grid; gap:2px; margin-top:8px; }
.dg-card time{ font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.dg-title{ font:400 18px/1.15 "Bowlby One", sans-serif; }
.dg-fact{ font-size:14px; line-height:1.45; color:var(--ink-soft); }
.is-sealed .dg-envelope{ display:grid; }
.is-sealed .dg-photo img, .is-sealed .dg-title, .is-sealed .dg-fact{ visibility:hidden; }

/* ---------- Briefmarkenalbum ---------- */
.album-progress{ margin:0 0 20px; font-weight:700; }
.album{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap:26px 18px; }
.album-slot{ display:grid; justify-items:center; gap:10px; }
/* Schatten nur auf der Marke (folgt dem Zackenrand), nicht auf dem Text darunter */
.stamp-wrap{ width:100%; max-width:200px; filter:drop-shadow(2px 2px 0 rgba(42, 16, 51, .6)); }
/* Zackenrand: Löcher auf dem Rand, die Innenfläche bleibt voll */
.stamp{ position:relative; width:100%; max-width:200px; aspect-ratio:5 / 6; padding:10px; background:var(--white); display:grid;
  -webkit-mask:linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent 4px, #000 4.6px) -6px -6px / 12px 12px round;
          mask:linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent 4px, #000 4.6px) -6px -6px / 12px 12px round; }
.stamp > *{ grid-area:1 / 1; }
.stamp img{ width:100%; height:100%; object-fit:cover; }
.stamp.is-type{ background:var(--white); }
.stamp-initials{ display:grid; place-items:center; background:var(--gold); font:400 52px/1 "Bowlby One", sans-serif; color:var(--ink); }
.album-slot:nth-child(3n+2) .stamp-initials{ background:var(--sea); }
.album-slot:nth-child(3n) .stamp-initials{ background:var(--pink); }
.stamp-name{ align-self:end; justify-self:stretch; margin:0 6px 6px; padding:4px 6px 3px; background:var(--white); text-align:center; font:400 13px/1.1 "Bowlby One", sans-serif; }
.stamp-country{ align-self:start; justify-self:start; margin:6px; padding:2px 6px; background:var(--ink); color:var(--white); font:700 10px/1.3 "Karla", sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.stamp-mark{ display:none; align-self:center; justify-self:center; padding:8px 12px; border:3px double var(--st-confirmed); border-radius:50%; background:rgba(255, 255, 255, .7); color:var(--st-confirmed);
  font:400 16px/1 "Bowlby One", sans-serif; letter-spacing:.06em; text-transform:uppercase; transform:rotate(-14deg); }
.album-note{ margin:0; font-size:14px; font-weight:700; text-align:center; }
.album-got{ display:none; color:var(--st-confirmed); }
.album-slot:not(.is-collected) .stamp{ filter:grayscale(1); opacity:.55; }
.album-slot.is-collected .stamp-mark, .album-slot.is-collected .album-got{ display:inline-block; }
.album-slot.is-collected .album-find{ display:none; }
.album-slot.is-collected{ transform:rotate(-2deg); }
.album-slot.is-collected:nth-child(even){ transform:rotate(2deg); }
.album-slot.is-locked .stamp{ opacity:.35; }
.mini-stamp{ display:block; width:64px; filter:grayscale(1); opacity:.5; }
.mini-stamp img{ width:100%; height:auto; border:3px solid var(--white); outline:2px dashed var(--ink); }
.mini-stamp.is-collected{ filter:none; opacity:1; transform:rotate(-5deg); }
.place-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.visit-toggle[aria-pressed="true"]{ background:var(--st-confirmed); color:var(--white); box-shadow:none; }

/* ---------- Everything we know ---------- */
.know-jump{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 8px; }
.know-jump a{ padding:8px 14px; border-radius:999px; background:var(--white); color:var(--ink); font-weight:700; text-decoration:none; box-shadow:0 0 0 2px var(--ink); }
.know-sec{ padding-top:28px; }
.know-h{ margin:0 0 14px; font:400 clamp(24px, 3vw, 32px)/1.1 "Bowlby One", sans-serif; }
.know-a{ color:var(--ink) !important; font-size:16px !important; }
.know-checked{ font:700 11px/1.3 "Karla", sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- Kartenseite ---------- */
.mapview{ padding-bottom:24px; }
.mapview-bar{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 20px; padding-block:16px 10px; }
.mapview-bar .script-h{ margin:0; }
.mapview-progress{ margin:0; font-weight:700; }
.mapview-stage{ display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:20px; max-width:1200px; margin:0 auto;
  padding-left:max(clamp(16px, 3vw, 34px), env(safe-area-inset-left, 0px)); padding-right:max(clamp(16px, 3vw, 34px), env(safe-area-inset-right, 0px)); }
/* Eigener Stapelkontext: Leaflets Ebenen (z-index 400 bis 1000) bleiben in der Karte und liegen nicht über dem Blatt am Handy */
.mapview-map{ position:relative; z-index:0; height:min(78vh, 760px); min-height:420px; border:6px solid var(--white); box-shadow:0 0 0 2px var(--ink), 8px 8px 0 var(--ink); background:var(--sea); overflow:hidden; }
.souvenir-static svg{ border:0; box-shadow:none; height:100%; width:auto; max-width:100%; margin:0 auto; }
.mapview-panel{ min-width:0; }
.panel-card{ background:var(--white); border-radius:4px; padding:18px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); position:relative; }
.panel-card img{ width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border-radius:2px; }
.panel-credit{ margin:6px 0 10px; font-size:12px; color:var(--ink-soft); }
.panel-title{ margin:4px 0 8px; font:400 26px/1.1 "Bowlby One", sans-serif; }
.panel-list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.panel-list span{ color:var(--ink-soft); font-size:14px; }
.panel-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.panel-close{ display:none; }
.mapview-note{ margin:16px auto 0; font-size:14px; color:var(--ink-soft); }

/* Leaflet im Postkartenstil */
.leaflet-container{ background:var(--sea); font-family:"Karla", system-ui, sans-serif; }
.leaflet-bar a, .leaflet-bar a:hover{ background:var(--shell); color:var(--ink); border-color:var(--ink); }
.leaflet-bar{ border:2px solid var(--ink) !important; box-shadow:3px 3px 0 var(--ink) !important; }
.leaflet-touch .leaflet-bar a{ width:40px; height:40px; line-height:38px; }
.lf-pin{ display:grid; place-items:center; }
.lf-pin .lf-dot{ display:block; margin:9px; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle, var(--pink) 0 34%, var(--white) 36%); box-shadow:0 0 0 3px var(--ink); }
.lf-pin.is-visited .lf-dot{ background:radial-gradient(circle, var(--st-confirmed) 0 34%, var(--white) 36%); }
.lf-pin.is-active .lf-dot{ box-shadow:0 0 0 3px var(--ink), 0 0 0 7px var(--pink-deep); }
.lf-pin:focus-visible{ outline:none; }
.lf-pin:focus-visible .lf-dot{ box-shadow:0 0 0 3px var(--ink), 0 0 0 7px var(--pink-deep); }
.lf-pin.pulse .lf-dot{ animation:pulse .2s cubic-bezier(.3, .7, .2, 1); }
@keyframes pulse{ 50%{ transform:scale(1.15); } }
.leaflet-tooltip.lf-label{ background:none; border:0; box-shadow:none; padding:0; font:700 12px/1 "Karla", sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  text-shadow:0 0 3px var(--sand), 0 0 3px var(--sand), 0 0 4px var(--sand), 0 0 6px var(--sand); }
.leaflet-tooltip.lf-label::before{ display:none; }
.lf-title span{ position:absolute; transform:translate(-50%, -50%); white-space:nowrap; font:400 30px/1 "Bowlby One", sans-serif; letter-spacing:.3em; text-transform:uppercase; color:rgba(42, 16, 51, .22); pointer-events:none; }
.labels-quiet .leaflet-tooltip.lf-label:not(.is-active){ display:none; }
.list-btn{ display:none; }

/* ---------- Fuß und Leiste am Handy ---------- */
.unofficial{ background:var(--ink); color:var(--shell); font-size:14px; line-height:1.5;
  padding:28px max(clamp(16px, 3vw, 34px), env(safe-area-inset-right, 0px)) calc(100px + env(safe-area-inset-bottom, 0px)) max(clamp(16px, 3vw, 34px), env(safe-area-inset-left, 0px)); }
/* Fuß als Postkartenrückseite */
.footcard{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 1fr) 180px; background:var(--white); color:var(--ink); border-radius:4px; box-shadow:6px 6px 0 var(--pink); }
.footcard-msg{ padding:20px 22px 14px; border-right:2px solid rgba(42, 16, 51, .16); min-width:0; }
.footcard-msg p{ margin:0 0 8px; font-size:14px; line-height:1.5; }
.footcard-msg .footcard-h{ margin:0 0 10px; font:400 30px/1 "Yellowtail", "Brush Script MT", cursive; color:var(--pink-deep); }
.footcard-addr{ padding:16px; display:grid; align-content:start; justify-items:end; gap:10px; }
.footcard-stamp{ padding:5px; background:var(--white); outline:2px dashed var(--ink); outline-offset:-1px; transform:rotate(4deg); }
.footcard-stamp img{ display:block; width:64px; height:64px; }
.footcard-mark{ justify-self:start; padding:6px 10px 4px; border:2px solid var(--ink); border-radius:999px; font:700 11px/1.2 "Karla", sans-serif; letter-spacing:.12em; text-transform:uppercase; text-align:center; transform:rotate(-6deg); }
.footcard-mark b{ font:400 16px/1 "Bowlby One", sans-serif; letter-spacing:0; }
.footcard-addr .ln{ width:100%; }
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(5, 1fr); background:var(--ink); box-shadow:0 -3px 0 var(--pink);
  padding:6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
.tabbar a{ display:grid; justify-items:center; align-content:center; gap:3px; min-height:52px; padding:4px; color:var(--shell); text-decoration:none; font:700 12px/1.1 "Karla", sans-serif; letter-spacing:.04em; -webkit-tap-highlight-color:transparent; }
.tabbar svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.tabbar a:focus-visible{ outline:3px solid var(--pink); outline-offset:-3px; }
.tabbar a[aria-current]{ color:var(--gold); box-shadow:inset 0 -3px 0 var(--pink); }

/* ---------- Figuren: Pinnwand mit Fäden und Polizeifotos mit Messlatte ---------- */
.mug-official{ margin:0 0 4px; }
.board{ margin:18px 0 8px; max-width:760px; padding:12px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 6px 6px 0 var(--ink); }
.board svg{ display:block; width:100%; height:auto; }
.board-links line{ stroke:var(--pink-deep); stroke-width:3; stroke-linecap:round; }
.board-label{ font:700 17px "Karla", sans-serif; fill:var(--ink); paint-order:stroke; stroke:var(--white); stroke-width:6px; stroke-linejoin:round; }
.board-group{ font:400 28px "Yellowtail", "Brush Script MT", cursive; fill:var(--pink-deep); }
.board-name{ font:400 19px "Bowlby One", sans-serif; fill:var(--ink); paint-order:stroke; stroke:var(--white); stroke-width:6px; stroke-linejoin:round; }
.board-ring{ fill:var(--ink); stroke:var(--ink); stroke-width:4; }
.board-pin{ fill:var(--pink); stroke:var(--ink); stroke-width:2; }
.board-node:hover .board-name{ text-decoration:underline; }
.board-node:focus-visible{ outline:none; }
.board-node:focus-visible .board-ring{ stroke:var(--pink-deep); stroke-width:9; }
.board-hint{ display:none; margin:6px 0 0; font-size:13px; color:var(--ink-soft); }
.more-list{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top:8px; }
.mugs{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:28px 22px; }
.mug{ display:flex; flex-direction:column; background:var(--white); border-radius:4px; padding:10px 10px 16px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); scroll-margin-top:16px; }
.mug:target{ box-shadow:0 0 0 3px var(--pink-deep), 6px 6px 0 var(--ink); }
.mug-photo{ position:relative; margin:0; }
.mug-photo img{ width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; border-radius:2px; background:var(--ink); }
/* Messlatte am linken Rand wie auf einem Polizeifoto */
.mug-photo::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:24px; border-radius:2px 0 0 2px; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255, 255, 255, .9) 0 2px, transparent 2px 14px), linear-gradient(90deg, rgba(42, 16, 51, .6), rgba(42, 16, 51, 0)); }
.mug-plate{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%) rotate(-1.5deg); display:grid; justify-items:center; gap:3px; width:max-content; max-width:88%; padding:8px 14px 9px;
  background:var(--ink); color:var(--shell); border-radius:2px; box-shadow:3px 3px 0 var(--pink); text-align:center; }
.mug-plate b{ font:400 18px/1.1 "Bowlby One", sans-serif; letter-spacing:.02em; }
.mug-plate span{ font:700 11px/1.2 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.mug-plate .mug-no{ color:var(--gold); }
.mug-bio{ margin:12px 4px 0; font-size:15px; line-height:1.5; }
.mug-ties{ margin:auto 4px 0; padding-top:10px; font-size:14px; line-height:1.6; }
.mug-ties .kind{ display:block; margin-bottom:2px; }
.mug-tie{ color:var(--ink-soft); }
.mug-src{ margin-top:24px; }

/* ---------- Trailer: Zwei-Klick-Videos ---------- */
.reels{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:40px; }
.reel{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:18px 30px; align-items:start; scroll-margin-top:16px; }
.vc{ position:relative; overflow:hidden; border:6px solid var(--white); border-radius:4px; background:var(--ink); box-shadow:0 0 0 2px var(--ink), 8px 8px 0 var(--ink); }
.vc-frame{ aspect-ratio:16 / 9; }
.vc-frame img, .vc-frame iframe{ display:block; width:100%; height:100%; border:0; object-fit:cover; }
.vc-play{ position:absolute; left:50%; top:44%; transform:translate(-50%, -50%); display:grid; place-items:center; width:84px; height:84px; padding:0; border:3px solid var(--ink); border-radius:50%;
  background:var(--pink); color:var(--ink); cursor:pointer; box-shadow:5px 5px 0 var(--ink); transition:transform .16s cubic-bezier(.3, .7, .2, 1); }
.vc-play svg{ width:40px; height:40px; margin-left:4px; fill:currentColor; }
.vc-play:hover{ transform:translate(-50%, -50%) scale(1.06); }
.vc-play:focus-visible{ outline:3px solid var(--white); outline-offset:4px; }
.vc-play[hidden], .vc.is-playing .vc-play, .vc.is-playing .vc-consent{ display:none; }
.vc-consent{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; padding:30px 14px 10px;
  background:linear-gradient(rgba(42, 16, 51, 0), rgba(42, 16, 51, .94) 45%); color:var(--shell); }
.vc-consent p{ margin:0; font-size:13px; }
.vc-out{ color:var(--shell); font-weight:700; font-size:14px; }
.vc-out:focus-visible{ outline-color:var(--white); }
.reel-h{ margin:0; font:400 clamp(24px, 3vw, 32px)/1.1 "Bowlby One", sans-serif; }
.reel-meta{ margin:6px 0 0; font-weight:700; }
.reel-note{ margin:8px 0 0; color:var(--ink-soft); }
.reel-song{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:12px; }
.reel-song p{ margin:0; }
.reel-song .kind{ display:block; }
.reel-info .src{ font-size:13px; }

/* ---------- Radio: Senderknöpfe wie am Autoradio ---------- */
.presets{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:18px; }
.preset{ display:grid; grid-template-columns:104px minmax(0, 1fr); gap:16px; align-items:start; padding:16px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); scroll-margin-top:16px; }
/* Senderlogo von Rockstar, die Stationstaste sitzt als Knopf auf der Ecke */
.preset-art{ position:relative; }
.preset-logo{ display:block; width:100%; height:auto; aspect-ratio:1; border-radius:10px; box-shadow:0 0 0 2px var(--ink), 3px 3px 0 var(--pink); }
.preset-no{ position:absolute; left:-9px; top:-9px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--gold); font:400 16px/1 "Bowlby One", sans-serif;
  box-shadow:0 0 0 2px var(--white), inset 0 -3px 0 rgba(0, 0, 0, .35); }
.preset:nth-child(3n+2) .preset-no{ color:var(--sea); }
.preset:nth-child(3n) .preset-no{ color:var(--pink); }
.preset-name{ margin:0; font:400 22px/1.1 "Bowlby One", sans-serif; }
.preset-genre{ margin:4px 0 8px; color:var(--ink-soft); font-size:15px; }
.preset-line{ margin:4px 0 0; font-size:15px; }
.preset-line .kind{ display:block; }
.radio-key{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:18px; }
.radio-key p{ display:flex; align-items:center; gap:10px; margin:0; font-size:14px; }
/* Album: Hülle mit Rockstars Cover, die Schallplatte aus Rillen schaut rechts heraus.
   Eigene Klasse .record, weil .album schon das Briefmarkenalbum ist. */
.record{ display:grid; grid-template-columns:minmax(200px, 320px) minmax(0, 1fr); gap:24px 40px; align-items:start; margin-top:8px; }
.record-art{ position:relative; margin-right:24%; }
.record-cover{ position:relative; z-index:1; display:block; width:100%; height:auto; aspect-ratio:1; border-radius:3px; box-shadow:0 0 0 2px var(--ink), 6px 6px 0 var(--pink); }
.record-art .album-disc{ position:absolute; z-index:0; top:4%; left:30%; width:92%; }
.album-disc{ display:grid; place-items:center; aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle, #1A0A20 0 2px, var(--ink) 2px 4px); box-shadow:0 0 0 2px var(--ink), 6px 6px 0 var(--pink); }
.album-disc span{ display:grid; place-content:center; justify-items:center; width:42%; aspect-ratio:1; border-radius:50%; background:var(--gold); color:var(--ink);
  font:400 clamp(28px, 4vw, 40px)/1 "Bowlby One", sans-serif; box-shadow:0 0 0 3px var(--pink); }
.album-disc small{ font:700 11px/1.2 "Karla", sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.album-text .lead{ margin-top:0; }
.tracklist{ margin:8px 0 0; padding-left:24px; display:grid; gap:7px; }
.tracklist b{ display:block; }
.tracklist span{ color:var(--ink-soft); font-size:14px; }
.album-stamp{ margin:14px 0 0; }

/* ---------- Editionen, Countdown, Sammler-Box ---------- */
.countdowns{ display:flex; flex-wrap:wrap; gap:22px 34px; margin:14px 0 0; padding:6px 8px; }
.count-stamp{ display:grid; place-content:center; justify-items:center; width:176px; aspect-ratio:1; margin:0; border:3px solid var(--ink); border-radius:50%; background:var(--white);
  box-shadow:0 0 0 6px var(--white), 0 0 0 8px var(--ink); font:700 12px/1.3 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; text-align:center; transform:rotate(-6deg); }
.count-stamp b{ font:400 48px/1 "Bowlby One", sans-serif; letter-spacing:0; }
.count-stamp time{ display:block; margin-top:4px; color:var(--ink-soft); font-size:11px; }
.count-launch{ background:var(--gold); box-shadow:0 0 0 6px var(--gold), 0 0 0 8px var(--ink); transform:rotate(5deg); }
.dates{ list-style:none; margin:0; padding:0; display:grid; gap:12px; max-width:780px; }
.dates li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:16px; row-gap:2px; align-items:center; padding:12px 14px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
.dates time{ grid-column:1; grid-row:1; font:400 18px/1.2 "Bowlby One", sans-serif; }
.dates li > span:not(.stamp-status){ grid-column:1; grid-row:2; font-size:15px; }
.dates .stamp-status{ grid-column:2; grid-row:1 / 3; }
.tags-two{ grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; }
.tag-ed b{ font-size:24px; }
.ed-price{ font:400 20px/1.2 "Bowlby One", sans-serif; }
.ed-list{ margin:4px 0 0; padding-left:18px; display:grid; gap:4px; font-size:15px; }
.postcard-news .ed-text{ color:var(--ink); font-weight:700; }
.postcard-news .addr .stamp-status + .stamp-status{ margin-top:4px; }
.parcel{ display:grid; gap:14px; max-width:780px; padding:20px 22px; background:var(--sand); border:2px solid var(--ink); border-radius:4px; box-shadow:6px 6px 0 var(--ink); }
.parcel-head{ display:grid; gap:4px; }
.parcel-head b{ font:400 22px/1.15 "Bowlby One", sans-serif; }
.parcel-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 20px; font-size:15px; }
.parcel-list li{ position:relative; padding-left:24px; }
.parcel-list li::before{ content:""; position:absolute; left:0; top:4px; width:13px; height:13px; border:2px solid var(--ink); border-radius:2px; background:var(--white); }
.parcel .stamp-status{ justify-self:start; }
.know-more{ margin:0 0 14px; font-weight:700; }

/* ---------- Startseite: Bereit für den Start ---------- */
.ready{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
.ready-card > a{ display:grid; gap:8px; align-content:start; height:100%; padding:12px 12px 16px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
.ready-card > a:hover .ready-t{ text-decoration:underline; text-decoration-thickness:2px; }
.ready-t{ font:400 20px/1.15 "Bowlby One", sans-serif; }
.ready-d{ font-size:14px; color:var(--ink-soft); }
.ready-num, .ready-pic, .ready-faces, .ready-dial{ display:grid; aspect-ratio:16 / 9; border-radius:2px; overflow:hidden; }
.ready-num{ place-content:center; justify-items:center; background:var(--gold); font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; text-align:center; }
.ready-num b{ font:400 46px/1 "Bowlby One", sans-serif; letter-spacing:0; }
.ready-pic{ position:relative; }
.ready-pic img{ width:100%; height:100%; object-fit:cover; }
.ready-play{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--pink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
.ready-play svg{ width:26px; height:26px; margin-left:3px; fill:var(--ink); }
.ready-faces{ grid-template-columns:repeat(4, 1fr); gap:2px; background:var(--ink); }
.ready-faces img{ width:100%; height:100%; object-fit:cover; }
.ready-dial{ grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(2, 1fr); gap:6px; padding:10px; background:var(--ink); }
.ready-dial i{ display:grid; place-items:center; border-radius:6px; background:#3D2246; color:var(--gold); font:400 20px/1 "Bowlby One", sans-serif; font-style:normal; box-shadow:inset 0 -4px 0 rgba(0, 0, 0, .35); }
.ready-dial i:nth-child(3n+2){ color:var(--sea); }
.ready-dial i:nth-child(3n){ color:var(--pink); }
/* Startseite seit 28.10.2026 mit sechs Karten: drei je Reihe */
.ready-six{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ready-ticket, .ready-road{ display:grid; aspect-ratio:16 / 9; border-radius:2px; overflow:hidden; }
.ready-ticket{ place-content:center; justify-items:center; gap:2px; background:var(--white); box-shadow:inset 0 0 0 2px var(--ink); text-align:center;
  background-image:linear-gradient(90deg, transparent calc(100% - 46px), var(--gold) calc(100% - 46px)); font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; padding-right:46px; }
.ready-ticket b{ font:400 46px/1 "Bowlby One", sans-serif; letter-spacing:0; }
.ready-road{ background:var(--sand); box-shadow:inset 0 0 0 2px var(--ink); }
.ready-road svg{ width:100%; height:100%; }
.ready-road .rr-way{ fill:none; stroke:var(--pink); stroke-width:5; stroke-dasharray:9 7; stroke-linecap:round; }
.ready-road .rr-pin{ fill:var(--white); stroke:var(--ink); stroke-width:3; }
.ready-road .rr-flag{ fill:var(--gold); stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round; }

/* ---------- Release night: Ticket nach Leonida und Packliste ---------- */
/* Am breiten Bildschirm Ticket links, Packliste rechts; sonst untereinander */
@media (min-width:1100px){
  .night{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 44px; align-items:start; }
  .night .ticket{ margin-top:8px; }
  .night-list.sec{ margin-top:0; }
  .night-list .script-h{ margin-top:0; }
}
.ticket{ display:grid; grid-template-columns:minmax(0, 1fr) 190px; max-width:760px; margin-top:18px; background:var(--white); border-radius:6px; box-shadow:0 0 0 2px var(--ink), 6px 6px 0 var(--pink); }
.ticket-main{ display:grid; gap:4px; padding:20px 24px; }
.ticket-kicker{ margin:0; font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.ticket-time{ margin:0; font:400 clamp(56px, 12vw, 96px)/1 "Bowlby One", sans-serif; }
.ticket-date{ margin:0; font:700 20px/1.3 "Karla", sans-serif; }
.ticket-zone{ margin:0; color:var(--ink-soft); font-size:15px; }
.ticket-stub{ display:grid; align-content:center; justify-items:center; gap:12px; padding:20px 16px; border-left:2px dashed var(--ink); border-radius:0 6px 6px 0; background:var(--gold); text-align:center; }
.ticket-left{ margin:0; font:400 22px/1.15 "Bowlby One", sans-serif; }
.ticket-stub .stamp-status{ background:var(--white); }
.ticket-region{ margin:6px 0 0; color:var(--ink-soft); font-size:14px; line-height:1.4; }
.ticket-region:empty{ display:none; }
.ticket-note{ max-width:68ch; margin-top:14px; color:var(--ink-soft); font-size:15px; }
.ticket-note p{ margin:0 0 6px; }
/* Freischaltung je Region (6.11.2026): Rockstars Liste als Tabelle, eigene Region mit Marke „you“ */
.regions-wrap{ max-width:860px; overflow-x:auto; padding:2px; }
.regions-table{ width:100%; border-collapse:collapse; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink); font-size:15px; }
.regions-table th, .regions-table td{ padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(42, 16, 51, .14); }
.regions-table thead th{ background:var(--sand); font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.regions-table tbody th{ font-weight:600; }
.regions-table td{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.regions-table tr.is-yours th, .regions-table tr.is-yours td{ background:#FFF1D6; }
.regions-table:not(.has-local) .regions-local{ display:none; }
.region-you{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--pink-deep); color:var(--white); font:700 11px/1.4 "Karla", sans-serif; letter-spacing:.08em; text-transform:uppercase; vertical-align:1px; }
.region-you[hidden]{ display:none; }
.checklist{ list-style:none; display:grid; gap:12px; max-width:760px; margin:14px 0 0; padding:0; }
.check{ display:grid; grid-template-columns:28px minmax(0, 1fr) auto; gap:10px 14px; align-items:start; padding:14px 16px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
.check input{ width:24px; height:24px; margin:2px 0 0; accent-color:var(--pink-deep); cursor:pointer; }
.check label{ display:grid; gap:2px; cursor:pointer; }
.check label b{ font-size:17px; }
.check label span{ color:var(--ink-soft); font-size:15px; }
.check input:checked + label b{ text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--pink); }
.check-meta{ display:grid; justify-items:end; gap:6px; font-size:14px; }
.check-progress{ margin:0; font-weight:700; }
.check-note{ margin:12px 0 0; color:var(--ink-soft); font-size:14px; }

/* ---------- Zeitleiste „Road to Leonida“: gestrichelte Straße wie auf der Karte, Halte als Postkarten ---------- */
.road-leg{ margin-top:22px; }
.road-year{ display:inline-block; margin:0 0 14px; padding:6px 14px; border:2px solid var(--ink); border-radius:6px; background:var(--gold); box-shadow:3px 3px 0 var(--ink); font:400 22px/1 "Bowlby One", sans-serif; }
.road{ position:relative; display:grid; gap:14px; list-style:none; margin:0; padding:0 0 0 36px; }
.road::before{ content:""; position:absolute; left:11px; top:-14px; bottom:-26px; border-left:4px dashed var(--pink); }
.road-leg:last-of-type .road::before{ bottom:50px; }  /* endet am Ziel statt im Link darunter */
.road-stop{ position:relative; max-width:640px; padding:12px 16px 14px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
.road-stop::before{ content:""; position:absolute; left:-33px; top:15px; width:12px; height:12px; border:3px solid var(--ink); border-radius:50%; background:var(--white); box-shadow:0 0 0 3px var(--pink); }
.road-date{ display:block; font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.road-t{ margin:4px 0 8px; font:400 20px/1.2 "Bowlby One", sans-serif; }
.road-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0; }
.road-left{ font-weight:700; color:var(--pink-deep); }
.road-left:empty{ display:none; }
.road-stop .src{ margin:8px 0 0; font-size:13px; }
.road-stop.is-coming{ background:transparent; box-shadow:none; outline:2px dashed var(--ink); outline-offset:-2px; }
.road-stop.is-today{ box-shadow:0 0 0 3px var(--pink), 6px 6px 0 var(--ink); }
.road-stop.is-final{ background:var(--gold); }
.road-stop.is-final.is-coming{ outline-style:solid; }  /* nur der kommende Halt hat einen Umriss, am Tag selbst zählt der pinke Ring */
.road-stop.is-final .road-t{ font-size:26px; }
.road-stop.is-final .road-left{ color:var(--ink); }  /* pink-deep auf gold reicht nicht für Kontrast */
.road-stop.is-final .stamp-status{ background:var(--white); }

/* ---------- Quiz „Where in Leonida?“: Ausschnitt im Postkartenrahmen, vier Antworten, Ergebnis als Stempel ---------- */
.quiz{ max-width:760px; margin-top:18px; }
.quiz [hidden]{ display:none !important; }  /* display:grid der Bereiche darf hidden nicht aufheben */
.quiz-start{ display:grid; justify-items:start; gap:12px; }
.quiz-best{ margin:0; font-weight:700; }
.quiz-tiers-h{ margin:6px 0 0; font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.quiz-tiers{ display:flex; flex-wrap:wrap; gap:18px 22px; list-style:none; margin:4px 0 14px; padding:8px; }
.quiz-tiers li{ display:grid; place-content:center; justify-items:center; width:112px; aspect-ratio:1; border:2px solid var(--ink); border-radius:50%; background:var(--white);
  box-shadow:0 0 0 4px var(--white), 0 0 0 6px var(--ink); font:700 10px/1.25 "Karla", sans-serif; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:10px; transform:rotate(-5deg); }
.quiz-tiers li:nth-child(even){ transform:rotate(4deg); }
.quiz-tiers li:first-child{ background:var(--gold); box-shadow:0 0 0 4px var(--gold), 0 0 0 6px var(--ink); }
.quiz-tiers b{ font:400 22px/1.1 "Bowlby One", sans-serif; letter-spacing:0; }
.quiz-count{ margin:0 0 10px; font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.quiz-pic{ margin:0; overflow:hidden; aspect-ratio:16 / 9; border:6px solid var(--white); background:var(--ink); box-shadow:0 0 0 2px var(--ink), 6px 6px 0 var(--ink); }
.quiz-pic img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(2); transition:transform .7s cubic-bezier(.3, .7, .2, 1); }
.quiz-pic.is-open img{ transform:scale(1); }
/* Beim Wechsel zur nächsten Runde nicht zurückzoomen und das neue Bild erst zeigen, wenn es geladen ist (sonst verrät es die Antwort) */
.quiz-pic.is-swapping img{ transition:none; opacity:0; }
.quiz-q{ margin:22px 0 12px; font:400 24px/1.15 "Bowlby One", sans-serif; }
.quiz-q:focus{ outline:none; }
.quiz-q:focus-visible{ outline:3px solid var(--pink-deep); outline-offset:4px; }
.quiz-options{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.quiz-opt{ min-height:52px; padding:10px 14px; border:0; border-radius:4px; background:var(--white); color:var(--ink); font:700 17px/1.2 "Karla", sans-serif; text-align:left; cursor:pointer;
  box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
.quiz-opt:hover:not(:disabled){ background:var(--sand); }
.quiz-opt:focus-visible{ outline:3px solid var(--pink-deep); outline-offset:3px; }
.quiz-opt:disabled{ cursor:default; }
.quiz-opt:disabled:not(.is-right):not(.is-wrong){ opacity:.55; }
.quiz-opt.is-right{ background:var(--st-confirmed); color:var(--white); }
.quiz-opt.is-right::after{ content:" ✓"; }
.quiz-opt.is-wrong{ background:var(--pink); text-decoration:line-through; text-decoration-thickness:2px; }
.quiz-feedback{ margin:16px 0 12px; min-height:1.6em; }
.quiz-end{ display:grid; justify-items:start; gap:14px; padding-top:8px; }
.quiz-end:focus, .quiz-end-text:focus{ outline:none; }
.quiz-stamp{ width:200px; margin:12px 0 6px 10px; background:var(--gold); box-shadow:0 0 0 6px var(--gold), 0 0 0 8px var(--ink); }
.quiz-stamp b{ font-size:52px; }
.quiz-end-text, .quiz-actions, .quiz-shared{ margin:0; }
.quiz-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.quiz-actions .btn-line{ background:none; border:0; cursor:pointer; }

/* ---------- Ab dem Release (6.11.2026 vorbereitet): echte Karte, Sammelobjekte, Missionen, Glitches, Fahrzeugwerte ---------- */
.style-btn{ background:none; border:0; cursor:pointer; }
.style-btn[hidden]{ display:none; }
.style-btn[aria-pressed="true"]{ background:var(--ink); color:var(--shell); }
.collect-bar{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:8px; }
.collect-bar[hidden]{ display:none; }
.collect-btn{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:6px 12px; border:0; border-radius:999px; background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); font:700 14px/1 "Karla", sans-serif; cursor:pointer; }
.collect-btn[aria-pressed="true"]{ background:var(--ink); color:var(--shell); }
.collect-btn:focus-visible{ outline:3px solid var(--pink-deep); outline-offset:2px; }
.collect-n{ font-variant-numeric:tabular-nums; opacity:.85; }
/* Zeichen je Art: Farbe aus --c, Form als Hinweis auch ohne Farbe */
.collect-mark{ display:inline-block; width:14px; height:14px; background:var(--c, var(--pink)); box-shadow:0 0 0 2px var(--ink); }
.collect-circle{ border-radius:50%; }
.collect-diamond{ transform:rotate(45deg) scale(.85); }
.collect-triangle{ clip-path:polygon(50% 0, 100% 100%, 0 100%); box-shadow:none; outline:0; }
.lf-coords{ padding:6px 10px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink); font:700 13px/1.3 ui-monospace, Consolas, monospace; }
.lf-col{ display:grid; place-items:center; }
.lf-col .collect-mark{ width:18px; height:18px; box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--white); }
.lf-col.is-found .collect-mark{ opacity:.6; }
.lf-col.is-found::after{ content:"✓"; position:absolute; right:0; top:0; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--st-confirmed); color:var(--white); box-shadow:0 0 0 2px var(--white); font:700 11px/1 "Karla", sans-serif; }
.lf-col:focus-visible{ outline:none; }
.lf-col:focus-visible .collect-mark{ box-shadow:0 0 0 3px var(--ink), 0 0 0 7px var(--pink-deep); }
.mission-chapter{ margin:0 0 10px; font:400 22px/1.15 "Bowlby One", sans-serif; }
.mission-list{ display:grid; gap:10px; max-width:760px; margin:0; padding:0; list-style:none; }
.mission-link{ display:grid; grid-template-columns:44px minmax(0, 1fr); align-items:center; gap:2px 14px; padding:12px 14px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink); color:var(--ink); text-decoration:none; }
.mission-link:hover .mission-t{ text-decoration:underline; text-decoration-thickness:2px; }
.mission-no{ grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px var(--ink); font:400 18px/1 "Bowlby One", sans-serif; }
.mission-t{ font-size:17px; }
.mission-hint{ color:var(--ink-soft); font-size:14px; }
.mission-title{ margin:0 0 8px; font:400 24px/1.15 "Bowlby One", sans-serif; }
.mission-facts{ display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--ink-soft); }
.mission-tips-h{ margin:18px 0 6px; font:400 18px/1.2 "Bowlby One", sans-serif; }
.mission-tips{ margin:0 0 12px; padding-left:20px; }
.mission-nav{ display:flex; justify-content:space-between; gap:12px; max-width:760px; margin-top:20px; }
.glitch-list{ display:grid; gap:16px; max-width:820px; margin:0; padding:0; list-style:none; }
.glitch{ padding:16px 18px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
.glitch.is-patched{ opacity:.8; }
.glitch-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start; gap:8px 16px; }
.glitch-h{ margin:0; font:400 21px/1.2 "Bowlby One", sans-serif; }
.glitch-effect{ margin:8px 0; color:var(--ink-soft); }
.glitch-steps{ margin:0 0 10px; padding-left:22px; }
.glitch-meta{ margin:0 0 12px; font-size:14px; color:var(--ink-soft); }
.vc-plain{ max-width:560px; }
.vc-blank{ display:grid; place-items:center; width:100%; height:100%; background:linear-gradient(180deg, var(--gold), var(--pink) 70%, var(--violet)); color:var(--white); font:400 28px/1 "Yellowtail", cursive; }
.spec{ max-width:560px; margin:18px 0; padding:14px 16px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--sea); }
.spec-h{ margin:0 0 8px; font:400 20px/1.2 "Bowlby One", sans-serif; }
.spec-list{ display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:6px 18px; margin:0 0 8px; }
.spec-list dt{ font-weight:700; }
.spec-list dd{ margin:0; }
.spec-note{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0 0; font-size:14px; color:var(--ink-soft); }

/* ---------- Coming soon (6.11.2026): Postkarten mit Stempel, ab Daten werden sie zum Link ---------- */
.soon-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:20px 18px; margin:0; padding:0; list-style:none; }
.soon-four{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.soon-link{ display:grid; grid-template-rows:auto auto 1fr auto; gap:6px; height:100%; padding:10px 10px 14px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--ink); color:var(--ink); text-decoration:none; }
a.soon-link:hover .soon-t{ text-decoration:underline; text-decoration-thickness:2px; }
.soon-photo img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border-radius:2px; }
.soon-t{ margin-top:6px; font:400 20px/1.15 "Bowlby One", sans-serif; }
.soon-d{ color:var(--ink-soft); font-size:15px; line-height:1.45; }
/* Stempel mit dem Zeitpunkt, gestrichelt wie ein Poststempel; fertige Bereiche in Gold */
.soon-when{ justify-self:start; margin-top:6px; padding:5px 11px; border:2px dashed var(--ink); border-radius:999px; font:700 12px/1.2 "Karla", sans-serif; letter-spacing:.1em; text-transform:uppercase; transform:rotate(-3deg); }
.is-live .soon-when{ border-style:solid; background:var(--gold); }

/* ---------- Couch-Modus der Karte: Nacht, Bildschirm bleibt an, größere Ziele (js/map.js) ---------- */
.couch-btn{ display:none; background:none; border:0; cursor:pointer; }
.js-map .couch-btn{ display:inline-flex; }
.couch-btn[aria-pressed="true"]{ background:var(--ink); color:var(--shell); }
.couch-note{ flex-basis:100%; margin:0; font-size:14px; color:var(--ink-soft); }
body.couch{ background:#1B0E23; color:#F5EEFB; }
/* Ohne Kopfzeile; die Leiste unten führt weiter, auch am PC */
.couch .pagehead{ display:none; }
.couch .tabbar{ display:grid; }
.couch .unofficial{ padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
.couch .mapview-bar .script-h{ font-size:30px; }
.couch .mapview-progress, .couch .couch-note{ color:#F5EEFB; }
/* Die Namensnennung der Fan-Karte (CC BY) bleibt auch nachts stehen */
.couch .mapview-note{ color:#D9C7E0; }
.couch .mapview-note a{ color:#FFB3CF; }
.couch .couch-btn[aria-pressed="true"]{ background:var(--gold); color:var(--ink); box-shadow:none; }
.couch .list-btn{ background:transparent; color:#F5EEFB; box-shadow:inset 0 0 0 2px #F5EEFB; }
.couch .couch-btn, .couch.js-map .list-btn:not([hidden]){ min-height:52px; }
.couch.js-map .panel-actions{ background:#2A1A33; border-top-color:rgba(245, 238, 251, .2); }  /* schlägt die helle Knopfleiste am Handy */
/* Höhe setzt js/map.js nach Messung; das hier ist nur der Rahmen ohne Messung */
.couch .mapview-map{ height:calc(100vh - 220px); height:calc(100dvh - 220px); border-color:#2A1A33; background:#0B3F47; box-shadow:0 0 0 2px #F5EEFB, 8px 8px 0 #000; }
.couch .leaflet-container .leaflet-bar a{ width:44px; height:44px; line-height:44px; font-size:22px; }
.couch .lf-pin.is-active .lf-dot, .couch .lf-pin:focus-visible .lf-dot{ box-shadow:0 0 0 3px var(--ink), 0 0 0 7px var(--gold); }  /* pink-deep ist auf der dunklen Karte zu schwach */
.couch .leaflet-container{ background:#0B3F47; }
.couch .leaflet-image-layer{ filter:brightness(.62) saturate(1.15); }
.couch .lf-title span{ color:rgba(255, 244, 226, .2); }
.couch .lf-pin .lf-dot{ margin:4px; width:36px; height:36px; }
.couch .leaflet-tooltip.lf-label{ font-size:14px; color:#FFF4E2; text-shadow:0 0 3px #1B0E23, 0 0 3px #1B0E23, 0 0 5px #1B0E23, 0 0 8px #1B0E23; }
.couch .panel-card{ background:#2A1A33; color:#F5EEFB; box-shadow:0 0 0 2px #F5EEFB, 4px 4px 0 var(--pink); }
.couch .panel-card .kind, .couch .panel-credit, .couch .panel-list span{ color:#D9C7E0; }
.couch .panel-card a:not(.btn-line){ color:#FFB3CF; }
.couch .panel-card .stamp-status{ background:#F5EEFB; }
.couch .panel-card .btn{ min-height:52px; background:var(--gold); color:var(--ink); box-shadow:4px 4px 0 var(--pink); }
.couch .panel-card .btn-line{ min-height:52px; background:transparent; color:#F5EEFB; box-shadow:inset 0 0 0 2px #F5EEFB; }
.couch .panel-close, .couch.js-map .panel-close{ background:#F5EEFB; color:var(--ink); min-height:48px; }

/* ---------- Suche (29.10.2026): Knopf in der Kopfzeile, Formular, Verzeichnis mit Treffern ---------- */
.pagehead-search{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px 0 12px; border-radius:999px; background:var(--white); color:var(--ink); box-shadow:0 0 0 2px var(--ink); font:700 14px/1 "Karla", sans-serif; text-decoration:none; }
.pagehead-search svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.pagehead-search:hover, .pagehead-search[aria-current]{ background:var(--ink); color:var(--gold); }
.search-form{ max-width:640px; margin:0 0 18px; }
.search-form[hidden], .search-lead[hidden], .search-group[hidden], .search-item[hidden], .search-empty[hidden]{ display:none; }
.search-label{ display:block; margin:0 0 8px; font:700 15px/1.3 "Karla", sans-serif; }
.search-row{ display:flex; gap:10px; }
.search-input{ flex:1; min-width:0; min-height:48px; padding:10px 14px; border:2px solid var(--ink); border-radius:4px; background:var(--white); color:var(--ink); font:400 17px/1.2 "Karla", sans-serif; }
.search-input::placeholder{ color:#6B5470; opacity:1; }
.search-input:focus-visible{ outline:3px solid var(--pink-deep); outline-offset:2px; }
.search-btn{ flex:none; min-height:48px; }
.search-count{ min-height:1.4em; margin:0 0 8px; font:700 15px/1.4 "Karla", sans-serif; color:var(--ink-soft); }
.search-group{ margin:0 0 26px; }
.search-h{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font:400 22px/1.1 "Bowlby One", sans-serif; }
.search-n{ padding:4px 9px; border-radius:999px; background:var(--white); box-shadow:0 0 0 2px var(--ink); font:700 13px/1 "Karla", sans-serif; }
.search-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:12px; margin:0; padding:0; list-style:none; }
/* Die ganze Trefferkarte ist der Link, so sitzt auch der Fokusrahmen um die Karte */
.search-link{ display:grid; gap:4px; align-content:start; height:100%; padding:12px 14px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink); color:var(--ink); text-decoration:none; }
.search-t{ font:700 17px/1.25 "Karla", sans-serif; }
.search-link:hover .search-t{ text-decoration:underline; text-decoration-thickness:2px; }
.search-snip{ color:var(--ink-soft); font-size:15px; line-height:1.45; }
.search-empty{ max-width:62ch; margin:0 0 24px; padding:16px 18px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 4px 4px 0 var(--pink); }
.search-empty p{ margin:0 0 6px; }
.more-search{ margin:4px 0 22px; }

/* ---------- App aufs Handy (29.10.2026) ---------- */
.app-card{ max-width:640px; margin:0 0 26px; padding:16px 18px 18px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink), 6px 6px 0 var(--sea); }
.app-card[hidden], .app-card [hidden]{ display:none; }
.app-h{ margin:0 0 6px; font:400 20px/1.15 "Bowlby One", sans-serif; }
.app-card p{ margin:0 0 12px; color:var(--ink-soft); }
.app-card .app-ios{ margin:0; color:var(--ink); }

/* ---------- Impressum, Datenschutz, Offline-Seite (29.10.2026) ---------- */
.legal-text{ max-width:72ch; }
.legal-text h2, .legal-text h3{ margin:26px 0 8px; font:400 20px/1.2 "Bowlby One", sans-serif; }
.legal-wait{ padding:14px 16px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink); color:var(--ink); }
.device{ max-width:72ch; margin:30px 0 8px; }
.device-h{ margin:0 0 8px; font:400 22px/1.15 "Bowlby One", sans-serif; }
.device-list{ display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:8px 18px; margin:14px 0 16px; padding:14px 16px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink); }
.device-list dt{ font-weight:700; }
.device-list dd{ margin:0; color:var(--ink-soft); }
.device-clear[hidden]{ display:none; }
button.btn-line{ border:0; background:transparent; cursor:pointer; }
button.btn-line:disabled{ opacity:.55; cursor:default; }
.device-done{ min-height:1.4em; margin:10px 0 0; font-weight:700; color:var(--st-confirmed); }
.offline-list{ display:grid; gap:10px; max-width:560px; margin:0 0 18px; padding:0; list-style:none; }
.offline-list a{ display:flex; align-items:center; min-height:48px; padding:10px 14px; background:var(--white); border-radius:4px; box-shadow:0 0 0 2px var(--ink); color:var(--ink); font-weight:700; text-decoration:none; }
.offline-list a:hover{ text-decoration:underline; text-decoration-thickness:2px; }
.footcard-links{ display:flex; flex-wrap:wrap; gap:2px 18px; }
.footcard-msg .footcard-links a{ display:inline-block; padding:6px 0; color:var(--pink-deep); font-weight:700; }

/* ---------- Umbrüche ---------- */
@media (max-width:1000px){ .photo-row, .ready, .ready-six, .soon-four{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* Startseite am Handy: die vier Karten zweispaltig, nur Foto, Titel und Stempel (die ganze Liste steht auf /coming-soon/) */
@media (max-width:560px){
  .soon-four{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 12px; }
  .soon-four .soon-d{ display:none; }
  .soon-four .soon-t{ font-size:17px; }
  .soon-four .soon-when{ padding:4px 8px; font-size:10px; letter-spacing:.06em; }
}
@media (max-width:1180px) and (min-width:821px){ .pagehead .topnav{ gap:4px 14px; } }
@media (max-width:820px){
  .pair, .tags, .place, .ride, .daily, .reel, .record, .tags-two{ grid-template-columns:minmax(0, 1fr); }
  .record-art{ max-width:240px; }
  .tags-photo{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .daily-front{ border-right:0; border-bottom:2px solid rgba(42, 16, 51, .16); }
  .daily-front img{ min-height:0; aspect-ratio:16 / 9; }
  .topnav{ display:none; }
  .postmark{ position:relative; right:auto; top:auto; margin:14px auto 0; width:104px; }
  .entry{ grid-template-columns:minmax(0, 1fr) 112px; }
  .mapview-stage{ grid-template-columns:minmax(0, 1fr); }
  .mapview-map{ height:62vh; height:62dvh; min-height:340px; }
  /* Mit JavaScript wird die Postkarte am Handy zum Blatt, das von unten kommt */
  .js-map .mapview-panel{ position:fixed; left:0; right:0; bottom:calc(64px + env(safe-area-inset-bottom, 0px)); z-index:15; padding:0 12px;
    transform:translateY(110%); transition:transform .32s cubic-bezier(.3, .7, .2, 1); }
  .js-map .mapview-panel.is-open{ transform:none; }
  .js-map .mapview-panel .panel-card{ max-height:52vh; overflow:auto; border-radius:12px 12px 0 0; }
  .js-map .panel-card img{ aspect-ratio:16 / 7; }
  /* Die Knöpfe bleiben am unteren Rand des Blatts sichtbar, auch wenn Bild und Text länger sind */
  .js-map .panel-actions{ position:sticky; bottom:0; z-index:1; margin:12px -18px -18px; padding:12px 18px 18px; background:var(--white); border-top:2px solid rgba(42, 16, 51, .12); }
  .js-map .list-btn:not([hidden]){ display:inline-flex; min-height:40px; padding:8px 14px; }
  .js-map .panel-close{ display:inline-flex; position:absolute; right:12px; top:12px; z-index:2; min-height:40px; padding:8px 12px; border:0; border-radius:4px; background:var(--ink); color:var(--shell); font:700 14px/1 "Karla", sans-serif; cursor:pointer; }
}
@media (max-width:420px){
  .daily-back{ grid-template-columns:minmax(0, 1fr); }
  .daily-addr{ grid-auto-flow:column; justify-content:start; align-items:center; padding-top:0; }
  .daily-addr .ln{ display:none; }
  .entry{ grid-template-columns:minmax(0, 1fr); }
  .entry-msg{ border-right:0; border-bottom:2px solid rgba(42, 16, 51, .16); }
  .entry-addr{ grid-auto-flow:column; justify-content:start; align-items:center; }
  .entry-addr .ln{ display:none; }
}
@media (max-width:560px){
  .photo-row, .ready, .ready-six, .parcel-list, .tags-photo{ grid-template-columns:minmax(0, 1fr); }
  .ticket{ grid-template-columns:minmax(0, 1fr); }
  .ticket-stub{ border-left:0; border-top:2px dashed var(--ink); border-radius:0 0 6px 6px; }
  .check{ grid-template-columns:28px minmax(0, 1fr); }
  .check-meta{ grid-column:2; grid-auto-flow:column; justify-content:start; align-items:center; gap:14px; }
  .preset{ grid-template-columns:84px minmax(0, 1fr); gap:14px; }
  .count-stamp{ width:148px; }
  .count-stamp b{ font-size:40px; }
  .vc-play{ top:38%; width:64px; height:64px; }
  .vc-play svg{ width:30px; height:30px; }
  /* Pinnwand am Handy seitlich wischen statt winzig verkleinern */
  .board{ overflow-x:auto; }
  .board svg{ min-width:520px; }
  .board-hint{ display:block; }
  .photo-row .postcard:nth-child(n){ transform:none; }
  .footcard{ grid-template-columns:minmax(0, 1fr); }
  .footcard-msg{ border-right:0; border-bottom:2px solid rgba(42, 16, 51, .16); }
  .footcard-addr{ grid-auto-flow:column; justify-content:space-between; align-items:center; }
  .footcard-addr .ln{ display:none; }
  /* Am Handy nur die Lupe, der Name bleibt für Screenreader */
  .pagehead-search{ width:44px; padding:0; justify-content:center; }
  .pagehead-search-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .device-list{ grid-template-columns:minmax(0, 1fr); gap:2px; }
  .device-list dd{ margin-bottom:8px; }
  /* Regionstabelle am Handy: mit eigener Uhrzeit reicht diese, UTC bleibt nur ohne JavaScript */
  .regions-table th, .regions-table td{ padding:9px 10px; }
  .regions-table.has-local .regions-utc{ display:none; }
}
@media (min-width:821px){
  .tabbar{ display:none; }
  .unofficial{ padding-bottom:32px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}