/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Farben wie die Berichte (Petrol var(--akzent)). Kein Text heller als var(--meta).
   Keine feste Höhe und kein overflow: Das Dokument scrollt selbst — sonst blenden
   mobile Browser die Adressleiste nicht aus (docs/AUFGABEN.md P0-1). */

/* Kein zentrierter Rahmen um das Ganze: Die Navigation soll am linken Fensterrand
   stehen, nicht in der Mitte mitwandern. Der Inhalt zentriert sich selbst innerhalb
   der verbleibenden Fläche — jede Seite bringt ihre eigene Lesebreite mit. */
.huelle[b-896d5aq266] {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    padding: 0 1.5rem;
}

/* ── Seitenleiste ─────────────────────────────────────────────────────────── */

.seitenleiste[b-896d5aq266] {
    flex: 0 0 15rem;
    position: sticky;
    top: 0;
    align-self: flex-start;
    padding: 1.5rem 0;
}

.marke[b-896d5aq266] {
    display: block;
    margin-bottom: 1.5rem;
    max-width: 13rem;
}
.marke img[b-896d5aq266] {
    display: block;
    width: 100%;
    height: auto;
}

.hauptnavigation[b-896d5aq266] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.hauptnavigation[b-896d5aq266]  a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid transparent;
    border-radius: 0 0.1875rem 0.1875rem 0;
    color: var(--meta);
    text-decoration: none;
    font-size: 0.9375rem;
}

.hauptnavigation[b-896d5aq266]  a:hover {
    background: var(--akzent-hell);
    color: var(--akzent);
}

/* Die aktive Seite trägt Farbe UND einen Balken — nicht Farbe allein. */
.hauptnavigation[b-896d5aq266]  a.aktiv {
    border-left-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--akzent);
    font-weight: 700;
}

/* ── Inhalt ───────────────────────────────────────────────────────────────── */

.inhaltsspalte[b-896d5aq266] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.inhaltsspalte > main[b-896d5aq266] {
    flex: 1 0 auto;
    min-width: 0;
    padding-top: 1.5rem;
}

.rechts-fuss[b-896d5aq266] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 3rem;
    padding: 1rem 0 2rem;
    border-top: 1px solid var(--linie);
    color: var(--meta);
    font-size: 0.875rem;
}

.rechts-fuss nav[b-896d5aq266] {
    display: flex;
    gap: 1.25rem;
}

.rechts-fuss[b-896d5aq266]  a {
    color: var(--meta);
}

.rechts-fuss[b-896d5aq266]  a:hover {
    color: var(--akzent);
}

/* ── Schmale Geräte: Navigation wandert nach oben ─────────────────────────── */

@media (max-width: 52rem) {
    .huelle[b-896d5aq266] {
        flex-direction: column;
        gap: 0;
    }

    .seitenleiste[b-896d5aq266] {
        position: static;
        flex: 1 1 auto;
        width: 100%;
        padding: 1rem 0 0.75rem;
        border-bottom: 1px solid var(--linie);
    }

    .marke[b-896d5aq266] {
        margin-bottom: 0.75rem;
        max-width: 11rem;
    }

    .hauptnavigation[b-896d5aq266] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .hauptnavigation[b-896d5aq266]  a {
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: 0.1875rem;
        padding: 0.375rem 0.5rem;
    }

    .hauptnavigation[b-896d5aq266]  a.aktiv {
        border-left: none;
        border-bottom-color: var(--akzent);
    }

    .inhaltsspalte[b-896d5aq266] {
        width: 100%;
        min-height: 0;
    }
}

/* Testband (docs/TESTSYSTEM.md E). Kraeftig und klar abgesetzt, aber NICHT bernsteinfarben:
   Der Warnton bleibt echten Gefahrenhinweisen vorbehalten. Ein Testsystem ist keine Gefahr,
   es ist eine Verwechslungsgefahr — deshalb auffaellig, nicht alarmierend.
   Eigenes Markup dieser Komponente, also schlichte Selektoren ohne ::deep. */
.testband[b-896d5aq266] {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.5rem 1rem;
    background: #5B2E8C;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    /* Zweites, farbunabhaengiges Merkmal — dieselbe Regel wie im PDF: Wer schwarzweiss
       druckt oder Farben nicht unterscheidet, sieht immer noch einen Balken mit Rand. */
    border-bottom: 3px solid #2E1547;
}
/* /Components/Pages/Brief.razor.rz.scp.css */
/* Gemeinsame Gestaltung der Rechtsseiten. Fließtext mindestens 11 pt,
   kein Text heller als var(--meta). */

.rechtsseite[b-fb5ii9onxf] {
    max-width: 44rem;
    margin: 0;
    padding: 2rem 0 3rem;
    color: var(--tinte);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.rechtsseite h1[b-fb5ii9onxf] {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 1.25rem;
    color: var(--akzent);
}

.rechtsseite h2[b-fb5ii9onxf] {
    font-size: 1.1875rem;
    margin: 2rem 0 0.5rem;
    color: var(--akzent);
}

.rechtsseite p[b-fb5ii9onxf] {
    margin: 0 0 1rem;
}

.rechtsseite ul[b-fb5ii9onxf] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.rechtsseite li[b-fb5ii9onxf] {
    margin-bottom: 0.375rem;
}

.rechtsseite code[b-fb5ii9onxf] {
    font-size: 0.9375rem;
    background: var(--akzent-hell);
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.1875rem;
}

.rechtsseite a[b-fb5ii9onxf] {
    color: var(--akzent);
}

/* Widerspruchsrecht — eigener, abgesetzter Block (Kanzlei, Punkt 10): nicht als
   Aufzaehlungspunkt zwischen den uebrigen Rechten verstecken. Petrol wie alle Hinweise. */
.widerspruch[b-fb5ii9onxf] {
    border-left: 4px solid var(--akzent);
    background: var(--akzent-hell);
    padding: 0.75rem 1rem;
    margin: 1rem 0 1.5rem;
}

.widerspruch p:last-child[b-fb5ii9onxf] {
    margin-bottom: 0;
}

/* Fassungsdatum direkt unter der Ueberschrift (AUFGABEN_RUNDE4.md Abnahme 1) */
.stand[b-fb5ii9onxf] { margin: -0.5rem 0 1rem; color: #4a4a4a; font-size: 0.9rem; }

/* Damalige Information (Textrunde „Vorsicht", 23.09.2026): klar abgesetzt, etwas kleiner,
   gut lesbar — auch gedruckt: Rahmen in --meta statt einer Hintergrundfarbe, die der Druck
   weglaesst. */
.historisch[b-fb5ii9onxf] {
    border: 1px solid var(--meta);
    border-radius: 0.25rem;
    padding: 1rem 1.25rem 0.25rem;
    margin: 2.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.rechtsseite .historisch h2[b-fb5ii9onxf] {
    margin-top: 0;
}

.rechtsseite .historisch h3[b-fb5ii9onxf] {
    font-size: 1.0625rem;
    margin: 1.5rem 0 0.5rem;
    color: var(--akzent);
}

.historisch-hinweis[b-fb5ii9onxf] {
    color: var(--meta);
}

@media print {
    .historisch[b-fb5ii9onxf] {
        border-color: #000;
        break-inside: auto;
    }
}
/* /Components/Pages/Datenschutz.razor.rz.scp.css */
/* Gemeinsame Gestaltung der Rechtsseiten. Fließtext mindestens 11 pt,
   kein Text heller als var(--meta). */

.rechtsseite[b-k8b0cdy34v] {
    max-width: 44rem;
    margin: 0;
    padding: 2rem 0 3rem;
    color: var(--tinte);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.rechtsseite h1[b-k8b0cdy34v] {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 1.25rem;
    color: var(--akzent);
}

.rechtsseite h2[b-k8b0cdy34v] {
    font-size: 1.1875rem;
    margin: 2rem 0 0.5rem;
    color: var(--akzent);
}

.rechtsseite p[b-k8b0cdy34v] {
    margin: 0 0 1rem;
}

.rechtsseite ul[b-k8b0cdy34v] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.rechtsseite li[b-k8b0cdy34v] {
    margin-bottom: 0.375rem;
}

.rechtsseite code[b-k8b0cdy34v] {
    font-size: 0.9375rem;
    background: var(--akzent-hell);
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.1875rem;
}

.rechtsseite a[b-k8b0cdy34v] {
    color: var(--akzent);
}

/* Widerspruchsrecht — eigener, abgesetzter Block (Kanzlei, Punkt 10): nicht als
   Aufzaehlungspunkt zwischen den uebrigen Rechten verstecken. Petrol wie alle Hinweise. */
.widerspruch[b-k8b0cdy34v] {
    border-left: 4px solid var(--akzent);
    background: var(--akzent-hell);
    padding: 0.75rem 1rem;
    margin: 1rem 0 1.5rem;
}

.widerspruch p:last-child[b-k8b0cdy34v] {
    margin-bottom: 0;
}

/* Fassungsdatum direkt unter der Ueberschrift (AUFGABEN_RUNDE3.md G-3) */
.stand[b-k8b0cdy34v] { margin: -0.5rem 0 1rem; color: #4a4a4a; font-size: 0.9rem; }
/* /Components/Pages/Generator.razor.rz.scp.css */
/* Farben ausschließlich über die zentrale Palette in site.css
   (docs/GESTALTUNG_WEB.md Abschnitt 1). Bernstein nur für den Zeitstatus und den
   Druckluftbehälter-Sonderhinweis; Verbindlichkeit wird typografisch ausgedrückt.
   Aufbau nach docs/GENERATOR_TABELLE.md: Ergebnis oben, Erfassung darunter. */

.fristen-hinweis[b-x4giu8ocke] {
    border-left: 4px solid var(--akzent);
    background: var(--akzent-hell);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    max-width: 60rem;
    line-height: 1.5;
}

/* ── D: Ergebnisleiste — steht oben, in jedem Zustand, nie schwebend ─────────────── */
.ergebnisleiste[b-x4giu8ocke] {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--linie);
    border-radius: 0.375rem;
    background: var(--flaeche);
    max-width: 60rem;
}
.ergebnis-knoepfe[b-x4giu8ocke] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1rem;
}
.ergebnis-hinweis[b-x4giu8ocke] {
    color: var(--meta);
    font-size: 0.9375rem;
}
/* Die einzigen gefüllten Primärknöpfe der Seite neben "Anlage anlegen". */
.knopf.primaer[b-x4giu8ocke] {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background: var(--akzent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
}
.knopf.primaer:hover[b-x4giu8ocke],
.knopf.primaer:focus-visible[b-x4giu8ocke] {
    background: var(--akzent-dunkel);
}
/* Inaktiv: ausgegraut, nicht versteckt. Der Wechsel zu gefüllt ist die ganze Belohnung. */
.knopf.primaer.inaktiv[b-x4giu8ocke] {
    background: var(--linie);
    color: var(--meta);
    cursor: not-allowed;
}
.plan-sichern[b-x4giu8ocke] {
    margin-top: 0.75rem;
    border-top: 1px solid var(--linie);
    padding-top: 0.5rem;
}
.plan-sichern summary[b-x4giu8ocke] {
    cursor: pointer;
    color: var(--akzent);
    font-size: 0.9375rem;
}
.plan-sichern-erklaerung[b-x4giu8ocke] {
    margin: 0.5rem 0;
    color: var(--meta);
    font-size: 0.9375rem;
}
/* Der Link ist der Schlüssel zum Plan — vollständig lesbar und markierbar, auch schmal. */
.plan-verweis[b-x4giu8ocke] {
    margin: 0 0 0.75rem;
}
.plan-verweis code[b-x4giu8ocke] {
    display: block;
    padding: 0.5rem 0.625rem;
    background: var(--akzent-hell);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    user-select: all;
}

/* ── A/B: Anlagen ───────────────────────────────────────────────────────────────── */
.anlagen[b-x4giu8ocke] {
    max-width: 60rem;
    margin-bottom: 1.5rem;
}
.anlagen h2[b-x4giu8ocke],
.aufgaben-bereich h2[b-x4giu8ocke] {
    margin: 0 0 0.5rem;
}
/* ── Vorauswahl aus dem Pruefristen-Rechner (docs/PRUEFFRISTEN_RECHNER_TEIL2.md B) ──────
   Deutlich abgesetzt, weil er der erste Handgriff dieser Besucher ist — aber ruhig: Es ist
   ein Angebot, keine Warnung. Deshalb dieselbe Hinweisflaeche wie die Vorwahl darunter und
   kein Bernstein; der Ton bleibt echten Gefahrenhinweisen vorbehalten (CLAUDE.md). */
.vorauswahl-kasten[b-x4giu8ocke] {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem 0.5rem;
    border: 1px solid var(--akzent);
    border-left-width: 4px;
    border-radius: 0.25rem;
    background: var(--akzent-hell);
}

.vorauswahl-kasten h3[b-x4giu8ocke] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.vorauswahl-liste[b-x4giu8ocke] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Name links, Knopf rechts; auf schmalen Bildschirmen untereinander (Regel unten). */
.vorauswahl-liste li[b-x4giu8ocke] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0;
    border-top: 1px solid rgba(11, 79, 98, 0.2);
}

.vorauswahl-liste li:first-child[b-x4giu8ocke] {
    border-top: 0;
}

.vorauswahl-name[b-x4giu8ocke] {
    font-weight: 600;
}

/* Der Einsatzort steht daneben, nicht darin: Er gehoert zur Frist, nicht zum Namen.

   Abstand ueber margin und NICHT ueber ein Leerzeichen im Markup: Razor schluckt den
   Leerraum zwischen Ausdruck und Element, und im Testsystem stand am 20.09.2026
   „Ortsveraenderliche elektrische Betriebsmittel(Baustelle)" ohne Luecke. Gefunden am
   gerenderten Text, nicht am Quelltext. */
.vorauswahl-ort[b-x4giu8ocke] {
    margin-left: 0.35em;
    font-weight: 400;
    color: var(--meta);
}

.vorauswahl-fuss[b-x4giu8ocke] {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--meta);
}

@media (max-width: 52rem) {
    /* Auf dem Handy untereinander und der Knopf ueber die volle Breite — mit dem Finger
       triffbar, ohne waagerechtes Scrollen (Abnahme 10). */
    .vorauswahl-liste li[b-x4giu8ocke] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
    }

    .vorauswahl-liste li[b-x4giu8ocke]  .dxbl-btn {
        width: 100%;
    }
}

.vorwahl-hinweis[b-x4giu8ocke] {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--akzent);
    background: var(--akzent-hell);
}
/* Schnellanlegen: eine Zeile — Bezeichnung, Typ, Knopf. */
.schnellanlegen[b-x4giu8ocke] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.feld[b-x4giu8ocke] {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--linie);
    border-radius: 0.25rem;
    font: inherit;
    background: #fff;
}
.feld:focus[b-x4giu8ocke] {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}
.leer[b-x4giu8ocke] {
    color: var(--meta);
}

.anlagen-tabelle[b-x4giu8ocke] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.anlagen-tabelle th[b-x4giu8ocke] {
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--meta);
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--linie);
}
.anlagen-tabelle td[b-x4giu8ocke] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--linie);
    vertical-align: middle;
}
.anlagen-tabelle tbody tr[b-x4giu8ocke] {
    cursor: pointer;
}
.anlagen-tabelle tbody tr:hover[b-x4giu8ocke] {
    background: var(--flaeche);
}
/* Die gewählte Zeile: deutlich — Fläche plus Balken links, nicht nur Farbe. */
.anlagen-tabelle tbody tr.aktiv[b-x4giu8ocke] {
    background: var(--akzent-hell);
    box-shadow: inset 4px 0 0 var(--akzent);
}
.anlagen-tabelle tr.aktiv .anlage-auswahl[b-x4giu8ocke] {
    font-weight: 700;
}
.anlagen-tabelle .zahl[b-x4giu8ocke] {
    text-align: right;
    width: 6rem;
}
.anlagen-tabelle .aktion[b-x4giu8ocke] {
    width: 6rem;
    text-align: right;
}
.anlage-auswahl[b-x4giu8ocke] {
    background: none;
    border: none;
    padding: 0.25rem 0;
    cursor: pointer;
    font: inherit;
    color: var(--akzent);
    text-align: left;
}
/* Zellen, die sich bearbeiten lassen: sehen erst beim Überfahren wie Felder aus. */
.zelle[b-x4giu8ocke] {
    width: 100%;
    min-width: 5rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font: inherit;
    background: transparent;
}
.zelle:hover[b-x4giu8ocke] {
    border-color: var(--linie);
    background: #fff;
}
.zelle:focus[b-x4giu8ocke] {
    border-color: var(--akzent);
    background: #fff;
    outline: none;
}
.zelle[b-x4giu8ocke]::placeholder {
    color: var(--linie);
}

/* Unter 52 rem wird die Tabelle zu Karten: eine Karte je Anlage, Felder untereinander. */
@media (max-width: 52rem) {
    .anlagen-tabelle[b-x4giu8ocke],
    .anlagen-tabelle tbody[b-x4giu8ocke],
    .anlagen-tabelle tr[b-x4giu8ocke],
    .anlagen-tabelle td[b-x4giu8ocke] {
        display: block;
        width: auto;
    }
    .anlagen-tabelle thead[b-x4giu8ocke] {
        display: none;
    }
    .anlagen-tabelle tbody tr[b-x4giu8ocke] {
        border: 1px solid var(--linie);
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
        background: #fff;
    }
    .anlagen-tabelle tbody tr.aktiv[b-x4giu8ocke] {
        box-shadow: inset 4px 0 0 var(--akzent);
    }
    .anlagen-tabelle td[b-x4giu8ocke] {
        display: grid;
        grid-template-columns: 7rem 1fr;
        align-items: center;
        gap: 0.5rem;
        border: none;
        padding: 0.2rem 0;
    }
    .anlagen-tabelle td[data-label][b-x4giu8ocke]::before {
        content: attr(data-label);
        font-size: 0.75rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--meta);
    }
    .anlagen-tabelle td.zahl[b-x4giu8ocke],
    .anlagen-tabelle td.aktion[b-x4giu8ocke] {
        text-align: left;
        width: auto;
    }
    .anlagen-tabelle td.aktion[b-x4giu8ocke] {
        grid-template-columns: 1fr;
    }
}

/* ── C: Aufgaben der gewählten Anlage — beide Wege nebeneinander ───────────────── */
.aufgaben-bereich[b-x4giu8ocke] {
    max-width: 60rem;
}
.wege[b-x4giu8ocke] {
    scroll-margin-top: 1rem;
    margin-bottom: 1.25rem;
}
.wege h3[b-x4giu8ocke] {
    margin: 0 0 0.5rem;
}
.wege-spalten[b-x4giu8ocke] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 52rem) {
    .wege-spalten[b-x4giu8ocke] {
        grid-template-columns: 1fr;
    }
}
.weg[b-x4giu8ocke] {
    border: 1px solid var(--linie);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem 1rem;
    background: #fff;
}
.weg h4[b-x4giu8ocke] {
    margin: 0 0 0.5rem;
    color: var(--akzent);
}
.weg-erklaerung[b-x4giu8ocke] {
    margin: 0 0 0.75rem;
    color: var(--meta);
    font-size: 0.9375rem;
}
.aufklappen[b-x4giu8ocke] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--akzent);
    text-decoration: underline;
}
.weitere-vorlagen[b-x4giu8ocke] {
    margin-top: 0.5rem;
}
.weitere-vorlagen summary[b-x4giu8ocke] {
    cursor: pointer;
    color: var(--akzent);
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}
.knopfzeile[b-x4giu8ocke] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.formular[b-x4giu8ocke] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}
.formular > *[b-x4giu8ocke] {
    max-width: 100%;
}
.intervall-editor[b-x4giu8ocke] {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Vorlagenkatalog ─────────────────────────────────────────────────────────── */
.vorlagen[b-x4giu8ocke] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.vorlage[b-x4giu8ocke] {
    border: 1px solid var(--linie);
    border-radius: 0.25rem;
    padding: 0.625rem 0.75rem;
    background: #fff;
}
.vorlage.vorgewaehlt[b-x4giu8ocke] {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}
.vorlage-kopf[b-x4giu8ocke] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.vorlage-titel[b-x4giu8ocke] {
    font-weight: 600;
}
.vorlage-beschreibung[b-x4giu8ocke] {
    font-size: 0.875rem;
    color: var(--meta);
}
/* Sonderhinweis Druckluftbehälter — die eine erlaubte Bernstein-Warnung (1.4). */
.sonderhinweis[b-x4giu8ocke] {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--warn);
    background: var(--warn-hell);
    line-height: 1.5;
}
.meldung[b-x4giu8ocke] {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--akzent);
    background: var(--akzent-hell);
}

/* ── Aufgabenkarte (docs/GESTALTUNG_WEB.md Abschnitt 2, Referenz Entwurf 2) ──── */
.aufgaben[b-x4giu8ocke] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}
.aufgabe[b-x4giu8ocke] {
    border: 1px solid var(--linie);
    border-radius: 0.375rem;
    padding: 1rem 1.25rem;
    background: #fff;
}
.aufgabe-kopf[b-x4giu8ocke] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--linie);
    margin-bottom: 0.875rem;
}
.aufgabe-titel[b-x4giu8ocke] {
    flex: 1;
    font-weight: 700;
}
.badge[b-x4giu8ocke] {
    flex: none;
    border: 1px solid var(--linie);
    border-radius: 999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    background: var(--flaeche);
    color: var(--meta);
}
.aufgabe-felder[b-x4giu8ocke] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: end;
    margin: 0 0 0.25rem;
}
@media (max-width: 52rem) {
    .aufgabe-felder[b-x4giu8ocke] {
        grid-template-columns: 1fr;
        align-items: start;
    }
}
.aufgabe-felder label[b-x4giu8ocke],
.faelligkeit[b-x4giu8ocke] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--meta);
}
.faelligkeit strong[b-x4giu8ocke] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--akzent);
    line-height: 1.2;
}
.aufgabe-herkunft[b-x4giu8ocke] {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.3125rem 0.875rem;
    margin: 0.875rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--linie);
    font-size: 0.875rem;
}
.aufgabe-herkunft dt[b-x4giu8ocke] {
    color: var(--meta);
}
.aufgabe-herkunft dd[b-x4giu8ocke] {
    margin: 0;
}
/* Verbindlichkeit ist NICHT farbig (1.3): nur "Höchstfrist" typografisch.
   Am Bildschirm NUR fett — eine Unterstreichung wirkt dort wie ein Verweis (docs/OPTIK_RUNDE.md,
   Punkt 5; wie Tabelle und Rechner). Im Druck fett UND unterstrichen, weil Papier keine
   Verweise kennt und die Auszeichnung die Schwarz-Weiß-Kopie ueberstehen muss. */
.hoechst[b-x4giu8ocke] {
    font-weight: 700;
}
@media print {
    .hoechst[b-x4giu8ocke] {
        border-bottom: 1.5px solid var(--tinte);
    }
}
.warnung-hoechstfrist[b-x4giu8ocke] {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--alarm);
    background: var(--alarm-hell);
    line-height: 1.5;
}
.katalog-korrektur[b-x4giu8ocke] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--akzent);
    background: var(--akzent-hell);
    line-height: 1.5;
}
.aufgabe-hinweis[b-x4giu8ocke] {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--meta);
}
.fehler[b-x4giu8ocke] {
    color: var(--alarm);
    margin: 0.25rem 0 0.75rem;
}

/* ── Aufgabenliste und "Aufgaben hinzufügen" nebeneinander auf breiten Bildschirmen ──
   (GENERATOR_TABELLE.md E5: Tabelle, beide Wege und Aufgabenliste zugleich sichtbar).
   Die beiden Wege stehen dann untereinander in der rechten Spalte; schmaler stapelt
   alles in der vorgegebenen Reihenfolge, und die Wege stehen nebeneinander. */
.aufgaben-bereich[b-x4giu8ocke] {
    max-width: none;
}
.inhalt.zweispaltig[b-x4giu8ocke] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.5rem;
    align-items: start;
}
.inhalt.zweispaltig .wege-spalten[b-x4giu8ocke] {
    grid-template-columns: 1fr;
}
.inhalt.zweispaltig .wege[b-x4giu8ocke] {
    position: sticky;
    top: 1rem;
}
@media (max-width: 68rem) {
    .inhalt.zweispaltig[b-x4giu8ocke] {
        display: block;
    }
    .inhalt.zweispaltig .wege-spalten[b-x4giu8ocke] {
        grid-template-columns: 1fr 1fr;
    }
    .inhalt.zweispaltig .wege[b-x4giu8ocke] {
        position: static;
    }
}
@media (max-width: 52rem) {
    .inhalt.zweispaltig .wege-spalten[b-x4giu8ocke] {
        grid-template-columns: 1fr;
    }
}
/* Kompaktere Karten, damit drei Aufgaben in den ersten Bildschirm passen. */
.aufgabe[b-x4giu8ocke] {
    padding: 0.75rem 1rem;
}
.aufgabe-kopf[b-x4giu8ocke] {
    padding-bottom: 0.5rem;
    margin-bottom: 0.625rem;
}
.aufgabe-felder[b-x4giu8ocke] {
    gap: 0.75rem;
}
.aufgabe-herkunft[b-x4giu8ocke] {
    margin-top: 0.625rem;
    padding-top: 0.5rem;
    gap: 0.125rem 0.75rem;
}
.aufgaben[b-x4giu8ocke] {
    gap: 0.625rem;
}

/* ── Kompakte Aufgabenkarte: Titel + Metazeile, darunter die drei Felder ─────────── */
.aufgabe-titelblock[b-x4giu8ocke] {
    flex: 1;
    min-width: 0;
}
.aufgabe-titel .badge[b-x4giu8ocke] {
    margin-left: 0.5rem;
    vertical-align: middle;
}
.aufgabe-herkunft[b-x4giu8ocke] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.375rem;
    margin: 0.25rem 0 0;
    padding: 0;
    border: none;
    font-size: 0.8125rem;
    color: var(--meta);
}
.aufgabe-kopf[b-x4giu8ocke] {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}
.aufgabe-felder[b-x4giu8ocke] {
    margin: 0;
}
.aufgabe-felder label[b-x4giu8ocke],
.faelligkeit[b-x4giu8ocke] {
    gap: 0.25rem;
}
.faelligkeit strong[b-x4giu8ocke] {
    font-size: 1.125rem;
}
.aufgabe-hinweis[b-x4giu8ocke] {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--meta);
}
.aufgabe-hinweis summary[b-x4giu8ocke] {
    cursor: pointer;
    color: var(--akzent);
}
.aufgabe-hinweis p[b-x4giu8ocke] {
    margin: 0.25rem 0 0;
    line-height: 1.5;
}
/* Oben etwas enger, damit der erste Bildschirm mehr zeigt. */
.fristen-hinweis[b-x4giu8ocke] {
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    margin-bottom: 0.75rem;
}
.ergebnisleiste[b-x4giu8ocke] {
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
}

.fristen-hinweis[b-x4giu8ocke] {
    margin-bottom: 0.5rem;
    padding: 0.375rem 0.75rem;
}
.ergebnisleiste[b-x4giu8ocke] {
    margin-bottom: 0.75rem;
}
.anlagen h2[b-x4giu8ocke],
.aufgaben-bereich h2[b-x4giu8ocke] {
    font-size: 1.25rem;
    margin: 0 0 0.375rem;
}
.anlagen[b-x4giu8ocke] {
    margin-bottom: 1rem;
}
.aufgaben-liste h3[b-x4giu8ocke],
.wege h3[b-x4giu8ocke] {
    margin: 0 0 0.375rem;
    font-size: 1.05rem;
}
.aufgabe-herkunft[b-x4giu8ocke] {
    font-size: 0.78rem;
}
.aufgabe-hinweis[b-x4giu8ocke] {
    margin-top: 0.25rem;
}

/* Handy: "Eigene Aufgabe anlegen" vor die Vorlagen — die volle Vorlagenliste ist dort
   einen Bildschirm hoch, und der zweite Weg darf nicht darunter verschwinden (E8). */
@media (max-width: 52rem) {
    .weg.eigene[b-x4giu8ocke] {
        order: -1;
    }
}

/* ── Aufgabenkarte in der zweispaltigen Ansicht: Flex mit Umbruch ─────────────────
   Harte Regel: Kein Kartenelement steht ausserhalb des Rahmens, bei keiner Breite.
   Titelblock und Feldgruppe sind zwei Flex-Kinder; passt die Feldgruppe nicht mehr
   vollstaendig neben den Titel, bricht sie GESCHLOSSEN in eine zweite Zeile um.
   Einzeilig ist der Sonderfall fuer viel Platz, nicht der Normalfall. Keine festen
   Pixelbreiten, keine abgeschnittenen Beschriftungen. */
@media (min-width: 68rem) {
    .inhalt.zweispaltig .aufgabe[b-x4giu8ocke] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 1.25rem;
        row-gap: 0.5rem;
        padding: 0.5rem 0.875rem;
    }
    .inhalt.zweispaltig .aufgabe-kopf[b-x4giu8ocke] {
        flex: 1 1 18rem;
        min-width: 0;
        border-bottom: none;
        margin: 0;
        padding: 0;
    }
    .inhalt.zweispaltig .aufgabe-felder[b-x4giu8ocke] {
        flex: 0 1 auto;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        margin: 0;
    }
    .inhalt.zweispaltig .aufgabe-felder label[b-x4giu8ocke],
    .inhalt.zweispaltig .faelligkeit[b-x4giu8ocke] {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .inhalt.zweispaltig .aufgabe > .warnung-hoechstfrist[b-x4giu8ocke],
    .inhalt.zweispaltig .aufgabe > .katalog-korrektur[b-x4giu8ocke],
    .inhalt.zweispaltig .aufgabe > .aufgabe-hinweis[b-x4giu8ocke] {
        flex: 1 1 100%;
        margin-top: 0;
    }
    .inhalt.zweispaltig .aufgaben[b-x4giu8ocke] {
        gap: 0.375rem;
    }
}

/* Bezeichnung in der Tabelle: aenderbar wie die anderen Zellen, aber als Titel gesetzt. */
.zelle.bezeichnung[b-x4giu8ocke] {
    font-weight: 600;
    color: var(--akzent);
    min-width: 9rem;
}
.anlagen-tabelle tr.aktiv .zelle.bezeichnung[b-x4giu8ocke] {
    font-weight: 700;
}

/* ── Laufende Kontrollen: eigener Abschnitt, ruhig — kein Datum, keine Farbe ─────── */
.laufend-titel[b-x4giu8ocke] {
    margin: 1rem 0 0.125rem;
    font-size: 1.05rem;
}
.laufend-erklaerung[b-x4giu8ocke] {
    margin: 0 0 0.5rem;
    color: var(--meta);
    font-size: 0.875rem;
}
.aufgabe-felder.zweispaltig[b-x4giu8ocke] {
    grid-template-columns: repeat(2, max-content);
    align-items: end;
}
/* Der Rhythmus steht an der Stelle der Faelligkeit, aber ruhig: normale Groesse, --meta. */
.faelligkeit.ruhig strong[b-x4giu8ocke] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--meta);
}
@media (min-width: 68rem) {
    .inhalt.zweispaltig .aufgabe-felder.zweispaltig[b-x4giu8ocke] {
        grid-template-columns: max-content max-content;
    }
}

/* Typ-Auswahl: das Auswahlfeld traegt dieselbe Optik wie die uebrigen Zellen, das
   Textfeld fuer den eigenen Typ steht darunter statt daneben. */
select.zelle[b-x4giu8ocke] {
    appearance: auto;
    cursor: pointer;
}
select.zelle + .zelle[b-x4giu8ocke] {
    margin-top: 0.25rem;
}
select.feld[b-x4giu8ocke] {
    cursor: pointer;
}
/* Sagt, was einem eigenen Typ fehlt — sichtbar, nicht im Tooltip (Katalogregel). */
.typ-frei-hinweis[b-x4giu8ocke] {
    margin: 0.4rem 0 0;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--linie);
    background: var(--flaeche, #f7f7f5);
    color: var(--meta);
    font-size: 0.875rem;
}

/* Abhakbare Einzelzeilen: Wahl direkt unter den PDF-Knoepfen, ruhig gehalten —
   die Vorgabe ist „aus", und wer sie nicht braucht, soll sie ueberlesen koennen. */
.abhaken[b-x4giu8ocke] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--linie);
}
.abhaken-schalter[b-x4giu8ocke],
.abhaken-zeitraum[b-x4giu8ocke] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
}
.abhaken-zeitraum select[b-x4giu8ocke] {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--linie);
    border-radius: 0.25rem;
    font: inherit;
    background: #fff;
    cursor: pointer;
}
.abhaken-erklaerung[b-x4giu8ocke] {
    flex: 1 1 18rem;
    min-width: 0;
    color: var(--meta);
    font-size: 0.875rem;
}

/* ── „Löschen" steht immer an der rechten Kartenkante (Johnna, 23.08.2026) ──────────
   Vorher saß der Knopf im Titelblock. In der Flex-Ansicht führte das zu zwei
   verschiedenen Positionen: bei terminierten Karten 15 px vom Kartenrand, bei
   laufenden 278 px — dort mitten in der Karte, mit zwei Datenspalten dahinter.
   Jetzt ist der Knopf ein eigenes Kind der Karte und wird rechts ausgerichtet. */
/* Adressiert wird er ueber ".aufgabe > button": DevExpress reicht CssClass am DxButton
   hier nicht an das Element durch, und der Loeschen-Knopf ist der einzige direkte
   Button der Karte — "Neu uebernehmen" steckt im Absatz .katalog-korrektur. */
/* ::deep, weil der Knopf aus einer Kindkomponente stammt — scoped CSS trifft ihn sonst
   nicht (CLAUDE.md, Hinweis zu Scoped CSS). */
.aufgabe[b-x4giu8ocke] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.75rem;
}
.aufgabe-kopf[b-x4giu8ocke] {
    grid-column: 1;
}
.aufgabe[b-x4giu8ocke] >  button {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}
/* Alles unterhalb des Kopfes läuft über beide Spalten. */
.aufgabe > .aufgabe-felder[b-x4giu8ocke],
.aufgabe > .warnung-hoechstfrist[b-x4giu8ocke],
.aufgabe > .katalog-korrektur[b-x4giu8ocke],
.aufgabe > .aufgabe-hinweis[b-x4giu8ocke] {
    grid-column: 1 / -1;
}
/* Der Trennstrich lag am Kopf und endete dadurch vor dem Knopf — er sitzt jetzt
   oberhalb der Feldgruppe und läuft über die volle Kartenbreite. */
.aufgabe-kopf[b-x4giu8ocke] {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.875rem;
}
.aufgabe > .aufgabe-felder[b-x4giu8ocke] {
    border-top: 1px solid var(--linie);
    padding-top: 0.875rem;
}

@media (min-width: 68rem) {
    /* Flex-Ansicht: der Knopf ist das letzte Element und wird nach rechts geschoben —
       dieselbe Kante in beiden Abschnitten, unabhängig davon, wie breit die
       Feldgruppe ist. */
    .inhalt.zweispaltig .aufgabe[b-x4giu8ocke] >  button {
        order: 99;
        margin-left: auto;
    }
    .inhalt.zweispaltig .aufgabe > .aufgabe-felder[b-x4giu8ocke] {
        border-top: none;
        padding-top: 0;
    }
    .inhalt.zweispaltig .aufgabe-kopf[b-x4giu8ocke] {
        margin-bottom: 0;
    }
}

/* Werte in normaler Schreibweise — Großbuchstaben bleiben den Spaltenüberschriften
   vorbehalten. Vorher erbten „Wartung" und „wöchentlich" das uppercase der
   Beschriftung und sahen aus wie Überschriften (Johnna, 23.08.2026). */
.faelligkeit strong[b-x4giu8ocke] {
    text-transform: none;
    letter-spacing: normal;
}

/* Hinweis unter dem Bezeichnungsfeld der neuen Aufgabe (docs/PRUEFER_KEINE_NAMEN.md).
   Ruhig gesetzt: Er soll den erklären, der ihn braucht, und den nicht aufhalten, der weiß,
   was er tut. Steht nur an dieser einen Stelle — nicht an der Anlagenbezeichnung, dort wäre
   er Rauschen. */
.feldhinweis[b-x4giu8ocke] {
    margin: -0.25rem 0 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--meta);
}

/* Nichts laeuft ueber den Kartenrand (docs/OPTIK_RUNDE.md, Punkt 3). Nachgestellt am
   22.09.2026 bei 375 px: eine eigene Aufgabe mit einem langen zusammengesetzten Wort ohne
   Trennstelle stand 128 px ueber die Karte hinaus, ueberdeckte „Löschen" und gab der ganzen
   Seite einen waagerechten Bildlauf. Jetzt bricht das Wort um — mit Silbentrennung, wo der
   Browser sie kennt, sonst an beliebiger Stelle. Nichts wird abgeschnitten. */
.aufgabe-titel[b-x4giu8ocke],
.aufgabe-herkunft[b-x4giu8ocke],
.aufgabe-hinweis[b-x4giu8ocke] {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Restzeichen unter einem begrenzten Eingabefeld (docs/OPTIK_RUNDE.md, Befund P, Entscheidung 2). */
/* Huelle fuer Feld + Zeichenanzeige.
   ⚠️ Die Verteilung in der Zeile gehoert an die HUELLE, nicht an das Feld darin. Bis zum
   23.09.2026 trug nur `.feld` die Basis `flex: 1 1 14rem` — gedacht als Breite in der Zeile
   `.schnellanlegen`. In dieser Spaltenhuelle ist die Flexbasis aber die HOEHE: Das Feld
   „Bezeichnung *" stand live als 180 x 224 Pixel grosser Kasten da, vorher 408 x 36.
   GeneratorFeldmasseTests haelt beide Haelften fest. */
.feld-mit-rest[b-x4giu8ocke] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 14rem;
    min-width: 0;
}

/* In der Spalte bestimmt der Inhalt die Hoehe — nie eine Basis aus der Zeile. */
.feld-mit-rest > .feld[b-x4giu8ocke] {
    flex: 0 0 auto;
}

.zeichen-rest[b-x4giu8ocke] {
    display: block;
    font-size: 0.8rem;
    color: var(--meta);
}
/* /Components/Pages/Impressum.razor.rz.scp.css */
/* Gemeinsame Gestaltung der Rechtsseiten. Fließtext mindestens 11 pt,
   kein Text heller als var(--meta). */

.rechtsseite[b-qk4v0v76l7] {
    max-width: 44rem;
    margin: 0;
    padding: 2rem 0 3rem;
    color: var(--tinte);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.rechtsseite h1[b-qk4v0v76l7] {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 1.25rem;
    color: var(--akzent);
}

.rechtsseite h2[b-qk4v0v76l7] {
    font-size: 1.1875rem;
    margin: 2rem 0 0.5rem;
    color: var(--akzent);
}

.rechtsseite p[b-qk4v0v76l7] {
    margin: 0 0 1rem;
}

.rechtsseite ul[b-qk4v0v76l7] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.rechtsseite li[b-qk4v0v76l7] {
    margin-bottom: 0.375rem;
}

.rechtsseite code[b-qk4v0v76l7] {
    font-size: 0.9375rem;
    background: var(--akzent-hell);
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.1875rem;
}

.rechtsseite a[b-qk4v0v76l7] {
    color: var(--akzent);
}

/* Noch offene Punkte im Text */
.hinweis-offen[b-qk4v0v76l7] {
    border-left: 4px solid var(--linie);
    padding: 0.5rem 1rem;
    color: var(--meta);
}

/* Fassungsdatum direkt unter der Ueberschrift (AUFGABEN_RUNDE4.md Abnahme 1) */
.stand[b-qk4v0v76l7] { margin: -0.5rem 0 1rem; color: #4a4a4a; font-size: 0.9rem; }
/* /Components/Pages/Index/Index.razor.rz.scp.css */
/* Startseite — statisches SSR, kein DevExpress. Farben wie die Berichte (Petrol var(--akzent)).
   Fließtext mindestens 11 pt, großzügige Zeilenabstände; auf dem Handy muss die Überschrift
   ohne Zoomen lesbar sein. */

/* Farben kommen aus der zentralen Palette in site.css — hier keine eigenen Definitionen. */
.startseite[b-g2f9nbsbwr] {
    /* Linksbündig an der Navigation statt in der Restfläche zentriert — sonst klafft
       auf breiten Bildschirmen eine Lücke zwischen Menü und Text. */
    /* Keine Breitenbegrenzung mehr am Ganzen: Der erste Bildschirm ist zweispaltig und
       breiter, alle uebrigen Abschnitte behalten die 44-rem-Lesespalte (siehe unten). */
    margin: 0;
    padding: 2rem 0 4rem;
    color: var(--tinte);
    font-size: 1.0625rem;   /* ~11 pt */
    line-height: 1.65;
}

.startseite section + section[b-g2f9nbsbwr] {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--linie);
}

.startseite h1[b-g2f9nbsbwr] {
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--akzent);
}

.startseite h2[b-g2f9nbsbwr] {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0 0 1rem;
    color: var(--akzent);
}

.startseite h3[b-g2f9nbsbwr] {
    font-size: 1.125rem;
    margin: 1.5rem 0 0.375rem;
}

.startseite p[b-g2f9nbsbwr] {
    margin: 0 0 1rem;
}

/* Erster Bildschirm */
.vorspann[b-g2f9nbsbwr] {
    font-size: 1.1875rem;
    font-weight: 600;
}

.konditionen[b-g2f9nbsbwr] {
    color: var(--meta);
}

.knopf[b-g2f9nbsbwr] {
    display: inline-block;
    margin: 0.5rem 0 0;
    padding: 0.875rem 1.75rem;
    background: var(--akzent);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.25rem;
}

.knopf:hover[b-g2f9nbsbwr],
.knopf:focus[b-g2f9nbsbwr] {
    background: var(--akzent-dunkel);
}

.zahlen[b-g2f9nbsbwr] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.zahlen li[b-g2f9nbsbwr] {
    margin-bottom: 0.25rem;
}

.fussnote[b-g2f9nbsbwr] {
    font-size: 0.875rem;
    color: var(--meta);
}

/* Drei Schritte */
.schritte[b-g2f9nbsbwr] {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}

.schritte > li[b-g2f9nbsbwr] {
    margin-bottom: 1.25rem;
}

.schritte h3[b-g2f9nbsbwr] {
    margin-top: 0;
}

/* Was das Werkzeug nicht leistet — abgesetzt, aber nicht als Warnung gestaltet */
.grenzen[b-g2f9nbsbwr] {
    background: var(--akzent-hell);
    border-left: 4px solid var(--akzent);
    padding: 1.5rem 1.5rem 0.5rem;
    border-radius: 0 0.25rem 0.25rem 0;
}

.startseite section.grenzen[b-g2f9nbsbwr] {
    border-top: none;
}

.fragen dt[b-g2f9nbsbwr] {
    font-weight: 700;
    margin-top: 1.25rem;
}

.fragen dd[b-g2f9nbsbwr] {
    margin: 0.25rem 0 0;
}

.abschluss .konditionen[b-g2f9nbsbwr] {
    margin-top: 0.75rem;
}

@media (max-width: 30rem) {
    .startseite[b-g2f9nbsbwr] {
        padding: 1.5rem 1rem 3rem;
    }

    .startseite h1[b-g2f9nbsbwr] {
        font-size: 1.875rem;
    }

    .knopf[b-g2f9nbsbwr] {
        display: block;
        text-align: center;
    }
}

/* Ausblick auf die kostenpflichtige Version (Block E-2). Petrol wie alle Hinweiskästen —
   Bernstein bleibt echten Warnungen vorbehalten. */
.startseite .ausblick[b-g2f9nbsbwr] {
    margin: 1.5rem 0 0;
    padding: 0.875rem 1.125rem;
    background: var(--akzent-hell);
    border-left: 4px solid var(--akzent);
    font-size: 1rem;
    line-height: 1.6;
}

.startseite .ausblick strong[b-g2f9nbsbwr] {
    color: var(--akzent);
}

/* ── Erster Bildschirm ────────────────────────────────────────────────────────────────
   docs/GESTALTUNG_WEB.md Abschnitt 4. Links die Entscheidung, rechts der Beweis. */

/* Lesebreite je Abschnitt statt am Ganzen — der Heldenbereich darf breiter sein. */
.startseite > section[b-g2f9nbsbwr] {
    max-width: 44rem;
}

.startseite > .held[b-g2f9nbsbwr] {
    max-width: 68rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 3.5rem;
    align-items: start;
}

.held-text[b-g2f9nbsbwr] {
    max-width: 44rem;
}

/* Anlagenauswahl */
.auswahl[b-g2f9nbsbwr] {
    margin: 1.75rem 0;
}

.auswahl-frage[b-g2f9nbsbwr] {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--meta);
}

.plaketten[b-g2f9nbsbwr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plakette[b-g2f9nbsbwr] {
    display: inline-block;
    padding: 0.4375rem 0.9375rem;
    border: 1.5px solid var(--akzent);
    border-radius: 999px;
    color: var(--akzent);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
}

.plakette:hover[b-g2f9nbsbwr],
.plakette:focus-visible[b-g2f9nbsbwr] {
    background: var(--akzent);
    color: #fff;
}

/* Sichtbarer Fokus für die Tastaturbedienung — der Umriss muss auch auf der gefüllten
   Fläche erkennbar bleiben, deshalb abgesetzt statt direkt am Rand. */
.plakette:focus-visible[b-g2f9nbsbwr],
.startseite .knopf:focus-visible[b-g2f9nbsbwr] {
    outline: 3px solid var(--akzent);
    outline-offset: 3px;
}

.quellenzeile[b-g2f9nbsbwr] {
    margin: 1rem 0 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--linie);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--meta);
}

/* Produktabbildung */
.beweis[b-g2f9nbsbwr] {
    margin: 0;
}

.beweis img[b-g2f9nbsbwr] {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--linie);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1.75rem rgba(11, 79, 98, 0.14);
    background: #fff;
}

.beweis figcaption[b-g2f9nbsbwr] {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--meta);
}

/* Gestapelt, sobald zwei Spalten eng werden. Die Abbildung rutscht unter den Text und
   wird in der Breite begrenzt, damit sie auf dem Handy nicht die ganze Höhe frisst. */
@media (max-width: 60rem) {
    .startseite > .held[b-g2f9nbsbwr] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .beweis[b-g2f9nbsbwr] {
        max-width: 21rem;
    }
}

/* Signatur unter Abschnitt 6. Ein erkennbarer Mensch ist für kleine Betriebe ein starkes
   Vertrauenssignal — aber als Unterschrift, nicht als Überschrift. Deshalb abgesetzt und
   ruhiger als der Fließtext darüber. */
.signatur[b-g2f9nbsbwr] {
    margin-top: 1.5rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--linie);
    font-size: 0.9375rem;
    color: var(--meta);
}

.signatur a[b-g2f9nbsbwr] {
    color: var(--akzent);
}

/* Druckregel (docs/STARTSEITE_KORREKTUREN.md D-2): Browser drucken Hintergrundflächen
   standardmäßig nicht — der Petrol-Grund fällt weg und weiße Schrift bleibt auf weißem
   Papier übrig. Im Ausdruck bekommen Knöpfe und Plaketten deshalb Rahmen und dunkle
   Schrift. Für den Bildschirm ändert das nichts. */
@media print {
    .knopf[b-g2f9nbsbwr],
    .plakette[b-g2f9nbsbwr] {
        background: none !important;
        color: var(--tinte) !important;
        border: 1.5px solid var(--tinte);
    }
}

/* Verweis auf die Übersichtstabelle statt der früheren Sternchen-Fußnote (23.08.2026,
   docs/QUELLENBELEGE_FORM.md). Fünfzehn Fundstellen in einer Aufzählung zeigten, DASS es
   Quellen gibt, aber nicht, WOFÜR — die Zuordnung Zeile für Zeile leistet die Tabelle. */
.quellenverweis[b-g2f9nbsbwr] {
    font-size: 0.9375rem;
    color: var(--meta);
}

/* Begriffsblock (docs/AUFGABEN_BEGRIFFSRUNDE.md, 24.08.2026): eingerueckter Akzentkasten in
   der Familie von .grenzen und .ausblick. Bewusst kein eigener Abschnitt — er gehoert unter
   die Ueberschrift „Im Ernstfall zaehlt, was belegbar ist" und soll ihr nicht Konkurrenz
   machen. Eigenes Markup dieser Komponente, deshalb schlichte Selektoren ohne ::deep. */
.begriffe[b-g2f9nbsbwr] {
    margin: 1.75rem 0 0;
    padding: 1.125rem 1.25rem 0.25rem;
    background: var(--akzent-hell);
    border-left: 4px solid var(--akzent);
    border-radius: 0 0.25rem 0.25rem 0;
}

.begriffe h3[b-g2f9nbsbwr] {
    margin: 0 0 0.5rem;
}

.begriffe p:last-child[b-g2f9nbsbwr] {
    margin-bottom: 0.875rem;
}

/* Verweis auf den Prüffristen-Rechner unter den Plaketten (20.09.2026,
   docs/KLEINE_RUNDE_RECHNER.md Teil C). Text, kein Knopf. */
.held-rechnerverweis[b-g2f9nbsbwr] {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    color: var(--meta);
}

.held-rechnerverweis a[b-g2f9nbsbwr] {
    color: var(--akzent);
    font-weight: 700;
}

/* ── Der erste Bildschirm auf dem Handy (docs/STARTSEITE_HANDY.md, 21.09.2026) ──────────
   Befund: Bei 375 × 812 lag der Hauptknopf bei 901 px, die Bildschirmkante bei 812 — der
   Knopf war ohne Scrollen nicht zu sehen. Die Briefempfänger kommen per QR-Code, also genau
   von dort.

   REIHENFOLGE STATT ZWEITEM INHALT: Der Quelltext bleibt, wie er ist — erst die Plaketten,
   dann der Knopf; das liest sich auch ohne Gestaltung sinnvoll und ist das, was Vorlesewerkzeuge
   und Suchmaschinen bekommen. Auf schmalen Bildschirmen ordnet „order" die Reihenfolge um.
   Nichts wird doppelt ausgeliefert.

   ⚠️ „order" ändert nur die SICHTBARE Reihenfolge, nicht die der Tastatur und der Vorlesehilfe.
   Beides bleibt in Quelltextreihenfolge — deshalb darf hier nie etwas umgeordnet werden, das
   auseinanderfällt, wenn man es in Quelltextreihenfolge liest. Knopf und Konditionenzeile
   gehören zusammen und wandern zusammen.

   48 rem statt der bestehenden 30 rem: Auch ein liegendes Telefon und ein kleines Tablett
   profitieren; der Desktop bleibt unberührt. */
@media (max-width: 48rem) {
    .held-text[b-g2f9nbsbwr] {
        display: flex;
        flex-direction: column;
    }

    .held-text > h1[b-g2f9nbsbwr] { order: 1; }
    .held-text > .vorspann[b-g2f9nbsbwr] { order: 2; }
    .held-text > .knopf[b-g2f9nbsbwr] { order: 3; }
    .held-text > .konditionen[b-g2f9nbsbwr] { order: 4; }
    .held-text > .auswahl[b-g2f9nbsbwr] { order: 5; }       /* Frage, Plaketten und Rechnerverweis */
    .held-text > .quellenzeile[b-g2f9nbsbwr] { order: 6; }
    .held-text > .ausblick[b-g2f9nbsbwr] { order: 7; }

    /* Im Flex-Behälter fallen aneinandergrenzende Abstände nicht mehr zusammen; die Maße
       stehen deshalb hier ausdrücklich, statt sich aus zwei Rändern zu ergeben. */
    .startseite h1[b-g2f9nbsbwr] {
        margin: 0 0 0.625rem;
        font-size: 1.75rem;
    }

    .held-text > .vorspann[b-g2f9nbsbwr] {
        margin: 0 0 1rem;
        font-size: 1.0625rem;   /* 17 px — über der Lesbarkeitsgrenze von 16 px */
        line-height: 1.5;
    }

    .held-text > .knopf[b-g2f9nbsbwr] {
        margin: 0;
        padding: 0.8125rem 1.5rem;
    }

    .held-text > .konditionen[b-g2f9nbsbwr] {
        margin: 0.5rem 0 0;
        font-size: 0.9375rem;
    }

    .held-text > .auswahl[b-g2f9nbsbwr] {
        margin: 1.5rem 0 0;
    }

    /* Plaketten kompakter, damit sieben Stück in drei Zeilen passen — ohne waagerechtes
       Scrollen und ohne dass eine Zeile abgeschnitten wird. */
    .plaketten[b-g2f9nbsbwr] {
        gap: 0.375rem;
    }

    .plakette[b-g2f9nbsbwr] {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .held-rechnerverweis[b-g2f9nbsbwr] {
        margin-top: 0.625rem;
    }
}
/* /Components/Shared/ZurueckZumPlan.razor.rz.scp.css */
.zurueck-leiste[b-0d8eqmhxxe] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    max-width: 44rem;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    background: var(--akzent-hell);
    border-bottom: 1px solid var(--linie);
    font-size: 0.9375rem;
}

.zurueck-leiste a[b-0d8eqmhxxe] {
    color: var(--akzent);
    font-weight: 700;
    text-decoration: none;
}

.zurueck-leiste a:hover[b-0d8eqmhxxe] {
    text-decoration: underline;
}

.zurueck-leiste span[b-0d8eqmhxxe] {
    color: var(--meta);
}