/* termin.email — Basis-Design. System-Schriften, keine externen Ressourcen
   (Leitplanke 1). Kontraste mind. 4,5:1, sichtbare Fokus-Ringe (Kap. 9a). */

:root {
    --farbe-text: #1a1a1a;
    --farbe-hintergrund: #f7f7f5;
    --farbe-flaeche: #ffffff;
    --farbe-primaer: #1d4ed8;
    --farbe-primaer-dunkel: #1e40af;
    --farbe-rand: #d4d4d0;
    /* Rand interaktiver Bedienelemente (Eingaben, Sekundär-Buttons): dunkler,
       damit der Ruhe-Zustand die 3:1-Schwelle für Nicht-Text-Kontrast erfüllt
       (WCAG 2.1 AA 1.4.11) — #808080 = 3,95:1 auf Weiß / 3,65:1 auf #f7f7f5. */
    --farbe-rand-eingabe: #808080;
    --farbe-fehler-text: #8f1d1d;
    --farbe-fehler-flaeche: #fdeaea;
    --farbe-erfolg-text: #14532d;
    --farbe-erfolg-flaeche: #e7f6ec;
    --radius: 7px;
    --radius-flaeche: 12px;
    --schatten-flaeche: 0 10px 28px rgba(29, 45, 74, 0.07);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    line-height: 1.55;
}

h1,
h2,
h3 {
    line-height: 1.18;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem;
}

/* Fokus niemals unterdrücken (Kap. 9a.5) */
:focus-visible {
    outline: 3px solid var(--farbe-primaer);
    outline-offset: 2px;
}

/* Sprung-Link (Kap. 9a): erster Tab-Stopp auf jeder Seite, überspringt die
   Kopf-Navigation. Unsichtbar bis zum Fokus, dann sichtbar oben links. */
.sprung-link {
    position: absolute;
    left: 0.5rem;
    top: -3rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--farbe-primaer);
    color: #ffffff;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    transition: top 0.15s ease-in-out;
}

.sprung-link:focus {
    top: 0.5rem;
}

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

/* Kopfzeile */
.kopf {
    background: var(--farbe-flaeche);
    border-bottom: 1px solid var(--farbe-rand);
}

.kopf__innen {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.kopf__menue {
    flex: 1 1 auto;
    min-width: 0;
}

.kopf__menue > summary {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    cursor: pointer;
    color: var(--farbe-text);
    font-weight: 600;
}

.kopf__menue:not([open]) > .kopf__nav {
    display: none;
}

.kopf__menue[open] > .kopf__nav {
    display: flex;
}

.kopf__menue--marketing {
    display: none;
}

.kopf__nav--desktop {
    flex: 1 1 auto;
    justify-content: center;
}

.kopf__marke {
    font-weight: 700;
}

.kopf__nav {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.kopf__nav a {
    color: var(--farbe-text);
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}

.kopf__nav a:hover,
.kopf__nav a[aria-current="page"] {
    border-bottom-color: var(--farbe-primaer);
}

.kopf__logout {
    margin-left: auto;
}

/* Karten und Formulare */
.karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-flaeche);
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: var(--schatten-flaeche);
}

.karte--schmal {
    max-width: 26rem;
    margin: 3rem auto;
}

.feld {
    margin-bottom: 1rem;
}

.feld label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.feld .label--inline {
    display: inline;
    font-weight: 400;
}

.feld input[type="time"],
.feld input[type="date"],
.feld input[type="number"] {
    width: auto;
}

.feld input,
.feld select,
.feld textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font: inherit;
    color: var(--farbe-text);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand-eingabe);
    border-radius: var(--radius);
}

.feld__hinweis {
    font-size: 0.875rem;
    color: #4b4b47;
    margin: 0.25rem 0 0;
}

fieldset {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    margin: 1rem 0;
    padding: 1rem;
}

.formular-felder {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    font-weight: 600;
    padding: 0 0.4rem;
}

/* Knöpfe */
.knopf {
    display: inline-block;
    padding: 0.55rem 1.2rem;
    font: inherit;
    font-weight: 600;
    color: #ffffff;
    background: var(--farbe-primaer);
    border: 1px solid var(--farbe-primaer);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.knopf:hover {
    background: var(--farbe-primaer-dunkel);
}

.knopf:active {
    transform: translateY(1px);
}

.knopf--schlicht {
    color: var(--farbe-text);
    background: transparent;
    border-color: var(--farbe-rand-eingabe);
    font-weight: 400;
}

.knopf--schlicht:hover {
    background: var(--farbe-hintergrund);
}

.knopf--gefahr {
    color: var(--farbe-fehler-text);
    background: transparent;
    border-color: var(--farbe-fehler-text);
    font-weight: 400;
}

.knopf--gefahr:hover {
    background: var(--farbe-fehler-flaeche);
}

/* Meldungen */
.meldung {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid;
}

.meldung--fehler {
    color: var(--farbe-fehler-text);
    background: var(--farbe-fehler-flaeche);
    border-color: var(--farbe-fehler-text);
}

.meldung--erfolg {
    color: var(--farbe-erfolg-text);
    background: var(--farbe-erfolg-flaeche);
    border-color: var(--farbe-erfolg-text);
}

.meldung--hinweis {
    color: #27364b;
    background: #edf3fb;
    border-color: #42668f;
}

/* In der Support-Impersonation bleiben Links zur Navigation nutzbar, alle
   echten Formularfelder werden durch das disabled-Fieldset semantisch und
   per Tastatur deaktiviert. */
.readonly-scope {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.readonly-scope :is(input, select, textarea, button):disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.fehlerseite {
    min-height: 100dvh;
    display: grid;
    place-items: center;
}

.fehlerseite__inhalt {
    width: 100%;
}

.fehlerseite__karte {
    text-align: center;
}

.fehlerseite__code {
    color: var(--farbe-primaer-dunkel);
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (max-width: 48rem) {
    .kopf__innen {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem 1rem;
    }

    .kopf__marke {
        align-self: center;
    }

    .kopf__logout {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
    }

    .kopf__menue {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .kopf__menue > summary {
        display: inline-block;
        cursor: pointer;
        color: var(--farbe-text);
        font-weight: 600;
        padding: 0.45rem 0;
    }

    .kopf__menue > summary::marker {
        color: var(--farbe-primaer);
    }

    .kopf__menue:not([open]) > .kopf__nav {
        display: none;
    }

    .kopf__menue[open] > .kopf__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem 1rem;
        padding: 0.65rem 0 0.25rem;
    }

    .kopf__nav a {
        padding: 0.45rem 0;
    }

    .container {
        padding-inline: 1rem;
    }

    .karte {
        padding: 1.15rem;
    }
}

@media (max-width: 25rem) {
    .kopf__menue[open] > .kopf__nav {
        grid-template-columns: 1fr;
    }
}

/* Tabellen */
.tabelle {
    width: 100%;
    border-collapse: collapse;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
}

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

.tabelle th {
    background: var(--farbe-hintergrund);
}

.tabelle__aktionen {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.tabelle__aktionen form {
    display: inline;
}

/* Abstand zum vorangehenden Formular (ersetzt ein inline style, das die CSP verwirft) */
.tabelle__aktionen--abstand {
    margin-top: 1rem;
}

/* Waagerecht scrollbarer Rahmen für breite Tabellen (Reflow, WCAG 1.4.10) */
.tabelle-scroll {
    overflow-x: auto;
}

/* Lange Adressen und einmalig gezeigte Geheimnisse brechen an jeder Stelle um.
   .feed-adresse trägt den API-Token (67 Zeichen), das Webhook-Secret (64 Hexzeichen)
   und die Kalender-Feed-Adresse; die Klasse stand seit 4c0d214 in drei Vorlagen, ohne
   dass es je eine Regel dazu gab. Hexzeichen sind nach UAX 14 durchgehend Klasse AL,
   bieten dem Browser also keine einzige Umbruchgelegenheit. Gemessen am 11.09.2026 mit
   einem 64-stelligen Secret bei 375 px Fenster: ohne die Regel 598 px Dokumentbreite
   gegen 375 px sichtbar, der Wert allein 563 px breit, also eine waagerechte
   Bildlaufleiste über die ganze Seite; mit der Regel 375 gegen 375 und 299 px
   Wertbreite. `anywhere` statt `break-word`, weil nur `anywhere` auch in die
   Mindestbreite des Behälters eingeht. Dieselbe Begründung wie bei den Slugs
   unter .tabelle code. */
.url-link,
.feed-adresse {
    overflow-wrap: anywhere;
}

/* Slugs in Tabellen dürfen brechen. Ein Slug ist ein einziges langes Wort, und die Tabelle
   nimmt seine volle Länge als Mindestbreite der Spalte. Gemessen am 09.09.2026 bei 1024 px
   Fenster mit /physiotherapiestadtparknord/erstgespraechneuepatienten in der Terminartenliste:
   Dokument 1031 px breit gegen 1009 px sichtbar, also eine waagerechte Bildlaufleiste über die
   ganze Seite; mit dieser Regel 1009 gegen 1009. Bindestriche im Slug versteckten den Fehler
   bisher, weil der Browser dort von sich aus umbricht. Nur in Tabellen, der Einbettungs-Code
   unter .embed-code soll weiter unverändert stehen bleiben. */
.tabelle code {
    overflow-wrap: anywhere;
}

/* WCAG-Konformitätsseite (VPAT-Stil) */
.konformitaet__hinweis {
    padding: 0.8rem 1rem;
    border-left: 4px solid var(--farbe-primaer);
    background: var(--farbe-hintergrund);
    border-radius: var(--radius);
}

.konformitaet__summe {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
}

.konformitaet__summe li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.konformitaet__tabelle .konformitaet__nr {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.konformitaet__tabelle .konformitaet__krit {
    min-width: 11rem;
    font-weight: 600;
}

.konformitaet__tabelle .konformitaet__anm {
    font-size: 0.9rem;
    min-width: 20rem;
}

/* Kennzahlen (Admin-Dashboard) */
.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    margin: 1rem 0;
    padding: 0;
}

.kennzahl {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: 1rem;
}

.kennzahl dt {
    font-size: 0.875rem;
    color: #4b4b47;
}

.kennzahl dd {
    margin: 0.25rem 0 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.kennzahl--warnung {
    border-color: var(--farbe-fehler-text);
    background: var(--farbe-fehler-flaeche);
}

/* Embed-Widget: schlanker iframe-Inhalt + Code-Schnipsel */
.container--embed {
    max-width: 100%;
    padding: 0.75rem;
}

body.embed {
    background: transparent;
}

.embed-code {
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: 0.75rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.85rem;
}

/* Zwei-Faktor: QR-Code + Klartext-Schlüssel */
.qr {
    margin: 0.5rem 0;
}

.qr svg {
    width: 220px;
    height: 220px;
    max-width: 100%;
}

.secret {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    letter-spacing: 0.15em;
    font-size: 1.05rem;
}

/* Buchungs-Fragen-Editor (Terminart) + Antworten-Anzeige */
.frage-zeile {
    margin-bottom: 0.75rem;
}

.antworten {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
}

.antworten dt {
    font-weight: 600;
    color: #4b4b47;
}

.antworten dd {
    margin: 0 0 0.35rem;
}

/* Status-Badges (Systemstatus im Admin-Dashboard) */
.status {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: var(--radius);
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: 600;
    vertical-align: middle;
}

.rechtstext-vorschau {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.9375rem;
}

.status__zeit {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

.status--ok {
    color: var(--farbe-erfolg-text);
    background: var(--farbe-erfolg-flaeche);
    border-color: var(--farbe-erfolg-text);
}

.status--warnung {
    color: #7a4d00;
    background: #fdf3e0;
    border-color: #7a4d00;
}

.status--fehler {
    color: var(--farbe-fehler-text);
    background: var(--farbe-fehler-flaeche);
    border-color: var(--farbe-fehler-text);
}

/* Neutral/„nicht anwendbar" — bewusst gedämpft, aber Rahmen-/Textkontrast > 4,5:1 */
.status--neutral {
    color: #3d3d3a;
    background: #ededea;
    border-color: #3d3d3a;
}

/* Startseite / Werbeseite */
.held {
    text-align: center;
    padding: 4rem 1rem 3rem;
}

.held__claim {
    font-size: 1.25rem;
    max-width: 40rem;
    margin: 0.75rem auto 1.5rem;
}

.held__abzeichen {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: var(--farbe-erfolg-flaeche);
    color: var(--farbe-erfolg-text);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.held__cta {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Nur für Screenreader */
.sr-nur {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hinweis {
    color: #4b4b47;
}

/* Öffentliche Buchungsstrecke */
.fuss {
    margin-top: 3rem;
    padding: 1rem 0;
    border-top: 1px solid var(--farbe-rand);
    background: var(--farbe-flaeche);
    font-size: 0.9rem;
}

.fuss a {
    color: var(--farbe-text);
}

.fuss__hinweis {
    color: #4b4b47;
    margin: 0.5rem 0 0;
}

.terminarten {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.terminarten h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.terminarten li {
    margin: 1rem 0;
}

.terminart-karte {
    display: block;
    color: var(--farbe-text);
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.terminart-karte:hover {
    border-color: var(--farbe-primaer);
    box-shadow: 0 16px 34px rgba(23, 79, 69, 0.16);
    transform: translateY(-2px);
}

/* Fokusring der Terminart-Karten. Bis 09.09.2026 stand hier var(--farbe-fokus), eine nie
   deklarierte Variable: die Regel gewann die Kaskade gegen :focus-visible und fiel dann auf
   outline-style: none zurueck, der Ring verschwand ganz. Jetzt dieselbe Farbe wie global. */
.terminart-karte:focus-visible {
    outline: 3px solid var(--farbe-primaer);
    outline-offset: 3px;
}

.zeitzonen-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.zeitzonen-form select {
    max-width: 16rem;
    padding: 0.35rem 0.5rem;
    font: inherit;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
}

.kalender-bereich {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(12rem, 2fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 44rem) {
    .kalender-bereich {
        grid-template-columns: 1fr;
    }
}

.kalender {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: 1rem;
}

.kalender__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.kalender__kopf h2 {
    margin: 0;
    font-size: 1.1rem;
}

.kalender__tabelle {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.kalender__tabelle th {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.3rem 0;
    text-align: center;
}

.kalender__tabelle th abbr {
    text-decoration: none;
}

.kalender__tabelle td {
    text-align: center;
    padding: 0.15rem;
}

.kalender__tag {
    width: 100%;
    min-height: 2.75rem;
    font: inherit;
    font-weight: 600;
    color: var(--farbe-primaer-dunkel);
    background: #eef2fe;
    border: 1px solid var(--farbe-primaer);
    border-radius: var(--radius);
    cursor: pointer;
}

@media (max-width: 44rem) {
    .kalender__tabelle td {
        padding-inline: 0.0625rem;
    }
}

.kalender__tag:hover {
    background: var(--farbe-primaer);
    color: #ffffff;
}

.kalender__tag--gewaehlt {
    background: var(--farbe-primaer);
    color: #ffffff;
}

.kalender__leer {
    display: inline-block;
    min-height: 2.5rem;
    line-height: 2.5rem;
    color: #6b6b66;
}

.kalender__fremd {
    visibility: hidden;
}

.slots {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: 1rem;
}

.slots h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.slots__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.slots__liste .knopf {
    display: block;
    width: 100%;
    text-align: center;
}

/* Details der Buchung (Verwaltungsseite) */
.details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0;
}

.details dt {
    font-weight: 600;
}

.details dd {
    margin: 0;
}

.rechtstext {
    white-space: normal;
    overflow-wrap: break-word;
}

/* Honeypot (Kap. 7.5): visuell und für Tastatur unerreichbar,
   aria-hidden hält Screenreader fern — display:none würde Bots warnen. */
.honigtopf {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Gruppentermin (Kap. 7.7): dezente Rest-Platz-Anzeige. Sie steht IM Slot-Knopf,
   also auf der Primärfarbe des Mandanten. Eine Deckkraft unter 1 tönte die
   Beschriftung zur Fläche hin ab und nahm ihr genau den Kontrast, den der Server
   beim Speichern der Farbe erzwingt: 0.8 auf #0d6efd ergab 3,17:1 statt 4,13:1
   (gemessen 10.09.2026). Dezent bleibt sie über Schriftgrad und Schriftschnitt. */
.slots__frei {
    display: block;
    font-size: 0.8em;
    font-weight: normal;
}

.gruppe-hinweis {
    font-size: 0.9em;
    opacity: 0.85;
}

/* Statistik-Dashboard (Kap. 5) */
.kpi-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.kpi {
    flex: 1 1 8rem;
    text-align: center;
}
.kpi__wert {
    display: block;
    font-size: 2rem;
    font-weight: bold;
}
.kpi__label {
    display: block;
    font-size: 0.9em;
    opacity: 0.85;
}
.stat-tabelle th[scope="row"] {
    white-space: nowrap;
    font-weight: normal;
    text-align: left;
}
.stat-tabelle meter {
    width: 100%;
    min-width: 8rem;
}
.stat-tabelle td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Werbeseite (Kap. 5): Vertrauens-Abschnitt, Feature-Gitter, Preiskarten, FAQ */
.merkmal-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.merkmal-gitter .karte h3 {
    margin-top: 0;
}

.vertrauen-leiste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.vertrauen-karte {
    border-left: 4px solid var(--farbe-erfolg-text);
}

.vertrauen-karte h3 {
    margin-top: 0;
    font-size: 1.1rem;
}

.preis-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.preis-karte h2 {
    margin-top: 0;
}

.preis-karte__preis {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0.5rem 0 0.15rem;
}

/* Nettopreis nur als kleine Zusatzangabe unter dem maßgeblichen Bruttopreis (PAngV). */
.preis-karte__netto {
    font-size: 0.85rem;
    color: #4b4b47;
    margin: 0 0 0.75rem;
}

.preis-karte__hinweis {
    font-weight: 600;
    font-size: 1.1rem;
}

.preis-differenzierung {
    border-left: 4px solid var(--farbe-erfolg-text);
    background: var(--farbe-erfolg-flaeche);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin: 2rem 0;
}

.preis-differenzierung h2 {
    margin-top: 0;
}

.faq-eintrag {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: 0.25rem 1.25rem;
    margin: 0.75rem 0;
}

.faq-eintrag summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.75rem 0;
}

.faq-eintrag p {
    margin: 0 0 0.9rem;
}

/* Dunkler Marketing-Footer — eigene, gegen den dunklen Hintergrund geprüfte
   Kontraste (nicht die globalen hellen Farbvariablen, siehe CHANGELOG). */
.fuss-marketing {
    --mk-hintergrund: #12151a;
    --mk-text: #f5f5f5;
    --mk-akzent: #8be05a;
    --mk-gedaempft: #b8b8b8;
    --mk-abzeichen: #262b33;
    margin-top: 3rem;
    padding: 2.5rem 0 1.5rem;
    background: var(--mk-hintergrund);
    color: var(--mk-text);
}

.fuss-marketing :focus-visible {
    outline-color: #ffffff;
}

.fuss-marketing__spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 2rem;
}

.fuss-marketing__spalte {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fuss-marketing__spalte h2 {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mk-akzent);
}

.fuss-marketing__spalte a,
.fuss-marketing__spalte p {
    color: var(--mk-text);
    text-decoration: none;
    margin: 0;
}

.fuss-marketing__spalte a:visited {
    color: var(--mk-text);
}

.fuss-marketing__spalte a:hover {
    text-decoration: underline;
}

.fuss-marketing__ki-hinweis {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 2rem 0 0;
    color: var(--mk-gedaempft);
    font-size: 0.85rem;
}

.fuss-marketing__ki-abzeichen {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--mk-abzeichen);
    color: var(--mk-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fuss-marketing__copyright {
    margin: 1rem 0 0;
    color: var(--mk-gedaempft);
    font-size: 0.85rem;
}

/* Read-only-Impersonation-Banner (Kap. 5) */
.impersonation-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #8a4b00;
    color: #fff;
    font-weight: bold;
}
.impersonation-banner .knopf {
    background: #fff;
    color: #8a4b00;
}

/* Visuelles System 2026: warmer, ruhiger und eigenständig – weiterhin ohne
   externe Laufzeitressourcen. Die nativen Schriften sind bewusst gewählt. */
:root {
    --farbe-text: #16312c;
    --farbe-hintergrund: #f4f1e8;
    --farbe-flaeche: #fffdf8;
    --farbe-primaer: #174f45;
    --farbe-primaer-dunkel: #103a33;
    --farbe-rand: #d6d2c7;
    --farbe-rand-eingabe: #6f7874;
    --radius: 10px;
    --radius-flaeche: 22px;
    --schatten-flaeche: 0 24px 60px rgba(23, 79, 69, 0.09);
    --font-anzeige: "Avenir Next", Aptos, "Trebuchet MS", sans-serif;
    --font-text: Aptos, "Segoe UI", system-ui, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    font-family: var(--font-text);
    background-color: var(--farbe-hintergrund);
    background-image:
        radial-gradient(circle at 88% 0%, rgba(205, 226, 211, 0.62), transparent 27rem),
        radial-gradient(circle at 4% 42%, rgba(255, 253, 248, 0.95), transparent 24rem);
}

h1,
h2,
h3 {
    font-family: var(--font-anzeige);
    color: #102f2a;
}

h1 {
    font-size: clamp(2.45rem, 6vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

h2 {
    font-size: clamp(1.8rem, 3.6vw, 3.1rem);
    letter-spacing: -0.045em;
}

p {
    max-width: 65ch;
}

.container {
    width: min(100%, 76rem);
    max-width: 76rem;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

main.container {
    padding-top: clamp(1.25rem, 3vw, 2.5rem);
    padding-bottom: clamp(3rem, 7vw, 7rem);
}

.kopf {
    position: relative;
    z-index: 20;
    background: rgba(255, 253, 248, 0.9);
    border-color: rgba(23, 79, 69, 0.16);
    backdrop-filter: blur(16px);
}

.kopf__innen {
    min-height: 4.75rem;
    flex-wrap: nowrap;
}

.kopf__marke {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: #102f2a;
    font-family: var(--font-anzeige);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.marke__zeichen {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: #f8f5ed;
    background: var(--farbe-primaer);
    border-radius: 0.7rem;
    font-size: 1.15rem;
    letter-spacing: -0.08em;
}

.kopf__nav {
    align-items: center;
    justify-content: center;
    gap: clamp(0.8rem, 2.2vw, 1.65rem);
}

.kopf__nav a {
    padding: 0.55rem 0;
    font-weight: 550;
    border-bottom-width: 1px;
}

.knopf {
    padding: 0.72rem 1.35rem;
    border-radius: 0.7rem;
    box-shadow: 0 8px 20px rgba(23, 79, 69, 0.13);
}

.knopf:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(23, 79, 69, 0.18);
}

.knopf:active {
    transform: translateY(1px) scale(0.99);
}

.knopf--schlicht {
    box-shadow: none;
}

.knopf--block {
    width: 100%;
    text-align: center;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--farbe-primaer-dunkel);
    font-weight: 650;
    text-underline-offset: 0.22em;
}

.karte {
    border-color: rgba(23, 79, 69, 0.1);
    box-shadow: var(--schatten-flaeche);
}

.feld input,
.feld select,
.feld textarea {
    min-height: 2.85rem;
    padding: 0.72rem 0.82rem;
    background: #fff;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
    border-color: var(--farbe-primaer);
    box-shadow: 0 0 0 4px rgba(23, 79, 69, 0.12);
}

.held {
    text-align: left;
}

.held--start {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: center;
    min-height: min(48rem, calc(100dvh - 8rem));
    padding: clamp(3rem, 8vw, 7.5rem) 0 clamp(4rem, 10vw, 8rem);
}

.held__text h1 {
    max-width: 11.5ch;
    margin: 0.25rem 0 1.25rem;
}

.held__kicker,
.produktvorschau__label {
    margin: 0;
    color: var(--farbe-primaer);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.held__claim {
    max-width: 38rem;
    margin: 0 0 1.8rem;
    color: #31534d;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.held__cta {
    justify-content: flex-start;
    align-items: center;
    gap: 1.2rem;
}

.held__abzeichen {
    display: block;
    max-width: 44rem;
    margin: 1.55rem 0 0;
    padding: 0;
    color: #47625d;
    background: none;
    font-size: 0.86rem;
    font-weight: 550;
}

.produktvorschau {
    position: relative;
    padding: clamp(1.4rem, 4vw, 2.25rem);
    color: #f8f5ed;
    background: #103a33;
    border-radius: 2rem 2rem 2rem 0.6rem;
    box-shadow: 0 38px 80px rgba(16, 58, 51, 0.2);
    transform: rotate(1.2deg);
}

.produktvorschau::before {
    position: absolute;
    inset: 0.75rem;
    border: 1px solid rgba(248, 245, 237, 0.13);
    border-radius: 1.5rem 1.5rem 1.5rem 0.3rem;
    content: "";
    pointer-events: none;
}

.produktvorschau__label {
    position: relative;
    color: #c9ef72;
}

.produktvorschau ol {
    position: relative;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.produktvorschau li {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0.8rem;
    align-items: baseline;
    padding: 1.05rem 0;
    border-top: 1px solid rgba(248, 245, 237, 0.18);
}

.produktvorschau li span {
    color: #c9ef72;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

.produktvorschau li strong {
    font-family: var(--font-anzeige);
    font-size: 1.05rem;
}

/* Nur die Werbeseiten: bis 09.09.2026 trafen diese beiden Regeln jede <section class="karte">
   im Kundenbereich und in der Verwaltung und rissen dort Abstaende von bis zu 9 rem auf
   (Gauntlet-Fund, Beleg u. a. app/einstellungen.twig, app/nutzer.twig, admin/dashboard.twig). */
body.marketing main > section:not(.held--start) {
    margin-top: clamp(4.5rem, 10vw, 9rem);
}

body.marketing main > section > h2 {
    max-width: 18ch;
}

.vertrauen-leiste {
    grid-template-columns: 1.35fr 0.65fr;
    gap: 1rem;
}

.vertrauen-karte {
    min-height: 15rem;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.3rem);
    background: #e1ebe3;
    border: 0;
    border-radius: 1.5rem;
}

.vertrauen-karte--gross {
    grid-row: span 2;
    min-height: 31rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.vertrauen-karte--gross p {
    font-size: 1.08rem;
}

.vertrauen-karte--dunkel {
    color: #f8f5ed;
    background: #174f45;
}

.vertrauen-karte--dunkel h3 {
    color: #fff;
}

.merkmal-gitter {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.merkmal {
    grid-column: span 4;
    min-height: 13rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: rgba(255, 253, 248, 0.8);
    border-radius: 1.4rem;
}

.merkmal--gross {
    grid-column: span 8;
    background: #dce9df;
}

.merkmal--breit {
    grid-column: span 6;
    background: #eee8da;
}

.merkmal h3 {
    margin-top: 0;
}

.held--abschluss {
    padding: clamp(2rem, 6vw, 5rem);
    color: #f8f5ed;
    background: #103a33;
    border-radius: 2rem 2rem 0.6rem 2rem;
}

.held--abschluss h2 {
    color: #fff;
}

.held--abschluss .held__claim {
    margin-inline: 0;
    color: #dce9df;
}

.fuss-marketing {
    --mk-hintergrund: #0c2d27;
    --mk-akzent: #c9ef72;
    margin-top: 0;
    padding-top: 4rem;
}

.fuss-marketing__marke {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.fuss-marketing__marke p {
    margin: 0;
}

.fuss-marketing__spalten {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 2.5rem;
}

.auth-seite {
    background-image:
        radial-gradient(circle at 8% 12%, rgba(201, 239, 114, 0.32), transparent 24rem),
        radial-gradient(circle at 92% 80%, rgba(205, 226, 211, 0.85), transparent 28rem);
}

.auth-kopf {
    display: flex;
    width: min(100% - 2rem, 76rem);
    margin: 0 auto;
    padding: 1.25rem 0;
    align-items: center;
    justify-content: space-between;
}

.auth-shell {
    display: grid;
    grid-template-columns: 1fr minmax(20rem, 28rem);
    gap: clamp(2rem, 8vw, 8rem);
    align-items: center;
    min-height: calc(100dvh - 11rem);
}

.auth-einleitung h1 {
    margin: 0.4rem 0 1rem;
}

.auth-einleitung p:last-child {
    color: #31534d;
    font-size: 1.1rem;
}

.auth-formular {
    max-width: none;
    margin: 0;
    padding: clamp(1.5rem, 4vw, 2.4rem);
}

.leerzustand {
    display: grid;
    min-height: 10rem;
    margin: 1.5rem 0;
    padding: 2rem;
    place-items: center;
    text-align: center;
    color: #47625d;
    background: rgba(220, 233, 223, 0.62);
    border: 1px dashed rgba(23, 79, 69, 0.35);
    border-radius: 1.25rem;
}

@media (max-width: 52rem) {
    .kopf__innen {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 4.25rem;
        gap: 0.55rem 0.8rem;
    }

    .kopf__logout {
        grid-column: 2;
        grid-row: 1;
    }

    .kopf__menue {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .kopf__menue--marketing {
        display: block;
    }

    .kopf__nav--desktop {
        display: none;
    }

    .kopf__menue > summary {
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
        color: var(--farbe-primaer-dunkel);
    }

    .kopf__menue:not([open]) > .kopf__nav {
        display: none;
    }

    .kopf__menue[open] > .kopf__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-bottom: 0.8rem;
    }

    .held--start {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 2.75rem;
    }

    .held__text h1 {
        max-width: 12ch;
    }

    .produktvorschau {
        max-width: 32rem;
        transform: none;
    }

    .merkmal {
        grid-column: span 6;
    }

    .merkmal--gross,
    .merkmal--breit {
        grid-column: span 12;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 1.5rem;
        padding-top: 2rem;
    }

    .auth-einleitung h1 {
        font-size: clamp(2.4rem, 12vw, 4rem);
    }
}

@media (min-width: 52.001rem) {
    .held--start {
        min-height: calc(100dvh - 5.2rem);
        gap: clamp(2.5rem, 5vw, 5rem);
        padding-block: clamp(2.75rem, 4.5vw, 4rem);
    }

    .held__text h1 {
        max-width: 13ch;
        font-size: clamp(3.5rem, 5.1vw, 4.65rem);
    }
}

@media (max-width: 38rem) {
    h1 {
        font-size: clamp(2.35rem, 12vw, 3.4rem);
        line-height: 1.01;
    }

    main.container {
        padding-top: 0.75rem;
    }

    .kopf__logout .knopf {
        padding: 0.52rem 0.72rem;
        font-size: 0.88rem;
    }

    .held--start {
        gap: 2.3rem;
        padding-top: 2.2rem;
        padding-bottom: 3rem;
    }

    .held__claim {
        margin-bottom: 1.35rem;
    }

    .held__cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.9rem;
    }

    .held__abzeichen {
        margin-top: 1.25rem;
    }

    .produktvorschau {
        padding: 1.35rem;
        border-radius: 1.4rem 1.4rem 1.4rem 0.5rem;
    }

    .vertrauen-leiste {
        grid-template-columns: 1fr;
    }

    .vertrauen-karte,
    .vertrauen-karte--gross {
        min-height: auto;
        grid-row: auto;
    }

    .merkmal-gitter {
        grid-template-columns: 1fr;
    }

    .merkmal,
    .merkmal--gross,
    .merkmal--breit {
        grid-column: auto;
        min-height: auto;
    }

    .held--abschluss {
        margin-inline: -0.2rem;
        padding: 1.6rem;
        border-radius: 1.4rem 1.4rem 0.5rem 1.4rem;
    }

    .auth-kopf {
        align-items: flex-start;
    }

    .auth-kopf .text-link {
        max-width: 8rem;
        text-align: right;
    }
}

/* Go-Live-Review 2026-09-02: Embed-Fußzeile mit Rechtslinks (B17), Mandanten-Logo (B8), Sprachumschalter (L3) */
.fuss--embed {
    margin-top: 1.5rem;
    padding: 0.75rem;
    background: transparent;
    font-size: 0.85rem;
}

.kopf__logo {
    display: block;
    height: 3rem;
    width: auto;
    object-fit: contain;
}

.embed__kopf {
    padding-bottom: 0;
}

.embed__kopf .kopf__logo {
    height: 2.5rem;
}

.kopf__sprache {
    flex: 0 0 auto;
    font-size: 0.9rem;
    gap: 0.4rem;
}

@media (max-width: 48rem) {
    .kopf__sprache {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------------------------------
   Richtung A „Editorial Klarheit" (Betreiberentscheidung 2026-09-03):
   Nolte Headline für Überschriften, Ubuntu für den Text, warmes Papier,
   ein Akzent (Dunkelgrün + Limette), Pillen-Knöpfe, ruhige Flächen.
   Beide Schriften liegen selbst gehostet unter /assets/fonts (Leitplanke 1).
   ------------------------------------------------------------------------ */
@font-face {
    font-family: "Nolte Headline";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/nolte-headline.woff2") format("woff2");
}

@font-face {
    font-family: "Nolte Headline";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/nolte-headline-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/ubuntu-400.woff2") format("woff2");
}

@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/ubuntu-500.woff2") format("woff2");
}

@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/ubuntu-700.woff2") format("woff2");
}

:root {
    --farbe-text: #16312c;
    --farbe-text-leise: #4c5a55;
    --farbe-hintergrund: #f6f2e9;
    --farbe-flaeche: #fffdf8;
    --farbe-rand: #e2dccd;
    --farbe-limette: #c9ef72;
    --farbe-limette-flaeche: #edf6e0;
    --radius: 10px;
    --radius-flaeche: 20px;
    --schatten-flaeche: 0 30px 60px -40px rgba(22, 49, 44, 0.35);
    --font-anzeige: "Nolte Headline", Georgia, "Times New Roman", serif;
    --font-text: Ubuntu, "Segoe UI", system-ui, sans-serif;
}

body {
    background-image: none;
    color: var(--farbe-text);
}

h1,
h2,
h3 {
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--farbe-text);
}

h1 {
    font-size: clamp(2.6rem, 6.4vw, 6rem);
    line-height: 0.98;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.04;
}

h3 {
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    line-height: 1.15;
}

strong {
    font-weight: 700;
}

/* Kopfzeile */
.kopf {
    background: rgba(246, 242, 233, 0.92);
    border-bottom: 1px solid var(--farbe-rand);
}

.kopf__marke {
    font-family: var(--font-text);
    font-size: 1.15rem;
    font-weight: 700;
}

.kopf__marke .marke__logo {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
}

.kopf__nav a {
    font-weight: 500;
    color: var(--farbe-text);
}

.kopf__logout .knopf--schlicht {
    padding: 0.7rem 1.25rem;
    border: 1.5px solid var(--farbe-text);
    border-radius: 999px;
    color: var(--farbe-text);
    background: transparent;
    font-weight: 500;
}

.kopf__logout .knopf--schlicht:hover {
    background: var(--farbe-text);
    color: var(--farbe-hintergrund);
}

/* Knöpfe als Pillen */
.knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    background: var(--farbe-primaer);
    color: #f8f5ed;
    font-family: var(--font-text);
    font-size: 1.05rem;
    font-weight: 500;
    box-shadow: none;
}

.knopf:hover {
    background: var(--farbe-primaer-dunkel);
    transform: translateY(-1px);
    box-shadow: none;
}

.knopf .icon--pfeil {
    color: var(--farbe-limette);
}

.knopf--schlicht {
    background: transparent;
    color: var(--farbe-text);
    border: 1.5px solid #cfc8b8;
}

.knopf--schlicht:hover {
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
}

.knopf--limette {
    background: var(--farbe-limette);
    color: var(--farbe-text);
}

.knopf--limette .icon--pfeil {
    color: var(--farbe-text);
}

.knopf--limette:hover {
    background: #d8f58e;
    color: var(--farbe-text);
}

.text-link {
    font-weight: 500;
    color: var(--farbe-primaer);
}

.text-link .icon--pfeil {
    width: 1.1rem;
    height: 1.1rem;
}

.karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    box-shadow: none;
}

/* Bühne der Startseite */
.held--start {
    grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 4rem);
    padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem);
}

.held__kicker {
    font-family: var(--font-text);
    color: var(--farbe-primaer);
    font-weight: 700;
    letter-spacing: 0.18em;
}

/* Keine Zeichenbegrenzung: die Spalte gibt die Breite vor. Gemessen 2026-09-03 bei
   1440, 1280 und 1024 px: „Terminbuchung ohne / Kompromisse bei / Datenschutz und /
   Barrierefreiheit". text-wrap: balance stellte das erste Wort allein, deshalb pretty. */
.held__text h1 {
    max-width: none;
    margin: 1.2rem 0 1.6rem;
    font-size: clamp(2.5rem, 4.6vw, 4.4rem);
    line-height: 1.02;
    text-wrap: pretty;
}

.held__betont {
    font-style: italic;
    color: var(--farbe-primaer);
}

.held__claim {
    color: var(--farbe-text-leise);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    margin-bottom: 2rem;
}

.held__cta {
    gap: 1rem;
}

/* Vertrauenszeile unter den Knöpfen. #6f7874 erreichte auf dem Papierhintergrund
   #f6f2e9 nur 4,07:1 und blieb damit unter der Schwelle 4,5:1, die diese Seiten
   selbst zusagen. Derselbe Farbton, um den Faktor 0,88 abgedunkelt: 4,98:1
   (gemessen 10.09.2026, WerbeseitenKontrastTest rechnet es nach). */
.held__abzeichen {
    color: #626a66;
    font-weight: 400;
    font-size: 0.9rem;
}

/* Buchungskarte: Illustration der echten Buchungsseite */
.buchungskarte {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: 24px;
    box-shadow: var(--schatten-flaeche);
}

.buchungskarte__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.buchungskarte__kopf span,
.buchungskarte__tag {
    margin: 0;
    color: #6f7874;
    font-size: 0.85rem;
}

.buchungskarte__monat {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
    font-size: 0.9rem;
    text-align: center;
}

.buchungskarte__monat span {
    padding: 0.55rem 0;
    border-radius: 0.6rem;
}

.buchungskarte__wt {
    color: #9aa39f;
    font-size: 0.8rem;
}

.buchungskarte__leer {
    color: #c7c2b5;
}

.buchungskarte__frei {
    background: var(--farbe-limette-flaeche);
}

.buchungskarte__gewaehlt {
    background: var(--farbe-primaer);
    color: #f8f5ed;
    font-weight: 700;
}

.buchungskarte__slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.buchungskarte__slots span {
    padding: 0.7rem;
    border: 1.5px solid var(--farbe-primaer);
    border-radius: 0.6rem;
    text-align: center;
    font-weight: 500;
}

.buchungskarte__slot--aktiv {
    background: var(--farbe-primaer);
    color: #f8f5ed;
}

.buchungskarte__hinweis {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
    color: #6f7874;
    font-size: 0.85rem;
}

.buchungskarte__hinweis svg {
    color: var(--farbe-primaer);
    flex-shrink: 0;
}

/* Der Unterschied: drei Spalten zwischen zwei Linien */
main > section.unterschied {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-block: 0;
}

.unterschied__titel {
    margin: 0 0 1.2rem;
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--farbe-primaer);
}

.unterschied__spalten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--farbe-text);
    border-bottom: 1px solid var(--farbe-text);
}

.unterschied__spalte {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 2.5rem 2rem 2.5rem 0;
    border-right: 1px solid var(--farbe-rand);
}

.unterschied__spalte + .unterschied__spalte {
    padding-left: 2rem;
}

.unterschied__spalte:last-child {
    padding-right: 0;
    border-right: 0;
}

.unterschied__spalte h3 {
    margin: 0;
    font-size: clamp(1.5rem, 2.1vw, 1.9rem);
}

.unterschied__spalte p {
    margin: 0;
    color: var(--farbe-text-leise);
    line-height: 1.55;
}

/* Merkmale */
main > section.merkmale {
    margin-top: clamp(4rem, 8vw, 7rem);
}

.merkmale__kopf {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: end;
    margin-bottom: 2.5rem;
}

.merkmale__kopf h2 {
    margin: 0;
    max-width: 16ch;
}

.merkmale__kopf p {
    margin: 0;
    color: var(--farbe-text-leise);
    font-size: 1.1rem;
    line-height: 1.55;
}

.merkmal-gitter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.merkmal {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: auto;
    margin: 0;
    padding: 2rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-flaeche);
}

.merkmal__icon {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 0.75rem;
    background: var(--farbe-limette-flaeche);
    color: var(--farbe-primaer);
}

.merkmal h3 {
    margin: 0;
}

.merkmal p {
    margin: 0;
    color: var(--farbe-text-leise);
    line-height: 1.55;
}

.merkmale__mehr {
    margin: 2rem 0 0;
}

/* Abschluss als dunkles Band */
main > section.held--abschluss {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    margin-top: clamp(4rem, 8vw, 7rem);
    padding: clamp(2rem, 5vw, 4.5rem);
    background: #16312c;
    color: #f8f5ed;
    border-radius: 28px;
    text-align: left;
}

.held--abschluss h2 {
    max-width: 18ch;
    margin: 0 0 0.8rem;
    color: #f8f5ed;
}

.held--abschluss .held__claim {
    margin: 0;
    color: #cfd8d3;
}

.held--abschluss .held__cta {
    justify-content: flex-end;
}

/* Fußzeile auf Papier statt dunkel. --mk-gedaempft trägt den KI-Hinweis und die
   Copyright-Zeile, beide bei 0,85rem: normaler Text, also Schwelle 4,5:1. Auf dem
   Papier #f6f2e9 kam #6f7874 nur auf 4,07:1; derselbe Farbton um den Faktor 0,88
   abgedunkelt erreicht 4,98:1 (gemessen 10.09.2026). */
.fuss-marketing {
    --mk-hintergrund: var(--farbe-hintergrund);
    --mk-text: var(--farbe-text);
    --mk-akzent: var(--farbe-primaer);
    --mk-gedaempft: #626a66;
    --mk-abzeichen: var(--farbe-limette-flaeche);
    margin-top: clamp(4rem, 8vw, 6rem);
    padding-top: 3rem;
    border-top: 1px solid var(--farbe-rand);
}

.fuss-marketing :focus-visible {
    outline-color: var(--farbe-primaer);
}

.fuss-marketing__marke .marke__logo {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
}

.fuss-marketing__spalten {
    border-top: 1px solid var(--farbe-rand);
}

.fuss-marketing__spalte h2 {
    font-family: var(--font-text);
    color: var(--farbe-primaer);
}

.fuss-marketing__ki-abzeichen {
    color: var(--farbe-text);
}

/* Schmale Bildschirme */
@media (max-width: 52rem) {
    .held--start {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .buchungskarte {
        max-width: 30rem;
    }

    .unterschied__spalten {
        grid-template-columns: 1fr;
    }

    .unterschied__spalte,
    .unterschied__spalte + .unterschied__spalte {
        padding: 1.75rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--farbe-rand);
    }

    .unterschied__spalte:last-child {
        border-bottom: 0;
    }

    .merkmale__kopf {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .merkmal-gitter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    main > section.held--abschluss {
        grid-template-columns: 1fr;
    }

    .held--abschluss .held__cta {
        justify-content: flex-start;
    }
}

@media (max-width: 38rem) {
    .merkmal-gitter {
        grid-template-columns: 1fr;
    }

    .held__text h1 {
        font-size: clamp(2.3rem, 10.5vw, 3rem);
    }
}

/* Kontrollkästchen und Auswahlknöpfe.

   Das Eingabesystem gibt allen Eingaben in .feld eine Mindesthöhe von 2,85 rem. Das zog die
   Checkbox auf 46 px Höhe und drückte das Label darunter (Fund des Betreibers 2026-09-03).
   Die Maße stehen jetzt global, nicht nur in .feld, sonst blieben die Auswahlknöpfe in den
   Abstimmungstabellen als einzige im Systemstil des Browsers stehen. Gleiche Spezifität wie
   ».feld input«, aber weiter unten in der Datei, deshalb gewinnt diese Regel. */
input[type="checkbox"],
input[type="radio"] {
    /* 24 mal 24 Pixel, damit das Kästchen selbst die Mindestgröße von WCAG 2.2, 2.5.8 erreicht
       (vorher 1,15 rem = 18,4 px, die Beschriftung als größere Fläche zu zählen wäre Auslegung).
       Der obere Rand sitzt so, dass die Mitte des Kästchens auf der Mitte der ersten Textzeile liegt. */
    width: 1.5rem;
    height: 1.5rem;
    min-height: 0;
    padding: 0;
    margin: 0.05rem 0.55rem 0 0;
    vertical-align: top;
    accent-color: var(--farbe-primaer);
}

/* Ungültige Eingaben tragen aria-invalid. Bisher sah ein abgelehntes Feld aus wie ein gültiges,
   die Meldung stand nur in der Sammelbox über dem Formular. */
.feld [aria-invalid="true"] {
    border-color: var(--farbe-fehler-text);
}

/* Kästchen links, Text rechts: alles außer dem Eingabefeld rückt in die zweite Spalte, also
   auch »p.feld__hinweis«. Gilt für das Feld selbst und für die Reihen darin (Gastgeberliste
   der Terminart, Kalenderauswahl). */
.feld:has(> input[type="checkbox"]),
.feld:has(> input[type="radio"]),
.feld div:has(> input[type="checkbox"]),
.feld div:has(> input[type="radio"]),
.feld > .label--inline:has(> input[type="checkbox"]),
.feld > .label--inline:has(> input[type="radio"]) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.55rem;
    align-items: start;
}

.feld:has(> input[type="checkbox"]) > input,
.feld:has(> input[type="radio"]) > input,
.feld div:has(> input[type="checkbox"]) > input,
.feld div:has(> input[type="radio"]) > input,
.feld > .label--inline:has(> input) > input {
    margin-right: 0;
}

.feld:has(> input[type="checkbox"]) > :not(input),
.feld:has(> input[type="radio"]) > :not(input),
.feld div:has(> input[type="checkbox"]) > :not(input),
.feld div:has(> input[type="radio"]) > :not(input) {
    grid-column: 2;
}

.feld:has(> input[type="checkbox"]) > label,
.feld:has(> input[type="radio"]) > label,
.feld div:has(> input[type="checkbox"]) > label,
.feld div:has(> input[type="radio"]) > label {
    margin-bottom: 0;
}

/* Mehrfachauswahl mit dem Kästchen INNERHALB des Labels (Berechtigungen eines Zugangstokens,
   Ereignisse eines Webhooks). Ohne diese Regel liefen alle Einträge als ein Fließtext. */
.feld > .label--inline:has(> input[type="checkbox"]),
.feld > .label--inline:has(> input[type="radio"]) {
    margin-bottom: 0.35rem;
}

/* Überschrift einer Feldgruppe ohne eigenes label-Element (Gastgeber der Terminart). */
.feld > .label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Kompakter Knopf fuer Tabellenzellen und Banner. Die Klasse wurde an sechs Stellen
   benutzt, war aber nie definiert: seit Richtung A sassen dort volle Werbepillen mit
   58 px Hoehe (Gauntlet-Fund 09.09.2026). Masse wie in der Aktionsleiste der Tabellen. */
.knopf--klein {
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.2;
    border-radius: 999px;
}

.knopf--klein:hover {
    transform: none;
}

/* Neuerungen: Streifen auf der Startseite und die eigene Seite /neuerungen.
   Gleiche Bauweise wie »unterschied«: zwei Spalten zwischen zwei Linien, links die
   Einordnung, rechts der Inhalt. Auf schmalen Bildschirmen untereinander. */
.neu-streifen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 2rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--farbe-text);
    border-bottom: 1px solid var(--farbe-text);
}

.neu-streifen__kopf h2 {
    margin: 0.4rem 0 0;
    font-size: clamp(1.5rem, 2.1vw, 1.9rem);
}

.neu-streifen__datum {
    margin: 0.6rem 0 0;
    font-family: var(--font-text);
    font-size: 0.95rem;
    color: var(--farbe-text-leise);
}

.neu-streifen__punkte {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.neu-streifen__punkte li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start;
    line-height: 1.55;
}

.neu-streifen__punkte svg {
    margin-top: 0.28rem;
    color: var(--farbe-primaer);
}

.neu-streifen__mehr {
    margin: 1.4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
}

.neu-streifen__rest {
    font-size: 0.95rem;
    color: var(--farbe-text-leise);
}

/* Die Seite /neuerungen: eine Zeitleiste, Datum links, Punkte rechts. */
.neuerungen {
    padding: 1rem 0;
}

.neuerungen__kopf {
    max-width: 42rem;
    margin-bottom: 3rem;
}

.neuerungen__kopf h1 {
    margin: 1rem 0 1.2rem;
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    line-height: 1.05;
    text-wrap: pretty;
}

.neuerungen__einleitung {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--farbe-text-leise);
}

.neuerungen__liste {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--farbe-text);
}

.neuerung {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    gap: 2rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--farbe-rand);
}

.neuerung__datum {
    margin: 0.3rem 0 0;
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--farbe-primaer);
}

.neuerung__titel {
    margin: 0 0 1rem;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1.15;
}

.neuerung__punkte {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.7rem;
    line-height: 1.6;
}

.neuerung__punkte li::marker {
    color: var(--farbe-primaer);
}

.neuerungen__fuss {
    margin: 2.5rem 0 0;
    color: var(--farbe-text-leise);
}

@media (max-width: 52rem) {
    .neu-streifen,
    .neuerung {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.2rem;
    }
}

/* Gefahr-Knopf nach Richtung A. Der Block oben setzt .knopf mit dunkler Fuellung neu, hatte
   den Gefahr-Fall aber nicht mitgenommen: „Loeschen" wurde zum dunklen Primaerknopf mit
   rotem Rand (Ruege des Betreibers 2026-09-07, Mandantenliste). */
.knopf--gefahr {
    background: transparent;
    color: var(--farbe-fehler-text);
    border: 1.5px solid var(--farbe-fehler-text);
    font-weight: 500;
}

.knopf--gefahr:hover {
    background: var(--farbe-fehler-flaeche);
    color: var(--farbe-fehler-text);
}

/* Aktionsleiste in Tabellen: eine Zeile gleich grosser, kompakter Knoepfe. Die grossen
   Pillen der Werbeseiten sind fuer eine Tabellenzelle zu hoch, und Textlink, Umriss und
   Fuellung nebeneinander wirkten wie Zufall. Der reine Link („Bearbeiten") bekommt
   dieselbe Form wie der schlichte Knopf. */
.tabelle__aktionen {
    gap: 0.4rem;
    align-items: center;
    align-content: flex-start;
}

.tabelle__aktionen .knopf,
.tabelle__aktionen > a:not(.knopf) {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-family: var(--font-text);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transform: none;
}

.tabelle__aktionen > a:not(.knopf) {
    color: var(--farbe-text);
    border: 1.5px solid #cfc8b8;
    background: transparent;
}

.tabelle__aktionen > a:not(.knopf):hover {
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
}

.tabelle__aktionen .knopf:hover {
    transform: none;
}

.tabelle__aktionen form {
    display: inline-flex;
    margin: 0;
}

.tabelle__aktionen--abstand {
    margin-top: 0.4rem;
}

/* Aktionsleiste auf breiten Bildschirmen in einer Zeile. Die vier kompakten Knöpfe der
   Mandantenliste („Bearbeiten", „Ansehen als", „Sperren", „Löschen") messen zusammen
   419 px; darf die Leiste nicht umbrechen, verlangt die siebenspaltige Tabelle 1040 px
   Mindestbreite.

   Die Bruchkante muss deshalb an der verfügbaren Breite hängen, nicht am Fenster. Der
   Behälter ist min(100%, 76rem) minus zweimal clamp(1rem, 4vw, 2.5rem), das sind bei
   1024 px Fenster nur 929 px. Gemessen am 09.09.2026 im Browser gegen die echte
   Mandantenliste (Fenster 1024x800, senkrechte Bildlaufleiste, also 1009 px Dokument):
   .tabelle-scroll 929 px gegen Tabelle 1040 px, die Tabelle musste in sich waagerecht
   scrollen und schnitt genau die Aktionsspalte ab; ohne den Scroll-Rahmen schob sie die
   ganze Seite zur Seite. Betroffen war alles von 1024 px bis rund 1135 px.

   76 rem ist die neue Kante, weil dort der Behälter selbst ausgereizt ist: er gibt dann
   1216 minus 80 = 1136 px her, 96 px mehr als die Leiste braucht (gemessen bei 1216 px
   Fenster: Behälter 1121 px, Tabelle 1121 px, kein Überlauf). Dieselbe alte Kante schob
   auch /app/buchungen zur Seite, dort Dokument 1018 px gegen 1009 px sichtbar.

   Kurze Leisten aus höchstens zwei Elementen behalten die alte Kante. Sie brauchen rund
   240 px, und die hat die Tabelle auch bei 1024 px übrig: auf /app/kalender stehen beide
   Knöpfe nebeneinander, Tabelle 929 px, kein Überlauf. Ohne diese Ausnahme würden sie ab
   1024 px unnötig untereinander rutschen. Die gestapelte Zelle der Nutzerverwaltung ist
   ausgenommen, sonst gewönne die Ausnahme gegen ihre eigene Regel weiter unten.

   Gegenprobe mit der alten Kante 64 rem für alle: bei 1024 px sofort wieder 1040 px
   Tabelle in 929 px Behälter. */
@media (min-width: 64rem) {
    .tabelle__aktionen:not(.tabelle__aktionen--gestapelt, :has(> :nth-child(3))) {
        flex-wrap: nowrap;
    }
}

@media (min-width: 76rem) {
    .tabelle__aktionen {
        flex-wrap: nowrap;
    }
}

/* Kopf von Kundenbereich und Verwaltung (2026-09-07).
   Zeile 1: Marke, Abzeichen der Rolle bzw. des Mandanten, wer angemeldet ist, Abmelden,
   Sprache. Zeile 2: die Navigation als offene Leiste. Der Aufklappschalter „Menue" gehoert
   nur auf schmale Bildschirme; vorher stand er auch auf dem Desktop ueber den Links. */
.kopf--app .kopf__innen {
    min-height: 4.25rem;
    gap: 0.9rem;
    flex-wrap: nowrap;
    padding-block: 0.6rem;
}

.kopf__rolle {
    /* inline-block statt inline-flex: text-overflow wirkt nur auf Block-Container
       (Gauntlet-Fund 09.09.2026, lange Mandantennamen endeten mitten im Buchstaben). */
    display: inline-block;
    flex: 0 1 auto;
    min-width: 6rem;
    padding: 0.35rem 0.85rem;
    line-height: 1.3;
    border-radius: 999px;
    border: 1.5px solid var(--farbe-rand);
    background: var(--farbe-flaeche);
    font-family: var(--font-text);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kopf__rolle--admin {
    background: var(--farbe-primaer);
    border-color: var(--farbe-primaer);
    color: #f8f5ed;
}

.kopf__rolle--admin::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.45rem;
    vertical-align: 0.05em;
    border-radius: 50%;
    background: var(--farbe-limette);
}

.kopf__wer {
    /* Das einzige Element, das bei Platznot schrumpft: E-Mail vor dem Mandantennamen
       kuerzen, und die Zeile laeuft nie ueber den Rand (Gauntlet-Fund 09.09.2026). */
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    font-size: 0.9rem;
    color: var(--farbe-text-leise);
    white-space: nowrap;
}

.kopf__wer strong {
    color: var(--farbe-text);
    font-weight: 500;
}

.kopf--app .kopf__logout {
    margin-left: 0;
}

.kopf--app .kopf__logout .knopf--schlicht {
    padding: 0.5rem 1.05rem;
    font-size: 0.95rem;
}

/* Zeile 2: Navigationsleiste */
.app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.2rem;
    padding: 0.2rem 0 0.7rem;
}

.app-nav a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    color: var(--farbe-text);
    font-family: var(--font-text);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.app-nav a:hover {
    background: var(--farbe-flaeche);
    border-color: var(--farbe-rand);
}

.app-nav a[aria-current="page"] {
    background: var(--farbe-flaeche);
    border-color: var(--farbe-text);
    color: var(--farbe-primaer);
}

.app-nav a:focus-visible {
    outline: 2px solid var(--farbe-primaer);
    outline-offset: 2px;
}

/* Auf dem Desktop kein Aufklappmenue, auf schmalen Bildschirmen keine offene Leiste. */
.kopf__menue--app {
    display: none;
}

@media (max-width: 52rem) {
    .kopf--app .kopf__innen {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    .kopf__wer {
        order: 5;
        flex-basis: 100%;
        margin-left: 0;
        white-space: normal;
    }

    .kopf--app .kopf__logout {
        margin-left: auto;
    }

    .app-nav {
        display: none;
    }

    .kopf__menue--app {
        display: block;
        padding-bottom: 0.6rem;
    }

    .kopf__menue--app > summary {
        padding: 0.45rem 0.9rem;
        border: 1.5px solid var(--farbe-rand);
        border-radius: 999px;
        font-weight: 500;
        list-style: none;
    }

    .kopf__menue--app > summary::-webkit-details-marker {
        display: none;
    }

    /* Sichtbarer Aufklapp-Hinweis: kleiner Winkel, der sich beim Oeffnen dreht. */
    .kopf__menue--app > summary::after {
        content: "";
        display: inline-block;
        width: 0.45rem;
        height: 0.45rem;
        margin-left: 0.5rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-0.15rem) rotate(45deg);
        transition: transform 150ms ease;
    }

    .kopf__menue--app[open] > summary::after {
        transform: translateY(0.1rem) rotate(-135deg);
    }

    .kopf__menue--app[open] > .kopf__nav {
        display: flex; /* die aelteren Regeln setzen hier ein zweispaltiges Raster */
        flex-direction: column;
        align-items: stretch;
        gap: 0.1rem;
        padding-top: 0.5rem;
    }

    .kopf__menue--app[open] > .kopf__nav a {
        padding: 0.6rem 0.9rem;
        border-bottom: 0;
        border-radius: 0.6rem;
    }

    .kopf__menue--app[open] > .kopf__nav a[aria-current="page"] {
        background: var(--farbe-flaeche);
        color: var(--farbe-primaer);
    }
}

/* Aktionszelle mit mehreren Formularen (Nutzerverwaltung): untereinander, jede Reihe für sich
   waagerecht. Die einzeilige Regel oben gilt hier nicht, sonst quetscht sie „Deaktivieren"
   samt Bestätigungskästchen in eine Zeile (Sichtprüfung 2026-09-08). Die Kante muss dieselbe
   sein wie dort, sonst hebt die Gegenregel den falschen Bereich auf (09.09.2026 von 64 rem
   auf 76 rem nachgezogen). */
.tabelle__aktionen--gestapelt {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

@media (min-width: 76rem) {
    .tabelle__aktionen--gestapelt {
        flex-wrap: wrap;
    }
}

.tabelle__aktionen .aktion-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tabelle__aktionen .aktion-zeile select {
    width: auto;
    min-height: 0;
    padding: 0.35rem 1.8rem 0.35rem 0.7rem;
    font-size: 0.9rem;
    border-radius: 999px;
}

.tabelle__aktionen .feld--kompakt {
    margin: 0;
    font-size: 0.9rem;
}

.tabelle__aktionen .feld--kompakt > label {
    white-space: normal;
    max-width: 22rem;
}