/* ============================================================================
 * FLOTTENSCHACH — Webauftritt
 * ----------------------------------------------------------------------------
 * Von Hand geschrieben, ohne Framework — wie das Spiel selbst. Die Farbwerte
 * und die Formensprache (abgeschrägte Ecken, Bernstein für Zahlen, Cyan für
 * Akzente) sind aus styles/game.css übernommen, damit die Seite und das Spiel
 * erkennbar dasselbe sind.
 *
 * WER HIER ETWAS ÄNDERT, schaut vorher in styles/game.css nach: Die Token unten
 * sind eine Kopie, keine Ableitung. Sie laufen sonst auseinander.
 * ========================================================================== */

:root {
  --bg: #071019;
  --panel: #101c27;
  --panel2: #16222e;
  --line: #22384a;
  --ink: #e8f2f7;
  --dim: #9db4c0;
  --faint: #5b7284;
  --cyan: #3ddcff;
  --cyanrgb: 61, 220, 255;
  --red: #ff5148;
  --redrgb: 255, 81, 72;
  --amber: #ffb547;
  --amberrgb: 255, 181, 71;
  --ok: #59f0a6;
  --ac: var(--cyan);
  --acrgb: var(--cyanrgb);

  --f-disp: 'Bahnschrift', 'Bahnschrift Condensed', 'Arial Narrow',
            'Roboto Condensed', 'Liberation Sans Narrow', sans-serif;
  --f-mono: 'Consolas', 'SF Mono', 'Menlo', 'DejaVu Sans Mono', monospace;
  --f-body: 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --rand: clamp(18px, 5vw, 40px);
  --breit: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* Für Tastatur und Vorlesehilfen: der Sprung an den Inhalt vorbei an der
   Navigation. Sichtbar erst, wenn er den Fokus hat. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--panel);
  border: 1px solid var(--cyan);
}
.skip:focus { left: 12px; top: 12px; }

.nurlesen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Die abgeschrägte Ecke des Spiels — sie ist die halbe Wiedererkennung. */
.chamf {
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px),
                     calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.wrap {
  width: min(var(--breit), 100%);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ---------------------------------------------------------------- Kopf --- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(12px);
  background: rgba(7, 16, 25, .82);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.kopf.fest {
  border-bottom-color: var(--line);
  background: rgba(7, 16, 25, .94);
}

.kopf .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
}

.marke {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--f-disp);
  font-size: 19px;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.marke b { color: var(--cyan); font-weight: 400; }

/* Das Zeichen steht frei, ohne Rahmen und ohne Scheibe.
 *
 * SCHÄRFE IST HIER EINE FRAGE DER QUELLGRÖSSE, nicht der Darstellung: Die
 * Datei liegt mit 306 × 320 vor und wird auf 38 Pixel gezeigt. Das sind
 * reichlich acht Bildpunkte je dargestelltem Punkt, also genug für 2x- und
 * 3x-Bildschirme, auf denen eine knapp gerechnete Grafik zuerst ausfranst.
 * Wer die Größe hier erhöht, prüft, ob die Quelle noch reicht.
 *
 * `height: auto` mit gesetzten width/height-Attributen im Markup: Der Browser
 * kennt damit das Seitenverhältnis vor dem Laden und reserviert den Platz, die
 * Kopfzeile springt beim Nachladen also nicht.
 *
 * `alt=""`, weil der Markenname direkt daneben steht. Eine Vorlesehilfe sagte
 * sonst zweimal dasselbe. */
.marke .logo {
  flex: none;
  width: 38px;
  height: auto;
  /* Ein enger dunkler Rand hebt die Silhouette vom Hintergrund ab, ein weiter
     cyanfarbener nimmt die Leuchtkanten der Grafik auf. Kein Rahmen, nur
     Trennung. */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .85))
          drop-shadow(0 0 8px rgba(var(--acrgb), .4));
  transition: filter .2s ease;
}

.marke:hover .logo {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .85))
          drop-shadow(0 0 12px rgba(var(--acrgb), .7));
}

/* ---- Burger ----
   Erscheint erst, wenn die Zeile zu eng wird. Drei Balken, die sich beim
   Öffnen zum Kreuz legen: Der Zustand steht damit im Knopf selbst und nicht
   nur im geöffneten Menü. */
.burger {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
}

.burger span {
  position: absolute;
  left: 11px;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform .22s ease, opacity .18s ease;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 26px; }

.burger[aria-expanded="true"] { border-color: rgba(var(--acrgb), .6); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.kopfnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  /* Ohne dies schrumpft ein Flex-Element nicht unter seine Inhaltsbreite — die
     Rechtsseiten mit ihren langen Wörtern („Nutzungsbedingungen") schoben die
     Zeile dann über den Rand hinaus, gemessen 413 px bei 390 px Bildbreite. */
  min-width: 0;
}

.kopfnav a {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding: 7px 10px;
}
.kopfnav a:hover { color: var(--cyan); }

/* Sprachumschalter: zwei echte Links auf zwei echte Adressen. Kein
   JavaScript-Tausch — Suchmaschinen sollen beide Fassungen finden. */
.sprachen {
  display: flex;
  gap: 2px;
  border: 1px solid var(--line);
  padding: 3px;
}
.sprachen a {
  padding: 4px 9px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
}
.sprachen a[aria-current="true"] {
  background: rgba(var(--acrgb), .16);
  color: var(--cyan);
}

/* ---------------------------------------------------------------- Hero --- */

/* Die Kopfzeile klebt, steht aber im Fluss: Ihre Höhe geht von der Bildhöhe
   ab, sonst reichte ein 100vh hoher Hero um genau diese 64 Pixel zu weit und
   der nächste Abschnitt lugte doch wieder hervor. */
:root { --kopfhoehe: 64px; }

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 11vh, 110px) 0 clamp(48px, 9vh, 96px);
  background:
    radial-gradient(1100px 700px at 50% 22%, rgba(var(--acrgb), .13), transparent 68%),
    linear-gradient(180deg, rgba(7, 16, 25, .55) 0%, var(--bg) 92%),
    var(--hero-bild) var(--held-position, center)/cover no-repeat;
}

/* Auf dem Telefon linksbündig statt mittig — DIESELBE Regel und derselbe
   Umbruch wie in der App (styles/game.css: --scene-position). Bei
   `cover` auf einem hohen, schmalen Ausschnitt schneidet `center` links und
   rechts gleich viel weg; das Motiv liegt aber links, und mittig zentriert
   verliert man genau es. Zwei Auftritte desselben Spiels sollen sich außerdem
   nicht unterschiedlich anfühlen. */
@media (max-width: 639px) {
  .hero { --held-position: left center; }
}

.hero .wrap { position: relative; z-index: 2; text-align: center; }

/* Am Schreibtisch füllt der Hero das Bild GENAU aus: Die erste Ansicht zeigt
   ihn und sonst nichts. Vorher lugte der nächste Abschnitt darunter hervor,
   und ein halb angeschnittener Titel liest sich wie ein Layoutfehler.

   `min-height`, nicht `height`: Bei sehr flachen Fenstern (Laptop im
   Querformat, geöffnete Entwicklerwerkzeuge) darf der Inhalt wachsen, statt
   abgeschnitten zu werden. Erst ab 900 px, weil auf dem Telefon der Inhalt
   ohnehin höher ist als das Bild und die Regel dort nichts beitrüge.

   `100dvh` mit `100vh` als Rückfall: Auf mobilen Browsern meint `vh` die
   Höhe OHNE eingeblendete Adressleiste und schießt damit über. */
@media (min-width: 900px) {
  .hero {
    min-height: calc(100vh - var(--kopfhoehe));
    min-height: calc(100dvh - var(--kopfhoehe));
    display: flex;
    align-items: center;
    padding-block: clamp(40px, 6vh, 80px);
  }
  .hero > .wrap { width: min(var(--breit), 100%); }
}

.kicker {
  font-family: var(--f-mono);
  font-size: clamp(10px, 2.4vw, 12px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--amber);
}

h1 {
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(38px, 9vw, 92px);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 14px 0 10px;
}
h1 .b { color: var(--cyan); text-shadow: 0 0 42px rgba(var(--acrgb), .5); }

.tagline {
  font-size: clamp(15px, 2.6vw, 20px);
  color: var(--dim);
  max-width: 34em;
  margin: 0 auto 8px;
}

/* Die Figurenzeile aus dem Startbildschirm des Spiels. */
.figuren {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2.4vw, 20px);
  margin: 20px 0 30px;
  font-size: clamp(22px, 5vw, 38px);
  color: var(--faint);
}
.figuren span { animation: heben 4s ease-in-out infinite; }
.figuren span:nth-child(2) { animation-delay: .3s; }
.figuren span:nth-child(3) { animation-delay: .6s; }
.figuren span:nth-child(4) { animation-delay: .9s; }
.figuren span:nth-child(5) { animation-delay: 1.2s; }
.figuren span:nth-child(6) { animation-delay: 1.5s; }

@keyframes heben {
  0%, 100% { transform: translateY(0); color: var(--faint); }
  50% { transform: translateY(-7px); color: var(--cyan); }
}

/* Radarschein hinter dem Titel — dasselbe Motiv wie im Spiel.
 *
 * Jedes Maß hängt an --d, dem Durchmesser des Suchstrahls; die Ringe sind
 * Vielfache davon. Damit wächst der Schirm mit dem Fenster, statt auf einem
 * großen Monitor als Briefmarke in der Mitte zu stehen.
 *
 * `vmax` statt `vw`: Auf einem hohen, schmalen Telefonfenster ist die Breite
 * das falsche Maß — dort bliebe ein an `vw` gebundener Schirm winzig, obwohl
 * reichlich Fläche da ist. Die untere Schranke hält ihn auf dem Telefon bei
 * seiner bisherigen Größe, die obere verhindert, dass auf sehr breiten
 * Schirmen nur noch eine schwach gekrümmte Linie zu sehen ist. */
.radar {
  --d: clamp(560px, 56vmax, 1180px);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
}
.radar i, .radar b, .radar u {
  position: absolute;
  top: 50%; left: 50%;
}
.radar i {
  width: calc(var(--d) * var(--f));
  height: calc(var(--d) * var(--f));
  translate: -50% -50%;
  border: 1px solid rgba(var(--acrgb), .16);
  border-radius: 50%;
}
.radar i:nth-child(1) { --f: .571; }
.radar i:nth-child(2) { --f: 1; }
.radar i:nth-child(3) { --f: 1.464; }
.radar i:nth-child(4) { --f: 2; }
/* Der Suchstrahl. Die Richtung des Verlaufs ist hier nicht Geschmack, sondern
   Physik: Ein Radar zeichnet eine SCHARFE Linie und lässt dahinter den
   Nachleuchtschweif langsam verglimmen.
 *
 * Der erste Entwurf hatte es genau andersherum, und der Grund ist unauffällig:
 * Die Fläche dreht im Uhrzeigersinn, ein FESTER Punkt auf dem Schirm
 * durchläuft den Verlauf deshalb RÜCKWÄRTS, von großen zu kleinen Winkeln.
 * Stand die helle Kante bei 0 Grad, wurde der Punkt also erst allmählich
 * heller und verlosch dann schlagartig. Es leuchtete vor dem Strahl statt
 * hinter ihm.
 *
 * Jetzt liegt das Helle am Ende des Kreises: Der Punkt sieht zuerst die harte
 * Kante bei 360 Grad, danach nimmt es über rund hundert Grad ab. Der Sprung
 * von 360 auf 0 IST die Strahllinie. */
.radar b {
  width: var(--d); height: var(--d);
  translate: -50% -50%;
  background: conic-gradient(from 0deg,
      rgba(var(--acrgb), 0) 0deg,
      rgba(var(--acrgb), 0) 258deg,
      rgba(var(--acrgb), .10) 320deg,
      rgba(var(--acrgb), .26) 360deg);
  border-radius: 50%;
  animation: drehen 7s linear infinite;
}

@keyframes drehen { to { rotate: 360deg; } }

/* Drei Kontakte auf dem Schirm. Sie blinken nicht nach Belieben, sondern genau
   dann, wenn der Strahl über sie streicht — alles andere sähe man sofort als
   Zufall.
 *
 * Der Takt: Ein Umlauf dauert 7 s, die harte Kante des Strahls steht beim
 * Start auf 12 Uhr und wandert im Uhrzeigersinn. Ein Punkt beim Winkel φ (von
 * oben im Uhrzeigersinn) wird also nach 7 s · φ / 360° getroffen. Eine
 * NEGATIVE Verzögerung schiebt den Anlauf dorthin: −(7 s − Trefferzeit).
 *
 * Wer einen Punkt versetzt, rechnet beides neu — Lage UND Verzögerung. Die
 * Lage steht als Vielfaches von --d da, damit die Punkte mit dem Schirm
 * wachsen: x = f · sin φ, y = −f · cos φ.
 *
 * Das Nachleuchten dauert so lange wie der Schweif des Strahls (rund 100° oder
 * 2 s), damit beides zusammen verglimmt statt gegeneinander.
 *
 * DIE FAHRT: Ein Kontakt steht nicht still, er zieht zwischen zwei Erfassungen
 * ein Stück weiter — und zwar nur dann. Solange er leuchtet, steht er, denn
 * ein wandernder Leuchtpunkt wäre kein Radarbild mehr, sondern eine Leuchtdiode
 * auf Reisen.
 *
 * Warum die Fahrt genau auf dem Strahl liegt und nicht quer dazu: Der Anlauf
 * hängt an einer festen Verzögerung, also am WINKEL. Wer den Winkel zwischen
 * zwei Erfassungen verändert, lässt den Punkt aufleuchten, während der Strahl
 * woanders steht. Auf dem Strahl darf sich die Entfernung dagegen ändern, so
 * viel man will — der Kontakt kommt näher oder zieht ab, der Takt bleibt.
 *
 * Vier Etappen je Umlauf des Wanderns (28 s = 4 × 7 s): Bei 0/25/50/75 % steht
 * er still (die 7 % Leuchtdauer), dazwischen fährt er. Weil die Verzögerung
 * −(28 s − Trefferzeit) den Zyklusanfang auf die erste Erfassung legt, gelten
 * dieselben Prozentwerte für alle drei Punkte. */
.radar u {
  /* Ein kräftigeres Rot als --red: Der Kontakt liegt hinter der halben
     Deckkraft des Schirms, ein weicheres Korallenrot käme dort rosa an. */
  --rot: 255, 40, 30;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgb(var(--rot));
  box-shadow: 0 0 13px 3px rgba(var(--rot), .8);
  opacity: 0;
  animation: kontakt 7s linear infinite,
             wandern 28s ease-in-out infinite;
}
/* φ = 52°, Entfernung .33 → .295 → .265 → .30 */
.radar u:nth-of-type(1) {
  --x0: .2600; --y0: -.2032;
  --x1: .2325; --y1: -.1816;
  --x2: .2088; --y2: -.1631;
  --x3: .2364; --y3: -.1847;
  animation-delay: -5.99s, -26.99s;
}
/* φ = 168°, Entfernung .42 → .445 → .41 → .385 */
.radar u:nth-of-type(2) {
  --x0: .0873; --y0: .4108;
  --x1: .0925; --y1: .4353;
  --x2: .0852; --y2: .4010;
  --x3: .0800; --y3: .3766;
  animation-delay: -3.73s, -24.73s;
}
/* φ = 288°, Entfernung .38 → .35 → .375 → .405 */
.radar u:nth-of-type(3) {
  --x0: -.3614; --y0: -.1174;
  --x1: -.3329; --y1: -.1082;
  --x2: -.3566; --y2: -.1159;
  --x3: -.3852; --y3: -.1252;
  animation-delay: -1.40s, -22.40s;
}

@keyframes kontakt {
  0%   { opacity: 0;   transform: scale(.4); }
  2%   { opacity: 1;   transform: scale(1.3); }
  7%   { opacity: .85; transform: scale(1); }
  28%  { opacity: 0;   transform: scale(1); }
  100% { opacity: 0;   transform: scale(.4); }
}

/* Getrennte Eigenschaften, deshalb stören sich Fahrt und Blinken nicht: Das
   Wandern schreibt `translate`, das Aufblinken `transform`. */
@keyframes wandern {
  0%,   7% { translate: calc(var(--d) * var(--x0)) calc(var(--d) * var(--y0)); }
  25%, 32% { translate: calc(var(--d) * var(--x1)) calc(var(--d) * var(--y1)); }
  50%, 57% { translate: calc(var(--d) * var(--x2)) calc(var(--d) * var(--y2)); }
  75%, 82% { translate: calc(var(--d) * var(--x3)) calc(var(--d) * var(--y3)); }
  100%     { translate: calc(var(--d) * var(--x0)) calc(var(--d) * var(--y0)); }
}

.hero-aktionen {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

/* --------------------------------------------------------------- Knopf --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--f-disp);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: #0a1723;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: filter .15s, transform .15s, border-color .15s;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px),
                     calc(100% - 11px) 100%, 0 100%, 0 11px);
}
.btn:hover { filter: brightness(1.28); transform: translateY(-2px); color: var(--ink); }

.btn.primary {
  color: #04131c;
  border-color: transparent;
  background: linear-gradient(180deg, rgba(var(--acrgb), .95), rgba(var(--acrgb), .58));
}

.btn.amber {
  color: var(--amber);
  border-color: rgba(var(--amberrgb), .5);
}
.btn.amber:hover { background: rgba(var(--amberrgb), .1); }

.btn svg { width: 20px; height: 20px; flex: none; }

/* Ein Knopf, der (noch) nirgendwohin führt, sieht auch nicht so aus. */
.btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: .55;
  filter: grayscale(.35);
}

.hinweis-bald {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--faint);
}

/* ------------------------------------------------------------ Abschnitt --- */

section { padding: clamp(52px, 9vh, 96px) 0; }

.abschnitt-kopf { text-align: center; margin-bottom: clamp(30px, 5vh, 54px); }

h2 {
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(26px, 5vw, 44px);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ac);
  text-shadow: 0 0 30px rgba(var(--acrgb), .35);
}

.abschnitt-kopf p {
  color: var(--dim);
  max-width: 42em;
  margin: 12px auto 0;
}

.raster {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.karte {
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, transform .2s;
}
.karte:hover { border-color: rgba(var(--acrgb), .5); transform: translateY(-3px); }

.karte h3 {
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}

.karte p { color: var(--dim); font-size: 14.5px; }

.karte .sym {
  font-size: 30px;
  line-height: 1;
  color: var(--cyan);
  margin-bottom: 2px;
}

/* --------------------------------------------------------- Spielarten ---- */

.variante {
  padding: 0 0 22px;
  overflow: hidden;
}

.variante .bild {
  aspect-ratio: 16 / 6;
  background: #0a1520 var(--v-bild) center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}

.variante .inhalt { padding: 18px 24px 0; display: flex; flex-direction: column; gap: 8px; }

.variante h3 { color: var(--cyan); }

.vmeta {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--amber);
}

/* ------------------------------------------------------------- Waffen ---- */

/* Drei je Reihe, nicht vier: Sechs Waffen gehen als 2 × 3 glatt auf, als 4 + 2
   bleibt die zweite Reihe halb leer stehen und sieht aus wie ein Rest.
   Deshalb hier eine FESTE Spaltenzahl statt `auto-fit` — das richtet sich nach
   dem Platz und nicht nach der Anzahl und käme auf breiten Schirmen wieder auf
   vier. Wer eine siebte Waffe ergänzt, denkt hier nach. */
.waffen {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 880px) {
  .waffen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .waffen { grid-template-columns: minmax(0, 1fr); }
}

.waffe {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
}

.waffe .fig {
  font-size: 30px;
  line-height: 1.1;
  color: var(--amber);
  flex: none;
  width: 34px;
  text-align: center;
}

.waffe b {
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.waffe p { font-size: 13.5px; color: var(--dim); margin-top: 2px; }

/* ---------------------------------------------------------------- Zahl --- */

.zahlen {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  text-align: center;
}

.zahl b {
  display: block;
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 46px);
  color: var(--amber);
  letter-spacing: .04em;
}

.zahl span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ----------------------------------------------------------------- FAQ --- */

.faq { display: flex; flex-direction: column; gap: 10px; }

details {
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  padding: 0 20px;
}
details[open] { border-color: rgba(var(--acrgb), .4); }

summary {
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--f-disp);
  font-size: 15px;
  letter-spacing: .1em;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: '+';
  color: var(--cyan);
  font-family: var(--f-mono);
  font-size: 18px;
  flex: none;
}
details[open] summary::before { content: '−'; }

details p { padding-bottom: 18px; color: var(--dim); font-size: 14.5px; }

/* -------------------------------------------------------------- Fußzeile - */

.fuss {
  border-top: 1px solid var(--line);
  padding: 44px 0 40px;
  background: #050c13;
}

.fuss .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 48px;
  justify-content: space-between;
}

.fuss h4 {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}

.fuss ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.fuss a { font-size: 14px; text-decoration: none; color: var(--dim); }
.fuss a:hover { color: var(--cyan); }

/* Die Wege ins Spiel — als Abzeichen, nicht als Textzeilen. Ein Store-Eintrag
   wird gesucht, nicht gelesen: Das Zeichen trägt die Erkennung, der Zusatz
   darunter sagt, ob es ihn schon gibt. */
.storeliste { gap: 9px; }

.storelink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
  text-decoration: none;
  transition: border-color .15s, background .15s;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px),
                     calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.storelink:hover {
  border-color: rgba(var(--acrgb), .6);
  background: rgba(var(--acrgb), .08);
}

.storelink svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--cyan);
}

.storelink span { display: flex; flex-direction: column; line-height: 1.25; }

.storelink b {
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink);
}

.storelink i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--faint);
}

/* Noch nicht bedient: sichtbar, aber nicht anklickbar. Ein Link auf eine
   404-Seite des Stores wäre schlechter als ein erkennbar wartender Eintrag. */
.storelink[aria-disabled="true"] {
  pointer-events: none;
  opacity: .5;
}
.storelink[aria-disabled="true"] svg { color: var(--faint); }

/* Der Abschluss trägt die Trennlinie über die GANZE Breite, nicht nur über
   die Textspalte. Vorher saß der Rand auf `.klein` INNERHALB des Wrappers und
   endete dort, wo dessen Breite endet — auf einem breiten Bildschirm ein
   Strich, der links und rechts in der Luft aufhört.

   Deshalb ein eigener, voll breiter Block außerhalb von `.wrap`. Kein
   `100vw`-Trick: Der zählt die Bildlaufleiste mit und schöbe die Seite
   waagerecht auf. */
.fuss-schluss {
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 20px;
}

/* Der innere Wrapper ist KEINE Spaltenreihe. Ohne diese Zeile erbt er über
   `.fuss .wrap` das Flex-Layout der Fußspalten samt `space-between` — der
   Absatz wird dann zum Flex-Element, schrumpft auf seine Inhaltsbreite und
   rutscht nach links. Zentriert wäre er dann nur noch in sich selbst. */
.fuss-schluss .wrap { display: block; }

.fuss .klein {
  text-align: center;
  font-size: 12.5px;
  color: var(--faint);
}

/* ------------------------------------------------------------ Rechtstext - */

.recht { padding-top: clamp(36px, 6vh, 64px); }

.recht .wrap { max-width: 800px; }

.recht h1 {
  font-size: clamp(28px, 5.5vw, 46px);
  color: var(--ac);
  margin-bottom: 6px;
}

.stand {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--faint);
  margin-bottom: 30px;
}

.recht h2 {
  font-size: clamp(18px, 3.2vw, 24px);
  letter-spacing: .08em;
  text-align: left;
  text-shadow: none;
  margin: 36px 0 12px;
}

.recht h3 {
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .1em;
  color: var(--ink);
  margin: 24px 0 8px;
}

.recht p, .recht li { color: var(--dim); font-size: 15px; }
.recht p { margin-bottom: 14px; }
.recht ul, .recht ol { margin: 0 0 16px 22px; display: flex; flex-direction: column; gap: 6px; }
.recht strong { color: var(--ink); }

.recht address { font-style: normal; color: var(--dim); margin-bottom: 16px; }

/* Tabellen laufen auf dem Telefon nicht aus dem Bild, sie rollen in sich. */
.tabellenrahmen { overflow-x: auto; margin-bottom: 18px; }

.recht table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 14px;
}
.recht th, .recht td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--dim);
}
.recht th {
  background: rgba(var(--acrgb), .07);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 400;
}

.merk {
  border-left: 3px solid var(--amber);
  background: rgba(var(--amberrgb), .07);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.merk p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- Einblenden ------ */
/* Abschnitte fahren beim Hereinrollen ein. Die Umsetzung steht in site.js —
   ohne JavaScript bleibt alles sichtbar, deshalb wird die Startlage dort
   gesetzt und nicht hier. */
.rein {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.rein.da { opacity: 1; transform: none; }

/* Wer weniger Bewegung eingestellt hat, bekommt sie nicht. Betrifft auch die
   Zeitgeber in site.js — dort wird dieselbe Abfrage gestellt. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .figuren span, .radar b { animation: none; }
  /* Die Kontakte bleiben, sie hören nur auf zu blinken und zu fahren: still
     sichtbar statt dauerhaft unsichtbar — sonst fehlten sie im Bild. Die Lage
     muss hier von Hand stehen, sonst läge ohne die Fahrt alles im Mittelpunkt
     übereinander. */
  .radar u {
    animation: none;
    opacity: .5;
    transform: none;
    translate: calc(var(--d) * var(--x0)) calc(var(--d) * var(--y0));
  }
  .rein { opacity: 1; transform: none; transition: none; }
  .btn:hover, .karte:hover { transform: none; }
}

@media (max-width: 860px) {
  .fuss .wrap { gap: 22px 30px; }

  /* Ab hier klappt die Navigation hinter den Burger. Vorher brach sie auf
     zwei Zeilen um, was auf den Rechtsseiten mit ihren langen Wörtern
     („Nutzungsbedingungen") die halbe Kopfzeile fraß. Ausblenden allein wäre
     keine Lösung: Dann käme man von einer Rechtsseite nicht mehr zur nächsten.

     Die ausgeklappte Liste liegt ÜBER dem Inhalt statt ihn zu schieben. Ein
     Menü, das die Seite verrückt, verliert beim Schließen die Leseposition. */
  .burger { display: block; }

  .kopfnav a.weg720 { display: block; }

  .kopfnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px;
    background: rgba(7, 16, 25, .97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);

    /* Zu statt weg: `display:none` verlöre die Übergänge, und ein Menü, das
       ohne Bewegung erscheint, wirkt wie ein Fehler. `visibility` nimmt es
       trotzdem aus der Tabulatorreihenfolge. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }

  .kopf.offen .kopfnav {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .kopfnav a {
    padding: 13px 12px;
    font-size: 13px;
    border-bottom: 1px solid rgba(34, 56, 74, .55);
  }
  .kopfnav a:last-of-type { border-bottom: 0; }

  .sprachen {
    margin: 8px 12px 4px;
    align-self: flex-start;
  }
  .sprachen a { padding: 7px 14px; border-bottom: 0; }
}

@media (max-width: 400px) {
  .marke { font-size: 16px; letter-spacing: .18em; gap: 8px; }
  .marke .logo { width: 32px; }
}