/* ============================================================
   identpro Portal – Seiten-Styles
   Marken-Tokens (Farben, Fonts, .wes-topbar, .hero) kommen aus brand.css.
   Hier nur, was das Portal zusaetzlich braucht. Werte aus Hub (Footer)
   und Salesroom (Formulare, Karten, Buttons) uebernommen.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.5;
  min-height:100vh;display:flex;flex-direction:column}
a{color:var(--nb)}
[hidden]{display:none!important}

/* Topbar: Basis aus brand.css */
.wes-topbar{position:sticky;top:0;z-index:1000}
.wes-topbar form{margin:0}
.wes-topbar .wt-user{font-size:14px;font-weight:600;color:var(--muted)}
/* Icon-Knopf (z.B. Zahnrad -> Einstellungen): gleiche Groesse/Rahmen wie .wt-btn */
.wes-topbar .wt-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;
  border:2px solid var(--nb);border-radius:4px;color:var(--nb);transition:.18s}
.wes-topbar .wt-icon:hover,.wes-topbar .wt-icon.active{background:var(--nb);color:#fff;text-decoration:none}
.wes-topbar .wt-icon svg{transition:transform .4s}
.wes-topbar .wt-icon:hover svg{transform:rotate(60deg)}

/* Briefumschlag (Kunden): neutral wie die anderen Icons; mit ungelesenen Nachrichten Magenta + Zahl */
.wes-topbar .wt-icon.post{position:relative}
.wes-topbar .wt-icon.post.ungelesen{background:var(--magenta);border-color:var(--magenta);color:#fff}
.wes-topbar .wt-icon.post.ungelesen:hover{background:#a84d86;border-color:#a84d86}
.post-zahl{position:absolute;top:-8px;right:-8px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--lime);color:var(--ink);font-size:11px;font-weight:800;line-height:19px;text-align:center;
  box-shadow:0 0 0 2px #fff}

/* Nachrichten-Historie */
.post-liste{list-style:none;margin:0;padding:0}
.post-eintrag{display:flex;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line)}
.post-eintrag:last-child{border-bottom:none}
.post-eintrag.neu{background:rgba(193,95,156,.06);border-left:4px solid var(--magenta);padding-left:12px}
.post-symbol{flex:0 0 38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,159,227,.12);color:var(--nb)}
.art-release .post-symbol{background:rgba(211,216,0,.2)}
.art-version .post-symbol{background:rgba(193,95,156,.14);color:var(--magenta)}
.post-text{flex:1;min-width:0}
.post-kopf{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill.neu-pill{background:var(--magenta);color:#fff}
.post-zeit{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.post-inhalt{margin-top:5px;font-size:15px}
.post-link{display:inline-block;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--nb);text-decoration:none}
.post-link:hover{text-decoration:underline}

/* Header: brand.css-Hero, Ueberschrift in der Kopf-Schrift */
.hero h1{font-family:var(--font-head)}

/* Inhalt */
main{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:40px 32px 20px}
h2{font-family:var(--font-head);font-weight:600;font-size:20px;letter-spacing:.4px;color:var(--nb);
  margin:0 0 12px;text-transform:uppercase}
.muted{color:var(--muted);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 28px;
  box-shadow:0 8px 22px rgba(0,65,105,.06);position:relative;overflow:hidden}
.card.accent::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--lime),var(--cyan),var(--magenta))}

/* Formulare */
label{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
  display:block;margin:14px 0 5px}
input[type=text],input[type=password]{padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  font-size:15px;width:100%;font-family:inherit;background:#fbfdfe;color:var(--ink)}
input[type=text]:focus,input[type=password]:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,159,227,.15)}
.btn{background:var(--nb);color:#fff;border:none;border-radius:10px;padding:12px 20px;font-weight:700;
  cursor:pointer;font-size:15px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  gap:7px;transition:transform .12s,box-shadow .12s;font-family:inherit}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,65,105,.25)}
.btn.block{width:100%;margin-top:22px}

/* Meldungen */
.flash{padding:11px 14px;border-radius:8px;margin:0 0 16px;font-size:14px;font-weight:500}
.flash.ok{background:rgba(211,216,0,.16);border-left:4px solid var(--lime)}
.flash.error{background:rgba(193,95,156,.10);border-left:4px solid var(--magenta)}

/* Popups (Eingabemasken unter Einstellungen) */
dialog.popup{border:none;border-radius:14px;padding:0;width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 40px);
  box-shadow:0 24px 70px rgba(0,30,50,.35);color:var(--ink);background:var(--card);overflow:auto}
dialog.popup.schmal{width:min(620px,calc(100vw - 32px))}
dialog.popup::backdrop{background:rgba(0,30,50,.45)}
.popup-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 26px 14px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:1}
.popup-kopf::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--lime),var(--cyan),var(--magenta))}
.popup-kopf h2{margin:0}
.popup-zu{background:none;border:none;font-size:28px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 8px;border-radius:6px}
.popup-zu:hover{background:var(--paper);color:var(--ink)}
.popup-meldungen:not(:empty){padding:14px 26px 0}
.popup-meldungen .flash{margin:0}
.popup-inhalt{padding:6px 26px 24px}
.popup-inhalt .form-actions{margin-top:20px}
.liste-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.liste-kopf h2{margin:0}
.btn.btn-neu{padding:9px 16px;font-size:14px}

/* Einstellungen */
.settings-stack{display:flex;flex-direction:column;gap:24px}
.check{display:flex;align-items:center;gap:9px;margin:18px 0 0;font-size:14px;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--nb);margin:0}
.hint{font-size:12px;color:var(--muted);margin-top:5px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);text-align:left;
  padding:6px 8px;border-bottom:2px solid var(--line);white-space:nowrap}
td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.muted{white-space:nowrap}
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;background:rgba(0,159,227,.13);color:var(--nb);white-space:nowrap}
.pill.admin{background:var(--nb);color:#fff}
.pill.off{background:var(--line);color:var(--muted)}

/* Formular in Spalten (Benutzerverwaltung) */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 22px;align-items:start}
.form-grid .check{margin-top:38px}
select{padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px;width:100%;
  font-family:inherit;background:#fbfdfe;color:var(--ink)}
select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,159,227,.15)}
select.select-sm{padding:6px 8px;font-size:13.5px;width:auto;min-width:170px;border-radius:7px;cursor:pointer}
select.select-sm.narrow{min-width:110px}
select.missing{border-color:var(--magenta);color:var(--magenta);font-weight:600}
td form{margin:0}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.sec{background:transparent;border:1px solid var(--line);color:var(--nb)}
.btn.sec:hover{background:#f2f7fa;box-shadow:none}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
input[readonly]{background:var(--paper);color:var(--muted);cursor:not-allowed}
.link-list{list-style:none;margin:0;padding:0}
.link-list li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:baseline}
.link-list li:last-child{border-bottom:none}
.link-list a{text-decoration:none} .link-list a:hover{text-decoration:underline}
.actions-row{display:inline-flex;gap:6px;align-items:center}
a.row-link{color:var(--ink);text-decoration:none}
a.row-link:hover{color:var(--nb);text-decoration:underline}
.icon-btn.edit:hover{border-color:var(--cyan);color:var(--nb);background:rgba(0,158,227,.08)}

/* Kompaktes Formular (Dokumente): feste drei Spalten, weniger Abstand, kleineres Datei-Feld */
.form-grid.kompakt{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px}
.form-grid.kompakt label,.form-grid.kompakt .label{margin-top:12px}
.form-grid.kompakt .radio-row{min-height:42px}
.form-grid.kompakt label.radio{margin-top:0}
.form-grid.kompakt label.check-pill{padding:5px 11px;font-size:13.5px;margin-top:0}
.form-grid.kompakt textarea{min-height:0}
.label-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.label-zeile label{flex:0 1 auto}
.label-link{font-size:11.5px;font-weight:600;color:var(--nb);white-space:nowrap;text-decoration:none;margin-top:12px}
.label-link:hover{text-decoration:underline}
.optional{text-transform:none;letter-spacing:0;font-weight:500;color:#8a99a4}
input[type=file].datei-klein{padding:5px 6px;font-size:13.5px;border-style:solid;border-color:var(--line);background:#fbfdfe}
input[type=file].datei-klein::file-selector-button{padding:6px 12px;margin-right:10px}
@media(max-width:820px){ .form-grid.kompakt{grid-template-columns:1fr} }

/* Dokumente */
.form-grid .span-all{grid-column:1/-1}
.form-grid .span-2{grid-column:span 2}
@media(max-width:820px){ .form-grid .span-2{grid-column:1/-1} }
.notes-aktuell{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin:0 0 8px;font-size:14px}
a.ext-link{color:var(--nb);font-weight:600;text-decoration:none;white-space:nowrap}
a.ext-link:hover{text-decoration:underline}
.label{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
  display:block;margin:14px 0 5px}
textarea{padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:15px;width:100%;
  font-family:inherit;background:#fbfdfe;color:var(--ink);resize:vertical;line-height:1.5}
textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,159,227,.15)}
input[type=file]{width:100%;padding:10px;border:1px dashed var(--cyan);border-radius:9px;background:#f6fbfe;
  font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer}
input[type=file]::file-selector-button{background:var(--nb);color:#fff;border:none;border-radius:7px;
  padding:7px 14px;margin-right:12px;font-weight:700;font-family:inherit;cursor:pointer}
.radio-row{display:flex;gap:18px;align-items:center;min-height:44px}
label.radio{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:15px;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
label.radio input{width:17px;height:17px;accent-color:var(--nb);margin:0}
.save-preview{margin-top:18px;font-size:13px;color:var(--muted)}
.save-preview code{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:2px 7px;
  color:var(--nb);font-size:12.5px;word-break:break-all}
.doc-cell{min-width:220px}
/* Dokumente mit Versionen: Gruppe = tbody, Versionen eingerueckt darunter */
.doc-tabelle tbody.doc-gruppe{border-top:2px solid var(--line)}
.doc-tabelle tr.gruppe-version td{background:#f9fbfc;padding-top:7px;padding-bottom:7px}
.doc-tabelle tr.gruppe-version .doc-cell{padding-left:26px}
.version-arm{color:#a9b8c2;margin-right:4px}
.version-text{font-size:13px;color:var(--ink);margin-left:6px;white-space:nowrap}
.btn-mini{font-size:12px;font-weight:700;color:var(--nb);text-decoration:none;white-space:nowrap;
  border:1px solid var(--line);border-radius:7px;padding:6px 9px;background:#fff}
.btn-mini:hover{border-color:var(--cyan);background:rgba(0,158,227,.08)}
input[readonly]:not([type=file]){background:var(--paper);color:var(--muted)}
select:disabled{background:var(--paper);color:var(--muted);cursor:not-allowed}
.kunden-wahl{display:flex;flex-wrap:wrap;gap:8px}
label.check-pill{display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 12px;border:1px solid var(--line);
  border-radius:999px;background:#fbfdfe;font-size:14px;font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--ink);cursor:pointer}
label.check-pill input{width:16px;height:16px;accent-color:var(--nb);margin:0}
label.check-pill:has(input:checked){border-color:var(--nb);background:rgba(0,65,105,.06)}
label.check-pill.alle{font-weight:700}
label.check-pill.aus{opacity:.5}
label.check-pill .muted{font-size:12px}
.kunden-zelle{font-size:13px;max-width:220px}
.warn-text{color:var(--magenta);font-weight:600}
.doc-file{font-size:11.5px;color:var(--muted);margin-top:2px;word-break:break-all}
.doc-desc{font-size:12.5px;color:var(--muted);margin-top:4px;max-width:360px}
.pill.extern{background:rgba(193,95,156,.14);color:#8a3d6d}

/* Startseite: Dokument-Kacheln (.doc-cards aus brand.css). main hat schon Innenabstand. */
main .doc-cards{padding:0;max-width:none}
/* auto-fill statt auto-fit (brand.css): eine einzelne Kachel bleibt Kachel und fuellt nicht die Zeile. */
.doc-cards .portal-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media(max-width:820px){ .doc-cards .portal-grid{grid-template-columns:1fr} }
.doc-cards .doc-badges{display:flex;gap:6px;flex-wrap:wrap}
.doc-cards .portal-head{scroll-margin-top:16px}
/* Interaktive Pakete (3D): Magenta-Akzent wie die 3D-Kachel im alten Hub (--a4) */
.doc-cards .paket-card{--accent:var(--a4)}
.doc-cards .paket-card .card-icon{background:rgba(193,95,156,.14);color:var(--magenta)}
.pill.paket{background:rgba(193,95,156,.14);color:#8a3d6d;margin-left:4px}
/* Kategorie-Baum in der Einstellungs-Liste */
.tree-name{display:flex;align-items:baseline;gap:6px}
.tree-arm{color:#a9b8c2}
.hint code{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--nb)}
.doc-cards .doc-badge.intern{background:rgba(193,95,156,.14);color:#8a3d6d}
.doc-cards .doc-d:empty{display:none}

/* Dokument-Ansicht: der Scroll-Bereich scrollt nicht selbst - das Dokument im Rahmen scrollt */
body.viewer .seite-scroll{overflow:hidden}
body.viewer{height:100vh;height:100dvh;overflow:hidden}
body.viewer main{flex:1 1 auto;min-height:0;max-width:none;width:100%;padding:0;display:flex}
body.viewer .page-footer{margin-top:0;padding-top:12px;padding-bottom:12px}
.doc-frame{flex:1;width:100%;height:100%;border:0;display:block;background:#fff}
.doc-bild{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:24px}
.doc-bild img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;
  box-shadow:0 8px 22px rgba(0,65,105,.12);border-radius:6px}
.doc-bar{position:relative;background:var(--nb);color:#fff;padding:14px 32px 18px}
.doc-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--lime),var(--cyan),var(--magenta))}
.doc-bar-inner{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.doc-bar-text{flex:1;min-width:0}
.doc-bar-label{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)}
.doc-bar h1{font-family:var(--font-head);font-size:28px;font-weight:700;line-height:1.1;margin:2px 0 3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-bar-meta{font-size:13.5px;color:#fff}
.doc-bar-intern{background:var(--magenta);border-radius:3px;padding:1px 7px;font-size:11.5px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase}
.doc-bar-versionen{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.doc-bar-versionen a,.doc-bar-versionen .aktiv{font-size:13px;font-weight:700;padding:5px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.5);color:#fff;text-decoration:none}
.doc-bar-versionen a:hover{background:rgba(255,255,255,.15)}
.doc-bar-versionen .aktiv{background:#fff;color:var(--nb);border-color:#fff}
.doc-bar-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-light{border:2px solid #fff;color:#fff;background:transparent;border-radius:6px;padding:7px 14px;
  font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:.15s}
.btn-light:hover{background:#fff;color:var(--nb)}
@media(max-width:600px){ .doc-bar{padding:12px 16px 16px} .doc-bar h1{font-size:22px} }

/* Auswertungen */
.filter-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end}
.filter-row > div{min-width:180px}
.filter-row label{margin-top:0}
.filter-row input[type=date]{padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px;
  font-family:inherit;background:#fbfdfe;color:var(--ink)}
.loesch-zeile{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px dashed var(--line)}
.loesch-zeile .hint{margin:0}
.btn.danger-btn{background:#fff;color:#8a3d6d;border:1px solid var(--magenta);padding:9px 14px;font-size:14px}
.btn.danger-btn:hover{background:var(--magenta);color:#fff;box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;
  box-shadow:0 8px 22px rgba(0,65,105,.06);border-top:4px solid var(--cyan)}
.kpi:nth-child(2){border-top-color:var(--lime)} .kpi:nth-child(4){border-top-color:var(--magenta)}
.kpi-zahl{font-family:var(--font-head);font-size:38px;font-weight:700;color:var(--nb);line-height:1}
.kpi-text{font-size:13px;color:var(--muted);margin-top:6px}
.sitzung-kopf,.sitzung summary{display:grid;grid-template-columns:2.2fr 1.4fr 1.6fr .9fr .8fr .8fr;gap:12px;align-items:center}
.sitzung-kopf{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
  padding:6px 12px 8px 30px;border-bottom:2px solid var(--line)}
.sitzung{border-bottom:1px solid var(--line)}
.sitzung summary{padding:11px 12px 11px 30px;cursor:pointer;list-style:none;position:relative;font-size:14px}
.sitzung summary::-webkit-details-marker{display:none}
.sitzung summary::before{content:"›";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--cyan);font-size:20px;font-weight:700;transition:transform .15s}
.sitzung[open] summary::before{transform:translateY(-50%) rotate(90deg)}
.sitzung summary:hover{background:var(--paper)}
.s-user{display:flex;flex-direction:column;line-height:1.3}
.pill.s-aktiv{background:rgba(46,158,91,.14);color:#1f6e3f}
.pill.s-beendet{background:var(--line);color:var(--muted)}
.pill.s-abgemeldet{background:rgba(0,159,227,.13);color:var(--nb)}
.verlauf{list-style:none;margin:0 0 14px 30px;padding:4px 0 0 16px;border-left:2px solid var(--line)}
.verlauf li{display:flex;gap:10px;align-items:baseline;padding:4px 0;font-size:13.5px}
.verlauf a{color:var(--nb);text-decoration:none} .verlauf a:hover{text-decoration:underline}
.v-zeit{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px;min-width:62px}
.verlauf-leer{margin:0 0 14px 46px}
.pill.a-seite{background:rgba(0,65,105,.08);color:var(--nb)}
.pill.a-ansicht,.pill.a-geoeffnet{background:rgba(0,159,227,.13);color:var(--nb)}
.pill.a-download{background:rgba(193,95,156,.14);color:#8a3d6d}
@media(max-width:820px){
  .sitzung-kopf{display:none}
  .sitzung summary{grid-template-columns:1fr 1fr;row-gap:4px}
}

/* Phasen-Fortschritt (Kundenraeume) */
.phase-bar{width:120px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.phase-bar span{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--lime),var(--cyan),var(--magenta));background-size:120px 100%}
.phase-nr{font-size:11.5px;color:var(--muted);margin-top:3px}

/* Reiter (wie Salesroom-Admin) */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 24px;overflow-x:auto;overflow-y:hidden}
.tabs .tab{padding:11px 16px;font-size:15px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;
  text-decoration:none;white-space:nowrap}
.tabs .tab:hover{color:var(--nb)}
.tabs .tab.active{color:var(--nb);border-bottom-color:var(--cyan)}

/* Tabellen-Aktionen */
td.actions{text-align:right;white-space:nowrap}
td.actions form{margin:0;display:inline}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;
  border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.15s}
.icon-btn.sort{font-size:11px;color:var(--nb)}
.icon-btn.sort:hover:not(:disabled){border-color:var(--cyan);background:rgba(0,158,227,.08)}
.icon-btn.sort:disabled{opacity:.3;cursor:default}
.phase-pos{font-variant-numeric:tabular-nums;width:40px}
.icon-btn.locked{border-color:transparent;background:transparent;color:#a9b8c2;cursor:help}
.icon-btn.danger:hover{border-color:var(--magenta);color:var(--magenta);background:rgba(193,95,156,.08)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.empty{text-align:center;color:var(--muted);padding:28px 10px 10px}
.empty svg{color:var(--cyan);margin-bottom:6px}
.empty p{margin:6px 0}
.empty b{color:var(--ink)}

/* Login */
.login-wrap{max-width:440px;margin:0 auto}
.pw-field{position:relative}
.pw-field input{padding-right:72px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--nb);font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  cursor:pointer;padding:6px 8px;border-radius:6px;font-family:inherit}
.pw-toggle:hover{background:rgba(0,158,227,.10)}

/* Footer (wie Hub: Cyan-Leiste, weisses Logo, Claim – keine Text-Wortmarke) */
.page-footer{background:var(--cyan);color:#fff;padding:20px 32px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;margin-top:40px;font-size:14px;font-weight:300}
.page-footer img{height:26px;opacity:.9}
.page-footer .claim{font-family:var(--font-head);letter-spacing:1px;text-transform:uppercase;font-size:19px;
  font-weight:700;color:#fff}

@media(max-width:600px){
  main{padding:28px 16px 12px}
  .card{padding:22px 18px}
  .page-footer{padding:16px;flex-direction:column;align-items:flex-start}
}
.doc-meta{white-space:nowrap;color:#8a99a4}

/* Kachel-Bild der Kategorien: eigenes Bild im Icon-Feld, Symbol-Auswahl im Formular */
.card-icon.mit-bild{background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.card-icon .kat-bild{width:100%;height:100%;object-fit:contain;display:block}
.bild-vorschau.card-icon{width:56px;height:56px;border-radius:11px;flex:0 0 56px;display:flex;align-items:center;justify-content:center}
.kat-mini{width:24px;height:24px;flex:0 0 24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(211,216,0,.18);color:var(--nb);align-self:center;overflow:hidden}
.kat-mini svg{width:15px;height:15px}
.kat-mini.mit-bild{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.kat-mini .kat-bild{width:100%;height:100%;object-fit:contain}
.symbol-wahl{border:0;padding:0;margin:0;min-width:0}
.symbol-wahl legend{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
  padding:0;margin:14px 0 7px}
.symbol-raster{display:flex;flex-wrap:wrap;gap:6px}
.symbol-opt{margin:0;cursor:pointer;text-transform:none;letter-spacing:0}
.symbol-opt input{position:absolute;opacity:0;pointer-events:none}
.symbol-kachel{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(211,216,0,.12);color:var(--nb);border:2px solid transparent;transition:border-color .15s,background .15s}
.symbol-opt:hover .symbol-kachel{background:rgba(211,216,0,.28)}
.symbol-opt input:checked + .symbol-kachel{border-color:var(--nb);background:rgba(211,216,0,.34)}
.symbol-opt input:focus-visible + .symbol-kachel{outline:3px solid rgba(0,158,227,.45);outline-offset:1px}
.bild-eigen{display:flex;gap:16px;align-items:flex-start;margin-top:4px}
.bild-eigen .bild-vorschau{margin-top:30px}
.bild-eingabe{flex:1;min-width:0}
.bild-eingabe .check{margin-top:10px}

/* Anmeldelinks (Benutzer bearbeiten, Benutzerliste) */
.pill.zugang-aktiv{background:rgba(46,158,91,.14);color:#1f6e40}
.pill.zugang-offen{background:rgba(0,158,227,.12);color:var(--nb)}
.pill.zugang-kein,.pill.zugang-abgelaufen,.pill.zugang-beendet{background:var(--paper);color:var(--muted)}
a.pill{text-decoration:none}
.link-box{background:#f6fbfe;border:1px dashed var(--cyan);border-radius:11px;padding:4px 16px 14px;margin:0 0 18px}
.link-zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.link-zeile input{flex:1 1 360px;min-width:0;font-family:Consolas,monospace;font-size:13px;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--nb)}
.link-erzeugen{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.link-erzeugen select{min-width:160px}
.nur-admin[hidden],.nur-kunde[hidden]{display:none}

/* Interne Dokumente (nur Admins sehen sie): normale Kachel mit diagonalem Wasserzeichen "Vertraulich"
   (templates/_kacheln.html, span.wasserzeichen) - blass, damit Titel, Typ und Version lesbar bleiben */
:root{--intern:#d0342c}
.doc-cards .portal-card.intern-card,.doc-cards .portal-card.freigabe-card{overflow:hidden}
.doc-cards .portal-card .wasserzeichen{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-20deg);
  font-family:var(--font-head);font-weight:700;font-size:38px;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:rgba(208,52,44,.14);border:3px solid rgba(208,52,44,.14);border-radius:8px;padding:4px 16px 2px;
  white-space:nowrap;pointer-events:none;user-select:none}

/* Hilfe-Seite (Admins): Inhaltsverzeichnis links, Abschnitte als Karten */
.wes-topbar .wt-icon.hilfe:hover svg{transform:none}
.hilfe-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.hilfe-toc{position:sticky;top:16px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.hilfe-toc-titel{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:0 0 6px 10px}
.hilfe-toc a{color:var(--nb);text-decoration:none;padding:6px 10px;border-radius:7px;border-left:3px solid transparent}
.hilfe-toc a:hover{background:#fff;border-left-color:var(--cyan)}
.hilfe-inhalt{display:flex;flex-direction:column;gap:18px}
.hilfe-inhalt .card{scroll-margin-top:16px}
.hilfe-inhalt h2{margin-top:0}
.hilfe-inhalt h3{font-size:15px;margin:6px 0 4px;color:var(--nb)}
.hilfe-inhalt ul,.hilfe-inhalt ol{margin:8px 0;padding-left:22px;line-height:1.6}
.hilfe-inhalt li{margin:3px 0}
.hilfe-inhalt a{color:var(--nb)}
.hilfe-zwei{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hilfe-schritte li::marker{font-weight:700;color:var(--nb)}
.hilfe-tabelle{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px}
.hilfe-tabelle th{text-align:left;white-space:nowrap;vertical-align:top;padding:7px 16px 7px 0;color:var(--nb);width:1%}
.hilfe-tabelle td{padding:7px 0;border-bottom:1px solid var(--line)}
.hilfe-tabelle tr:last-child td{border-bottom:0}
.hilfe-tipp{background:rgba(211,216,0,.14);border-left:4px solid var(--lime);padding:9px 14px;border-radius:0 8px 8px 0;margin:12px 0 0;font-size:14px}
.hilfe-rot{color:var(--intern);font-weight:700}
@media(max-width:900px){
  .hilfe-layout{grid-template-columns:1fr}
  .hilfe-toc{position:static;flex-direction:row;flex-wrap:wrap}
  .hilfe-toc-titel{width:100%}
  .hilfe-zwei{grid-template-columns:1fr}
}

/* Footer: Impressum / Datenschutz zwischen Logo und Claim */
.page-footer .footer-links{display:flex;gap:22px;margin-left:auto;margin-right:28px;font-size:13.5px}
.page-footer .footer-links a{color:#fff;text-decoration:none;opacity:.92}
.page-footer .footer-links a:hover{text-decoration:underline;opacity:1}
@media(max-width:700px){ .page-footer .footer-links{margin:4px 0} }

/* ===== Feinschliff 07.10.2026 ===== */
/* Schlanker Kopf im Admin-Bereich (Einstellungen, Auswertungen, Hilfe) und auf Fehlerseiten */
.hero.kompakt{padding:26px 32px 24px}
.hero.kompakt::before{width:320px;height:320px;top:-150px;right:-90px}
.hero.kompakt .hero-label{margin-bottom:6px;font-size:12px}
.hero.kompakt h1{font-size:clamp(28px,3.4vw,38px)}
.hero.kompakt .hero-sub{font-size:15px;margin-top:6px}
@media(max-width:600px){ .hero.kompakt{padding:20px 20px 18px} }

/* intern = rot (wie auf den Kacheln), extern = neutral */
.pill.intern{background:var(--intern);color:#fff}
.pill.extern{background:var(--paper);color:var(--muted)}
.doc-bar-intern{background:var(--intern)}
.kunden-zelle{white-space:nowrap}
.doc-tabelle .doc-meta{font-size:12px;color:var(--muted);margin-top:3px}

/* Leere Kategorien (nur Admins sehen sie) */
.doc-cards .doc-badge.leer{background:transparent;border:1px dashed var(--line);color:var(--muted)}

/* Nachrichten: Titel fett, Version klein */
.post-detail{display:block;font-size:13px;color:var(--muted);margin-top:2px}

/* Kundenansicht (Admins) */
.wes-topbar .wt-vorschau{margin:0}
.wes-topbar .wt-vorschau select{font:inherit;font-size:13px;font-weight:600;color:var(--nb);background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:6px 8px;max-width:220px;cursor:pointer}
.vorschau-band{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--magenta);color:#fff;
  padding:9px 32px;font-size:14px}
.vorschau-band .vorschau-text{flex:1;min-width:220px}
.vorschau-band .vorschau-hinweis{opacity:.85}
.vorschau-band form{margin:0}
.vorschau-band select{font:inherit;font-size:13px;border:0;border-radius:6px;padding:5px 8px;color:var(--nb)}
.vorschau-ende{background:#fff;color:#8a3d6d;border:0;border-radius:6px;padding:6px 14px;font:inherit;font-size:13px;
  font-weight:700;cursor:pointer}
.vorschau-ende:hover{background:var(--paper)}

/* Fehlerseiten */
.fehler-karte p{font-size:16px;line-height:1.5;margin-top:0}

/* Dokument-Ansicht am Handy: Kopf untereinander, PDFs direkt oeffnen */
.pdf-mobil{display:none}
@media(max-width:700px){
  .doc-bar-text{flex-basis:100%}
  .doc-bar h1{white-space:normal}
  .doc-bar-actions{width:100%}
  .doc-bar-actions .btn-light{flex:1;text-align:center;padding:6px 10px;font-size:13px}
  .doc-frame.pdf{display:none}
  .pdf-mobil{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    text-align:center;padding:30px 20px;color:var(--nb)}
  .pdf-mobil p{margin:0}
}

/* Datum + Build rechts neben dem Logo (zwei kleine Zeilen); das Suchfeld bleibt mittig daneben frei */
.wes-topbar .kopf-info{display:flex;flex-direction:column;line-height:1.25;font-size:12px;color:var(--muted);
  white-space:nowrap;padding-left:14px;border-left:1px solid var(--line)}
.wes-topbar .kopf-jetzt{font-weight:600;color:var(--nb)}

/* Testsystem (PORTAL_TESTSYSTEM=1): Warnband unter der Kopfzeile, orange Linie statt Lime - nie mit Produktion verwechseln */
.testsystem-band{background:repeating-linear-gradient(-45deg,#ffb000 0 16px,#ffc533 16px 32px);color:var(--ink);
  text-align:center;padding:6px 16px;font-size:14px;font-weight:600;letter-spacing:.3px;border-bottom:1px solid #d98e00}
.testsystem-band b{text-transform:uppercase;letter-spacing:2px;font-weight:800}
body.testsystem .wes-topbar{border-bottom-color:#ff8c00}

/* Kopfzeile am Handy: Name und Ansicht-Auswahl ausblenden, damit Symbole + Abmelden passen */
@media(max-width:700px){
  .wes-topbar .kopf-info{display:none}
  .wes-topbar .wt-user,.wes-topbar .wt-vorschau{display:none}
  .wes-topbar .wt-right{gap:8px}
  .vorschau-band{padding:8px 16px}
  .vorschau-band .vorschau-hinweis{display:none}
}

/* Kacheln anordnen (Admins): Leiste ueber den Kacheln, Kacheln ziehbar */
.anordnen-leiste{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.anordnen-hinweis{font-size:13.5px;color:var(--muted);margin-right:auto}
.btn.btn-klein{padding:7px 14px;font-size:13.5px}
.anordnen-aktiv [data-sortier] .portal-card{cursor:grab;touch-action:none;user-select:none;
  outline:2px dashed rgba(0,63,104,.28);outline-offset:3px}
.anordnen-aktiv [data-sortier] .portal-card:hover{transform:none;box-shadow:none}
.anordnen-aktiv [data-sortier] .portal-card .card-arrow{display:none}
.anordnen-aktiv [data-sortier] .portal-card.zieht{cursor:grabbing;outline-color:var(--cyan);outline-style:solid;
  box-shadow:0 14px 30px rgba(0,65,105,.22);opacity:.92;z-index:2}

/* Kunden-Auswahl im Dokument-Formular: "Alle Kunden" oder Liste mit Suche + Chips */
.kunden-zeile-oben{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kunden-knopf{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--nb);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.kunden-knopf:hover,.kunden-knopf[aria-expanded="true"]{border-color:var(--nb)}
.kunden-feld.alle-an .kunden-knopf{color:var(--muted);font-weight:500}
.kunden-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kunden-chips:empty{display:none}
.kunden-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(0,65,105,.07);border:1px solid rgba(0,65,105,.18);
  color:var(--nb);border-radius:999px;padding:3px 4px 3px 11px;font-size:13px;font-weight:600}
.kunden-chip button{border:0;background:transparent;color:var(--nb);font-size:16px;line-height:1;cursor:pointer;
  padding:0 5px;border-radius:999px}
.kunden-chip button:hover{background:rgba(0,65,105,.14)}
.kunden-panel{margin-top:8px;border:1px solid var(--line);border-radius:10px;background:#fff;
  box-shadow:0 8px 22px rgba(0,65,105,.10);max-width:520px}
.kunden-suche{width:100%;border:0;border-bottom:1px solid var(--line);padding:10px 12px;font:inherit;font-size:14px;
  border-radius:10px 10px 0 0;outline:none}
.kunden-liste{max-height:240px;overflow-y:auto;padding:4px 0}
.kunden-option{display:flex;align-items:center;gap:10px;margin:0;padding:7px 12px;cursor:pointer;
  text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--ink)}
.kunden-option:hover{background:var(--paper)}
.kunden-option[hidden]{display:none}
.kunden-option input{width:16px;height:16px;accent-color:var(--nb);margin:0}
.kunden-option .kunden-name{flex:1}
.kunden-option .muted{font-size:12px}
.kunden-leer{padding:10px 12px}
.kunden-panel-fuss{display:flex;justify-content:flex-end;padding:8px 10px;border-top:1px solid var(--line)}

/* Impressum: Angaben als zweispaltige Liste */
.impressum{display:grid;grid-template-columns:220px 1fr;gap:12px 24px;margin:0}
.impressum dt{font-weight:700;color:var(--nb);font-size:14px}
.impressum dd{margin:0;line-height:1.55}
.impressum a{color:var(--nb)}
@media(max-width:600px){ .impressum{grid-template-columns:1fr;gap:2px} .impressum dd{margin-bottom:12px} }

/* Datenschutzerklaerung: lesbarer Fliesstext mit Inhaltsverzeichnis */
.datenschutz{max-width:860px;margin:0 auto;line-height:1.6}
.datenschutz h2{font-size:22px;margin:34px 0 8px;padding-top:18px;border-top:1px solid var(--line);scroll-margin-top:16px}
.datenschutz h2:first-of-type{border-top:0;padding-top:0;margin-top:22px}
.datenschutz h3{font-size:16px;color:var(--nb);margin:20px 0 4px;font-family:var(--font-body);text-transform:none;letter-spacing:0}
.datenschutz h4{font-size:14.5px;margin:14px 0 4px;color:var(--nb)}
.datenschutz p,.datenschutz li{font-size:14.5px;margin:0 0 10px}
.datenschutz ul{padding-left:22px}
.datenschutz .ds-gross{font-size:13px}
.datenschutz .ds-adresse{padding-left:14px;border-left:3px solid var(--lime)}
.datenschutz a{color:var(--nb)}
.ds-inhalt{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 16px;background:var(--paper);border-radius:10px;font-size:14px}
.ds-inhalt a{font-weight:600;text-decoration:none}
.ds-inhalt a:hover{text-decoration:underline}

/* ===== Seitenrahmen: Kopf und Fuss immer sichtbar, nur der Inhalt scrollt ===== */
body{height:100vh;height:100dvh;min-height:0;overflow:hidden}
body > .wes-topbar,body > .testsystem-band,body > .vorschau-band,body > .hero,body > .doc-bar,body > .page-footer{flex-shrink:0}
.seite-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;overscroll-behavior:contain}
.seite-scroll > main{flex:1 0 auto;padding-bottom:40px}
.page-footer{margin-top:0}
body.viewer .seite-scroll > main{padding:0}
@media(max-width:600px){
  .seite-scroll > main{padding-bottom:24px}
  /* Handy: Kopf und Fuss schmal halten, damit fuer den Inhalt genug Platz bleibt */
  .hero{padding:20px 20px 18px}
  .hero .hero-label{margin-bottom:6px;font-size:11px}
  .hero h1{font-size:28px}
  .hero-sub{font-size:14px;margin-top:6px}
  .page-footer{flex-direction:row;align-items:center;padding:8px 16px;gap:12px}
  .page-footer img{height:20px}
  .page-footer .claim{display:none}
  .page-footer .footer-links{margin:0 0 0 auto;gap:16px;font-size:13px}
}
/* Drucken: ganze Seite statt nur des sichtbaren Ausschnitts */
@media print{
  body{height:auto;overflow:visible;display:block}
  .seite-scroll{overflow:visible;display:block}
}

/* Symbol-Auswahl der Kategorien in Gruppen (Ordner, Intralogistik, Getraenke & Altpapier, Dokumentation) */
.symbol-gruppe{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.symbol-gruppe-titel{width:120px;flex:none;font-size:11.5px;font-weight:600;color:var(--muted);padding-top:12px;line-height:1.3}
.symbol-gruppe:first-child .symbol-raster{margin-left:132px}
@media(max-width:700px){
  .symbol-gruppe{flex-direction:column;gap:4px}
  .symbol-gruppe-titel{width:auto;padding-top:4px}
  .symbol-gruppe:first-child .symbol-raster{margin-left:0}
}

/* ===== Einheitlicher Kopfbereich: eine feste Hoehe fuer alle Seiten (ausser Dokument-Ansicht) =====
   Ueberzeile, Titel, Unterzeile - je einzeilig; zu lange Texte enden mit "…" (voller Text im Tooltip). */
.hero,.hero.kompakt{height:152px;box-sizing:border-box;padding:0 32px;display:flex;align-items:center}
.hero::before,.hero.kompakt::before{width:360px;height:360px;top:-170px;right:-100px}
.hero .hero-inner{width:100%;min-width:0}
.hero .hero-label,.hero.kompakt .hero-label{font-size:12px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero h1,.hero.kompakt h1{font-size:clamp(30px,3.4vw,40px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .hero-sub,.hero.kompakt .hero-sub{font-size:15px;margin-top:7px;max-width:none;min-height:1.5em;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){
  .hero,.hero.kompakt{height:122px;padding:0 20px}
  .hero h1,.hero.kompakt h1{font-size:26px}
  .hero .hero-label,.hero.kompakt .hero-label{font-size:11px;margin-bottom:4px}
  .hero .hero-sub,.hero.kompakt .hero-sub{font-size:13.5px;margin-top:4px}
}

/* ===== Kacheln einheitlich gross (Kategorien und Dokumente) =====
   Feste Hoehe; Titel und Beschreibung hoechstens zwei Zeilen ("…", Beschreibung im Tooltip);
   Badges stehen unten, bei Dokumenten rechts daneben die Version. */
.doc-cards .portal-card.doc{height:176px;box-sizing:border-box}
.doc-cards .portal-card.doc .doc-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:none}
.doc-cards .portal-card.doc .doc-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:0 1 auto}
.doc-cards .portal-card.doc .doc-d:empty{display:none}
.doc-cards .portal-card.doc .doc-badges{margin-top:auto;flex-wrap:nowrap;overflow:hidden;flex:none}
.doc-cards .portal-card.doc .doc-stand{flex:none;margin-top:0}
.doc-cards .doc-badges .doc-version{margin-left:auto;align-self:center;font-size:11.5px;color:var(--muted);
  letter-spacing:.3px;white-space:nowrap;padding-left:8px;padding-right:22px}
/* Kachel-Kopf: Symbol links, Titel rechts daneben (vertikal mittig, hoechstens zwei Zeilen) */
.doc-cards .card-kopf{display:flex;align-items:center;gap:14px;min-height:48px;flex:none}
.doc-cards .card-kopf .card-icon{flex:none}
.doc-cards .portal-card.doc .card-kopf .doc-t{flex:1 1 auto;min-width:0}   /* umbrechen statt herauslaufen */

/* Farbe des Kachel-Streifens (Kategorie-Formular) */
.farb-wahl{border:0;padding:0;margin:0;min-width:0}
.farb-wahl legend{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);padding:0;margin:14px 0 9px}
.farb-wahl legend .optional{text-transform:none;letter-spacing:0;font-weight:500}
.farb-raster{display:flex;flex-wrap:wrap;gap:8px}
.farb-opt{margin:0;cursor:pointer}
.farb-opt input{position:absolute;opacity:0;pointer-events:none}
.farb-punkt{display:block;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s,transform .15s}
.farb-opt:hover .farb-punkt{transform:scale(1.08)}
.farb-opt input:checked + .farb-punkt{outline-color:var(--nb)}
.farb-opt input:focus-visible + .farb-punkt{outline-color:var(--cyan)}
.farb-wahl .label{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);margin:14px 0 5px}
.farb-wahl .label .optional{text-transform:none;letter-spacing:0;font-weight:500}
.farb-raster{gap:7px;flex-wrap:nowrap;min-height:44px;align-items:center}
.farb-punkt{width:26px;height:26px}
@media(max-width:820px){ .farb-raster{flex-wrap:wrap} }

/* Dokumentenverwaltung: Filterleiste ueber der Tabelle */
.dok-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;padding:12px;background:var(--paper);border-radius:10px}
.dok-filter input[type=search]{flex:1 1 220px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:14px;background:#fff}
.dok-filter select{flex:0 1 auto;max-width:210px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:13.5px;background:#fff;color:var(--ink)}
.dok-filter .dok-filter-info{font-size:13px;color:var(--muted);margin-left:auto;white-space:nowrap}
.doc-tabelle tr.filter-aus td{opacity:.45}
.dok-filter-leer{padding:14px 8px;margin:0}
@media(max-width:700px){ .dok-filter select{max-width:none;flex:1 1 45%} }

/* ===== Suche in der Kopfzeile (Muster der identpro-Dokuseiten) ===== */
/* Namen des Musters auf die Portal-Farben abbilden */
:root{--grey:var(--paper);--grey-mid:var(--line);--blue:var(--cyan);--dark:var(--ink);--yellow:var(--lime)}
/* ── search bar ── */
.topbar-search { flex: 1; display: flex; justify-content: center; padding: 0 20px; }
.search-wrap { position: relative; width: 100%; max-width: 440px; }
.search-wrap input[type=text] {
  width: 100%; padding: 8px 14px 8px 38px;
  border: 2px solid var(--grey-mid); border-radius: 20px;
  font-size: 14px; font-family: inherit;
  background: var(--grey); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.search-wrap input[type=text]:focus {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(11,110,168,.13);
}
.search-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); color: #aaa; pointer-events: none;
}
.search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #aaa; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.search-clear:hover { color: #555; }
.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--grey-mid);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
  max-height: 380px; overflow-y: auto; z-index: 3000;
}
.search-result-item {
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid #f2f2f2; transition: background .1s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover, .search-result-item.sractive { background: var(--grey); }
.sr-title { font-weight: 700; font-size: 13px; color: var(--dark); }
.sr-ctx  { font-size: 12px; color: #777; margin-top: 2px;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-section-header { padding: 8px 16px 4px; font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: .8px; text-transform: uppercase; border-top: 1px solid #f0f0f0; }
.search-section-header:first-child { border-top: none; }
.search-empty { padding: 16px; color: #aaa; font-size: 13px; text-align: center; }
.search-result-item mark { background: var(--yellow); color: var(--dark);
  border-radius: 2px; padding: 0 1px; font-style: normal; }
@keyframes srHL {
  0%   { background: rgba(200,212,0,.45); }
  100% { background: transparent; }
}
.search-highlight { animation: srHL 2.2s ease-out forwards; border-radius: 4px; }
h2, h3, h4 { scroll-margin-top: 72px; }
@media (max-width: 700px) {
  .topbar-search { display: none; }
}
.search-result-item.sr-hinweis{cursor:default}
.search-result-item.sr-hinweis .sr-title{color:var(--muted)}

/* Suchfeld exakt in der Bildschirmmitte (die Kopfzeile ist position:sticky -> Bezugsrahmen) */
.wes-topbar .topbar-search{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(440px,calc(100vw - 700px));padding:0;flex:none}
.wes-topbar .topbar-search .search-wrap{max-width:none}
.wes-topbar .wt-vorschau select{max-width:160px}
@media(max-width:900px){ .wes-topbar .topbar-search{display:none} }
/* Kundenansicht als Symbol-Knopf (Auge): die Auswahl liegt unsichtbar darueber */
.wes-topbar .wt-vorschau{position:relative;display:inline-flex}
.wes-topbar .wt-vorschau select{position:absolute;inset:0;width:100%;max-width:none;opacity:0;cursor:pointer;padding:0;border:0}
.wes-topbar .wt-vorschau:hover .wt-auge,.wes-topbar .wt-vorschau:focus-within .wt-auge{background:var(--nb);color:#fff}
.wes-topbar .wt-auge:hover svg{transform:none}

/* Einklappbare Listen (Kategorien-Baum, Dokument-Versionen) - Kaestchen wie im Windows-Explorer */
.baum-knopf{flex:none;width:18px;height:18px;padding:0;margin:0 2px 0 0;border:1px solid #9fb0bc;border-radius:3px;background:#fff;
  color:var(--nb);font:700 13px/16px var(--font-body);text-align:center;cursor:pointer;align-self:center}
.baum-knopf:hover{border-color:var(--nb);background:var(--paper)}
.baum-platz{flex:none;width:20px;display:inline-block}
.tree-name{align-items:center}
.doc-cell .baum-knopf,.doc-cell .baum-platz{display:inline-block;vertical-align:-3px;margin-right:6px}
.versionen-anzahl{font-size:11.5px;color:var(--muted);margin-left:6px}
.doc-tabelle:not(.filter-aktiv) tbody.doc-gruppe.zu tr.gruppe-version{display:none}
.baum-leiste{display:flex;gap:16px;justify-content:flex-end;margin:-6px 0 10px}
.link-knopf{border:0;background:none;padding:0;color:var(--nb);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.link-knopf:hover{text-decoration:underline}

/* Kategorie-Seiten: Haus-Knopf (zur Startseite) links im blauen Kopf */
.hero-inner:has(> .start-knopf){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:center}
.hero-inner:has(> .start-knopf) > :not(.start-knopf){grid-column:2}
.start-knopf{grid-row:1 / span 3;width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.start-knopf:hover,.start-knopf:focus-visible{background:#fff;color:var(--nb);border-color:#fff;outline:none}
@media(max-width:600px){ .start-knopf{width:38px;height:38px} .hero-inner:has(> .start-knopf){column-gap:14px} }

/* ===== Explorer-Leiste "Struktur": eigene Spalte am linken Rand, volle Hoehe zwischen Kopf und Fuss ===== */
.seite-mitte{flex:1 1 auto;min-height:0;display:flex}
.seite-mitte > .seite-scroll{flex:1 1 auto;min-width:0}
.exp-leiste{flex:none;display:flex;height:100%;background:var(--card);border-right:1px solid var(--line)}
.explorer{width:280px;height:100%;overflow:auto;padding:12px 8px 16px;font-size:13.5px;box-sizing:border-box}
.exp-kopf{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.exp-titel{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.exp-baum,.exp-baum ul{list-style:none;margin:0;padding:0}
.exp-baum ul{padding-left:16px;display:none}
.exp-baum li.offen > ul{display:block}
.exp-zeile{display:flex;align-items:center;gap:2px}
.exp-zeile a{display:flex;align-items:center;gap:7px;flex:1;min-width:0;padding:4px 6px;border-radius:6px;
  color:var(--ink);text-decoration:none}
.exp-zeile a span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-zeile a:hover{background:var(--paper)}
.exp-kat.aktiv > .exp-zeile a{background:rgba(0,158,227,.12);color:var(--nb);font-weight:700}
.exp-knopf{flex:none;width:18px;height:18px;border:0;background:none;padding:0;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:4px}
.exp-knopf:hover{background:var(--paper);color:var(--nb)}
.exp-knopf svg{width:14px;height:14px;transition:transform .15s}
.exp-kat.offen > .exp-zeile .exp-knopf svg{transform:rotate(90deg)}
.exp-platz{flex:none;width:18px}
.exp-symbol{flex:none;display:flex;color:var(--nb)}
.exp-symbol svg{width:16px;height:16px}
@media(max-width:900px){ .exp-leiste{display:none} }

/* ===== Favoriten: Stern auf Dokument-Kacheln, Leiste am rechten Rand (volle Hoehe) ===== */
.doc-cards .fav-stern{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;cursor:pointer;z-index:2;color:#9fb0bc;transition:background .15s,color .15s}
.doc-cards .fav-stern svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.doc-cards .fav-stern:hover,.doc-cards .fav-stern:focus-visible{background:var(--paper);color:#e3a008;outline:none}
.doc-cards .fav-stern.an{color:#e3a008}
.doc-cards .fav-stern.an svg{fill:#f2b705;stroke:#e3a008}
.doc-cards .portal-card.doc .card-kopf{padding-right:22px}
.fav-leiste{flex:none;display:flex;height:100%;background:var(--card);border-left:1px solid var(--line)}
.favoriten{width:310px;height:100%;overflow:auto;padding:12px 12px 16px;box-sizing:border-box}
.fav-liste{display:flex;flex-direction:column;gap:12px;padding:6px 0 0;max-width:none}
.fav-liste .portal-card.doc{width:100%}
.fav-leer{font-size:13px;color:var(--muted);text-align:center;padding:24px 8px;line-height:1.6;margin:0}
@media(max-width:1100px){ .fav-leiste{display:none} }

/* Seitenleisten (Struktur, Favoriten) in hellem identpro-Blau */
:root{--leiste:#e6f1f8;--leiste-linie:#c9dceb;--leiste-hover:#d4e7f3}
.exp-leiste{background:var(--leiste);border-right-color:var(--leiste-linie)}
.fav-leiste{background:var(--leiste);border-left-color:var(--leiste-linie)}
.exp-leiste .exp-kopf,.fav-leiste .exp-kopf{border-bottom-color:var(--leiste-linie)}
.exp-leiste .exp-titel,.fav-leiste .exp-titel{color:var(--nb)}
.exp-zeile a:hover,.exp-knopf:hover{background:var(--leiste-hover)}
.exp-kat.aktiv > .exp-zeile a{background:#fff;color:var(--nb);box-shadow:inset 3px 0 0 var(--cyan)}
.fav-leer{color:#4d6272}
/* Pfeil "eine Ebene hoeher" ganz links am Rand des blauen Kopfes (buendig mit der Struktur-Leiste);
   der Titel bleibt an derselben Stelle wie auf allen anderen Seiten. Ziel: PC-Bildschirme. */
.hero-inner:has(> .start-knopf){display:block}
.hero-inner > .start-knopf{position:absolute;top:50%;transform:translateY(-50%);
  left:calc(16px - var(--kopf-links, max(32px, (100vw - 1080px) / 2)));grid-row:auto}   /* --kopf-links: static/kopf.js */

/* Navigation nur ueber die Struktur: leere Kategorien blass, Haus-Knopf in der Dokument-Ansicht */
.exp-kat.leer > .exp-zeile a{opacity:.55}
.exp-symbol.mit-bild{width:16px;height:16px;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--leiste-linie)}
.exp-symbol .kat-bild{width:100%;height:100%;object-fit:contain}
.doc-bar .doc-start{position:static;transform:none;width:40px;height:40px;flex:none}
.doc-bar-inner{gap:16px}

/* Einheitliche Kachelbreite: Mitte, Favoriten-Leiste (Kachel passt genau hinein) und Struktur-Leiste (gleich breit) */
:root{--kachel-breite:280px;--leiste-rand:12px;--leiste-breite:calc(var(--kachel-breite) + 2 * var(--leiste-rand) + 10px)}
.doc-cards .portal-grid{grid-template-columns:repeat(auto-fill,var(--kachel-breite))}
.favoriten,.explorer{width:var(--leiste-breite);scrollbar-gutter:stable;scrollbar-width:thin}
.favoriten{padding:12px 0 16px var(--leiste-rand)}
.fav-liste .portal-card.doc{width:var(--kachel-breite)}

/* Auto-Logoff: Hinweis kurz vor der Abmeldung (static/leerlauf.js) */
.leerlauf-hinweis{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:4000;max-width:560px;
  background:var(--nb);color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.25);font-size:14px;line-height:1.45}

/* Filterleisten (Dokumente, Benutzer): festes Raster mit 4 Spalten - die untere Reihe steht unter der oberen.
   Suchfeld ueber 2 Spalten; Treffer-Info + "Zuruecksetzen" in der letzten Zelle. */
.dok-filter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px;align-items:center}
.dok-filter input[type=search]{grid-column:span 2;width:100%;box-sizing:border-box}
.dok-filter select{width:100%;max-width:none;min-width:0;box-sizing:border-box}
.dok-filter-ende{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.dok-filter-ende .dok-filter-info{margin-left:0}
#benutzerFilter .dok-filter-ende{grid-column:span 1}
.dok-filter input[type=search],.dok-filter select{height:38px;font-size:14px}
.dok-filter-ende .btn{white-space:nowrap}
.dok-filter-ende .dok-filter-info{overflow:hidden;text-overflow:ellipsis}

/* Auswertungen: Beginn eines Besuchs (Anmeldung / wieder da) */
.sitzung .s-rueckkehr{display:block;font-size:11.5px;line-height:1.3}

/* Dokumentenverwaltung: "+ Version" ueber den drei Symbol-Knoepfen (schmalere Aktionsspalte, mehr Platz fuer Phase) */
.doc-tabelle td.actions .actions-row{display:grid;grid-template-columns:repeat(3,auto);gap:6px;justify-content:end;align-items:center}
.doc-tabelle td.actions .btn-mini{grid-column:1 / -1;justify-self:stretch;text-align:center}
.doc-tabelle td:nth-child(4){white-space:nowrap}   /* Phase (z. B. "Kick-Off") nicht umbrechen */

/* Dokumentenverwaltung: "+" in eigener Spalte ganz links, daneben Titelzeile und Angaben (ohne Kurzbeschreibung) */
.doc-zeile{display:flex;align-items:flex-start;gap:8px}
.doc-zeile > .baum-knopf,.doc-zeile > .baum-platz{flex:none;margin:1px 0 0}
.doc-inhalt{min-width:0}
.doc-titelzeile{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.doc-titelzeile .versionen-anzahl{margin-left:0}
.doc-zeile > .baum-knopf,.doc-zeile > .baum-platz{align-self:flex-start;width:18px;margin:1px 0 0}
.doc-inhalt > .versionen-anzahl{margin:2px 0 0;font-size:12px}

/* Rollen-Auswahl im Dokument-Formular: roter Chip "Intern", solange keine Rolle gewaehlt ist (Dokument nur fuer identpro) */
.chip-intern{background:rgba(208,52,44,.10);border-color:rgba(208,52,44,.35);color:var(--intern);font-weight:700}
.chip-intern[hidden],.chips-intern:has(> .chip-intern[hidden]){display:none}
.rollen-zelle{font-size:13px;max-width:180px}   /* Rollen-Spalte wie die Kunden-Spalte */
.rollen-zelle{white-space:nowrap}
/* Dokument-Formular: Rollen und Kunden in einer Zeile nebeneinander */
.auswahl-zeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.auswahl-spalte{min-width:0}
.auswahl-spalte .kunden-zeile-oben{flex-wrap:wrap}

/* Sprache umschalten: Globus + Kuerzel, gleiche Bauart wie die Kundenansicht (Auswahl unsichtbar darueber) */
.wes-topbar .wt-sprache .wt-sprache-knopf{width:auto;padding:0 9px;gap:5px}
.wes-topbar .wt-sprache-code{font-size:12px;font-weight:700;letter-spacing:.4px}

/* Sprach-Flaggen (Kacheln, Dokumentenliste, Dokument-Ansicht) */
.flaggen{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}
.flagge{display:inline-flex;line-height:0;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.flagge-text{font-size:10px;font-weight:700;line-height:12px;padding:0 3px;background:var(--paper)}
.doc-titelzeile .flaggen{margin-left:2px}
.doc-bar-sprachen{display:flex;gap:6px;align-items:center;flex:none}
.doc-bar-sprachen a,.doc-bar-sprachen .aktiv{display:inline-flex;padding:5px;border-radius:6px;border:2px solid transparent}
.doc-bar-sprachen .aktiv{border-color:rgba(255,255,255,.8)}
.doc-bar-sprachen a{opacity:.6}
.doc-bar-sprachen a:hover{opacity:1;border-color:rgba(255,255,255,.4)}
.doc-bar-sprachen .flagge svg{width:24px;height:16px}

/* Dokument-Formular: Dateien je Sprache nebeneinander */
.datei-sprachen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
#dateiFeld:not(.span-2) .datei-sprachen{grid-template-columns:1fr}
.datei-sprache label .flagge{margin-right:4px;vertical-align:-1px}
.datei-sprache .datei-entfernen{margin-top:4px;font-size:13px}

/* Sprach-Reiter in Dialogen (je Sprache Name/Titel/Beschreibung bzw. Datei) */
.sprach-reiter{border:1px solid var(--line);border-radius:12px;padding:0 14px 12px;background:#fff;margin-top:10px}
.reiter-kopf{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 -14px 12px;padding:0 10px}
.reiter-knopf{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:10px 12px 9px;
  font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.reiter-knopf:hover{color:var(--nb)}
.reiter-knopf.aktiv{color:var(--nb);border-bottom-color:var(--cyan)}
.reiter-luecke{width:8px;height:8px;border-radius:50%;background:#e3a008;display:inline-block}
.reiter-inhalt.form-grid{margin:0}
.reiter-inhalt .datei-sprache.span-2{grid-column:span 2}

/* Admin-Listen: noch nicht uebersetzt (graue Flagge) */
.ue-fehlt{display:inline-flex;margin-left:6px;vertical-align:middle;filter:grayscale(1);opacity:.55}


/* Schalter (Einstellungen): Checkbox als Kippschalter */
.schalter{display:inline-flex;align-items:center;gap:12px;cursor:pointer;margin:0}
.schalter input{position:absolute;opacity:0;width:1px;height:1px}
.schalter-bahn{position:relative;flex:none;width:44px;height:24px;border-radius:12px;background:#c5d0d8;transition:background .15s}
.schalter-bahn::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.schalter input:checked + .schalter-bahn{background:var(--nb)}
.schalter input:checked + .schalter-bahn::after{transform:translateX(20px)}
.schalter input:focus-visible + .schalter-bahn{outline:2px solid var(--cyan);outline-offset:2px}


/* Freigabe (Vier-Augen-Prinzip): Liste, Kachel, Dokument-Ansicht */
.freigabe-zelle{white-space:nowrap}
.freigabe-zelle .freigabe-form{display:block;margin:4px 0 0}
.freigabe-zelle .link-knopf{font-size:12px;margin-left:0;padding:0}
.pill.freigabe-ja{background:rgba(46,158,91,.14);color:#1f6e3f}
.pill.freigabe-offen{background:rgba(227,160,8,.16);color:#8a5a00}
.btn-mini.freigabe-knopf{border-color:#e3a008;color:#8a5a00}
.btn-mini.freigabe-knopf:hover{background:#e3a008;color:#fff}
.doc-bar-actions form{margin:0}
.doc-bar-wartet{font-size:13px;font-weight:600;color:#ffd27a;padding:0 6px}
.btn-light.freigabe-hell{background:#e3a008;border-color:#e3a008;color:#fff}

/* Kachel "Freigabe ausstehend" (nur Admins): Wasserzeichen wie "Vertraulich", in Gelb, kleiner wegen des laengeren Texts */
.doc-cards .portal-card .wasserzeichen.freigabe{font-size:24px;letter-spacing:.08em;color:rgba(227,160,8,.30);
  border-color:rgba(227,160,8,.30);pointer-events:auto}

/* Dokumentenliste: Bestaetigen-Knopf (Freigabe) als letzte Zeile der Aktionen - immer da,
   ausgegraut, wenn fuer diesen Admin nichts zu bestaetigen ist */
.doc-tabelle td.actions .bestaetigen-form{grid-column:1 / -1;display:block}
.doc-tabelle td.actions .bestaetigen-knopf{width:100%;cursor:pointer}
.btn-mini.bestaetigen-knopf[disabled],.btn-mini.bestaetigen-knopf[disabled]:hover{color:#a9b8c2;border-color:var(--line);
  background:var(--paper);cursor:not-allowed}

/* Historie eines Dokuments (Popup ueber der Dokumentenliste, Info-Knopf) */
.historie-tabelle{width:100%;border-collapse:collapse;font-size:13px}
.historie-tabelle th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding:6px 10px;border-bottom:1px solid var(--line)}
.historie-tabelle td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.historie-tabelle .nowrap{white-space:nowrap}
.historie-tabelle tr.historie-freigegeben td:nth-child(3){color:#1f6e3f;font-weight:600}
.historie-tabelle tr.historie-loeschen_angefragt td:nth-child(3),.historie-tabelle tr.historie-geloescht td:nth-child(3){color:#a12620;font-weight:600}

/* Einstellungen: Pflichtfelder rot umrandet (required bzw. offene Pflicht-Gruppe wie "eine Datei je Dokument") -
   auch im Fokus (Popups setzen den Cursor gleich ins erste Feld); Fokus zusaetzlich mit rotem Schein.
   Nicht bei gesperrten oder nur lesbaren Feldern. */
.einst-formulare input:required:not([type=checkbox]):not([type=radio]):not(:disabled):not([readonly]),
.einst-formulare select:required:not(:disabled),
.einst-formulare textarea:required:not([readonly]),
.einst-formulare input.pflicht-offen{border-color:var(--intern);box-shadow:0 0 0 1px var(--intern)}
.einst-formulare input:required:not([type=checkbox]):not([type=radio]):not(:disabled):not([readonly]):focus,
.einst-formulare select:required:not(:disabled):focus,
.einst-formulare textarea:required:not([readonly]):focus,
.einst-formulare input.pflicht-offen:focus{border-color:var(--intern);box-shadow:0 0 0 1px var(--intern),0 0 0 4px rgba(208,52,44,.15)}

/* Auswertungen: Ring-Diagramm "Zeit je Seite" (Legende mit Werten) und Seiten je Besuch (aufgeklappt) */
.torte{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.torte-bild{width:220px;height:220px;flex:none}
.torte-bild path{stroke:#fff;stroke-width:2;stroke-linejoin:round}
.torte-bild path:hover{opacity:.82}
.torte-summe{font-family:var(--font-head);font-weight:700;font-size:20px;fill:var(--ink)}
.torte-text{font-size:11px;fill:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.torte-legende{border-collapse:collapse;font-size:14px;flex:1;min-width:280px}
.torte-legende td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.torte-legende .zahl,.besuch-seiten .zahl{text-align:right;white-space:nowrap}
.torte-punkt{display:inline-block;width:12px;height:12px;border-radius:3px}
.besuch-seiten{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 4px}
.besuch-seiten th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding:5px 10px;border-bottom:1px solid var(--line)}
.besuch-seiten td{padding:5px 10px;border-bottom:1px solid var(--line)}

/* Zauberstab (nur Admins): unten rechts in der Dokument-Kachel -> Bearbeiten. Der Hover-Pfeil entfaellt dort. */
.doc-cards .bearbeiten-stab{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;cursor:pointer;z-index:2;color:#9fb0bc;transition:background .15s,color .15s}
.doc-cards .bearbeiten-stab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.doc-cards .bearbeiten-stab:hover,.doc-cards .bearbeiten-stab:focus-visible{background:var(--paper);color:var(--nb);outline:none}
.doc-cards .portal-card.mit-stab .card-arrow{display:none}
.anordnen-aktiv .bearbeiten-stab,.fav-liste .bearbeiten-stab{display:none}

/* Dokument-Kacheln leicht plastisch (3D): mehrschichtiger Schatten, Lichtkante oben, sanfter Verlauf; beim Ueberfahren
   hebt sich die Kachel an und neigt sich minimal nach hinten. Nicht im Anordnen-Modus; ohne Animation, wenn der
   Browser "weniger Bewegung" wuenscht. */
.doc-cards .portal-card.doc{
  background:linear-gradient(180deg,#fff 0%,#f6f9fb 100%);
  box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,65,105,.05),0 2px 3px rgba(0,65,105,.07),0 8px 16px -4px rgba(0,65,105,.12),0 18px 30px -12px rgba(0,65,105,.14);
  transform:perspective(900px) translateZ(0);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.doc-cards .portal-card.doc.active:hover{
  transform:perspective(900px) translateY(-6px) rotateX(2.5deg);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(0,65,105,.05),0 6px 10px rgba(0,65,105,.10),0 18px 30px -4px rgba(0,65,105,.18),0 30px 46px -14px rgba(0,65,105,.22);
  border-color:transparent}
.doc-cards .portal-card.doc.active:active{transform:perspective(900px) translateY(-2px) rotateX(1deg)}
.anordnen-aktiv [data-sortier] .portal-card.doc:hover{transform:none;box-shadow:inset 0 1px 0 #fff,0 2px 3px rgba(0,65,105,.07)}
@media (prefers-reduced-motion:reduce){ .doc-cards .portal-card.doc,.doc-cards .portal-card.doc.active:hover{transition:none;transform:none} }

/* Einstellungen, Listen-Seiten (Dokumente, Kunden, Benutzer, Releases, Kategorien, Rollen, Phasen): die Seite scrollt nicht -
   Reiterleiste, Kopf der Liste (Titel, Filter) und Tabellenkopf bleiben stehen, nur die Tabellenzeilen scrollen.
   Nur auf hohen Fenstern (sonst bliebe fuer die Zeilen zu wenig Platz): dort scrollt wie bisher die ganze Seite.
   Nicht fuer die Auswertungen (kein .einst-seite). */
@media (min-height: 860px) {
  body.einst-seite:has(.settings-stack > .card > .table-wrap) .seite-scroll{overflow:hidden}
  body.einst-seite:has(.settings-stack > .card > .table-wrap) .seite-scroll > main{display:flex;flex-direction:column;flex:1 1 0;min-height:0;padding-top:24px;padding-bottom:24px}
  body.einst-seite:has(.settings-stack > .card > .table-wrap) .tabs{flex:none}
  body.einst-seite:has(.settings-stack > .card > .table-wrap) .einst-formulare{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  body.einst-seite:has(.settings-stack > .card > .table-wrap) .settings-stack{flex:1 1 0;min-height:0}
  body.einst-seite:has(.settings-stack > .card > .table-wrap) .settings-stack > *{flex:none}
  body.einst-seite:has(.settings-stack > .card > .table-wrap) .settings-stack > .card:has(> .table-wrap){flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  body.einst-seite:has(.settings-stack > .card > .table-wrap) .settings-stack > .card > :not(.table-wrap){flex:none}
  body.einst-seite:has(.settings-stack > .card > .table-wrap) .settings-stack > .card > .table-wrap{flex:1 1 0;min-height:0;overflow:auto}
  /* Tabellenkopf bleibt oben (border-collapse: Linie als Schatten, sonst scrollt sie mit) */
  body.einst-seite:has(.settings-stack > .card > .table-wrap) .table-wrap thead th{position:sticky;top:0;z-index:3;background:var(--card);
    border-bottom:none;box-shadow:inset 0 -2px 0 var(--line)}
}

/* Papierkorb (Dokumentenverwaltung): Knopf neben "+ Neu anlegen", Liste im Popup */
.liste-kopf-aktionen{display:flex;gap:10px;align-items:center}
.papierkorb-tabelle td{vertical-align:top}
.papierkorb-tabelle td form{display:inline-block;margin:0 8px 0 0}
.papierkorb-tabelle .danger-text{color:#a12620}

/* Pflichtinhalte: "Geisterhuellen" je Kunde (nur Admins) - leer = gestrichelt */
.huellen-phase{font-size:14px;margin:18px 0 8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.huellen{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.huelle{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid var(--line)}
.huelle.leer{border:2px dashed var(--line)}
.huellen-tabelle td:nth-child(3){white-space:nowrap}   /* Phase nicht umbrechen, wie in der Dokumente-Liste */
.huellen-tabelle td.actions .btn{margin-right:6px}
.huelle-ausnahme{display:flex;gap:8px;flex:1 1 320px;margin-left:auto}
.huelle-ausnahme input{flex:1;min-width:0}
.pflicht-auswahl{margin-top:14px}
.pflicht-liste{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px;margin-top:8px}
.pflicht-option{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:8px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.pflicht-option:last-child{border-bottom:none}
.pflicht-option[hidden]{display:none}
.pflicht-weitere{margin-top:10px}
.pflicht-weitere>summary{cursor:pointer;color:var(--nb);font-weight:600}

/* Kapitel: Bereiche auf Start-/Kategorie-Seiten. Werkzeuge an der Ueberschrift nur im Anordnen-Modus. */
.doc-cards .kapitel-werkzeuge{display:none;align-items:center;gap:6px;margin:0 auto 0 14px}
.anordnen-aktiv .doc-cards .kapitel-werkzeuge{display:inline-flex}
.doc-cards .kap-knopf{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--nb);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;padding:0;font-family:inherit}
.doc-cards .kap-knopf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.doc-cards .kap-knopf:hover,.doc-cards .kap-knopf:focus-visible{background:var(--paper);border-color:var(--cyan)}
.doc-cards .kap-knopf.gefahr:hover,.doc-cards .kap-knopf.gefahr:focus-visible{color:#b3261e;border-color:#b3261e}
.doc-cards .portal-head.standard-leer,.doc-cards .portal-grid.standard-leer{display:none}
.anordnen-aktiv .doc-cards .portal-head.standard-leer{display:flex}
.anordnen-aktiv .doc-cards .portal-grid.standard-leer{display:grid}
.anordnen-aktiv .doc-cards .portal-grid:empty{min-height:110px;border:2px dashed var(--line);border-radius:12px;
  align-items:center;justify-items:center}
.anordnen-aktiv .doc-cards .portal-grid:empty::before{content:attr(data-leer);grid-column:1/-1;color:var(--muted);font-size:14px}