/* ==========================================================================
   HARDLIFE FIVEPD · WEBSEITE
   --------------------------------------------------------------------------
   Diese Datei ist die Web-Schwester von hl-ui.css. Sie uebernimmt dieselben
   Tokens – dasselbe Rot, dieselben Flaechen, dieselbe Schriftkette – damit
   Webseite und Ingame-Menues erkennbar zusammengehoeren.

   WARUM NICHT EINFACH hl-ui.css EINBINDEN
   hl-ui.css ist fuer NUI gebaut: transparenter Hintergrund, kein Scrollen,
   kein Markieren von Text, Panels die den Bildschirm ausfuellen. Auf einer
   Webseite waere das falsch. Uebernommen werden deshalb die Entscheidungen
   (Farbe, Radien, Schrift, Kartenverhalten), nicht der Code.

   AUFBAU
     1. Tokens
     2. Grundlage und Typografie
     3. Rahmenbausteine: Wrap, Abschnitt, Eyebrow
     4. Kopfzeile und Navigation
     5. Schaltflaechen
     6. Startseite: Held, Fakten, Karten
     7. Fraktionen
     8. Einstieg: Schritte, Tasten, Befehle, FAQ
     9. Regeln
    10. Aufruf und Fusszeile
    11. Bewegung und kleine Bildschirme
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* ---------- Farbe ----------
       Eins zu eins aus hl-ui.css. Wer das Rot hier aendert, muss es auch dort
       aendern – sonst sehen Webseite und Menue wieder nach zwei Servern aus. */
    --red:        #dc2626;
    --red-hi:     #ef4444;
    --red-lo:     #991b1b;
    --red-soft:   rgba(220, 38, 38, .10);
    --red-line:   rgba(220, 38, 38, .35);
    --red-glow:   rgba(220, 38, 38, .22);

    --bg:         #08090b;
    --bg-2:       #0b0c0f;
    --surface:    #111316;
    --surface-2:  #15181c;
    --sunken:     rgba(0, 0, 0, .28);

    --line:        rgba(255, 255, 255, .075);
    --line-strong: rgba(255, 255, 255, .14);

    --text:   #f4f5f6;
    --text-2: #9aa0a8;
    --text-3: #6b7078;

    --ok:     #38c991;
    --warn:   #f0b429;
    --danger: #e33b43;

    --r-panel: 18px;
    --r-card:  14px;
    --r-ctrl:  10px;
    --r-pill:  999px;

    --shadow:      0 24px 70px rgba(0, 0, 0, .55);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, .22);

    --ease: cubic-bezier(.16, 1, .3, 1);
    --fast: .18s ease;
    --slow: .28s var(--ease);

    /* Dieselbe Schriftkette wie im Spiel. Inter, wenn erreichbar, sonst
       Segoe UI – so sieht die Seite auch ohne Google Fonts richtig aus. */
    --font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;

    /* ---------- Raster ----------
       Ein Inhaltsband, ein Aussenabstand. Beide waechst der Bildschirm mit. */
    --wrap:   1160px;
    --gutter: clamp(20px, 5vw, 48px);
    --gap-section: clamp(76px, 10vw, 132px);

    /* Die Seite ist bewusst nur dunkel. Das ist die Marke – Leitstelle bei
       Nacht – und keine vergessene zweite Fassung. color-scheme sorgt dafuer,
       dass Formularelemente und Bildlaufleisten mitziehen. */
    color-scheme: dark;
}

/* ==========================================================================
   2. GRUNDLAGE UND TYPOGRAFIE
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    /* Anker landen sonst unter der festen Kopfzeile. */
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.14;
    letter-spacing: -.02em;
    text-wrap: balance;
    font-weight: 800;
}

h2 { font-size: clamp(27px, 3.6vw, 40px); }
h3 { font-size: 19px; letter-spacing: -.01em; }

p { margin: 0; }

/* Fliesstext bleibt lesbar breit, egal wie breit der Bildschirm ist. */
.lead {
    max-width: 62ch;
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--text-2);
}

.prose { max-width: 66ch; color: var(--text-2); }
.prose + .prose { margin-top: 14px; }

strong { color: var(--text); font-weight: 700; }

/* Tastatur muss sichtbar bleiben, sonst ist die Seite nicht bedienbar. */
:focus-visible {
    outline: 2px solid var(--red-hi);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Sprungmarke fuer Tastatur und Screenreader. */
.skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: var(--r-ctrl);
    background: var(--red);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: top var(--fast);
}
.skip:focus { top: 16px; }

::selection { background: var(--red); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #292c31; border-radius: var(--r-pill); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a3e44; }

/* ==========================================================================
   3. RAHMENBAUSTEINE
   ========================================================================== */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--gap-section); }

/* Abschnitte mit eigener Flaeche heben sich ab, ohne dass eine Linie noetig
   waere. Sie wechseln sich mit den normalen ab. */
.section.tinted {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(220, 38, 38, .045), transparent 60%),
        var(--bg-2);
    border-block: 1px solid var(--line);
}

.section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { margin-bottom: 14px; }

/* ---------- Eyebrow ----------
   Die Zeile ueber jeder Ueberschrift. Sie ist in Mono gesetzt wie die
   Kennungen im MDT und traegt einen kurzen roten Strich vor sich. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--red-hi);
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    flex: none;
    background: var(--red);
    box-shadow: 0 0 12px var(--red-glow);
}

/* Eine Ueberschrift kann eine Nummer tragen, wenn die Reihenfolge wirklich
   etwas bedeutet – bei den Regelparagraphen und den Einweisungsschritten. */
.num {
    font-family: var(--mono);
    font-weight: 600;
    color: var(--red);
}

/* ==========================================================================
   4. KOPFZEILE UND NAVIGATION
   ========================================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 9, 11, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

/* Derselbe rote Lichtstrich, der ingame ueber jedem Panel liegt. */
.topbar::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    opacity: .55;
    pointer-events: none;
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 72px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    flex: none;
}

.brand-logo {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--red-soft);
    border: 1px solid var(--red-line);
    overflow: hidden;
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }

.brand-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
}
.brand-name em { font-style: normal; color: var(--red-hi); }

.brand-sub {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav a {
    padding: 9px 14px;
    border-radius: var(--r-ctrl);
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text-2);
    transition: var(--fast);
}

.nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }

/* Die aktuelle Seite bekommt das Rot – nicht nur eine andere Textfarbe,
   damit sie auch im Vorbeischauen erkennbar ist. */
.nav a[aria-current="page"] {
    color: #fff;
    background: var(--red-soft);
    box-shadow: inset 0 0 0 1px var(--red-line);
}

.topbar-cta { display: flex; align-items: center; gap: 10px; flex: none; }

/* Der Schalter fuer schmale Bildschirme. Er ersetzt die Navigation erst
   unter 940px – darueber ist er nicht im Weg. */
.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-ctrl);
    background: rgba(255, 255, 255, .03);
    color: var(--text);
    cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    display: block;
    width: 17px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--fast), opacity var(--fast);
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4.5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1.5px); }

/* ==========================================================================
   5. SCHALTFLAECHEN
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--r-ctrl);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--fast), background var(--fast),
                border-color var(--fast), box-shadow var(--fast), color var(--fast);
}

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

.btn.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--red), var(--red-lo));
    box-shadow: 0 8px 22px var(--red-glow);
}
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(220, 38, 38, .32); }

.btn.ghost {
    color: var(--text-2);
    background: rgba(255, 255, 255, .03);
    border-color: var(--line);
}
.btn.ghost:hover { color: #fff; background: rgba(255, 255, 255, .07); border-color: var(--line-strong); }

.btn.small { height: 38px; padding: 0 15px; font-size: 12.5px; }

/* Textlink mit Pfeil – fuer Verweise am Ende eines Abschnitts. */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--red-hi);
}
.arrow-link::after {
    content: "→";
    transition: transform var(--fast);
}
.arrow-link:hover::after { transform: translateX(4px); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ==========================================================================
   6. STARTSEITE
   ========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(80px, 12vw, 150px) clamp(60px, 8vw, 100px);
    border-bottom: 1px solid var(--line);
}

/* ---------- Hintergrundebenen ----------
   Foto ganz unten, darueber Abdunklung, roter Schein und ein feines Raster.
   Faellt das Foto aus, bleibt der Verlauf stehen und sieht ebenfalls gut aus. */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(90% 70% at 15% 100%, rgba(220, 38, 38, .16), transparent 60%),
        radial-gradient(70% 60% at 85% 0%, rgba(60, 90, 160, .12), transparent 65%),
        linear-gradient(180deg, #0a0c10 0%, var(--bg) 75%);
}

/* PREVIEW:STRIP-START
   Das Foto stammt aus dem Ladebildschirm. Die Vorschaufassung (preview.html)
   laesst diesen Block weg, weil dort keine externen Dateien geladen werden. */
.hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("hero.jpg") center 35% / cover no-repeat;
    opacity: .22;
    filter: grayscale(.35) contrast(1.1);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 92%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 92%);
}
/* PREVIEW:STRIP-ENDE */

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 75%);
            mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 75%);
}

/* Der Lichtstreifen laeuft langsam durch – das einzige Dauerbild auf der
   Seite. Er zitiert den Blaulicht-Sweep des Ladebildschirms und bleibt
   bewusst so schwach, dass er beim Lesen nicht stoert. */
.hero-sweep {
    position: absolute;
    inset: -30% -50%;
    z-index: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(220, 38, 38, .10) 50%, transparent 58%);
    animation: sweep 11s linear infinite;
    pointer-events: none;
}

@keyframes sweep {
    from { transform: translateX(-40%); }
    to   { transform: translateX(40%); }
}

.hero .wrap { position: relative; z-index: 1; }

/* Der Kopf der Unterseiten ist derselbe Bau, nur flacher und ohne Foto –
   dort traegt die Ueberschrift, nicht das Bild. */
.page-hero { padding-block: clamp(58px, 7vw, 92px) clamp(44px, 5vw, 66px); }
.page-hero h1 {
    font-size: clamp(32px, 5vw, 56px);
    letter-spacing: -.03em;
    margin-bottom: 18px;
}

/* ---------- Eckwinkel ----------
   Vier Klammern um das Heldenbild, wie die Ecken im Ladebildschirm. */
.hero-frame { position: relative; padding: clamp(20px, 3vw, 34px) 0; }

.hero-frame::before,
.hero-frame::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border: 1px solid var(--red-line);
    pointer-events: none;
}
.hero-frame::before { top: 0; left: -14px; border-right: 0; border-bottom: 0; }
.hero-frame::after  { bottom: 0; right: -14px; border-left: 0; border-top: 0; }

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 7px 14px 7px 11px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-2);
}

.hero-kicker i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 4px var(--red-soft);
}

/* ---------- Wortmarke ----------
   Vier Zeichen weiss, der Rest rot – genau die Aufteilung, die der
   Ladebildschirm ueber Config.NameSplit vornimmt. */
.wordmark {
    font-size: clamp(52px, 11vw, 122px);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: .92;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.wordmark em { font-style: normal; color: var(--red); }

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}

.tag-red {
    padding: 6px 12px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--red), var(--red-lo));
    color: #fff;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
}

.tag-ghost {
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid var(--line-strong);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--text-2);
}

.hero-slogan {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 600;
    color: var(--text);
}

.hero-text {
    max-width: 58ch;
    margin-block: 22px 32px;
    color: var(--text-2);
}

/* ---------- Fakten unter dem Helden ----------
   Vier kurze Angaben, die der Server ohnehin in seiner Beschreibung fuehrt. */
.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: clamp(44px, 6vw, 72px);
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
}

.fact {
    padding: 20px 22px;
    background: rgba(17, 19, 22, .72);
}

.fact dt {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 7px;
}

.fact dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

/* ---------- Kartenraster ---------- */

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

.grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.card {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--r-card);
    background: linear-gradient(140deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    border: 1px solid var(--line);
    transition: transform var(--fast), border-color var(--fast),
                background var(--fast), box-shadow var(--fast);
}

/* Der rote Streifen links erscheint erst bei Beruehrung – dasselbe
   Verhalten wie bei den Karten im Spiel. */
.card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--red);
    opacity: 0;
    transition: var(--fast);
}

.card:hover {
    transform: translateY(-3px);
    border-color: var(--red-line);
    background: linear-gradient(140deg, rgba(220, 38, 38, .07), rgba(255, 255, 255, .015));
    box-shadow: var(--shadow-card);
}
.card:hover::after { opacity: 1; }

.card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--red-soft);
    border: 1px solid var(--red-line);
    color: var(--red-hi);
}
.card-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.card h3 { margin-bottom: 9px; }
.card p { font-size: 14px; color: var(--text-2); }

/* Kennung oben rechts auf der Karte – der Resource-Name, damit klar ist,
   worueber gesprochen wird. */
.card-code {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--text-3);
}

/* ==========================================================================
   7. FRAKTIONEN
   ========================================================================== */

.dept {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 48px);
    padding: clamp(26px, 3.5vw, 38px);
    border-radius: var(--r-panel);
    background: linear-gradient(150deg, var(--surface), var(--bg));
    border: 1px solid var(--line);
}

.dept + .dept { margin-top: 18px; }

.dept-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }

/* Das Kuerzel ersetzt ein Wappen: LSPD, BCSO, SAST, LSFD, DOJ. Es ist die
   Kennung, unter der die Fraktion ohnehin im MDT und im Funk laeuft. */
.dept-tag {
    display: grid;
    place-items: center;
    min-width: 62px;
    height: 62px;
    padding: 0 10px;
    flex: none;
    border-radius: var(--r-card);
    background: var(--red-soft);
    border: 1px solid var(--red-line);
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--red-hi);
}

.dept-title h3 { font-size: 21px; margin-bottom: 5px; }

.dept-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
}

.dept p { font-size: 14.5px; color: var(--text-2); }

.dept-duties {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
    padding: 0;
    list-style: none;
}

.dept-duties li {
    padding: 6px 11px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
}

/* ---------- Rangleiter ----------
   Die Raenge stehen so in HL_Jobs/config.lua. Die Nummer davor ist die
   Reihenfolge, nicht die Berechtigungsstufe. */
.ranks {
    margin: 0;
    padding: 20px;
    list-style: none;
    border-radius: var(--r-card);
    background: var(--sunken);
    border: 1px solid var(--line);
    counter-reset: rank;
}

.ranks-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 12px;
}

.ranks li {
    counter-increment: rank;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    font-size: 13.5px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.ranks li:last-child { border-bottom: 0; }

.ranks li::before {
    content: counter(rank, decimal-leading-zero);
    font-family: var(--mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
    flex: none;
}

/* Der oberste Rang ist der, auf den alle zuarbeiten – er darf sichtbar
   anders sein. */
.ranks li:last-child { color: var(--red-hi); font-weight: 700; }
.ranks li:last-child::before { color: var(--red); }

/* ==========================================================================
   8. EINSTIEG
   ========================================================================== */

/* ---------- Schritte ----------
   Hier ist die Nummerierung echt: die Einweisung laeuft genau in dieser
   Reihenfolge ab. */
.steps {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    counter-reset: step;
    padding: 0;
    margin: 0;
    list-style: none;
}

.step {
    position: relative;
    counter-increment: step;
    padding: 26px 24px 24px;
    border-radius: var(--r-card);
    background: linear-gradient(140deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    border: 1px solid var(--line);
}

.step::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--red);
}

.step h3 { font-size: 16px; margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--text-2); }

/* ---------- Tabellen fuer Tasten und Befehle ---------- */

.table-wrap {
    overflow-x: auto;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    background: rgba(17, 19, 22, .5);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

thead th {
    padding: 13px 18px;
    text-align: left;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
    background: rgba(255, 255, 255, .022);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

tbody td {
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    color: var(--text-2);
    vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, .018); }

td:first-child { white-space: nowrap; }

/* Taste als Kappe, Befehl als Mono-Text. Beides muss sich vom Fliesstext
   unterscheiden, sonst tippt man es falsch ab. */
kbd {
    display: inline-block;
    min-width: 30px;
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

code {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--red-hi);
    background: var(--red-soft);
    padding: 2px 7px;
    border-radius: 6px;
}

/* Zeile, die nur fuer eine Fraktion gilt. */
.only {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
    vertical-align: middle;
}

/* ---------- FAQ ----------
   Als <details>, damit es ohne JavaScript funktioniert und die Tastatur
   von sich aus richtig damit umgeht. */
.faq { display: grid; gap: 10px; }

.faq details {
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--line);
    transition: border-color var(--fast), background var(--fast);
}
.faq details[open] { border-color: var(--red-line); background: rgba(220, 38, 38, .05); }

.faq summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 22px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

/* Das Plus dreht sich zum Minus – ein einziges Zeichen, kein Bild noetig. */
.faq summary::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-left: auto;
    flex: none;
    background:
        linear-gradient(var(--red-hi), var(--red-hi)) center / 11px 1.5px no-repeat,
        linear-gradient(var(--red-hi), var(--red-hi)) center / 1.5px 11px no-repeat;
    transition: transform var(--slow);
}
.faq details[open] summary::after { transform: rotate(90deg); background-size: 11px 1.5px, 0 0; }

.faq .answer {
    padding: 0 22px 20px;
    font-size: 14px;
    color: var(--text-2);
    max-width: 70ch;
}

/* ==========================================================================
   9. REGELN
   ========================================================================== */

.rules-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

/* Das Verzeichnis laeuft mit. Unter 900px wird daraus eine normale Liste
   ueber dem Text. */
.toc {
    position: sticky;
    top: 96px;
    padding: 20px;
    border-radius: var(--r-card);
    background: rgba(17, 19, 22, .6);
    border: 1px solid var(--line);
}

.toc-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 12px;
}

.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }

.toc a {
    display: flex;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    transition: var(--fast);
}
.toc a::before {
    counter-increment: toc;
    content: "§" counter(toc);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    flex: none;
}
.toc a:hover { color: #fff; background: rgba(255, 255, 255, .05); }

.toc a.active {
    color: #fff;
    background: var(--red-soft);
    box-shadow: inset 0 0 0 1px var(--red-line);
}
.toc a.active::before { color: var(--red-hi); }

.rule { counter-increment: rule; scroll-margin-top: 96px; }
.rules-body { counter-reset: rule; }
.rule + .rule { margin-top: clamp(38px, 5vw, 56px); }

.rule h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: clamp(21px, 2.4vw, 27px);
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.rule h2::before {
    content: "§" counter(rule);
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--red);
    flex: none;
}

/* Die einzelnen Regeln sind nummeriert, weil im Support genau darauf
   verwiesen wird: "Verstoss gegen 4.2". */
.rule ol { margin: 0; padding: 0; list-style: none; counter-reset: para; }

.rule ol li {
    counter-increment: para;
    position: relative;
    padding: 12px 0 12px 58px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    color: var(--text-2);
    font-size: 14.5px;
}
.rule ol li:last-child { border-bottom: 0; }

.rule ol li::before {
    content: counter(rule) "." counter(para);
    position: absolute;
    left: 0;
    top: 12px;
    font-family: var(--mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
}

.rule ol li b { color: var(--text); font-weight: 700; }

/* Hinweiskasten – fuer Definitionen und fuer den Stand der Fassung. */
.note {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--r-card);
    background: var(--red-soft);
    border: 1px solid var(--red-line);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-2);
}
.note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--red-hi); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.note strong { display: block; color: #fff; margin-bottom: 3px; }

.note.plain { background: rgba(255, 255, 255, .025); border-color: var(--line); }
.note.plain svg { color: var(--text-3); }

/* Sanktionsstufen: die Farbe traegt die Schwere, nicht nur das Wort. */
.levels { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.level {
    padding: 18px 20px;
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line);
    border-left: 3px solid var(--stufe, var(--text-3));
}
.level dt {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--stufe, var(--text-3));
    margin-bottom: 7px;
}
.level dd { margin: 0; font-size: 13.5px; color: var(--text-2); }
.level.warn   { --stufe: var(--warn); }
.level.danger { --stufe: var(--danger); }
.level.hard   { --stufe: #ff6268; }

/* ==========================================================================
   10. AUFRUF UND FUSSZEILE
   ========================================================================== */

.cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-block: clamp(64px, 9vw, 104px);
    background:
        radial-gradient(80% 120% at 50% 100%, rgba(220, 38, 38, .18), transparent 62%),
        var(--bg-2);
    border-top: 1px solid var(--line);
}

.cta h2 { margin-bottom: 16px; }
.cta .lead { margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: 30px; }

/* Die Verbindungsadresse zum Mitnehmen. Ein Klick kopiert sie – das ist
   bequemer als markieren, wenn das Spiel schon laeuft. */
.copy-line {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding: 9px 9px 9px 18px;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .4);
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-2);
}
.copy-line button { border: 0; }

.site-footer {
    padding-block: 44px;
    border-top: 1px solid var(--line);
    background: var(--bg);
    font-size: 13px;
    color: var(--text-3);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
}

.footer-nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.footer-nav a { color: var(--text-2); font-weight: 600; }
.footer-nav a:hover { color: var(--red-hi); }

.footer-legal {
    width: 100%;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.7;
}

/* ==========================================================================
   11. BEWEGUNG UND KLEINE BILDSCHIRME
   ========================================================================== */

/* Beim Laden faehrt der Held gestaffelt ein – einmal, nicht dauerhaft. */
.rise { animation: rise .7s var(--ease) both; }
.rise-2 { animation-delay: .08s; }
.rise-3 { animation-delay: .16s; }
.rise-4 { animation-delay: .24s; }
.rise-5 { animation-delay: .32s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* Abschnitte blenden beim Scrollen ein. Ohne JavaScript bleiben sie
   sichtbar – die Klasse wird erst gesetzt, wenn der Beobachter laeuft. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.seen {
    opacity: 1;
    transform: none;
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
    .dept { grid-template-columns: 1fr; }
    .facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .rules-layout { grid-template-columns: 1fr; }
    .toc { position: static; }
    .toc ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px; }
}

@media (max-width: 940px) {
    .nav-toggle { display: grid; }

    /* Die Navigation klappt unter die Kopfzeile, statt sie zu sprengen. */
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px var(--gutter) 18px;
        background: rgba(8, 9, 11, .97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
    }
    .nav.open { display: flex; }
    .nav a { padding: 12px 14px; font-size: 15px; }

    .topbar-cta .btn.discord { display: none; }
}

@media (max-width: 620px) {
    body { font-size: 15px; }
    .facts { grid-template-columns: 1fr; }
    .hero-frame::before, .hero-frame::after { display: none; }
    .card { padding: 22px; }
    .dept-head { flex-direction: column; }
    .btn-row .btn { width: 100%; }
    .copy-line { width: 100%; justify-content: space-between; font-size: 12px; }
    .footer-nav { margin-left: 0; }
}