/* ============================================================================
   Kundenportal & öffentliche Seiten — Modul-Stylesheet (Tokens).
   Enthält die Fragebogen-/Formular-Klassen (q-*), die früher inline im
   Portal-Layout standen (heute noch von public/report_form.php genutzt).
   ============================================================================ */

.portal-header .brand-name small { color: var(--color-text-faint); }
.portal-main > h1, .portal-main .page-title { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
@media (min-width: 769px) { .portal-main > h1, .portal-main .page-title { font-size: var(--fs-2xl); } }
.portal-main .card { margin-bottom: var(--sp-4); }
.portal-main .card-body[style*="padding: 0"] .table-responsive { padding: 0; }

/* Zurück-Link */
.portal-back { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.portal-back:hover { color: var(--color-text); text-decoration: none; }

/* PLZ-Login-Karten (Portal-Login, Angebots-Login, abgelaufen) */
.auth-page .portal-login-card { width: 100%; max-width: 420px; }

/* Fragebogen-/Formular-Klassen (Legacy q-*) */
.q-progress-bar { background: var(--color-surface-3); border-radius: var(--r-full); height: 8px; overflow: hidden; }
.q-progress-fill { background: var(--color-accent); height: 100%; border-radius: var(--r-full); transition: width var(--dur-slow); }
.q-steps-nav { display: flex; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.q-step-dot { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 600; text-decoration: none; border: 2px solid var(--color-border-strong); color: var(--color-text-muted); background: var(--color-surface); }
.q-step-dot.active { border-color: var(--color-primary); color: var(--color-primary-fg); background: var(--color-primary); }
.q-step-dot.done { border-color: var(--color-success); color: var(--color-success); }
.q-field { margin-bottom: var(--sp-4); }
.q-label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.q-label-sm { display: block; font-weight: 500; font-size: var(--fs-sm); margin-bottom: var(--sp-1); color: var(--color-text-muted); }
.q-optional { font-weight: 400; color: var(--color-text-muted); font-size: var(--fs-sm); }
.q-input-sm { max-width: 200px; }
.q-radio-group, .q-checkbox-group { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.q-radio, .q-checkbox { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); cursor: pointer; min-height: 32px; }
.q-radio input, .q-checkbox input { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; }
.q-row-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-4); }
.q-nav-buttons { display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }
.q-hosting-info { margin-top: var(--sp-3); }
.q-compare-table { width: 100%; font-size: var(--fs-sm); border: 1px solid var(--color-border); border-radius: var(--r-sm); overflow: hidden; }
.q-compare-table th { background: var(--color-surface-2); font-weight: 600; font-size: var(--fs-xs); text-transform: none; padding: var(--sp-2); }
.q-compare-table td { padding: var(--sp-1) var(--sp-2); text-align: center; font-size: var(--fs-sm); }
.q-compare-table td:first-child { text-align: left; font-weight: 500; }
.q-upload-area { margin-bottom: var(--sp-2); }
.q-file-list { margin-bottom: var(--sp-2); }
.q-file-item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--color-surface-2); border-radius: var(--r-sm); margin-bottom: var(--sp-1); font-size: var(--fs-sm); }
.q-dropzone { position: relative; border: 2px dashed var(--color-border-strong); border-radius: var(--r); padding: var(--sp-6); text-align: center; cursor: pointer; transition: border-color var(--dur-fast); }
.q-dropzone:hover { border-color: var(--color-accent); }
.q-dropzone p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.q-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.q-summary-section { margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-border); position: relative; }
.q-summary-section h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--color-accent-text); margin-bottom: var(--sp-2); }
.q-summary-row { font-size: var(--fs-sm); margin-bottom: var(--sp-1); line-height: 1.5; }
.q-summary-label { font-weight: 600; color: var(--color-text-muted); }
.q-edit-link { position: absolute; top: 0; right: 0; font-size: var(--fs-xs); }
.q-info-box { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
.q-info-box p { margin: 0 0 var(--sp-1); }
.q-info-box p:last-child { margin-bottom: 0; }
.q-color-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.q-color-input { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--color-input-border); border-radius: var(--r-sm); cursor: pointer; background: none; }
.q-rights-box { background: var(--color-warning-bg); border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent); border-radius: var(--r-sm); padding: var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text); }

/* ------------------------------------------------------------ Seitenkopf im Portal */
.portal-page-header { margin-bottom: var(--sp-5); }
.portal-page-header .page-title { margin-bottom: var(--sp-1); }
.portal-page-header .page-subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
.portal-page-header.has-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-3); }
.portal-page-header.has-actions > div:first-child { flex: 1 1 260px; min-width: 0; }
.portal-brand-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.portal-brand-logo { height: 48px; width: auto; border-radius: var(--r-sm); flex-shrink: 0; }
.portal-lead { color: var(--color-text-muted); margin: 0 0 var(--sp-5); line-height: 1.55; }
.portal-main.is-narrow { max-width: 720px; }
.portal-main.is-narrow-sm { max-width: 600px; }
.portal-main .alert { margin-bottom: var(--sp-4); }

/* Karten-Titel mit Icon im Portal */
.portal-main .card-title .icon { color: var(--color-accent-text); }

/* Abschluss-/Danke-Karten */
.portal-result { text-align: center; padding: var(--sp-8) var(--sp-5); }
.portal-result-icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); background: var(--color-success-bg); color: var(--color-success); }
.portal-result-icon .icon { width: 32px; height: 32px; }
.portal-result-icon.is-muted { background: var(--color-surface-2); color: var(--color-text-muted); }
.portal-result-icon.is-info { background: var(--color-info-bg); color: var(--color-info); }
.portal-result h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-2); }
.portal-result p { color: var(--color-text-muted); max-width: 48ch; margin: 0 auto; line-height: 1.55; }
.portal-result .btn { margin-top: var(--sp-5); }
.portal-result .btn-group { justify-content: center; margin-top: var(--sp-5); }
.portal-result .btn-group .btn { margin-top: 0; }
.portal-result .portal-quote { margin-top: var(--sp-5); text-align: left; }

/* Zitat-/Hinweisblock (Begründung, Anforderung) */
.portal-quote { background: var(--color-surface-2); border: 1px solid var(--color-border); border-left: 4px solid var(--color-border-strong); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-quote.is-warning { background: var(--color-warning-bg); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); border-left-color: var(--color-warning); color: var(--color-warning); }
.portal-quote.is-danger { background: var(--color-danger-bg); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); border-left-color: var(--color-danger); color: var(--color-danger); }
.portal-quote-label { display: block; font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-1); opacity: 0.85; }

/* Revisionen: Liste eingereichter Runden */
.rev-history { list-style: none; margin: 0; padding: 0; }
.rev-history li { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.rev-history li:last-child { border-bottom: 0; }
.rev-history .rev-history-actions { margin-left: auto; display: flex; gap: var(--sp-1); }
.rev-quota { margin: 0 0 var(--sp-3); line-height: 1.55; }
.rev-quota small { display: block; margin-top: 2px; }

/* Eingereichte Revision: Einträge */
.rev-entry { border-left: 3px solid var(--color-accent); background: var(--color-surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.rev-entry-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: var(--sp-1); }
.rev-entry p { margin: 0 0 var(--sp-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.file-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.file-chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--r-sm); background: var(--color-surface); color: var(--color-text); font-size: var(--fs-xs); text-decoration: none; max-width: 100%; }
.file-chip:hover { border-color: var(--color-accent); text-decoration: none; }
.file-chip .icon { color: var(--color-accent-text); flex-shrink: 0; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Portal-Tabellen: Dateinamen und Notizen begrenzen */
.portal-table .col-file { max-width: 260px; overflow-wrap: anywhere; }
.portal-table .col-note { max-width: 260px; }
.portal-table .col-actions { white-space: nowrap; }
.portal-table .col-actions .btn-group { justify-content: flex-end; flex-wrap: nowrap; }
.portal-table .col-actions form { display: contents; }
@media (max-width: 768px) {
    .portal-table .col-file, .portal-table .col-note { max-width: none; }
    .table-cards.portal-table td.col-actions { grid-template-columns: 1fr; padding-top: var(--sp-3); }
    .table-cards.portal-table td.col-actions::before { display: none; }
    .table-cards.portal-table td.col-actions .btn-group { justify-content: stretch; }
    .table-cards.portal-table td.col-actions .btn { flex: 1; }
}

/* Meldungen (Dashboard + öffentliches Formular) */
.report-type-select { max-width: 320px; }
.report-my-title { font-size: var(--fs-base); font-weight: 600; margin: var(--sp-6) 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.report-status-meta { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--color-text-muted); margin: var(--sp-3) 0; }
.report-status-meta strong { color: var(--color-text); }
.report-status-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }

/* Fragebogen (Portal) */
.qf-step-num { color: var(--color-accent-text); margin-right: 0.25em; }
.qf-savestate { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-3); }

/* Honeypot-Feld (bleibt für Menschen unsichtbar) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Button-Gruppen im Portal: am Handy untereinander und volle Breite (lange Beschriftungen) */
@media (max-width: 600px) {
    .portal-main .card-body > .btn-group { flex-direction: column; align-items: stretch; }
    .portal-main .card-body > .btn-group .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ============================================================================
   Dokumentseiten im Portal: Abnahmeerklärung (Backlog 25) und Vertrag
   (Backlog 26). Beides sind Seiten, die gelesen und unterschrieben werden —
   kein Portal-Menü, dafür eine ruhige Spalte und ein großer Lesetext.
   ============================================================================ */
.portal-doc-head { max-width: 52rem; margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-5); text-align: center; }
.portal-doc-head .brand-mark { margin-bottom: var(--sp-3); }
/* `anywhere` trennt mitten im Wort und ohne Trennstrich — bei
   „Allgemeine Geschäftsbedingungen“ am Handy stand dann
   „Geschäftsbedingung / en“. `break-word` bricht nur, wenn es sein muss,
   und `hyphens` setzt dabei einen Trennstrich (das Dokument ist als
   deutsch ausgezeichnet, sonst würde die Silbentrennung nicht greifen). */
.portal-doc-head h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-1); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.portal-doc-head p { margin: 0; font-size: var(--fs-sm); }
@media (min-width: 769px) { .portal-doc-head h1 { font-size: var(--fs-2xl); } }

.portal-doc { width: 100%; max-width: 52rem; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-10); }
.portal-doc > .alert { margin-bottom: var(--sp-4); }

/* Mängelkasten der Abnahme: abgesetzt, damit niemand ihn überliest. */
.portal-defects { border-left: 3px solid var(--color-warning); background: var(--color-warning-bg); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0 0; overflow-wrap: anywhere; }
.portal-defects p { margin: 0 0 var(--sp-2); }
.portal-defects p:last-child { margin-bottom: 0; }

/* Abnahme im Portal: Parteien nebeneinander wie im PDF, am Handy untereinander.
   Der Text darunter nimmt die Gliederung von .terms-body. */
.acceptance-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); line-height: 1.55; }
.acceptance-party-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: var(--sp-1); }
.terms-body .acceptance-choice { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: grid; gap: var(--sp-2); }
.terms-body .acceptance-choice li { margin: 0; display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--color-text-muted); }
.acceptance-choice li .icon { flex-shrink: 0; margin-top: 0.2em; }
.acceptance-choice li.is-chosen { color: var(--color-text); font-weight: 600; }
.acceptance-choice li.is-chosen .icon { color: var(--color-success); }
.terms-body .portal-defects { margin: 0 0 var(--sp-3); }

/* Auftrag auf der Projektseite: Beauftragungsdaten und die vereinbarten AGB/AVV. */
.portal-order-summary p + p { margin-top: var(--sp-2); }
.portal-order-summary .btn-group { margin-top: var(--sp-3); }
.portal-terms-links { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Inhaltsverzeichnis des Vertrags. Die Nummern kommen aus der Liste selbst —
   nie aus dem Text, sonst stimmen sie nach dem Wegfall einer Klausel nicht. */
.contract-toc ol { margin: 0; padding-left: 1.6em; }
.contract-toc ol > li { margin-bottom: var(--sp-1); }
.contract-toc a { color: var(--color-text); text-decoration: none; }
.contract-toc a:hover, .contract-toc a:focus-visible { color: var(--color-accent-text); text-decoration: underline; }
.contract-toc-annex { list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--color-border); }
.contract-toc-annex > li { margin-bottom: var(--sp-1); }

/* Vertragstext. Große Zeilenhöhe, weil hier wirklich gelesen wird. */
.contract-body .card-body { line-height: 1.7; overflow-wrap: anywhere; }
.contract-body h2 { font-size: var(--fs-lg); margin: var(--sp-8) 0 var(--sp-2); scroll-margin-top: var(--sp-4); }
.contract-body h2:first-child { margin-top: 0; }
.contract-body p { margin: 0 0 var(--sp-3); }
.contract-body ul, .contract-body ol { margin: 0 0 var(--sp-3); padding-left: 1.4em; }
.contract-body li { margin-bottom: var(--sp-1); }
.contract-body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.contract-body th, .contract-body td { border: 1px solid var(--color-border); padding: var(--sp-2); text-align: left; vertical-align: top; }
.contract-annex-title { padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }

/* AGB und AVV, oeffentlich (templates/public/terms/show.php). Dieselbe Idee
   wie beim Vertragstext: grosse Zeilenhoehe, weil hier wirklich gelesen wird.
   Nur Tokens, keine Hex-Werte — die Seite folgt der Systemeinstellung des
   Besuchers und hat keine eigenen Dunkel-Regeln. */
.terms-title { margin: 0 0 var(--sp-1); }
.terms-meta { margin: 0 0 var(--sp-4); color: var(--color-text-muted); font-size: var(--fs-sm); }
.terms-actions { margin: 0 0 var(--sp-4); }
.terms-toc { margin: 0 0 var(--sp-6); padding: var(--sp-4); background: var(--color-surface-2); border-radius: var(--r-md); }
.terms-toc-title { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.terms-toc ul { list-style: none; margin: 0; padding: 0; }
.terms-toc li { margin-bottom: var(--sp-1); }
.terms-toc li.is-sub { padding-left: var(--sp-4); font-size: var(--fs-sm); }
.terms-toc a { color: var(--color-text); text-decoration: none; }
.terms-toc a:hover, .terms-toc a:focus-visible { color: var(--color-accent-text); text-decoration: underline; }
.terms-body { line-height: 1.7; overflow-wrap: anywhere; }
.terms-body h2 { font-size: var(--fs-lg); margin: var(--sp-8) 0 var(--sp-2); scroll-margin-top: var(--sp-4); }
.terms-body h2:first-child { margin-top: 0; }
.terms-body h3 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2); scroll-margin-top: var(--sp-4); }
.terms-body p { margin: 0 0 var(--sp-3); }
.terms-body ul, .terms-body ol { margin: 0 0 var(--sp-3); padding-left: 1.4em; }
.terms-body li { margin-bottom: var(--sp-1); }
/* Nummern aus TermsService::withAnchors(). Sie hängen links außerhalb der
   Textspalte, damit die Zeilen bündig bleiben und die Nummer beim Suchen
   ins Auge fällt; unterhalb von 640 px ist dafür kein Platz, dort steht
   sie im Fließtext. */
.terms-no { color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.terms-body h3 .terms-no { color: var(--color-text-muted); }
.terms-toc .terms-no { margin-right: 0.15em; }
@media (min-width: 640px) {
    /* Nur was eine Nummer trägt, wird eingerückt — die Einleitung vor dem
       ersten Punkt hat keine und stünde sonst ohne Grund im Nirgendwo. */
    .terms-body p:has(.terms-no), .terms-body h3:has(.terms-no),
    .terms-body h2:has(.terms-no) { position: relative; padding-left: 3.2em; }
    .terms-body :is(p, h2, h3) > .terms-no { position: absolute; left: 0; top: 0; }
    /* Aufzählungen gehören zu dem Absatz, der sie ankündigt — also in
       dieselbe Textspalte und nicht an den linken Rand. */
    .terms-body ul, .terms-body ol { margin-left: 3.2em; }
}

/* ============================================================================
   Gliederung nach dem Portal-Umbau 2026-09 (docs/portal-refresh/PLAN.md)
   ============================================================================ */

/* Beschreibung des Projekts direkt unter dem Titel, statt als eigene Karte. */
.portal-page-header .portal-lead { margin: var(--sp-3) 0 0; max-width: 70ch; }

/* Admin-Vorschau: klebt oben, damit er beim Scrollen nicht verschwindet. */
.portal-preview-banner { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--color-warning-bg); color: var(--color-text); border-bottom: 1px solid var(--color-border-strong); font-size: var(--fs-sm); }
.portal-preview-banner > .icon { color: var(--color-warning); flex-shrink: 0; }
.portal-preview-banner > span { flex: 1 1 16rem; }

/* „Wartet auf dich“ / „Jetzt zu tun“ */
.portal-nothing { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--color-text-muted); }
.portal-nothing .icon { color: var(--color-success); }
.portal-todo { display: flex; align-items: flex-start; gap: var(--sp-3); }
.portal-todo-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--color-accent-soft); color: var(--color-accent-text); }
.portal-todo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portal-todo-title { font-weight: 600; overflow-wrap: anywhere; }

/* Eingeklappte Bereiche: „Frühere Projekte“, Meldeformular */
.portal-disclosure { border-top: 1px solid var(--color-border); }
.portal-disclosure > summary { min-height: var(--touch); padding: var(--sp-2) var(--sp-4); font-weight: 600; font-size: var(--fs-sm); color: var(--color-text); user-select: none; }
.portal-disclosure > summary:hover { background: var(--color-surface-2); }
.portal-disclosure > summary > .icon:first-child { color: var(--color-text-muted); transition: transform var(--dur) var(--ease); }
.portal-disclosure[open] > summary > .icon:first-child { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .portal-disclosure > summary > .icon:first-child { transition: none; } }

/* Zwischenüberschriften in einer Karte (Dokumente je Projekt, Rechnungen/Abos) */
.portal-group-title { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-1); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.card-header + .portal-group-title { border-top: 0; }
.portal-section-title { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.portal-divider { border: 0; border-top: 1px solid var(--color-border); margin: var(--sp-4) 0; }

/* Projektfortschritt: ganze Wörter statt „Kennenlerngesp / räch“ (Befund 20).
   Etwas breitere Schritte und Silbentrennung statt Umbruch an jeder Stelle. */
.portal-main .stage-step { flex-basis: 112px; min-width: 112px; }
.portal-main .stage-step-label { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* Gestaltungs-Credit */
.portal-footer { display: flex; justify-content: center; }
.portal-credit { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); color: var(--color-text-muted); text-decoration: none; }
.portal-credit:hover { color: var(--color-text); text-decoration: none; }
.portal-credit img { height: 44px; width: auto; }

@media (max-width: 768px) {
    /* Leere Zellen („Verknüpft mit –“) sind am Handy nur Rauschen (Befund 21).
       Am Desktop bleiben sie stehen, sonst verrutschen die Spalten. */
    .table-cards.portal-table td.is-empty { display: none; }

    /* Trefferflächen ≥ 44 px (Befund 22). Die kleinen Knöpfe aus components.css
       sind am Handy 40 px hoch — im Portal tippt fast jeder mit dem Daumen. */
    .portal-main .btn-sm, .portal-header .btn-sm, .portal-preview-banner .btn-sm { min-height: var(--touch); }
    .portal-main .btn-icon.btn-sm { width: var(--touch); min-width: var(--touch); }
}

/* Rückweg ins Portal auf den Dokumentseiten: linksbündig über dem zentrierten Kopf. */
.portal-doc-head > .portal-back { display: flex; width: fit-content; margin-right: auto; }
.op-portal-head .portal-back { display: flex; width: fit-content; }

/* Revisionsseite: Hinweis auf die Abnahme über dem Absenden (Befund 9). */
.rev-acceptance-hint { margin: var(--sp-4) 0; }

/* Kopf: Hell/Dunkel-Umschalter neben Abmelden. Auf sehr schmalen Handys bleibt
   von „Abmelden“ nur das Symbol, damit Logo, Umschalter und Abmelden in eine Zeile passen. */
.portal-header-actions { gap: var(--sp-2); }
.portal-theme-toggle { width: var(--touch); min-width: var(--touch); height: var(--touch); }
@media (max-width: 379px) {
    .portal-logout-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .portal-logout { width: var(--touch); min-width: var(--touch); padding: 0; justify-content: center; }
}