/* ==========================================================================
   Aktavo – Basis-Stylesheet (Design-Tokens + Komponenten)
   Marke: „Serife + Blau". Tokens zentral als CSS-Variablen, damit sie später
   1:1 in die SPA übernommen werden können. Reine Styling-Schicht – die
   Klassennamen entsprechen den bestehenden Templates.
   ========================================================================== */

/* --- Selbst gehostete Fonts (woff2, Latin-Subset inkl. ä/ö/ü/ß) -----------
   DSGVO: kein Google-CDN; OFL-lizenziert (Inter, Source Serif 4). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.da03732a27e1.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500.51205681a1ba.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-600.2ede57db1a3a.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-700.8ca0a5155296.woff2") format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/source-serif-4-400.95bbd98f2b3c.woff2") format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/source-serif-4-600.beb0c8d8bee8.woff2") format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/source-serif-4-700.45959eeff97f.woff2") format('woff2')}

:root{
  /* Akzent / Primär (Aktionen, Links, aktive Nav, Logo) */
  --accent:#185FA5; --accent-hover:#0C447C; --accent-tint:#E6F1FB;
  /* Ink (Überschriften, Wortmarke, Text) */
  --ink:#14253D; --ink-2:#5B6472; --ink-3:#8A8F99;
  /* Status */
  --green:#1F6E56; --green-tint:#E1F5EE;     /* sicher / freigegeben */
  --amber:#BA7517; --amber-tint:#FAEEDA;     /* ausstehend */
  --danger:#B23A2E; --danger-tint:#FBEAE7;
  /* Datei-/Ordner-Icon-Farben – gedämpft (B2B), als Variablen definiert, damit sie
     beim späteren Dark Mode automatisch mitziehen. Farbe ist NIE das einzige Merkmal:
     die Icon-FORMEN (Ordner/PDF/Word/Excel/Bild/Datei) unterscheiden sich zusätzlich. */
  --icon-folder:#C48A2E;   /* Bernstein/Amber – Ordner */
  --icon-pdf:#BC4B4B;      /* gedämpftes Rot – PDF */
  --icon-word:#2F6DA8;     /* gedämpftes Blau – Word/Text */
  --icon-excel:#3E8E5A;    /* gedämpftes Grün – Excel/Tabelle */
  --icon-image:#7B5AA6;    /* gedämpftes Violett – Bilder */
  --icon-file:#7A8699;     /* Neutralgrau – sonstige Dateien */
  /* Flächen */
  --page:#F6F7F9; --card:#FFFFFF; --line:#E7E6E1;
  --radius:8px; --radius-card:12px;
  --topbar:60px;   /* Höhe der Kopfleiste (mobil 56px, s. u.) – für das App-Shell-Layout */
  /* Typografie */
  --font-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Rückwärtskompatible Aliase (vereinzelte Altnutzung) */
  --bg:var(--page); --muted:var(--ink-3); --primary:var(--accent);
  --primary-d:var(--accent-hover); --chip:var(--accent-tint);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--font-sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* --- Typografie ---------------------------------------------------------- */
h1{font-family:var(--font-serif); font-weight:600; font-size:26px; line-height:1.25;
   color:var(--ink); margin:0 0 6px; letter-spacing:-.01em}
h2{font-family:var(--font-serif); font-weight:600; font-size:19px; line-height:1.3;
   color:var(--ink); margin:0 0 14px}
.muted{color:var(--ink-3); font-size:13px}

/* Geteilter Icon-Button für Navigation (Raum-Vor/Zurück-Pfeile UND Zurück-Links).
   Rundes weißes Kästchen, dünne helle Umrandung, gedämpfter Chevron, dezenter Hover.
   Wird von _roomnav.html (< >) und den Zurück-Links (.nav-back) geteilt – damit sie
   nicht wieder auseinanderdriften. */
.nav-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; box-sizing:border-box;
  background:var(--card); color:var(--ink-3);
  border:1px solid var(--line); border-radius:var(--radius);
  line-height:1; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s}
.nav-icon-btn:hover{background:var(--page); border-color:var(--ink-3); color:var(--ink)}
.nav-icon-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.nav-icon-btn:disabled{opacity:.4; cursor:default;
  background:var(--card); border-color:var(--line); color:var(--ink-3)}

/* Zurück-Link: Chevron-Kästchen (.nav-icon-btn) + gedämpftes Breadcrumb-Label. */
.nav-back{display:inline-flex; align-items:center; gap:8px; margin-bottom:4px;
  font-size:13px; color:var(--ink-3)}
.nav-back:hover{color:var(--ink); text-decoration:none}
.nav-back:hover .nav-icon-btn{background:var(--page); border-color:var(--ink-3); color:var(--ink)}
.nav-back:focus-visible{outline:none}
.nav-back:focus-visible .nav-icon-btn{outline:2px solid var(--accent); outline-offset:2px}
.nav-back-label{color:inherit}

/* --- Top-Bar ------------------------------------------------------------- */
header.topbar{
  background:var(--card); border-bottom:1px solid var(--line);
  padding:0 24px; height:var(--topbar);
  display:flex; align-items:center; justify-content:space-between;
  /* Globale Leiste beim Scrollen sichtbar/klickbar halten. sticky (nicht fixed)
     bleibt im Fluss -> kein Höhensprung/doppelter Abstand. z-index bewusst niedrig:
     über dem Inhalt (0–2), aber UNTER allen Menüs/Dropdowns (30–60), Modals/Overlays
     (50+) und dem nativen Bestätigungs-<dialog> (Top-Layer) – so wird nichts von der
     Leiste abgeschnitten. Das Avatar-Menü ist ein Kind der Leiste und liegt ohnehin
     über dem Inhalt (kein overflow:hidden hier). */
  position:sticky; top:0; z-index:20;
}
header.topbar .brand{display:flex; align-items:center; gap:10px}
header.topbar .brand:hover{text-decoration:none}
.wordmark{font-family:var(--font-serif); font-weight:700; font-size:21px;
  color:var(--ink); letter-spacing:.01em}
header.topbar nav{display:flex; align-items:center; gap:18px}
header.topbar nav a{color:var(--ink-2); font-size:14px; font-weight:500}
header.topbar nav a:hover{color:var(--accent); text-decoration:none}
.role-chip{
  background:var(--accent-tint); border:1px solid var(--line); color:var(--accent);
  padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;
}
/* Avatar-/Konto-Menü in der Topbar (Avatar = ich; Zahnrad = App). A11y wie „Mehr". */
.usermenu{position:relative; display:inline-flex}
.usermenu-trigger{background:none; border:0; padding:0; cursor:pointer; display:inline-flex; border-radius:50%; line-height:0}
.usermenu-trigger:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.usermenu-pop{position:absolute; right:0; top:calc(100% + 6px); z-index:60; width:250px;
  max-width:calc(100vw - 24px);                       /* nie über den Rand (schmale Viewports) */
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:0 12px 30px rgba(20,37,61,.16); padding:6px}
.usermenu-head{padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:4px}
.um-name{font-weight:600; color:var(--ink); font-size:14px; overflow-wrap:anywhere}
.um-email{font-size:12px; color:var(--ink-3); overflow-wrap:anywhere; margin-top:1px}
.um-role{margin-top:6px}
.usermenu-item{display:block; padding:8px 10px; font-size:13px; font-weight:500; color:var(--ink);
  text-decoration:none; border-radius:var(--radius)}
.usermenu-item:hover, .usermenu-item:focus-visible{background:var(--page); outline:none}

/* Einstellungs-Bereiche (Konto/Einstellungen/Organisation) zentriert + schmaler –
   der äußere Container bleibt bei 1800px (für Listen), Formularseiten kleben aber
   nicht am linken Rand. */
.settings-wrap{max-width:860px; margin:0 auto}
/* Benachrichtigungs-Glocke (Umriss / gefüllt + Zähler-Badge) */
.bell,.gear{display:inline-flex; align-items:center; color:var(--ink-2)}
.gear:hover{color:var(--ink)}
/* Sub-Navigation der Einstellungsbereiche (Konto/Einstellungen/Organisation) */
.settings-nav{display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:0 0 18px}
.settings-tab{padding:9px 14px; font-size:14px; font-weight:500; color:var(--ink-2); text-decoration:none;
  border-bottom:2px solid transparent; border-radius:var(--radius) var(--radius) 0 0}
.settings-tab:hover{color:var(--ink); background:var(--page)}
.settings-tab.active{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
/* Rechte-Editor: Ordnerbaum auf-/zuklappen */
.tree-toggle{background:none; border:0; cursor:pointer; color:var(--ink-2); font-size:11px;
  width:16px; padding:0; margin-right:2px; line-height:1; vertical-align:middle}
.tree-toggle:hover{color:var(--ink)}
.tree-dot{display:inline-block; width:16px; color:transparent; margin-right:2px}
/* Zentrale Avatar-Komponente (Bild oder Initialen-Kreis) */
.avatar{display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  object-fit:cover; flex:none; vertical-align:middle; overflow:hidden}
.avatar-initials{color:#fff; font-weight:600; line-height:1; text-transform:uppercase; letter-spacing:.01em}
.avatar-edit{display:flex; align-items:center; gap:14px; margin:2px 0 10px}
.bell:hover{color:var(--accent)}
/* Icon-Wrapper: trägt das Badge (position:relative), damit die Glocke außen eine
 * beliebige Box-Größe haben kann, ohne dass sich das Badge vom Icon löst. */
.bell-ic{position:relative; display:inline-flex; align-items:center; line-height:0}
.ic-bell{display:block}
.bell-badge{position:absolute; top:-6px; right:-7px; min-width:15px; height:15px; padding:0 3px;
  border-radius:999px; background:var(--danger); color:#fff; font-size:10px; font-weight:700;
  line-height:15px; text-align:center}
/* Sprach-Umschalter (DE/EN) im Navigationsmenü. */
.lang-switch{display:inline-flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:2px; background:var(--card)}
.lang-switch button{border:0; background:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600;
  color:var(--ink-3); padding:3px 9px; border-radius:999px; line-height:1.4}
.lang-switch button.on{background:var(--accent); color:#fff}
.lang-switch button:not(.on):hover{color:var(--accent)}

/* Rechter Topbar-Cluster: Nav-Links + Glocke (+ Hamburger nur auf Mobil). */
.topbar-right{display:flex; align-items:center; gap:18px}
.navtoggle{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none}  /* CSS-only Umschalter, visuell aus, kein Off-Screen-Scroll */
.hamburger{display:none; align-items:center; justify-content:center; color:var(--ink-2);
  cursor:pointer; padding:6px; border-radius:var(--radius)}
.hamburger:hover{color:var(--accent); background:var(--page)}

/* --- Layout -------------------------------------------------------------- */
/* Arbeitsbreite: der Datenraum ist eine Arbeitsanwendung, kein Fliesstext. Bis
   ~1800px die Bildschirmbreite nutzen (24-Zoll-Nutzbreite), darunter fliessend
   (width via auto-Margin/padding), darueber zentriert ohne weiteres Wachsen.
   Schmale Formular-Karten begrenzen sich weiterhin selbst (eigene max-width). */
.wrap{max-width:1800px; margin:28px auto; padding:0 20px;
  min-height:calc(100vh - 60px - 130px)}

/* --- Fluides Vollbild-App-Shell (NUR die Dokumente-Arbeitsansicht via body.app-shell) ---
   Volle Viewport-Breite + 100dvh: Kopfleiste fix, die drei Panels (Ordner|Inhalt|Details)
   fuellen den Rest und scrollen INTERN – die Seite selbst scrollt nicht. Alle anderen
   Seiten sind unberuehrt (behalten .wrap 1800px + normale Scrollseite + Footer). */
body.app-shell{height:100dvh; overflow:hidden; display:flex; flex-direction:column}
body.app-shell > header.topbar{flex:none}
body.app-shell > .wrap{flex:1 1 auto; min-height:0; max-width:none; width:100%;
  margin:0; padding:14px 0 0; display:flex; flex-direction:column; overflow:hidden}
body.app-shell > footer.trustbar{display:none}
/* Top-Chrome (h1/Suche/Roombar/Phasenzeile/Hinweise) bekommt seitlichen Rand;
   die Panels selbst laufen full-bleed bis an den Rand. */
body.app-shell > .wrap > *{padding-inline:16px}
body.app-shell > .wrap > .room-panel{padding-inline:0}
/* Nur die auxiliaeren Elemente UNTER den Panels ausblenden (Aktivitaets-Feed, Rechte-
   Notiz) – sie passen nicht in die scrollfreie Shell; der Feed bleibt ueber den
   „Aktivitaet"-Reiter erreichbar. Modals/Drawer-Overlays (position:fixed) bleiben unberuehrt. */
body.app-shell .feedmarks-bar, body.app-shell .room-aux{display:none}
/* „Neu/Geändert": kompakte Umschalt-Leiste (statt separater, überlappender Kachel) +
   nicht-überlappende Inline-Marker direkt an der Zeile. */
.feedmarks-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px}
.feedmark{margin-left:6px}
/* Anforderungsseite: klickbare Status-Filter-Chips + einzeilige Beschreibung + Modus-Umschalter */
.anf-filters{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:8px 0 12px}
.anf-chip{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border:1px solid var(--line);
  border-radius:999px; background:var(--card); color:inherit; cursor:pointer; font-size:13px; line-height:1.6}
.anf-chip:hover{filter:brightness(.97)}
.anf-chip.active{background:#2f6e57; color:#fff; border-color:#2f6e57}
.anf-chip.active .pill{background:rgba(255,255,255,.22); color:#fff; border-color:transparent}
.anf-desc-1{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46ch}
/* AJAX-Ordnernavigation: dezenter Ladezustand NUR in der Content-Pane (Baum blitzt nie weg). */
.panel-content.fb-loading{opacity:.5; pointer-events:none; transition:opacity .12s ease}
.anf-mode{display:flex; gap:6px; margin:0 0 12px}
/* Aktionen-Zelle: Entscheidungs-Paar (Akzeptieren/Ablehnen) klar gruppiert, davon
   getrennt das ⋯-Ueberlaufmenue (Bearbeiten/Loeschen). In allen Zeilen gleich rechts. */
.anf-acts{display:inline-flex; align-items:center; gap:8px; justify-content:flex-end}
.anf-decide{display:inline-flex; align-items:center; gap:6px}
/* Deep-Link-Ziel (Glocke/Aktivität): die angesprungene Anforderung kurz hervorheben. */
tr.anf-highlight > td{animation:anfFlash 2.6s ease-out}
@keyframes anfFlash{0%,25%{background:rgba(47,110,87,.18)}100%{background:transparent}}
/* Raum-Panel fuellt die Resthoehe; die inneren Panels scrollen intern statt der Seite. */
body.app-shell .room-panel{flex:1 1 auto; min-height:0; margin:0; border-radius:0;
  border-left:0; border-right:0; display:flex; flex-direction:column}
body.app-shell .panel-body{flex:1 1 auto; min-height:0}
body.app-shell .panel-content{overflow:auto}

/* Mobile-Ruecknahme: Vollbild-App-Shell entsperren, normalen Dokumentfluss + Scrollen herstellen.
   Ab <=900px geht der Ordnerbaum ohnehin in den Off-Canvas-Drawer. */
@media (max-width:900px){
  body.app-shell{height:auto; overflow:visible; display:block}
  body.app-shell > .wrap{flex:none; display:block; overflow:visible; min-height:0}
  body.app-shell .room-panel{flex:none; display:block; overflow:visible; min-height:0}
  body.app-shell .panel-body{flex:none; display:block; overflow:visible; min-height:0}
  body.app-shell .panel-content{overflow:visible}
  body.app-shell > footer.trustbar{display:block}
}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:24px; margin-bottom:18px; box-shadow:0 1px 2px rgba(20,37,61,.04);
}

/* --- Tabellen ------------------------------------------------------------ */
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
th{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3)}
tbody tr:hover{background:var(--page)}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-block; background:var(--accent); color:#fff; border:1px solid var(--accent);
  padding:9px 15px; border-radius:var(--radius); font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer; text-decoration:none; line-height:1.3; white-space:nowrap;
}
.btn:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; text-decoration:none}
.btn.sec{background:var(--card); color:var(--ink); border-color:var(--line)}
.btn.sec:hover{background:var(--accent-tint); border-color:var(--accent); color:var(--accent)}
.btn.sm{padding:5px 11px; font-size:13px}
.btn.danger{background:var(--danger); border-color:var(--danger)}
.btn.danger:hover{background:#8f2c22; border-color:#8f2c22}

/* --- Unternavigation eines Bereichs (z. B. „Anforderungen") ---------------- *
 * Zweite Ebene unter der Raum-Kopfleiste: leiser als die Reiter darueber (kein
 * Unterstrich-Tab, sondern Pillen), damit die Hierarchie sofort lesbar ist.
 * Bricht auf schmalen Viewports um statt zu scrollen. */
.subnav{display:flex; flex-wrap:wrap; gap:6px; margin:-8px 0 18px}
.subnav-item{display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px;
  font-size:13.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
  border:1px solid var(--line); background:var(--card)}
.subnav-item:hover{color:var(--accent); border-color:var(--accent); text-decoration:none}
.subnav-item.active{background:var(--accent-tint); color:var(--accent);
  border-color:var(--accent); font-weight:600}
.subnav-item:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

/* --- Destruktive Abstufung ------------------------------------------------ *
 * Zwei Zerstoerungsgrade duerfen nicht gleich laut aussehen: `.danger-soft` ist
 * die kleine, umkehrbare Variante (einen Zugang entfernen), `.danger-strong` die
 * grosse (ganzer Kunde samt Daten). Beide bleiben rot – aber nur die grosse ist
 * gefuellt, damit der Griff daneben nicht beilaeufig passiert. */
.btn.danger-soft{background:var(--card); color:var(--danger); border-color:var(--danger)}
.btn.danger-soft:hover{background:var(--danger-tint); color:#7c2418; border-color:var(--danger)}
.btn.danger-strong{box-shadow:0 1px 2px rgba(124,36,24,.25)}

/* --- Kunden-Dashboard: Administrator-Zeilen ------------------------------- *
 * Eine Zeile je Admin: Kennung links, Aktionen als EINE rechts gebuendelte Gruppe
 * mit gleichem Abstand und gleicher Hoehe. Die Formulare sind nur Transport-
 * huellen – ohne `display:contents` wuerde jede eine eigene Box aufmachen und die
 * Buttons ungleich verteilen. */
.admin-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.admin-id{flex:1 1 auto; min-width:0}
.admin-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto}
.admin-actions form{display:contents}
.admin-actions .btn{margin:0}
/* „Kunde löschen" oben ausrichten: die Administratoren-Zelle ist mehrzeilig, mittig
 * schwaebte der Knopf sonst frei neben dem Anlege-Formular statt bei der Zeile. */
.cardtable td.c-act-top{vertical-align:top}

/* --- Formulare ----------------------------------------------------------- */
label{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin:14px 0 5px}
.input{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius);
  font-size:14px; font-family:inherit; color:var(--ink); background:var(--card);
}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint)}

/* --- Breadcrumbs --------------------------------------------------------- */
.breadcrumbs{font-size:13px; color:var(--ink-3); margin-bottom:16px}
.breadcrumbs a{color:var(--ink-2)}
.breadcrumbs a:hover{color:var(--accent)}

/* --- Chips & Pills ------------------------------------------------------- */
.chip{display:inline-block; background:var(--accent-tint); color:var(--accent);
  padding:2px 9px; border-radius:6px; font-size:12px; font-weight:600}
.pill{display:inline-block; padding:2px 9px; border-radius:6px; font-size:12px; font-weight:600}
.pill.r{background:var(--accent-tint); color:var(--accent)}
.pill.d{background:var(--green-tint); color:var(--green)}
.pill.p{background:var(--amber-tint); color:var(--amber)}
.pill.x{background:var(--danger-tint); color:#7c2418}                 /* abgelaufen/Fehler */
.pill.n{background:var(--page); color:var(--ink-2); border:1px solid var(--line)}  /* neutral */

/* --- Meldungen ----------------------------------------------------------- */
.msg{padding:11px 14px; border-radius:var(--radius); margin-bottom:12px; font-size:14px; border:1px solid transparent}
.msg.success{background:var(--green-tint); color:#13503e; border-color:#bfe6d8}
.msg.error{background:var(--danger-tint); color:#7c2418; border-color:#f1cabf}
.msg.info{background:var(--accent-tint); color:var(--accent-hover); border-color:#cfe3f6}

/* --- Utilities ----------------------------------------------------------- */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}
.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap}
/* Einheitliche Reihe der Raum-Funktions-Buttons: bricht auf schmalen Viewports
   sauber um (kein Ueberlauf), gleiche Hoehe/Abstaende wie in der Toolbar. */
.roombtns{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:18px}
/* „Mehr"-Menü der Raum-Buttonleiste: Desktop zeigt ALLES (rb-more fliesst inline),
 * nur ≤768px klappt der seltenere Rest hinter den „⋯ Mehr"-Button. */
.roommore-toggle{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none}
.rb-more-btn{display:none}
.rb-more{display:contents}
@media (max-width:768px){
  .rb-more-btn{display:inline-flex}
  .rb-more{display:none; flex-basis:100%; flex-wrap:wrap; gap:8px}
  .roommore-toggle:checked ~ .rb-more{display:flex}
}

/* --- Raum-Kopfleiste (drei Zonen): Tabs · gruppiertes „Mehr" · Aktionen ------ */
.roombar{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  margin:0 0 18px; border-bottom:1px solid var(--line)}
.roombar-tabs{display:flex; align-items:flex-end; gap:2px; flex:1 1 auto; min-width:0}
.roomtab{position:relative; display:inline-flex; align-items:center; gap:6px;
  line-height:1.2; margin:0; vertical-align:bottom;
  padding:9px 12px; font-size:14px; font-weight:500; color:var(--ink-2); font-family:inherit;
  text-decoration:none; background:none; border:0; border-bottom:2px solid transparent;
  cursor:pointer; white-space:nowrap; border-radius:var(--radius) var(--radius) 0 0}
.roomtab:hover{color:var(--ink); background:var(--page)}
.roomtab.active{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
.roomtab:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.roommore{position:relative; display:inline-flex}
.roommore-caret{font-size:11px}
.roommore-menu{position:absolute; left:0; top:calc(100% + 2px); z-index:40; min-width:220px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:0 12px 30px rgba(20,37,61,.16); padding:6px}
.roommore-group + .roommore-group{margin-top:4px; border-top:1px solid var(--line); padding-top:4px}
.roommore-title{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); padding:6px 10px 3px}
.roommore-item{display:block; padding:8px 10px; font-size:13px; font-weight:500; color:var(--ink);
  text-decoration:none; border-radius:var(--radius)}
.roommore-item:hover, .roommore-item:focus-visible{background:var(--page); outline:none}
.roommore-item.active{color:var(--accent); font-weight:600}
.roombar-actions{display:flex; align-items:center; gap:8px; margin-left:auto; padding-bottom:6px}
/* Zentraler „Aktavo Assistent"-Button + Dropdown in der GLOBALEN Kopfleiste. */
.ai-header{position:relative; display:inline-flex; align-items:center; margin-left:14px}
.ai-header-trigger{display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--page); border:1px solid var(--line); border-radius:999px;
  /* Vertikales Padding bewusst knapp: die Pill sitzt nur wenig über der 34px-Logo-Höhe
     (Logo ist der Höhentreiber; flacher geht nur, indem man das Logo verkleinert).
     Horizontal-Padding unverändert; Logo + Schrift via align-items:center zentriert. */
  padding:2px 11px; font-size:13px; font-weight:600; color:var(--ink); line-height:1}
.ai-header-trigger:hover, .ai-header-trigger:focus-visible{border-color:var(--accent); outline:none}
.ai-header-logo{height:34px; width:auto; display:block}   /* Vollfarb-Markenzeichen, fixe Farbe; Höhe Geschmackssache, in 2px-Schritten justierbar */
.ai-menu-caret{font-size:11px; color:var(--ink-3)}
@media (max-width:640px){ .ai-header-label{display:none} }   /* schmal: nur Logo + Chevron */
.ai-menu-pop{position:absolute; left:0; top:calc(100% + 6px); z-index:40; min-width:236px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.12); padding:6px}
.ai-menu-pop[hidden]{display:none}
.ai-menu-item{display:block; width:100%; text-align:left; padding:8px 10px; font-size:13px;
  font-weight:500; color:var(--ink); background:none; border:0; border-radius:6px;
  cursor:pointer; text-decoration:none}
.ai-menu-item:hover, .ai-menu-item:focus-visible{background:var(--page); outline:none}
.ai-menu-item.disabled{color:var(--ink-3); cursor:not-allowed}
.ai-menu-item.disabled:hover{background:none}
.wmf-actions{white-space:nowrap}
.wmf-actions form + form{margin-left:6px}

/* Kompakte, einzeilige Phasenzeile (statt großer Karte) */
.phasebar{display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow:hidden;
  margin:0 0 14px; padding:7px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); font-size:13px}
.phasebar-badge{flex:none}
.phasebar-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); min-width:0}
.phasebar-gate{flex:none; white-space:nowrap}
.phasebar-cockpit{margin-left:auto; flex:none}

/* Ins „Mehr"-Menü verschobene Tabs/Aktionen (mobiler Overflow) als Menüzeilen */
.roommore-menu .roomtab, .roommore-menu .btn{display:block; width:100%; text-align:left;
  border:0; border-radius:var(--radius); padding:8px 10px; font-size:13px; font-weight:500;
  white-space:normal; margin:0; background:none; color:var(--ink); cursor:pointer}
.roommore-menu .roomtab:hover, .roommore-menu .btn:hover{background:var(--page)}
.roommore-menu .roomtab.active{color:var(--accent); font-weight:600}
.roommore-menu .btn.danger{color:var(--danger)}
@media (max-width:768px){
  .roombar{gap:8px}
  /* KEIN overflow:hidden hier – das würde das aus .roombar-tabs herausklappende
     „Mehr"-Dropdown abschneiden. Das JS entfernt überzählige Tabs, daher entsteht
     gar kein horizontaler Scroll. */
  .roombar-tabs{flex-wrap:nowrap; min-width:0}
  .roombar-actions{margin-left:0; padding-bottom:4px}
  .roombar-actions:empty{display:none}               /* Aktionen sind ins „Mehr" verschoben */
  /* „Mehr"-Menü auf Mobil über die volle Breite des Inhaltsbereichs, damit nichts
     über den Viewport-Rand (links ODER rechts) hinausragt. Trick: das Menü wird
     relativ zur .roombar (Vollbreite) positioniert statt zum schmalen Trigger –
     dafür .roombar positioniert und .roommore als Container aufheben. */
  .roombar{position:relative}
  .roommore{position:static}
  .roommore-menu{left:0; right:0; top:100%; width:auto; max-width:none; min-width:0;
    margin-top:6px; max-height:72vh; overflow-y:auto}
}
.icon{font-size:16px}

/* --- Zentrales Bestätigungs-Modal (natives <dialog>) ------------------------ */
.dr-modal{border:0; padding:0; background:transparent; color:inherit;
  max-width:min(460px, calc(100% - 32px)); width:100%}
.dr-modal::backdrop{background:rgba(20,30,45,.45)}
.dr-modal-box{background:var(--card); border-radius:var(--radius-card); padding:22px 24px;
  box-shadow:0 12px 40px rgba(0,0,0,.25); font-family:inherit}
.dr-modal-title{margin:0 0 8px; font-size:1.15rem; color:var(--ink)}
.dr-modal-msg{margin:0 0 6px; color:var(--ink); line-height:1.55; white-space:pre-line}
.dr-modal-hint{margin:0 0 6px; color:var(--ink-2); font-size:13px; line-height:1.5; white-space:pre-line}
.dr-modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:18px}
.dr-modal[open]{animation:drmodal-in .12s ease}
@keyframes drmodal-in{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* Lückencheck-Modal (Vollständigkeitsprüfung): etwas breiter, Ergebnisliste scrollbar. */
#completenessModal{max-width:min(560px, calc(100% - 32px))}
#completenessModal #completenessBody{max-height:60vh; overflow-y:auto}
.lc-note{margin:0 0 14px; color:var(--ink-2); font-size:13px; line-height:1.5}
.lc-sub{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); margin:14px 0 6px}
.lc-item{padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:6px; background:var(--card)}

/* --- Kamera-Scan-Overlay (Foto -> PDF, client-seitig) ---------------------- */
.scan-overlay{position:fixed; inset:0; z-index:9500; background:var(--card);
  display:flex; flex-direction:column; overflow:auto}
.scan-head{display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line)}
.scan-x{background:none; border:0; font-size:26px; line-height:1; cursor:pointer; color:var(--ink-2)}
.scan-body{flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:12px; min-height:0}
.scan-canvas{max-width:100%; touch-action:none; border-radius:8px; display:block; margin:0 auto}
.scan-start{text-align:center}
.scan-hint{margin:10px auto 0; max-width:340px}
.scan-adjust{padding:10px 16px; border-top:1px solid var(--line); display:flex;
  align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between}
.scan-adjust-btns{display:flex; gap:8px; flex-wrap:wrap}
.scan-toggle{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500}
.scan-pages{display:flex; gap:8px; padding:10px 16px; overflow-x:auto; border-top:1px solid var(--line)}
.scan-thumb{position:relative; flex:0 0 auto; width:70px; height:90px; border:1px solid var(--line);
  border-radius:6px; overflow:hidden; background:var(--page)}
.scan-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.scan-thumb-no{position:absolute; left:2px; top:2px; background:rgba(0,0,0,.6); color:#fff;
  font-size:11px; padding:0 5px; border-radius:8px}
.scan-thumb-x{position:absolute; right:2px; top:2px; width:20px; height:20px; border:0;
  border-radius:50%; background:rgba(178,58,46,.92); color:#fff; cursor:pointer; line-height:1; font-size:15px}
.scan-thumb-l,.scan-thumb-r{position:absolute; bottom:2px; width:20px; height:20px; border:0;
  border-radius:50%; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; line-height:18px; font-size:15px}
.scan-thumb-l{left:2px} .scan-thumb-r{right:2px}
.scan-foot{display:flex; gap:8px; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--line)}

/* Globaler Schutz: das hidden-Attribut MUSS ausblenden. Autor-display-Regeln
   (display:flex/grid) schlagen sonst den UA-Stil [hidden]{display:none} und
   Elemente bleiben trotz element.hidden=true sichtbar (betraf u.a. den
   PWA-Banner und die Scan-Panels). */
[hidden]{display:none !important}

/* --- PWA-Installations-Banner (dezent, nach Login) ------------------------ */
.pwa-banner{display:flex; align-items:center; gap:12px; padding:9px 16px;
  background:var(--accent-tint); border-bottom:1px solid var(--line); font-size:14px; color:var(--ink)}
.pwa-banner-text{flex:1 1 auto; min-width:0}
.pwa-banner-x{background:none; border:0; font-size:22px; line-height:1; cursor:pointer; color:var(--ink-2); padding:0 4px}
.pwa-banner-x:hover{color:var(--ink)}
.ic{vertical-align:-3px}        /* kleine Inline-SVG-Icons (Ordner/Dokument) */
/* Typ-Farben (currentColor am SVG + Klasse). Die FORM unterscheidet die Typen
   zusätzlich zur Farbe (A11y): Ordner/PDF/Word/Excel/Bild/Datei sind eigene Icons. */
.ic-folder{color:var(--icon-folder)}
.ic-pdf{color:var(--icon-pdf)}
.ic-word{color:var(--icon-word)}
.ic-excel{color:var(--icon-excel)}
.ic-image{color:var(--icon-image)}
.ic-file,.ic-generic{color:var(--icon-file)}
/* Namen neutral (Textfarbe) statt Link-Blau – in einer Liste ist ohnehin alles
   klickbar; Hover/Fokus bleibt erkennbar. Gilt für Ordner- UND Dokumentzeilen. */
.cardtable .c-titlecell a{color:var(--ink)}
.cardtable .c-titlecell a:hover, .cardtable .c-titlecell a:focus-visible{color:var(--accent)}
.empty{color:var(--ink-3); padding:22px; text-align:center}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:720px){.grid2{grid-template-columns:1fr}}
.searchbar{display:flex; gap:8px}
.searchbar input{flex:1}
code.path{font-family:ui-monospace,Consolas,monospace; font-size:12px; color:var(--ink-3)}

/* --- Vertrauens-Leiste (Footer; auf jeder Seite) ------------------------- */
footer.trustbar{
  max-width:1800px; margin:8px auto 28px; padding:14px 20px 0;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:center;
  font-size:12px; color:var(--ink-3);
}
footer.trustbar .ts{display:inline-flex; align-items:center; gap:6px}
footer.trustbar .ts b{color:var(--ink-2); font-weight:600}
footer.trustbar .sep{color:var(--line)}

/* --- Login-Lockup -------------------------------------------------------- */
.brand-lockup{display:flex; flex-direction:column; align-items:center; gap:10px; margin:48px 0 18px}
.brand-lockup .wordmark{font-size:30px}
/* Zentrierte Auth-Seiten (Login + 2FA): Karte mittig, gesamter Inhalt zentriert –
 * Überschrift, Untertitel, Labels, Eingabefelder, Buttons und Links. Gilt Desktop
 * und Mobil (konsistenter Anmelde-Flow). */
.auth-wrap{max-width:440px; margin:0 auto; text-align:center}
.auth-wrap .toolbar{justify-content:center; text-align:center}
.auth-wrap .card{margin-left:auto; margin-right:auto; text-align:center}
.auth-wrap label{display:block; text-align:center}
.auth-wrap .input{width:100%; text-align:center; margin-left:auto; margin-right:auto}
.auth-wrap .auth-qr{justify-content:center}   /* QR + Secret bei der 2FA-Einrichtung mittig */

/* --- Onboarding-Modal ---------------------------------------------------- */
.modal-overlay{position:fixed; inset:0; background:rgba(20,37,61,.45); z-index:50;
  display:flex; align-items:flex-start; justify-content:center; padding:48px 16px; overflow:auto}
.modal-box{position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:28px 30px; max-width:560px; width:100%;
  box-shadow:0 12px 34px rgba(20,37,61,.20)}
.modal-x{position:absolute; top:8px; right:10px; background:none; border:0; cursor:pointer;
  font-size:22px; line-height:1; color:var(--ink-3); padding:4px 8px}
.modal-x:hover{color:var(--ink)}
.onb-steps{margin:10px 0 0; padding-left:22px; line-height:1.85}
.onb-steps li{padding-left:4px}

/* --- Onboarding „Erste Schritte"-Panel (Option B) -------------------------- */
.onb-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.onb-count{font-size:13px; color:var(--ink-3); font-weight:600; white-space:nowrap}
.onb-bar{height:6px; border-radius:999px; background:var(--line); margin:10px 0 14px; overflow:hidden}
.onb-bar-fill{height:100%; background:var(--accent); border-radius:999px; transition:width .3s}
.onb-steps-list{display:flex; flex-direction:column; gap:4px}
.onb-step{display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:var(--radius); border:1px solid transparent}
.onb-step.next{background:var(--accent-tint); border-color:#cfe3f6}
.onb-ic{flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center}
.onb-ic.ok{color:var(--green)}
.onb-ic.open{color:var(--ink-3)}
.onb-body{flex:1; min-width:0}
.onb-label{font-size:14px; font-weight:600; color:var(--ink)}
.onb-step.done .onb-label{color:var(--ink-3); text-decoration:line-through; font-weight:500}
.onb-hint{font-size:12px; color:var(--ink-3); margin-top:2px}
.onb-done-tag{flex:none; font-size:12px; color:var(--green); font-weight:600}
.onb-foot{margin-top:12px; text-align:right}
.onb-dismiss{background:none; border:0; cursor:pointer; font-size:12px; color:var(--ink-3); padding:4px 6px}
.onb-dismiss:hover{color:var(--accent)}
@media(max-width:560px){.onb-step{flex-wrap:wrap} .onb-done-tag,.onb-step .btn{margin-left:34px}}

/* --- Responsive ----------------------------------------------------------- *
 * Anzeige an Bildschirmgröße (Telefon ~375 / Tablet ~768 / Desktop). Design-
 * Tokens/Fonts bleiben unverändert. Priorität Teilnehmer-Flows: Login,
 * Dokumentenliste/-ansicht, Upload, Q&A. Breite Tabellen werden horizontal
 * scrollbar statt abgeschnitten. */
@media (max-width:768px){
  .wrap{margin:16px auto; padding:0 14px; min-height:calc(100vh - 56px - 150px)}
  .card{padding:16px}
  /* Datentabellen: innerhalb der Karte horizontal scrollen statt überlaufen. */
  .card:has(table){overflow-x:auto; -webkit-overflow-scrolling:touch}
  .card table{min-width:480px}
  th,td{padding:9px 8px}
  h1{font-size:22px}
  h2{font-size:17px}
  /* Top-Bar: Brand links, rechts Glocke + Hamburger; Nav-Links klappen ins Menü.
     sticky beibehalten (überschreibt die Basis nicht) – dient zugleich als
     Bezugsrahmen für das absolut positionierte #mainnav-Klappmenü. */
  header.topbar{position:sticky; top:0; --topbar:56px; height:var(--topbar); padding:0 14px}
  .hamburger{display:inline-flex}
  .topbar-right{gap:12px}
  #mainnav{
    position:absolute; top:100%; left:0; right:0; z-index:60;
    display:none; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--card); border-bottom:1px solid var(--line);
    box-shadow:0 10px 26px rgba(20,37,61,.14); padding:8px 14px;
  }
  .navtoggle:checked ~ #mainnav{display:flex}
  #mainnav a{padding:12px 6px; font-size:15px; border-radius:var(--radius)}
  #mainnav a:hover{background:var(--page)}
  .wordmark{font-size:19px}
}
@media (max-width:480px){
  h1{font-size:20px}
  header.topbar nav a{font-size:13px}
  /* Suchfeld nutzt die volle Zeilenbreite statt fixer 220px; kein vertikales Wachsen. */
  .searchbar{flex:0 0 auto; width:100%}
  .searchbar input{width:auto !important; min-width:0}
  .btn.sm{padding:11px 15px}                 /* fingerfreundliche Tap-Fläche (~44px) */
  footer.trustbar{gap:6px 12px; font-size:11px}
}

/* --- Mitglieder-Panel: NIE scrollen ---------------------------------------- *
 * Tabelle passt in die Panel-Breite (kein min-width, kein overflow-Scroll).
 * Auf sehr schmalen Screens wird sie kartenartig je Mitglied gestapelt.
 * Steht bewusst NACH dem Responsive-Block, um dessen min-width:480 hier
 * aufzuheben. */
.members-card table{min-width:0}
/* Aktionsspalte: schmal, rechtsbündig, ein kompaktes ⋯-Menü pro Zeile. */
.actions-cell{text-align:right; width:1%; white-space:nowrap}
/* Tabelle scrollt bei Engstand INNERHALB der Karte; "…" ragt nie heraus. */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.members-card{overflow:hidden}              /* Rundungen bleiben erhalten */
/* Benutzer-Spalte: Name/E-Mail/Telefon je eigene Zeile; lange E-Mail gekürzt (voller Wert im title). */
.m-name{font-weight:500}
.members-card .m-email{display:block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rowmenu{position:relative; display:inline-block}
.rowmenu-btn{background:none; border:1px solid transparent; border-radius:var(--radius); cursor:pointer;
  font-size:18px; line-height:1; color:var(--ink-2); padding:4px 10px; font-family:inherit}
.rowmenu-btn:hover{background:var(--page); border-color:var(--line); color:var(--ink)}
.rowmenu-pop{position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:210px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:0 12px 30px rgba(20,37,61,.16); padding:6px}
.rowmenu-pop form{margin:0}
.rowmenu-item{display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:500; color:var(--ink); padding:8px 10px;
  border-radius:var(--radius); white-space:nowrap}
.rowmenu-item:hover{background:var(--page)}
.rowmenu-item.danger{color:var(--danger)}
.rowmenu-item.danger:hover{background:var(--danger-tint)}

/* Ordnerzeile: Freigabe-Dropdown + Aktions-Icons einzeilig (entkoppelt).
   Icons sind IMMER sichtbar (kein Hover-Reveal), gedämpft (--ink-2) und dunkeln
   bei Hover/Fokus nach. Folder-plus und ⋯ teilen dieselbe Button-Chrome. */
.frow-cell{display:inline-flex; align-items:center; gap:8px; justify-content:flex-end}
.frow-acts{display:inline-flex; align-items:center; gap:2px}
.frow-ico{display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:30px; height:30px; padding:0; background:none; border:1px solid transparent;
  border-radius:var(--radius); cursor:pointer; color:var(--ink-2); line-height:1;
  text-decoration:none; font-size:18px; transition:color .12s, background .12s, border-color .12s}
.frow-ico:hover{background:var(--page); border-color:var(--line); color:var(--ink)}
.frow-ico:focus-visible{outline:2px solid var(--accent); outline-offset:1px; color:var(--ink)}
.frow-ico svg{display:block}
/* Kurze Zellen/Badges brechen NIE mitten im Wort; Spalten passen sich dem Inhalt an. */
.stack-table td{white-space:nowrap}
.stack-table td[data-label="Benutzer"]{white-space:normal}      /* Name darf umbrechen */
.stack-table td[data-label="Benutzer"] .muted{overflow-wrap:anywhere}  /* nur lange E-Mail darf brechen */
.stack-table td[data-label="Aktionen"]{white-space:normal}      /* Buttons dürfen umbrechen – Labels bleiben ganz (.btn nowrap) */
/* Sehr schmale Screens: kartenartig je Mitglied stapeln statt scrollen. */
@media (max-width:768px){
  .members-card{overflow:visible}
  .members-card .m-email{max-width:none; white-space:normal; overflow:visible; text-overflow:clip}
  .stack-table thead{display:none}
  .stack-table tr{display:block; border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin-bottom:10px}
  .stack-table td{display:block; border:none; padding:4px 0; text-align:left !important; white-space:normal}
  .stack-table td::before{content:attr(data-label); display:block; font-size:11px; text-transform:uppercase;
    letter-spacing:.04em; color:var(--ink-3); font-weight:600; margin-bottom:2px}
}

/* --- Mobile-Karten für Tabellen (Datenraum-Übersicht, Dokumentenliste) ------ *
 * Nur ≤768px: jede Zeile wird zu einer KOMPAKTEN Karte – Titel prominent oben,
 * darunter EINE graue Meta-Zeile (#ref · v1 · PDF · Datum) statt jedes Feld mit
 * eigenem Großbuchstaben-Label. Desktop bleibt UNVERÄNDERT: `.d-only` = Desktop-
 * Spalten (auf Mobil ausgeblendet), `.c-meta`/`.c-ic` = nur Mobil. */
table.cardtable{min-width:0}
.cardtable .c-meta, .cardtable .c-ic{display:none}   /* nur auf Mobil sichtbar */
@media (max-width:768px){
  .card:has(.cardtable){overflow-x:visible; border:none; box-shadow:none; background:transparent; padding:0}
  .cardtable, .cardtable tbody{display:block; min-width:0}
  .cardtable thead{display:none}
  .cardtable tr{display:block; border:1px solid var(--line); border-radius:10px;
    padding:12px 14px; margin-bottom:10px; background:var(--card)}
  .cardtable td{display:block; border:none; padding:0; text-align:left !important;
    white-space:normal; overflow-wrap:anywhere}
  .cardtable td::before{content:none !important}     /* keine Großbuchstaben-Labels auf Mobil */
  .cardtable .d-only{display:none !important}         /* Desktop-Spalten ausblenden */
  /* Titelzeile: (Icon) + Name prominent, eine Zeile. */
  .cardtable .c-titlecell{font-size:16px; line-height:1.35}
  .cardtable .c-titlecell a{font-weight:600; color:var(--ink)}
  .cardtable .c-titlecell strong{font-weight:600; font-size:16px}
  .cardtable .c-ic{display:inline-block; vertical-align:-3px; margin-right:5px; flex:none}
  .cardtable .c-desc{font-size:12.5px; font-weight:400; color:var(--ink-3); margin-top:1px}
  /* Kompakte graue Meta-Zeile. */
  .cardtable .c-meta{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px}
  .cardtable .c-titlecell .m-name{font-size:15px; font-weight:600}
  /* Badge-Meta-Zeile (Mitglieder): Rolle/Gruppe/Status/2FA fliessen in EINE Zeile. */
  .cardtable .c-metacell{display:inline-block; margin:6px 8px 0 0; vertical-align:middle}
  /* Status/Phase als schmale Zeilen (ohne Label). */
  .cardtable .c-status{margin-top:6px}
  .cardtable .c-phase{margin-top:6px; font-size:13px}
  /* Aktionen direkt unter der Meta-Zeile, kompakt. */
  .cardtable .c-act{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
  .cardtable .c-act .btn.sm{padding:9px 14px}
  /* Datenraum-Übersicht (`.roomlist`): Status-Badges + „Öffnen" verdichten sich zu
   * EINER Aktionszeile als unterstem Block der Karte. Die Karte selbst wird dafür
   * zum Flex-Container: Titelzelle (inkl. Beschreibung/Az.) nimmt die volle Breite,
   * darunter fliessen Badges links und der Button rechts in eine Zeile.
   * Nur hier – die uebrigen `.cardtable`-Karten (Dokumente, Mitglieder, …) bleiben
   * unveraendert, ebenso die Archiv-Tabelle darunter. */
  .cardtable.roomlist tr{display:flex; flex-wrap:wrap; align-items:center; gap:10px 6px}
  .cardtable.roomlist .c-titlecell{flex:1 1 100%; min-width:0}
  /* Badge-Gruppe: „aktiv" + (Voraussetzungen X/Y · Status-Chip) – selbst umbruchfaehig. */
  .cardtable.roomlist .c-status{flex:0 0 auto; margin-top:0}
  .cardtable.roomlist .c-phase{flex:1 1 auto; min-width:0; margin-top:0;
    display:flex; flex-wrap:wrap; align-items:center; gap:6px}
  .cardtable.roomlist .c-phase .muted{margin:0}
  /* „Oeffnen" rechts: keine volle Breite; `margin-left:auto` haelt ihn auch dann
   * rechtsbuendig, wenn die Badges ihn in die naechste Zeile schieben. */
  .cardtable.roomlist .c-act{flex:0 0 auto; width:auto; margin-top:0; margin-left:auto}
  /* Ganze Karte als Tap-Ziel (Buttons/Links bleiben eigene Ziele). */
  .cardtable tr.row-link{cursor:pointer}
  .cardtable tr.row-link:active{background:var(--page)}
  /* Variante „labeled": dichte Admin-Tabellen behalten je Feld ein kleines Label
   * (Audit, Rechte, Kunden-Dashboard, …) – klarer als nackte Werte, trotzdem Karten. */
  .cardtable.labeled td[data-label]{margin-bottom:3px}
  .cardtable.labeled td[data-label]::before{content:attr(data-label); display:block; font-size:11px;
    text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); font-weight:600; margin-bottom:1px}
  .cardtable.labeled td.d-only::before{content:none}
}

/* --- Post-Login-Willkommensanimation (Variante B, Vollflächen-Overlay) ------- */
/* --- Hover-Datei-Vorschau (Desktop) ---------------------------------------- */
.file-preview{position:fixed; z-index:9000; width:288px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 14px 38px rgba(20,37,61,.20);
  padding:8px; pointer-events:none; font-size:12px; color:var(--ink-2)}
.file-preview img{display:block; width:100%; max-height:360px; object-fit:contain;
  background:var(--page); border:1px solid var(--line); border-radius:6px}
.file-preview .fp-cap{margin-top:6px; padding:0 2px; overflow-wrap:anywhere}
/* Kleine Variante der Dokumentvorschau (Einstellung „Größe = klein"). */
.file-preview.fp-small{width:210px}
.file-preview.fp-small img{max-height:260px}
@media (max-width:768px){ .file-preview{display:none !important} }

/* Vollflächen-Overlay, NICHT überspringbar (kein cursor:pointer, kein Skip). */
.login-anim-overlay{position:fixed; inset:0; z-index:99999; background:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .32s ease}
.login-anim-overlay.login-anim-hide{opacity:0; pointer-events:none}
.login-anim-video{width:100%; height:100%; object-fit:contain; background:#fff}

/* --- Mobile Runde 3: Header-Ausrichtung + Trust-Footer in der App ausblenden -- */
@media (max-width:768px){
  /* Glocke + Hamburger auf EXAKT gleiches Niveau: BEIDE identische 40x40-Box,
   * flex-zentriert, gleich grosse Icons (22px). Da beide Boxen deckungsgleich sind
   * und im Flex-Container mittig sitzen, stimmen die optischen Mitten ueberein.
   * Das Badge haengt am inneren .bell-ic, loest sich also nicht von der Glocke. */
  header.topbar{align-items:center}
  .topbar-right{align-items:center; gap:8px}
  .bell, .gear, .hamburger{width:40px; height:40px; display:inline-flex; align-items:center;
    justify-content:center; padding:0; margin:0; line-height:0; align-self:center}
  .bell-ic{display:inline-flex; align-items:center}
  .bell .ic-bell, .gear svg, .hamburger svg{display:block; width:22px; height:22px}
  /* Trust-Footer innerhalb der App (Räume/Unterseiten) ausblenden – die Übersicht
   * hebt das per leerem {% block trustbar_mobile %} auf. */
  footer.trustbar.trustbar-hide-m{display:none}
}

/* --- Datenraum-Panel: Breadcrumb-Kopf + (Baum | Inhalt) in EINEM Rahmen ---- */
.room-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
  overflow:hidden; margin-bottom:18px}
.panel-crumbbar{display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line)}
.crumbbar-path{flex:1 1 auto; min-width:0; margin-bottom:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}     /* kuerzt; voller Pfad per title */
.crumbbar-sep{color:var(--ink-3)}
.crumbbar-phase{flex:none; white-space:nowrap}
.panel-body{display:flex; align-items:stretch}          /* stretch -> Trennlinie ueber volle Hoehe */
.panel-content{flex:1 1 auto; min-width:0; padding:20px; overflow-x:auto}
.panel-content td{padding-top:13px; padding-bottom:13px}  /* mehr Zeilenhoehe; Kopf grau via globalem th */

/* Baum-Spalte: keine eigene Karte mehr; im Panel angedockt. Breite per Drag (JS). */
.folder-tree{flex:0 0 264px; width:264px; align-self:stretch; overflow:auto; padding:12px 10px}
/* Resize-Griff = senkrechte Trennlinie zum Inhalt (volle Hoehe, ~6px Greifbereich). */
.ft-resize{flex:0 0 6px; align-self:stretch; position:relative; cursor:col-resize;
  background:transparent; touch-action:none}
.ft-resize::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:1px;
  transform:translateX(-50%); background:var(--line)}
.ft-resize:hover::before, .ft-resize:focus-visible::before{background:var(--accent); width:2px}
.ft-resize:focus{outline:none}
.ft-resize:focus-visible{outline:2px solid var(--accent-tint); outline-offset:-1px}
.folder-tree-head{position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  margin:-12px -10px 0; padding:7px 12px; background:var(--card); border-bottom:1px solid var(--line);
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); line-height:1}
/* Label selbst als zentriertes Flex-Element – sonst hebt Uppercase+Letterspacing
   den Text optisch nach oben (Line-Box-Versatz). */
.ft-head-title{margin:0; padding:0; line-height:1; display:flex; align-items:center}
.ft-head-actions{display:flex; align-items:center; gap:1px}
.ft-act{display:inline-flex; align-items:center; justify-content:center; line-height:1; background:none; border:0;
  cursor:pointer; color:var(--ink-3); padding:3px 4px; border-radius:5px}
.ft-act svg{display:block}     /* Icon mittig, kein Inline-Baseline-Versatz */
.ft-act:hover{background:var(--page); color:var(--ink)}
/* Baum-Kopf: Ladeindikator (rotierend) + kleines Auf-/Zuklapp-Menü. */
.ft-busy{display:inline-flex; align-items:center; color:var(--accent)}
.ft-busy[hidden]{display:none}
.ft-spin{animation:ft-spin .8s linear infinite}
@keyframes ft-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .ft-spin{animation:none} }
.ft-menu-wrap{position:relative; display:inline-flex}
/* Trigger = Baum-/Struktur-Symbol + kleiner Chevron (Optionen), gleiche .ft-act-Optik. */
.ft-menu-trigger{gap:1px}
.ft-menu-caret{opacity:.7}
.ft-menu{position:absolute; right:0; top:calc(100% + 4px); z-index:60; min-width:232px;
  max-width:calc(100vw - 24px); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:0 12px 30px rgba(20,37,61,.16); padding:6px;
  text-transform:none; letter-spacing:normal}
.ft-menu[hidden]{display:none}
.ft-menu-item{display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:8px 10px; font-size:13px; font-weight:500; color:var(--ink); border-radius:6px; line-height:1.35}
.ft-menu-item:hover, .ft-menu-item:focus-visible{background:var(--page); outline:none}
.ft-menu-sep{height:1px; background:var(--line); margin:4px 2px}
.folder-tree-head .ft-close{display:none; background:none; border:0; font-size:20px;
  line-height:1; color:var(--ink-3); cursor:pointer; padding:0 4px}
.ft-msg{padding:8px 6px; font-size:13px}
.ft-list,.ft-children{list-style:none; margin:0; padding:0}
/* Luft zwischen sticky „ORDNER"-Kopf und Baum-Anfang am SCROLLENDEN Inhalt
   (nicht als margin-bottom am sticky Kopf – das risse beim Scrollen einen Spalt).
   16px, damit die obere Rundung der Aktiv-Markierung des Stamm-Knotens KOMPLETT
   unterhalb der Kopf-Unterkante liegt und nicht vom opaken Kopf überdeckt wird.
   NUR die oberste Liste – verschachtelte <ul> tragen im JS ebenfalls .ft-list
   (Klassen „ft-list ft-children"); ohne :not(.ft-children) bekäme JEDE Unterordner-
   Liste diese 16px oben und die Zeilenhöhe wirkte je Ebene unterschiedlich. */
.ft-list:not(.ft-children){padding-top:16px}
/* Einrückung je Ebene – dezent (schwächer als zuvor), plus zarte Führungslinie:
   die Hierarchie zeigt sich klarer über die Linie statt über große Einrückung. */
.ft-children{margin-left:5px; padding-left:6px; border-left:1px solid #E7EBF0}
.ft-row{display:flex; align-items:center; gap:2px}
/* Auf-/Zuklapp-Marker deutlich erkennbar: größer + kräftigerer Farbwert als der
   Text, klarer Hover-Zustand (klickbar). Eigener Tap-/Klickbereich neben dem Namen. */
.ft-chev{flex:none; width:20px; height:20px; background:none; border:0; cursor:pointer;
  color:var(--ink-2); font-size:13px; line-height:1; padding:0; border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center; transition:background .1s ease, color .1s ease}
.ft-chev:hover{background:var(--page); color:var(--accent)}
.ft-chev:focus-visible{outline:2px solid var(--accent-tint); outline-offset:-1px}
/* Reservierter Chevron-Platz: GLEICHE Breite wie ein echter Chevron, nur unsichtbar
   und nicht interaktiv – sonst verschiebt sich die Zentrierung je Knoten. */
.ft-chev-empty{visibility:hidden; cursor:default}
/* Markierung = der Namens-Link (Icon + Name). Aktiv UND Hover nutzen EXAKT dieselbe
   Geometrie (symmetrisches Padding + gleicher Radius), damit nichts springt.
   align-items:center + an die Icon-Höhe angepasste line-height -> Icon und Text
   sitzen auf einer Mittelachse, der Text klebt nicht oben. */
.ft-link{flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding:1px 8px; line-height:1.25;
  font-size:14px; color:var(--ink); text-decoration:none; border-radius:var(--radius)}
.ft-link:hover{background:var(--page); color:var(--accent); text-decoration:none}
.ft-link.active{background:var(--accent-tint); color:var(--accent); font-weight:600}
.ft-link.ft-root{font-weight:600}
/* Dokumente im Baum: gleiche Zeile/Einrückung wie Ordner, nur dezent abgesetzt
   (Datei-Icon + etwas leichtere Schrift), damit Ordner/Dokument unterscheidbar sind. */
.ft-link.ft-doc{color:var(--ink-2)}
.ft-link.ft-doc:hover{color:var(--accent)}
.ft-icon{flex:none; display:inline-flex; align-items:center; line-height:0}
.ft-icon svg{display:block}
.ft-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ft-toggle{display:none}
.ft-overlay{display:none; position:fixed; inset:0; background:rgba(20,37,61,.40); z-index:55}
.ft-overlay.show{display:block}
@media (max-width:900px){
  .panel-body{display:block}                 /* einspaltig: Inhalt volle Breite, Trennlinie entfaellt */
  .ft-resize{display:none}                    /* kein Drag-Griff im Drawer-Modus */
  .ft-toggle{display:inline-flex}
  .folder-tree{position:fixed; top:0; left:0; height:100%; width:280px;
    z-index:60; border-right:0; transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:0 0 40px rgba(20,37,61,.25); background:var(--card)}
  .folder-tree.ft-open-drawer{transform:translateX(0)}
  .folder-tree-head .ft-close{display:block}
}
@media (prefers-reduced-motion:reduce){ .folder-tree{transition:none} }

/* ---- Phasen-Stepper (Phasen-Cockpit) ---- */
.phase-stepper{list-style:none;margin:14px 0 0;padding:0}
.phase-step{border:1px solid var(--line);border-radius:var(--radius);margin:8px 0;padding:10px 12px;background:var(--card)}
.phase-step.is-next{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-tint) inset}
.phase-step.released{background:var(--page)}
.phase-step.dragging{opacity:.5}
.phase-head{display:flex;align-items:center;gap:8px}
.phase-grip{cursor:grab;color:var(--ink-3);font-size:16px;line-height:1;user-select:none;touch-action:none}
.phase-grip:active{cursor:grabbing}
.phase-num{font-weight:700;color:var(--ink-3);min-width:1.4em;text-align:center}
.phase-rename{flex:1;min-width:0;margin:0;display:flex}
.phase-name-input{width:100%;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:6px;font-size:15px;font-weight:600;color:var(--ink)}
.phase-name-input:hover{border-color:var(--line)}
.phase-name-input:focus{border-color:var(--accent);background:var(--card);outline:none}
.phase-status{flex:none}
.phase-actions{display:flex;align-items:center;gap:6px}
.phase-del{background:none;border:0;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;border-radius:5px}
.phase-del:hover{color:var(--danger);background:var(--page)}
.phase-prereqs{margin:8px 0 0;padding-left:30px}
.phase-prereqs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.phase-start-note{padding:2px 0}
.prereq-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-top:1px solid var(--line)}
.prereq-main{min-width:0;overflow:hidden;text-overflow:ellipsis}
.prereq-meta{font-size:.92em}
.prereq-act{flex:none;white-space:nowrap}
.prereq-form{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
@media (max-width:640px){
  .phase-prereqs{padding-left:8px}
  .prereq-row{flex-direction:column;align-items:flex-start}
}

/* ---- Ordner-Freigabe: Mehrfachauswahl-Leiste + Erstkonfigurations-Karte ---- */
.bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;margin-bottom:8px;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius)}
.bulk-bar[hidden]{display:none}              /* hidden-Attribut respektieren (nur im Auswahl-Modus) */
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.setup-cta{border-left:3px solid var(--accent)}
.fsel{vertical-align:-1px}
.cascade-form{margin-left:4px}

/* ---- Freigabe-Dropdown in den Zeilen kompakter (Höhe/Padding/Schrift) ---- */
.relform select.input, .bulk-bar select.input{padding:4px 8px; font-size:13px; border-radius:8px}

/* ---- Drag & Drop: Dokument verschieben (Zeile → Ordnerzeile / linker Baum) ---- */
.panel-content{position:relative}                 /* Anker für die Upload-Dropzone */
tr.doc-draggable{cursor:grab}
tr.drag-src{opacity:.45}
tr.drop-target > td{background:var(--accent-tint); box-shadow:inset 0 0 0 1px var(--accent)}
.ft-link.drop-target{background:var(--accent-tint); outline:2px solid var(--accent); outline-offset:-2px}
/* ---- Datei-Upload per Drag & Drop vom Desktop in die Inhaltsliste ---- */
.upload-dropzone{position:absolute; inset:8px; z-index:40; display:none; align-items:center; justify-content:center;
  background:rgba(24,95,165,.08); border:2px dashed var(--accent); border-radius:var(--radius-card);
  font-weight:600; color:var(--accent); pointer-events:none; text-align:center}
.upload-dropzone.show{display:flex}
/* ---- Kurze Rückmeldung (Toast) nach dem Verschieben ---- */
.dd-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:120;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px; font-size:14px;
  box-shadow:0 6px 24px rgba(20,37,61,.30); opacity:0; transition:opacity .18s ease}
.dd-toast.show{opacity:1}
/* ---- Ordner-Picker (Touch-Weg „Verschieben nach …") ---- */
.move-list{max-height:50vh; overflow-y:auto; display:flex; flex-direction:column; gap:4px; margin-top:6px}
.move-target{display:block; width:100%; text-align:left; padding:9px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--card); cursor:pointer; font-size:14px; color:var(--ink)}
.move-target:hover, .move-target:focus-visible{background:var(--page); border-color:var(--accent); outline:none}

/* ---- „+ Dokument"-Maske: sichtbare Drag&Drop-Zone (füllt dasselbe Datei-Input) ---- */
.filedrop{display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:118px; padding:20px; margin-top:2px; cursor:pointer;
  border:2px dashed var(--line); border-radius:var(--radius-card); background:var(--page);
  color:var(--ink-2); transition:border-color .12s ease, background .12s ease}
.filedrop:hover{border-color:var(--accent)}
.filedrop:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint)}
.filedrop.dragover{border-color:var(--accent); background:var(--accent-tint); color:var(--accent)}
.filedrop-hint strong{display:block; font-weight:600; color:var(--ink); margin-bottom:2px}
.filedrop-hint .linklike{color:var(--accent); text-decoration:underline}
/* Datei-Input visuell verborgen, aber fokussierbar (Label triggert den Dialog). */
.filedrop-input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; margin:0}
.filedrop-list{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.filedrop-list[hidden]{display:none}
.filedrop-item{display:flex; align-items:center; gap:10px; padding:7px 10px;
  border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:13px}
.filedrop-item .fd-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; color:var(--ink)}
.filedrop-item .fd-size{flex:none; font-size:12px}
.fd-remove{flex:none; background:none; border:0; cursor:pointer; font-size:18px; line-height:1;
  color:var(--ink-3); padding:0 5px; border-radius:5px}
.fd-remove:hover{color:var(--danger); background:var(--page)}
/* Pflicht-Titel je Datei: leeres Feld markieren (Upload-Maske + Benennungs-Modal). */
.fd-title-empty{border-color:var(--danger) !important; background:color-mix(in srgb, var(--danger) 6%, transparent)}

/* ---- §8 Zusatz-Spalten: nur auf breiten Screens (Größe/Uploader/Typ) ---- */
.cardtable .w-only{display:none}
@media (min-width:1400px){ .cardtable th.w-only, .cardtable td.w-only{display:table-cell} }

/* ---- §7 Detail-Panel: dritte Spalte rechts (Baum · Liste · Detail) ---- */
.doc-detail{flex:0 0 336px; align-self:stretch; border-left:1px solid var(--line);
  background:var(--card); overflow:auto}
.doc-detail-head{position:sticky; top:0; z-index:2; display:flex; align-items:center;
  justify-content:space-between; padding:9px 14px; background:var(--card);
  border-bottom:1px solid var(--line); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3)}
.dd-close{background:none; border:0; font-size:20px; line-height:1; color:var(--ink-3);
  cursor:pointer; padding:0 4px; border-radius:5px}
.dd-close:hover{color:var(--ink); background:var(--page)}
.doc-detail-body{padding:14px 16px}
.dd-empty{padding:8px 2px}
.dd-doc-title{font-size:15px; font-weight:600; color:var(--ink); margin-bottom:10px; overflow-wrap:anywhere}
.dd-thumb{margin:0 0 12px; border:1px solid var(--line); border-radius:8px; background:var(--page); overflow:hidden}
.dd-thumb img{display:block; width:100%; max-height:260px; object-fit:contain}
.dd-meta{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.dd-row{display:flex; gap:10px; font-size:13px; line-height:1.4}
.dd-k{flex:0 0 96px; color:var(--ink-3)}
.dd-v{flex:1; min-width:0; color:var(--ink); overflow-wrap:anywhere}
.dd-actions{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.dd-sub{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); margin:0 0 6px}
.dd-history{border-top:1px solid var(--line); padding-top:12px}
.dd-ver{display:flex; flex-direction:column; gap:1px; padding:6px 0; border-bottom:1px solid var(--line)}
.dd-ver:last-child{border-bottom:0}
.dd-ver-n{font-size:13px; font-weight:600; color:var(--ink)}
.dd-ver-meta{font-size:12px; color:var(--ink-3)}
.cardtable tr.dd-selected>td{background:var(--accent-tint)}
/* Ab ~1280px ist die Dokumentzeile als Ganzes klickbar (öffnet das Detail-Panel):
   Cursor + dezenter Hover deuten das an; die ausgewählte Zeile bleibt hervorgehoben. */
@media (min-width:1280px){
  .cardtable tr[data-doc-id]{cursor:pointer}
  .cardtable tr[data-doc-id]:not(.dd-selected):hover>td{background:var(--page)}
}
/* Unterhalb ~1280px keine dritte Spalte – Details laufen ueber die eigene Seite. */
/* Tablet/Laptop (769–1279px): Details als rechter DRAWER statt dritter Spalte –
   per „Details"-Button oder Zeilenklick eingeschoben, Overlay/Esc schliesst. */
@media (min-width:769px) and (max-width:1279px){
  .doc-detail{position:fixed; top:0; right:0; height:100%; width:min(360px,92vw); z-index:60;
    transform:translateX(100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(20,37,61,.25)}
  .doc-detail.dd-open-drawer{transform:translateX(0)}
  #detailToggle{display:inline-flex !important}
}
@media (prefers-reduced-motion:reduce){ .doc-detail{transition:none} }
/* Handy (≤768px): keine dritte Spalte/kein Drawer – Zeilenklick oeffnet die volle
   Detailseite (bestehende Mobile-Zeilen-Navigation in base.html). */
@media (max-width:768px){ .doc-detail{display:none !important} #detailToggle{display:none !important} }
/* Overlay fuer den Details-Drawer (analog zum Ordnerbaum-Drawer). */
.dd-overlay{display:none; position:fixed; inset:0; background:rgba(20,37,61,.40); z-index:55}
.dd-overlay.show{display:block}