/*
  Design-Tokens ursprünglich 1:1 aus den CSS-Variablen von
  der ursprünglichen Kundenseite übernommen (heute aus der Markenfarbe abgeleitet, Quicksand als
  Headline-Font, Nunito als Fließtext-Font). Farben und Schrift unverändert.
  Radius/Schatten auf Wunsch (Bootstrap-inspirierte, "professionellere" Vorschau)
  von den großzügig-runden Werten der Marketing-Website auf ein strafferes,
  App-typisches Erscheinungsbild umgestellt – siehe Design-Vorschau-Artifact.
*/

:root {
  /* White Label: eine Markenfarbe je Installation (Erscheinungsbild / BRAND_FARBE), alle
     übrigen Farbtöne werden daraus gemischt. branding.js setzt --marke auf <html>. */
  --marke: #2f6f8f;
  --color-rose: color-mix(in srgb, var(--marke) 62%, #ffffff);
  --color-rose-deep: var(--marke);
  --color-taupe: color-mix(in srgb, var(--marke) 28%, #4f4f4f);
  --color-taupe-dark: color-mix(in srgb, var(--marke) 28%, #363636);
  --color-bg: color-mix(in srgb, var(--marke) 3%, #fcfcfc);
  --color-bg-soft: color-mix(in srgb, var(--marke) 10%, #ffffff);
  --color-beige: color-mix(in srgb, var(--marke) 7%, #f4f4f2);
  --color-mist: #eff1f2;
  --color-surface: #ffffff;
  --color-text: color-mix(in srgb, var(--marke) 10%, #3b3b3b);
  --color-text-soft: color-mix(in srgb, var(--marke) 14%, #6e6e6e);
  --color-line: color-mix(in srgb, var(--marke) 14%, #e9e9e9);

  --color-success: #5b8a5b;
  --color-error: #b05656;

  --font-heading: "Quicksand", "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 3px rgba(20, 16, 14, 0.07);
  --shadow-soft: 0 1px 2px rgba(20, 16, 14, 0.045);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-taupe-dark);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }
a { color: var(--color-rose-deep); text-decoration: none; }
a:hover { color: var(--color-taupe-dark); }

.container {
  width: min(100% - 2rem, 720px);
  margin-inline: auto;
}

/* ---------- App-Shell ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
  padding-top: env(safe-area-inset-top);
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-taupe-dark);
  font-size: 1.05rem;
}

.brand-mark {
  width: 48px;
  height: 48px;
  flex: none;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--color-text-soft);
}

.role-badge {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-rose-deep);
  padding: .2rem .6rem;
  border-radius: 999px;
}

.app-nav {
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  padding: 0 0 .7rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.app-nav::-webkit-scrollbar { display: none; }

.app-nav a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: .92rem;
  color: var(--color-taupe);
  padding: .5rem .9rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.app-nav a:hover { background: var(--color-bg-soft); color: var(--color-taupe-dark); }
.app-nav a.active { background: var(--color-rose-deep); color: #fff; }

main.container { padding: 1.5rem 1rem 3rem; }

.page-title { font-size: clamp(1.4rem, 5vw, 1.8rem); margin-bottom: .3rem; }
.page-lead { color: var(--color-text-soft); margin-bottom: 1.5rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .95rem;
  padding: .8rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  text-align: center;
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--color-rose-deep); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover:not(:disabled) { background: var(--color-taupe); }

.btn-ghost { background: transparent; color: var(--color-taupe-dark); border-color: var(--color-rose); }
.btn-ghost:hover:not(:disabled) { background: var(--color-bg-soft); }

.btn-danger { background: transparent; color: var(--color-error); border-color: var(--color-error); }
.btn-danger:hover:not(:disabled) { background: #fbeaea; }

.btn-sm { padding: .55rem 1.1rem; font-size: .85rem; min-height: 36px; }
.btn-block { width: 100%; }

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

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 1rem;
}

.card-title { font-size: 1.1rem; margin-bottom: .3rem; }

.list-item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin-bottom: .7rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.list-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Bündelt eine variable Anzahl Badges zu einem einzigen Flex-Kind, damit
   justify-content: space-between im Elternelement immer nur zwischen Titel und
   dieser Gruppe verteilt (statt Badges einzeln je nach Anzahl unterschiedlich zu
   positionieren, sobald mehr als eins gleichzeitig sichtbar ist). */
.badge-group {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.list-item-title { font-family: var(--font-heading); font-weight: 600; color: var(--color-taupe-dark); }
.list-item-meta { font-size: .82rem; color: var(--color-text-soft); }
.list-item-body { font-size: .95rem; white-space: pre-wrap; }

/* ---------- Situationen (im Berichtseditor und auf der Druckseite) ---------- */

.situation-item {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  margin-bottom: .5rem;
}
.situation-item-head { display: flex; align-items: center; gap: .5rem; }
.situation-zeit { font-family: var(--font-heading); font-weight: 600; font-size: .85rem; color: var(--color-taupe-dark); }
.situation-item-head .icon-btn { margin-left: auto; }
.situation-item-body { font-size: .88rem; margin-top: .3rem; white-space: pre-wrap; }

.situation-add-row {
  display: grid;
  grid-template-columns: 6.5rem 10rem 1fr auto;
  gap: .5rem;
  align-items: center;
  margin-top: .6rem;
}
@media (max-width: 640px) { .situation-add-row { grid-template-columns: 1fr 1fr; } }

.badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-rose-deep);
  white-space: nowrap;
}
.badge-mist { background: var(--color-mist); color: var(--color-taupe); }
.badge-inactive { background: #f0e7e2; color: var(--color-text-soft); }

.empty-state {
  text-align: center;
  color: var(--color-text-soft);
  padding: 2.5rem 1rem;
}

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

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .88rem;
  color: var(--color-taupe-dark);
  margin-bottom: .35rem;
}

.field .hint { font-size: .78rem; color: var(--color-text-soft); margin-top: .3rem; }

/* Grundgestaltung ALLER Formularfelder und Knöpfe – auch außerhalb von .field (Plantafel,
   Kontakte, Filter …). :where() hat Spezifität 0, spezielle Regeln unten gewinnen daher immer;
   die Browser-Standardoptik (Arial, grauer Rahmen, eckig) taucht so nirgends mehr auf. */
:root { accent-color: var(--color-rose-deep); }
:where(button, input, select, textarea) { font-family: var(--font-body); }
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea) {
  font-size: .95rem;
  color: var(--color-text);
  padding: .55rem .75rem;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  max-width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea):focus {
  outline: none;
  border-color: var(--color-rose);
  box-shadow: 0 0 0 3px rgb(198 155 160 / .25);
}
:where(input[type="file"])::file-selector-button {
  font: inherit; font-weight: 600; color: var(--color-taupe-dark); background: var(--color-bg-soft);
  border: 1.5px solid var(--color-line); border-radius: 999px; padding: .35rem .9rem; margin-right: .6rem; cursor: pointer;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  padding: .75rem .9rem;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-rose);
  box-shadow: 0 0 0 3px rgb(198 155 160 / .25);
}
.field textarea { resize: vertical; min-height: 7rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

.form-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }

/* ---------- Monats-Ordner (Berichte-Übersicht) ---------- */

.month-folders {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.2rem;
}
.month-folder {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-taupe);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.month-folder:hover { background: var(--color-bg-soft); }
.month-folder.active { background: var(--color-rose-deep); border-color: var(--color-rose-deep); color: #fff; }
.month-folder .count {
  display: inline-block;
  margin-left: .35rem;
  font-size: .75rem;
  opacity: .75;
}

/* Schnellauswahl Stundennachweis (Berichte-Übersicht): gleiche Pillen-Optik wie die
   Monats-Ordner, aber als Links mit eigener Klasse (die Ordner-Klicklogik greift
   auf .month-folder). */
.stundennachweis-auswahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: -.4rem 0 1.2rem;
}
.stundennachweis-auswahl-label {
  font-size: .84rem;
  color: var(--color-text-soft);
}
.nachweis-chip {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-rose-deep);
  background: var(--color-surface);
  color: var(--color-rose-deep);
  text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nachweis-chip:hover { background: var(--color-rose-deep); color: #fff; }
.nachweis-chip .count { margin-left: .35rem; font-size: .75rem; opacity: .75; }
.nachweis-chip.unterschrieben { border-color: #5a8a5a; color: #2f5f2f; }
.nachweis-chip.unterschrieben:hover { background: #5a8a5a; color: #fff; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.2rem;
}
.filter-bar select,
.filter-bar input {
  font-family: var(--font-body);
  padding: .55rem .8rem;
  border: 1.5px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: .88rem;
}

/* ---------- Meldungen ---------- */

.alert {
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .9rem;
  margin-bottom: 1rem;
}
.alert-error { background: #fbeaea; color: var(--color-error); border: 1px solid #f0caca; }
.alert-success { background: #eaf3ea; color: var(--color-success); border: 1px solid #cfe4cf; }
.alert-warning { background: #fbf1e2; color: #8a5a20; border: 1px solid #f0dcb8; }
.alert-warning.alert-urgent { background: #fbeaea; color: var(--color-error); border-color: #f0caca; }
.alert strong { display: block; margin-bottom: .2rem; font-family: var(--font-heading); }

/* ---------- Login ---------- */

.auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background: linear-gradient(160deg, var(--color-bg-soft) 0%, var(--color-bg) 70%);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.2rem 1.8rem;
  text-align: center;
}

.auth-logo { width: 64px; height: 64px; margin: 0 auto 1rem; }
.auth-card h1 { font-size: 1.4rem; margin-bottom: .2rem; }
.auth-card .sub { color: var(--color-text-soft); font-size: .9rem; margin-bottom: 1.6rem; }
.auth-card form { text-align: left; }

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(58 48 45 / .45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  padding: 0;
}
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; padding: 1rem; }
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.6rem 1.3rem calc(1.6rem + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
@media (min-width: 640px) {
  .modal { border-radius: var(--radius); }
}
.modal.modal-wide { max-width: 760px; }

/* ---------- Kategorie-Chips (Berichts-Editor) ---------- */

.kategorie-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.kategorie-chip {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: #fff;
  opacity: .5;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.kategorie-chip:hover { opacity: .78; }
.kategorie-chip.active { opacity: 1; box-shadow: 0 0 0 3px rgb(0 0 0 / .08); transform: translateY(-1px); }

.kategorie-badge {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}

/* ---------- Berichts-Editor: großzügigerer Textbereich + Fußzeile ---------- */

.editor-textarea { min-height: 14rem; resize: vertical; }

.editor-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-line);
}
.editor-footer .field { margin-bottom: 0; }

/* Betreuungszeit oben im Editor: Datum/Von/Bis in einer Zeile, auf dem Handy Datum
   über der ganzen Breite und Von/Bis nebeneinander. */
.zeit-row { grid-template-columns: repeat(3, 1fr); }
.zeit-row .field { margin-bottom: 0; }
@media (max-width: 480px) {
  .zeit-row { grid-template-columns: 1fr 1fr; }
  .zeit-row .field:first-child { grid-column: 1 / -1; }
}
.zeit-hinweis {
  font-style: italic;
  font-size: .82rem;
  color: var(--color-text-soft);
  margin: .5rem 0 1.1rem;
}
.pflicht-stern { color: var(--color-error); font-weight: 700; }

/* Monatsauswahl im App-Design (js/monatsauswahl.js) statt Browser-Monatsfeld */
.monatswahl { position: relative; display: inline-flex; align-items: center; gap: .3rem; }
.monatswahl .icon-btn { width: 2.1rem; height: 2.1rem; font-size: 1.1rem; }
.monatswahl .icon-btn:disabled { opacity: .35; cursor: default; }
.mw-anzeige {
  min-width: 11.5rem; padding: .55rem .9rem; border: 1.5px solid var(--color-line); border-radius: 999px;
  background: var(--color-surface); font-family: var(--font-heading); font-weight: 600; font-size: .92rem;
  color: var(--color-taupe-dark); cursor: pointer; display: inline-flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.mw-anzeige:hover { border-color: var(--color-rose-deep); }
.mw-pfeil { font-size: .7rem; opacity: .6; }
.mw-popover {
  position: absolute; top: calc(100% + .4rem); left: 0; z-index: 60; width: 17.5rem;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .8rem;
}
.mw-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.mw-kopf strong { font-family: var(--font-heading); font-size: 1rem; color: var(--color-taupe-dark); }
.mw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.mw-monat {
  position: relative; padding: .55rem 0; border-radius: var(--radius-sm); border: 1.5px solid var(--color-line);
  background: var(--color-surface); font-family: var(--font-heading); font-weight: 600; font-size: .85rem;
  color: var(--color-text); cursor: pointer;
}
.mw-monat:hover { border-color: var(--color-rose-deep); color: var(--color-rose-deep); }
.mw-monat.heute { border-color: var(--color-rose-deep); }
.mw-monat.aktiv { background: var(--color-rose-deep); border-color: var(--color-rose-deep); color: #fff; }
.mw-anzahl {
  position: absolute; top: -.45rem; right: -.35rem; min-width: 1.15rem; padding: 0 .25rem; border-radius: 999px;
  background: var(--color-taupe-dark); color: #fff; font-size: .62rem; line-height: 1.15rem;
}
.mw-fuss { display: flex; justify-content: space-between; margin-top: .7rem; }
.mw-link { background: none; border: none; padding: .2rem 0; color: var(--color-rose-deep); font-family: var(--font-heading); font-weight: 600; font-size: .82rem; cursor: pointer; }
.mw-link.aktiv { text-decoration: underline; }
.acc-toolbar .field .monatswahl { margin-top: 0; }

/* Berichte-Übersicht (Tabelle wie Klientenliste; auf dem Handy als Karten) */
.berichte-liste .be-notiz { min-width: 16rem; max-width: 32rem; }
.berichte-liste .be-notiz-text {
  font-size: .82rem; color: var(--color-text-soft); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.berichte-liste .be-zeit, .berichte-liste .be-datum { white-space: nowrap; }
/* Zelle bleibt table-cell (display:flex auf td/th verschiebt Kopf und Zeilen) */
.berichte-liste .aktionen { white-space: nowrap; text-align: right; }
.berichte-liste .aktionen .icon-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; vertical-align: middle; }
.berichte-liste .aktionen .icon-btn + .icon-btn { margin-left: .3rem; }
@media (max-width: 700px) {
  .berichte-liste .uebersicht-table thead { display: none; }
  .berichte-liste .uebersicht-table, .berichte-liste .uebersicht-table tbody, .berichte-liste .uebersicht-table tfoot { display: block; }
  .berichte-liste .uebersicht-table tr.group-head, .berichte-liste .uebersicht-table tr.group-head td,
  .berichte-liste .uebersicht-table tfoot tr, .berichte-liste .uebersicht-table tfoot td { display: block; }
  .berichte-liste .uebersicht-table tr.row-click {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem;
    padding: .75rem .9rem; border-bottom: 1px solid var(--color-line);
  }
  .berichte-liste .uebersicht-table tr.row-click td { display: block; padding: 0; border: none; min-width: 0; max-width: none; }
  .berichte-liste .be-datum { grid-column: 1; grid-row: 1; }
  .berichte-liste .be-datum .sub { display: inline; margin-left: .3rem; }
  .berichte-liste .be-kat { grid-column: 2; grid-row: 1; text-align: right; }
  .berichte-liste .be-klient { grid-column: 1; grid-row: 2; }
  .berichte-liste .be-zeit { grid-column: 2; grid-row: 2; text-align: right; }
  .berichte-liste .be-zeit .sub { display: inline; margin-left: .3rem; }
  .berichte-liste .be-autor { grid-column: 1 / -1; font-size: .8rem; color: var(--color-text-soft); }
  .berichte-liste .be-notiz { grid-column: 1 / -1; }
  .berichte-liste .uebersicht-table tr.row-click td.be-akt { grid-column: 1 / -1; display: flex; gap: .3rem; justify-content: flex-end; }
  .berichte-liste .aktionen .icon-btn + .icon-btn { margin-left: 0; }
}

/* Kalender: Krank/Urlaub-Tag (Bericht gesperrt) */
.cal-tile.cal-abwesend { background: #eef0f8; border-color: #cdd3ea; color: #3d4a7a; cursor: pointer; }
.cal-legend .dot.abwesend { background: #6d7bb8; }
.abw-std { color: #3d4a7a; }

/* Abwesenheit (Mitarbeitende) / Abwesenheiten (Büro) */
.abw-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: .4rem 0 1.2rem; }
.abw-gross { padding: 1.1rem .8rem; font-size: 1.02rem; justify-content: center; }
@media (max-width: 420px) { .abw-aktionen { grid-template-columns: 1fr; } }
.abw-eintrag .alert { margin: .5rem 0 0; }
.push-karte {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  background: var(--color-surface); border: 1px dashed var(--color-line); border-radius: var(--radius-sm);
  padding: .7rem .9rem; margin: 0 0 1rem; font-size: .88rem;
}
.push-karte .hint { display: block; }
.push-karte .form-actions { margin: 0; }
.uebersicht-table tr.antrag-offen td { background: #fff8ec; }
#ab-offen { margin-bottom: 1.4rem; }
.nav-zaehler {
  margin-left: auto; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: #d9534f; color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1.3rem; text-align: center;
}
.app-sidebar summary .nav-zaehler { margin-right: .4rem; }

/* Monatsbericht */
.mb-themen { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: -.3rem 0 1rem; }
.mb-liste { margin: 0; padding-left: 1.1rem; }
.mb-liste li { margin: 0 0 .3rem; }
.mb-liste li.leer { list-style: none; color: var(--color-text-soft); }
.zeit-hinweis #m-dauer-anzeige { font-style: normal; font-weight: 600; color: var(--color-taupe); }

.textbaustein-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .6rem;
}
.textbaustein-row select {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: .85rem;
  padding: .55rem .7rem;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.icon-btn {
  background: var(--color-bg-soft);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-taupe-dark);
}

.fab {
  position: fixed;
  right: 1.2rem;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  z-index: 40;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.text-soft { color: var(--color-text-soft); }
.mt-1 { margin-top: 1rem; }
.spinner-row { text-align: center; padding: 2rem; color: var(--color-text-soft); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .9rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  box-shadow: var(--shadow-soft);
}
.stat-card strong { display: block; font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-rose-deep); }
.stat-card span { font-size: .8rem; color: var(--color-text-soft); }

/* ---------- Kalender (Kachelansicht) ---------- */

/* ---------- Unternavigation (z.B. innerhalb "Mitarbeiter") ---------- */

.sub-nav {
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: .8rem;
}
.sub-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .85rem;
  color: var(--color-taupe);
  padding: .45rem .9rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.sub-nav a:hover { background: var(--color-bg-soft); color: var(--color-taupe-dark); }
.sub-nav a.active { background: var(--color-rose-deep); color: #fff; }

/* Kalender-Seite: oben Kennzahlen + offene Berichte als Tabelle (Büro), darunter der
   Kalender in voller Breite mit Tagesdetail rechts neben dem Monatsraster. */
.kalender-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.2rem;
}
.kalender-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.kalender-kopf .card-title { margin: 0; }
.kalender-kopf { align-items: center; }
.kalender-kopf .field { margin: 0; min-width: 14rem; display: flex; align-items: center; gap: .5rem; }
.kalender-kopf .field label { margin: 0; font-size: .8rem; white-space: nowrap; }
.kalender-kopf .field select { padding: .45rem .7rem; font-size: .88rem; }
.kalender-panel .konten-wrap { margin: 0; }
.kalender-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.4rem; align-items: start; }
.cal-day-hint { color: var(--color-text-soft); font-size: .88rem; }
.uebersicht-table tr.ausgewaehlt td { background: var(--color-bg-soft); }
/* minmax(0, …) statt 1fr: sonst darf die Spalte nicht schmaler als ihr Inhalt werden –
   iPhone-Safari hat das Monatsraster dadurch breiter als den Bildschirm gerechnet und die
   Kacheln nach rechts aus dem Kasten geschoben. */
#calendar-area { min-width: 0; }
@media (max-width: 900px) {
  .kalender-inhalt { grid-template-columns: minmax(0, 1fr); }
}
.icon-svg { display: block; flex: none; }

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: 1rem;
}
.cal-nav h2 { margin: 0; font-size: 1.15rem; min-width: 11ch; text-align: center; }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .35rem;
  margin-bottom: .35rem;
}
.cal-weekdays span {
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-text-soft);
  text-transform: uppercase;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .35rem;
  margin-bottom: 1.2rem;
}

.cal-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-line);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  font-size: .82rem;
  color: var(--color-text);
  cursor: default;
  padding: .2rem;
}
.cal-tile.cal-empty { visibility: hidden; }
.cal-tile.cal-weekend { background: var(--color-mist); color: var(--color-text-soft); border-color: var(--color-mist); }
.cal-tile.cal-none { color: var(--color-text-soft); }
.cal-tile.cal-done { background: #eaf3ea; border-color: #cfe4cf; color: var(--color-success); }
.cal-tile.cal-open { background: #fbf1e2; border-color: #f0dcb8; color: #8a5a20; cursor: pointer; }
.cal-tile.cal-open.cal-urgent { background: #fbeaea; border-color: #f0caca; color: var(--color-error); }
/* Zeiten erfasst, aber unter dem Soll: eigener, echter Gelbton – bewusst anders als
   das Amber von "Bericht fehlt", damit beide Zustände unterscheidbar bleiben. */
.cal-tile.cal-under-hours { background: #fff8dd; border-color: #f0e2a3; color: #7a6a1f; cursor: pointer; }
.cal-tile.cal-open:hover, .cal-tile.cal-done:hover, .cal-tile.cal-under-hours:hover { transform: translateY(-2px); transition: transform .15s var(--ease); }
.cal-tile-num { font-family: var(--font-heading); font-weight: 600; }
.cal-tile-badge { font-size: .68rem; }
.cal-tile-client { font-size: .62rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .15rem; }
.cal-tile-hours { font-size: .68rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Ferien-Kennzeichnung: dezenter Rahmen + kleines Icon, überlagert den normalen
   Status (Erfasst/Offen/Wochenende) statt ihn zu ersetzen – beides bleibt sichtbar. */
.cal-tile.cal-ferien { box-shadow: inset 0 0 0 2px #d9a441; cursor: pointer; }
.cal-tile-ferien-icon { position: absolute; top: 2px; right: 4px; font-size: .7rem; line-height: 1; }

/* Admin-Ansicht zeigt mehr Inhalt pro Kachel (Klient + Stunden) – dafür etwas mehr
   Platz als die reine Status-Kachel der Mitarbeiter-Ansicht. */
.cal-grid.cal-grid-detailed .cal-tile { aspect-ratio: auto; min-height: 64px; }

.cal-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .8rem; color: var(--color-text-soft); margin-bottom: 1.2rem; }
.cal-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.cal-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cal-legend .dot.done { background: var(--color-success); }
.cal-legend .dot.open { background: #d99a3d; }
.cal-legend .dot.under-hours { background: #d9b53d; }
.cal-legend .dot.urgent { background: var(--color-error); }
.cal-legend .dot.weekend { background: var(--color-text-soft); }

.cal-day-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
}

.overview-table { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }
.overview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: .8rem 1.1rem;
  flex-wrap: wrap;
}
.overview-row.overview-urgent { border-color: #f0caca; background: #fdf5f5; }
.overview-row .who { font-family: var(--font-heading); font-weight: 600; color: var(--color-taupe-dark); }
.overview-row .what { font-size: .85rem; color: var(--color-text-soft); }

/* ---------- Konten-Tabelle (Stundenkonto pro Mitarbeiter) ---------- */

.konten-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.5rem;
}
.konten-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.konten-table th, .konten-table td { padding: .85rem 1.1rem; text-align: left; font-size: .9rem; white-space: nowrap; }
.konten-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-text-soft);
  border-bottom: 2px solid var(--color-line);
}
.konten-table td { border-bottom: 1px solid var(--color-line); }
.konten-table tr:last-child td { border-bottom: none; }
.konten-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.konten-table td.numeric.negative { color: var(--color-error); }
.konten-table td.numeric.positive { color: var(--color-success); }
.konten-table .art-label { color: var(--color-rose-deep); font-weight: 600; }

/* ---------- Druckansicht (Bericht als PDF) ---------- */

.print-toolbar {
  max-width: 210mm;
  margin: 1rem auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  gap: .8rem;
}

/* Druckdokumente als echte A4-Blätter (js/print-layout.js): gleiche Darstellung am
   Bildschirm und im Ausdruck/PDF. Jedes .sheet ist genau ein gedrucktes Blatt; die
   Druckvorlage (.sheet-bg) liegt unverzerrt in voller A4-Größe auf JEDEM Blatt.
   Seitenränder als Variablen zum Nachjustieren (siehe docs/ANPASSUNGEN.md):
   ohne Vorlage schlichte Ränder, mit Vorlage Abstand zum vorgedruckten Kopf-/Fußbereich
   (Schätzwerte nach einem echten Briefpapier: Kopf mit Logo/Adresse braucht oben
   viel Platz; links/rechts DIN-5008-Standardrand 20 mm). */
.sheets { width: 210mm; margin: 0 auto 2rem; }
.sheet {
  --brief-top: 18mm;
  --brief-bottom: 18mm;
  --brief-left: 20mm;
  --brief-right: 20mm;
  position: relative;
  width: 210mm;
  height: 297mm;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  margin: 0 0 1.5rem;
}
.sheet.has-vorlage { --brief-top: 95mm; --brief-bottom: 22mm; }
/* Als <img> (nicht CSS-background-image) eingebunden, damit es beim Drucken zuverlässig
   mitgedruckt wird, auch ohne "Hintergrundgrafiken" im Druckdialog. object-fit: fill –
   Vorlagen sind A4 gestaltet und dürfen weder beschnitten noch verschoben werden. */
.sheet-bg { position: absolute; top: 0; left: 0; width: 210mm; height: 297mm; object-fit: fill; }
/* Unten 7 mm Reserve für die Seitenzahl, damit jedes Blatt denselben Satzspiegel hat. */
.sheet-body {
  position: absolute;
  top: var(--brief-top);
  bottom: calc(var(--brief-bottom) + 7mm);
  left: var(--brief-left);
  right: var(--brief-right);
}
.sheet-pageno {
  position: absolute;
  right: var(--brief-right);
  bottom: var(--brief-bottom);
  font-size: .72rem;
  color: var(--color-text-soft);
}
.sheet .fortsetzung { padding-top: 0; border-top: none; }

/* Bericht und Stundennachweis: immer EIN Blatt (js/print-layout.js, einSeite). Der Inhalt
   beginnt direkt unterhalb des Logos der Vorlage (oben links, ca. 7–31 mm) statt erst bei
   95 mm wie auf der Rechnung (dort braucht es den Platz für das Adressfenster). Etwas
   dichtere Abstände; reicht das nicht, wird der Inhalt (.sheet-inhalt) verkleinert. */
.sheet.doc-kompakt.has-vorlage { --brief-top: 38mm; }
.doc-kompakt .print-letterhead { margin-bottom: 1rem; padding-bottom: .8rem; }
.doc-kompakt .print-meta-right { margin-bottom: .6rem; }
.doc-kompakt .print-title { font-size: 1.25rem; margin-bottom: .8rem; }
.doc-kompakt .print-meta { grid-template-columns: repeat(3, 1fr); gap: .5rem 1.2rem; margin-bottom: 1rem; }
.doc-kompakt .print-notes { padding-top: .7rem; margin-bottom: .8rem; font-size: .9rem; line-height: 1.5; }
.doc-kompakt .print-notes p { margin-bottom: .3rem; }
.doc-kompakt .stundennachweis-table th, .doc-kompakt .stundennachweis-table td { padding: .22rem .3rem; }
.doc-kompakt .print-signature-block { margin-top: 1.2rem; }
.doc-kompakt .print-signature-line { margin-top: 2.4rem; }
.doc-kompakt .print-signature-line.signiert { margin-top: .6rem; }

/* Rechnungen/Gutschriften: die Kundenadresse (links) gehört direkt unter die im
   Briefpapier vorgedruckte Absenderzeile (DIN-5008-Fensterposition, deutlich weniger
   Abstand als --brief-top) – die Rechnungsdaten daneben (rechts) brauchen dagegen den
   vollen --brief-top-Abstand, um Logo/Kontaktdaten nicht zu überlappen. Daher wird nur
   .invoice-addr nach oben gezogen. --brief-addr-top ebenfalls zum Nachjustieren. */
.sheet.has-vorlage .invoice-addr {
  margin-top: calc(var(--brief-addr-top, 50mm) - var(--brief-top));
}

.print-letterhead {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--color-line);
  margin-bottom: 1.8rem;
}
.print-letterhead img { width: 56px; height: 56px; flex: none; }
.print-letterhead .org-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--color-taupe-dark); }
.print-letterhead .org-address { font-size: .85rem; color: var(--color-text-soft); line-height: 1.4; margin-top: .1rem; }
.print-letterhead .letterhead-right { margin-left: auto; text-align: right; font-size: .82rem; color: var(--color-text-soft); }

.print-meta-right { text-align: right; font-size: .82rem; color: var(--color-text-soft); margin-bottom: 1.8rem; }

.print-title { font-size: 1.4rem; margin-bottom: 1.4rem; }

.print-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem 1.5rem;
  margin-bottom: 1.6rem;
  font-size: .92rem;
}
.print-meta dt { font-family: var(--font-heading); font-weight: 600; color: var(--color-taupe-dark); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.print-meta dd { margin: .2rem 0 0; }

.print-notes {
  line-height: 1.65;
  font-size: .95rem;
  border-top: 1px solid var(--color-line);
  padding-top: 1.1rem;
  margin-bottom: 1.2rem;
}
/* Notizen absatzweise (pre-wrap nur im Absatz – sonst rückte die Einrückung des
   HTML-Quelltextes den ersten Absatz sichtbar ein). */
.print-notes p { white-space: pre-wrap; margin: 0 0 .45rem; }
.print-notes h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-taupe-dark); margin-bottom: .6rem; }

.print-situationen { list-style: none; margin: 0; padding: 0; }
.print-situationen li { padding: .4rem 0; border-bottom: 1px solid var(--color-line); }
.print-situationen li:last-child { border-bottom: none; }

.stundennachweis-table { width: 100%; border-collapse: collapse; font-size: .88rem; white-space: normal; }
.stundennachweis-table th, .stundennachweis-table td { text-align: left; padding: .4rem .3rem; border-bottom: 1px solid var(--color-line); }
.stundennachweis-table tfoot td { font-family: var(--font-heading); font-weight: 700; border-top: 2px solid var(--color-taupe-dark); border-bottom: none; }

.print-signature-block { margin-top: 2.5rem; font-size: .9rem; }
.print-signature-line {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  margin-top: 3.2rem;
}
.print-signature-line > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.print-signature-line > div > span:last-child {
  border-top: 1px solid var(--color-text);
  padding-top: .3rem;
  font-size: .78rem;
  color: var(--color-text-soft);
  text-align: center;
}
/* Digital unterschrieben: Unterschriftsbild bzw. Ort/Datum stehen direkt über der Linie. */
.print-signature-line.signiert { margin-top: 1rem; align-items: flex-end; }
.print-signature-line .sig-wert { text-align: center; font-size: .9rem; padding-bottom: .3rem; }
.print-signature-line .sig-bild { display: block; max-height: 24mm; max-width: 100%; margin: 0 auto .1rem; object-fit: contain; }
.sig-vermerk { margin-top: .6rem; font-size: .72rem; color: var(--color-text-soft); }

/* Hinweise/Aktionen über dem Stundennachweis (nicht gedruckt) */
.print-toolbar-hinweise { max-width: 210mm; margin: 0 auto 1rem; padding: 0 1rem; }
.print-toolbar-hinweise .alert { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.sn-sign-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

/* Unterschriftsfeld (Finger/Stift auf Handy oder Tablet) */
.sig-pad-wrap { position: relative; border: 2px dashed var(--color-line); border-radius: var(--radius-sm); background: #fff; margin: .3rem 0 .4rem; }
.sig-pad { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; }
.sig-pad-hint { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); color: var(--color-text-soft); font-size: .85rem; pointer-events: none; }
.sig-pad-wrap.hat-strich .sig-pad-hint { display: none; }
.sig-modal .checkbox-row { display: flex; gap: .5rem; align-items: flex-start; margin: .8rem 0; font-size: .92rem; }

/* Kompakte Pflichtangaben-Zeile (Steuernr./USt-IdNr., Bankverbindung) am Ende der
   Rechnung/Gutschrift – kein "Footer" mehr, aber §14 UStG-Pflichtangaben bleiben sichtbar. */
.invoice-legal-line {
  margin-top: 2rem;
  padding-top: .8rem;
  border-top: 1px solid var(--color-line);
  font-size: .72rem;
  color: var(--color-text-soft);
}

/* Ein .sheet = ein gedrucktes A4-Blatt ohne Browser-Ränder (die Ränder stecken im Blatt). */
@page { size: A4; margin: 0; }

@media print {
  body { background: #fff; margin: 0; }
  .no-print { display: none !important; }
  .sheets { zoom: 1 !important; margin: 0; }
  .sheet { box-shadow: none; margin: 0; break-after: page; }
  .sheet:last-child { break-after: auto; }
  /* Browser lassen Hintergrundfarben beim Drucken sonst standardmäßig weg
     (Tintensparen) – das Kategorie-Badge im Briefkopf braucht seine Farbe aber. */
  .kategorie-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- Buchhaltung / Rechnungen ---------- */

.container-wide { width: min(100% - 2rem, 1500px); }

/* index.html trägt jetzt container-wide, weil es sowohl das dichte
   Büro-Dashboard (mehrspaltig, braucht die Breite) als auch das schlankere
   Mitarbeiter-Dashboard (2 Kacheln, 1 Liste) rendert. Nur Letzteres bleibt
   bewusst schmal, sonst wirken Kacheln/Button bei voller Breite ausgefranst. */
.page-narrow { max-width: 760px; margin-inline: auto; }

.acc-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: 1rem; }
.acc-toolbar .field { margin: 0; min-width: 9rem; }
.acc-toolbar .field label { font-size: .74rem; }
.acc-toolbar .field input, .acc-toolbar .field select { padding: .5rem .65rem; }
.acc-toolbar .grow { flex: 1 1 14rem; }
.acc-toolbar .spacer { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.acc-table th, .acc-table td { padding: .6rem .8rem; }
.acc-table td.num, .acc-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.acc-table td.center, .acc-table th.center { text-align: center; }
.acc-table tbody tr.row-click { cursor: pointer; }
.acc-table tbody tr.row-click:hover td { background: var(--color-bg-soft); }
.acc-table tfoot td { font-weight: 700; border-top: 2px solid var(--color-line); border-bottom: none; background: var(--color-bg); }
.acc-table tr.group-head td { background: var(--color-bg-soft); font-family: var(--font-heading); font-weight: 700; color: var(--color-taupe-dark); }
.acc-table tr.group-sum td { font-weight: 700; border-bottom: 2px solid var(--color-line); }
.acc-table td.clip { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.acc-table .neg { color: var(--color-error); }
.acc-table .pos { color: var(--color-success); }
.acc-table input[type="text"], .acc-table input[type="number"], .acc-table select { width: 100%; padding: .35rem .5rem; font-size: .88rem; }

.status-pill { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--color-mist); color: var(--color-text-soft); }
.status-pill.entwurf { background: #f3e6c8; color: #8a6420; }
.status-pill.festgeschrieben { background: #dcebdc; color: var(--color-success); }
.status-pill.storniert { background: #f0d9d9; color: var(--color-error); }
.status-pill.gutschrift { background: #e2dcef; color: #5b4c85; }
.status-pill.mahnung { background: #f0d9d9; color: var(--color-error); }

.acc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.acc-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: .8rem 1rem; box-shadow: var(--shadow-soft); }
.acc-card span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-soft); }
.acc-card strong { font-size: 1.25rem; font-family: var(--font-heading); }
.acc-card small { display: block; font-size: .72rem; color: var(--color-text-soft); margin-top: .1rem; }
/* Kacheln als Schnellfilter (Übersichtsseiten, js/uebersicht.js) */
.acc-card.klickbar { cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.acc-card.klickbar:hover { border-color: var(--color-rose-deep); }
.acc-card.aktiv { border-color: var(--color-rose-deep); background: var(--color-bg-soft); }

/* Übersichtstabellen (Klienten, Mitarbeiter, Rechnungen, offene Berichte) */
.uebersicht-table th.sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
.uebersicht-table th.sortierbar:hover, .uebersicht-table th.sortierbar.aktiv { color: var(--color-rose-deep); }
.uebersicht-table .sort-pfeil { margin-left: .3rem; font-size: .7em; opacity: .5; }
.uebersicht-table th.aktiv .sort-pfeil { opacity: 1; }
.uebersicht-table .group-count { font-weight: 600; font-size: .75rem; color: var(--color-text-soft); margin-left: .3rem; }
.uebersicht-table td { vertical-align: middle; }
.uebersicht-table .sub { display: block; font-size: .75rem; color: var(--color-text-soft); }
.uebersicht-table .aktionen { white-space: nowrap; text-align: right; }
.uebersicht-table .aktionen .icon-btn { width: 2rem; height: 2rem; font-size: .9rem; }
.uebersicht-table tr.inaktiv td { opacity: .55; }
.chip-liste { display: flex; flex-wrap: wrap; gap: .25rem; }
.mini-chip { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--color-bg-soft); font-size: .78rem; white-space: nowrap; }
.mini-chip.warn { background: #fbeaea; color: var(--color-error); }
@media (max-width: 900px) { .uebersicht-table .col-low { display: none; } }
.audit-details { font-size: .8rem; color: var(--color-text-soft); max-width: 44rem; }
.audit-feld { display: inline-block; margin-right: .7rem; }
.audit-feld b { font-weight: 600; color: var(--color-taupe-dark); }

.modal.modal-xl { width: min(96vw, 1100px); max-width: none; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem 1.2rem; }
.acc-kv { font-size: .9rem; }
.acc-kv dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-soft); font-family: var(--font-heading); font-weight: 600; }
.acc-kv dd { margin: .1rem 0 .6rem; }
.acc-section { margin: 1.2rem 0 .5rem; font-size: 1rem; }
.acc-history { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.acc-history li { padding: .4rem 0; border-bottom: 1px solid var(--color-line); display: flex; gap: .8rem; }
.acc-history time { color: var(--color-text-soft); white-space: nowrap; min-width: 9.5rem; }
.acc-totals { margin-left: auto; width: min(100%, 22rem); font-size: .92rem; }
.acc-totals div { display: flex; justify-content: space-between; padding: .25rem 0; }
.acc-totals .total { border-top: 2px solid var(--color-line); font-weight: 700; font-size: 1.05rem; }
.form-actions.wrap { flex-wrap: wrap; }
.field-row.three { grid-template-columns: repeat(3, 1fr); }

/* Datenimport aus dem Vorprogramm (Abrechnungs-Stammdaten → Datenimport) */
.import-schritte { margin: .4rem 0 .6rem 1.2rem; padding: 0; }
.import-schritte li { margin: .15rem 0; }
.import-summe { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.import-table td { vertical-align: top; }
.import-table td div + div { margin-top: .2rem; }
.badge.imp-neu { background: #dcefdc; color: #2f5f2f; }
.badge.imp-ergaenzt { background: #dde8f3; color: #2f4f6f; }
.badge.imp-fehler { background: #f6dcdc; color: #8a2f2f; }

/* Druckvorlagen (Buchhaltung → Einstellungen): je Dokumentart eine Karte. */
.druckvorlagen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.druckvorlage-card { border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 1rem; background: var(--color-surface); }
.druckvorlage-card h4 { margin: 0 0 .7rem; font-size: .95rem; }
.druckvorlage-card input[type=file] { max-width: 100%; }
.druckvorlage-preview { display: block; max-width: 100%; max-height: 320px; margin-bottom: .6rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.hint-box { font-size: .84rem; color: var(--color-text-soft); background: var(--color-bg); border: 1px dashed var(--color-line); border-radius: var(--radius-sm); padding: .6rem .8rem; margin: .6rem 0; }

/* Rechnung (Druck) */
.sheet .watermark { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); font-size: 6rem; font-weight: 800; color: rgb(176 86 86 / .12); pointer-events: none; letter-spacing: .1em; }
/* Absenderzeile steht als eigene volle Zeile über dem Adressblock, damit sie nie mit dem
   Rechnungsdaten-Panel um den Platz konkurriert und dadurch umbricht (eigene Zeile = genug Platz). */
.sender-line { font-size: .68rem; color: var(--color-text-soft); text-decoration: underline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1.1rem; }
.invoice-addr-row { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.invoice-addr { font-size: .95rem; line-height: 1.45; }
.invoice-meta { font-size: .85rem; min-width: 15rem; }
.invoice-meta div { display: flex; justify-content: space-between; gap: 1rem; padding: .12rem 0; }
.invoice-meta span:first-child { color: var(--color-text-soft); }
.invoice-items { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .9rem; }
.invoice-items th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-soft); border-bottom: 2px solid var(--color-line); padding: .4rem .3rem; }
.invoice-items td { padding: .5rem .3rem; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.invoice-items .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice-text { white-space: pre-wrap; font-size: .92rem; line-height: 1.55; margin: .8rem 0; }

@media print {
  .sheet .watermark { color: rgb(176 86 86 / .15); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Seitenleiste (Büropersonal) ---------- */

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--color-taupe-dark);
  color: #f4ece8;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .25s var(--ease);
  padding-bottom: 2rem;
}
.sidebar-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.1rem;
  font-family: var(--font-heading); font-weight: 700; color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / .12);
}
.sidebar-brand .brand-mark { width: 32px; height: 32px; }
.app-sidebar nav { padding: .6rem .5rem; display: flex; flex-direction: column; gap: .15rem; }
.app-sidebar a, .app-sidebar summary {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .8rem;
  border-radius: 10px;
  color: #eadfda;
  font-family: var(--font-heading); font-weight: 600; font-size: .92rem;
  cursor: pointer; list-style: none;
}
.app-sidebar summary::-webkit-details-marker { display: none; }
.app-sidebar a:hover, .app-sidebar summary:hover { background: rgb(255 255 255 / .09); color: #fff; }
.app-sidebar a.active { background: var(--color-rose-deep); color: #fff; }
.nav-icon { width: 1.3rem; text-align: center; opacity: .85; }
.nav-caret { margin-left: auto; transition: transform .2s var(--ease); opacity: .7; }
.nav-group[open] > summary .nav-caret { transform: rotate(90deg); }
.nav-group[open] > summary { color: #fff; }
.nav-items { display: flex; flex-direction: column; gap: .1rem; padding: .1rem 0 .4rem 2.1rem; }
.nav-items a { font-weight: 500; font-size: .88rem; padding: .45rem .75rem; }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 60; }
body.menu-open .app-sidebar { transform: none; box-shadow: var(--shadow); }
body.menu-open .sidebar-backdrop { display: block; }

.menu-btn { font-size: 1.3rem; }
.app-header-wide { padding-inline: 1rem; }
.app-header-wide .user-chip { margin-left: auto; }
.brand-mobile { margin-right: auto; margin-left: .5rem; }

@media (min-width: 1000px) {
  body.has-sidebar { padding-left: 250px; }
  .app-sidebar { transform: none; }
  .brand-mobile { display: none; }
  .sidebar-backdrop { display: none !important; }
  /* ☰ klappt die Leiste am PC ein/aus (js/nav.js) */
  body.has-sidebar { transition: padding-left .25s var(--ease); }
  body.has-sidebar.sidebar-zu { padding-left: 0; }
  body.sidebar-zu .app-sidebar { transform: translateX(-100%); }
}

/* ---------- Personalakte (Mitarbeiterprofil) ---------- */

.hr-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.hr-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--color-rose); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem;
}
.hr-head h1 { margin: 0; font-size: 1.5rem; font-weight: 500; }
.hr-head .hr-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.hr-tabs { display: flex; gap: .3rem; overflow-x: auto; margin-bottom: 1.2rem; border-bottom: 1px solid var(--color-line); padding-bottom: .7rem; }
.hr-tabs a { font-family: var(--font-heading); font-weight: 600; font-size: .88rem; color: var(--color-taupe); padding: .45rem .95rem; border-radius: 999px; white-space: nowrap; }
.hr-tabs a:hover { background: var(--color-bg-soft); }
.hr-tabs a.active { background: var(--color-rose-deep); color: #fff; }
.hr-tabs a.ext::after { content: ' ↗'; opacity: .6; }
.hr-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; align-items: start; }
.hr-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); margin-bottom: 1rem; overflow: hidden; }
.hr-card > h2 { margin: 0; padding: .7rem 1rem; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; background: var(--color-taupe-dark); color: #fff; font-weight: 600; }
.hr-card-body { padding: .9rem 1rem 1rem; }
.hr-row { display: grid; grid-template-columns: 9rem 1fr; gap: .6rem; align-items: center; padding: .3rem 0; }
.hr-row > label { color: var(--color-text-soft); font-size: .92rem; }
.hr-row input, .hr-row select, .hr-row textarea { width: 100%; }
.hr-row .inline { display: flex; gap: .6rem; }
.hr-toggle { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.hr-list-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--color-line); font-size: .92rem; }
.hr-list-row:last-child { border-bottom: none; }
.hr-list-row .grow { flex: 1; }
@media (max-width: 560px) { .hr-row { grid-template-columns: 1fr; gap: .2rem; } }

/* Kilanka-ähnliche Eingabefelder mit Unterstrich in der Personalakte */
.hr-row input:not([type="checkbox"]), .hr-row select, .hr-row textarea {
  font: inherit; color: var(--color-text);
  padding: .45rem .3rem; border: 0; border-bottom: 1.5px solid var(--color-line);
  border-radius: 0; background: transparent;
}
.hr-row input:focus, .hr-row select:focus, .hr-row textarea:focus { outline: none; border-bottom-color: var(--color-rose-deep); }
.hr-row textarea { min-height: 6rem; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); padding: .5rem .6rem; resize: vertical; }
.hr-row input:disabled { color: var(--color-text-soft); }
.acc-table input:not([type="checkbox"]), .acc-table select { font: inherit; border: 1.5px solid var(--color-line); border-radius: 8px; background: var(--color-bg); }

/* Kompaktere Tabellen, damit breite Listen (z. B. Rechnungen) neben der Seitenleiste ohne Scrollen passen */
.acc-table th, .acc-table td { padding: .55rem .6rem; font-size: .86rem; }
.acc-table td.clip { max-width: 14rem; }

/* Spalten mit "nice to have"-Zusatzinfos (z. B. Personalnummer, Ort): blenden zuerst aus,
   bevor eine Tabelle horizontal scrollen muss – Name/Rolle/Status bleiben immer sichtbar. */
@media (max-width: 960px) {
  .col-low { display: none; }
}
.mitarbeiter-table .icon-btn { width: 30px; height: 30px; font-size: 1rem; vertical-align: middle; }
.mitarbeiter-table td.center { white-space: nowrap; }
.row-chevron { display: inline-block; margin-left: .3rem; color: var(--color-text-soft); opacity: .6; vertical-align: middle; }
.mitarbeiter-table tbody tr.row-click:hover .row-chevron { opacity: 1; color: var(--color-rose-deep); }

/* Abrechnungsart ist auf schmaleren Bildschirmen nachrangig (steht im Beleg-Detail) */
@media (max-width: 1599px) { .col-art { display: none; } }

.sidebar-version { margin-top: auto; padding: .8rem 1.1rem 0; font-size: .75rem; color: rgb(255 255 255 / .5); }

/* Handy: Kennzahl-Kacheln zweispaltig statt untereinander */
@media (max-width: 700px) {
  .acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .acc-card { padding: .6rem .75rem; }
  .acc-card strong { font-size: 1.1rem; }
}
.mw-pfeil { display: inline-flex; }

/* Mitarbeiter-Menü auf schmalen Handys: umbrechen statt unsichtbar seitlich scrollen
   (seit "Abwesenheit" hat das Menü fünf Einträge). */
@media (max-width: 520px) {
  .app-nav { flex-wrap: wrap; overflow: visible; gap: .25rem; }
  .app-nav a { padding: .4rem .75rem; font-size: .9rem; }
}

/* ---------- Plantafel (Büro-Startseite, js/plantafel.js) ---------- */
.plantafel { margin-bottom: 2rem; }
.pt-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.pt-datum { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pt-datum-feld { display: flex; align-items: center; gap: .4rem; font-weight: 600; margin: 0; }
.pt-datum .icon-btn { width: 2.1rem; height: 2.1rem; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; }
.pt-datum-feld input {
  width: auto; padding: .5rem .9rem; border-radius: 999px; background-color: var(--color-surface);
  font-family: var(--font-heading); font-weight: 600; font-size: .92rem; color: var(--color-taupe-dark); cursor: pointer;
}
.pt-datum-feld input:hover { border-color: var(--color-rose-deep); }
.pt-heute { font-size: .82rem; }
.pt-datum-feld span { font-family: var(--font-heading); }
.pt-hilfe { margin: 0 0 .8rem; font-size: .88rem; }
.pt-pool .hint, .pt-chips .hint { font-size: .85rem; margin: 0 0 .3rem; }
.pt-link { background: none; border: 0; padding: 0; color: var(--color-rose-deep); text-decoration: underline; cursor: pointer; font: inherit; }
.pt-rot { color: var(--color-error); }
.pt-board { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.pt-pool { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: .9rem; position: sticky; top: .75rem; }
.pt-gruppe h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-soft); margin: .8rem 0 .4rem; }
.pt-gruppe:first-of-type h3 { margin-top: .2rem; }
.pt-zahl { background: var(--color-mist); border-radius: 999px; padding: 0 .45rem; margin-left: .2rem; }
.pt-pool-hint { display: none; }
.pt-zieht .pt-pool-hint { display: block; }
.pt-klienten { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.pt-klient { background: var(--color-surface); border: 1px solid var(--color-line); border-left: 4px solid var(--color-success); border-radius: var(--radius-sm); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .45rem; box-shadow: var(--shadow-soft); transition: border-color .15s var(--ease), background .15s var(--ease); }
.pt-klient.pt-warn { border-left-color: var(--color-error); background: #fffafa; }
.pt-klient.pt-aus { border-left-color: var(--color-line); background: var(--color-mist); opacity: .85; }
.pt-klient-kopf { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.pt-klient-kopf small, .pt-chip small { display: block; font-size: .76rem; color: var(--color-text-soft); font-weight: 400; }
.pt-status { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; background: #eaf3ea; color: var(--color-success); }
.pt-warn .pt-status { background: #fbeaea; color: var(--color-error); }
.pt-aus .pt-status { background: var(--color-surface); color: var(--color-text-soft); }
.pt-abw-text { margin: 0; font-size: .82rem; color: var(--color-taupe); }
.pt-chips { display: flex; flex-direction: column; gap: .35rem; }
.pt-chips .hint { margin: 0; }
.pt-klient-fuss { margin-top: auto; }
.pt-chip { display: flex; align-items: center; justify-content: space-between; gap: .4rem; background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: .4rem .6rem; margin-bottom: .35rem; font-size: .9rem; line-height: 1.3; }
.pt-chips .pt-chip { margin-bottom: 0; }
.pt-chip[data-user] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pt-chip[data-user]:hover { border-color: var(--color-rose); }
.pt-chip.gewaehlt { border-color: var(--color-rose-deep); box-shadow: 0 0 0 2px var(--color-rose); }
.pt-chip.pt-frei { background: #eaf3ea; border-color: #cfe4cf; }
.pt-chip.pt-vertretung { background: #fbf1e2; border-color: #f0dcb8; }
.pt-chip.pt-doppelt { border-color: var(--color-error); }
/* Zeiten-Dialog der Plantafel: kompakte Tabelle Name | Von | Bis + Balken für die Gesamtzeit */
.pt-zeit-tabelle { display: grid; grid-template-columns: minmax(0, 1fr) 7.2rem 7.2rem; gap: .45rem .6rem; align-items: center; margin: .8rem 0 .2rem; }
.pt-zeit-kopf { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-soft); }
.pt-zeit-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pt-zeit-name small { display: block; font-weight: 500; color: var(--color-text-soft); }
.pt-zeit-tabelle input { width: 100%; padding: .5rem .55rem; }
.pt-zeit-summe { margin: 1rem 0 1.1rem; font-size: .9rem; }
.pt-zeit-balken { height: 8px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; margin-top: .4rem; }
.pt-zeit-balken span { display: block; height: 100%; background: var(--color-success); border-radius: inherit; transition: width .2s; }
.pt-zeit-balken.zu-viel span { background: var(--color-error); }
@media (max-width: 420px) { .pt-zeit-tabelle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pt-zeit-name, .pt-zeit-kopf.name { grid-column: 1 / -1; } }
.pt-chip.pt-abw, .pt-chip.pt-weg { background: var(--color-mist); color: var(--color-text-soft); }
.pt-chip.pt-weg strong { text-decoration: line-through; font-weight: 600; }
.pt-chip-text { min-width: 0; overflow-wrap: anywhere; }
.pt-knopf { flex: none; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 999px; width: 1.8rem; height: 1.8rem; cursor: pointer; color: var(--color-taupe); font-size: .85rem; line-height: 1; }
.pt-knopf:hover { border-color: var(--color-rose-deep); color: var(--color-rose-deep); }
.pt-stunden { background: none; border: 0; padding: 0; font: inherit; color: var(--color-rose-deep); text-decoration: underline dotted; cursor: pointer; }
.pt-quelle { opacity: .35; }
.pt-geist { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; box-shadow: 0 8px 20px rgba(20, 16, 14, .18); margin: 0; background: var(--color-surface); cursor: grabbing; }
.pt-zieht [data-drop], .pt-zieht [data-pool] { outline: 2px dashed var(--color-line); outline-offset: 2px; }
.pt-ziel { outline: 2px dashed var(--color-rose-deep) !important; background: var(--color-bg-soft) !important; }
.pt-einsaetze .list-item { border-left: 4px solid #f0dcb8; }
@media (max-width: 760px) {
  .pt-board { grid-template-columns: minmax(0, 1fr); }
  .pt-pool { position: static; }
  .pt-klienten { grid-template-columns: minmax(0, 1fr); }
}

/* Einheitliche Auswahlfelder (eigener Pfeil statt Browser-Pfeil) und Datumsfelder (Kalender-
   Symbol in Rosé). Steht bewusst am Dateiende mit höherer Spezifität, damit es auch in
   Filterleisten, Tabellen und der Personalakte greift. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a97a80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: .75rem;
  padding-right: 2.2rem;
  cursor: pointer;
}
input[type="date"], input[type="month"], input[type="time"] { min-height: 2.4rem; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .85;
  /* dunkles Standard-Symbol abgeschwächt (neutral zu jeder Markenfarbe) */
  filter: opacity(.65);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--color-text-soft) 60%, #ffffff); }

/* Kalender: Tagesplanung aus der Plantafel (Vertretungseinsatz, Klient fehlt) */
.cal-tile.cal-vertretung { background: #fdf3e6; border: 2px dashed #d9a35a; color: #8a5a20; cursor: pointer; }
.cal-tile.cal-mit-vertretung { box-shadow: inset 0 -3px 0 #d9a35a; }
.cal-tile.cal-klient-fehlt { background: var(--color-mist); border-color: var(--color-line); color: var(--color-text-soft); cursor: pointer; }
.cal-tile.cal-vertretung .cal-tile-client { font-weight: 600; }
.cal-tile-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .1rem; }
.cal-legend .dot.vertretung { background: #fdf3e6; border: 2px dashed #d9a35a; }
.cal-legend .dot.klient-fehlt { background: #c9ced3; }
.badge.badge-vertretung { background: #fbf1e2; color: #8a5a20; }
.cal-tile .nur-schmal { display: none; }
@media (max-width: 520px) {
  .cal-tile .nur-breit { display: none; }
  .cal-tile .nur-schmal { display: inline; }
  .cal-tile.cal-vertretung .cal-tile-client { display: none; }
}

/* ---------- Rechnung im Kilanka-Aufbau (js/pages/rechnung-druck.js) ----------
   Eine Schrift (Lato) und EINE Grundgröße (10 pt) für alles – Empfänger, Rechnungsdaten,
   Texte, Tabelle, Summen; nur der Titel ist größer, die Absenderzeile (nur ohne
   Briefpapier) kleiner. pt statt rem, damit Vorschau und Ausdruck exakt gleich groß sind.
   Mit Briefpapier bleiben dessen Bereiche frei: Inhalt beginnt erst unter der Kontakt-
   spalte (--brief-top), die Adresse unter der vorgedruckten Absenderzeile, unten endet
   der Inhalt über dem Fußband (--brief-bottom). */
.rechnung-kilanka { --re-schrift: "Lato", "Nunito", "Segoe UI", sans-serif; --re-groesse: 10pt; --re-linie: #4a4a4a; }
.rechnung-kilanka .sheet-body { font-family: var(--re-schrift); font-size: var(--re-groesse); line-height: 1.35; color: #3a3a3a; }
.rechnung-kilanka .invoice-addr-row { display: flex; justify-content: space-between; gap: 8mm; margin-bottom: 6mm; }
.rechnung-kilanka .invoice-addr { font-size: var(--re-groesse); line-height: 1.35; flex: 1 1 auto; min-width: 0; }
.rechnung-kilanka .re-absender { font-size: 6.5pt; color: #3a3a3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2mm; }
.rechnung-kilanka .re-empfaenger { font-weight: 700; color: #222; }
.rechnung-kilanka .invoice-meta { flex: 0 0 62mm; min-width: 0; font-size: var(--re-groesse); }
.rechnung-kilanka .re-meta-block { margin: 0 0 4mm; }
.rechnung-kilanka .re-meta-block dt { font-weight: 700; color: #222; margin: 0; }
.rechnung-kilanka .re-meta-block dd { margin: 0; overflow-wrap: anywhere; }
.rechnung-kilanka .re-titel { font-family: var(--re-schrift); font-weight: 400; font-size: 14pt; color: #222; margin: 0 0 3mm; letter-spacing: 0; }
.rechnung-kilanka .re-text { font-size: var(--re-groesse); line-height: 1.4; margin: 0 0 3mm; white-space: pre-wrap; }
.rechnung-kilanka .re-rechtlich { margin-top: 6mm; color: #666; }
.rechnung-kilanka .re-positionen { width: 100%; border-collapse: collapse; font-size: var(--re-groesse); margin: 1mm 0 0; }
.rechnung-kilanka .re-positionen th, .rechnung-kilanka .re-positionen td { border: 1px solid var(--re-linie); padding: .6mm 1.6mm; vertical-align: top; }
.rechnung-kilanka .re-positionen th { background: #d6d6d6; font-weight: 700; color: #222; text-align: left; font-size: var(--re-groesse); text-transform: none; letter-spacing: 0; }
.rechnung-kilanka .re-positionen .num, .rechnung-kilanka .re-summen .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechnung-kilanka .re-positionen th:nth-child(1) { width: 9mm; }
.rechnung-kilanka .re-positionen th:nth-child(3) { width: 22mm; }
.rechnung-kilanka .re-positionen th:nth-child(4), .rechnung-kilanka .re-positionen th:nth-child(5) { width: 24mm; }
.rechnung-kilanka .re-summen { margin: 1mm 0 5mm auto; border-collapse: collapse; font-size: var(--re-groesse); }
.rechnung-kilanka .re-summen td { padding: .4mm 1.6mm; }
.rechnung-kilanka .re-summen td:first-child { text-align: right; padding-right: 5mm; }
.rechnung-kilanka .re-gesamt td { font-weight: 700; color: #222; }
.rechnung-kilanka .print-letterhead { border-bottom: 0; padding-bottom: 0; margin-bottom: 4mm; }
.rechnung-kilanka .sheet-pageno { font-family: var(--re-schrift); font-size: 8pt; }
@media print { .rechnung-kilanka .re-positionen th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Mit Briefpapier: Rechnungsdaten bündig unter der Kontaktspalte des Briefpapiers
   (Adresse/Telefon/E-Mail stehen dort ab 151 mm vom linken Blattrand, bis ca. 200 mm).
   Die Spalte darf deshalb rechts über den normalen Satzspiegel (20 mm) hinausgehen.
   Werte (--re-spalte-links, --re-spalte-rechts, --brief-top): css/druck-anpassungen.css */
.sheet.has-vorlage.rechnung-kilanka .invoice-meta {
  flex: 0 0 calc(210mm - var(--re-spalte-links, 151mm) - var(--re-spalte-rechts, 10mm));
  margin-right: calc(var(--re-spalte-rechts, 10mm) - var(--brief-right));
}
/* Empfängeradresse bündig mit der im Briefpapier vorgedruckten Absenderzeile.
   Werte: css/druck-anpassungen.css */
.sheet.has-vorlage.rechnung-kilanka .invoice-addr { padding-left: calc(var(--re-adresse-links, 20mm) - var(--brief-left)); }

/* =====================================================================================
   NIE SEITLICH SCROLLEN (seit 0.21.6) – zentrale Regeln für die ganze Anwendung.
   Automatisch geprüft vom UI-Test (backend/tests/ui.e2e.mjs, „seitlich scrollen“).
   - PC: Tabellen dürfen umbrechen statt breiter zu werden (Zahlen bleiben einzeilig).
   - Handy (≤ 700 px): jede Tabelle wird zu Karten, jeder Wert mit seiner Spaltenüberschrift
     (data-label, automatisch gesetzt in js/nav.js → tabellenBeschriften).
   - Reiter/Menüs brechen um statt zu scrollen.
   ===================================================================================== */
.konten-table { min-width: 0; }
.konten-table th, .konten-table td { white-space: normal; overflow-wrap: break-word; }
.konten-table td.num, .konten-table th.num, .konten-table td.numeric, .konten-table .nowrap { white-space: nowrap; }
.app-nav, .sub-nav, .hr-tabs { flex-wrap: wrap; overflow-x: visible; }
/* Dialoge behalten ihre Breite (520 px, breit 760 px), werden aber nie breiter als der Bildschirm */
.modal { max-width: min(520px, 100%); }
.modal.modal-wide { max-width: min(760px, 100%); }

/* Runde Symbol-Knöpfe: Zeichen (👥, €) und Grafiken (⏻) exakt mittig, alle auf einer Höhe */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; padding: 0; flex: none; line-height: 1; }
.icon-btn .icon-svg { margin: 0; }
.aktionen { white-space: nowrap; }
.aktionen .icon-btn + .icon-btn { margin-left: .3rem; }

@media (max-width: 700px) {
  :not(.berichte-liste) > .konten-wrap { overflow-x: visible; }
  :not(.berichte-liste) > .konten-wrap > .konten-table,
  :not(.berichte-liste) > .konten-wrap > .konten-table > tbody,
  :not(.berichte-liste) > .konten-wrap > .konten-table > tfoot,
  :not(.berichte-liste) > .konten-wrap > .konten-table tr { display: block; width: auto; }
  :not(.berichte-liste) > .konten-wrap > .konten-table > thead { display: none; }
  :not(.berichte-liste) > .konten-wrap > .konten-table tr { padding: .55rem .8rem; border-bottom: 1px solid var(--color-line); }
  :not(.berichte-liste) > .konten-wrap > .konten-table tr:last-child { border-bottom: 0; }
  :not(.berichte-liste) > .konten-wrap > .konten-table td {
    display: flex; justify-content: space-between; align-items: center; gap: .8rem;
    padding: .18rem 0; border: 0; text-align: right; white-space: normal; min-width: 0; max-width: none; width: auto;
  }
  :not(.berichte-liste) > .konten-wrap > .konten-table td::before {
    content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left;
    font-size: .76rem; color: var(--color-text-soft); text-transform: none; letter-spacing: 0;
  }
  :not(.berichte-liste) > .konten-wrap > .konten-table td:not([data-label])::before,
  :not(.berichte-liste) > .konten-wrap > .konten-table td[data-label=""]::before { content: none; }
  :not(.berichte-liste) > .konten-wrap > .konten-table td:not([data-label]),
  :not(.berichte-liste) > .konten-wrap > .konten-table td[data-label=""] { justify-content: flex-end; }
  :not(.berichte-liste) > .konten-wrap > .konten-table td:first-child { font-weight: 600; }
  :not(.berichte-liste) > .konten-wrap > .konten-table td:empty { display: none; }
  :not(.berichte-liste) > .konten-wrap > .konten-table tr.group-head td { justify-content: flex-start; text-align: left; }
}

/* Aktionsspalten mit Textknöpfen (Bearbeiten/Löschen …): Knöpfe dürfen untereinander rutschen,
   statt die Tabelle zu verbreitern. Reine Symbolspalten bleiben einzeilig. */
.konten-table td:has(> .btn), .konten-table td.aktionen:has(.btn) { white-space: normal; }
.konten-table td > .btn { margin: .1rem 0 .1rem .3rem; }
.berichte-liste .be-notiz { min-width: 12rem; }

/* Formularzeilen: Spalten dürfen schrumpfen; auf dem Handy immer untereinander (auch dreispaltig) */
.field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .field-row, .field-row.three { grid-template-columns: minmax(0, 1fr); } }

/* Kopfzeile auf schmalen Handys: alles darf schrumpfen/umbrechen, nichts ragt über den Rand */
.app-header-inner > *, .user-chip > span:first-child, .brand { min-width: 0; }
@media (max-width: 520px) {
  .app-header-inner { gap: .4rem; }
  .user-chip { gap: .35rem; }
  .user-chip > span:first-child { line-height: 1.2; }
  .brand-mobile > span { display: none; } /* Logo genügt, der Name braucht den Platz */
  .brand-mark { width: 40px; height: 40px; }
}
/* Überschriften von Zahlenspalten dürfen umbrechen (nur die Werte bleiben einzeilig) */
.konten-table th.num, .konten-table th { white-space: normal; }
.konten-table td.knopf-zelle { white-space: normal; text-align: right; }
/* Lange Ein-Wort-Überschriften („URLAUBSTAGE/JAHR“) dürfen getrennt werden, wenn es eng wird;
   etwas schmalere Zellabstände in allen Tabellen. */
.konten-table th { overflow-wrap: break-word; }
.konten-table th, .konten-table td { padding-left: .7rem; padding-right: .7rem; }
/* Symbolspalten: Symbole immer nebeneinander (stärker als die allgemeine Umbruch-Regel) */
.konten-table td.aktionen { white-space: nowrap; }
.konten-table td.aktionen:has(.btn) { white-space: normal; }
.konten-table td.aktionen .icon-btn { width: 2rem; height: 2rem; font-size: .9rem; }
/* Letzte Sicherung (seit 0.21.7): lange Wörter („KOSTENTRÄGER“, „Schulbegleitung“) werden notfalls
   getrennt, statt die Tabelle breiter als ihren Kasten (z. B. einen Dialog) zu machen. */
.konten-table th, .konten-table td { hyphens: auto; overflow-wrap: anywhere; }
.modal .konten-table th, .modal .konten-table td { padding-left: .5rem; padding-right: .5rem; }

/* =====================================================================================
   BEWERBERMANAGEMENT (seit 0.23.0) – Listen nutzen die gemeinsamen Bausteine (uebersicht.js),
   Detailseite den Aufbau der Personalakte (hr-*). Hier nur die Ergänzungen.
   ===================================================================================== */
.neg { color: var(--color-error); }
.check-zeile { display: flex; align-items: flex-start; gap: .5rem; margin: .45rem 0; font-size: .92rem; cursor: pointer; }
.check-zeile input { margin-top: .2rem; flex: none; }

/* Status je Phase */
.status-pill.bw-neu { background: #e2dcef; color: #5b4c85; }
.status-pill.bw-in_pruefung { background: #f3e6c8; color: #8a6420; }
.status-pill.bw-interview { background: #dde8f3; color: #2f4f6f; }
.status-pill.bw-angebot { background: #fbe3d4; color: #9a4f22; }
.status-pill.bw-eingestellt { background: #dcebdc; color: var(--color-success); }
.status-pill.bw-abgesagt, .status-pill.bw-zurueckgezogen { background: var(--color-mist); color: var(--color-text-soft); }
.status-pill.st-veroeffentlicht { background: #dcebdc; color: var(--color-success); }
.status-pill.st-entwurf { background: #f3e6c8; color: #8a6420; }
.status-pill.st-pausiert { background: var(--color-mist); color: var(--color-taupe); }
.status-pill.st-besetzt { background: #dde8f3; color: #2f4f6f; }
.mini-chip.bw-stepstone { background: #dfeaf7; color: #1d4f8a; }
.bw-sterne { color: #d9a441; letter-spacing: .05em; white-space: nowrap; }
.bw-sterne span { color: var(--color-line); }

/* Kopf der Detailseite + Fortschritt durch den Prozess */
.bw-kopf-text { min-width: 0; }
.bw-kopf-text .hint { margin: .15rem 0 0; }
.hr-head .status-pill { flex: none; }
.bw-phasen { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0 0 1rem; counter-reset: phase; }
.bw-phasen li { flex: 1 1 8rem; counter-increment: phase; }
.bw-phasen li > * {
  display: flex; align-items: center; gap: .45rem; width: 100%; padding: .5rem .75rem; border-radius: 999px;
  background: var(--color-surface); border: 1.5px solid var(--color-line); font: inherit; font-size: .85rem; font-weight: 600; color: var(--color-text-soft); text-align: left;
}
.bw-phasen li > *::before { content: counter(phase); display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--color-bg-soft); font-size: .72rem; flex: none; }
.bw-phasen button { cursor: pointer; transition: border-color .15s var(--ease); }
.bw-phasen button:hover { border-color: var(--color-rose-deep); color: var(--color-taupe-dark); }
.bw-phasen li.fertig > * { border-color: #cfe4cf; color: var(--color-success); }
.bw-phasen li.fertig > *::before { content: "\2713"; background: #dcebdc; }
.bw-phasen li.aktuell > * { background: var(--color-rose-deep); border-color: var(--color-rose-deep); color: #fff; }
.bw-phasen li.aktuell > *::before { background: rgb(255 255 255 / .25); }
.bw-phasen.beendet { opacity: .55; }

/* Aktionsmenü „Nachricht“ */
.bw-menue { position: relative; }
.bw-menue-liste { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 30; min-width: 14rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .3rem; }
.bw-menue-liste button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .55rem .7rem; border-radius: 8px; font: inherit; font-size: .9rem; cursor: pointer; color: var(--color-text); }
.bw-menue-liste button:hover { background: var(--color-bg-soft); }

.bw-sterne-wahl { display: flex; align-items: center; gap: .1rem; }
.bw-sterne-wahl button[data-stern]:not(.pt-link) { background: none; border: 0; font-size: 1.45rem; line-height: 1; color: var(--color-line); cursor: pointer; padding: 0 .08rem; }
.bw-sterne-wahl button.an { color: #d9a441; }
.bw-sterne-wahl .pt-link { margin-left: .6rem; font-size: .82rem; }
.bw-mini-link { font-size: .8rem; margin-left: .5rem; white-space: nowrap; }
.hr-row > div:has(> .bw-mini-link) { display: flex; align-items: center; }
.bw-anschreiben { margin-top: .8rem; padding: .7rem .8rem; background: var(--color-bg); border-radius: var(--radius-sm); font-size: .9rem; }
.bw-anschreiben p { margin: .3rem 0 0; }
.bw-loeschen { text-align: right; font-size: .85rem; }

/* Unterlagen, Verlauf */
.bw-dateien { list-style: none; padding: 0; margin: 0 0 1rem; }
.bw-dateien li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--color-line); flex-wrap: wrap; }
.bw-dateien li > a { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bw-dateien .aktionen { margin-left: auto; display: flex; gap: .3rem; }
.bw-datei-symbol { font-size: 1.2rem; }
.bw-upload { cursor: pointer; margin-right: .5rem; }
.bw-umschalter { display: inline-flex; background: var(--color-bg-soft); border-radius: 999px; padding: .2rem; margin-bottom: .8rem; }
.bw-umschalter button { border: 0; background: none; padding: .35rem .9rem; border-radius: 999px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--color-text-soft); cursor: pointer; }
.bw-umschalter button.aktiv { background: var(--color-surface); color: var(--color-taupe-dark); box-shadow: var(--shadow-soft); }
.bw-verlauf { list-style: none; padding: 0; margin: 0; }
.bw-verlauf li { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--color-line); }
.bw-verlauf li:last-child { border-bottom: 0; }
.bw-verlauf li > div { flex: 1; min-width: 0; }
.bw-verlauf p { margin: .2rem 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.bw-v-symbol { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg-soft); flex: none; font-size: .85rem; }
.bw-v-termin .bw-v-symbol { background: #dde8f3; }
.bw-v-status .bw-v-symbol { background: #e2dcef; }
.bw-v-kopf { font-size: .76rem; color: var(--color-text-soft); }

/* Onboarding-Checkliste */
.bw-fortschritt { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.bw-fortschritt-balken { flex: 1; height: 8px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; min-width: 4rem; }
.bw-fortschritt-balken span { display: block; height: 100%; background: var(--color-success); border-radius: inherit; }
.bw-fortschritt.klein { margin: 0; gap: .5rem; font-size: .82rem; }
.bw-checkliste { list-style: none; padding: 0; margin: 0 0 .8rem; }
.bw-checkliste li { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--color-line); }
.bw-checkliste label { display: flex; gap: .6rem; align-items: flex-start; flex: 1; cursor: pointer; min-width: 0; }
.bw-checkliste input { margin-top: .25rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--color-success); }
.bw-checkliste small { display: block; font-size: .76rem; color: var(--color-text-soft); }
.bw-checkliste li.erledigt label > span { color: var(--color-text-soft); text-decoration: line-through; text-decoration-color: rgb(0 0 0 / .25); }
.bw-neue-aufgabe { display: flex; gap: .5rem; }
.bw-neue-aufgabe input { flex: 1; min-width: 0; }

/* Einstellungen */
.bw-kopierzeile { display: flex; gap: .5rem; flex-wrap: wrap; }
.bw-kopierzeile input { flex: 1 1 14rem; min-width: 0; font-family: ui-monospace, monospace; font-size: .8rem; }
.bw-schritte { padding-left: 1.2rem; font-size: .9rem; }
.bw-schritte li { margin: .3rem 0; }
.bw-kanaele { border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: .4rem .9rem .5rem; margin: .4rem 0 1rem; }
.bw-kanaele legend { font-size: .8rem; color: var(--color-text-soft); padding: 0 .3rem; }
.bw-zugang { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem; background: var(--color-bg); border-radius: var(--radius-sm); padding: .8rem 1rem; margin: .6rem 0; }
.bw-zugang span { color: var(--color-text-soft); font-size: .88rem; }
.bw-zugang strong { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.bw-loeschen-hinweis { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* Öffentliche Karriereseite */
body.karriere { background: var(--color-bg); }
.kr-kopf { background: var(--color-surface); border-bottom: 1px solid var(--color-line); padding: .7rem 1rem; }
.kr-marke { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-heading); font-weight: 700; color: var(--color-taupe-dark); text-decoration: none; }
.kr-inhalt { max-width: 860px; padding-top: 1.5rem; padding-bottom: 2rem; }
.kr-held { background: linear-gradient(135deg, var(--color-bg-soft), var(--color-beige)); border-radius: var(--radius); padding: 2rem 1.5rem; margin-bottom: 1.6rem; }
.kr-held h1 { margin: 0 0 .4rem; font-size: 1.9rem; }
.kr-held p { margin: 0; font-size: 1.05rem; color: var(--color-text-soft); }
.kr-titel { display: flex; align-items: center; gap: .5rem; }
.kr-stellen { display: grid; gap: .8rem; }
.kr-stelle { display: block; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; color: inherit; text-decoration: none; box-shadow: var(--shadow-soft); transition: border-color .15s var(--ease); }
.kr-stelle:hover { border-color: var(--color-rose-deep); }
.kr-stelle strong { display: block; font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-taupe-dark); }
.kr-stelle > span { display: block; color: var(--color-text-soft); font-size: .9rem; margin-top: .15rem; }
.kr-stelle small { display: block; margin-top: .45rem; font-size: .9rem; }
.kr-stelle .kr-mehr { color: var(--color-rose-deep); font-weight: 600; margin-top: .5rem; }
.kr-initiativ { margin-top: 2rem; text-align: center; background: var(--color-surface); border: 1px dashed var(--color-line); border-radius: var(--radius); padding: 1.5rem; }
.kr-initiativ h2 { margin-top: 0; }
.kr-anzeige { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-soft); }
.kr-anzeige h1 { margin: 0 0 .3rem; font-size: 1.7rem; }
.kr-anzeige h2 { font-size: 1.1rem; margin: 1.3rem 0 .4rem; color: var(--color-taupe-dark); }
.kr-umfang { color: var(--color-text-soft); margin: 0 0 1rem; }
.kr-block ul { padding-left: 1.2rem; margin: .3rem 0; }
.kr-block li { margin: .2rem 0; }
.kr-formular { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.5rem; margin-top: 1.2rem; box-shadow: var(--shadow-soft); }
.kr-formular h2 { margin-top: 0; }
.kr-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kr-danke { text-align: center; padding: 1.5rem .5rem; }
.kr-fuss { text-align: center; color: var(--color-text-soft); font-size: .85rem; padding: 1rem 1rem 2rem; }
@media (max-width: 520px) { .kr-held { padding: 1.4rem 1.1rem; } .kr-held h1 { font-size: 1.5rem; } .kr-anzeige, .kr-formular { padding: 1.1rem; } }
/* Seitenleiste: lange Gruppennamen (Bewerbermanagement + Zähler) umbrechen statt seitlich zu scrollen */
.app-sidebar { overflow-x: hidden; }
.app-sidebar summary, .app-sidebar a { min-width: 0; overflow-wrap: anywhere; }
/* Häkchen in Formularzeilen der Akten nicht auf volle Breite ziehen */
.hr-row .check-zeile input { width: auto; }

/* =====================================================================================
   TERMIN-KALENDER Bewerbermanagement (seit 0.25.0) – js/bw/termine.js
   ===================================================================================== */
.tk-kopf { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.tk-nav { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.tk-titel { margin: 0 0 0 .4rem; font-size: 1.15rem; min-width: 0; }
.tk-werkzeuge { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tk-werkzeuge .bw-umschalter { margin: 0; }
.tk-werkzeuge select { padding: .45rem .6rem; border-radius: var(--radius-sm); border: 1.5px solid var(--color-line); background: var(--color-surface); font: inherit; font-size: .88rem; max-width: 100%; }
.tk-legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; color: var(--color-text-soft); margin-bottom: .8rem; }
.tk-legende i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -.05rem; }

/* Tag/Woche: Zeitraster */
.tk-raster { display: grid; grid-template-columns: 3.2rem repeat(var(--tk-tage), minmax(0, 1fr)); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); overflow: hidden; }
.tk-ecke { border-bottom: 1px solid var(--color-line); }
.tk-tagkopf { border: 0; border-bottom: 1px solid var(--color-line); border-left: 1px solid var(--color-line); background: var(--color-bg); padding: .5rem .2rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--color-taupe-dark); cursor: pointer; min-width: 0; }
.tk-tagkopf span { color: var(--color-text-soft); font-weight: 500; }
.tk-tagkopf.heute { background: var(--color-bg-soft); color: var(--color-rose-deep); }
.tk-uhrzeiten { display: flex; flex-direction: column; }
.tk-uhrzeiten span { font-size: .72rem; color: var(--color-text-soft); text-align: right; padding: .1rem .35rem 0 0; box-sizing: border-box; border-top: 1px solid transparent; }
.tk-spalte { position: relative; border-left: 1px solid var(--color-line); cursor: copy; min-width: 0; }
.tk-spalte.heute { background: #fffaf8; }
.tk-zelle { height: 48px; border-top: 1px solid var(--color-line); box-sizing: border-box; background: linear-gradient(to bottom, transparent 23.5px, rgb(0 0 0 / .035) 24px, transparent 24.5px); }
.tk-zelle:first-child { border-top: 0; }
.tk-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--color-error); z-index: 2; pointer-events: none; }
.tk-jetzt::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-error); }
.tk-termin {
  position: absolute; z-index: 1; overflow: hidden; text-align: left; cursor: pointer; font: inherit;
  border: 0; border-left: 4px solid var(--tk-farbe); border-radius: 6px; padding: .15rem .35rem;
  background: color-mix(in srgb, var(--tk-farbe) 16%, white); color: var(--color-text); box-shadow: var(--shadow-soft);
}
.tk-termin:hover { background: color-mix(in srgb, var(--tk-farbe) 26%, white); }
.tk-termin strong { display: block; font-size: .78rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-termin small { display: block; font-size: .7rem; color: var(--color-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-termin.tk-abgesagt, .tk-chip.tk-abgesagt { opacity: .5; text-decoration: line-through; }
.tk-termin.tk-stattgefunden, .tk-chip.tk-stattgefunden { opacity: .7; }
.tk-leer { margin-top: .6rem; }

/* Woche am Handy: Liste je Tag */
.tk-liste section { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: .5rem .7rem; margin-bottom: .5rem; }
.tk-liste section.heute { border-color: var(--color-rose); }
.tk-liste h3 { margin: 0 0 .3rem; font-size: .92rem; }
.tk-liste .hint { margin: 0; }
.tk-termin.tk-zeile { position: static; display: block; width: 100%; margin-top: .3rem; padding: .35rem .5rem; }

/* Monat */
.tk-monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-soft); }
.tk-wt { text-align: center; font-size: .74rem; font-weight: 600; color: var(--color-text-soft); padding: .4rem 0; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.tk-mtag { min-height: 6.2rem; padding: .3rem; border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); cursor: pointer; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.tk-mtag:nth-child(7n + 1) { border-left: 0; }
.tk-mtag.fremd { background: var(--color-bg); color: var(--color-text-soft); }
.tk-mtag.heute .tk-mnr { background: var(--color-rose-deep); color: #fff; }
.tk-mnr { align-self: flex-start; font-size: .8rem; font-weight: 600; min-width: 1.5rem; height: 1.5rem; border-radius: 999px; display: grid; place-items: center; }
.tk-chip { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--tk-farbe); border-radius: 4px; background: color-mix(in srgb, var(--tk-farbe) 14%, white); font: inherit; font-size: .72rem; padding: .1rem .3rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); }
.tk-mehr { font-size: .7rem; color: var(--color-text-soft); }
@media (max-width: 700px) {
  .tk-mtag { min-height: 3.4rem; padding: .2rem; }
  .tk-mehr { font-size: .64rem; line-height: 1.1; }
  .tk-titel { font-size: 1rem; }
  .tk-raster { grid-template-columns: 2.6rem repeat(var(--tk-tage), minmax(0, 1fr)); }
}

/* Termin-Dialog und Detailseite */
.tk-wer { margin: 0 0 .8rem; font-weight: 600; }
.tk-loeschen { margin-left: auto; color: var(--color-error); }
.bw-verlauf li.vorbei { opacity: .6; }
.bw-verlauf li > .icon-btn { flex: none; }

/* Sternebewertung (seit 0.25.1): kräftig leuchtend, auf einen Blick erkennbar */
.bw-sterne { display: inline-flex; gap: .05rem; white-space: nowrap; line-height: 1; vertical-align: middle; }
.bw-sterne i { font-style: normal; color: #e9dfdb; font-size: 1rem; }
.bw-sterne i.an { color: #f5a400; text-shadow: 0 0 6px rgb(245 164 0 / .45); }
.bw-sterne.gross i { font-size: 1.45rem; }
.acc-card strong .bw-sterne { margin-left: .4rem; }
.acc-card strong .bw-sterne i { font-size: .95rem; }

.bw-sterne-wahl { display: flex; align-items: center; gap: .15rem; }
.bw-sterne-wahl button[data-stern]:not(.pt-link) {
  background: none; border: 0; padding: 0 .1rem; cursor: pointer; line-height: 1;
  font-size: 2rem; color: #e9dfdb; transition: color .12s, transform .12s, text-shadow .12s;
}
.bw-sterne-wahl button[data-stern].an:not(.pt-link) { color: #f5a400; text-shadow: 0 0 8px rgb(245 164 0 / .55); }
/* Vorschau beim Darüberfahren: Stern und alle davor leuchten auf */
.bw-sterne-wahl:has(button[data-stern]:not(.pt-link):hover) button[data-stern]:not(.pt-link) { color: #e9dfdb; text-shadow: none; }
.bw-sterne-wahl button[data-stern]:not(.pt-link):hover,
.bw-sterne-wahl button[data-stern]:not(.pt-link):has(~ button[data-stern]:not(.pt-link):hover) { color: #ffb300 !important; text-shadow: 0 0 10px rgb(255 179 0 / .7) !important; transform: scale(1.12); }
.bw-sterne-wahl .pt-link { margin-left: .7rem; font-size: .82rem; }

/* Talentpool: klarer Knopf bzw. Kennzeichen */
.bw-pool-knopf { border-color: #f5a400; color: #8a5a00; background: #fff8e6; font-weight: 700; }
.bw-pool-knopf:hover { background: #ffefc2; }
.bw-pool { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.bw-pool-marke { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: #fff3d1; color: #8a5a00; font-weight: 700; font-size: .88rem; }
.bw-zwei-zeilen { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Neue Nachricht einer Bewerber:in (ungelesen) */
.mini-chip.bw-neue-nachricht { background: #dde8f3; color: #1d4f8a; font-weight: 700; }

/* Stundennachweise prüfen (seit 0.27.0) */
.sn-ablauf { line-height: 1.6; }
.sn-pruef-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .8rem; }
.sn-pruef-table input[type="time"] { width: 6.6rem; max-width: 100%; padding: .3rem .4rem; }
.sn-pruef-table tr.sn-auffaellig td { background: #fffaf3; }
.sn-pruef-table tr.sn-geaendert td { background: #eef6ee; }
.sn-notiz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; color: var(--color-text-soft); }
.sn-pruef-fuss { flex-wrap: wrap; }
.sn-freigabe-hinweis .btn { margin-left: .5rem; }

/* Stundennachweise (0.28.0): unterschriebene Tage, freie Tage füllen */
.sn-pruef-table tr.sn-signiert td { background: #f7f5fb; }
.sn-freie { margin: .8rem 0; border: 1px dashed var(--color-line); border-radius: var(--radius-sm); padding: .5rem .8rem; }
.sn-freie > summary { cursor: pointer; font-weight: 600; color: var(--color-taupe-dark); }
.sn-freie select, .sn-freie input:not([type="time"]) { width: 100%; padding: .3rem .4rem; }
.sn-ergaenzungen h3 { font-size: 10pt; margin: 6mm 0 2mm; }

/* Unterschrift/Stempel des Trägers (Einstellungen) */
.sig-traeger { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sig-traeger img { max-height: 70px; max-width: 220px; border: 1px dashed var(--color-line); border-radius: 6px; background: #fff; padding: .2rem; }
.sn-traeger { margin-top: 8mm; }

/* Prüfansicht: gemeinsam speichern (0.28.2) */
.sn-speicherleiste { position: sticky; bottom: -1.6rem; margin: 1rem -1.3rem -1.6rem; padding: .7rem 1.3rem; background: var(--color-surface); border-top: 1px solid var(--color-line); box-shadow: 0 -4px 12px rgb(0 0 0 / .06); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; z-index: 5; }
.sn-speicherleiste > span { margin-right: auto; font-weight: 600; color: var(--color-taupe-dark); }
.sn-pruef-table tr.sn-fehler td { background: #fbeaea; }
.sn-pruef-table tr.sn-gespeichert td { background: #eef6ee; opacity: .8; }
.sn-zeilenfehler { display: block; font-size: .75rem; color: var(--color-error); margin-top: .2rem; }

/* ---- Persönliches Benutzermenü (oben rechts, seit 0.29.0) ---- */
.user-chip { position: relative; }
.hilfe-btn { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; text-decoration: none; }
.hilfe-btn:hover { color: var(--color-rose-deep); }
.user-menu { position: relative; min-width: 0; }
.user-menu-btn {
  display: flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: .2rem .55rem .2rem .2rem; cursor: pointer; font: inherit; color: var(--color-text-soft);
}
.user-menu-btn:hover, .user-menu-btn[aria-expanded="true"] { background: var(--color-bg-soft); border-color: var(--color-line); }
.user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-taupe-dark); font-weight: 600; }
.user-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-rose-deep); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: .85rem; letter-spacing: .02em;
}
.user-avatar.gross { width: 44px; height: 44px; font-size: 1rem; }
.user-caret { font-size: .75rem; flex: none; }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 80;
  width: min(300px, calc(100vw - 24px));
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(20, 16, 14, .14); padding: .4rem;
}
.user-menu-panel[hidden] { display: none; }
.user-menu-kopf { display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem .7rem; border-bottom: 1px solid var(--color-line); margin-bottom: .3rem; }
.user-menu-kopf > div { min-width: 0; display: flex; flex-direction: column; }
.user-menu-kopf strong { color: var(--color-taupe-dark); overflow-wrap: anywhere; }
.user-menu-kopf span { font-size: .8rem; color: var(--color-text-soft); overflow-wrap: anywhere; }
.user-menu-panel a, .user-menu-panel button {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem; border-radius: var(--radius-sm);
  color: var(--color-text); font: inherit; font-size: .92rem; text-align: left; background: none; border: none; cursor: pointer;
}
.user-menu-panel a:hover, .user-menu-panel button:hover, .user-menu-panel a:focus-visible, .user-menu-panel button:focus-visible { background: var(--color-bg-soft); color: var(--color-taupe-dark); }
.user-menu-panel hr { border: none; border-top: 1px solid var(--color-line); margin: .3rem 0; }
.um-icon { width: 1.4rem; flex: none; text-align: center; display: inline-flex; justify-content: center; }
.um-icon .icon-svg { width: 18px; height: 18px; }
.um-abmelden { color: var(--color-error) !important; }
@media (max-width: 700px) {
  .user-name, .user-menu-btn .role-badge { display: none; }
  .user-menu-btn { padding: .15rem .35rem .15rem .15rem; }
}

/* ---- Mein Konto ---- */
.konto-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1rem; align-items: start; }
.konto-raster .card { scroll-margin-top: 90px; }
.konto-daten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.konto-daten dt { color: var(--color-text-soft); }
.konto-daten dd { margin: 0; overflow-wrap: anywhere; }
.konto-schalter { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0; cursor: pointer; }
.konto-schalter input { margin-top: .25rem; flex: none; }

/* ---- Hilfe & Anleitung ---- */
.hilfe-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.hilfe-toc { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; overflow-x: hidden; }
.hilfe-toc a { display: block; padding: .35rem .6rem; border-radius: var(--radius-sm); color: var(--color-text); font-size: .9rem; }
.hilfe-toc a:hover, .hilfe-toc a.aktiv { background: var(--color-bg-soft); color: var(--color-taupe-dark); }
.hilfe-toc h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-soft); margin: .8rem .6rem .3rem; }
.hilfe-kapitel { scroll-margin-top: 90px; }
.hilfe-kapitel h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.hilfe-kapitel h4 { margin: 1rem 0 .4rem; color: var(--color-taupe-dark); }
.hilfe-kapitel ul, .hilfe-kapitel ol { padding-left: 1.3rem; }
.hilfe-kapitel li { margin: .3rem 0; line-height: 1.5; }
.hilfe-kapitel p { line-height: 1.55; }
.hilfe-kapitel code { background: var(--color-bg-soft); padding: .05rem .35rem; border-radius: 6px; }
.hilfe-kapitel.markiert { box-shadow: 0 0 0 3px var(--color-rose); }
.hilfe-faq dt { font-weight: 700; color: var(--color-taupe-dark); margin-top: .9rem; }
.hilfe-faq dd { margin: .25rem 0 0 0; line-height: 1.5; }
.hilfe-suche { width: 100%; margin-bottom: 1rem; }
.hilfe-treffer { background: #f6e3a1; border-radius: 3px; }
.hilfe-kontakt { background: var(--color-mist); }
@media (max-width: 900px) {
  .hilfe-layout { grid-template-columns: minmax(0, 1fr); }
  .hilfe-toc { position: static; max-height: none; }
}
.plain-list { list-style: none; padding: 0; margin: 0 0 .6rem; }
.plain-list li { padding: .45rem 0; border-bottom: 1px solid var(--color-line); }
.plain-list li:last-child { border-bottom: none; }
@media print {
  body.hilfe-seite #nav-mount, body.hilfe-seite .hilfe-toc, body.hilfe-seite .hilfe-kontakt { display: none !important; }
  body.hilfe-seite { padding-left: 0 !important; }
  body.hilfe-seite .hilfe-layout { display: block; }
  body.hilfe-seite .hilfe-kapitel { box-shadow: none; border: none; break-inside: avoid-page; }
}

/* ---- Aufgabenverwaltung (seit 0.30.0) ---- */
.page-head-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-start; justify-content: space-between; }
.page-head-row > div { min-width: 0; }
.neu-punkt { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #d9534f; margin-right: .4rem; vertical-align: middle; }
.warn { color: #b7791f; }
.prio { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; vertical-align: middle; }
.prio-dringend { background: #f8dada; color: var(--color-error); }
.prio-hoch { background: #fbecd5; color: #9a6418; }
.prio-niedrig { background: var(--color-mist); color: var(--color-text-soft); }
.status-pill.aufgabe-offen { background: #e5eef8; color: #3c6496; }
.status-pill.aufgabe-in_arbeit { background: #fbecd5; color: #9a6418; }
.status-pill.aufgabe-wartet { background: var(--color-mist); color: var(--color-text-soft); }
.status-pill.aufgabe-erledigt { background: #dcebdc; color: var(--color-success); }
.status-pill.aufgabe-abgebrochen { background: #eee; color: #888; text-decoration: line-through; }
tr.erledigt-zeile td { opacity: .65; }
.aufgaben-widget { margin-bottom: 1.5rem; }
.aufgaben-widget-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-bottom: .6rem; }
.aufgaben-widget-kopf .card-title { margin: 0; }
.aufgaben-widget-kopf .form-actions { margin: 0 0 0 auto; }
.aufgaben-liste { list-style: none; margin: 0; padding: 0; }
.aufgaben-liste li { padding: .6rem .5rem; border-top: 1px solid var(--color-line); cursor: pointer; border-radius: var(--radius-sm); }
.aufgaben-liste li:hover, .aufgaben-liste li:focus-visible { background: var(--color-bg-soft); }
.aufgaben-liste li.ungelesen strong { color: var(--color-taupe-dark); }
.al-titel { overflow-wrap: anywhere; }
.al-meta { font-size: .82rem; color: var(--color-text-soft); margin-top: .15rem; overflow-wrap: anywhere; }
.aufgabe-detail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.aufgabe-status-leiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.aufgabe-schnell { margin: 0 0 .8rem; }
.aufgabe-historie h3 { font-size: 1rem; margin: 0 0 .6rem; }
.aufgabe-verlauf { list-style: none; margin: 0 0 1rem; padding: 0 0 0 .5rem; max-height: 55vh; overflow-y: auto; overflow-x: hidden; }
.aufgabe-verlauf li { position: relative; padding: 0 0 .8rem .9rem; border-left: 2px solid var(--color-line); font-size: .88rem; overflow-wrap: anywhere; }
.aufgabe-verlauf li::before { content: ''; position: absolute; left: calc(-.3rem - 1px); top: .3rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-rose); }
.aufgabe-verlauf li.av-kommentar::before { background: #3c6496; }
.aufgabe-verlauf li.av-erstellt::before { background: var(--color-success); }
.av-kopf { font-size: .75rem; color: var(--color-text-soft); margin-bottom: .15rem; }
.aufgabe-verlauf li > span { display: block; }
.aufgabe-verlauf s { color: var(--color-text-soft); }
.aufgabe-kommentar { background: var(--color-mist); border-radius: var(--radius-sm); padding: .45rem .6rem; }
@media (max-width: 800px) {
  .aufgabe-detail { grid-template-columns: minmax(0, 1fr); }
  .aufgabe-verlauf { max-height: none; }
}

/* ---- Dokumentenmanagement (seit 0.31.0) ---- */
a.icon-btn { text-decoration: none; }
.d-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.d-bereiche { padding: .5rem; position: sticky; top: 90px; }
.d-bereiche a { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--color-text); font-size: .92rem; }
.d-bereiche a > span:first-child { width: 1.3rem; text-align: center; flex: none; }
.d-bereiche a:hover { background: var(--color-bg-soft); }
.d-bereiche a.aktiv { background: var(--color-rose-deep); color: #fff; }
.d-zahl { margin-left: auto; font-size: .78rem; opacity: .8; }
.d-bereich-titel { font-size: 1.15rem; margin: 0 0 .6rem; }
.d-akte-wahl { max-width: 420px; }
.d-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; cursor: pointer;
  border: 2px dashed var(--color-rose); border-radius: var(--radius); padding: 1.1rem 1rem; margin-bottom: 1rem;
  background: var(--color-surface); color: var(--color-taupe-dark);
}
.d-dropzone:hover, .d-dropzone.aktiv { background: var(--color-bg-soft); border-color: var(--color-rose-deep); }
.d-link { color: var(--color-rose-deep); text-decoration: underline; }
.d-symbol-klein { margin-right: .35rem; }
.d-upload-liste { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.d-upload-zeile { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, auto); gap: .5rem; align-items: center; }
.d-upload-zeile .field { margin: 0; min-width: 0; }
.d-upload-zeile .hint { overflow-wrap: anywhere; }
.d-symbol { font-size: 1.4rem; text-align: center; }
.d-status { font-size: .8rem; max-width: 12rem; overflow-wrap: anywhere; }
.pos { color: var(--color-success); }
.d-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.4rem; align-items: start; }
.d-vorschau { background: var(--color-mist); border-radius: var(--radius); padding: .8rem; text-align: center; margin-bottom: .6rem; }
.d-vorschau-bild { max-width: 100%; max-height: 50vh; border-radius: var(--radius-sm); }
.d-vorschau-symbol { font-size: 3rem; padding: 1.2rem 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.d-vorschau-symbol span { font-size: .85rem; overflow-wrap: anywhere; }
.d-h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
.d-versionen a { overflow-wrap: anywhere; }
.d-datei-knopf { display: inline-flex; }
.d-protokoll { margin-top: 1rem; }
.d-protokoll summary { cursor: pointer; font-weight: 600; color: var(--color-taupe-dark); }
@media (max-width: 900px) {
  .d-layout { grid-template-columns: minmax(0, 1fr); }
  .d-bereiche { position: static; display: flex; flex-wrap: wrap; gap: .2rem; }
  .d-bereiche a { padding: .35rem .55rem; }
  .d-detail { grid-template-columns: minmax(0, 1fr); }
  .d-upload-zeile { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .d-status { grid-column: 2; max-width: none; }
}

/* ---- Dokumente: eingebettete Vorschau (seit 0.31.1) ---- */
.d-ablegen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.d-ablegen-vorschau { position: sticky; top: 0; }
.d-vorschau-gross { padding: .4rem; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.d-vorschau-frame { width: 100%; height: 62vh; border: none; border-radius: var(--radius-sm); background: #fff; display: block; }
.d-vorschau-text { background: #fff; }
.d-vorschau-gross .d-vorschau-bild { max-height: 62vh; }
.d-upload-zeile { cursor: pointer; border-radius: var(--radius-sm); padding: .2rem .3rem; }
.d-upload-zeile.aktiv { background: var(--color-bg-soft); box-shadow: inset 3px 0 0 var(--color-rose-deep); }
.d-split.mit-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
.d-pane { position: sticky; top: 80px; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.d-pane[hidden] { display: none; }
.d-pane-kopf { display: flex; gap: .6rem; align-items: flex-start; justify-content: space-between; }
.d-pane-kopf > div { min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.d-pane-knoepfe { margin: 0; }
.d-vorschau-pane { padding: .3rem; margin: 0; }
.d-vorschau-pane .d-vorschau-frame { height: calc(100vh - 260px); min-height: 420px; }
.d-vorschau-pane .d-vorschau-bild { max-height: calc(100vh - 260px); }
tr.row-click.gewaehlt td { background: var(--color-bg-soft); }
tr.row-click.gewaehlt td:first-child { box-shadow: inset 3px 0 0 var(--color-rose-deep); }
@media (max-width: 900px) {
  .d-ablegen { grid-template-columns: minmax(0, 1fr); }
  .d-ablegen-vorschau { position: static; }
  .d-vorschau-frame { height: 50vh; }
}

/* ---- Erscheinungsbild (White Label) ---- */
.eb-farbzeile { display: flex; gap: .6rem; align-items: center; }
.eb-farbzeile input[type="color"] { width: 3.2rem; height: 2.4rem; padding: .15rem; border-radius: var(--radius-sm); }
.eb-hex { max-width: 8rem; font-family: ui-monospace, Consolas, monospace; }
.eb-vorschlaege { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .3rem; }
.eb-swatch { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-line); cursor: pointer; }
.eb-logo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.eb-logo img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: #fff; padding: .3rem; }