:root {
    --primary: #1b2a4a;
    --primary-hover: #0f1d36;
    --accent: #e87722;
    --accent-hover: #d4691e;
    --bg: #f5f7fa;
    --card-bg: #ffffff;
    --text: #1e293b;
    --text-muted: #2d4a7a;
    --border: #e2e8f0;
    --error: #dc2626;
    --success: #16a34a;
    --focus: #e87722;
    --warning: #f59e0b;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* Auth pages */
body:has(.auth-container) {
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.auth-container h1 {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 0.5rem;
}
.subtitle {
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}
.brand { color: var(--accent); }

/* Forms */
.form-group { margin-bottom: 1.25rem; }
label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}
input[type="text"], input[type="email"], input[type="password"], input[type="url"] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
}
input:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.25);
}
/* Buttons: Navy statt Orange für WCAG AA Kontrast (weiß auf navy = 14.22:1) */
.btn-full {
    width: 100%;
    padding: 0.85rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.5rem;
}
.btn-full:hover { background: var(--accent-hover); }
.btn-full:focus { outline: none; box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.4); }
.error-message {
    color: var(--error);
    font-weight: 600;
    text-align: center;
    margin-top: 1rem;
    min-height: 1.5rem;
}
.error-message:empty { display: none; }
.success-message {
    color: var(--success);
    font-weight: 600;
    text-align: center;
    margin-top: 1rem;
}
.auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.auth-links a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
}
.auth-links a:hover { text-decoration: underline; }
.auth-links a:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.auth-links.center { justify-content: center; }

/* Legal pages — Standalone (oeffentliche /impressum, /datenschutz, /nutzungsbedingungen).
   Steve 08.06.2026 (Michael-Befund): der :has(.legal-container)-Body-Selector hat
   in den In-App-Sichten (datensicherheit.html etc.) den Dashboard-Body mit-zentriert,
   weil der Container-Inhalt per fetch in den Dashboard-Rahmen geladen wird.
   Loesung: Body-Zentrierung greift nur, wenn KEINE app-shell vorhanden ist
   (= Standalone). Die In-App-Variante hat ihre eigenen Regeln weiter unten. */
body:has(.legal-container):not(:has(.app-shell)) {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
}
.legal-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2.5rem;
    width: 100%;
    max-width: 700px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.legal-container h1 {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* In-App-Sicht: legal-container ist innerhalb der Dashboard-Hauptflaeche eingebettet.
   Steve 08.06.2026 (Michael-Befund): Inhalt soll linksbuendig erscheinen — konsistent
   mit Projekte/Einstellungen. Box-Stil der Standalone-Variante wird zurueckgenommen,
   weil der Dashboard-Rahmen den Container schon traegt. */
.dash-main .legal-container {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    max-width: none;
    width: auto;
    box-shadow: none;
}
.dash-main .legal-container h1,
.dash-main .legal-container h2,
.dash-main .legal-container h3,
.dash-main .legal-container p,
.dash-main .legal-container .subtitle,
.dash-main .legal-container .legal-date {
    text-align: left;
}
.legal-container h2 {
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
}
.legal-container h3 {
    font-size: 1.05rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}
.legal-container p {
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.legal-container ul {
    margin: 0.5rem 0 1rem 1.5rem;
    line-height: 1.6;
}
.legal-container li {
    margin-bottom: 0.4rem;
}
.legal-container a {
    color: var(--accent);
    text-decoration: underline;
}
.legal-container a:hover {
    color: var(--accent-hover);
}
.legal-container a:focus {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 2px;
}
.legal-container code {
    background: var(--bg);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}
.legal-date {
    margin-top: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* Legal footer on auth and app pages */
.legal-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-muted);
}
.legal-footer a {
    color: var(--text-muted);
    text-decoration: none;
    margin: 0 0.5rem;
}
.legal-footer a:hover {
    color: var(--accent);
    text-decoration: underline;
}
.legal-footer a:focus {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Checkbox group for registration */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.checkbox-group input[type="checkbox"] {
    width: auto;
    margin-top: 0.25rem;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.checkbox-group label {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0;
}
.checkbox-group a {
    color: var(--accent);
    text-decoration: underline;
}
.checkbox-group a:hover {
    color: var(--accent-hover);
}
.checkbox-group a:focus {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* App layout */
header {
    background: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header h1 { font-size: 1.3rem; color: white; }
.header-logo {
    height: 36px;
    width: auto;
    margin-right: 0.75rem;
    vertical-align: middle;
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.header-actions { display: flex; gap: 0.5rem; align-items: center; }
.header-btn {
    background: none;
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}
.header-btn:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); }
.header-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.5); }
.header-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

/* Main content */
.main-content {
    max-width: 900px;
    margin: 2rem 0;
    padding: 0 1.5rem;
}

/* Upload area */
.upload-area {
    background: var(--card-bg);
    border: 2px dashed var(--accent);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    transition: border-color 0.2s;
}
.upload-area:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.15); }
.upload-area h2 { margin-bottom: 0.75rem; font-size: 1.2rem; }
.upload-area p { color: var(--text-muted); margin-bottom: 1rem; }
.upload-btn {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}
.upload-btn:hover { background: var(--primary-hover); }
.upload-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.4); }
input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* Cards */
.section-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.card-name { font-weight: 700; font-size: 1.05rem; }
.card-info { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.75rem; }
.card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Status badges */
.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}
.badge-ready { background: #fff7ed; color: #9a3412; }
.badge-processing { background: #fef3c7; color: #92400e; }
.badge-done { background: #dcfce7; color: #166534; }
.badge-error { background: #fee2e2; color: #991b1b; }
.badge-inactive { background: #f1f5f9; color: #64748b; }
.badge-admin { background: #fff7ed; color: #9a3412; }

/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-secondary { background: var(--bg); border: 2px solid var(--border); color: var(--text); }
.btn-secondary:hover:not(:disabled) { border-color: var(--text-muted); }
.btn-danger { background: var(--error); color: white; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-small { padding: 0.35rem 0.75rem; font-size: 0.8rem; }

/* Progress */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin: 0.75rem 0;
}
.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.5s;
}

/* Image review */
.image-review {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    margin: 0 auto 1rem auto;
    max-width: 800px;
}
.image-heading {
    font-size: 1.15rem;
    margin: 0 0 0.5rem 0;
    color: var(--text, #1a1a1a);
}
/* Multi-Datei Phase 1 (08.06.2026): Export-Auswahl als barrierefreie Radio-Liste.
   WCAG 2.2 AA target-size verlangt 24x24px pro interaktivem Element — Default-
   Browser-Radios bringen nur 13x13. Wir vergroessern sie hier ohne die
   visuelle Anordnung zu verbiegen und legen genug Abstand zwischen die
   Eintraege, damit die "safe clickable area" zwischen Nachbarn ebenfalls
   ueber 24px bleibt. */
.export-scope-fieldset {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    margin: 0 0 0.8rem 0;
}
.export-scope-legend {
    font-weight: 600;
    padding: 0 0.3rem;
}
.export-scope-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.export-scope-item {
    margin: 0;
}
.export-scope-label {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    cursor: pointer;
    /* min-height haelt zusammen mit dem groesseren Radio die 24-px-Marke
       sicher ein und sorgt fuer Touch-freundlichen Tastatur-/Maus-Treffer. */
    min-height: 32px;
    padding: 0.25rem 0.2rem;
}
.export-scope-label:focus-within {
    outline: 2px solid var(--focus, #e87722);
    outline-offset: 2px;
    border-radius: 4px;
}
.export-scope-radio {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    /* native Radio-Erscheinung erhalten — wir vergroessern nur das Target. */
    margin: 0;
}

/* Multi-Datei Phase 1 (08.06.2026): Dokument-Ebene zwischen Projekt und Seite.
   Jede hochgeladene PDF wird zu einem aufklappbaren Dokument-Block. Der Block
   nutzt die gleiche Aesthetik wie page-section, aber mit etwas mehr Gewicht
   (kraeftigere Akzentleiste) und einem groesseren Innenabstand fuer die
   Seitenliste, damit die Hierarchie auch optisch klar ist. */
.doc-section {
    max-width: 820px;
    margin: 1.75rem auto 0.75rem auto;
}
.doc-section > summary {
    cursor: pointer;
    padding: 0.85rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 6px solid var(--accent, #e87722);
    border-radius: 10px;
    margin-bottom: 0.75rem;
}
.doc-section[open] > summary {
    border-radius: 10px 10px 0 0;
}
.doc-section > summary:focus-visible {
    outline: 2px solid var(--focus, #e87722);
    outline-offset: 2px;
}
.doc-heading {
    display: inline;
    font-size: 1.25rem;
    margin: 0;
    color: var(--text, #1a1a1a);
}
.doc-section .page-section {
    /* Seiten innerhalb eines Dokuments leicht eingerueckt, damit die
       Verschachtelung Dokument > Seite > Bild auch visuell erkennbar wird. */
    margin-left: 0.5rem;
    max-width: 800px;
}

/* ── Dokument-Kopf mit Aktionen (Umbenennen/Loeschen), 10.06.2026 ──────────
   Die Aktionen liegen als Geschwister NEBEN dem <details> (nicht in der
   <summary>), damit keine interaktiven Elemente ineinander verschachtelt sind
   (axe: nested-interactive). Der .doc-block traegt Breite/Zentrierung und dient
   als Positionierungs-Anker; die Aktionsgruppe wird oben rechts auf die
   Summary-Leiste gesetzt. Das native Aufklapp-Dreieck bleibt dadurch erhalten. */
.doc-block {
    position: relative;
    max-width: 820px;
    margin: 1.75rem auto 0.75rem auto;
}
.doc-block > .doc-section {
    margin: 0;
    max-width: none;
}
.doc-section > summary.doc-summary {
    /* Platz am rechten Rand fuer die Aktionsgruppe reservieren, damit lange
       Dateinamen nicht unter die Buttons laufen. */
    padding-right: 13rem;
}
.doc-actions {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    display: inline-flex;
    gap: 0.4rem;
    z-index: 1;
}
.doc-action-btn {
    /* WCAG 2.2 AA Zielgroesse: mind. 24x24px Trefferflaeche. */
    min-height: 28px;
    padding: 0.25rem 0.7rem;
    font-size: 0.9rem;
    border: 1px solid var(--border, #ccc);
    border-radius: 6px;
    background: var(--card-bg, #fff);
    color: var(--text, #1a1a1a);
    cursor: pointer;
}
.doc-action-btn:hover { background: #f0f0f0; }
.doc-action-btn:focus-visible {
    outline: 2px solid var(--focus, #c75000);
    outline-offset: 2px;
}
.doc-action-danger {
    border-color: var(--error, #c0392b);
    color: var(--error, #c0392b);
}
.doc-action-danger:hover {
    background: var(--error, #c0392b);
    color: #fff;
}

/* Schmale Geräte (10.06.2026): Die Aktionsgruppe schwebt nicht mehr oben rechts
   — dort würde sie die Überschrift einquetschen — sondern rutscht in den normalen
   Fluss direkt unter den Dokument-Kopf. Die Platzreservierung am rechten Rand
   entfällt, sodass die Überschrift die volle Breite nutzt. Breakpoint passend zum
   bestehenden Sidebar-Umbruch (768px). */
@media (max-width: 768px) {
    .doc-section > summary.doc-summary {
        padding-right: 1rem;
    }
    .doc-actions {
        position: static;
        margin: 0.4rem 1rem 0.6rem;
        justify-content: flex-start;
    }
}

/* ── Native Dialoge (<dialog> + showModal), 10.06.2026 ────────────────────
   Fokusfalle, Escape und Modal-Semantik kommen vom Element selbst — kein ARIA. */
.app-dialog {
    border: 1px solid var(--border, #ccc);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 460px;
    width: calc(100% - 2rem);
    color: var(--text, #1a1a1a);
    background: var(--card-bg, #fff);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.app-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}
.app-dialog h2 {
    margin: 0 0 0.75rem 0;
    font-size: 1.3rem;
}
.app-dialog p {
    margin: 0 0 1rem 0;
    line-height: 1.5;
}
.app-dialog label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.app-dialog input[type="text"] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font-size: 1rem;
    border: 1px solid var(--border, #ccc);
    border-radius: 8px;
    box-sizing: border-box;
}
.dialog-hint {
    font-size: 0.9rem;
    color: var(--text-muted, #666);
}
.dialog-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.btn-danger {
    background: var(--error, #c0392b);
    color: #fff;
    border: 1px solid var(--error, #c0392b);
}
.btn-danger:hover {
    background: #a33125;
    border-color: #a33125;
}

/* Seitengruppe: ganze Seite als klappbares <details>, Ueberschrift ist der Schalter */
.page-section {
    max-width: 800px;
    margin: 1.5rem auto 0.5rem auto;
}
.page-section > summary {
    cursor: pointer;
    padding: 0.7rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent, #e87722);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}
.page-section[open] > summary {
    border-radius: 8px 8px 0 0;
    margin-bottom: 0.75rem;
}
.page-section > summary:focus-visible {
    outline: 2px solid var(--focus, #e87722);
    outline-offset: 2px;
}
.page-heading {
    display: inline;
    font-size: 1.2rem;
    margin: 0;
    color: var(--text, #1a1a1a);
}
.page-count {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-muted, #666);
}
.page-view-image {
    display: block;
    max-width: 100%;
    max-height: 600px;
    margin: 0.75rem 0;
    border: 1px solid var(--border);
    border-radius: 4px;
}
/* Seitentext: eigenes inneres Klapp-Element innerhalb der Seitengruppe */
.page-text-details {
    max-width: 800px;
    margin: 0 auto 1rem auto;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.page-text-details > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.3rem 0;
}
.page-text-details > summary:focus-visible {
    outline: 2px solid var(--focus, #e87722);
    outline-offset: 2px;
}
.page-text-content {
    max-height: 220px;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--bg, #f8f8f8);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.92rem;
    white-space: pre-wrap;
    line-height: 1.5;
}
.image-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.image-meta { font-size: 0.85rem; color: var(--text-muted); }
.image-preview {
    max-width: 100%;
    max-height: 300px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}
.alt-text-field {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
}
.alt-text-field:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.25);
}
.image-type-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: #fff7ed;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #9a3412;
}
.save-indicator {
    font-size: 0.85rem;
    color: var(--success);
    margin-left: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s;
}
.save-indicator.visible { opacity: 1; }

/* Navigation */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
}
.back-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.3); border-radius: 4px; }

/* Empty state */
.empty-state { text-align: center; color: var(--text-muted); padding: 2rem; }

/* Admin table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.admin-table th, .admin-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.admin-table th {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.admin-table tr:hover { background: var(--bg); }

/* Accessible utilities */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.modal {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal h2 { margin-bottom: 1rem; font-size: 1.2rem; }
.modal .form-group { margin-bottom: 1rem; }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.5rem; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}


/* Drag & Drop */
.upload-area.drag-over {
    border-color: var(--primary);
    background: #f0f4ff;
    box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.2);
}



/* ─── InkluAgent Chatbot ─────────────────────────────────── */
.inkluagent-section {
    margin-top: 2rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.inkluagent-section h2 {
    font-size: 1.15rem;
    color: var(--primary);
    margin: 0 0 0.5rem;
}
.inkluagent-intro {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0 0 1rem;
    line-height: 1.5;
}
.inkluagent-intro em {
    background: var(--bg);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-style: normal;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.9em;
    color: var(--primary);
}
.inkluagent-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--primary);
    color: #ffffff;
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.inkluagent-toggle:hover { background: var(--primary-hover); }
.inkluagent-toggle:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
.inkluagent-toggle::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.2s;
}
.inkluagent-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}
.inkluagent-panel { margin-top: 1rem; }
.inkluagent-log {
    max-height: 360px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    margin-bottom: 1rem;
}
.inkluagent-log:empty::before {
    content: 'Noch keine Nachrichten in diesem Projekt. Schreib eine Nachricht ins Eingabefeld unten.';
    display: block;
    color: var(--text-muted);
    padding: 1rem;
    text-align: center;
    font-style: italic;
}
.inkluagent-message {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.inkluagent-message.user {
    background: #e7eef9;
    border-left: 4px solid var(--primary);
    margin-left: 1.5rem;
}
.inkluagent-message.assistant {
    background: #fff7ed;
    border-left: 4px solid var(--accent);
    margin-right: 1.5rem;
}
.inkluagent-message-role {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
}
.inkluagent-message-content {
    font-size: 0.95rem;
    color: var(--text);
}
.inkluagent-form { display: flex; flex-direction: column; gap: 0.5rem; }
.inkluagent-form textarea {
    width: 100%;
    min-height: 60px;
    max-height: 200px;
    padding: 0.6rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
}
.inkluagent-form textarea:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.25);
}
.inkluagent-hint { font-size: 0.85rem; color: var(--text-muted); }
.inkluagent-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.inkluagent-status { font-size: 0.9rem; color: var(--text-muted); }
.inkluagent-status[data-state="error"] { color: var(--error); font-weight: 600; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sprunglink (Barrierefreiheit) */
.skip-link { position:absolute; left:-999px; top:auto; background:#fff; color:#1b2a4a; padding:.6rem 1rem; z-index:100; font-weight:600; border-radius:0 0 6px 0; }
.skip-link:focus { left:0; top:0; }


/* Drag-&-Drop-Zone fuer den Projekt-Upload (Ergaenzung zum Datei-Button, 03.06.2026) */
.proj-dropzone { transition: outline-color 0.15s, background-color 0.15s; }
.proj-dropzone.drag-over {
    outline: 3px dashed var(--accent);
    outline-offset: -6px;
    background: rgba(232, 119, 34, 0.06);
}

/* DSGVO-Hinweis in der Fußzeile (04.06.2026: Schild-Icon + kaputter Aufklapp-Knopf entfernt).
 * Karbe/Steve 08.06.2026: linksbuendig wie der umgebende Footer-Text, nicht mehr zentriert.
 * Frueher 'margin: 0 auto 0.5rem' — das hat den 640er-Block bei breitem Container
 * sichtbar nach rechts eingerueckt (~190 px Gap links). Jetzt linksbuendig im Container.
 */
/* DSGVO-Hinweis im Footer.
   Steve 08.06.2026 (Michael-Befund):
   - text-align: left explizit setzen, sonst erbt der Text in app.html den
     'text-align: center' aus .legal-footer und erscheint in Safari mittig.
     Browser-neutral (kein -webkit-/Safari-Quirk) — Eigenschaft ist Standard
     und in Firefox+Chromium+WebKit gleich.
   - In den Dashboard-Footern (dashboard.js renderLegalNote()) wird die
     dsgvo-note NACH den Footer-Links angehaengt. Damit es nicht gequetscht
     wirkt, bekommt sie eine dezente Trennlinie und etwas Atemraum nach oben. */
.dsgvo-note {
    max-width: 640px;
    margin: 1rem 0 0.5rem 0;
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: left;
}
.dash-footer .dsgvo-note {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 1rem;
}

/* Rechtliche Footer-Links, 10.06.2026 zentral via dashboard.js (renderLegalLinks)
   in jede .dash-footer gerendert — als erster Block, vor dem DSGVO-Hinweis. Die
   Links erben Farbe (#c75000) aus „.dash-footer a"; hier nur dezenter Abstand
   nach unten zum darunterliegenden DSGVO-Hinweis. (Die frühere app.html-eigene
   Klasse .legal-footer-links ist damit entfallen.) */
.dash-legal-links {
    line-height: 1.6;
}