:root {
    color-scheme: light dark;

    --grund: #f4f6fa;
    --karte: #ffffff;
    --rand: #e2e7ef;
    --text: #1f2430;
    --text-leise: #5a6376;
    --kopf-grund: #161b2b;
    --kopf-text: #ffffff;
    --kopf-leise: #a9b2c6;
    --link: #1b5fd9;
    --link-hover: #11409a;

    /* Flaechen (Balken, Punkte): mindestens 3:1 gegen den Hintergrund */
    --sehr-gut: #1f9d55;
    --gut: #2a74d4;
    --maessig: #ad7705;
    --schlecht: #d1660a;
    --kritisch: #cc2d35;
    --keine-daten: #c3cad6;

    /* Dieselben Stufen als Text: dunkler, damit sie 4,5:1 erreichen */
    --sehr-gut-text: #17773f;
    --gut-text: #2466bd;
    --maessig-text: #8a6004;
    --schlecht-text: #a84f09;
    --kritisch-text: #b02129;

    --radius: 14px;
    --radius-klein: 8px;
    --schatten: 0 1px 2px rgba(20, 28, 48, .06), 0 4px 16px rgba(20, 28, 48, .05);
    --breite: 62rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #0f1320;
        --karte: #181e2e;
        --rand: #2a3245;
        --text: #e8ecf4;
        --text-leise: #9aa4ba;
        --kopf-grund: #0a0e18;
        --kopf-text: #f2f5fa;
        --kopf-leise: #8c97ad;
        --link: #74a8ff;
        --link-hover: #a3c5ff;

        --sehr-gut: #35c072;
        --gut: #4d93ec;
        --maessig: #e0a52a;
        --schlecht: #ef8030;
        --kritisch: #f05a62;

        --sehr-gut-text: #35c072;
        --gut-text: #4d93ec;
        --maessig-text: #e0a52a;
        --schlecht-text: #ef8030;
        --kritisch-text: #f05a62;
        --keine-daten: #3b4357;

        --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
    border-radius: 3px;
}

.breite {
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 1rem;
}

.sprung {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--karte);
    color: var(--text);
    padding: .75rem 1rem;
    z-index: 10;
    border-radius: 0 0 var(--radius-klein) 0;
}
.sprung:focus { left: 0; }

/* ----- Kopf ----- */

.kopf {
    background: var(--kopf-grund);
    color: var(--kopf-text);
    padding: 1.75rem 0 2.5rem;
}

.kopf-marke {
    margin: 0;
    font-size: .8125rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--kopf-leise);
}

.kopf-titel {
    margin: .25rem 0 .4rem;
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.kopf-zeit {
    margin: 0;
    font-size: .875rem;
    color: var(--kopf-leise);
}

/* ----- Inhalt ----- */

main.breite { padding-bottom: 3rem; }

.hinweis {
    margin: -1.25rem 0 1.5rem;
    padding: .9rem 1.1rem;
    background: var(--karte);
    border: 1px solid var(--maessig);
    border-left-width: 4px;
    border-radius: var(--radius-klein);
    box-shadow: var(--schatten);
    font-size: .9375rem;
}

.banner {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: -1.5rem 0 2rem;
    padding: 1.25rem 1.4rem;
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.banner-punkt {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--keine-daten);
}

.banner-text {
    font-size: 1.1875rem;
    font-weight: 620;
    letter-spacing: -.01em;
}

.banner.ist-betriebsbereit .banner-punkt { background: var(--sehr-gut); }
.banner.ist-eingeschraenkt .banner-punkt { background: var(--maessig); }
.banner.ist-teilausfall .banner-punkt { background: var(--schlecht); }
.banner.ist-ausfall .banner-punkt { background: var(--kritisch); }

.banner.ist-betriebsbereit .banner-text { color: var(--sehr-gut-text); }
.banner.ist-eingeschraenkt .banner-text { color: var(--maessig-text); }
.banner.ist-teilausfall .banner-text { color: var(--schlecht-text); }
.banner.ist-ausfall .banner-text { color: var(--kritisch-text); }

/* ----- Gruppen und Zeilen ----- */

.gruppe { margin-bottom: 2.25rem; }

.gruppe-titel {
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 620;
    letter-spacing: .01em;
}

.liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.zeile {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.1rem 1.25rem 1rem;
}

.zeile-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1rem;
}

.zeile-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.zeile-name a {
    text-decoration: none;
    color: var(--text);
}
.zeile-name a:hover { color: var(--link); text-decoration: underline; }

.zeile-quote {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-size: .9375rem;
    color: var(--text-leise);
}

.klein { font-size: .8125rem; }

.zeile-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: .3rem 0 .85rem;
    font-size: .875rem;
    color: var(--text-leise);
}

.punkt {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--keine-daten);
    flex: 0 0 auto;
}

.zeile-status.ist-betriebsbereit .punkt { background: var(--sehr-gut); }
.zeile-status.ist-eingeschraenkt .punkt { background: var(--maessig); }
.zeile-status.ist-teilausfall .punkt { background: var(--schlecht); }
.zeile-status.ist-ausfall .punkt { background: var(--kritisch); }
.zeile-status.ist-pausiert .punkt { background: var(--keine-daten); }

.zeile-grund {
    color: var(--text-leise);
    font-style: italic;
}

/* ----- Balken ----- */

.balken-feld { margin-top: .35rem; }

.balken {
    display: block;
    width: 100%;
    height: 34px;
    border-radius: 3px;
}

.balken-tag { fill: var(--keine-daten); }
.balken-tag.ist-sehr_gut { fill: var(--sehr-gut); }
.balken-tag.ist-gut { fill: var(--gut); }
.balken-tag.ist-maessig { fill: var(--maessig); }
.balken-tag.ist-schlecht { fill: var(--schlecht); }
.balken-tag.ist-kritisch { fill: var(--kritisch); }
.balken-tag.ist-keine_daten { fill: var(--keine-daten); }

.balken-achse {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin: .45rem 0 0;
    font-size: .75rem;
    color: var(--text-leise);
}

.balken-achse span:nth-child(2) { text-align: center; }

/* ----- Legende ----- */

.legende {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    font-size: .875rem;
    color: var(--text-leise);
}

.legende p { margin: 0 0 .8rem; }

.legende-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
}

.legende-liste li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.legende-farbe {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: var(--keine-daten);
}

.legende-farbe.ist-sehr_gut { background: var(--sehr-gut); }
.legende-farbe.ist-gut { background: var(--gut); }
.legende-farbe.ist-maessig { background: var(--maessig); }
.legende-farbe.ist-schlecht { background: var(--schlecht); }
.legende-farbe.ist-kritisch { background: var(--kritisch); }
.legende-farbe.ist-keine_daten { background: var(--keine-daten); }

/* ----- Detailseite ----- */

.zurueck {
    display: inline-block;
    margin: -1.25rem 0 1rem;
    font-size: .875rem;
}

.detail-kopf {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
}

.detail-zustand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
}

.detail-zustand .punkt { width: 12px; height: 12px; }
.detail-zustand.ist-betriebsbereit .punkt { background: var(--sehr-gut); }
.detail-zustand.ist-eingeschraenkt .punkt { background: var(--maessig); }
.detail-zustand.ist-teilausfall .punkt { background: var(--schlecht); }
.detail-zustand.ist-ausfall .punkt { background: var(--kritisch); }

.detail-beschreibung,
.detail-takt {
    margin: .4rem 0 0;
    font-size: .875rem;
    color: var(--text-leise);
}

.block {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
}

.block-titel {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 620;
}

.kennzahlen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1rem;
}

.kennzahl-wert {
    display: block;
    font-size: 1.375rem;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.kennzahl-name {
    display: block;
    font-size: .8125rem;
    color: var(--text-leise);
}

/* ----- Antwortzeiten ----- */

.verlauf {
    display: block;
    width: 100%;
    height: 140px;
    overflow: visible;
}

.verlauf-flaeche { fill: var(--gut); opacity: .13; }
.verlauf-linie { fill: none; stroke: var(--gut); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.verlauf-raster { stroke: var(--rand); stroke-width: 1; }
.verlauf-marke { fill: var(--text-leise); font-size: 11px; }

/* ----- Tabellen ----- */

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.tabelle th,
.tabelle td {
    text-align: left;
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--rand);
    vertical-align: top;
}

.tabelle th {
    font-weight: 600;
    color: var(--text-leise);
    font-size: .8125rem;
}

.tabelle tr:last-child td { border-bottom: 0; }

.tabelle .zahl {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.marke .punkt { width: 8px; height: 8px; }
.marke.ist-betriebsbereit .punkt { background: var(--sehr-gut); }
.marke.ist-eingeschraenkt .punkt { background: var(--maessig); }
.marke.ist-teilausfall .punkt { background: var(--schlecht); }
.marke.ist-ausfall .punkt { background: var(--kritisch); }

.vorfall-laufend {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--kritisch);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.leer {
    margin: 0;
    color: var(--text-leise);
    font-size: .875rem;
}

/* ----- Meldung ----- */

.meldung {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 2rem 1.5rem;
    text-align: center;
    margin-top: -1rem;
}

.meldung-titel {
    margin: 0 0 .6rem;
    font-size: 1.25rem;
}

.knopf {
    display: inline-block;
    margin-top: .5rem;
    padding: .55rem 1.1rem;
    background: var(--link);
    color: #fff;
    border-radius: var(--radius-klein);
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 560;
}

.knopf:hover { background: var(--link-hover); color: #fff; }

/* ----- Fuss ----- */

.fuss {
    border-top: 1px solid var(--rand);
    padding: 1.5rem 0 2.5rem;
    font-size: .8125rem;
    color: var(--text-leise);
}

.fuss p { margin: 0 0 .6rem; }

.fuss-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
}

/* ----- Schmale Schirme ----- */

@media (max-width: 34rem) {
    .kopf { padding: 1.25rem 0 2rem; }
    .kopf-titel { font-size: 1.3125rem; }
    .zeile { padding: .95rem 1rem .9rem; }
    .block, .detail-kopf, .legende { padding: 1rem; }
    .balken { height: 40px; }
    .kennzahlen { grid-template-columns: repeat(2, 1fr); }
    .tabelle th, .tabelle td { padding: .5rem .35rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

.block-titel-zweit {
    margin-top: 1.75rem;
}

.verlauf-spanne {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin: .35rem 0 1.2rem;
    font-size: .75rem;
    color: var(--text-leise);
}

/* ----- Verwaltung ----- */

.verwaltungsleiste {
    background: var(--kopf-grund);
    border-bottom: 2px solid var(--gut);
    color: var(--kopf-text);
    font-size: .8125rem;
}

.verwaltungsleiste-inhalt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.abmelden { margin: 0; }

.abmelden button {
    background: none;
    border: 1px solid var(--kopf-leise);
    border-radius: var(--radius-klein);
    color: var(--kopf-text);
    font: inherit;
    padding: .2rem .7rem;
    cursor: pointer;
}

.abmelden button:hover {
    border-color: var(--kopf-text);
    background: rgba(255, 255, 255, .08);
}

.marke-intern {
    display: inline-block;
    margin-left: .45rem;
    padding: .05rem .45rem;
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--grund);
    color: var(--text-leise);
    font-size: .6875rem;
    font-weight: 560;
    letter-spacing: .01em;
    vertical-align: middle;
    white-space: nowrap;
}

.anmeldung {
    max-width: 24rem;
    margin: -1rem auto 0;
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.75rem 1.5rem;
}

.anmeldung-text {
    margin: 0 0 1.25rem;
    font-size: .875rem;
    color: var(--text-leise);
}

.anmeldung-fehler {
    margin: 0 0 1rem;
    padding: .65rem .85rem;
    border: 1px solid var(--kritisch);
    border-left-width: 4px;
    border-radius: var(--radius-klein);
    font-size: .875rem;
    color: var(--kritisch-text);
}

.formular { margin: 0; }

.feld { margin: 0 0 1rem; }

.feld label {
    display: block;
    margin-bottom: .3rem;
    font-size: .875rem;
    font-weight: 560;
}

.feld input[type="password"] {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    background: var(--grund);
    color: var(--text);
    font: inherit;
}

.feld input[type="password"]:focus-visible {
    border-color: var(--link);
}

.feld-wahl {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.feld-wahl label {
    margin: 0;
    font-weight: 400;
    color: var(--text-leise);
}

.feld-wahl input { cursor: pointer; }

.anmeldung .knopf {
    width: 100%;
    border: 0;
    font: inherit;
    font-weight: 560;
    cursor: pointer;
}

.anmeldung-fuss {
    margin: 1.25rem 0 0;
    font-size: .8125rem;
    text-align: center;
}

.hinweis-intern { border-left: 4px solid var(--gut); }

.offen-liste {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.offen-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1rem;
    padding: .5rem .7rem;
    background: var(--grund);
    border-radius: var(--radius-klein);
    font-size: .875rem;
}

.pfad {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
}

.code {
    display: inline-block;
    margin-right: .4rem;
    padding: .05rem .4rem;
    border-radius: var(--radius-klein);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid currentColor;
}

.code-serverfehler { color: var(--kritisch-text); }
.code-anfragefehler { color: var(--schlecht-text); }
.code-umleitung { color: var(--gut-text); }
.code-erfolg { color: var(--sehr-gut-text); }