:root {
    --bg: #0f1620;
    --bg-karte: #172231;
    --bg-feld: #0d141d;
    --linie: #2a3a4f;
    --text: #e6edf5;
    --text-leise: #93a4b8;
    --akzent: #2f8fd8;
    --akzent-dunkel: #1f6ea8;
    --gut: #2ea36a;
    --warn: #d98f2f;
    --gefahr: #cf4a4a;
    --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
    font-size: .88em;
    background: var(--bg-feld);
    border: 1px solid var(--linie);
    border-radius: 4px;
    padding: .05rem .3rem;
}

/* ── Grundgerüst ─────────────────────────────────────────────────────────── */

.rahmen { display: flex; min-height: 100vh; }

.seitenleiste {
    width: 230px;
    flex: 0 0 230px;
    background: var(--bg-karte);
    border-right: 1px solid var(--linie);
    padding: 1.2rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.marke { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; padding: 0 .4rem; }
.marke-icon { font-size: 1.6rem; }
.marke strong { display: block; font-size: 1.1rem; letter-spacing: .02em; }
.marke small { display: block; color: var(--text-leise); font-size: .74rem; }
.marke.gross { margin-bottom: 1.8rem; }
.marke.gross .marke-icon { font-size: 2.2rem; }

.navlink {
    display: block;
    padding: .5rem .7rem;
    border-radius: var(--radius);
    color: var(--text-leise);
}
.navlink:hover { background: rgba(255,255,255,.04); color: var(--text); text-decoration: none; }
.navlink.active { background: var(--akzent-dunkel); color: #fff; }

.seitenleiste-fuss { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linie); }
.wer { font-size: .8rem; color: var(--text-leise); margin-bottom: .5rem; padding: 0 .4rem; word-break: break-all; }

.inhalt { flex: 1; padding: 1.6rem 2rem 3rem; max-width: 1500px; }
.inhalt-blank { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }

.kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

/* ── Bausteine ───────────────────────────────────────────────────────────── */

.karte {
    background: var(--bg-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.1rem;
    margin-bottom: 1.2rem;
}
.breit-voll { grid-column: 1 / -1; }

.hinweis { color: var(--text-leise); font-size: .88rem; margin: .2rem 0 1rem; }
.leerzustand {
    border: 1px dashed var(--linie);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    color: var(--text-leise);
}

.leiste { display: flex; gap: .6rem; margin-bottom: 1.2rem; flex-wrap: wrap; }

.feld {
    background: var(--bg-feld);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    color: var(--text);
    padding: .5rem .7rem;
    font-family: inherit;
    font-size: .95rem;
    width: 100%;
}
.feld:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
.feld.schmal { width: auto; min-width: 240px; flex: 1; }
.feld.gross {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .86rem;
    line-height: 1.45;
    resize: vertical;
}
.ergebnisfeld { background: #0a1017; border-color: var(--akzent-dunkel); }

.btn {
    border: 1px solid var(--linie);
    background: #1e2c3d;
    color: var(--text);
    border-radius: var(--radius);
    padding: .5rem .9rem;
    font-size: .9rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #263850; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-haupt { background: var(--akzent-dunkel); border-color: var(--akzent); }
.btn-haupt:hover:not(:disabled) { background: var(--akzent); }
.btn-gefahr { background: transparent; border-color: var(--gefahr); color: #f0a0a0; }
.btn-gefahr:hover:not(:disabled) { background: var(--gefahr); color: #fff; }
.btn-schlicht { background: transparent; }
.btn.klein { padding: .28rem .6rem; font-size: .8rem; }
.btn.breit { width: 100%; margin-top: .8rem; }

.pille {
    display: inline-block;
    background: #22334a;
    border: 1px solid var(--linie);
    border-radius: 999px;
    padding: .08rem .55rem;
    font-size: .74rem;
    color: var(--text-leise);
}
.pille-llm { background: #2b2340; border-color: #4b3d6e; color: #c3b0ea; }
.pille-gut { background: #163a29; border-color: #276b4a; color: #8ee0b4; }

.schalter { display: flex; align-items: center; gap: .45rem; font-size: .88rem; cursor: pointer; }
.schalter.klein { font-size: .82rem; }
.schalter input { accent-color: var(--akzent); }

.meldung {
    border-radius: var(--radius);
    padding: .7rem .9rem;
    margin: .8rem 0;
    font-size: .88rem;
    border: 1px solid;
}
.meldung.fehler { background: #35191b; border-color: var(--gefahr); color: #f2b8b8; }
.meldung.warnung { background: #352a16; border-color: var(--warn); color: #f0d3a0; }
.meldung.erfolg { background: #17301f; border-color: var(--gut); color: #a9e5c4; }

/* ── Tabellen ────────────────────────────────────────────────────────────── */

.tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabelle th {
    text-align: left;
    font-weight: 600;
    color: var(--text-leise);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--linie);
}
.tabelle td { padding: .55rem .6rem; border-bottom: 1px solid rgba(42,58,79,.5); }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle .rechts { text-align: right; }
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.klickbar:hover { background: rgba(255,255,255,.03); }
.tabelle tr.abgelaufen { opacity: .5; }
.warnfarbe { color: var(--warn); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0 0 1.2rem; }
.kv dt { color: var(--text-leise); }
.kv dd { margin: 0; }

.liste, .ablauf { margin: 0; padding-left: 1.2rem; }
.liste li, .ablauf li { margin-bottom: .4rem; }

.code {
    background: var(--bg-feld);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    overflow-x: auto;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .82rem;
    line-height: 1.5;
    white-space: pre;
}

/* ── Arbeitsansicht ──────────────────────────────────────────────────────── */

.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 1100px) { .spalten { grid-template-columns: 1fr; } }

.schritt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--akzent-dunkel);
    color: #fff;
    font-size: .8rem;
    margin-right: .5rem;
}

.optionen { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .7rem; flex-wrap: wrap; }
.typenliste { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .7rem; padding: .7rem; background: var(--bg-feld); border-radius: var(--radius); border: 1px solid var(--linie); }
.typkachel { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; background: var(--bg-karte); border: 1px solid var(--linie); border-radius: var(--radius); font-size: .82rem; }

.ergebnis { margin-top: 1rem; }
.ergebnis-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; font-size: .82rem; color: var(--text-leise); }

.kopierbar { cursor: pointer; }
.kopierbar:hover { border-color: var(--akzent); }
.keyzeile { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }
.keyzeile code { word-break: break-all; }

/* ── Status-Fenster ──────────────────────────────────────────────────────── */

.statuswindow {
    background: var(--bg-feld);
    border: 1px solid var(--akzent-dunkel);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-bottom: 1.2rem;
    font-size: .85rem;
}
.statuswindow.fertig { border-color: var(--gut); }
.statuswindow.fehler { border-color: var(--gefahr); }

.sw-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.sw-titel { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.sw-uhr { font-family: 'JetBrains Mono', Consolas, monospace; color: var(--text-leise); }

.sw-spinner {
    width: .9rem;
    height: .9rem;
    border: 2px solid var(--linie);
    border-top-color: var(--akzent);
    border-radius: 50%;
    animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.sw-log { margin: 0; padding-left: 1.1rem; color: var(--text-leise); }
.sw-log li { margin-bottom: .15rem; }
.sw-zeit { display: inline-block; min-width: 3.4rem; font-family: 'JetBrains Mono', Consolas, monospace; color: #5f7a98; }

/* ── Anmeldung ───────────────────────────────────────────────────────────── */

.login-box {
    background: var(--bg-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 2rem;
    width: 100%;
    max-width: 380px;
}
.login-box label { display: block; margin: .8rem 0 .3rem; font-size: .85rem; color: var(--text-leise); }

/* ── Fehlerbanner von Blazor ─────────────────────────────────────────────── */

#blazor-error-ui {
    background: var(--gefahr);
    color: #fff;
    bottom: 0;
    display: none;
    left: 0;
    padding: .8rem 1.2rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .8rem; color: #fff; }
#blazor-error-ui .reload { color: #fff; text-decoration: underline; }

/* ── Datei-Ablage ────────────────────────────────────────────────────────── */

.ablage { position: relative; margin-bottom: .8rem; }
.dateifeld {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.ablage-label {
    display: block;
    border: 1px dashed var(--linie);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ablage:hover .ablage-label { border-color: var(--akzent); background: rgba(47,143,216,.06); }
.ablage-label strong { display: block; font-size: .92rem; }
.ablage-label span { display: block; color: var(--text-leise); font-size: .78rem; margin-top: .25rem; }

.dateiliste { list-style: none; margin: 0 0 .8rem; padding: 0; }
.dateiliste li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--bg-feld);
    margin-bottom: .35rem;
    font-size: .85rem;
    flex-wrap: wrap;
}
.leise { color: var(--text-leise); font-size: .8rem; }

/* ══ Öffentliche Seite ═══════════════════════════════════════════════════════ */

.oeffentlich {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--linie);
    gap: 1rem;
    flex-wrap: wrap;
}
.marke.schlank { margin: 0; padding: 0; color: var(--text); }
.marke.schlank:hover { text-decoration: none; }
.kopf-nav { display: flex; gap: 1.4rem; font-size: .92rem; }
.kopf-nav a { color: var(--text-leise); }
.kopf-nav a:hover { color: var(--text); text-decoration: none; }

.oeffentlich main { flex: 1; }

.fuss {
    border-top: 1px solid var(--linie);
    margin-top: 3rem;
    padding: 1.5rem 0 2.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--text-leise);
    font-size: .84rem;
}
.fuss-links { display: flex; gap: 1.2rem; }

/* ── Aufmacher ───────────────────────────────────────────────────────────── */

.held { text-align: center; padding: 4rem 0 3rem; }
.held h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.15;
    margin: 0 0 1.2rem;
    letter-spacing: -.02em;
}
.held-text {
    max-width: 620px;
    margin: 0 auto 2rem;
    color: var(--text-leise);
    font-size: 1.05rem;
}
.held-knoepfe { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.btn.gross { padding: .75rem 1.6rem; font-size: 1rem; }
.held-fussnote { margin-top: 1.4rem; color: var(--text-leise); font-size: .82rem; }

/* ── Vorher/Nachher ──────────────────────────────────────────────────────── */

.vergleich {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0 4rem;
}
@media (max-width: 860px) {
    .vergleich { grid-template-columns: 1fr; }
    .vergleich-pfeil { transform: rotate(90deg); }
}
.vergleich-karte {
    background: var(--bg-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
}
.vergleich-kopf {
    padding: .5rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.vergleich-kopf.rot { background: #3a1c1e; color: #f2b8b8; border-bottom: 1px solid var(--gefahr); }
.vergleich-kopf.gruen { background: #16311f; color: #a9e5c4; border-bottom: 1px solid var(--gut); }
.vergleich-text {
    margin: 0;
    padding: .9rem;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .76rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.vergleich-pfeil { font-size: 1.6rem; color: var(--akzent); text-align: center; }

/* ── Abschnitte und Kacheln ──────────────────────────────────────────────── */

.abschnitt { margin-bottom: 3.5rem; }
.abschnitt-titel {
    font-size: 1.5rem;
    margin: 0 0 .6rem;
    text-align: center;
    letter-spacing: -.01em;
}
.abschnitt-text {
    max-width: 680px;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--text-leise);
    font-size: .95rem;
}

.kacheln { display: grid; gap: 1rem; margin-top: 1.6rem; }
.kacheln.zwei { grid-template-columns: repeat(2, 1fr); }
.kacheln.drei { grid-template-columns: repeat(3, 1fr); }
.kacheln.vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
    .kacheln.vier { grid-template-columns: repeat(2, 1fr); }
    .kacheln.drei { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .kacheln.zwei, .kacheln.drei, .kacheln.vier { grid-template-columns: 1fr; }
}

.kachel {
    background: var(--bg-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.4rem;
    transition: border-color .15s, transform .15s;
}
.kachel:hover { border-color: #3a5170; transform: translateY(-2px); }
.kachel h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.kachel p { margin: 0; color: var(--text-leise); font-size: .89rem; }
.kachel.schmal { padding: 1.1rem; }
.kachel.breit { padding: 1.6rem; }
.kachel-icon { font-size: 1.7rem; margin-bottom: .6rem; }

.schritt-kachel { position: relative; }
.kachel-nummer {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--akzent-dunkel);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: .8rem;
}

.kachel-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem !important; }
.kachel-tags span {
    background: var(--bg-feld);
    border: 1px solid var(--linie);
    border-radius: 4px;
    padding: .12rem .45rem;
    font-size: .76rem;
    color: var(--text);
}
.kachel-fuss { font-size: .82rem !important; font-style: italic; }

.warnkachel { border-color: #4a3a1c; }
.warnkachel .kachel-icon { opacity: .9; }

.api-zeile { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.6rem; align-items: center; }
@media (max-width: 860px) { .api-zeile { grid-template-columns: 1fr; } }
.api-zeile .btn { margin-top: 1rem; }
.code.klein { font-size: .74rem; white-space: pre-wrap; word-break: break-all; }

.abschluss {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.abschluss h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.abschluss p { color: var(--text-leise); margin: 0 0 1.5rem; }

/* ── Öffentliches Werkzeug ───────────────────────────────────────────────── */

.werkzeug-kopf { padding: 2rem 0 1rem; }
.werkzeug-kopf h1 { text-align: left; }
.zaehlzeile {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-leise);
    margin-top: .35rem;
    gap: 1rem;
    flex-wrap: wrap;
}