/*
 * Impressum, Datenschutz und Newsletter-Seite. Dieselbe Bildsprache wie die
 * Detailseite: Nachthimmel mit Sternen (himmel.js), Farbnebel, eine Umlaufbahn mit
 * Coins um das Logo, das Inhaltsverzeichnis als Sternbild wie im Fahrplan.
 * Kein Build-Schritt: was hier steht, wird ausgeliefert.
 */
:root {
  --night: #070e1a;
  --night-2: #0d1829;
  --linie: rgb(255 255 255 / .08);
  --teal: #4db8b0;
  --teal-hell: #7fd3c9;
  --coral: #ef7d58;
  --gold: #d4a84b;
  --gold-hell: #f0d48a;
  --moon: #f4efe4;
  --mist: #9aa9bf;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Nunito", ui-rounded, system-ui, sans-serif;
  --kopf: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--night); color-scheme: dark; -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf) + env(safe-area-inset-top) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--night); color: var(--moon);
  font: 400 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal-hell); text-underline-offset: 3px; }
a:hover { color: var(--moon); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.15; text-wrap: balance; }
p, ul, ol, address { margin: 0; }
address { font-style: normal; }
code { font-size: .9em; color: var(--gold-hell); }
img { display: block; max-width: 100%; height: auto; }

/* Farbstreifen für Safaris untere Leiste, siehe Hausstandard ios-leisten.md */
.leiste-unten { position: fixed; left: 0; right: 0; bottom: 0; height: 12px; z-index: -20; pointer-events: none; background: var(--night); }

.rahmen { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.rahmen.schmal { width: min(46rem, calc(100% - 32px)); }

/* ---------- Himmel ---------- */
/* Fest, aber nicht an den Kanten: Safari färbt seine Leisten nach festen Elementen dort,
   auch nach durchsichtigen (Hausstandard ios-leisten.md). Deshalb unter der Kopfzeile bis kurz vor unten. */
.himmel {
  position: fixed; left: 0; right: 0; top: calc(var(--kopf) + env(safe-area-inset-top)); bottom: 16px;
  width: 100%; height: calc(100% - var(--kopf) - env(safe-area-inset-top) - 16px); z-index: 0; pointer-events: none;
}
.weltraum { position: absolute; inset: 0 0 auto; height: 1400px; overflow: hidden; pointer-events: none; z-index: 0; }
.nebel {
  position: absolute; left: var(--x); top: var(--y); width: var(--g); height: var(--g); border-radius: 50%;
  background: radial-gradient(closest-side, var(--f), transparent);
  animation: treiben 24s ease-in-out infinite alternate;
}
.nebel-teal { --f: rgb(77 184 176 / .17); }
.nebel-koralle { --f: rgb(239 125 88 / .12); }
.nebel-gold { --f: rgb(212 168 75 / .11); }
@keyframes treiben { to { transform: translate(60px, 40px) scale(1.12); } }

/* ---------- Kopfzeile wie auf der Detailseite ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--night); padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--linie); }
.kopf-innen { height: var(--kopf); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marke { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.marke img { width: 64px; }
.wortmarke {
  font-family: var(--serif); font-weight: 700; letter-spacing: .2em; font-size: 1.08rem;
  background: linear-gradient(135deg, var(--teal) 0%, #fff 50%, var(--coral) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kopf-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--mist); text-decoration: none; }
.kopf-link:hover { color: var(--moon); }
.kopf-link { white-space: nowrap; }
@media (max-width: 479px) { .kopf .wortmarke { display: none; } }

main { position: relative; z-index: 1; flex: 1; overflow-x: clip; }

/* ---------- Einstieg mit Umlaufbahn ---------- */
.einstieg { padding: clamp(28px, 5vw, 56px) 0 clamp(36px, 5vw, 56px); text-align: center; }
.einstieg h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); letter-spacing: -.015em; hyphens: auto; -webkit-hyphens: auto; }
.einstieg .lead { max-width: 34rem; margin: 14px auto 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem); color: rgb(244 239 228 / .78); }
.einstieg .stand { margin-top: 10px; font-size: .9rem; color: var(--mist); }
.einstieg .nur-deutsch { margin-top: 6px; font-size: .88rem; color: var(--mist); }

/*
 * Umlaufbahn: die Ebene ist flachgedrückt (scaleY), jede Münze dreht mit ihrer Bahn
 * und gleichzeitig zurück, und streckt sich wieder auf volle Höhe. So laufen die Coins
 * auf einer Ellipse und bleiben rund und aufrecht.
 */
.umlauf { position: relative; width: min(460px, calc(100% - 56px)); aspect-ratio: 460 / 230; margin: 26px auto 34px; }
.umlauf-ebene { position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 1; transform: translateY(-50%) scaleY(.46); }
.bahn { position: absolute; border-radius: 50%; border: 1.5px dashed rgb(255 255 255 / .17); animation: kreisen var(--dauer) linear infinite; }
.bahn.aussen { inset: 0; --dauer: 64s; }
.bahn.innen { inset: 17%; --dauer: 44s; animation-direction: reverse; border-color: rgb(240 212 138 / .24); }
.arm { position: absolute; inset: 0; transform: rotate(var(--start)); }
.arm .muenze {
  position: absolute; left: 50%; top: 0; width: var(--m, 52px);
  animation: gegen var(--dauer) linear infinite;
}
.bahn.innen .arm .muenze { animation-direction: reverse; }
@keyframes kreisen { to { transform: rotate(360deg); } }
@keyframes gegen {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--start))) scaleY(2.174); }
  to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--start) - 360deg)) scaleY(2.174); }
}
.umlauf-logo {
  position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); z-index: 2;
  filter: drop-shadow(0 0 30px rgb(77 184 176 / .55)); animation: glimmen 4s ease-in-out infinite;
}
@keyframes glimmen { 50% { filter: drop-shadow(0 0 46px rgb(77 184 176 / .85)); } }
.umlauf .funkel { color: var(--gold-hell); }

/* Münze wie in der Eltern-App: Figuren mit türkisem, Welten mit goldenem Ring */
.muenze {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(145deg, #8adbd1, #3a9a92 55%, #5cc2b9);
  box-shadow: 0 0 22px -4px rgb(77 184 176 / .7);
}
.muenze.welt { background: linear-gradient(145deg, #f3d488, #b08835 55%, #e9c46a); box-shadow: 0 0 22px -4px rgb(212 168 75 / .7); }
.muenze span {
  display: grid; place-items: center; width: 87%; height: 87%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 28%, #fff, #eef5f2 55%, #d9e7e3); box-shadow: inset 0 2px 6px rgb(0 0 0 / .18);
}
.muenze img { width: 80%; height: 80%; object-fit: contain; }

.funkel {
  position: absolute; width: 14px; height: 14px; background: currentColor; pointer-events: none;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: funkeln 3.4s ease-in-out infinite;
}
@keyframes funkeln { 0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }

/* ---------- Inhalt ---------- */
.raster { display: grid; gap: 28px; padding-bottom: 88px; }
@media (min-width: 980px) { .raster { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; } }

.karte {
  position: relative; padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--linie); border-radius: 26px;
  background: linear-gradient(160deg, rgb(13 24 41 / .9), rgb(7 14 26 / .88));
  box-shadow: 0 0 0 1px rgb(77 184 176 / .05) inset, 0 30px 70px -40px rgb(0 0 0 / .9);
}
.inhalt { display: grid; gap: 18px; min-width: 0; }
.inhalt section { scroll-margin-top: calc(var(--kopf) + 24px); }
.inhalt h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; min-width: 0; }
.inhalt h2::before {
  content: ""; flex: none; width: 15px; height: 15px; transform: translateY(1px);
  background: var(--gold-hell);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.inhalt h3 { margin-top: 22px; font: 800 1.02rem/1.4 var(--sans); color: var(--moon); }
.inhalt p, .inhalt ul, .inhalt address { margin-top: 12px; color: rgb(244 239 228 / .84); }
.inhalt ul { padding-left: 1.2em; }
.inhalt li + li { margin-top: 6px; }
.inhalt li::marker { color: var(--teal); }
.inhalt strong { color: var(--moon); }

.kurz {
  border-color: rgb(77 184 176 / .28);
  background: radial-gradient(120% 140% at 0% 0%, rgb(77 184 176 / .16), transparent 60%), linear-gradient(160deg, rgb(13 24 41 / .92), rgb(7 14 26 / .9));
}
.kurz p { margin: 0; font-size: 1.08rem; color: var(--moon); }

/* Anschrift im Impressum wie ein Steckbrief */
.steckbrief { display: grid; gap: 18px; }
@media (min-width: 640px) { .steckbrief { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; } }
.steckbrief .muenze { width: 88px; }
.steckbrief address { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--moon); }
.steckbrief .firma { font: 700 1.3rem/1.3 var(--serif); }

/* ---------- Sternbild als Inhaltsverzeichnis ---------- */
.sternbild-nav { padding: 20px 18px 18px; }
@media (min-width: 980px) { .sternbild-nav { position: sticky; top: calc(var(--kopf) + 24px); } }
.sternbild-nav p { margin: 0 0 10px 4px; font: 800 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.sternbild-nav ol { position: relative; margin: 0; padding: 0; list-style: none; }
.sternbild-nav ol::before {
  content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 1.5px;
  background: linear-gradient(rgb(240 212 138 / .5), rgb(77 184 176 / .35));
}
.sternbild-nav a {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 8px 4px 0;
  color: rgb(244 239 228 / .72); text-decoration: none; font-size: .95rem; line-height: 1.3;
}
.sternbild-nav a i { flex: none; position: relative; width: 28px; height: 28px; display: grid; place-items: center; }
.sternbild-nav a i::before {
  content: ""; width: 12px; height: 12px; background: rgb(154 169 191 / .7);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  transition: background-color .4s ease, transform .4s ease;
}
.sternbild-nav a i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(closest-side, rgb(240 212 138 / .45), transparent);
}
.sternbild-nav a:hover { color: var(--moon); }
.sternbild-nav a:hover i::before { background: var(--teal-hell); }
.sternbild-nav a.aktiv { color: var(--moon); }
.sternbild-nav a.aktiv i::before { background: var(--gold-hell); transform: scale(1.45); }
.sternbild-nav a.aktiv i::after { opacity: 1; }

/* ---------- Newsletter-Seite ---------- */
.nl-seite { padding-bottom: 96px; }
.nl-seite .umlauf { width: min(520px, calc(100% - 64px)); }
.nl-karte { max-width: 34rem; margin: 6px auto 0; text-align: center; }
.nl-karte h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem); outline: none; }
.nl-karte p { margin-top: 12px; color: rgb(244 239 228 / .84); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; margin-top: 24px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--teal), var(--teal-hell)); color: var(--night);
  font: 800 1.02rem/1 var(--sans); text-decoration: none;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .15) inset, 0 12px 34px -10px rgb(77 184 176 / .75);
  transition: transform .2s ease, box-shadow .2s ease;
}
.knopf:hover { transform: translateY(-1px); color: var(--night); box-shadow: 0 0 0 1px rgb(255 255 255 / .2) inset, 0 16px 40px -10px rgb(77 184 176 / .95); }
.knopf.leise { background: rgb(255 255 255 / .06); color: var(--moon); box-shadow: none; border: 1px solid rgb(255 255 255 / .16); }
.knopf.leise:hover { background: rgb(255 255 255 / .1); color: var(--moon); }
.knopf[aria-busy="true"] { cursor: progress; filter: saturate(.6); transform: none; }
.fehler { margin-top: 16px; color: #f4a183; font-weight: 700; }
.fehler:empty { display: none; }

/* Gefeiert: nach "Du bist dabei" fliegen Funken aus der Karte */
.funken { position: absolute; left: 50%; top: 38%; width: 0; height: 0; pointer-events: none; z-index: 3; filter: drop-shadow(0 0 6px rgb(240 212 138 / .9)); }
.funken i {
  position: absolute; width: var(--s, 16px); height: var(--s, 16px); background: var(--c, var(--gold-hell));
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: fliegen 1.7s cubic-bezier(.12, .7, .3, 1) forwards;
}
@keyframes fliegen {
  from { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  70% { opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(160deg); opacity: 0; }
}

/* ---------- Fuß wie auf der Detailseite ---------- */
.fuss {
  position: relative; z-index: 1; background: var(--night); border-top: 1px solid var(--linie);
  padding: 48px 0 calc(26px + env(safe-area-inset-bottom)); color: var(--mist);
}
.fuss-raster { display: grid; gap: 26px; }
@media (min-width: 760px) { .fuss-raster { grid-template-columns: 1.4fr 1fr; } }
.fuss .marke img { width: 56px; }
.fuss p { margin-top: 12px; max-width: 24rem; font-size: .95rem; }
.fuss ul { margin: 0; padding: 0; list-style: none; display: grid; font-size: .95rem; }
@media (min-width: 520px) { .fuss ul { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.fuss li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mist); text-decoration: none; }
.fuss li a:hover { color: var(--moon); }
.fuss-unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: .82rem; color: rgb(154 169 191 / .82);
}
.still-knopf { border: 0; background: none; padding: 12px 0; min-height: 44px; font: 700 .82rem/1 var(--sans); color: var(--mist); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.still-knopf:hover { color: var(--moon); }

/* ---------- Ruhige Bewegung ---------- */
html.still :is(.nebel, .funkel, .bahn, .arm .muenze, .umlauf-logo) { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .nebel, .funkel, .bahn, .arm .muenze, .umlauf-logo { animation-play-state: paused !important; }
  .funken { display: none; }
  .sternbild-nav a i::before, .sternbild-nav a i::after { transition: none; }
}