/* newways.suite – Gestaltung „Glas“ (seit 1.22.0). Zusammengesetzt aus public/assets/css/glas/ –
   nicht von Hand ändern, sondern den Teil ändern und werkzeuge/glas-bauen.sh aufrufen. */

/* ===== Teil 00-grund ===== */
/* =========================================================================
   newways.suite – Gestaltung „Glas“ (seit 1.22.0) – Teil 00: Grundlage
   Drei Ebenen: der GRUND (Farbfeld aus der Farbe des Mandanten, body::before),
   der INHALT (deckende Karten mit feiner Trennlinie), die BEDIENUNG (Glas:
   Leisten, Reiter, Kacheln). Geladen NACH app.css (components/head.php), Markup
   unverändert. Alles Farbige kommt per color-mix() aus --accent/--brand.
   Kontraste sind gerechnet: Glas gegen Weiß und Schwarz darunter, Schrift auf
   dem Feld gegen seinen dunkelsten und hellsten Punkt.
   Tokens für die Bereiche:
   Flächen  --bg --surface --surface-2 --surface-3 --surface-inset --wash --fuellung
   Schrift  --text --text-muted --text-subtle (stellen sich auf Feld und Glas selbst um)
   Marke    --accent --accent-text --accent-on --brand · --akzent-2 (zweiter Ton)
            --haupt / --haupt-auf (Hauptknopf, Tinte) · --akzent-flaeche / --akzent-auf (Akzent mit Schrift)
   Zustand  --success --warning --danger --info, je mit -soft (deckende Fläche) · --gold nur „am Zug“
   Kanten   --border --border-strong (Haarlinien) · --kante (Bedienelement, 3:1)
   Glas     --glass-bg --glass-surface --glas-kachel · --glass-blur · --glas-rahmen · --glass-shadow
            --glass-tint (deckende Pille der Auswahl) · --knopf (stiller Knopf)
   ========================================================================= */

/* Eine lokale Schrift für Oberfläche, Überschriften und Tabellenziffern. */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('../fonts/instrument-sans.woff2') format('woff2');
}

/* ---------- 1. Tokens, hell ---------- */
:root {
  /* Maße des Gerüsts: alles Schwebende hält 12 px Abstand zum Fensterrand. */
  --schwebe: 12px; --leiste-h: 56px;
  --sidebar-w: 264px;                       /* 12 + 240 + 12 – .main rückt so weit ein */
  --topbar-h: calc(var(--leiste-h) + var(--schwebe)); /* was klebt, klebt UNTER der Leiste */
  --tabbar-h: 5rem;                         /* 64 px Leiste + 10 px Abstand + Luft */
  /* Feldton und zweiter Ton kommen allein vom Mandanten. Hier der Rückfall, gerechnet wird in Abschnitt 3. */
  --feld-ton: var(--accent);
  --akzent-2: color-mix(in oklab, var(--accent) 62%, var(--brand));
  --accent-2: var(--akzent-2);              /* app.css kennt nur Oliv-Gold – das wäre Schmuck in Gold */
  /* Der Grund trägt 3 % Akzent. Beide Grundtöne stehen auch in components/head.php (Browserleiste). */
  --nacht: #080b12;                         /* das Blauschwarz des dunklen Grunds, auch für Schleier */
  --bg: color-mix(in srgb, var(--accent) 3%, #f4f5f8);
  --bg-pattern: none;                       /* das Feld malt body::before */
  --feld-1: color-mix(in srgb, var(--feld-ton) 32%, transparent);
  --feld-2: color-mix(in srgb, var(--akzent-2) 24%, transparent);
  --feld-3: color-mix(in srgb, var(--feld-ton) 24%, transparent);
  /* Zwei breite Farbfelder lassen den Glasrahmen sichtbar, die Arbeitsmitte bleibt ruhig. */
  --feld:
    radial-gradient(64rem 48rem at 0% 0%, var(--feld-1), transparent 82%),
    radial-gradient(58rem 46rem at 100% 90%, var(--feld-2), transparent 84%);
  --surface: #ffffff; --surface-3: #e3e6eb; --surface-inset: #f7f8fa;
  --surface-2: #f1f3f6;                     /* heller als der Rechengrund in head.php – die Zusage hält */
  --surface-hoch: var(--surface);           /* Dialog: im Dunkeln eine Stufe über der Karte */
  --schleier: color-mix(in srgb, var(--nacht) 42%, transparent); /* hinter Dialog und Schublade */
  --wash: color-mix(in srgb, var(--accent) 7%, var(--surface));
  --fuellung: color-mix(in srgb, var(--text) 4%, var(--surface)); /* gefüllte Felder */
  /* Schrift: drei Stufen auf Deckendem, EINE dunklere zweite Stufe auf Feld und Glas – dort ist der Grund nie sicher. */
  --text: #12161d; --text-inverse: #ffffff;
  --tinte-2: #4a5059; --tinte-3: #5a606a; --tinte-frei: #3a4048;
  --text-muted: var(--tinte-2); --text-subtle: var(--tinte-3);
  /* Linien trennen nur (Haarlinie); eine KANTE gehört zu einem Bedienelement und hält 3:1. */
  --border: rgba(18, 22, 29, .07); --border-strong: rgba(18, 22, 29, .13);
  --kante-fest: color-mix(in srgb, var(--text) 47%, transparent);
  --kante-frei: color-mix(in srgb, var(--text) 62%, transparent);
  --kante: var(--kante-fest);
  /* Zustände wie die Schrift: -fest auf Deckendem, -frei (dunkler) auf Feld und Glas. Die weichen
     Flächen sind DECKEND: ein Abzeichen sieht überall gleich aus, sein Kontrast ist eine feste Zahl. */
  --success-fest: #1e6a40; --success-frei: #145034;
  --warning-fest: #87500a; --warning-frei: #693d08;
  --danger-fest: #b3261e;  --danger-frei: #8a1d17;
  --info-fest: #17597a;    --info-frei: #124863;
  --success: var(--success-fest); --warning: var(--warning-fest); --danger: var(--danger-fest); --info: var(--info-fest);
  --success-soft: color-mix(in srgb, var(--success-fest) 12%, var(--surface));
  --warning-soft: color-mix(in srgb, var(--warning-fest) 13%, var(--surface));
  --danger-soft: color-mix(in srgb, var(--danger-fest) 10%, var(--surface));
  --info-soft: color-mix(in srgb, var(--info-fest) 11%, var(--surface));
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --gold-soft: color-mix(in srgb, var(--gold) 20%, var(--surface));
  --gold-ink: #65560a;
  /* Hauptknopf: Tinte mit einem Drittel Marke, wie im gewählten Muster – die Marke als Fläche gehört
     dem Akzentknopf. Weiß hält darauf bei jeder Markenfarbe 4,5:1, auch überfahren (hellste: Weiß). */
  --haupt: color-mix(in srgb, var(--brand) 34%, var(--text));
  --haupt-ueber: color-mix(in srgb, var(--haupt) 90%, var(--surface));
  --haupt-auf: #ffffff; --haupt-kante: rgba(255, 255, 255, .26);
  --haupt-glanz: none;
  --haupt-schein: color-mix(in srgb, var(--brand) 55%, transparent); /* farbiger Schatten unter dem Knopf */
  /* Akzentfläche: der Rückfall nimmt die Schriftrolle; genauer in Abschnitt 3. */
  --gegen-auf: var(--text);                 /* wohin die Akzentfläche beim Überfahren weicht */
  --akzent-flaeche: var(--accent-text); --akzent-auf: var(--text-inverse);
  /* Kästchen, Schalter, Balken heben sich mit 3:1 von der Karte ab – helles Gold trüge das nicht. */
  --wahl: var(--accent-text); --wahl-auf: var(--text-inverse);
  --fokus-frei: color-mix(in srgb, var(--accent-text) 62%, var(--text)); /* Fokusring auf Feld und Glas */
  /* Glasrahmen 22 px, Inhalt 12 px, Bedienelemente 8 px. */
  --radius-xs: 6px; --radius-sm: 8px; --radius: 10px;
  --radius-lg: 12px; --radius-xl: 22px; --control-radius: 8px;
  /* Schatten: zwei Lagen – eng für die Kante, weit und leicht für die Höhe. */
  --schatten: 16, 22, 34;
  --shadow-xs: 0 1px 2px rgba(var(--schatten), .07);
  --shadow-sm: 0 1px 2px rgba(var(--schatten), .05), 0 12px 28px -14px rgba(var(--schatten), .16);
  --shadow:    0 1px 3px rgba(var(--schatten), .06), 0 18px 40px -16px rgba(var(--schatten), .20);
  --shadow-lg: 0 2px 6px rgba(var(--schatten), .06), 0 28px 56px -20px rgba(var(--schatten), .26);
  --shadow-xl: 0 4px 12px rgba(var(--schatten), .08), 0 40px 80px -24px rgba(var(--schatten), .34);
  --card-edge: rgba(255, 255, 255, 0);      /* helle Karte auf hellem Grund braucht keine Lichtkante */
  /* Glas in drei Deckungen, jede gegen Weiß UND Schwarz gerechnet: Leisten 82 %, Schwebendes über
     Inhalt (Meldungen, untere Leiste) 88 %, Kacheln 80 % – unter ihnen liegt nur das Feld. */
  --glas-stoff: color-mix(in srgb, var(--accent) 3%, #ffffff);
  --glass-bg: color-mix(in srgb, var(--glas-stoff) 82%, transparent);
  --glass-surface: color-mix(in srgb, var(--glas-stoff) 88%, transparent);
  --glas-kachel: color-mix(in srgb, var(--glas-stoff) 80%, transparent);
  --glas-kachel-hover: color-mix(in srgb, var(--glas-stoff) 92%, transparent);
  --glas-dialog: color-mix(in srgb, var(--surface-hoch) 88%, transparent); /* Kopf und Fuß des Dialogs */
  --glass-blur: blur(24px) saturate(150%);
  --glass-edge: rgba(255, 255, 255, .95); --glass-rand: rgba(255, 255, 255, .55); /* Lichtkante oben, Lichtsaum ringsum */
  --glas-rahmen: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-rand);
  --glas-glanz: none;
  --glass-shadow: 0 1px 2px rgba(var(--schatten), .06), 0 22px 48px -18px rgba(var(--schatten), .26);
  --glass-tint: var(--surface);             /* die gewählte Pille: deckend und hell */
  --pille-schatten: 0 1px 2px rgba(var(--schatten), .10), 0 6px 14px -6px rgba(var(--schatten), .16);
  /* Der stille Knopf: auf der Karte getönt, auf dem Feld eine helle Pille mit Schatten – getönt verschwände er. */
  --knopf-fest: color-mix(in srgb, var(--text) 7%, var(--surface));
  --knopf: var(--knopf-fest); --knopf-schatten: 0 0 0 0 transparent;
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565c66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* Dichte: eine einfache Tabellenzeile ist 44 px hoch (12 + 12 + 20). */
  --cell-py: .75rem; --card-pad: 1.5rem; --gap-section: 1.5rem;
  --dur: .18s; --dur-fast: .14s;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
}

/* ---------- 2. Tokens, dunkel ----------
   Kein umgedrehtes Hell: ein tiefes Blauschwarz, leicht in den Akzent gezogen. Karten liegen eine
   Stufe heller und tragen ihre Kante als Lichtlinie oben – Schatten sieht man im Dunkeln kaum. */
html[data-theme="dark"] {
  --bg: color-mix(in srgb, var(--accent) 5%, var(--nacht));
  --feld-1: color-mix(in srgb, var(--feld-ton) 40%, transparent);
  --feld-2: color-mix(in srgb, var(--akzent-2) 34%, transparent);
  --feld-3: color-mix(in srgb, var(--feld-ton) 24%, transparent);
  --surface: #141923; --surface-3: #2a313f; --surface-inset: #10141c; --surface-hoch: #181e2a;
  --surface-2: #1c222e;                     /* dunkler als der Rechengrund in head.php */
  --schleier: color-mix(in srgb, #03050a 62%, transparent);
  --wash: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --fuellung: color-mix(in srgb, var(--text) 6%, var(--surface));
  --text: #f2f4f8; --text-inverse: #0b0e14;
  --tinte-2: #b3b9c5; --tinte-3: #a0a7b4; --tinte-frei: #ccd1da;
  --border: rgba(242, 244, 248, .08); --border-strong: rgba(242, 244, 248, .15);
  --kante-fest: color-mix(in srgb, var(--text) 42%, transparent);
  --kante-frei: color-mix(in srgb, var(--text) 52%, transparent);
  --success-fest: #74d6a0; --success-frei: #8fe3b5;
  --warning-fest: #edba68; --warning-frei: #f3c982;
  --danger-fest: #ff958d;  --danger-frei: #ffaaa3;
  --info-fest: #86cfec;    --info-frei: #a0dbf2;
  --success-soft: color-mix(in srgb, var(--success-fest) 15%, var(--surface));
  --warning-soft: color-mix(in srgb, var(--warning-fest) 15%, var(--surface));
  --danger-soft: color-mix(in srgb, var(--danger-fest) 15%, var(--surface));
  --info-soft: color-mix(in srgb, var(--info-fest) 15%, var(--surface));
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --gold-soft: color-mix(in srgb, var(--gold) 16%, var(--surface));
  --gold-ink: #f0dc8e;
  /* Im Dunkeln ist der Hauptknopf eine helle Pille mit einem Hauch Akzent – kein grelles Weiß
     und keine Markenfläche (helles Gold sähe nach „am Zug“ aus). */
  --haupt: color-mix(in srgb, var(--accent) 12%, var(--text));
  --haupt-ueber: color-mix(in srgb, var(--accent) 12%, #ffffff);
  --haupt-auf: #0d1118; --haupt-kante: rgba(255, 255, 255, .8);
  --haupt-glanz: none;
  --haupt-schein: color-mix(in srgb, var(--accent) 50%, transparent);
  --schatten: 0, 0, 0;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -16px rgba(0, 0, 0, .7);
  --shadow:    inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 44px -16px rgba(0, 0, 0, .75);
  --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, .08), 0 28px 56px -20px rgba(0, 0, 0, .8);
  --shadow-xl: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -24px rgba(0, 0, 0, .85);
  /* Rauchglas: dunkler und durchlässiger als die Karte. Die Tiefe nimmt keiner Schrift Kontrast:
     Lichtkante, Glanz nur auf den obersten 12 px, Schattenrand unten innen, dunkler Ring außen. */
  --glas-stoff: color-mix(in srgb, var(--feld-ton) 10%, #0c1018);
  --glass-bg: color-mix(in srgb, var(--glas-stoff) 80%, transparent);
  --glass-surface: color-mix(in srgb, var(--glas-stoff) 88%, transparent);
  --glas-kachel: color-mix(in srgb, var(--glas-stoff) 84%, transparent);
  --glas-kachel-hover: color-mix(in srgb, var(--glas-stoff) 92%, transparent);
  --glass-blur: blur(24px) saturate(150%);
  --glass-edge: rgba(255, 255, 255, .26); --glass-rand: rgba(255, 255, 255, .08);
  --glas-rahmen: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-rand), inset 0 -18px 24px -20px rgba(0, 0, 0, .55);
  --glas-glanz: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) .75rem);
  --glass-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .5), 0 28px 60px -18px rgba(0, 0, 0, .9);
  --glass-tint: color-mix(in srgb, var(--accent) 8%, #2a313f); /* deckend, zwei Stufen über der Karte */
  --pille-schatten: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .45), 0 8px 16px -8px rgba(0, 0, 0, .6);
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3b9c5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- 3. Gerechnete Markentöne ----------
   Wo der Browser aus einer Farbe eine andere rechnen kann, stehen drei Töne genauer.
   Feldton: der Akzent, in der Helligkeit begrenzt (hell mindestens 0,48, dunkel höchstens 0,72).
   Die vier Musterfarben liegen innerhalb; Schwarz, Weiß oder Gelb als Marke nähmen der Schrift
   auf dem Feld sonst den Kontrast (bis 3,0:1). Zweiter Ton: der Feldton, im Farbkreis um
   höchstens 36° zur kühlen Seite gedreht – Koralle wird Rosé statt Bernstein, Blau bleibt Blau.
   Akzentfläche: der Akzent, um 8 % von seiner Schriftfarbe WEG gemischt; so hält --accent-on
   darauf 4,5:1, auch wo der Mandant knapp darunter liegt (Koralle 4,30). */
@supports (color: rgb(from red calc(255 - r) g b)) and (color: oklch(from red max(l, .48) c calc(h + 36 * sin((h - 75) * 1deg)))) {
  :root {
    --feld-ton: oklch(from var(--accent) max(l, .48) c h);
    --akzent-2: oklch(from var(--feld-ton) l c calc(h + 36 * sin((h - 75) * 1deg)));
    --gegen-auf: rgb(from var(--accent-on) calc(255 - r) calc(255 - g) calc(255 - b));
    --akzent-flaeche: color-mix(in srgb, var(--accent) 92%, var(--gegen-auf));
    --akzent-auf: var(--accent-on);
  }
  html[data-theme="dark"] { --feld-ton: oklch(from var(--accent) min(l, .72) c h); }
}

@media (max-width: 1023px) {
  /* Am Telefon liegt Inhalt über der ganzen Breite: kleinere, leisere Flecken. */
  :root {
    --schwebe: 8px; --leiste-h: 52px; --card-pad: 1.25rem; --gap-section: 1.25rem;
    --feld:
      radial-gradient(120vw 26rem at 0% 0%, color-mix(in srgb, var(--feld-1) 70%, transparent), transparent 70%),
      radial-gradient(110vw 24rem at 100% 38%, color-mix(in srgb, var(--feld-2) 70%, transparent), transparent 68%),
      radial-gradient(130vw 22rem at 20% 108%, var(--feld-3), transparent 66%);
  }
}
@media (max-width: 640px) { :root { --card-pad: 1.125rem; } }

/* ---------- 4. Grund und Schrift ---------- */
/* Das Feld ist ein festes Element hinter allem – background-attachment: fixed übergeht iOS. */
body { background: var(--bg); background-image: none; }
body::before, body:has(.topbar)::after {
  content: ""; position: fixed; inset: 0; height: 100vh; height: 100lvh; pointer-events: none;
  background: var(--feld);
}
body::before { z-index: -1; }
/* Der Saum: dasselbe Feld ÜBER dem Inhalt, als Streifen am oberen Rand. Was unter die Kopfleiste
   rollt, taucht ins Feld ein. Er hängt am body, damit ihn auch der Kundenbereich hat. */
body:has(.topbar)::after {
  z-index: 39; background: var(--feld), var(--bg);
  --saum-oben: linear-gradient(to bottom, #000 var(--schwebe), transparent calc(var(--schwebe) + var(--leiste-h) * .7));
  -webkit-mask-image: var(--saum-oben); mask-image: var(--saum-oben);
}
@media (max-width: 1023px) {
  /* Am Telefon auch unten: unter der unteren Leiste liegt nur das Feld, kein Text scheint durch das Glas. */
  body:has(.tabbar)::after {
    --saum-unten: linear-gradient(to top, #000 calc(2.75rem + env(safe-area-inset-bottom)), transparent calc(5.5rem + env(safe-area-inset-bottom)));
    -webkit-mask-image: var(--saum-oben), var(--saum-unten); mask-image: var(--saum-oben), var(--saum-unten);
  }
}
@media print { body::before, body::after { display: none; } }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; }
h1 { font-weight: 600; letter-spacing: -.035em; word-spacing: normal; line-height: 1.15; }
h2 { letter-spacing: -.02em; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* Was auf dem Feld oder auf Glas steht, nimmt die dunklere zweite Stufe; jede deckende Fläche
   stellt die drei Stufen wieder her. */
.page, .sidebar, .topbar, .tabbar, .tabs, .toast,
.modal__header, .modal__footer, .ueb-kz, .kennzahlen > .card, .auth, .setup {
  --text-muted: var(--tinte-frei); --text-subtle: var(--tinte-frei); --kante: var(--kante-frei);
  --knopf: var(--glass-tint); --knopf-schatten: var(--shadow-xs); --focus: var(--fokus-frei);
  --success: var(--success-frei); --warning: var(--warning-frei); --danger: var(--danger-frei); --info: var(--info-frei);
}
.card:not(.kennzahlen > .card), .ueb-karte, .ueb-leiste, .panel, .modal__panel, .drawer, .auth__card,
.dropdown__menu, .card .tabs {
  --text-muted: var(--tinte-2); --text-subtle: var(--tinte-3); --kante: var(--kante-fest);
  --knopf: var(--knopf-fest); --knopf-schatten: 0 0 0 0 transparent; --focus: var(--accent-text);
  --success: var(--success-fest); --warning: var(--warning-fest); --danger: var(--danger-fest); --info: var(--info-fest);
}

/* ---------- 5. Gerüst ---------- */
/* Seitenleiste: eine schwebende Glastafel, unter ihr liegt nur das Feld (--sidebar-w).
   Die Betreiberleiste schwebt mit, bleibt aber Tinte (sie ist nie Glas). */
@media (min-width: 1024px) {
  .sidebar {
    inset: var(--schwebe) auto var(--schwebe) var(--schwebe);
    width: calc(var(--sidebar-w) - 2 * var(--schwebe));
    padding: 1.125rem .75rem .75rem; border: 0; border-radius: var(--radius-xl);
  }
  .sidebar:not(.sidebar--operator) {
    background-color: var(--glass-bg); background-image: var(--glas-glanz);
    box-shadow: var(--glas-rahmen), var(--glass-shadow);
  }
}
.sidebar__brand { padding: var(--space-1) var(--space-3) var(--space-4); }
.sidebar__wordmark span { color: var(--text-muted); }
.sidebar__footer { border-top-color: var(--border-strong); padding-top: var(--space-2); }
.sidebar__section { padding-top: var(--space-4); }
.sidebar__workspace { margin: 0 .75rem .5rem; padding: .625rem 0 .875rem; border-bottom: 1px solid var(--border-strong); }
.sidebar__workspace span, .sidebar__workspace strong { display: block; font-size: .75rem; line-height: 1.5; }
.sidebar__workspace span { color: var(--text-muted); }
.sidebar__workspace strong { overflow-wrap: anywhere; font-weight: 600; }
.sidebar__group .sidebar__section { padding: .875rem .75rem .25rem; font-size: .75rem; letter-spacing: 0; text-transform: none; }
.sidebar__admin { margin-top: .75rem; padding-top: .25rem; border-top: 1px solid var(--border-strong); }
.sidebar__admin > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; padding: .625rem .75rem; color: var(--text-muted); cursor: pointer; font-size: .75rem; list-style: none; }
.sidebar__admin > summary::-webkit-details-marker { display: none; }
.sidebar__admin[open] > summary > svg { transform: rotate(180deg); }
.sidebar__admin > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Die Auswahl ist eine deckende Pille AUF dem Glas; das Symbol trägt die Marke. */
.nav-item { min-height: 2.75rem; border-radius: var(--radius-sm); color: var(--text-muted); }
.nav-item svg { opacity: .9; }
.nav-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.nav-item.is-active { background: var(--glass-tint); color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent-text); }
.nav-item.is-active svg { color: var(--accent-text); opacity: 1; }
.nav-item__count { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.nav-item.is-active .nav-item__count { background: var(--akzent-flaeche); color: var(--akzent-auf); }
/* Kopfleiste: dasselbe Glas. Ihr Polster links ist der Seitenrand – der Titel steht über der Überschrift. */
.topbar {
  top: var(--schwebe); height: var(--leiste-h); margin: var(--schwebe) var(--schwebe) 0;
  padding: 0 .625rem 0 clamp(1rem, 3vw, 2.5rem); border: 0; border-radius: var(--radius-xl);
  background-color: var(--glass-bg); background-image: var(--glas-glanz);
  box-shadow: var(--glas-rahmen), var(--glass-shadow);
}
/* Neben der Seitenleiste beginnt sie bündig mit dem Inhalt; ohne sie (Kundenbereich) hält sie links Abstand. */
@media (min-width: 1024px) { .main > .topbar { margin-left: 0; } }
.topbar__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
/* Die Suche: eine helle Pille AUF dem Glas, ohne gezeichnete Kante; im Fokus wird sie deckend. */
.topbar__search { max-width: 240px; min-width: 120px; }
.topbar__search .input {
  min-height: 2.375rem; padding-left: 2.5rem; border-radius: var(--control-radius); border-color: transparent;
  background: color-mix(in srgb, var(--glass-tint) 72%, transparent);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
}
.topbar__search .input:hover { border-color: transparent; background: color-mix(in srgb, var(--glass-tint) 88%, transparent); }
.topbar__search .input:focus { background: var(--surface); border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent); }
.topbar__search-icon { left: .875rem; color: var(--text-muted); }
.topbar__dot { box-shadow: 0 0 0 2px var(--glas-stoff); }
.topbar .btn--quiet { --btn-fg: var(--text-muted); }
.topbar__begleiter { min-width: 2.75rem; min-height: 2.75rem; gap: .5rem; white-space: nowrap; }
.topbar__begleiter[aria-expanded="true"] { --btn-bg: var(--glass-tint); --btn-fg: var(--text); }
@media (max-width: 1199px) {
  .topbar__begleiter > .topbar__begleiter-label { display: none; }
  .topbar__begleiter { padding-inline: .625rem; }
}
/* Seitenkopf: dicht unter der Kopfleiste, der Inhalt dicht darunter – die Luft gehört zwischen die Karten. */
.page { padding-top: clamp(1.125rem, 1.9vw, 1.625rem); }
.page-head { margin-bottom: var(--gap-section); gap: var(--space-3) var(--space-6); }
.page-head h1 { margin-bottom: var(--space-1); }
.page-head .lead { font-size: var(--fs-base); line-height: var(--lh-snug); }
.breadcrumb { margin-bottom: var(--space-2); color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.breadcrumb svg { opacity: .85; }            /* mit .6 stand der Pfeil auf dem Feld bei 2,6:1 */

/* ---------- 6. Karten ---------- */
/* Die feine Kante trennt Inhalte; Glas und Dialoge tragen die räumliche Tiefe. */
.card { border-color: var(--border-strong); border-radius: var(--radius-lg); box-shadow: none; }
.card--flat { box-shadow: none; }
.card--inset { background: var(--surface-inset); }
.card__header { min-height: 3.25rem; padding: var(--space-3) var(--card-pad); border-bottom-color: var(--border); }
.card__header h3, .card__header h2 { letter-spacing: -.02em; font-weight: 600; line-height: 1.35; }
.card__footer { padding-block: var(--space-3); border-top-color: var(--border); }
/* Überfahren ändert die Tiefe des Schattens, nicht die Lage der Karte. */
.card--link:hover { border-color: var(--kante); box-shadow: none; }
.panel { border-radius: var(--radius); }
/* Die Glaskarte aus app.css: dasselbe Glas wie die Kacheln. */
.card--glass { background: var(--glas-kachel); box-shadow: var(--glas-rahmen), var(--shadow-sm); }

/* ---------- 7. Knöpfe ---------- */
/* Matte Bedienelemente. Die Kante des ghost-Knopfs hält 3:1. */
.btn { --btn-bg: var(--knopf); --btn-border: transparent; border-radius: var(--control-radius); box-shadow: none; }
.btn:hover { --btn-bg: color-mix(in srgb, var(--text) 5%, var(--knopf)); box-shadow: var(--knopf-schatten); }
/* Hauptknopf mit Markenanteil, ohne Glanz oder farbigen Außenschatten. */
.btn--primary, html[data-theme="dark"] .btn--primary {
  --btn-bg: var(--haupt); --btn-fg: var(--haupt-auf);
  background-image: var(--haupt-glanz);
  box-shadow: none;
}
.btn--primary:hover, html[data-theme="dark"] .btn--primary:hover {
  --btn-bg: var(--haupt-ueber);
  box-shadow: none;
}
/* Akzentknopf: die Farbe des Mandanten ohne Verlauf. Überfahren weicht die Fläche von der Schrift weg. */
.btn--accent, html[data-theme="dark"] .btn--accent {
  --btn-bg: var(--akzent-flaeche); --btn-fg: var(--akzent-auf);
  box-shadow: none;
}
.btn--accent:hover, html[data-theme="dark"] .btn--accent:hover {
  --btn-bg: color-mix(in srgb, var(--akzent-flaeche) 88%, var(--gegen-auf));
  box-shadow: none;
}
.btn--ghost { --btn-bg: transparent; --btn-border: var(--kante); }
.btn--ghost:hover { --btn-bg: color-mix(in srgb, var(--text) 6%, transparent); }
.btn--quiet { --btn-bg: transparent; --btn-fg: var(--text-muted); }
.btn--quiet:hover { --btn-bg: color-mix(in srgb, var(--text) 7%, transparent); --btn-fg: var(--text); }
.btn--danger { --btn-bg: var(--danger-soft); --btn-fg: var(--danger-fest); }
.btn--danger:hover { --btn-bg: color-mix(in srgb, var(--danger-fest) 16%, var(--surface)); }
.btn--success { --btn-bg: var(--success-fest); --btn-fg: var(--text-inverse); }
.btn--success:hover { --btn-bg: color-mix(in srgb, var(--success-fest) 88%, var(--text)); }
/* Im Dunkeln wäre das volle Grün lauter als der Hauptknopf daneben. */
html[data-theme="dark"] .btn--success { --btn-bg: color-mix(in srgb, var(--success-fest) 80%, var(--surface)); }
.btn--ghost, .btn--quiet, .btn--danger, .btn--success,
.btn--ghost:hover, .btn--quiet:hover, .btn--danger:hover, .btn--success:hover { box-shadow: none; }
/* Gesperrt: blass und flach, ohne den farbigen Schatten des Hauptknopfs. */
.btn[disabled], .btn.is-disabled, .btn:disabled { opacity: .45; box-shadow: none; background-image: none; }
/* Segmentschalter: eine eingelassene Schiene, die gewählte Stelle schwebt. */
.btn-group { background: color-mix(in srgb, var(--text) 6%, var(--surface)); border-color: transparent; }
.btn-group a.btn:hover, .btn-group button.btn:hover { --btn-bg: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); }
.btn-group a.is-active, .btn-group button.is-active,
.btn-group a.btn--primary, .btn-group button.btn--primary,
html[data-theme="dark"] .btn-group a.btn--primary, html[data-theme="dark"] .btn-group button.btn--primary {
  background: var(--glass-tint); background-image: none; color: var(--text); box-shadow: var(--pille-schatten);
}

/* ---------- 8. Formulare ---------- */
/* Felder sind gefüllt (4 % Tinte) und tragen eine Kante mit 3:1 – die Füllung allein hebt ein leeres Feld nicht ab. */
.label, .field__label { color: var(--text-muted); }
.hint { color: var(--text-subtle); }
.input, .select, .textarea {
  background-color: var(--fuellung); border-color: var(--kante); border-radius: var(--control-radius);
  padding-inline: .9375rem;
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--text) 72%, transparent); }
.input:focus, .select:focus, .textarea:focus {
  background-color: var(--surface); border-color: var(--focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent);
}
/* Ungültig: rote Kante UND rot getönte Füllung – Farbe allein an einer 1-px-Linie übersieht man. */
.input.is-invalid, .select.is-invalid, .textarea.is-invalid, .input[aria-invalid="true"] {
  border-color: var(--danger); background-color: color-mix(in srgb, var(--danger) 5%, var(--surface));
}
.input.is-invalid:focus, .select.is-invalid:focus, .textarea.is-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent); }
.input:disabled, .select:disabled, .textarea:disabled, .input[readonly], .textarea[readonly] {
  background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-muted);
}
.input:disabled, .select:disabled, .textarea:disabled { cursor: not-allowed; }
/* Der Pfeil der Auswahl war ein festes Grau mit 2,6:1 – jetzt 3:1 und mehr. */
.select { background-image: var(--pfeil); padding-right: 2.5rem; background-position: right .875rem center; }
.input--ghost { background-color: transparent; border-color: transparent; }
.input-group .input { border-radius: var(--control-radius) 0 0 var(--control-radius); }
.input-group__addon { border-color: var(--kante); border-radius: 0 var(--control-radius) var(--control-radius) 0; }
/* Dateifeld: der Knopf des Browsers wird eine stille Pille im Feld. */
.input[type="file"] { padding: .3125rem .375rem; color: var(--text-muted); font-size: var(--fs-md); cursor: pointer; }
.input[type="file"]::file-selector-button {
  margin: 0 .75rem 0 0; min-height: 1.875rem; padding: .25rem .875rem; border: 0; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--text) 9%, var(--surface)); color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"] { border-color: var(--kante); background: var(--fuellung); }
.check input[type="checkbox"] { border-radius: 7px; }
.check input:checked { background: var(--wahl); border-color: var(--wahl); }
.check input[type="checkbox"]:checked::after, .check input[type="radio"]:checked::after { background: var(--wahl-auf); }
/* Schalter: aus eine gefüllte Schiene mit Kante wie ein Feld, an die Marke; der Knauf ist Tinte. */
.switch input { background: var(--fuellung); box-shadow: inset 0 0 0 1px var(--kante); }
.switch input::after { background: var(--tinte-2); box-shadow: none; }
.switch input:checked { background: var(--wahl); box-shadow: none; }
.switch input:checked::after { background: var(--wahl-auf); box-shadow: var(--shadow-xs); }
.fieldset__legend { font-family: var(--font-display); letter-spacing: -.01em; }

/* ---------- 9. Tabellen ---------- */
/* Dicht: 44 px je einfache Zeile, der Kopf leise. Die Haarlinien bleiben – sie führen das Auge über breite Zeilen. */
.table th { padding: .75rem var(--cell-px) .625rem; color: var(--text-subtle); border-bottom-color: var(--border); }
.table td { border-bottom-color: var(--border); }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.table-wrap {
  background:
    linear-gradient(to right, var(--scroll-cover) 30%, transparent) left center / 3rem 100% no-repeat local,
    linear-gradient(to left, var(--scroll-cover) 30%, transparent) right center / 3rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(var(--schatten), .16), transparent) left center / .875rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(var(--schatten), .16), transparent) right center / .875rem 100% no-repeat scroll;
}
@media (max-width: 780px) {
  /* Als Karten: jede Zeile ein Block mit Luft; der Verweis der Hauptzelle ist das Tippziel der Zeile. */
  .table--responsive tr { padding-block: var(--space-3); }
  .table--responsive tbody tr:hover { background: none; }
  .table--responsive td::before { color: var(--text-subtle); }
  .table--responsive td.is-primary > a { min-height: 2.75rem; }
  .table--responsive td.is-primary :is(.muted, .subtle) { font-weight: 400; }
  /* Verweise von 20 px Höhe: das Tippziel wächst auf 44 px, ohne dass die Zeile wächst (Polster und Gegenrand). */
  .table--responsive td > a.link, .card__header > a:not(.btn), .ueb-mehr,
  a.task-card__title, a.pair__value, .page-head a.text-sm { padding-block: .75rem; margin-block: -.75rem; }
  a.tally { min-height: 2.75rem; }
  .kontaktzeile { min-height: 2.75rem; }
}

/* ---------- 10. Abzeichen, Chips, Avatare ---------- */
/* Abzeichen stehen auch auf dem Feld: ihre Farben sind feste Stufen, nicht die des Umfelds. */
.badge { padding: .1875rem .6875rem; }
.badge, .badge--slate { background: var(--surface-3); color: var(--tinte-2); }
.badge--blue { background: var(--info-soft); color: var(--info-fest); }
.badge--emerald { background: var(--success-soft); color: var(--success-fest); }
.badge--amber { background: var(--warning-soft); color: var(--warning-fest); }
.badge--rose { background: var(--danger-soft); color: var(--danger-fest); }
.badge--gold { background: var(--gold-soft); color: var(--gold-ink); }
/* „cyan“ hing am zweiten Markenton und wechselte mit dem Mandanten. Ein Zustand braucht eine feste Farbe: Petrol. */
.badge--cyan { --petrol: color-mix(in srgb, var(--info-fest), var(--success-fest)); background: color-mix(in srgb, var(--petrol) 13%, var(--surface)); color: var(--petrol); }
/* Akzent als Abzeichen: Tinte mit Marke – --accent-text allein hält auf seiner Tönung nur knapp (Koralle 4,56). */
.badge--accent { background: var(--accent-soft); color: color-mix(in srgb, var(--accent-text) 78%, var(--text)); }
/* Chips sind Filter: der gewählte ist im Akzent getönt und trägt einen Ring; die Beschriftung bleibt Tinte. */
.chip { border-color: transparent; background: var(--fuellung); color: var(--text-muted); }
.chip:hover { border-color: transparent; background: color-mix(in srgb, var(--text) 9%, var(--surface)); }
.chip.is-active { background: var(--accent-soft); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.avatar { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--text); }
/* Überall, wo app.css Schrift auf die rohe Akzentfläche setzt (Koralle 4,30:1). */
.avatar--accent, .calendar__day.is-today .calendar__num, .setup__step.is-done .setup__dot, .logo-slot__badge,
.begleiter__knopf, .begleiter__zug--mensch .begleiter__text { background: var(--akzent-flaeche); color: var(--akzent-auf); }
.avatar--xl { border-radius: var(--radius-lg); font-family: var(--font-display); box-shadow: var(--shadow-sm); background: var(--surface); }
/* Der Farbpunkt trägt die Farbe, die der Nutzer gewählt hat; eine dunkle verschwände im Dunkeln ohne Ring. */
html[data-theme="dark"] .dot { box-shadow: 0 0 0 1px var(--kante-fest); }

/* ---------- 11. Kennzahlen ---------- */
/* Kacheln aus Glas: sie liegen auf dem Feld, nicht auf einer Karte, und enthalten nur wenige große Zeichen. */
.kennzahlen > .card {
  background-color: var(--glas-kachel); background-image: var(--glas-glanz); border-color: transparent;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glas-rahmen), var(--shadow-sm);
}
.stat { gap: .25rem; padding: 1rem var(--card-pad) 1.125rem; }
.stat__value, .ueb-kz__wert {
  font-family: var(--font-display); font-weight: 680; letter-spacing: -.032em; line-height: 1.05;
  font-size: clamp(1.625rem, 1.25rem + 1vw, 2.125rem);
}
.stat__value { margin-top: .125rem; }
.progress { background: var(--surface-3); }
.progress__bar { background: var(--wahl); transition-duration: .2s; }
.meter-ring { background: conic-gradient(var(--accent-text) calc(var(--pct) * 1%), var(--surface-3) 0); }
/* Bewegung höchstens 200 ms: was app.css länger laufen lässt. */
.skeleton { animation: none; }
.lobby > * { animation-duration: .2s; }
.abruf__fill { transition-duration: .2s; }

/* ---------- 12. Überlagerungen, Hinweise, leere Zustände ---------- */
.backdrop { background: var(--schleier); }
/* Dialog: deckender Körper, Kopf und Fuß als Glas darauf. Im Dunkeln hebt ihn ein Lichtrand von den Karten ab. */
.modal__panel { background: var(--surface-hoch); border-color: transparent; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
html[data-theme="dark"] .modal__panel { box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-xl); }
.modal__header, .modal__footer { background: var(--glas-dialog); }
.modal__header { padding-block: var(--space-4); border-bottom-color: var(--border); }
.modal__header h2, .modal__header h3 { letter-spacing: -.015em; }
.modal__footer { border-top-color: var(--border); }
.drawer { border-left: 0; }
/* Menüs sind deckend, auch im Inhalt: sie klappen über Kacheln aus Glas auf (Übersicht „Neu“),
   und Glas liegt nie über Glas. */
.dropdown__menu {
  background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: transparent; border-radius: var(--radius); padding: .375rem;
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-lg);
}
html[data-theme="dark"] .dropdown__menu { background: var(--surface-2); }
.dropdown__item { min-height: 2.5rem; border-radius: var(--radius-xs); }
.dropdown__item:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.dropdown__item--danger:hover { color: var(--danger); }
.dropdown__divider { background: var(--border-strong); }
.toast { border-color: transparent; border-radius: var(--radius); box-shadow: var(--glas-rahmen), var(--glass-shadow); animation-duration: .2s; }
/* Das Ausblenden setzt components/toasts.php als Inline-Stil mit .3s. */
@media (prefers-reduced-motion: no-preference) { .toast { transition-duration: .2s !important; } }
/* Hinweise sind deckende, getönte Flächen – sie stehen auf Karten wie auf dem Feld. Der neutrale ist hell mit Tinte. */
.alert { border-color: transparent; border-radius: var(--radius); padding: var(--space-3) var(--space-4); line-height: 1.5; background: var(--surface-2); color: var(--tinte-2); }
.alert--error { background: var(--danger-soft); color: var(--danger); }
.alert--success { background: var(--success-soft); color: var(--success); }
.alert--warning { background: var(--warning-soft); color: var(--warning); }
.alert--info { background: var(--info-soft); color: var(--info); }
.alert a:not(.btn) { text-decoration: underline; text-underline-offset: .18em; }
.empty { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.empty__icon { border-radius: var(--radius); background: var(--fuellung); color: var(--text-muted); }
.empty p { color: var(--text-muted); }

/* ---------- 13. Reiter, Blättern, Listen, Zeitleiste ---------- */
/* Reiter sind eine Kapsel aus Glas auf dem Feld, der gewählte eine deckende Pille darin. Die Haarlinie entfällt. */
.tabs {
  width: fit-content; max-width: 100%; gap: 2px; padding: 4px; border: 0; border-radius: 1.5rem;
  background-color: var(--glass-bg); background-image: var(--glas-glanz);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glas-rahmen), var(--shadow-xs);
}
.tab { min-height: 2.75rem; padding: .4375rem 1rem; font-weight: 500; }
.tab:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.tab.is-active { background: var(--glass-tint); color: var(--text); font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent-text), var(--pille-schatten); }
.tab__count { color: var(--text-muted); }
/* Reiter IN einer Karte: eine eingelassene Schiene – Glas auf einer deckenden Fläche verwischt nichts. */
.card .tabs { background: color-mix(in srgb, var(--text) 6%, var(--surface)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.pagination { padding: var(--space-4) 0; }
.pagination .is-active, html[data-theme="dark"] .pagination .is-active { background: var(--haupt); color: var(--haupt-auf); }
.list__item:hover { background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
.card__body > .list > .list__item { margin-inline: -.625rem; padding-inline: .625rem; border-radius: var(--radius-xs); background-size: calc(100% - 1.25rem) 1px; background-position: center bottom; }
.timeline__dot { background: var(--fuellung); border-color: transparent; color: var(--text-muted); }
.timeline__item:not(:last-child)::before { background: var(--border-strong); }

/* ---------- 14. Übersicht ---------- */
.page--uebersicht {
  --ueb-schrift: var(--font-display);
  --ueb-radius: var(--radius-lg); --ueb-radius-klein: var(--radius-xs);
  --ueb-rand: 1.375rem; --ueb-abstand: var(--card-gap);
  --ueb-hover: color-mix(in srgb, var(--accent) 7%, transparent);
}
.ueb-datum { font-weight: 700; letter-spacing: -.03em; word-spacing: .04em; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.1; }
.ueb-lage__punkt--null, .ueb-lage__punkt--null .ueb-lage__zahl { color: var(--text-muted); }
/* Das Band wird zu vier einzelnen Kacheln: der Abstand trennt, das Feld scheint zwischen ihnen durch. */
.ueb-band { background: none; border: 0; border-radius: 0; overflow: visible; }
.ueb-band__spur { gap: var(--card-gap); }
.ueb-kz {
  gap: .25rem; padding: 1rem var(--ueb-rand) 1.125rem; border-radius: var(--radius-lg);
  background-color: var(--glas-kachel); background-image: var(--glas-glanz);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glas-rahmen), var(--shadow-sm);
}
.ueb-kz + .ueb-kz { border-left: 0; }
.ueb-kz:hover { background-color: var(--glas-kachel-hover); }
.ueb-kz:focus-visible::after { border-radius: 1.125rem; }
.ueb-kz__linie { top: 1rem; }
.ueb-kz__linie polyline { stroke: var(--text-muted); }
/* Alle Karten der Übersicht sind deckend, auch die „offenen“ Listen: Schrift direkt auf dem Farbfeld
   wäre unlesbar. Den Rang macht der Schatten: Arbeit liegt höher. */
.ueb-karte { border: 0; box-shadow: var(--shadow-sm); }
.ueb-karte__kopf { padding: .875rem var(--ueb-rand) .75rem; border-bottom-color: var(--border); }
.ueb-karte__titel { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -.015em; }
.ueb-karte--heute .ueb-karte__titel { font-size: 1.1875rem; }
.ueb-karte--offen { background: var(--surface); border-radius: var(--radius-lg); padding: 0 var(--ueb-rand) .625rem; box-shadow: var(--shadow-xs); }
html[data-theme="dark"] .ueb-karte--offen { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow-xs); }
.ueb-karte--offen > .ueb-karte__kopf { padding: .875rem 0 .625rem; border-bottom-color: var(--border); }
.ueb-karte--offen > .ueb-leer { padding-block: .875rem .5rem; }
.ueb-liste > li + li { border-top-color: var(--border); }
.ueb-mehr, .ueb-lage__punkt { border-radius: var(--radius-full); }
.ueb-mehr { padding-inline: .625rem; margin-right: -.625rem; }
.ueb-signal__zeichen { border-radius: 9px; background: color-mix(in srgb, var(--ueb-sig) 12%, var(--surface)); }
.ueb-rang__schiene, .ueb-rang__schiene > span { border-radius: var(--radius-full); height: 5px; }
.ueb-diagramm__wert { font-weight: 700; letter-spacing: -.02em; }
.ueb-leiste { border: 0; box-shadow: var(--shadow); }
.ueb-aktion { border-color: transparent; background: var(--fuellung); }
.ueb-aktion:hover { border-color: transparent; background: color-mix(in srgb, var(--text) 9%, var(--surface)); }
.dash.is-anpassen .ueb-werkzeug { border-color: transparent; border-radius: var(--radius-full); background: var(--glass-tint); box-shadow: var(--pille-schatten); }
.ueb-werkzeug__knopf { border-color: transparent; background: var(--fuellung); }

/* ---------- 15. Beleg ---------- */
/* Der Beleg ist Inhalt und liegt auf derselben Karte; nur die Summe steht in der Schrift der großen Zahlen. */
.pair { border-bottom-color: var(--border); }
.card__footer .text-xl.num { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; font-size: 1.5rem; }
.card__body > .panel { background: var(--fuellung); }
.doc-sheet { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* ---------- 16. Anmeldung ---------- */
/* Die Karte liegt deckend auf dem Feld; die dunkle Hälfte nimmt die Marke statt eines festen Olivschwarz –
   in der Helligkeit begrenzt, damit die helle Schrift auch bei weißer Marke hält. */
.auth__card { border-color: transparent; box-shadow: var(--shadow-xl); }
.auth__aside { background: linear-gradient(150deg, var(--nacht), color-mix(in srgb, var(--accent) 38%, var(--nacht))); }
@supports (color: oklch(from red min(l, .72) c h)) {
  .auth__aside { background: linear-gradient(150deg, var(--nacht), color-mix(in srgb, oklch(from var(--accent) min(l, .72) c h) 38%, var(--nacht))); }
}

/* ---------- 17. Telefon ---------- */
@media (max-width: 1023px) {
  /* Die Schublade bleibt deckend (Regel der Suite), schwebt aber abgesetzt und gerundet. */
  .sidebar {
    inset: var(--schwebe) auto var(--schwebe) var(--schwebe); border: 0; border-radius: var(--radius-xl);
    transform: translateX(calc(-100% - 2 * var(--schwebe)));
    padding-top: calc(var(--space-5) + env(safe-area-inset-top));
    --text-muted: var(--tinte-2); --text-subtle: var(--tinte-3);
  }
  .sidebar:not(.sidebar--operator) .nav-item.is-active { background: var(--wash); box-shadow: none; }
  .topbar {
    top: calc(var(--schwebe) + env(safe-area-inset-top)); margin: calc(var(--schwebe) + env(safe-area-inset-top)) var(--schwebe) 0;
    padding: 0 .25rem; border-radius: 18px;
  }
  /* Die untere Leiste schwebt als Kapsel; der gewählte Punkt ist deckend. */
  .tabbar {
    left: .625rem; right: .625rem; bottom: calc(.625rem + env(safe-area-inset-bottom));
    padding: .3125rem; border: 0; border-radius: 18px;
    background-color: var(--glass-surface); background-image: none;
    box-shadow: var(--glas-rahmen), var(--glass-shadow);
  }
  .tabbar__item { min-height: 3.375rem; border-radius: 10px; color: var(--text-muted); }
  /* Die Beschriftung ist Tinte, nur das Symbol trägt die Marke – --accent-text ist nur gegen --surface-2 zugesagt. */
  .tabbar__item.is-active, html[data-theme="dark"] .tabbar__item.is-active { background: var(--glass-tint); color: var(--text); box-shadow: var(--pille-schatten); }
  .tabbar__item.is-active svg { color: var(--accent-text); }
  /* Tippziele: die Höhen von oben gelten für die Maus, hier wieder 44 px. */
  .tab, .dropdown__item, .nav-item { min-height: 2.75rem; }
  .input[type="file"]::file-selector-button { min-height: 2.125rem; }
  /* Reiter: keine Kapsel – sie liefe aus dem Bild. Jeder ist eine eigene Pille in einer Reihe, die
     rollt (mit der Maus bricht sie um); der gewählte trägt den Ring der Marke wie ein Chip. */
  .tabs:not(.card .tabs) {
    width: auto; max-width: none; gap: .375rem; border-radius: 0;
    margin-inline: calc(-1 * clamp(1rem, 3vw, 2.5rem)); padding: .25rem clamp(1rem, 3vw, 2.5rem) .625rem;
    scroll-padding-inline: clamp(1rem, 3vw, 2.5rem);
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .tabs:not(.card .tabs) > .tab { background: color-mix(in srgb, var(--glass-tint) 70%, transparent); box-shadow: inset 0 0 0 1px var(--border); }
  .tabs:not(.card .tabs) > .tab.is-active { background: var(--glass-tint); box-shadow: inset 0 0 0 1.5px var(--accent-text), var(--pille-schatten); }
  .card .tabs { border-radius: var(--radius); }
  /* Meldungen stehen über der unteren Leiste, nicht auf ihr. */
  .toasts { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .5rem); }
}
@media (max-width: 640px) {
  .page-head h1 { font-size: 1.625rem; }
  /* Die Kacheln werden eine wischbare Reihe. Das Polster ist Platz für den Schatten, der Gegenrand holt es zurück. */
  .ueb-band { margin-inline: calc(-1 * clamp(1rem, 3vw, 2.5rem)); }
  .ueb-band__spur {
    gap: .75rem; padding: .25rem clamp(1rem, 3vw, 2.5rem) 1.25rem; margin-bottom: -1rem;
    scroll-padding-inline: clamp(1rem, 3vw, 2.5rem); grid-auto-columns: minmax(15rem, 78%);
  }
  .grid.kennzahlen { gap: .75rem; padding-block: .25rem 1.25rem; margin-bottom: -1.25rem; }
  .grid.kennzahlen.mb-3 { margin-bottom: calc(var(--space-5) - 1.25rem); }
  .grid.kennzahlen.mb-4 { margin-bottom: calc(var(--space-7) - 1.25rem); }
  .modal__panel { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}

/* ---------- 18. Rückfälle ----------
   Ohne Unschärfe oder mit abbestellter Transparenz wird jede Glasfläche deckend: Leisten --surface-2
   (die helle Pille bleibt darauf sichtbar), Kacheln und Schwebendes --surface. Steht am Ende, weil es alles schlägt. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .sidebar:not(.sidebar--operator), .topbar, .tabbar, .tabs:not(.card .tabs) { background-color: var(--surface-2); }
  .ueb-kz, .ueb-kz:hover, .kennzahlen > .card, .card--glass, .toast { background-color: var(--surface); }
  .modal__header, .modal__footer { background-color: var(--surface-hoch); }
  .topbar__search .input { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar:not(.sidebar--operator), .topbar, .tabbar, .tabs:not(.card .tabs) {
    background-color: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .ueb-kz, .ueb-kz:hover, .kennzahlen > .card, .card--glass,
  .modal__header, .modal__footer, .toast {
    background-color: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .modal__header, .modal__footer { background-color: var(--surface-hoch); }
  .backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar__search .input { background: var(--surface); }
}
/* Die Reiter-Pillen am Telefon sind schon ohne Glas; der Rückfall darf ihrer Reihe keine Fläche geben. */
@media (max-width: 1023px) { .tabs:not(.card .tabs) { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .btn, .nav-item, .tab, .chip, .card--link, .ueb-kz, .input, .select, .textarea, .toast { transition: none; animation: none; }
}

/* ===== Teil 10-uebersicht ===== */
/* =========================================================================
   Teil 10 – Übersicht, Benachrichtigungen, Suche, Dateien
   Tokens, Karten, Kacheln, Knöpfe, Menüs und Dialoge kommen aus Teil 00. Hier steht
   nur, was die Grundlage nicht trifft: die Zustände der Übersicht nach einem Klick
   (Anpassen, „Neu“), die Glocke, die Kartenköpfe der Suche und die Dateikarten.
   Kennzahlen teilen seit 1.37.0 eine gemeinsame Glasfläche. Die Materialtokens
   und Rückfälle der Arbeitsflächen stehen in Teil 95.
   ========================================================================= */

/* ---------- 1. Übersicht: Kopf ---------- */
/* „Anpassen“ ist ein Schalter (aria-pressed). Gedrückt wird er zur deckenden Pille mit dem
   Ring der Marke, wie ein gewählter Filter – bisher sah er gedrückt aus wie vorher. */
.ueb-knopf[aria-pressed="true"],
.ueb-knopf[aria-pressed="true"]:hover {
  --btn-bg: var(--glass-tint); --btn-fg: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--accent-text), var(--pille-schatten);
}
.ueb-knopf[aria-pressed="true"] svg { color: var(--accent-text); }

/* „Neu“: das Symbol trägt die Marke wie in der Seitenleiste, die Beschriftung bleibt Tinte. */
.ueb-neu { min-width: 14rem; }
.ueb-neu .dropdown__item { color: var(--text); }
.ueb-neu .dropdown__item svg { color: var(--accent-text); opacity: 1; }

/* „Am Zug“ (Gold): die Kante links an der Zeile und der Punkt in der Lagezeile. --gold hält
   im Hellen auf der Karte nur 2,2:1; ein Viertel Tinte darin bleibt Gold und hält 3,5:1
   (überfahren 3,3). Im Dunkeln trägt --gold schon 10:1. */
.page--uebersicht { --amzug: color-mix(in srgb, var(--gold) 75%, var(--text)); }
html[data-theme="dark"] .page--uebersicht { --amzug: var(--gold); }
.ueb-lage__punkt--zug::before { background: var(--amzug); }
/* Bei den Registrierungen hing die Kante am li, die Zeile darin ragt aber 8 px nach links –
   die Schrift klebte 3 px an der Kante und die Hover-Fläche stand links über sie hinaus.
   Die Kante wandert an die Zeile, wie bei Objekten und Verträgen; links bleibt die Ecke
   fast eckig, sonst biegt sich die Kante. */
li.ueb-amzug:not(.ueb-zeile) { box-shadow: none; }
.page--uebersicht .ueb-zeile.ueb-amzug { box-shadow: inset 3px 0 0 var(--amzug); }
.page--uebersicht li.ueb-amzug > .ueb-zeile {
  box-shadow: inset 3px 0 0 var(--amzug);
  border-radius: 2px var(--ueb-radius-klein) var(--ueb-radius-klein) 2px;
}

/* ---------- 2. Übersicht: Anpassen ---------- */
/* Jede Karte zeigt ihren Umriss gestrichelt; der Radius folgt der Karte (Teil 00: 22 px),
   der Umriss steht 6 px davor, also auf dem Farbfeld. 62 % Tinte halten dort 3:1 in beiden
   Themen und allen vier Prüfmarken; --kante-frei (dunkel 52 %) fiel auf dem hellsten Fleck
   auf 2,9, --border-strong (13 %) verschwand ganz. */
.page--uebersicht .dash.is-anpassen .dash-widget {
  outline: 1.5px dashed color-mix(in srgb, var(--text) 62%, transparent);
  outline-offset: 6px; border-radius: var(--radius-lg);
}
/* Die Pille ist deckend (Teil 00); ihre Knöpfe tönen sie ab, statt als dunklere Löcher
   (--fuellung) darin zu liegen – im Dunkeln lag die Füllung UNTER der Pille. */
.dash.is-anpassen .ueb-werkzeug { padding: .25rem .25rem .25rem .75rem; gap: .25rem; }
.ueb-werkzeug__griff { color: var(--text-muted); }
.ueb-werkzeug__name { font-weight: 600; }
.ueb-werkzeug__knopf { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-muted); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ueb-werkzeug__knopf:hover { background: color-mix(in srgb, var(--text) 13%, transparent); color: var(--text); }
.ueb-werkzeug__knopf[disabled], .ueb-werkzeug__knopf[disabled]:hover { background: transparent; color: var(--text-muted); }
/* Die Leiste mit Hilfe, „Standard“ und „Fertig“ bleibt deckend: sie klebt beim Rollen über
   den Kacheln aus Glas, und Glas liegt nie über Glas. */
.ueb-leiste { padding: .875rem 1rem .875rem 1.25rem; }
.ueb-leiste__text { color: var(--text-muted); }
/* Ausgeblendete Karten als Chips zum Zurückholen: die Kante eines Knopfs hält 3:1. */
.ueb-chip { border-color: var(--kante); color: var(--text-muted); background: transparent; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ueb-chip:hover { border-color: var(--text); color: var(--text); background: var(--fuellung); }
.ueb-leiste__leer { color: var(--text-subtle); }

/* ---------- 3. Benachrichtigungen (Glocke) ---------- */
/* Die Glocke hängt in der Kopfleiste jeder Seite und im Kundenbereich (dieselbe Gestalt).
   Jede Meldung beginnt mit einer Kachel wie die Vertriebssignale der Übersicht; der
   Auszug steht eine Stufe größer als die Zeit, damit er sich als Inhalt liest. */
.topbar .dropdown__menu--wide { padding: .375rem; }
.topbar .dropdown__menu--wide > .dropdown__label { padding: .5rem .75rem .375rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.dropdown__menu--wide a.dropdown__item.items-start { gap: .75rem; padding: .625rem .75rem; color: var(--text-muted); }
.dropdown__menu--wide a.dropdown__item.items-start > svg {
  width: 2rem; height: 2rem; padding: .5rem; border-radius: 10px; opacity: 1;
  background: var(--accent-soft); color: var(--accent-text);
}
.dropdown__menu--wide a.dropdown__item.items-start .text-strong { line-height: 1.35; }
.dropdown__menu--wide a.dropdown__item.items-start .text-xs:not(:last-child) { margin-top: .125rem; font-size: var(--fs-sm); line-height: 1.4; }
.dropdown__menu--wide a.dropdown__item.items-start .text-xs:last-child { margin-top: .25rem; font-variant-numeric: tabular-nums; }
.dropdown__menu--wide a.dropdown__item + a.dropdown__item { margin-top: 2px; }
/* „Alle als gelesen markieren“ (Kundenbereich): der Haken stand 8 px links der Kacheln
   darunter. Sein Kasten wird so breit wie eine Kachel, Haken und Text fluchten mit ihnen. */
.dropdown__menu--wide form > .dropdown__item { gap: .75rem; padding-inline: .75rem; }
.dropdown__menu--wide form > .dropdown__item > svg { width: 2rem; height: 1rem; padding-inline: .5rem; }
.topbar .dropdown__menu--wide > .p-3 { padding: 1.25rem 1rem 1.5rem; color: var(--text-muted); }

/* ---------- 4. Suche ---------- */
/* Treffergruppen: das Symbol steht in einer Kachel, die Zahl direkt am Titel wie in den Karten
   der Übersicht (ein Zähler, kein Zustand – ohne den Punkt eines Abzeichens), der Hinweis
   „Nur die ersten …“ rückt nach rechts. Gilt nur für die Gruppen unter dem Suchformular. */
form.card[action$="/app/suche"] ~ .stack .card__header { gap: .625rem; }
form.card[action$="/app/suche"] ~ .stack .card__header > svg {
  flex: none; width: 2rem; height: 2rem; padding: .4375rem; border-radius: 10px;
  background: var(--fuellung); color: var(--text-muted);
}
form.card[action$="/app/suche"] ~ .stack .card__header > h2 { flex: 0 1 auto; }
form.card[action$="/app/suche"] ~ .stack .card__header > .badge { padding-inline: .5625rem; font-variant-numeric: tabular-nums; }
form.card[action$="/app/suche"] ~ .stack .card__header > .badge::before { display: none; }
form.card[action$="/app/suche"] ~ .stack .card__header > .text-sm { margin-left: auto; }
form.card[action$="/app/suche"] ~ .stack .list__item { min-height: 3.5rem; }
/* Das Löschkreuz des Suchfelds malt Chrome im Hellen blau – ein fester Farbton neben der
   Marke. Es wird zur Maske in Tinte (3:1 auf dem Feld). */
form.card[action$="/app/suche"] input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 1rem; height: 1rem; margin-left: .5rem; cursor: pointer;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
form.card[action$="/app/suche"] input[type="search"]::-webkit-search-cancel-button:hover { background-color: var(--text); }
/* Am Telefon ließen Zustand und Pfeil dem Titel 180 px (drei Zeilen je Beleg). Der Zustand
   rückt unter den Text, der Pfeil bleibt rechts – die Lesefolge bleibt die des Dokuments. */
@media (max-width: 640px) {
  form.card[action$="/app/suche"] ~ .stack .list__item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .375rem .75rem; align-items: center;
  }
  form.card[action$="/app/suche"] ~ .stack .list__item > .badge { grid-column: 1; justify-self: start; }
  form.card[action$="/app/suche"] ~ .stack .list__item > :last-child { grid-column: 2; grid-row: 1 / span 2; }
  form.card[action$="/app/suche"] ~ .stack .list__item:not(:has(> .badge)) > :last-child { grid-row: 1; }
}

/* ---------- 5. Dateien: Karten ---------- */
/* Die Dateikarte ist Inhalt wie jede Karte: deckend, ohne Haarlinie, die Kante macht der
   Schatten; überfahren wird der Schatten tiefer, die Karte bleibt liegen. Sie ist eine
   deckende Fläche und stellt deshalb die Stufen der Karte her (Teil 00, Abschnitt 4).
   Nur auf der Seite Dateien, erkannt an ihrem Filterformular (.form-grid): dieselbe Karte
   steht in Projekten und im Kundenbereich, die anderen Teilen gehören. */
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable {
  --text-muted: var(--tinte-2); --text-subtle: var(--tinte-3); --kante: var(--kante-fest);
  --knopf: var(--knopf-fest); --knopf-schatten: 0 0 0 0 transparent; --focus: var(--accent-text);
  --success: var(--success-fest); --warning: var(--warning-fest); --danger: var(--danger-fest); --info: var(--info-fest);
  border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable:hover { border-color: transparent; box-shadow: var(--shadow); }
/* Ohne Vorschaubild: das Dateisymbol liegt als Blatt auf der Fläche statt allein im Grau. */
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable__media { background: var(--surface-2); }
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable__media > svg {
  width: 3.5rem; height: 3.5rem; padding: 1rem; border-radius: var(--radius-sm);
  background: var(--glass-tint); color: var(--text-muted); box-shadow: var(--pille-schatten);
}
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable__body { gap: .375rem; padding: 1rem 1.25rem 1.125rem; }
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable__type { color: var(--text-muted); }
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable__body > .font-semibold { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -.012em; line-height: 1.3; }
/* Symbol und Text in einer Zeile: der Reset macht jedes svg zum Block, so stand das Symbol
   des Projekts (und das der Downloads) allein über seinem Text. */
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable__body > a.text-sm {
  display: inline-flex; align-items: center; gap: .375rem; align-self: flex-start; max-width: 100%;
  color: var(--text-muted); text-decoration: none;
}
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable__body > a.text-sm:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable__body > a.text-sm svg, .page:has(form.form-grid[action$="/app/dateien"]) .deliverable .row > .text-xs svg { width: 15px; height: 15px; flex: none; }
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable .row > .text-xs { display: inline-flex; align-items: center; gap: .25rem; font-variant-numeric: tabular-nums; }
/* Die Knöpfe stehen in jeder Karte einer Reihe auf derselben Höhe: unten. */
.page:has(form.form-grid[action$="/app/dateien"]) .deliverable__body > .row:last-child { margin-top: auto; padding-top: .5rem; margin-left: -.5rem; }

/* ---------- 6. Dateien: Filter und Kennzahlen ---------- */
/* Breit passen Suche und drei Auswahlen in EINE Zeile; so steht die erste Datei eine Zeile höher. */
@media (min-width: 1280px) {
  form.form-grid[action$="/app/dateien"] { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
  form.form-grid[action$="/app/dateien"] > .span-2 { grid-column: auto; }
}
/* Am Telefon stehen die zwei Zahlen nebeneinander statt als zwei volle Karten übereinander. */
@media (max-width: 700px) {
  .grid--2:has(+ .card form.form-grid[action$="/app/dateien"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .grid--2:has(+ .card form.form-grid[action$="/app/dateien"]) .stat { padding: .875rem 1rem 1rem; }
  .grid--2:has(+ .card form.form-grid[action$="/app/dateien"]) .stat__value { font-size: 1.5rem; }
}

/* ---------- 7. Dateien: Hochladen und Bearbeiten ---------- */
/* Die Ablagefläche ist ein Bedienelement (ein Label um das Dateifeld): gefüllt wie ein Feld,
   ihre gestrichelte Kante hält 3:1. Überfahren und beim Ziehen trägt sie die Marke.
   Nur im Dialog der Seite Dateien (.modal): die Aufgabe schickt ihr Formular an dieselbe
   Adresse, zeigt es aber offen – Ablage und Dateiliste dort gehören Teil 40. */
.modal form[action$="/app/dateien"] .dropzone { border: 1.5px dashed var(--kante); border-radius: var(--radius); background: var(--fuellung); }
.modal form[action$="/app/dateien"] .dropzone:hover, .modal form[action$="/app/dateien"] .dropzone.is-dragging { border-color: var(--accent-text); background: var(--accent-soft); }
.modal form[action$="/app/dateien"] .dropzone svg { color: var(--text-muted); }
.modal form[action$="/app/dateien"] .dropzone:hover svg, .modal form[action$="/app/dateien"] .dropzone.is-dragging svg { color: var(--accent-text); }
.modal form[action$="/app/dateien"] .file-item { border-color: transparent; border-radius: var(--radius-sm); background: var(--fuellung); }
.modal form[action$="/app/dateien"] .file-item:hover { border-color: transparent; }
.modal form[action$="/app/dateien"] .file-item__icon { background: var(--surface); box-shadow: var(--shadow-xs); }
/* Schalter mit zweizeiliger Beschriftung: der Knauf hing am Label (top: 3px), der Schalter
   stand mittig – der Knauf ragte oben aus der Schiene. Am Feld verankert steht er richtig;
   der Schalter steht oben neben der ersten Zeile. */
.modal form[action*="/app/dateien"] .switch { align-items: flex-start; }
.modal form[action*="/app/dateien"] .switch input { position: relative; flex: none; }
.modal form[action*="/app/dateien"] .switch .check__text { padding-top: .1875rem; }

/* ---------- 8. Telefon ---------- */
@media (max-width: 1023px) {
  .ueb-werkzeug__knopf { width: 2.75rem; height: 2.75rem; }
  .page:has(form.form-grid[action$="/app/dateien"]) .deliverable__body > a.text-sm { padding-block: .75rem; margin-block: -.75rem; }
  .page:has(form.form-grid[action$="/app/dateien"]) .deliverable__body > .row:last-child .btn--sm { min-height: 2.75rem; min-width: 2.75rem; }
}
@media (max-width: 640px) {
  /* Die Werkzeugpille wird dicht: der Name rückt, die vier Knöpfe bleiben 44 px. */
  .dash.is-anpassen .ueb-werkzeug { padding-left: .625rem; }
  .ueb-leiste { padding: .875rem 1rem; }
  .ueb-leiste__knoepfe { width: 100%; }
  .ueb-leiste__knoepfe > .btn { flex: 1; min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ueb-werkzeug__knopf, .ueb-chip, .page:has(form.form-grid[action$="/app/dateien"]) .deliverable { transition: none; }
}

/* ---------- 1.37.0: Gemeinsames Kennzahlenband und matte Arbeitsflächen ----------
   Die vier Kennzahlen behalten Daten und Linkziele. Eine gemeinsame Fläche
   ersetzt die vier Farbkörper. Das Material stammt aus Teil 95, persönliche
   Deckkraft und solide Rückfälle wirken dadurch auf alle Bereiche gleich. */
.page--uebersicht {
  --ueb-rand: 1.375rem; --ueb-abstand: 1.25rem; --ueb-radius: 16px;
  --ueb-schrift: var(--font-sans);
  --ueb-kartenkante: var(--workplace-border, var(--border-strong));
  --ueb-grau-stark: var(--accent-text);
  --ueb-grau-leicht: color-mix(in srgb, var(--accent-text) 22%, var(--surface));
}
.page--uebersicht .ueb-kopf { align-items: center; gap: 1rem 1.5rem; margin-bottom: 1.375rem; }
.page--uebersicht .ueb-datum {
  margin-bottom: .375rem; font-size: clamp(1.75rem, 1.45rem + .7vw, 2.125rem);
  font-weight: 500; line-height: 1.18; letter-spacing: -.045em; word-spacing: normal;
}
.page--uebersicht .ueb-kopf__datum { margin: .375rem 0 .5rem; color: var(--text-muted); font-size: var(--fs-sm); }
.page--uebersicht .ueb-lage { font-size: var(--fs-sm); gap: .25rem 1rem; }
.page--uebersicht .ueb-kopf__aktionen > .btn--quiet {
  --btn-bg: color-mix(in srgb, var(--surface) 38%, transparent);
  box-shadow: inset 0 0 0 1px var(--workplace-border, var(--border-strong));
}
.page--uebersicht .ueb-band {
  margin: 0 0 var(--ueb-abstand); padding: 1.25rem 0; overflow: hidden;
  border: 1px solid var(--workplace-edge, var(--border));
  border-radius: var(--ueb-radius); background: var(--workplace-surface, var(--surface));
  box-shadow: var(--workplace-shadow, none);
  -webkit-backdrop-filter: var(--workplace-blur, none); backdrop-filter: var(--workplace-blur, none);
}
.page--uebersicht .ueb-band__spur {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; padding: 0; margin: 0;
}
.page--uebersicht .ueb-kz {
  --focus: var(--fokus-frei);
  min-width: 0; gap: .5rem; padding: 0 1.5rem;
  border: 0; border-radius: 0; color: var(--text);
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.page--uebersicht .ueb-kz + .ueb-kz { border-left: 1px solid var(--workplace-border, var(--border)); }
.page--uebersicht .ueb-kz:hover { background: var(--workplace-hover, var(--ueb-hover)); }
.page--uebersicht .ueb-kz__label { padding-right: 0; color: var(--tinte-frei); font-size: var(--fs-sm); line-height: 1.45; font-weight: 480; }
.page--uebersicht .ueb-kz__wert {
  margin-top: 0; font-size: clamp(1.625rem, 1.25rem + 1vw, 2rem); font-weight: 500;
  color: var(--text); letter-spacing: -.04em; line-height: 1.15;
  white-space: normal; overflow-wrap: anywhere;
}
.page--uebersicht .ueb-kz__meta { margin-top: auto; color: var(--tinte-frei); font-size: var(--fs-xs); line-height: 1.5; }
.page--uebersicht .ueb-kz__meta--plus { color: var(--success-frei); }
.page--uebersicht .ueb-kz__meta--minus,
.page--uebersicht .ueb-kz__warn { color: var(--danger-frei); }
.page--uebersicht .ueb-kz--umsatz .ueb-kz__linie { position: static; width: 100%; max-width: 6.5rem; height: 1rem; margin: 0; }
.page--uebersicht .ueb-kz__linie polyline { stroke: var(--tinte-frei); }
.page--uebersicht .ueb-kz__linie .ueb-kz__punkt { stroke: var(--workplace-accent-ink, var(--accent-text)); }
.page--uebersicht .ueb-kz:focus-visible::after { inset: 3px; border-color: var(--focus); border-radius: 8px; }

/* Kartenüberschriften stehen auf derselben Fläche wie ihre Daten. Die ruhige
   Trennlinie gliedert die Liste, ohne einen zusätzlichen farbigen Kopfkasten. */
.page--uebersicht .ueb-karte {
  border: 1px solid var(--workplace-edge, var(--border)); border-radius: var(--ueb-radius);
  background: var(--workplace-surface, var(--surface)); box-shadow: var(--workplace-shadow, none);
  -webkit-backdrop-filter: var(--workplace-blur, none); backdrop-filter: var(--workplace-blur, none);
  --text-muted: var(--tinte-frei); --text-subtle: var(--tinte-frei);
  --focus: var(--fokus-frei);
  --success: var(--success-frei); --warning: var(--warning-frei);
  --danger: var(--danger-frei); --info: var(--info-frei);
}
.page--uebersicht .ueb-karte__kopf {
  min-height: 3.75rem; padding: 1rem var(--ueb-rand) .75rem; gap: .625rem 1rem;
  background: transparent; border-bottom: 0; border-radius: 0;
}
.page--uebersicht .ueb-karte__titel { font-size: 1.0625rem; line-height: 1.35; font-weight: 550; letter-spacing: -.025em; }
.page--uebersicht .ueb-karte--heute { border-color: var(--workplace-edge, var(--border)); }
.page--uebersicht .ueb-karte--heute .ueb-karte__kopf { background: transparent; }
.page--uebersicht .ueb-karte--heute .ueb-karte__titel { font-size: 1.125rem; }
.page--uebersicht .ueb-karte--offen { padding: 0 var(--ueb-rand) .625rem; box-shadow: var(--workplace-shadow, none); }
html[data-theme="dark"] .page--uebersicht .ueb-karte--offen { box-shadow: var(--workplace-shadow, none); }
.page--uebersicht .ueb-karte--offen > .ueb-karte__kopf { margin-inline: calc(-1 * var(--ueb-rand)); padding-inline: var(--ueb-rand); }
.page--uebersicht .ueb-karte--offen > .ueb-leer { padding-block: .5rem .75rem; }
.page--uebersicht .ueb-leer { font-size: var(--fs-sm); line-height: 1.55; }
.page--uebersicht .ueb-zeile { padding-block: .8125rem; gap: .75rem; }
.page--uebersicht .ueb-zeile__titel { font-weight: 520; }
.page--uebersicht .ueb-zeile__unter { margin-top: .1875rem; line-height: 1.5; }
.page--uebersicht .ueb-zeile__betrag { letter-spacing: -.015em; font-weight: 550; }
.page--uebersicht .ueb-unterkopf { font-weight: 550; letter-spacing: -.01em; }
.page--uebersicht .ueb-mehr { min-height: 2.75rem; padding: .5rem .625rem; border-radius: 8px; color: var(--workplace-accent-ink, var(--accent-text)); }
.page--uebersicht .ueb-mehr:hover { background: var(--workplace-hover, var(--ueb-hover)); }
.page--uebersicht .ueb-zaehler { background: transparent; color: var(--text); font-variant-numeric: tabular-nums; }
.page--uebersicht .ueb-rang__schiene { background: var(--workplace-border, var(--border)); }
.page--uebersicht .ueb-rang__schiene > span { background: var(--workplace-accent-ink, var(--accent-text)); }
.page--uebersicht .ueb-diagramm__wert { font-weight: 520; letter-spacing: -.03em; }
.page--uebersicht .ueb-diagramm__raster { stroke: var(--workplace-border, var(--border-strong)); }
.page--uebersicht .ueb-liste > li + li { border-top-color: var(--workplace-border, var(--border)); }
.page--uebersicht .ueb-heute__spalte + .ueb-heute__spalte { border-color: var(--workplace-border, var(--border)); }

@media (min-width: 1200px) {
  .page--uebersicht .ueb-raster { grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 1fr); }
}
@media (max-width: 900px) {
  .page--uebersicht .ueb-band { padding-block: 1.125rem; }
  .page--uebersicht .ueb-band__spur { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.125rem; }
  .page--uebersicht .ueb-kz:nth-child(3) { border-left: 0; }
  .page--uebersicht .ueb-kz:nth-child(n+3) { padding-top: 1.125rem; border-top: 1px solid var(--workplace-border, var(--border)); }
}
@media (max-width: 640px) {
  .page--uebersicht { --ueb-rand: 1rem; --ueb-abstand: 1rem; --ueb-radius: 14px; }
  .page--uebersicht .ueb-kopf { gap: .875rem; margin-bottom: 1.125rem; }
  .page--uebersicht .ueb-kopf__text { flex-basis: 100%; }
  .page--uebersicht .ueb-kopf__aktionen { width: 100%; }
  .page--uebersicht .ueb-kopf__aktionen > .btn,
  .page--uebersicht .ueb-kopf__aktionen > .dropdown { flex: 1 1 10rem; min-width: min(100%, 10rem); }
  .page--uebersicht .ueb-kopf__aktionen > .dropdown > .btn { width: 100%; }
  .page--uebersicht .ueb-lage { gap: .125rem .75rem; }
  .page--uebersicht .ueb-lage__punkt { min-height: 2.75rem; align-items: center; }
  .page--uebersicht .ueb-band__spur {
    grid-auto-flow: row; grid-auto-columns: auto; overflow: visible;
    scroll-snap-type: none;
  }
  .page--uebersicht .ueb-kz { padding-inline: 1rem; gap: .5rem; }
  .page--uebersicht .ueb-kz__wert { font-size: clamp(1.5rem, 6.5vw, 1.875rem); }
  .page--uebersicht .ueb-kz__meta { line-height: 1.45; }
  .page--uebersicht .ueb-karte__kopf { flex-wrap: wrap; gap: .25rem .75rem; }
  .page--uebersicht .ueb-karte__kopf > .ueb-karte__kopftext,
  .page--uebersicht .ueb-karte__kopf > .ueb-karte__titel { flex: 1 1 12rem; min-width: min(100%, 12rem); }
  .page--uebersicht .ueb-karte__kopf > .ueb-mehr { margin-left: auto; }
}
/* Die Schwelle folgt der tatsächlichen Kartenbreite und wächst mit der Schrift.
   Bei großen Beträgen und 200 % Schrift wird das Band zu einer lesbaren Liste. */
@container (max-width: 22rem) {
  .page--uebersicht .ueb-band__spur { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page--uebersicht .ueb-kz { padding-block: 1rem; }
  .page--uebersicht .ueb-kz + .ueb-kz { border-left: 0; border-top: 1px solid var(--workplace-border, var(--border)); }
}
@media (prefers-reduced-motion: reduce) { .page--uebersicht .ueb-kz { transition: none; } }

/* ===== Teil 20-belege ===== */
/* =========================================================================
   newways.suite – Gestaltung „Glas“ – Teil 20: Belege und Berichte
   Belegliste, Beleg-Akte mit Dialogen, Belegeditor, Neuer Beleg, Senden;
   Berichte (Ausgangsbuch, Offene Posten, Projekte), GoBD, Verifactu, Daten.
   Nur, was die Grundlage (Teil 00) nicht selbst trifft. Das Markup hat keine
   Seitenklassen; jede Regel hängt deshalb an einem Merkmal ihrer Seite:
     Beleg-Akte   body[data-kontext-art="beleg"] (auch die Dialoge, sie hängen am body)
     Editor       #doc-form            Senden   form[action*="/app/belege/"][action$="/senden"]
     Berichte     .page:has(> .breadcrumb > a[href$="/app/berichte"])
     GoBD         .page:has(form[action$="/app/gobd/datev"])
     Verifactu    .table:has(td[data-label="Kette"])
     Daten        .page:has(form[action$="/app/daten/hochladen"])
   Farben nur aus Tokens; die Marke nur per color-mix() aus --accent/--accent-text.
   ========================================================================= */

/* ---------- 1. Beleg-Akte: das Blatt ---------- */
/* Positionen: die Bezeichnung gibt Platz her. Mit Rabattspalte ragte die Tabelle bei 1440 px
   8 px über die Karte, und „Betrag“ lag hinter dem Rollschatten (gemessen: 686 > 678). */
body[data-kontext-art="beleg"] .card__body .table-wrap > .table--responsive { --cell-px: .625rem; }
body[data-kontext-art="beleg"] .card__body .table--responsive td.is-primary {
  min-width: 8.5rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere;
}
/* Zwischenüberschrift im Blatt: ein Abschnittskopf, kein grauer Nachsatz. */
body[data-kontext-art="beleg"] .table--responsive td[colspan] > .eyebrow:first-child {
  display: block; padding-top: .375rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: -.005em; color: var(--text);
}
/* Summenblock: Bezeichnung und Betrag bleiben in EINER Zeile. Am Telefon brach
   „Umsatzsteuer 21 % auf 2.660,00 €“ um und der Betrag rutschte linksbündig darunter. */
body[data-kontext-art="beleg"] .card__footer > .stack > .row--between {
  flex-wrap: nowrap; align-items: baseline; gap: var(--space-4);
}
body[data-kontext-art="beleg"] .card__footer > .stack > .row--between > :first-child { min-width: 0; text-wrap: pretty; } /* kein „€“ allein in Zeile 2 */
body[data-kontext-art="beleg"] .card__footer > .stack > .row--between > .num { flex: none; }
body[data-kontext-art="beleg"] .card__footer > .stack > .border-t { border-top-color: var(--border-strong); }

/* ---------- 2. Beleg-Akte: Seitenspalte ---------- */
/* Statuskarte: die Knöpfe füllen ihre Zeile. In 288 px passten „Status ändern“ und
   „Zahlung erfassen“ nicht nebeneinander – es entstand eine Treppe ungleich langer Pillen. */
body[data-kontext-art="beleg"] .card__footer > .row:has(> .btn--sm) { gap: var(--space-2); }
body[data-kontext-art="beleg"] .card__footer > .row:has(> .btn--sm) > .btn { flex: 1 1 auto; justify-content: center; }
/* Der Bezahlt-Balken ist Fortschritt, keine Zierde: etwas kräftiger, mit Luft zu den Zahlen. */
body[data-kontext-art="beleg"] .card__body > .stack > .progress { height: 6px; margin-block: .25rem .375rem; }
/* Öffentlicher Link: die Adresse ist Maschinentext. */
body[data-kontext-art="beleg"] .card__body > .panel.umbruch { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.55; }

/* Nachweis der Beauftragung: ein nüchternes Protokoll mit Kante, der Kopf leicht getönt. */
body[data-kontext-art="beleg"] .proof { border: 0; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border-strong); }
body[data-kontext-art="beleg"] .proof__head { background: var(--fuellung); font-size: var(--fs-sm); }
body[data-kontext-art="beleg"] .proof__row { font-size: var(--fs-sm); }
body[data-kontext-art="beleg"] .proof__row dd.text-xs { font-family: var(--font-mono); font-size: var(--fs-xs); }
body[data-kontext-art="beleg"] .proof__text { border: 0; background: var(--fuellung); font-size: var(--fs-xs); }
/* In der Seitenspalte (unter 26 rem) Bezeichnung ÜBER Wert: nebeneinander blieben dem Wert
   45 px, Name, Browser und Prüfsumme brachen Zeichen für Zeichen. */
body[data-kontext-art="beleg"] .proof__body { container-type: inline-size; }
@container (max-width: 26rem) {
  body[data-kontext-art="beleg"] .proof__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body[data-kontext-art="beleg"] .proof__row + .proof__row { margin-top: .375rem; }
}
/* Die Unterschrift bleibt auf Weiß (Papier), auch im Dunkeln – sie ist dunkle Tinte ohne Grund. */
body[data-kontext-art="beleg"] img.sig-preview {
  display: block; max-width: 100%; height: auto; border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 0 0 1px var(--border);
}

/* ---------- 3. Dialoge der Akte, Neuer Beleg ---------- */
/* Schließen gehört an den rechten Rand des Kopfs; app.css reiht den Knopf direkt hinter den Titel. */
body[data-kontext-art="beleg"] .modal__header > .btn--icon:last-child { margin-left: auto; margin-right: -.375rem; }
/* Wahl als Fläche (Belegart, Umwandeln): die gewählte ist getönt und trägt den Ring der Marke
   wie ein gewählter Chip – vorher verriet nur der kleine Radioknopf die Wahl. Nur in der Akte
   und auf „Neuer Beleg“: .panel.check ist ein allgemeines Muster, andere Bereiche sollen es
   nicht ungefragt so erben. */
:is(body[data-kontext-art="beleg"], form[action$="/app/belege"]) .panel.check {
  /* app.css gibt .check 4 px Polster und keins zur Seite: auf der getönten Fläche saß der
     Radioknopf in der Rundung, der Ring lief durch ihn hindurch. */
  padding: .75rem 1rem; border-radius: var(--radius); background: var(--fuellung);
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast);
}
:is(body[data-kontext-art="beleg"], form[action$="/app/belege"]) .panel.check:hover { background: color-mix(in srgb, var(--text) 8%, var(--surface)); }
:is(body[data-kontext-art="beleg"], form[action$="/app/belege"]) .panel.check:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-text); }
:is(body[data-kontext-art="beleg"], form[action$="/app/belege"]) .panel.check:has(input:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--accent-text), 0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent); }
:is(body[data-kontext-art="beleg"], form[action$="/app/belege"]) .panel.check .ic { color: var(--text-muted); }
/* Der Statusdialog: jede Wahl eine Zeile von 44 px, die Abzeichen darin gleichmäßig. */
body[data-kontext-art="beleg"] .modal__body .check:has(> input[name="status"]) { min-height: 2.75rem; align-items: center; padding-block: .125rem; }

/* ---------- 4. Belegeditor ---------- */
/* Eine Position: Kopf (Nummer, Art, Bezeichnung, Werkzeuge), Beschreibung, Zahlen. */
#doc-form .item-row { container-type: inline-size; }
/* „Zwischenüberschrift“ stand in 9 und 11,25 rem abgeschnitten: der Pfeil rückt näher an den Rand. */
#doc-form .item-row__type { width: 12.25rem; padding-right: 2.125rem; background-position: right .625rem center; }
#doc-form .item-row__index { background: var(--fuellung); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
#doc-form .item-row--note { background: var(--surface-inset); }
#doc-form .item-row--note .item-row__index { background: var(--surface); }
/* Die Zahlen: drei Spalten (Menge, Einheit, Preis / Rabatt, Steuer, Summe), ab 34 rem Breite
   alle sechs in einer Zeile. Vorher brach die Summe per auto-fit unter „Menge“ um und stand
   rechtsbündig in der ersten Spalte. Die Summe steht immer in der letzten Spalte, auch
   wenn die Steuerspalte bei steuerfreien Belegen fehlt. */
#doc-form .item-row__numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
@container (min-width: 34rem) {
  #doc-form .item-row__numbers {
    grid-template-columns: minmax(3.75rem, .8fr) minmax(4.5rem, 1fr) minmax(5.25rem, 1.15fr) minmax(3.75rem, .8fr) minmax(4.75rem, 1fr) minmax(6.5rem, 1.1fr);
  }
}
#doc-form .item-row__sum {
  grid-column: -2 / -1; min-width: 0; gap: .125rem;
  padding-bottom: calc((var(--control-h-sm) - 1.375rem) / 2);
}
#doc-form .item-row__sum strong {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 650; line-height: 1.3; letter-spacing: -.02em;
}
/* Summenkarte: der Gesamtbetrag in der Schrift der großen Zahlen, wie in der Akte. */
#doc-form .card__body > .stack > .border-t { border-top-color: var(--border-strong); }
#doc-form .card__body > .stack > .border-t > .num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -.03em; line-height: 1.1;
}
#doc-form .card__body > .stack > .row--between { flex-wrap: nowrap; }

/* ---------- 5. Per E-Mail senden ---------- */
/* Nur der Beleg: „…/senden“ allein träfe auch Exposé, Maklervertrag und Registrierung. */
/* Der Betreff wird gebildet, nicht getippt: er sieht aus wie ein gesperrtes Feld. */
form[action*="/app/belege/"][action$="/senden"] .field > .panel {
  display: flex; align-items: center; min-height: var(--control-h); padding: .5rem .9375rem;
  border-radius: var(--control-radius); background: var(--surface-2); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
/* Die Vorschau ist die E-Mail selbst: ein Blatt mit Kante auf der Karte. */
form[action*="/app/belege/"][action$="/senden"] .card__body > .panel {
  background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--border-strong); line-height: 1.55;
}
form[action*="/app/belege/"][action$="/senden"] .card__footer .link { color: inherit; }
/* Der Link zum Beleg ist eine lange Adresse ohne Leerzeichen: sie bricht, statt am Telefon
   256 px über die Karte zu ragen (gemessen 638 > 356). Unterstrichen, weil sie ein Link ist –
   wie „Signatur einrichten“, das ohne Linie im grauen Hinweis verschwand. */
form[action*="/app/belege/"][action$="/senden"] :is(.card__body > .panel, label .muted) a {
  overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--kante);
}

/* ---------- 6. Berichte: Übersicht ---------- */
/* Drei gleich hohe Karten, der Knopf unten bündig; das Symbol liegt in einer Kachel.
   Die Überschrift war 24 px groß und schob das Symbol von „Projektzusammenfassung“ aus der Karte. */
.grid--3:has(> .card a[href$="/app/berichte/ausgangsbuch"]) > .card > .card__body { display: flex; flex-direction: column; height: 100%; }
.grid--3:has(> .card a[href$="/app/berichte/ausgangsbuch"]) > .card h2 {
  min-width: 0; font-size: var(--fs-xl); letter-spacing: -.02em; overflow-wrap: anywhere;
}
.grid--3:has(> .card a[href$="/app/berichte/ausgangsbuch"]) > .card .row--nowrap > .subtle {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-sm); background: var(--fuellung); color: var(--text-muted);
}
.grid--3:has(> .card a[href$="/app/berichte/ausgangsbuch"]) > .card p { margin-bottom: var(--space-5); }
.grid--3:has(> .card a[href$="/app/berichte/ausgangsbuch"]) > .card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- 7. Berichte: Tabellen ---------- */
/* Viele Spalten, viele Zahlen: engere Zellen (die Randzellen bleiben am Kartenrand bündig). */
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .card .table--compact :is(th, td):not(:first-child):not(:last-child) { padding-inline: .625rem; }
/* Die Kundenspalte brach auf drei, vier Zeilen („Bodega / Ses / Talaies / S.L.“). */
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .table td:has(> a.link[href*="/app/kunden/"]) { min-width: 10rem; }
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .table td > a.link[href*="/app/kunden/"] + .text-xs { display: block; }
/* Wer nach rechts rollt, behält die Belegnummer: die erste Spalte bleibt stehen. Nur Kopf und
   Körper – die Summenzeile hat eine breite erste Zelle, die sonst die Summen verdeckte. */
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .table-wrap > .table > :is(thead, tbody) > tr > :first-child {
  position: sticky; left: 0; z-index: 1; background-color: var(--surface);
  box-shadow: inset -1px 0 0 var(--border);
}
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .table-wrap > .table > tbody > tr:hover > :first-child {
  background-color: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
/* Summenzeilen: ein eigener, leicht gefüllter Streifen mit kräftiger Linie darüber. */
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .table > tfoot td {
  background: var(--fuellung); border-top: 1px solid var(--border-strong); border-bottom: 0;
  padding-block: .75rem; white-space: nowrap;
}
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .table > tfoot td[colspan] { white-space: normal; }
/* Tabellen ohne Rollfläche in einer Rasterkarte (Phasen, Offen je Kunde): Köpfe dürfen umbrechen,
   sonst hielt „Fortschritt“ die Tabelle breiter als die Karte. */
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .card > .table th { white-space: normal; hyphens: auto; -webkit-hyphens: auto; }
/* Listen im Projektbericht (Aufgaben, Termine, Ereignisse): Zeilen mit Luft und Haarlinie,
   das Datum steht über dem Eintrag statt mitten im Fließtext. */
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .card__body > ul.list > li:not(.list__item) { padding-block: .5rem; line-height: 1.45; }
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .card__body > ul.list > li:not(.list__item) + li { border-top: 1px solid var(--border); }
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .card__body > ul.list > li > .nowrap.subtle:first-child {
  display: block; font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.page:has(> .breadcrumb > a[href$="/app/berichte"]) .card__body > ul.list > li.row--between { flex-wrap: nowrap; align-items: baseline; gap: var(--space-3); }

/* ---------- 8. GoBD ---------- */
/* Die Jahresauswahl ist ein <select class="input">: ohne .select trug sie den Pfeil des
   Systems und eckige Ecken. Hier sieht sie aus wie jede Auswahl der Grundlage. */
.page:has(form[action$="/app/gobd/datev"]) select.input {
  -webkit-appearance: none; appearance: none; padding-right: 2.5rem;
  background-image: var(--pfeil); background-repeat: no-repeat; background-position: right .875rem center; background-size: 16px;
}
/* Der Knopf neben dem Feld steht auf Höhe des Felds (Beschriftung 18 + 8 px darüber), nicht
   auf Höhe des Hinweises – und nur so breit wie seine Aufschrift. */
.page:has(form[action$="/app/gobd/datev"]) form.grid--end > .btn { align-self: start; justify-self: start; margin-top: 1.625rem; }
/* Die Verfahrensdokumentation: ein Dokument in der Karte, mit Überschriften in der Titelschrift. */
.verfahren { border-top-color: var(--border-strong); }
.verfahren h2 {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.02em;
  border-bottom: 1px solid var(--border-strong); padding-bottom: .5rem;
}
.verfahren h3 { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.verfahren th[scope="row"] { color: var(--text-muted); font-weight: 500; }
/* app.css setzt .88em – in der 13-px-Tabelle 11,4 px. Nie unter 12 px. */
.verfahren code { padding: .0625rem .3125rem; border-radius: 6px; background: var(--fuellung); font-size: max(.88em, 12px); }
.verfahren .vd__offen { border: 0; border-left: 3px solid var(--warning); border-radius: var(--radius-xs); }

/* ---------- 9. Verifactu ---------- */
/* Datensätze: Datum in einer Zeile, Hash und Verweis je eine eigene Zeile unter der Nummer. */
.table:has(td[data-label="Kette"]) td[data-label="Datum"] { white-space: nowrap; }
.table:has(td[data-label="Kette"]) td.is-primary > :is(.mono, a.text-xs) { display: block; width: fit-content; }
.table:has(td[data-label="Kette"]) td[data-label="Kette"] > .text-xs { display: block; }
/* Ein Datensatz: Feldname in Maschinenschrift unter der Bedeutung, das XML als Codeblock. */
.page:has(> .page-head a.btn[href$="/app/verifactu"]) pre.panel {
  background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--border-strong);
  font-size: var(--fs-xs); line-height: 1.6; tab-size: 2;
}

/* ---------- 10. Daten, aufklappbare Hinweise ---------- */
/* Ausklapper („Welche Listen?“, „Angezeigten Text ansehen“): ein Winkel der Grundlage statt des
   schwarzen Dreiecks des Browsers; er dreht sich beim Öffnen. */
:is(.page:has(form[action$="/app/daten/hochladen"]), body[data-kontext-art="beleg"] .proof) summary {
  display: inline-flex; align-items: center; gap: .375rem; list-style: none; min-height: 1.75rem;
}
:is(.page:has(form[action$="/app/daten/hochladen"]), body[data-kontext-art="beleg"] .proof) summary::-webkit-details-marker { display: none; }
:is(.page:has(form[action$="/app/daten/hochladen"]), body[data-kontext-art="beleg"] .proof) summary::before {
  content: ""; flex: none; width: 1rem; height: 1rem; background: var(--pfeil) center / 1rem no-repeat;
  transform: rotate(-90deg); transition: transform var(--dur-fast);
}
:is(.page:has(form[action$="/app/daten/hochladen"]), body[data-kontext-art="beleg"] .proof) details[open] > summary::before { transform: none; }
/* „Welche Spalten werden erkannt?“: zwei Spalten, die zweite eine Aufzählung – sie bricht um. app.css
   gibt jeder dichten Tabelle 34 rem Mindestbreite; am Telefon stand „Firmenname, Unternehmen, Con…“
   angeschnitten, der Rest lag rechts im Rollbereich (544 > 320 px). */
.page:has(form[action$="/app/daten/hochladen"]) details .table-wrap > .table { min-width: 0; }
.page:has(form[action$="/app/daten/hochladen"]) details .table td:first-child { white-space: nowrap; }
/* Einzelne Listen: der Name trägt die Zeile, der Knopf rechts ist still. */
.page:has(form[action$="/app/daten/hochladen"]) .card > .list > .list__item { min-height: 3.25rem; }
/* Import-Vorschau: die Zuordnung ist eine lange Spalte von vierzehn Auswahlen – dichter gesetzt. */
.page:has(a.breadcrumb[href$="/app/daten"]) .card__body.stack { gap: var(--space-3); }
.page:has(a.breadcrumb[href$="/app/daten"]) .card__body.stack > .field { gap: var(--space-1); }
/* Die drei Zähler der Vorschau (angelegt, ergänzt, übersprungen) bleiben am Telefon eine Reihe:
   untereinander nahmen drei Karten mit je einer Ziffer 330 px, bevor die erste Zeile kam. */
@media (max-width: 640px) {
  .page:has(a.breadcrumb[href$="/app/daten"]) .grid--3:has(> .card > .stat) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .page:has(a.breadcrumb[href$="/app/daten"]) .grid--3 > .card > .stat { height: 100%; gap: .375rem; padding: .75rem .875rem .875rem; }
  .page:has(a.breadcrumb[href$="/app/daten"]) .grid--3 > .card > .stat .stat__label { font-size: var(--fs-xs); line-height: 1.3; }
  .page:has(a.breadcrumb[href$="/app/daten"]) .grid--3 > .card > .stat .row > .subtle { display: none; } /* das Symbol nähme der Bezeichnung die Breite */
  .page:has(a.breadcrumb[href$="/app/daten"]) .grid--3 > .card > .stat .stat__value { margin-top: auto; }
}

/* ---------- 11. Telefon ---------- */
@media (max-width: 780px) {
  /* Positionen als Karten: die Nummer steht klein über der Bezeichnung statt als eigene Zeile „Pos. 1“. */
  body[data-kontext-art="beleg"] .table--responsive td.shrink[data-label="Pos."] {
    gap: .25rem; padding-block: 0 .125rem; font-size: var(--fs-xs); color: var(--text-subtle);
  }
  body[data-kontext-art="beleg"] .table--responsive td.shrink[data-label="Pos."]::before { min-width: 0; font-size: var(--fs-xs); }
  /* Am Telefon ist die Schrift 16 px: die Zeilenart füllt die Zeile neben der Nummer,
     die Bezeichnung steht ohnehin darunter. */
  #doc-form .item-row__type { flex: 1 1 12.25rem; width: auto; }
  /* Tabellen ohne Rollfläche (Phasen, Offen je Kunde) rollen selbst: am Telefon war die Phasen-
     tabelle 465 px breit in 356 px Karte, Aufgaben und Fortschritt fehlten. */
  .page:has(> .breadcrumb > a[href$="/app/berichte"]) .card > .table { display: block; overflow-x: auto; overscroll-behavior-x: contain; }
  .page:has(> .breadcrumb > a[href$="/app/berichte"]) .card > .table th { white-space: nowrap; }  /* wer rollt, bricht nicht um */
  /* Verifactu: die Kettenzelle und die Nummer tragen Hash und Verweis untereinander. */
  .table:has(td[data-label="Kette"]) td.is-primary > :is(.mono, a.text-xs) { margin-top: .125rem; }
  /* Der Endpunkt ist eine Adresse in Maschinenschrift: sie bricht Zeichen für Zeichen. Nach
     Wortregeln stand der Bindestrich aus „TIKE-CONT“ allein in einer Zeile. */
  .page:has(a[href$="/app/verifactu/erklaerung"]) .pair__value.mono { word-break: break-all; }
  /* Tippziele, gemessen bei 390 px: Belegnummer in der Liste 18 px, Nummer eines Verifactu-
     Datensatzes 42 px, Nummern und Kunden in den Berichten 17 px, Kunde im Projektbericht 18 px.
     Die Verweise sind inline – das Polster vergrößert die Fläche auf 44 px, ohne die Zeile zu
     verschieben. Die Belegnummer steht so auch in Belegtabellen anderer Seiten; dort wächst nur
     die Fläche. */
  .table--responsive td.is-primary > div > a.link[href*="/app/belege/"]:first-child,
  .table:has(td[data-label="Kette"]) td.is-primary > a.link:first-child,
  .page:has(> .breadcrumb > a[href$="/app/berichte"]) :is(.table td, .card__body .font-medium) > a.link {
    padding-block: .875rem;
  }
  /* Ausklapper („Angezeigten Text ansehen“, „Welche Listen?“): app.css gibt 12 px Polster, das
     ergab 43 px. */
  :is(.page:has(form[action$="/app/daten/hochladen"]), body[data-kontext-art="beleg"] .proof) summary { min-height: 2.75rem; }
  /* „← Daten“ über der Import-Vorschau ist selbst die .breadcrumb (36 px): 8 px mehr Fläche, der
     Gegenrand hält die Überschrift an ihrem Platz. */
  .page-head a.breadcrumb[href$="/app/daten"] { min-height: 2.75rem; margin-block: -.25rem calc(var(--space-2) - .25rem); }
}
@media (max-width: 1023px) {
  /* Der Knopf unter dem Feld: volle Breite, kein Versatz. */
  .page:has(form[action$="/app/gobd/datev"]) form.grid--end > .btn { justify-self: stretch; margin-top: 0; }
  /* Die Summe einer Position ist am Telefon kein Tippziel: sie bleibt so hoch wie ihr Feld. */
  #doc-form .item-row__sum { padding-bottom: calc((var(--control-h-sm) - 1.375rem) / 2); }
}

/* ---------- 12. Bewegung ---------- */
/* Dieselben Wähler wie oben: das kürzere „:is(.page, .proof) summary::before“ wog weniger als die
   Regel mit :has() und hob die Drehung nie auf. */
@media (prefers-reduced-motion: reduce) {
  :is(body[data-kontext-art="beleg"], form[action$="/app/belege"]) .panel.check,
  :is(.page:has(form[action$="/app/daten/hochladen"]), body[data-kontext-art="beleg"] .proof) summary::before { transition: none; }
}

/* ---------- 1.26.0: Beleginhalt und Zustände klar auseinanderhalten ---------- */
.page--belegakte .page-head { align-items: flex-start; }
.page--belegakte .page-head h1 { overflow-wrap: anywhere; }
.page--belegakte .page-head__actions { gap: .5rem; }
.page--belegakte .beleg-aufbau { align-items: start; }
.page--belegakte .beleg-blatt { border: 1px solid var(--border-strong); box-shadow: none; }
.page--belegakte .beleg-blatt > .card__body { padding: clamp(1rem, 2vw, 2rem); }
.page--belegakte .beleg-seite > .card { border: 1px solid var(--border); box-shadow: none; }
.page--belegakte .beleg-stand__gruppe + .beleg-stand__gruppe { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.page--belegakte .beleg-stand__titel { margin: 0 0 .25rem; color: var(--text-muted); font: 500 var(--fs-sm)/1.4 var(--font-sans); }
.page--belegakte .beleg-stand__offen { align-items: baseline; }
.page--belegakte .beleg-stand__offen > .num { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -.025em; line-height: 1.2; overflow-wrap: anywhere; }
.page--belegakte .beleg-stand__status { margin-bottom: .375rem; }
.page--belegakte .beleg-stand__gruppe > .row { flex-wrap: nowrap; gap: .75rem; align-items: baseline; }
.page--belegakte .beleg-stand__gruppe > .row > :last-child { min-width: 0; text-align: right; }
.page--belegakte .beleg-stand__gruppe > .row > .text-sm { overflow-wrap: anywhere; }
.page--belegakte .beleg-stand .card__footer .btn { min-height: 2.75rem; }
.page--belegliste .kennzahlen { gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.page--belegliste .kennzahlen > .card { border: 0; border-radius: 0; box-shadow: none; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.page--belegliste .kennzahlen > .card + .card { border-left: 1px solid var(--border); }
.page--belegliste .kennzahlen .stat { padding: .875rem 1rem; }
.page--belegliste .kennzahlen .stat__value { font-size: 1.5rem; line-height: 1.2; }
.page--belegliste .kennzahlen .stat > .row > .subtle { display: none; }
@media (max-width: 780px) {
  .page--belegliste .grid.kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; padding: 0; margin-bottom: 1.25rem; }
  .page--belegliste .kennzahlen > .card:nth-child(3) { border-left: 0; }
  .page--belegliste .kennzahlen > .card:nth-child(n+3) { border-top: 1px solid var(--border); }
  .page--belegakte .page-head__actions { width: 100%; }
  .page--belegakte .page-head__actions > .btn, .page--belegakte .page-head__actions > form { flex: 1 1 auto; }
  .page--belegakte .page-head__actions > form > .btn { width: 100%; }
  .page--belegakte .beleg-blatt > .card__body { padding-inline: 1rem; }
}

/* ===== Teil 25-bank ===== */
/* Bankabgleich: Glas für die Umsatzübersicht, deckende Flächen für Belege und Freigaben. */
.bank-workspace .bank-transaction {
  --text-muted: var(--tinte-frei);
  --text-subtle: var(--text-muted);
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--glas-rahmen), var(--glass-shadow);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .bank-workspace .bank-transaction {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}
.bank-workspace .bank-direction { background: var(--akzent-flaeche, var(--surface-2)); color: var(--akzent-auf, var(--text)); }
.bank-workspace .bank-selected { box-shadow: 0 0 0 1px var(--accent-text); }
.bank-workspace .bank-match--selected .bank-document-icon { background: var(--akzent-flaeche, var(--surface-2)); color: var(--akzent-auf, var(--text)); }
.bank-workspace .bank-comparison { background: var(--surface-inset); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .bank-workspace .bank-transaction { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .bank-workspace .bank-transaction { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Die Umsatzliste erhält den Glasrahmen; Prüfinhalte bleiben auf ruhigen Flächen. */
.bank-desk .bank-queue{box-shadow:var(--glas-rahmen),var(--glass-shadow)}
.bank-desk .bank-queue-row.is-selected{background:var(--surface-2);box-shadow:inset 3px 0 var(--accent-text)}
.bank-desk .bank-queue-row.is-selected .bank-queue-link{color:var(--text)}

/* ===== Teil 30-kunden-projekte ===== */
/* =========================================================================
   newways.suite – Gestaltung „Glas“ – Teil 30: Kunden und Projekte
   Kundenliste, Kundenformular, Kundenakte mit Reitern und Dialogen; Projektliste,
   Projektformular, Projektakte mit Reitern. Nur was die Grundlage (Teil 00) nicht
   von selbst trifft. Die Regeln hängen an Merkmalen, die es nur auf diesen Seiten
   gibt, damit sie keine andere Seite verändern (Aufgaben, Kundenbereich, Verträge
   benutzen dieselben Bausteine):
     Kundenakte   die linke Spalte mit dem Reiter-Zustand: .split--main > .stack[x-data^="{ tab"]
     Projektakte  body[data-kontext-art="projekt"] .main (der Kundenbereich hat kein .main)
     Listen       die Seite mit dem Suchformular: .page:has(> .card form[method="get"][action$="/app/kunden"])
   ========================================================================= */

/* ---------- 1. Kundenakte: Kopf ---------- */
/* Bildmarke und Name bleiben nebeneinander; ein langer Firmenname bricht um, statt
   die Bildmarke über sich zu schieben. */
[data-kontext-art="kunde"] .page-head__text > .row:has(> .avatar--xl) { flex-wrap: nowrap; align-items: flex-start; }
[data-kontext-art="kunde"] .page-head__text > .row:has(> .avatar--xl) > div { min-width: 0; }
[data-kontext-art="kunde"] .page-head__text > .row:has(> .avatar--xl) h1 { overflow-wrap: anywhere; }
[data-kontext-art="kunde"] .page-head__text > .row > .avatar--xl { margin-top: .125rem; }

/* ---------- 2. Akten: Karten mit Listen und leeren Zuständen ---------- */
/* Eine Liste allein im Kartenkörper: sie bringt ihr eigenes Polster mit. Doppelt
   gepolstert stand der erste Beleg 53 px unter dem Kartenkopf. */
:is(.split--main > .stack[x-data^="{ tab"], [data-kontext-art="projekt"] .main)
  .card__body:has(> .list:only-child) { padding-block: .375rem; }
/* Leer in einer Karte: ein Hinweis, keine Bühne. 220 px je leerer Karte machten
   die Akte eines neuen Interessenten fünf Bildschirme lang. */
:is(.split--main > .stack[x-data^="{ tab"], [data-kontext-art="projekt"] .main)
  .card__body > .empty { padding-block: 1rem .75rem; gap: .375rem; }
:is(.split--main > .stack[x-data^="{ tab"], [data-kontext-art="projekt"] .main)
  .card__body > .empty .empty__icon { width: 44px; height: 44px; margin-bottom: .25rem; border-radius: var(--radius-sm); }
:is(.split--main > .stack[x-data^="{ tab"], [data-kontext-art="projekt"] .main)
  .card__body > .empty .empty__icon svg { width: 20px; height: 20px; }
/* Leer direkt auf dem Feld (Projektreiter ohne Karte): Inhalt liegt deckend. */
[data-kontext-art="projekt"] .main .page > .empty,
[data-kontext-art="projekt"] .main .page > [x-data] > .empty {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  --text-muted: var(--tinte-2); --text-subtle: var(--tinte-3);
}
/* Tabelle unmittelbar in der Karte: erste und letzte Spalte halten den Kartenrand. Die Akte ist die
   schmale Spalte neben den Stammdaten: 46 rem Mindestbreite (app.css) ließen die Belegtabelle bei
   1440 px um 10 px rollen – wie app.css es im Kartenkörper der Spalten tut: 30 rem. Nur als Tabelle;
   als Karten (Telefon) rückte das Polster die erste Zeile gegen die übrigen ein. */
@media (min-width: 781px) {
  :is(.split--main > .stack[x-data^="{ tab"], [data-kontext-art="projekt"] .main)
    .card > .table-wrap > .table :is(th, td):last-child { padding-right: var(--card-pad); }
  :is(.split--main > .stack[x-data^="{ tab"], [data-kontext-art="projekt"] .main)
    .card > .table-wrap > .table :is(th, td):first-child { padding-left: var(--card-pad); }
  .split--main > .stack[x-data^="{ tab"] .card > .table-wrap > .table { min-width: 30rem; }
}

/* Kartenkopf mit Vertragsknöpfen: am Rechner steht der kurze Titel neben den Knöpfen. */
@media (min-width: 1024px) { .split--main > .stack[x-data^="{ tab"] .mv-kopf > h2 { flex-basis: auto; } }

/* Suchprofil: „Suchkriterien“ und „Warum passt es?“ klappen auf. Fläche, Radius und Kopfhöhe
   kommen aus Teil 60 (.why überall). Zu ist die Fläche ein Knopf über die ganze Breite: seine
   Kante hält 3:1 wie die eines Felds (ohne sie 1,1:1 gegen die Karte). Offen ist sie eine Tafel
   mit Feldern – dort trennt die Haarlinie, sonst stünde Rahmen in Rahmen. */
.split--main > .stack[x-data^="{ tab"] .why { box-shadow: inset 0 0 0 1px var(--border-strong); }
.split--main > .stack[x-data^="{ tab"] .why:not([open]) { box-shadow: inset 0 0 0 1px var(--kante); }
.split--main > .stack[x-data^="{ tab"] .why > summary { border-radius: inherit; }
.split--main > .stack[x-data^="{ tab"] .why > summary:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }

/* Suchprofil: Häkchen in Rastern stehen dicht; der Kartenabstand (24 px) zwischen jeder
   Zeile machte aus 24 Merkmalen eine Seite. */
.split--main > .stack[x-data^="{ tab"] #suchprofil .field > .grid { row-gap: .125rem; column-gap: 1rem; }

/* Menü „Weitere Aktionen“: breit genug, dass ein Eintrag eine Zeile bleibt. */
[data-kontext-art="kunde"] .page-head__actions .dropdown__menu { width: max-content; max-width: min(21rem, calc(100vw - 2rem)); }

/* Dialoge (hängen am body): das Schließen steht rechts, auch wo der Titel nicht wächst. */
:is([data-kontext-art="kunde"], [data-kontext-art="projekt"]) .modal__header > .btn--icon:last-child { margin-left: auto; }

/* Verlauf: Symbolpunkte in der Marke getönt, die Linie leise. */
.split--main > .stack[x-data^="{ tab"] .timeline__dot {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-text);
}

/* ---------- 3. Projektakte ---------- */
/* Board und Aufgabenkarte gestaltet Teil 40 (Planung) für alle Seiten – hier stand eine zweite
   Fassung mit anderen Radien, Spaltenbreiten und einem doppelt gezeichneten Kundenstrich.
   Nur der Ring des Ablageziels weicht ab: er liegt auf Glas, dort trägt der Fokuston die 3:1
   (--accent-text hielt bei Koralle über Schwarz 2,9:1). */
[data-kontext-art="projekt"] .main .board__list.is-ziel { outline-color: var(--fokus-frei); }

/* Ergebnisse: Karten wie jede Karte – Schatten statt Haarlinie, beim Überfahren tiefer, nicht höher. */
[data-kontext-art="projekt"] .main .deliverable {
  border-color: transparent; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg);
}
[data-kontext-art="projekt"] .main .deliverable:hover { border-color: transparent; box-shadow: var(--shadow); }
[data-kontext-art="projekt"] .main .deliverable__media { background: var(--surface-2); }
/* Ohne Vorschaubild keine 450 px leere Fläche: ein Band in der Marke mit dem Symbol der Art. */
[data-kontext-art="projekt"] .main .deliverable__media:not(:has(img)) {
  aspect-ratio: auto; height: 7.5rem; background: var(--wash);
}
[data-kontext-art="projekt"] .main .deliverable__media:not(:has(img)) svg { color: var(--accent-text); width: 30px; height: 30px; }
[data-kontext-art="projekt"] .main .deliverable__type { color: var(--text-muted); }

/* Dateien: Kante, Fläche und Überfahren der Ablage kommen aus Teil 40. Das Dateifeld darin ist
   unsichtbar (sr-only) – wer mit der Tastatur hineinspringt, sieht den Fokus nur an der Ablage. */
[data-kontext-art="projekt"] .main .dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Die Dateiliste liegt auf dem Feld: deckende Zeilen ohne Haarlinie. */
[data-kontext-art="projekt"] .main .file-item {
  border-color: transparent; border-radius: var(--radius); box-shadow: var(--shadow-xs);
  --text-muted: var(--tinte-2); --text-subtle: var(--tinte-3); --knopf: var(--knopf-fest); --knopf-schatten: 0 0 0 0 transparent;
}
[data-kontext-art="projekt"] .main .file-item:hover { border-color: transparent; box-shadow: var(--shadow-sm); }
[data-kontext-art="projekt"] .main .file-item__icon { background: var(--wash); color: var(--accent-text); border-radius: var(--radius-xs); }

/* Termine: der Ort steht rechts; sein Symbol stand als Block über dem Wort (svg ist in app.css
   ein Block). Inline bleibt es in der Zeile und die Kürzung mit „…“ wirkt weiter. */
[data-kontext-art="projekt"] .main .list__item > .truncate { max-width: 40%; }
[data-kontext-art="projekt"] .main .list__item > .truncate > svg:first-child {
  display: inline-block; width: 13px; height: 13px; margin-right: .25rem; vertical-align: -2px;
}

/* Phasen: der Punkt einer Phase trägt die Marke, die Linie verbindet leise. */
[data-kontext-art="projekt"] .main .timeline__dot {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-text);
}

/* ---------- 4. Listen ---------- */
/* Projektliste als Tabelle: der Balken hat eine lesbare Länge. */
.page:has(> .card form[method="get"][action$="/app/projekte"]) .table .progress { min-width: 4.5rem; }
/* Die Zahl daneben bleibt eine Zeile und gleich breit – „100 %“ brach sonst um, die Balken sprangen. */
.page:has(> .card form[method="get"][action$="/app/projekte"]) .table .progress + .numeric {
  flex: none; min-width: 2.75em; white-space: nowrap; text-align: right;
}

/* ---------- 5. Formulare ---------- */
/* Farbwahl (Projektfarbe, Markenfarbe des Kunden): die Farbe füllt das Feld als Fläche. */
:is(form[action*="/app/kunden"], form[action*="/app/projekte"]) .input[type="color"] {
  padding: .3125rem; cursor: pointer;
}
:is(form[action*="/app/kunden"], form[action*="/app/projekte"]) .input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
:is(form[action*="/app/kunden"], form[action*="/app/projekte"]) .input[type="color"]::-webkit-color-swatch {
  border: 0; border-radius: calc(var(--control-radius) - 5px); box-shadow: inset 0 0 0 1px var(--border-strong);
}
:is(form[action*="/app/kunden"], form[action*="/app/projekte"]) .input[type="color"]::-moz-color-swatch {
  border: 0; border-radius: calc(var(--control-radius) - 5px);
}

/* ---------- 6. Telefon ---------- */
@media (max-width: 640px) {
  [data-kontext-art="kunde"] .page-head__text > .row > .avatar--xl { width: 3.5rem; height: 3.5rem; font-size: 1.125rem; border-radius: var(--radius); }
  /* Kundenliste: Suche über die volle Breite, die beiden Auswahlen teilen sich eine Zeile,
     der Suchknopf darunter. Die Breiten stehen im HTML als Inline-Stil. */
  form[method="get"][action$="/app/kunden"] > .row:first-child > .flex-1 { flex: 1 1 100%; min-width: 0 !important; }
  form[method="get"][action$="/app/kunden"] > .row:first-child > .select { flex: 1 1 calc(50% - .75rem); max-width: none !important; min-width: 0; }
  form[method="get"][action$="/app/kunden"] > .row:first-child > .btn { flex: 1 1 100%; }
}
@media (max-width: 780px) {
  /* Kundenliste als Karten: eine Zeile mit nur „—“ ist keine Auskunft (kein Ansprechpartner,
     nichts offen) – sie fällt weg, die Karte wird ein Drittel kürzer. */
  .page:has(> .card form[method="get"][action$="/app/kunden"]) .table--responsive td:has(> .subtle:only-child) { display: none; }
  /* Tippziele der Hauptzelle. Die 44 px der Grundlage (min-height) greifen nur an einem Kasten:
     inline maß der Beleg in der Akte 38 px, der Verweis in Projektliste, Aufgabenliste und
     Projektbelegen 42 px. */
  .split--main > .stack[x-data^="{ tab"] .table--responsive td.is-primary > a {
    display: flex; flex-direction: column; justify-content: center;
  }
  :is([data-kontext-art="projekt"] .main, .page:has(> .card form[method="get"][action$="/app/projekte"]))
    .table--responsive td.is-primary > a.link { display: inline-block; }
}
@media (max-width: 1023px) {
  /* Projektübersicht, Karte „Kunde“: Name und Kontaktzeilen sind Verweise von 18 und 22 px Höhe.
     Die Zeilen wachsen auf 44 px wie die Stammdaten der Akte; der Name bekommt Tippfläche ohne Platz. */
  [data-kontext-art="projekt"] .main .card__body > .row > .flex-1 > a.font-semibold {
    display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -.75rem;
  }
  [data-kontext-art="projekt"] .main .card__body > .stack--sm:has(> a.row) { gap: 0; }
  [data-kontext-art="projekt"] .main .card__body > .stack--sm > a.row { min-height: 2.75rem; }
}
@media (max-width: 640px) {
  /* Termine: der Ort nahm dem Titel 40 % der Zeile („Designabnahme Medite…“). Am Telefon steht er
     darunter, bündig mit dem Titel (Punkt 8 px + Abstand). */
  [data-kontext-art="projekt"] .main .list__item:has(> .truncate) { flex-wrap: wrap; row-gap: .125rem; }
  [data-kontext-art="projekt"] .main .list__item > .truncate {
    flex-basis: 100%; max-width: none; padding-left: calc(8px + var(--space-3));
  }
}

/* ---------- 7. Rückfälle ----------
   Glas setzt dieser Teil nicht mehr (Board: Teil 40), also kein eigener Transparenz-Rückfall. */
@media (prefers-reduced-motion: reduce) {
  [data-kontext-art="projekt"] .main :is(.deliverable, .file-item, .dropzone) { transition: none; }
}

/* ---------- 1.26.0: Kundenliste als zusammenhängende Arbeitsfläche ---------- */
.page--kundenliste .kunden-kennzahlen {
  gap: 0; padding: 0; margin: 0 0 1.25rem; overflow: visible;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row;
  border-block: 1px solid var(--border-strong); border-radius: 0;
}
.page--kundenliste .kunden-kennzahlen > .card {
  min-width: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.page--kundenliste .kunden-kennzahlen > .card + .card { border-left: 1px solid var(--border-strong); }
.page--kundenliste .kunden-kennzahlen .stat { padding: .875rem 1rem; }
.page--kundenliste .kunden-kennzahlen .stat__value { font-size: 1.5rem; margin-block: .125rem; line-height: 1.2; }
.page--kundenliste .kunden-kennzahlen .stat__label { font-size: var(--fs-sm); }
.page--kundenliste .kunden-kennzahlen .stat__meta { font-size: var(--fs-xs); }
.page--kundenliste .kunden-kennzahlen .stat > .row > .subtle { display: none; }
.kunden-liste { overflow: hidden; border: 1px solid var(--border); box-shadow: none; }
.kunden-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; padding: 1rem var(--card-pad) 0; border-bottom: 1px solid var(--border); }
.kunden-filter__suche { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.kunden-filter__suche .input { flex: 1; min-width: 0; }
.kunden-filter__mehr { min-width: 0; align-self: start; }
.kunden-filter__mehr > summary {
  display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .75rem;
  border: 1px solid var(--kante); border-radius: var(--control-radius); cursor: pointer;
  color: var(--text); font-size: var(--fs-sm); list-style: none;
}
.kunden-filter__mehr > summary::-webkit-details-marker { display: none; }
.kunden-filter__mehr > summary::after { content: '+'; margin-left: auto; font-size: 1rem; }
.kunden-filter__mehr[open] > summary::after { content: '−'; }
.kunden-filter__mehr > summary:hover { background: var(--fuellung); }
.kunden-filter__mehr > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.kunden-filter__mehr[open] { grid-column: 1 / -1; }
.kunden-filter__mehr[open] > summary { width: fit-content; gap: .75rem; }
.kunden-filter__felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .75rem; align-items: end; padding-block: 1rem .25rem; }
.kunden-filter__felder .field { min-width: 0; }
.kunden-filter__status { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1rem; }
.kunden-filter__reiter, .kunden-filter__reset {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: .5rem .125rem;
  color: var(--text-muted); font-size: var(--fs-sm); text-decoration: none;
}
.kunden-filter__reiter { border-bottom: 2px solid transparent; }
.kunden-filter__reiter.is-active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent-text); }
.kunden-filter__reiter:hover, .kunden-filter__reset:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.kunden-filter__reset { margin-left: auto; }
.kunden-liste .table .avatar { width: 2rem; height: 2rem; flex: none; font-size: var(--fs-xs); border-radius: var(--radius-xs); }
.kunden-liste .table td { padding-block: .75rem; }
.kunden-liste .table .btn-group { gap: .125rem; }
@media (max-width: 780px) {
  .page--kundenliste .kunden-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  .page--kundenliste .kunden-kennzahlen > .card:nth-child(3) { border-left: 0; }
  .page--kundenliste .kunden-kennzahlen > .card:nth-child(n+3) { border-top: 1px solid var(--border-strong); }
  .kunden-filter { grid-template-columns: minmax(0, 1fr); padding-inline: 1rem; gap: .5rem; }
  .kunden-filter__mehr { grid-column: 1; }
  .kunden-filter__mehr > summary { width: fit-content; gap: .75rem; }
  .kunden-filter__felder { grid-template-columns: minmax(0, 1fr); }
  .kunden-filter__status { gap: .125rem .75rem; }
  .kunden-filter__reset { margin-left: 0; }
  .kunden-liste .table--responsive tbody { display: block; padding: 0; }
  .kunden-liste .table--responsive tr { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .kunden-liste .table--responsive tbody tr + tr { border-top: 1px solid var(--border-strong); }
  .kunden-liste .table--responsive td { padding-block: .25rem; }
}

/* ===== Teil 40-planung ===== */
/* =========================================================================
   newways.suite – Gestaltung „Glas“ – Teil 40: Planung
   Aufgaben (Liste, Board, Karte, Akte, Dialog), Zeiten (Uhr, Woche, Buchungen,
   Nachtragen, Abrechnen), Kalender (Monat, Woche, Liste, Termindialog).
   Die Seiten tragen keine eigene Klasse; wo eine Regel nur auf einer Seite
   gelten darf, erkennt sie die Seite an ihrem Formular (:has). Das HTML bleibt.
   ========================================================================= */

/* ---------- 1. Deckende Flächen des Bereichs ----------
   Karte, Kalenderblatt und Termin liegen deckend; auf ihnen gelten die drei
   Schriftstufen der Karte, nicht die dunklere des Felds (.page). */
.task-card, .calendar {
  --text-muted: var(--tinte-2); --text-subtle: var(--tinte-3); --kante: var(--kante-fest);
  --knopf: var(--knopf-fest); --knopf-schatten: 0 0 0 0 transparent; --focus: var(--accent-text);
  --success: var(--success-fest); --warning: var(--warning-fest); --danger: var(--danger-fest); --info: var(--info-fest);
}

/* ---------- 2. Board ----------
   Die Spalten sind Bahnen aus Glas auf dem Feld – man zieht Karten hinein, sie
   sind Bedienung. Die Karten darauf sind deckend (Glas nie über Glas). Das Board
   läuft bis an den Rand der Seite und rollt dort; die erste Spalte steht bündig
   mit dem Inhalt darüber. */
.board {
  --board-rand: clamp(1rem, 3vw, 2.5rem);
  gap: .875rem; margin-inline: calc(-1 * var(--board-rand));
  padding: .25rem var(--board-rand) 1.25rem; scroll-padding-inline: var(--board-rand);
  align-items: flex-start;
}
.board__column {
  gap: .375rem; padding: .625rem .625rem .5rem; border-radius: var(--radius-xl);
  background-color: var(--glas-kachel); background-image: var(--glas-glanz);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glas-rahmen), var(--shadow-xs);
}
.board__head { padding: .25rem .375rem .375rem .625rem; gap: .5rem; }
.board__head h4 { font-size: var(--fs-md); letter-spacing: -.01em; }
/* Ein Punkt je Zustand, in den festen Zustandsfarben: man findet „Blockiert“, ohne zu lesen. */
.board__head::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; flex: none;
  background: var(--spalte, var(--text-subtle));
}
.board__column[data-spalte="in_progress"] { --spalte: var(--info-frei); }
.board__column[data-spalte="review"] { --spalte: var(--warning-frei); }
.board__column[data-spalte="blocked"] { --spalte: var(--danger-frei); }
.board__column[data-spalte="done"] { --spalte: var(--success-frei); }
/* Die Zahl ist eine kleine Pille wie in der Seitenleiste. */
.board__count {
  min-width: 1.5rem; padding: .0625rem .5rem; border-radius: var(--radius-full); text-align: center;
  background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); font-weight: 600;
}
/* Rollen schneidet ab, was übersteht – das Polster hält den Schatten der Karten sichtbar. */
.board__list { gap: .5rem; margin-inline: -.375rem; padding: .125rem .375rem .375rem; }
.board__leer { padding-block: 1.25rem .75rem; margin-top: 0; }
/* Ziel beim Ziehen: gestrichelte Kante in der Schriftrolle der Marke (helles Gold hielte 3:1 nicht). */
.board__list.is-ziel {
  outline: 2px dashed var(--accent-text); outline-offset: 0; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---------- 3. Aufgabenkarte ---------- */
.task-card {
  position: relative; gap: .5rem; padding: .75rem .875rem .375rem 1rem;
  border-color: transparent; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
/* Überfahren vertieft nur den Schatten; die Karte bleibt liegen. */
.task-card:hover { border-color: transparent; box-shadow: var(--shadow); }
.task-card__title { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.task-card__title:hover { text-decoration: underline; text-underline-offset: .18em; }
/* Symbole stehen in der Zeile: der Grundsatz der Suite setzt svg auf block, dann lag
   die Mappe über dem Projektnamen und der Kalender über dem Datum. */
.task-card .truncate .ic, .task-card__due .ic { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: .25rem; }
.task-card > .truncate { color: var(--text-muted); margin-top: -.25rem; }
.task-card__meta { gap: .375rem .5rem; color: var(--text-muted); }
.task-card__due { display: inline-flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-card__due .ic { margin-right: 0; }
.task-card__due { gap: .25rem; }
.task-card .avatar--sm { width: 26px; height: 26px; }
/* Kundenaufgabe: ein gerader Strich innen am Rand statt einer dicken, runden Kante. */
.task-card.is-client { border-left: 1px solid transparent; }
.task-card.is-client::before {
  content: ""; position: absolute; left: 0; top: .875rem; bottom: .875rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent-text);
}
/* Der Griff ist ein Symbol der Bedienung: 3:1 statt halber Deckkraft (2,2:1). */
.task-card__grip { top: .625rem; right: .5rem; opacity: 1; color: color-mix(in srgb, var(--text-subtle) 78%, transparent); }
.task-card[draggable="true"]:hover .task-card__grip { color: var(--text-muted); }
/* Die Schritte sind eine Fußleiste der Karte, durch eine Haarlinie abgesetzt. */
.task-card > .row:last-child {
  gap: .125rem; margin: .125rem -.5rem 0 -.625rem; padding-top: .25rem;
  border-top: 1px solid var(--border);
}
.task-card > .row:last-child > form:nth-child(2) { margin-right: auto; }
.task-card.is-dragging { box-shadow: var(--shadow-lg); }

/* ---------- 4. Aufgaben als Liste und als Akte ---------- */
/* Die Aufgabe ist die Hauptsache der Zeile, nicht ihr Projekt. */
.table:has(form[action$="/status"]) td.is-primary > a.link { font-weight: 600; }
/* Akte: Bezeichnung links, Wert rechts in derselben Zeile. Ein langer Projektname bricht in sich
   um, statt als ganze Zeile unter seine Bezeichnung zu rutschen (dort stand er mit großer Lücke). */
.page:has(form[action*="/app/aufgaben/"][action$="/kommentar"]) .card__body > .row--between { flex-wrap: nowrap; align-items: baseline; }
.page:has(form[action*="/app/aufgaben/"][action$="/kommentar"]) .card__body > .row--between > :first-child { flex: none; }
.page:has(form[action*="/app/aufgaben/"][action$="/kommentar"]) .card__body > .row--between > :last-child {
  min-width: 0; margin-left: auto; text-align: right; overflow-wrap: anywhere;
}
.page:has(form[action*="/app/aufgaben/"][action$="/kommentar"]) .timeline__title .badge { margin-left: .25rem; }
@media (max-width: 780px) {
  /* Liste: die Aufgabe ist das Tippziel der Zeile – mit dem Polster aus Teil 00 (12 px) nur 42 px hoch. */
  .table:has(form[action$="/status"]) td.is-primary > a.link { padding-block: .8125rem; margin-block: -.8125rem; }
  /* Akte: Projekt und Kunde sind Verweise von 17–22 px Höhe: das Tippziel wächst auf 44 px, die Zeile nicht. */
  .page:has(form[action*="/app/aufgaben/"][action$="/kommentar"]) .card__body > .row--between a { padding-block: .875rem; margin-block: -.875rem; }
}
/* Erledigt: „weiter“ ist gesperrt. Als blasse Hauptpille sah es nach einem Fehler aus; es steht
   jetzt so still wie ein gesperrtes „zurück“. */
form[action$="/status"] > .btn--primary:disabled { --btn-bg: transparent; --btn-fg: var(--text-muted); background-image: none; box-shadow: none; }
/* Ablage: die Kante gehört zu einem Bedienelement (3:1); beim Ziehen die Marke als Schrift. */
.dropzone { border: 1.5px dashed var(--kante); background: var(--fuellung); padding: 1.5rem; }
.dropzone:hover, .dropzone.is-dragging { border-color: var(--accent-text); background: var(--accent-soft); }
.dropzone svg { color: var(--text-muted); width: 26px; height: 26px; }
.file-item { border-color: transparent; background: var(--fuellung); border-radius: var(--radius-sm); }
.file-item:hover { border-color: transparent; background: color-mix(in srgb, var(--text) 8%, var(--surface)); }
.file-item__icon { background: var(--surface); box-shadow: var(--shadow-xs); }

/* ---------- 5. Zeiten ---------- */
/* Die laufende Uhr: der einzige goldene Kasten der Seite – hier ist man am Zug (anhalten).
   Der Rand steht als Inline-Stil im HTML; der Ring macht ihn kräftiger, die Fläche bleibt Karte. */
.card[style*="--gold"] {
  background: color-mix(in srgb, var(--gold) 7%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--gold), var(--shadow-sm);
}
/* Punkt und Uhr bleiben nebeneinander, auch wenn die Zeile am Telefon umbricht. */
.card[style*="--gold"] .row--tight:has(> .dot) { flex-wrap: nowrap; align-items: flex-start; }
.card[style*="--gold"] .row--tight:has(> .dot) > .dot { margin-top: .8125rem; }
.card[style*="--gold"] .dot { width: .625rem; height: .625rem; box-shadow: 0 0 0 4px var(--gold-soft); }
.card[style*="--gold"] [x-text="anzeige"] {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 680; letter-spacing: -.02em; line-height: 1.1;
}
/* Die Woche als Säulen. Die Farben stehen als Inline-Stil im HTML: Tage in der Marke, heute
   in Gold. Gold wäre hier Schmuck, und helle Marken (Gold, Koralle) hielten auf der Karte keine
   3:1. Also die Rolle „Wahl“: heute voll, die anderen Tage eine Stufe leiser (72 %, noch 3:1),
   dazu das Kürzel des Tages fett. */
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) a.flex-col {
  --saeule: color-mix(in srgb, var(--wahl) 72%, var(--surface));
}
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) a.flex-col > span.block[style] {
  border-radius: 7px 7px 3px 3px !important; transition: background-color var(--dur-fast);
}
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) a.flex-col > span.block[style*="var(--accent)"] { background: var(--saeule) !important; }
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) a.flex-col > span.block[style*="var(--gold)"] { background: var(--wahl) !important; }
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) a.flex-col:hover { --saeule: var(--wahl); }
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) a.flex-col:has(> span[style*="var(--gold)"]) > span:last-child { color: var(--text); font-weight: 700; }
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) a.flex-col:hover > span:last-child { color: var(--text); }
/* Der Filter unter den Säulen: eine Zeile, der Knopf rechts – sofern die Karte 40 rem hat. Vorher
   brach „Filtern“ auch bei 1440 px allein in die zweite Zeile (Felder 12 + 14 rem stehen inline). */
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) form.card__footer { container: planung-filter / inline-size; }
@container planung-filter (min-width: 40rem) {
  .row:has(> select[name="projekt"]) { flex-wrap: nowrap; }
  .row:has(> select[name="projekt"]) > .select { min-width: 0; }
  .row:has(> select[name="projekt"]) > :is(.btn, .check) { flex: none; }
  .row:has(> select[name="projekt"]) > .btn { margin-left: auto; }
}
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) form.card__footer > .row { gap: .5rem .75rem; }
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) form.card__footer .check { padding-block: 0; align-items: center; }
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) form.card__footer .check input { margin-top: 0; }
/* Zahlen stehen rechts, ihr Kopf stand links (app.css: .table th schlägt .text-right). */
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .table th.text-right,
form[action$="/app/zeiten/abrechnen"] .table th.text-right { text-align: right; }
/* Buchungen: die Tätigkeit ist die Hauptsache, das Projekt ein Verweis in normaler Stärke. */
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .table td.text-sm a.link { font-weight: 400; }
/* Buchungen und Abrechnen: es zählt die Breite der Karte, nicht die des Schirms. Die Tabelle wollte
   46 rem (app.css) und rollte seitwärts: bei 1440 px um 10 px, bei 1280 px um 166 px (Karte 572 px
   neben dem Nachtragen); ohne Mindestbreite standen Tätigkeiten in vier Zeilen. Unter 48 rem stehen
   die Buchungen darum als Zeilen (Abschnitt 9), darüber passt die Tabelle ohne Mindestbreite. */
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card:has(> .table-wrap) { container: planung-buchungen / inline-size; }
form[action$="/app/zeiten/abrechnen"] .card:has(> .table-wrap) { container: planung-abrechnen / inline-size; }
@container planung-buchungen (min-width: 48rem) {
  .table-wrap > .table { min-width: 0; }
  /* Sieben Spalten: dem Projekt blieb ein Wort je Zeile („Website- / Relaunch / …“). Mit 9 rem zwei Zeilen. */
  .table tbody td:nth-child(3) { min-width: 9rem; }
}
/* Abrechnen: jede Karte ist eine eigene Tabelle. Neben „Wohin“ (1440 px: 728 px) blieb der Tätigkeit
   ein Streifen von vier Zeilen, und jede Karte setzte ihre Spalten anders – dort stehen die Buchungen
   als Zeilen (Abschnitt 9). Erst ab 48 rem eine Tabelle, mit festen Spalten, die in allen Karten
   untereinander stehen. */
@container planung-abrechnen (min-width: 48rem) {
  .table-wrap > .table { min-width: 0; table-layout: fixed; }
  .table thead th:nth-child(2) { width: 6.5rem; }
  .table thead th:nth-child(4) { width: 9rem; }
  .table thead th:nth-child(5) { width: 4.75rem; }
  .table thead th:nth-child(6) { width: 6.25rem; }
  .table thead th:nth-child(7) { width: 7rem; }
  form[action$="/app/zeiten/abrechnen"] .table tbody td:nth-child(4) { white-space: normal; overflow-wrap: break-word; }
}
/* Buchungen: Tag und Dauer brechen nicht um; die Person darf es – sie ist die leiseste Spalte. */
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .table td.numeric,
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .table td:first-child { white-space: nowrap; }
.page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tfoot td {
  border-bottom: 0; padding-block: .875rem; font-family: var(--font-display);
}

/* ---------- 6. Abrechnen ---------- */
form[action$="/app/zeiten/abrechnen"] .table td.numeric,
form[action$="/app/zeiten/abrechnen"] .table td.text-sm { white-space: nowrap; }
/* Kunde, Stunden, Betrag: am Telefon stand sonst „€“ allein in der letzten Zeile. */
form[action$="/app/zeiten/abrechnen"] .card__header p { text-wrap: pretty; }
/* Die Häkchen der Tabelle stehen ohne .check im HTML und kamen als blaues Kästchen des
   Browsers. Jetzt wie jedes Kästchen der Suite: Kante 3:1, gewählt in der Rolle „Wahl“.
   Das Kästchen malt ::before, das Häkchen ::after – so kann das Tippziel wachsen (Telefon). */
form[action$="/app/zeiten/abrechnen"] input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; display: block;
  width: 1.25rem; height: 1.25rem; margin: 0; border: 0; background: none; cursor: pointer;
}
form[action$="/app/zeiten/abrechnen"] input[type="checkbox"]::before,
form[action$="/app/zeiten/abrechnen"] input[type="checkbox"]::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 1.25rem; height: 1.25rem;
  transform: translate(-50%, -50%); border-radius: 7px;
}
form[action$="/app/zeiten/abrechnen"] input[type="checkbox"]::before {
  background: var(--fuellung); box-shadow: inset 0 0 0 1.5px var(--kante);
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast);
}
form[action$="/app/zeiten/abrechnen"] input[type="checkbox"]:hover::before { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 72%, transparent); }
form[action$="/app/zeiten/abrechnen"] input[type="checkbox"]:checked::before { background: var(--wahl); box-shadow: none; }
form[action$="/app/zeiten/abrechnen"] input[type="checkbox"]:checked::after {
  background: var(--wahl-auf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
form[action$="/app/zeiten/abrechnen"] input[type="checkbox"]:focus { outline: none; }
form[action$="/app/zeiten/abrechnen"] input[type="checkbox"]:focus-visible::before {
  box-shadow: inset 0 0 0 1.5px var(--focus), 0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent);
}
/* Nicht gewählte Zeilen treten zurück: man sieht, was in den Beleg geht. */
form[action$="/app/zeiten/abrechnen"] tbody tr:has(input[type="checkbox"]:not(:checked)) td:not(:first-child) { color: var(--text-subtle); }

/* ---------- 7. Kalender ---------- */
/* Das Blatt ist Inhalt: eine Karte wie jede andere, ohne Haarlinie außen. */
.calendar { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.calendar__head { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.calendar__head div { padding: .625rem .5rem; font-weight: 600; color: var(--text-muted); }
.calendar__day { transition: background-color var(--dur-fast); }
/* Samstag und Sonntag liegen einen Hauch tiefer – die Woche gliedert sich von selbst. */
.calendar__day:nth-child(7n), .calendar__day:nth-child(7n - 1) { background: color-mix(in srgb, var(--text) 2%, var(--surface)); }
.calendar__day.is-outside { background: var(--surface-inset); }
.calendar__day.is-outside .calendar__num { font-weight: 500; }
/* Ein Tag ist ein Knopf (legt einen Termin an): er antwortet auf die Maus. */
.calendar__day:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.calendar__num { width: 26px; height: 26px; font-size: var(--fs-sm); color: var(--text); }
/* Heute trägt die Rolle „Wahl“ statt der rohen Akzentfläche (Teil 00): helles Gold stand auf der
   Karte bei 2,1:1, dunkles Blau im Dunkeln bei 2,35:1. */
.calendar__day.is-today .calendar__num { background: var(--wahl); color: var(--wahl-auf); font-weight: 700; box-shadow: var(--shadow-xs); }
/* Termin: getönte Zeile mit geradem Farbstrich links (die Farbe steht im HTML). Die Tönung ist
   durchsichtig, damit der Termin auf Wochenende und Nachbarmonat gleich absteht. */
.cal-event {
  padding: .1875rem .5rem .1875rem .4375rem; border-radius: 3px var(--radius-xs) var(--radius-xs) 3px;
  background: color-mix(in srgb, var(--text) 6%, transparent); line-height: 1.4;
  transition: background-color var(--dur-fast);
}
.cal-event:hover { background: color-mix(in srgb, var(--text) 11%, transparent); }
.calendar__more { font-weight: 600; color: var(--text-muted); padding-left: .5rem; }
/* Woche (genau sieben Tage im Raster): höhere Tage, Titel bis drei Zeilen statt „Kick-off Mar…“. */
.calendar__grid:not(:has(> :nth-child(8))) .calendar__day { min-height: clamp(13rem, 38vh, 22rem); }
.calendar__grid:not(:has(> :nth-child(8))) .cal-event {
  white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  -webkit-hyphens: auto; hyphens: auto;   /* Spalten von 98 px (Tablet, 1024 px): „Wochen-start“ statt „Wochensta / rt“ */
}
/* Woche: der Kopf nennt Tag und Datum („Mi 30.“), die Zahl im Tag wiederholte es nur. Heute trägt
   darum der Kopf: Schrift in der Marke (auf --surface-2 zugesagt 4,5:1) und ein Strich darunter. */
.calendar__grid:not(:has(> :nth-child(8))) .calendar__num { display: none; }
.calendar:not(:has(> .calendar__grid > :nth-child(8))):has(> .calendar__grid > .is-today:nth-child(1)) > .calendar__head > :nth-child(1),
.calendar:not(:has(> .calendar__grid > :nth-child(8))):has(> .calendar__grid > .is-today:nth-child(2)) > .calendar__head > :nth-child(2),
.calendar:not(:has(> .calendar__grid > :nth-child(8))):has(> .calendar__grid > .is-today:nth-child(3)) > .calendar__head > :nth-child(3),
.calendar:not(:has(> .calendar__grid > :nth-child(8))):has(> .calendar__grid > .is-today:nth-child(4)) > .calendar__head > :nth-child(4),
.calendar:not(:has(> .calendar__grid > :nth-child(8))):has(> .calendar__grid > .is-today:nth-child(5)) > .calendar__head > :nth-child(5),
.calendar:not(:has(> .calendar__grid > :nth-child(8))):has(> .calendar__grid > .is-today:nth-child(6)) > .calendar__head > :nth-child(6),
.calendar:not(:has(> .calendar__grid > :nth-child(8))):has(> .calendar__grid > .is-today:nth-child(7)) > .calendar__head > :nth-child(7) {
  font-weight: 700; color: var(--accent-text); box-shadow: var(--heute-strich, inset 0 -2px 0 var(--accent-text));
}
/* Liste und Legende: der Farbpunkt etwas größer, damit die Farbe trägt. */
.page:has(.calendar, button[onclick*="Kalender-Abo"]) .list .dot { width: .625rem; height: .625rem; }
.page:has(button[onclick*="Kalender-Abo"]) .card__body--tight > .row { gap: .5rem 1rem; }

/* ---------- 8. Dialoge ---------- */
/* Termin: am Rechner vier Spalten – Beginn, Uhrzeit, Ende, Uhrzeit in EINER Zeile (vorher stand
   „Uhrzeit bis“ allein in der zweiten), Art, Farbe, Projekt, Kunde in der nächsten. Was Platz
   braucht (Ort, Verknüpfung, Erinnerung, Portal), nimmt zwei. */
@media (min-width: 960px) {
  .modal__panel--wide .form-grid:has(#ev_url) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.125rem 1rem; }
  .modal__panel--wide .form-grid:has(#ev_url) > :is(.field:has(#ev_location), .field:has(#ev_url), .field:has([name="reminder_minutes"]), .field:has([name="visible_to_client"])):not(.span-full) { grid-column: span 2; }
}
.modal .form-grid > .field:has(> .check [name="visible_to_client"]) { align-self: end; }
.modal [role="radiogroup"] { gap: .25rem 1.5rem; }
.modal .fieldset { border-color: var(--border); border-radius: var(--radius); }
/* Farbe: ein Farbfeld in Pillenform statt eines Balkens über die ganze Breite. */
.modal .input[type="color"] { width: 5.5rem; padding: .375rem; cursor: pointer; }
.modal .input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
/* Ohne Wert zeigt der Browser Schwarz; der Ring (--kante, 3:1) hält das Feld im Dunkeln sichtbar. */
.modal .input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--kante); }
.modal .input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--radius-full); }

/* ---------- 9. Telefon ---------- */
@media (max-width: 1023px) {
  /* Board: eine Spalte fast so breit wie der Schirm, man wischt von Spalte zu Spalte.
     Keine eigene Rollbahn in der Spalte – am Telefon rollt nur die Seite. */
  .board { scroll-snap-type: x mandatory; gap: .75rem; }
  .board__column { flex: 0 0 min(21rem, calc(100vw - 3.5rem)); max-height: none; }
  .board__list { overflow: visible; }
  .task-card > .row:last-child { margin-top: 0; }
}
@media (max-width: 720px) {
  .calendar__head div { padding-inline: 1px; white-space: nowrap; font-size: var(--fs-xs); }
  .calendar__num { width: 24px; height: 24px; font-size: var(--fs-xs); }
  /* Woche am Telefon: sieben Zeilen statt sieben Spalten von 50 px mit Punkten. Links der Tag
     aus dem Kopf („Mo 28.“), rechts die Termine mit Titel – wie die Liste, nur nach Tagen.
     Kopf und Raster teilen sich die Zeilen (subgrid), die Zahl im Tag entfällt. */
  .calendar:not(:has(> .calendar__grid > :nth-child(8))) {
    display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); grid-template-rows: repeat(7, auto);
  }
  .calendar:not(:has(> .calendar__grid > :nth-child(8))) > :is(.calendar__head, .calendar__grid) {
    display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
  }
  .calendar:not(:has(> .calendar__grid > :nth-child(8))) > .calendar__head { border-bottom: 0; border-right: 1px solid var(--border); }
  .calendar:not(:has(> .calendar__grid > :nth-child(8))) > .calendar__head > div {
    display: flex; align-items: flex-start; justify-content: flex-start; padding: .875rem .5rem .5rem .875rem;
    font-size: var(--fs-sm); color: var(--text); border-bottom: 1px solid var(--border);
  }
  .calendar:not(:has(> .calendar__grid > :nth-child(8))) > .calendar__head > div:last-child { border-bottom: 0; }
  .calendar__grid:not(:has(> :nth-child(8))) .calendar__day {
    min-height: 3rem; padding: .5rem .625rem; border-right: 0; flex-flow: column nowrap; gap: .375rem;
  }
  .calendar__grid:not(:has(> :nth-child(8))) .calendar__day .cal-event {
    width: auto; height: auto; min-height: 2.75rem; display: flex; align-items: center;
    padding: .375rem .625rem; font-size: var(--fs-sm); line-height: 1.35; color: var(--text);
    border-left-width: 3px; border-radius: 3px var(--radius-xs) var(--radius-xs) 3px;
    background: color-mix(in srgb, var(--text) 6%, transparent); pointer-events: auto;
  }
  /* Heute: der Strich steht links, weil der Kopf hier eine Spalte ist. */
  .calendar { --heute-strich: inset 3px 0 0 var(--accent-text); }
  /* Monat: ein Termin ist ein Punkt in seiner Farbe (app.css). Der Ring hält jede Farbe mit 3:1 auf
     der Karte – Gelb, Orange oder dunkles Oliv verschwanden sonst. */
  .calendar__grid:has(> :nth-child(8)) .calendar__day .cal-event { box-shadow: 0 0 0 1px var(--kante-fest); }
}
@media (max-width: 640px) {
  /* Laufende Uhr: Anhalten zuerst und über die ganze Breite, Verwerfen darunter. */
  .card[style*="--gold"] .row--between > .row--tight:last-child { width: 100%; flex-direction: column-reverse; align-items: stretch; }
  .card[style*="--gold"] .row--between > .row--tight:last-child .btn { width: 100%; }
  /* Der Filter unter den Säulen: die Felder über die ganze Breite (Breiten stehen inline). */
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) form.card__footer .select { flex: 1 1 100% !important; }
}
/* Buchungen als Zeilen, wenn die Karte unter 48 rem hat (Telefon, und am Rechner neben dem Nachtragen):
   Tag als Zwischenkopf, darunter Was mit Projekt und Person, rechts Dauer und Zustand. */
@container planung-buchungen (max-width: 47.99rem) {
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .table-wrap { overflow: visible; background: none; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table,
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table :is(tbody, tfoot) { display: block; min-width: 0; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table thead { display: none; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 2.75rem; column-gap: .75rem;
    grid-template-areas: "tag tag tag" "was dauer weg" "proj zust weg" "wer zust weg";
    padding: .625rem .5rem .625rem var(--card-pad); border-top: 1px solid var(--border);
  }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td { padding: 0; border: 0; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td:first-child.subtle { display: none; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td:first-child {
    grid-area: tag; margin: .375rem 0 .5rem; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600;
  }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td:nth-child(2) { grid-area: was; font-weight: 500; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td:nth-child(3) { grid-area: proj; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td.text-sm.subtle:not(:first-child) { grid-area: wer; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td.numeric { grid-area: dauer; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td:has(> .badge) { grid-area: zust; justify-self: end; align-self: start; margin-top: .25rem; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td:last-child { grid-area: weg; align-self: center; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td:last-child .btn { width: 2.75rem; height: 2.75rem; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tfoot tr {
    display: flex; justify-content: space-between; padding: .875rem var(--card-pad); border-top: 1px solid var(--border-strong);
  }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tfoot td { padding: 0; }
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tfoot td:last-child { display: none; }
  /* Das Projekt ist ein Verweis von 17 px Höhe: das Tippziel wächst, die Zeile nicht. */
  .page:has(form[action$="/app/zeiten/start"], form[action$="/app/zeiten/stopp"]) .card > .table-wrap > .table tbody td:nth-child(3) > a.link { padding-block: .875rem; margin-block: -.875rem; }
}
/* Abrechnen als Zeilen: Kästchen links, Was und Betrag oben, Tag, Person, Dauer und Satz darunter. */
@container planung-abrechnen (max-width: 47.99rem) {
  form[action$="/app/zeiten/abrechnen"] .table-wrap { overflow: visible; background: none; }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table, form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table tbody { display: block; min-width: 0; }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table thead { display: none; }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table tbody tr {
    display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; column-gap: .5rem; row-gap: .125rem;
    grid-template-areas: "wahl was betrag" "wahl tag dauer" "wahl wer satz";
    padding: .625rem var(--card-pad) .625rem .5rem; border-top: 1px solid var(--border);
  }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table tbody td { padding: 0; border: 0; }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table tbody td:nth-child(1) { grid-area: wahl; align-self: center; }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table tbody td:nth-child(2) { grid-area: tag; }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table tbody td:nth-child(3) { grid-area: was; font-weight: 500; }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table tbody td:nth-child(4) { grid-area: wer; }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table tbody td:nth-child(5) { grid-area: dauer; font-size: var(--fs-sm); color: var(--text-muted); }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table tbody td:nth-child(6) { grid-area: satz; font-size: var(--fs-sm); }
  form[action$="/app/zeiten/abrechnen"] .card > .table-wrap > .table tbody td:nth-child(7) { grid-area: betrag; font-weight: 600; }
  /* Das Tippziel wächst auf 44 px, das gemalte Kästchen bleibt 20 px. */
  form[action$="/app/zeiten/abrechnen"] input[type="checkbox"] { width: 2.75rem; height: 2.75rem; }
}

/* ---------- 10. Rückfälle ---------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .board__column { background-color: var(--surface-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .board__column { background-color: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .task-card, .calendar__day, .cal-event, a.flex-col > span.block[style],
  form[action$="/app/zeiten/abrechnen"] input[type="checkbox"]::before { transition: none; }
  .task-card.is-dragging { transform: none; }
}

/* ===== Teil 50-objekte ===== */
/* =========================================================================
   newways.suite – Gestaltung „Glas“ – Teil 50: Objekte
   Objektliste mit Kennzahlen und Übertragungen, Objektformular, Objektakte mit
   allen Reitern, Exposé und Unterlagen senden, Suchprofile, Registrierungen.
   Die Seiten tragen keine eigene Klasse. Gezielt wird deshalb über Kennungen
   (#freigaben, #uebertragungen), eigene Klassen (.filterleiste__*, .reg-*) und
   Ziele von Verweisen und Formularen (…/app/objekte/…) – nie über allgemeine
   Bausteine allein.
   ========================================================================= */

/* ---------- 1. Das Objekt als Foto ----------
   Ein Objekt ist ein Bild, kein Monogramm: in Listen ein kleines Querformat (4:3)
   mit dem Radius der Felder, in der Akte ein größeres. Die Umrisslinie liegt ÜBER
   dem Foto – ein heller Himmel liefe sonst in die weiße Karte aus. */
a[href*="/app/objekte/"] > .avatar,
#kunde_objekte .avatar {
  width: 3.25rem; height: 2.4375rem; border-radius: var(--radius-xs);
  outline: 1px solid var(--border-strong); outline-offset: -1px;
}
.page-head .avatar--xl:has(> img[src*="objekte"]) {
  width: 6.5rem; height: 4.875rem; border-radius: var(--radius);
  outline: 1px solid var(--border-strong); outline-offset: -1px;
}
@media (max-width: 640px) {
  .page-head .avatar--xl:has(> img[src*="objekte"]) { width: 5.5rem; height: 4.125rem; }
}
/* „Unterlagen senden“ aus der Kundenakte: Foto und Text bleiben in einer Zeile.
   Die Zeile bricht sonst um, sobald die Abzeichen breiter sind als der Rest –
   das Foto stand dann allein über dem Titel. */
#kunde_objekte .list__item > .row { flex-wrap: nowrap; align-items: flex-start; }
#kunde_objekte .list__item > .row > .min-w-0 { flex: 1 1 0; }
/* Am Telefon steht der Knopf unter dem Objekt, nicht daneben – daneben lief der Text
   in eine Spalte von drei Wörtern, und die Abzeichen liefen unter den Knopf. */
@media (max-width: 640px) {
  #kunde_objekte .list__item > .row { flex-basis: 100%; }
  .list__item[data-treffer] { flex-wrap: wrap; }
  .list__item[data-treffer] > .list__main { flex-basis: 100%; }
}

/* ---------- 2. Objektliste ---------- */
/* Fünf Kacheln: bricht eine Beschriftung auf zwei Zeilen, bekommen alle zwei –
   so stehen die großen Zahlen auf einer Linie. Die Kachel misst sich selbst. */
.grid--5.kennzahlen > .card { container-type: inline-size; }
@container (max-width: 16rem) {
  .grid--5.kennzahlen .stat__label { min-height: 2lh; }
}
/* Filter am Telefon: das Suchfeld über die ganze Breite, darunter je zwei Felder
   nebeneinander statt drei halbleerer Zeilen mit fester Grundbreite. */
@media (max-width: 640px) {
  .filterleiste__suche { flex-basis: 100%; }
  .filterleiste__feld { flex: 1 1 9rem; min-width: 0; }
  /* „Kauf und Miete“ braucht mehr als die Hälfte; der Knopf nur, was er trägt. */
  .filterleiste__feld ~ .btn--primary { flex: none; }
}
/* Das Abzeichen „Teilung“ steht unter dem Titel, auf jeder Breite. Daneben blieb dem
   Titel am Telefon eine Spalte von zwölf Zeichen, bei 1440 px eine von 150 px: der
   Titel lief auf fünf Zeilen mit zwei Trennstrichen („Dä-chern“). */
.table a[href*="/app/objekte/"].row--nowrap:has(> .badge) { flex-wrap: wrap; row-gap: .25rem; }
.table a[href*="/app/objekte/"].row--nowrap:has(> .badge) > .flex-1 { flex-basis: calc(100% - 4rem); }
.table a[href*="/app/objekte/"].row--nowrap:has(> .badge) > .badge { margin-left: 4rem; }
/* Übertragungen: am Telefon steht der Zustand unter dem Kopftext – daneben
   drückte er den Satz auf vier Wörter je Zeile. */
@media (max-width: 640px) {
  #uebertragungen > .card > .card__header { flex-wrap: wrap; row-gap: var(--space-2); }
  #uebertragungen > .card > .card__header > .flex-1 { flex-basis: 100%; }
}
/* Kartenköpfe mit Text UND Bedienung: der Textblock (.flex-1.min-w-0, Grundlage 0 px)
   fiel am Telefon auf ein Wort je Zeile, bei „Passende Suchkunden“ lagen „Alle“ und
   „Ausgewählte senden“ über dem Satz. Unter 15 rem bricht die Bedienung in die nächste
   Zeile; wo Platz ist, bleibt alles nebeneinander. Ebenso die Zeile der Objektwahl
   (Interessent registrieren) mit „Registrieren“. */
:is(#termine, #suchkunden) > .card__header > .flex-1,
.card__header:has(> #provision_umschalten) > .flex-1,
.reg-zeile > .flex-1 { min-width: min(100%, 15rem); }
:is(#termine, #suchkunden) > .card__header, .card__header:has(> #provision_umschalten) { row-gap: var(--space-2); }

/* ---------- 3. Objektakte: Kopf ---------- */
/* Fünf Knöpfe und das Menü sollen am Rechner in eine Zeile passen: etwas engere
   Knöpfe, sonst stand das Menü allein in der zweiten Zeile. */
@media (min-width: 1024px) {
  .page-head__actions:has(#objekt_unterlagen_senden, #objekt_maklervertrag, #objekt_kooperation) { gap: .375rem; }
  .page-head__actions:has(#objekt_unterlagen_senden, #objekt_maklervertrag, #objekt_kooperation) > .btn {
    padding-inline: .875rem; gap: .4375rem;
  }
}
/* „Freigaben zurücknehmen“ klappt ein Formular auf. Der Inline-Stil setzt
   padding: var(--s3) – den Token gibt es nicht, der Inhalt klebte am Rand – und
   22 rem Breite: rechtsbündig am Knopf lief das Feld am Telefon links aus dem Bild,
   am Rechner über die Seitenleiste. Jetzt so breit wie der Knopf, nie schmaler als
   15 rem, und damit immer unter ihm. */
#freigaben_alle > .dropdown__menu { min-width: max(100%, 15rem) !important; padding: var(--space-3) !important; }

/* ---------- 4. Objektakte: stille Wiederholungen ---------- */
/* Drei Kanäle mit je „Freigeben“, je Bild ein „Texte speichern“: als Hauptknöpfe
   stritten sie mit „Bearbeiten“ und „Hochladen“ um den Rang. Hier sind sie still. */
#freigaben .btn--primary,
form[action*="/objekt-bilder/"] .btn--primary {
  --btn-bg: var(--knopf); --btn-fg: var(--text); background-image: none; box-shadow: none;
}
#freigaben .btn--primary:hover,
form[action*="/objekt-bilder/"] .btn--primary:hover { --btn-bg: color-mix(in srgb, var(--text) 7%, var(--knopf)); box-shadow: none; }

/* ---------- 5. Objektakte: Texte ---------- */
/* Stand je Sprache: der Punkt kommt als Inline-Stil (Grün oder --surface-3). Hellgrau
   auf Weiß hielt 1,2:1, und der Unterschied lag allein in der Farbe. Ein fehlender
   Text ist jetzt ein Ring mit Kante (3:1), ein vorhandener bleibt voll. */
html .dot[style*="surface-3"] { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--kante); }
/* Je Sprache eine leise Pille: vorher lief „Spanisch“ ohne Absatz hinter „Exposé“ weiter. */
.card__body > .row > .row:has(> .row > .dot) { padding: .3125rem .875rem; border-radius: var(--radius-full); background: var(--fuellung); }

/* ---------- 6. Objektakte: Bilder und Papiere ---------- */
/* Die Ablagefläche ist ein Bedienelement: ihre Kante hält 3:1 (vorher Haarlinie,
   im Dunkeln kaum zu sehen). Überfahren tönt sie in der Marke. Nur die der Akte –
   Dateien, Aufgaben und Projekte haben ihre eigene. */
form[action*="/app/objekte/"] .dropzone { border-color: var(--kante); background: var(--surface-inset); }
form[action*="/app/objekte/"] .dropzone:hover,
form[action*="/app/objekte/"] .dropzone.is-dragging { border-color: var(--accent-text); background: var(--accent-soft); }
form[action*="/app/objekte/"] .dropzone svg { color: var(--text-muted); }
form[action*="/app/objekte/"] .file-item { border-color: var(--border-strong); border-radius: var(--radius-sm); }
/* „Bild löschen“ bleibt rechts, auch wenn die Zeile umbricht („Zum Titelbild machen“
   braucht Platz) – sonst stand es mal rechts, mal links unter den Pfeilen. */
form[action*="/objekt-bilder/"]:has(> input[name="_method"][value="DELETE"]) { margin-left: auto; }
/* Die Papiere: sieben Spalten, die Tabelle will 46 rem (app.css), die Hauptspalte der
   Akte hat bei 1440 px 38. Der Schalter „Exposé“ und „Löschen“ lagen hinter dem
   Rollbalken. Wird die Karte schmaler als die Tabelle, steht jede Zeile als Karte –
   dieselbe Form wie am Telefon (app.css, .table--responsive bis 780 px). Der Vorsatz
   .card > .table-wrap schlägt das bündige Polster der ersten Zelle (app.css). */
.card:has(> .table-wrap form[action*="/app/objekt-papiere/"]) { container-type: inline-size; }
@container (max-width: 46rem) {
  .card > .table-wrap > .table--responsive:has(form[action*="/app/objekt-papiere/"]) { min-width: 0; }
  .card > .table-wrap > .table--responsive:has(form[action*="/app/objekt-papiere/"]) thead { display: none; }
  .card > .table-wrap > .table--responsive:has(form[action*="/app/objekt-papiere/"]) tr {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-1) var(--space-4); padding: var(--space-4) var(--card-pad); border-bottom: 1px solid var(--border);
  }
  .card > .table-wrap > .table--responsive:has(form[action*="/app/objekt-papiere/"]) tr:last-child { border-bottom: 0; }
  .card > .table-wrap > .table--responsive:has(form[action*="/app/objekt-papiere/"]) td {
    display: flex; align-items: baseline; gap: var(--space-2); width: auto; padding: .125rem 0; border: 0; text-align: left;
  }
  .card > .table-wrap > .table--responsive:has(form[action*="/app/objekt-papiere/"]) td::before {
    content: attr(data-label); flex: none; min-width: 88px; color: var(--text-subtle); font-size: var(--fs-sm);
  }
  .card > .table-wrap > .table--responsive:has(form[action*="/app/objekt-papiere/"]) td.is-primary {
    display: block; grid-column: 1 / -1; min-width: 0; font-weight: 600;
  }
  .card > .table-wrap > .table--responsive:has(form[action*="/app/objekt-papiere/"]) td.is-primary::before { display: none; }
  .card > .table-wrap > .table--responsive:has(form[action*="/app/objekt-papiere/"]) .truncate { max-width: none; white-space: normal; }
}
/* Schalter („Im Exposé“, „Preis auf Anfrage“, Logbuch …): der Knauf hängt in app.css am
   Label (top: 3px). Am Telefon ist das Label 44 px hoch und die Schiene steht mittig –
   der Knauf ragte oben aus ihr heraus. Am Feld verankert steht er in der Schiene. */
form[action*="/app/objekte"] .switch input { position: relative; flex: none; }
/* Datei und Schloss stehen neben ihrem Wort, nicht darüber (svg ist in app.css ein Block). */
.table--responsive:has(form[action*="/app/objekt-papiere/"]) td > :is(a.link, span.text-xs):has(> svg.ic) {
  display: inline-flex; align-items: center; gap: .375rem; min-width: 0;
}
/* Verknüpfte Projekte: das Symbol stand über dem Namen (svg ist in app.css ein Block). */
.list__item:has(> form[action*="/app/objekte/"][action*="/projekte/"]) > a.truncate > svg.ic {
  display: inline-block; vertical-align: -.2em; margin-right: .5rem;
}

/* ---------- 7. Nackte Kästchen ----------
   „behalten“ beim Sammel-Zurückziehen (Exposés) und die Auswahl auf „Bildtexte“
   sind Kästchen des Browsers ohne .check – blau vom System, im Dunkeln grell. Sie
   werden wie jedes Kästchen der Suite: Kante 3:1, Haken in der Schrift der Marke. */
input.checkbox,
#bildtexte ~ .card input:is([type="checkbox"], [type="radio"]) {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 18px; height: 18px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--kante); border-radius: 6px; background: var(--fuellung);
}
input.checkbox:checked,
#bildtexte ~ .card input:is([type="checkbox"], [type="radio"]):checked { background: var(--wahl); border-color: var(--wahl); }
#bildtexte ~ .card input[type="radio"] { border-radius: 50%; }
#bildtexte ~ .card input[type="radio"]:checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--wahl-auf); }
#bildtexte ~ .card input:disabled { opacity: .45; cursor: not-allowed; }
input.checkbox:checked::after,
#bildtexte ~ .card input[type="checkbox"]:checked::after {
  content: ""; position: absolute; inset: 0; background: var(--wahl-auf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* Tippziel am Telefon ist die Beschriftung samt Kästchen: 44 px. */
@media (max-width: 1023px) {
  label:has(> input.checkbox), #bildtexte ~ .card label:has(> input) { min-height: 2.75rem; }
}

/* ---------- 8. Bildtexte ---------- */
/* Die Vorschaubilder: der Stil im HTML zielt auf „#bildtexte .kachel“, #bildtexte ist
   aber der Seitenkopf – die Bilder standen in voller Größe der Zelle, hochkant höher. */
#bildtexte ~ .card .kachel {
  display: block; width: 7.5rem; height: 5rem; object-fit: cover;
  border-radius: var(--radius-xs); background: var(--surface-2);
}
/* „Wie“: Knopf links, Beschriftung und Erklärung rechts untereinander. Die Zeile
   brach sonst um, und die Erklärung stand als schmale Spalte unter dem Knopf. */
#bildtexte ~ .card label.row:has(> input[type="radio"]) {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: .5rem; row-gap: .125rem; width: 100%;
}
#bildtexte ~ .card label.row:has(> input[type="radio"]) > span { grid-column: 2; }
/* Das Feld bekam nur ein Viertel der Breite (die Zeile „Sprachen“ darunter hält alle
   Spuren des Rasters offen) – die Erklärung brach nach drei Wörtern um. */
@media (min-width: 641px) {
  #bildtexte ~ .card .form-grid > .field:has(input[name="modus"]) { grid-column: span 2; }
}
/* Spalte „Größe“: der Hinweis zu kleinen Fotos steht in einer Zelle mit nowrap und
   schob die Tabelle bei 1440 px aus der Karte – er war nur rollend zu lesen. */
#bildtexte ~ .card td.nowrap:has(> .text-warning) { width: 14rem; min-width: 14rem; white-space: normal; }
/* Der Vorschlag: Bild und Kästchen oben neben dem ersten Feld, nicht mittig neben dem dritten. */
#bildtexte ~ .card .table:has(input[name^="text["]) td { vertical-align: top; }
/* Am Telefon: die Felder standen in einer rollenden Tabelle, sichtbar blieben 70 px
   je Feld. Jede Zeile wird ein Block – Kästchen und Bild oben, die Sprachen darunter
   über die ganze Breite. */
@media (max-width: 640px) {
  #bildtexte ~ .card .table-wrap > .table:has(input[name^="text["]) { min-width: 0; }
  #bildtexte ~ .card .table:has(input[name^="text["]) :is(thead, tbody) { display: block; }
  #bildtexte ~ .card .table:has(input[name^="text["]) tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3);
    padding-block: var(--space-3); border-bottom: 1px solid var(--border);
  }
  #bildtexte ~ .card .table:has(input[name^="text["]) :is(th, td) { width: auto; padding: 0; border: 0; }
  #bildtexte ~ .card .table:has(input[name^="text["]) th:not(:first-child) { display: none; }
  #bildtexte ~ .card .table:has(input[name^="text["]) td:nth-child(3) { grid-column: 1 / -1; }
}

/* ---------- 9. Objektformular: Texte ---------- */
/* Die Formulierungshilfe ist ein eigenes Feld im Formular: getönt statt einer
   gestrichelten Haarlinie, die man kaum sah. Der Stil im HTML steht später im
   Dokument – deshalb div.ki-texte. */
div.ki-texte { border: 0; border-radius: var(--radius); padding: .875rem 1rem 1rem; background: var(--wash); }
div.ki-texte .textarea { background-color: var(--surface); }
/* Die gefundenen Stellen der Textpflege: das HTML nimmt var(--warning-bg, #fde68a) mit
   geerbter Schrift – im Dunkeln helle Schrift auf Hellgelb. Der Token fehlte nur. */
.textpflege { --warning-bg: color-mix(in srgb, var(--warning-fest) 22%, var(--surface)); }

/* ---------- 10. Aufklapper ----------
   „Antwort von Hand eintragen“, „Die E-Mail dazu“ (Registrierung) und „Vorschau in
   Absätzen“ (Textpflege im Formular): statt des Dreiecks des Browsers ein Winkel wie
   im Rest der Suite, am Telefon ein Tippziel von 44 px. */
details:has(> #registrierung_von_hand) > summary,
.reg-mail > summary, .textpflege details > summary {
  display: flex; align-items: center; gap: .5rem; width: fit-content; min-height: 2rem;
  list-style: none; cursor: pointer;
}
details:has(> #registrierung_von_hand) > summary::-webkit-details-marker,
.reg-mail > summary::-webkit-details-marker, .textpflege details > summary::-webkit-details-marker { display: none; }
details:has(> #registrierung_von_hand) > summary::before,
.reg-mail > summary::before, .textpflege details > summary::before {
  content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-fast) ease;
}
details[open]:has(> #registrierung_von_hand) > summary::before,
.reg-mail[open] > summary::before, .textpflege details[open] > summary::before { transform: rotate(90deg); }
.reg-mail > summary:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  details:has(> #registrierung_von_hand) > summary::before, .reg-mail > summary::before,
  .textpflege details > summary::before { transition: none; }
}
@media (max-width: 1023px) {
  details:has(> #registrierung_von_hand) > summary, .reg-mail > summary, .textpflege details > summary { min-height: 2.75rem; }
}
/* Die E-Mail steht wie das Schreiben darüber in einem eigenen Feld – vorher lief
   sie als loser Text ohne Rand unter den Brief und sah aus wie dessen Fortsetzung. */
.reg-mail[open] > p {
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-inset);
}

/* ---------- 11. Telefon: Tippziele und Kopfzeilen ---------- */
@media (max-width: 1023px) {
  /* Kundennamen in den Exposé-Zeilen und bei den Suchkunden (26 px hoch) und
     „bereits registriert …“ bei der Objektwahl (22 px): die Trefferfläche wächst
     unsichtbar auf 44 px, die Zeile bleibt, wie sie ist. */
  :is(#suchkunden, [x-show="tab === 'exposes'"]) .list__item a.font-medium[href*="/app/kunden/"],
  .reg-zeile a.badge[data-registriert] { position: relative; }
  :is(#suchkunden, [x-show="tab === 'exposes'"]) .list__item a.font-medium[href*="/app/kunden/"]::after,
  .reg-zeile a.badge[data-registriert]::after { content: ""; position: absolute; inset: calc(50% - 1.375rem) 0; }
  /* Der Projektname kürzt (overflow: hidden) und schnitte eine Fläche außen ab: Polster
     und Gegenrand. Ebenso die Datei eines Papiers: 12-px-Schrift, das Polster der
     Grundlage (.75rem, für 20 px gedacht) ergab 41 px. */
  .list__item:has(> form[action*="/app/objekte/"][action*="/projekte/"]) > a.truncate { padding-block: .5625rem; margin-block: -.5625rem; }
  .table--responsive:has(form[action*="/app/objekt-papiere/"]) td > a.link { padding-block: .875rem; margin-block: -.875rem; }
}
@media (max-width: 640px) {
  /* Suchprofile: der Kundenname stand in drei Zeilen neben „Aktiv“ und „Versand
     manuell“. Er bekommt die ganze Zeile, die Abzeichen stehen darunter. */
  section.card[id^="profil-"] > .card__header > .cluster > h3 { flex-basis: 100%; }
}

/* ===== Teil 60-vertraege-post ===== */
/* =========================================================================
   newways.suite – Gestaltung „Glas“ – Teil 60: Verträge, Post, Hilfe
   Maklervertrag-Assistent und Vertragsseite, Posteingang (Liste, Vorschlag,
   Nachricht, Antwort), Gesendet/Eingegangen in der Akte, E-Mail schreiben,
   der Begleiter, Hilfe & Support mit Ticket, das Handbuch.
   Grundsatz wie in Teil 00: Inhalt deckend, Bedienung aus Glas. Glas sind
   hier nur die schwebenden Knopfleisten (Assistent, Wortlaut) und das
   Verzeichnis des Handbuchs (nur neben dem Text; im Textfluss deckend);
   der Begleiter ist ein deckendes Fenster.
   Nur Tokens aus Teil 00 und app.css; Marke allein über --accent/--accent-text.
   ========================================================================= */

/* ---------- 1. Deckende Flächen dieses Bereichs ----------
   Wie .card in Teil 00: wer deckend ist, bekommt die drei Schriftstufen und die
   festen Zustandsfarben zurück (auf dem Feld gelten die dunkleren -frei). */
.action, .handbuch__text, .begleiter__panel {
  --text-muted: var(--tinte-2); --text-subtle: var(--tinte-3); --kante: var(--kante-fest);
  --knopf: var(--knopf-fest); --knopf-schatten: 0 0 0 0 transparent; --focus: var(--accent-text);
  --success: var(--success-fest); --warning: var(--warning-fest); --danger: var(--danger-fest); --info: var(--info-fest);
}

/* ---------- 2. Zustandsfarben, die es nur hier gibt ----------
   MailLog und MailMessage melden „fehlgeschlagen“ als Ton „red“ – den kennt
   keine Stufe, das Abzeichen stand grau da. Es ist dieselbe Farbe wie „rose“. */
.badge--red { background: var(--danger-soft); color: var(--danger-fest); }
/* Gold heißt „Sie sind am Zug“ – genau das sagen zwei Zustände hier:
   ein offener Vorschlag im Posteingang und ein vom Support beantwortetes Ticket. */
.page-head:has(.page-head__actions a[href$="/app/posteingang"]) .badge--amber,
a.list__item[href*="/app/support/"] .badge--blue,
.page-head__text:has(> a.breadcrumb[href$="/app/support"]) h1 > .badge--blue {
  background: var(--gold-soft); color: var(--gold-ink);
}

/* =========================================================================
   A. Der Vertragsassistent
   ========================================================================= */

/* Schrittnummer: gefüllter Kreis statt Strichring; der gewählte Schritt trägt die Marke. */
.mv-schritte__nr {
  min-width: 1.5rem; border: 0; font-size: .75rem; font-weight: 650;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.tab.is-active .mv-schritte__nr { background: var(--akzent-flaeche); color: var(--akzent-auf); }
.mv-schritte .badge { margin-inline-start: .125rem; }

/* Der Fokus springt beim Schrittwechsel auf die Überschrift (für Vorleser). Ein Rahmen um die
   ganze Kopfzeile sah aus wie ein Eingabefeld – die Stelle zeigt eine Unterstreichung. */
.mv-assistent [data-schritt-inhalt] h2[tabindex="-1"]:focus { outline: none; }
.mv-assistent [data-schritt-inhalt] h2[tabindex="-1"]:focus-visible {
  text-decoration: underline 2px var(--focus); text-underline-offset: .3em;
}

/* Die Beispielrechnung ist ein Ergebnis, kein Eingabefeld: eine getönte Fläche statt Strichrahmen. */
.mv-beispiel { border: 0; border-radius: var(--radius); background: var(--fuellung); }
.mv-beispiel__zeilen strong { font-family: var(--font-display); font-weight: 650; letter-spacing: -.01em; }
.mv-ausgabe { font-family: var(--font-display); font-size: 1.125rem; }
.mv-objektwahl { padding: .25rem; border-radius: var(--radius-sm); background: var(--fuellung); }

/* Die Knopfleiste schwebt als Glaskapsel mittig über dem Formular (Bedienung, nicht Inhalt).
   Unter ihr läuft Inhalt durch – deshalb die dichte Glasstufe (--glass-surface, 88 %). So breit
   wie die Karte wirkte sie wie deren Fuß; schmal und mittig steht sie frei vom Begleiter-Knopf. */
.mv-leiste {
  bottom: var(--schwebe); margin: var(--space-2) auto 0;
  width: fit-content; min-width: min(100%, 28rem); gap: var(--space-2) var(--space-4);
  padding: .375rem .375rem .375rem 1rem; border-top: 0; border-radius: 1.75rem;
  background-color: var(--glass-surface); background-image: var(--glas-glanz);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glas-rahmen), 0 0 0 1px var(--border), var(--glass-shadow);
}
.mv-leiste__stand { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* „Weiter“ steht immer rechts – auch wenn „Zurück“ und der Stand ausgeblendet sind. */
.mv-leiste > .btn--primary { margin-left: auto; }
.mv-leiste > .btn--quiet:first-child { margin-left: -.625rem; }

/* =========================================================================
   B. Die Vertragsseite: Wortlaut, Eckdaten, Senden
   ========================================================================= */
.mv-klausel__nr { font-family: var(--font-display); font-weight: 650; }
.mv-klausel__kopf strong { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.mv-teil { padding-top: var(--space-2); color: var(--text-muted); }
/* „Parte A“ als erste Zeile der Karte: Kartenpolster und Abstand zum Vorgänger addierten sich zu einer Lücke. */
.card__body > .mv-teil:first-child { margin-top: 0; padding-top: 0; }
/* Die zweite Sprache: eine leise Fläche statt Strich und Kursiv – Kursiv über zehn Zeilen
   liest sich schwer; die Fläche trennt die Sprachen ebenso deutlich. */
.mv-klausel__sp2 {
  padding: .625rem .875rem; border-left: 0; border-radius: var(--radius-sm);
  background: var(--fuellung); color: var(--text-muted); font-style: normal;
}
/* Im Assistenten steht je Sprache ein eigenes Feld; ohne Luft klebte „Deutsch“ am spanischen Text. */
.mv-klausel > .field + .field { margin-top: var(--space-3); }
.mv-klausel__text { line-height: 1.55; }

/* „Wortlaut speichern“ klebt, wenn es etwas zu speichern gibt – dann als Glaskapsel in der Karte. */
.mv-speicherleiste.is-klebend {
  /* Glas über Inhalt: die Schrift nimmt die dunklere Stufe wie alles auf Glas (Teil 00, Abschnitt 4). */
  --text-muted: var(--tinte-frei); --text-subtle: var(--tinte-frei); --focus: var(--fokus-frei);
  bottom: var(--schwebe); margin: 0 .75rem .75rem;
  padding: .375rem .375rem .375rem 1.125rem; border-top: 0; border-radius: 1.75rem;
  background-color: var(--glass-surface); background-image: var(--glas-glanz);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glas-rahmen), 0 0 0 1px var(--border), var(--glass-shadow);
}
.mv-speicherleiste.is-klebend > .btn { margin-left: auto; }
/* „Gesendet … an <Adresse>“: Abzeichen stehen in einer Zeile (app.css) – mit einer langen Adresse lief
   die Seite am Telefon auf 396 px. Dieses darf umbrechen, die Adresse auch mitten im Wort. */
#mv_gesendet { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
/* Warn- und Ladesymbol stehen im Hinweissatz; als Block (Grundregel für svg) stand das Dreieck allein in einer Zeile. */
#mv_senden .hint > svg, .mv-assistent .hint > svg {
  display: inline-block; width: .875rem; height: .875rem; margin-right: .125rem; vertical-align: -.125em;
}

/* Der Begleiter-Knopf (unten rechts, fest) lag über „Weiter“ bzw. „Wortlaut speichern“.
   Solange die klebende Leiste da ist, steht er eine Leistenhöhe höher (die Assistentenleiste
   steht mittig und braucht das nur am Telefon). */
@media (min-width: 1024px) {
  body:has(.mv-speicherleiste.is-klebend) .begleiter { bottom: calc(var(--schwebe) + 4.5rem); }
  body:has(.mv-speicherleiste.is-klebend) .begleiter__panel { height: min(34rem, calc(100vh - 12.5rem)); }
  /* Meldungen (Glas, unten rechts) lagen auf dem rechten Ende der Kapseln – sie rücken über die Kapsel
     und, wo er mit hochgerückt ist, über den Begleiter-Knopf (3,25rem). */
  body:has(.mv-leiste) .toasts { bottom: calc(var(--schwebe) + 4.5rem); }
  body:has(.mv-speicherleiste.is-klebend) .toasts { bottom: calc(var(--schwebe) + 8.25rem); }
}

/* =========================================================================
   C. Posteingang: Liste
   ========================================================================= */
/* Das Symbol trägt die Marke – wie in der Seitenleiste; die Kachel ist leise getönt. */
.inbox-card { padding: 1rem var(--card-pad) 1rem 1rem; gap: 1rem; }
.inbox-card__icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-text);
}
.inbox-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; }
.inbox-card__main { gap: .1875rem; }
.inbox-card__chevron { color: var(--text-muted); }
.inbox-card:hover .inbox-card__chevron { color: var(--text); }

/* Der Abruf: der Balken trägt die Marke und steht auf dem Feld. Eine durchscheinende Schiene nahm im
   Dunkeln über hellen Flecken den Abstand zum Balken (2,7:1) – die Schiene ist deshalb deckend. */
.abruf__bar { height: 6px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
.abruf__fill { background: var(--wahl); }
.abruf__text { font-size: var(--fs-xs); }

/* Warten und zur Seite Gelegtes: die Liste in der Karte dichter an den Rand. */
.pending-item .list__title { font-weight: 600; }

/* =========================================================================
   D. Posteingang: Vorschlag, Nachricht, Antwort
   ========================================================================= */
/* „Das kam herein“ neben „Nachricht öffnen“ brach in der schmalen Spalte zweizeilig um: der Titel
   behält seine Breite, der Knopf rückt in die nächste Zeile (der Kopf bricht um, app.css). */
.card__header:has(> a[href*="/app/posteingang/nachricht/"]) > h2 { flex: 1 0 auto; }

/* Die eingegangene Nachricht: zitiert, mit Balken links – getönt statt umrandet. */
.mail-quote {
  border: 0; border-radius: var(--radius-sm); background: var(--fuellung);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--text) 22%, transparent);
  padding: .875rem 1rem .875rem 1.125rem;
}
/* Der Entwurf eines Briefs: dieselbe leise Fläche, ohne Balken – er ist noch nicht gesendet. */
.letter { border: 0; border-radius: var(--radius); background: var(--fuellung); padding: 1.125rem 1.25rem; }

/* Die Aktionen eines Vorschlags sind Karten wie alle anderen: ohne Haarlinie, Kopf ohne Grauband. */
.action { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.action__head {
  min-height: 3.25rem; padding: var(--space-3) var(--card-pad);
  background: transparent; border-bottom-color: var(--border);
}
.action__head svg { color: var(--accent-text); }
.action__title { font-family: var(--font-display); font-size: 1rem; letter-spacing: -.01em; }
.action__body { padding: var(--card-pad); }
.action .text-xl.num, .action .num.font-bold { font-family: var(--font-display); letter-spacing: -.02em; }

/* Begründung, Wege, Ergebnisse, Unterschiede: getönte Flächen ohne Rahmen. */
.why, .route, .result, .diff__value { border-color: transparent; background: var(--fuellung); }
.why { border-radius: var(--radius); }
.why > summary { min-height: 2.75rem; color: var(--text-muted); }
.why > summary:hover { color: var(--text); }
.route { border-radius: var(--radius); padding: 1.125rem 1.25rem; }
.route h4 { font-family: var(--font-display); font-size: 1rem; letter-spacing: -.01em; }
/* Nach mehreren Anläufen tritt „Lieber selbst machen“ hervor: getönt in der Marke, mit Ring. */
.route--strong { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-text) 55%, transparent); }
/* Die Nummer der Wege ist ein Chip im Markup – hier ein ruhiger Kreis, am Telefon ohne 44-px-Höhe (kein Tippziel). */
.route .chip {
  min-height: 0; width: 1.75rem; height: 1.75rem; padding: 0; justify-content: center;
  border-radius: var(--radius-full); background: var(--surface); color: var(--text);
  font-weight: 650; font-size: var(--fs-sm); box-shadow: var(--shadow-xs); pointer-events: none;
}
.result { border-radius: var(--radius-sm); }
.result__icon { border-radius: var(--radius-xs); background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-xs); }
.diff { border-left-width: 3px; }
.diff--geaendert { border-left-color: var(--accent-text); }
.diff__value { border-radius: var(--radius-xs); }

/* =========================================================================
   E. Post in der Akte (Eingegangen, Gesendet) und „E-Mail schreiben“
   ========================================================================= */
/* Die Büroklammer steht mitten im Satz; als Block (Grundregel für svg) brach sie die Zeile dreimal. */
.table td .umbruch > svg { display: inline-block; width: .875rem; height: .875rem; vertical-align: -.125em; }
.table td .text-danger.umbruch { margin-top: .125rem; }
/* „Signatur einrichten“ steht als Verweis im leisen Satz unter dem Kästchen – ohne Strich sah er aus wie Text. */
.check a[href$="/app/signatur"] {
  color: var(--text); text-decoration: underline 1px; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.check a[href$="/app/signatur"]:hover { text-decoration-color: currentColor; }

/* =========================================================================
   F. Hilfe & Support, Ticket
   ========================================================================= */
/* Die eigenen Nachrichten „im eigenen Ton“ (so der Kommentar im Markup): der Rand kommt als
   Inline-Stil, die Fläche hier. Die Tönung ist deckend, die Schrift hält auf ihr wie auf der Karte. */
.card[style*="--border-accent"] { background: var(--wash); }

/* =========================================================================
   G. Das Handbuch
   ========================================================================= */
/* Der Text lag direkt auf dem Farbfeld – Inhalt gehört auf eine deckende Karte. */
.handbuch__text {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1.25rem, 2.8vw, 2.25rem);
}
/* Das Verzeichnis ist Navigation auf dem Feld: eine Glastafel wie die Seitenleiste. */
.handbuch__klapp {
  border: 0; border-radius: var(--radius-lg);
  background-color: var(--glass-bg); background-image: var(--glas-glanz);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glas-rahmen), var(--shadow-sm);
}
.handbuch__summary { min-height: 2.75rem; color: var(--text-muted); font-weight: 600; }
.handbuch__liste a { border-radius: var(--radius-xs); }
.handbuch__liste a:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.handbuch__nr { color: var(--text-muted); }
/* Die Kopfleiste schwebt und klebt (Teil 00): Verzeichnis und Sprungziele halten Abstand zu ihr. */
@media (min-width: 901px) {
  .handbuch__inhalt { top: calc(var(--topbar-h) + var(--space-4)); }
  .handbuch__liste { max-height: calc(100vh - var(--topbar-h) - 7rem); }
}
.handbuch__text :where(h2, h3) { scroll-margin-top: calc(var(--topbar-h) + var(--space-5)); }
.handbuch__text h2 { border-top-color: var(--border); letter-spacing: -.02em; }
/* Tabellen im Handbuch stehen auf der Karte: die Scrollschatten decken mit der Kartenfarbe. */
.handbuch__text .table-wrap { --scroll-cover: var(--surface); }
/* Pfade und Befehle stehen als Code im Satz: getönt, damit man sie findet, und umbrechbar –
   ein langer Pfad schob die Seite am Telefon auf 407 px. */
.handbuch__text code {
  padding: .0625rem .3125rem; border-radius: 6px; background: var(--fuellung); overflow-wrap: anywhere;
}

/* =========================================================================
   H. Der Begleiter
   ========================================================================= */
/* Das Fenster enthält ein Gespräch – Inhalt, also deckend (wie der Dialog in Teil 00), eine
   Stufe über den Karten und mit Lichtrand, damit es sich im Dunkeln von ihnen abhebt. */
.begleiter--team { top: calc(var(--topbar-h) + 1rem); right: 1.25rem; bottom: auto; }
.begleiter--team .begleiter__panel {
  top: 0; bottom: auto;
  height: min(40rem, calc(100dvh - var(--topbar-h) - 2rem));
}
.begleiter__panel {
  background: var(--surface-hoch); -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-xl);
}
.begleiter__kopf { padding: .75rem .625rem .75rem 1rem; border-bottom-color: var(--border); }
.begleiter__marke { font-family: var(--font-display); letter-spacing: -.01em; }
.begleiter__hinweis { margin: 0; color: var(--text-muted); font-size: .75rem; line-height: 1.5; }
.begleiter__marke-zeichen { width: 1.75rem; height: 1.75rem; background: var(--accent-soft); color: var(--accent-text); }
/* Arbeiten | Hilfe: eine Schiene mit zwei gleich breiten Hälften, die gewählte schwebt. */
.begleiter__modi { background: color-mix(in srgb, var(--text) 6%, var(--surface-hoch)); }
.begleiter__modus { flex: 1 1 0; min-height: 2rem; color: var(--text-muted); }
.begleiter__modus:hover { color: var(--text); }
.begleiter__modus.is-active { background: var(--glass-tint); font-weight: 600; box-shadow: var(--pille-schatten); }
/* Vorschläge sind stille Knöpfe wie überall (Füllung statt Linie). */
.begleiter__vorschlaege button {
  border: 0; background: var(--knopf); color: var(--text); min-height: 2rem;
  border-radius: var(--control-radius); padding: .375rem .875rem; transition: background-color var(--dur-fast) ease;
}
.begleiter__vorschlaege button:hover { background: color-mix(in srgb, var(--text) 11%, var(--surface-hoch)); }
/* Sprechblasen: die Antwort leise getönt, die Frage in der Marke (Farben in Teil 00). */
.begleiter__text { max-width: 90%; }
.begleiter__zug--assistent .begleiter__text {
  background: color-mix(in srgb, var(--text) 6%, var(--surface-hoch)); border-radius: 18px 18px 18px 6px;
}
.begleiter__zug--mensch .begleiter__text { border-radius: 18px 18px 6px 18px; }
/* Ein Zug, der nur eine Fehlermeldung trägt, hat einen leeren Textabsatz – er stand als leere Blase da. */
.begleiter__text:empty { display: none; }
/* Aufzählungen in Antworten: der Reset in app.css nimmt jeder Liste den Punkt – hier gehört er hin. */
.begleiter__text--reich ul { list-style: disc; }
.begleiter__text--reich ol { list-style: decimal; }
.begleiter__text--reich li::marker { color: var(--text-muted); }
/* Code im Satz (Menüwege, Pfade): app.css setzt .82em – bei 14 px Satz 11,5 px, unter der Untergrenze. */
.begleiter__text--reich code { font-size: max(.75rem, .86em); }
/* Ein Vorschlag des Agenten wartet auf Sie: Karte mit Markenbalken. Übernommen und verworfen
   werden über Farbe und Strich leiser, nicht über Deckkraft – .55 drückte die Schrift unter 3:1. */
.begleiter__aktion {
  border: 0; border-radius: var(--radius-sm); background: var(--surface);
  padding: .625rem .75rem .625rem 1rem;
  box-shadow: inset 3px 0 0 var(--accent-text), inset 0 0 0 1px var(--border-strong);
}
.begleiter__aktion.is-uebernommen { opacity: 1; box-shadow: inset 3px 0 0 var(--success), inset 0 0 0 1px var(--border-strong); }
.begleiter__aktion.is-verworfen { opacity: 1; box-shadow: inset 3px 0 0 var(--border-strong), inset 0 0 0 1px var(--border); }
.begleiter__aktion.is-verworfen strong { color: var(--text-muted); text-decoration: line-through; }
.begleiter__aktion-kopf strong { font-weight: 600; }
/* Eingabe wie jedes Feld der Suite: gefüllt, Kante 3:1, im Fokus Ring statt Umriss. */
.begleiter__eingabe { padding: .625rem; gap: .5rem; border-top-color: var(--border); }
.begleiter__eingabe textarea {
  min-height: 2.75rem; border: 1px solid var(--kante); border-radius: var(--control-radius);
  background: var(--fuellung); padding: .5rem .75rem; line-height: 1.45;
}
.begleiter__eingabe textarea::placeholder { color: var(--text-subtle); opacity: 1; }
.begleiter__eingabe textarea:focus {
  outline: none; border-color: var(--focus); background: var(--surface-hoch);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent);
}
.begleiter__mikro { width: 2.25rem; height: 2.25rem; border-color: var(--kante); background: transparent; color: var(--text-muted); }
.begleiter__mikro:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
/* Aufnahme: Weiß auf dem hellen Rot des Dunkelmodus stand bei 2,1:1 – die Schrift nimmt die Gegenfarbe. */
.begleiter__mikro.is-aufnahme, .begleiter__mikro-zeit { background: var(--danger); color: var(--text-inverse); }
.begleiter__vorlesen { color: var(--text-muted); }
/* Offen ist der Knopf ruhig: eine deckende Pille eine Stufe über den Karten. */
.begleiter__knopf.is-offen {
  border: 0; background: var(--surface-hoch); color: var(--text);
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-lg);
}

/* =========================================================================
   I. Telefon
   ========================================================================= */
@media (max-width: 1023px) {
  .begleiter--team { top: calc(var(--topbar-h) + env(safe-area-inset-top) + .5rem); bottom: auto; right: .75rem; }
  .begleiter--team .begleiter__panel { width: min(26rem, calc(100vw - 1.5rem)); height: min(36rem, calc(100dvh - var(--topbar-h) - var(--tabbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.5rem)); }
  /* Die Kapsel schwebt FEST über der unteren Leiste und über dem Saum, der ihr Glas sonst verschleiert.
     Klebend blieb sie in ihrem Formular: stand dessen Anfang tiefer (nach einer Fehlermeldung, auf kurzen
     Telefonen, beim Hereinrollen der Wortlaut-Karte), lag sie hinter der unteren Leiste – Glas über Glas,
     „Weiter“ nicht erreichbar. Platz am Seitenende hält .page frei (app.css: 4,25rem über der Leiste). */
  .mv-leiste, .mv-speicherleiste.is-klebend {
    position: fixed; z-index: 38; inset-inline: .625rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); margin: 0 auto;
  }
  .mv-leiste { min-width: min(100% - 1.25rem, 28rem); }
  .mv-speicherleiste.is-klebend { max-width: 40rem; }
  body:has(.mv-leiste, .mv-speicherleiste.is-klebend) .begleiter:not(.begleiter--team) { bottom: calc(5.5rem + 4.25rem + env(safe-area-inset-bottom)); }
  /* Meldungen erscheinen über Kapsel und Knopf, nicht auf ihnen. */
  body:has(.mv-leiste, .mv-speicherleiste.is-klebend) .toasts { bottom: calc(5.5rem + 8rem + env(safe-area-inset-bottom)); }
  /* Tippziele im Begleiter: 44 px. */
  .begleiter__modus, .begleiter__vorschlaege button { min-height: 2.75rem; }
  .begleiter__mikro { width: 2.75rem; height: 2.75rem; }
  /* „Vorlesen“ war 18 px hoch. Die Fläche wächst auf 44 px, das Zeichen bleibt, wo es stand. */
  .begleiter__vorlesen { min-width: 2.75rem; min-height: 2.75rem; margin: -.8125rem 0 -.8125rem -.8125rem; }
  .handbuch__liste a { border-radius: var(--radius-sm); }
  /* Weitere Tippziele auf 44 px: der Rückweg im Ticket, „Gelesenen Text ansehen“ bei Anhängen. Der Betreff
     einer wartenden Nachricht bleibt eine Zeile – die Fläche wächst unsichtbar über das Polster. */
  a.breadcrumb[href$="/app/support"], .file-item details > summary.link { min-height: 2.75rem; display: inline-flex; align-items: center; }
  a.list__title[href*="/app/posteingang/nachricht/"] { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
}
@media (max-width: 900px) {
  /* Hier steht das Verzeichnis im Textfluss und rollt mit – aufgeklappt unter die Glasleisten oben und
     unten (Glas unter Glas). Es wird deckend wie eine Karte, mit den Schriftstufen des Deckenden. */
  .handbuch__klapp {
    --text-muted: var(--tinte-2); --text-subtle: var(--tinte-3);
    background-color: var(--surface); background-image: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-sm);
  }
}
@media (max-width: 780px) {
  /* Vertragsliste als Karten: Partner und Objekt sind Verweise von 20 px Höhe – das Tippziel wächst auf
     44 px, die Zeile nicht (Polster und Gegenrand wie in Teil 00). */
  #mv_liste td:not(.is-primary) > a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
}
@media (max-width: 640px) {
  /* Zwei Knöpfe teilen sich die Kapsel; der Stand steht schon in den Reitern. */
  .mv-leiste { width: auto; padding: .375rem; }
  .mv-leiste > .btn { flex: 1 1 0; justify-content: center; }
  .mv-leiste > .btn--quiet:first-child { margin-left: 0; }
  .mv-speicherleiste.is-klebend { padding-left: 1rem; }
  body:has(.mv-leiste, .mv-speicherleiste.is-klebend) .begleiter:not(.begleiter--team) .begleiter__panel { height: min(28rem, calc(100dvh - 17.5rem)); }
  .inbox-card { padding: .875rem 1rem; gap: .5rem .75rem; }
  .inbox-card__icon { width: 2.25rem; height: 2.25rem; }
  .route { padding: 1rem; }
  .handbuch__text { border-radius: var(--radius); }
}
@media (max-width: 560px) {
  /* Das Abzeichen nahm dem Titel ein Drittel der Breite – nach zwei Zeilen war „Exposé OB-2026-101 an Jana …“
     abgeschnitten. Hier steht es unter dem Text (der Pfeil ist in app.css schon ausgeblendet). */
  .inbox-card { flex-wrap: wrap; }
  .inbox-card__main { flex-basis: calc(100% - 3rem); }
  .inbox-card__side { margin-left: 3rem; }
  .inbox-card__side:not(:has(> .badge)) { display: none; }
}

/* =========================================================================
   J. Rückfälle und Bewegung
   ========================================================================= */
/* Ohne Unschärfe oder mit abbestellter Transparenz werden die Glasflächen dieses Bereichs deckend:
   schwebende Leisten in der Stufe der Dialogköpfe, das Verzeichnis wie die Seitenleiste. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .mv-leiste, .mv-speicherleiste.is-klebend { background-color: var(--surface-hoch); }
  .handbuch__klapp { background-color: var(--surface-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .mv-leiste, .mv-speicherleiste.is-klebend {
    background-color: var(--surface-hoch); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .handbuch__klapp { background-color: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .begleiter__vorschlaege button, .abruf__fill, .why > summary svg { transition: none; }
}

/* ===== Teil 70-einstellungen ===== */
/* =========================================================================
   newways.suite – Gestaltung „Glas“ – Teil 70: Einstellungen und Verwaltung
   Einstellungen mit allen Reitern (.einstellungen), die Vorlagenpflege der
   Verträge (#vorlage-formular), Team, Profil, E-Mail-Signatur, Mein Vertrag,
   die Einrichtung neuer Mandanten (.setup). Das Band der Betreiber-Ansicht (.peek)
   gestaltet allein Teil 90 (dieselbe Tinte wie der Betreiberbereich) – ein Herr
   pro Eigenschaft. Nur, was die Grundlage nicht von selbst trifft. Seiten ohne eigene
   Klasse erkennt der Teil an einem Baustein, den nur sie tragen (:has()).
   ========================================================================= */

/* ---------- 1. Tokens ----------
   Die Vorschauflächen zeigen das ERGEBNIS: ein helles Logo liegt auf Beleg und
   Portal hell, ein dunkles im Dunkelmodus dunkel, die Signatur beim Empfänger
   auf Weiß. Sie bleiben deshalb in beiden Themen gleich – beide Blöcke nennen
   die Werte ausdrücklich. */
:root {
  --probe-hell: #ffffff; --probe-hell-karo: #e3e6eb; --probe-hell-schrift: #4a5059;
  --probe-hell-kante: rgba(18, 22, 29, .47);   /* 3,15:1 auf Weiß, 3,06:1 auf dem Karo */
  --probe-dunkel: #14161a; --probe-dunkel-karo: #2a2e35; --probe-dunkel-schrift: #c3c7ce;
  --probe-dunkel-kante: rgba(255, 255, 255, .42); /* 4,1:1 auf #14161a, 3,9:1 auf dem Karo */
  /* Kante beim Überfahren und Ziehen: die Marke, zur Probe hin abgedunkelt bzw. aufgehellt – mindestens
     5,5:1 auf Probe und Karo (Oliv, Blau, Gold, Koralle). --accent-text gehört zum Thema, nicht zur
     Probe: dunkel auf der hellen Probe 2,69–3,4:1, hell auf der dunklen 2,7–3,4:1. */
  --probe-hell-wahl: color-mix(in srgb, var(--accent) 45%, #12161d);
  --probe-dunkel-wahl: color-mix(in srgb, var(--accent) 45%, #ffffff);
}
html[data-theme="dark"] {
  --probe-hell: #ffffff; --probe-hell-karo: #e3e6eb; --probe-hell-schrift: #4a5059;
  --probe-hell-kante: rgba(18, 22, 29, .47);
  --probe-dunkel: #14161a; --probe-dunkel-karo: #2a2e35; --probe-dunkel-schrift: #c3c7ce;
  --probe-dunkel-kante: rgba(255, 255, 255, .42);
  --probe-hell-wahl: color-mix(in srgb, var(--accent) 45%, #12161d);
  --probe-dunkel-wahl: color-mix(in srgb, var(--accent) 45%, #ffffff);
}

/* ---------- 2. Bereichsliste der Einstellungen ----------
   Am Rechner eine Glastafel wie die Seitenleiste: sie ist Navigation und liegt
   auf dem Feld. Die Auswahl ist die deckende Pille der Grundlage. */
@media (min-width: 1200px) {
  .einstellungen__nav {
    top: calc(var(--topbar-h) + var(--space-4));
    padding: .5rem; border-radius: var(--radius-xl);
    background-color: var(--glass-bg); background-image: var(--glas-glanz);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glas-rahmen), var(--glass-shadow);
  }
  .einstellungen__nav .stack { gap: 2px; }
  .einstellungen__nav .nav-item { min-height: 2.5rem; padding-inline: .75rem; }
  .einstellungen.split { gap: var(--space-6); }
}
/* Bis 1439 px zählt jeder Pixel für den Inhalt (Nummernkreise): die Liste so schmal, wie ihr
   längster Eintrag („Belege & Steuern“) es erlaubt. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .einstellungen.split { grid-template-columns: 11.75rem minmax(0, 1fr); }
}

/* ---------- 3. Inhalt der Einstellungen ---------- */
/* Formulare ohne .stack (Assistent, Verifactu) trugen ihre Karten ohne Abstand. */
.einstellungen__inhalt form:not(.stack) > .card + .card { margin-top: var(--space-5); }
/* Fuß der Karte: Knopf und Satz daneben brauchen Luft – vorher klebten sie aneinander. */
:is(.einstellungen__inhalt, .page:has(form[action$="/app/signatur"])) .card__footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
}
:is(.einstellungen__inhalt, .page:has(form[action$="/app/signatur"])) .card__footer > form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
}
/* Eine Karte, die nur einen Fuß trägt (E-Rechnung, DATEV), ist keine Karte: der Knopf steht
   auf dem Feld wie unter Verifactu. */
.einstellungen__inhalt .card:has(> .card__footer:only-child) { background: none; box-shadow: none; overflow: visible; }
.einstellungen__inhalt .card > .card__footer:only-child { padding: 0; background: none; border-top: 0; }
/* Eine Karte, die nur einen Hinweis trägt (Objekte: „Der Hinweis fehlt …“), rahmte ihn doppelt:
   der Hinweis ist selbst eine deckende Fläche und steht allein. */
.einstellungen__inhalt .card:has(> .card__body:only-child > .alert:only-child) { background: none; box-shadow: none; overflow: visible; }
.einstellungen__inhalt .card > .card__body:only-child:has(> .alert:only-child) { padding: 0; }
/* Kartenkopf mit langem Zusatz: der Zusatz bricht unter den Titel, statt ihn zu stauchen
   („HTML-/Quelltext“ in der Seitenkarte der Signatur, „Wie Assistent und …“ am Telefon). */
:is(.einstellungen__inhalt, .page:has(form[action$="/app/signatur"])) .card__header { flex-wrap: wrap; row-gap: var(--space-1); }
:is(.einstellungen__inhalt, .page:has(form[action$="/app/signatur"])) .card__header > :is(h2, h3) { flex: 1 0 auto; max-width: 100%; }
:is(.einstellungen__inhalt, .page:has(form[action$="/app/signatur"])) .card__header > :is(h2, h3) + .text-xs { margin-left: auto; }
/* Aufklapper ohne Klasse (Postfach hinzufügen): der Pfeil des Systems wird ein Winkel wie
   in den übrigen Aufklappern, die Zeile ein Tippziel. */
.einstellungen__inhalt details:not([class]) > summary {
  display: flex; align-items: center; gap: .625rem; width: fit-content; min-height: 2.75rem; list-style: none;
}
.einstellungen__inhalt details:not([class]) > summary::-webkit-details-marker { display: none; }
.einstellungen__inhalt details:not([class]) > summary::before {
  content: ""; width: .4375rem; height: .4375rem; margin-left: .125rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg;
  transition: rotate var(--dur) var(--ease);
}
.einstellungen__inhalt details[open]:not([class]) > summary::before { rotate: 45deg; }

/* Karten IN Karten (Kennzahlen unter Assistent und System, Schriftpaar unter Objekte):
   eingelassen statt schwebend – eine Karte mit Schatten auf einer Karte wirkt wie ein Fehler. */
.einstellungen__inhalt .card .card {
  background: var(--fuellung); border-radius: var(--radius); box-shadow: none; --scroll-cover: var(--fuellung);
}
.einstellungen__inhalt .card .card .stat { padding: .875rem 1rem 1rem; }
.einstellungen__inhalt .card .card .stat__value { font-size: clamp(1.375rem, 1.1rem + .6vw, 1.75rem); }
/* Kennzahlen in der Karte: feste Spalten statt auto-fit – neben der Bereichsliste standen vier
   als 3 + 1 (Assistent) und sieben als 3 + 3 + 1 (System), am Telefon vier untereinander.
   Vier nebeneinander erst ab 1440 px: darunter brach „ohne Preise“ in zwei Zeilen. */
.einstellungen__inhalt .card .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1440px) { .einstellungen__inhalt .card .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Wahlkarte (Schriftpaar): die gewählte trägt den Ring der Marke wie ein Chip. */
.einstellungen__inhalt .card .card--link:hover { background: color-mix(in srgb, var(--text) 7%, var(--surface)); box-shadow: none; }
.einstellungen__inhalt .card .card--link:has(input:checked) {
  background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-text);
}
.einstellungen__inhalt .card .card--link:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Auswahllisten mit der Klasse .input (Verifactu, Stimme): sonst stand dort der Pfeil des Systems. */
:is(.einstellungen__inhalt, .page:has(form[action$="/app/signatur"])) select.input {
  -webkit-appearance: none; appearance: none;
  background-image: var(--pfeil); background-repeat: no-repeat; background-size: 16px;
  background-position: right .875rem center; padding-right: 2.5rem;
}
/* Feld mit Knopf (Modell laden, Kopieren): der Knopf schließt das Feld rechts ab, statt als
   Pille daneben zu hängen. */
.einstellungen__inhalt .input-group > .btn {
  flex: none; margin-left: -1px; border-radius: 0 var(--control-radius) var(--control-radius) 0;
  --btn-border: var(--kante); min-height: var(--control-h);
}

/* Nummernkreise (Einstellungen und Einrichtung): Felder in der Tabelle. Mit dem Polster der
   Grundlage verschwand die Zahl in „Stellen“ ganz, das Muster war nach sieben Zeichen abgeschnitten. */
:is(.einstellungen__inhalt, .setup__body) .table:has(.input--sm) { --cell-px: .375rem; }
:is(.einstellungen__inhalt, .setup__body) .table .input--sm { padding-inline: .625rem; }
:is(.einstellungen__inhalt, .setup__body) .table :is(td.num, td.text-right) .input { width: 4rem; text-align: right; }
/* Feste Breiten statt Mindestbreiten: sonst meldete das Feld seine Vorgabebreite (~20 Zeichen),
   die Tabelle verteilte den Platz danach und brach Bereich und Vorschau ohne Not um. */
.einstellungen__inhalt .table td[data-label="Muster"] .input { width: 11rem; }
.einstellungen__inhalt .table td[data-label="Präfix"] .input { width: 4.5rem; }
.setup__body .table td:nth-child(2) .input { min-width: 4.25rem; }
.einstellungen__inhalt .table:has(.input--sm) td.is-primary { min-width: 6.5rem; }
.einstellungen__inhalt .table .check { align-items: center; }
/* Die Vorschau brach in drei Zeilen („ANG-/2026-/0003“), bei 1280 px lief die Tabelle 143 px
   über. Platz schaffen: Stellen ist ein- bis zweistellig, „zurücksetzen“ sagt am Rechner schon
   der Spaltenkopf (für Vorleser bleibt es), lange Bereiche trennen. */
.einstellungen__inhalt .table td[data-label="Stellen"] .input { width: 3.5rem; }
.einstellungen__inhalt .table:has(.input--sm) td.is-primary { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 5; }
/* Neben der Bereichsliste (1200–1439 px) bleiben der Tabelle ~690 px: enger setzen. Die
   Mindestbreite aller Tabellen (46rem, app.css) braucht sie nicht – die Felder halten sie breit. */
.einstellungen__inhalt .table-wrap > .table:has(.input--sm) { min-width: 0; }
@media (min-width: 1200px) and (max-width: 1439px) {
  .einstellungen__inhalt .table:has(.input--sm) { --cell-px: .25rem; }
  .einstellungen__inhalt .table td[data-label="Muster"] .input { width: 10.75rem; }
  .einstellungen__inhalt .table td[data-label="Nächste"] .input { width: 3.75rem; }
}
/* Auf dem Tablett schreiben die Felder in 16 px (app.css, gegen den Zoom von iOS): das Muster
   braucht dort mehr Breite, die Zahlen geben sie ab. */
@media (min-width: 781px) and (max-width: 1023px) {
  .einstellungen__inhalt .table td[data-label="Muster"] .input { width: 12.5rem; padding-inline: .5rem; }
  .einstellungen__inhalt .table :is(td.num, td.text-right) .input { width: 3.5rem; }
}
@media (min-width: 781px) {
  .einstellungen__inhalt .table td[data-label="Jährlich"] .check__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Aufklapper („Warum“, Platzhalter): eine getönte Fläche ohne Haarlinie wie die Felder. */
:is(.einstellungen__inhalt, #vorlage-platzhalter, #vorlage-formular) .why {
  border-color: transparent; border-radius: var(--radius-sm); background: var(--fuellung);
}
:is(.einstellungen__inhalt, #vorlage-platzhalter, #vorlage-formular) .why > summary { min-height: 2.75rem; }
:is(.einstellungen__inhalt, #vorlage-formular) .diff__value { background: var(--surface-inset); border-color: var(--border-strong); }
.einstellungen__inhalt .panel { background: var(--fuellung); }

/* Liste der Vertragsvorlagen: der Name gibt keinen Platz ab. Mit min-width: 0 (app.css) schrumpfte
   er am Telefon auf 45 px, „Kooperationsvereinbarung“ lief unter die Knöpfe; jetzt brechen sie um. */
#vertraege-vorlagen .list__main { flex: 1 0 auto; }

/* Regeln des Assistenten */
.einstellungen__inhalt .rule { padding-block: .375rem; }
.einstellungen__inhalt .rule.is-off { opacity: 1; }
.einstellungen__inhalt .rule.is-off .rule__text { color: var(--text-muted); }

/* Kontingent des geliehenen Schlüssels */
.einstellungen__inhalt .kontingent .progress { height: 6px; border-radius: var(--radius-full); }

/* ---------- 4. Branding ---------- */
/* Die Farbvorschau: eine eingelassene Fläche; die Muster tragen die Farben des Mandanten
   (Inline-Stil). Im Dunkeln hält ein Ring jede dunkle Marke vom Grund ab. */
.einstellungen__inhalt .panel [data-vorschau] { box-shadow: 0 0 0 1px var(--border-strong); }
/* Das Muster „Akzent“ zeigt die Fläche so, wie der Akzentknopf sie trägt: 8 % von der Schrift weg
   (--akzent-flaeche der Grundlage). Mit der rohen Farbe stand Weiß auf Koralle bei 4,30:1, jetzt 4,95:1.
   Die Farbe kommt als Inline-Stil (auch live aus dem Farbfeld), daher !important für die Lage darüber. */
@supports (color: rgb(from currentColor calc(255 - r) calc(255 - g) calc(255 - b) / .08)) {
  .einstellungen__inhalt .panel [data-vorschau="akzent"] {
    background-image: linear-gradient(rgb(from currentColor calc(255 - r) calc(255 - g) calc(255 - b) / .08),
                                      rgb(from currentColor calc(255 - r) calc(255 - g) calc(255 - b) / .08)) !important;
  }
}
/* Die Farbfelder: das Muster füllt das Feld bis auf einen schmalen Rand. Der Dialog im Team
   hängt per x-teleport am body, deshalb dort über sein Formular erkannt. */
:is(.einstellungen__inhalt, .page:has(form[action$="/app/signatur"]), .page:has(form[action$="/app/profil"]), .setup__body, .modal__panel:has(input[name="access"])) input[type="color"].input {
  padding: .3125rem; cursor: pointer;
}
:is(.einstellungen__inhalt, .page:has(form[action$="/app/signatur"]), .page:has(form[action$="/app/profil"]), .setup__body, .modal__panel:has(input[name="access"])) input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
:is(.einstellungen__inhalt, .page:has(form[action$="/app/signatur"]), .page:has(form[action$="/app/profil"]), .setup__body, .modal__panel:has(input[name="access"])) input[type="color"]::-webkit-color-swatch {
  border: 0; border-radius: calc(var(--control-radius) - 5px); box-shadow: inset 0 0 0 1px var(--border-strong);
}
/* Logofelder: ein Ablegefeld ist ein Bedienelement – die Kante hält 3:1. Das helle Logo liegt
   auch im Dunkelmodus hell, das dunkle auch im Hellen dunkel (Abschnitt 1). */
.logo-slot {
  min-height: 7.5rem; border-width: 1.5px; border-color: var(--probe-hell-kante);
  border-radius: var(--radius); background: var(--probe-hell);
}
.logo-slot::before {
  opacity: .5;
  background-image:
    linear-gradient(45deg, var(--probe-hell-karo) 25%, transparent 25%),
    linear-gradient(-45deg, var(--probe-hell-karo) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--probe-hell-karo) 75%),
    linear-gradient(-45deg, transparent 75%, var(--probe-hell-karo) 75%);
}
.logo-slot .logo-slot__empty { color: var(--probe-hell-schrift); }
.logo-slot--dark { background: var(--probe-dunkel); border-color: var(--probe-dunkel-kante); }
.logo-slot--dark::before {
  opacity: .6;
  background-image:
    linear-gradient(45deg, var(--probe-dunkel-karo) 25%, transparent 25%),
    linear-gradient(-45deg, var(--probe-dunkel-karo) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--probe-dunkel-karo) 75%),
    linear-gradient(-45deg, transparent 75%, var(--probe-dunkel-karo) 75%);
}
.logo-slot--dark .logo-slot__empty { color: var(--probe-dunkel-schrift); }
/* Überfahren und Ziehen: die Kante nimmt die Marke, die Fläche bleibt die Probe. */
.logo-slot:hover, .logo-slot.is-dragging { border-color: var(--probe-hell-wahl); background: var(--probe-hell); border-style: solid; }
.logo-slot--dark:hover, .logo-slot--dark.is-dragging { border-color: var(--probe-dunkel-wahl); background: var(--probe-dunkel); }
/* Das Dateifeld dahinter ist unsichtbar, nimmt aber den Fokus der Tastatur: der Ring gehört ans Feld. */
.logo-slot:has(~ input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.logo-slot__badge { top: .625rem; right: .625rem; }
/* Unter dem Feld: erst der Knopf, dann der Satz über die ganze Breite – nebeneinander stand
   der Satz in einer Spalte von 120 px. */
.field > .logo-slot ~ .row { flex-wrap: wrap; align-items: flex-start; }
.field > .logo-slot ~ .row > .hint { flex: 1 1 100%; order: 2; }
.field > .logo-slot ~ .row > .btn { order: 1; margin-left: -.875rem; }

/* ---------- 5. Vorlagenpflege der Verträge ---------- */
/* Die Leiste zum Speichern schwebt als Glas über dem Wortlaut, wie die untere Leiste am Telefon. */
.vkern-leiste {
  bottom: var(--schwebe); margin-top: var(--space-4);
  padding: .5rem .5rem .5rem 1.25rem; border-top: 0; border-radius: var(--radius-full);
  background-color: var(--glass-surface); background-image: var(--glas-glanz);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glas-rahmen), var(--glass-shadow);
  --text-muted: var(--tinte-frei); --knopf: var(--glass-tint);
}
@media (max-width: 1023px) {
  .vkern-leiste { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .25rem); border-radius: var(--radius-xl); }
}
#vorlage-formular .vkern-klausel > summary { min-height: 3.25rem; }
#vorlage-formular .vkern-klausel > summary:hover { background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
#vorlage-formular h2 { font-size: var(--fs-xl); }
/* Platzhalter und Bedingungen: am Telefon brach „{{makler.fi|rma}}“ mitten im Namen – zwei
   Spalten in 250 px. Dort steht der Name über seiner Erklärung, der Aufklapper rückt nicht ein. */
@media (max-width: 640px) {
  .why:has(.vkern-liste) > .why__body { padding-inline: .875rem; }
  .vkern-liste, .vkern-liste tbody { display: block; }
  .vkern-liste tr { display: block; padding-block: .5rem; border-bottom: 1px solid var(--border); }
  .vkern-liste td, .vkern-liste td:first-child { display: block; width: auto; padding: 0; border: 0; }
  .vkern-liste td:first-child { margin-bottom: .125rem; }
}
/* Seitenkopf der Vorlage und der Signatur: stille Knöpfe sind Verweise. Am Telefon streckte sie
   app.css auf volle Breite – vier mittig schwebende Wörter in drei Zeilen. Sie stehen jetzt als
   Reihe links, der erste bündig mit dem Text. */
@media (max-width: 640px) {
  .page-head:has(#vorlage-zuruecksetzen-formular) .page-head__actions,
  .page:has(form[action$="/app/signatur"]) .page-head__actions { justify-content: flex-start; column-gap: 0; margin-left: -.75rem; width: calc(100% + .75rem); }
  .page-head:has(#vorlage-zuruecksetzen-formular) .page-head__actions .btn--quiet,
  .page:has(form[action$="/app/signatur"]) .page-head__actions .btn--quiet { flex: none; }
}

/* ---------- 6. E-Mail-Signatur ----------
   Erkannt am Formular: .sig-preview trägt auch das Bild der Kundenunterschrift in der Beleg-Akte. */
/* Die Vorschau zeigt, was der Empfänger sieht: Weiß in beiden Themen, mit einer Kante,
   damit sie sich auch auf der hellen Karte abhebt. */
div.sig-preview { border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border-strong); }
html[data-theme="dark"] div.sig-preview { box-shadow: 0 0 0 1px var(--border-strong); }
/* Reiter in der schmalen Seitenkarte brechen um: die Kapsel wird eine gerundete Fläche. */
.page:has(form[action$="/app/signatur"]) .card .tabs { border-radius: var(--radius); }
.page:has(form[action$="/app/signatur"]) .card .chip { min-width: 1.75rem; justify-content: center; padding-inline: .5rem; font-variant-numeric: tabular-nums; }

/* ---------- 7. Team und Profil ---------- */
/* Die Farbe der Person steht als Inline-Stil am Avatar; eine dunkle verschwände im Dunkeln. */
html[data-theme="dark"] :is(.table, .page-head, .card__body) .avatar[style] { box-shadow: 0 0 0 1px var(--kante-fest); }
.table:has(td[data-label="Zuletzt angemeldet"]) td.num { font-variant-numeric: tabular-nums; }
/* Der Hinweis auf den Signatur-Baukasten im Profil: am Telefon steht der Knopf unter dem Satz –
   daneben blieb dem Satz eine Spalte von 140 px („E-Mail-Signatur / bauen“). */
@media (max-width: 640px) {
  .card--link[href$="/app/signatur"] .row { flex-direction: column; align-items: stretch; }
}
/* Am Telefon: die Aktionen einer Person stehen als eine Zeile unter ihren Angaben. Die Beschriftung
   „Aktionen“ sagt nichts, was die Knöpfe nicht sagen, und nahm ihnen den Platz – sie brachen um. */
@media (max-width: 780px) {
  .table--responsive:has(td[data-label="Zuletzt angemeldet"]) td.shrink { grid-column: 1 / -1; margin-top: var(--space-1); }
  .table--responsive:has(td[data-label="Zuletzt angemeldet"]) td.shrink::before { display: none; }
  .table--responsive:has(td[data-label="Zuletzt angemeldet"]) td.shrink > .row { flex-wrap: nowrap; margin-left: -.75rem; }
}

/* ---------- 8. Einrichtung ---------- */
/* Die Leiste schwebt wie die Kopfleiste der Anwendung: Glas mit 12 px Abstand zum Rand. */
.setup__bar {
  top: var(--schwebe); height: var(--leiste-h); min-height: var(--leiste-h);
  margin: var(--schwebe) var(--schwebe) 0; padding: 0 .625rem 0 clamp(1rem, 3vw, 1.5rem);
  border: 0; border-radius: var(--radius-xl);
  background-color: var(--glass-bg); background-image: var(--glas-glanz);
  box-shadow: var(--glas-rahmen), var(--glass-shadow);
}
/* Der Saum der Grundlage hängt an .topbar; die Einrichtung hat keine, braucht ihn aber genauso:
   was unter die Leiste rollt, taucht ins Feld ein, statt durch das Glas zu scheinen. */
body:has(.setup__bar)::after {
  content: ""; position: fixed; inset: 0; height: 100vh; height: 100lvh; pointer-events: none; z-index: 39;
  background: var(--feld), var(--bg);
  --saum-oben: linear-gradient(to bottom, #000 var(--schwebe), transparent calc(var(--schwebe) + var(--leiste-h) * .7));
  -webkit-mask-image: var(--saum-oben); mask-image: var(--saum-oben);
}
@media (max-width: 1023px) {
  .setup__bar { top: calc(var(--schwebe) + env(safe-area-inset-top)); margin-top: calc(var(--schwebe) + env(safe-area-inset-top)); border-radius: var(--radius-full); padding-inline: 1rem .25rem; }
}
.setup__body { padding-top: clamp(1.25rem, 3vw, 2.25rem); }
/* Die Schrittleiste ist Navigation: eine Kapsel aus Glas auf dem Feld. */
.setup__steps {
  width: fit-content; max-width: 100%; padding: .375rem .875rem .375rem .375rem; border-radius: var(--radius-full);
  background-color: var(--glass-bg); background-image: var(--glas-glanz);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glas-rahmen), var(--shadow-xs);
}
.setup__dot { width: 28px; height: 28px; border-color: transparent; background: var(--glass-tint); box-shadow: var(--pille-schatten); }
.setup__step-label { color: var(--text-muted); }
.setup__step + .setup__step::before { background: var(--kante); opacity: .5; }
.setup__step.is-current .setup__dot { box-shadow: 0 0 0 3px var(--gold-soft); }
/* Erledigt heißt erledigt, nicht Marke: in der Akzentfarbe sahen die erledigten Schritte bei einer
   goldenen Marke aus wie der aktuelle (Gold = am Zug). Jetzt der Ton von „Fertig eingerichtet“. */
.setup__step.is-done .setup__dot { background: var(--success-soft); color: var(--success-fest); }
.setup__head h1 { font-weight: 700; }
.setup__foot { padding-top: 0; }
/* Die fertige Einrichtung: das Zeichen als Zustand „erledigt“, nicht als leerer Platzhalter. */
.setup__head > .empty__icon { width: 3.5rem; height: 3.5rem; background: var(--success-soft); color: var(--success-fest); border-radius: var(--radius); }

/* ---------- 9. Telefon ---------- */
@media (max-width: 1023px) {
  /* Die Reiter der Einstellungen stehen direkt unter dem Seitenkopf, der Inhalt dicht darunter. */
  .einstellungen__reiter .tabs { padding-bottom: .25rem; }
  .einstellungen__inhalt .input-group > .btn { min-height: 2.75rem; }
}
@media (max-width: 780px) {
  /* Nummernkreise als Karten: die Felder nehmen die volle Breite der Zeile. */
  .einstellungen__inhalt .table--responsive td[data-label] .input { width: 100%; min-width: 0; text-align: left; }
  /* Installation (System): Angabe und Wert als Beschriftung über ihrem Wert. Die Kartenansicht setzte
     vor jede Zelle „Angabe“ bzw. „Wert“ und die Version fett in Überschriftgröße. */
  .einstellungen__inhalt .table--responsive td:is([data-label="Angabe"], [data-label="Wert"])::before { display: none; }
  .einstellungen__inhalt .table--responsive td[data-label="Angabe"] { color: var(--text-muted); font-size: var(--fs-sm); }
  .einstellungen__inhalt .table--responsive td[data-label="Wert"].is-primary { font-weight: 400; margin-bottom: 0; }
  /* Pfade brechen ohne Trennstrich: „marcoloh-mann“ sah aus wie ein Teil des Pfads. */
  .einstellungen__inhalt .table--responsive td code { -webkit-hyphens: manual; hyphens: manual; }
  /* Verweise im kleinen Satz eines Kartenfußes („auch auf English · Español“) waren 14 px hohe
     Tippziele; das Polster vergrößert die Fläche, ohne die Zeile zu verschieben. */
  .einstellungen__inhalt .card__footer .text-xs a { padding-block: .9375rem; }
}
@media (max-width: 640px) {
  /* Sechs Punkte und die Beschriftung des aktuellen Schritts in einer Zeile: die Kapsel hält
     sie zusammen, die Verbinder entfallen (mit ihnen brach „6“ bei 390 px um). */
  .setup__steps { padding-right: .75rem; column-gap: .375rem; }
  .setup__step + .setup__step::before { display: none; }
  .setup__dot { width: 30px; height: 30px; }
  .field > .logo-slot ~ .row > .btn { margin-left: 0; }
  /* Der Dateiname unter einem Logo öffnet die Datei: 19 px hoch war er kein Tippziel. */
  .field > .logo-slot ~ .row > a { padding-block: .8125rem; margin-block: -.8125rem; }
}

/* ---------- 10. Rückfälle ---------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .einstellungen__nav, .setup__bar, .setup__steps { background-color: var(--surface-2); }
  .vkern-leiste { background-color: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .einstellungen__nav, .setup__bar, .setup__steps {
    background-color: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .vkern-leiste { background-color: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-slot, .vkern-klausel__pfeil, .why > summary svg, .einstellungen__inhalt details > summary::before { transition: none; }
}

/* ===== Teil 80-portal ===== */
/* =========================================================================
   newways.suite – Gestaltung „Glas“ – Teil 80: Kundenbereich und Anmeldung
   Kundenbereich (layouts/portal.php), Anmeldung, Passwort, Einladung und
   Fehlerseiten (layouts/auth.php). Alles andere erbt aus Teil 00.
   Die Farbe im Kundenbereich gehört dem KUNDEN: head.php setzt dort --accent
   und --brand-client auf seine Farbe, --brand bleibt die der Agentur. Darum
   rechnet hier nichts mit --brand. Kontraste in den Kommentaren sind gegen
   den schlechtesten Grund gerechnet, mit neun Probefarben (Oliv, Blau, Gold,
   Koralle, Nachtblau, Türkis, Weiß, Gelb, Schwarz).
   ========================================================================= */

/* ---------- 1. Tokens im Kundenbereich ---------- */
/* Der Hauptknopf ist Tinte mit einem Drittel Marke – hier der des Kunden,
   sonst stünde auf blauem Feld ein olivschwarzer Knopf der Agentur. Weiß
   darauf: schlechtester Fall Weiß als Kundenfarbe 5,83, überfahren 4,65.
   Nur hell: dunkel nimmt Teil 00 schon --accent, und das ist hier der Kunde. */
html:not([data-theme="dark"]):has(.page--portal) {
  --haupt: color-mix(in srgb, var(--brand-client) 34%, var(--text));
  --haupt-schein: color-mix(in srgb, var(--brand-client) 55%, transparent);
}

/* Das Empfangsband und die Hälfte der Anmeldung sind in BEIDEN Themen Nacht (--nacht aus Teil 00);
   was darauf leuchtet, ist darum in beiden Themen dasselbe Licht. */
.reception, .auth__aside { --licht: #ffffff; --licht-schatten: #000000; }
.board--portal { --licht: #ffffff; }  /* Lichtkante der Karte im Dunkeln */

/* ---------- 2. Kopfleiste ---------- */
/* Ohne Seitenleiste schwebt die Leiste über der Inhaltsspalte: ihr Zeichen
   steht bündig über der Überschrift, die Glocke bündig über dem rechten
   Kartenrand. .page--portal ist 1240 px breit mit demselben Seitenpolster. */
@media (min-width: 1024px) {
  .topbar:has(.portal-marke) {
    --portal-rand: max(var(--schwebe), calc((100% - 1240px) / 2 + clamp(1rem, 3vw, 2.5rem) - .625rem));
    margin-inline: var(--portal-rand); padding-inline: .625rem;
  }
}
.portal-marke { border-radius: var(--radius-full); padding-right: .5rem; }
.portal-marke .font-semibold { font-family: var(--font-display); letter-spacing: -.01em; }
.portal-marke:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Die Punkte der Leiste wie die Seitenleiste des Teams: gewählt ist eine deckende Pille auf dem Glas. */
.portal-nav { gap: 2px; }
.portal-nav .btn { --btn-fg: var(--text-muted); min-height: 2.375rem; padding-inline: .875rem; font-size: var(--fs-md); }
.portal-nav .btn:hover { --btn-bg: color-mix(in srgb, var(--text) 6%, transparent); --btn-fg: var(--text); }
.portal-nav .btn.is-active {
  --btn-bg: var(--glass-tint); --btn-fg: var(--text); font-weight: 600; box-shadow: var(--pille-schatten);
}
/* Fuß: leise, auf dem Feld. Die Haarlinie trägt die zweite Stufe des Felds. */
.portal-fuss__zeile { border-top-color: var(--border-strong); }
.portal-fuss__logo { opacity: .7; }

/* ---------- 3. Empfang (Übersicht) ---------- */
/* Das dunkle Band blieb in app.css fest Olivschwarz – im Kundenbereich
   eines blauen Kunden ein fremdes Grün. Jetzt Nacht mit dem Ton des Kunden:
   40 % am hellen Ende, der Ton in der Helligkeit auf .58 begrenzt, damit
   helle Kundenfarben (Weiß, Gelb) das Band nicht aufhellen. Gerechnet am
   hellsten Punkt mit dem Lichtschein (9 %) darüber:
   Gruß Weiß ≥ 8,9 · Kleinzeile 70 % Weiß ≥ 5,35 · Satz auf der Konzierge ≥ 6,5
   · Zähler 82 % Weiß ≥ 5,3. Der goldene Titel „Sie sind am Zug“ nimmt 45 %
   Gold (vorher 55): schlechtester Fall 4,68 (hell, Gelb). */
.reception {
  --empfang-ton: var(--accent);
  background: linear-gradient(160deg, var(--nacht) 0%,
    color-mix(in srgb, var(--empfang-ton) 20%, var(--nacht)) 58%,
    color-mix(in srgb, var(--empfang-ton) 40%, var(--nacht)) 100%);
  border: 0; border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--licht) 10%, transparent), var(--shadow-lg);
}
@supports (color: oklch(from red min(l, .58) c h)) {
  .reception { --empfang-ton: oklch(from var(--accent) min(l, .58) c h); }
}
html[data-theme="dark"] .reception { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--licht) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--licht) 7%, transparent), var(--shadow-lg); }
.reception__greeting { font-weight: 700; letter-spacing: -.03em; }
.concierge { border-color: transparent; border-left-color: var(--gold); border-radius: var(--radius); background: color-mix(in srgb, var(--licht) 11%, transparent); }
.concierge--ours { border-left-color: color-mix(in srgb, var(--licht) 45%, transparent); }
.concierge__label { color: color-mix(in srgb, var(--gold) 45%, var(--licht)); }
/* Der goldene Knopf bleibt: er ist die eine Handlung, bei der der Kunde am Zug ist. */
.concierge .btn--accent, .concierge .btn--accent:hover { box-shadow: 0 1px 2px color-mix(in srgb, var(--licht-schatten) 30%, transparent), 0 8px 18px -8px color-mix(in srgb, var(--gold) 70%, transparent); }
/* Zähler: eine Füllung ohne Linie wie die Chips; wo der Kunde am Zug ist, trägt er einen goldenen Ring. */
.tally { border-color: transparent; background: color-mix(in srgb, var(--licht) 10%, transparent); min-height: 2.25rem; padding-inline: .8125rem; }
/* Überfahren: mit 17 % Fläche fiel der Text (82 % Weiß) auf 4,37 und die goldene Zahl auf 3,97.
   Jetzt 13 % Fläche, Text 90 %, Zahl 40 % Gold: schlechtester Fall 5,40 bzw. 4,60. */
a.tally:hover { border-color: transparent; background: color-mix(in srgb, var(--licht) 13%, transparent); color: color-mix(in srgb, var(--licht) 90%, transparent); }
a.tally--yours:hover .tally__count { color: color-mix(in srgb, var(--gold) 40%, var(--licht)); }
/* Der Ring ist das Zeichen „Sie sind am Zug“ und braucht 3:1: mit 80 % Gold 2,52 (hell, Weiß), voll 3,09 (hell, Gelb). */
.tally--yours { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--gold); }
.tally--yours .tally__count { color: color-mix(in srgb, var(--gold) 45%, var(--licht)); }
/* Sind WIR am Zug: das Wort darüber hatte mit 72 % Weiß 4,32 (dunkel, Oliv), jetzt 80 % = 4,90;
   die Kante des stillen Knopfs 34 % = 2,16, jetzt 55 % = 3,23; überfahren 13 % statt 16 % Fläche (Schrift 4,80). */
.concierge--ours .concierge__label { color: color-mix(in srgb, var(--licht) 80%, transparent); }
.concierge .btn--ghost { border-color: color-mix(in srgb, var(--licht) 55%, transparent); }
.concierge .btn--ghost:hover { background: color-mix(in srgb, var(--licht) 13%, transparent); }
.tally:focus-visible, .concierge .btn:focus-visible { outline: 2px solid var(--licht); outline-offset: 2px; }

/* ---------- 4. Abschnittsköpfe und Seitenkopf ---------- */
.lobby-head { align-items: flex-end; }
.lobby-head h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; }
.lobby-head p { color: var(--text-muted); }
/* Der Kopf der Projektseite: eine Karte wie jede andere, der Hauch der Kundenfarbe bleibt. */
.portal-hero { border-color: transparent; border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.portal-hero::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-client, var(--accent)) 11%, transparent), transparent 58%);
}
.portal-hero h1 { font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.375rem); }
.portal-hero .panel { background: var(--fuellung); }
/* Ein Chip als Angabe („Fällig …“, Preis) ist kein Bedienelement: er färbt sich beim Überfahren nicht. */
.page--portal span.chip:hover { border-color: transparent; background: var(--fuellung); color: var(--text-muted); }
html[data-theme="dark"] .portal-hero { box-shadow: 0 0 0 1px var(--border), var(--shadow); }

/* ---------- 5. Projektplatten, Ergebnisse, Exposés ----------
   .deliverable steht auch in admin/files (Teil 10): darum alles unter .page--portal. */
/* Deckend wie Karten; die Kante macht der Schatten, beim Überfahren wird er tiefer – die Karte hebt sich nicht. */
.plate, .page--portal .deliverable { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
/* Ohne Rand: im durchsichtigen 1-px-Rand stand die weiße Karte als Haarlinie um Bild und Band. */
.page--portal .deliverable { border-width: 0; }
.plate:hover, .page--portal .deliverable:hover { border-color: transparent; box-shadow: var(--shadow); }
.plate { padding: 1.125rem 1.375rem 1.25rem; }
/* Der Streifen „wer ist am Zug“: Gold = Sie, Kundenfarbe = wir, grau = nichts offen. */
.plate::before { top: 1.25rem; bottom: 1.25rem; width: 3px; }
.plate__bar { height: 6px; border-radius: var(--radius-full); background: var(--surface-3); }
.plate__bar span { border-radius: var(--radius-full); background: var(--wahl); }
.plate:focus-visible, .page--portal .deliverable__media:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.page--portal .deliverable__body { padding: 1rem 1.25rem 1.25rem; }
.page--portal .deliverable__body h3 { font-size: 1.0625rem; letter-spacing: -.015em; }
.page--portal .deliverable__type { color: var(--text-subtle); font-weight: 600; }
.page--portal .deliverable__media { background: var(--surface-2); }
/* Ergebnis ohne Bild (Link, Webseite, Datei, Exposé ohne Titelbild): statt einer
   leeren 16:10-Fläche (bis 640 px hoch) ein Band in der Kundenfarbe mit dem Symbol. */
.page--portal .deliverable__media:has(> .ic) {
  aspect-ratio: auto; min-height: 7.5rem;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--wash);
}
.page--portal .deliverable__media > .ic { width: 30px; height: 30px; color: var(--accent-text); }
.page--portal .deliverable--featured .deliverable__media:has(> .ic) { min-height: 9rem; }
/* Exposés nebeneinander: hat eine Kachel ein Bild, hält das Band der anderen dessen Maß (16:10).
   Sonst klaffte in der Kachel ohne Bild eine Lücke von 110 px über dem Fuß. Am Telefon steht
   jede Kachel allein, dort bleibt das Band flach. */
@media (min-width: 641px) {
  .page--portal .plates:has(.deliverable__media > img) .deliverable__media:has(> .ic) { aspect-ratio: 16 / 10; min-height: 0; }
}
html[data-theme="dark"] .page--portal .deliverable__media:has(> .ic) {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--wash);
}

/* ---------- 6. Ihr Objekt (Eigentümer) ---------- */
/* Die fünf Zahlen: groß die Zahl, darunter das Wort – vorher standen beide in einer Zeile. */
.page--portal [id^="objekt-"] .grid--3 { gap: .625rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
/* Die Kanalliste steht in einem Block im Kartenkörper und rückte sonst ein zweites Mal ein. */
.page--portal [id^="objekt-"] .card__body .list > .list__item { padding-inline: 0; background-size: 100% 1px; }
.page--portal [id^="objekt-"] .grid--3 > .panel {
  display: flex; flex-direction: column; gap: .125rem; padding: .875rem 1rem;
  background: var(--fuellung); border-radius: var(--radius);
}
.page--portal [id^="objekt-"] .panel .stat__value { font-size: 1.75rem; }
.page--portal [id^="objekt-"] .panel .stat__label { font-size: var(--fs-sm); color: var(--text-muted); }
.page--portal [id^="objekt-"] > img { border-block: 1px solid var(--border); }
/* Das Titelbild läuft bis an den Kartenrand: ohne Rand, sonst säumte es links und rechts ein Pixel Weiß. */
.page--portal .card[id^="objekt-"] { border-width: 0; }
/* Symbole stehen in app.css als Block (img, svg { display: block }) und rutschten über ihr Wort. */
.page--portal .cluster > .text-sm > .ic { display: inline-block; vertical-align: -.2em; margin-right: .25rem; }

/* ---------- 7. Aufgaben ---------- */
.page--portal .card__body > article.panel { background: var(--fuellung); border-radius: var(--radius); padding: 1rem 1.125rem; }
.page--portal .card__body > article.panel .font-semibold { font-size: var(--fs-base); }
/* Aufgeklappt liegen Ablage und Kommentarfeld auf der getönten Aufgabe: sie werden deckend weiß, sonst trennte sie nur die Kante. */
.page--portal article.panel .dropzone, .page--portal article.panel .textarea { background-color: var(--surface); }
.page--portal .card__header h2 a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* Board: Spalten sind eingelassene Flächen, Karten liegen darauf. Im Dunkeln ist die
   Spalte dunkler als die Karte – sonst lägen die Karten tiefer als ihr Grund. */
/* Teil 40 gibt jeder Spalte Glas; hier ist sie deckend, die Unschärfe darunter wirkte nicht und kostete nur. */
.board--portal .board__column {
  background: var(--surface-2); border-radius: var(--radius-xl); padding: .625rem;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Bis zu fünf Spalten teilen sich die Breite der Seite. Mit 320 px je Spalte brach „Blockiert“ bei
   1440 px mitten im Farbfeld ab, und „Erledigt“ lag ganz außer Sicht. Wird es enger, rollt das Board wie bisher. */
@media (min-width: 1024px) {
  .board--portal .board__column { flex: 1 1 0; min-width: 13.5rem; }
}
/* Lange Wörter trennt die Silbe, nicht der letzte Buchstabe („Datenschutzerklärun-g“). */
.board--portal .task-card__title { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
/* „Karten lassen sich mit der Maus weiterschieben.“ – ohne Maus stimmt der Satz nicht. */
@media (hover: none) and (pointer: coarse) {
  .page--portal p:has(+ .board--portal) { display: none; }
}
html[data-theme="dark"] .board--portal .board__column { background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--border); }
.board--portal .board__head { padding: .5rem .5rem .375rem; }
.board--portal .board__head h4 { font-family: var(--font-display); font-size: var(--fs-base); letter-spacing: -.01em; }
.board--portal .task-card { border-color: transparent; border-radius: var(--radius); box-shadow: var(--shadow-xs); gap: .375rem; }
.board--portal .task-card:hover { border-color: transparent; box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .board--portal .task-card { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--licht) 6%, transparent), var(--shadow-xs); }
.board--portal .task-card .ic { display: inline-block; vertical-align: -.2em; width: 13px; height: 13px; margin-right: .3rem; }
.board--portal .task-card__grip .ic { width: 15px; height: 15px; margin: 0; }
.board--portal .task-card__meta > span { display: inline-flex; align-items: center; }
.board--portal .task-card__meta .ic { margin-right: .3rem; }
.board--portal .task-card__grip { opacity: .7; }  /* mit .45 kam der Griff auf 1,9:1 */
.board--portal .board__list.is-ziel { outline-color: var(--accent-text); border-radius: var(--radius); }

/* ---------- 8. Dateien und Hochladen ---------- */
/* Die Ablagefläche ist ein Bedienelement: gestrichelte Kante mit 3:1 (--kante),
   gefüllt wie ein Feld; mit der Tastatur erreicht, trägt sie den Fokusring. */
.page--portal .dropzone {
  border: 1.5px dashed var(--kante); border-radius: var(--radius-lg); background: var(--fuellung);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.page--portal .dropzone:hover, .page--portal .dropzone.is-dragging { border-color: var(--accent-text); background: var(--wash); }
.page--portal .dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.page--portal .dropzone svg { color: var(--text-muted); }
.page--portal .file-item { border-color: transparent; background: var(--fuellung); border-radius: var(--radius); }
.page--portal .file-item__icon { background: var(--fuellung); color: var(--text-muted); border-radius: var(--radius-xs); }
.page--portal .list .file-item__icon { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }

/* ---------- 8a. Belegliste, Beleg und Profil ---------- */
/* Teil 00 unterstreicht jeden Verweis im Hinweis – auch den Knopf „Vertrag widerrufen“ unter der Annahme. */
.page--portal .alert a.btn { text-decoration: none; }
@media (min-width: 1024px) {
  /* Angebote und Rechnungen stehen in zwei Tabellen untereinander; jede maß ihre
     Spalten selbst, „Datum“ und „Status“ sprangen um 30 px. Feste Anteile: beide fluchten. */
  .page--portal section.card > .table-wrap > .table--responsive { table-layout: fixed; }
  .page--portal section.card > .table-wrap > .table--responsive th:nth-child(1) { width: 30%; }
  .page--portal section.card > .table-wrap > .table--responsive th:nth-child(2) { width: 14%; }
  .page--portal section.card > .table-wrap > .table--responsive th:nth-child(3) { width: 24%; }
  .page--portal section.card > .table-wrap > .table--responsive th:nth-child(4) { width: 15%; }
  .page--portal section.card > .table-wrap > .table--responsive th:nth-child(6) { width: 3.75rem; }
  /* Das aktuelle Passwort lief über vier Spalten (1110 px) – so breit wie die zwei neuen darunter.
     auto-fill statt auto-fit: sonst fielen die leeren Spalten weg, und alles wurde wieder breit. */
  .page--portal .form-grid:has(> .field.span-full > input[type="password"]) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  }
  .page--portal .form-grid > .field.span-full:has(> input[type="password"]) { grid-column: 1 / 3; }
  .page--portal .form-grid > .field.span-full:has(> input[type="password"]) + .field { grid-column-start: 1; }
}

/* ---------- 9. Glocke und Konto ----------
   Nur die Leiste des Kundenbereichs (sie trägt .portal-marke): dieselben Menüs hat die Teamleiste, die gehört Teil 10. */
/* Die Meldungen: Symbol oben neben dem Titel, nicht mittig neben drei Zeilen. */
.topbar:has(.portal-marke) .dropdown__menu--wide .dropdown__item.items-start { align-items: flex-start; padding-block: .625rem; }
.topbar:has(.portal-marke) .dropdown__menu--wide .dropdown__item.items-start > .ic { margin-top: .125rem; }
.topbar:has(.portal-marke) .dropdown__label { color: var(--text-muted); }

/* ---------- 10. Telefon ---------- */
@media (max-width: 1023px) {
  /* Sechs Punkte: jeder so breit wie sein Wort, nicht alle gleich – so passt
     „Dokumente“ auf 390 px in eine Zeile. Wird es enger, bricht er wie bisher an der Silbe. */
  .page--portal ~ .tabbar .tabbar__inner { gap: 0; }
  .page--portal ~ .tabbar .tabbar__item { flex: 1 1 auto; padding-inline: 0; }
  /* Unter dem Inhalt kommt der Fuß, der hält den Abstand zur unteren Leiste selbst. */
  main.page--portal { padding-bottom: 2.5rem; }
  /* Tippziele: Filter- und Sprachchips waren 32 px hoch. */
  .page--portal a.chip, .auth a.chip { min-height: 2.75rem; padding-inline: 1rem; }
  /* app.css macht JEDEN Chip am Telefon 44 px hoch – die Angabe „Fällig …“ im
     Projektkopf stand so als leere Pille neben dem Abzeichen. Nur Links sind Tippziele. */
  .page--portal span.chip { min-height: 2rem; }
  /* Tippziele ohne Zeilenwachstum (Polster und Gegenrand): der Projektname im Kopf der
     Aufgabenkarte war 21 px hoch, die Belegnummer 42 px (18 px Zeile + 2 × 12). */
  .page--portal .card__header h2 > a { padding-block: .75rem; margin-block: -.75rem; }
  .page--portal .table--responsive td.is-primary > a.link { padding-block: .8125rem; margin-block: -.8125rem; }
}
@media (max-width: 640px) {
  .reception { border-radius: var(--radius-lg); }
  .concierge { padding: .875rem 1rem; }
  .tally { min-height: 2.75rem; }
  .portal-hero { border-radius: var(--radius-lg); padding: 1.375rem 1.25rem; }
  .portal-hero .page-head__actions .cluster { gap: .5rem; }
  /* Aufgaben: das Abzeichen rückt unter den Titel, der Aufklapper bleibt rechts oben –
     der Titel bekommt die ganze Breite statt 170 px. */
  .page--portal .card__body > article.panel { padding: .875rem 1rem; }
  .page--portal .card__body > article.panel > .row--between {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .375rem .5rem; align-items: start;
  }
  .page--portal .card__body > article.panel > .row--between > .row--tight { display: contents; }
  .page--portal .card__body > article.panel > .row--between > .flex-1 { grid-area: 1 / 1; }
  .page--portal .card__body > article.panel > .row--between > .row--tight > :first-child { grid-area: 2 / 1; justify-self: start; }
  .page--portal .card__body > article.panel > .row--between > .row--tight > button { grid-area: 1 / 2; margin: -.5rem -.5rem 0 0; }
  /* Das Board läuft bis an den Rand und rollt dort; die erste Spalte steht bündig. */
  .board--portal {
    margin-inline: calc(-1 * clamp(1rem, 3vw, 2.5rem)); padding-inline: clamp(1rem, 3vw, 2.5rem);
    scroll-padding-inline: clamp(1rem, 3vw, 2.5rem);
  }
  .board--portal .board__column { flex-basis: min(80vw, 300px); }
  .page--portal [id^="objekt-"] .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 11. Anmeldung, Passwort, Einladung, Fehlerseiten ---------- */
/* Die Karte ist Inhalt und deckend; die Marke der Agentur steht allein in der dunklen Hälfte. */
.auth__card { border-radius: var(--radius-xl); }
.auth__card h1 { letter-spacing: -.028em; }
.auth__card > p, .auth__card .stack + p { color: var(--text-muted); }
.auth__wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; }
/* Lange Namen (Einladung „Willkommen, …“) brechen um, statt aus der Hälfte zu laufen. */
.auth__aside-title { font-weight: 700; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; }
.auth__aside-links span { display: inline-flex; align-items: center; gap: .5rem; }
.auth__aside-links span + span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--licht) 50%, transparent); margin-right: .5rem;
}
.auth__aside-links { gap: .5rem; }
/* Die Sprachwahl der Kundenanmeldung und die Schritte der Einladung. */
.auth .chip.is-active { font-weight: 600; }
.auth ol.liste-plain .avatar { background: var(--fuellung); color: var(--text-muted); font-weight: 600; }
.auth ol.liste-plain li { color: var(--text-muted); }
/* Fehlerseite: das Symbol in der Farbe der Agentur, die Zahl groß wie eine Kennzahl. */
.auth__card .empty__icon { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; margin-inline: auto; background: var(--wash); color: var(--accent-text); }
.auth__card .empty__icon .ic { width: 24px; height: 24px; }
.auth__card .empty__icon + h1 { font-size: 3rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: .5rem; }
.auth__card pre { border-radius: var(--radius); background: var(--surface-inset); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 1023px) {
  .auth { padding: max(1rem, env(safe-area-inset-top)) .75rem max(1rem, env(safe-area-inset-bottom)); }
  .auth__card { padding: 1.75rem 1.375rem; }
  .auth .btn--sm { min-height: 2.75rem; }
  /* „Anmelden →“ unter der Kundeneinladung war 17 px hoch; das Polster vergrößert nur die Trefferfläche. */
  .auth__card p.text-sm > a:only-child { padding-block: .875rem; }
}

/* ---------- 12. Bewegung ---------- */
/* Der Einlauf der Übersicht dauerte in app.css 0,5 s plus 0,16 s Versatz: alles steht nach 200 ms. */
@media (prefers-reduced-motion: no-preference) {
  .lobby > * { animation-duration: .16s; }
  .lobby > *:nth-child(2) { animation-delay: .02s; }
  .lobby > *:nth-child(3) { animation-delay: .03s; }
  .lobby > *:nth-child(n+4) { animation-delay: .04s; }
}
@media (prefers-reduced-motion: reduce) {
  .plate, .page--portal .deliverable, .tally, .task-card, .page--portal .dropzone, .portal-nav .btn { transition: none; }
}

/* ===== Teil 90-betreiber ===== */
/* =========================================================================
   newways.suite – Gestaltung „Glas“ – Teil 90: Betreiberbereich
   Der Betreiber arbeitet an einem Produkt für andere, nicht in seiner Agentur.
   Sein Zeichen ist TINTE: eine deckende, dunkle Tafel, die schwebt wie das Glas
   der Mandanten, aber nie durchscheint. Dieselbe Tinte trägt das Gastband
   (.peek), wenn er in einen fremden Mandanten schaut – dieselbe Farbe heißt
   dieselbe Rolle. Die Tinte ist fest und hängt NICHT an der Marke des Mandanten;
   Gold kommt auf ihr nicht vor.
   Betrifft: layouts/operator.php (Leiste, Kopf am Telefon), operator/* und das
   Band in layouts/app.php.
   ========================================================================= */

/* ---------- 1. Tinte, hell und dunkel ----------
   app.css legt --op-* auf .shell--operator; hier gleich stark und später, also gelten
   diese Werte – und das Band bekommt sie auch.
   Im Dunkeln ist dunkel allein kein Zeichen: das Rauchglas der Mandanten hat dort fast
   denselben Ton (gemessen: Band #1a2213 über Kopf #131d18, 1,05:1). Die Tinte steht
   darum eine Stufe heller (1,3:1) und trägt, was Glas nie hat: einen scharfen Rand ringsum
   (gegen die Nacht 3,4:1, gegen das Rauchglas 3,1:1), eine sichtbare Schraffur und in der
   Leiste eine eingestochene Rille wie auf einer Urkunde. */
.shell--operator, .peek {
  --op-ink: #10150c;                        /* die Tafel */
  --op-ink-2: #1b2214;                      /* überfahren */
  --op-ink-3: #283120;                      /* gewählt, Knopf auf der Tinte */
  --op-line: rgba(233, 238, 224, .12);      /* Trennlinie */
  --op-rand: rgba(233, 238, 224, .09);      /* Saum ringsum */
  --op-rille: rgba(233, 238, 224, .11);     /* die Rille innen */
  --op-licht: rgba(233, 238, 224, .16);     /* Lichtkante oben */
  --op-text: #eef2e6;
  --op-muted: #a9b29b;
  --op-danger: #ffa39b;
  --op-stich: rgba(233, 238, 224, .026);    /* die Gravur */
  --op-glanz: rgba(233, 238, 224, .07);     /* Licht oben links */
  --op-schatten: 0 1px 2px rgba(16, 21, 12, .28), 0 26px 52px -22px rgba(16, 21, 12, .6);
  /* Die Fläche: Licht von oben links, darunter feine Schraffur wie ein Stich. */
  --op-flaeche:
    radial-gradient(140% 42% at 0% 0%, var(--op-glanz), transparent 72%),
    repeating-linear-gradient(135deg, var(--op-stich) 0 1px, transparent 1px 6px);
  --op-rahmen: inset 0 1px 0 var(--op-licht), inset 0 0 0 1px var(--op-rand);
  /* Die Leiste: Rand, 3 px glatter Steg (die Schraffur endet dort), dann die Rille. */
  --op-urkunde: var(--op-rahmen), inset 0 0 0 4px var(--op-ink), inset 0 0 0 5px var(--op-rille);
}
html[data-theme="dark"] :is(.shell--operator, .peek) {
  --op-ink: #2b3127;                        /* weniger Oliv: heller wäre es Khaki neben jeder Marke */
  --op-ink-2: #353b30;
  --op-ink-3: #42493c;
  --op-muted: #b4baa9;
  --op-line: rgba(233, 238, 224, .14);
  --op-rand: rgba(233, 238, 224, .3);
  --op-rille: rgba(233, 238, 224, .16);
  --op-licht: rgba(233, 238, 224, .34);
  --op-stich: rgba(233, 238, 224, .05);
  --op-glanz: rgba(233, 238, 224, .05);
  --op-schatten: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .45), 0 28px 60px -18px rgba(0, 0, 0, .9);
}
/* Das Gastband ist 44 px hoch (am Telefon 52: der Knopf braucht dort 44). Der Kopf rückt darunter. */
:root { --peek-h: 2.75rem; --peek-luft: .5rem; }
@media (max-width: 1023px) { :root { --peek-h: 3.25rem; --peek-luft: .375rem; } }

/* ---------- 2. Die Leiste ----------
   Alles darin liest seine Farben aus der Tinte – auch was app.css und die Grundlage
   über --text-* und --danger färben (Rolle, Wortmarke, Abmelden). */
.sidebar--operator, .sidebar--operator .sidebar__footer .dropdown__menu {
  --text: var(--op-text); --text-muted: var(--op-muted); --text-subtle: var(--op-muted);
  --border: var(--op-line); --border-strong: var(--op-line); --kante: var(--op-muted);
  --focus: var(--op-text); --danger: var(--op-danger);
  color: var(--op-text);
}
.sidebar--operator {
  background-color: var(--op-ink); background-image: var(--op-flaeche);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--op-urkunde), var(--op-schatten);
}
/* Die Wortmarke steht über einer Linie: ein Kopf wie auf einem Briefbogen. */
.sidebar--operator .sidebar__brand { margin: 0 .25rem .5rem; padding-inline: .5rem; border-bottom: 1px solid var(--op-line); }
.sidebar--operator .sidebar__wordmark { color: var(--op-text); letter-spacing: -.01em; }
.sidebar--operator .sidebar__wordmark span { color: var(--op-muted); }
.sidebar--operator .sidebar__section { color: var(--op-muted); }
.sidebar--operator .nav-item { color: var(--op-muted); }
.sidebar--operator .nav-item svg { opacity: 1; }
.sidebar--operator .nav-item:hover { background: var(--op-ink-2); color: var(--op-text); }
/* Gewählt: eine erhabene Stufe der Tinte mit einem hellen Strich vorn – keine helle Pille
   wie beim Mandanten. Der Strich steht IN der Stufe: .sidebar__nav rollt (overflow) und
   schnitt ihn außerhalb ab, er war nie zu sehen. */
.sidebar--operator .nav-item.is-active {
  background: var(--op-ink-3); color: var(--op-text); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(233, 238, 224, .1), 0 1px 2px rgba(0, 0, 0, .35), 0 8px 16px -10px rgba(0, 0, 0, .6);
}
.sidebar--operator .nav-item.is-active::before {
  content: ""; position: absolute; left: .3125rem; top: .6875rem; bottom: .6875rem; width: 3px;
  border-radius: 3px; background: var(--op-text);
}
.sidebar--operator .nav-item.is-active svg { color: var(--op-text); }
.sidebar--operator .sidebar__footer { border-top-color: var(--op-line); }
.sidebar--operator .avatar { background: var(--op-ink-3); color: var(--op-text); box-shadow: inset 0 0 0 1px var(--op-line); }
/* Das Kontomenü klappt aus der Tinte auf und bleibt Tinte (die Grundlage macht Menüs hell),
   eine Stufe heller und ohne Schraffur – es liegt ÜBER der Tafel. */
.sidebar--operator .sidebar__footer .dropdown__menu {
  background: var(--op-ink-2); background-image: none;
  box-shadow: var(--op-rahmen), 0 0 0 1px rgba(0, 0, 0, .3), var(--shadow-lg);
}
.sidebar--operator .dropdown__item { color: var(--op-muted); }
.sidebar--operator .dropdown__item:hover { background: var(--op-ink-3); color: var(--op-text); }
.sidebar--operator .dropdown__item--danger, .sidebar--operator .dropdown__item--danger:hover { color: var(--op-danger); }
.sidebar--operator .dropdown__divider { background: var(--op-line); }

/* ---------- 3. Kopf am Telefon ----------
   Am Rechner bleibt der Kopf Glas – die Tinte steht daneben. Am Telefon ist die Leiste
   eine Schublade und der Kopf das Einzige, was man sieht: dort wird er zur Tinte.
   --text bleibt unberührt, damit das helle Menü der Darstellung darin lesbar bleibt. */
@media (max-width: 1023px) {
  .shell--operator .topbar {
    --text-muted: var(--op-muted); --text-subtle: var(--op-muted); --focus: var(--op-text);
    color: var(--op-text);
    background-color: var(--op-ink); background-image: var(--op-flaeche);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: var(--op-rahmen), var(--op-schatten);
  }
  .shell--operator .topbar > .btn--quiet, .shell--operator .topbar > .dropdown > .btn--quiet { --btn-fg: var(--op-muted); }
  .shell--operator .topbar > .btn--quiet:hover, .shell--operator .topbar > .dropdown > .btn--quiet:hover {
    --btn-bg: var(--op-ink-3); --btn-fg: var(--op-text);
  }
  .shell--operator .topbar__title { color: var(--op-text); }
}

/* ---------- 4. Das Gastband ----------
   Schwebt als Kapsel aus Tinte über dem Kopf des Mandanten und klebt dort: wer zu Gast
   ist, soll es auf keiner Höhe der Seite vergessen. Eine Zeile; was nicht passt, endet
   mit Auslassung. Unter dem Band (z 50) liegt die Schublade (z 60) – sie deckt es zu. */
.peek {
  position: sticky; top: calc(var(--schwebe) + env(safe-area-inset-top)); z-index: 50;
  height: var(--peek-h); margin: calc(var(--schwebe) + env(safe-area-inset-top)) var(--schwebe) 0;
  flex-wrap: nowrap; gap: .625rem; padding: 0 .3125rem 0 1rem; border-radius: var(--radius-full);
  background-color: var(--op-ink); background-image: var(--op-flaeche); color: var(--op-text);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--op-rahmen), var(--op-schatten);
  font-size: var(--fs-sm); line-height: 1.3; --focus: var(--op-text);
}
/* app.css setzt das dunkle Band mit „background:“ – das löscht auch die Schraffur. */
html[data-theme="dark"] .peek { background-color: var(--op-ink); background-image: var(--op-flaeche); box-shadow: var(--op-rahmen), var(--op-schatten); }
@media (min-width: 1024px) { .main > .peek { margin-left: 0; } }
.peek__icon { opacity: 1; color: var(--op-muted); }
.peek__text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek__who { font-weight: 650; color: var(--op-text); }
.peek__note, html[data-theme="dark"] .peek__note { color: var(--op-muted); }
.peek form { flex: none; }
.peek .btn {
  --btn-bg: var(--op-ink-3); --btn-fg: var(--op-text); --btn-border: transparent;
  min-height: 2.125rem; padding: .25rem .875rem; border-radius: var(--radius-full); font-size: var(--fs-sm);
  box-shadow: inset 0 1px 0 rgba(233, 238, 224, .12), inset 0 0 0 1px var(--op-line);
}
.peek .btn:hover { --btn-bg: color-mix(in srgb, var(--op-text) 16%, var(--op-ink-3)); }
/* Der Kopf des Mandanten klebt unter dem Band, nicht hinter ihm. */
.main:has(> .peek) > .topbar {
  margin-top: var(--peek-luft);
  top: calc(var(--schwebe) + env(safe-area-inset-top) + var(--peek-h) + var(--peek-luft));
}
/* Der Saum (Teil 00) deckt jetzt Band und Lücke ganz und läuft erst im Kopf aus. */
body:has(.peek)::after {
  --saum-oben: linear-gradient(to bottom, #000 calc(var(--schwebe) + var(--peek-h) + var(--peek-luft)),
    transparent calc(var(--schwebe) + var(--peek-h) + var(--peek-luft) + var(--leiste-h) * .7));
}
@media (max-width: 1023px) {
  .peek .btn { min-height: 2.75rem; padding-inline: .875rem 1rem; }
}
@media (max-width: 640px) {
  /* Am Telefon passt der Hinweis nicht in die Kapsel; er bleibt für Vorleseprogramme da.
     Wer zu Gast ist, steht dafür ganz da: zwei Zeilen statt einer Auslassung. */
  .peek__text { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }
  .peek__note {
    position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%); flex-basis: auto;
  }
}

/* ---------- 5. Überblick ---------- */
/* Die fünf Kennzahlen sind Kacheln aus Glas wie die Kennzahlen der Übersicht (.kennzahlen,
   Teil 00 Abschnitt 11) – das Raster trägt die Klasse nicht, darum hier. */
.shell--operator .page > .grid--5 > .card {
  --text-muted: var(--tinte-frei); --text-subtle: var(--tinte-frei); --kante: var(--kante-frei);
  --focus: var(--fokus-frei);
  background-color: var(--glas-kachel); background-image: var(--glas-glanz); border-color: transparent;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glas-rahmen), var(--shadow-sm);
}
.shell--operator .page > .grid--5 > .card--link:hover { background-color: var(--glas-kachel-hover); box-shadow: var(--glas-rahmen), var(--shadow); }
/* Zwei je Zeile: die fünfte stünde allein und halb – sie nimmt die ganze Breite. */
@media (max-width: 719px) {
  .shell--operator .page > .grid--5 > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- 6. Mandantenakte, Liste, Einstellungen, Support ---------- */
/* Verbrauch ab 80 %: der Balken war Gold (Inline-Stil). Gold heißt „Sie sind am Zug“ –
   eine volle Grenze ist ein Zustand, also Warnung. */
.shell--operator .progress__bar[style*="--gold"] { background: var(--warning) !important; }
/* E-Mail-Adressen in Tabellen brachen am Rechner mitten im Wort („exampl|e“). Ab 1300 px trägt
   die Mandantenliste sie am Stück (gemessen: 931 px Tabelle bei 949 px Platz); schmaler bräche
   sonst die Statusspalte aus dem Bild. */
@media (min-width: 1300px) { .shell--operator .table td .umbruch { overflow-wrap: break-word; } }
/* Und nie mit Trennstrich: „nord@nordlicht.ex-ample“ ist eine andere Adresse. */
.shell--operator .umbruch { -webkit-hyphens: manual; hyphens: manual; }
@media (max-width: 780px) {
  /* Kartenansicht: app.css trennt hier mit Trennstrich. In diesen Tabellen stehen Namen,
     Adressen und Serverfehler – „smtp.sonnen-hof.example“ ist ein anderer Server. */
  .shell--operator .table--responsive td { -webkit-hyphens: manual; hyphens: manual; }
  /* Tippziele: der Name in der Hauptzelle war 42 px hoch (Teil 00: 12 + 18 + 12), der
     Zurück-Verweis 36 px (er IST hier die .breadcrumb, beim Mandanten steckt ein a darin). */
  .shell--operator .table--responsive td > a.link { padding-block: .8125rem; margin-block: -.8125rem; }
  .shell--operator a.breadcrumb { min-height: 2.75rem; margin-block: -.25rem calc(var(--space-2) - .25rem); }
  /* Kartenansicht: Name und Adresse des Ansprechpartners standen als Flexkinder NEBENeinander,
     jede in halber Breite. Hier stehen sie untereinander rechts der Beschriftung. */
  .shell--operator .table--responsive td:has(> .block + .block) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .125rem var(--space-2); }
  .shell--operator .table--responsive td:has(> .block + .block) > * { grid-column: 2; }
  .shell--operator .table--responsive td:has(> .block + .block)::before { grid-row: span 2; }
}
/* Zwei schmale Spalten in der Seitenspalte (Rechtstexte) brauchen keine 34rem Mindestbreite. */
.shell--operator .split--main > :last-child .table-wrap > .table--compact { min-width: 0; }
/* Zwei Farbnamen, die weder app.css noch Teil 00 kennen – sie fielen auf Grau zurück:
   Fehlschläge in der Postübersicht (rot) und „eigen“ beim Postausgang (grün). */
.shell--operator .badge--red { background: var(--danger-soft); color: var(--danger-fest); }
.shell--operator .badge--success { background: var(--success-soft); color: var(--success-fest); }
/* Ticketverlauf: die eigene Antwort trug eine Linie in Akzent (Inline-Stil). Karten haben
   in dieser Gestaltung keine Linien; die eigene liegt stattdessen im Akzent getönt. */
.shell--operator .stack > .card[style*="border-accent"] { border-color: transparent !important; background: var(--wash); }

/* ---------- 7. Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .sidebar--operator .nav-item, .sidebar--operator .dropdown__item, .peek .btn { transition: none; }
}

/* ---------- 8. Rückfälle ----------
   Tinte ist nie Glas und braucht keinen. Nur die Kacheln des Überblicks werden deckend. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .shell--operator .page > .grid--5 > .card, .shell--operator .page > .grid--5 > .card--link:hover { background-color: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .shell--operator .page > .grid--5 > .card, .shell--operator .page > .grid--5 > .card--link:hover {
    background-color: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ===== Teil 95-arbeitsplatz ===== */
/* =========================================================================
   1.37.0 – Gemeinsame Arbeitsflächen
   Der Betrieb bestimmt die Farbe. Eine ruhige Grundfläche und mattes Glas
   verbinden die Bereiche; Eingaben, Dokumente und Überlagerungen bleiben
   eindeutig lesbar. Die persönliche Deckkraft verändert nur das Material,
   niemals Schrift, Symbole oder die Deckung eines darüberliegenden Dialogs.
   Struktur der Listen/Seiteneinblicke: arbeitsplatz.css.
   ========================================================================= */

.suite-workspace {
  --bg: color-mix(in srgb, var(--accent) 3%, #edf0ee);
  --text: #25312b;
  --tinte-2: #4a5850; --tinte-3: #59665e; --tinte-frei: #415047;
  --feld:
    linear-gradient(118deg, color-mix(in srgb, var(--feld-ton) 13%, transparent),
      transparent 49%, color-mix(in srgb, var(--akzent-2) 8%, transparent));
  --workplace-stoff: color-mix(in srgb, var(--accent) 2%, #fffffc);
  --workplace-surface: color-mix(in srgb, var(--workplace-stoff) calc(var(--workplace-glass-opacity, .50) * 100%), transparent);
  --workplace-border: color-mix(in srgb, var(--text) 13%, transparent);
  --workplace-edge: color-mix(in srgb, var(--surface) 66%, transparent);
  --workplace-preview: color-mix(in srgb, var(--workplace-stoff) 90%, transparent);
  --workplace-hover: color-mix(in srgb, var(--surface) 45%, transparent);
  --workplace-selected: color-mix(in srgb, var(--accent) 8%, transparent);
  --workplace-shadow: 0 8px 30px -24px rgba(25, 40, 31, .30);
  --workplace-blur: blur(18px);
  --workplace-accent-ink: color-mix(in srgb, var(--accent-text) 75%, var(--text));
  --workplace-radius: 16px;
  --card-pad: 1.375rem; --card-gap: 1.25rem;
  --radius-lg: 14px; --control-radius: 8px;
  --shadow-sm: 0 4px 15px -12px rgba(25, 40, 31, .22);
  --pille-schatten: 0 1px 3px -2px rgba(25, 40, 31, .18);
  --glass-blur: blur(22px);
  --glas-glanz: none;
}
html[data-theme="dark"] .suite-workspace {
  --bg: color-mix(in srgb, var(--accent) 5%, #161d1a);
  --text: #e5ece6;
  --tinte-2: #b3beb6; --tinte-3: #a7b5ac; --tinte-frei: #c2cdc5;
  --workplace-stoff: color-mix(in srgb, var(--feld-ton) 5%, #202923);
  --workplace-border: color-mix(in srgb, var(--text) 14%, transparent);
  --workplace-edge: color-mix(in srgb, var(--text) 12%, transparent);
  --workplace-hover: color-mix(in srgb, var(--text) 6%, transparent);
  --workplace-selected: color-mix(in srgb, var(--accent-text) 9%, transparent);
  --workplace-shadow: 0 8px 32px -22px rgba(0, 0, 0, .30);
  --shadow-sm: 0 4px 15px -12px rgba(0, 0, 0, .32);
  --pille-schatten: 0 1px 3px -2px rgba(0, 0, 0, .36);
}

/* Die vorhandene zentrierte Navigation und ihre Mobilführung behalten Maße
   und Verhalten. Nur das Material folgt der gemeinsamen Arbeitsfläche. */
.suite-workspace .workspace-header {
  background: color-mix(in srgb, var(--workplace-stoff) 82%, transparent);
  border-bottom-color: var(--workplace-border);
  box-shadow: 0 3px 18px -14px rgba(var(--schatten), .16);
}
.suite-workspace .workspace-primary__item,
.suite-workspace .workspace-nav-group > .workspace-primary__item { font-weight: 500; }
.suite-workspace .workspace-primary__item.is-active,
.suite-workspace .workspace-nav-group.is-active > .workspace-primary__item { font-weight: 570; }
.suite-workspace .workspace-nav-group.is-active,
.suite-workspace .workspace-primary__item.is-active { box-shadow: inset 0 0 0 1px var(--workplace-border), var(--pille-schatten); }

/* Persönliche Material- und Dichtewahl im Kontomenü. Das Menü bleibt deckend,
   sodass der Regler seine eigene Beschriftung beim Ändern nicht verwischt. */
.suite-workspace .workspace-material { padding: .875rem .5rem .5rem; margin-top: .625rem; border-top: 1px solid var(--border); }
.suite-workspace.workspace-ready .workspace-material { display: block; }
.suite-workspace .workspace-appearance { flex-wrap: wrap; }
.suite-workspace .workspace-appearance button { flex: 1 1 4rem; min-width: 0; }
.suite-workspace .workspace-appearance button > span { max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }
.suite-workspace .workspace-material > label:not(.workspace-material__check) {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .375rem .75rem; font-size: var(--fs-sm); line-height: 1.5;
}
.suite-workspace .workspace-material output { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--text-muted); }
.suite-workspace .workspace-material input[type="range"] { width: 100%; min-height: 2.75rem; margin: .25rem 0; accent-color: var(--accent-text); cursor: pointer; }
.suite-workspace .workspace-material__check { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding-block: .375rem; font-size: var(--fs-sm); line-height: 1.45; cursor: pointer; }
.suite-workspace .workspace-material__check input { flex: none; width: 1.125rem; height: 1.125rem; accent-color: var(--accent-text); }
.suite-workspace .workspace-material input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.suite-workspace .workspace-material > p { margin-top: .625rem; line-height: 1.5; }

/* Ein Schriftbild für Listen, Akten und Formulare. Größen folgen rem, lange
   Bezeichnungen dürfen umbrechen. Zahlen werden nicht künstlich gesperrt. */
.suite-workspace .page-head h1,
.suite-workspace .page--uebersicht .ueb-datum {
  font-size: clamp(1.75rem, 1.45rem + .7vw, 2.125rem);
  font-weight: 500; letter-spacing: -.045em; line-height: 1.18;
  word-spacing: normal;
}
.suite-workspace .page-head { align-items: center; gap: 1rem 1.5rem; margin-bottom: 1.375rem; }
.suite-workspace .page-head__text > p { margin-top: .375rem; font-size: var(--fs-sm); line-height: 1.55; }
.suite-workspace .page-head__actions { gap: .5rem; }
.suite-workspace .card__header :is(h2, h3),
.suite-workspace .panel__title { font-weight: 550; letter-spacing: -.02em; }
.suite-workspace .stat__value { font-weight: 510; letter-spacing: -.035em; }
.suite-workspace .table th { font-weight: 500; text-transform: none; letter-spacing: normal; }
.suite-workspace .table td { line-height: 1.45; }
.suite-workspace .table :is(.num, .numeric) { font-variant-numeric: tabular-nums; }
.suite-workspace .badge { border-radius: .35rem; font-weight: 500; box-shadow: none; }

/* Glasflächen filtern nur den ruhigen Grund, keine darunterliegenden Daten.
   Verschachtelte Karten erhalten keinen zweiten Blur. Belegblätter, Editor,
   Dialoge und Formularfelder behalten ihre eigenen deckenden Leseflächen. */
.suite-workspace .page .card:where(:not(.card--inset):not(.card--flat)),
.suite-workspace .workplace137__surface {
  background: var(--workplace-surface);
  border: 1px solid var(--workplace-edge);
  border-radius: var(--workplace-radius); box-shadow: var(--workplace-shadow);
  -webkit-backdrop-filter: var(--workplace-blur); backdrop-filter: var(--workplace-blur);
  --text-muted: var(--tinte-frei); --text-subtle: var(--tinte-frei);
  --focus: var(--fokus-frei); --kante: var(--kante-frei);
  --success: var(--success-frei); --warning: var(--warning-frei);
  --danger: var(--danger-frei); --info: var(--info-frei);
}
.suite-workspace .page .card .card,
.suite-workspace .page .modal__panel .card,
.suite-workspace .workplace137__surface .card {
  background: transparent; border-color: var(--workplace-border);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.suite-workspace .card__header {
  background: transparent; border-bottom-color: var(--workplace-border);
  min-height: 3.375rem; padding-block: .875rem;
}
.suite-workspace .card__footer { border-top-color: var(--workplace-border); background: transparent; }
.suite-workspace .card--link:hover { border-color: var(--kante); box-shadow: var(--workplace-shadow); }
.suite-workspace .table-wrap { --scroll-cover: var(--workplace-stoff); }
.suite-workspace .table th,
.suite-workspace .table td { border-bottom-color: var(--workplace-border); }
.suite-workspace .table th { background: transparent; }
.suite-workspace .table tbody tr:hover { background: var(--workplace-hover); }
.suite-workspace .link { color: var(--workplace-accent-ink); }
.suite-workspace .input,
.suite-workspace .select,
.suite-workspace .textarea { background-color: var(--surface-inset); }
.suite-workspace :is(.input, .select, .textarea):focus { background-color: var(--surface); }
.suite-workspace :is(.input, .select, .textarea)[disabled],
.suite-workspace :is(.input, .textarea)[readonly] { background-color: var(--surface-2); }
.suite-workspace :is(.input.is-invalid, .select.is-invalid, .textarea.is-invalid, .input[aria-invalid="true"]) {
  background-color: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

/* Lokale Reiter bilden eine integrierte Arbeitsleiste statt weiterer Kapseln.
   Mobile Umbrüche/Scrollrückfälle und Linkziele bleiben aus dem Grundstil erhalten. */
.suite-workspace .tabs {
  background: transparent; background-image: none;
  border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding-block: 0 .25rem; gap: .125rem;
}
.suite-workspace .tabs .tab { border-radius: 6px; font-weight: 500; }
.suite-workspace .tabs .tab:not(.is-active) { background: transparent; box-shadow: none; }
.suite-workspace .tabs .tab.is-active,
.suite-workspace .workplace137 .tabs .tab.is-active {
  background: var(--workplace-hover); color: var(--text); font-weight: 570;
  box-shadow: inset 0 -2px 0 var(--workplace-accent-ink);
}
.suite-workspace .tabs .tab:hover { background: var(--workplace-hover); }

/* Kennzahlen auf Arbeitslisten werden zur kompakten Zeile. Die vollständigen
   Beschriftungen und Erläuterungen aus components.stat bleiben sichtbar. */
.suite-workspace .workplace137__metrics {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: .75rem 0; padding: 0; margin: 0 0 1.25rem;
  background: none; border: 0; box-shadow: none;
}
.suite-workspace .workplace137__metrics > .card,
.suite-workspace .page .workplace137__metrics > .card {
  flex: 1 1 12rem; min-width: 0; padding: 0;
  background: none; border: 0; border-left: 1px solid var(--workplace-border);
  border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.suite-workspace .workplace137__metrics > .card:first-child { border-left: 0; }
.suite-workspace .workplace137__metrics .stat { padding: 0 1.25rem; gap: .25rem; }
.suite-workspace .workplace137__metrics > .card:first-child .stat { padding-left: 0; }
.suite-workspace .workplace137__metrics .stat > .row { justify-content: flex-start; }
.suite-workspace .workplace137__metrics .stat > .row > .subtle { display: none; }
.suite-workspace .workplace137__metrics .stat__label { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-xs); font-weight: 500; color: var(--tinte-frei); }
.suite-workspace .workplace137__metrics .stat__value { font-size: 1.375rem; line-height: 1.25; margin-top: 0; overflow-wrap: anywhere; }
.suite-workspace .workplace137__metrics .stat__meta { font-size: var(--fs-xs); line-height: 1.5; }
.suite-workspace .workplace137__toolbar { border-bottom-color: var(--workplace-border); background: transparent; }
.suite-workspace .workplace137__toolbar .tabs { margin: 0; }
.suite-workspace .workplace137__surface .kunden-filter { border-radius: 0; background: transparent; }
.suite-workspace .workplace137__surface .workplace137__results > .card {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.suite-workspace .workplace137__preview { background: var(--workplace-preview); border-color: var(--workplace-border); }
.suite-workspace .workplace137__preview-head { background: var(--workplace-preview); border-color: var(--workplace-border); }
.suite-workspace .workplace137__preview:modal { background: var(--surface-hoch); }
.suite-workspace .workplace137__preview:modal .workplace137__preview-head { background: var(--surface-hoch); }
.suite-workspace .workplace137__preview .card { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Die bestehenden Aktenkennzahlen bleiben vollständig, teilen aber einen
   Rahmen. Damit setzt sich die Materialhierarchie jenseits der Listen fort. */
.suite-workspace .page > .kennzahlen:not(.workplace137__metrics) {
  gap: 0; padding: .75rem 0; margin-bottom: var(--gap-section);
  background: var(--workplace-surface); border: 1px solid var(--workplace-edge);
  border-radius: var(--workplace-radius); box-shadow: var(--workplace-shadow);
  -webkit-backdrop-filter: var(--workplace-blur); backdrop-filter: var(--workplace-blur);
}
.suite-workspace .page > .kennzahlen:not(.workplace137__metrics) > .card {
  background: transparent; border: 0; border-left: 1px solid var(--workplace-border);
  border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.suite-workspace .page > .kennzahlen:not(.workplace137__metrics) > .card:first-child { border-left: 0; }
.suite-workspace .page > .kennzahlen:not(.workplace137__metrics) .stat { padding-block: .375rem; }

/* Kompakte Tabellen sind eine persönliche Desktopansicht. Auf Touch bleiben
   vollständige 44-px-Bedienflächen und genug Luft für mehrzeilige Einträge. */
@media (min-width: 768px) {
  html[data-workplace-compact="true"] .suite-workspace .table td { padding-block: .5rem; }
  html[data-workplace-compact="true"] .suite-workspace .ueb-zeile { padding-block: .625rem; }
  html[data-workplace-compact="true"] .suite-workspace .card__header { min-height: 3rem; padding-block: .625rem; }
}
@media (max-width: 767px) {
  .suite-workspace { --card-pad: 1rem; --workplace-radius: 14px; }
  .suite-workspace .page-head { align-items: flex-start; flex-wrap: wrap; }
  .suite-workspace .page-head__text { flex: 1 1 100%; }
  .suite-workspace .page-head :is(.btn, .input, .select) { min-height: 2.75rem; }
  .suite-workspace .workplace137__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .875rem 1rem; }
  .suite-workspace .workplace137__metrics > .card { min-width: 0; border-left: 0; }
  .suite-workspace .workplace137__metrics .stat { padding-inline: 0; }
  .suite-workspace .workplace137__metrics .stat__value { font-size: 1.25rem; }
  .suite-workspace .workplace137__metrics .stat__meta { overflow-wrap: anywhere; }
  .suite-workspace .page > .kennzahlen:not(.workplace137__metrics) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem 0; }
  .suite-workspace .page > .kennzahlen:not(.workplace137__metrics) > .card:nth-child(odd) { border-left: 0; }
  .suite-workspace .table--responsive td.is-primary :is(a, button),
  .suite-workspace .workplace137__toolbar :is(button, .btn, summary, select),
  .suite-workspace .workplace137__preview :is(.btn, .check) { min-height: 2.75rem; }
}
@media (max-width: 24rem) {
  .suite-workspace .workplace137__metrics { grid-template-columns: minmax(0, 1fr); }
  .suite-workspace .workplace137__metrics > .card { border-left: 0; }
  .suite-workspace .workplace137__metrics .stat { padding-inline: 0; }
  .suite-workspace .page > .kennzahlen:not(.workplace137__metrics) { grid-template-columns: minmax(0, 1fr); }
  .suite-workspace .page > .kennzahlen:not(.workplace137__metrics) > .card { border-left: 0; }
}

/* Die persönliche Einstellung und Systemvorgaben sind gleichwertige Rückfälle.
   Gemeinsame Variablen verhindern, dass eine spätere Komponentenregel wieder
   transparente Flächen einschaltet. Die Kopfleiste kann Inhalt überlagern. */
html[data-workplace-solid="true"] .suite-workspace {
  --workplace-surface: var(--surface); --workplace-preview: var(--surface);
  --workplace-blur: none; --workplace-edge: var(--workplace-border);
}
html[data-workplace-solid="true"] .suite-workspace .workspace-header { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .suite-workspace { --workplace-surface: var(--surface); --workplace-preview: var(--surface); --workplace-blur: none; --workplace-edge: var(--workplace-border); }
  .suite-workspace .workspace-header { background: var(--surface-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .suite-workspace { --workplace-surface: var(--surface); --workplace-preview: var(--surface); --workplace-blur: none; --workplace-edge: var(--workplace-border); }
  .suite-workspace .workspace-header { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  .suite-workspace { --workplace-surface: #fff; --workplace-preview: #fff; --workplace-blur: none; --workplace-shadow: none; --workplace-edge: #ddd; }
}

/* ===== Teil 96-interaktion ===== */
/* Gemeinsame Orientierung auf Entscheidungs- und Bearbeitungsseiten. */
.interaction1390{display:grid;gap:1.2rem;padding:clamp(1rem,2.5vw,2rem);max-width:62rem;margin-inline:auto}
.interaction1390 .label{margin-top:.55rem}
.inter1390-list,.inter1390-next{border-block:1px solid var(--border);padding:.9rem 0}
.inter1390-list summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.inter1390-list li{overflow-wrap:anywhere}
.inter1390-next{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.inter1390-next h2{font-size:1.05rem;margin:0 0 .3rem}
.inter1390-next p{max-width:60ch;margin:0;font-size:.95rem}
.inter1390-next>strong{font-size:.9rem;white-space:nowrap}
.lobby .concierge{align-items:center;gap:1rem}
.lobby .reception__meta a:focus-visible,.interaction1390 :is(button,a,select,input,summary):focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:640px){.inter1390-next{display:grid;gap:.5rem}.interaction1390 .cluster,.lobby .concierge{flex-wrap:wrap}.interaction1390 .btn,.lobby .reception__meta a{min-height:44px}.interaction1390 .grid{grid-template-columns:minmax(0,1fr)}}

.portal-upload:focus-within{outline:2px solid var(--accent,currentColor);outline-offset:3px}
.portal-upload+.stack .file-item{gap:.5rem;align-items:center;overflow-wrap:anywhere}
.portal-upload+.stack .file-item .btn{min-height:44px}
@media(max-width:480px){.portal-upload+.stack .file-item{flex-wrap:wrap}}