/* WeeUp – Oberfläche im Stil von PflegDi: Farbwelt #1B5E7E, links Bereichsleiste, Liste mit Suche,
   Kopfkarte, Reiter mit Gruppenkästen. Keine externen Schriften (Datenschutz). */

:root {
  --primaer: #1B5E7E;
  --primaer-dunkel: #12435A;
  --primaer-hell: #E3EEF4;
  --text: #1B2A33;
  --text-gedaempft: #5B6B76;
  --rand: #D5DEE4;
  --flaeche: #F3F6F8;
  --leiste: #E8EEF2;
  --weiss: #FFFFFF;
  --zeile-hover: #F3F6F8;
  --ok: #1E6B45;       --ok-hg: #E2F3EA;
  --warn: #8A5300;     --warn-hg: #FFF0D1;
  --fehler: #A6261D;   --fehler-hg: #FCE6E3;   --fehler-rand: #E3B1AC;
  --neutral-hg: #E9EEF1; --neutral: #44545F;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--flaeche); color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0 0 8px; }
code { font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--neutral-hg); padding: 1px 5px; border-radius: 4px; }
svg.symbol { flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kopfleiste mit Menüs ---------- */
.kopf { display: flex; height: 36px; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--primaer); color: #fff; }
.kopf-links, .kopf-rechts { display: flex; align-items: center; gap: 18px; }
.marke { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: #fff; }
.marke:hover { text-decoration: none; }
.menueleiste { display: flex; gap: 4px; }
.menue { position: relative; }
.menue > summary { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 6px; font-size: 13px; user-select: none; }
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary:hover, .menue[open] > summary { background: rgba(255, 255, 255, .16); }
.menue-liste { position: absolute; z-index: 30; top: 32px; left: 0; min-width: 210px; padding: 6px; background: #fff; color: var(--text); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(27, 42, 51, .18); }
.menue-liste a, .menue-liste button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.menue-liste a:hover, .menue-liste button:hover { background: var(--flaeche); text-decoration: none; }
.menue-liste .trenner { height: 1px; margin: 6px 4px; background: var(--rand); }
.kopf-benutzer { font-size: 13px; white-space: nowrap; }
.kopf-benutzer .rolle { opacity: .8; }

/* ---------- Werkzeugleiste ---------- */
.werkzeug { display: flex; min-height: 52px; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--rand); }
.werkzeug h1 { font-size: 16px; white-space: nowrap; }
.werkzeug .unter { color: var(--text-gedaempft); font-size: 12px; }
.aktionen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Rahmen: Bereichsleiste links, Inhalt rechts ---------- */
.rahmen { display: flex; flex: 1; min-height: 0; }
.bereiche { display: flex; flex-direction: column; width: 236px; flex-shrink: 0; overflow-y: auto; padding: 12px 0; background: var(--leiste); border-right: 1px solid var(--rand); }
.bereiche .abschnitt { padding: 4px 20px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-gedaempft); text-transform: uppercase; }
.bereiche .trenner { height: 1px; margin: 12px; background: var(--rand); }
.bereich { display: flex; align-items: center; gap: 10px; margin: 0 8px 2px; padding: 9px 12px; border-radius: 6px; color: var(--text); font-weight: 500; }
.bereich:hover { background: rgba(255, 255, 255, .6); text-decoration: none; }
.bereich.aktiv { background: var(--primaer); color: #fff; font-weight: 600; }
.bereich.gesperrt { color: #8a98a2; cursor: default; }
.bereich.gesperrt:hover { background: none; }
.bereich > span { white-space: nowrap; }
.bereich small { display: block; font-size: 11px; font-weight: 400; line-height: 1.2; }
.inhalt { flex: 1; min-width: 0; overflow: auto; padding: 16px; }
.inhalt.ohne-polster { padding: 0; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; background: #fff; color: var(--text); border: 1px solid var(--rand); }
.knopf:hover { background: var(--flaeche); text-decoration: none; }
.knopf-primaer { background: var(--primaer); color: #fff; border-color: var(--primaer); }
.knopf-primaer:hover { background: var(--primaer-dunkel); }
.knopf-gefahr { color: var(--fehler); border-color: var(--fehler-rand); }
.knopf-gefahr:hover { background: var(--fehler-hg); }
.knopf-klein { height: 28px; padding: 0 10px; font-size: 12px; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Gruppenkästen und Felder ---------- */
.gruppe { margin-bottom: 16px; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); }
.gruppe-kopf { border-radius: var(--radius) var(--radius) 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 8px 14px; border-bottom: 1px solid var(--rand); font-size: 13px; font-weight: 600; }
.gruppe-inhalt { padding: 14px; }
.gruppe-inhalt.buendig { padding: 0; }
.gruppe-inhalt.buendig > :last-child { border-radius: 0 0 var(--radius) var(--radius); }
.gruppe-fuss { border-radius: 0 0 var(--radius) var(--radius); display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--rand); background: var(--flaeche); }
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 20px; }
.feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feld label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-gedaempft); white-space: nowrap; }
.feld .pflicht { color: var(--fehler); }
.feld input, .feld select, .feld textarea, .suchfeld input, .filter select, .filter input {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--rand); border-radius: 6px; background: #fff; color: var(--text); font: inherit; font-size: 14px;
}
.feld input:focus, .feld select:focus, .suchfeld input:focus, .filter select:focus, .filter input:focus { outline: 2px solid rgba(27, 94, 126, .35); border-color: var(--primaer); }
.feld input[readonly] { background: var(--flaeche); color: var(--text-gedaempft); }
.feld.hat-fehler input, .feld.hat-fehler select { border-color: var(--fehler); }
.feld .fehler { margin: 0; color: var(--fehler); font-size: 12px; }
.feld .hinweis { margin: 0; color: var(--text-gedaempft); font-size: 12px; }

/* ⓘ: lange Erklärungen stehen hinter dem Zeichen, nicht im Formular */
.info { position: relative; display: inline-block; }
.info > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--text-gedaempft); color: var(--text-gedaempft); font-size: 11px; font-style: normal; line-height: 1; cursor: pointer; user-select: none; }
.info > summary::-webkit-details-marker { display: none; }
.info[open] > summary, .info > summary:hover { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.info-text { position: absolute; z-index: 20; top: 22px; left: -8px; width: 280px; padding: 10px 12px; background: #fff; color: var(--text); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(27, 42, 51, .18); font-size: 12px; font-weight: 400; white-space: normal; }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--neutral-hg); color: var(--neutral); }
.chip-ok { background: var(--ok-hg); color: var(--ok); }
.chip-warn { background: var(--warn-hg); color: var(--warn); }
.chip-fehler { background: var(--fehler-hg); color: var(--fehler); }
.chip-info { background: var(--primaer-hell); color: var(--primaer); }

/* ---------- Meldungen ---------- */
.meldung { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--rand); background: #fff; }
.meldung-ok { background: var(--ok-hg); border-color: #b9dfc8; color: var(--ok); }
.meldung-warn { background: var(--warn-hg); border-color: #ecd49a; color: var(--warn); }
.meldung-fehler { background: var(--fehler-hg); border-color: var(--fehler-rand); color: var(--fehler); }
.meldung-info { background: var(--primaer-hell); border-color: #c1d8e5; color: var(--primaer); }
span.nowrap { white-space: nowrap; }
.meldung-aktion { align-items: center; flex-wrap: wrap; }
.meldung-aktion > span { flex: 1 1 240px; }
.meldung-aktion .knopf { flex: 0 0 auto; }
.meldung pre { margin: 6px 0 0; white-space: pre-wrap; font: 12px ui-monospace, Menlo, Consolas, monospace; color: var(--text); }

/* ---------- Liste links, Akte rechts ---------- */
.zweispalter { display: flex; height: 100%; min-height: 0; }
.liste-spalte { display: flex; flex-direction: column; width: 320px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--rand); min-height: 0; }
.liste-kopf { padding: 12px; border-bottom: 1px solid var(--rand); display: flex; flex-direction: column; gap: 8px; }
.suchfeld { position: relative; }
.suchfeld input { padding-left: 32px; }
.suchfeld svg { position: absolute; left: 10px; top: 9px; color: var(--text-gedaempft); }
.filterchips { display: flex; gap: 6px; flex-wrap: wrap; }
.filterchips a { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--rand); color: var(--text-gedaempft); font-size: 12px; }
.filterchips a:hover { text-decoration: none; background: var(--flaeche); }
/* Umschalter der Belegart: zwei mal zwei, damit die Schalter in der schmalen Liste mit jeder Schrift Platz haben (mit jeder weiteren Belegart kommt eine Zeile dazu) */
.filterchips.umschalter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filterchips.umschalter a { justify-content: center; padding: 0 6px; white-space: nowrap; }
/* Bei ungerader Anzahl steht der letzte Schalter über die ganze Breite */
.filterchips.umschalter a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.filterchips a.aktiv { background: var(--primaer-hell); border-color: #c1d8e5; color: var(--primaer); font-weight: 600; }
.liste { overflow-y: auto; flex: 1; }
.liste-eintrag { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #E7EDF1; color: var(--text); }
.liste-eintrag:hover { background: var(--zeile-hover); text-decoration: none; }
.liste-eintrag.aktiv { background: var(--primaer-hell); box-shadow: inset 3px 0 0 var(--primaer); }
.liste-eintrag .titel { font-weight: 500; }
.liste-eintrag .unter { color: var(--text-gedaempft); font-size: 12px; }
.liste-eintrag .text { min-width: 0; flex: 1; }
.liste-eintrag .text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-leer { padding: 24px 14px; color: var(--text-gedaempft); text-align: center; }
.akte { flex: 1; min-width: 0; overflow: auto; padding: 16px; }
.leer-hinweis { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-gedaempft); text-align: center; padding: 24px; }

.avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--primaer-hell); color: var(--primaer); font-weight: 600; font-size: 13px; }
.avatar-gross { width: 52px; height: 52px; font-size: 18px; }

.kopfkarte { margin-bottom: 16px; padding: 16px; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); }
.kopfkarte-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kopfkarte h2 { font-size: 18px; }
.kopfkarte .unter { color: var(--text-gedaempft); }
.fakten { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 14px; }
.fakt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fakt .bezeichnung { font-size: 12px; color: var(--text-gedaempft); white-space: nowrap; }
.fakt .wert { font-size: 14px; font-weight: 500; }

.reiter { display: flex; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--rand); }
.reiter a { padding: 12px 16px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--text-gedaempft); font-weight: 500; white-space: nowrap; }
.reiter a:hover { color: var(--text); text-decoration: none; }
.reiter a.aktiv { color: var(--primaer); border-bottom-color: var(--primaer); font-weight: 600; }

/* ---------- Tabellen ---------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th { padding: 8px 12px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-gedaempft); background: var(--flaeche); border-bottom: 1px solid var(--rand); white-space: nowrap; }
.tabelle td { padding: 9px 12px; border-bottom: 1px solid #E7EDF1; vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .mitte { text-align: center; }
.tabelle .gedaempft { color: var(--text-gedaempft); }
.tabelle-rahmen { overflow-x: auto; }

.filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px 14px; border-bottom: 1px solid var(--rand); }
.filter .feld { min-width: 140px; }
.filter .feld input, .filter .feld select { width: 100%; }

.diff { margin-top: 4px; }
.diff summary { cursor: pointer; color: var(--primaer); font-size: 12px; }
.diff table { margin-top: 6px; border-collapse: collapse; font-size: 12px; }
.diff td, .diff th { padding: 3px 10px 3px 0; text-align: left; vertical-align: top; }
.diff th { font-weight: 600; color: var(--text-gedaempft); }
.diff .alt { color: var(--fehler); text-decoration: line-through; }
.diff .neu { color: var(--ok); }

.seiten { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--rand); font-size: 13px; color: var(--text-gedaempft); }
.seiten .links { display: flex; gap: 4px; }
.seiten a, .seiten span.seite { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--rand); border-radius: 6px; color: var(--text); background: #fff; }
.seiten span.aktuell { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.seiten span.aus { color: #a5b1b9; background: var(--flaeche); }

.rechte-matrix td.stufe-0 { color: #a5b1b9; }
.rechte-matrix td.stufe-1, .rechte-matrix td.stufe-2 { color: var(--text); }
.rechte-matrix td.stufe-3, .rechte-matrix td.stufe-4 { color: var(--ok); font-weight: 600; }

.kennwerte { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: 0; }
.kennwerte dt { color: var(--text-gedaempft); }
.kennwerte dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.raster .gruppe { margin-bottom: 0; }
.platzhalter { padding: 28px 14px; text-align: center; color: var(--text-gedaempft); }

/* ---------- Gäste: Anmeldung und Einrichtung ---------- */
.gast { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; overflow: auto; }
body.gast-seite { height: auto; min-height: 100vh; overflow: auto; }
.gast-karte { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--rand); border-radius: 12px; box-shadow: 0 8px 28px rgba(27, 42, 51, .08); overflow: hidden; }
.gast-karte.breit { max-width: 520px; }
.gast-kopf { padding: 22px 24px 8px; text-align: center; }
.gast-kopf .logo { display: inline-block; margin-bottom: 6px; color: var(--primaer); font-size: 24px; font-weight: 700; letter-spacing: .06em; }
.gast-kopf .untertitel { color: var(--text-gedaempft); }
.gast-karte form { padding: 14px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.gast-karte .meldung { margin: 12px 24px 0; }
.gast-fuss { margin-top: 14px; color: var(--text-gedaempft); font-size: 12px; text-align: center; }
.schritte { display: flex; justify-content: center; gap: 6px; padding: 4px 24px 0; }
.schritte .chip { height: 24px; }
.passwort-zeile { position: relative; }
.passwort-zeile button { position: absolute; right: 4px; top: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: 4px; background: none; color: var(--primaer); font-size: 12px; cursor: pointer; }

/* ---------- Fehlerseiten ---------- */
.fehlerseite { text-align: center; padding: 8px 24px 26px; }
.fehlerseite .nummer { font-size: 44px; font-weight: 700; color: var(--primaer); letter-spacing: .04em; }
.fehlerseite h1 { font-size: 18px; margin: 4px 0 8px; }
.fehlerseite p { color: var(--text-gedaempft); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .rahmen { flex-direction: column; }
  .bereiche { width: auto; flex-direction: row; flex-wrap: wrap; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--rand); overflow: visible; }
  .bereiche .abschnitt, .bereiche .trenner { display: none; }
  .bereich { margin: 0; padding: 7px 10px; }
  .bereich small { display: none; }
  .zweispalter { flex-direction: column; height: auto; }
  .liste-spalte { width: auto; border-right: 0; border-bottom: 1px solid var(--rand); max-height: 320px; }
  .kopf-benutzer .rolle { display: none; }
  .menueleiste { display: none; }
  .info-text { width: 220px; }
  .reiter a { padding: 12px 12px; }
  /* Titel bleibt in einer Zeile; reicht die Breite nicht für Titel und Knopf, rutscht der Knopf darunter */
  .werkzeug { flex-wrap: wrap; gap: 8px; }
  .werkzeug > div:first-child { flex: 1 1 0; min-width: min-content; }
  .aktionen .knopf { white-space: nowrap; }
  /* Tabellen mit Klasse „kompakt“: weniger wichtige Spalten (nur-breit) entfallen, die erste Spalte darf umbrechen */
  .tabelle .nur-breit { display: none; }
  .tabelle.kompakt td.nowrap { white-space: normal; }
}
@media print { .kopf, .werkzeug, .bereiche { display: none; } body { height: auto; overflow: visible; } }

/* ---------- Betreiberbereich (Paket 04): dunklere Kopfleiste, damit man ihn nicht mit der Kunden-Anwendung verwechselt ---------- */
.kopf-betreiber { background: var(--primaer-dunkel); }
.betreiber-marke { padding: 2px 9px; border-radius: 10px; background: #F2B544; color: #3A2600; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.zahl { padding: 14px 16px; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); }
.zahl .bezeichnung { display: block; color: var(--text-gedaempft); font-size: 12px; }
.zahl .wert { display: block; margin-top: 2px; font-size: 22px; font-weight: 600; }
.zahl .zusatz { display: block; margin-top: 2px; color: var(--text-gedaempft); font-size: 12px; }
.tabelle .rechts, .tabelle th.rechts { text-align: right; white-space: nowrap; }
.tabelle tr.summe td { font-weight: 600; background: var(--flaeche); }
.tabelle tr.gedaempft-zeile td { color: var(--text-gedaempft); }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.inline-form .feld { min-width: 140px; }
.inline-form .feld input, .inline-form .feld select { width: 100%; }
.aktionszeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trennlinie { height: 1px; margin: 14px 0; background: var(--rand); border: 0; }
.leiste-unten { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.feld textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; }
.punktliste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.punktliste li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.einzelheiten { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; }
.einzelheiten .gedaempft { color: var(--text-gedaempft); }
.tabelle td.nowrap { white-space: nowrap; }
.tabelle td.nummer { white-space: nowrap; }
/* Buchung beenden: kleines Aufklapp-Feld in der Tabellenzeile */
.beenden { display: inline-block; text-align: right; }
.beenden > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
.beenden > summary::-webkit-details-marker { display: none; }
.beenden[open] > summary { margin-bottom: 6px; }
.beenden-form { display: flex; gap: 8px; align-items: center; justify-content: flex-end; white-space: nowrap; }
.beenden-form label { font-size: 12px; color: var(--text-gedaempft); }
.beenden-form input[type=date] { height: 28px; border: 1px solid var(--rand); border-radius: 6px; padding: 0 6px; font: inherit; font-size: 13px; }

/* ---------- Stammdaten (Paket 05) ---------- */
fieldset.sperre { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.sperre:disabled .feld input, fieldset.sperre:disabled .feld select, fieldset.sperre:disabled .feld textarea { background: var(--flaeche); color: var(--text-gedaempft); }
.fehlliste { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.fehlliste li + li::before { content: '•'; margin-right: 12px; opacity: .6; }
.raster-breit { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.raster-breit .gruppe { margin-bottom: 16px; }
.felder-eine { grid-template-columns: 1fr; }
.logo-zeile { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.logo-bild { display: block; max-width: 220px; max-height: 90px; padding: 8px; background: #fff; border: 1px solid var(--rand); border-radius: 6px; object-fit: contain; }
.logo-leer { display: flex; align-items: center; justify-content: center; width: 220px; height: 90px; border: 1px dashed var(--rand); border-radius: 6px; color: var(--text-gedaempft); white-space: nowrap; }
.logo-feld { flex: 1; min-width: 220px; }
.logo-feld input[type=file] { height: auto; padding: 6px; }
.beleg-satz { margin: 14px 0 0; }
.beleg-satz .gedaempft { color: var(--text-gedaempft); }
/* Vorschau Briefkopf: ein verkleinertes DIN-A4-Blatt */
.briefblatt { position: relative; display: flex; flex-direction: column; aspect-ratio: 210 / 297; max-width: 520px; margin: 0 auto; padding: 7% 8% 5%; background: #fff; border: 1px solid var(--rand); box-shadow: 0 2px 10px rgba(27, 42, 51, .10); font-size: 10px; line-height: 1.4; color: #222; }
.briefblatt-kopf { display: flex; justify-content: space-between; gap: 12px; }
.briefblatt-absender { display: inline-block; max-width: 100%; padding-bottom: 2px; border-bottom: 1px solid #999; font-size: 7px; color: #444; overflow-wrap: anywhere; }
.briefblatt-empfaenger { margin-top: 6px; }
.briefblatt-logo { flex-shrink: 0; width: 34%; display: flex; justify-content: flex-end; align-items: flex-start; }
.briefblatt-logo img { max-width: 100%; max-height: 64px; object-fit: contain; }
.briefblatt-logo span { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border: 1px dashed #bbb; color: #999; font-size: 9px; }
.briefblatt-titel { margin-top: 9%; font-size: 12px; font-weight: 700; }
.briefblatt-zeilen { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.briefblatt-zeilen span { display: block; height: 5px; background: #e6ebee; border-radius: 3px; }
.briefblatt-zeilen span.kurz { width: 60%; }
.briefblatt-fuss { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px 10px; margin-top: auto; padding-top: 6px; border-top: 1px solid #999; font-size: 6.5px; line-height: 1.35; color: #444; overflow-wrap: anywhere; }
.briefblatt-fuss .gedaempft { color: #888; }
.briefblatt-zusatz { margin-top: 4px; font-size: 6.5px; color: #444; overflow-wrap: anywhere; }

/* Angebote und Belege (Paket 08) */
.fakten-lose { margin-top: 0; }
.anschrift { padding: 8px 10px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); line-height: 1.5; }
.problemliste { margin: 10px 0 0; padding-left: 20px; line-height: 1.6; }
.haken-zeile { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.aktionsreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.aktionsreihe form { margin: 0; }
.zeilenaktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.zeilenaktionen form { margin: 0; }
.zeilenaktionen .knopf { white-space: nowrap; }
.tabelle td.aktionen-zelle { white-space: nowrap; }
.tabelle td.aktionen-zelle .zeilenaktionen { flex-wrap: nowrap; }
.zeilentext { margin-top: 2px; font-size: 12px; white-space: pre-line; }
.tabelle tr.zeile-aktiv td { background: #F1F7FA; }
.tabelle tfoot td { border-top: 0; border-bottom: 0; background: #fff; }
.tabelle tfoot tr.summenzeile:first-child td { border-top: 1px solid var(--rand); }
.tabelle tfoot tr.summe-gesamt td { font-weight: 700; border-top: 1px solid var(--rand); }
.nur-schmal, .nur-schmal-zeile { display: none; }
/* Positionen auf schmalen Bildschirmen: jede Zeile wird ein kleines Raster (Nr., Text, Netto; Knöpfe darunter), die Summen stehen untereinander */
@media (max-width: 900px) {
  .nur-schmal { display: block; }
  .nur-schmal-zeile { display: inline; }
  /* Kompakte Tabellen: etwas engere Zellen, damit Nummer, Text und Betrag ohne Seitwärtsrollen nebeneinander passen */
  .tabelle.kompakt th, .tabelle.kompakt td { padding-left: 8px; padding-right: 8px; }
  /* Verlauf-Tabellen: Wann/Wer, Was und Einzelheiten stehen untereinander statt in drei Spalten */
  .tabelle.gestapelt thead { display: none; }
  .tabelle.gestapelt, .tabelle.gestapelt tbody { display: block; }
  .tabelle.gestapelt tbody tr { display: block; padding: 10px 12px; border-bottom: 1px solid #E7EDF1; }
  .tabelle.gestapelt tbody tr:last-child { border-bottom: 0; }
  .tabelle.gestapelt tbody td { display: block; padding: 0; border: 0; }
  .tabelle.gestapelt tbody td + td { margin-top: 4px; }
  .tabelle.positionen thead { display: none; }
  .tabelle.positionen, .tabelle.positionen tbody, .tabelle.positionen tfoot { display: block; }
  .tabelle.positionen tbody tr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 8px; padding: 10px 12px; border-bottom: 1px solid #E7EDF1; }
  .tabelle.positionen tbody tr:last-child { border-bottom: 0; }
  .tabelle.positionen tbody td { padding: 0; border: 0; min-width: 0; background: transparent; }
  .tabelle.positionen tbody tr.zeile-aktiv { background: #F1F7FA; }
  .tabelle.positionen tbody td[colspan] { grid-column: 2 / -1; }
  .tabelle.positionen tbody td.platzhalter { grid-column: 1 / -1; }
  .tabelle.positionen tbody td.aktionen-zelle { grid-column: 2 / -1; margin-top: 8px; text-align: left; }
  .tabelle.positionen .zeilenaktionen, .tabelle td.aktionen-zelle .zeilenaktionen { justify-content: flex-start; flex-wrap: wrap; }
  .tabelle td.aktionen-zelle { white-space: normal; }
  .tabelle.positionen tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 5px 12px; }
  .tabelle.positionen tfoot tr:first-child { border-top: 1px solid var(--rand); }
  .tabelle.positionen tfoot tr.summe-gesamt { border-top: 1px solid var(--rand); }
  .tabelle.positionen tfoot td { padding: 0; border: 0 !important; }
  .tabelle.positionen tfoot td:empty { display: none; }
}

/* Sammelrechnung (Paket 12): Gruppenzeile je Lieferschein in der Positionstabelle */
.tabelle tr.gruppenzeile td { padding-top: 6px; padding-bottom: 6px; background: var(--flaeche); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--rand); }
@media (max-width: 900px) {
  .tabelle.positionen tbody tr.gruppenzeile { display: block; padding: 6px 12px; background: var(--flaeche); border-bottom: 1px solid var(--rand); }
  .tabelle.positionen tbody tr.gruppenzeile td { display: block; grid-column: auto; background: transparent; padding: 0; border: 0; }
}

/* Offene Posten: Stornieren und andere Zeilenaktionen klappen unter der Zeile auf */
details.zeilen-details summary { cursor: pointer; color: var(--primaer); font-size: 12px; }
details.zeilen-details[open] summary { margin-bottom: 8px; }
details.zeilen-details .inline-form { min-width: 260px; }
.tabelle td s { color: var(--text-gedaempft); }
.liste-eintrag .text > .chipzeile { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; overflow: visible; white-space: normal; }
/* Hinweiszeile unter einer Tabellenzeile (zum Beispiel Grund einer Stornierung oder eines Zurückziehens) */
.tabelle tbody tr.hat-notiz td { border-bottom: 0; }
.tabelle tbody tr.notiz-zeile td { padding-top: 0; font-size: 12px; }
@media (max-width: 900px) {
  .tabelle.gestapelt tbody tr.hat-notiz { border-bottom: 0; padding-bottom: 2px; }
  .tabelle.gestapelt tbody tr.notiz-zeile { padding-top: 0; }
}
.tabelle td > :not(details) + details.zeilen-details { margin-top: 6px; }
details.zeilen-details .inline-form .feld { flex: 1 1 260px; }

/* Mitarbeiterakte (Paket 17): Standortwahl über der Liste, Knopf im Aussehen eines Links (zum Wiedereinblenden in der Tabelle) */
.standortwahl select { width: 100%; height: 28px; border: 1px solid var(--rand); border-radius: 6px; background: #fff; padding: 0 8px; font: inherit; font-size: 12px; color: var(--text); }
.link-knopf { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--primaer); cursor: pointer; }
.link-knopf:hover { text-decoration: underline; }
.feld input[type="file"] { padding: 6px; height: auto; background: #fff; }

/* Paket 18: Kennzahlen der Fristen-Übersicht */
.kennzahl { font-size: 28px; line-height: 1.1; }
.kennzahl strong { font-weight: 600; }
.raster-vier { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Paket 19: Monatsplaner, Abwesenheit */
.zaehler-punkt { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 9px; background: var(--warn-hg); color: var(--warn); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.planer { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.planer th, .planer td { border-bottom: 1px solid var(--rand); border-right: 1px solid var(--rand); padding: 0; text-align: center; }
.planer thead th { padding: 6px 0; background: var(--leiste); font-weight: 600; }
.planer thead th small { display: block; font-weight: 400; color: var(--text-gedaempft); }
.planer .planer-name { position: sticky; left: 0; z-index: 1; min-width: 170px; padding: 6px 10px; background: #fff; text-align: left; font-weight: 500; white-space: nowrap; }
.planer thead .planer-name { background: var(--leiste); }
.planer .planer-tag { min-width: 26px; }
.planer .we { color: var(--text-gedaempft); }
.planer .heute { box-shadow: inset 0 0 0 2px var(--primaer); }
.planer-zelle { height: 34px; min-width: 26px; text-align: center; font-size: 11px; color: #fff; background: #fff; }
.planer-zelle.frei { background: var(--neutral-hg); }
.planer-zelle.urlaub { background: #3E9B6B; }
.planer-zelle.offen { background: #E4B04A; }
.planer-zelle.krank { background: #C9544A; }
.planer-zelle.sonst { background: #5B8FB0; }
.planer-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12px; color: var(--text-gedaempft); }
.planer-legende i { display: inline-block; width: 14px; height: 14px; min-width: 14px; margin-right: 5px; border: 1px solid var(--rand); border-radius: 3px; vertical-align: -2px; }
.planer-legende .planer-zelle { height: 14px; }

/* Startseite "Was gerade hängt" (Paket 26) */
.haengt-block + .haengt-block { border-top: 1px solid var(--rand); }
.haengt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: var(--flaeche); flex-wrap: wrap; }
.haengt-zahl { display: inline-flex; align-items: center; gap: 8px; }
.fenster { max-width: 520px; width: calc(100% - 32px); border: 1px solid var(--fehler-rand); border-radius: 10px; padding: 20px; background: var(--weiss); color: inherit; }
.fenster::backdrop { background: rgba(0, 0, 0, .45); }
.fenster h2 { margin: 0 0 8px; font-size: 18px; color: var(--fehler); }
.fenster ul { margin: 12px 0; padding-left: 20px; }
.fenster-fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* =====================================================================================
   Paket 31: Modernes, ruhiges Aussehen mit Menü oben (angelehnt an PflegDi, nicht 1:1)
   Ein Menü oben, helle Karten mit Farbkante, runde Ecken, weiche Schatten, farbige Kürzel.
   Alles Weitere steht oben in diesem Blatt; hier werden nur Farben, Formen und das Kopfmenü neu gesetzt.
   ===================================================================================== */
:root {
  --flaeche: #EEF3F6;
  --rand: #DCE4EA;
  --radius: 12px;
  --schatten: 0 1px 2px rgba(18, 67, 90, .06), 0 6px 18px rgba(18, 67, 90, .06);
  --schatten-hoch: 0 12px 32px rgba(18, 67, 90, .18);
  --kopf-hoehe: 56px;
}
body { font-size: 14px; letter-spacing: .005em; }

/* ---------- Kopfmenü ---------- */
.navkopf { position: relative; z-index: 40; display: flex; align-items: center; gap: 24px; height: var(--kopf-hoehe); flex-shrink: 0; padding: 0 20px 0 14px; color: #fff; background: linear-gradient(100deg, #0F3A4F 0%, #1B5E7E 60%, #217396 100%); box-shadow: 0 2px 10px rgba(18, 67, 90, .25); }
.navmarke { display: flex; align-items: center; gap: 10px; color: #fff; }
.navmarke:hover { text-decoration: none; }
.navlogo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); font-weight: 700; font-size: 17px; }
.navname { font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.navleiste { display: flex; align-items: stretch; align-self: stretch; gap: 2px; flex: 1; min-width: 0; }
.navpunkt { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; color: rgba(255, 255, 255, .86); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none; list-style: none; }
.navpunkt::-webkit-details-marker { display: none; }
.navpunkt:hover, .navgruppe[open] > .navpunkt { color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; }
.navpunkt.aktiv { color: #fff; font-weight: 600; }
.navpunkt.aktiv::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #fff; }
.navgruppe { display: flex; align-items: stretch; }
.navgruppe > summary { display: inline-flex; }
.navgruppe .pfeil { opacity: .7; transition: transform .15s; }
.navgruppe[open] .pfeil { transform: rotate(180deg); }
.navgruppe > .menue-liste { top: calc(var(--kopf-hoehe) - 6px); }
.navrechts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.navkonto > summary { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; list-style: none; font-size: 13px; }
.navkonto > summary::-webkit-details-marker { display: none; }
.navkonto > summary:hover, .navkonto[open] > summary { background: rgba(255, 255, 255, .22); }
.kuerzel { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--primaer-dunkel); font-size: 12px; font-weight: 700; }
.menue-liste { border-radius: 12px; box-shadow: var(--schatten-hoch); padding: 8px; }
.menue-liste.rechts { left: auto; right: 0; top: 44px; }
.menue-liste a, .menue-liste button { border-radius: 8px; padding: 9px 12px; }
.menue-liste a.ist-aktiv { background: var(--primaer-hell); color: var(--primaer); font-weight: 600; }
.menue-titel { padding: 6px 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-gedaempft); }

/* ---------- Seite ---------- */
.rahmen { display: block; flex: 1; min-height: 0; overflow: hidden; }
.inhalt { height: 100%; overflow: auto; padding: 24px clamp(16px, 3vw, 40px) 40px; }
.inhalt.ohne-polster { padding: 0; }
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.inhalt.ohne-polster > .seitenkopf { margin: 0; padding: 18px clamp(16px, 3vw, 40px); background: #fff; border-bottom: 1px solid var(--rand); }
.seitenkopf h1 { font-size: 24px; font-weight: 650; letter-spacing: -.01em; }
.seitenkopf .unter { margin-top: 2px; color: var(--text-gedaempft); font-size: 13px; }

/* ---------- Karten, Felder, Knöpfe ---------- */
.gruppe { border-radius: var(--radius); border-color: var(--rand); box-shadow: var(--schatten); overflow: visible; }
.gruppe-kopf { position: relative; min-height: 46px; padding: 10px 18px 10px 20px; font-size: 14px; background: linear-gradient(90deg, #F3F8FB, #fff 70%); border-bottom-color: var(--rand); }
.gruppe-kopf::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--primaer); }
.gruppe-inhalt { padding: 18px 20px; }
.gruppe-fuss { padding: 12px 20px; }
.kopfkarte { border-radius: var(--radius); box-shadow: var(--schatten); border-left: 4px solid var(--primaer); background: linear-gradient(90deg, #F3F8FB, #fff 60%); }
.feld input, .feld select, .feld textarea, .suchfeld input, .filter select, .filter input { height: 38px; border-radius: 8px; transition: border-color .12s, box-shadow .12s; }
.feld textarea { height: auto; padding: 8px 10px; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .suchfeld input:focus, .filter select:focus, .filter input:focus { outline: 0; border-color: var(--primaer); box-shadow: 0 0 0 3px rgba(27, 94, 126, .18); }
.knopf { height: 38px; border-radius: 8px; padding: 0 16px; transition: background .12s, box-shadow .12s; }
.knopf:hover { box-shadow: 0 1px 4px rgba(18, 67, 90, .15); }
.knopf-primaer { background: linear-gradient(180deg, #226E91, #1B5E7E); box-shadow: 0 1px 2px rgba(18, 67, 90, .3); }
.knopf-klein { height: 30px; padding: 0 12px; border-radius: 7px; }
.chip { height: 24px; padding: 0 10px; border-radius: 12px; }
.meldung { border-radius: 10px; }

/* ---------- Tabellen und Listen ---------- */
.tabelle th { padding: 10px 14px; background: #F6F9FB; text-transform: none; }
.tabelle td { padding: 11px 14px; }
.tabelle tbody tr:hover td { background: #F6FAFC; }
.liste-eintrag { padding: 12px 16px; }
.liste-eintrag.aktiv { background: var(--primaer-hell); box-shadow: inset 4px 0 0 var(--primaer); }
.liste-spalte { box-shadow: var(--schatten); }
.reiter { gap: 2px; }
.reiter a { border-radius: 8px 8px 0 0; }
.reiter a:hover { background: rgba(27, 94, 126, .06); }
.avatar { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }

/* ---------- Startseite: Kennzahlen-Kacheln ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kachel { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 16px 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--rand); box-shadow: var(--schatten); color: var(--text); overflow: hidden; }
.kachel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primaer); }
.kachel:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--schatten-hoch); }
.kachel .kz-zahl { font-size: 30px; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; }
.kachel .beschriftung { font-size: 13px; color: var(--text-gedaempft); }
.kachel.rot::before { background: var(--fehler); } .kachel.rot .kz-zahl { color: var(--fehler); }
.kachel.gelb::before { background: #D99A1E; } .kachel.gelb .kz-zahl { color: var(--warn); }
.kachel.gruen::before { background: #2E9A62; } .kachel.gruen .kz-zahl { color: var(--ok); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .navkopf { height: auto; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px 0; }
  .navleiste { order: 3; flex: 1 0 100%; overflow-x: auto; min-height: 44px; margin: 0 -12px; padding: 0 8px; }
  .navgruppe > .menue-liste { position: fixed; left: 8px; right: 8px; top: auto; min-width: 0; }
  .navname, .navbenutzer { display: none; }
  .rahmen { overflow: visible; }
  .inhalt { height: auto; overflow: visible; padding: 16px 14px 32px; }
  .seitenkopf h1 { font-size: 21px; }
}
@media print { .navkopf { display: none; } }

.raster > .gruppe.breit { grid-column: span 2; }
@media (max-width: 900px) { .raster > .gruppe.breit { grid-column: auto; } }
.menue-liste { min-width: 240px; } .menue-liste a, .menue-liste button { white-space: nowrap; }

/* =====================================================================================
   Paket 32: Schnellzugriff (Favoritenleiste)
   Zusammengehörige Seiten tragen dieselbe Farbe (die Farbe ihrer Menügruppe). Verschiebbar per Ziehen, entfernbar mit dem Kreuz.
   ===================================================================================== */
:root {
  --f-petrol: #1B5E7E;  --f-petrol-hg: #E3EEF4;
  --f-tuerkis: #0E8A8A; --f-tuerkis-hg: #DDF2F1;
  --f-blau: #3B5BDB;    --f-blau-hg: #E6EBFC;
  --f-gruen: #2E8B57;   --f-gruen-hg: #E1F3E9;
  --f-orange: #D9731A;  --f-orange-hg: #FDEBD8;
  --f-violett: #7E4DB8; --f-violett-hg: #EFE6F9;
}
.farbe-petrol  { --f: var(--f-petrol);  --f-hg: var(--f-petrol-hg); }
.farbe-tuerkis { --f: var(--f-tuerkis); --f-hg: var(--f-tuerkis-hg); }
.farbe-blau    { --f: var(--f-blau);    --f-hg: var(--f-blau-hg); }
.farbe-gruen   { --f: var(--f-gruen);   --f-hg: var(--f-gruen-hg); }
.farbe-orange  { --f: var(--f-orange);  --f-hg: var(--f-orange-hg); }
.farbe-violett { --f: var(--f-violett); --f-hg: var(--f-violett-hg); }

.schnell { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 48px; padding: 6px clamp(14px, 3vw, 40px); background: #fff; border-bottom: 1px solid var(--rand); }
.schnell-titel { display: inline-flex; color: #C9A227; }
.schnell-liste { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.schnell-liste::-webkit-scrollbar { display: none; }
.schnell-punkt { position: relative; display: flex; align-items: center; flex-shrink: 0; border-radius: 10px; background: var(--f-hg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 22%, transparent); cursor: grab; transition: transform .12s, box-shadow .12s, background .12s; }
.schnell-punkt:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 55%, transparent), 0 2px 8px rgba(18, 67, 90, .12); }
.schnell-punkt a { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; color: var(--text); font-weight: 500; white-space: nowrap; }
.schnell-punkt a:hover { text-decoration: none; }
.schnell-symbol { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--f); color: #fff; flex-shrink: 0; }
.schnell-punkt.aktiv { background: #fff; box-shadow: inset 0 0 0 2px var(--f), 0 2px 8px rgba(18, 67, 90, .12); }
.schnell-punkt.aktiv a { font-weight: 650; }
.schnell-weg { display: none; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 6px 0 -6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-gedaempft); cursor: pointer; }
.schnell-punkt:hover .schnell-weg, .schnell-punkt:focus-within .schnell-weg { display: inline-flex; }
.schnell-weg:hover { background: var(--fehler-hg); color: var(--fehler); }
.schnell-punkt.zieht { opacity: .35; transform: scale(.96); }
.schnell-punkt.ziel-links { box-shadow: -4px 0 0 0 var(--f), inset 0 0 0 1px color-mix(in srgb, var(--f) 40%, transparent); }
.schnell-punkt.ziel-rechts { box-shadow: 4px 0 0 0 var(--f), inset 0 0 0 1px color-mix(in srgb, var(--f) 40%, transparent); }
.schnell-neu > summary { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px dashed #AEBBC4; border-radius: 10px; color: var(--text-gedaempft); font-size: 13px; background: transparent; }
.schnell-neu > summary:hover, .schnell-neu[open] > summary { background: var(--flaeche); color: var(--text); border-color: var(--primaer); }
.schnell-auswahl { top: 42px; min-width: 260px; max-height: 70vh; overflow: auto; }
.schnell-auswahl button { color: var(--text); }
.schnell-auswahl .schnell-symbol { width: 24px; height: 24px; border-radius: 7px; }
.schnell-leer { color: var(--text-gedaempft); font-size: 13px; }
@media (hover: none) { .schnell-weg { display: inline-flex; } }
@media (max-width: 900px) { .schnell { padding: 6px 12px; } .schnell-neu > summary span { display: none; } .schnell-auswahl { position: fixed; left: 8px; right: 8px; top: auto; } }
@media print { .schnell { display: none; } }
.schnell-auswahl { left: auto; right: 0; }

/* ---- Schnellzugriff, Feinschliff (Paket 32): weiche Bewegung beim Darüberfahren, Kreuz als kleine Marke an der Ecke ---- */
.schnell-liste { padding: 8px 6px 6px; gap: 10px; }
.schnell-punkt { overflow: visible; transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, background .18s ease; }
.schnell-punkt:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--f-hg) 70%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 45%, transparent), 0 8px 18px -6px color-mix(in srgb, var(--f) 55%, transparent); }
.schnell-punkt:active { cursor: grabbing; transform: translateY(0) scale(.98); }
.schnell-symbol { transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease; background: linear-gradient(145deg, color-mix(in srgb, var(--f) 78%, #fff), var(--f)); box-shadow: 0 1px 2px color-mix(in srgb, var(--f) 50%, transparent); }
.schnell-punkt:hover .schnell-symbol { transform: scale(1.1) rotate(-4deg); box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--f) 70%, transparent); }
.schnell-punkt a { padding: 6px 14px 6px 8px; transition: color .15s; }
.schnell-punkt.aktiv { transform: none; }
.schnell-punkt.aktiv:hover { transform: translateY(-2px); }
.schnell-weg { display: inline-flex; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; margin: 0; background: #fff; color: var(--text-gedaempft); box-shadow: 0 1px 4px rgba(18, 67, 90, .3), 0 0 0 1px var(--rand); opacity: 0; transform: scale(.5); pointer-events: none; transition: opacity .15s ease, transform .18s cubic-bezier(.2, .8, .2, 1), background .12s, color .12s; }
.schnell-punkt:hover .schnell-weg, .schnell-punkt:focus-within .schnell-weg { opacity: 1; transform: scale(1); pointer-events: auto; }
.schnell-weg:hover { background: var(--fehler); color: #fff; box-shadow: 0 2px 6px rgba(166, 38, 29, .45); }
@media (hover: none) { .schnell-weg { opacity: 1; transform: scale(1); pointer-events: auto; } }

/* Leiste als Ablagefläche, wenn eine Seite aus dem Menü gezogen wird */
.schnell { position: relative; transition: background .15s, box-shadow .15s; }
body.zieht-neu .schnell { background: linear-gradient(180deg, #F3F8FB, #E6F0F6); box-shadow: inset 0 0 0 2px rgba(27, 94, 126, .35); }
body.zieht-neu .schnell::after { content: "Hier ablegen"; position: absolute; right: clamp(14px, 3vw, 40px); top: 50%; transform: translateY(-50%); padding: 4px 12px; border-radius: 999px; background: var(--primaer); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; pointer-events: none; }
.schnell.ablegen-bereit { background: linear-gradient(180deg, #E6F0F6, #D8E8F1); box-shadow: inset 0 0 0 2px var(--primaer); }
.schnell.ablegen-schon { background: #FFF6E0; box-shadow: inset 0 0 0 2px #E4B04A; }
body.zieht-neu .schnell.ablegen-schon::after { content: "Schon in der Leiste"; background: #B7791F; }
body.zieht-neu .schnell-punkt:hover { transform: none; }
body.zieht-neu .schnell-weg { display: none; }

/* Ohne Maus (Handy, Tablet) bleibt "Hinzufügen" sichtbar; mit Maus zieht man die Seite aus dem Menü in die Leiste */
@media (hover: hover) and (pointer: fine) { .schnell-neu { display: none; } }

/* ---- Menü oben: ruhigeres Darüberfahren ---- */
.navpunkt { transition: background .18s ease, color .18s ease; }
.navpunkt:hover, .navgruppe[open] > .navpunkt { background: rgba(255, 255, 255, .14); }
.navpunkt.aktiv::after { transition: left .2s, right .2s; }
.navpunkt:not(.aktiv):hover::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: rgba(255, 255, 255, .5); }
.menue-liste { animation: menue-ein .14s ease-out; transform-origin: top left; }
@keyframes menue-ein { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menue-liste a, .menue-liste button { position: relative; transition: background .14s ease, padding-left .14s ease, color .14s ease; }
.menue-liste a:hover, .menue-liste button:hover { background: var(--primaer-hell); color: var(--primaer-dunkel); padding-left: 16px; }
.menue-liste a svg, .menue-liste button svg { transition: transform .16s ease; }
.menue-liste a:hover svg { transform: scale(1.12); }
.menue-liste a[draggable="true"] { cursor: grab; }

/* ---- Listen, Karten und Knöpfe: dezentes Darüberfahren ---- */
.liste-eintrag { transition: background .14s ease, box-shadow .14s ease; }
.liste-eintrag:hover:not(.aktiv) { background: #F3F8FB; box-shadow: inset 3px 0 0 rgba(27, 94, 126, .35); }
.kachel { transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease; }
.knopf { transition: background .14s ease, box-shadow .14s ease, transform .14s ease, border-color .14s ease; }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: none; }
.tabelle tbody tr td { transition: background .12s ease; }
@media (prefers-reduced-motion: reduce) { .schnell-punkt, .schnell-symbol, .kachel, .knopf, .menue-liste { transition: none !important; animation: none !important; } }

/* Kein Übergang beim Seitenwechsel (bewusst entfernt, Paket 60) */
@view-transition { navigation: none; }

/* Paket 33: Name und Logo WeeUp */
.navlogo { background: none; box-shadow: none; width: 34px; height: 34px; border-radius: 10px; display: block; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.navname { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.wm-up { color: #9AD6EE; }
.gast-kopf .gast-symbol { display: block; margin: 0 auto 10px; box-shadow: 0 6px 18px rgba(18, 67, 90, .25); border-radius: 16px; }
.gast-kopf .logo { font-size: 30px; font-weight: 700; letter-spacing: -.01em; color: #0F3A4F; }
.gast-kopf .logo .wm-up { color: #2A8DB8; }
.marke .marke-symbol { vertical-align: -6px; border-radius: 7px; }
.kopf .marke .wm-up { color: #9AD6EE; }

/* Logo oben links noch einmal 20 % größer (Paket 36) */
:root { --kopf-hoehe: 62px; }
.navlogo { width: 49px; height: 49px; border-radius: 14px; }
.navname { font-size: 26px; }
.navmarke { gap: 13px; }

/* Paket 37: Jeder Eintrag in einer Liste und jede Zeile bei mehreren Einträgen trägt ihre eigene, ruhige Farbe */
.liste-eintrag.farbig { background: hsl(var(--eh) 75% 94.5%); box-shadow: inset 5px 0 0 hsl(var(--eh) 62% 52%); border-bottom-color: hsl(var(--eh) 55% 88%); transition: background .15s ease, box-shadow .15s ease; }
.liste-eintrag.farbig:hover:not(.aktiv) { background: hsl(var(--eh) 78% 91.5%); box-shadow: inset 6px 0 0 hsl(var(--eh) 66% 46%); }
.liste-eintrag.farbig.aktiv { background: hsl(var(--eh) 80% 89%); box-shadow: inset 6px 0 0 hsl(var(--eh) 70% 42%); }
.liste-eintrag.farbig .titel { color: hsl(var(--eh) 60% 18%); }

/* Tabellen: ab der zweiten Zeile bekommt jede Zeile ihren Farbton (Kante links, zarter Grund, beim Darüberfahren kräftiger) */
.tabelle tbody:has(> tr:nth-child(2)) > tr { --zh: 205; }
.tabelle tbody:has(> tr:nth-child(2)) > tr:nth-child(8n+2) { --zh: 345; }
.tabelle tbody:has(> tr:nth-child(2)) > tr:nth-child(8n+3) { --zh: 145; }
.tabelle tbody:has(> tr:nth-child(2)) > tr:nth-child(8n+4) { --zh: 38; }
.tabelle tbody:has(> tr:nth-child(2)) > tr:nth-child(8n+5) { --zh: 272; }
.tabelle tbody:has(> tr:nth-child(2)) > tr:nth-child(8n+6) { --zh: 14; }
.tabelle tbody:has(> tr:nth-child(2)) > tr:nth-child(8n+7) { --zh: 176; }
.tabelle tbody:has(> tr:nth-child(2)) > tr:nth-child(8n+8) { --zh: 312; }
.tabelle tbody:has(> tr:nth-child(2)) > tr:not(.summe):not(.zeile-aktiv) { background: hsl(var(--zh) 75% 94.5%); transition: background .15s ease; }
.tabelle tbody:has(> tr:nth-child(2)) > tr:not(.summe):not(.zeile-aktiv):hover { background: hsl(var(--zh) 78% 91.5%); }
.tabelle tbody:has(> tr:nth-child(2)) > tr:not(.summe) > td:first-child { box-shadow: inset 5px 0 0 hsl(var(--zh) 62% 52%); }
.tabelle tbody:has(> tr:nth-child(2)) > tr:not(.summe):not(.zeile-aktiv) > td { border-bottom-color: hsl(var(--zh) 55% 88%); }
.tabelle tbody:has(> tr:nth-child(2)) > tr.zeile-aktiv > td { background: hsl(var(--zh) 80% 89%); }
.tabelle tbody:has(> tr:nth-child(2)) > tr > td.nummer, .tabelle tbody:has(> tr:nth-child(2)) > tr > td:first-child:not(:only-child) > a:first-child { color: hsl(var(--zh) 60% 24%); }
@media (prefers-reduced-motion: reduce) { .liste-eintrag.farbig, .tabelle tbody tr { transition: none !important; } }

/* Paket 35: Filter-Chips und Umschalter (Belegart, Status ...) größer, auffälliger und markanter */
.filterchips { gap: 8px; }
.filterchips a { height: 34px; padding: 0 14px; border-radius: 17px; border: 1.5px solid #B9CCD8; background: #fff; color: var(--text); font-size: 13.5px; font-weight: 500; box-shadow: 0 1px 2px rgba(18, 67, 90, .08); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.filterchips a:hover { background: var(--primaer-hell); border-color: var(--primaer); color: var(--primaer); box-shadow: 0 3px 8px -3px rgba(27, 94, 126, .35); transform: translateY(-1px); }
.filterchips a.aktiv, .filterchips a.aktiv:hover { background: linear-gradient(135deg, #2A7FA6, var(--primaer)); border-color: var(--primaer); color: #fff; font-weight: 600; box-shadow: 0 4px 10px -3px rgba(27, 94, 126, .55); transform: none; }
.filterchips.umschalter { gap: 8px; }
.filterchips.umschalter a { height: 40px; font-size: 14.5px; font-weight: 600; }
.suchfeld input { height: 40px; font-size: 14px; border-width: 1.5px; border-color: #B9CCD8; }
.suchfeld svg { top: 12px; }
@media (prefers-reduced-motion: reduce) { .filterchips a { transition: none; transform: none !important; } }

/* Paket 36: "Was gerade hängt" – Spalten (Zusatz, Zeitangabe, Merkmal) stehen in allen Blöcken exakt untereinander */
.haengt-tabelle { table-layout: fixed; width: 100%; }
.haengt-tabelle col.spalte-rest { width: 150px; }
.haengt-tabelle col.spalte-merkmal { width: 150px; }
.haengt-tabelle td { vertical-align: middle; }
.haengt-tabelle td:first-child { overflow: hidden; text-overflow: ellipsis; }
.haengt-tabelle .chip.merkmal { display: inline-flex; align-items: center; justify-content: center; min-width: 118px; box-sizing: border-box; }
@media (max-width: 640px) { .haengt-tabelle col.spalte-rest { width: 96px; } .haengt-tabelle col.spalte-merkmal { width: 104px; } .haengt-tabelle .chip.merkmal { min-width: 0; width: 100%; } }

/* Paket 36: Notizblock auf der Startseite */
.notizblock .gruppe-inhalt { background: linear-gradient(180deg, #FFFDF4, #FFFBEA); }
.notiz-neu { display: flex; gap: 8px; margin-bottom: 10px; }
.notiz-neu input { flex: 1; min-width: 0; height: 40px; border: 1.5px solid #E6D9A8; background: #fff; }
.notiz-leer { margin: 6px 2px; }
.notizen { list-style: none; margin: 0; padding: 0; }
.notizen li { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px dashed #E6D9A8; }
.notizen li:last-child { border-bottom: 0; }
.notizen form { display: contents; }
.notiz-text { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.notiz-haken { flex-shrink: 0; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid #D9A826; background: #fff; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.notiz-haken:hover { background: #FFF1C2; transform: scale(1.1); }
.notiz-haken.an { background: var(--ok, #2E8B57) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; border-color: var(--ok, #2E8B57); }
.notiz-weg { flex-shrink: 0; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-gedaempft); font-size: 18px; line-height: 1; cursor: pointer; opacity: .55; }
.notiz-weg:hover { opacity: 1; background: var(--fehler-hg); color: var(--fehler); }
.notizen li.erledigt .notiz-text { text-decoration: line-through; color: var(--text-gedaempft); }
.notiz-erledigt { margin-top: 10px; }
.notiz-erledigt > summary { cursor: pointer; color: var(--text-gedaempft); font-size: 13px; padding: 4px 0; }
@media (prefers-reduced-motion: reduce) { .notiz-haken { transition: none; transform: none !important; } }
.haengt-tabelle .chip.merkmal { border: 1px solid color-mix(in srgb, currentColor 38%, transparent); font-weight: 600; }
.notiz-neu input { padding: 0 12px; border-radius: 8px; font-size: 14px; font-family: inherit; }
.notiz-neu input:focus { outline: 2px solid rgba(27, 94, 126, .35); border-color: var(--primaer); }

/* Paket 37: Startseite dreispaltig – links Notizblock, Mitte "Was gerade hängt", rechts "Ihr Zugang" */
.start-raster { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(230px, 280px); }
.start-raster > .notizblock { grid-column: 1; grid-row: 1; }
.start-raster > .haengt-gruppe { grid-column: 2; grid-row: 1; }
.start-raster > .zugang-gruppe { grid-column: 3; grid-row: 1; }
.start-raster > .gruppe[style*="grid-column:1/-1"] { grid-row: 2; }
@media (max-width: 1100px) {
  .start-raster { grid-template-columns: minmax(0, 1fr); }
  .start-raster > .notizblock, .start-raster > .haengt-gruppe, .start-raster > .zugang-gruppe { grid-column: 1; grid-row: auto; }
  .start-raster > .gruppe[style*="grid-column:1/-1"] { grid-row: auto; }
}

/* Notizblock als Papier mit Linien */
.notizblock { background: #FFFEF8; border-color: #E2DCC4; }
.notizblock .gruppe-kopf { background: #FBF6E2; border-bottom: 1px solid #E2DCC4; font-family: inherit; }
.notizblock .gruppe-inhalt { background: #FFFEF8; padding: 14px 16px 18px 20px; position: relative; }
.notizblock .gruppe-inhalt::before { content: ""; position: absolute; top: 0; bottom: 0; left: 44px; width: 1px; background: #E9B8B0; opacity: .7; pointer-events: none; }
.notiz-neu { margin-bottom: 4px; }
.notiz-neu input { background: transparent; border: 0; border-bottom: 1.5px solid #B8CAD6; border-radius: 0; height: 38px; padding: 0 4px 0 30px; }
.notiz-neu input:focus { outline: 0; border-bottom-color: var(--primaer); background: rgba(27, 94, 126, .04); }
.notiz-neu .knopf { display: none; }
.notiz-neu { position: relative; }
.notiz-neu::before { content: "+"; position: absolute; left: 7px; top: 0; line-height: 38px; font-size: 20px; color: var(--primaer); pointer-events: none; }
.notizen { min-height: 304px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 37px, #D3E0E9 37px, #D3E0E9 38px); }
.notizen li { display: flex; align-items: flex-start; gap: 12px; padding: 0; border: 0; min-height: 38px; }
.notizen li .notiz-haken { margin-top: 7px; width: 22px; height: 22px; border-color: #7FA3B8; }
.notiz-text { line-height: 38px; font-size: 15px; font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", inherit; color: #1D3544; padding-left: 14px; margin-left: 12px; }
.notiz-weg { margin-top: 6px; }
.notiz-leer { line-height: 38px; margin: 0; min-height: 38px; font-size: 13px; }
.notiz-erledigt { margin-top: 12px; }
@media (max-width: 1100px) { .notizen { min-height: 152px; } }
.start-raster { grid-template-columns: minmax(290px, 340px) minmax(0, 1fr) minmax(230px, 270px); }
.notiz-text { padding-left: 8px; margin-left: 4px; font-size: 14.5px; }

/* Paket 37 (Feinschliff): Notizblock nach Vorbild eines gelben Schreibblocks – schwarze Kopfleiste, gelbes Papier, blaue Linien, doppelte Randlinie */
.notizblock { background: #FBF08A; border: 0; border-radius: 6px 6px 8px 8px; box-shadow: 0 6px 16px -6px rgba(60, 50, 0, .45), 0 1px 0 rgba(0, 0, 0, .15); overflow: hidden; }
.notizblock .gruppe-kopf { background: linear-gradient(180deg, #2B2B2B, #111); color: #fff; border: 0; border-bottom: 3px solid #000; padding: 16px 18px 12px; border-radius: 6px 6px 0 0; box-shadow: inset 0 -6px 8px -6px rgba(255, 255, 255, .25); }
.notizblock .gruppe-kopf::before { display: none; }
.notizblock .gruppe-kopf *, .notizblock .gruppe-kopf .gedaempft { color: #fff; }
.notizblock .gruppe-kopf .info, .notizblock .gruppe-kopf summary, .notizblock .gruppe-kopf svg { color: #fff; border-color: rgba(255, 255, 255, .6); }
.notizblock .gruppe-inhalt { background: linear-gradient(180deg, #FCF59A 0%, #FAEE7A 100%); padding: 6px 16px 22px 18px; }
.notizblock .gruppe-inhalt::before { left: 38px; width: 4px; background: transparent; border-left: 1px solid #E3A07A; border-right: 1px solid #E3A07A; opacity: .9; }
.notiz-neu { margin-bottom: 0; }
.notiz-neu input { height: 32px; border-bottom: 1px solid #7FA6D6; padding: 0 4px 0 36px; font-size: 14px; color: #3A3200; }
.notiz-neu input::placeholder { color: rgba(80, 70, 0, .55); }
.notiz-neu input:focus { background: rgba(255, 255, 255, .35); border-bottom-color: #3F6FB0; }
.notiz-neu::before { line-height: 32px; left: 8px; color: #7A6A00; }
.notizen { min-height: 320px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #8FB2DC 31px, #8FB2DC 32px); }
.notizen li { min-height: 32px; gap: 10px; }
.notizen li .notiz-haken { margin-top: 5px; width: 20px; height: 20px; border-color: #8A7A10; background: rgba(255, 255, 255, .55); }
.notizen li .notiz-haken:hover { background: #fff; }
.notiz-text { line-height: 32px; font-size: 14.5px; color: #2E2800; padding-left: 14px; margin-left: 4px; }
.notizen li.erledigt .notiz-text { color: rgba(60, 50, 0, .55); }
.notiz-weg { margin-top: 3px; color: #6B5D00; }
.notiz-weg:hover { background: rgba(255, 255, 255, .6); color: var(--fehler); }
.notiz-leer { line-height: 32px; min-height: 32px; color: rgba(60, 50, 0, .6); }
.notiz-erledigt > summary { color: #6B5D00; line-height: 32px; }
@media (max-width: 1100px) { .notizen { min-height: 160px; } }

/* Notizblock: keine senkrechten Randlinien mehr, nur zarte waagerechte Linien je Zeile */
.notizblock .gruppe-inhalt::before { display: none; }
.notizblock .gruppe-inhalt { padding-left: 16px; }
.notiz-neu input { border-bottom-color: rgba(63, 111, 176, .28); padding-left: 30px; }
.notizen { background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(63, 111, 176, .28) 31px, rgba(63, 111, 176, .28) 32px); }

/* Paket 38: Briefstil – zehn Layouts (Auswahl in den Stammdaten, Vorschau) */
.briefblatt { --ak: #1B5E7E; --ak-h: #E1ECF1; }
.briefblatt::before, .briefblatt::after { content: ""; position: absolute; pointer-events: none; display: none; }
.briefblatt[data-deko="balken"]::before { display: block; left: 0; right: 0; top: 0; height: 3.4%; background: var(--ak); }
.briefblatt[data-deko="streifen"]::before { display: block; left: 0; top: 0; bottom: 0; width: 2.9%; background: var(--ak); }
.briefblatt[data-deko="linie"]::before { display: block; left: 0; right: 0; top: 0; height: 1.3%; background: var(--ak); }
.briefblatt[data-deko="doppel"]::before { display: block; left: 0; right: 0; top: 2.6%; height: 2px; background: var(--ak); }
.briefblatt[data-deko="doppel"]::after { display: block; left: 0; right: 0; top: 3.9%; height: 1px; background: var(--ak); }
.briefblatt[data-logo="links"] .briefblatt-kopf, .briefblatt[data-logo="mitte"] .briefblatt-kopf { flex-wrap: wrap; }
.briefblatt[data-logo="links"] .briefblatt-logo, .briefblatt[data-logo="mitte"] .briefblatt-logo { order: -1; width: 100%; margin-bottom: 4px; }
.briefblatt[data-logo="links"] .briefblatt-logo { justify-content: flex-start; }
.briefblatt[data-logo="mitte"] .briefblatt-logo { justify-content: center; }
.briefblatt[data-logo="links"] .briefblatt-logo span, .briefblatt[data-logo="mitte"] .briefblatt-logo span { width: 34%; }
.briefblatt[data-titel="akzent"] .briefblatt-titel { color: var(--ak); }
.briefblatt[data-titel="kasten"] .briefblatt-titel { background: var(--ak); color: #fff; padding: 3px 6px; }
.briefblatt[data-unter="1"] .briefblatt-titel { padding-bottom: 3px; border-bottom: 1px solid var(--ak); }
.bb-tabelle { margin-top: 10px; }
.bb-kopfz { display: flex; gap: 8px; padding: 3px 4px; background: #eee; }
.bb-kopfz i { display: block; height: 3px; flex: 1; background: #666; border-radius: 2px; }
.bb-kopfz i:first-child { flex: 3; }
.bb-zeile { display: flex; gap: 8px; padding: 5px 4px; border-bottom: 1px solid #ddd; }
.bb-zeile i { display: block; height: 3px; flex: 1; background: #bbb; border-radius: 2px; }
.bb-zeile i:first-child { flex: 4; }
.bb-summe { display: flex; justify-content: space-between; width: 55%; margin: 8px 0 0 auto; padding: 3px 5px; border-top: 1px solid #222; border-bottom: 1px solid #222; font-size: 8px; }
.briefblatt[data-kopf="akzent"] .bb-kopfz { background: var(--ak); }
.briefblatt[data-kopf="akzent"] .bb-kopfz i { background: #fff; }
.briefblatt[data-kopf="hell"] .bb-kopfz { background: var(--ak-h); }
.briefblatt[data-kopf="linie"] .bb-kopfz { background: transparent; border-top: 1.5px solid var(--ak); border-bottom: 1px solid var(--ak); }
.briefblatt[data-kopf="keine"] .bb-kopfz { background: transparent; border-bottom: 1px solid #999; }
.briefblatt[data-kopf="akzent"] .bb-zeile, .briefblatt[data-kopf="hell"] .bb-zeile { border-bottom-color: var(--ak-h); }
.briefblatt[data-summe="kasten"] .bb-summe { background: var(--ak); color: #fff; border-color: var(--ak); }
.briefblatt[data-summe="linien"][data-fuss="akzent"] .bb-summe { border-color: var(--ak); }
.briefblatt[data-fuss="akzent"] .briefblatt-fuss { border-top: 1.5px solid var(--ak); }
.stil-farbe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.stil-proben { display: inline-flex; gap: 8px; }
.stil-probe { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #B9CCD8; cursor: pointer; transition: transform .12s ease; }
.stil-probe:hover { transform: scale(1.15); }
.stil-picker { width: 38px; height: 30px; padding: 0; border: 1px solid var(--rand); border-radius: 6px; background: #fff; cursor: pointer; }
.stil-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.stil-karte { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 2px solid var(--rand); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.stil-karte:hover { border-color: #9DBBCB; transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(27, 94, 126, .4); }
.stil-karte:has(input:checked) { border-color: var(--primaer); box-shadow: 0 0 0 3px rgba(27, 94, 126, .18); }
.stil-karte input { position: absolute; opacity: 0; pointer-events: none; }
.stil-karte .briefblatt { width: 100%; max-width: none; font-size: 5px; padding: 7% 8% 5%; margin: 0; }
.stil-karte .briefblatt-fuss, .stil-karte .briefblatt-zusatz { font-size: 3.4px; }
.stil-karte .briefblatt-absender { font-size: 3.6px; }
.stil-karte .briefblatt-titel { font-size: 6.5px; }
.stil-karte .bb-summe { font-size: 4.2px; }
.stil-karte .briefblatt-logo span { height: 20px; font-size: 5px; }
.stil-name { font-weight: 700; }
.stil-text { font-size: 12px; color: var(--text-gedaempft); line-height: 1.35; }
.stil-karte:has(input:checked) .stil-name::after { content: " ✓"; color: var(--primaer); }
@media (min-width: 1100px) { .stil-raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stil-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stil-text { display: none; } }

/* Paket 39: Weelee (Assistentin) und Spotlight-Rundgang */
.weelee-knopf { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px 4px 4px; border: 0; border-radius: 999px; background: #fff; color: var(--primaer-dunkel, #12435A); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px -6px rgba(18, 67, 90, .5), 0 0 0 1px rgba(27, 94, 126, .15); transition: transform .15s ease, box-shadow .15s ease; }
.weelee-knopf:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(18, 67, 90, .55), 0 0 0 1px rgba(27, 94, 126, .3); }
.weelee-knopf.offen { display: none; }
.weelee-fenster { position: fixed; right: 20px; bottom: 20px; z-index: 910; display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 24px); height: min(580px, calc(100vh - 40px)); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px -10px rgba(18, 67, 90, .55), 0 0 0 1px rgba(27, 94, 126, .18); }
.weelee-fenster[hidden], .weelee-tour[hidden] { display: none; }
.weelee-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: linear-gradient(135deg, #2A7FA6, #12435A); }
.weelee-kopf .weelee-gesicht, .weelee-kopf svg { flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); border-radius: 50%; }
.weelee-titel { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.weelee-titel span { font-size: 12px; opacity: .85; }
.weelee-zu { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.weelee-zu:hover { background: rgba(255, 255, 255, .3); }
.weelee-verlauf { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #F4F8FA; }
.weelee-blase { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.weelee-blase p { margin: 0 0 6px; }
.weelee-blase p:last-child, .weelee-blase ol:last-child { margin-bottom: 0; }
.weelee-blase ol { margin: 4px 0 6px; padding-left: 20px; }
.weelee-blase.sie { align-self: flex-start; background: #fff; border: 1px solid #DCE6EC; border-bottom-left-radius: 4px; }
.weelee-blase.ich { align-self: flex-end; background: linear-gradient(135deg, #2A7FA6, #1B5E7E); color: #fff; border-bottom-right-radius: 4px; }
.weelee-blase.tippt { color: var(--text-gedaempft); letter-spacing: 2px; }
.weelee-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.weelee-aktion { padding: 5px 11px; border: 1.5px solid var(--primaer); border-radius: 999px; background: #fff; color: var(--primaer); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.weelee-aktion:hover { background: var(--primaer); color: #fff; }
.weelee-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; background: #F4F8FA; }
.weelee-chip { padding: 5px 11px; border: 1px solid #B9CCD8; border-radius: 999px; background: #fff; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.weelee-chip:hover { border-color: var(--primaer); color: var(--primaer); }
.weelee-eingabe { display: flex; gap: 8px; padding: 10px 12px 12px; background: #F4F8FA; }
.weelee-eingabe input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1.5px solid #B9CCD8; border-radius: 10px; font: inherit; font-size: 14px; background: #fff; }
.weelee-eingabe input:focus { outline: 2px solid rgba(27, 94, 126, .35); border-color: var(--primaer); }
.weelee-tour { position: fixed; inset: 0; z-index: 1000; }
.weelee-tour-schein { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(10, 30, 42, .66), 0 0 0 3px #fff, 0 0 0 7px rgba(58, 166, 201, .55); transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease; pointer-events: none; animation: weelee-puls 1.8s ease-in-out infinite; }
@keyframes weelee-puls { 0%, 100% { box-shadow: 0 0 0 9999px rgba(10, 30, 42, .66), 0 0 0 3px #fff, 0 0 0 7px rgba(58, 166, 201, .55); } 50% { box-shadow: 0 0 0 9999px rgba(10, 30, 42, .66), 0 0 0 3px #fff, 0 0 0 12px rgba(58, 166, 201, .25); } }
.weelee-tour-karte { position: fixed; width: 360px; max-width: calc(100vw - 16px); padding: 16px 18px; background: #fff; border-radius: 14px; box-shadow: 0 18px 50px -10px rgba(10, 30, 42, .7); transition: left .28s ease, top .28s ease; }
.weelee-tour-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.weelee-tour-titel { font-size: 16px; color: var(--primaer-dunkel, #12435A); }
.weelee-tour-text { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.weelee-tour-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.weelee-tour-zahl { font-size: 12px; color: var(--text-gedaempft); }
.weelee-tour-knoepfe { display: inline-flex; gap: 8px; margin-left: auto; }
.weelee-tour-knoepfe [hidden] { display: none; }
body.weelee-tour-aktiv { overflow-anchor: none; }
@media (max-width: 560px) { .weelee-fenster { right: 6px; bottom: 6px; width: calc(100vw - 12px); height: calc(100vh - 12px); } .weelee-knopf-text { display: none; } .weelee-knopf { padding: 4px; } }
@media (prefers-reduced-motion: reduce) { .weelee-tour-schein { animation: none; transition: none; } .weelee-tour-karte { transition: none; } }
@media print { .weelee-knopf, .weelee-fenster, .weelee-tour { display: none !important; } }

/* ---------- Paket 40: Glocke für Hinweise im Kopf ---------- */
.navglocke { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 6px; border-radius: 10px; color: #fff; background: rgba(255, 255, 255, .12); }
.navglocke:hover { background: rgba(255, 255, 255, .24); text-decoration: none; }
.navzahl { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #1B5E7E; }

/* Paket 56: "Was gerade hängt" kompakter – feste, schmalere Mittelspalte statt die ganze Restbreite, engere Zeilen und Spalten */
.start-raster { grid-template-columns: minmax(290px, 340px) minmax(0, 620px) minmax(230px, 270px); justify-content: start; }
.start-raster > .haengt-gruppe { max-width: 620px; }
@media (max-width: 1100px) { .start-raster { grid-template-columns: minmax(0, 620px); } }
.haengt-kopf { padding: 8px 14px; }
.haengt-tabelle col.spalte-rest { width: 104px; }
.haengt-tabelle col.spalte-merkmal { width: 146px; }
.haengt-tabelle .chip.merkmal { min-width: 0; width: 100%; }
.haengt-tabelle td { padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; }
@media (max-width: 640px) { .start-raster { grid-template-columns: minmax(0, 1fr); } .haengt-tabelle col.spalte-rest { width: 88px; } .haengt-tabelle col.spalte-merkmal { width: 96px; } }

/* Paket 57: Unten nichts mehr abgeschnitten – dynamische Fensterhöhe (Safari-Leisten) und Platz unter dem Inhalt, damit Weelee und die Browser-Leiste nichts verdecken */
@media (min-width: 901px) { @supports (height: 100dvh) { body { height: 100dvh; } body.gast-seite { height: auto; min-height: 100dvh; } } }
.inhalt { padding-bottom: 96px; }
.akte { padding-bottom: 96px; }
.liste { padding-bottom: 72px; }
@media (max-width: 900px) { .inhalt { padding-bottom: 110px; } }