/* ═══════════════════════════════════════════════════════════════
   Kundenportal — die Teile der Portalseiten (toloro#4635)
   ═══════════════════════════════════════════════════════════════

   Was nur eine Portalseite braucht — Übersicht, Projektseite, Verlauf,
   Listen, Schadenmeldung. Bis toloro#4635 stand das als
   `<style>`-Block in jeder Vorlage, mit eigener Palette (Süd-West-Cyan
   fest im Code). Jetzt nur Tokens und Hausfarbe aus kundenseite.css;
   Bausteine (`.card`, `.btn`, `.badge-…`, `.table`, `.empty-state`)
   kommen von dort und werden hier nicht nachgebaut.

   Der Inhalt der Seiten ist unverändert (Paket P1, Leit #4634) — die
   Pakete P2 bis P5 schneiden Startseite, Projektseite, Listen und
   Schadenmeldung neu und räumen dabei hier auf.
   ═══════════════════════════════════════════════════════════════ */

/* ── Gemeinsames ─────────────────────────────────────────────── */
.abschnitt-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: 12px;
}

.suchfeld {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 16px;
    color: var(--text-secondary);
}

.suchfeld-eingabe {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: var(--text-base);
}

.suchfeld-eingabe::placeholder { color: var(--text-muted); }

/* Der Rahmen der Karte trägt den Fokus des Felds — das Feld selbst hat
   keinen eigenen Rand (Ring aus dem Token, wie überall). */
.suchfeld:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-abstand);
    border-radius: var(--radius-md);
}

.suchfeld-eingabe:focus,
.suchfeld-eingabe:focus-visible { outline: none; }

.knopf-inhalt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.kundendialog-offen { overflow: hidden; }

/* ── Übersicht (toloro#4637) ─────────────────────────────────── */
/* Zu erledigen · Nächste Termine · Ihre Projekte · Neuigkeiten — eine Spalte
   in dieser Reihenfolge, am Handy wie am PC. Die Zeilen sind die der Listen
   (Beleg-, Termin-, Projektzeile). */
.uebersicht {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Der Link auf die ganze Liste unter einem Abschnitt — ein Touch-Ziel. */
.abschnitt-fuss a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
}

/* Am Handy stehen „Zu erledigen" und „Nächste Termine" im ersten Bildschirm
   (Zielbild 3.2): Die Belegzeile wird knapp — Beleg, darunter Datum und
   Projekt in einer Reihe, dann Stand, Zahlstand und Betrag, dann die Knöpfe —,
   und es stehen höchstens zwei Einträge da. Der Rest ist einen Tipp entfernt
   („Alle n offenen Belege"); am PC bleiben es drei. Die Zähler im Kopf sind
   Links und brauchen wie alle Touch-Ziele 44 px. */
@media (max-width: 767px) {
    .uebersicht .belegzeile {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "haupt haupt haupt"
            "stand zahlstand betrag"
            "aktionen aktionen aktionen";
        row-gap: 4px;
        /* schmaler als in den Listen: „überfällig seit 13.03.2026" bleibt
           neben einem fünfstelligen Betrag eine Zeile (QA zu toloro#4637). */
        column-gap: 8px;
    }

    .uebersicht .beleg-zahlstand {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 8px;
    }

    .uebersicht .zeilenliste > .belegzeile:nth-child(n + 3) { display: none; }

    /* „Herunterladen" als Symbol: Der Name steht im aria-label, und die
       Knöpfe bleiben in einer Reihe. */
    .uebersicht .knopf-wort { display: none; }

    .uebersicht a.card-header-subtitle,
    .als-naechstes-text a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Das Wort eines Knopfs, der am Handy der Übersicht nur sein Symbol zeigt. */
.knopf-wort { white-space: nowrap; }

/* „kein PDF" — ein Satz an der Stelle des Knopfs,
   ruhig, nicht als Knopf gestaltet. */
.handlung-wartet {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Projektseite (toloro#4637) ──────────────────────────────── */
/* Kopf: Stand als Wort, Nummer, Schadenart, Ort; darunter der
   Ansprechpartner mit Büro-Telefon und Mail. */
.projektkopf {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.projektkopf-angaben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.projektkopf-kontakt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 16px;
}

.projektkopf-kontakt .zeile-wert-name { flex-basis: 100%; }
.projektkopf-person { font-weight: 600; }

/* Als Nächstes: die offenen Belege als Zeilen, darunter Termin und letzter Schritt. */
.als-naechstes { margin-top: 16px; }
.als-naechstes .zeilenliste { border-bottom: 1px solid var(--border); }
.als-naechstes-text { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }

/* Die Reiter: Links mit ?reiter=, die Zahl als ruhige Marke daneben. */
.projekt-reiter { margin: 24px 0 16px; }

.projekt-reiter .tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.reiter-zahl {
    padding: 0 8px;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tab[aria-current="page"] .reiter-zahl { background: var(--marke-soft); color: var(--marke-text); }

.reiter-inhalt + .reiter-inhalt { margin-top: 16px; }

/* Dateien: Dokumente als Zeilen, Knöpfe beschriftet. */
.dateizeile { grid-template-columns: minmax(0, 1fr) auto; }

/* Angaben: Wert vor Beschriftung, Lesetext begrenzt. */
.angaben-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.angaben-eintrag { min-width: 0; }
.angaben-eintrag--breit { grid-column: 1 / -1; }

.angaben-eintrag dt {
    margin-bottom: 2px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.angaben-eintrag dd {
    font-weight: 500;
    overflow-wrap: anywhere;
    max-width: 70ch;
}

/* Der Statusverlauf eines Belegs klappt unter seiner Zeile auf. */
.belegzeile .doc-history { grid-column: 1 / -1; }

.doc-history {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.doc-history-empty { color: var(--text-secondary); max-width: 70ch; }
.doc-history-list { display: flex; flex-direction: column; gap: 4px; color: var(--text); }

.doc-history-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.doc-history-arrow { color: var(--text-secondary); }
.doc-history-date { min-width: 110px; font-weight: 600; }

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

/* Eine Bildkachel ist ein Knopf (Tab, Enter) — er öffnet die Großansicht. */
.bildkachel {
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    text-align: left;
    cursor: zoom-in;
}

.bildkachel:hover { border-color: var(--marke); box-shadow: var(--shadow-sm); }

.image-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--bg-muted);
}

.image-frame img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s;
}

.image-frame .ladekreis { position: absolute; width: 24px; height: 24px; }
.image-frame.loaded img { opacity: 1; }
.image-frame.loaded .ladekreis { display: none; }

.file-card-name {
    display: block;
    margin-top: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .projektkopf-kontakt a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Dialoge der Projektseite ────────────────────────────────── */
.kundendialog-karte--pdf { height: calc(100dvh - 48px); }
.kundendialog-karte--bild { max-width: 1100px; }

.kundendialog-pdf {
    width: 100%;
    height: 100%;
    border: none;
}

.kundendialog-inhalt--bild {
    min-height: 240px;
    padding: 12px;
    background: var(--bg-muted);
}

.kundendialog-bild {
    max-width: 100%;
    max-height: calc(100dvh - 220px);
    object-fit: contain;
    margin: auto;
}

.kundendialog-ladekreis {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -16px 0 0 -16px;
}

.kundendialog-stand {
    align-self: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Schadenmeldung (toloro#4639) ────────────────────────────── */
/* Der Assistent: Schrittanzeige, je Schritt ein Formular, die Objekte des
   Kunden als Radio-Gruppe, Feldgruppen als fieldset. Touch-Ziele 44 px,
   unter 640 px eine Spalte (keine waagrechte Scrollfläche). */
.dr-serverfehler { flex-wrap: wrap; gap: 4px 8px; }

.dr-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    padding: 0 16px;
    list-style: none;
}

.dr-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.dr-progress-step.active { color: var(--marke-text); }

.dr-progress-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-weight: 700;
}

.dr-progress-step.active .dr-progress-dot { background: var(--marke); color: white; }

.dr-progress-line {
    width: 80px;
    height: 3px;
    margin: 0 8px 22px;
    border-radius: 2px;
    background: var(--border);
    flex-shrink: 1;
}

.dr-progress-line.active { background: var(--marke); }

.dr-step-card { padding: 32px; }

.dr-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-size: var(--text-xl);
}

/* Der Fokus landet nach jedem Schrittwechsel hier (tabindex="-1"); die
   Überschrift ist kein Bedienelement und trägt keinen Ring. */
.dr-step-title:focus { outline: none; }

.dr-step-symbol { color: var(--marke-text); flex-shrink: 0; }

.dr-hint {
    margin-bottom: 16px;
    color: var(--text-secondary);
}

/* Feldgruppen als fieldset — ohne Rahmen des Browsers und ohne dessen
   Mindestbreite, die am Handy seitlich hinausragen ließe. */
.dr-ortwahl,
.dr-gruppe {
    min-width: 0;
    margin: 0 0 20px;
    padding: 0;
    border: none;
}

.dr-optional { font-weight: 400; color: var(--text-secondary); }
.dr-gruppe-hinweis { margin: 0 0 12px; }

.dr-suche { margin-bottom: 12px; }
.dr-suche .form-hint { margin-top: 6px; }

.dr-adressliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
    list-style: none;
}

/* Ein Objekt ist eine Zeile der Radio-Gruppe: Pfeiltasten wählen, die
   ganze Fläche ist das Touch-Ziel. */
.dr-adresse {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    cursor: pointer;
}

.dr-adresse:hover { border-color: var(--marke); }

.dr-adresse.selected {
    border-color: var(--marke);
    background: var(--marke-soft);
}

.dr-adresse:has(.dr-adresse-wahl:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-abstand);
}

.dr-adresse-wahl {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--marke);
}

.dr-adresse--neu { margin-top: 8px; }

.dr-address-text { flex: 1; min-width: 0; }

.dr-address-street,
.dr-address-city,
.dr-address-insurance { display: block; overflow-wrap: anywhere; }

.dr-address-street { font-weight: 600; }
.dr-address-city { font-size: var(--text-sm); color: var(--text-secondary); }

.dr-address-insurance {
    margin-top: 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--info-text);
}

.dr-alle { margin-bottom: 4px; }

.dr-leer { padding: 24px 16px; }
.dr-leer-knoepfe { justify-content: center; margin-top: 12px; }

.dr-zeile {
    padding: 16px;
    border-radius: var(--radius);
    background: var(--bg-muted);
}

.dr-lesart {
    margin-top: 6px;
    font-size: var(--text-sm);
    color: var(--text);
    overflow-wrap: anywhere;
}

.dr-wahlliste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dr-wahl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    font-size: var(--text-sm);
    cursor: pointer;
}

.dr-wahl input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--marke);
}

.dr-wahl:has(input:checked) {
    border-color: var(--marke);
    background: var(--marke-soft);
}

.dr-insurance-section {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-subtle);
}

.dr-insurance-section legend { float: left; width: 100%; margin-bottom: 4px; }
.dr-insurance-section legend + * { clear: both; }
.dr-insurance-section .form-group { margin-bottom: 12px; }

.dr-feldpaar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 16px;
}

.dr-feldpaar .form-group { margin-bottom: 0; }

.dr-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border: 2px dashed var(--border-control);
    border-radius: var(--radius);
    text-align: center;
}

.dr-dropzone-active { border-color: var(--marke); background: var(--marke-soft); }
.dr-dropzone-hint { font-size: var(--text-sm); color: var(--text-secondary); }
.dr-dropzone-symbol { width: 40px; height: 40px; color: var(--text-secondary); }

/* Das Dateifeld liegt unsichtbar im Knopf — der Fokus des Felds zeigt sich
   am Knopf. */
.dr-datei-knopf:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-abstand);
}

.dr-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    list-style: none;
}

.dr-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}

.dr-file-preview {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 6px;
}

.dr-file-preview img { width: 100%; height: 100%; object-fit: cover; }
.dr-file-icon { flex-shrink: 0; color: var(--text-secondary); }
.dr-file-info { display: flex; flex-direction: column; min-width: 0; }

.dr-file-name {
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dr-file-size { font-size: var(--text-xs); color: var(--text-secondary); }

.dr-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.dr-file-remove:hover { background: var(--danger-soft); color: var(--danger-text); }

/* Eine betroffene Person: vier beschriftete Felder in einer Reihe, am
   Handy untereinander. */
.dr-party {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}

.dr-party-felder {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 8px 12px;
}

.dr-party-feld { min-width: 0; }
.dr-party-feld .form-label { margin-bottom: 4px; font-size: var(--text-xs); }
.dr-party-remove { flex-shrink: 0; }

.dr-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.dr-folge { margin-top: 16px; }

.dr-summary-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.dr-summary-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: var(--text-base);
    font-weight: 700;
}

.dr-summary-edit {
    min-height: 44px;
    padding: 0 8px;
    border: none;
    background: none;
    color: var(--marke-text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.dr-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.dr-summary-item { min-width: 0; }

.dr-summary-key {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

.dr-summary-val { font-weight: 600; overflow-wrap: anywhere; }

.dr-summary-desc {
    margin-top: 8px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.dr-summary-files { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }

.dr-summary-file {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.dr-summary-file-thumb { width: 32px; height: 32px; flex-shrink: 0; overflow: hidden; border-radius: 4px; }
.dr-summary-file-thumb img { width: 100%; height: 100%; object-fit: cover; }

.dr-summary-parties { display: flex; flex-direction: column; gap: 8px; list-style: none; }

.dr-summary-party {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    overflow-wrap: anywhere;
}

@media (max-width: 639px) {
    .dr-step-card { padding: 20px 16px; }
    .dr-adressliste { grid-template-columns: minmax(0, 1fr); }
    .dr-progress { padding: 0; }
    .dr-progress-line { width: 24px; margin: 0 4px 22px; }
    .dr-party { flex-direction: column; align-items: stretch; }
    .dr-party-felder { grid-template-columns: minmax(0, 1fr); }
    .dr-actions { flex-direction: column-reverse; align-items: stretch; }
    .dr-actions .btn { width: 100%; }
    .dr-summary-grid { grid-template-columns: minmax(0, 1fr); }
    .dr-wahl { width: 100%; }
}

/* Nach dem Absenden: was jetzt passiert, wie man das Büro erreicht. */
.dr-done-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 24px;
    text-align: center;
}

.dr-done-icon { margin-bottom: 24px; }
.dr-done-check { width: 80px; height: 80px; margin: 0 auto; }

.dr-done-circle {
    stroke: var(--success-strong);
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: dr-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.dr-done-path {
    stroke: var(--success-strong);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: dr-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
}

@keyframes dr-stroke { 100% { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .dr-done-circle,
    .dr-done-path { animation: none; stroke-dashoffset: 0; }
}

.dr-done-title {
    margin-bottom: 8px;
    font-size: var(--text-xl);
    color: var(--success-text);
}

.dr-done-zwischentitel {
    margin: 24px 0 8px;
    font-size: var(--text-base);
    text-align: left;
}

.dr-done-schritte {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 20px;
    text-align: left;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.dr-done-telefon { font-weight: 600; white-space: nowrap; text-decoration: underline; }
.dr-done-knoepfe { justify-content: center; margin-top: 32px; }

/* ── Anmeldung (toloro#4639) ─────────────────────────────────── */
/* Der Hinweis über dem Formular trägt Sätze, keine Zeile mit Symbol. */
.anmeldung-hinweis { display: block; line-height: 1.5; }

/* Die Büro-Nummer im Hinweis: in der Farbe des Hinweises (die Hausfarbe
   hält auf dessen Fläche nicht sicher 4,5:1) und unterstrichen, damit der
   Link nicht nur an der Farbe hängt. */
.anmeldung-hinweis a,
.dr-serverfehler a,
.info-karte a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* Beschriftung und ⓘ in einer Zeile; die Karte klappt darunter auf. */
.feld-kopf {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.feld-kopf .form-label { margin-bottom: 0; }
.feld-kopf + .info-karte { margin: 0 0 8px; }

.anmeldung-plz { max-width: 200px; }

@media (max-width: 719px) {
    .inhalt--schmal form .btn { width: 100%; }
}

/* ── Verlauf (toloro#4636) ───────────────────────────────────── */
/* Projektseite und Neuigkeiten der Übersicht: Einträge unter Tagesköpfen,
   Filter-Pillen mit Zahl, Zähler, „Ältere Einträge laden". Der Text steht
   ohne Skript ganz da; portal2-verlauf.js kürzt ihn auf drei Zeilen
   (.verlauf-text--gekappt) und setzt „weiterlesen" dahinter. */
.verlauf-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Die aktive Pille: gefüllt und fett — Form und Gewicht, nicht nur Farbe. */
.verlauf-pille {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-full);
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 400;
}

.verlauf-pille:hover { background: var(--bg-muted); color: var(--text); text-decoration: none; }

.verlauf-pille[aria-current="true"],
.verlauf-pille[aria-current="true"]:hover {
    border-color: var(--marke);
    background: var(--marke);
    color: white;
    font-weight: 700;
}

.verlauf-pille-zahl {
    min-width: 24px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
}

.verlauf-pille[aria-current="true"] .verlauf-pille-zahl {
    background: var(--bg);
    color: var(--marke-text);
}

.verlauf-stand {
    margin-top: 12px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.verlauf-liste { margin-top: 8px; }

/* Dicht wie eine Liste: Am Handy stehen 25 Einträge in höchstens drei
   Bildschirmen (Akzeptanz toloro#4636), der Tageskopf trennt durch Gewicht
   und Linie, nicht durch Luft. */
.verlauf-tag + .verlauf-tag { margin-top: 8px; }

.verlauf-tag-kopf {
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
}

.verlauf-eintraege {
    margin: 0;
    padding: 0;
    list-style: none;
}

.verlauf-eintrag {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.verlauf-eintrag:last-child { border-bottom: none; }
.verlauf-eintrag:focus { outline: none; }
.verlauf-eintrag:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-abstand); }

.verlauf-eintrag-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    font-size: var(--text-sm);
}

.verlauf-zeit {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.verlauf-etikett { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.verlauf-wer { color: var(--text-secondary); overflow-wrap: anywhere; }

.verlauf-projekt {
    display: inline-block;
    margin-top: 2px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--marke-text);
    overflow-wrap: anywhere;
}

/* Am Handy ist der Projektname der Neuigkeiten ein Touch-Ziel wie jeder
   Knopf (Hausregel „Kundenseiten“: 44 px). */
@media (max-width: 767px) {
    .verlauf-projekt {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin-top: 0;
    }
}

.verlauf-text {
    max-width: 70ch;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--text-secondary);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.verlauf-text--gekappt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.btn.verlauf-weiterlesen {
    padding-left: 0;
    padding-right: 0;
    color: var(--marke-text);
    background: transparent;
}

.btn.verlauf-weiterlesen:hover { text-decoration: underline; background: transparent; }

.verlauf-weiter {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.verlauf[aria-busy="true"] .verlauf-liste { opacity: 0.6; }

/* ── Listen: Projekte, Belege, Termine, Ihre Angaben (toloro#4638) ──
   Eine Zeile je Eintrag (Muster L01/L02/L04): vorn worum es geht, dahinter
   die Werte in fester Breite. Unter 1024 px bricht die Zeile um — keine
   Tabelle, keine waagrechte Scrollfläche. Reiter und Filter sind Links,
   die Suche ein Formular mit GET (portal2/listen.html). */
.liste-reiter { margin-bottom: 16px; }

.liste-hinweis {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 16px;
}

.liste-hinweis a { font-weight: 600; }

.liste-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.liste-werkzeuge .suchleiste { flex: 1 1 320px; margin-bottom: 0; }

.suchleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding-right: 12px;
    margin-bottom: 16px;
}

.suchleiste .suchfeld { flex: 1 1 160px; min-width: 0; }

.liste-zaehler {
    margin-bottom: 8px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Zwei Stände zum Umschalten („Alle Stände" · „Nur offene"): Links, der
   aktive trägt aria-current, Fläche und Hausfarbe — nie nur die Farbe. */
.filterwahl {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--bg-muted);
    border-radius: var(--radius-full);
}

.filterwahl-ziel {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.filterwahl-ziel[href]:hover { background: var(--bg); color: var(--text); text-decoration: none; }

.filterwahl-ziel[aria-current="page"] {
    background: var(--bg);
    color: var(--marke-text);
    box-shadow: var(--shadow-sm);
}

.zeilenliste { list-style: none; }

.zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.zeile:last-child { border-bottom: none; }

.zeile-haupt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.zeile-titel { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

a.zeile-titel { color: var(--marke-text); }

.zeile-neben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.zeile-wert { font-size: var(--text-sm); min-width: 0; overflow-wrap: anywhere; }

.zeile-wert-name {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* Projekte: ab 1024 px Projekt · letzter Schritt · nächster Termin. */
@media (min-width: 1024px) {
    .projektzeile { grid-template-columns: minmax(0, 1fr) 240px 150px; }
}

/* Belege: am Handy Beleg und Betrag oben, Stand und Zahlstand darunter,
   die Knöpfe beschriftet in der dritten Reihe; ab 1200 px eine Zeile. */
.belegzeile {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "haupt betrag"
        "stand zahlstand"
        "aktionen aktionen";
}

.belegzeile .zeile-haupt { grid-area: haupt; }
.beleg-stand { grid-area: stand; }

.beleg-betrag {
    grid-area: betrag;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.beleg-zahlstand {
    grid-area: zahlstand;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: var(--text-sm);
}

.belegzeile .zeile-aktionen { grid-area: aktionen; }

.zahlstand { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahlstand--bezahlt { color: var(--success-text); }
.zahlstand--offen { color: var(--text); }
.zahlstand-zusatz { font-size: var(--text-xs); color: var(--text-secondary); }

@media (min-width: 1200px) {
    .belegzeile {
        grid-template-columns: minmax(0, 1fr) 120px 110px 150px auto;
        grid-template-areas: "haupt stand betrag zahlstand aktionen";
    }

    .belegzeile .zeile-aktionen { justify-content: flex-end; }
}

/* Termine: Tag und Uhrzeit vorn, „Erledigt" hinten. */
.termine-kopf { margin-bottom: 24px; }

.termine-abo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.termine-abschnitt { margin-bottom: 32px; }

.terminzeile {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "wann stand"
        "haupt haupt";
}

.termin-wann { grid-area: wann; display: flex; flex-wrap: wrap; gap: 0 12px; }
.terminzeile .zeile-haupt { grid-area: haupt; }
.termin-stand { grid-area: stand; text-align: right; }
.termin-tag { font-weight: 600; }

.termin-uhrzeit {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .terminzeile {
        grid-template-columns: 180px minmax(0, 1fr) 90px;
        grid-template-areas: "wann haupt stand";
    }

    .termin-wann { flex-direction: column; }
}

/* Der Monat als Raster — nur ab 1024 px, am Handy reicht die Liste. */
.monat { display: none; margin-bottom: 32px; padding: 16px; }

@media (min-width: 1024px) {
    .monat { display: block; }
}

.monat-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.monat-titel {
    min-width: 180px;
    text-align: center;
    font-size: var(--text-lg);
    font-weight: 700;
}

.monat-raster {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--text-xs);
}

.monat-raster th {
    padding: 6px 4px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
}

.monat-tag {
    height: 92px;
    padding: 4px;
    vertical-align: top;
    border: 1px solid var(--border);
}

.monat-tag--fremd { background: var(--bg-subtle); color: var(--text-secondary); }
.monat-tag--heute { background: var(--marke-soft); }

.monat-tag-zahl { display: block; margin-bottom: 2px; font-weight: 600; }
.monat-tag--heute .monat-tag-zahl { color: var(--marke-text); }

.monat-termin {
    display: block;
    margin-top: 2px;
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.monat-termin:hover { background: var(--marke-soft); color: var(--marke-text); text-decoration: none; }

.monat-termin--erledigt { color: var(--text-secondary); text-decoration: line-through; }

.monat-mehr { display: block; margin-top: 2px; color: var(--text-secondary); }

/* Ihre Angaben: Kontakte mit anrufbaren Nummern, Objekte mit Projektzahl. */
.angaben-mitteilen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 24px;
}

.angaben-abschnitt { margin-bottom: 32px; }

.kontakt-wege {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    font-size: var(--text-sm);
}

.objektzeile { grid-template-columns: minmax(0, 1fr) auto; }
.objektzeile .zeile-wert { text-align: right; white-space: nowrap; }

@media (min-width: 768px) {
    .kontaktzeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* Am Handy: Die Reiter brechen als Schaltflächen um — eine Unterstreichung
   über drei Zeilen läse sich wie drei Leisten — in den Listen wie auf der
   Projektseite. Touch-Ziele (Reiter, Links in den Zeilen, Filterwahl) 44 px. */
@media (max-width: 767px) {
    .liste-reiter,
    .projekt-reiter {
        gap: 8px;
        border-bottom: 0;
    }

    .liste-reiter .tab,
    .projekt-reiter .tab {
        padding: 10px 14px;
        margin-bottom: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
    }

    .liste-reiter .tab[aria-current="page"],
    .projekt-reiter .tab[aria-current="page"] {
        background: var(--bg-muted);
        border-color: var(--marke);
    }

    .filterwahl-ziel { min-height: 44px; }

    .zeile-neben a,
    .kontakt-wege a,
    a.zeile-titel {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}