/* ============================================================
   Farbwelt: tiefes Weltall, Datenstrom-Cyan, Signal-Grün
   ============================================================ */
:root {
    color-scheme: dark;

    --void:        #04070f;   /* Hintergrund ganz hinten */
    --panel:       rgba(10, 20, 38, 0.72);
    --panel-solid: #0a1426;
    --edge:        rgba(78, 210, 255, 0.22);
    --edge-strong: rgba(78, 210, 255, 0.55);

    --cyan:        #4ed2ff;
    --cyan-soft:   #9fe8ff;
    --signal:      #2ee85f;   /* Grün, verbindet mit dem Matrix-Regen */
    --violet:      #9d7bff;

    --text:        #dbeaf7;
    --text-dim:    #7f95ad;

    --mono: "Consolas", "SF Mono", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0;
    line-height: 1.6;
    background: var(--void);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Startseite
   ============================================================ */

/* Ebenen der Startseite, von hinten nach vorn:
   Sternenfeld (-4) · Erde (-3) · Zeichenregen (-2) · Inhalt
   Der Regen läuft damit über den Planeten hinweg. */
.rain-bg {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
    opacity: 0.42;
    /* Nur noch ein schwaches Loch hinter dem Knopf, damit er lesbar bleibt */
    -webkit-mask-image: radial-gradient(ellipse 26% 16% at 50% 50%, rgba(0,0,0,0.25), #000 62%);
    mask-image: radial-gradient(ellipse 26% 16% at 50% 50%, rgba(0,0,0,0.25), #000 62%);
}

.landing .space-bg { z-index: 0; }

/* Auf der Startseite wird nicht gescrollt */
.landing, html:has(.landing) {
    height: 100%;
    overflow: hidden;
}

.landing-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    max-width: none;
    margin: 0;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    z-index: 3;
    /* Der Inhaltsbereich spannt sich über das ganze Fenster. Ohne diese Zeile
       fängt er jeden Klick ab und die Erde ließe sich nicht drehen. */
    pointer-events: none;
}

.landing-sub,
.landing-actions { pointer-events: auto; }

/* Flex statt Block: Zeilenumbrüche im Quelltext erzeugen sonst leere
   Textzeilen, die die Höhe verfälschen und die Mitte verschieben. */
.landing-inner {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Die Erde liegt hinter dem Inhalt, aber vor Nebel und Regen.
   Sie sitzt tief, sodass der Blick von oben auf den Planeten geht. */
/* Der Planet füllt das ganze Fenster: Horizont als Bogen, Weltraum darüber */
.earth {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    /* Standardzeiger. Die Hand erscheint nur, wenn der Zeiger wirklich auf
       der Kugel liegt — die Leinwand selbst spannt sich über das ganze
       Fenster und hätte sonst überall den Greifzeiger gezeigt. */
    cursor: default;
    touch-action: none;
    opacity: 0;
    transition: opacity 1.8s ease;
}

.earth.ist-geladen { opacity: 1; }
.earth.ueber-planet { cursor: grab; }
.earth.wird-gezogen { cursor: grabbing; }

.landing-sub {
    color: #b7cbdd;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    margin: 0 auto 1.5rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

.landing-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.landing-actions .button-quiet { margin-left: 0; }

/* ---------- Anmeldeknopf: Instrumentenfenster ----------
   Der Hintergrund ist beweglich: Die Erde lässt sich heran- und wegzoomen,
   hinter dem Knopf liegt mal helle Tagseite, mal schwarzer Raum. Ein Knopf
   mit eigenem Farbklang würde deshalb mal verschwinden und mal erschlagen.

   Deshalb bringt dieser Knopf keine eigene Grafik mit, sondern behandelt das,
   was hinter ihm liegt: Er zeichnet es weich, entsättigt und dunkelt es ab.
   Der Kontrast zur Schrift entsteht damit unabhängig vom Untergrund.
   Zwei Klassen im Selektor, weil die allgemeine Knopf-Regel weiter unten steht. */
.button.button-luke {
    position: relative;
    width: 164px;
    height: 164px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Das eigentliche Mittel: der Untergrund wird durch die Scheibe gedämpft */
    /* Werte nachgerechnet: Steht die Sonne hinter dem Knopf, liegt die
       Leuchtdichte des Untergrunds bei 1,0. Mit brightness(0.28) und der
       Deckschicht darüber bleibt sie unter 0,18 — damit erreicht die Schrift
       auch dort über 4,5:1 Kontrast. */
    backdrop-filter: blur(8px) saturate(0.45) brightness(0.28);
    -webkit-backdrop-filter: blur(8px) saturate(0.45) brightness(0.28);
    background: rgba(4, 12, 24, 0.42);

    border: 1px solid rgba(155, 226, 255, 0.85);
    box-shadow:
        0 0 0 7px rgba(4, 12, 24, 0.22),          /* weicher Absatz nach außen */
        0 0 30px rgba(70, 160, 255, 0.30),
        inset 0 0 26px rgba(0, 0, 0, 0.55);
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                border-color 0.25s ease, backdrop-filter 0.25s ease;
}

/* Wo der Weichzeichner fehlt, muss die Scheibe selbst decken */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .button.button-luke { background: rgba(4, 12, 24, 0.88); }
}

/* Innerer Haarring — gibt der Scheibe Tiefe */
.button.button-luke::before {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    border: 1px solid rgba(155, 226, 255, 0.22);
    pointer-events: none;
}

/* Vier Marken außen, unbewegt: liest sich als Instrument, nicht als Zierrat */
.button.button-luke::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: repeating-conic-gradient(from -7deg,
        rgba(155, 226, 255, 0.95) 0deg 14deg,
        transparent 14deg 90deg);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    pointer-events: none;
}

/* Ein einziges bewegtes Element: ein Lichtbogen, der auf dem Rand umläuft */
.luke-sweep {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(140, 225, 255, 0) 0deg,
        rgba(140, 225, 255, 0.55) 38deg,
        rgba(220, 250, 255, 0.85) 52deg,
        rgba(140, 225, 255, 0) 74deg);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: lukeUmlauf 6.5s linear infinite;
    pointer-events: none;
}

@keyframes lukeUmlauf {
    to { transform: rotate(360deg); }
}

.luke-text {
    position: relative;
    z-index: 2;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #f2fbff;
    /* Enger dunkler Saum: hält die Schrift auch über hellen Wolken lesbar */
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 0 14px rgba(120, 225, 255, 0.55);
    transition: letter-spacing 0.25s ease;
}

/* Beim Überfahren klart die Scheibe auf, als würde sie freigeschaltet */
.button.button-luke:hover,
.button.button-luke:focus-visible {
    transform: scale(1.04);
    backdrop-filter: blur(4px) saturate(0.85) brightness(0.34);
    -webkit-backdrop-filter: blur(4px) saturate(0.85) brightness(0.34);
    border-color: rgba(210, 245, 255, 1);
    box-shadow:
        0 0 0 7px rgba(4, 12, 24, 0.18),
        0 0 60px rgba(90, 185, 255, 0.55),
        inset 0 0 26px rgba(0, 0, 0, 0.35);
}

.button.button-luke:hover .luke-sweep,
.button.button-luke:focus-visible .luke-sweep { animation-duration: 2.2s; }

.button.button-luke:hover .luke-text,
.button.button-luke:focus-visible .luke-text { letter-spacing: 0.3em; }

@media (max-width: 640px) {
    .button.button-luke { width: 132px; height: 132px; }
    .luke-text { font-size: 0.68rem; letter-spacing: 0.16em; }
}

/* ============================================================
   Geschützter Bereich
   ============================================================ */

/* Animierter Hintergrund, liegt hinter allem */
.space-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    display: block;
    pointer-events: none;
}

/* Farbschleier darüber: gibt Tiefe und hält Text lesbar */
body.app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1100px 620px at 78% 8%,  rgba(78, 210, 255, 0.14), transparent 62%),
        radial-gradient(900px 560px at 4% 92%,  rgba(157, 123, 255, 0.13), transparent 60%),
        linear-gradient(to bottom, rgba(4, 7, 15, 0.34), rgba(4, 7, 15, 0.86));
}

/* ---------- Kopfzeile (HUD) ---------- */
.hud {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.75rem;
    background: rgba(6, 12, 24, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--edge);
}

/* dünne Lichtlinie, die unter der Kopfzeile entlangwandert */
.hud::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg,
        transparent, var(--cyan), var(--signal), transparent);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    animation: sweep 5.5s linear infinite;
    opacity: 0.85;
}

@keyframes sweep {
    from { background-position: -50% 0; }
    to   { background-position: 150% 0; }
}

.hud-brand {
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--cyan);
    text-shadow: 0 0 14px rgba(78, 210, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* pulsierender Statuspunkt */
.hud-brand::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 10px var(--signal);
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}

.hud nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.hud nav a {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text);
    padding: 0.35rem 0;
    position: relative;
    transition: color 0.15s;
}

.hud nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
    transition: width 0.22s ease;
}

.hud nav a:hover { color: var(--cyan); }
.hud nav a:hover::after { width: 100%; }

.whoami {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------- Inhaltsbereich ---------- */
main {
    max-width: 1080px;
    margin: 2.5rem auto 4rem;
    padding: 0 1.5rem;
}

h1 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
}

/* Überschriften bekommen eine kurze Leuchtkante darunter */
h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 2px;
    margin-top: 0.7rem;
    background: linear-gradient(90deg, var(--cyan), transparent);
    box-shadow: 0 0 12px rgba(78, 210, 255, 0.6);
}

h2 {
    font-family: var(--mono);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan);
    margin: 2.75rem 0 1rem;
}

/* ---------- Panels ---------- */
.panel {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* HUD-Ecken oben links / unten rechts */
.panel::before,
.panel::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: var(--edge-strong);
    border-style: solid;
    pointer-events: none;
}

.panel::before { top: -1px; left: -1px;  border-width: 1px 0 0 1px; border-radius: 10px 0 0 0; }
.panel::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; border-radius: 0 0 10px 0; }

.lead {
    color: var(--text-dim);
    margin: 0.9rem 0 2rem;
    max-width: 60ch;
}

.breadcrumb {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    margin-bottom: 1.25rem;
}

.breadcrumb:hover { color: var(--cyan); }

/* ---------- Übersichtskacheln ---------- */
.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.15rem;
}

.program-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.4rem 1.5rem;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.program-card:hover {
    transform: translateY(-4px);
    border-color: var(--edge-strong);
    box-shadow: 0 18px 46px rgba(78, 210, 255, 0.18);
}

/* Leuchtstreifen an der Oberkante, zieht beim Überfahren auf */
.card-glow {
    position: absolute;
    top: 0; left: 0;
    height: 2px; width: 0;
    background: linear-gradient(90deg, var(--cyan), var(--signal));
    box-shadow: 0 0 14px rgba(78, 210, 255, 0.8);
    transition: width 0.32s ease;
}

.program-card:hover .card-glow { width: 100%; }

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-name {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.card-summary {
    color: #b7cbdd;
    font-size: 0.93rem;
    flex: 1;
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(78, 210, 255, 0.12);
}

.card-foot .meta { margin: 0; }

.card-cta {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cyan);
    transition: transform 0.18s ease;
}

.program-card:hover .card-cta { transform: translateX(3px); }

/* ---------- Download-Banner auf der Produktseite ---------- */
.release-banner {
    position: relative;
    background:
        linear-gradient(135deg, rgba(78, 210, 255, 0.10), rgba(157, 123, 255, 0.06)),
        var(--panel);
    border: 1px solid var(--edge-strong);
    border-radius: 14px;
    padding: 1.9rem 2rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* feiner Rasterhintergrund im Banner */
.release-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(78, 210, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78, 210, 255, 0.06) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 82% 0%, #000, transparent 68%);
    -webkit-mask-image: radial-gradient(circle at 82% 0%, #000, transparent 68%);
}

.release-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
}

.release-head h1 { margin: 0; }
.release-head h1::after { display: none; }

.release-summary {
    color: #b7cbdd;
    margin: 0.6rem 0 0;
    max-width: 62ch;
    font-size: 1.02rem;
}

.version-lg {
    font-size: 0.85rem;
    padding: 0.3rem 0.9rem;
}

.release-facts {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem;
    margin: 1.75rem 0;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(78, 210, 255, 0.16);
    border-bottom: 1px solid rgba(78, 210, 255, 0.16);
}

.fact { display: flex; flex-direction: column; gap: 0.25rem; }

.fact-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.fact-value {
    font-family: var(--mono);
    font-size: 0.98rem;
    color: var(--cyan);
}

.release-action {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.button-lg {
    font-size: 0.88rem;
    padding: 0.95rem 2.4rem;
    background: rgba(78, 210, 255, 0.14);
    box-shadow: 0 0 26px rgba(78, 210, 255, 0.22);
}

.button-quiet {
    color: var(--text-dim);
    border-color: var(--edge);
    background: transparent;
    margin-left: 0.75rem;
}

.button-quiet:hover { color: var(--text); box-shadow: none; }

/* ---------- Sprungnavigation ---------- */
.section-nav {
    position: sticky;
    top: 62px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 2.25rem 0 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(6, 12, 24, 0.86);
    backdrop-filter: blur(12px);
    border: 1px solid var(--edge);
    border-radius: 10px;
}

.section-nav a {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-dim);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.section-nav a:hover {
    color: var(--cyan);
    background: rgba(78, 210, 255, 0.10);
}

.doc-section { scroll-margin-top: 130px; }

/* ---------- Fließtext in den Abschnitten ---------- */
.prose { line-height: 1.75; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cyan-soft);
    margin: 1.9rem 0 0.6rem;
}

.prose p { margin: 0 0 1rem; color: #c3d6e6; }

.prose ul, .prose ol {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
    color: #c3d6e6;
}

.prose li { margin-bottom: 0.45rem; }
.prose li::marker { color: var(--cyan); }

.prose code {
    font-family: var(--mono);
    font-size: 0.88em;
    background: rgba(78, 210, 255, 0.10);
    border: 1px solid rgba(78, 210, 255, 0.20);
    border-radius: 4px;
    padding: 0.08em 0.4em;
    color: var(--cyan-soft);
}

.prose pre {
    background: rgba(2, 6, 14, 0.9);
    border: 1px solid var(--edge);
    border-left: 2px solid var(--signal);
    border-radius: 8px;
    padding: 1rem 1.15rem;
    overflow-x: auto;
    margin: 0 0 1rem;
}

.prose pre code {
    background: none;
    border: none;
    padding: 0;
    color: #cfe9d6;
    font-size: 0.86rem;
    line-height: 1.65;
}

/* Technik-Tabelle */
.spec-table {
    width: 100%;
    border-collapse: collapse;
}

.spec-table th {
    text-align: left;
    vertical-align: top;
    width: 34%;
    padding: 0.6rem 1rem 0.6rem 0;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 400;
    border-bottom: 1px solid rgba(78, 210, 255, 0.12);
}

.spec-table td {
    padding: 0.6rem 0;
    color: #c3d6e6;
    border-bottom: 1px solid rgba(78, 210, 255, 0.12);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: none; }

/* ---------- Bereichsumschalter ---------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.75rem 0 1.5rem;
    padding: 0.45rem;
    background: rgba(6, 12, 24, 0.7);
    border: 1px solid var(--edge);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.tab {
    flex: 1 1 auto;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid transparent;
    padding: 0.8rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.tab:hover {
    color: var(--text);
    background: rgba(78, 210, 255, 0.07);
    box-shadow: none;
    transform: none;
}

.tab[aria-selected="true"] {
    color: #eafaff;
    background: rgba(78, 210, 255, 0.16);
    border-color: var(--edge-strong);
    box-shadow: 0 0 20px rgba(78, 210, 255, 0.22);
}

/* ---------- Dokumentationsblock ---------- */
.doku {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.doku-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 0.7rem;
    border-right: 1px solid var(--edge);
    background: rgba(3, 8, 18, 0.5);
}

.doku-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: transparent;
    border: none;
    padding: 0.6rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.14s, background 0.14s;
}

.doku-tab:hover {
    color: var(--text);
    background: rgba(78, 210, 255, 0.07);
    box-shadow: none;
    transform: none;
}

.doku-tab[aria-selected="true"] {
    color: var(--cyan);
    background: rgba(78, 210, 255, 0.12);
    box-shadow: none;
}

/* Punkt zeigt an, ob das Feld schon Inhalt hat */
.doku-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid var(--text-dim);
    background: transparent;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.doku-tab.is-filled .doku-dot {
    background: var(--signal);
    border-color: var(--signal);
    box-shadow: 0 0 8px var(--signal);
}

.doku-felder { padding: 1.4rem 1.6rem; }
.doku-felder label { margin-bottom: 0; }
.doku-felder textarea { min-height: 260px; }

.form-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.form-actions .meta { margin: 0 0 0 0.5rem; }

.checkbox-row {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 0.85rem !important;
    color: var(--text) !important;
}

.checkbox-row input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--cyan);
    width: 17px;
    height: 17px;
}

@media (max-width: 780px) {
    .doku { grid-template-columns: 1fr; }
    .doku-nav {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--edge);
    }
    .doku-tab { white-space: nowrap; width: auto; }
    .tab { flex: 1 1 100%; }
}

/* ---------- Formular-Hinweise ---------- */
.hint {
    display: block;
    font-family: system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-dim);
    margin-top: 0.2rem;
}

.format-hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    background: rgba(78, 210, 255, 0.05);
    border: 1px dashed var(--edge);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin: 0.5rem 0 1.75rem;
    line-height: 1.9;
}

.format-hint code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: rgba(78, 210, 255, 0.10);
    border-radius: 4px;
    padding: 0.1em 0.4em;
    color: var(--cyan-soft);
}

.row-actions { display: flex; gap: 1rem; white-space: nowrap; }
.action-edit { color: var(--cyan) !important; }

.link-plain {
    color: var(--text) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    letter-spacing: normal !important;
    text-decoration: none;
}

.link-plain:hover { color: var(--cyan) !important; }

.success a { color: inherit; }

/* ---------- Programmliste (alte Ansicht) ---------- */
.program-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: grid;
    gap: 1rem;
}

.program-item {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-left: 2px solid var(--cyan);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.program-item:hover {
    transform: translateY(-3px);
    border-color: var(--edge-strong);
    box-shadow: 0 14px 40px rgba(78, 210, 255, 0.16);
}

/* Lichtreflex, der beim Überfahren durchs Panel zieht */
.program-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(78, 210, 255, 0.10), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.program-item:hover::after { left: 130%; }

.program-item h2 {
    font-family: inherit;
    font-size: 1.18rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.version {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--signal);
    border: 1px solid rgba(46, 232, 95, 0.45);
    background: rgba(46, 232, 95, 0.08);
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.meta {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin: 0.15rem 0 0.6rem;
}

.changelog {
    color: #b7cbdd;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

/* ---------- Schaltflächen ---------- */
button, .button {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(78, 210, 255, 0.07);
    border: 1px solid var(--edge-strong);
    padding: 0.65rem 1.4rem;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.16s, box-shadow 0.16s, transform 0.16s, color 0.16s;
}

button:hover, .button:hover {
    background: rgba(78, 210, 255, 0.18);
    color: #eafaff;
    box-shadow: 0 0 24px rgba(78, 210, 255, 0.35);
    transform: translateY(-1px);
}

button:active, .button:active { transform: translateY(0); }

/* ---------- Meldungen ---------- */
.error, .success {
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    padding: 0.85rem 1.1rem;
    border-radius: 8px;
    border-left: 2px solid currentColor;
    margin: 0 0 1.25rem;
}

.error   { color: #ff8b7a; background: rgba(255, 80, 60, 0.10); }
.success { color: var(--signal); background: rgba(46, 232, 95, 0.10); }

/* ---------- Formulare ---------- */
.admin-form label,
.auth-box label {
    display: block;
    margin-bottom: 1.1rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

input[type="text"],
input[type="password"],
input[type="file"],
textarea,
select {
    width: 100%;
    margin-top: 0.45rem;
    padding: 0.7rem 0.85rem;
    background: rgba(3, 8, 18, 0.85);
    border: 1px solid var(--edge);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    letter-spacing: normal;
    text-transform: none;
    transition: border-color 0.16s, box-shadow 0.16s;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(78, 210, 255, 0.14), 0 0 20px rgba(78, 210, 255, 0.18);
}

textarea { resize: vertical; }

/* Zwei Spalten, wo genug Platz ist */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 1.25rem;
}

.form-grid .wide { grid-column: 1 / -1; }

/* ---------- Tabellen ---------- */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--edge);
    border-radius: 10px;
    background: var(--panel);
    backdrop-filter: blur(10px);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 460px;
}

.admin-table th {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    text-align: left;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--edge);
    background: rgba(78, 210, 255, 0.05);
}

.admin-table td {
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid rgba(78, 210, 255, 0.10);
    font-size: 0.92rem;
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr { transition: background 0.14s; }
.admin-table tbody tr:hover { background: rgba(78, 210, 255, 0.06); }

.admin-table a {
    color: #ff8b7a;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.admin-table a:hover { text-decoration: underline; }

.role-tag {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.role-tag.is-admin    { color: var(--violet); background: rgba(157, 123, 255, 0.10); }
.role-tag.is-download { color: var(--cyan);   background: rgba(78, 210, 255, 0.08); }

/* ---------- Login-Karte ---------- */
/* Anmelde- und Einrichtungsseiten: Fenster genau in der Bildmitte */
body.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

body.auth .auth-box { margin: 0; }

.auth-box {
    max-width: 380px;
    margin: 7vh auto;
    padding: 2.25rem 2rem;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 12px;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    position: relative;
}

.auth-box h1 {
    font-family: var(--mono);
    font-size: 1.05rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 1.75rem;
}

.auth-box h1::after { width: 100%; }

.auth-box button { width: 100%; margin-top: 0.35rem; }

.auth-box a {
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.auth-box a:hover { color: var(--cyan); }

.auth-box > p:last-child {
    text-align: center;
    margin-bottom: 0;
    margin-top: 1.5rem;
}

/* ---------- Einblenden beim Laden ---------- */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.app main > *,
.auth-box {
    animation: riseIn 0.5s ease both;
}

.app main > *:nth-child(2) { animation-delay: 0.05s; }
.app main > *:nth-child(3) { animation-delay: 0.10s; }
.app main > *:nth-child(4) { animation-delay: 0.15s; }
.app main > *:nth-child(5) { animation-delay: 0.20s; }
.app main > *:nth-child(6) { animation-delay: 0.25s; }

.empty-hint {
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 640px) {
    .hud { padding: 0.75rem 1rem; flex-wrap: wrap; }
    .hud nav { gap: 0.9rem; }
    .whoami { display: none; }
    main { margin-top: 1.75rem; }
    h1 { font-size: 1.5rem; }
}

/* ---------- Rücksicht auf reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}