/*
 * web.css — nur die Startseite. Die App bringt ihr eigenes styles.css mit.
 * Farbvariablen absichtlich dieselben Namen und Werte wie dort, damit der
 * Übergang von der Startseite in die App nicht wie ein Sprung wirkt.
 */
:root {
  --bg: #f7f7f5;
  --card-bg: #ffffff;
  --text: #1f2328;
  --text-muted: #6b7280;
  --accent: #2563eb;
  --knew: #10b981;
  --new: #f97316;
  --track: #e5e7eb;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d; --card-bg: #1f2228; --text: #e6e7ea; --text-muted: #9aa0a8;
    --accent: #60a5fa; --knew: #34d399; --new: #fb923c; --track: #353a42;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

/* Ruhiger Farbverlauf im Hintergrund – nichts Aufdringliches, die Seite soll
   nach Lernwerkzeug aussehen und nicht nach Werbelandeseite. */
.hero-wrap {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 15% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(50rem 26rem at 90% 0%, color-mix(in srgb, var(--knew) 12%, transparent), transparent 55%);
}

.topbar {
  max-width: 1080px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand picture { display: flex; }  /* Dunkelmodus: helle Fassung des Zeichens (logo_mark_hell.png), 25.09. */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn {
  border: none; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
  padding: 11px 22px; background: var(--accent); color: #fff;
  transition: transform .12s, box-shadow .12s, opacity .12s;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.btn-ghost {
  background: transparent; color: var(--text); box-shadow: none;
  border: 1.5px solid var(--track); padding: 9px 18px;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.btn-lang { background: none; border: none; color: var(--text-muted); cursor: pointer; font: inherit; padding: 6px; }
.btn-lang:hover { color: var(--accent); }

.hero { max-width: 1080px; margin: 0 auto; padding: 40px 24px 72px; }
.hero h1 {
  font-size: clamp(32px, 5.2vw, 54px); line-height: 1.1; margin: 0 0 18px;
  letter-spacing: -0.02em; max-width: 16ch;
}
.hero p.lead { font-size: clamp(17px, 2vw, 20px); color: var(--text-muted); max-width: 56ch; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.release-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.hero-note { font-size: 13px; color: var(--text-muted); margin-top: 14px; }
.hero-note.hero-probe { color: var(--text); font-weight: 600; margin-top: 16px; }
.hero-note.hero-probe + .hero-note { margin-top: 6px; }

/* Held in zwei Spalten mit gestapelten Lernkarten (2026-09-20). Die Karten
   nehmen die Maße der echten (.card in styles.css: 16 px Radius, weicher
   Schatten, 4er-Raster für Antworten) — kein Screenshot, der beim nächsten
   Redesign veraltet. Gestapelt wie die Toasts der App: die vorderste leicht
   geneigt, dahinter zwei kleinere; alle 4 s rutscht die vorderste hinaus
   (JS in index.html). Feste Höhe, damit Bild-, Ton- und Textkarten denselben
   Umriss haben und der Stapel beim Wechsel nicht springt. */
.hero-2col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero-demo { display: flex; justify-content: center; }
.demo-stack { position: relative; width: min(400px, 100%); height: 430px; margin-top: 30px; }
.demo-card {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
  padding: 18px 18px 14px;
  border: 1px solid color-mix(in srgb, var(--track) 60%, transparent);
  transform-origin: 50% 20%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .5s ease;
}
.demo-card[data-pos="0"] { transform: rotate(-2deg); z-index: 4; }
.demo-card[data-pos="1"] { transform: translateY(-16px) scale(.94) rotate(1.5deg); opacity: .92; z-index: 3; }
.demo-card[data-pos="2"] { transform: translateY(-32px) scale(.88) rotate(-1deg); opacity: .6; z-index: 2; }
.demo-card[data-pos="3"] { transform: translateY(-44px) scale(.82); opacity: 0; z-index: 1; }
.demo-card.raus { transform: translateX(120%) rotate(8deg); opacity: 0; z-index: 5; transition-duration: .5s; }
.demo-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.demo-streak { font-weight: 800; color: var(--new); letter-spacing: 0; font-size: 14px; text-transform: none; }
.demo-badge { display: inline-block; align-self: flex-start; margin: 12px 0 8px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.demo-frage { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; flex: 1 1 auto; display: flex; align-items: center; }
/* Medienblock der Bild-/Ton-Karten: nimmt den Platz, den die Textkarten der
   Frage lassen — so bleibt der Umriss gleich. Kein echtes Foto (die liegen bei
   Wikimedia und müssten nachgeladen werden), sondern ein Farbfeld mit Motiv. */
.demo-media { height: 96px; border-radius: 12px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
/* Echte Fotos (Adrian, 20.09.), als 760×200-WebP im Repo (web/img/) — bei
   Wikimedia geholt, zugeschnitten und stark verkleinert (18 bzw. 30 KB), damit
   die Startseite nichts nachlädt. Nachweise stehen im Fuß (#bildnachweis). */
.demo-bild { overflow: hidden; background: var(--track); }
.demo-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-ton { gap: 12px; padding: 0 16px; background: color-mix(in srgb, var(--accent) 10%, var(--card-bg)); }
.demo-play { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; padding-left: 3px; flex: 0 0 auto; }
.demo-welle { display: flex; align-items: center; gap: 4px; height: 40px; flex: 1 1 auto; }
.demo-welle i { flex: 1 1 auto; height: 30%; border-radius: 2px; background: var(--accent); opacity: .75; animation: demoWelle 1.1s ease-in-out infinite; }
.demo-welle i:nth-child(2n) { animation-delay: .15s; } .demo-welle i:nth-child(3n) { animation-delay: .3s; } .demo-welle i:nth-child(5n) { animation-delay: .45s; }
@keyframes demoWelle { 0%, 100% { height: 25%; } 50% { height: 90%; } }
.demo-media + .demo-frage { flex: 0 0 auto; font-size: 16px; }
.demo-antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.demo-antwort {
  position: relative; padding: 13px 10px 13px 16px; border-radius: 12px; text-align: center; font-weight: 600; font-size: 14px;
  background: color-mix(in srgb, var(--text) 5%, var(--card-bg)); border: 1.5px solid transparent;
}
.demo-antwort i { position: absolute; top: 4px; left: 8px; font-style: normal; font-size: 10px; color: var(--text-muted); }
.demo-antwort { transition: background .25s ease, border-color .25s ease, transform .12s ease; }
.demo-antwort.demo-druck { transform: scale(.96); background: color-mix(in srgb, var(--text) 10%, var(--card-bg)); }
.demo-antwort.demo-richtig { border-color: var(--knew); background: color-mix(in srgb, var(--knew) 14%, var(--card-bg)); }
.demo-fuss { margin-top: auto; }
.demo-zeile { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.demo-zeile b { color: var(--text); }
.demo-balken { height: 6px; border-radius: 999px; background: var(--track); margin-top: 4px; overflow: hidden; }
.demo-balken span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.demo-balken.demo-gruen span { background: var(--knew); }
@media (max-width: 860px) {
  .hero-2col { grid-template-columns: 1fr; gap: 20px; }
  .demo-stack { width: min(360px, 100%); height: 410px; }
  .hero-demo { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-card { transition: none; }
  .demo-welle i { animation: none; height: 55%; }
}

.features { max-width: 1080px; margin: 0 auto; padding: 8px 24px 72px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.feature {
  background: var(--card-bg); border: 1px solid var(--track); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.feature .ico { font-size: 26px; line-height: 1; display: block; margin-bottom: 10px; }
.feature h3 { margin: 0 0 6px; font-size: 17px; }
.feature p { margin: 0; color: var(--text-muted); font-size: 14.5px; }

.stats { display: flex; gap: 28px; flex-wrap: wrap; margin: 0 0 34px; }
.stat b { display: block; font-size: 26px; line-height: 1.1; }
.stat span { color: var(--text-muted); font-size: 13.5px; }

footer { max-width: 1080px; margin: 0 auto; padding: 28px 24px 48px; color: var(--text-muted); font-size: 13.5px; }
footer .sep { margin: 0 8px; opacity: .5; }
footer .bildnachweis { font-size: 12px; margin: 0 0 14px; opacity: .8; }
footer .bildnachweis a { color: inherit; }

/* ---------- Login-Overlay ---------- */
/* Overlay scrollt, wenn die Karte höher ist als das Fenster (2026-09-05, Adrian: auf niedrigen
   Bildschirmen war „Konto erstellen" unerreichbar). Zentriert wird über margin:auto an der
   Karte, NICHT über align-items:center — das würde bei Überlänge oben und unten abschneiden;
   auto-Ränder werden bei Überlauf zu 0 und die Karte bleibt von oben her scrollbar. */
.ov { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 20px; z-index: 50; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ov.on { display: flex; }
.ov-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); } /* fixed, nicht absolute: seit das Overlay scrollt (v10), deckte absolute nur die erste Bildschirmhöhe ab (Adrian, 05.09.) */
.ov-card {
  position: relative; width: 100%; max-width: 420px; background: var(--card-bg);
  border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  padding: 26px 26px 22px; animation: ov-in .18s ease-out;
  margin: auto;                         /* zentriert, im Scrollfall oben anfangen (s. .ov) */
}
@keyframes ov-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ov-x {
  position: absolute; top: 12px; right: 14px; border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text-muted); padding: 4px 8px; border-radius: 8px;
}
.ov-x:hover { background: var(--track); color: var(--text); }
.ov-card h2 { margin: 0 0 4px; font-size: 21px; }
.ov-card .sub { color: var(--text-muted); font-size: 14px; margin: 0 0 18px; }

.tabs { display: flex; gap: 6px; background: var(--track); padding: 4px; border-radius: 999px; margin-bottom: 18px; }
.tabs button {
  flex: 1; border: none; background: none; cursor: pointer; font: inherit; font-weight: 700;
  padding: 8px 10px; border-radius: 999px; color: var(--text-muted);
}
.tabs button.on { background: var(--card-bg); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.field { margin-bottom: 13px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.hint-link { text-align: right; margin-top: 6px; }
.hint-link a { color: var(--text-muted); font-size: 13px; }
.hint-link a:hover { color: var(--accent); }
.field input, .field select {
  width: 100%; font: inherit; padding: 11px 13px; border-radius: 10px;
  border: 1.5px solid var(--track); background: var(--bg); color: var(--text);
}
.field input:focus { outline: none; border-color: var(--accent); }
.field .hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.ov-card .btn { width: 100%; margin-top: 6px; }
/* Google-Login (2026-09-02) */
.oder { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: var(--text-muted); font-size: 13px; }
.oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--track); }
.btn-google { margin-top: 0; }
/* hidden-Attribut muss gegen display:flex/inline-block gewinnen (2026-09-02: „oder" blieb im Passwort-vergessen-Schritt sichtbar) */
.oder[hidden], .btn-google[hidden], .btn-apple[hidden], .hint-link[hidden] { display: none; }
/* Apple-Login (2026-09-05): Knopf nach Apples HIG — schwarz, weißes Logo, gleiche Höhe wie Google */
.btn-apple { margin-top: 8px; background: #000; color: #fff; border: 1.5px solid #000; box-shadow: none; padding: 9px 18px; }
.btn-apple:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; box-shadow: none; }
.apple-logo { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; margin-right: .25em; }
.zurueck-row { text-align: center; margin-top: 12px; }
.zurueck-row a { color: var(--text-muted); font-size: 13px; }
.zurueck-row a:hover { color: var(--accent); }
.g-logo { display: inline-block; font-weight: 800; font-family: Arial, sans-serif; color: #4285f4; margin-right: .25em; }

.msg { border-radius: 10px; padding: 10px 13px; font-size: 14px; margin: 4px 0 12px; display: none; }
.msg.on { display: block; }
.msg.err { background: color-mix(in srgb, #f43f5e 14%, transparent); color: #b0233c; }
.msg.ok { background: color-mix(in srgb, var(--knew) 16%, transparent); color: #0f7a55; }
@media (prefers-color-scheme: dark) {
  .msg.err { color: #ff9db0; }
  .msg.ok { color: #6ee7b7; }
}

.busy { display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .ov-card { animation: none; }
  .busy { animation-duration: 2s; }
}

/* ---------------------------------------------------------------------------
   Rechtstexte (Impressum, Datenschutz)
   Bewusst schmal gesetzt: 68 Zeichen Zeilenlaenge liest sich auch bei langen
   Absaetzen noch, und diese Seiten bestehen fast nur aus Absaetzen.
   Farben und Radien kommen aus denselben Variablen wie die Startseite, damit
   der Sprung vom Footer hierher nicht wie eine fremde Seite wirkt.
--------------------------------------------------------------------------- */
.legal-wrap { max-width: 780px; margin: 0 auto; padding: 8px 24px 72px; }
.legal h1 { font-size: 30px; line-height: 1.25; margin: 24px 0 6px; }
.legal .stand { color: var(--text-muted); font-size: 14px; margin: 0 0 28px; }
.legal h2 {
  font-size: 19px; margin: 34px 0 10px; padding-top: 18px;
  border-top: 1px solid var(--track);
}
.legal h3 { font-size: 16px; margin: 22px 0 6px; }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 20px; margin: 10px 0; }
.legal li { margin: 5px 0; }
.legal .dl { margin: 12px 0; }
.legal .dl div { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--track); }
.legal .dl b { flex: 0 0 190px; font-weight: 600; color: var(--text-muted); }
@media (max-width: 560px) {
  .legal .dl div { display: block; }
  .legal .dl b { display: block; flex: none; }
}
/* Hinweiskasten – ruhig, kein Warndreieck-Ton. Wird fuer Dinge benutzt, die
   der Leser wirklich mitnehmen soll (Loeschung des Kontos, Beschwerderecht). */
.legal .box {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 14px 18px; margin: 18px 0; box-shadow: var(--shadow);
}
.legal .box p:first-child { margin-top: 0; }
.legal .box p:last-child { margin-bottom: 0; }
.legal table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--track); vertical-align: top; }
.legal th { color: var(--text-muted); font-weight: 600; }
.back { display: inline-block; margin: 22px 0 0; font-size: 15px; }
.legal-links { font-size: 13px; margin: 28px 0 0; color: var(--text-muted); }
.legal-links a { color: var(--text-muted); }
.legal-links a:hover { color: var(--accent); }
/* Die Marke oben links ist auf den Rechtsseiten ein Link zur Startseite. Ohne
   diese Regel greift `a { color: var(--accent) }` und faerbt den Schriftzug
   blau — auf der Startseite selbst faellt das nicht auf, weil er dort kein
   Link ist. */
a.brand { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Kontaktformular
--------------------------------------------------------------------------- */
.form { margin: 20px 0 8px; }
.form label { display: block; font-weight: 600; margin: 16px 0 6px; }
.form .opt { font-weight: 400; color: var(--text-muted); }
.form input[type="text"], .form input[type="email"], .form select, .form textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--track);
  border-radius: 12px; padding: 11px 13px;
}
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.form .hint { color: var(--text-muted); font-size: 14px; margin: 6px 0 0; }
.form button { margin-top: 22px; }

/* Der Honigtopf muss fuer Menschen unsichtbar sein, ohne `display:none` –
   manche Bots werten das aus und lassen das Feld dann leer. Deshalb aus dem
   Bild geschoben und aus der Tabreihenfolge genommen. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hinweis {
  border-radius: var(--radius); padding: 14px 18px; margin: 20px 0 0;
  border: 1px solid var(--track); background: var(--card-bg);
}
.hinweis.gut      { border-color: var(--knew); }
.hinweis.schlecht { border-color: var(--new); }

/* ---------------------------------------------------------------------------
   Sprachnavigation: ein Knopf je Sprache, nebeneinander.
   Loest den frueheren Umschaltknopf ab. Bei drei Sprachen musste man mit dem
   sonst durchschalten — von Deutsch nach Spanisch ging es nur ueber Englisch,
   und man sah dem Knopf nicht an, welche Sprachen es ueberhaupt gibt.
--------------------------------------------------------------------------- */
.langnav {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--track); border-radius: 999px; background: var(--card-bg);
}
.langnav button {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted); padding: 6px 11px; border-radius: 999px;
  transition: background .12s, color .12s;
}
.langnav button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.langnav button.an { background: var(--accent); color: #fff; }
.langnav button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Runde „aus dem Kopf" im Karten-Stapel (25.09.): nimmt exakt den Platz der
   2×2-Auswahl ein (2 × 47 px + 8 px Abstand), damit der Stapel nicht springt. */
.demo-selbst { height: 102px; margin-bottom: 12px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; }
.demo-selbst[hidden], .demo-selbst [hidden], .demo-antworten[hidden] { display: none !important; }
.demo-zeigen, .demo-wusste, .demo-neu { display: flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 700; font-size: 14px; padding: 13px 10px; color: #fff; transition: transform .12s ease, filter .15s ease, box-shadow .2s ease; }
.demo-zeigen { background: var(--accent); }
.demo-loesung { text-align: center; font-weight: 800; font-size: 17px; color: var(--accent); }
.demo-bewerten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-wusste { background: var(--knew); }
.demo-neu { background: var(--new); }
.demo-zeigen.demo-druck, .demo-wusste.demo-druck, .demo-neu.demo-druck { transform: scale(.96); filter: brightness(.92); }
.demo-wusste.demo-gedrueckt { box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--knew); }
.demo-neu.demo-gedrueckt { box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--new); }
/* Community-Links im Fuß (25.09.2026). */
footer .social-links { margin: 0 0 12px; }
footer .social-links a { color: inherit; text-decoration: none; }
footer .social-links a:hover { color: var(--accent); }
footer .social-links a { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
footer .social-links .social-ico { width: 16px; height: 16px; display: block; }
@media (prefers-color-scheme: dark) { footer .social-links .social-ico[src$="tiktok.svg"] { filter: invert(1); } }

/* Beim Start benachrichtigen (2026-09-25) — schmale Zeile unter dem Einladungs-
   Hinweis, gleiche Farbwelt wie der Release-Hinweis oben. */
.release-form { margin: 22px 0 0; max-width: 460px; }
.release-titel { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.release-zeile { display: flex; gap: 8px; }
.release-zeile input[type="email"] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; padding: 10px 14px;
  border-radius: 999px; border: 1px solid var(--track, #d8dbe0); background: var(--card-bg); color: var(--text);
}
.release-zeile input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.release-zeile .btn { padding: 10px 18px; white-space: nowrap; }
.release-ok { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; cursor: pointer; }
.release-ok input { margin: 2px 0 0; accent-color: var(--accent); }
.release-honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.release-status { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; padding: 8px 12px; border-radius: 10px; }
.release-status.gut { color: color-mix(in srgb, #10b981 70%, var(--text)); background: color-mix(in srgb, #10b981 12%, transparent); }
.release-status.schlecht { color: color-mix(in srgb, #ef4444 75%, var(--text)); background: color-mix(in srgb, #ef4444 10%, transparent); }
@media (max-width: 480px) { .release-zeile { flex-direction: column; } .release-zeile .btn { width: 100%; } }