/* KLARBU Gastro — gemeinsames Stylesheet, nach DESIGN.md (verbindlich) */
:root {
  --frame-bg: #FAFAFB; --sidebar-bg: #F4F4F6; --main-bg: #F7F7F9;
  --line: #e6e6ea; --ink: #14151A; --muted: #6b6d78;
  --accent: #4F46E5; --accent-soft: #ecebfd;
  --good: #1a9e6a; --good-soft: #e7f7ef;
  --warn: #c2410c; --warn-soft: #ffedd5;
  --danger: #c23b30; --danger-soft: #fbe9e6;

  --content-max: 1240px;
  --sidebar-w: 240px;
}
* { box-sizing: border-box; }
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  margin:0; color: var(--ink); font-family:'Inter',sans-serif; font-size: 15px;
  background: var(--frame-bg);
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Runde/pillenförmige Buttons: box-shadow-Ring statt outline, damit der Fokusring dem
   Radius folgt (sonst wirkt der eckige Standard-Outline auf einem Kreis unpassend).
   Fokus bleibt sichtbar, wird nur passend zur Form dargestellt — nie entfernt. */
.avatar:focus-visible,
.modal-close:focus-visible,
.sidebar-mobile-close:focus-visible,
.mobile-menu-btn:focus-visible,
.upload-view-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--main-bg), 0 0 0 4px var(--accent);
}

.frame {
  position: fixed; inset: 0;
  width: 100%; height: 100vh; height: 100dvh;
  background: var(--frame-bg);
  display: grid; grid-template-columns: var(--sidebar-w) 1fr; overflow: hidden;
}

/* Sidebar — fix links, volle Höhe */
.sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--line); padding: 24px 20px; display:flex; flex-direction:column; height: 100%; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; padding: 4px 4px 24px; text-decoration:none; color:var(--ink); }
.brand .mark {
  width:24px; height:24px; border-radius:8px; background:var(--accent); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.brand .mark svg { width:14px; height:14px; color:#fff; }
.search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:20px; color:var(--muted); font-size:13.5px; }
.search svg { width:16px;height:16px; flex-shrink:0; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:9px; font-size:14px; font-weight:500; color:var(--muted); text-decoration:none; }
.nav a svg { width:18px;height:18px; flex-shrink:0; }
.nav a:hover { background:#eeeef1; color:var(--ink); }
.nav a.active { background: var(--accent-soft); color: var(--accent); font-weight:600; }
.sidebar .spacer { flex:1; }
.promo { background: linear-gradient(160deg,#4F46E5,#3730a3); border-radius:16px; padding:20px; color:#fff; }
.promo .t { font-weight:700; font-size:14px; margin-bottom:6px; }
.promo .d { font-size:12.5px; opacity:.85; line-height:1.55; margin-bottom:14px; }
.promo button, .promo a { display:block; width:100%; box-sizing:border-box; text-align:center; background:#fff; color:#3730a3; border:none; border-radius:9px; padding:9px; font-weight:700; font-size:13px; cursor:pointer; text-decoration:none; }

/* Content — zentriert, begrenzte Breite */
.main { background: var(--main-bg); overflow:auto; overscroll-behavior: none; display:flex; justify-content:center; align-items:flex-start; }
.content { width: 100%; max-width: var(--content-max); padding: 48px 48px 32px; }

.topline {
  display:flex; justify-content:space-between; align-items:center;
  position: sticky; top: 0; z-index: 30;
  background: var(--main-bg);
  margin: -48px -48px 40px; padding: 32px 48px 20px;
}
/* Fade als Pseudo-Element direkt an der Topline verankert - kann nie eine Lücke
   zur tatsächlichen Topline-Höhe bekommen, da es relativ zu ihr positioniert ist. */
.topline::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%; height: 30px;
  background: linear-gradient(to bottom,
    rgba(247,247,249,1) 0%,
    rgba(247,247,249,0.9) 20%,
    rgba(247,247,249,0.65) 45%,
    rgba(247,247,249,0.35) 70%,
    rgba(247,247,249,0.1) 90%,
    rgba(247,247,249,0) 100%
  );
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
/* Fade wird erst sichtbar, sobald tatsächlich gescrollt wurde (Klasse per JS gesetzt) */
.topline.is-scrolled::after { opacity: 1; }
.crumb { font-size:13.5px; color:var(--muted); }
.crumb b { color: var(--ink); font-weight:600; }
.top-right { display:flex; align-items:center; gap:16px; }
.avatar-wrap { position:relative; }
.avatar { width:34px;height:34px;border-radius:50%; background:var(--accent); color:#fff; display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700; border:none; cursor:pointer; font-family:inherit; transition: box-shadow .15s ease; }
.avatar:hover { box-shadow: inset 0 0 0 999px rgba(255,255,255,.08); }
.avatar-menu {
  display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow: 0 24px 60px -20px rgba(12,12,24,.4); padding:6px; z-index:50;
}
.avatar-menu.open { display:block; }
.avatar-menu button {
  width:100%; text-align:left; background:none; border:none; font-family:inherit;
  font-size:13.5px; color:var(--ink); padding:10px 12px; border-radius:8px; cursor:pointer;
}
.avatar-menu button:hover { background: var(--sidebar-bg); }
.avatar-menu .divider { height:1px; background:var(--line); margin:6px 4px; }
.avatar-menu button.danger { color: var(--danger); }
.btn-primary { background: var(--ink); color:#fff; border:none; border-radius:22px; padding:10px 20px; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; cursor:pointer; text-decoration:none; transition: box-shadow .15s ease; }
.btn-primary:hover { box-shadow: inset 0 0 0 999px rgba(255,255,255,.08); }
.btn-ghost { background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:22px; padding:10px 20px; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; cursor:pointer; text-decoration:none; transition: background-color .15s ease; }
.btn-ghost:hover { background: var(--sidebar-bg); }

section + section { margin-top: 32px; }
.sec-wide { width: 1112px; max-width: 100%; }
.sec-narrow { width: 720px; max-width: 100%; }

.sec-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.sec-h h2 { font-size:15px; margin:0; font-weight:600; }
.sec-h a, .sec-h span.count { font-size:13px; color:var(--muted); text-decoration:none; flex-shrink:0; }
.sec-h a:hover { color: var(--ink); }

/* KPI-Karten */
.kpis { display:grid; grid-template-columns: repeat(4, 260px); gap:24px; align-items:start; }
.tile {
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;
  box-shadow: 0 1px 2px rgba(12,12,24,.03), 0 8px 16px -10px rgba(12,12,24,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(12,12,24,.04), 0 14px 26px -10px rgba(12,12,24,.20); }
.tile .l { font-size:13px; color:var(--muted); margin-bottom:12px; }
.tile .v { font-size:26px; font-weight:700; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.tile .d { font-size:12.5px; margin-top:10px; font-weight:600; }
.d.up { color: var(--good); } .d.warn { color: var(--warn); } .d.danger { color: var(--danger); } .d.muted { color: var(--muted); }

/* Zwei gleichwertige Mini-KPIs in einer Kachel (z. B. MwSt. Verkäufe vs. Vorsteuer — getrennt, nicht verrechnet).
   Nutzt bewusst dieselben .l/.v/.d-Klassen wie eine eigenständige KPI-Kachel, nur nebeneinander via Flex. */
.tile-split-row { display:flex; align-items:stretch; gap:10px; }
.tile-split-col { flex:1; min-width:0; }
.tile-split-col .v { white-space:nowrap; }
.tile-split-divider { width:1px; background:var(--line); align-self:stretch; }

/* Warnungen: Karten nebeneinander */
.warn-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:24px; }
.warn-card {
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;
  box-shadow: 0 1px 2px rgba(12,12,24,.03), 0 8px 16px -10px rgba(12,12,24,.12);
  display:flex; gap:14px; align-items:flex-start;
  width:100%; text-align:left; cursor:pointer; font-family:inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.warn-card:hover { box-shadow: 0 1px 2px rgba(12,12,24,.04), 0 14px 26px -10px rgba(12,12,24,.20); transform: translateY(-2px); }
.badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; flex-shrink:0; margin-top:1px; }
.badge.warn { background:var(--warn-soft); color:var(--warn); }
.badge.danger { background:var(--danger-soft); color:var(--danger); }
.badge.good { background:var(--good-soft); color:var(--good); }
.warn-card .t { font-weight:600; font-size:14px; margin-bottom:6px; }
.warn-card .d2 { font-size:13px; color:#565863; line-height:1.55; }

@media (max-width: 700px) { .warn-grid { grid-template-columns: 1fr; } }

/* Datentabellen / Karten-Panel */
.card {
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px;
  box-shadow: 0 1px 2px rgba(12,12,24,.03), 0 8px 16px -10px rgba(12,12,24,.12); width:100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(12,12,24,.04), 0 14px 26px -10px rgba(12,12,24,.20); }
table.data { width:100%; border-collapse:collapse; }
table.data th { text-align:left; font-size:12px; font-weight:600; color:var(--muted); padding:0 12px 10px; border-bottom:1px solid var(--line); }
table.data td { padding:13px 12px; border-bottom:1px solid var(--line); font-size:13.5px; font-variant-numeric:tabular-nums; }
table.data tr:last-child td { border-bottom:none; }
table.data td:first-child, table.data th:first-child { padding-left:0; }
table.data td:last-child, table.data th:last-child { padding-right:0; }
table.data tr.clickable { cursor:pointer; transition: background-color .15s ease; }
table.data tr.clickable:hover { background: var(--sidebar-bg); }
button.tile { text-align:left; font-family:inherit; cursor:pointer; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; }
.pill.good { background:var(--good-soft); color:var(--good); }
.pill.warn { background:var(--warn-soft); color:var(--warn); }
.pill.danger { background:var(--danger-soft); color:var(--danger); }
.card-foot { margin-top:16px; font-size:13px; color:var(--muted); }

@media (max-width: 1000px) {
  .sec-wide { width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* Mobile Topbar (< 860px) — ersetzt die Sidebar-Sichtbarkeit oben, öffnet die Sidebar als Overlay-Panel */
.mobile-topbar { display:none; align-items:center; justify-content:space-between; padding:14px 20px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:150; flex-shrink:0; }
.mobile-topbar .brand { padding:0; }
.mobile-menu-btn { width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.mobile-menu-btn svg { width:20px; height:20px; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(20,21,26,.5); z-index:210; }
.sidebar-backdrop.open { display:block; }
.sidebar-mobile-close { display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; cursor:pointer; position:absolute; top:16px; right:16px; font-size:16px; color:var(--muted); }

/* Modals */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(20,21,26,.5); align-items:center; justify-content:center; padding:24px; z-index:100; }
.modal-overlay.open { display:flex; }
.modal { background:#fff; border-radius:16px; width:100%; max-width:560px; max-height:85vh; overflow:auto; padding:28px; box-shadow: 0 24px 60px -20px rgba(12,12,24,.4); position:relative; }
.modal-close { position:absolute; top:20px; right:20px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; line-height:1; }
.modal-close:hover { background:#f4f4f6; color:var(--ink); }
.modal h3 { font-size:17px; font-weight:700; margin:0 0 6px; padding-right:36px; }
.modal .modal-sub { font-size:13px; color:var(--muted); margin-bottom:20px; }
.modal table.data { margin-bottom:4px; }
.modal .calc-total { display:flex; justify-content:space-between; padding:14px 0 0; margin-top:10px; border-top:1px solid var(--line); font-weight:700; font-size:14px; }

/* Nachvollziehbare Berechnung ("Wie wurde das berechnet?") — immer sichtbar, kein Aufklapp-Klick nötig */
.calc-section-label { font-size:12px; font-weight:600; color:var(--muted); margin:0 0 8px; }
.calc-section-label.spaced { margin-top:20px; }
.calc-metric { padding:13px 0; border-bottom:1px solid var(--line); }
.calc-metric:last-child { border-bottom:none; }
.calc-metric-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.calc-metric-simple { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.calc-metric-simple:last-child { border-bottom:none; }
.calc-label { font-size:13.5px; }
.calc-value { font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.calc-panel { margin-top:10px; background:var(--sidebar-bg); border-radius:9px; padding:12px 14px; }
.tile .calc-panel { margin-top:12px; }

/* Kassenbon-Optik für Rechenwege: Bezeichnung links, Betrag rechts, wie eine Rechnungsposition */
.calc-note { font-size:12.5px; color:var(--muted); line-height:1.6; }
.calc-note + .calc-note { margin-top:2px; }
.calc-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:5px 0; font-size:13px; }
.calc-row .calc-row-label { color:var(--ink); }
.calc-row .calc-row-amount { font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc-row-total { border-top:1px solid var(--line); margin-top:6px; padding-top:10px; font-weight:700; font-size:14.5px; }
.calc-panel .calc-row + .calc-note, .calc-panel .calc-note + .calc-row { margin-top:8px; }

/* ————— Neue, konsistente Komponenten (aus denselben Tokens abgeleitet) ————— */

/* Dropzone (Datenupload) */
.dropzone { border:1.5px dashed var(--line); background: var(--sidebar-bg); border-radius:16px; padding:32px 20px; text-align:center; color:var(--muted); cursor:pointer; transition: border-color .15s ease, background .15s ease; }
.dropzone:hover { border-color: var(--accent); }
.dropzone-text-mobile { display:none; }
.upload-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.upload-toolbar .tabs { margin-bottom:0; flex:1; min-width:0; }
.upload-view-toggle {
  display:none; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; border-radius:50%; padding:0;
  border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer;
}
.upload-view-toggle svg { width:17px; height:17px; }
.upload-view-toggle.active { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.dropzone svg { width:26px; height:26px; color:var(--accent); margin-bottom:10px; }
.dropzone .hint { font-size:12.5px; margin-top:6px; }

/* Beleg-Vorschau (Datenupload — Klick auf eine Zeile) */
.beleg-preview { background:var(--sidebar-bg); border:1px solid var(--line); border-radius:14px; padding:14px; }
.beleg-preview .fname { font-weight:600; font-size:14px; word-break:break-all; }
.beleg-preview .fmeta { font-size:12.5px; color:var(--muted); margin-top:2px; margin-bottom:12px; }
.beleg-preview iframe { width:100%; height:340px; border:1px solid var(--line); border-radius:10px; background:#fff; display:block; }

/* Beleg-Vollbildansicht (Datenupload — "Großansicht") */
.beleg-fullscreen { display:none; position:fixed; inset:0; z-index:300; background:rgba(20,21,26,.96); flex-direction:column; }
.beleg-fullscreen.open { display:flex; }
.beleg-fullscreen-bar { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; flex-shrink:0; }
.beleg-fullscreen-bar .fname { color:#fff; font-weight:600; font-size:14.5px; }
.beleg-fullscreen-bar .fmeta { color:rgba(255,255,255,.6); font-size:12.5px; margin-top:2px; }
.beleg-fullscreen-actions { display:flex; align-items:center; gap:10px; }
.beleg-fullscreen-actions .btn-ghost { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff; }
.beleg-fullscreen-actions .btn-ghost:hover { background:rgba(255,255,255,.16); }
.beleg-fullscreen-close { width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; }
.beleg-fullscreen-close:hover { background:rgba(255,255,255,.16); }
.beleg-fullscreen iframe { flex:1; width:100%; border:none; background:#fff; }

/* Nachrichten-Detailansicht (Postfach — Klick auf eine Nachricht) — bleibt im App-Layout, keine eigene Ebene */
.msg-detail-card { padding:28px 32px; }
.msg-detail-head { display:flex; gap:14px; align-items:flex-start; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.msg-detail-head h2 { font-size:17px; font-weight:700; margin:0 0 6px; line-height:1.35; }
.msg-detail-meta { font-size:13px; color:var(--muted); }
.msg-detail-body { font-size:13.5px; line-height:1.75; color:var(--ink); }
.msg-detail-actions:empty { display:none; }
.msg-detail-actions { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }

/* Tabs (Benutzer) */
.tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.tab { background:none; border:none; padding:11px 2px; margin-bottom:-1px; font-size:13.5px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; font-family:inherit; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); font-weight:600; border-bottom-color: var(--accent); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* Formularfelder (Benutzer, Export) */
.field { margin-bottom:20px; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.field input { width:100%; min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:9px; font-family:inherit; font-size:13.5px; color:var(--ink); background:#fff; }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-value { min-height:40px; display:flex; align-items:center; padding:0 12px; border:1px solid var(--line); border-radius:9px; font-size:13.5px; color:var(--ink); background:var(--sidebar-bg); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* Checkbox-Reihen (Export) */
.check-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.check-row:last-child { border-bottom:none; }
.check-row input { width:16px; height:16px; accent-color: var(--accent); }

/* Auswahl-Buttons (Export-Format) */
.choice-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.choice {
  border:1px solid var(--line); background:#fff; border-radius:12px; padding:14px 16px;
  text-align:left; cursor:pointer; font-family:inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.choice:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(12,12,24,.04), 0 14px 26px -10px rgba(12,12,24,.20); }
.choice .t { font-size:13.5px; font-weight:600; }
.choice .s { font-size:12px; color:var(--muted); margin-top:4px; }
.choice.selected { border-color: var(--accent); background: var(--accent-soft); }
.choice.selected .s { color: #4340a0; }

/* Nachrichtenliste (Postfach) */
.msg-list { display:flex; flex-direction:column; }
.msg-row { display:flex; gap:14px; padding:16px 4px; border-bottom:1px solid var(--line); align-items:flex-start; }
.msg-row:last-child { border-bottom:none; }
.msg-row.clickable { cursor:pointer; transition: background-color .15s ease; }
.msg-row.clickable:hover { background: var(--sidebar-bg); }
.msg-row .ic { width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.msg-row .ic svg { width:17px; height:17px; }
.ic.warn { background:var(--warn-soft); color:var(--warn); }
.ic.danger { background:var(--danger-soft); color:var(--danger); }
.ic.good { background:var(--good-soft); color:var(--good); }
.ic.muted { background:var(--sidebar-bg); color:var(--muted); }
.msg-row .top { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.msg-row .t { font-weight:600; font-size:14px; }
.msg-row .time { font-size:12px; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.msg-row .d2 { font-size:13px; color:#565863; line-height:1.55; margin-top:4px; }

/* Abmelde-Bestätigung */
.modal.modal-narrow { max-width:400px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }

/* Login-Bildschirm (nach Abmelden) — minimal, optisch zentriert (Notion-Stil) */
.login-screen {
  display:none; position:fixed; inset:0; z-index:200;
  background: var(--main-bg); flex-direction:column; align-items:center; padding:24px;
}
.login-screen.open { display:flex; }
/* Zwei Spacer statt echtem align-items:center: mathematische Mitte wirkt optisch zu tief,
   daher oberer Spacer knapper als unterer. Etwas großzügiger als vorher, da der Inhalt
   (große Headline + Social-Buttons) jetzt mehr Höhe einnimmt und die Seite gleichmäßiger
   füllen soll. */
.login-screen::before, .login-screen::after { content:""; flex-shrink:0; width:100%; }
.login-screen::before { flex:0.72 0 0; }
.login-screen::after { flex:1 0 0; }
.login-card { width:100%; max-width:420px; flex-shrink:0; }
.login-card .mark { width:48px; height:48px; border-radius:13px; background:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 32px; }
.login-card .mark svg { width:26px; height:26px; color:#fff; }
/* Große Aussage — nutzt denselben Größen-Token wie die KPI-Kennzahl (26px/700, siehe DESIGN.md Typografie) */
.login-card h3 { text-align:center; font-size:26px; font-weight:700; letter-spacing:-0.01em; margin:0 0 8px; }
.login-card .sub { text-align:center; font-size:13.5px; color:var(--muted); margin-bottom:32px; }
.login-card .field { margin-bottom:20px; }
.login-card .login-options { display:flex; justify-content:space-between; align-items:center; margin:8px 0 32px; }
.login-card .login-options .check-row { padding:0; border-bottom:none; gap:8px; font-size:13px; line-height:1; }
.login-card .login-options a { font-size:13px; line-height:1; color:var(--muted); text-decoration:none; }
.login-card .login-options a:hover { color: var(--ink); }
.login-card .btn-primary { width:100%; justify-content:center; padding:11px 20px; }

/* Trenner "oder weiter mit" */
.login-card .divider { display:flex; align-items:center; gap:12px; margin:32px 0 20px; }
.login-card .divider::before, .login-card .divider::after { content:""; flex:1; height:1px; background:var(--line); }
.login-card .divider span { font-size:12px; color:var(--muted); white-space:nowrap; }

/* Social-Buttons (Platzhalter, keine echte OAuth-Funktion) */
.login-card .social-row { display:flex; flex-direction:column; gap:10px; }
.login-card .btn-social {
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:9px;
  padding:10px 20px; font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer;
  transition: background-color .15s ease;
}
.login-card .btn-social:hover { background: var(--sidebar-bg); }
.login-card .btn-social svg { width:17px; height:17px; flex-shrink:0; }

/* Custom Checkbox (Login — ersetzt natives Browser-Element) */
.login-card input[type="checkbox"] {
  appearance:none; -webkit-appearance:none; margin:0; flex-shrink:0;
  width:16px; height:16px; border:1.5px solid var(--line); border-radius:4px;
  background:#fff; cursor:pointer; position:relative;
}
.login-card input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.login-card input[type="checkbox"]:checked::after {
  content:""; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.login-card input[type="checkbox"]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.login-card .signup { text-align:center; font-size:13px; color:var(--muted); margin-top:24px; }
.login-card .signup a { color: var(--accent); font-weight:600; text-decoration:none; }
.login-card .signup a:hover { text-decoration:underline; }

/* ————— Mobile Navigation & Responsive Fixes (< 860px) — ganz am Dateiende, damit alle Overrides zuverlässig gewinnen ————— */
@media (max-width: 860px) {
  /* Grundgerüst: Sidebar wird Overlay, .frame/.main als Spalte statt Reihe (sonst legt sich .mobile-topbar neben .content statt darüber) */
  html, body { height:auto; overflow-x:hidden; overflow-y:auto; overscroll-behavior:auto; }
  /* Kein fixer Rahmen mehr auf Mobile: die Seite selbst scrollt, kein verschachtelter Scroll-Container.
     Bewusst normaler Blockfluss statt flex/grid: flex:1 ohne definierte Containerhöhe lässt .main auf
     echten Geräten (iOS Safari) kollabieren, auch wenn Desktop-Chrome es fehlertolerant rendert. */
  .frame { position:static; height:auto; min-height:100vh; min-height:100dvh; display:block; overflow:visible; }
  .mobile-topbar { display:flex; }
  .sidebar {
    position:fixed; top:0; left:0; bottom:0; width:280px; max-width:84vw;
    transform:translateX(-100%); transition:transform .25s ease, box-shadow .25s ease; z-index:220;
    box-shadow:none; overflow-y:auto;
  }
  .sidebar.mobile-open { transform:translateX(0); box-shadow:24px 0 60px -20px rgba(12,12,24,.45); }
  .sidebar-mobile-close { display:flex; width:44px; height:44px; }
  .sidebar .search { display:none; }
  .main {
    display:block;
    overflow:visible;
  }
  .content { width:100%; max-width:100%; padding: 16px 16px 32px; box-sizing:border-box; }

  /* Topline: Breadcrumb einzeilig+abgeschnitten, primärer Nav-Button raus (redundant zum Hamburger-Menü), nur Avatar bleibt */
  .topline { margin: -16px -16px 24px; padding: 14px 16px 14px; gap:10px; }
  .crumb { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .top-right { flex-shrink:0; gap:10px; }
  .top-right > a.btn-primary { display:none; }
  .avatar { width:44px; height:44px; }

  /* Grid-Layouts: immer eine Spalte, volle Breite — auch gegen inline-style-Fixbreiten (Datenupload/Übersicht-Kacheln) */
  .kpis, .grid-2, .choice-row { grid-template-columns: 1fr !important; }

  /* Dropzones: Drag&Drop-Hinweis ergibt auf Touch-Geräten keinen Sinn */
  .dropzone-text-desktop { display:none; }
  .dropzone-text-mobile { display:inline; }

  /* Export-Zusammenfassung: Text + Button nebeneinander sprengt auf schmalen Screens
     die Zeile und überlagert sich — auf Mobile untereinander stapeln. */
  .export-summary-card { flex-direction:column; align-items:stretch !important; gap:14px; }
  .export-summary-card .btn-primary { width:100%; text-align:center; }
  .sec-wide, .sec-narrow { width:100%; }

  /* Tabs: horizontal scrollbar statt umbrechen/abschneiden, mit Fade-Hinweis am rechten Rand */
  .tabs {
    overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    padding-bottom:2px;
  }
  .tabs::-webkit-scrollbar { height:0; }
  .tab { flex-shrink:0; }

  /* Typografie/Buttons kompakter statt 1:1 vom Desktop */
  .sec-h h2 { font-size:14px; }
  .tile .v { font-size:22px; }
  .tile, .warn-card, .card { padding:16px; }
  .btn-primary, .btn-ghost { padding:9px 14px; font-size:13px; }
  .modal h3 { font-size:16px; }

  /* Nav-Items */
  .nav a { min-height:44px; }
  .modal-close { width:44px; height:44px; }
  .modal-overlay { padding:16px; }

  /* Tabellen: passen sich der Kartenbreite an statt Scroll zu erzwingen. .card behält
     overflow-x:auto nur als Sicherheitsnetz für Extremfälle, nicht als Regelfall. */
  .card, .modal { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.data th, table.data td { padding-left:8px; padding-right:8px; }
  table.data td:first-child, table.data th:first-child { padding-left:0; }
  table.data td:last-child, table.data th:last-child { padding-right:0; }
  /* Dateiname-Zellen: Klick zeigt den vollen Namen als schwebendes Overlay über der Zeile,
     statt die Tabellenspalte für ALLE Zeilen zu verbreitern (position:absolute wird von der
     table-layout-Breitenberechnung ignoriert — Struktur der übrigen Zeilen bleibt unberührt). */
  table.data td.truncate { position:relative; max-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
  table.data td.truncate.expanded { overflow:visible; }
  table.data td.truncate.expanded .fname {
    position:absolute; left:0; top:50%; transform:translateY(-50%);
    background:var(--sidebar-bg); padding:6px 10px; border-radius:6px;
    box-shadow:0 6px 18px -6px rgba(12,12,24,.35);
    white-space:nowrap; z-index:5;
  }

  /* Umschalter für die gesamte Tabelle: kompakt (abgeschnitten) vs. vollständige Namen.
     Im Vollmodus wird die Dateiname-Spalte bewusst breiter als die Karte — dafür ist
     .card { overflow-x:auto } (oben) das Sicherheitsnetz zum seitlichen Scrollen. */
  .upload-view-toggle { display:flex; }
  table.data.full-names td.truncate { max-width:none; white-space:nowrap; overflow:visible; text-overflow:clip; cursor:default; }
  table.data.full-names td.truncate .fname { position:static; background:none; padding:0; box-shadow:none; }

  /* Tap-Targets ≥ 44px */
  .warn-card, button.tile, .msg-row.clickable, tr.clickable, .btn-primary, .btn-ghost { min-height:44px; }
}

@media (max-width: 600px) {
  .content { padding: 14px 14px 28px; }
  .topline { margin: -14px -14px 22px; padding: 12px 14px 12px; }
  .kpis { gap:14px; }
  .warn-grid { gap:14px; }
  .grid-2 { gap:14px; }
  section + section { margin-top:24px; }
}