/* ============================================================================
   SILENZIO — Startseite und Grundlage aller Seiten im sil-stil (12.10.2026)

   Diese Datei laden ALLE fünf Seiten: die Startseite allein, Impressum,
   Datenschutz, Regelwerk und Tastenbelegung zusammen mit seiten.css. Von
   hier kommen Schriften, Token, Navigation, Knöpfe und Fußzeile: wer hier
   etwas ändert, ändert alle fünf. Die Teamseite (/team/) lädt sie nicht,
   sie führt in team/style.css dieselben Token-Werte von Hand mit.

   Token und Bausteine (`--ss-…`, `ss-…`) kommen aus dem Stil der Spiel-
   Oberflächen (sil-banking/html/sil-stil.css, docs/design-branding.md).
   Abweichung nur für diese Seite, vom User bestellt („Mehr 3D Elemente,
   Bewegungen"): Platten und Kanten statt flacher Flächen, Bewegungen ohne
   Ende am Wappen, am Hauptknopf und am Schluss. Kein Muster für Fenster im
   Spiel.

   Klassen ohne `ss-` (nav, nav-inner, nav-brand, nav-links, klang…, btn,
   hero-lead, strip-value, reveal, countdown …) sind HAKEN: js/main.js und
   die Prüfstände unter /home/tools (homepage-klang, serverliste) suchen sie.
   Nicht umbenennen.

   Datenschutz: keine Schrift und keine Datei von außen. Die Schriften liegen
   in ../fonts/ (Herkunft und Lizenz: ../fonts/LIZENZ-manrope-outfit.txt).
   ========================================================================== */

/* ---------------------------------------------------------------- Schriften */
/* Variable Dateien: `font-weight` nennt einen BEREICH, nicht kürzen. */
@font-face {
    font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('../fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------- Token */
:root {
    --ss-bg-1: #0c0c0e;
    --ss-bg-2: #131316;
    --ss-bg-3: #1a1a1e;
    --ss-bg-4: #232328;

    --ss-gold:      #d4af37;
    --ss-gold-hi:   #f0d27a;
    --ss-gold-ink:  #1a1404;
    --ss-gold-deep: #8a6c1e;                      /* Kante unter dem Goldknopf */
    --ss-gold-06:   rgba(212, 175, 55, 0.06);
    --ss-gold-12:   rgba(212, 175, 55, 0.12);
    --ss-gold-40:   rgba(212, 175, 55, 0.40);
    --ss-gold-fill: linear-gradient(180deg, #f2d67e 0%, #d9b440 48%, #b8932c 100%);

    --ss-text:   #f4f2ec;
    --ss-text-2: #b8b4ab;
    --ss-text-3: #8a877f;

    --ss-line:        rgba(255, 255, 255, 0.07);
    --ss-line-strong: rgba(255, 255, 255, 0.12);

    --ss-pos:    #62d08e;
    --ss-pos-12: rgba(98, 208, 142, 0.12);
    --ss-neg:    #f0705f;

    --ss-r-panel: 22px;
    --ss-r-card:  16px;
    --ss-r-ctl:   12px;
    --ss-r-pill:  999px;

    --ss-display: 'Outfit', 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --ss-ui:      'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ss-ease:    cubic-bezier(0.22, 0.8, 0.26, 1);

    /* Tiefe: Platten statt Flächen (helle Oberkante, dunkler Boden, Kante) */
    --ss-light-top:    inset 0 1px 0 rgba(255, 255, 255, 0.085);
    --ss-shadow-card:  inset 0 -30px 44px -32px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 0, 0, 0.7), 0 26px 44px -26px rgba(0, 0, 0, 0.95);
    --ss-shadow-panel: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 14px 0 -8px #121215, 0 14px 0 -7px rgba(255, 255, 255, 0.09), 0 28px 0 -17px #0f0f12, 0 28px 0 -16px rgba(255, 255, 255, 0.06), 0 76px 110px -44px rgba(0, 0, 0, 0.95);
    --ss-ring:         0 0 0 3px rgba(212, 175, 55, 0.2);
    --ss-card-bg:      linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);

    --ss-gutter: clamp(16px, 4vw, 40px);
    --ss-gap-sec: clamp(72px, 8vw, 112px);
}

/* ---------------------------------------------------------------- Grundlage */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    overflow-x: clip;                  /* clip, nicht hidden: die Navigation haftet (sticky) */
    background: var(--ss-bg-1);
    color: var(--ss-text-2);
    font-family: var(--ss-ui); font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(212, 175, 55, 0.3); color: #fff; }
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; }
img { max-width: 100%; }
a { color: var(--ss-gold-hi); text-decoration: underline; text-decoration-color: var(--ss-gold-40); text-underline-offset: 3px; }
a:hover { color: #f8e3a0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ss-gold); outline-offset: 2px; }
b, strong { font-weight: 700; color: var(--ss-text); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
    position: absolute; left: 12px; top: -80px; z-index: 100;
    padding: 10px 16px; border-radius: var(--ss-r-ctl);
    background: var(--ss-gold-fill); color: var(--ss-gold-ink); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--ss-gold-ink); }

/* ---------------------------------------------------------------- Bausteine */
.ss-ico {
    width: 18px; height: 18px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ss-wrap { max-width: 1160px; margin: 0 auto; }
.ss-sec { padding: var(--ss-gap-sec) var(--ss-gutter) 0; }
.ss-stack { display: flex; flex-direction: column; gap: 40px; }

/* Kennzeile: der einzige Ort für Großbuchstaben */
.ss-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ss-text-3); }
.ss-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.ss-head--center { align-items: center; max-width: none; text-align: center; }
.ss-h2 {
    font-family: var(--ss-display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 600;
    line-height: 1.12; letter-spacing: -0.015em; word-spacing: 0.06em; color: var(--ss-text);
}
.ss-h2 span { display: block; }
.ss-lead { margin-top: 4px; font-size: clamp(16px, 1.25vw, 17.5px); line-height: 1.7; color: var(--ss-text-2); }

/* Marke: die Krone auf Gold */
.ss-mark {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ss-gold-ink); background: var(--ss-gold-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 8px 20px -8px rgba(212, 175, 55, 0.6);
}
.ss-mark svg { width: 21px; height: 21px; fill: currentColor; }
.ss-mark--sm { width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.22); }
.ss-mark--sm svg { width: 19px; height: 19px; }
.ss-mark--lg { width: 46px; height: 46px; border-radius: 14px; }
.ss-mark--lg svg { width: 25px; height: 25px; }
.ss-wordmark { font-family: var(--ss-display); font-size: 15px; font-weight: 600; letter-spacing: 0.22em; line-height: 1.15; color: var(--ss-text); }

/* Karte und Fenster */
.ss-card {
    position: relative;
    border: 1px solid var(--ss-line); border-radius: var(--ss-r-card);
    background: var(--ss-card-bg);
    box-shadow: var(--ss-light-top), var(--ss-shadow-card);
}
.ss-panel {
    position: relative; overflow: hidden;
    border: 1px solid var(--ss-line-strong); border-radius: var(--ss-r-panel);
    box-shadow: var(--ss-light-top), var(--ss-shadow-panel);
}
/* Lichtkante: ein schmaler Goldstreifen in der Mitte der Oberkante */
.ss-edge {
    position: absolute; top: 0; left: 22%; right: 22%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(240, 210, 122, 0) 0%, rgba(240, 210, 122, 0.75) 50%, rgba(240, 210, 122, 0) 100%);
    box-shadow: 0 0 22px 1px rgba(212, 175, 55, 0.35);
    animation: ss-edge 7s ease-in-out infinite alternate;
}

/* Knopf mit Kante. Golden gefüllt ist nur „Einreise beginnen". */
.ss-btn {
    appearance: none; cursor: pointer; position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 18px; border-radius: var(--ss-r-ctl);
    border: 1px solid var(--ss-line-strong);
    background: linear-gradient(180deg, var(--ss-bg-4) 0%, var(--ss-bg-3) 100%);
    color: var(--ss-text);
    font-family: var(--ss-ui); font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none;
    box-shadow: var(--ss-light-top), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 3px 0 rgba(0, 0, 0, 0.62), 0 14px 20px -12px rgba(0, 0, 0, 0.9);
    transition: color 160ms var(--ss-ease), background 160ms var(--ss-ease), border-color 160ms var(--ss-ease),
                box-shadow 160ms var(--ss-ease), transform 100ms var(--ss-ease);
}
.ss-btn:hover { color: var(--ss-gold-hi); border-color: var(--ss-gold-40); transform: translateY(-1px); }
.ss-btn:active { transform: translateY(2px); box-shadow: var(--ss-light-top), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.62); }
.ss-btn--primary {
    overflow: hidden;
    color: var(--ss-gold-ink); border-color: #e9c95f; background: var(--ss-gold-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 4px 0 var(--ss-gold-deep), 0 18px 28px -10px rgba(212, 175, 55, 0.6);
}
.ss-btn--primary::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    animation: ss-sheen 5.5s ease-in-out infinite;
}
.ss-btn--primary:hover {
    color: var(--ss-gold-ink); border-color: #f6de92; transform: translateY(-2px);
    background: linear-gradient(180deg, #f8e3a0 0%, #e4c256 48%, #c6a036 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 6px 0 var(--ss-gold-deep), 0 24px 34px -10px rgba(212, 175, 55, 0.78);
}
.ss-btn--primary:active {
    transform: translateY(3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 0 var(--ss-gold-deep), 0 8px 16px -8px rgba(212, 175, 55, 0.6);
}
.ss-btn--quiet, .ss-btn--quiet:active { color: var(--ss-text-2); border-color: var(--ss-line); background: transparent; box-shadow: none; }
.ss-btn--quiet:hover { color: var(--ss-text); border-color: var(--ss-line-strong); background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.ss-btn--lg { height: 50px; padding: 0 22px; font-size: 15px; }
.ss-btn--block { display: flex; width: 100%; }
.ss-btn--field { height: 46px; }

/* Zustands-Kapsel */
.ss-pill {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 28px; padding: 4px 12px; border-radius: 14px;
    font-size: 12.5px; font-weight: 700; line-height: 1.35;
    color: var(--ss-text-2); background: rgba(255, 255, 255, 0.06);
}
.ss-pill--pos { color: var(--ss-pos); background: var(--ss-pos-12); }
.ss-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* Tasten-Kachel für Symbole */
.ss-key3d {
    width: 44px; height: 44px; border-radius: var(--ss-r-ctl);
    display: flex; align-items: center; justify-content: center;
    color: var(--ss-text); border: 1px solid var(--ss-line-strong);
    background: linear-gradient(180deg, var(--ss-bg-4) 0%, var(--ss-bg-3) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -3px 0 rgba(0, 0, 0, 0.4), 0 3px 0 rgba(0, 0, 0, 0.65), 0 14px 18px -10px rgba(0, 0, 0, 0.9);
    transition: transform 320ms var(--ss-ease), color 320ms var(--ss-ease);
}
.ss-key3d .ss-ico { width: 22px; height: 22px; }
.ss-key3d--lg { width: 48px; height: 48px; }
.ss-key3d--lg .ss-ico { width: 24px; height: 24px; }

.ss-list { padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ss-text-2); }
.ss-list li::marker { color: var(--ss-text-3); }

/* Feld mit festem Text zum Kopieren */
.ss-code {
    flex: 1 1 auto; min-width: 0; height: 46px;
    display: flex; align-items: center; padding: 0 14px;
    border-radius: var(--ss-r-ctl); border: 1px solid var(--ss-line-strong);
    background: rgba(0, 0, 0, 0.35);
    font-family: var(--ss-display); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; color: var(--ss-text);
    white-space: nowrap; user-select: all;
}
.ss-kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 22px; padding: 0 6px; margin: 0 2px;
    border: 1px solid var(--ss-line-strong); border-radius: 6px; background: rgba(255, 255, 255, 0.05);
    font-family: var(--ss-ui); font-size: 11.5px; font-weight: 700; color: var(--ss-text-2);
}

/* --------------------------------------------------------------- Navigation */
/* Die Leiste haftet oben. `pointer-events` nur an der Leiste selbst: der
   durchsichtige Rand darüber fängt keine Klicks ab. */
.nav {
    position: sticky; top: 0; z-index: 50;
    padding: 20px var(--ss-gutter) 0;
    pointer-events: none;
}
/* Hinter der Leiste liegt die Farbe der Seite und läuft nach unten aus: sonst
   zöge der Text beim Scrollen sichtbar durch den Streifen über der Leiste. */
.nav::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: -18px; left: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, var(--ss-bg-1) 0%, var(--ss-bg-1) 58%, rgba(12, 12, 14, 0) 100%);
}
.nav-inner {
    pointer-events: auto; position: relative;
    max-width: 1160px; min-height: 64px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px 9px 14px;
    border: 1px solid var(--ss-line-strong); border-radius: var(--ss-r-panel);
    background: linear-gradient(180deg, var(--ss-bg-3) 0%, var(--ss-bg-2) 100%);
    box-shadow: var(--ss-light-top), 0 14px 34px -12px rgba(0, 0, 0, 0.95);
    transition: box-shadow 260ms var(--ss-ease), translate 260ms var(--ss-ease);
}
/* Beim Haften rückt die Leiste 10 px hoch. Über `translate`, nicht über den
   Innenabstand: der änderte die Höhe und ließe die Seite darunter springen. */
.nav.is-solid .nav-inner { translate: 0 -10px; box-shadow: var(--ss-light-top), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 24px 44px -14px #000; }
.nav-brand { flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 44px; border-radius: var(--ss-r-ctl); text-decoration: none; }
.nav-links { display: flex; gap: 2px; margin: 0 auto; }
.nav-links a, .ss-navlink {
    display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: var(--ss-r-ctl);
    font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--ss-text-2); text-decoration: none;
    transition: color 160ms var(--ss-ease), background 160ms var(--ss-ease);
}
.nav-links a:hover, .ss-navlink:hover { color: var(--ss-text); background: rgba(255, 255, 255, 0.045); }

/* Klang der Stadt: Knopf öffnet nur das Menü (js/main.js) */
.klang { position: relative; flex-shrink: 0; margin-left: auto; }
.klang-btn {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 9px;
    height: 44px; padding: 0 16px; border-radius: var(--ss-r-pill);
    border: 1px solid var(--ss-line); background: rgba(255, 255, 255, 0.035);
    font-family: var(--ss-ui); font-size: 13px; font-weight: 600; color: var(--ss-text-2); white-space: nowrap;
    transition: color 160ms var(--ss-ease), background 160ms var(--ss-ease), border-color 160ms var(--ss-ease);
}
.klang-btn:hover, .klang-btn[aria-expanded="true"] { color: var(--ss-text); border-color: var(--ss-line-strong); background: rgba(255, 255, 255, 0.06); }
.klang.is-playing .klang-btn, .klang.is-loading .klang-btn { color: var(--ss-text); border-color: rgba(212, 175, 55, 0.26); background: var(--ss-gold-06); }
.klang-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; color: var(--ss-text-3); }
.klang-eq i { display: block; width: 2px; height: 6px; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; }
.klang-eq i:nth-child(2) { height: 13px; }
.klang-eq i:nth-child(3) { height: 9px; }
.klang.is-playing .klang-btn .klang-eq, .klang-ort.is-playing .klang-eq { color: var(--ss-gold); }
.klang.is-playing .klang-btn .klang-eq i, .klang-ort.is-playing .klang-eq i { animation: ss-eq 1s ease-in-out infinite; }
.klang.is-playing .klang-btn .klang-eq i:nth-child(2), .klang-ort.is-playing .klang-eq i:nth-child(2) { animation-delay: -0.35s; }
.klang.is-playing .klang-btn .klang-eq i:nth-child(3), .klang-ort.is-playing .klang-eq i:nth-child(3) { animation-delay: -0.7s; }
.klang.is-loading .klang-btn .klang-eq, .klang-ort.is-loading .klang-eq { animation: ss-breathe 1.2s ease-in-out infinite; }
.klang-text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.klang-text b { font-size: 14px; font-weight: 600; color: var(--ss-text); }
.klang-text small { font-size: 12.5px; font-weight: 500; color: var(--ss-text-3); }
/* Im Knopf steht EINE Zeile: in Ruhe der Name, sonst der Zustand („Läuft: Casino") */
.klang-btn .klang-text b { font-size: 13px; color: inherit; }
.klang-btn .klang-text small { display: none; font-size: 13px; font-weight: 600; color: inherit; }
.klang.is-playing .klang-btn .klang-text b, .klang.is-loading .klang-btn .klang-text b { display: none; }
.klang.is-playing .klang-btn .klang-text small, .klang.is-loading .klang-btn .klang-text small { display: block; }
.klang-menu {
    position: absolute; right: 0; top: calc(100% + 16px); z-index: 5;
    width: 300px; padding: 10px;
    border: 1px solid var(--ss-line-strong); border-radius: var(--ss-r-card);
    background: linear-gradient(180deg, var(--ss-bg-3) 0%, var(--ss-bg-2) 100%);
    box-shadow: var(--ss-light-top), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 26px 48px -16px #000;
    animation: ss-rise 220ms var(--ss-ease);
}
.klang-menu-head { margin: 4px 8px 10px; font-size: 12.5px; line-height: 1.5; color: var(--ss-text-3); }
.klang-ort {
    appearance: none; cursor: pointer; width: 100%;
    display: flex; align-items: center; gap: 14px;
    min-height: 56px; padding: 8px 14px; border: 0; border-radius: var(--ss-r-ctl);
    background: transparent; color: var(--ss-text-2); font-family: var(--ss-ui);
    transition: background 160ms var(--ss-ease), box-shadow 160ms var(--ss-ease);
}
.klang-ort + .klang-ort { margin-top: 2px; }
.klang-ort:hover { background: rgba(255, 255, 255, 0.045); }
.klang-ort[aria-pressed="true"] {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.17) 0%, rgba(212, 175, 55, 0.045) 100%);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.2);
}
.klang-ort.is-error small { color: var(--ss-neg); }

/* --------------------------------------------------------------------- Kopf */
.hero { padding: 16px var(--ss-gutter) 0; }
.ss-hero {
    max-width: 1160px; margin: 0 auto;
    background:
        radial-gradient(ellipse 70% 55% at 0% 0%, rgba(212, 175, 55, 0.085) 0%, rgba(212, 175, 55, 0) 62%),
        radial-gradient(ellipse 60% 45% at 100% 100%, rgba(212, 175, 55, 0.035) 0%, rgba(212, 175, 55, 0) 60%),
        linear-gradient(180deg, var(--ss-bg-2) 0%, var(--ss-bg-1) 100%);
}
.ss-aurora {
    position: absolute; top: -20%; right: -20%; bottom: -20%; left: -20%; pointer-events: none;
    background: radial-gradient(38% 42% at 30% 30%, rgba(212, 175, 55, 0.11), rgba(212, 175, 55, 0) 70%), radial-gradient(30% 36% at 72% 64%, rgba(240, 210, 122, 0.06), rgba(240, 210, 122, 0) 70%);
    animation: ss-drift 16s ease-in-out infinite alternate;
}
.ss-hero__row {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; gap: 36px 56px;
    padding: clamp(28px, 5.5vw, 72px) clamp(22px, 5vw, 64px);
}
.ss-hero__text { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ss-hero__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hero-live .dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ss-pulse 2.4s ease-out infinite; }
.hero-since { font-size: 13px; font-weight: 600; color: var(--ss-text-3); }
.ss-h1 {
    font-family: var(--ss-display); font-size: clamp(33px, 5vw, 64px); font-weight: 600;
    line-height: 1.05; letter-spacing: -0.02em; word-spacing: 0.06em; color: var(--ss-text);
}
.ss-h1 span { display: block; }
.ss-h1 .ss-h1__dim { color: var(--ss-text-3); }
.hero-lead { max-width: 600px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: var(--ss-text-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 13.5px; color: var(--ss-text-3); }
.hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.hero-note .ss-ico { width: 16px; height: 16px; }
/* Countdown: seit dem 11.09.2026 immer verborgen, js/main.js braucht die Zellen */
.countdown { display: flex; gap: 10px; }
.cd-cell { min-width: 64px; padding: 10px 12px; border: 1px solid var(--ss-line); border-radius: var(--ss-r-ctl); text-align: center; }
.cd-cell b { display: block; font-family: var(--ss-display); font-size: 24px; font-weight: 500; }
.cd-cell span { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ss-text-3); }

/* Wappen als Medaille im Raum */
.ss-scene {
    flex: 1 1 380px; min-width: 0; position: relative;
    display: flex; justify-content: center; align-items: center;
    padding: 30px 0 100px;
    perspective: 1000px;
    animation: ss-scene-in 1100ms var(--ss-ease) 200ms both;
}
.ss-scene__halo {
    position: absolute; top: -10%; right: -10%; bottom: -10%; left: -10%; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0) 64%);
}
.ss-crest-parallax, .ss-crest-float, .ss-crest-tilt { transform-style: preserve-3d; }
.ss-crest-parallax { position: relative; width: min(300px, 78%); }
.ss-crest-float { animation: ss-float 9s ease-in-out infinite; }
/* --tx/--ty setzt js/tiefe.js am Kopf (Neigung zur Maus) */
.ss-crest-tilt { position: relative; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform 600ms var(--ss-ease); }
.ss-hero:hover .ss-crest-tilt { transition: transform 160ms linear; }
.ss-crest { position: relative; display: block; width: 100%; height: auto; }
/* Dicke: sechs abgedunkelte Kopien hinter dem Bild. Der Filter mit der harten
   Kante (`#ss-solid`) steht in index.html: `url(#…)` aus einer externen Datei
   zeigt je nach Browser auf die Datei statt auf das Dokument. */
.ss-crest-depth { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.ss-floor {
    position: absolute; left: 0; top: 0; width: 100%; padding-bottom: 100%; border-radius: 50%; pointer-events: none;
    transform: translateY(60%) rotateX(78deg);
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 40%), radial-gradient(closest-side, rgba(240, 210, 122, 0.3) 30%, rgba(212, 175, 55, 0.07) 62%, rgba(212, 175, 55, 0) 76%);
    box-shadow: inset 0 0 0 1px rgba(240, 210, 122, 0.2);
}
.ss-ring {
    position: absolute; left: 50%; top: 50%; width: 126%; height: 126%; margin: -63% 0 0 -63%;
    border-radius: 50%; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(240, 210, 122, 0.26);
}
.ss-ring::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(240, 210, 122, 0) 0deg, rgba(240, 210, 122, 0) 235deg, rgba(240, 210, 122, 0.95) 352deg, rgba(240, 210, 122, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 2.5px), #000 calc(100% - 2px));
}
.ss-ring::after {
    content: ''; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
    background: #fff3cf; box-shadow: 0 0 14px 4px rgba(240, 210, 122, 0.9);
}
.ss-ring--a { animation: ss-orbit-a 11s linear infinite; }
.ss-ring--b { width: 108%; height: 108%; margin: -54% 0 0 -54%; animation: ss-orbit-b 17s linear infinite; }
.ss-shine {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transform: translateZ(1px);
    -webkit-mask: url('../brand/logo.png') center / contain no-repeat;
            mask: url('../brand/logo.png') center / contain no-repeat;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 44%, rgba(255, 247, 220, 0.7) 50%, rgba(255, 255, 255, 0) 56%) no-repeat;
    background-size: 280% 100%;
    animation: ss-shine 6.5s ease-in-out infinite;
}
.ss-dust {
    position: absolute; width: 3px; height: 3px; border-radius: 50%; pointer-events: none; opacity: 0;
    background: var(--ss-gold-hi); box-shadow: 0 0 8px 1px rgba(240, 210, 122, 0.8);
    animation: ss-dust 8s linear infinite;
}

/* ---------------------------------------------------------- Lage der Stadt */
.strip { padding: 46px var(--ss-gutter) 0; }
.strip-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.strip-item { display: flex; flex-direction: column; padding: 18px 20px 19px; }
.strip-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ss-text-3); }
.strip-value { margin-top: 8px; font-family: var(--ss-display); font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--ss-text); font-variant-numeric: tabular-nums; }
.strip-sub { margin-top: 4px; font-size: 13.5px; color: var(--ss-text-3); overflow-wrap: anywhere; }

/* ------------------------------------------------------------- Versprechen */
.ss-contrast { overflow: clip; }       /* clip, nicht hidden: kein eigener Scroll-Behälter */
.ss-contrast__head { display: flex; flex-wrap: wrap; gap: 2px 24px; padding: 16px 24px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ss-contrast__head span { flex: 1 1 280px; color: var(--ss-text-3); }
.ss-contrast__head span + span { color: var(--ss-gold-hi); }
.ss-contrast ul { list-style: none; font-size: 15.5px; line-height: 1.55; }
.ss-contrast li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 17px 24px; border-top: 1px solid var(--ss-line); }
.ss-contrast s { flex: 1 1 280px; min-width: 0; color: var(--ss-text-3); text-decoration-color: rgba(255, 255, 255, 0.28); }
.ss-contrast strong { flex: 1 1 280px; min-width: 0; display: flex; align-items: flex-start; gap: 12px; font-weight: 600; color: var(--ss-text); }
.ss-contrast strong .ss-ico { margin-top: 3px; color: var(--ss-text-3); }
.ss-quote { align-self: center; margin-top: 16px; max-width: 860px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ss-quote p { font-family: var(--ss-display); font-size: clamp(22px, 2.8vw, 36px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; word-spacing: 0.06em; text-wrap: balance; color: var(--ss-text); }
.ss-quote footer { max-width: 620px; font-size: 14.5px; line-height: 1.65; color: var(--ss-text-3); }

/* ---------------------------------------------------------------- Die Stadt */
.ss-group { display: flex; flex-direction: column; gap: 16px; }
.ss-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ss-chapter { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.ss-chapter__head { display: flex; flex-direction: column; gap: 4px; }
.ss-chapter h3 { font-family: var(--ss-display); font-size: 21px; font-weight: 600; line-height: 1.2; word-spacing: 0.06em; color: var(--ss-text); }
.ss-chapter__head p { font-size: 14.5px; color: var(--ss-text-3); }
.ss-chapter .ss-list { margin-top: 2px; }
.ss-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; padding: 26px 28px 28px; }
.ss-figure { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Kennzahl: die Zahl weiß, das Plus golden, beides geprägt */
.ss-num3d {
    font-family: var(--ss-display); font-size: clamp(34px, 4vw, 48px); font-weight: 600; line-height: 1;
    letter-spacing: -0.02em; white-space: nowrap; color: var(--ss-text); font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 #bdb9ae, 0 2px 0 #8f8b82, 0 3px 0 #5f5c56, 0 12px 18px rgba(0, 0, 0, 0.85);
}
.ss-num3d i { font-style: normal; color: var(--ss-gold); text-shadow: 0 1px 0 #b8932c, 0 2px 0 var(--ss-gold-deep), 0 3px 0 #5a4612, 0 12px 18px rgba(0, 0, 0, 0.85); }

/* ---------------------------------------------------------------- Zwei Wege */
.ss-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ss-path { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 36px); }
.ss-path__head { display: flex; flex-direction: column; gap: 6px; }
.ss-path h3 { font-family: var(--ss-display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; line-height: 1.15; word-spacing: 0.06em; color: var(--ss-text); }
.ss-path > p { font-size: 15.5px; line-height: 1.7; color: var(--ss-text-2); }
/* Der legale Weg im Licht, der andere im Dunkeln */
.ss-path--legal { border-color: var(--ss-line-strong); background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.03) 100%); }
.ss-path--illegal { background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 0 rgba(0, 0, 0, 0.7), 0 26px 44px -26px rgba(0, 0, 0, 0.95); }

/* ----------------------------------------------------------------- Einreise */
.ss-einreise { display: flex; flex-direction: column; gap: 16px; }
.ss-split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 56px; margin-bottom: 8px; }
.ss-split > .ss-head { flex: 1 1 360px; min-width: 0; max-width: none; }
.ss-split > .ss-card { flex: 999 1 520px; min-width: 0; }
.ss-steps { list-style: none; }
.ss-stepli { position: relative; display: flex; gap: 18px; padding: 22px 24px; }
.ss-stepli + .ss-stepli { border-top: 1px solid var(--ss-line); }
.ss-stepli > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.ss-stepli h3 { font-family: var(--ss-display); font-size: 19px; font-weight: 600; line-height: 1.25; word-spacing: 0.06em; color: var(--ss-text); }
.ss-stepli p { font-size: 15px; line-height: 1.65; color: var(--ss-text-2); }
.ss-stepno {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ss-line-strong); background: var(--ss-bg-2);
    font-family: var(--ss-display); font-size: 14px; font-weight: 600; color: var(--ss-text-2); font-variant-numeric: tabular-nums;
}
.ss-stepno--on { border-color: transparent; font-weight: 700; color: var(--ss-gold-ink); background: var(--ss-gold-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -8px rgba(212, 175, 55, 0.6); }
/* Schiene je Schritt. ⚠ Kein `overflow: hidden` an der Schiene oder ihrer
   Karte: das macht den Kasten zum Scroll-Behälter, und die Scroll-Zeitleiste
   der Füllung hinge an IHM statt an der Seite. */
.ss-rail { position: absolute; left: 41px; top: -1px; bottom: 0; width: 2px; background: var(--ss-line-strong); }
.ss-rail--start { top: 40px; }
.ss-rail--end { bottom: auto; height: 41px; }
.ss-rail__fill { display: block; width: 100%; height: 100%; transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(180deg, var(--ss-gold-hi), var(--ss-gold)); }

.ss-voice { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 48px; padding: clamp(22px, 3vw, 36px); }
.ss-voice__text { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ss-voice__head { display: flex; flex-direction: column; gap: 6px; }
.ss-voice h3 { font-family: var(--ss-display); font-size: clamp(22px, 2.2vw, 26px); font-weight: 600; line-height: 1.2; word-spacing: 0.06em; color: var(--ss-text); }
.ss-voice__text > p { font-size: 15px; line-height: 1.7; color: var(--ss-text-2); }
.voice-steps { list-style: none; counter-reset: schritt; display: grid; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--ss-text-2); }
.voice-steps li { counter-increment: schritt; position: relative; padding-left: 36px; }
.voice-steps li::before {
    content: counter(schritt); position: absolute; left: 0; top: 0;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ss-line-strong); font-size: 12px; font-weight: 700; color: var(--ss-text-3);
}
.ss-voice__side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ss-field__label { font-size: 12.5px; font-weight: 600; color: var(--ss-text-2); }
.connect-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-voice .connect-row { margin-bottom: 8px; }
.ss-note { flex: 1 1 100%; padding: 13px 16px; border-radius: var(--ss-r-ctl); border: 1px solid rgba(212, 175, 55, 0.2); background: var(--ss-gold-06); }
.ss-note__head { display: block; font-size: 13px; font-weight: 700; color: var(--ss-gold-hi); }
.ss-note__body { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ss-text-2); }
.ss-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding: 22px 24px; }
.ss-connect__text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-connect__text p + p { font-size: 15px; line-height: 1.6; color: var(--ss-text-2); }
.ss-connect .connect-row { flex: 1 1 340px; min-width: 0; }
.ss-connect .ss-code { flex: 1 1 250px; font-size: 15px; letter-spacing: 0.01em; }

/* ------------------------------------------------------------------- Fragen */
.ss-faqwrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.ss-faqs { overflow: clip; }
.ss-faq + .ss-faq { border-top: 1px solid var(--ss-line); }
.ss-faq summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 60px; padding: 14px 22px;
    font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ss-text);
    transition: background 140ms var(--ss-ease);
}
.ss-faq summary::-webkit-details-marker { display: none; }
.ss-faq summary:hover { background: rgba(255, 255, 255, 0.03); }
.ss-faq summary:focus-visible { outline-offset: -2px; }
.ss-faq summary .ss-ico { color: var(--ss-text-3); transition: transform 200ms var(--ss-ease), color 200ms var(--ss-ease); }
.ss-faq[open] summary .ss-ico { transform: rotate(180deg); color: var(--ss-gold); }
.ss-faq p { padding: 0 22px 20px; font-size: 15px; line-height: 1.7; color: var(--ss-text-2); }
.ss-faq[open] > p { animation: ss-rise 280ms var(--ss-ease); }

/* ------------------------------------------------------------------ Schluss */
.ss-final {
    max-width: 1160px; margin: 0 auto;
    background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(212, 175, 55, 0.10) 0%, rgba(212, 175, 55, 0) 62%), linear-gradient(180deg, var(--ss-bg-2) 0%, var(--ss-bg-1) 100%);
}
.ss-final__in { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(40px, 6vw, 76px) clamp(22px, 5vw, 64px); text-align: center; }
.ss-final .ss-mark { animation: ss-coin 7s ease-in-out infinite; }
.ss-final .ss-eyebrow { margin-top: 10px; }
.ss-final .ss-h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.02em; }
.tagline { font-size: 16px; font-weight: 600; color: var(--ss-text-2); }
.ss-final .hero-cta { justify-content: center; margin-top: 18px; }

/* ----------------------------------------------------------------- Fußzeile */
.footer { margin-top: clamp(64px, 7vw, 96px); padding: 28px var(--ss-gutter) 44px; border-top: 1px solid var(--ss-line); }
.footer .ss-wrap { display: flex; flex-direction: column; gap: 18px; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; }
.footer-mark { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.footer-mark > span:last-child { display: flex; flex-direction: column; }
.footer-mark .ss-wordmark { font-size: 14px; }
.footer-mark small { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ss-text-3); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 2px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px; font-size: 13px; line-height: 1.6; color: var(--ss-text-3); }
.footer-legal { max-width: 640px; }

/* ----------------------------------------------- Neigung zur Maus (tiefe.js) */
/* --rx/--ry/--mx/--my setzt js/tiefe.js. Ohne Skript, am Handy und bei
   „Bewegung reduzieren" bleiben die Karten gerade. */
.ss-tilt {
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, var(--ry0, 0deg))) translateY(var(--lift, 0px));
    transition: transform 480ms var(--ss-ease), border-color 300ms var(--ss-ease), box-shadow 300ms var(--ss-ease);
}
.ss-tilt:hover {
    --lift: -6px;
    border-color: var(--ss-gold-40);
    box-shadow: var(--ss-light-top), 0 2px 0 rgba(0, 0, 0, 0.7), 0 44px 60px -30px #000;
    transition: transform 140ms linear, border-color 300ms var(--ss-ease), box-shadow 300ms var(--ss-ease);
}
.ss-tilt::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 210, 122, 0.14), rgba(240, 210, 122, 0) 55%);
    transition: opacity 300ms var(--ss-ease);
}
.ss-tilt:hover::after { opacity: 1; }
.ss-tilt > * { transition: transform 320ms var(--ss-ease); }
.ss-tilt:hover > * { transform: translateZ(18px); }
.ss-tilt > .ss-key3d { transition: transform 320ms var(--ss-ease), color 320ms var(--ss-ease); }
.ss-tilt:hover > .ss-key3d { transform: translateZ(40px); color: var(--ss-gold-hi); }
.ss-lift { transition: transform 260ms var(--ss-ease), border-color 260ms var(--ss-ease); }
.ss-lift:hover { transform: translateY(-4px); border-color: var(--ss-line-strong); }

/* ------------------------------------------- Auftritt und Einblenden (main.js) */
/* Beim Laden, ohne Skript: Leiste und Kopf steigen nacheinander ein. */
.nav-inner, .ss-hero__status, .ss-h1, .hero-lead, .ss-hero__text .hero-cta, .hero-note { animation: ss-rise 800ms var(--ss-ease) both; }
/* Die Leiste nur rückwärts füllen: sonst hielte der Auftritt `translate` fest und sie könnte beim Haften nicht hochrücken */
.nav-inner { animation-fill-mode: backwards; }
.ss-hero__status { animation-delay: 80ms; }
.ss-h1 { animation-delay: 160ms; }
.hero-lead { animation-delay: 240ms; }
.ss-hero__text .hero-cta { animation-delay: 320ms; }
.hero-note { animation-delay: 400ms; }

/* Beim Scrollen: js/main.js setzt `is-visible`. Verborgen wird nur MIT Skript
   (`html.js`), sonst stünde die Seite ohne Skript leer da.
   ⚠ Über `translate`/`scale`, nie `transform`: sonst wäre die Neigung der
   Karten tot. Die Verzögerung `--d` hängt nur am Einblenden, nicht an der
   Neigung (ein verzögerter Hover wirkt zäh). */
html.js .reveal {
    opacity: 0; translate: 0 34px; scale: 0.975;
    transition: opacity 800ms var(--ss-ease) var(--d, 0ms), translate 800ms var(--ss-ease) var(--d, 0ms), scale 800ms var(--ss-ease) var(--d, 0ms);
}
html.js .reveal.is-visible { opacity: 1; translate: 0 0; scale: 1; }
html.js .ss-tilt.reveal {
    transition: transform 480ms var(--ss-ease), border-color 300ms var(--ss-ease), box-shadow 300ms var(--ss-ease),
                opacity 800ms var(--ss-ease) var(--d, 0ms), translate 800ms var(--ss-ease) var(--d, 0ms), scale 800ms var(--ss-ease) var(--d, 0ms);
}
html.js .ss-tilt.reveal:hover {
    transition: transform 140ms linear, border-color 300ms var(--ss-ease), box-shadow 300ms var(--ss-ease),
                opacity 800ms var(--ss-ease), translate 800ms var(--ss-ease), scale 800ms var(--ss-ease);
}
html.js .ss-lift.reveal {
    transition: transform 260ms var(--ss-ease), border-color 260ms var(--ss-ease),
                opacity 800ms var(--ss-ease) var(--d, 0ms), translate 800ms var(--ss-ease) var(--d, 0ms), scale 800ms var(--ss-ease) var(--d, 0ms);
}
.strip-item:nth-child(2), .ss-grid3 > :nth-child(3n + 2), .ss-paths > :nth-child(2) { --d: 90ms; }
.strip-item:nth-child(3), .ss-grid3 > :nth-child(3n) { --d: 180ms; }
.strip-item:nth-child(4) { --d: 270ms; }
/* Zeilen der Vergleichsliste schieben sich nacheinander herein */
html.js .ss-contrast li { opacity: 0; translate: -22px 0; transition: opacity 600ms var(--ss-ease), translate 600ms var(--ss-ease); }
html.js .ss-contrast.is-visible li { opacity: 1; translate: 0 0; }
html.js .ss-contrast.is-visible li:nth-child(1) { transition-delay: 120ms; }
html.js .ss-contrast.is-visible li:nth-child(2) { transition-delay: 200ms; }
html.js .ss-contrast.is-visible li:nth-child(3) { transition-delay: 280ms; }
html.js .ss-contrast.is-visible li:nth-child(4) { transition-delay: 360ms; }
html.js .ss-contrast.is-visible li:nth-child(5) { transition-delay: 440ms; }
html.js .ss-contrast.is-visible li:nth-child(6) { transition-delay: 520ms; }

/* Mit dem Scrollen (nur wo der Browser es kann, sonst bleibt es ruhig):
   die Schiene der Einreise füllt sich, die Nummern leuchten auf, das Wappen
   bleibt ein Stück zurück. Bezugslinie der Schiene: 45 % der Fensterhöhe. */
@supports (animation-timeline: view()) {
    .ss-rail__fill { animation: ss-rail linear both; animation-timeline: view(45% 55%); animation-range: cover 0% cover 100%; }
    .ss-stepno--live { animation: ss-stepon linear both; animation-timeline: view(45% 55%); animation-range: cover 0% cover 100%; }
    .ss-crest-parallax { animation: ss-parallax linear both; animation-timeline: scroll(root block); animation-range: 0px 700px; }
}

@keyframes ss-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes ss-scene-in { from { opacity: 0; scale: 0.86; } to { opacity: 1; scale: 1; } }
@keyframes ss-float {
    0%, 100% { transform: translateY(6px) rotateX(5deg) rotateY(-15deg); }
    50% { transform: translateY(-10px) rotateX(-3deg) rotateY(15deg); }
}
@keyframes ss-orbit-a { from { transform: rotateX(72deg) rotateY(8deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateY(8deg) rotateZ(360deg); } }
@keyframes ss-orbit-b { from { transform: rotateX(63deg) rotateY(-30deg) rotateZ(180deg); } to { transform: rotateX(63deg) rotateY(-30deg) rotateZ(540deg); } }
@keyframes ss-shine { 0% { background-position: 100% 0; } 20%, 100% { background-position: 0% 0; } }
@keyframes ss-sheen { 0% { transform: translateX(-140%) skewX(-18deg); } 18%, 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes ss-pulse { 0% { box-shadow: 0 0 0 0 rgba(98, 208, 142, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(98, 208, 142, 0); } }
@keyframes ss-dust {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
    12% { opacity: 0.9; }
    100% { opacity: 0; transform: translate3d(var(--dx, 10px), -200px, 0) scale(1.1); }
}
@keyframes ss-drift { from { transform: translate3d(-4%, -3%, 0); } to { transform: translate3d(5%, 4%, 0); } }
@keyframes ss-edge { from { transform: translateX(-28%); } to { transform: translateX(28%); } }
@keyframes ss-coin {
    0%, 100% { transform: perspective(500px) rotateY(-26deg) translateY(2px); }
    50% { transform: perspective(500px) rotateY(26deg) translateY(-4px); }
}
@keyframes ss-rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ss-stepon {
    from { border-color: var(--ss-line-strong); color: var(--ss-text-2); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
    to { border-color: var(--ss-gold); color: var(--ss-gold-hi); box-shadow: 0 0 18px -4px rgba(212, 175, 55, 0.7); }
}
@keyframes ss-parallax { from { translate: 0 0; } to { translate: 0 40px; } }
@keyframes ss-eq { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@keyframes ss-breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ------------------------------------------------------------------ Breiten */
/* Navigation: IMMER eine Zeile (Prüfstand homepage-klang, Teil C).
   ab 1220      Marke · sechs Punkte · Klang mit Text · Discord
   1000–1219    Klang nur als Symbol, Punkte enger
   bis 999      ohne Punkte (sie stehen in der Fußzeile bzw. man scrollt)
   bis 519      Klang nur als Symbol
   bis 379      Marke ohne Schriftzug */
@media (min-width: 1000px) and (max-width: 1219px) {
    .nav-links a { padding: 0 10px; }
    .klang-btn { width: 44px; padding: 0; justify-content: center; }
    .klang-btn .klang-text { display: none; }
}
@media (min-width: 900px) {
    .ss-tilt--l { --ry0: 3.5deg; }
    .ss-tilt--r { --ry0: -3.5deg; }
}
@media (min-width: 1000px) {
    .ss-sticky { position: sticky; top: 108px; }
}
@media (max-width: 999px) {
    .nav-links { display: none; }
    .strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ss-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ss-grid3 > :nth-child(n) { --d: 0ms; }
    .ss-grid3 > :nth-child(2n) { --d: 90ms; }
}
@media (max-width: 820px) {
    .ss-paths { grid-template-columns: minmax(0, 1fr); }
    .ss-paths > :nth-child(2) { --d: 0ms; }
    .ss-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ss-grid3 { grid-template-columns: minmax(0, 1fr); }
    .ss-grid3 > :nth-child(n) { --d: 0ms; }
}
@media (max-width: 560px) {
    /* Das Menü hängt hier an der Leiste, nicht am Knopf: volle Breite */
    .klang { position: static; }
    .klang-menu { left: 0; right: 0; width: auto; top: calc(100% + 8px); }
    .strip-inner { grid-template-columns: minmax(0, 1fr); }
    .strip-item:nth-child(n) { --d: 0ms; }
    .ss-stepli { gap: 14px; padding: 20px 18px; }
    .ss-rail { left: 35px; }
    .ss-rail--start { top: 38px; }
    .ss-rail--end { height: 39px; }
    .ss-faq summary { padding: 14px 18px; }
    .ss-faq p { padding: 0 18px 18px; }
    .ss-contrast__head, .ss-contrast li { padding-left: 18px; padding-right: 18px; }
}
/* 519, nicht 479: mit „Läuft: Hotel-Lobby" im Knopf ragte der Discord-Knopf bei
   480 bis 492 px über die Leiste (gemessen 12.10.2026). In Ruhe passte es. */
@media (max-width: 519px) {
    .klang-btn { width: 44px; padding: 0; justify-content: center; }
    .klang-btn .klang-text { display: none; }
}
@media (max-width: 479px) {
    .nav-inner { gap: 8px; padding-left: 12px; }
    .ss-numbers { grid-template-columns: minmax(0, 1fr); }
    .hero-cta .ss-btn { flex: 1 1 auto; }
}
@media (max-width: 379px) {
    .nav-brand .ss-wordmark { display: none; }
    .ss-hero__text { gap: 18px; }
    .hero-lead { font-size: 15px; line-height: 1.55; }
}

/* -------------------------------------------------------- Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}