/* ===================================================================
   PrAx Dashboard – Gestaltung

   Marke: Anthrazit #1B2126, Grün #4FB37A, Grau #8C979E.
   Alle Schriften kommen vom Gerät, keine externen Requests.

   Farbschema: Die hellen Werte stehen auf blankem :root. Dunkel wird an
   zwei Stellen definiert – einmal für die Systemeinstellung, einmal für
   die ausdrückliche Wahl im Menü. Doppelt, weil CSS keine Wiederverwendung
   von Deklarationsblöcken kennt; wer hier etwas ändert, ändert es zweimal.
   =================================================================== */

:root {
  color-scheme: light;

  --sans: "Avenir Next", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Flächen, von hinten nach vorn gestapelt */
  --paper:      #f1f4f3;
  --paper-deep: #e5eae8;
  --surface:    #ffffff;
  --surface-2:  #fafbfb;   /* Kopfzeilen und Fußzeilen in Karten */
  --surface-3:  #f6f8f7;   /* eingelassene Felder auf einer Karte */

  /* Schrift */
  --ink:        #11161a;
  --ink-soft:   #4a5459;
  --ink-faint:  #7c878d;
  --ink-ghost:  #a2acb1;

  /* Linien: soft trennt innerhalb, line trennt Bereiche, hard umrandet Eingaben */
  --line:       #dde3e1;
  --line-soft:  #eaeeec;
  --line-hard:  #c8d1ce;

  /* Marke */
  --brand:      #1b2126;
  --brand-deep: #171c21;
  --brand-soft: #39434a;
  --accent:     #4fb37a;
  --accent-ink: #1f7a4a;   /* dunkler, wo Grün Text tragen muss */
  --accent-weich: #e8f5ee;
  --logo-hub:   #8c979e;
  --on-brand:   #ffffff;

  /* Signalfarben */
  --amber:      #8a5b0c;
  --amber-soft: #fbf0da;
  --rust:       #a3392a;
  --rust-soft:  #fbeae7;
  --moss:       #2f7340;
  --moss-soft:  #e6f3e8;
  --lagune:     #2c6b8f;
  --lagune-soft:#e4f0f6;
  --flieder:    #6a51a1;

  /* Serienfarben der Grafiken, gegen die Fläche und auf Farbsehschwächen geprüft */
  --c-ein: #4fb37a;
  --c-aus: #a8553c;

  /* Maße */
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Abstände: eine Reihe, damit Ränder überall gleich fallen */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10: 2.75rem;

  /* Höhe über der Fläche */
  --shadow-xs: 0 1px 2px rgba(17, 22, 26, .05);
  --shadow:    0 1px 2px rgba(17, 22, 26, .05), 0 8px 20px -14px rgba(17, 22, 26, .35);
  --shadow-md: 0 2px 4px rgba(17, 22, 26, .05), 0 14px 32px -18px rgba(17, 22, 26, .38);
  --shadow-lg: 0 4px 8px rgba(17, 22, 26, .06), 0 32px 60px -26px rgba(17, 22, 26, .42);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);

  /* Bewegung: kurz genug, um nicht zu warten, lang genug, um zu folgen */
  --schnell: .12s cubic-bezier(.4, 0, .2, 1);
  --ruhig:   .22s cubic-bezier(.22, .8, .3, 1);

  --sidebar: 244px;
  --topbar:  60px;
  --breite:  1280px;
}

/* Systemeinstellung dunkel – solange nicht ausdrücklich hell gewählt wurde. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    color-scheme: dark;
    --paper:      #121618;
    --paper-deep: #0d1113;
    --surface:    #1a1f22;
    --surface-2:  #1e2427;
    --surface-3:  #232a2e;
    --ink:        #e9eeeb;
    --ink-soft:   #a6afad;
    --ink-faint:  #7e8a88;
    --ink-ghost:  #616c6a;
    --line:       #2e3538;
    --line-soft:  #252b2e;
    --line-hard:  #3b4448;
    --brand:      #4fb37a;
    --brand-deep: #11161a;
    --brand-soft: #3d8f61;
    --accent:     #4fb37a;
    --accent-ink: #6fcd97;
    --accent-weich: #16281f;
    --on-brand:   #08170f;
    --amber:      #dda75a;
    --amber-soft: #2e2617;
    --rust:       #dd8471;
    --rust-soft:  #2e1c18;
    --moss:       #8bc79a;
    --moss-soft:  #16261a;
    --lagune:     #77b3d4;
    --lagune-soft:#152630;
    --flieder:    #a68fd8;
    --c-ein:      #48a972;
    --c-aus:      #b06340;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .28);
    --shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -14px rgba(0, 0, 0, .7);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .34), 0 14px 32px -18px rgba(0, 0, 0, .75);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 32px 60px -26px rgba(0, 0, 0, .8);
  }
}

/* Ausdrücklich dunkel gewählt – schlägt die Systemeinstellung. */
:root[data-theme="dunkel"] {
  color-scheme: dark;
  --paper:      #121618;
  --paper-deep: #0d1113;
  --surface:    #1a1f22;
  --surface-2:  #1e2427;
  --surface-3:  #232a2e;
  --ink:        #e9eeeb;
  --ink-soft:   #a6afad;
  --ink-faint:  #7e8a88;
  --ink-ghost:  #616c6a;
  --line:       #2e3538;
  --line-soft:  #252b2e;
  --line-hard:  #3b4448;
  --brand:      #4fb37a;
  --brand-deep: #11161a;
  --brand-soft: #3d8f61;
  --accent:     #4fb37a;
  --accent-ink: #6fcd97;
  --accent-weich: #16281f;
  --on-brand:   #08170f;
  --amber:      #dda75a;
  --amber-soft: #2e2617;
  --rust:       #dd8471;
  --rust-soft:  #2e1c18;
  --moss:       #8bc79a;
  --moss-soft:  #16261a;
  --lagune:     #77b3d4;
  --lagune-soft:#152630;
  --flieder:    #a68fd8;
  --c-ein:      #48a972;
  --c-aus:      #b06340;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -14px rgba(0, 0, 0, .7);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .34), 0 14px 32px -18px rgba(0, 0, 0, .75);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 32px 60px -26px rgba(0, 0, 0, .8);
}

/* Kompakte Dichte: enger, aber nicht kleiner – Schriftgrößen bleiben lesbar. */
:root[data-dichte="kompakt"] {
  --s3: .55rem; --s4: .75rem; --s5: .9rem; --s6: 1.1rem; --s8: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* Eigene display-Regeln würden das hidden-Attribut sonst aushebeln. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.022em; line-height: 1.2; margin: 0; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.18rem; letter-spacing: -.015em; }
h3 { font-size: 1.02rem; letter-spacing: -.01em; }
a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

.eyebrow {
  font-size: .69rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .55rem;
}


/* --------------------------------------------------------- Tabelle */

table { width: 100%; border-collapse: collapse; font-size: .91rem; }
th { text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: .6rem 1.25rem; border-bottom: 1px solid var(--line); }
td { padding: .7rem 1.25rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.inactive td { opacity: .55; }
td .actions { display: flex; gap: .4rem; justify-content: flex-end; }

.credential { font-family: var(--mono); font-size: 1rem; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: .5rem .7rem; display: inline-block; margin-top: .4rem; user-select: all; }

/* ------------------------------------------------------- Bewegung */

.reveal { animation: rise .45s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }


.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 1.25rem; border-bottom: 1px solid var(--line-soft);
}
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .name { display: block; font-weight: 600; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .meta { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: .1rem; }

/* ===================================================================
   Aufbau II – Kopfzeile, Seitenleiste, Schnellsuche

   Steht bewusst hinter den älteren Regeln: Was hier steht, gilt.
   Die Reihenfolge ist die Fassung, nicht die Spezifität – so bleiben
   die Selektoren flach und lesbar.
   =================================================================== */

.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; min-height: 100dvh; }
.arbeitsflaeche { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; }

/* ------------------------------------------------------- Seitenleiste */

.sidebar {
  background: linear-gradient(178deg, #20272d 0%, var(--brand-deep) 46%, #0f1417 100%);
  color: #b8c2be;
  padding: var(--s5) var(--s3) var(--s4);
  display: flex; flex-direction: column; gap: var(--s5);
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid rgba(0, 0, 0, .3);
  z-index: 40;
}
/* Der grüne Faden der Marke – ein Haar breit, aber er hält alles zusammen. */
.sidebar::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0 38%, #8c979e 38% 76%, #5c666d 76% 100%);
  opacity: .9;
}

.brand { display: flex; align-items: center; gap: .65rem; padding: .2rem .4rem; text-decoration: none; }
.brand:hover .brand-name { color: #fff; }
.brand-mark { width: 34px; height: 34px; flex: none; color: #c8cfd3; transition: color var(--ruhig); }
.brand:hover .brand-mark { color: var(--accent); }
.brand-name { font-size: 1.12rem; font-weight: 700; letter-spacing: -.035em; color: #f2f5f6; line-height: 1.1; }
.brand-sub { font-family: var(--mono); font-size: .53rem; letter-spacing: .22em; text-transform: uppercase; color: #79828a; }

.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; margin: 0 -.15rem; padding: 0 .15rem; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; }

.nav-gruppe {
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #5f6a6f; padding: var(--s4) .6rem .3rem;
}
.nav-gruppe:first-child { padding-top: .2rem; }

.nav a {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  padding: .48rem .6rem; border-radius: var(--radius-sm);
  color: #a3aeaa; text-decoration: none; font-size: .9rem; white-space: nowrap;
  transition: background var(--schnell), color var(--schnell);
}
.nav a:hover { background: rgba(255, 255, 255, .06); color: #eef4f1; }
.nav a.active { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; box-shadow: none; }
.nav a.active::before {
  content: ''; position: absolute; left: -.15rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav a svg { width: 17px; height: 17px; flex: none; opacity: .82; }
.nav a.active svg { opacity: 1; color: var(--accent); }
.nav-divider { height: 1px; background: rgba(255, 255, 255, .09); margin: var(--s3) .5rem; }

/* Zähler am rechten Rand: offene Aufgaben, fällige Termine. */
.nav-zahl {
  margin-left: auto; font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 19px; text-align: center; padding: .05rem .32rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #d5ddda;
}
.nav-zahl.dringend { background: color-mix(in srgb, var(--rust) 70%, #000); color: #ffe6e0; }
.nav a.active .nav-zahl { background: rgba(255, 255, 255, .2); color: #fff; }

.sidebar-foot { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: var(--s3); }
.konto { display: flex; align-items: center; gap: .55rem; width: 100%; }
/* Name über Rolle, nicht daneben: Als bloße Inline-Spans stünden sie in
   einer Zeile, und das Abschneiden am Rand griffe gar nicht erst. */
.konto-text { display: flex; flex-direction: column; min-width: 0; }
.konto-name { font-size: .85rem; color: #eef3f0; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-rolle { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: #79847f; }

.avatar {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), #2d8a58); color: #08170f;
  font-size: .8rem; font-weight: 700; letter-spacing: -.02em;
}
.avatar-sm { width: 22px; height: 22px; font-size: .62rem; }

/* Eingeklappt: nur Symbole. Beschriftungen weichen, Zähler werden Punkte. */
:root[data-seitenleiste="schmal"] { --sidebar: 66px; }
:root[data-seitenleiste="schmal"] .nav a { justify-content: center; padding: .55rem 0; }
:root[data-seitenleiste="schmal"] .nav a > span,
:root[data-seitenleiste="schmal"] .nav-gruppe,
:root[data-seitenleiste="schmal"] .brand-text,
:root[data-seitenleiste="schmal"] .konto-text { display: none; }
:root[data-seitenleiste="schmal"] .nav a { font-size: 0; }
:root[data-seitenleiste="schmal"] .nav-zahl {
  position: absolute; top: .18rem; right: .5rem; margin: 0;
  min-width: 7px; height: 7px; padding: 0; font-size: 0; background: var(--accent);
}
:root[data-seitenleiste="schmal"] .nav-zahl.dringend { background: var(--rust); }
:root[data-seitenleiste="schmal"] .brand { justify-content: center; }
:root[data-seitenleiste="schmal"] .konto { justify-content: center; }
:root[data-seitenleiste="schmal"] .sidebar { padding-left: .5rem; padding-right: .5rem; }

/* --------------------------------------------------------- Kopfzeile */

.topbar {
  position: sticky; top: 0; z-index: 35;
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--topbar); padding: 0 var(--s6);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
/* Der Titel in der Kopfzeile ist bei Dateien der Dateiname – ein einziges,
   beliebig langes Wort. Er hört mit drei Punkten auf, statt die Kopfzeile über
   den Fensterrand hinaus zu schieben. Das galt bisher nur unter 900 Pixeln;
   der Name wird am großen Bildschirm aber nicht kürzer. */
.topbar-titel { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-pfad { display: flex; align-items: center; gap: .35rem; min-width: 0; overflow: hidden; }
.topbar-pfad a { color: var(--ink-faint); text-decoration: none; font-size: .88rem; white-space: nowrap; }
.topbar-pfad a:hover { color: var(--ink); }
.topbar-pfad .sep { color: var(--ink-ghost); }
.topbar-rechts { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }

/* Suchauslöser: sieht aus wie ein Feld, ist ein Knopf – geöffnet wird ein Dialog. */
.suchknopf {
  display: flex; align-items: center; gap: .5rem;
  width: clamp(180px, 26vw, 320px); padding: .42rem .6rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-faint);
  font: 400 .87rem var(--sans); text-align: left; cursor: pointer;
  transition: border-color var(--schnell), box-shadow var(--schnell), color var(--schnell);
}
.suchknopf:hover { border-color: var(--line-hard); color: var(--ink-soft); }
.suchknopf:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.suchknopf svg { width: 15px; height: 15px; flex: none; }
.suchknopf .kbd { margin-left: auto; }

.kbd {
  font: 600 .68rem/1 var(--mono); padding: .22rem .34rem; border-radius: var(--radius-xs);
  background: var(--paper-deep); border: 1px solid var(--line); color: var(--ink-faint);
  white-space: nowrap;
}

.ikonknopf {
  position: relative;
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-soft); cursor: pointer; text-decoration: none;
  transition: background var(--schnell), color var(--schnell), border-color var(--schnell);
}
.ikonknopf:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
.ikonknopf:focus-visible { outline: none; box-shadow: var(--ring); }
.ikonknopf svg { width: 18px; height: 18px; }
.ikonknopf .punkt {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rust); border: 2px solid var(--paper);
}

/* Menü unter einem Knopf der Kopfzeile */
.menue { position: relative; }
.menue > summary { list-style: none; }
.menue > summary::-webkit-details-marker { display: none; }
.menue-blatt {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50;
  min-width: 236px; padding: var(--s2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: aufklapp .14s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes aufklapp { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
.menue-blatt a, .menue-blatt button.eintrag {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .45rem .55rem; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink); font: 400 .88rem var(--sans); text-align: left;
  text-decoration: none; cursor: pointer;
}
.menue-blatt a:hover, .menue-blatt button.eintrag:hover { background: var(--surface-3); }
.menue-blatt svg { width: 16px; height: 16px; flex: none; color: var(--ink-faint); }
.menue-titel {
  font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); padding: .5rem .55rem .3rem;
}
.menue-trenner { height: 1px; background: var(--line-soft); margin: var(--s2) .3rem; }

/* ---------------------------------------- Aufklapp-Kästen über der Seite

   Menü und Kurzformular hängen an einem <details> und liegen im Fluss über
   dem, was darunter steht. Gezeichnet wurden sie aber nur so weit, wie ihr
   Behälter reicht: Jede Karte schneidet ab (overflow: hidden für die runden
   Ecken), und dasselbe tun Tabellenrahmen, Brett und Wochenband, die in sich
   rollen. Am unteren Rand einer Karte war ein Kasten deshalb halb weg.

   Einzelne Behälter freizustellen ist ein Wettlauf, den man nicht gewinnt –
   jede neue Karte, jede neue Rollfläche bringt den Fehler zurück. Deshalb
   liegen die Kästen jetzt in der obersten Ebene des Browsers: Ein Element
   mit `popover` wird über der ganzen Seite gezeichnet, gleich wo es im
   Dokument steht, und kennt keinen Beschnitt. Die Stelle rechnet app.js aus
   – dieselbe wie hier beschrieben, nur am Fenster gemessen.

   Ohne popover (altes Gerät, kein JavaScript) bleibt es bei der absoluten
   Lage darunter; dann greifen weiter die overflow-Ausnahmen im Stylesheet. */
.pop[popover], .menue-blatt[popover] {
  position: fixed; inset: auto; margin: 0;
  max-width: calc(100vw - 2 * var(--s2));
  max-height: calc(100dvh - 2 * var(--s2));
}

/* Segmentschalter, etwa für hell/dunkel/system */
.segmente { display: flex; gap: 2px; padding: 3px; background: var(--surface-3); border-radius: var(--radius-sm); }
.segmente button {
  flex: 1; padding: .32rem .4rem; border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--ink-soft); font: 600 .76rem var(--sans); cursor: pointer;
  transition: background var(--schnell), color var(--schnell);
}
.segmente button:hover { color: var(--ink); }
.segmente button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }

/* Mobiler Öffner der Seitenleiste – auf großen Flächen unsichtbar. */
.leiste-auf { display: none; }

.main { padding: var(--s6) var(--s6) var(--s10); max-width: var(--breite); width: 100%; flex: 1; }

/* =================================================== Schnellsuche */

.palette-grund {
  position: fixed; inset: 0; z-index: 300; padding: 10vh 1rem 1rem;
  background: color-mix(in srgb, #0b0f11 62%, transparent);
  backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: flex-start;
  animation: einblenden .14s ease both;
}
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

.palette {
  width: 100%; max-width: 620px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: aufsteigen .18s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes aufsteigen { from { opacity: 0; transform: translateY(-10px) scale(.99); } to { opacity: 1; transform: none; } }

.palette-kopf { display: flex; align-items: center; gap: .6rem; padding: .3rem .9rem; border-bottom: 1px solid var(--line-soft); }
.palette-kopf svg { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }
.palette-kopf input {
  flex: 1; border: 0; background: none; padding: .85rem 0;
  font: 400 1.02rem var(--sans); color: var(--ink);
}
.palette-kopf input:focus { outline: none; }
.palette-kopf input::placeholder { color: var(--ink-ghost); }

.palette-liste { max-height: min(58vh, 460px); overflow-y: auto; padding: var(--s2); }
.palette-gruppe {
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); padding: .6rem .6rem .3rem;
}
.palette-treffer {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .5rem .6rem; border-radius: var(--radius-sm);
  color: inherit; text-decoration: none; cursor: pointer;
}
.palette-treffer:hover, .palette-treffer.aktiv { background: var(--surface-3); }
.palette-treffer.aktiv { box-shadow: inset 2px 0 0 var(--accent); }
.palette-treffer .titel { font-size: .92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-treffer .zusatz { font-size: .78rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-treffer .grow { min-width: 0; flex: 1; }
.palette-treffer mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.palette-marke {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--ink-faint);
}
.palette-marke svg { width: 15px; height: 15px; }
.palette-fuss {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: .5rem .9rem; border-top: 1px solid var(--line-soft); background: var(--surface-2);
  font-size: .76rem; color: var(--ink-faint);
}
.palette-fuss .kbd { font-size: .64rem; }
.palette-leer { padding: 2.2rem 1rem; text-align: center; color: var(--ink-faint); font-size: .9rem; }

/* ===================================================== Meldungen */

.toasts {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 400;
  display: flex; flex-direction: column; gap: .5rem; max-width: 340px;
}
.toast {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .85rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  font-size: .88rem; color: var(--ink);
  animation: hereinschieben .2s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes hereinschieben { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.toast.gehtRaus { animation: hinausschieben .18s ease forwards; }
@keyframes hinausschieben { to { opacity: 0; transform: translateX(14px); } }
.toast svg { width: 17px; height: 17px; flex: none; margin-top: .1rem; }
.toast-ok svg { color: var(--moss); }
.toast-fehler svg { color: var(--rust); }
.toast-fehler { border-color: color-mix(in srgb, var(--rust) 40%, var(--line)); }

/* Rückmeldung auf die letzte Aktion, nach einer Weiterleitung. Anders als ein
   Toast bleibt sie stehen: Zu „gebucht als 2026-0007" gehört ein Link dorthin,
   und den muss man noch treffen können. */
.flash {
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem;
  padding: .7rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--moss) 35%, transparent);
  background: var(--moss-soft); color: var(--moss); font-size: .9rem;
}
.flash-fehler { border-color: color-mix(in srgb, var(--rust) 35%, transparent); background: var(--rust-soft); color: var(--rust); }
.flash > svg { width: 18px; height: 18px; flex: none; }
.flash-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.flash-text strong { font-weight: 700; }
.flash-text span { color: inherit; opacity: .8; font-variant-numeric: tabular-nums; }
.flash .btn { flex: none; border-color: currentColor; color: inherit; }
.flash-zu { flex: none; border: 0; background: none; cursor: pointer; color: inherit; opacity: .55; font-size: 1.2rem; line-height: 1; padding: 0 .2rem; }
.flash-zu:hover { opacity: 1; }


/* ================================================ Bausteine, neu */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.card-head { padding: var(--s4) var(--s5); background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.card-head h2 { font-size: 1.02rem; }
.card-body { padding: var(--s5); }
.card-fuss {
  padding: .65rem var(--s5); border-top: 1px solid var(--line-soft); background: var(--surface-2);
  font-size: .82rem; color: var(--ink-faint);
}
.karten-link { font-size: .84rem; text-decoration: none; color: var(--ink-soft); white-space: nowrap; }
.karten-link:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

.page-head { margin-bottom: var(--s6); }
h1 { font-size: 1.72rem; letter-spacing: -.028em; }

/* Kennzahlkachel mit Verlaufslinie und Veränderung */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.kennzahl {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: var(--s4) var(--s5);
  transition: border-color var(--schnell), box-shadow var(--schnell);
}
.kennzahl:hover { border-color: var(--line); box-shadow: var(--shadow); }
.kennzahl .lbl { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .5rem; }
.kennzahl .wert { font-size: 1.72rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kennzahl .zusatz { font-size: .78rem; color: var(--ink-faint); margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line-soft); }
.kennzahl .wert.plus { color: var(--accent-ink); }
.kennzahl .wert.minus { color: var(--rust); }
.kennzahl-verlauf { position: absolute; right: 0; bottom: 0; left: 0; height: 34px; opacity: .5; pointer-events: none; }
.kennzahl-verlauf svg { width: 100%; height: 100%; display: block; }

.delta { display: inline-flex; align-items: center; gap: .18rem; font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta-hoch { color: var(--moss); }
.delta-runter { color: var(--rust); }
.delta svg { width: 12px; height: 12px; }

/* Fortschritt: dünn, ohne Beschriftung im Balken – die Zahl steht daneben. */
.fortschritt { height: 6px; border-radius: 999px; background: var(--paper-deep); overflow: hidden; }
.fortschritt i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width var(--ruhig); }
.fortschritt.warnung i { background: var(--amber); }
.fortschritt.kritisch i { background: var(--rust); }
.balkenziel { height: 6px; border-radius: 999px; background: var(--paper-deep); overflow: hidden; margin-top: .6rem; }

/* Etiketten */
.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .73rem; font-weight: 600; padding: .2rem .52rem; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-soft); border: 1px solid transparent;
  white-space: nowrap;
}
.tag-amber   { background: var(--amber-soft); color: var(--amber); }
.tag-rust    { background: var(--rust-soft); color: var(--rust); }
.tag-moss    { background: var(--moss-soft); color: var(--moss); }
.tag-lagune  { background: var(--lagune-soft); color: var(--lagune); }
.tag-flieder { background: color-mix(in srgb, var(--flieder) 12%, transparent); color: var(--flieder); }
.tag-grau    { background: var(--surface-3); color: var(--ink-soft); }
.tag-offen   { background: transparent; border-color: var(--line); color: var(--ink-faint); }
.tag-punkt::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand);
  font: 600 .88rem/1.2 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--schnell), filter var(--schnell), background var(--schnell), border-color var(--schnell);
}
.btn:hover { filter: brightness(1.14); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn svg { width: 15px; height: 15px; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--line-hard); filter: none; }
.btn-still { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-still:hover { background: var(--surface-3); color: var(--ink); filter: none; }
.btn-gruen { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.btn-danger { background: transparent; border-color: var(--line); color: var(--rust); }
.btn-danger:hover { background: var(--rust-soft); border-color: color-mix(in srgb, var(--rust) 40%, transparent); filter: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Eingaben */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time],
input[type=number], input[type=search], input[type=url], select, textarea {
  width: 100%; padding: .5rem .65rem;
  border: 1px solid var(--line-hard); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: 400 .91rem/1.5 var(--sans);
  transition: border-color var(--schnell), box-shadow var(--schnell);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-ghost); }
label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .28rem; }
.field { margin-bottom: var(--s3); }

/* Tabellen */
th {
  text-align: left; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding: .6rem var(--s5); border-bottom: 1px solid var(--line);
  background: var(--surface-2); position: sticky; top: var(--topbar); z-index: 5;
}
td { padding: .68rem var(--s5); border-bottom: 1px solid var(--line-soft); }
tbody tr { transition: background var(--schnell); }
tbody tr:hover { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.tabelle-rahmen { overflow-x: auto; }

/* Leere Zustände: sagen, was fehlt, und bieten den nächsten Schritt an. */
.empty { padding: 2.6rem 1.25rem; text-align: center; color: var(--ink-faint); font-size: .9rem; }
.empty strong { display: block; font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; color: var(--ink-soft); margin-bottom: .35rem; }
.empty .btn { margin-top: var(--s4); }
.empty-bild { width: 44px; height: 44px; margin: 0 auto var(--s3); color: var(--ink-ghost); opacity: .7; }

/* Hinweise */
.notice { padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .89rem; margin-bottom: var(--s5); border: 1px solid; display: flex; gap: .6rem; align-items: flex-start; }
.notice svg { width: 17px; height: 17px; flex: none; margin-top: .12rem; }
.notice-error { background: var(--rust-soft); border-color: color-mix(in srgb, var(--rust) 32%, transparent); color: var(--rust); }
.notice-ok    { background: var(--moss-soft); border-color: color-mix(in srgb, var(--moss) 32%, transparent); color: var(--moss); }
.notice-info  { background: var(--lagune-soft); border-color: color-mix(in srgb, var(--lagune) 30%, transparent); color: var(--lagune); }
.notice-warn  { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 32%, transparent); color: var(--amber); }

/* Unternavigation als Pillen */
.subnav { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: var(--s5); }
.subnav a {
  padding: .34rem .78rem; border-radius: 999px; font-size: .85rem; text-decoration: none;
  border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface);
  transition: all var(--schnell);
}
.subnav a:hover { border-color: var(--line-hard); color: var(--ink); }
.subnav a.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }

/* Werkzeugleiste über Listen */
.werkzeuge {
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--s4);
}
.werkzeuge form { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.werkzeuge input[type=search] { min-width: 200px; }
.werkzeuge .rechts { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }

/* Zweispaltiges Arbeitsblatt: Inhalt links, Formular rechts */
.zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: var(--s5); align-items: start; }
.zweispalt .haftend { position: sticky; top: calc(var(--topbar) + var(--s4)); }

/* Und das Gegenstück: erfassen links, nachsehen rechts. Zwei Klassen statt
   je Seite ein eigenes grid-template-columns im style-Attribut – sonst hat
   jede Seite ihre eigene Schwelle, ab der sie umbricht, und auf dem Handy
   bricht die eine um, während die andere aus dem Bild läuft.

   Wer zuerst steht, wenn beide untereinander stehen, ergibt sich aus der
   Reihenfolge im Markup: Auf einem Erfassblatt kommt man zum Eintragen –
   dort steht das Formular oben. */
.erfassblatt {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--s5); align-items: start;
}
@media (max-width: 1080px) {
  .erfassblatt { grid-template-columns: 1fr; }
  .erfassblatt .haftend { position: static; }
}
.erfassblatt > *, .zweispalt > * { min-width: 0; }
.erfassblatt .haftend { position: sticky; top: calc(var(--topbar) + var(--s4)); }


/* ------------------------------------------------------- Anmeldung */

.login-page {
  /* Bewusst immer dunkel – das ist der Markenauftritt vor dem Arbeitsbereich. */
  --surface:   #1c2124;
  --paper:     #0e1113;
  --ink:       #eef2f0;
  --ink-soft:  #9aa4a1;
  --ink-faint: #79837f;
  --line:      #2f3639;
  --line-soft: #262c2f;
  --brand:     #4fb37a;
  --brand-soft:#3d8f61;
  --on-brand:  #0b1a12;
  --accent:    #4fb37a;
  --accent-ink:#6cc994;
  --logo-hub:  #8c979e;

  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 2rem;
  color: var(--ink);
  background:
    radial-gradient(900px 460px at 18% -10%, rgba(79, 179, 122, .11), transparent 62%),
    radial-gradient(700px 380px at 88% 112%, rgba(140, 151, 158, .07), transparent 60%),
    linear-gradient(168deg, #232a30 0%, #1b2126 56%, #12171a 100%);
}
.login-card {
  width: 100%; max-width: 384px; padding: 2.1rem 1.95rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
}
.login-card .brand-mark { width: 60px; height: 60px; margin-bottom: 1.3rem; color: #c8cfd3; }
.login-card h1 { font-family: var(--sans); font-weight: 700; font-size: 1.65rem; letter-spacing: -.02em; margin-bottom: .3rem; }
.login-card h1 + .brand-rule { max-width: 210px; margin: .55rem 0 .5rem; height: 4px; }
.login-card .sub {
  font-family: var(--mono); color: var(--ink-faint); font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; margin: 0 0 1.7rem;
}
.login-card .btn { width: 100%; justify-content: center; margin-top: .4rem; }


/* ------------------------------------------------------- Ablage */

.crumbs { display: flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--ink-faint); flex-wrap: wrap; margin-bottom: .35rem; }
.crumbs a { text-decoration: none; }
.crumbs span.sep { opacity: .45; }

.filterleiste {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .6rem .7rem; margin-bottom: 1.1rem;
}
.filterleiste input[type=search] { flex: 1 1 240px; min-width: 180px; }
.filterleiste select { flex: 0 1 150px; font-size: .86rem; padding: .45rem .5rem; }

/* Aufklapp-Formulare in Kopfzeile und Zeilenmenü */
.pop {
  position: absolute; right: 0; top: 2.4rem; z-index: 20; width: 250px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem; box-shadow: var(--shadow-lg);
}
.pop-menue label { font-size: .78rem; }
.pop-menue input[type=text] { margin-bottom: .5rem; }
.menue-link { display: block; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line-soft); font-size: .84rem; text-decoration: none; }

/* Ablage-Fläche beim Ziehen */
.dropzone {
  position: fixed; inset: 12px; z-index: 60;
  border: 2px dashed var(--brand-soft); border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent));
  display: grid; place-content: center; text-align: center; pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.dropzone strong { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .3rem; }
.dropzone small { color: var(--ink-soft); }
.dropzone strong, .dropzone small { max-width: min(46rem, calc(100vw - 6rem)); margin-inline: auto; overflow-wrap: anywhere; }

.uploadliste {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .8rem 1rem; margin-bottom: 1.1rem; font-size: .88rem;
}
.upload-kopf { color: var(--ink-soft); margin-bottom: .5rem; }
.upload-fertig { color: var(--accent-ink); font-weight: 600; }
.upload-fehler { color: var(--rust); }
.progress { height: 4px; border-radius: 999px; background: var(--paper-deep); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }

/* Aktionsleiste bei Mehrfachauswahl */
.aktionsleiste {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--brand-deep); color: #eef2f0; border-radius: var(--radius);
  padding: .55rem .9rem; margin-bottom: .8rem; font-size: .88rem;
  position: sticky; top: .6rem; z-index: 15; box-shadow: var(--shadow-lg);
}
.aktionsleiste-knoepfe { display: flex; gap: .45rem; align-items: center; margin-left: auto; flex-wrap: wrap; }
.aktionsleiste select { width: auto; min-width: 150px; max-width: 240px; padding: .35rem .5rem; font-size: .84rem; background: rgba(255,255,255,.1); color: #eef2f0; border-color: rgba(255,255,255,.2); }
.aktionsleiste .linkbtn { color: #a7b2ae; }
.aktionsleiste .linkbtn:hover { color: #fff; }

/* Die Liste selbst */
table.ablage { table-layout: auto; }
table.ablage td { padding: .5rem .7rem; vertical-align: middle; }
table.ablage th { padding: .5rem .7rem; }
.spalte-check { width: 30px; }
.spalte-typ { width: 42px; }
.spalte-meta { width: 150px; color: var(--ink-soft); font-size: .84rem; white-space: nowrap; }
.spalte-groesse { width: 88px; color: var(--ink-soft); font-size: .84rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.spalte-aktion { width: 96px; }
.sortkopf { text-decoration: none; color: inherit; }
.sortkopf:hover { color: var(--ink); }

.zeile { transition: background .12s ease; }
.zeile:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.zeile.gewaehlt { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.zeile.zieht { opacity: .4; }
.zeile.ziel-aktiv { background: color-mix(in srgb, var(--accent) 20%, transparent); outline: 2px solid var(--brand-soft); outline-offset: -2px; }
.zeile-datei { cursor: grab; }
.zeile-datei:active { cursor: grabbing; }
.zeile.hoch a { color: var(--ink-faint); }
.hoch-link { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; text-decoration: none; }
.hoch-link:hover { color: var(--ink); }

.eintrag-name { display: block; font-weight: 600; font-size: .93rem; text-decoration: none; color: var(--ink); }
.eintrag-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.eintrag-meta { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: .1rem; }

/* Ein Dateiname ist ein einziges Wort: »Ohne_Steuernummer__Finanzamt_Frankfurt
   _am_Main__014___Uebertragungsprotokoll.pdf« enthält keine Stelle, an der ein
   Browser von sich aus umbrechen dürfte. Ohne ausdrückliche Erlaubnis wird die
   Namensspalte deshalb so breit wie der Name, die Tabelle sprengt die Karte –
   und weil die Karte für ihre runden Ecken `overflow: hidden` trägt,
   verschwinden Geändert, Größe und die Zeilenaktionen wortlos hinter dem Rand.
   Die Zeile sieht kaputt aus, obwohl nichts fehlt.

   `anywhere` und nicht `break-word`: nur `anywhere` senkt auch die
   Mindestbreite, mit der die Tabelle rechnet. `break-word` bricht den Text
   zwar um, die Spalte will aber weiterhin so breit werden wie das ganze Wort –
   der Überlauf bliebe. Und es gilt in jeder Fensterbreite, nicht nur auf dem
   Handy: Ein langer Name ist am Schreibtisch genauso lang. */
.eintrag-name, .eintrag-meta, .eintrag-titel,
.kachel-name, .kachel-meta,
.uploadliste, .lichtkasten figcaption { overflow-wrap: anywhere; }

/* Dieselbe Erlaubnis dort, wo ein Name außerhalb der Liste steht: als
   Überschrift und in der Brotkrume der Datei- und Ordnerseite. */
.page-head h1, .crumbs { overflow-wrap: anywhere; }
.page-head h1 > .typ { flex: none; }
.crumbs > * { min-width: 0; }

/* Typsymbole */
.typ {
  position: relative; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--paper-deep); color: var(--ink-soft);
}
.typ svg { width: 18px; height: 18px; }
.typ b {
  position: absolute; bottom: -3px; right: -4px;
  font-size: .48rem; font-weight: 700; letter-spacing: .02em;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 3px;
  padding: 0 2px; color: var(--ink-faint); max-width: 30px; overflow: hidden;
}
.typ-ordner { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.typ-bild { background: color-mix(in srgb, #4f86b3 16%, transparent); color: #3f77a4; }
.typ-pdf { background: color-mix(in srgb, var(--rust) 14%, transparent); color: var(--rust); }
.typ-tabelle { background: color-mix(in srgb, var(--accent) 17%, transparent); color: var(--accent-ink); }
.typ-praesentation { background: color-mix(in srgb, #b3814f 16%, transparent); color: #96692f; }
.typ-video, .typ-audio { background: color-mix(in srgb, #7a5fb3 15%, transparent); color: #6a51a1; }
@media (prefers-color-scheme: dark) {
  .typ-bild { color: #7fb0d8; }
  .typ-praesentation { color: #d0a06a; }
  .typ-video, .typ-audio { color: #a68fd8; }
}

.zeilenaktionen { display: flex; gap: .15rem; align-items: center; justify-content: flex-end; opacity: 0; transition: opacity .12s ease; }
.zeile:hover .zeilenaktionen, .zeilenaktionen:focus-within { opacity: 1; }
.zeilenaktionen .ikon, .zeilenmenue summary {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  color: var(--ink-faint); text-decoration: none; cursor: pointer; list-style: none;
}
.zeilenaktionen .ikon:hover, .zeilenmenue summary:hover { background: var(--paper-deep); color: var(--ink); }
.zeilenmenue { position: relative; display: inline-block; }
.zeilenmenue summary::-webkit-details-marker { display: none; }
.spalte-aktion .zeilenmenue summary { opacity: 1; }
tr:has(.zeilenmenue[open]) { position: relative; z-index: 25; }

/* Detailseite */
.vorschau { background: var(--paper-deep); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.vorschau img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.vorschau iframe { display: block; width: 100%; height: 70vh; border: 0; background: var(--surface); }
.vorschau iframe.text { height: 40vh; padding: 0; }


/* ------------------------------------------------- Ablage: Aufbau */

.ablage-raster { display: grid; grid-template-columns: 200px 1fr; gap: 1.25rem; align-items: start; }
.ablage-raster > * { min-width: 0; }
.ablage-inhalt { min-width: 0; }
.ablage-baum { position: sticky; top: .6rem; }
.ablage-baum .eyebrow { margin-bottom: .4rem; }
.baum-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.baum-kopf .eyebrow { margin: 0; }
.baum-kopf .linkbtn { font-size: .72rem; color: var(--ink-faint); }
.baum-kopf .linkbtn:hover { color: var(--ink); }

.baum-zeile {
  display: flex; align-items: center; gap: .1rem;
  border-radius: var(--radius-sm); padding-right: .3rem;
  color: var(--ink-soft); white-space: nowrap;
}
.baum-zeile:hover { background: var(--paper-deep); color: var(--ink); }
.baum-zeile.aktiv { background: var(--paper-deep); color: var(--ink); font-weight: 600; }
.baum-zeile.ziel-aktiv { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--ink); outline: 1px solid var(--brand-soft); }

.baum-name {
  display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0;
  padding: .3rem .2rem; font-size: .86rem; color: inherit; text-decoration: none;
}
.baum-name span { overflow: hidden; text-overflow: ellipsis; }
.baum-name svg { flex: none; opacity: .75; }

.baum-pfeil {
  flex: none; display: grid; place-items: center; width: 16px; height: 20px;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-faint);
}
.baum-pfeil svg { transition: transform .15s ease; }
.baum-pfeil.offen svg { transform: rotate(90deg); }
.baum-pfeil:hover { color: var(--ink); }
.baum-luecke { flex: none; width: 16px; }

.kopf-werkzeuge { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ansichtswahl { display: flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ansichtswahl a { display: grid; place-items: center; width: 32px; height: 30px; color: var(--ink-faint); background: var(--surface); }
.ansichtswahl a:hover { color: var(--ink); }
.ansichtswahl a.aktiv { background: var(--brand); color: var(--on-brand); }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr)); gap: .9rem; }
.kachel {
  position: relative; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden; transition: border-color .12s ease, box-shadow .12s ease;
}
.kachel:hover { border-color: var(--line); box-shadow: var(--shadow); }
.kachel.gewaehlt { border-color: var(--brand-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.kachel.zieht { opacity: .4; }
.kachel.ziel-aktiv { border-color: var(--brand-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.kachel-flaeche { display: block; text-decoration: none; color: inherit; }
.kachel-bild {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: var(--paper-deep); overflow: hidden; color: var(--ink-faint);
}
.kachel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kachel-bild.ordner svg { width: 46px; height: 46px; color: var(--amber); opacity: .85; }
.kachel-bild .typ { width: 46px; height: 46px; background: transparent; }
.kachel-bild .typ svg { width: 26px; height: 26px; }
.kachel-bild .typ b { font-size: .55rem; bottom: -2px; right: -2px; }
.kachel-text { padding: .55rem .65rem .65rem; }
.kachel-name { display: block; font-size: .85rem; font-weight: 600; line-height: 1.3; overflow: hidden;
  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kachel-meta { display: block; font-size: .74rem; color: var(--ink-faint); margin-top: .2rem; }
.kachel-wahl {
  position: absolute; top: .45rem; left: .45rem; z-index: 2; width: auto;
  opacity: 0; transition: opacity .12s ease;
}
.kachel:hover .kachel-wahl, .kachel-wahl:checked, .kachel.gewaehlt .kachel-wahl { opacity: 1; }
/* Rechte obere Ecke einer Kachel: merken und das ⋯-Menü. Beides liegt über
   der Kachelfläche, deshalb ein eigener Streifen statt einzelner Positionen. */
.kachel-ecke {
  position: absolute; top: .35rem; right: .35rem; z-index: 3;
  display: flex; gap: .1rem; align-items: center;
}
/* Der Hintergrund sitzt an den Knöpfen, nicht am Streifen: Sonst stünde über
   jeder Kachel ein leeres Kästchen, auch wenn beide Knöpfe unsichtbar sind. */
.kachel-ecke .stern, .kachel-ecke .zeilenmenue summary {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink-faint); cursor: pointer; list-style: none;
}
.kachel-ecke .zeilenmenue summary::-webkit-details-marker { display: none; }
.kachel-ecke .zeilenmenue summary:hover, .kachel-ecke .stern:hover { color: var(--ink); }
.kachel-ecke .zeilenmenue { opacity: 0; transition: opacity .12s ease; }
.kachel:hover .kachel-ecke .zeilenmenue,
.kachel-ecke .zeilenmenue[open], .kachel-ecke .zeilenmenue:focus-within { opacity: 1; }
.kachel:has(.zeilenmenue[open]) { z-index: 25; }

/* Schnellansicht und Herunterladen am unteren Rand – dieselben Wege wie in
   der Zeile, nur eine Etage tiefer. */
.kachel-fuss {
  position: absolute; bottom: .4rem; right: .4rem; z-index: 3;
  display: flex; gap: .1rem; align-items: center;
  border-radius: 8px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow); opacity: 0; transition: opacity .12s ease;
}
.kachel:hover .kachel-fuss, .kachel-fuss:focus-within { opacity: 1; }
.kachel-fuss .ikon {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  border: 0; background: none; color: var(--ink-faint); text-decoration: none; cursor: pointer;
}
.kachel-fuss .ikon:hover { background: var(--paper-deep); color: var(--ink); }

.kachel-marke { position: absolute; top: .35rem; left: 2.1rem; z-index: 2; }

/* Titelzeile eines Eintrags: Name plus Marken (Version, Beleg) in einer Reihe,
   damit die Marken nicht den Zeilenumbruch des Namens erben. */
.eintrag-titel { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.eintrag-titel .tag { flex: none; }

/* Kennzeichnung „Buchungsbeleg" – klickbar, führt auf die Buchung. */
.beleg-marke { display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; }
.beleg-marke:hover { text-decoration: underline; text-underline-offset: 2px; }
.beleg-marke svg { flex: none; }

/* Fuß der Ordner-Seitenleiste: was insgesamt in der Ablage liegt. */
.baum-fuss {
  margin: 1.2rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line-soft);
  font-size: .74rem; color: var(--ink-faint);
}

/* Liegezeit im Papierkorb */
.liegezeit { color: var(--ink-faint); font-size: .76rem; }

/* Kleine Bildvorschau in der Liste */
.minibild { display: block; width: 34px; height: 34px; border-radius: 7px; overflow: hidden; background: var(--paper-deep); }
.minibild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sterne */
.stern { border: 0; background: none; }
.stern.an { color: var(--amber); }
.zeilenaktionen .stern { opacity: 1; }
.zeile .stern:not(.an) { opacity: 0; }
.zeile:hover .stern, .zeile .stern.an { opacity: 1; }

.menue-form { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line-soft); }
.menue-form label { font-size: .78rem; }
.menue-form select { margin-bottom: .5rem; }

/* Schnellansicht */
.lichtkasten {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 3rem 2rem;
  background: rgba(12, 15, 17, .82); backdrop-filter: blur(3px);
}
.lichtkasten figure { margin: 0; max-width: 1000px; width: 100%; }
.lichtkasten img { display: block; max-width: 100%; max-height: 76vh; margin: 0 auto; border-radius: var(--radius); background: #fff; }
.lichtkasten iframe { width: 100%; height: 76vh; border: 0; border-radius: var(--radius); background: #fff; }
.lichtkasten figcaption { text-align: center; color: #e6ebe9; font-size: .88rem; margin-top: .9rem; }
.lichtkasten figcaption a { color: #9fe0b8; }
.lichtkasten-zu {
  position: absolute; top: 1rem; right: 1.3rem; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lichtkasten-zu:hover { background: rgba(255, 255, 255, .22); }

/* Freigabeseite nach außen */
.freigabe-seite { background: var(--paper); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.freigabe-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.6rem; background: var(--brand-deep); color: #eef2f0;
}
.freigabe-kopf .marke { display: flex; align-items: center; gap: .7rem; }
.freigabe-kopf .brand-mark { width: 32px; height: 32px; color: #c8cfd3; display: block; }
.freigabe-inhalt { flex: 1; width: 100%; max-width: 940px; margin: 0 auto; padding: 2.2rem 1.4rem 3rem; }
.freigabe-inhalt .unterzeile { color: var(--ink-soft); font-size: .9rem; margin: .4rem 0 0; }
.freigabe-inhalt .notiz {
  margin: 1rem 0 0; padding: .7rem .9rem; border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .92rem;
}
.freigabe-inhalt .hinweis { font-size: .84rem; color: var(--ink-faint); margin-top: .8rem; }
.freigabe-fuss { padding: 1.2rem; text-align: center; font-size: .8rem; color: var(--ink-faint); border-top: 1px solid var(--line-soft); }

@media (max-width: 900px) {
  .ablage-raster { grid-template-columns: 1fr; }
  .ablage-baum { position: static; display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .4rem; }
  .ablage-baum .eyebrow { display: none; }
  .baum-zeile { padding-left: .3rem !important; border: 1px solid var(--line-soft); background: var(--surface); flex: none; }
  .baum-knoten { display: contents; }
  .baum-kinder { display: contents; }
  .baum-kopf .linkbtn { display: none; }
}


/* Gesprächsverlauf als Zeitstrahl */
.verlauf { list-style: none; margin: 0; padding: .8rem 1.25rem 1rem; }
.verlauf-punkt { position: relative; padding: 0 0 1rem 1.3rem; border-left: 2px solid var(--line-soft); }
.verlauf-punkt:last-child { border-left-color: transparent; padding-bottom: .2rem; }
.verlauf-punkt::before {
  content: ''; position: absolute; left: -6px; top: .35rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line);
}
.verlauf-punkt.art-anruf::before   { border-color: var(--accent-ink); }
.verlauf-punkt.art-mail::before    { border-color: #4f86b3; }
.verlauf-punkt.art-treffen::before { border-color: var(--amber); }
.verlauf-punkt.art-angebot::before { border-color: var(--brand); background: var(--brand); }
.verlauf-kopf { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .84rem; }
.verlauf-kopf strong { font-size: .86rem; }
.verlauf-kopf span { color: var(--ink-faint); }
.verlauf-kopf form { margin-left: auto; }
.verlauf-punkt p { margin: .3rem 0 0; font-size: .9rem; color: var(--ink-soft); white-space: pre-wrap; }


/* ================================================== Feinschliff */

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Sprungziel für die Tastatur – erscheint erst beim Tabben. */
.zum-inhalt {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  padding: .6rem 1rem; background: var(--surface); border: 1px solid var(--accent);
  border-radius: 0 0 var(--radius-sm) 0; font-size: .88rem; text-decoration: none;
}
.zum-inhalt:focus { left: 0; }

.zahl { font-variant-numeric: tabular-nums; }
.gedaempft { color: var(--ink-faint); }
.trennen { border-top: 1px solid var(--line-soft); margin: var(--s5) 0; }

.reveal { animation: rise .38s cubic-bezier(.22, .8, .3, 1) both; }

/* ====================================================== Schmale Fläche */

@media (max-width: 1080px) {
  .zweispalt { grid-template-columns: 1fr; }
  .zweispalt .haftend { position: static; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 268px; height: 100dvh;
    transform: translateX(-100%); transition: transform var(--ruhig);
    box-shadow: var(--shadow-lg); z-index: 120; flex-direction: column;
  }
  body.leiste-offen .sidebar { transform: none; }
  body.leiste-offen::after {
    content: ''; position: fixed; inset: 0; z-index: 110;
    background: rgba(10, 14, 16, .5); backdrop-filter: blur(2px);
  }
  .leiste-auf { display: grid; }
  .topbar { padding: 0 var(--s4); }
  .suchknopf { width: auto; flex: 1; min-width: 0; }
  .suchknopf .beschriftung, .suchknopf .kbd { display: none; }
  .main { padding: var(--s4) var(--s4) var(--s10); }
  .kalendertag { min-height: 74px; }
  .kal-eintrag { font-size: .68rem; }
  th, td { padding: .55rem .7rem; }
  th { top: 0; }
  :root[data-seitenleiste="schmal"] { --sidebar: 268px; }
  :root[data-seitenleiste="schmal"] .nav a { justify-content: flex-start; padding: .48rem .6rem; font-size: .9rem; }
  :root[data-seitenleiste="schmal"] .nav a > span,
  :root[data-seitenleiste="schmal"] .nav-gruppe,
  :root[data-seitenleiste="schmal"] .brand-text,
  :root[data-seitenleiste="schmal"] .konto-text { display: block; }
  :root[data-seitenleiste="schmal"] .nav-zahl { position: static; min-width: 19px; height: auto; padding: .05rem .32rem; font-size: .7rem; background: rgba(255,255,255,.12); }
}

@media (max-width: 620px) {
  .kalender-raster { grid-template-columns: repeat(7, 1fr); }
  .kalendertag { min-height: 58px; padding: .2rem; }
  .kal-eintrag { padding: .08rem .2rem; font-size: 0; height: 5px; border-radius: 2px; border-left-width: 0; }
  .kal-eintrag .zeit { display: none; }
  .kennzahlen { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--s3); }
  .kennzahl .wert { font-size: 1.4rem; }
  .zugang-zeilen { grid-template-columns: 1fr; }
  .zugang-zeilen dt { margin-top: .4rem; }
}

/* ========================================================== Drucken */

@media print {
  .sidebar, .topbar, .toasts, .palette-grund, .subnav, .werkzeuge, .btn, .nichtdrucken { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { border: 0; box-shadow: none; }
  a { color: #000; text-decoration: none; }
  .druckbogen { padding: 0; }
  @page { margin: 18mm 16mm; }
}


/* ================================================= Nachträge zur Fassung

   Ein Symbol ohne Größenangabe füllt seinen Platz vollständig aus – in einer
   Aufklapp-Kopfzeile wird daraus ein Riesenkreuz. Deshalb bringt jedes Symbol
   sein Maß selbst mit; die Regeln weiter oben (.nav a svg, .btn svg …) sind
   spezifischer und behalten Vorrang.
   =================================================================== */

.ikon { width: 17px; height: 17px; flex: none; }

/* Aufklapper einheitlich ohne Dreieck, dafür mit Zeiger. */
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }

/* Ein 1fr-Feld ist mindestens so breit wie sein längster unteilbarer Inhalt.
   Ohne min-width:0 zieht ein langer Termintitel seine Spalte auseinander und
   der Kalender steht schief. */
.kalendertag { min-width: 0; }
.kalendertag > * { min-width: 0; max-width: 100%; }

/* Aufklapp-Kopfzeile in einer Karte: gleiche Höhe wie eine Kartenkopfzeile. */
.card > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: var(--s4) var(--s5); font-weight: 600; font-size: .95rem;
  background: var(--surface-2); list-style: none;
}
.card > summary:hover { background: var(--surface-3); }
.card[open] > summary { border-bottom: 1px solid var(--line-soft); }

/* Grid-Kinder überall daran hindern, ihre Spalte aufzublähen. */
.grid > *, .kennzahlen > *, .bericht-raster > *, .zweispalt > * { min-width: 0; }

/* Titel und Zusatz stehen untereinander – nebeneinander verschmelzen sie beim
   Überfliegen zu einer Zeile, und genau darauf zielt die Trefferliste nicht. */
.palette-treffer .titel { display: block; }
.palette-treffer .zusatz { display: block; margin-top: .05rem; }

/* Ein Element mit overflow (in welcher Achse auch immer) ist ein
   Scroll-Behälter. »position: sticky; top: 60px« misst dann nicht mehr ab der
   Fensterkante, sondern ab der Kante dieses Behälters – die Kopfzeile steht 60
   Pixel zu tief und liegt auf der ersten Datenzeile.

   Das galt für `.tabelle-rahmen` (overflow-x: auto) und war dort behoben. Es
   gilt genauso für `.card` (overflow: hidden für die runden Ecken), und dort
   steht die Mehrzahl der Tabellen: Dokumente, Papierkorb, Kunden, Buchungen,
   Team. Deshalb hier beide Behälter, nicht nur der eine. */
.tabelle-rahmen th,
.card th { top: 0; }

@media (max-width: 620px) {
  /* Auf schmaler Fläche wächst die Kachel, wenn ein langer Betrag umbricht –
     die Verlaufslinie klebt dann am unteren Rand und kreuzt den Text.
     Sie ist Beiwerk und darf hier weichen. */
  .kennzahl-verlauf { display: none; }
  .kennzahl .wert { font-size: clamp(1.05rem, 6.5vw, 1.4rem); }
}

/* Seitenkopf: Text links, Aktionen rechts. Direkte Kinder stehen nebeneinander –
   Vorspann, Überschrift und Beschreibung gehören deshalb in einen gemeinsamen
   Block, sonst rutscht die Überschrift an den rechten Rand. */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s6); flex-wrap: wrap; margin-bottom: var(--s6);
}
.page-head > * { min-width: 0; }
.page-head p { margin: .35rem 0 0; color: var(--ink-soft); font-size: .92rem; max-width: 62ch; }



/* ===================================================================
   Handy und Tablet

   Der Betrieb steht nicht immer am Schreibtisch: Beleg abfotografieren,
   Aufgabe abhaken, im Kundengespräch nachsehen, was zuletzt vereinbart
   war. Dieser Abschnitt richtet dafür alles ein, was auf einer kleinen,
   berührten Fläche anders sein muss als auf einer großen mit Maus.

   Er steht am Ende, weil er das letzte Wort haben soll. Drei Fragen
   trennen die Regeln:

     max-width     Wie viel Platz ist da?
     pointer:coarse   Wird mit dem Finger gezielt statt mit dem Zeiger?
     hover:none    Gibt es überhaupt ein „Überfahren"?

   Sie sind nicht dasselbe: Ein Tablet mit Tastatur ist breit und wird
   trotzdem berührt, ein schmales Browserfenster am Rechner ist schmal
   und hat eine Maus.
   =================================================================== */

/* ------------------------------------------- Ränder, die das Gerät setzt

   Auf Geräten mit runden Ecken oder einer Kerbe liegt ein Teil der Fläche
   unter dem Gehäuse. env(safe-area-inset-…) sagt, wie viel – im Querformat
   sind das schnell 44 Pixel, in denen sonst der halbe Kundenname steckt.
   max() nimmt den größeren von beiden Werten: unser Rand oder der des
   Geräts, nie beide addiert. */

@media (max-width: 900px) {
  .topbar {
    padding-left: max(var(--s4), env(safe-area-inset-left));
    padding-right: max(var(--s4), env(safe-area-inset-right));
  }
  .main {
    padding-left: max(var(--s4), env(safe-area-inset-left));
    padding-right: max(var(--s4), env(safe-area-inset-right));
    padding-bottom: calc(var(--s10) + env(safe-area-inset-bottom));
  }
  .sidebar {
    padding-left: max(var(--s3), env(safe-area-inset-left));
    padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
  }
  .freigabe-kopf, .freigabe-inhalt {
    padding-left: max(1.1rem, env(safe-area-inset-left));
    padding-right: max(1.1rem, env(safe-area-inset-right));
  }
  .toasts {
    left: max(.8rem, env(safe-area-inset-left));
    right: max(.8rem, env(safe-area-inset-right));
    bottom: calc(.8rem + env(safe-area-inset-bottom));
    max-width: none;
  }
}

/* --------------------------------------------------- Schrift in Feldern

   iOS zoomt beim Antippen in jedes Feld, dessen Schrift kleiner als 16px
   ist – und zoomt danach nicht von selbst zurück. Die Seite steht dann
   schief, bis man von Hand herauswischt. Deshalb sind Eingaben auf
   Berührungsgeräten genau 16px groß, auch in den engen Filterleisten. */

@media (pointer: coarse) {
  input[type=text], input[type=email], input[type=password], input[type=date],
  input[type=time], input[type=number], input[type=search], input[type=url],
  select, textarea,
  .planung-filter select, .planung-filter input[type=search],
  .kassenfilter select, .kassenfilter input[type=search],
  .filterleiste select, .spalte-schnell input, .aktionsleiste select {
    font-size: 16px;
  }
}

/* ------------------------------------------------ Flächen für den Finger

   Ein Zeiger trifft 26 Pixel, eine Fingerkuppe nicht zuverlässig. Wo Platz
   ist, wachsen die Knöpfe; wo keiner ist – die Ecke einer Kachel, der Haken
   auf einer Karte –, bleibt das Bild gleich groß und nur die Trefferfläche
   wächst unsichtbar darüber hinaus. */

@media (pointer: coarse) {
  .ikonknopf { width: 42px; height: 42px; }
  .zeilenaktionen .ikon, .zeilenmenue > summary { width: 38px; height: 38px; }
  .zeilenaktionen { gap: .1rem; }
  .kachel-fuss .ikon, .kachel-ecke .stern, .kachel-ecke .zeilenmenue > summary { width: 34px; height: 34px; }
  .karte-menue > summary { width: 30px; height: 30px; }
  .btn-sm { padding: .42rem .7rem; }
  .segmente button { padding: .5rem .4rem; }
  .menue-blatt a, .menue-blatt button.eintrag { padding: .58rem .55rem; }
  .subnav a { padding: .48rem .85rem; }
  .lichtkasten-zu { width: 46px; height: 46px; }
  .baum-name { padding: .45rem .2rem; }
  .baum-pfeil { width: 30px; height: 30px; }

  /* Trefferfläche ohne sichtbare Änderung: der Kreis bleibt klein, was ihn
     umgibt, hört mit. Der Knopf muss dafür ein Bezugspunkt sein. */
  .karte-haken button, .kalendertag .neu, .flash-zu, .kachel-wahl {
    position: relative;
  }
  .karte-haken button::after, .kalendertag .neu::after, .flash-zu::after, .kachel-wahl::after {
    content: ''; position: absolute; inset: -11px;
  }
}

/* Ohne Zeiger gibt es kein Überfahren – was sich erst dabei zeigt, bliebe
   für immer unsichtbar. Zeilenwerkzeuge, Sterne und Kachelknöpfe stehen
   deshalb dauerhaft da. */
@media (hover: none) {
  .zeilenaktionen,
  .zeile .stern, .zeile .stern:not(.an),
  .kachel-fuss, .kachel-wahl,
  .kachel-ecke .zeilenmenue,
  .kalendertag .neu,
  .posten-aktionen { opacity: 1; }
}

/* --------------------------------------------------------- Kopfzeile

   Der Titel ist das, was hier tatsächlich hilft – die Suche wird zum
   Symbol, damit ihm die Breite bleibt. Ein langer Titel bricht nicht um
   und schiebt nichts weg, er hört mit drei Punkten auf. */

@media (max-width: 900px) {
  .topbar { gap: var(--s2); }
  .topbar-pfad { flex: 1; }
  .topbar-rechts { gap: 0; }
  .suchknopf {
    flex: none; width: 42px; padding: 0;
    justify-content: center; border-color: transparent; background: transparent;
  }
  .suchknopf svg { width: 18px; height: 18px; }
}

/* Auf sehr schmalen Geräten ist der Weg dorthin weniger wert als der Name
   der Seite, auf der man steht. */
@media (max-width: 460px) {
  .topbar-pfad a, .topbar-pfad .sep { display: none; }
}

/* ---------------------------------------------------- Die Navigation

   Sie fährt von links ein und legt sich über die Seite. Solange sie offen
   steht, rollt die Seite darunter nicht mit – sonst steht man nach dem
   Schließen woanders als vorher. */

@media (max-width: 900px) {
  .sidebar {
    width: min(288px, 86vw);
    overscroll-behavior: contain;
  }
  body.leiste-offen { overflow: hidden; }
  .nav a { padding: .6rem .6rem; font-size: .95rem; }
  .nav-gruppe { padding-top: var(--s3); }
}

/* ------------------------------------- Leisten, die zum Streifen werden

   Sieben Reiter brechen auf einem Handy in drei Zeilen um und schieben den
   Inhalt aus dem Bild. Als eine Zeile zum Wischen kosten sie ein Fünftel
   davon – und der angeschnittene nächste Reiter zeigt, dass es weitergeht.
   Die negativen Ränder lassen den Streifen bis an die Kante laufen, damit
   nichts abgeschnitten aussieht, was nur weiterrollt. */

@media (max-width: 620px) {
  .subnav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1);
    padding-left: var(--s4); padding-right: var(--s4);
    -webkit-overflow-scrolling: touch;
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex: none; }

  /* Filter und Suche gehören nebeneinander, solange sie zu zweit passen –
     das Suchfeld bekommt die ganze Zeile, weil ein halber Platzhalter
     nichts sagt. */
  .filterleiste, .werkzeuge, .kopf-werkzeuge { gap: .45rem; }
  .filterleiste input[type=search], .werkzeuge input[type=search] { flex: 1 1 100%; min-width: 0; }
  .filterleiste select { flex: 1 1 calc(50% - .3rem); }
  .werkzeuge .rechts { margin-left: 0; width: 100%; }
  /* Ein Auswahlfeld ist von sich aus so breit wie seine längste Zeile –
     »Gemeinschaftspraxis am Stadtpark GbR« sprengt damit jede Leiste.
     min-width: 0 erlaubt ihm, schmaler zu werden als sein Inhalt. */
  .planung-filter select, .filterleiste select, .kassenfilter select,
  .werkzeuge select { min-width: 0; }
  .planung-filter select { max-width: none; flex: 1 1 calc(50% - .3rem); }
  .planung-filter .filter-schalter { flex: none; }
}

/* Der Seitenkopf: Überschrift und Knöpfe stehen untereinander, und der
   Knopf nimmt die Breite, die er auf dem Handy auch treffen lässt. */
@media (max-width: 620px) {
  .page-head { gap: var(--s3); }
  .page-head p { font-size: .88rem; }
  h1 { font-size: 1.42rem; }
  .kopf-knoepfe, .page-head > details { width: 100%; }
  .kopf-knoepfe > .btn, .kopf-knoepfe .neuknopf > summary,
  .page-head > details > summary.btn { justify-content: center; }
}

/* Beschriftung an einer Zahl, die nur in der aufgelösten Zeile mitläuft –
   in der Tabelle steht sie schon im Spaltenkopf. Sie steht hier vor der
   Ausnahme weiter unten: Bei gleicher Spezifität gewinnt die letzte Regel. */
.stapel-lbl { display: none; }

/* -------------------------------------------- Tabellen werden zu Zeilen

   Eine Tabelle mit sieben Spalten passt nicht auf 375 Pixel. Sie seitlich
   rollen zu lassen heißt: Was rechts steht, sieht niemand mehr.

   Deshalb löst sich eine Tabelle mit der Marke .stapel auf schmaler Fläche
   in Zeilen auf. Jede Zeile ist ein Eintrag: was ihn benennt – die Zelle
   mit .haupt – steht oben, alles Weitere darunter in einer Fußzeile aus
   Etiketten, Zahlen und Daten. Die Kopfzeile fällt weg; sie beschriftet
   Spalten, die es dann nicht mehr gibt.

   Zwei Marken steuern Ausnahmen:
     .vorn    ein Bedienelement vor dem Namen (Haken, Auswahl) – es bleibt
              neben ihm stehen statt darüber
     .hinten  gehört an den rechten Rand (Löschen, Betrag) */

@media (max-width: 620px) {
  .stapel, .stapel > tbody { display: block; }
  .stapel > thead { display: none; }

  .stapel > tbody > tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem;
    padding: .7rem var(--s4);
    border-bottom: 1px solid var(--line-soft);
  }
  .stapel > tbody > tr:last-child { border-bottom: 0; }

  .stapel > tbody > tr > td {
    display: block; width: auto; padding: 0; border: 0;
    font-size: .8rem; color: var(--ink-soft);
  }
  /* order rückt die Zellen zurecht, ohne die Tabelle umzubauen: In der
     Zeile steht der Name vorn, auch wenn seine Spalte in der Tabelle die
     vierte ist. Die Reihenfolge der Spalten folgt am Schreibtisch der
     Sortierung, hier folgt sie dem Blick. */
  .stapel > tbody > tr > td.haupt {
    order: -1; flex: 1 1 100%; font-size: inherit; color: inherit;
  }
  .stapel > tbody > tr > td.vorn { order: -2; flex: none; }
  .stapel > tbody > tr > td.hinten { order: 1; margin-left: auto; }

  /* Steht ein Haken oder ein Kästchen davor, teilt sich der Name die Zeile
     mit ihm – sonst stünde das Kästchen allein über dem Namen. */
  .stapel > tbody > tr:has(> td.vorn) > td.haupt { flex: 1 1 60%; }
  .stapel > tbody > tr > td.r { text-align: left; }
  .stapel > tbody > tr > td.hinten.r { text-align: right; }

  /* Drei Zahlen ohne Beschriftung nebeneinander sind drei Rätsel. In der
     Tabelle steht die Beschriftung im Spaltenkopf – ist der weg, muss sie
     mit an die Zahl. .stapel-lbl steht deshalb im Markup schon da und wird
     erst hier sichtbar. */
  .stapel-lbl { display: inline; color: var(--ink-faint); margin-right: .15rem; }

  /* Die Zusatzangabe steht unter dem Namen. In der Fußzeile daneben hätte
     sie eine eigene Zeile für sich – dort läuft sie mit. */
  .stapel > tbody > tr > td:not(.haupt) .quelle {
    display: inline; margin: 0 0 0 .3rem; font-size: inherit;
  }
  .stapel > tbody > tr > td .posten-aktionen,
  .stapel > tbody > tr > td .actions { justify-content: flex-end; }

  /* Was auf schmaler Fläche nichts beiträgt, fällt weg: eine Fußzeile aus
     lauter Bindestrichen sagt nichts, und was die Spaltenregeln oben schon
     ausgeblendet haben, soll durch das display:block hier nicht zurückkommen.
     Die Auswahl muss so tief stehen wie die Regel, die sie sonst überstimmt. */
  .stapel > tbody > tr > td.leer-schmal,
  .stapel > tbody > tr > td.spalte-groesse,
  .stapel > tbody > tr > td[hidden] { display: none; }
}

/* Wo Zahlen untereinander stehen müssen, um vergleichbar zu sein – EÜR,
   Voranmeldung, Kassenbuch –, bleibt es bei einer Tabelle. Sie rollt dann
   in ihrem Rahmen, und der Rahmen läuft bis an den Bildrand. */
@media (max-width: 620px) {
  .tabelle-rahmen, .tabellenrolle {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* ----------------------------------------------------------- Ablage

   Der Ordnerbaum wird auf schmaler Fläche zum Streifen über der Liste.
   Die Zeilen darin sind Pillen, keine Blöcke – sonst steht ein halber
   Bildschirm Navigation vor der ersten Datei. */

@media (max-width: 900px) {
  .ablage-baum {
    /* Der Streifen läuft bis an den Bildrand – abgeschnitten sieht sonst so
       aus, als wäre dort Schluss, statt dass es weitergeht. min-width: 0
       muss dabeistehen: Ein Rasterfeld ist von sich aus mindestens so breit
       wie sein Inhalt und nähme die Seite sonst mit hinaus. */
    min-width: 0;
    margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1);
    padding-left: var(--s4); padding-right: var(--s4);
    scrollbar-width: none;
  }
  .ablage-baum::-webkit-scrollbar { display: none; }
  .baum-zeile {
    border-radius: 999px; padding: 0 .6rem 0 .3rem;
    max-width: 62vw;
  }
  .baum-name { font-size: .82rem; }
  .baum-fuss { display: none; }
}

/* In der Dateiliste konkurrieren vier Werkzeuge je Zeile mit dem Namen.
   Auf dem Handy gewinnt der Name: Die Schnellansicht entfällt, weil ein Tipp
   auf den Namen ohnehin auf die Datei führt und dort dasselbe Bild steht.
   Was bleibt – merken, laden, ⋯ –, wird etwas kleiner als anderswo; die
   Zeile ist dicht, und drei Knöpfe zu je 38 Pixeln nähmen die halbe Breite. */
@media (max-width: 620px) {
  table.ablage .vorschau-knopf { display: none; }
  table.ablage .spalte-aktion { width: 112px; }
  table.ablage .zeilenaktionen .ikon,
  table.ablage .zeilenmenue > summary { width: 34px; height: 34px; }
  table.ablage td, table.ablage th { padding: .5rem .3rem; }
  table.ablage .spalte-check { width: 26px; }
  table.ablage .spalte-typ { width: 36px; }
  .minibild, table.ablage .typ { width: 30px; height: 30px; }
  table.ablage .typ svg { width: 16px; height: 16px; }
  .eintrag-name { font-size: .88rem; }
  /* Das ⋯-Menü ist 250 Pixel breit und säße sonst halb außerhalb. */
  .zeilenmenue .pop { width: min(250px, calc(100vw - 2.4rem)); }
}

@media (max-width: 620px) {
  /* Kacheln zu zweit nebeneinander – zu dritt ist der Name nur noch ein
     Stummel, allein verschenkt es die Fläche. */
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .kachel-name { font-size: .8rem; }

  /* Die Werkzeugleiste über der Ablage: Ansicht, Papierkorb und Ordner
     wie sie kommen – der Knopf am Ende nimmt den Rest der Zeile. Er ist
     das, wofür man die Seite auf dem Handy aufmacht. */
  .kopf-werkzeuge { width: 100%; }
  .kopf-werkzeuge > .btn:last-child { flex: 1 1 auto; }

  .aktionsleiste { gap: .5rem; padding: .6rem .7rem; }
  .aktionsleiste select { flex: 1 1 100%; min-width: 0; max-width: none; }
  .aktionsleiste-knoepfe { gap: .35rem; }

  .dropzone { inset: 6px; }
  .dropzone strong { font-size: 1.05rem; }

  .lichtkasten { padding: 1rem .6rem 1.4rem; }
  .lichtkasten img, .lichtkasten iframe { max-height: 66vh; }
  .lichtkasten-zu { top: .4rem; right: .5rem; }
}

/* ------------------------------------------------------ Zugänge, Vorschau */

@media (max-width: 620px) {
  .geheimfeld { flex-wrap: wrap; }
  .geheimfeld .wert { flex: 1 1 100%; }
  .zugang-kopf { flex-wrap: wrap; }
  .zugang-kopf .rechts { margin-left: 0; width: 100%; }

  .vorschau iframe { height: 60vh; }
  .vorschau img { max-height: 56vh; }
}

/* ------------------------------------------------------- Schnellsuche

   Auf dem Handy fährt die Tastatur über das untere Drittel. Die Liste
   beginnt deshalb weiter oben und bleibt flach genug, um über der
   Tastatur ganz zu stehen. */

@media (max-width: 620px) {
  .palette-grund { padding: 3vh .6rem .6rem; }
  .palette-liste { max-height: 56dvh; }
  .palette-fuss { display: none; }
  .palette-kopf .kbd { display: none; }
}

/* ------------------------------------------------------------ Angebot

   Die Positionen eines Angebots sind eine Rechnung: Menge, Einzelpreis
   und Summe gehören zusammen gelesen. Sie bleiben als Tabelle stehen,
   nur die Beschreibung tritt zurück. */

@media (max-width: 620px) {
  .posten-tabelle th, .posten-tabelle td { padding: .5rem .35rem; }
  .posten-tabelle .nr { display: none; }
  .summenblock { width: 100%; }
}

/* ------------------------------------------------------ Kalenderraster

   Fünf Wochen mal sieben Tage auf einer Handbreite: Die Einträge werden
   zu Strichen in ihrer Farbe – man sieht, an welchem Tag etwas liegt und
   welcher Art es ist. Was genau, steht im Tagesplan darunter, sobald man
   die Tageszahl antippt. Das Raster ist der Überblick, nicht die Liste. */

@media (max-width: 620px) {
  .kalender-kopf { flex-wrap: wrap; gap: .5rem; }
  .kalender-kopf .steuerung { margin-left: auto; }
  .kalendertag { min-height: 62px; }
  .kalendertag .tagzahl { font-size: .72rem; }
  .tagesplan-liste { max-height: none; }
  .wochenleiste { grid-template-columns: repeat(7, 1fr); gap: .2rem; }
  .wochentag { padding: .45rem .1rem; }
  .wochentag .tagname { font-size: .6rem; letter-spacing: .04em; }
  .wochentag .tagsumme { font-size: .64rem; }
}

/* ------------------------------------------------------------ Zahlen

   Kennzahlen zu zweit: einzeln untereinander wären vier Kacheln schon
   ein ganzer Bildschirm, bevor die erste Zahl im Zusammenhang steht. */

@media (max-width: 620px) {
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl { padding: var(--s3) var(--s4); }
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kassensumme { padding: .7rem var(--s4); gap: .7rem 1.2rem; }
  .rechenvorschau { font-size: .82rem; }
  .summenblock div { font-size: .86rem; }
}

/* Sehr schmale Geräte – erst hier wird jede zweite Spalte zur Untertreibung.
   Die Schwelle liegt unter den 375 Pixeln des kleinsten verbreiteten Geräts:
   Zwei Kacheln nebeneinander sind dort noch lesbar, eine untereinander wäre
   ein Bildschirm für vier Zahlen. */
@media (max-width: 344px) {
  .kennzahlen, .grid-stats { grid-template-columns: 1fr; }
}

/* In einer Liste bricht der Name am Schreibtisch nicht um – dort ist die
   Zeile breit genug. Auf dem Handy hört er sonst nach drei Wörtern auf, und
   »Adobe Creative Cloud Jahres…« ist von »Adobe Creative Cloud Team…« nicht
   mehr zu unterscheiden. Zwei Zeilen kosten weniger als ein falscher Griff. */
@media (max-width: 620px) {
  .list .name, .palette-treffer .titel, .anstehend .was a {
    white-space: normal; overflow: visible;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .list li { align-items: flex-start; }
  .list li > .tag { flex: none; margin-top: .1rem; }
}

/* Etiketten stehen bewusst in einer Zeile – ein umbrochener Status liest
   sich als zwei. Länger als der Platz dürfen sie deshalb trotzdem nicht
   werden; ein Vorlagenname mit Preis sprengt sonst die Karte. */
@media (max-width: 620px) {
  .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* Drei ganze Knöpfe brauchen mehr als eine Handbreite – sie brechen um.
     »bearbeiten löschen« sind zwei Wörter und bleiben zusammen: Passen sie
     nicht mehr neben den Betrag, rückt das Paar als Ganzes eine Zeile
     tiefer, statt sich selbst zu zerlegen. */
  td .actions { flex-wrap: wrap; }
  .posten-aktionen { flex-wrap: nowrap; }
}

/* Ein Hinweis besteht aus Fließtext und oft einem Link ans Ende. Beide sind
   eigene Flex-Kinder und stehen nebeneinander – auf schmaler Fläche wird der
   Link dabei zu einer Spalte aus einzelnen Wörtern zusammengedrückt. Hier
   bekommt er eine eigene Zeile. */
@media (max-width: 620px) {
  /* Als Fließtext statt als Flex-Zeile: Das Symbol schwimmt links mit, der
     Text läuft darum herum und der Link steht am Satzende, wo er hingehört.
     Als Flex-Kind wäre er ein eigener Kasten und würde zur Wortsäule. */
  .notice { display: block; }
  .notice > svg { float: left; margin: .15rem .5rem .1rem 0; }
  .flash { flex-wrap: wrap; }
  .flash .btn { margin-left: auto; }
}

/* ---------------------------------------------------------- Formulare

   Feldpaare, die zusammen gelesen werden – Menge und Einheit, von und bis,
   Betrag und Steuersatz –, bleiben nebeneinander, solange sie zu zweit noch
   in eine Zeile passen. Erst darunter bricht die Reihe um. Der min-width
   dazu ist nötig, weil ein Auswahlfeld sonst so breit bleibt wie seine
   längste Zeile und die Reihe von innen aufsprengt. */

@media (max-width: 620px) {
  .field-row > * { flex: 1 1 132px; min-width: 0; }
  .field-row select, .field-row input { min-width: 0; }

  /* Die Schnellzeile am Fuß einer Karte – »Aufgabe … | Datum | Anlegen«.
     Ein Datumsfeld ist von sich aus so breit wie »tt.mm.jjjj« samt Symbol
     und drängt das Textfeld sonst auf fünf Buchstaben zusammen. Es bekommt
     die zweite Zeile, der Text die erste. */
  form.card-fuss { flex-wrap: wrap; }
  form.card-fuss input[type=text], form.card-fuss input[type=search] { flex: 1 1 100%; }
  form.card-fuss input[type=date], form.card-fuss input[type=time] { flex: 1 1 auto; width: auto; }
  .wahlschalter label { padding: .6rem .5rem; }
  .erfassung-fuss { padding: .75rem var(--s4); margin-left: calc(var(--s5) * -1); margin-right: calc(var(--s5) * -1); }
  .zweispalt { gap: var(--s4); }
}

/* -------------------------------------------------------------- Karten

   Die Karte im Brett und im Wochenplan wird angetippt, nicht überfahren.
   Ihr Menü ist der einzige Weg, sie ohne Ziehen zu verschieben – es steht
   deshalb dauerhaft da und ist groß genug, um es zu treffen. */

@media (max-width: 700px) {
  .brett-spalte, .plantag { padding: .6rem .55rem; }
  /* Ein Kundenname wie »Nordlicht Gesundheitszentrum GmbH & Co. KG« ist als
     Etikett breiter als die Karte. Er hört mit drei Punkten auf – wer ihn
     ganz lesen will, öffnet die Aufgabe. */
  .karte-fuss .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vorrat.band .karte { flex: 1 1 100%; max-width: none; }
  .vorrat.band .spalte-karten { max-height: 40dvh; }
  .band-kopf .spalte-schnell { min-width: 0; }
  .hinweisleiste { flex-wrap: wrap; }
  .hinweisleiste a { margin-left: 0; }
}

/* -------------------------------------------------------------- Drucken

   Was für das Handy gilt, gilt nicht für Papier: Ein Ausdruck hat wieder
   Platz, und eine aufgelöste Tabelle wäre dort ein Rückschritt. */

@media print {
  .stapel, .stapel > tbody, .stapel > thead { display: revert; }
  .stapel > tbody > tr { display: table-row; }
  .stapel > tbody > tr > td { display: table-cell; }
}


/* ===================================================================
   Kleine Helfer, die überall vorkommen
   =================================================================== */

.rot { color: var(--rust); }
.plus { color: var(--accent-ink); }
.minus { color: var(--rust); }
.durchgestrichen { text-decoration: line-through; color: var(--ink-faint); }
.notiztext { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.kopf-knoepfe { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.kopf-knoepfe form { margin: 0; }
.wahl { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--ink-soft); margin: .3rem 0 .6rem; cursor: pointer; }
.wahl input { width: auto; margin: 0; }
.feldhinweis { font-size: .78rem; color: var(--ink-faint); margin: .35rem 0 0; }
.field-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.field-row > * { flex: 1 1 150px; min-width: 0; }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--ink); }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .actions { display: flex; gap: .3rem; justify-content: flex-end; align-items: center; }
td .actions form { margin: 0; }
tr.inactive td { opacity: .55; }
tr.ueberfaellig td.haupt { color: var(--rust); }
.credential {
  font-family: var(--mono); font-size: 1rem; background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius-sm); padding: .5rem .7rem; display: inline-block; margin-top: .4rem; user-select: all; cursor: copy;
}
.kuerzel td { padding: .35rem 0; font-size: .88rem; border: 0; }
.kuerzel td:first-child { white-space: nowrap; padding-right: 1rem; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .9rem; }
.details dt { color: var(--ink-faint); }
.details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.details code { font-family: var(--mono); font-size: .82rem; }
.gruppe-zahl {
  flex: none; font-size: .74rem; font-weight: 600; color: var(--ink-faint); background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: .05rem .48rem; font-variant-numeric: tabular-nums;
}
.gruppe-hinweis { font-size: .78rem; color: var(--ink-faint); margin-left: auto; }
.card-details { border-top: 1px solid var(--line-soft); }
.card-details > summary { padding: .7rem var(--s5); font-size: .86rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; list-style: none; }
.card-details > summary:hover { background: var(--surface-2); color: var(--ink); }
.card-details > summary::before { content: '▸ '; color: var(--ink-ghost); }
.card-details[open] > summary::before { content: '▾ '; }
.schrittliste { margin: .4rem 0 .8rem; padding-left: 1.2rem; font-size: .84rem; color: var(--ink-soft); }
.schrittliste li { margin-bottom: .2rem; }

/* Dialoge: der Editor und alle Formulare, die früher aufklappten. */
dialog.editor {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0;
  width: min(720px, calc(100vw - 2rem)); max-height: min(92dvh, 860px);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
  overflow: hidden; display: none; flex-direction: column;
}
dialog.editor[open] { display: flex; animation: aufsteigen .18s cubic-bezier(.22, .8, .3, 1) both; }
dialog.editor::backdrop { background: color-mix(in srgb, #0b0f11 55%, transparent); backdrop-filter: blur(3px); }
dialog.editor-schmal { width: min(600px, calc(100vw - 2rem)); }
dialog.editor form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.editor-kopf {
  display: flex; align-items: center; gap: var(--s3); padding: .7rem var(--s4) .7rem var(--s5);
  border-bottom: 1px solid var(--line-soft); background: var(--surface-2); flex: none;
}
.editor-kopf strong { font-size: 1rem; }
.editor-zu { margin-left: auto; }
.editor-inhalt { padding: var(--s4) var(--s5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.editor-fuss {
  display: flex; align-items: center; gap: var(--s2); padding: .7rem var(--s5);
  border-top: 1px solid var(--line-soft); background: var(--surface-2); flex: none;
}
.editor-fuss-links { display: flex; gap: var(--s3); align-items: center; margin-right: auto; }
.editor-hinweis { font-size: .8rem; color: var(--ink-faint); margin-left: auto; }
.editor-hinweis:empty { display: none; }
.editor-hinweis + .btn { margin-left: 0; }
.editor-titel {
  font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; padding: .5rem .1rem;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; margin-bottom: var(--s3);
}
.editor-titel:focus { box-shadow: none; border-bottom-color: var(--accent); }
.editor-zeile { display: flex; gap: var(--s3); flex-wrap: wrap; }
.editor-feld { display: block; flex: 1 1 200px; min-width: 0; margin-bottom: var(--s3); }
.editor-feld-schmal { flex: 0 1 150px; }
.editor-feld > span, .editor-feld-titel {
  display: flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600;
  color: var(--ink-soft); margin-bottom: .25rem;
}
.editor-feld > span svg { width: 13px; height: 13px; color: var(--ink-faint); }
.editor-feld[hidden] { display: none; }
.editor-schnell { display: flex; gap: .35rem; flex-wrap: wrap; margin: -.2rem 0 var(--s3); }
.chip {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  padding: .22rem .65rem; font: 600 .76rem var(--sans); color: var(--ink-soft); cursor: pointer;
  transition: all var(--schnell);
}
.chip:hover, .chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-weich); }
.segmente-typ { flex: none; }
.segmente-typ button { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .7rem; font-size: .82rem; }
.segmente-typ button svg { width: 14px; height: 14px; }
.segmente-typ button[aria-pressed="true"] svg { color: var(--accent-ink); }

/* Checkliste im Editor und auf der Eintragsseite */
.checkliste { list-style: none; margin: 0; padding: 0; }
.checkliste li {
  display: flex; align-items: center; gap: .55rem; padding: .3rem 0;
  border-bottom: 1px solid var(--line-soft); font-size: .9rem;
}
.checkliste li:last-child { border-bottom: 0; }
.checkliste li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.checkliste li.fertig span { text-decoration: line-through; color: var(--ink-faint); }
.checkliste li form { margin: 0; display: contents; }
.checkliste li .ikonknopf { width: 26px; height: 26px; opacity: 0; }
.checkliste li:hover .ikonknopf, .checkliste li .ikonknopf:focus-visible { opacity: 1; }
.checkliste-seite { padding: .3rem var(--s5); }
.checkliste-neu input { border-style: dashed; background: transparent; font-size: .88rem; }
.checkliste-neu input:focus { border-style: solid; background: var(--surface); }

/* ===================================================================
   Planung – Liste, Brett, Kalender, Woche

   Eine Karte sieht überall gleich aus, weil es dieselbe Karte ist. Was sich
   unterscheidet, ist der Platz: in der Liste viel, in der Woche wenig, im
   Kalendertag eine Zeile. Ablegeplätze melden sich einheitlich über .bereit.
   =================================================================== */

.planung-kopf { margin-bottom: var(--s5); }
.planung-kopf-zeile { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); }
.planung-kopf-rechts { margin-left: auto; display: flex; gap: var(--s2); }

/* Der Umschalter zwischen den vier Sichten */
.sichten {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-3);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.sichten a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem;
  border-radius: var(--radius-xs); font-size: .86rem; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; transition: background var(--schnell), color var(--schnell);
}
.sichten a svg { width: 15px; height: 15px; }
.sichten a:hover { color: var(--ink); }
.sichten a.aktiv { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.sichten a.aktiv svg { color: var(--accent-ink); }

.zeitraum { display: flex; align-items: center; gap: .3rem; }
.zeitraum-titel { font-size: 1.02rem; letter-spacing: -.01em; margin-left: .5rem; white-space: nowrap; }

.planung-filter { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.planung-filter select, .planung-filter input[type=search] { width: auto; font-size: .84rem; padding: .36rem .55rem; }
.planung-filter select { max-width: 200px; }
.planung-filter input[type=search] { min-width: 200px; }

.hinweisleiste {
  display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s4);
  padding: .6rem var(--s4); border-radius: var(--radius-sm); font-size: .87rem;
  background: var(--surface-3); border: 1px solid var(--line-soft); color: var(--ink-soft);
}
.hinweisleiste svg { flex: none; }
.hinweisleiste.spaet { background: var(--rust-soft); border-color: color-mix(in srgb, var(--rust) 26%, transparent); color: var(--rust); }
.hinweisleiste a { margin-left: auto; font-size: inherit; white-space: nowrap; color: inherit; }

/* Ablegeplätze */
[data-ablage], [data-ablage-status] {
  transition: background var(--schnell), outline-color var(--schnell);
  outline: 2px dashed transparent; outline-offset: -3px; border-radius: var(--radius-sm);
}
.bereit { background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important; outline-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; }
.karte.zieht { opacity: .35; }
.kal-eintrag.zieht { opacity: .35; }

/* ------------------------------------------------------------- die Karte */

.karte {
  position: relative; display: flex; gap: .55rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--line);
  border-radius: var(--radius-sm); padding: .55rem .7rem .55rem .6rem;
  box-shadow: var(--shadow-xs); cursor: grab;
  transition: border-color var(--schnell), box-shadow var(--schnell), opacity var(--schnell);
}
.karte:hover { border-color: var(--line-hard); box-shadow: var(--shadow); }
.karte:focus-visible { outline: none; box-shadow: var(--ring); }
.karte:active { cursor: grabbing; }
.karte.typ-termin { border-left-color: var(--lagune); }
.karte.typ-frist { border-left-color: var(--rust); }
.karte.status-in_arbeit { border-left-color: var(--amber); }
.karte.status-wartet { border-left-color: var(--flieder); }
.karte.dringend { border-left-color: var(--rust); }
.karte.ueberfaellig { background: color-mix(in srgb, var(--rust) 4%, var(--surface)); }
.karte.erledigt { opacity: .6; border-left-color: var(--moss); }
.karte.erledigt .karte-titel { text-decoration: line-through; color: var(--ink-faint); }

.karte-haken {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: .12rem; padding: 0;
  border: 1.5px solid var(--line-hard); border-radius: 50%; background: transparent;
  color: transparent; cursor: pointer; transition: all var(--schnell);
}
.karte-haken svg { width: 11px; height: 11px; stroke-width: 3; }
.karte-haken:hover { border-color: var(--accent-ink); background: var(--accent-weich); color: var(--accent-ink); }
.karte-haken[aria-pressed="true"] { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.karte.typ-termin .karte-haken { border-radius: 4px; }

.karte-inhalt { min-width: 0; flex: 1; }
.karte-titel {
  display: block; font-size: .88rem; font-weight: 600; line-height: 1.35;
  color: var(--ink); text-decoration: none; letter-spacing: -.005em; overflow-wrap: anywhere;
}
.karte-titel:hover { color: var(--accent-ink); }
.karte-meta { display: flex; align-items: center; gap: .3rem .5rem; margin-top: .3rem; flex-wrap: wrap; font-size: .74rem; color: var(--ink-faint); }
.karte-meta:empty { display: none; }
.karte-meta .tag { font-size: .68rem; padding: .06rem .4rem; gap: .2rem; }
.karte-meta .tag svg { width: 11px; height: 11px; }
.karte-wann { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.karte-wann.spaet { color: var(--rust); font-weight: 600; }
.karte-wann.jetzt { color: var(--accent-ink); font-weight: 600; }
.karte-wann em { font-style: normal; font-weight: 400; color: var(--ink-faint); }
.karte-kunde, .karte-ort, .karte-schritte, .karte-serie { display: inline-flex; align-items: center; gap: .2rem; color: var(--ink-faint); text-decoration: none; }
.karte-kunde:hover { color: var(--accent-ink); }
.karte-kunde svg, .karte-ort svg, .karte-schritte svg, .karte-serie svg { width: 12px; height: 12px; }
.karte-schritte.fertig { color: var(--moss); }
.karte-meta .avatar-sm { margin-left: auto; }

/* --------------------------------------------------------------- Liste */

.planung-liste { display: flex; flex-direction: column; gap: var(--s5); }
.gruppe { }
.gruppe-kopf { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.gruppe-kopf h2 { font-size: .98rem; letter-spacing: -.01em; }
.gruppe-kopf.klein { margin: .2rem 0 .3rem; }
.gruppe-kopf.klein h3 { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.ton-rust .gruppe-kopf h2 { color: var(--rust); }
.ton-accent .gruppe-kopf h2 { color: var(--accent-ink); }
.ton-moss .gruppe-kopf h2 { color: var(--moss); }
.gruppe-karten { display: flex; flex-direction: column; gap: .45rem; padding: .3rem; margin: -.3rem; }
.gruppe-karten.in-karte { padding: var(--s3) var(--s4); margin: 0; border-bottom: 1px solid var(--line-soft); }
.gruppe-karten.in-karte:last-child { border-bottom: 0; }
.gruppe-karten.gedimmt .karte { opacity: .8; }
.gruppe-leer { font-size: .88rem; color: var(--ink-faint); padding: .3rem .1rem; }
.gruppe-erledigt .karte { opacity: .55; }

/* --------------------------------------------------------------- Brett */

.brett { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; align-items: start; }
.brett-spalte {
  background: var(--paper-deep); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: .7rem; min-height: 220px;
}
.spalte-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .1rem .3rem .7rem; }
.spalte-kopf h2 { font-size: .92rem; letter-spacing: -.01em; }
.spalte-hinweis { flex-basis: 100%; font-size: .72rem; color: var(--ink-faint); margin-top: -.3rem; }
.brett-spalte.status-in_arbeit .spalte-kopf h2 { color: var(--amber); }
.brett-spalte.status-wartet .spalte-kopf h2 { color: var(--flieder); }
.brett-spalte.status-erledigt .spalte-kopf h2 { color: var(--moss); }
.spalte-karten { display: flex; flex-direction: column; gap: .5rem; min-height: 40px; }
.spalte-leer { text-align: center; color: var(--ink-ghost); font-size: .8rem; padding: .9rem .3rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.spalte-karten:not(:has(.karte)) .spalte-leer { display: block; }
.spalte-karten:has(.karte) .spalte-leer { display: none; }
.spalte-schnell { margin-top: .55rem; }
.spalte-schnell input {
  width: 100%; font-size: .84rem; padding: .4rem .55rem; background: transparent;
  border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--ink);
}
.spalte-schnell input::placeholder { color: var(--ink-ghost); }
.spalte-schnell input:focus { background: var(--surface); border-style: solid; border-color: var(--accent); }

/* --------------------------------------------------------------- Woche */

.woche { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--s4); align-items: start; }
.woche .hinweisleiste { grid-column: 1 / -1; }
.wochenband { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: .45rem; overflow-x: auto; padding-bottom: .3rem; }
.plantag {
  background: var(--paper-deep); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .5rem .45rem; min-height: 300px; display: flex; flex-direction: column;
}
.plantag.heute { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--paper-deep)); }
.plantag.wochenende { background: color-mix(in srgb, var(--paper-deep) 55%, var(--surface)); }
.plantag.vergangen .plantag-zahl, .plantag.vergangen .plantag-name { color: var(--ink-ghost); }
.plantag-kopf { display: flex; align-items: baseline; gap: .3rem; padding: 0 .2rem .5rem; }
.plantag-name { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.plantag-zahl { font-size: 1.05rem; letter-spacing: -.02em; }
.plantag.heute .plantag-zahl { color: var(--accent-ink); }
.plantag-last { margin-left: auto; font-size: .68rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.plantag-neu {
  border: 0; background: none; color: var(--ink-ghost); font-size: 1rem; line-height: 1; padding: 0 .15rem;
  cursor: pointer; opacity: 0; transition: opacity var(--schnell), color var(--schnell);
}
.plantag:hover .plantag-neu, .plantag-neu:focus-visible { opacity: 1; }
.plantag-neu:hover { color: var(--accent-ink); }
.plantag-karten { display: flex; flex-direction: column; gap: .4rem; flex: 1; min-height: 60px; }
.plantag .karte, .vorrat .karte, .tagesplan .karte { padding: .42rem .5rem .42rem .5rem; gap: .45rem; }
.plantag .karte-titel, .vorrat .karte-titel { font-size: .8rem; }
.plantag .karte-meta { font-size: .68rem; gap: .2rem .4rem; }

.vorrat {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .7rem; position: sticky; top: calc(var(--topbar) + var(--s4));
}
.vorrat .spalte-karten { max-height: calc(100dvh - var(--topbar) - 12rem); overflow-y: auto; }

/* ------------------------------------------------------------ Kalender */

.kalender-seite { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s4); align-items: start; }
.kalender-seite-rechts { display: flex; flex-direction: column; gap: var(--s4); }
.kalender-seite-rechts .vorrat { position: static; }
.kalender { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.kalender-wochentage { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.kalender-wochentage span {
  padding: .45rem .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); text-align: center;
}
.kalender-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kalendertag {
  min-height: 110px; min-width: 0; padding: .3rem .35rem .4rem; border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border-radius: 0;
}
.kalendertag > * { min-width: 0; max-width: 100%; }
.kalendertag:nth-child(7n) { border-right: 0; }
.kalender-raster > .kalendertag:nth-last-child(-n+7) { border-bottom: 0; }
.kalendertag.fremd { background: var(--surface-2); }
.kalendertag.fremd .tagzahl b { color: var(--ink-ghost); }
.kalendertag.wochenende { background: color-mix(in srgb, var(--paper-deep) 45%, var(--surface)); }
.kalendertag.heute { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.kalendertag.gewaehlt { box-shadow: inset 0 0 0 2px var(--accent); }
.kalendertag .tagzahl { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tagzahl-link { text-decoration: none; color: inherit; }
.tagzahl-link b { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; }
.tagzahl-link:hover b { background: var(--surface-3); }
.kalendertag.heute .tagzahl-link b { background: var(--accent-ink); color: #fff; }
.kalendertag .neu { opacity: 0; border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .15rem; }
.kalendertag:hover .neu, .kalendertag .neu:focus-visible { opacity: 1; }
.kalendertag .neu:hover { color: var(--accent-ink); }

.kal-eintrag {
  display: block; font-size: .73rem; line-height: 1.3; padding: .16rem .36rem;
  border-radius: var(--radius-xs); text-decoration: none; color: var(--ink);
  background: var(--surface-3); border-left: 2px solid var(--ink-ghost);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: grab;
}
.kal-eintrag:hover { background: var(--paper-deep); }
.kal-eintrag.typ-termin { background: var(--lagune-soft); border-left-color: var(--lagune); color: var(--lagune); }
.kal-eintrag.typ-frist { background: var(--rust-soft); border-left-color: var(--rust); color: var(--rust); }
.kal-eintrag.dringend { border-left-color: var(--rust); }
.kal-eintrag.spaet { border-left-color: var(--rust); }
.kal-eintrag.erledigt { opacity: .45; text-decoration: line-through; }
.kal-eintrag .zeit { font-variant-numeric: tabular-nums; opacity: .8; margin-right: .25rem; font-weight: 600; }
.kal-mehr { font-size: .7rem; color: var(--ink-faint); padding: 0 .36rem; text-decoration: none; }
.kal-mehr:hover { color: var(--ink); }
.tagesplan .card-head h2 { font-size: .95rem; }
.tagesplan-karten { padding: var(--s3); max-height: 46vh; overflow-y: auto; }

/* ------------------------------------------------------ Lage-Liste */

.lage { list-style: none; margin: 0; padding: 0; }
.lage li {
  display: flex; align-items: center; gap: var(--s3);
  padding: .55rem var(--s5); border-bottom: 1px solid var(--line-soft);
}
.lage li:last-child { border-bottom: 0; }
.lage-symbol {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--ink-faint);
}
.lage-symbol svg { width: 15px; height: 15px; }
.lage-symbol.art-termin { background: var(--lagune-soft); color: var(--lagune); }
.lage-symbol.art-frist, .lage-symbol.art-rechnung { background: var(--rust-soft); color: var(--rust); }
.lage-symbol.art-demo { background: var(--amber-soft); color: var(--amber); }
.lage-symbol.art-betrieb, .lage-symbol.art-vertrag { background: var(--surface-3); color: var(--ink-soft); }
.lage-was { flex: 1; min-width: 0; }
.lage-was a { display: block; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lage-was a:hover { color: var(--accent-ink); }
.lage-was span { display: block; font-size: .77rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lage-was span:empty { display: none; }
.lage-wann { flex: none; text-align: right; font-size: .74rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; line-height: 1.25; }
.lage-wann b { display: block; font-size: .82rem; color: var(--ink-soft); }
.lage li.ueberfaellig .lage-wann b { color: var(--rust); }
.lage li.heute .lage-wann b { color: var(--accent-ink); }
.menue-blatt .lage li { padding: .5rem .55rem; }

/* ===================================================================
   Übersicht
   =================================================================== */

.uebersicht { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: start; }
.uebersicht-haupt, .uebersicht-seite { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.pipeline-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); }
.pipeline-kachel {
  display: flex; flex-direction: column; gap: .15rem; padding: .85rem var(--s4);
  background: var(--surface); text-decoration: none; color: var(--ink-soft); transition: background var(--schnell);
}
.pipeline-kachel:hover { background: var(--surface-3); }
.pipeline-kachel b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.pipeline-kachel span { font-size: .74rem; }
.pipeline-kachel.ton-lagune b { color: var(--lagune); }
.pipeline-kachel.ton-moss b { color: var(--moss); }
.demoliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.demoliste li { display: flex; align-items: center; gap: .6rem; padding: .5rem var(--s4); border-bottom: 1px solid var(--line-soft); font-size: .86rem; }
.demoliste li:last-child { border-bottom: 0; }
.demoliste-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--ink); font-weight: 600; }
.demoliste-name:hover { color: var(--accent-ink); }
.demoliste-rest { flex: none; font-size: .76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.demoliste-rest.knapp { color: var(--rust); font-weight: 600; }
.demoliste li.unzugeordnet .demoliste-name { color: var(--amber); }
.zahlenliste { margin: 0; padding: .3rem 0; }
.zahlenliste div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem var(--s4); font-size: .88rem; border-bottom: 1px solid var(--line-soft); }
.zahlenliste div:last-child { border-bottom: 0; }
.zahlenliste dt { color: var(--ink-soft); }
.zahlenliste dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===================================================================
   Kunden
   =================================================================== */

.pipeline { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: var(--s4); }
.pipeline a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .75rem; border-radius: 999px;
  font-size: .84rem; text-decoration: none; border: 1px solid var(--line); color: var(--ink-soft);
  background: var(--surface); transition: all var(--schnell);
}
.pipeline a b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.pipeline a:hover { border-color: var(--line-hard); color: var(--ink); }
.pipeline a.aktiv { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pipeline a.aktiv b { color: inherit; }
.pipeline a.ton-lagune:not(.aktiv) b { color: var(--lagune); }
.pipeline a.ton-moss:not(.aktiv) b { color: var(--moss); }
.pipeline a.ton-rust:not(.aktiv) b { color: var(--rust); }
.pipeline a.ton-amber:not(.aktiv) b { color: var(--amber); }

.kundenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: var(--s4); }
.kundenkarte {
  display: flex; flex-direction: column; gap: .7rem; padding: var(--s4) var(--s5);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--shadow-xs);
  transition: border-color var(--schnell), box-shadow var(--schnell), transform var(--schnell);
}
.kundenkarte:hover { border-color: var(--line-hard); box-shadow: var(--shadow); transform: translateY(-1px); }
.kundenkarte-kopf { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.kundenkarte-kopf:hover strong { color: var(--accent-ink); }
.kundenkarte-vorschlag {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .45rem .6rem; border-radius: var(--radius-sm);
  background: var(--accent-weich); color: var(--accent-ink); font-weight: 600;
}
.kundenkarte-vorschlag span { display: inline-flex; align-items: center; gap: .35rem; flex: 1; min-width: 0; }
.kundenkarte-vorschlag svg { width: 14px; height: 14px; }
.kundenkarte-namen { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kundenkarte-namen strong { font-size: .98rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kundenkarte-namen span { font-size: .8rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-firma { border-radius: var(--radius-sm); background: var(--brand); color: #fff; width: 38px; height: 38px; font-size: .82rem; }
.kundenkarte-fuss { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--ink-faint); }
.kundenkarte-demo { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-soft); font-weight: 600; }
.kundenkarte-demo svg { width: 14px; height: 14px; color: var(--ink-faint); }
.kundenkarte-demo.knapp { color: var(--rust); }
.kundenkarte-demo.unbekannt { color: var(--amber); }
.kundenkarte-demo.leer { color: var(--ink-ghost); font-weight: 400; }

.akte { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s5); align-items: start; }
.akte-haupt, .akte-seite { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.watchme-karte .card-head h2 { display: inline-flex; align-items: center; gap: .45rem; }
.watchme-karte .card-head h2 svg { color: var(--accent-ink); }
.watchme-zustand { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s4); }
.watchme-fakt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.watchme-fakt .lbl { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.watchme-fakt b { font-size: 1.02rem; letter-spacing: -.01em; }
.watchme-fakt a, .watchme-fakt span { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verlauf-neu { display: flex; gap: .5rem; padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.verlauf-neu select { width: auto; flex: 0 0 auto; }
.verlauf-neu input[type=text] { flex: 1 1 200px; }
.verlauf-neu input[type=date] { width: auto; flex: 0 0 auto; }
.verlauf-kopf svg { width: 13px; height: 13px; color: var(--ink-faint); }
.verlauf-punkt.art-system::before { border-color: var(--line-soft); }
.verlauf-punkt.art-system p { color: var(--ink-faint); font-size: .84rem; }

/* ===================================================================
   Schwarzes Brett
   =================================================================== */

.aushaenge { columns: 2; column-gap: var(--s5); }
.aushang { break-inside: avoid; margin-bottom: var(--s5); }
.aushang.angepinnt { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.aushang-kopf { display: flex; align-items: center; gap: .5rem; padding: var(--s4) var(--s4) 0 var(--s5); }
.aushang-kopf h2 { font-size: 1.02rem; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.aushang-pin { color: var(--amber); display: grid; }
.aushang-pin svg { width: 15px; height: 15px; }
.aushang-text { padding: .5rem var(--s5) var(--s4); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
.aushang .zeilenmenue > summary { opacity: 1; }
.aushang form { margin: 0; }

/* ===================================================================
   Finanzen
   =================================================================== */

.saeulen { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding: 0 .2rem; }
.saeule { flex: 1; display: flex; align-items: flex-end; gap: 2px; min-width: 0; position: relative; height: 100%; }
.saeule i { display: block; flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; transition: height var(--ruhig); }
.saeule i.ein { background: var(--c-ein); }
.saeule i.aus { background: color-mix(in srgb, var(--c-aus) 70%, transparent); }
.saeule span { position: absolute; left: 0; right: 0; bottom: -1.2rem; font-size: .62rem; color: var(--ink-faint); text-align: center; }
.saeulen { margin-bottom: 1.4rem; }
.saeule:hover i { filter: brightness(1.12); }

/* ===================================================================
   Schmale Fläche – Planung, Übersicht, Kunden
   =================================================================== */

@media (max-width: 1180px) {
  .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woche { grid-template-columns: 1fr; }
  .vorrat { position: static; }
  .vorrat .spalte-karten { max-height: none; }
  .kalender-seite { grid-template-columns: 1fr; }
  .uebersicht { grid-template-columns: 1fr; }
  .akte { grid-template-columns: 1fr; }
  .zweispalt[style] { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  .wochenband {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .5rem;
    margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4) .4rem;
  }
  .plantag { flex: 0 0 78vw; scroll-snap-align: start; min-height: 200px; }
  .plantag-neu { opacity: 1; }
  .kalendertag .neu { opacity: 1; }
  .neu-knopf span { display: none; }
  .neu-knopf { width: 34px; padding: 0; }
  .neu-knopf svg { margin: 0; }
}

@media (max-width: 700px) {
  .brett { grid-template-columns: 1fr; }
  .brett-spalte { min-height: 0; }
  .planung-kopf-zeile { gap: var(--s2); }
  .sichten { width: 100%; }
  .sichten a { flex: 1; justify-content: center; padding: .45rem .3rem; }
  .sichten a span { font-size: .8rem; }
  .planung-kopf-rechts { width: 100%; }
  .planung-kopf-rechts .btn { width: 100%; }
  .zeitraum { width: 100%; }
  .zeitraum-title { margin-left: auto; }
  .planung-filter select { flex: 1 1 calc(50% - .3rem); max-width: none; min-width: 0; }
  .planung-filter input[type=search] { flex: 1 1 100%; min-width: 0; }
  .aushaenge { columns: 1; }
  .kalendertag { min-height: 64px; padding: .2rem; }
  .kal-eintrag { padding: .08rem .2rem; font-size: 0; height: 5px; border-radius: 2px; border-left-width: 0; }
  .kal-eintrag .zeit { display: none; }
  .kal-mehr { font-size: 0; }
  .pipeline-kacheln { grid-template-columns: repeat(3, 1fr); }
  .editor-feld-schmal { flex: 1 1 120px; }
  dialog.editor { width: calc(100vw - 1rem); max-height: 94dvh; }
  .editor-inhalt, .editor-fuss, .editor-kopf { padding-left: var(--s4); padding-right: var(--s4); }
  .verlauf-neu { padding: var(--s3) var(--s4); }
  .verlauf-neu select { flex: 1 1 40%; }
  .verlauf-neu input[type=date] { flex: 1 1 50%; }
  .verlauf-neu .btn { flex: 1 1 100%; }
  .watchme-zustand { grid-template-columns: 1fr 1fr; }
  .karte-meta .avatar-sm { margin-left: 0; }
  .details { grid-template-columns: 1fr; gap: .1rem; }
  .details dt { margin-top: .5rem; }
}

@media (pointer: coarse) {
  .karte-haken { width: 22px; height: 22px; }
  .karte-haken::after { content: ''; position: absolute; inset: -10px; }
  .karte-haken { position: relative; }
  .plantag-neu, .kalendertag .neu { opacity: 1; }
  .checkliste li .ikonknopf { opacity: 1; }
}