/* Sanfter Übergang beim Seitenwechsel statt weißem Aufblitzen.
   Zwei Zeilen, kein JavaScript: Wo der Browser es kann (Safari 18+,
   Chrome 126+), blendet er über; wo nicht, wechselt er wie immer. Auf
   einer Störungsseite soll nichts davon abhängen. */
@view-transition { navigation: auto; }

/* Wer „Bewegung reduzieren" eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* Gestaltungswerte aus dem Entwurf (entwurf/Betriebsstatus-Neues-Design.html).
   Werte sind übernommen, nicht gerundet — siehe docs/DESIGN.md. */

:root {
    /* ── Marke und Akzent ──────────────────────────────────────────────── */
    --akzent:            #0F5A54;   /* Aktionen, aktive Felder, Verweise */
    --akzent-hell:       #7FA39B;   /* Text auf dunklem Grund */
    --akzent-blass:      #A9C2BB;
    --dunkel:            #14201E;   /* Text, gefüllte Knöpfe */
    --dunkel-flaeche:    #0F2A27;   /* dunkle Spalte, App-Hintergrund */

    /* ── Text ──────────────────────────────────────────────────────────── */
    --text:              #14201E;
    --text-sekundaer:    #46534F;
    --text-tertiaer:     #55635F;
    --text-schwach:      #8B968F;
    --text-auf-farbe:    #FFFFFF;

    /* ── Flächen und Linien ────────────────────────────────────────────── */
    --grund:             #FFFFFF;
    --flaeche:           #F6F8F7;
    --flaeche-kraeftig:  #F1F4F3;
    --flaeche-tief:      #EDF0EF;
    --linie:             #E4E9E7;
    --linie-kraeftig:    #D8DEDC;

    /* ── Zustände einer Meldung ────────────────────────────────────────── */
    --kritisch:          #B3402F;   /* Störung, kritisch */
    --kritisch-flaeche:  #F7E7E3;   /* dieselbe Farbe als ruhige Fläche */
    --geplant-flaeche:   #F3E4CB;   /* Hinweis, geplant */
    --geplant-text:      #7C5A1B;
    --geplant-kraeftig:  #B9812E;
    /* Ampel bei Störungen. Orangener als das Ocker des Entwurfs und mit
       4,8:1 gegen Weiß kontraststark genug für die Zeile darunter. */
    --stoerung-ampel:    #AE5D18;
    --behoben:           #2E7D5B;
    --behoben-dunkel:    #24503C;
    --behoben-flaeche:   #DDEAE2;
    --info:              #375F8F;
    --warm:              #D9B36C;   /* Label auf dunklem Grund */

    /* ── Schrift ───────────────────────────────────────────────────────── */
    /* Source Sans 3 ist die Schrift des Hauses und trägt alles.
       Space Grotesk setzt nur die Titel ab — der Charakterzug des Entwurfs. */
    --schrift:           'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --schrift-titel:     'Space Grotesk', 'Source Sans 3', -apple-system, sans-serif;
    --schrift-zahlen:    'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ── Radien ────────────────────────────────────────────────────────── */
    --r-feld:            16px;
    --r-karte:           18px;
    --r-gross:           20px;
    --r-sehr-gross:      26px;
    --r-pille:           999px;

    /* ── Maße ──────────────────────────────────────────────────────────── */
    --touchziel:         48px;
    /* Breite des Inhalts. Kopfleiste, Meldungen und Fußzeile richten sich
       daran aus, damit alles auf einer Linie steht. */
    --inhalt-breite:     1100px;
    --rand-oben:         env(safe-area-inset-top, 0px);
    --rand-unten:        env(safe-area-inset-bottom, 0px);
}

@media (max-width: 899px) {
    :root {
        /* Am Telefon eine Stufe größer — sonst wirkt am Schreibtisch
           Entworfenes zu klein, und Safari zoomt bei Feldern unter 17px. */
        --touchziel: 56px;
    }
}