/* BlueOcean Orbit — Gestaltungsmerkmale.
   Uebernommen aus blueoceanprivacy.io/src/styles/global.css, damit die Flotte aus
   einem Guss wirkt. Immer ueber die Variablen arbeiten, nie Farbwerte eintippen.
   Gold traegt die Handlung, Cyan bleibt Zweitfarbe fuer Links und Haken. */

:root {
  --bo-primary-800: #001E5C;
  --bo-gold:        #D4AF37;
  --bo-gold-light:  #F5D67B;
  --bo-cyan:        #22D3EE;
  --bo-indigo:      #6366F1;
  --bo-grad:        linear-gradient(135deg, #F5D67B, #D4AF37);
  --bo-grad-cyan:   linear-gradient(135deg, #22D3EE, #6366F1);

  --bo-ink:        #E6EDF7;
  --bo-slate-500:  #B8C4D8;
  --bo-slate-700:  #D2DBE8;

  --bo-paper:       #070B14;
  --bo-surface-alt: #0E1626;
  --bo-card:        #0E1626;

  --bo-border:        rgba(255,255,255,0.09);
  --bo-border-strong: rgba(255,255,255,0.14);

  /* Ausgang einer Handlung. Gold traegt die Handlung selbst, diese beiden
     sagen, was daraus geworden ist — und zwar nur das. */
  --bo-ok:   #6EE7B7;
  --bo-warn: #F5A3A3;

  /* Signalrot. Nicht "Fehler", sondern "hier entlang": Gold traegt jede
     Handlung, dieses Rot traegt genau eine davon — die Warteliste. Solange es
     nur dort steht, bleibt es ein Zeiger; auf zwei Knoepfen waere es keiner
     mehr. Beide Enden des Verlaufs sind dunkel genug, dass weisse Schrift
     darauf ueber 4.5:1 liegt (gemessen: 5.6 hell, 8.0 dunkel). Ein helleres
     Rot sah besser aus und fiel mit 3.9 durch — deshalb dieses. */
  --bo-rot:      #C62828;
  --bo-rot-dark: #9E1B1B;
  --bo-grad-rot: linear-gradient(135deg, #C62828, #9E1B1B);
  --bo-glow-rot: 0 10px 34px rgba(198,40,40,.34);

  --bo-s-1: 4px;  --bo-s-2: 8px;  --bo-s-3: 12px; --bo-s-4: 16px;
  --bo-s-5: 24px; --bo-s-6: 32px; --bo-s-7: 48px; --bo-s-8: 56px;

  --bo-r-sm: 10px; --bo-r: 14px; --bo-r-lg: 18px; --bo-r-pill: 980px;

  --bo-shadow-md: 0 4px 20px rgba(0,0,0,.4);
  --bo-shadow-lg: 0 12px 40px rgba(0,0,0,.5);
  --bo-glow-gold: 0 10px 34px rgba(212,175,55,.28);

  --bo-font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bo-font-serif: 'Spectral', Georgia, serif;

  --bo-max-w: 1080px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bo-paper);
  color: var(--bo-ink);
  font-family: var(--bo-font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--bo-s-3); letter-spacing: -0.02em; }
h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; }
p  { margin: 0 0 var(--bo-s-4); color: var(--bo-slate-500); }
a  { color: var(--bo-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--bo-slate-700); font-weight: 600; }
:focus-visible { outline: 2px solid var(--bo-cyan); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--bo-max-w); margin: 0 auto; padding: 0 var(--bo-s-5); }
.section { padding: var(--bo-s-8) 0; }
.eyebrow {
  color: var(--bo-gold); font-size: 11px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: var(--bo-s-3);
}
.lead { font-size: 19px; color: var(--bo-slate-700); max-width: 62ch; }
.muted { color: var(--bo-slate-500); font-size: 14px; }
.hidden { display: none !important; }

/* ---- Kopf und Fuss ------------------------------------------------------ */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(7,11,20,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bo-border);
}
.site-head .wrap { display: flex; align-items: center; gap: var(--bo-s-5); height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--bo-ink); }
.brand:hover { text-decoration: none; }
.brand .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bo-grad-cyan); box-shadow: 0 0 0 4px rgba(34,211,238,.12);
}
.site-head nav { margin-left: auto; display: flex; align-items: center; gap: var(--bo-s-5); }
.site-head nav a { color: var(--bo-slate-500); font-size: 15px; }
.site-head nav a:hover { color: var(--bo-ink); text-decoration: none; }

/* Sprungziele landen sonst UNTER dem klebenden Kopf: "Preis" im Menue zeigte
   bis zum 27.09.2026 den Abschnitt ohne seine Ueberschrift. */
html { scroll-padding-top: 80px; }

/* Das Seitenmenue der Messenger-Seite (Karl, 27.09.2026: "menü overload",
   Wahl "5 Punkte"). Zwei Menues im Kopf: links die Sprungziele, rechts
   Sprache und Anmelden. Beide tragen margin-left:auto aus `.site-head nav` -
   ohne die Regel darunter teilten sie sich den freien Platz, und zwischen
   ihnen klaffte eine Luecke. */
.site-head .seitenmenue + nav { margin-left: var(--bo-s-5); }

.site-foot { border-top: 1px solid var(--bo-border); padding: var(--bo-s-6) 0; margin-top: var(--bo-s-8); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--bo-s-4); justify-content: space-between; }
.site-foot a { color: var(--bo-slate-500); font-size: 14px; }

/* ---- Knoepfe ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border: 0; border-radius: var(--bo-r-pill);
  background: var(--bo-grad); color: #12100a;
  font: inherit; font-weight: 700; cursor: pointer; text-align: center;
  box-shadow: var(--bo-glow-gold); transition: transform .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn.ghost {
  background: transparent; color: var(--bo-ink);
  border: 1px solid var(--bo-border-strong); box-shadow: none;
}
.btn.block { width: 100%; }
/* Der eine rote Knopf: die Warteliste. Sie stand bis zum 04.09.2026 als
   dritter grauer Geisterknopf neben "Fuer Android laden" und sah damit aus
   wie eine Nebensache — dabei ist sie auf dieser Seite die Handlung, die wir
   wollen. Weisse Schrift statt der dunklen des Goldknopfs, weil Rot dunkel
   ist. Der Kontrast ist gemessen, nicht geschaetzt. */
.btn.warteliste {
  background: var(--bo-grad-rot); color: #fff;
  box-shadow: var(--bo-glow-rot);
}
.btn.warteliste:hover { color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---- Karten ------------------------------------------------------------- */
.card {
  background: var(--bo-card); border: 1px solid var(--bo-border);
  border-radius: var(--bo-r-lg); padding: var(--bo-s-5);
}
.grid { display: grid; gap: var(--bo-s-4); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- Formulare ---------------------------------------------------------- */
label { display: block; font-size: 13px; color: var(--bo-slate-500); margin-bottom: 6px; }
input, textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bo-paper); color: var(--bo-ink);
  border: 1px solid var(--bo-border-strong); border-radius: var(--bo-r-sm);
  font: inherit;
}
/* Auswahlfelder sehen ohne appearance:none aus wie vom Betriebssystem —
   weisser Kasten im dunklen Design. Der Pfeil wird deshalb selbst gezeichnet
   (als SVG in der Adresse, damit keine zusaetzliche Datei geladen wird). */
select {
  width: 100%; padding: 12px 40px 12px 14px;
  background: var(--bo-paper); color: var(--bo-ink);
  border: 1px solid var(--bo-border-strong); border-radius: var(--bo-r-sm);
  font: inherit; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8C4D8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
select:focus { border-color: var(--bo-cyan); outline: none; }
/* Die Liste selbst zeichnet das Betriebssystem — dort greift nur die Farbe. */
select option { background: var(--bo-surface-alt); color: var(--bo-ink); }

input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; flex: 0 0 auto; margin: 0;
  accent-color: var(--bo-gold); cursor: pointer;
}
/* Beschriftung und Kaestchen gehoeren zusammen: der ganze Text ist klickbar. */
label.check {
  display: flex; align-items: center; gap: var(--bo-s-3);
  cursor: pointer; margin: 0;
}

input:focus, textarea:focus { border-color: var(--bo-cyan); outline: none; }
.field { margin-bottom: var(--bo-s-4); }
.error { color: var(--bo-warn); font-size: 14px; min-height: 20px; margin: 0; }

/* Meldeplatz mit zwei Ausgaengen (Befund B10). Ohne Zusatz bleibt er neutral:
   Ein Hinweis wie "Trag erst deinen Namen ein" ist kein Fehlschlag. Das
   Zeichen vor dem Text setzt meldung.js — die Farbe steht nie allein. */
.meldung { color: var(--bo-slate-500); font-size: 14px; min-height: 20px; margin: 0; }
.meldung-ok { color: var(--bo-ok); }
.meldung-fehler { color: var(--bo-warn); }

/* ---- Startseite --------------------------------------------------------- */
.hero { padding: var(--bo-s-8) 0 var(--bo-s-7); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--bo-s-7); align-items: center; }
.hero h1 span { background: var(--bo-grad-cyan); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--bo-s-3); margin-top: var(--bo-s-5); }
.promise { border-left: 2px solid var(--bo-gold); padding-left: var(--bo-s-4); margin-top: var(--bo-s-5); }
.promise p { margin: 6px 0; }

/* Bild direkt unter der Ueberschrift. Das feste Seitenverhaeltnis haelt den
   Platz frei, damit beim Nachladen nichts springt. */
.hero-bild { margin: var(--bo-s-5) 0; }
.hero-bild img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--bo-r-lg); border: 1px solid var(--bo-border);
}
.hero-bild figcaption { margin-top: var(--bo-s-2); font-size: 13px; }
/* Bildschirmfotos eines Telefons sind hochkant. Die Regel darüber stammt vom
   alten Querformat-Sinnbild und schnitt sie zu 16:9-Streifen zurecht — auf der
   Messenger-Seite standen dadurch zwei flache Klötze statt zweier Telefone
   (Karls Befund vom 12.08.2026). `hoch` nimmt den Zuschnitt zurück und stellt
   sie in einen Rahmen, damit das Auge „Gerät" liest und nicht „Ausschnitt". */
.hero-bild.hoch img {
  aspect-ratio: auto; object-fit: contain;
  border-radius: 26px; box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

/* Karussell: auf breiten Schirmen stehen die Karten nebeneinander, auf schmalen
   wird gewischt. Scroll-Snap statt Skript — ein Karussell, das ohne JavaScript
   funktioniert, kann auch nicht kaputtgehen. */
.section-schmal { padding: var(--bo-s-6) 0; }
.karussell {
  display: flex; gap: var(--bo-s-4); margin-top: var(--bo-s-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: var(--bo-s-5); padding-bottom: var(--bo-s-3);
}
.karussell > * { flex: 0 0 min(320px, 82%); scroll-snap-align: start; }
.karussell:focus-visible { outline: 2px solid var(--bo-cyan); outline-offset: 4px; }
.karte-zusage { border-left: 2px solid var(--bo-gold); }
.karte-zusage h3 { font-size: 17px; margin-bottom: var(--bo-s-2); }
.karte-zusage p { margin: 0; font-size: 15px; }

.price-card { text-align: center; box-shadow: var(--bo-shadow-lg); }
.price-card .amount { font-size: 46px; font-weight: 700; color: var(--bo-ink); line-height: 1.1; }
.price-card .per { color: var(--bo-slate-500); font-size: 15px; }
.price-card ul { list-style: none; padding: 0; margin: var(--bo-s-5) 0; text-align: left; }
.price-card li { padding-left: 26px; position: relative; margin-bottom: 10px; color: var(--bo-slate-700); font-size: 15px; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--bo-cyan); font-weight: 700; }

.steps { counter-reset: step; }
.steps .card { position: relative; padding-top: var(--bo-s-6); }
.steps .card::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: var(--bo-s-4); left: var(--bo-s-5);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(34,211,238,.12); color: var(--bo-cyan);
  font-size: 13px; font-weight: 700;
}

/* ---- Arbeitsbereich ----------------------------------------------------- */
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }
/* grid-template-columns: minmax(0, 1fr) ist hier der entscheidende Teil.
   Ein Rasterfeld ist standardmaessig min-width:auto und schrumpft deshalb
   NIE unter seinen Inhalt — auf einem 390 Pixel breiten Telefon wurde der
   Arbeitsbereich dadurch 741 Pixel breit, und weil der Rumpf overflow-x
   verbirgt, war die rechte Haelfte unerreichbar statt wischbar. */
.app-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto; gap: var(--bo-s-4); padding: var(--bo-s-5) 0 var(--bo-s-6); }
/* flex-wrap und min-width:0 sind hier nicht Kosmetik: Ohne sie war die Kopf-
   zeile des Arbeitsbereichs auf einem Telefon 741 Pixel breit, und weil der
   Rumpf overflow-x:hidden traegt, war die rechte Haelfte weder sichtbar noch
   erreichbar — der Abmelden-Knopf verschwand einfach. */
.app-top { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: start; gap: var(--bo-s-4); }
.app-top > * { min-width: 0; }
.app-top h1 { font-size: 28px; margin-bottom: 4px; }

.login-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--bo-s-7); align-items: center; padding: var(--bo-s-7) 0; }

.billing-bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--bo-s-4);
  flex-wrap: wrap; background: var(--bo-card);
  border: 1px solid var(--bo-border); border-left: 2px solid var(--bo-cyan);
  border-radius: var(--bo-r); padding: 14px 18px;
}
.billing-bar.due { border-left-color: var(--bo-gold); }
.billing-bar p { margin: 4px 0 0; font-size: 14px; }
.billing-bar .actions { display: flex; gap: var(--bo-s-3); }
.billing-bar .btn { padding: 9px 16px; font-size: 15px; }

/* ---- Scanner: zeigt, dass Orbit arbeitet -------------------------------- */
.scanner {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--bo-paper); border: 1px solid var(--bo-border);
  margin-bottom: var(--bo-s-3); position: relative;
}
.scanner span {
  position: absolute; top: 0; bottom: 0; width: 22%;
  border-radius: 999px; left: 0;
  background: linear-gradient(90deg, transparent, var(--bo-gold), transparent);
  opacity: .25;
}
/* Im Ruhezustand steht das Licht in der Mitte und atmet leise. */
.scanner span { left: 39%; animation: scanner-atmen 4s ease-in-out infinite; }
.scanner.aktiv span { animation: scanner-lauf 1.4s ease-in-out infinite; opacity: 1; }

@keyframes scanner-atmen {
  0%, 100% { opacity: .18; }
  50% { opacity: .38; }
}
@keyframes scanner-lauf {
  0% { left: 0; }
  50% { left: 78%; }
  100% { left: 0; }
}

#messages {
  min-height: 320px; max-height: 56vh; overflow: auto;
  background: var(--bo-paper); border: 1px solid var(--bo-border);
  border-radius: var(--bo-r); padding: var(--bo-s-5); white-space: pre-wrap;
}
.message { margin-bottom: var(--bo-s-5); max-width: 74ch; }
.message .author { color: var(--bo-cyan); font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.message.system .author { color: var(--bo-gold); }
/* Ein Feld, in dem alles sitzt — Text oben, Werkzeuge unten. Die fruehere
   Anordnung (Textfeld links, Knopfspalte rechts) machte die Spalte so breit
   wie ihren laengsten Knopf und drueckte das Schreibfeld an den Rand. */
.composer {
  margin-top: var(--bo-s-4);
  background: var(--bo-paper); border: 1px solid var(--bo-border);
  border-radius: var(--bo-r); padding: var(--bo-s-4);
  transition: border-color .15s ease;
}
.composer:focus-within { border-color: var(--bo-cyan); }
.composer textarea {
  width: 100%; resize: vertical; min-height: 60px;
  background: transparent; border: none; padding: 0; margin: 0;
}
.composer textarea:focus { outline: none; box-shadow: none; }
.composer-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--bo-s-3); flex-wrap: wrap; margin-top: var(--bo-s-3);
}
.composer-tools, .composer-send { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Kleine Schaltflaeche im Eingabefeld — leiser als ein Knopf, aber klickbar. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--bo-border);
  color: var(--bo-slate-500); font-size: 14px; font-family: inherit;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip:hover { border-color: var(--bo-cyan); color: var(--bo-slate-700); }
/* Startaktionen im leeren Chat: dieselben Chips wie im Composer, damit die
   Handlung gleich aussieht, egal wo sie beginnt. */
.start-vorschlaege { padding: var(--bo-s-4) 0; }
.start-titel { margin-bottom: var(--bo-s-3); }
.start-leiste { display: flex; flex-wrap: wrap; gap: var(--bo-s-2, 8px); }

.chip.toggle[aria-pressed="true"] {
  border-color: var(--bo-gold); color: var(--bo-gold); background: rgba(232,195,106,.12);
}

/* Was Orbit gerade kann. Was fehlt, wird nicht versteckt, sondern blass
   gezeigt — sonst sucht man eine Funktion, die es hier nicht gibt. */
.abilities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--bo-s-3); }
.ability {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--bo-slate-500);
  border: 1px solid var(--bo-border); border-radius: 999px; padding: 3px 10px;
}
.ability::before { content: "●"; font-size: 9px; color: var(--bo-cyan); }
.ability.off { opacity: .55; }
.ability.off::before { color: var(--bo-slate-500); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- Rechtsseiten ------------------------------------------------------- */
/* Nur oben und unten: Die Kurzform `padding: … 0` nahm `.wrap` (Zeile 80) den seitlichen Rand —
   auf dem Telefon klebten Text und Karten am Bildschirmrand (gemessen 03.10.2026, /anleitung/). */
.legal { padding-block: var(--bo-s-7); max-width: 72ch; }
.legal h2 { font-size: 22px; margin-top: var(--bo-s-6); }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px var(--bo-s-4); margin: 0 0 var(--bo-s-5); }
.legal dt { color: var(--bo-slate-500); font-size: 14px; }
.legal dd { margin: 0; color: var(--bo-slate-700); }
.legal ul { color: var(--bo-slate-500); padding-left: 20px; }
.legal li { margin-bottom: 8px; }

/* Der Anmelde-Knopf in der Kopfzeile. Stand frueher als eingebetteter Stil in
   jeder Seite und war deshalb in keiner Medienabfrage zu erreichen — auf einem
   390 Pixel breiten Telefon ragte er ueber den rechten Rand hinaus. */
.btn-nav { padding: 8px 18px; font-size: 15px; }

@media (max-width: 820px) {
  .hero-grid, .login-grid { grid-template-columns: 1fr; gap: var(--bo-s-5); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .composer-bar { flex-direction: column; align-items: stretch; }
  .composer-send { justify-content: flex-end; }
  .legal dl { grid-template-columns: 1fr; gap: 2px var(--bo-s-4); }
  .legal dt { margin-top: 10px; }
  .site-head nav { gap: var(--bo-s-4); }
  .site-head nav a.nav-hide { display: none; }
}

/* Das Seitenmenue auf schmalen Schirmen: eine eigene Zeile unter Marke und
   Anmelden, seitlich wischbar. Nichts wird versteckt - bis zum 27.09.2026
   verschwanden am Handy acht von zwoelf Punkten ohne Ersatz. Die Spezifitaet
   (.site-head.mit-seitenmenue) schlaegt die Innenabstaende der 560- und
   400-px-Bloecke weiter unten. */
@media (max-width: 820px) {
  .site-head.mit-seitenmenue .wrap {
    flex-wrap: wrap; height: auto; row-gap: 6px; padding-top: 10px; padding-bottom: 8px;
  }
  .site-head .seitenmenue {
    order: 3; flex: 0 0 100%; margin-left: 0; gap: var(--bo-s-4);
    overflow-x: auto; scrollbar-width: none;
  }
  .site-head .seitenmenue::-webkit-scrollbar { display: none; }
  .site-head .seitenmenue a { white-space: nowrap; font-size: 14px; }
  .site-head .seitenmenue + nav { margin-left: auto; }
  html:has(.mit-seitenmenue) { scroll-padding-top: 110px; }
}

/* Telefone. Bei 390 Pixern passen Marke, Menue und Knopf nur nebeneinander,
   wenn alle drei enger werden — sonst wandert der Knopf aus dem Bild. */
@media (max-width: 560px) {
  /* Umbruch statt fester Hoehe: Seit dem 23.08.2026 stehen hier zwei
     Verweise mehr, die nicht weichen duerfen (siehe nav-immer weiter
     unten). Passen sie nicht in eine Zeile, rutscht das Menue in die
     zweite - besser als ein Knopf, der aus dem Bild wandert. */
  .site-head .wrap { gap: var(--bo-s-3); padding: 10px var(--bo-s-3); flex-wrap: wrap; height: auto; }
  .brand { font-size: 16px; white-space: nowrap; }
  .site-head nav { gap: var(--bo-s-3); }
  /* Jeder Knopf in der Kopfzeile, nicht nur der der oeffentlichen Seiten:
     Im Arbeitsbereich heisst er "Abmelden" und traegt eine andere Klasse. */
  .site-head nav .btn { padding: 8px 12px; font-size: 14px; }
  /* Text-Verweise in der Kopfzeile weichen: Marke, Sprachflagge und der
     Anmelde-Knopf brauchen zusammen schon 390 Pixel. Die Sprungmarke, die
     hier verschwindet, steht als Knopf ohnehin gleich darunter im Text.
     Die Flagge traegt ein lang-Attribut, der Knopf die Klasse btn. */
  .site-head nav a:not(.btn):not([lang]):not(.nav-immer) { display: none; }
  /* Die Ausnahme: "Fragen" und "Umfrage" bleiben auf jeder Breite stehen.
     Karls Ansage vom 23.08.2026 - versteckt ist nicht gewollt. */
  .site-head nav a.nav-immer { font-size: 14px; }
  .site-foot .wrap { gap: var(--bo-s-3); }
  /* Fusszeilen-Verweise untereinander statt in einer zu engen Reihe. */
  .site-foot .wrap > div:last-child { flex-wrap: wrap; gap: var(--bo-s-3) var(--bo-s-4); }
}

/* Schmale Telefone (360 px und weniger). Dort ragte die Kopfzeile des
   Arbeitsbereichs noch zwei Pixel hinaus — genug, damit sich die Seite auf
   einem echten Geraet seitlich schieben laesst. overflow-x:hidden verdeckt
   so etwas nur; die Ursache muss weg. */
@media (max-width: 400px) {
  .site-head .wrap { gap: var(--bo-s-2); padding: 0 var(--bo-s-3); }
  .site-head nav { gap: var(--bo-s-2); }
  .site-head nav .btn { padding: 7px 10px; font-size: 13px; }
  .brand { font-size: 15px; }
  .brand .dot { width: 10px; height: 10px; box-shadow: 0 0 0 3px rgba(34,211,238,.12); }
}

/* ---- Erste Bildschirmseite auf dem Telefon ------------------------------
   Karls Befund vom 04.09.2026: Auf einem iPhone (390 x 844) stand der
   Warteliste-Knopf bei 797 Pixeln — also am unteren Rand, halb hinter der
   Chat-Blase, und nur nach dem Wischen zu sehen. Darueber lagen 213 Pixel
   Fliesstext, den in diesem Moment niemand liest: Wer die Seite oeffnet, will
   erst wissen, WAS es ist und WO er klickt. Das Warum kommt danach.

   Deshalb hier drei Griffe, keine Umbauten:
   1. Die Ueberschrift wird kleiner und der Vorspann rueckt unter die Knoepfe
      (order), statt sie nach unten zu schieben.
   2. Die Abstaende des Heldenbereichs werden enger.
   3. Die Knoepfe stehen als volle Reihe statt in drei umgebrochenen Zeilen.
   Gemessen wird am Ende wieder mit dem Lineal, nicht nach Gefuehl: Der
   Warteliste-Knopf muss oberhalb von 844 Pixeln stehen. */
@media (max-width: 560px) {
  .hero { padding: var(--bo-s-5) 0 var(--bo-s-6); }
  .hero-grid > div { display: flex; flex-direction: column; }
  /* Zuerst der Sammelfall, dann die Ausnahmen: Alles Uebrige (Vorspann,
     Android-Hinweis, Anleitung) faellt hinter die Handlung. Die Regel steht
     bewusst VOR den fuenf benannten — sie ist gleich stark (eine Klasse plus
     zwei Typen), und bei gleicher Staerke gewinnt die spaetere. Stuende sie
     unten, zoege sie die Ueberschrift mit nach unten. */
  .hero-grid > div > *  { order: 6; }
  .hero .eyebrow      { order: 1; margin-bottom: var(--bo-s-2); }
  .hero h1            { order: 2; font-size: 30px; margin-bottom: var(--bo-s-2); }
  .hero .subline      { order: 3; font-size: 18px; margin: 0 0 var(--bo-s-3); }
  .hero #hero-count   { order: 4; }
  .hero .hero-actions { order: 5; margin-top: var(--bo-s-2); }
  .hero .lead { font-size: 17px; margin-top: var(--bo-s-4); }
  /* Ein Knopf je Zeile, volle Breite: drei halbbreite Kaestchen in drei
     Zeilen kosten dieselbe Hoehe und treffen sich schlechter mit dem Daumen.
     Das App-Store-Bild bleibt so gross, wie Apple es vorschreibt. */
  .hero-actions { gap: var(--bo-s-2); }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .btn:hover { transform: none; }
}

/* Animierter Orbit-Hintergrund — reines SVG, loopt nahtlos, keine Drittanbieter. */
.hero, .login-grid {
  background: url('/assets/orbit-bg.svg') no-repeat center / cover;
}

/* Sprachflaggen */
.flag { width: 22px; height: 14px; border-radius: 2px; vertical-align: -2px; }

/* ---------------------------------------------------------------------------
   Echte Bildschirmfotos der App. Der Rahmen ist kein Zierrat: Ein hochkantes
   Foto ohne Rahmen liest sich wie ein ausgeschnittener Streifen. Im Rahmen
   sieht das Auge sofort "Telefon" und fragt nicht mehr, warum das Bild so
   schmal ist (Karls Befund vom 12.08.2026). */
.shot { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--bo-s-3); }
.shot-rahmen {
  width: min(240px, 86%); padding: 10px; border-radius: 36px;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.shot-rahmen img { width: 100%; height: auto; display: block; border-radius: 27px; }
.shot figcaption { color: var(--bo-slate-500); font-size: 13px; text-align: center; max-width: 260px; }

/* ---- Messenger-Seite, Neuaufbau 04.09.2026 ------------------------------
   Die alte Seite war 32 Handyschirme lang, davon 12 Rechtstext. Wer aus einer
   Anzeige kam, sah eine Wand aus Text und war weg (Karls Befund). Der
   Neuaufbau folgt dem Kopf des Besuchers: Was ist das? -> Stimmt das? -> Was
   habe ich davon? -> Ja, aber? -> Los. Die Bausteine dafuer stehen hier. */

/* Die drei echten Bildschirmfotos direkt unter dem Heldenbereich. Sie liegen
   leicht versetzt wie hingelegte Geraete statt in Reih und Glied — eine
   perfekte Reihe wirkt gestellt, und genau das wollen wir nicht. */
.geraete { display: flex; justify-content: center; align-items: flex-end; gap: var(--bo-s-4); flex-wrap: wrap; }
.geraet { width: min(200px, 44%); border-radius: 30px; padding: 8px;
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.geraet img { width: 100%; height: auto; display: block; border-radius: 23px; }
/* Das mittlere Geraet steht vorn und etwas hoeher — so entsteht Tiefe. */
.geraet.vorn { width: min(232px, 50%); z-index: 2; }
.geraet.hinten { transform: translateY(18px); opacity: .92; }

/* Ein Grund je Zeile, Symbol links, Satz rechts. Keine Karten: Drei Kaesten
   nebeneinander lesen sich wie ein Prospekt, eine Liste liest sich wie ein
   Gespraech. */
.gruende { display: grid; gap: var(--bo-s-5); margin-top: var(--bo-s-6); }
.grund { display: flex; gap: var(--bo-s-4); align-items: flex-start; }
.grund-zeichen { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.25); }
.grund h3 { font-size: 17px; margin-bottom: 4px; }
.grund p { margin: 0; font-size: 15px; }

/* Der zweite rote Knopf, mitten auf der Seite: Wer bis hierher gelesen hat,
   ist ueberzeugt — dort muss die Handlung stehen, nicht erst ganz unten. */
.handlungsband { text-align: center; padding: var(--bo-s-7) 0; }
.handlungsband .btn { min-width: 260px; }

/* Rechtstext auf dem Telefon zusammengefaltet. Der Text bleibt vollstaendig
   im Markup — fuer Google, fuer Vorleseprogramme und fuer die, die es genau
   wissen wollen. Zusammengefaltet ist er nur optisch. */
.mehr { border: 1px solid var(--bo-border); border-radius: var(--bo-r);
  padding: var(--bo-s-4) var(--bo-s-5); background: var(--bo-card); margin-top: var(--bo-s-4); }
.mehr > summary { cursor: pointer; font-weight: 600; color: var(--bo-ink); list-style: none; }
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::after { content: " ▾"; color: var(--bo-gold); }
.mehr[open] > summary::after { content: " ▴"; }
.mehr > summary:focus-visible { outline: 2px solid var(--bo-cyan); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Klickbare Vorschau des Messengers. Bewusst als echte Oberflaeche gebaut und
   nicht als Bild: Ein Bild kann nur behaupten, eine Bedienung kann zeigen.
   Alles laeuft im Browser, es wird nichts gesendet und nichts gespeichert. */
.phone {
  width: 100%; max-width: 300px; margin: 0 auto;
  /* Sechs Gespraeche fuellen die Liste; darunter bleibt so viel Rand,
     wie ein echtes Telefon auch haette. */
  aspect-ratio: 9 / 15; background: #0a0f1a;
  border: 10px solid #1a1f2b; border-radius: 38px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.phone::before {                       /* Kamerabalken, damit es wie ein Geraet wirkt */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 96px; height: 20px; background: #1a1f2b; border-radius: 0 0 12px 12px; z-index: 3;
}
.phone-bar { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px 4px; font-size: 11px; color: var(--bo-slate-500, #91a0ad); }
.phone-screen { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.mock-view { position: absolute; inset: 0; display: flex; flex-direction: column;
  background: #0a0f1a; transition: transform .22s ease; }
.mock-view[hidden] { display: none; }
.mock-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08); flex: none; }
.mock-head strong { font-size: 15px; }
.mock-head .muted { font-size: 11px; }
.mock-back { background: none; border: 0; color: var(--bo-gold, #D4AF37);
  font: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.mock-list { flex: 1; overflow-y: auto; min-height: 0; }
/* Ein Telefon zeigt keinen Bildlaufbalken. Gescrollt wird trotzdem. */
.mock-list, .mock-msgs, .mock-pruef { scrollbar-width: none; }
.mock-list::-webkit-scrollbar,
.mock-msgs::-webkit-scrollbar,
.mock-pruef::-webkit-scrollbar { width: 0; height: 0; }
.mock-chat { display: flex; gap: 10px; width: 100%; text-align: left; padding: 11px 14px;
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.05);
  color: inherit; font: inherit; cursor: pointer; align-items: center; }
.mock-chat:hover, .mock-chat:focus-visible { background: rgba(255,255,255,.05); outline: none; }
.mock-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: var(--bo-gold, #D4AF37); color: #0a0f1a; }
.mock-chat-text { min-width: 0; flex: 1; }
.mock-chat-text b { display: block; font-size: 14px; font-weight: 600; }
.mock-chat-text span { display: block; font-size: 12px; color: var(--bo-slate-500, #91a0ad);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-time { font-size: 10px; color: var(--bo-slate-500, #91a0ad); flex: none; }
.mock-msgs { flex: 1; overflow-y: auto; min-height: 0; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; }
.mock-bubble { max-width: 78%; padding: 8px 11px; border-radius: 14px; font-size: 13px;
  line-height: 1.35; background: rgba(255,255,255,.09); align-self: flex-start; }
.mock-bubble.eigen { align-self: flex-end; background: var(--bo-gold, #D4AF37); color: #0a0f1a; }
.mock-bubble small { display: block; margin-top: 3px; font-size: 10px; opacity: .7; }
.mock-hinweis { align-self: center; font-size: 11px; text-align: center;
  color: var(--bo-slate-500, #91a0ad); background: rgba(255,255,255,.05);
  padding: 6px 10px; border-radius: 10px; max-width: 90%; }
.mock-eingabe { display: flex; gap: 8px; padding: 10px 12px; flex: none;
  border-top: 1px solid rgba(255,255,255,.08); }
.mock-eingabe input { flex: 1; padding: 9px 12px; font-size: 13px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: inherit; }
.mock-eingabe button { flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--bo-gold, #D4AF37); color: #0a0f1a; cursor: pointer;
  font-size: 15px; font-weight: 700; }
.mock-fuss { display: flex; flex: none; border-top: 1px solid rgba(255,255,255,.08); }
.mock-fuss button { flex: 1; background: none; border: 0; color: var(--bo-slate-500, #91a0ad);
  font: inherit; font-size: 10px; padding: 8px 2px; cursor: pointer; display: grid;
  gap: 2px; justify-items: center; }
.mock-fuss button.active { color: var(--bo-gold, #D4AF37); }
.mock-fuss .zeichen { font-size: 15px; }
.mock-pruef { padding: 14px; display: grid; gap: 10px; align-content: start;
  overflow-y: auto; font-size: 13px; }
.mock-pruef .zeile { display: flex; gap: 10px; align-items: start;
  padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); }

/* Beschriftete Eingabezeile auf oeffentlichen Seiten (Warteliste). Die
   Arbeitsoberflaeche bringt eine eigene Fassung mit; hier fehlte sie ganz,
   wodurch die Beschriftung die Zentrierung der Preiskarte erbte. */
.setting-row { margin-bottom: var(--bo-s-3); text-align: left; }
.setting-row label { display: block; margin-bottom: 6px; font-size: 15px; color: var(--bo-slate-500); }

/* Laenderwahl der Warteliste: drei Knoepfe mit Flagge statt Auswahlliste.
   Der eigentliche Radioknopf bleibt im Baum (Tastatur, Screenreader), ist
   aber nicht sichtbar — die Karte selbst zeigt den Zustand. */
.flag-choice { border: 0; margin: 0 0 var(--bo-s-3); padding: 0; }
.flag-choice legend { padding: 0 0 6px; font-size: 15px; color: var(--bo-muted, #91a0ad); }
.flag-choice label { display: inline-block; margin: 0 8px 8px 0; cursor: pointer; }
.flag-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.flag-choice span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; font-size: 15px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  transition: border-color .15s, background .15s;
}
.flag-choice label:hover span { border-color: rgba(255,255,255,.32); }
.flag-choice input:checked + span {
  border-color: var(--bo-accent, #E8C36A);
  background: rgba(232,195,106,.14);
}
.flag-choice input:focus-visible + span { outline: 2px solid var(--bo-accent, #E8C36A); outline-offset: 2px; }

/* Verwaltungstabelle */
/* Die beiden Verwaltungstabellen stehen bereits in einem eigenen
   Schiebebereich (overflow-x:auto am umgebenden div) — sie machen die Seite
   also nicht breiter, sondern lassen sich fuer sich wischen. */
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th { text-align: left; color: var(--bo-muted, #91a0ad); font-weight: 600; padding: 8px 12px 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.admin-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }

/* Zustimmung bei Registrierung */
.consent { display: flex; gap: 10px; align-items: flex-start; margin: var(--bo-s-3) 0; font-size: 14px; line-height: 1.5; cursor: pointer; }
.consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* Subline unter der Ueberschrift: Sie traegt den alten, kuerzeren Satz. Groesser
   als der Fliesstext, damit sie zur Ueberschrift gehoert, aber nicht golden —
   Gold ist die Handlung, nicht die Aussage. */
.subline {
  font-size: 22px; line-height: 1.4; color: var(--bo-slate-700);
  margin: calc(var(--bo-s-3) * -1) 0 var(--bo-s-4); max-width: 46ch;
}

/* Vergleichstabelle. Sie ist breiter als ein Telefon — deshalb scrollt sie in
   ihrem eigenen Rahmen, nie die Seite. tabindex am Rahmen, damit man auch mit
   der Tastatur hineinkommt. */
.vergleich-rahmen { overflow-x: auto; margin-top: var(--bo-s-5); border: 1px solid var(--bo-border); border-radius: var(--bo-r-lg); }
.vergleich-rahmen:focus-visible { outline: 2px solid var(--bo-cyan); outline-offset: 2px; }
.vergleich { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 14px; text-align: left; }
.vergleich caption { caption-side: bottom; padding: var(--bo-s-3) var(--bo-s-4); text-align: left; }
.vergleich th, .vergleich td { padding: 12px 14px; border-bottom: 1px solid var(--bo-border); vertical-align: top; }
.vergleich thead th { font-size: 13px; letter-spacing: .02em; white-space: nowrap; }
.vergleich tbody th { font-weight: 600; width: 22%; }
/* Die eigene Spalte wird hervorgehoben, nicht schoengefaerbt: Sie traegt in
   zwei Zeilen bewusst die schlechtere Antwort. */
.vergleich .wir { background: rgba(212,175,55,.06); }
.vergleich thead .wir { color: var(--bo-gold); }
.vergleich .gut::before  { content: "✓ "; color: var(--bo-cyan); font-weight: 700; }
.vergleich .schlecht::before { content: "• "; color: var(--bo-slate-500); font-weight: 700; }
.vergleich tr.ehrlich th[scope="row"] { color: var(--bo-gold-light); }

/* Vergleich auf dem Telefon: aus der Tabelle werden Karten.
   Eine Tabelle mit fuenf Spalten ist auf 390 Pixeln nicht zu retten — sie war
   640 Pixel breit und scrollte seitlich. Sichtbar waren zwei Spalten, und dass
   die anderen drei hinter einer Wischgeste liegen, findet fast niemand heraus
   (Karls Befund vom 04.09.2026). Ein Vergleich, den man nicht sieht,
   ueberzeugt nicht.

   Statt eines zweiten Datensatzes im Markup klappt dieselbe Tabelle per CSS
   um: eine Karte je Frage, darin vier Zeilen "Anbieter: Antwort". Die
   Beschriftung kommt aus data-spalte am td — so koennen Tabelle und Karten
   nicht auseinanderlaufen. Die Kopfzeile wird ausgeblendet, aber nicht mit
   display:none: Vorleseprogramme sollen sie behalten. */
@media (max-width: 700px) {
  .vergleich-karten,
  .vergleich-karten tbody,
  .vergleich-karten tr,
  .vergleich-karten td { display: block; width: auto; }
  .vergleich-karten { min-width: 0; }
  /* Der Rahmen scrollt nichts mehr — es gibt nichts zu scrollen. */
  .vergleich-rahmen:has(.vergleich-karten) { overflow-x: visible; border: 0; border-radius: 0; }
  .vergleich-karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vergleich-karten tr {
    border: 1px solid var(--bo-border); border-radius: var(--bo-r);
    background: var(--bo-card); padding: var(--bo-s-4); margin-bottom: var(--bo-s-3);
  }
  /* Die Frage wird zur Kartenueberschrift. */
  .vergleich-karten tbody th[scope="row"] {
    display: block; width: auto; border: 0; padding: 0 0 var(--bo-s-3);
    font-size: 15px; color: var(--bo-ink);
  }
  .vergleich-karten td {
    border: 0; padding: 5px 0 5px 0; font-size: 14px;
    display: flex; gap: var(--bo-s-3); align-items: baseline;
  }
  /* Der Anbietername steht links, die Antwort rechts — feste Breite, damit die
     Antworten untereinander stehen und sich vergleichen lassen. */
  .vergleich-karten td::before {
    content: attr(data-spalte); flex: 0 0 92px;
    color: var(--bo-slate-500); font-size: 13px;
  }
  /* Unsere Zeile bleibt hervorgehoben, auch als Karte. Der Innenabstand wird
     nach aussen ausgeglichen, damit die Antworten trotz Hinterlegung in
     derselben Flucht stehen wie die drei darueber — sonst springt genau die
     Zeile aus der Reihe, auf die es ankommt. */
  .vergleich-karten td.wir {
    background: rgba(212,175,55,.06); border-radius: var(--bo-r-sm);
    padding: 5px 8px; margin: 2px -8px 0;
  }
  .vergleich-karten td.wir::before { flex-basis: 92px; }
  /* Die Haken standen vor dem Wert; als Karte gehoeren sie hinter den
     Anbieternamen, sonst kleben sie am Doppelpunkt. */
  .vergleich-karten .gut::before,
  .vergleich-karten .schlecht::before { content: attr(data-spalte); color: var(--bo-slate-500); font-weight: 400; }
}

/* ---------------------------------------------------------------------------
   Messenger: das Gespräch soll aussehen wie ein Messenger, nicht wie ein
   Formular. Karls Befund vom 11.08.2026 beim Durchklicken der Anhänge.
   --------------------------------------------------------------------------- */

/* Das Gespräch füllt die Höhe, statt in einem 50vh-Kasten mit eigenem
   Scrollbalken zu sitzen. Ein Fenster im Fenster liest sich schlecht: Man
   scrollt zweimal und weiß nie, welcher Balken gerade dran ist. */
.om-raum-offen { display: flex; flex-direction: column; min-height: 0; }
.om-verlauf {
  flex: 1; min-height: 240px; overflow-y: auto;
  margin-bottom: var(--bo-s-2); padding-right: 4px;
  /* Der Orbit hinter dem Gespräch — dieselbe Bildsprache wie der Schwenk
     beim Start der App: tiefes Blau, ein Schimmer, eine angedeutete Bahn.

     Bewusst SEHR leise. Ein bewegter Hintergrund hinter Text ist sonst genau
     das, was man beim zweiten Mal abschalten will: Er zieht das Auge weg von
     dem, wofür die Seite da ist. Deshalb 6 % Deckkraft, ein Atemzug über 14
     Sekunden und keine Kante, die mit einer Blase konkurriert. */
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(34, 211, 238, .07), transparent 60%),
    radial-gradient(80% 60% at 50% 96%, rgba(99, 102, 241, .06), transparent 70%);
  background-attachment: local, local;
}
/* Die Bahn: ein Kreisausschnitt, der unten aus dem Bild läuft. Als
   Pseudo-Element, damit er nicht mitscrollt und keine Blase überdeckt. */
.om-raum-offen { position: relative; }
.om-raum-offen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(closest-side, transparent 71%, rgba(34, 211, 238, .10) 72%,
                    rgba(34, 211, 238, .10) 73%, transparent 74%);
  background-size: 150% 150%;
  background-position: 50% 118%;
  background-repeat: no-repeat;
  animation: orbit-atmen 14s ease-in-out infinite;
}
@keyframes orbit-atmen {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}
/* Wer weniger Bewegung eingestellt hat, bekommt keine. Das ist keine
   Empfehlung des Systems, sondern eine Ansage des Menschen. */
@media (prefers-reduced-motion: reduce) {
  .om-raum-offen::before { animation: none; }
}
@media (min-height: 700px) { .om-verlauf { min-height: 52vh; } }

/* Die Büroklammer sitzt IM Eingabefeld, nicht daneben. Vorher war sie ein
   runder Geisterknopf, den man auf dem Bildschirm kaum fand — und wer den
   Anhang nicht findet, verschickt keinen. */
.om-eingabe {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--bo-border); border-radius: 999px;
  background: var(--bo-surface-alt, #0E1626); padding: 4px 6px 4px 4px;
}
.om-eingabe:focus-within { border-color: var(--bo-cyan); }
.om-eingabe input[type="text"] {
  flex: 1; min-width: 0; border: none; background: transparent;
  padding: 10px 4px; color: inherit; font: inherit;
}
.om-eingabe input[type="text"]:focus { outline: none; }
.om-klammer {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--bo-slate-700);
}
.om-klammer:hover:not(:disabled) { background: rgba(184,196,216,.12); color: inherit; }
.om-klammer:disabled { opacity: .5; cursor: default; }

/* Einladen liegt hinter einem Knopf. Man lädt einmal ein und liest tausendmal
   — das Formular gehört nicht bei jedem Öffnen über die Nachrichten. */
.om-raum-kopf { display: flex; align-items: center; gap: var(--bo-s-2); margin: var(--bo-s-3) 0; }
.om-raum-kopf h4 { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* „Bescheid geben" steht unter dem Kopf und nicht in ihm: Der Name eines
   Gesprächs braucht die ganze Zeile, und ein vierter Knopf daneben schiebt
   ihn auf dem Telefon aus dem Bild. */
.om-raum-melden { display: flex; align-items: center; justify-content: flex-end; gap: var(--bo-s-2); margin: 0 0 var(--bo-s-3); font-size: 12px; }
.om-raum-melden select { font-size: 12px; padding: 2px 6px; max-width: 60%; }

/* Das Bild groß über dem Gespräch, statt in einem neuen Tab. Ein neuer Tab
   reißt aus dem Gespräch heraus; hier schließt Escape oder ein Klick. */
.om-lupe {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(7,11,20,.92); border: none; cursor: zoom-out;
}
.om-lupe img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ── Preisumfrage: Karussell der Vorteile und der Schieberegler ─────────────
   Die Folien liegen uebereinander statt nebeneinander. Grund: Ein Streifen,
   der seitlich wandert, braucht entweder feste Breiten oder rechnet staendig
   nach; uebereinander genuegt ein Wechsel der Deckkraft, und die Hoehe steht
   von Anfang an fest. */
.karussell {
  position: relative; margin: var(--bo-s-5) 0;
  border: 1px solid var(--bo-border); border-radius: var(--bo-r-lg);
  background: var(--bo-card); overflow: hidden;
}
.karussell:focus-visible { outline: 2px solid var(--bo-gold); outline-offset: 2px; }

/* Die Buehne traegt die Hoehe der groessten Folie. Ohne diese Mindesthoehe
   springt die Seite bei jedem Wechsel — der sicherste Weg, ein Karussell
   unbenutzbar zu machen. */
.karussell-buehne { position: relative; min-height: 340px; }

.folie {
  position: absolute; inset: 0; padding: var(--bo-s-5);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.folie.aktiv { opacity: 1; transform: none; pointer-events: auto; }

.folie-marke {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bo-slate-500); margin-bottom: var(--bo-s-2);
}
.folie h3 { margin: 0 0 var(--bo-s-4); font-size: 26px; line-height: 1.2; }

/* Unsere Zeile steht oben und traegt als Einzige Farbe. Die Vergleiche
   darunter bleiben grau — der Blick soll zuerst auf der Antwort landen. */
.folie-wir {
  display: flex; gap: var(--bo-s-3); align-items: flex-start;
  padding: var(--bo-s-4); border-radius: var(--bo-r);
  background: rgba(110,231,183,.08); border: 1px solid rgba(110,231,183,.22);
  margin-bottom: var(--bo-s-4);
}
.folie-wir .haken { color: var(--bo-ok); font-size: 20px; line-height: 1.2; }
.folie-wir strong { display: block; margin-bottom: 2px; }
.folie-wir p { margin: 0; color: var(--bo-slate-700); font-size: 15px; }

.folie-andere { display: grid; gap: var(--bo-s-2); }
.folie-andere > div {
  display: grid; grid-template-columns: 116px 1fr; gap: var(--bo-s-3);
  align-items: baseline; font-size: 14px;
  padding-bottom: var(--bo-s-2); border-bottom: 1px solid var(--bo-border);
}
.folie-andere > div:last-child { border-bottom: none; padding-bottom: 0; }
.folie-andere dt, .folie-andere .wer { color: var(--bo-ink); font-weight: 600; }
.folie-andere .was { color: var(--bo-slate-500); }

.karussell-steuer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bo-s-3); padding: var(--bo-s-3) var(--bo-s-5) var(--bo-s-4);
  border-top: 1px solid var(--bo-border);
}
.karussell-punkte { display: flex; gap: var(--bo-s-2); }
.punkt {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: none; background: var(--bo-border-strong); transition: background .25s, transform .25s;
}
.punkt.aktiv { background: var(--bo-gold); transform: scale(1.25); }
.punkt:focus-visible { outline: 2px solid var(--bo-gold); outline-offset: 3px; }

.karussell-pfeile { display: flex; gap: var(--bo-s-2); }
.karussell-pfeile button {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bo-border-strong); background: transparent;
  color: var(--bo-ink); font-size: 15px; line-height: 1;
}
.karussell-pfeile button:hover { border-color: var(--bo-gold); color: var(--bo-gold); }

/* ── Der Schieberegler ──────────────────────────────────────────────────── */
.regler-feld { margin: var(--bo-s-5) 0; }
.regler-anzeige {
  font-family: var(--bo-font-serif); font-size: 44px; line-height: 1.1;
  background: var(--bo-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; margin-bottom: var(--bo-s-2);
}
.regler-anzeige .je-monat {
  font-family: var(--bo-font-sans); font-size: 14px;
  color: var(--bo-slate-500); -webkit-text-fill-color: var(--bo-slate-500);
}

/* --fuellung setzt das Skript beim Ziehen. Der gefuellte Teil ist damit
   dieselbe Rueckmeldung wie die Zahl daneben, nur ohne Buchstaben. */
input[type="range"].preis-regler {
  --fuellung: 30%;
  width: 100%; height: 32px; margin: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; background: transparent;
}
input[type="range"].preis-regler::-webkit-slider-runnable-track {
  height: 8px; border-radius: var(--bo-r-pill);
  background: linear-gradient(90deg, var(--bo-gold) var(--fuellung), var(--bo-border-strong) var(--fuellung));
}
input[type="range"].preis-regler::-moz-range-track {
  height: 8px; border-radius: var(--bo-r-pill);
  background: linear-gradient(90deg, var(--bo-gold) var(--fuellung), var(--bo-border-strong) var(--fuellung));
}
input[type="range"].preis-regler::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; margin-top: -8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bo-gold-light); border: 2px solid var(--bo-paper);
  box-shadow: var(--bo-glow-gold);
}
input[type="range"].preis-regler::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bo-gold-light); border: 2px solid var(--bo-paper);
  box-shadow: var(--bo-glow-gold);
}
input[type="range"].preis-regler:focus-visible { outline: 2px solid var(--bo-gold); outline-offset: 6px; }

.regler-enden {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--bo-slate-500); margin-top: var(--bo-s-2);
}

@media (max-width: 640px) {
  .karussell-buehne { min-height: 420px; }
  .folie { padding: var(--bo-s-4); }
  .folie h3 { font-size: 22px; }
  .folie-andere > div { grid-template-columns: 92px 1fr; gap: var(--bo-s-2); }
  .regler-anzeige { font-size: 36px; }
}

/* Wer Bewegung abgestellt hat, bekommt den Wechsel ohne Weg — sichtbar
   bleibt trotzdem alles, nur eben sofort. */
@media (prefers-reduced-motion: reduce) {
  .folie { transition: none; transform: none; }
  .punkt { transition: none; }
}

/* Der Countdown bis zum offiziellen Start (countdown.js).

   ⚠️ Die Ziffern laufen in `tabular-nums`: Sonst sind die Zahlen
   unterschiedlich breit, und der ganze Block zuckt bei jedem Sekundenwechsel
   ein Stueck hin und her. Bei etwas, das 86.400 Mal am Tag weiterzaehlt,
   faellt das auf. */
.countdown { margin: 0 0 var(--bo-s-4); }
.cd-titel {
  margin: 0 0 var(--bo-s-2);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bo-slate-500);
}
.cd-reihe { display: flex; gap: var(--bo-s-3); flex-wrap: wrap; }
.cd-feld {
  display: flex; flex-direction: column; align-items: center;
  min-width: 64px;
  padding: var(--bo-s-2) var(--bo-s-3);
  border: 1px solid var(--bo-border); border-radius: 12px;
}
.cd-zahl {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cd-wort { font-size: 12px; color: var(--bo-slate-500); }
.cd-gestartet { margin: 0; font-weight: 600; }
/* Der Hinweis auf das Instagram-Live haengt am Countdown, ist aber nicht
   Teil von ihm: Der Zaehler wird vom Skript neu gezeichnet, dieser Satz
   steht fest in der Seite und bleibt auch ohne JavaScript stehen. */
.cd-live { margin: var(--bo-s-2) 0 var(--bo-s-4); font-size: 15px; color: var(--bo-slate-500); }

@media (max-width: 640px) {
  .cd-reihe { gap: var(--bo-s-2); }
  .cd-feld { min-width: 56px; padding: var(--bo-s-2); }
  .cd-zahl { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   Vor dem Start: Store-Marken als Kacheln, mit dem Datum darunter
   ---------------------------------------------------------------------------
   Bis Freitag fuehrt keiner der beiden Store-Links auf eine Seite, auf der man
   die App bekommt. Ein Knopf, der ins Leere fuehrt, kostet Vertrauen.

   ⚠️ Der erste Anlauf legte eine Plakette MITTEN AUF die Marke und faerbte sie
   `var(--bo-ink)` mit weisser Schrift. Auf dieser Seite ist `--bo-ink` aber
   `#E6EDF7`, also fast weiss — sie ist die Textfarbe auf dunklem Grund, nicht
   der Grund selbst. Ergebnis: weiss auf weiss, und die Marke darunter
   verdeckt. Jetzt bleiben die Marken frei, und wann es losgeht, steht als
   eigene Zeile darunter — dort kann es auch niemand uebersehen.
*/
.store-bald {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 9px; cursor: default;
  border: 1px solid var(--bo-border-strong); border-radius: 12px;
  background: var(--bo-surface-alt);
}

/* ---------------------------------------------------------------------------
   Bildschirmfuellendes Blatt — wiederverwendbar
   ---------------------------------------------------------------------------
   Bisher stand dieses Muster nur inline in app/index.html, fuer den
   Bestaetigungs-Dialog (dialoge.js). static/chat/index.html hat keinen
   solchen Block; der Sprachwaehler (sprachwahl.js, Auftrag 6.7) braucht ihn
   aber auf BEIDEN Seiten. Deshalb hier zusaetzlich, geteilt — die inline
   Kopie in app/index.html bleibt unveraendert stehen (identische Werte,
   keine Kollision), um den bestehenden Dialog nicht anzufassen. */
.sheet {
  position: fixed; inset: 0; background: rgba(4,7,14,.86); display: flex;
  align-items: center; justify-content: center; padding: 20px; z-index: 2147483000;
}
.sheet[hidden] { display: none; }
.sheet > .card { max-width: 460px; width: 100%; max-height: 86vh; overflow-y: auto; }

/* Sprachwaehler-Zeile: volle Breite, textstart-buendig (nicht "left" — Auftrag
   6.11, RTL-Sprachen sollen sich spaeter ohne Umbau einfuegen). Keine feste
   Hoehe: "Slovenščina" ist laenger als "DE", der Umbau ist der Sinn davon. */
.sprachwahl-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bo-s-3);
  width: 100%; text-align: start; margin-bottom: 6px;
  padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(127,127,127,.25);
  background: none; color: inherit; cursor: pointer; font: inherit; font-size: 15px;
}
.sprachwahl-zeile:hover { border-color: var(--bo-gold); }
.sprachwahl-zeile.aktiv { border-color: var(--bo-gold); background: rgba(212,175,55,.10); }
.store-bald img { display: block; filter: grayscale(1); opacity: 0.72; }
/* Gold traegt den Wert und die Handlung (siehe Kopf dieser Datei). Hier traegt
   es die Zusage: es gibt einen Zeitpunkt, und er ist genannt. */
.store-wann {
  display: flex; align-items: center; gap: 9px;
  margin: var(--bo-s-3) 0 0; font-size: 15px; font-weight: 600;
  color: var(--bo-gold-light);
}
.store-wann::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%; background: var(--bo-gold);
}

/* ---------------------------------------------------------------------------
   Das Instagram-Live zum Start
   ---------------------------------------------------------------------------
   Es stand als graue Nebenzeile unter dem Countdown und las sich wie eine
   Fussnote. Es ist aber der Anlass. Jetzt mit Zeichen, Marke und Zeitpunkt.

   Datum und Uhrzeit kommen aus derselben Quelle wie der Countdown daneben
   (static/assets/js/countdown.js: 2026-09-18T17:00:00Z = Freitag, 18.09.,
   19:00 Wiener Zeit). Das Live ist „zum Start" — Karls Angabe vom 14.09.

   Das Rosa ist Instagrams Farbe und als fremde Marke erkennbar; es tritt der
   Handlungssprache der Seite (Gold = Wert, Rot = die eine Handlung) nicht in
   die Quere. Auf `--bo-surface-alt` (#0E1626) traegt #E1306C 4.6:1.
*/
.live-kasten {
  display: flex; gap: var(--bo-s-3); align-items: flex-start;
  border: 1px solid var(--bo-border-strong); border-left: 3px solid #E1306C;
  border-radius: 14px; padding: var(--bo-s-3) var(--bo-s-4);
  margin: var(--bo-s-3) 0 var(--bo-s-4); background: var(--bo-surface-alt);
}
.live-zeichen { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 3px; }
.live-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 5px; }
.live-marke {
  display: inline-flex; align-items: center; gap: 6px;
  background: #E1306C; color: #fff; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
}
.live-marke::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: live-puls 2s ease-in-out infinite;
}
/* Wer weniger Bewegung eingestellt hat, bekommt den Punkt ohne Puls — er
   traegt die Botschaft auch still. */
@media (prefers-reduced-motion: reduce) { .live-marke::before { animation: none; } }
@keyframes live-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.live-wann { font-weight: 700; color: var(--bo-ink); font-size: 15px; }
.live-text { margin: 0 0 var(--bo-s-3); font-size: 15px; color: var(--bo-slate-700); }
/* Der Knopf zum Erinnern traegt Instagrams Farbe und Zeichen — er fuehrt
   dorthin, also sieht er danach aus. Karl, 15.09.2026: „errinnerung
   aktivieren muss ein button sein mit ig logo".
   Er nimmt der Warteliste nichts weg: Das Signalrot der einen Handlung
   (siehe Kopf dieser Datei) bleibt dem Formular vorbehalten, dieser hier ist
   erkennbar eine fremde Marke. #E1306C traegt weisse Schrift mit 4.7:1. */
.btn.ig {
  background: #E1306C; color: #fff;
  box-shadow: 0 10px 28px rgba(225, 48, 108, 0.28);
  padding: 11px 19px; font-size: 15px;
}
.btn.ig:hover { color: #fff; }
.btn.ig img { display: block; width: 18px; height: 18px; }

/* Live-Event mit Anmeldung (BlueAgency-Skript, docs/AUFTRAG-2026-09-26-LIVE-EVENTS.md).
   Derselbe Kasten wie das Instagram-Live, aber in den Farben der Seite: das
   Rosa oben ist Instagrams Marke, dieses Event ist unser eigenes. Rot fuer
   LIVE (weiss auf #C62828 = 5,6:1), Gold fuer den Anmeldeknopf wie jeder
   .btn. Das Skript legt seine Grundoptik in :where() ab (Spezifitaet 0) und
   liest die --bl-*-Variablen. */
.live-kasten.live-event {
  flex-direction: column; align-items: stretch; gap: var(--bo-s-2);
  border-left-color: var(--bo-rot);
  --bl-akzent: var(--bo-grad); --bl-akzent-text: #12100a;
  --bl-rand: var(--bo-border-strong); --bl-radius: var(--bo-r-sm);
  --bl-feld-bg: rgba(255, 255, 255, 0.04);
}
.live-event .live-kopf { margin: 0; }
.live-event .live-marke { background: var(--bo-rot); }
.live-event .bl-f { max-width: none; }
.live-event .bl-titel { font-size: 18px; color: var(--bo-ink); }
.live-event .bl-zeit { font-weight: 700; font-size: 15px; color: var(--bo-ink); opacity: 1; }
.live-event .bl-knopf { border-radius: var(--bo-r-pill); font-weight: 700; box-shadow: var(--bo-glow-gold); }
/* Seit 27.09.2026 zeigt das Skript Untertitel und Beschreibung - VOR dem
   Datum. Am Handy stand das Formular dadurch einen Bildschirm tiefer
   (gemessen bei 390 px). Hier: Datum direkt unter den Titel, Beschreibung
   auf drei Zeilen. Der volle Text steht im Newsletter und in den Mails. */
.live-event .bl-f > * { order: 5; }
.live-event .bl-live { order: 0; }
.live-event .bl-titel { order: 1; }
.live-event .bl-untertitel { order: 2; }
.live-event .bl-zeit, .live-event .bl-termine { order: 3; }
.live-event .bl-beschreibung {
  order: 4; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
/* Kein leerer Kasten im Heldenbereich: ohne geplantes Event, bei einem
   Fehler und solange die Antwort noch fehlt, bleibt er weg. Ein Browser ohne
   :has() zeigt stattdessen den data-leer-Text — kein Schaden. */
.live-event:not(:has(#bop-live[data-bl-status])),
.live-event:has(#bop-live[data-bl-status="keins"]),
.live-event:has(#bop-live[data-bl-status="fehler"]) { display: none; }

/* ---------------------------------------------------------------------------
   Der Wartelistenpreis und der Weg zum Rabatt
   ---------------------------------------------------------------------------
   Der Kasten nannte „25 % Rabatt" als Aufzaehlungspunkt, ohne je eine Zahl zu
   zeigen und ohne zu sagen, wie man da hinkommt. Ein Prozentsatz ohne Preis
   ist eine Behauptung; zwei Zahlen und drei Schritte sind ein Angebot.
   8,99 € minus 25 % sind 6,74 €.
*/
.wl-preis { margin: 0 0 var(--bo-s-2); display: flex; align-items: baseline; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wl-preis .alt { text-decoration: line-through; color: var(--bo-slate-500); font-size: 20px; }
.wl-preis .neu { font-size: 38px; font-weight: 700; color: var(--bo-ink); line-height: 1.05; }
.wl-preis .je { color: var(--bo-slate-500); font-size: 15px; }
.wl-marke {
  display: inline-block; background: var(--bo-grad); color: #0A0E18;
  border-radius: 999px; padding: 4px 13px;
  font-size: 13px; font-weight: 700; margin: 0 0 var(--bo-s-4);
}
.wl-wie { margin: var(--bo-s-4) 0 var(--bo-s-2); text-align: left; font-weight: 700; color: var(--bo-ink); font-size: 15px; }
.wl-schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 0; text-align: left; }
/* ⚠️ Der Haken aus `.price-card li::before` muss hier weg — diese Liste ist
   eine Reihenfolge, kein Vorteilskatalog. */
.price-card .wl-schritte li { padding-left: 30px; position: relative; margin-bottom: 9px; color: var(--bo-slate-700); font-size: 15px; }
.price-card .wl-schritte li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bo-gold); color: #0A0E18;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}