@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/exo-2-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/exo-2-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/exo-2-latin-700-normal.woff2') format('woff2'); }

/* ============================================================================================================================================
   SC-THEME: dunkles Design im Stil der Star-Citizen-Welt (Marineblau, helles Blau als Akzent, abgeschraegte Ecken, Versalien).
   Wird NACH style.css und den anderen Stylesheets geladen und ueberschreibt nur Farben, Formen und Schrift - Aufbau und Klassen bleiben unveraendert.
   Alles laeuft ueber die Variablen aus :root; Texte in Versalien kommen aus CSS (text-transform), nicht aus den Seiten.
   Nur oeffentliche Seiten; das Portal (reporting) hat eigene Stylesheets.
   ============================================================================================================================================ */

:root {
    /* Flaechen */
    --app-dark: #07111f;
    --app-dark-light: #0d2036;
    --app-panel: #0e2238;
    --bg-body: #050d18;
    --bg-white: #0b1b2e;
    --bg-soft: #102740;

    /* Akzent: helles Blau wie der Hauptknopf der Star-Citizen-Seiten */
    --accent: #4db3ff;
    --accent-hover: #8bd0ff;
    --accent-light: rgba(77, 179, 255, 0.12);
    --accent-strong: #1c7fd1;

    /* Text */
    --text: #b4c6d8;
    --text-light: #7d93a9;
    --text-dark: #e8f1fa;
    --text-white: #f4f8fc;

    /* Linien */
    --border: #1c3a58;
    --border-dark: #1c3a58;
    --line-bright: rgba(77, 179, 255, 0.55);

    /* Form: kaum Rundung, Schraegen statt Radius */
    --radius: 2px;
    --radius-sm: 2px;
    --radius-lg: 3px;
    --cut: 12px;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);

    /* Schrift: Ueberschriften, Menue und Knoepfe in Exo 2 (selbst gehostet, SIL OFL, siehe fonts/Exo2-OFL.txt); Fliesstext bleibt in der Systemschrift */
    --font: 'Segoe UI Variable Text', 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Exo 2', 'Bahnschrift', 'DIN Alternate', 'Roboto Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
    --font-mono: 'Cascadia Mono', 'Consolas', 'Lucida Console', monospace;

    --success: #3ddc97;
    --warning: #ffb547;
    --error: #ff6b6b;
}

html { color-scheme: dark; }
body { background: var(--bg-body); color: var(--text); }

/* ------------------------------------------------------------------ Hintergrund: tiefes Blau mit weichen Lichtflecken statt hellem Verlauf */
body::before {
    background:
        radial-gradient(ellipse 60% 50% at 12% 8%, rgba(28, 127, 209, 0.28) 0%, transparent 70%),
        radial-gradient(ellipse 55% 45% at 88% 92%, rgba(28, 127, 209, 0.22) 0%, transparent 70%),
        radial-gradient(ellipse 45% 40% at 50% 55%, rgba(77, 179, 255, 0.07) 0%, transparent 70%),
        linear-gradient(180deg, #06101d 0%, #040a14 100%);
    background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ Schrift der Ueberschriften */
h1, h2, h3, h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; color: var(--text-dark); }
h1 { font-size: 2.3rem; letter-spacing: 0.09em; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 0.98rem; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
::selection { background: rgba(77, 179, 255, 0.35); color: #fff; }

/* ------------------------------------------------------------------ Kopfzeile */
header {
    background: linear-gradient(180deg, #0a1a2e 0%, #07111f 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(77, 179, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.45);
}
header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--line-bright) 30%, var(--line-bright) 70%, transparent 100%);
    pointer-events: none;
}
.nav-brand { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; }
.nav-brand h3 { font-weight: 600; letter-spacing: 0.12em; }
.nav-link {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
    font-weight: 600;
    color: rgba(214, 230, 245, 0.78);
    border-radius: 0;
    position: relative;
}
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(77, 179, 255, 0.1); }
.nav-link::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px; bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform var(--transition);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.highlight { background: var(--accent); color: #04101d; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.nav-link.highlight:hover { background: var(--accent-hover); color: #04101d; }
.nav-link.highlight::after { display: none; }
.nav-dropdown-content { background: #0a1a2e; border: 1px solid var(--border); border-radius: 0; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6); z-index: 10; } /* z-index: ueber den Lichtlinien des Headers (header::before/::after), sonst schienen sie durch das Untermenue */
.nav-dropdown-content a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12.5px; }
.nav-dropdown-content a:hover { background: rgba(77, 179, 255, 0.12); }
.lang-switcher { background: rgba(77, 179, 255, 0.08); border-radius: 0; border: 1px solid var(--border); }
.lang-btn { border-radius: 0; font-family: var(--font-display); letter-spacing: 0.08em; }
.lang-btn.active { background: var(--accent); color: #04101d; }

/* ------------------------------------------------------------------ Knoepfe: abgeschraegt, flaechig, Versalien */
.btn {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 0;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.btn-primary { background: var(--accent); color: #04101d; }
.btn-primary:hover { background: var(--accent-hover); color: #04101d; transform: none; box-shadow: none; filter: drop-shadow(0 0 10px rgba(77, 179, 255, 0.55)); }

/* ------------------------------------------------------------------ Karten und Kaesten: dunkles Glas, duenne Linie, Eckmarken */
.feature-card, .compare-box, .description-box, .gallery-box, .faq-item, .changelog-entry, .roadmap-card, .eula-container, .patreon-card {
    background: rgba(9, 25, 43, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
}
.feature-card::before, .compare-box::before, .description-box::before, .gallery-box::before, .changelog-entry::before, .roadmap-card::before, .eula-container::before,
.feature-card::after, .compare-box::after, .description-box::after, .gallery-box::after, .changelog-entry::after, .roadmap-card::after, .eula-container::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    pointer-events: none;
    border: 0 solid var(--accent);
}
.feature-card::before, .compare-box::before, .description-box::before, .gallery-box::before, .changelog-entry::before, .roadmap-card::before, .eula-container::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.feature-card::after, .compare-box::after, .description-box::after, .gallery-box::after, .changelog-entry::after, .roadmap-card::after, .eula-container::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.feature-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(28, 127, 209, 0.22); }
.feature-card h4 { color: var(--accent); }
.hero-image { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(77, 179, 255, 0.08); }
.hero-ribbon { background: var(--accent); color: #04101d; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; }
.hero-text p, .description-box p, .description-box li { color: var(--text); }
.gallery-item img { border-radius: var(--radius); border: 1px solid var(--border); }
.gallery-grid::-webkit-scrollbar-track { background: var(--border); }
.gallery-grid::-webkit-scrollbar-thumb { background: var(--accent); }

/* ------------------------------------------------------------------ FAQ */
.faq-search { background: rgba(9, 25, 43, 0.9); border-radius: 0; }
.faq-search input { color: var(--text-dark); }
.faq-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.faq-search img { filter: invert(1); opacity: 0.5; }
.faq-question:hover { background: rgba(77, 179, 255, 0.07); }

/* Auf- und Zuklapp-Marke: abgeschraegtes Quadrat, Plus und Minus als Linien gezeichnet (der Text aus dem Script bleibt unsichtbar, dient nur Screenreadern) */
.faq-toggle,
.faq-item.open .faq-toggle {
    position: relative;
    width: 28px; height: 28px;
    font-size: 0; line-height: 0; color: transparent;
    background: rgba(77, 179, 255, 0.10);
    border: 1px solid var(--accent);
    border-radius: 0;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    transform: none;
    transition: background var(--transition), border-color var(--transition);
}
.faq-toggle::before, .faq-toggle::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 2px;
    margin: -1px 0 0 -6px;
    background: var(--accent);
    transition: transform 0.25s ease, background var(--transition);
}
.faq-toggle::after { transform: rotate(90deg); }
.faq-question:hover .faq-toggle { background: rgba(77, 179, 255, 0.22); }
.faq-item.open .faq-toggle { background: var(--accent); }
.faq-item.open .faq-toggle::before, .faq-item.open .faq-toggle::after { background: #04101d; }
.faq-item.open .faq-toggle::after { transform: rotate(0deg); }

/* Geoeffnete Frage: Akzentkante links, Antwortbereich etwas tiefer eingefaerbt */
.faq-item.open { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), 0 6px 24px rgba(0, 0, 0, 0.35); }
.faq-item.open .faq-question-text { color: var(--accent-hover); }
.faq-item.open .faq-answer { background: linear-gradient(180deg, rgba(77, 179, 255, 0.07) 0%, rgba(5, 13, 24, 0.55) 100%); border-top: 1px solid var(--border); }
.faq-cat-btn { background: transparent; border-color: var(--border); color: var(--text); border-radius: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; }
.faq-cat-btn:hover { border-color: var(--accent); color: var(--accent); }
.faq-cat-btn.active { background: var(--accent); border-color: var(--accent); color: #04101d; }
.faq-image img { box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------------ Changelog und Roadmap: Kennzeichen mit dunklen Farben */
.changelog-type { border-radius: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; }
.changelog-type.added { background: rgba(61, 220, 151, 0.14); color: #5eeaa8; }
.changelog-type.changed { background: rgba(255, 181, 71, 0.14); color: #ffc66d; }
.changelog-type.fixed { background: rgba(77, 179, 255, 0.16); color: #7cc8ff; }
.changelog-type.removed { background: rgba(255, 107, 107, 0.15); color: #ff8f8f; }
.roadmap-status-badge { border-radius: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
.roadmap-status-badge.status-offen { background: rgba(77, 179, 255, 0.14); color: #7cc8ff; }
.roadmap-status-badge.status-erstellung { background: rgba(255, 181, 71, 0.14); color: #ffc66d; }
.roadmap-status-badge.status-pruefung { background: rgba(190, 130, 255, 0.15); color: #cfa2ff; }
.roadmap-status-badge.status-abgeschlossen { background: rgba(61, 220, 151, 0.14); color: #5eeaa8; }
.roadmap-status-badge.status-verschoben { background: rgba(255, 107, 107, 0.15); color: #ff8f8f; }
.roadmap-card-image::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(9, 25, 43, 0.95) 100%), linear-gradient(135deg, rgba(28, 127, 209, 0.35) 0%, rgba(28, 127, 209, 0) 60%); mix-blend-mode: normal; }
.roadmap-card-image::after { background: linear-gradient(160deg, rgba(77, 179, 255, 0.16) 0%, rgba(77, 179, 255, 0) 40%); }

/* ------------------------------------------------------------------ Formulare und Tabellen allgemein */
input, select, textarea { color-scheme: dark; }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], select, textarea {
    background: #0a1a2e;
    color: var(--text-dark);
    border: 1px solid var(--border);
    border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
input::placeholder, textarea::placeholder { color: var(--text-light); }

/* ------------------------------------------------------------------ SC Database */
.db-tab, .db-chip {
    border-radius: 0;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    background: rgba(9, 25, 43, 0.82);
}
.db-tab.active { background: var(--accent); border-color: var(--accent); color: #04101d; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.db-chip.active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.db-input, .db-select { background: #0a1a2e; color: var(--text-dark); border-radius: 0; }
.db-table-wrap { background: rgba(9, 25, 43, 0.85); border: 1px solid var(--border); border-radius: 0; }
.db-table th { background: #0d2036; color: var(--text-light); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; }
.db-table tbody tr:hover { background: var(--accent-light); }
.db-card { background: rgba(9, 25, 43, 0.85); border-radius: 0; position: relative; }
.db-card::before, .db-card::after { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.db-card::before { left: -1px; top: -1px; border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); }
.db-card::after { right: -1px; bottom: -1px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); } /* Eckmarke unten rechts wie bei den anderen Kaesten */
.db-card-title, .db-subtitle { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; }
.db-badge { border-radius: 0; background: var(--accent-light); color: var(--accent); font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.db-badge-soft { background: var(--bg-soft); color: var(--text-light); }
.db-var { background: var(--bg-soft); color: var(--text-light); border-radius: 0; }
.db-link { color: var(--accent); }
/* Bildfarben der SC Database: zentral in css/scdatabase.css (Block "Bildfarben") */

/* ------------------------------------------------------------------ Fusszeile, QR-Leiste, Lightbox */
footer { background: #040b15; border-top: 1px solid var(--border); }
.qr-slide { background: rgba(9, 25, 43, 0.96); border: 1px solid var(--border); border-radius: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
.qr-slide-item { border-radius: 0; background: #fff; }
/* QR-Codes: reines Schwarz auf Weiss mit breitem Rand (Ruhezone), damit Handys sie schnell erkennen; Bildunterschrift ausserhalb des Codes */
@media (min-width: 769px) { .qr-slide-item { width: 184px; } }
.qr-slide-item { text-align: center; padding: 0; }
.qr-slide-caption { display: block; padding: 8px 0 7px; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2; color: var(--text-dark); background: #0d2036; border-bottom: 1px solid var(--accent); }
.qr-slide-join { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 2px; }
.qr-slide-close { background: #0d2036; color: var(--text-dark); border: 1px solid var(--border); }

/* Eingeklappt (Standard beim Laden): nur eine schmale Marke am linken Rand mit Hinweis, die sich am Anfang dreimal sanft aufleuchtend meldet */
.qr-slide-tab, .qr-slide.collapsed .qr-slide-tab:hover {
    background: #0d2036;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-left: none;
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.qr-slide-tab {
    right: -41px;
    width: 40px; height: 200px;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-display);
    clip-path: polygon(0 0, 100% 14px, 100% calc(100% - 14px), 0 100%);
}
.qr-slide-tab-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; }
.qr-slide-tab-arrow { font-size: 15px; }
.qr-slide.collapsed .qr-slide-tab:hover { background: #12304d; color: var(--accent-hover); }
.qr-slide.collapsed .qr-slide-tab { animation: sc-qr-hint 2.4s ease-in-out 2s 3; }
@keyframes sc-qr-hint {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 8px rgba(77, 179, 255, 0.95)); }
}
@media (prefers-reduced-motion: reduce) { .qr-slide.collapsed .qr-slide-tab { animation: none; } }
.lightbox { background: rgba(2, 6, 12, 0.96); }
.lightbox img { border-radius: 0; border: 1px solid var(--border); }

/* ------------------------------------------------------------------ Scrollleiste */
.content::-webkit-scrollbar { width: 10px; }
.content::-webkit-scrollbar-track { background: #050d18; }
.content::-webkit-scrollbar-thumb { background: #1c3a58; border: 2px solid #050d18; }
.content::-webkit-scrollbar-thumb:hover { background: var(--accent-strong); }

/* ------------------------------------------------------------------ Patreon-Seite: ihre Inline-Styles kommen nach diesem Theme, daher hoehere Spezifitaet */
body .patreon-card { background: rgba(9, 25, 43, 0.86); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); }
body .patreon-card h1, body .patreon-card .form-group label { color: var(--text-dark); }
body .patreon-card .subtitle { color: var(--text); }
body .patreon-card input { background: rgba(5, 13, 24, 0.8); border: 1px solid var(--border); color: var(--text-dark); }
body .patreon-card input:focus { border-color: var(--accent); outline: none; }
body .patreon-card .btn-check, body .patreon-card .btn-register, body .patreon-card .btn-download { background: var(--accent); color: #04101d; border-radius: 0; }
body .patreon-card .btn-check:hover, body .patreon-card .btn-register:hover, body .patreon-card .btn-download:hover { background: var(--accent-hover); }
body .patreon-card .msg-error { background: rgba(120, 20, 30, 0.35); color: #ff9aa5; border-color: #7a2430; }
body .patreon-card .msg-success { background: rgba(20, 100, 60, 0.35); color: #7ee2a8; border-color: #1f6b45; }
body .patreon-card .msg-info { background: rgba(28, 127, 209, 0.2); color: var(--accent-hover); border-color: var(--border); }
body .patreon-card .dsgvo-box, body .patreon-card .token-display { background: rgba(5, 13, 24, 0.8); border-color: var(--border); }
body .patreon-card .dsgvo-text, body .patreon-card .dsgvo-check { color: var(--text); }

/* Das Patreon-Logo ist selbst weiss; die alte Umkehrung (fuer den hellen Hintergrund) faellt im dunklen Theme weg */
.pat-invert, body .patreon-card .pat-invert { filter: none; }

/* ------------------------------------------------------------------ Vergleichstabelle (Startseite) */
.compare-table thead th { color: var(--accent); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--accent); }
.compare-table td { color: var(--text-dark); }
.compare-table tbody tr { border-bottom: 1px solid var(--border); }
.compare-table tbody tr:last-child { border-bottom: none; }
.compare-note { color: var(--text); }

/* FAQ-Suche: das Eingabefeld sitzt im Rahmen des Suchkastens und bekommt keinen eigenen */
.faq-search input, .faq-search input[type="text"], .faq-search input[type="search"] { background: transparent; border: none; box-shadow: none; padding: 0; }
.faq-search input:focus { border: none; box-shadow: none; }

/* ================================================================== Star-Citizen-Flair (dezent) */

/* ------------------------------------------------------------------ Ueberschriften: Zierlinien links und rechts, wie in den mobiGlas-Menues */
h2.text-center, .compare-section h2 { display: flex; align-items: center; justify-content: center; gap: 18px; }
h2.text-center::before, h2.text-center::after, .compare-section h2::before, .compare-section h2::after {
    content: '';
    flex: 1 1 0;
    min-width: 20px;
    height: 1px;
    opacity: 0.7;
} /* Linien reichen links und rechts bis an die Kanten des Inhaltsbereichs (wie die Kaesten darunter), ohne Quadrate */
h2.text-center::before, .compare-section h2::before {
    background: linear-gradient(90deg, rgba(77, 179, 255, 0), var(--accent));
}
h2.text-center::after, .compare-section h2::after {
    background: linear-gradient(270deg, rgba(77, 179, 255, 0), var(--accent));
}

/* ------------------------------------------------------------------ Header und Fusszeile: Lichtstreifen laufen entlang der Linie (oben nach rechts, unten nach links, zeitversetzt), alle 7 Sekunden */
header::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139, 208, 255, 0.95), transparent) -40vw 0 / 28vw 100% no-repeat;
    filter: drop-shadow(0 0 4px rgba(77, 179, 255, 0.9));
    pointer-events: none;
    z-index: 1;
    animation: sc-header-sweep 7s linear 0.8s infinite;
}
@keyframes sc-header-sweep {
    0% { background-position: -40vw 0; }
    30% { background-position: 110vw 0; }
    100% { background-position: 110vw 0; }
}
footer {
    background:
        linear-gradient(90deg, transparent, rgba(139, 208, 255, 0.95), transparent) 140vw 0 / 28vw 2px no-repeat,
        #040b15;
    animation: sc-footer-sweep 7s linear 4.3s infinite;
}
@keyframes sc-footer-sweep {
    0% { background-position: 140vw 0, 0 0; }
    30% { background-position: -40vw 0, 0 0; }
    100% { background-position: -40vw 0, 0 0; }
}

/* ------------------------------------------------------------------ Technische Mikro-Beschriftungen (nur Dekoration, reine Fachbegriffe) */
.hero-text::before {
    content: '// SYS READY  ·  STAR CITIZEN TOOLKIT';
    display: block;
    margin-bottom: var(--space-md);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--accent);
    opacity: 0.7;
}
footer::before {
    content: 'LUFTWERFT  //  SC LAUNCH CONFIGURATOR';
    position: absolute;
    left: 18px; bottom: 8px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--text);
    opacity: 0.35;
    pointer-events: none;
}
footer::after {
    content: 'ONLINE';
    position: absolute;
    right: 18px; bottom: 8px;
    padding-left: 13px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--success);
    opacity: 0.55;
    pointer-events: none;
    background: radial-gradient(circle at 4px 50%, var(--success) 0 2.5px, transparent 3px) no-repeat;
    animation: sc-pulse-opacity 3.2s ease-in-out infinite;
}
@keyframes sc-pulse-opacity { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }

/* ------------------------------------------------------------------ Hero-Hintergrundbild (optional): Bild als images/hero_bg.jpg ablegen und die Zeilen einkommentieren
.hero { position: relative; }
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 13, 24, 0.55) 0%, rgba(5, 13, 24, 0.85) 70%, #050d18 100%), url('../images/hero_bg.jpg') center / cover no-repeat;
    opacity: 0.55;
    pointer-events: none;
    -webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%);
    mask: linear-gradient(180deg, #000 55%, transparent 100%);
}
*/

/* ------------------------------------------------------------------ SC Database: Kanal-Schalter mit Statuspunkt, Hersteller und Ueberschriften technischer */
.db-chip[data-db-channel]::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    vertical-align: 1px;
    background: var(--text-light);
}
.db-chip[data-db-channel="LIVE"]::before { background: var(--success); box-shadow: 0 0 6px var(--success); animation: sc-pulse-opacity 2.4s ease-in-out infinite; }
.db-chip[data-db-channel="PTU"]::before { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.db-chip { font-family: var(--font-display); letter-spacing: 0.1em; }
.db-head-meta, .db-stand { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; }
.db-table thead th { font-family: var(--font-display); letter-spacing: 0.14em; }

@media (max-width: 768px) {
    footer::before, footer::after { display: none; }
    h2.text-center::before, h2.text-center::after, .compare-section h2::before, .compare-section h2::after { min-width: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    header::before, footer, footer::after, .db-chip::before { animation: none; }
}

body .patreon-card .verify-digit:focus { background: rgba(5, 13, 24, 0.9); border-color: var(--accent); }

/* Listen: ganze Zeile oeffnet den Eintrag, der Name steht in normaler Schriftfarbe statt als blauer Link */
.db-table tr.db-row-open { cursor: pointer; }
.db-table tr.db-row-open td:first-child .db-link { color: var(--text-dark); font-weight: 400; }
.db-table tr.db-row-open:hover td:first-child .db-link { color: var(--accent); text-decoration: none; }

/* SC Database Startseite: zentrierte grosse Suche, drei grosse Kacheln fuer die Bereiche */
.db-home { max-width: 860px; margin: var(--space-lg, 32px) auto var(--space-md, 24px); text-align: center; }
.db-home-input { width: 100%; box-sizing: border-box; height: 60px; padding: 0 22px; font-size: 18px; }
.db-home-hint { margin: 28px 0 14px; }
.db-home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.db-home-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 20px;
    background: rgba(9, 25, 43, 0.85); border: 1px solid var(--border); border-radius: 0; color: var(--text-dark); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.db-home-tile::before, .db-home-tile::after { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.db-home-tile::before { left: -1px; top: -1px; border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); }
.db-home-tile::after { right: -1px; bottom: -1px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.db-home-tile:hover { background: var(--accent-light); border-color: var(--accent); }
.db-home-tile-title { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; }
.db-home-tile-count { font-size: 13px; color: var(--text-light); }
.db-home-channels { justify-content: center; margin-top: 20px; }
.db-home-group { margin-bottom: var(--space-md, 24px); }
.db-home-group-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); }
.db-home-more { margin: 8px 0 0; text-align: right; }
@media (max-width: 700px) { .db-home-tiles { grid-template-columns: 1fr; } .db-home-tile { min-height: 72px; } }

/* SC Database: Datenstand unter der Ueberschrift, Startseite in beide Richtungen zentriert */
.db-page-header .db-stand { margin: 10px 0 0; text-align: center; }
.content:has(.db-page-home) > #content { min-height: 100%; display: flex; flex-direction: column; }
.db-page-home { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.db-page-home .db-home { margin-top: 0; }

/* Startseite: Suchfeld mit Button dahinter */
.db-home-search { display: flex; gap: 10px; }
.db-home-search .db-home-input { flex: 1 1 auto; width: auto; min-width: 0; }
.db-home-btn { flex: 0 0 auto; height: 60px; padding: 0 32px; border: 0; border-radius: 0; background: var(--accent); color: #04101d; cursor: pointer;
    font-family: var(--font-display); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.db-home-btn:hover { background: var(--accent-hover); }

/* Startseite: Kanal-Marken je Treffer (LIVE/PTU) */
.db-ch-cell { text-align: right; white-space: nowrap; width: 1%; }
.db-ch-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; font-size: 11px; letter-spacing: 0.08em; border: 1px solid var(--border); color: var(--text-light); }
.db-ch-badge.db-ch-live { border-color: rgba(77, 179, 126, 0.6); color: #4db37e; }
.db-ch-badge.db-ch-ptu { border-color: rgba(217, 164, 65, 0.6); color: #d9a441; }
.db-home-group-title .db-muted { margin-left: 10px; font-size: 12px; }
.db-home-sep { margin: 0 10px; color: var(--text-light); }

/* Datenstand auf der Startseite: LIVE und PTU je eine Zeile */
.db-stand-line { display: block; }

/* Detailseite ohne Reiter: LIVE/PTU bleiben rechts */
.db-toolbar > .db-channels { margin-left: auto; }

/* Detailseite: "Zurueck" links in der Zeile von LIVE/PTU */
.db-back { font-size: 15px; font-weight: 600; text-decoration: none; }
.db-back:hover { text-decoration: none; }

/* Listen passen ins Fenster: Tabelle scrollt in sich (Hoehe setzt fitList in js/scdatabase.js) */
.db-table-wrap.db-table-fit { overflow-y: auto; }
.db-table-wrap.db-table-fit::-webkit-scrollbar { width: 10px; }
.db-table-wrap.db-table-fit::-webkit-scrollbar-track { background: #050d18; }
.db-table-wrap.db-table-fit::-webkit-scrollbar-thumb { background: #1c3a58; border: 2px solid #050d18; }

/* Blaettern: Seitenzahl direkt eingeben */
.db-page-input { width: 64px; margin: 0 8px; padding: 4px 6px; text-align: center; background: rgba(9, 25, 43, 0.85); border: 1px solid var(--border); border-radius: 0; color: var(--text-dark); font: inherit; -moz-appearance: textfield; }
.db-page-input::-webkit-outer-spin-button, .db-page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.db-page-input:focus { outline: none; border-color: var(--accent); }

/* Blaettern: Knoepfe, Text und Seitenfeld auf einer Mittellinie und gleich hoch */
.db-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; }
.db-pagination .pagination-info { display: inline-flex; align-items: center; margin: 0; line-height: 1; }
.db-pagination .pagination-btn { height: 36px; display: inline-flex; align-items: center; line-height: 1; margin: 0; }
.db-pagination .db-page-input { height: 36px; box-sizing: border-box; padding: 0 6px; }

/* Reiterzeile: links Zurueck, Mitte die Reiter, rechts LIVE/PTU */
#db-toolbar.db-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
#db-toolbar > .db-back { justify-self: start; grid-column: 1; }
#db-toolbar > .db-tabs { justify-self: center; grid-column: 2; }
#db-toolbar > .db-channels { justify-self: end; grid-column: 3; margin-left: 0; }
@media (max-width: 700px) { #db-toolbar.db-toolbar { grid-template-columns: 1fr 1fr; } #db-toolbar > .db-tabs { grid-column: 1 / -1; grid-row: 2; } }

/* Startseite: Screenshot hebt sich vom gleichfarbigen Hintergrund ab. Weicher blauer Lichtschein dahinter,
   etwas hellerer Rahmen und Akzentecken oben links und unten rechts wie bei den Kaesten. */
.hero-image {
    border-radius: 0;
    border: 1px solid rgba(77, 179, 255, 0.35);
    box-shadow: 0 0 90px 10px rgba(77, 179, 255, 0.22), 0 0 30px rgba(77, 179, 255, 0.18), 0 18px 50px rgba(0, 0, 0, 0.7);
}
.hero-image::before, .hero-image::after { content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 3; }
.hero-image::before { left: 0; top: 0; border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); }
.hero-image::after { right: 0; bottom: 0; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }

/* Startseite: Screenshot schraeg in den Raum gestellt (wie ein Monitor, zur Textseite gedreht), kraeftigerer Schatten darunter.
   Der Parallax-Versatz aus js/app.js kommt ueber --hero-parallax dazu. */
.hero-image {
    transform: perspective(1800px) rotateY(-20deg) rotateX(6deg) translateY(var(--hero-parallax, 0px));
    /* Spiegelung am "Boden" (Chrome, Edge, Safari; andere Browser zeigen sie einfach nicht) */
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent 55%, rgba(255, 255, 255, 0.32));
    transform-origin: 60% 50%;
    box-shadow: 0 0 90px 10px rgba(77, 179, 255, 0.22), 0 0 30px rgba(77, 179, 255, 0.18), 30px 40px 70px rgba(0, 0, 0, 0.75);
}
@media (max-width: 900px) { .hero-image { transform: translateY(var(--hero-parallax, 0px)); -webkit-box-reflect: none; } }

/* Kernschatten: dunkle, weiche Ellipse direkt unter der Unterkante des Screenshots, wie ein Monitor auf dem Boden */
.hero-visual { position: relative; isolation: isolate; }
.hero-visual::after {
    content: '';
    position: absolute;
    left: 6%; right: 6%; bottom: -26px;
    height: 34px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 72%);
    filter: blur(6px);
    pointer-events: none;
    z-index: -1;
}
@media (max-width: 900px) { .hero-visual::after { display: none; } }
@media (max-width: 768px) { .hero-visual { order: -1; } }

/* ------------------------------------------------------------------ SC Database: Bezugsquellen (Missionsbelohnung, Beute) */
.db-sub-title { margin: 16px 0 6px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.db-card .db-sub-title:first-of-type { margin-top: 0; }
.db-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.db-chips li { padding: 2px 9px; border: 1px solid var(--border); color: var(--text); font-size: 13px; }

/* ------------------------------------------------------------------ SC Database: Schwierigkeit als vier Stufen (1 bis 5) */
.db-diff { display: grid; grid-template-columns: auto auto auto; justify-content: end; align-items: center; gap: 3px 10px; }
.db-diff-label { color: var(--text); text-align: right; }
.db-diff-pips { display: inline-flex; gap: 3px; }
.db-diff-pips i { width: 12px; height: 7px; border: 1px solid var(--border); }
.db-diff-pips i.on { background: var(--accent); border-color: var(--accent); }
.db-diff-lvl { color: var(--text-light); font-size: 12px; min-width: 10px; text-align: right; }

/* ------------------------------------------------------------------ SC Database: innerhalb der Kaesten wenig Fettschrift (Werte heben sich ueber die hellere Farbe ab) */
/* FIX (User-Feedback: "lass die Fettschrift endlich weg") - in den Kaesten gar keine Fettschrift mehr, nur die Kastenueberschrift bleibt */
.db-card, .db-card *:not(.db-card-title) { font-weight: 400 !important; }
.db-card strong, .db-card b { font-weight: 400 !important; }

/* ---- Kopfzeile der SC Database: Symbol-Leiste (User-Feedback: "das gefaellt mir oben nicht" -> Variante 3) ----
   Reihe 1: "Zurueck" (nur Listen/Detailseiten). Reihe 2: alle Bereiche als gleich breite Felder (Symbol ueber dem Namen, eine Zeile, duenne Linie
   darunter, aktiver Bereich mit Akzentstrich) und rechts LIVE/PTU als Umschalter nebeneinander. Ersetzt die frueheren Kaesten-Regeln. */
/* Variante B: Zurueck als quadratischer Symbol-Knopf links in derselben Zeile wie die Leiste; mehr Luft bis zur Suche */
#db-toolbar.db-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; column-gap: 16px; row-gap: 10px; margin-bottom: 48px; }
#db-toolbar > .db-back { grid-column: 1; grid-row: 1; justify-self: start; align-self: end; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 8px; border: 1px solid var(--border); color: var(--accent); background: none; text-decoration: none; }
#db-toolbar > .db-back.db-hidden { display: none !important; }
#db-toolbar > .db-back:hover { border-color: var(--accent); background: var(--accent-light); }
#db-toolbar .db-back-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#db-toolbar > .db-tabs { grid-column: 2; grid-row: 1; justify-self: stretch; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72px, 1fr); gap: 0; flex-wrap: nowrap; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
#db-toolbar > .db-tabs::-webkit-scrollbar { display: none; }
#db-toolbar > .db-channels { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; margin-bottom: 8px; gap: 0; flex-wrap: nowrap; }
#db-toolbar .db-tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 4px 10px; margin: 0 0 -1px; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; clip-path: none; color: var(--text-light); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
#db-toolbar .db-tab:hover { color: var(--text-dark); background: none; }
#db-toolbar .db-tab.active { color: var(--text-dark); background: none; border-bottom-color: var(--accent); clip-path: none; }
#db-toolbar .db-tab .db-tab-icon { width: 20px; height: 20px; margin: 0; vertical-align: 0; }
#db-toolbar .db-tab.active .db-area-icon { background-color: var(--db-area-icon-hover); }
#db-toolbar .db-chip { padding: 5px 12px; font-size: 11px; border-radius: 0; }
#db-toolbar .db-chip + .db-chip { border-left: 0; }
@media (max-width: 700px) {
    #db-toolbar.db-toolbar { grid-template-columns: auto minmax(0, 1fr) auto; margin-bottom: 32px; }
    #db-toolbar > .db-back { grid-column: 1; grid-row: 1; margin-bottom: 0; align-self: center; }
    #db-toolbar > .db-channels { grid-column: 3; grid-row: 1; margin-bottom: 0; align-self: center; }
    #db-toolbar > .db-tabs { grid-column: 1 / -1; grid-row: 2; }
}