/* Lokal ausgeliefert, damit die PWA auch offline mit ihrem eigenen Aussehen startet
   (D4/D21). Beides sind Variable Fonts: eine Datei je Subset traegt den ganzen
   Gewichtsbereich, deshalb steht in font-weight eine Spanne und keine Zahl. */

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================================
   Aurora Glass — die Token-Ebene (D21).

   Eine Stelle fuer Farbe, Abstand, Radius und Bewegung. Radzen bleibt und wird
   nicht ersetzt: die --rz-*-Variablen weiter unten zeigen auf dieselben Werte,
   damit jede Radzen-Komponente mitzieht, ohne dass sie ausgetauscht wird.

   Hell ist die Grundlage, dunkel folgt ueber prefers-color-scheme und ueber
   [data-theme]. Jede Farbe steht im :root-Block, bevor ein Block sie neu setzt —
   sonst gilt sie im nicht gestempelten Zustand gar nicht.
   ============================================================================ */

:root {
    /* --- Marke ---------------------------------------------------------
       #1B4965 ist die Farbe, die die Anwendung schon traegt: theme-color im
       Manifest, Ladespinner, Kategorie "Wohnen". Sie bleibt der Anker. */
    --sp-accent:            #1B4965;
    --sp-accent-hover:      #163C53;
    --sp-accent-soft:       rgba(27, 73, 101, .09);
    --sp-accent-2:          #0E8C86;
    --sp-on-accent:         #FFFFFF;

    /* --- Grund und Glas --- */
    --sp-bg:                #EDF2F6;
    --sp-bg-2:              #E3EAF0;
    --sp-glass:             rgba(255, 255, 255, .78);
    --sp-glass-2:           rgba(255, 255, 255, .92);
    --sp-solid:             #FFFFFF;
    --sp-border:            rgba(20, 52, 71, .12);
    --sp-border-strong:     rgba(20, 52, 71, .22);

    /* Zwei Schleier fuer jede leise Flaeche: der Streifen jeder zweiten
       Tabellenzeile, das Ueberfahren, der Kopf einer sortierten Spalte. Sie
       heben an, was darunter liegt, statt eine eigene Farbe zu setzen — und
       gelten deshalb hell wie dunkel unveraendert. */
    --sp-tint:              rgba(20, 52, 71, .045);
    --sp-tint-2:            rgba(20, 52, 71, .08);

    /* --- Schrift --- */
    --sp-text:              #0F2531;
    --sp-muted:             #4A6274;
    --sp-faint:             #6E8698;
    --sp-disabled:          #9CAEBB;

    /* --- Zustaende -------------------------------------------------------
       Rot und das Warngelb standen schon in app.css (D10 bzw. D4) und behalten
       ihre Werte: sie sind eingefuehrt, nicht neu gewaehlt. */
    --sp-pos:               #0F7A52;
    --sp-neg:               #B3261E;
    --sp-warn:              #8A6100;
    --sp-warn-bg:           #FFF8E1;
    --sp-info:              #1B4965;
    /* --- Heatmap (D84) ---------------------------------------------------
       Eine Farbe, von hell nach dunkel: mehr ausgegeben ist dunkler. Stufe 0
       ist ein Tag ohne Ausgabe und bleibt der leise Schleier. */
    --sp-heat-0:            rgba(20, 52, 71, .06);
    --sp-heat-1:            #CFE3EE;
    --sp-heat-2:            #9CC6DC;
    --sp-heat-3:            #5E9FC2;
    --sp-heat-4:            #2F739B;
    --sp-heat-5:            #1B4965;

    /* --- Glas und Schatten --- */
    --sp-blur:              blur(18px) saturate(165%);
    --sp-shadow-1:          0 1px 2px rgba(15, 37, 49, .05);
    --sp-shadow-2:          0 1px 2px rgba(15, 37, 49, .05), 0 10px 26px -16px rgba(15, 37, 49, .35);
    --sp-shadow-3:          0 2px 4px rgba(15, 37, 49, .06), 0 22px 48px -22px rgba(15, 37, 49, .45);
    --sp-glow:              0 0 0 3px rgba(27, 73, 101, .18);

    /* --- Mass und Rhythmus --- */
    --sp-radius:            14px;
    --sp-radius-sm:         10px;
    --sp-radius-lg:         20px;
    --sp-radius-pill:       999px;

    /* --- Bewegung --------------------------------------------------------
       Eine Kurve fuer alles. Sie startet schnell und laeuft weich aus; das
       liest sich als "reagiert sofort", ohne zu springen. */
    --sp-ease:              cubic-bezier(.16, 1, .3, 1);
    --sp-fast:              160ms;
    --sp-base:              260ms;
    --sp-slow:              420ms;

    /* --- Schriftfamilien --- */
    --sp-font:              "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sp-font-num:          "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* Dunkel ohne Stempel: nur die Systemeinstellung entscheidet. Die Ausnahme fuer
   [data-theme="light"] sorgt dafuer, dass eine ausdrueckliche helle Wahl auch
   auf einem dunklen System gewinnt. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sp-accent:        #57AECD;
        --sp-accent-hover:  #74C0DA;
        --sp-accent-soft:   rgba(87, 174, 205, .14);
        --sp-accent-2:      #2DD4BF;
        --sp-on-accent:     #06222E;

        --sp-bg:            #101A22;
        --sp-bg-2:          #16232D;
        --sp-glass:         rgba(255, 255, 255, .065);
        --sp-glass-2:       rgba(255, 255, 255, .10);
        --sp-solid:         #1A2831;
        --sp-border:        rgba(255, 255, 255, .12);
        --sp-border-strong: rgba(255, 255, 255, .22);
        --sp-tint:          rgba(255, 255, 255, .05);
        --sp-tint-2:        rgba(255, 255, 255, .09);

        --sp-text:          #E9F1F6;
        --sp-muted:         #9DB2C0;
        --sp-faint:         #7A93A3;
        --sp-disabled:      #5A7182;

        --sp-pos:           #34D399;
        --sp-neg:           #FF8A80;
        --sp-warn:          #E6B54A;
        --sp-warn-bg:       rgba(230, 181, 74, .16);
        --sp-info:          #57AECD;
        --sp-heat-0:        rgba(255, 255, 255, .06);
        --sp-heat-1:        #1E3B4B;
        --sp-heat-2:        #255D78;
        --sp-heat-3:        #2F82A6;
        --sp-heat-4:        #4FA9CF;
        --sp-heat-5:        #8FD0EA;

        --sp-shadow-1:      0 1px 2px rgba(0, 0, 0, .4);
        --sp-shadow-2:      0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -18px rgba(0, 0, 0, .9);
        --sp-shadow-3:      0 2px 4px rgba(0, 0, 0, .45), 0 26px 54px -24px rgba(0, 0, 0, .95);
        --sp-glow:          0 0 0 3px rgba(87, 174, 205, .28);
    }
}

/* Dieselben Werte noch einmal fuer die ausdrueckliche Wahl — damit der
   Umschalter auch auf einem hellen System nach dunkel kommt. */
:root[data-theme="dark"] {
    --sp-accent:        #57AECD;
    --sp-accent-hover:  #74C0DA;
    --sp-accent-soft:   rgba(87, 174, 205, .14);
    --sp-accent-2:      #2DD4BF;
    --sp-on-accent:     #06222E;

    --sp-bg:            #101A22;
    --sp-bg-2:          #16232D;
    --sp-glass:         rgba(255, 255, 255, .065);
    --sp-glass-2:       rgba(255, 255, 255, .10);
    --sp-solid:         #1A2831;
    --sp-border:        rgba(255, 255, 255, .12);
    --sp-border-strong: rgba(255, 255, 255, .22);
    --sp-tint:          rgba(255, 255, 255, .05);
    --sp-tint-2:        rgba(255, 255, 255, .09);

    --sp-text:          #E9F1F6;
    --sp-muted:         #9DB2C0;
    --sp-faint:         #7A93A3;
    --sp-disabled:      #5A7182;

    --sp-pos:           #34D399;
    --sp-neg:           #FF8A80;
    --sp-warn:          #E6B54A;
    --sp-warn-bg:       rgba(230, 181, 74, .16);
    --sp-info:          #57AECD;
    --sp-heat-0:        rgba(255, 255, 255, .06);
    --sp-heat-1:        #1E3B4B;
    --sp-heat-2:        #255D78;
    --sp-heat-3:        #2F82A6;
    --sp-heat-4:        #4FA9CF;
    --sp-heat-5:        #8FD0EA;

    --sp-shadow-1:      0 1px 2px rgba(0, 0, 0, .4);
    --sp-shadow-2:      0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -18px rgba(0, 0, 0, .9);
    --sp-shadow-3:      0 2px 4px rgba(0, 0, 0, .45), 0 26px 54px -24px rgba(0, 0, 0, .95);
    --sp-glow:          0 0 0 3px rgba(87, 174, 205, .28);
}

/* ============================================================================
   Radzen liest dieselben Werte.

   Das ist der Grund, warum keine Radzen-Komponente ausgetauscht werden muss:
   material-base.css rechnet mit diesen Variablen, und sie zeigen ab hier auf
   die Tokens oben.

   DIE NAMEN SIND AM PAKET ABGELESEN UND NICHT GERATEN. Der naheliegende Griff
   geht hier zweimal daneben: --rz-border-color, --rz-card-color, --rz-panel-color,
   --rz-input-color und --rz-body-color gibt es GAR NICHT — eine Zuweisung darauf
   ist wirkungslos und meldet nichts. (Das alte app.css schrieb
   `var(--rz-border-color, #d7d5cf)`; aufgeloest hat davon immer der Fallback.)
   Und --rz-card-border ist eine BORDER-KURZSCHREIBWEISE, kein Farbwert — eine
   Farbe allein ergibt dort eine ungueltige Deklaration, die still faellt.
   ============================================================================ */
:root {
    --rz-text-font-family:                  var(--sp-font);

    /* --- Marke und Zustaende --- */
    --rz-primary:                           var(--sp-accent);
    --rz-primary-light:                     var(--sp-accent-hover);
    --rz-primary-dark:                      var(--sp-accent-hover);
    --rz-primary-darker:                    var(--sp-accent-hover);
    --rz-on-primary:                        var(--sp-on-accent);
    --rz-secondary:                         var(--sp-accent-2);
    --rz-on-secondary:                      var(--sp-on-accent);

    /* JEDE AUSWAHL HING AN ZWEI NICHT ABGEBILDETEN VARIABLEN. Radzen faerbt sie
       aus --rz-primary-lighter (Flaeche) und --rz-on-primary-lighter (Schrift);
       beide standen auf der Vorgabe des Pakets — einem Violett (#4340D2), das
       mit dieser Anwendung nichts zu tun hat. Hell fiel es kaum auf, dunkel
       stand violetter Text auf dunklem Grund. Betroffen war alles, was eine
       Auswahl kennt: die Knopfleisten (D41/D46), der gewaehlte Eintrag im
       Dropdown, die aktive Zeile der Messtabelle (D10), der Menuepunkt, die
       Seite im Pager. Secondary daneben ist dieselbe Falle in Pink — es faerbt
       die fokussierte Zelle einer Tabelle. */
    --rz-primary-lighter:                   var(--sp-accent-soft);
    --rz-on-primary-lighter:                var(--sp-accent);
    --rz-secondary-lighter:                 color-mix(in srgb, var(--sp-accent-2) 14%, transparent);
    --rz-on-secondary-lighter:              var(--sp-accent-2);

    --rz-success:                           var(--sp-pos);
    --rz-danger:                            var(--sp-neg);
    --rz-warning:                           var(--sp-warn);
    --rz-info:                              var(--sp-accent);
    --rz-on-success:                        #FFFFFF;
    --rz-on-danger:                         #FFFFFF;
    --rz-on-warning:                        #FFFFFF;
    --rz-on-info:                           var(--sp-on-accent);

    /* --- Grund und Schrift --- */
    --rz-body-background-color:             var(--sp-bg);
    --rz-base-background-color:             var(--sp-solid);
    --rz-text-color:                        var(--sp-text);
    --rz-text-secondary-color:              var(--sp-muted);
    --rz-text-tertiary-color:               var(--sp-faint);
    --rz-text-disabled-color:               var(--sp-disabled);

    /* JEDER TEXTSTIL FUEHRT SEINE EIGENE FARBE. --rz-text-color allein zu setzen
       reicht nicht: .rz-text-h6 liest --rz-text-h6-color, .rz-text-body1 liest
       --rz-text-body1-color, und so weiter. Im hellen Modus faellt das nicht auf,
       weil die Vorgaben dort ohnehin dunkel sind — im dunklen stand die halbe
       Oberflaeche dunkel auf dunkel, waehrend der Hilfstext daneben stimmte. */
    --rz-text-title-color:                  var(--sp-text);
    --rz-text-h1-color:                     var(--sp-text);
    --rz-text-h2-color:                     var(--sp-text);
    --rz-text-h3-color:                     var(--sp-text);
    --rz-text-h4-color:                     var(--sp-text);
    --rz-text-h5-color:                     var(--sp-text);
    --rz-text-h6-color:                     var(--sp-text);
    --rz-text-display-h1-color:             var(--sp-text);
    --rz-text-display-h2-color:             var(--sp-text);
    --rz-text-display-h3-color:             var(--sp-text);
    --rz-text-display-h4-color:             var(--sp-text);
    --rz-text-display-h5-color:             var(--sp-text);
    --rz-text-display-h6-color:             var(--sp-text);
    --rz-text-subtitle1-color:              var(--sp-text);
    --rz-text-subtitle2-color:              var(--sp-muted);
    --rz-text-body1-color:                  var(--sp-text);
    --rz-text-body2-color:                  var(--sp-muted);
    --rz-text-button-color:                 inherit;
    --rz-text-caption-color:                var(--sp-muted);
    --rz-text-overline-color:               var(--sp-faint);
    --rz-text-contrast-color:               var(--sp-text);
    --rz-text-selection-color:              var(--sp-text);
    --rz-text-selection-background-color:   var(--sp-accent-soft);

    --rz-link-color:                        var(--sp-accent);
    --rz-link-hover-color:                  var(--sp-accent-hover);

    /* --- Kanten ---------------------------------------------------------
       Die --rz-border-*-Werte sind Kurzschreibweisen (Breite Stil Farbe), die
       --rz-base-* dahinter reine Farben. Beide werden gesetzt: die Kurzform
       fuer alles, was sie direkt liest, die Farbe fuer alles andere. */
    --rz-base:                              var(--sp-border);
    --rz-base-300:                          var(--sp-border);

    /* DIE DREI HELLSTEN GRAUTOENE DES PAKETS SIND KEINE KANTEN, SONDERN
       FLAECHEN: #fafafa, #f5f5f5 und #eeeeee tragen den Streifen jeder zweiten
       Tabellenzeile, das Ueberfahren einer Zeile, den Kopf einer sortierten
       Spalte, den Chip. Nicht abgebildet standen sie auch im dunklen Modus da —
       eine weisse Zeile mitten in der Tabelle, darauf die helle Schrift. Als
       Schleier tun sie in beiden Modi dasselbe: sie heben die Flaeche darunter
       leicht an. */
    --rz-base-50:                           var(--sp-tint);
    --rz-base-100:                          var(--sp-tint);
    --rz-base-200:                          var(--sp-tint-2);
    --rz-border-width:                      1px;
    --rz-border-radius:                     var(--sp-radius);
    --rz-border-base:                       1px solid var(--sp-border);
    --rz-border-base-300:                   1px solid var(--sp-border);

    /* --- Flaechen --- */
    --rz-panel-background-color:            var(--sp-glass);
    --rz-panel-border-radius:               var(--sp-radius);
    --rz-panel-shadow:                      var(--sp-shadow-2);
    --rz-card-background-color:             var(--sp-glass);
    --rz-card-flat-background-color:        var(--sp-glass);
    --rz-card-border-radius:                var(--sp-radius);
    --rz-card-border:                       1px solid var(--sp-border);
    --rz-card-shadow:                       var(--sp-shadow-2);

    /* --- Eingaben --- */
    --rz-input-background-color:            var(--sp-glass-2);
    --rz-input-hover-background-color:      var(--sp-glass-2);
    --rz-input-focus-background-color:      var(--sp-solid);
    --rz-input-value-color:                 var(--sp-text);
    --rz-input-placeholder-color:           var(--sp-faint);
    --rz-input-border-radius:               var(--sp-radius-sm);
    --rz-input-border:                      1px solid var(--sp-border);
    --rz-input-hover-border:                1px solid var(--sp-border-strong);
    --rz-input-focus-border:                1px solid var(--sp-accent);
    --rz-input-focus-shadow:                var(--sp-glow);
    --rz-input-focus-outline:               none;
    --rz-input-disabled-color:              var(--sp-disabled);
    --rz-input-disabled-background-color:   transparent;

    /* --- Geruest und Ueberlagerungen --- */
    --rz-header-background-color:           transparent;
    --rz-sidebar-background-color:          transparent;
    --rz-dialog-background-color:           var(--sp-glass);
    --rz-dialog-border-radius:              var(--sp-radius-lg);
    --rz-dialog-mask-background-color:      color-mix(in srgb, var(--sp-bg) 62%, transparent);

    --rz-badge-border-radius:               var(--sp-radius-pill);
    --rz-alert-border-radius:               var(--sp-radius);

    /* HINTER JEDER MELDUNG LIEGT EINE EIGENE PLATTE. Sie gehoert nicht zum
       Kasten, den components.css als Glas zeichnet, sondern zu dessen Huelle
       (.rz-notification-item-wrapper) — und ihre Vorgabe ist --rz-white. Im
       dunklen Modus stand die Meldung damit auf Weiss, und die helle Schrift
       darauf war nicht zu lesen. Die Flaeche traegt das Glas; die Platte
       bleibt leer. */
    --rz-notification-container-background-color: transparent;

    /* --- Diagramme (D48) -------------------------------------------------
       Achsenbeschriftung UND Wertelabels lesen dieselbe Variable; ihre Vorgabe
       ist ein Grau (#9e9e9e), das im dunklen Modus kaum vom Grund abhebt. Die
       Achsenlinie selbst haengt an --rz-base-300 und zieht damit schon mit. */
    --rz-chart-axis-label-color:            var(--sp-muted);

    --rz-shadow-1:                          var(--sp-shadow-1);
    --rz-shadow-2:                          var(--sp-shadow-2);
    --rz-shadow-3:                          var(--sp-shadow-3);
}

/* ============================================================================
   Grundlagen
   ============================================================================ */
* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    /* Die Formularsteuerung des Browsers soll zum gewaehlten Modus passen. */
    color-scheme: light dark;
}

html, body {
    font-family: var(--sp-font);
    color: var(--sp-text);
    background-color: var(--sp-bg);
}

body {
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Das Licht hinter dem Glas ------------------------------------------
   Zwei weiche Felder, sehr langsam. Fest am Viewport, damit sie beim Scrollen
   stehen bleiben und keine Rechenlast je Bild erzeugen. Ohne sie waere das
   Glas darueber sinnlos: es gaebe nichts, wodurch es scheinen koennte. */
body::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 48% at 14% 16%, rgba(27, 73, 101, .22), transparent 64%),
        radial-gradient(38% 44% at 86% 22%, rgba(14, 140, 134, .16), transparent 66%),
        radial-gradient(46% 52% at 64% 92%, rgba(106, 76, 147, .14), transparent 68%);
    filter: blur(34px);
    animation: sp-drift 48s ease-in-out infinite alternate;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body::before {
        background:
            radial-gradient(42% 48% at 14% 16%, rgba(87, 174, 205, .20), transparent 64%),
            radial-gradient(38% 44% at 86% 22%, rgba(45, 212, 191, .14), transparent 66%),
            radial-gradient(46% 52% at 64% 92%, rgba(106, 76, 147, .22), transparent 68%);
    }
}

:root[data-theme="dark"] body::before {
    background:
        radial-gradient(42% 48% at 14% 16%, rgba(87, 174, 205, .20), transparent 64%),
        radial-gradient(38% 44% at 86% 22%, rgba(45, 212, 191, .14), transparent 66%),
        radial-gradient(46% 52% at 64% 92%, rgba(106, 76, 147, .22), transparent 68%);
}

@keyframes sp-drift {
    0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
    100% { transform: translate3d(2%, 2.5%, 0) scale(1.08); }
}

/* KEIN tabular-nums. Der Griff ist bei einer Geldanwendung der naheliegende, und
   bei DIESER Schrift falsch: Schibsted Grotesk polstert im tnum-Satz auch Punkt
   und Komma auf Ziffernbreite, und aus "€ 1.353,62" wird sichtbar "€ 1 . 353 , 62".
   Die Betraege stehen ohnehin rechtsbuendig; proportional gesetzt sind sie in
   dieser Schrift sauber ausgeglichen. Wer die Schrift wechselt, prueft das neu. */

/* Sichtbarer Fokus, ueberall und in einer Farbe. tabindex="-1" bleibt aussen vor:
   das sind Ziele fuer programmatischen Fokus (Blazor setzt ihn nach einem
   Seitenwechsel), und ein Ring um eine Ueberschrift sieht aus wie ein Fehler. */
:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--sp-accent);
    outline-offset: 2px;
    border-radius: var(--sp-radius-sm);
}

/* Blazor setzt nach einem Seitenwechsel den Fokus auf die Ueberschrift, damit
   Screenreader und Tastatur am Anfang des neuen Inhalts landen. Chrome zieht
   darum seinen eigenen Ring — im Bild ein schwarzer Kasten um die Ueberschrift,
   der wie ein Fehler aussieht. Ihn aus der eigenen Regel auszunehmen genuegt
   nicht, die Vorgabe des Browsers bleibt; sie wird hier genannt und abgeraeumt.
   Nur fuer Ueberschriften: ein tabindex="-1" traegt auch die Menuefuehrung von
   Radzen, und dort ist der Ring die einzige Rueckmeldung der Tastatur. */
:is(h1, h2, h3, h4, h5, h6)[tabindex="-1"]:focus,
:is(h1, h2, h3, h4, h5, h6)[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Wer Bewegung abbestellt hat, bekommt keine. Das gilt fuer alles, was diese
   Ebene mitbringt — die Aurora eingeschlossen. */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}