/* ============================================================
   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;

    /* Gedämpfte Schrift, die ohne eigenen Kasten direkt auf dem
       Hintergrundbild steht. Heller als --text-dim, weil dort das blaue
       Leuchtfeld durchscheint: Am hellsten Punkt des Bildes kommt
       --text-dim nur auf 3,2:1, dieser Ton auf 5,3:1. */
    --text-dim-bild: #a9c1d6;

    --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
   ============================================================ */

/* Der Hintergrund ist ein einziges Bild — Nebel, Sterne und ein
   supermassereiches Schwarzes Loch, einmal gerendert. Vorher liefen hier
   drei Leinwände gleichzeitig; sie zeichneten die gesamte Fensterfläche
   fortlaufend neu, was auf älteren Geräten spürbar wurde.

   Als fest stehende Ebene statt über background-attachment: fixed —
   letzteres lässt manche Browser bei jedem Scrollschritt neu zeichnen. */
body.app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    /* Die Zahl hinter dem Fragezeichen ist eine Versionsmarke. Ohne sie
       zeigen Browser nach einem neuen Bild noch tagelang das alte, weil sie
       Bilder lange behalten. Beim Neurechnen des Bildes hier hochzaehlen. */
    background: #081726 url("assets/hintergrund.jpg?v=2") center center / cover no-repeat;
}

/* Auf den Seiten hinter dem Login liegt ein Schleier über dem Bild: Dort
   steht viel Text, der Hintergrund muss zurücktreten. Die Startseite lässt
   das Bild unangetastet.

   Wie hell der Schleier sein darf, hängt allein an der Schrift, die ohne
   eigenen Kasten auf dem Bild steht — Text in .panel, .hud und .section-nav
   bringt seinen eigenen Untergrund mit und bleibt noch bei 0,52 lesbar.
   Gemessen am hellsten Punkt des Bildes (rgb 159, 213, 255):

       Schleier   h1     Zwischenzeile   h2
       0,82       11,5   4,6             8,1
       0,70        8,1   3,2 -> 5,3 *    5,6
       0,62        6,3   2,5             4,4  zu wenig

   * mit --text-dim-bild statt --text-dim. Deshalb 0,70: mehr vom Leuchtfeld
   ist sichtbar, und die Schrift bleibt mit Abstand über 4,5:1. */
body.app:not(.landing)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(4, 7, 15, 0.70), rgba(4, 7, 15, 0.80));
}

/* Startseite: erster Bildschirm füllt die Höhe, Fußzeile schließt darunter an */
body.landing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.landing-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    margin: 0;
    padding: 3rem 1.5rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* 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;
}

.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 ----------
   Die Plakette selbst steckt als Vektorgrafik im Quelltext von index.php.
   Hier steht nur, wie sie sitzt und was beim Überfahren passiert.

   Zwei Klassen im Selektor, weil die allgemeine Knopf-Regel weiter unten im
   Stylesheet steht und Rahmen, Polster und Hintergrund sonst überschreibt. */
.button.button-atom {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.atom {
    display: block;
    width: 176px;
    height: 176px;
    /* Der Schein liegt auf der Form selbst statt auf einem Kasten dahinter —
       sonst zeichnete sich im Dunkeln ein Quadrat ab. */
    filter: drop-shadow(0 0 26px rgba(78, 210, 255, 0.35));
    transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.3, 1), filter 0.3s ease;
}

.atom-text {
    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 über jedem Untergrund lesbar */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    transition: letter-spacing 0.25s ease, color 0.25s ease;
}

/* Die allgemeine Knopf-Regel hebt den Knopf beim Überfahren an und legt
   einen Kasten darunter. Beides hier wieder abbestellen. */
.button.button-atom:hover,
.button.button-atom:focus-visible {
    transform: none;
    background: none;
    box-shadow: none;
}

/* Im Ruhezustand bewegt sich nichts. Erst beim Überfahren wächst das Symbol
   ein Stück und leuchtet stärker. */
.button.button-atom:hover .atom,
.button.button-atom:focus-visible .atom {
    transform: scale(1.06);
    filter: drop-shadow(0 0 44px rgba(78, 210, 255, 0.65));
}

.button.button-atom:active .atom { transform: scale(1.0); }

.button.button-atom:hover .atom-text,
.button.button-atom:focus-visible .atom-text {
    letter-spacing: 0.3em;
    color: var(--cyan-soft);
}

/* Das Elektron läuft beim Überfahren einmal um den Kern.
   transform-box/-origin legen den Drehpunkt auf die Mitte der Zeichenfläche;
   ohne diese Angaben deuten Browser den Ursprung unterschiedlich. Deshalb
   läuft die Bewegung nur, wo der Browser sie auch versteht. */
.atom-orbit {
    transform-box: view-box;
    transform-origin: 50% 50%;
}

@supports (transform-box: view-box) {
    .button.button-atom:hover .atom-orbit,
    .button.button-atom:focus-visible .atom-orbit {
        animation: atomUmlauf 3.2s linear infinite;
    }
}

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

/* Tastaturbedienung sichtbar machen */
.button.button-atom:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 10px;
    border-radius: 14px;
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie nicht */
@media (prefers-reduced-motion: reduce) {
    .atom { transition: none; }
    .button.button-atom:hover .atom,
    .button.button-atom:focus-visible .atom { transform: none; }
    .button.button-atom:hover .atom-orbit,
    .button.button-atom:focus-visible .atom-orbit { animation: none; }
}

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

/* ---------- Fußzeile ----------
   Der Balken deckt stärker als früher und die Schrift ist heller: Auf der
   Startseite liegt die Fußzeile jetzt über beleuchteter Fläche statt über
   fast schwarzem Himmel. Gemessen am hellsten Punkt dahinter — rgb(133,
   191, 241) — ergibt diese Kombination 5,7:1; mit den alten Werten waren
   es 1,5:1, also unlesbar. */
.fusszeile {
    position: relative;
    z-index: 3;
    border-top: 1px solid var(--edge);
    background: rgba(4, 10, 20, 0.70);
    backdrop-filter: blur(6px);
}

.fusszeile-inhalt {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    color: var(--text-dim-bild);
}

.fusszeile-links a {
    color: var(--text-dim-bild);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}

.fusszeile-links a:hover {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
}

/* ---------- Einfache Inhaltsseite (Impressum u. Ä.) ---------- */
body.seite {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.seiten-inhalt {
    flex: 1;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 4rem;
}

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

/* ---------- 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 {
    /* steht frei auf dem Hintergrundbild, nicht in einem Kasten */
    color: var(--text-dim-bild);
    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;
    /* steht frei auf dem Hintergrundbild, nicht in einem Kasten */
    color: var(--text-dim-bild);
    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;
    }
}