/* ==========================================================================
   Fußballmanager 2600 -- die Website ("Starhopper"-Fassung)
   Übernommen aus dem Claude-Design-Projekt "FM2600 Landing Page".
   Dort war es React mit drei CDN-Skripten und Google Fonts; hier ist es
   schlichtes CSS mit lokalen Schriften -- die Regel bleibt: keine externen
   Dienste, läuft auch vom Stick.

   Die Seite ist ein Onepager. index.html ist die einzige Seite, und diese
   Datei ihr einziges Stylesheet; assets/css/site.css stammt aus der Zeit
   der Unterseiten und wird nirgends mehr eingebunden.
   ========================================================================== */

@import url('fonts.css');

/* --- Tokens ------------------------------------------------------------- */
/* 1:1 aus dem Designsystem uebernommen, damit sich Aenderungen dort spaeter
   wiederfinden lassen. Reihenfolge und Namen bleiben deshalb wie dort. */

:root {
  /* CRT-Dunkel */
  --crt-black:  #121016;
  --crt-deep:   #0C0A10;
  --surface-1:  #1A1720;
  --surface-2:  #231F2C;
  --surface-3:  #2D2839;
  --line-1:     #3A3448;
  --line-2:     #4C4560;

  /* Warmes Papier -- Boxart, helle Flaechen */
  --paper:      #F3EAD3;
  --paper-dim:  #DFD4B8;

  /* Vordergrund */
  --fg-1:       #F3EAD3;
  --fg-2:       #B7AECB;
  --fg-3:       #847C99;
  --fg-inverse: #121016;

  /* Regenbogen des Moduls -- das Markenspektrum */
  --ray-red:    #E8483F;
  --ray-orange: #F5A623;
  --ray-gold:   #FFC53D;
  --ray-green:  #3DDC84;
  --ray-cyan:   #3FD8E8;
  --ray-purple: #8E6BF7;

  /* Akzent -- Broadcast Amber */
  --accent:     #F5A623;
  --accent-hi:  #FFC14D;
  --accent-lo:  #C27F0A;
  --accent-ink: #121016;

  /* Rasengruen */
  --pitch:      #2FA84F;
  --pitch-deep: #1E7A38;
  --pitch-line: #E9F6EC;

  /* Semantik */
  --ok:     #3DDC84;
  --warn:   #FFC53D;
  --danger: #E8483F;
  --info:   #3FD8E8;

  --link:       var(--ray-cyan);
  --link-hover: var(--accent);
  --focus-ring: var(--ray-cyan);

  /* Schrift */
  --font-display:  'Press Start 2P', monospace;
  --font-body:     'Space Grotesk', system-ui, sans-serif;
  --font-terminal: 'VT323', monospace;

  /* Die Pixelschrift traegt weit -- die Grade bleiben darum klein.
     clamp() ist die einzige Zutat, die im Designsystem nicht steht:
     dort sind es feste Pixel, hier muss es auch auf ein Telefon passen. */
  --display-xl: clamp(26px, 6.2vw, 40px);
  --display-lg: clamp(20px, 3.6vw, 28px);
  --display-md: clamp(15px, 2.4vw, 20px);
  --display-sm: 14px;
  --display-xs: 10px;
  --display-leading: 1.5;

  --body-xl: 20px;
  --body-lg: 17px;
  --body-md: 15px;
  --body-sm: 13px;
  --body-xs: 11px;
  --body-leading: 1.6;

  --terminal-lg: 32px;
  --terminal-md: 22px;

  /* Raster von 4 Pixeln */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;
  --container: 1120px;
  --border-w: 2px;

  /* Harte Schatten ohne Weichzeichner -- das Erkennungsmerkmal */
  --shadow-hard-sm: 3px 3px 0 rgba(0, 0, 0, .55);
  --shadow-hard:    5px 5px 0 rgba(0, 0, 0, .55);
  --shadow-hard-lg: 8px 8px 0 rgba(0, 0, 0, .55);

  /* Phosphorschein -- nur fuer Text auf CRT-Schwarz */
  --glow-amber: 0 0 12px rgba(245, 166, 35, .45);
  --glow-green: 0 0 12px rgba(61, 220, 132, .4);

  --ease-snap: cubic-bezier(.2, .9, .3, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
}

/* --- Grundlage ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--crt-black);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}

/* height:auto ist Pflicht, nicht Kosmetik: die Bilder tragen im Markup ihre
   echten Masse als width/height (damit der Browser den Platz vorab kennt und
   nichts springt). Ohne height:auto gewinnt dann das Attribut -- 960 Pixel
   hoch bei 340 Pixel Breite. */
img { max-width: 100%; height: auto; display: block; }

/* Muss nach der img-Regel stehen und laut sein: ein eigenes display
   ueberstimmt sonst das hidden-Attribut, und ein verstecktes Bild zeigt
   weiter sein Ersatzsymbol samt Alt-Text. */
[hidden] { display: none !important; }

a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

::selection { background: var(--accent); color: var(--accent-ink); }

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

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-size: var(--display-xs);
  padding: 12px 18px;
}
.skip:focus { left: 12px; top: 12px; }

/* --- Bausteine aus dem Designsystem ------------------------------------- */

/* Regenbogenband -- waagerechtes Spektrum der Marke */
.sh-rainbow {
  height: 8px;
  background: linear-gradient(90deg,
    var(--ray-red) 0 16.6%, var(--ray-orange) 0 33.3%, var(--ray-gold) 0 50%,
    var(--ray-green) 0 66.6%, var(--ray-cyan) 0 83.3%, var(--ray-purple) 0 100%);
}

/* Zeilenraster einer Bildroehre. Liegt ueber allem, faengt aber keine
   Klicks ab -- sonst waeren die Knoepfe darunter nicht mehr erreichbar. */
.sh-scanlines { position: relative; }
.sh-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}

/* Knopf */
.fm-btn {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-1);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap),
              background var(--dur-fast);
}
.fm-btn--sm { font-size: 8px;  padding: 0 12px; height: 32px; }
.fm-btn--md { font-size: 10px; padding: 0 18px; height: 40px; }
.fm-btn--lg { font-size: 12px; padding: 0 24px; height: 48px; }

.fm-btn--primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent-lo); box-shadow: 3px 3px 0 var(--accent-lo);
}
.fm-btn--primary:hover {
  background: var(--accent-hi); color: var(--accent-ink);
  transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--accent-lo);
}
.fm-btn--primary:active {
  background: var(--accent-lo); transform: translate(2px, 2px); box-shadow: none;
}

.fm-btn--secondary {
  background: var(--surface-2); color: var(--fg-1);
  border-color: var(--line-2); box-shadow: var(--shadow-hard-sm);
}
.fm-btn--secondary:hover {
  background: var(--surface-3); color: var(--fg-1); transform: translate(-1px, -1px);
}
.fm-btn--secondary:active { transform: translate(2px, 2px); box-shadow: none; }

.fm-btn--ghost { background: transparent; color: var(--accent); }
.fm-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.fm-btn--ghost:active { color: var(--accent-lo); border-color: var(--accent-lo); }

/* Plakette */
.fm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 8px;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 10px 4px;
  border-radius: var(--radius-pill);
  border: 2px solid;
}
.fm-badge--info { color: var(--info);  border-color: var(--info); }
.fm-badge--warn { color: var(--warn);  border-color: var(--warn); }
.fm-badge--ok   { color: var(--ok);    border-color: var(--ok); }

/* --- Kopfzeile ---------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--crt-deep);
  border-bottom: 2px solid var(--line-1);
}
.topbar-in { display: flex; align-items: center; gap: var(--sp-5); min-height: 64px; }

/* Wortmarke: Bildmarke plus zweizeiliger Schriftzug. Der Schriftzug steht
   als Text da, nicht im SVG -- so bleibt er scharf und vorlesbar. */
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-1); text-decoration: none;
  flex-shrink: 0;
}
.brand__mark { width: 26px; height: auto; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.25; }
/* Beide Zeilen sind exakt gleich breit gesperrt. Press Start 2P ist
   dicktengleich mit genau 1 em je Zeichen, also ist das reine Arithmetik:

     Zeile 1:  8 Zeichen x 12px + 7 Zwischenräume x 0,24px = 97,68px
     Zeile 2: 11 Zeichen x  7px + 10 Zwischenräume x   L   = 97,68px
              ->  L = (96 + 1,68 - 77) / 10 = 2,068px = 0,2954em bei 7px

   Wer eine der beiden Schriftgrößen ändert, muss L neu ausrechnen.
   Das negative rechte Außenmaß nimmt den Zwischenraum hinter dem letzten
   Zeichen wieder weg -- CSS setzt ihn auch dort, und ohne die Korrektur
   wäre der Kasten breiter als die Schrift darin. */
.brand__txt b {
  font-family: var(--font-display); font-size: 12px;
  font-weight: 400; letter-spacing: .02em; margin-right: -.02em;
}
.brand__txt span {
  font-family: var(--font-display); font-size: 7px;
  color: var(--fg-3); letter-spacing: .2954em; margin-right: -.2954em;
}
.brand:hover { color: var(--accent); }
.brand:hover .brand__txt span { color: var(--accent-lo); }

.nav { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.nav a {
  font-family: var(--font-display); font-size: 9px;
  color: var(--fg-2); text-decoration: none; letter-spacing: .05em;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--accent); }

.langsw { display: flex; border: 2px solid var(--line-2); }
.langsw button {
  all: unset; cursor: pointer;
  font-family: var(--font-display); font-size: 9px;
  padding: 7px 10px; color: var(--fg-3);
}
.langsw button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.langsw button[aria-pressed="false"]:hover { color: var(--fg-1); }
.langsw button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* Der Menueknopf erscheint erst auf schmalen Schirmen; site.js schaltet
   dort .is-open an der Navigation. */
.navtoggle {
  display: none;
  margin-left: auto;
  font-family: var(--font-display); font-size: 9px;
  background: var(--surface-2); color: var(--fg-1);
  border: 2px solid var(--line-2); border-radius: var(--radius-1);
  padding: 9px 12px; cursor: pointer;
}
.navtoggle:hover { background: var(--surface-3); }

@media (max-width: 860px) {
  .navtoggle { display: block; order: 2; }
  .nav {
    order: 3;
    display: none;
    width: 100%;
    margin-left: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    border-top: 2px solid var(--line-1);
    padding: var(--sp-3) 0 var(--sp-4);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 10px 0; }
  .topbar-in { flex-wrap: wrap; padding-bottom: 0; }
  .langsw { margin-top: var(--sp-3); }
}

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

.hero {
  background: var(--crt-deep);
  padding: 72px 0 64px;
  border-bottom: 2px solid var(--line-1);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--sp-7); align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--display-xl);
  line-height: var(--display-leading);
  margin: 20px 0 8px;
  text-shadow: var(--glow-amber);
  color: var(--fg-1);
}
.hero h1 .amber { color: var(--accent); }

.hero-sub {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  color: var(--pitch);
  margin: 0 0 20px;
  text-shadow: var(--glow-green);
}
.hero p {
  font-size: var(--body-lg); color: var(--fg-2);
  line-height: var(--body-leading);
  max-width: 52ch; margin: 0 0 28px;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }

/* Das Schachtelbild im Hero. Anders als die Bildschirmfotos ist es ein
   gemaltes Bild -- also kein pixelated, sondern glatt skaliert.
   Bewusst ohne Rahmen, ohne Neigung und ohne Schatten: die Vorlage ist eine
   gerenderte Schachtel, die Perspektive und Schlagschatten schon mitbringt,
   und sie liegt auf schwarzem Grund statt freigestellt. Ein Rahmen darum
   sähe aus wie ein Bild von einem Bild, und ein filter: drop-shadow() hätte
   mangels Alphakanal nur das Rechteck umrandet. */
.herobox { max-width: 330px; margin-inline: auto; }
.herobox img { width: 100%; }
/* Der leere Platzhalter dagegen braucht seine Kante, sonst ist nicht zu
   sehen, wo das Artwork hingehört. */
.herobox .artslot { min-height: 380px; }

/* --- Abschnitte --------------------------------------------------------- */

.section { padding: 72px 0; }
.section-alt {
  background: var(--surface-1);
  border-top: 2px solid var(--line-1);
  border-bottom: 2px solid var(--line-1);
}

.kicker {
  font-family: var(--font-display); font-size: var(--display-xs);
  color: var(--accent); letter-spacing: .08em; margin: 0 0 12px;
}
.h2 {
  font-family: var(--font-display); font-size: var(--display-md);
  line-height: 1.5; color: var(--fg-1); margin: 0 0 16px;
}
.lede {
  font-size: var(--body-lg); color: var(--fg-2);
  line-height: var(--body-leading);
  max-width: 64ch; text-wrap: pretty; margin: 0 0 36px;
}

/* Zahlenreihe */
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 36px 0 0; }
@media (max-width: 900px) { .statrow { grid-template-columns: repeat(2, 1fr); } }
.stat {
  border: 2px solid var(--line-1); background: var(--surface-2);
  padding: 20px; box-shadow: var(--shadow-hard-sm);
}
.stat b {
  display: block; font-family: var(--font-terminal);
  font-size: var(--terminal-lg); color: var(--accent); line-height: 1;
}
.stat span {
  display: block; margin-top: 8px;
  font-family: var(--font-display); font-size: 9px;
  color: var(--fg-2); line-height: 1.6;
}

/* Drei Karten mit Bild */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr; } }
.shotcard {
  border: 2px solid var(--line-1); background: var(--surface-2);
  box-shadow: var(--shadow-hard);
}
.shotcard img {
  width: 100%; image-rendering: pixelated;
  border-bottom: 2px solid var(--line-1);
}
.shotcard .cap { padding: 16px 18px; }
.shotcard .cap b {
  font-family: var(--font-display); font-size: 10px;
  color: var(--accent); display: block; margin-bottom: 8px;
}
.shotcard .cap p { margin: 0; font-size: var(--body-sm); color: var(--fg-2); line-height: 1.55; }

/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }
.gshot { border: 2px solid var(--line-1); background: #000; box-shadow: var(--shadow-hard-sm); }
.gshot img { width: 100%; image-rendering: pixelated; }
.gshot .gcap {
  font-family: var(--font-display); font-size: 8px; color: var(--fg-3);
  padding: 10px 12px; border-top: 2px solid var(--line-1); background: var(--surface-1);
}

/* --- Fernseher (Spielen) ------------------------------------------------ */

.emu { max-width: 760px; margin: 0 auto; }

.tv {
  background: #000;
  border: 12px solid var(--surface-3);
  outline: 2px solid var(--line-2);
  border-radius: 6px;
  box-shadow: var(--shadow-hard-lg);
  position: relative;
}
.tv-screen { position: relative; aspect-ratio: 4 / 3; background: #000; overflow: hidden; }
/* Stellerator misst sein Bild selbst aus; die Leinwand muss den Rahmen
   nur vollstaendig fuellen. */
.tv-screen canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

/* Statuszeile unter der Roehre */
.tv-foot {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 8px 12px;
  background: var(--surface-3);
  font-family: var(--font-display); font-size: 8px;
  color: var(--fg-2); letter-spacing: .06em;
}
 /* Die Namen sind hier bewusst nicht im Stil der uebrigen Datei: emu.js
   schaltet genau die Klasse tv__led--off. Wer sie umbenennt, nimmt der
   Betriebsanzeige die Funktion, ohne dass etwas sichtbar bricht. */
.tv__led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 8px var(--ok);
  flex-shrink: 0;
}
.tv__led--off { background: var(--line-2); box-shadow: none; }

/* Einblendung ueber dem Emulatorbild -- Ruhezustand, Laden, Fehler.
   emu.js schaltet sie ueber das hidden-Attribut. */
.emu-ov {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at center, rgba(12, 10, 16, .88) 0%, rgba(12, 10, 16, .96) 100%);
  padding: var(--sp-5);
}
.emu-ov h3 {
  font-family: var(--font-display); font-size: var(--display-sm);
  color: var(--accent); text-shadow: var(--glow-amber);
  margin: 0 0 var(--sp-3); line-height: 1.6;
}
.emu-ov p {
  margin: 0 auto var(--sp-4); max-width: 46ch;
  font-size: var(--body-sm); color: var(--fg-2);
}
.emu-spinner {
  width: 26px; height: 26px; margin: 0 auto var(--sp-4);
  border: 3px solid var(--line-2); border-top-color: var(--accent);
  border-radius: 50%;
  animation: emuspin .8s linear infinite;
}
@keyframes emuspin { to { transform: rotate(360deg); } }

/* Bedienleisten */
.emu-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--line-1); background: var(--surface-2);
}
.emu-spacer { flex: 1 1 auto; }
.emu-lbl {
  font-family: var(--font-display); font-size: 8px;
  color: var(--fg-3); letter-spacing: .06em;
}
.emu-sel {
  font-family: var(--font-display); font-size: 8px;
  background: var(--surface-3); color: var(--fg-1);
  border: 2px solid var(--line-2); border-radius: var(--radius-1);
  padding: 8px 10px; cursor: pointer;
}
/* Die Schalter rasten sichtbar ein, solange sie gehalten werden --
   emu.js setzt aria-pressed fuer genau diese Rueckmeldung. */
.emu-bar .fm-btn[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent-lo); box-shadow: none;
  transform: translate(2px, 2px);
}

.controls {
  max-width: 760px; margin: var(--sp-6) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
@media (max-width: 700px) { .controls { grid-template-columns: 1fr; } }
.ctl {
  border: 2px solid var(--line-1); background: var(--surface-2);
  padding: 14px 16px; display: flex; gap: 12px; align-items: baseline;
}
.ctl b { font-family: var(--font-terminal); font-size: var(--terminal-md); color: var(--ray-cyan); white-space: nowrap; }
.ctl span { font-size: var(--body-sm); color: var(--fg-2); }

.ctl-note { text-align: center; color: var(--fg-3); font-size: var(--body-sm); margin-top: var(--sp-4); }

/* Platzhalter, solange assets/img/boxart.png fehlt */
.artslot {
  margin: 0; min-height: 300px;
  display: grid; place-items: center; text-align: center;
  padding: var(--sp-5);
  font-family: var(--font-display); font-size: 9px; line-height: 1.9;
  color: var(--fg-3);
  outline: 2px dashed var(--line-2); outline-offset: -10px;
}

/* --- Downloads ---------------------------------------------------------- */

.dlgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .dlgrid { grid-template-columns: 1fr; } }
.dlcard {
  border: 2px solid var(--line-1); background: var(--surface-2);
  padding: var(--sp-5); box-shadow: var(--shadow-hard-sm);
  display: flex; flex-direction: column; gap: var(--sp-3);
  align-items: flex-start;
}
.dlcard .nm { font-family: var(--font-display); font-size: 11px; color: var(--fg-1); }
.dlcard .ds { font-size: var(--body-sm); color: var(--fg-2); margin: 0; flex: 1; }
/* Das Handbuch gibt es in beiden Sprachen -- zwei Knoepfe statt einem. */
.dlcard .btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* --- Rechtstexte -------------------------------------------------------- */
/* Impressum und Datenschutz sind reine Lesetexte. Sie bekommen deshalb eine
   schmale Spalte und mehr Zeilenabstand als der Rest der Seite -- die
   Pixelschrift bleibt den Überschriften vorbehalten. */

.legal { max-width: 70ch; }
.legal h3 {
  font-family: var(--font-display); font-size: 11px;
  color: var(--accent); letter-spacing: .04em;
  line-height: 1.7; margin: var(--sp-7) 0 var(--sp-3);
}
.legal h3:first-of-type { margin-top: var(--sp-5); }
.legal p { margin: 0 0 var(--sp-4); color: var(--fg-2); line-height: 1.75; }
.legal ul { margin: 0 0 var(--sp-4); padding-left: 1.2em; color: var(--fg-2); line-height: 1.75; }
.legal li { margin-bottom: var(--sp-2); }
.legal address {
  font-style: normal; color: var(--fg-1);
  border-left: 2px solid var(--accent); padding-left: var(--sp-4);
  margin: 0 0 var(--sp-4); line-height: 1.8;
}
.legal a { color: var(--link); }
.legal .stand {
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 2px solid var(--line-1);
  font-family: var(--font-display); font-size: 8px;
  color: var(--fg-3); letter-spacing: .05em; line-height: 1.9;
}
/* Kurzer Hinweis für englischsprachige Leser: die Rechtstexte sind auf
   Deutsch verbindlich, deshalb steht hier keine Übersetzung. */
.legal .en-note {
  border: 2px solid var(--line-1); background: var(--surface-1);
  padding: var(--sp-4); margin: 0 0 var(--sp-6);
  font-size: var(--body-sm); color: var(--fg-3);
}

/* --- Fusszeile ---------------------------------------------------------- */

.footer {
  background: var(--crt-deep);
  border-top: 2px solid var(--line-1);
  padding: 40px 0;
}
.footer-in {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: var(--sp-5) var(--sp-7); align-items: start;
}
@media (max-width: 860px) { .footer-in { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: flex-start; gap: var(--sp-3); }
.footer-brand img { width: 30px; height: auto; flex-shrink: 0; }
.footer .fbrand {
  font-family: var(--font-display); font-size: 10px;
  color: var(--fg-1); letter-spacing: .06em;
}
.footer p { margin: 8px 0 0; font-size: var(--body-sm); color: var(--fg-3); }
.footer-credit { max-width: 46ch; }