/* Systeme — Maße aus dem Entwurf 11a. */

/* ── Kopf der Seite mit Umschalter ────────────────────────────────────── */

.seitenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 6px;
}

.seitenkopf__titel {
    margin: 0;
    font-family: var(--schrift-titel);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
}

.seitenkopf__zusatz { margin: 4px 0 0; font-size: 15px; color: var(--text-schwach); }

.umschalter {
    display: flex;
    flex-shrink: 0;
    padding: 4px;
    background: var(--linie);
    border-radius: var(--r-pille);
}

.umschalter__punkt {
    padding: 8px 20px;
    border-radius: var(--r-pille);
    font-size: 14px;
    color: var(--text-tertiaer);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.umschalter__punkt--aktiv {
    background: var(--grund);
    box-shadow: 0 1px 4px rgba(20, 32, 30, .1);
    font-weight: 600;
    color: var(--text);
}

/* ── Tafel mit den Systemen ───────────────────────────────────────────── */

.tafel {
    background: var(--grund);
    border-radius: 22px;
    box-shadow: 0 2px 14px rgba(20, 32, 30, .06);
    overflow: hidden;
}

.tafel__gruppe {
    margin: 0;
    padding: 18px 26px 12px;
    font-family: var(--schrift-titel);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-schwach);
}

.tafel__gruppe:not(:first-child) { border-top: 1px solid #EFF2F1; }

.zeile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px;
    border-top: 1px solid #EFF2F1;
}

.tafel__gruppe + .zeile { border-top: 0; }

/* Zeilen mit Auffälligkeit bekommen einen zarten Grund */
.zeile--auffaellig { background: #FBF1EF; }

.lampe {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-radius: var(--r-pille);
}

.lampe--laeuft         { background: var(--behoben); }
.lampe--eingeschraenkt { background: var(--geplant-kraeftig); }
/* Kein Pulsieren: Eine Störung dauert Stunden, und ein Dauerreiz stumpft
   ab — erst recht auf einer Anzeige im Flur. Die Farbe sagt genug. */
.lampe--stoerung       { background: var(--kritisch); }
.lampe--unbekannt      { background: var(--linie-kraeftig); }

.zeile__name { font-size: 16px; color: var(--text); }
.zeile__name--stark { font-weight: 600; }

.marker {
    flex-shrink: 0;
    margin-left: -4px;
    padding: 4px 11px;
    border-radius: var(--r-pille);
    font-size: 12.5px;
    font-weight: 600;
}

.marker--stoerung       { background: var(--kritisch); color: var(--text-auf-farbe); }
.marker--eingeschraenkt { background: var(--geplant-flaeche); color: var(--geplant-text); }
.marker--wartung        { background: #DCE4F0; color: var(--info); }

.zeile__rechts {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    text-align: right;
}

.zeile__rechts--laeuft         { color: var(--behoben); }
.zeile__rechts--eingeschraenkt { color: var(--geplant-kraeftig); font-weight: 500; }
.zeile__rechts--stoerung       { color: var(--kritisch); font-weight: 500; }

/* Führt die Zeile zu einer Meldung, ist sie ein Knopf und sieht auch so
   aus. „läuft" bleibt schlichter Text — dahinter steckt nichts, und ein
   Knopf, der nichts tut, ist schlimmer als gar keiner. */
a.zeile__rechts {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 15px;
    border-radius: var(--r-pille);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .12s ease;
}

a.zeile__rechts--stoerung       { background: var(--kritisch-flaeche); }
a.zeile__rechts--eingeschraenkt { background: var(--geplant-flaeche); color: var(--geplant-text); }
a.zeile__rechts--laeuft         { background: var(--behoben-flaeche); color: var(--behoben-dunkel); }

a.zeile__rechts--stoerung:hover       { background: #F0D6D0; }
a.zeile__rechts--eingeschraenkt:hover { background: #EBD8B8; }
a.zeile__rechts--laeuft:hover         { background: #CDE0D6; }

a.zeile__rechts:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Der Pfeil rückt beim Überfahren mit — ein kleiner Hinweis, wohin es geht. */
.zeile__pfeil { flex-shrink: 0; transition: transform .12s ease; }
a.zeile__rechts:hover .zeile__pfeil { transform: translateX(3px); }

/* ── Verlauf ──────────────────────────────────────────────────────────── */

.block { padding: 18px 26px 16px; }
.block + .block { border-top: 1px solid #EFF2F1; }

.block__kopf { display: flex; align-items: center; gap: 12px; }

.block__name { font-size: 16.5px; font-weight: 600; color: var(--text); }

.balken { display: flex; gap: 3px; height: 26px; margin-top: 12px; }

/* Jeder Tag ist ein Knopf. Er bleibt so schmal wie vorher — die
   Trefferfläche ist klein, deshalb tut es auch der Titel beim Überfahren. */
.balken__tag {
    flex-grow: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: transform .1s ease, filter .1s ease;
}

.balken__tag:hover, .balken__tag:focus-visible {
    transform: scaleY(1.12);
    filter: brightness(1.12);
    outline: none;
}

.balken__tag--unbekannt { background: var(--linie); }

/* Was an einem angetippten Tag los war. */
.balken__auskunft {
    margin: 9px 0 0;
    padding: 9px 13px;
    border-radius: var(--r-feld);
    background: var(--flaeche-kraeftig);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-sekundaer);
}

.balken__tag--laeuft         { background: var(--behoben); }
.balken__tag--eingeschraenkt { background: var(--geplant-kraeftig); }
.balken__tag--stoerung       { background: var(--kritisch); }

.block__fuss {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 7px;
    font-size: 12px;
    color: #A0A9A4;
}

/* ── Legende ──────────────────────────────────────────────────────────── */

.legende {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 14px 0 0;
    padding: 0 6px;
    font-size: 13.5px;
    color: var(--text-schwach);
}

.legende__punkt { display: flex; align-items: center; gap: 7px; }
.legende .lampe { width: 9px; height: 9px; }

/* ── Handy ────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
    .seitenkopf { flex-direction: column; align-items: stretch; gap: 14px; }
    .seitenkopf__titel { font-size: 25px; }
    .seitenkopf__zusatz { font-size: 14px; }

    .umschalter { align-self: flex-start; }
    .umschalter__punkt { padding: 8px 18px; }

    .tafel { border-radius: var(--r-gross); }
    .tafel__gruppe { padding: 15px 18px 10px; font-size: 14px; }

    .zeile {
        flex-wrap: wrap;
        gap: 10px;
        padding: 13px 18px;
    }

    .zeile__name { font-size: 15.5px; }

    /* Am Telefon rutscht der Zustand unter den Namen, sonst wird es zu eng. */
    .zeile__rechts {
        width: 100%;
        margin-left: 25px;
        text-align: left;
        font-size: 13.5px;
    }

    .marker { margin-left: 0; }

    .block { padding: 16px 18px 14px; }
    .block__kopf { flex-wrap: wrap; gap: 10px; }
    .block__name { font-size: 15.5px; }
    .block__kopf .zeile__rechts { width: 100%; margin-left: 0; }
    .balken { height: 34px; gap: 2px; }
    .balken__tag { border-radius: 1.5px; }
}

/* ── Betroffene Systeme, ganz oben ───────────────────────────────────── */

.tafel--betroffen { margin-bottom: 18px; border-color: var(--kritisch); }

.tafel__gruppe--betroffen { color: var(--kritisch); }

/* Hier steht der Bereich dabei — der Block mischt Gruppen. */
.zeile__gruppe {
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--text-schwach);
}