/* Selbst gehostete Schriften (IBM Plex, SIL Open Font License) – KEIN Aufruf an Google/USA.
   Dateien liegen in static/fonts/. Latin + Latin-Ext deckt DE/EN/FR vollständig ab. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibmplexmono-400-latin-ext.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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibmplexmono-400-latin.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;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibmplexmono-500-latin-ext.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibmplexmono-500-latin.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;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibmplexsans-400-latin-ext.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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibmplexsans-400-latin.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;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibmplexsans-500-latin-ext.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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibmplexsans-500-latin.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;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibmplexsans-600-latin-ext.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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibmplexsans-600-latin.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;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibmplexsans-700-latin-ext.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:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibmplexsans-700-latin.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;}

/* ============================================================================================
   DocQual – Design-System „Linear hell".
   Vorbild: der klare, ruhige, fast monochrome Look moderner B2B-Software (Linear-Stil): eine
   kühle Grundfläche, EIN selbstbewusster Akzent (Teal), starke Typo-Hierarchie, viel Weißraum,
   feine Linien statt schwerer Rahmen, sehr dezente Schatten.
   WICHTIG: Alle bestehenden Token-Namen (--paper, --surface, --graphite, --steel, --hairline,
   --teal, ... samt -light) bleiben erhalten – die vielen Inline-Farben in den Templates hängen
   daran. Nur die WERTE werden verfeinert; zusätzliche Tokens (Radius/Schatten) kommen dazu.
   ============================================================================================ */

:root {
    /* Flächen */
    --paper: #F6F7F9;          /* App-Hintergrund – kühles Weiß */
    --surface: #FFFFFF;        /* Karten, Tabellen, Eingaben */
    --surface-2: #FBFCFD;      /* leicht abgesetzte Fläche (Tabellenkopf, ruhige Blöcke) */
    /* Text */
    --graphite: #1B2430;       /* Haupttext – fast schwarz, kühl */
    --steel: #58636F;          /* Sekundärtext */
    --steel-light: #8A929C;    /* Tertiär / Platzhalter */
    /* Linien */
    --hairline: #E6E9EE;       /* feine Trennlinien */
    --hairline-strong: #D3D8E0;
    /* Marken-/Interaktionsfarbe */
    --teal: #0E7C7B;
    --teal-strong: #0B6260;    /* Hover / aktiv */
    --teal-light: #E4F1F0;     /* weicher Akzent-Hintergrund */
    /* Semantische Statusfarben – dezent aufeinander abgestimmt */
    --family: #6B4FA0;
    --family-light: #EDE7F6;
    --amber: #BF8228;
    --amber-light: #FBF1DD;
    --green: #3F7D58;
    --orange: #D9622E;
    --orange-light: #FBEAE3;
    --blue: #2563C9;
    --blue-light: #E9F1FB;
    /* Form: Radius, Schatten, Fokus, Übergänge */
    --radius: 10px;
    --radius-sm: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .05);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .10);
    --ring: 0 0 0 3px rgba(14, 124, 123, .18);
    --ease: .16s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    margin: 0;
    background: var(--paper);
    color: var(--graphite);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.mono { font-family: 'IBM Plex Mono', monospace; }
::selection { background: var(--teal-light); }

/* ---------------------------------------------------------------- Kopfzeile / Navigation */
header {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--hairline);
    padding: 12px 26px; flex-wrap: wrap; gap: 10px 14px;
    position: sticky; top: 0; z-index: 50;
}
.header-right { flex-wrap: wrap; }
header .logo {
    color: var(--graphite); font-weight: 700; text-decoration: none; font-size: 15px;
    letter-spacing: -0.01em;
}
header .logo .sub { color: var(--steel); font-weight: 400; }
header .active-project {
    background: var(--teal); color: #fff; font-weight: 600; font-size: 12.5px;
    padding: 5px 13px; border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap;
    box-shadow: var(--shadow-sm); transition: filter var(--ease);
}
header .active-project:hover { filter: brightness(1.06); }
/* DocuSign-Kennzeichen: blaues „DS" für signierte/genehmigte (unveränderbare) Dokumente. */
.ds-badge {
    display: inline-block; background: #1246A0; color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; vertical-align: middle;
}
.topnav { display: flex; gap: 22px; font-size: 13px; }
.topnav a { color: var(--steel); text-decoration: none; transition: color var(--ease); }
.topnav a:hover { color: var(--graphite); }
.topnav a.active { color: var(--graphite); font-weight: 600; }
.topnav-changes {
    font-size: 13px; color: var(--steel); text-decoration: none; padding: 5px 11px;
    border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface);
    transition: border-color var(--ease), color var(--ease);
}
.topnav-changes.active, .topnav-changes:hover { color: var(--teal); border-color: var(--teal); }

main { max-width: 1120px; margin: 30px auto; padding: 0 20px; }

h1 { font-size: 24px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.25; }
h1 small { color: var(--steel); font-weight: 400; font-size: 14px; letter-spacing: 0; }
h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 14.5px; font-weight: 600; }

/* ---------------------------------------------------------------- Buttons */
.button, button {
    display: inline-block; background: var(--teal); color: #fff;
    padding: 9px 16px; border-radius: var(--radius-sm); text-decoration: none;
    margin: 4px 6px 4px 0; font-size: 13px; font-weight: 600; border: 1px solid transparent;
    cursor: pointer; font-family: inherit; line-height: 1.3;
    box-shadow: var(--shadow-sm); transition: background var(--ease), box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.button:hover, button:hover { background: var(--teal-strong); }
.button:active, button:active { transform: translateY(1px); box-shadow: none; }
.button.secondary, button.secondary {
    background: var(--surface); color: var(--graphite); border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-sm);
}
.button.secondary:hover, button.secondary:hover { background: var(--surface-2); border-color: var(--steel-light); }
.link-button { background: none; border: none; color: var(--teal); text-decoration: underline; cursor: pointer; padding: 0; box-shadow: none; font-weight: 500; }
.link-button:hover { background: none; color: var(--teal-strong); }

/* ---------------------------------------------------------------- Tabellen */
.list-table {
    width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface);
    margin-top: 14px; border: 1px solid var(--hairline); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.list-table th, .list-table td { border-bottom: 1px solid var(--hairline); padding: 11px 14px; text-align: left; font-size: 13px; vertical-align: top; }
.list-table tbody tr:last-child td { border-bottom: none; }
.list-table.small td, .list-table.small th { font-size: 12px; padding: 7px 11px; }
.list-table th {
    background: var(--surface-2); color: var(--steel); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.critical-row { background: #FCEBEB; }
.deviation-row { background: var(--amber-light); }

/* ---------------------------------------------------------------- Formulare */
.form-box { background: var(--surface); padding: 22px; border-radius: var(--radius); max-width: 720px; border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); }
.form-box label { display: block; margin-bottom: 15px; font-weight: 600; font-size: 13px; }
input, select, textarea { font-family: inherit; }
.form-box input, .form-box select, .form-box textarea {
    display: block; width: 100%; margin-top: 5px; padding: 9px 12px;
    border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); font-weight: normal;
    font-family: inherit; font-size: 13.5px; background: var(--surface); color: var(--graphite);
    transition: border-color var(--ease), box-shadow var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }
::placeholder { color: var(--steel-light); }
fieldset { border: 1px solid var(--hairline); margin-bottom: 12px; padding: 12px 14px; border-radius: var(--radius-sm); }
legend { font-weight: 600; font-size: 12.5px; color: var(--steel); padding: 0 6px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start; }
.card-eyebrow { font-size: 11px; color: var(--teal); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 7px; }
.page-section-title { font-size: 12px; font-weight: 700; color: var(--steel); text-transform: uppercase; letter-spacing: 0.07em; margin: 30px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.page-section-title:first-of-type { margin-top: 10px; }

.eq-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--hairline); margin: 18px 0 22px; }
.eq-tab { background: none; border: none; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--steel); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ease); }
.eq-tab.active { color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; }
.eq-tab:hover { color: var(--graphite); }

/* ---------------------------------------------------------------- Mobile PWA (Nachweis-Erfassung) */
.mobile-body { margin: 0; background: var(--paper); }
.mobile-header { background: var(--teal); color: #fff; padding: 16px 20px; position: sticky; top: 0; z-index: 10; }
.mobile-header-title { font-size: 18px; font-weight: 600; }
.mobile-main { padding: 16px; max-width: 600px; margin: 0 auto; }
.mobile-search { width: 100%; padding: 14px 16px; font-size: 16px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); margin-bottom: 14px; box-sizing: border-box; }
.mobile-list-item { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; font-size: 16px; text-decoration: none; color: var(--graphite); box-sizing: border-box; box-shadow: var(--shadow-sm); }
.mobile-list-item .mobile-item-sub { display: block; font-size: 13px; color: var(--steel); margin-top: 4px; }
.mobile-list-item.done { border-left: 5px solid var(--green); }
.mobile-list-item.open { border-left: 5px solid var(--amber); }
.mobile-camera-btn { display: block; width: 100%; padding: 16px; font-size: 17px; font-weight: 600; background: var(--orange); color: #fff; border: none; border-radius: var(--radius); text-align: center; margin-top: 8px; }
.mobile-gallery-btn { display: block; width: 100%; padding: 12px; font-size: 15px; font-weight: 600; background: var(--surface); color: var(--teal); border: 1px solid var(--hairline-strong); border-radius: var(--radius); text-align: center; margin-top: 8px; }
.mobile-back-link { display: inline-block; margin-bottom: 14px; color: var(--teal); text-decoration: none; font-size: 15px; }

/* ---------------------------------------------------------------- Karten, Hinweise, Badges */
.card { background: var(--surface); padding: 20px; border-radius: var(--radius); border: 1px solid var(--hairline); box-shadow: var(--shadow); }
.hint { color: var(--steel); font-size: 12.5px; }
.scope-list { padding-left: 18px; }
.badge { background: var(--surface-2); border: 1px solid var(--hairline); padding: 2px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; vertical-align: middle; }

/* ---------------------------------------------------------------- Flash-Meldungen */
.flash {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 15px; border-radius: var(--radius-sm); margin-bottom: 11px; font-size: 13px;
    border: 1px solid transparent; box-shadow: var(--shadow-sm); transition: opacity .4s ease;
}
.flash .flash-msg { flex: 1; }
.flash::before { font-weight: 700; flex-shrink: 0; line-height: 1.4; }
.flash-close {
    background: none; border: none; color: inherit; cursor: pointer; box-shadow: none;
    font-size: 18px; line-height: 1; opacity: .55; padding: 0 2px; margin: -2px -4px 0 0;
}
.flash-close:hover { opacity: 1; background: none; }
.flash.flash-fade { opacity: 0; }
.flash-success { background: var(--teal-light); color: #08514A; border-color: #B7DED9; }
.flash-success::before { content: "✓"; }
.flash-error { background: #FCEBEB; color: #7A1F1F; border-color: #F0C9C9; }
.flash-error::before { content: "✕"; }
.flash-warning { background: var(--amber-light); color: #633806; border-color: #EAD1A0; }
.flash-warning::before { content: "⚠"; }
.flash-info, .flash-message { background: var(--blue-light); color: #123A6B; border-color: #C3D9F2; }
.flash-info::before, .flash-message::before { content: "ℹ"; }

.sra-table textarea, .sra-table select { width: 100%; font-size: 12.5px; }
.matrix-table th, .matrix-table td { text-align: center; }
.matrix-table td:first-child, .matrix-table th:first-child { text-align: left; }
.matrix-table td a { font-weight: 500; }
.matrix-table { border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); }
.matrix-table th, .matrix-table td { border-bottom: 1px solid var(--hairline); padding: 9px 11px; font-size: 12.5px; }
.matrix-table th { background: var(--surface-2); color: var(--steel); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }

/* Equipment-Tag: Signatur-Element, ueberall wo eine ID/Kennung auftaucht */
.eq-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
    padding: 3px 10px 3px 8px; font-size: 12px; font-weight: 500;
}
.eq-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--steel-light); flex-shrink: 0; }
.eq-tag.vmp { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.eq-tag.vmp::before { background: var(--teal); }

/* Status-Zellen: generiert (orange) / hochgeladen (blau) / Quelle (beige) / Family Approach (tuerkis gestrichelt) */
.cell-generated { background: var(--orange); color: #fff; }
.cell-generated a { color: #fff; font-weight: 600; text-decoration: underline; }
.cell-generated a::before { content: "● "; }
.cell-uploaded { background: var(--blue); color: #fff; }
.cell-uploaded a { color: #fff; font-weight: 600; text-decoration: underline; }
.cell-uploaded a::before { content: "▲ "; }
.cell-source { background: #F4EDE9; }
.matrix-source-row td { font-size: 11px; vertical-align: top; }
.matrix-generated-row td { border-bottom: none; }
.matrix-source-row td { border-top: none; }
.source-file-entry { white-space: normal; word-break: break-word; padding: 2px 0; }
.legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 3px; }
.legend-swatch.cell-generated { background: var(--orange); }
.legend-swatch.cell-uploaded { background: var(--blue); }
.legend-swatch.cell-source { background: #F4EDE9; border: 1px solid #d8c9c0; }

/* Follow-up-Excel Status-Zeile (informativer Soll-Ist-Abgleich) */
.matrix-followup-row td { font-size: 11px; padding-top: 2px; }
.badge-approved { background: #EAF3DE; color: #173404; }
.badge-approved::before { content: "✓ "; }
.badge-progress { background: var(--amber-light); color: #633806; }
.badge-progress::before { content: "◐ "; }

/* Family Approach: Verweis auf gemeinsames Mutterdokument statt "-" */
.cell-inherited { background: var(--family-light); border: 1px dashed var(--family); color: var(--family); }
.cell-inherited a { color: var(--family); font-weight: 600; }
.cell-inherited a::before { content: "◆ "; }
.legend-swatch.cell-inherited { background: var(--family-light); border: 1px dashed var(--family); }

/* Excel-Pending / -Conflict */
.cell-excel-pending { background: #DCEEFB; border: 1px dashed var(--blue); color: #1D4E89; }
.cell-excel-conflict { background: #FCEBEB; border: 2px solid #C0392B; color: #7A1F17; font-weight: 600; }
.legend-swatch.cell-excel-pending { background: #DCEEFB; border: 1px dashed var(--blue); }

.stale-warn { position: relative; cursor: help; display: inline-block; }
.matrix-equipment-end td { border-bottom: 3px solid var(--graphite) !important; }
.stale-tooltip {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%); width: 230px; background: var(--graphite); color: #fff;
    font-weight: 400; font-size: 11.5px; line-height: 1.5; padding: 9px 11px;
    border-radius: var(--radius-sm); text-align: left; z-index: 20; white-space: normal; box-shadow: var(--shadow-md);
}
.stale-tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--graphite);
}
.stale-tooltip a { color: #8FD9D8; }
.stale-warn:hover .stale-tooltip { display: block; }
.matrix-table td { position: relative; overflow: visible; }

/* Dokumentenbaum (SVG) */
.doc-tree-svg { width: 100%; height: auto; min-width: 600px; }
.doc-tree-svg a { cursor: pointer; }

/* Drag & Drop Datei-Upload (siehe static/dragdrop.js) */
.dropzone {
    border: 1.5px dashed var(--hairline-strong); border-radius: var(--radius-sm); padding: 12px;
    background: var(--surface-2); transition: background var(--ease), border-color var(--ease); margin: 4px 0 10px 0;
}
.dropzone.dragover { border-color: var(--teal); background: var(--teal-light); }
.dropzone.has-file { border-style: solid; border-color: var(--teal); }
.dropzone input[type="file"] { display: block; width: 100%; cursor: pointer; }
.dropzone-label { margin-top: 6px; font-size: 12px; color: var(--steel); }

/* ============================================================================================
   Responsivität – Kopfzeile und Inhalte auf Tablet/Handy sinnvoll umbrechen.
   ============================================================================================ */
@media (max-width: 900px) {
    header { flex-wrap: wrap; padding: 10px 14px; gap: 8px 12px; }
    header > div:last-child { flex-wrap: wrap; gap: 8px 10px; justify-content: flex-start; }
    .phase-nav { order: 6; width: 100%; }
    main { margin: 20px auto; padding: 0 14px; }
    .topnav-changes { padding: 8px 12px; }
    .lang-switch .lang-opt { padding: 8px 11px; }
}

@media (max-width: 768px) {
    .list-table, .matrix-table {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
        max-width: 100%; border-radius: var(--radius);
    }
    .doc-tree-svg { min-width: 520px; }
}

@media (max-width: 560px) {
    header { padding: 10px 12px; }
    header .header-left { width: 100%; }
    header > div:last-child { width: 100%; gap: 8px; }
    header form[action$="global_search"], header form[action*="global_search"] { flex: 1 1 100%; }
    header form[action*="global_search"] input { width: 100% !important; }
    header select[name="model"] { max-width: 100%; }
    .button, button { padding: 11px 16px; }
    h1 { font-size: 21px; }
    .page-section-title { margin-top: 22px; }
    /* Formular-Eingaben in iOS nicht zoomen lassen (>=16px) */
    .form-box input, .form-box select, .form-box textarea { font-size: 16px; }
}

/* ============================================================================================
   Zugänglichkeit & Politur. (Kein Dark Mode – die vielen fest verdrahteten Inline-Farben würden
   gemischte Seiten erzeugen; ein sauberer Dark Mode wäre ein eigener Token-Refactor.)
   ============================================================================================ */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }
a:focus-visible, button:focus-visible, .button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

.list-table, .matrix-table, [style*="overflow-x"] { scrollbar-width: thin; scrollbar-color: var(--steel-light) transparent; }
.list-table::-webkit-scrollbar, .matrix-table::-webkit-scrollbar,
[style*="overflow-x"]::-webkit-scrollbar { height: 8px; }
.list-table::-webkit-scrollbar-thumb, .matrix-table::-webkit-scrollbar-thumb,
[style*="overflow-x"]::-webkit-scrollbar-thumb { background: var(--steel-light); border-radius: 4px; }

/* Zeilen-Hover nur auf neutralen Zellen (semantische Statusfarben bleiben unberührt). */
.list-table tbody tr:hover td:not([class]) { background: var(--teal-light); }

/* ============================================================================================
   DUNKLES DESIGN (Linear – dunkel). Aktiviert über <html data-theme="dark"> (Umschalter in der
   Kopfzeile, gespeichert in localStorage, Standard = System-Einstellung).

   Robust umgesetzt: Das Gros der Oberfläche hängt an den Design-Tokens – hier werden nur deren
   WERTE neu gesetzt, dadurch färbt sich fast alles automatisch um. Danach folgen gezielte
   Korrekturen für die wenigen Stellen mit fest verdrahteten hellen Farben (Buttons mit weißer
   Schrift auf Akzent, Tooltip/Tag mit dunkler Fläche, Flash-Farben) sowie ein Sicherheitsnetz
   für die ~zwei Dutzend inline gesetzten hellen Hintergründe.
   ============================================================================================ */
html[data-theme="dark"] {
    color-scheme: dark;
    --paper: #0F1216;
    --surface: #171B21;
    --surface-2: #1E232B;
    --graphite: #E7EAEF;
    --steel: #9AA3AE;
    --steel-light: #6C7580;
    --hairline: #272D35;
    --hairline-strong: #3A424D;
    --teal: #2DD4BF;
    --teal-strong: #5EEAD4;
    --teal-light: #123430;
    --family: #B9A5E8;
    --family-light: #241A38;
    --amber: #E3B23C;
    --amber-light: #332813;
    --green: #5BD07E;
    --orange: #F0844E;
    --orange-light: #3A1E12;
    --blue: #5B9BF0;
    --blue-light: #11223D;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .40);
    --shadow-md: 0 12px 34px rgba(0, 0, 0, .55);
    --ring: 0 0 0 3px rgba(45, 212, 191, .25);
}

/* Kopfzeile: durchscheinendes Dunkel statt durchscheinendes Weiß. */
html[data-theme="dark"] header { background: rgba(21, 25, 31, .85); }

/* Gefüllte Akzent-Flächen tragen weiße Schrift – auf dem helleren Dark-Teal braucht es dunkle
   Schrift für ausreichenden Kontrast. */
html[data-theme="dark"] .button:not(.secondary),
html[data-theme="dark"] button:not(.secondary),
html[data-theme="dark"] header .active-project,
html[data-theme="dark"] .hdr-dash-btn,
html[data-theme="dark"] .hdr-group[open] > .grp-sum,
html[data-theme="dark"] .lang-switch .lang-opt.active,
html[data-theme="dark"] .phase-tab.active .pn-num { color: #06231F; }
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] button.secondary {
    background: var(--surface-2); color: var(--graphite); border-color: var(--hairline-strong);
}
html[data-theme="dark"] .link-button { color: var(--teal); }

/* Komponenten, die eine DUNKLE Fläche aus dem „Tinten"-Token beziehen (im Hellmodus dunkel, im
   Dunkelmodus würde das Token hell) – hier explizit dunkel halten und Schrift hell. */
html[data-theme="dark"] .eq-tag.vmp { background: #10151B; color: var(--graphite); border-color: var(--hairline-strong); }
html[data-theme="dark"] .stale-tooltip { background: var(--surface-2); color: var(--graphite); border: 1px solid var(--hairline-strong); }
html[data-theme="dark"] .stale-tooltip::after { border-top-color: var(--surface-2); }
html[data-theme="dark"] .matrix-equipment-end td { border-bottom-color: var(--steel-light) !important; }

/* Flash-Meldungen: Textfarben für dunklen Hintergrund aufhellen; harte helle Fehlerfläche ersetzen. */
html[data-theme="dark"] .flash-success { color: #7FE0D3; }
html[data-theme="dark"] .flash-error { background: #3A1A1A; border-color: #5A2A2A; color: #F4A9A9; }
html[data-theme="dark"] .flash-warning { color: #F0CE7A; }
html[data-theme="dark"] .flash-info, html[data-theme="dark"] .flash-message { color: #9EC5F4; }
html[data-theme="dark"] .critical-row { background: #3A1A1A; }
html[data-theme="dark"] .cell-source { background: #2A2420; }
html[data-theme="dark"] .legend-swatch.cell-source { background: #2A2420; border-color: #4A4038; }

/* Sicherheitsnetz für inline gesetzte helle Hintergründe (wenige Dutzend Stellen). Trifft exakt
   die betroffenen style-Attribute; Verläufe (…,#fff) bleiben unberührt. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background:#eef1f5"],
html[data-theme="dark"] [style*="background:#f4f6f8"],
html[data-theme="dark"] [style*="background:#f2f7f7"],
html[data-theme="dark"] [style*="background:#fdf6f5"],
html[data-theme="dark"] [style*="background:#fbf6f5"] { background: var(--surface) !important; }

/* Kopfzeilen-Menü: heller Hover in Dunkel abfangen. */
html[data-theme="dark"] .grp-item:hover { background: var(--surface-2); }
html[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, .6); }

/* Landing-/Hub-Kacheln & Panels, die in eigenen <style>-Blöcken einzelner Seiten hart auf Weiß
   stehen (Startseite, Persona-/Phasen-Hub, Cockpit, Lebenszyklus ...). Diese Regeln gewinnen per
   höherer Spezifität über die seiteneigenen Regeln und ziehen die Kacheln im Dunkelmodus mit. */
html[data-theme="dark"] .persona-card,
html[data-theme="dark"] .phase-quick-tile,
html[data-theme="dark"] .hub-tile,
html[data-theme="dark"] .pa-tile,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .ops,
html[data-theme="dark"] .mb-chip,
html[data-theme="dark"] .card { background: var(--surface); border-color: var(--hairline); }
html[data-theme="dark"] .kpi { border-left-color: var(--teal); }
html[data-theme="dark"] .empty-state { background: var(--surface); border-color: var(--hairline-strong); }
/* Neutrale Chips / Fortschrittsbalken – nur die neutralen Varianten; semantische Farben bleiben. */
html[data-theme="dark"] .proj-type,
html[data-theme="dark"] .role-chip,
html[data-theme="dark"] .ra-chip,
html[data-theme="dark"] .proj-pill.wait,
html[data-theme="dark"] .ops-chip:not(.bad):not(.ok) { background: var(--surface-2); color: var(--steel); }
html[data-theme="dark"] .phase-track .seg .bar { background: var(--surface-2); }
/* Kacheltitel, die eine dunkle „Tinten"-Farbe fest verdrahtet haben, im Dunkelmodus aufhellen. */
html[data-theme="dark"] .persona-card b, html[data-theme="dark"] .phase-quick-tile b,
html[data-theme="dark"] .hub-tile b, html[data-theme="dark"] .pa-tile b { color: var(--graphite); }