/*
 * Toloro Leckortung — Grundgeruest des Aussehens.
 *
 * Mobil zuerst (D5 in toloro-hub#41): Der Monteur bedient den Dienst auf dem
 * Handy, das Buero am PC. Hier steht deshalb nur, was auf jeder Breite
 * funktioniert; das richtige Aussehen kommt mit den Seiten, die es braucht
 * (L1/L2). Keine Schriftdatei: Bis es eine gibt, ist die Systemschrift die
 * schnellste und auf jedem Geraet die vertrauteste.
 */

:root {
  --grund: #ffffff;
  --schrift: #1c1f23;
  --gedaempft: #5b6570;
  --linie: #dfe3e8;
  --akzent: #0f6ab4;
  --breite: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14171a;
    --schrift: #e8ebee;
    --gedaempft: #9aa4ae;
    --linie: #2b3037;
    --akzent: #64b0ee;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.seite {
  max-width: var(--breite);
  /* 1rem Seitenrand, damit auf einem schmalen Telefon nichts am Rand klebt. */
  margin: 0 auto;
  padding: 2.5rem 1rem 1rem;
}

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 0.5rem; }

.anreisser { font-size: 1.1875rem; }

a { color: var(--akzent); }

.knopf {
  font: inherit;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 0.4rem;
  background: var(--akzent);
  color: #fff;
  cursor: pointer;
}

.knopf[disabled] {
  background: var(--linie);
  color: var(--gedaempft);
  cursor: not-allowed;
}

.hinweis { color: var(--gedaempft); margin-left: 0.5rem; }
.klein { color: var(--gedaempft); font-size: 0.9375rem; }

.rechtstext table { border-collapse: collapse; width: 100%; }
.rechtstext th,
.rechtstext td { border: 1px solid var(--linie); padding: 0.4rem 0.6rem; text-align: left; }
/* Lange Tabellen (Unterauftragnehmer im AVV) sollen auf dem Telefon
   schiebbar sein statt die Seite zu sprengen. */
.rechtstext { overflow-x: auto; }

.fuss {
  max-width: var(--breite);
  margin: 3rem auto 2rem;
  padding: 1rem;
  border-top: 1px solid var(--linie);
}

.fuss nav a { margin-right: 1rem; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   Toloro-Aussehen (toloro-leckortung#2, D11 in toloro-hub#41)

   Bis hierher stand oben das Grundgerüst aus L0: Systemschrift, ein neutrales
   Blau, genug für zwei Sätze und vier Rechtstexte. Ab hier kommt das
   Aussehen von Toloro dazu — Tokens, Inter, Formularstil und Bausteine aus
   der Hub-Konsole (toloro-hub #22, `static/css/tokens.css` und
   `components.css`), die ihrerseits aus `toloro`, `static/desktop/css/`
   stammen. D11: „Dasselbe Design für Büro und App: Tokens, Schrift (Inter),
   Rahmen aus der Hub-Konsole übernehmen, nicht neu erfinden."

   ANGEHÄNGT und nicht eingearbeitet, und das ist Absicht: An dieser Datei
   baut parallel der Wizard-Strang (toloro-leckortung#3). Zwei Zweige, die
   dieselben Zeilen umschreiben, sind ein Konflikt; zwei Zweige, die je unten
   anhängen, sind eine Reihenfolge. Die :root-Werte unten überschreiben die
   von oben — gleiche Spezifität, spätere Regel gewinnt.

   KEIN Inline-Style und KEIN Inline-Skript, nirgends: Die Inhaltsrichtlinie
   (edge/SicherheitsHeaderFilter) lässt weder `unsafe-inline` für
   `style-src` noch für `script-src` zu. Ein `style="…"`-Attribut wäre im
   Browser wirkungslos — und zwar stumm.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Schrift ────────────────────────────────────────────────────────────────
   Inter vom eigenen Server. Herkunft und Prüfsummen: static/HERKUNFT.md.
   Eine Datei je Zeichensatz deckt den ganzen Strichstärkenbereich ab
   (variable Schrift) — daher `font-weight: 100 900` statt fünf Blöcken. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-variable-latin-ext-01ba6c2a184b8cba08b0d57167664d75.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-variable-latin-65850a373e258f1c897a2b3d75eb74de.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────
   Navy #15293F als Primärfarbe, Orange #E87A2A als Akzent — die Farbwelt von
   toloro.de, der Toloro App und der Hub-Konsole. Übernommen, nicht neu
   gemischt: Ein zweites Navy wäre schon eins zu viel. */
:root {
    --primary: #15293F;
    --primary-hover: #0D1D2F;
    --primary-soft: #E8EDF3;
    --accent: #E87A2A;
    --accent-hover: #C9621C;
    --accent-soft: #FCEBDD;

    --success: #10B981;
    --success-soft: #D1FAE5;
    --warning: #F59E0B;
    --warning-soft: #FEF3C7;
    --warning-text: #B45309;
    --danger: #EF4444;
    --danger-soft: #FEE2E2;
    --danger-hover: #DC2626;
    --info-soft: #E0E7FF;

    --text: #1E293B;
    --text-secondary: #64748B;
    --text-muted: #64748B;
    --bg: #FFFFFF;
    --bg-subtle: #F8FAFC;
    --bg-muted: #F1F5F9;
    --border: #E2E8F0;
    --border-active: #CBD5E1;

    --focus-ring: 2px solid var(--primary);
    --focus-ring-abstand: 2px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08);

    --radius: 10px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-full: 9999px;

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;

    /* Die alten Namen aus L0 zeigen jetzt auf die Toloro-Töne. So sehen die
       Startseite und die vier Rechtstexte ohne jede Änderung richtig aus. */
    --grund: var(--bg);
    --schrift: var(--text);
    --gedaempft: var(--text-secondary);
    --linie: var(--border);
    --akzent: var(--primary);
    --breite: 46rem;
}

/* Der dunkle Modus aus L0 ist damit vom Tisch — bewusst (D5: „Dunkelmodus
   nicht nötig"). Ein zweiter Farbsatz, den niemand gegenliest, wird zu einem
   zweiten Aussehen mit eigenen Kontrastfehlern; und der Bericht, auf den
   alles zuläuft, ist ohnehin ein PDF auf weißem Papier. Diese Regel hebt die
   @media-Regel von oben auf, statt sie zu löschen — angehängt, nicht
   umgebaut. */
@media (prefers-color-scheme: dark) {
    :root {
        --grund: #FFFFFF;
        --schrift: #1E293B;
        --gedaempft: #64748B;
        --linie: #E2E8F0;
        --akzent: #15293F;
    }
}

body {
    font-family: var(--font-sans);
    background: var(--bg-subtle);
    color: var(--text);
    font-size: var(--text-base);
    line-height: 1.55;
}

h1, h2, h3 { letter-spacing: -0.01em; }
h1 { font-size: var(--text-xl); font-weight: 700; }
h2 { font-size: var(--text-lg); font-weight: 700; }
h3 { font-size: var(--text-base); font-weight: 600; }

a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

/* Tastatur-Fokus: EIN Ring, immer `:focus-visible` und nie `:focus` — ein
   Ring, der nach jedem Mausklick stehen bleibt, wird als Fehler gelesen und
   dann wieder abgeschaltet. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-abstand);
}

[hidden] { display: none !important; }

/* ── Seitenrahmen ─────────────────────────────────────────────────────────── */
.seite {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 2rem 1rem 1rem;
}

/* Die Marke über einer öffentlichen Seite. */
.marke {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 1rem 1rem 0;
}

.marke img { width: 28px; height: 28px; }

.marke .wortmarke {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--primary);
    text-decoration: none;
}

.marke .wortmarke .akzent { color: var(--accent); font-style: normal; }

/* ── Karten ─────────────────────────────────────────────────────────────── */
.karte {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.karte > h2:first-child,
.karte > h3:first-child { margin-top: 0; }

.karte-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
/* Die Überschrift im Kopf steht oben in der Karte — ohne den Abstand, den
   ein freies h2 davor hat (sonst klaffte über jeder Karte mit Kopf eine
   Lücke, #46). */
.karte-kopf > h2 { margin-top: 0; }

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* 44 px Mindesthöhe: Baustellenhände, Handschuhe, ein Telefon in der
       Sonne. Gilt auch im Büro — ein zweites Maß wäre nur ein zweites Maß. */
    min-height: 44px;
    padding: 0.6rem 1.15rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.knopf:hover { background: var(--primary-hover); color: #fff; }
.knopf:active { transform: scale(0.98); }

.knopf-akzent { background: var(--accent); }
.knopf-akzent:hover { background: var(--accent-hover); }

.knopf-rand {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}
.knopf-rand:hover { background: var(--primary-soft); color: var(--primary); }

.knopf-leise {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.knopf-leise:hover { background: var(--bg-muted); color: var(--text); }

.knopf-gefahr {
    background: transparent;
    color: var(--danger-hover);
    border: 1px solid var(--border);
}
.knopf-gefahr:hover { background: var(--danger-soft); color: var(--danger-hover); }

.knopf-klein { min-height: 36px; padding: 0.35rem 0.8rem; font-size: var(--text-sm); }

.knopf[disabled],
.knopf.gesperrt {
    background: var(--border);
    color: var(--text-secondary);
    border-color: var(--border);
    cursor: not-allowed;
}

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

/* Ein eigenes Formular je Knopf (POST), das in der Reihe trotzdem wie ein
   Knopf neben dem anderen steht. */
form.reihe { display: contents; }

/* Büro (#105): je Zeile die Rolle als Auswahl mit „Rolle speichern" — ein
   gewöhnliches Formular. Die Optionen tragen ihre Bedeutung im Text und sind
   lang; auf dem Telefon kürzt die Auswahl, statt die Seite zu verbreitern. */
.rollenwahl label { margin: 0; }
.rollenwahl select {
    max-width: 100%;
    min-height: 36px;
    padding: 0.3rem 0.5rem;
    font: inherit;
    font-size: var(--text-sm);
    border: 1px solid var(--border, #CBD5E1);
    border-radius: 8px;
    background: #fff;
}
.liste .rolle { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.liste .rolle .dazu { font-size: var(--text-xs); color: var(--text-muted); }

/* ── Formulare ──────────────────────────────────────────────────────────── */
.feld { margin-bottom: 1rem; }

.feld > label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="number"],
.feld input[type="date"],
.feld select,
.feld textarea {
    width: 100%;
    /* 16 px, nicht kleiner: Unter 16 px zoomt iOS beim Hineintippen in das
       Feld hinein und die halbe Seite ist weg. */
    font: inherit;
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
    min-height: 44px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Ein Feld, das der Mailserver zurueckgewiesen hat (toloro-leckortung#12).
   Die Farbe traegt die Aussage nicht allein: Daneben steht der Satz als
   Meldung, und das Feld bekommt `aria-invalid`. */
.feld input.feld-falsch,
.feld textarea.feld-falsch { border-color: var(--danger); }

.feld textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.feld textarea.gross { min-height: 16rem; }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.feld .hilfe {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.feldpaar { display: flex; flex-wrap: wrap; gap: 1rem; }
.feldpaar > .feld { flex: 1 1 14rem; min-width: 0; }

/* Eine Zeile der Liste „Gewerke" (#46): Machen wir / Machen wir nicht ·
   Gewerk · Beschreibung · Entfernen. Auf dem Telefon untereinander, ab 640 px
   eine Zeile je Eintrag unter EINEM Spaltenkopf (.gewerkkopf) — die Etiketten
   je Zeile bleiben dann nur für Vorleser (QA !39). Die Randfarbe links trägt
   den Umschalter mit (grün „Machen wir", grau „Machen wir nicht"), aber nicht
   allein — das Wort steht im Feld. */
.gewerkkopf { display: none; }
.gewerk-leer { margin: 0 0 0.75rem; }
.gewerkzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 1rem;
    border-bottom: 1px solid var(--border);
    border-left: 4px solid var(--success);
    padding-left: 0.75rem;
    margin-bottom: 0.75rem;
}
.gewerkzeile.nicht { border-left-color: var(--border-active); }
.gewerkzeile > .feld { flex: 1 1 100%; min-width: 0; margin-bottom: 0.75rem; }
.gewerkzeile > .zeile-entfernen { margin-bottom: 0.75rem; }
.gewerk-knoepfe { margin-bottom: 1.25rem; }
@media (min-width: 640px) {
    .gewerkkopf,
    .gewerkzeile {
        display: grid;
        /* Der Umschalter braucht Platz für „Machen wir nicht"; Gewerk und
           Beschreibung teilen sich den Rest fast hälftig — ein Gewerk wie
           „Sanitär/Reparatur" soll ab Kartenbreite ganz zu lesen sein. */
        /* Die letzte Spalte fest: Der Kopf hat dort keinen Knopf, mit „auto"
           verteilten Kopf und Zeilen die Restbreite verschieden. */
        grid-template-columns: 10.5rem minmax(0, 1fr) minmax(0, 1.1fr) 5.75rem;
        gap: 0 0.5rem;
        align-items: center;
    }
    .gewerkkopf {
        font-size: var(--text-sm);
        font-weight: 600;
        /* bündig mit den Feldern: Randbreite + Einzug der Zeile */
        padding-left: calc(4px + 0.75rem);
        margin-bottom: 0.3rem;
    }
    .gewerkzeile { border-bottom: 0; margin-bottom: 0.5rem; }
    .gewerkzeile > .feld,
    .gewerkzeile > .zeile-entfernen { margin-bottom: 0; }
    .gewerkzeile > .feld input[type="text"],
    .gewerkzeile > .feld select { padding-left: 0.5rem; padding-right: 0.5rem; }
    .gewerkzeile > .zeile-entfernen { padding-left: 0.6rem; padding-right: 0.6rem; justify-self: end; }
    .gewerkzeile > .feld > label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Der Hinweiskasten nach der Freischaltung (#41) — auffällig wie der Link,
   den man einmal sieht, aber ohne Zwang: Er geht, sobald die Karte
   gespeichert ist. */
.hinweiskarte {
    border: 2px solid var(--accent);
    background: var(--accent-soft);
}

/* Die Vorgehen-Texte je Option (#35): eine aufklappbare Zeile je
   Vorgehensweise, damit sieben Feldpaare auf dem Telefon keine Wand sind.
   Offen steht nur, wo die Firma schon etwas Eigenes hat. */
.vorgehen-liste {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 1rem;
    overflow: hidden;
}

.vorgehen-liste-kopf {
    margin: 0;
    padding: 0.6rem 0.9rem;
    font-size: var(--text-sm);
    background: var(--bg-muted);
}

.vorgehen-option {
    border-top: 1px solid var(--border);
    padding: 0.6rem 0.9rem;
}

.vorgehen-option summary {
    cursor: pointer;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    min-height: 32px;
}

.vorgehen-option summary::-webkit-details-marker { display: none; }
.vorgehen-option summary::before { content: "▸"; color: var(--text-secondary); }
.vorgehen-option[open] summary::before { content: "▾"; }
.vorgehen-option summary:hover { color: var(--text); }

.vorgehen-option[open] summary { margin-bottom: 0.6rem; }

.vorgehen-zuordnen { margin-bottom: 1rem; padding: 0.8rem 1rem; border-radius: var(--radius); }

.vorgehen-alt {
    white-space: pre-line;
    background: var(--bg-muted);
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
}

/* Ein Häkchen mit seinem Text. `accent-color` färbt das Kästchen selbst —
   ohne die Zeile steht ein systemblaues Kästchen in einer navy-orangen
   Seite. 22 px, weil auch dieses Kästchen mit dem Daumen getroffen wird. */
.haken {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    font-size: var(--text-sm);
}

.haken input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--primary);
}

/* ── Meldungen ──────────────────────────────────────────────────────────── */
.meldung {
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    margin-bottom: 1rem;
}

.meldung.gut { background: var(--success-soft); color: #065F46; }
.meldung.warnung { background: var(--warning-soft); color: #92400E; }
.meldung.fehler { background: var(--danger-soft); color: #991B1B; }
.meldung.ruhig { background: var(--bg-muted); color: var(--text-secondary); }
/* KI-Fehler (#74): unser Satz, darunter klein die Kennung fuer den Support. */
.ki-fehler .kennung,
.app-zeile-kifehler .kennung { display: block; margin-top: 0.25rem; font-size: 0.8em; opacity: 0.8; }

/* Rückfrage „… ist gerade angemeldet" auf der Monteur-Liste (#62): natives
   <dialog>, geöffnet von js/rueckfrage.js. */
dialog.rueckfrage {
    max-width: min(28rem, calc(100vw - 2rem));
    padding: 1.25rem 1.25rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--text);
}
dialog.rueckfrage::backdrop { background: rgba(15, 23, 42, 0.45); }
dialog.rueckfrage p { margin: 0 0 1rem; }
dialog.rueckfrage .knopfreihe { justify-content: flex-end; }

/* ── Abzeichen ──────────────────────────────────────────────────────────── */
.abzeichen {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.abzeichen.aktiv { background: var(--success-soft); color: #065F46; }
.abzeichen.wartet { background: var(--warning-soft); color: #92400E; }
.abzeichen.gesperrt { background: var(--danger-soft); color: #991B1B; }
.abzeichen.still { background: var(--bg-muted); color: var(--text-secondary); }
/* Der Büro-Monteur in der Monteur-Liste (#97): kommt über das Büro herein. */
.abzeichen.buero { background: var(--accent-soft); color: var(--accent-hover); }

/* ── Listen ─────────────────────────────────────────────────────────────── */
/* Karten statt Tabelle: Eine Tabelle mit vier Spalten und zwei Knöpfen je
   Zeile bricht auf 375 px auseinander oder erzwingt Querscrollen. Eine Liste
   aus Zeilen, die umbrechen, tut beides nicht. */
.liste { list-style: none; margin: 0; padding: 0; }

.liste > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
}

.liste > li:last-child { border-bottom: none; }

.liste .wer { flex: 1 1 12rem; min-width: 0; }
.liste .wer strong { display: block; font-weight: 600; }
.liste .wer .dazu { font-size: var(--text-xs); color: var(--text-muted); }
.liste .wer .neue-fassung { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--warning-text); }
.liste .wer .neue-fassung + .dazu { display: block; }

.leerzustand {
    padding: 1.5rem 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ── Der Link, den man genau einmal sieht ───────────────────────────────── */
/* Maschinenschrift, weil 0/O und 1/l/I sonst nicht zu unterscheiden sind;
   gestrichelter Akzentrahmen, weil das hier etwas ist, das JETZT übernommen
   werden muss — gespeichert ist nur der Hash. */
.einmalig {
    border: 2px solid var(--accent);
    background: var(--accent-soft);
}

.kopierbox { display: flex; align-items: stretch; gap: 0.5rem; margin: 0.6rem 0 0.4rem; }

.kopierbox code {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.8rem;
    background: var(--bg);
    border: 2px dashed var(--accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    word-break: break-all;
}

.kopierbox .knopf { flex-shrink: 0; }
.kopierbox .knopf.geklappt { background: var(--success); color: #fff; }

/* Das Wegwerf-Feld des Rückfallwegs in kopieren.js (Lauf über http). Es muss
   markierbar sein, also nicht `display:none` — es steht außerhalb des Bildes. */
.nur-zum-kopieren { position: fixed; top: -1000px; left: -1000px; opacity: 0; }

/* ── Büro-Rahmen ────────────────────────────────────────────────────────── */
.buerokopf {
    background: var(--primary);
    color: #fff;
    padding: 0.6rem 1rem;
}

.buerokopf .innen {
    max-width: var(--breite);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.buerokopf a.wortmarke { color: #fff; font-weight: 800; text-decoration: none; }
.buerokopf a.wortmarke .akzent { color: var(--accent); font-style: normal; }
.buerokopf .wer { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.78); }
.buerokopf .knopf-leise { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.3); }
.buerokopf .knopf-leise:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* „In die App wechseln" (#97) steht rechts neben dem Namen — Akzent auf dem
   dunklen Kopf. Auf dem Telefon rückt beides unter die Wortmarke, wenn es
   nicht mehr daneben passt; der Knopf bricht nicht in zwei Zeilen. */
.buerokopf .kopfrechts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}
.buerokopf .app-wechsel { margin: 0; }
.buerokopf .app-wechsel .knopf { white-space: nowrap; }

.bueromenue {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    /* Waagerecht schiebbar statt umbrechend: Vier Punkte passen auf 375 px
       nicht nebeneinander, und eine zweite Zeile schöbe den Inhalt nach
       unten. Auf dem PC ist von der Schiebbarkeit nichts zu sehen. */
    overflow-x: auto;
}

.bueromenue .innen {
    max-width: var(--breite);
    margin: 0 auto;
    display: flex;
    gap: 0.25rem;
    padding: 0 0.5rem;
}

.bueromenue a {
    display: block;
    padding: 0.85rem 0.75rem;
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.bueromenue a:hover { color: var(--text); }

.bueromenue a.hier {
    color: var(--primary);
    border-bottom-color: var(--accent);
}

/* ── Fuß ────────────────────────────────────────────────────────────────── */
.fuss { color: var(--text-secondary); font-size: var(--text-sm); }
.fuss nav a { color: var(--text-secondary); }

.klein { color: var(--text-secondary); font-size: var(--text-sm); }
.leise { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }

/* ── Berichte im Büro (L3, toloro-leckortung#4) ───────────────────────────── */

/* Angehängt und nicht eingearbeitet: Der Rest dieser Datei gehört L1/L2.
   Vier Regeln reichen — die Prüfmaske kommt sonst mit den Bausteinen aus,
   die schon da sind (.karte, .feld, .liste, .abzeichen, .knopfreihe). */

/* Antworten, die das Büro nur liest: Zeilenumbrüche bleiben stehen. Als
   Klasse und nicht als `style=`-Attribut — die Inhaltsrichtlinie sagt
   `style-src 'self'` und blockt Inline-Stile stumm. */
.mehrzeilig { white-space: pre-line; }

/* Die Filterknöpfe der Liste dürfen umbrechen: Vier Knöpfe mit Zahlen sind
   auf einem 375px-Bildschirm breiter als die Zeile. */
.bueromenue .innen { flex-wrap: wrap; }

/* Fotos in der Prüfmaske: nie breiter als die Karte, auch wenn das Attribut
   `width` etwas anderes sagt — und nie höher als eine Handbreit. Ein
   hochkant fotografiertes Bild würde sonst die halbe Seite füllen, und das
   Büro scrollt an den Feldern vorbei, die es eigentlich sucht. */
.karte img {
    max-width: 100%;
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Die Zeile mit der Monatszahl steht über der Liste und soll nicht wie eine
   Überschrift wirken. */
main > p.klein { margin-top: -0.4rem; }

/* Filterknöpfe und Suchfeld stehen in derselben Karte: Ohne Abstand klebt
   die Beschriftung „Suchen" an der Knopfreihe. */
.knopfreihe + form { margin-top: 1rem; }

/* ── Kosten (toloro-leckortung#14) ───────────────────────────────────────── */

/* „September 2026 · 12 Berichte · 24,00 €" — eine Zeile, etwas größer als
   Fließtext, weil sie die Antwort auf die Frage ist, wegen der jemand die
   Seite öffnet. Kein Rot, kein Balken: Es gibt keinen Rahmen, den man
   ausschöpfen könnte. */
.kostenzeile {
    font-size: 1.125rem;
    margin: 0 0 0.35rem;
}

/* #107: Solange nur das Startguthaben verbraucht ist, steht statt des fetten Betrags
   „Noch keine Kosten angefallen — Startguthaben" — groß, über die ganze Breite. */
.kostenzeile.noch-keine-kosten {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

/* „Guthaben: 42,00 €" auf der Karte „Kosten" der Übersicht (#58, #73, #85) — ruhig, grün. */
.guthaben {
    margin: 0.5rem 0 0;
    padding: 0.35rem 0.75rem;
    display: inline-block;
    border-radius: var(--radius-sm);
    background: var(--success-soft);
    color: #065F46;
}


/* ── Karte „Guthaben" auf /buero/kosten (#85) ─────────────────────────────
   Die Antwort auf die Frage, wegen der jemand die Seite öffnet: der Betrag,
   groß. Darunter, wofür er reicht, dann die vier Knöpfe — in zehn Sekunden
   verstanden, ein Klick zum Nachkaufen. */
.guthaben-betrag {
    margin: 0 0 0.25rem;
    font-size: 2.25rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.guthaben-betrag.leer strong { color: var(--danger-hover); }

.guthaben-reicht { margin: 0 0 0.5rem; }

.guthaben-titel,
.verbrauch-titel {
    margin: 1.25rem 0 0.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
}

.guthaben-pakete { margin-bottom: 0.5rem; }

/* Die Pakete gleich breit: vier Beträge nebeneinander lesen sich wie eine Auswahl. */
.guthaben-pakete .knopf { min-width: 5.5rem; }

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

/* „Wenn das Guthaben unter [X] € fällt, [Paket] kaufen." — ein Satz mit zwei Feldern. */
.automatik { margin-top: 1rem; padding-top: 0.25rem; border-top: 1px solid var(--border); }

.automatik-regel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.automatik-regel label { font-weight: 400; }

.automatik-regel input[type="number"] { width: 6.5rem; }

.automatik-regel input,
.automatik-regel select {
    font: inherit;
    font-size: 1rem;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}

.automatik-regel input:focus,
.automatik-regel select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Das Banner „Ihr Guthaben ist aufgebraucht" im Rahmen (#85). */
.guthaben-leer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.kostentabelle {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--text-sm);
}

.kostentabelle th,
.kostentabelle td {
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.kostentabelle thead th {
    font-weight: 600;
    color: var(--text-secondary);
}

.kostentabelle tbody tr:last-child td { border-bottom: none; }

/* Zahlen rechtsbündig und mit gleich breiten Ziffern: Untereinander stehende
   Beträge lassen sich sonst nicht vergleichen, ohne sie zu lesen. */
.kostentabelle .zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* „So wird berechnet" — der einzige Ort im Büro, an dem Preise stehen
   (Nachtrag 3 zu #14). Abgesetzt, damit er nicht wie eine Fußnote der Tabelle
   aussieht, aber ruhig: Es ist eine Erklärung, keine Warnung. */
.preisregel {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.preisregel h3 {
    margin: 0 0 0.35rem;
    font-size: var(--text-sm);
    font-weight: 600;
}

.preisregel p { margin: 0 0 0.35rem; }
.preisregel p:last-child { margin-bottom: 0; }

/* ── Musterbericht auf der Startseite (#75) ─────────────────────────────
   Die erste Seite als Blatt Papier: schmal, mit Rand und Schatten, daneben
   (ab 640 px) bzw. darunter der Satz und der Knopf. Die Obergrenze
   240 px aus `.karte img` (Prüfmaske) gilt hier nicht — ein Blatt, das nur
   eine Handbreit hoch ist, zeigt nichts. */
.musterbericht-inhalt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.musterbericht-bild {
    display: block;
    align-self: center;
    width: 100%;
    max-width: 320px;
}

.karte .musterbericht-bild img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    background: #fff;
}

.musterbericht-text p:first-child { margin-top: 0; }
.musterbericht .knopfreihe { margin-bottom: 0; }

@media (min-width: 640px) {
    .musterbericht-inhalt { flex-direction: row; align-items: flex-start; }
    .musterbericht-bild { flex: 0 0 240px; align-self: flex-start; }
}

/* ── Preisblock der Startseite (#58) ─────────────────────────────────────
   Werbung, aber im Toloro-Ton: eine Karte mit orangem Oberrand, die Zahl
   groß, darunter drei ruhige Zeilen. Kein Störer, kein „nur heute". */
.preisblock {
    border-top: 4px solid var(--accent);
}

.preisblock h2 { margin: 0 0 0.75rem; }

.preisblock-gratis {
    display: inline-block;
    margin: 0 0 0.5rem;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-weight: 700;
}

.preisblock-preis {
    margin: 0 0 0.75rem;
    font-size: var(--text-lg);
}

.preisblock-betrag {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* #73: der Listenpreis vor dem Aktionspreis — durchgestrichen, leiser, nicht umbrechend. */
.preisblock-statt {
    margin-right: 0.35rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.preisblock-liste {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.preisblock-liste li { margin-bottom: 0.2rem; }

.preisblock .knopfreihe { margin-bottom: 0; }

/* ── Prüfmaske: Ampel und Auswahllisten (#36) ─────────────────────────── */

.feld select {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font: inherit;
    border: 1px solid var(--border, #CBD5E1);
    border-radius: 8px;
    background: #fff;
}

.ampelwahl { border: 0; padding: 0; margin: 0 0 1rem; }
.ampelwahl > legend { font-weight: 600; margin-bottom: 0.4rem; }
.ampelwahl > .ampelwahl-stufe {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}
.ampelwahl-text { display: flex; flex-direction: column; }
/* Die Farben stehen im Katalog (leckortung-felder.json, `farbe`); hier je
   Schluessel, weil die Seite ohne Skript auskommt und die Inhaltsrichtlinie
   kein style-Attribut zulaesst. */
.ampelwahl-punkt {
    width: 0.9rem; height: 0.9rem; border-radius: 50%;
    flex: 0 0 auto; background: #94A3B8;
}
.ampelwahl-rot { background: #DC2626; }
.ampelwahl-gelb { background: #F5C518; }
.ampelwahl-gruen { background: #16A34A; }
.ampelwahl-keine { background: #2563EB; }

/* Ein Foto mit dem Vermerk „nicht ins PDF" (#36): sichtbar, aber gedaempft. */
img.nicht-im-pdf { opacity: 0.45; }

/* Der Wizard im Büro (#36): Fotos nimmt der Monteur auf; das Büro vermerkt
   „nicht ins PDF" in der Prüfmaske, statt Dateien zu löschen. */
.buero-wizard [data-verbund="foto"] > .unterkopf,
.buero-wizard [data-verbund="foto"] > .wahlgruppe,
.buero-wizard [data-verbund="foto"] > [data-eingabe="abschnittText"],
.buero-wizard [data-verbund="foto"] > .fotoknoepfe,
.buero-wizard [data-aktion="fotoWeg"],
.buero-wizard [data-aktion="fotoMarkieren"],
.buero-wizard [data-datei],
.buero-wizard .knopf-ueberspringen { display: none !important; }
.buero-wizard [data-eingabe="fotoUnterschrift"] { pointer-events: none; }

/* Verworfene Berichte (#42): ausgegraut, aber lesbar — sie sind Spur, kein
   Arbeitsstand. Die Karte mit „Wiederherstellen" bleibt voll sichtbar. */
.liste > li.verworfen .wer,
.liste > li.verworfen .abzeichen { opacity: 0.55; }
.seite.verworfen .karte:not(.verworfen-karte) { opacity: 0.6; }
.warnkasten { margin: 0.75rem 0; }
.warnkasten > summary { display: inline-flex; cursor: pointer; list-style: none; }
.warnkasten > summary::-webkit-details-marker { display: none; }
.warnkasten[open] > summary { margin-bottom: 0.75rem; }

/* ── Büro-Berichtsseite: eine Kopfleiste, ein Speichern (#48) ────────────
   Oben EINE Leiste je Stand, darunter ein Formular; die Speicherleiste klebt
   unten und erscheint erst mit der ersten Änderung (/js/pruefmaske.js). */
.kopfknoepfe { margin: 0.75rem 0 0.5rem; }
.kopfleiste .freigabezeile { margin: 0.25rem 0 0.25rem; font-weight: 600; }
.kopfleiste .stand-info { margin: 0; font-weight: 600; }

/* Menü „⋯" und „Zurückgeben": <details>, aufgeklappt als Fläche unter dem
   Knopf. Auf dem Telefon als Blatt am unteren Rand — ein Menü am rechten
   Knopf liefe sonst links aus dem Bild. */
.menue, .aufklapper { position: relative; }
.menue > summary, .aufklapper > summary { list-style: none; }
.menue > summary::-webkit-details-marker,
.aufklapper > summary::-webkit-details-marker { display: none; }
.menue-knopf { min-width: 44px; font-size: 1.25rem; letter-spacing: 0.05em; }
.menue-liste, .aufklapper-inhalt {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 30;
    min-width: 20rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.menue-liste { display: flex; flex-direction: column; padding: 0.35rem; }
.aufklapper-inhalt { left: 0; right: auto; width: min(24rem, 80vw); padding: 1rem; }
.menue-liste > form { margin: 0; }
.menue-eintrag {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.menue-eintrag:hover { background: var(--bg-muted); color: var(--text); }
.menue-eintrag.gefahr { color: var(--danger-hover); }
.menue-warnung { margin: 0; }
.menue-warnung[open] { padding: 0 0.5rem 0.5rem; }
.menue-warnung[open] > summary { margin-bottom: 0.5rem; }
.menue-warnung .meldung { font-size: var(--text-sm); }
@media (max-width: 599px) {
    .menue-liste, .aufklapper-inhalt {
        position: fixed;
        top: auto;
        bottom: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        min-width: 0;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.25);
    }
}

/* Fotos: Bild und Felder nebeneinander, auf dem Telefon untereinander. */
.fotozeile {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.fotozeile:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.fotozeile-bild { width: 13rem; max-width: 100%; }
.fotozeile-bild img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
/* Markiert (#39): der Satz unter dem Bild samt „Original ansehen". */
.fotozeile-bild .hilfe { margin: 0.375rem 0 0; }
.fotozeile-felder { flex: 1 1 16rem; min-width: 0; }
.fotozeile-felder .haken { margin-bottom: 0.75rem; }
.feldpaar > .feld.feld-schmal { flex: 0 1 7rem; }

/* Die Karte „Antworten" ist zugeklappt; die Überschrift ist der Schalter. */
.aufklappkarte > summary { cursor: pointer; list-style: none; }
.aufklappkarte > summary::-webkit-details-marker { display: none; }
.aufklappkarte > summary > h2 { display: inline; margin: 0; }
.aufklappkarte > summary::before { content: "▸ "; color: var(--text-secondary); }
.aufklappkarte[open] > summary::before { content: "▾ "; }
.aufklappkarte[open] > summary { margin-bottom: 0.75rem; }

/* Die klebende Speicherleiste. */
.speicherleiste {
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border-active);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.15);
}
.speicherleiste[hidden] { display: none; }
.speicherleiste-text { margin-right: auto; font-weight: 600; }
@media (max-width: 599px) {
    .speicherleiste { padding: 0.6rem 0.75rem; }
    .speicherleiste-text { flex-basis: 100%; font-size: var(--text-sm); }
    .speicherleiste > .knopf { flex: 1 1 0; }
}
.pruefmaske .feld input[type="date"],
.pruefmaske .feld-schmal input[type="number"] { max-width: 14rem; }

/* Nur lesend (QA !41): Freigegeben, beim Monteur oder verworfen sind alle
   Felder gesperrt — und sollen auch so aussehen. Weiße Felder mit Rahmen
   luden zum Tippen ein, obwohl nichts ging. */
.pruefmaske.schreibgeschuetzt .feld input:disabled,
.pruefmaske.schreibgeschuetzt .feld select:disabled,
.pruefmaske.schreibgeschuetzt .feld textarea:disabled {
    background: var(--bg-muted);
    border-color: transparent;
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    opacity: 1;
    cursor: default;
    resize: none;
}
.pruefmaske.schreibgeschuetzt .feld select:disabled { appearance: none; }
.pruefmaske.schreibgeschuetzt .haken,
.pruefmaske.schreibgeschuetzt .ampelwahl-stufe { cursor: default; }
/* ── Kündigung (#52): das Banner im Büro ─────────────────────────────────── */
.meldung.kuendigung { border: 1px solid #FCA5A5; font-size: var(--text-base); }
.meldung.kuendigung p { margin: 0 0 0.6rem; }
.meldung.kuendigung p:last-child { margin-bottom: 0; }
/* Lesemodus (#52, static/js/lesemodus.js): Knöpfe in gesperrten Formularen
   bleiben weg — auch die, die ein anderes Skript (gewerke.js) erst danach
   einblendet. */
form.nur-lesen button,
form.nur-lesen input[type="submit"],
form.nur-lesen input[type="button"] { display: none !important; }

/* ── Kopfmenü beim Namen (#56): „Mein Profil" und „Abmelden" ──────────────
   Ein <details> ohne Skript. Das Feld klappt unter dem Namen auf und liegt
   über dem Menü; auf dem Telefon bleibt es rechtsbündig im Kopf. */
.kopfmenue { position: relative; }
.kopfmenue > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
}
.kopfmenue > summary::-webkit-details-marker { display: none; }
.kopfmenue > summary::after { content: "▾"; font-size: 0.75em; color: rgba(255, 255, 255, 0.78); }
.kopfmenue > summary:hover { background: rgba(255, 255, 255, 0.12); }
.kopfmenue-inhalt {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 20;
    min-width: 11rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgba(21, 41, 63, 0.14);
    padding: 0.3rem 0;
}
.kopfmenue-inhalt a,
.kopfmenue-inhalt button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.9rem;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text);
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
}
.kopfmenue-inhalt a:hover,
.kopfmenue-inhalt button:hover { background: var(--bg-muted); }
.kopfmenue-inhalt form { margin: 0; }

/* Mitarbeiter (#56): „Hinzufügen" klappt das Einladungsformular auf. */
.hinzufuegen > summary { list-style: none; display: inline-flex; }
.hinzufuegen > summary::-webkit-details-marker { display: none; }
.hinzufuegen[open] > summary { margin-bottom: 0.9rem; }

/* Rechnungen (#56): dieselbe Tabelle wie die Monatskosten, rechts der PDF-Knopf. */
.kostentabelle .pdf { text-align: right; white-space: nowrap; }

/* Bei 375 px ragte die Rechnungstabelle 5 px über die Seite und über den Kartenrand (gemessen
   #73: scrollWidth 380) — Datum, Betrag und „Herunterladen" brechen nicht um. Schmaler Knopf und
   notfalls Wischen in der Karte statt in der Seite. */
@media (max-width: 420px) {
    .kostentabelle .pdf .knopf-klein { padding-left: 0.5rem; padding-right: 0.5rem; }
    .kostentabelle th, .kostentabelle td { padding-left: 0.15rem; padding-right: 0.15rem; }
    #rechnungen { overflow-x: auto; }
}

/* Mein Profil (#56): die E-Mail steht nur da — sichtbar nicht als Eingabe. */
.feld input[readonly] { background: var(--bg-muted); color: var(--text-secondary); }

/* Neuer Bericht (#50): Pflicht sichtbar wie im Wizard (#47) — ein Chip am
   Feld, „optional" einmal über den weiteren Angaben. */
.chip {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: 0.1em;
}
.chip-pflicht { background: var(--accent-soft); color: var(--accent-text, #9A4B12); }
.chip-optional { background: var(--bg-muted); color: var(--text-secondary); font-weight: 600; }
.berichtanlage h2.abschnitt { margin: 1.5rem 0 0.75rem; font-size: var(--text-base); }
.berichtanlage .knopfreihe { margin-top: 1.25rem; }

/* Monteur eines zugewiesenen Berichts (#50): Auswahl und Knopf auf einer
   Linie, darunter der Link zum Kopieren. */
.zuweisung .feldpaar { align-items: flex-end; }
.zuweisung .feldpaar > .feld-knopf { flex: 0 0 auto; }

/* Kopf der Berichtsliste (#50): „Alle herunterladen" und „Neuer Bericht" rechts beieinander. */
.kopfknoepfe-rechts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.zuweisung > p.klein:first-child { margin-top: 0; }

/* ── Plausibilitätsprüfung (KI) auf der Berichtsseite (#93) ────────────────
   Die Karte steht unter der Kopfleiste, außerhalb des Formulars der
   Prüfmaske. Der Normalfall ist EINE Zeile (.ruhig): grüner Haken, kleine
   Meta, rechts „Erneut prüfen“. Auffälligkeiten stehen als Befunde mit
   Handgriffen untereinander; unter 480 px stehen die Knöpfe untereinander in
   voller Breite, das Textfeld ist ohnehin voll breit (am Handy geprüft). */
.plausibilitaet .karte-kopf > h2 { font-size: var(--text-base); }
.plausibilitaet.ruhig { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.plausibilitaet-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.plausibilitaet-zeile .knopf { margin-left: auto; }
.plausibel-haken { color: #065F46; font-weight: 600; }
.plausibilitaet-erklaerung { margin: 0 0 0.75rem; }
.plausibilitaet .mehrzeilig { white-space: pre-wrap; }
.plausibilitaet-ohne-skript { display: block; margin-top: 0.25rem; }
.plausibilitaet.mit-skript .plausibilitaet-ohne-skript { display: none; }
.plausibilitaet .meldung { margin-bottom: 0.75rem; }
.plausibilitaet .meldung p { margin: 0 0 0.5rem; }
.plausibilitaet .meldung p:last-child { margin-bottom: 0; }

.befund { border-top: 1px solid var(--border); margin-top: 0.75rem; padding-top: 0.9rem; }
.befund-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; margin-bottom: 0.35rem; }
.befund-text { margin: 0 0 0.35rem; }
.befund.erledigt .befund-kopf,
.befund.erledigt .befund-text { color: var(--text-secondary); }
.befund.erledigt .abzeichen { background: var(--bg-muted); color: var(--text-secondary); }
.befund-erledigt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; margin: 0.35rem 0; }
.befund-ergaenzung {
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}
.befund-ergaenzung p { margin: 0 0 0.25rem; }
.befund-ergaenzung > .klein { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.befund-handgriffe { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.befund-handgriffe .knopf { align-self: flex-start; }
.befund-ergaenzen .feld { margin-bottom: 0.5rem; }
.befund-ergaenzen .feld textarea { min-height: 4.5rem; }
.plausibilitaet-frueher { border-top: 1px solid var(--border); margin-top: 0.75rem; padding-top: 0.6rem; }
.plausibilitaet-frueher .klein { margin: 0 0 0.35rem; }
.plausibilitaet-frueher > div.klein { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.plausibilitaet-fuss { margin-top: 0.75rem; }
/* #107: „Text neu erzeugen“ unter den Hinweisen. */
.plausibilitaet-neu { border-top: 1px solid var(--border); margin-top: 0.75rem; padding-top: 0.75rem; }
.plausibilitaet-neu .knopfreihe { margin: 0 0 0.35rem; }
.plausibilitaet-neu .klein { margin: 0; }

/* #107: „Text neu erzeugen“ unter den Rückfragen des Prüfers (in der Prüfmaske). */
.rueckfragen-neu { margin-top: 1rem; }
.rueckfragen-neu .klein { margin: 0.5rem 0 0; }

/* #107: der unsichtbare Standardknopf der Prüfmaske — Enter speichert, nie „Freigeben“ oder „Text neu erzeugen“. */
.standardknopf {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .plausibilitaet-zeile .knopf { margin-left: 0; }
    .befund-handgriffe .knopf,
    .plausibilitaet .knopfreihe .knopf { width: 100%; align-self: stretch; }
}