/* =============================================================================
   Farben stammen aus der style.css von gemeinsamjung.de.

   SCHRIFT: nur Outfit. Die Website setzt Ueberschriften in DM Serif Display;
   im Werkzeug wirkte die Serife zu dekorativ fuer eine Arbeitsoberflaeche
   (entschieden am 2026-09-13). Die oeffentlichen Formulare unter web/ behalten
   sie, die stehen neben der echten Website.
   Abstände, Radien und Schriftgrößen sind bewusst enger: Eine Marketing-Seite
   darf luftig sein, ein Arbeitswerkzeug braucht Dichte.
   ============================================================================= */
:root {
  /* Marke */
  --green:#1a5c2a; --green-light:#2d8a42; --green-pale:#e8f5ec; --green-dark:#0f3d1a;
  --gold:#c9a253; --gold-pale:#f7efde;

  /* Grundton: gewaehlt am 2026-08-13 aus der Grundton-Leiter (Stufe 3).
     Waermer als Weiss, aber so hell, dass sich die weisse Tabelle noch
     ohne Kontur davon absetzt. */
  --cream:#fcfaf6; --warm:#f6f2ea;

  /* Warmes Schwarz statt neutralem Grau: passt zum Grundton und wirkt
     weniger technisch als reines #1a1a1a. */
  --text:#16180f; --text-light:#5c5f52; --text-muted:#a9ab9f; --text-mid:#8d9083;
  --white:#fff; --red:#a8321f;

  --line:rgba(22,24,15,.10);
  --line-soft:rgba(22,24,15,.055);
  --shadow-sm:0 1px 0 rgba(22,24,15,.05);
  --shadow-md:0 1px 0 rgba(22,24,15,.05), 0 14px 34px -20px rgba(22,24,15,.22);
  --shadow-lg:0 24px 60px -28px rgba(22,24,15,.34);

  /* Radien. Bis Stand 47 waren sie fast eckig (4px) -- mit der dunklen
     Schiene und den weissen Karten wirkte das hart statt sachlich. Jetzt
     eine kleine Leiter: Flaechen 14px, Knoepfe und Felder 8px. */
  --r:8px; --r-sm:6px;

  /* Status-Skala, aus Gruen/Gold/Rot der Marke abgeleitet */
  --st-info:#16606e;       --st-info-bg:#e4f1f3;
  --st-neutral:#5c5f52;    --st-neutral-bg:#eeece6;
  --st-gold:#9a7526;       --st-gold-bg:#f7efde;
  --st-gruen-hell:#226d34; --st-gruen-hell-bg:#e4f2e8;
  --st-amber:#b8791f;      --st-amber-bg:#fbf0dc;
  --st-gruen:#1a5c2a;      --st-gruen-bg:#e8f5ec;
  --st-grau:#8d9083;       --st-grau-bg:#efede7;
  --st-grau-hell:#a9ab9f;  --st-grau-hell-bg:#f4f2ec;
  --alarm:#a8321f;         --alarm-bg:#fbeae6;

  /* Textfarben fuer die Statuspillen. Die --st-Farben sind fuer Punkte und
     Linien gemacht; als Schrift auf ihrem eigenen hellen Grund sind Gold,
     Amber und die beiden Grautoene zu blass (unter 4,5:1). Deshalb je Status
     eine abgedunkelte Schriftfarbe -- der Punkt behaelt die helle. */
  --pt-info:#0f4b57;       --pt-neutral:#44463c;
  --pt-gold:#6b5316;       --pt-gruen-hell:#14521f;
  --pt-amber:#7d5010;      --pt-gruen:#14521f;
  --pt-grau:#44463c;       --pt-grau-hell:#55534c;

  /* Rahmen (Stand 48, Richtung B): dunkle Schiene links, heller Arbeitsgrund,
     weisse Karten darauf. */
  --schiene:#10251a; --schiene-text:rgba(255,255,255,.72); --schiene-aktiv:rgba(255,255,255,.12);
  --flaeche:#f6f5f1; --karte-line:#e7e5e0; --zeile-line:#f2f0eb; --toolbar:#fbfaf8;
  --r-karte:14px; --r-knopf:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* [hidden] setzt display:none nur in der Browser-Voreinstellung. Jede eigene
   display-Regel (grid, flex …) gewinnt dagegen. Deshalb hier einmal zentral,
   sonst versteckt sich .karten oder .filter beim Reiterwechsel nicht. */
[hidden]{display:none!important}
body{
  font-family:'Outfit',sans-serif; font-size:15px; line-height:1.5;
  color:var(--text); background:var(--flaeche); -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select{font-family:inherit;font-size:inherit;color:var(--text)}

/* ---------- Seitenleiste ----------
   Stand 48: eine dunkle Schiene in voller Breite. Vorher war sie eine schmale
   Symbolspalte, die bei Mauskontakt ausfuhr -- das sparte Platz, kostete aber
   bei jedem Wechsel eine Bewegung, und wer die Symbole nicht kannte, musste
   raten. Die Schiene traegt jetzt Namen UND Zahlen: wie viel wo liegt, steht
   da, ohne dass man den Bereich oeffnet. Dunkel ist sie, damit sie als Rahmen
   zurücktritt -- die Arbeit passiert rechts davon auf Weiss.
   Sie bleibt position:fixed, der Inhalt haelt mit padding-left Abstand. */
/* KEIN gap an der Leiste: die Eintraege sind direkte Kinder von <nav>, ein
   gap wirkt damit zwischen jedem einzelnen und reisst die Liste auseinander.
   Die Abstaende setzen deshalb die Teile selbst -- Marke unten, Eintrag zu
   Eintrag zwei Pixel, Fuss per margin-top:auto. */
.seitenleiste{
  position:fixed;left:0;top:0;bottom:0;width:244px;z-index:30;
  background:var(--schiene);color:#fff;
  display:flex;flex-direction:column;padding:20px 12px 16px;overflow-y:auto;
}

.sl-marke{display:flex;align-items:center;gap:10px;padding:2px 10px 0;margin-bottom:20px;color:#fff}
.sl-marke svg{width:28px;height:28px;min-width:28px}
.sl-marke span{font-size:.96rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}

.sl-eintrag{
  display:flex;align-items:center;gap:12px;width:100%;min-height:44px;
  padding:10px 13px;border:none;border-radius:var(--r-knopf);
  background:none;color:var(--schiene-text);font-size:.93rem;font-weight:500;
  text-align:left;white-space:nowrap;transition:background .18s,color .18s;
}
.sl-eintrag + .sl-eintrag{margin-top:2px}
.sl-eintrag svg{width:18px;height:18px;min-width:18px}
.sl-eintrag > span:not(.sl-zahl){overflow:hidden;text-overflow:ellipsis}
.sl-eintrag:hover:not(.aktiv){background:rgba(255,255,255,.07);color:#fff}
.sl-eintrag.aktiv{background:var(--schiene-aktiv);color:#fff;font-weight:600}
.sl-eintrag:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}

/* Die Zahl rechts. Ruhig, solange sie nur zaehlt -- rund und rot erst, wenn
   sie fuer etwas steht, das liegen geblieben ist. */
.sl-zahl{
  margin-left:auto;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
}
.sl-eintrag.aktiv .sl-zahl{color:rgba(255,255,255,.75)}
.sl-zahl.alarm{
  min-width:22px;height:22px;padding:0 7px;border-radius:99px;
  background:var(--alarm);color:#fff;font-size:.76rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.sl-zahl:empty{display:none}

.sl-fuss{margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.sl-eintrag.leise{font-weight:500;font-size:.86rem;color:rgba(255,255,255,.5)}
.sl-eintrag.leise:hover{color:#fff}

/* ---------- Kopfzeile im Inhalt ----------
   Weisse Leiste ueber dem Arbeitsbereich, die beim Blaettern stehen bleibt:
   links Titel und Anzahl, rechts Suche und die eine Handlung des Bereichs. */
.inhalt-kopf{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:13px 30px;background:var(--white);border-bottom:1px solid var(--karte-line);
}
/* Der Chip traegt den Zwischenraum: alles nach ihm steht rechts. Vorher tat
   das der Knopf "Neu anlegen"; seit der Ansichtsschalter daneben steht,
   haetten sich zwei auto-Raender den Platz geteilt und beide standen krumm. */
.prototyp-chip{
  margin-right:auto;
  font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--gold-pale);color:#8a6a20;padding:4px 9px;border-radius:99px;white-space:nowrap;
}
.inhalt-titel{font-family:inherit;font-size:1.25rem;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.inhalt-kopf .aktion{min-height:40px;padding:9px 18px;border-radius:var(--r-knopf);font-weight:600}

/* ---------- Inhalt ---------- */
body{padding-left:244px}
.inhalt{min-height:100vh;display:flex;flex-direction:column}
.inhalt-koerper{
  flex:1;min-width:0;padding:20px 30px 34px;
  display:flex;flex-direction:column;gap:16px;
}

/* ---------- Kennzahlen ----------
   Vier gleichrangige Karten in einer Reihe. Der Handlungsbedarf steht vorn
   und traegt als einzige Karte Farbe -- er ist die Zahl, die zu etwas fuehrt,
   die anderen sind Bestandsangaben. */
.kacheln{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
  gap:12px;padding:0;margin:0;border:none;
}
/* display:contents loest den Behaelter auf: die kleinen Kacheln werden selbst
   Rasterfelder und damit genauso breit wie die grosse. Sonst teilten sich
   alle "ruhigen" Zahlen eine einzige Spalte. */
.kachel-reihe{display:contents}
.kachel-haupt,.kachel{
  min-width:0;text-align:left;
  background:var(--white);border:1px solid var(--karte-line);border-radius:var(--r-karte);
  padding:14px 17px;transition:border-color .18s,box-shadow .18s;
}
.kachel-titel{font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-light)}
.kachel-zahl{
  font-family:inherit;font-size:1.72rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;
  margin-top:3px;font-variant-numeric:tabular-nums;transition:color .2s;
}
.kachel-haupt .kachel-titel{color:var(--text-light);margin-top:0}
.kachel-haupt .kachel-zahl{color:var(--alarm)}
.kachel-sub{font-size:.76rem;color:var(--text-muted);margin-top:2px;line-height:1.4}
.kachel:hover:not([disabled]),.kachel-haupt:hover{border-color:#d7d4cc}
.kachel:hover:not([disabled]) .kachel-zahl{color:var(--green)}
.kachel.aktiv{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.kachel.aktiv .kachel-titel,.kachel.aktiv .kachel-zahl{color:var(--green)}
.kachel-haupt.aktiv{border-color:var(--alarm);box-shadow:inset 0 0 0 1px var(--alarm)}

/* ---------- Filter ----------
   Sitzt als Werkzeugleiste im Kopf der Listenkarte. Die Suche steht nicht
   mehr hier, sondern oben in der Kopfzeile: sie gilt fuer den ganzen Bereich,
   die Filter daneben nur fuer die Liste darunter. */
.filter{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  padding:10px 18px;background:var(--toolbar);border-bottom:1px solid #edebe6;
  border-radius:0;box-shadow:none;margin:0;
}
.suche{position:relative;flex:0 0 260px;min-width:170px}
.suche svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-muted)}
.suche input{
  width:100%;min-height:40px;padding:8px 13px 8px 36px;
  border:1px solid #e0ddd6;border-radius:var(--r-knopf);background:var(--toolbar);
  outline:none;font-size:.9rem;transition:border-color .18s,background .18s;
}
.suche input::placeholder{color:var(--text-muted)}
.suche input:focus{border-color:var(--green);background:var(--white)}
.filter select{
  appearance:none;-webkit-appearance:none;
  padding:6px 22px 6px 0;border:none;border-radius:0;background:none;
  color:var(--text-mid);font-size:.88rem;font-weight:500;cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a9ab9f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;
}
.filter select:hover{color:var(--text)}
.filter select:focus-visible{outline:2px solid var(--green-light);outline-offset:3px}
.schalter{
  display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;
  color:var(--text-light);cursor:pointer;user-select:none;white-space:nowrap;
}
.schalter input{width:16px;height:16px;accent-color:var(--alarm);cursor:pointer}
.treffer{font-size:.8rem;color:var(--text-muted);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Tabelle ----------
   Ein Rahmen um die ganze Liste, nicht einer je Zeile. */
.tabelle-rahmen{
  background:var(--white);border:1px solid var(--karte-line);border-radius:var(--r-karte);
  overflow:hidden;box-shadow:none;
}
.tabelle-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.91rem}
thead th{
  text-align:left;padding:11px 12px;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);background:var(--white);
  border-bottom:1px solid #edebe6;white-space:nowrap;
}
thead th.sortierbar{cursor:pointer;user-select:none}
thead th.sortierbar:hover{color:var(--text)}
thead th .pfeil{opacity:.4;margin-left:3px}
thead th.sortiert .pfeil{opacity:1;color:var(--green)}
tbody tr{border-top:1px solid var(--zeile-line);cursor:pointer;transition:background .13s}
tbody tr:first-child{border-top:none}
tbody tr:hover{background:var(--toolbar)}
tbody tr.handlungsbedarf{background:#fdfbf7}
tbody tr.handlungsbedarf:hover{background:#fbf8f2}
tbody tr.gewaehlt{background:var(--green-pale)}
/* Nichts bricht um: eine Liste, in der jede zweite Zeile doppelt so hoch
   ist, laesst sich nicht ueberfliegen. Der Platz dafuer kommt aus dem
   Zellenrand (13 statt 18 px) -- die Beschriftungen bleiben ganz, "Pflegegrad
   2" heisst in der Tabelle dasselbe wie im Datensatz. */
tbody td{padding:11px 12px;vertical-align:middle;white-space:nowrap}
/* Ausnahme: Zellen mit Merkzetteln duerfen umbrechen. Sie sind die einzigen,
   die beliebig viele Angaben tragen -- die zwangsweise in eine Zeile zu
   pressen schiebt die letzten Spalten aus der Karte. */
tbody td:has(.chip){white-space:normal;min-width:128px}

/* Name mit Kuerzelkreis. Der Kreis ist keine Dekoration: in einer Liste aus
   zwei Dutzend gleich gebauten Zeilen ist er der Anker, an dem das Auge die
   Zeile wiederfindet, zu der es zurueckwollte. */
thead th:first-child,tbody td:first-child{padding-left:18px}
thead th:last-child,tbody td:last-child{padding-right:18px}

.person-zelle{display:flex;align-items:center;gap:12px}
.person-bild{
  width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--green-pale);color:var(--green);
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
}
.person-bild.ruhig{background:#f0eee9;color:var(--text-light)}
.person-text{min-width:0}
.person-text > b{display:block;font-weight:600}

.zelle-name{font-weight:600;white-space:nowrap}
.zelle-name .id{display:block;font-weight:400;font-size:.74rem;color:var(--text-muted);margin-top:2px;font-variant-numeric:tabular-nums}
.zelle-ort{white-space:nowrap}
.zelle-ort .plz{color:var(--text-muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.gedimmt{color:var(--text-muted)}
.null-kunden{color:var(--alarm);font-weight:700}
.spalte-marker{width:3px;padding:0!important}
.marker{width:3px;height:100%;min-height:52px;background:transparent}
tr.handlungsbedarf .marker{background:var(--alarm)}

/* Status als Pille: Punkt, Flaeche und Text. Die Flaeche traegt die Farbe
   sehr hell, der Text eine abgedunkelte Fassung davon (--pt-*), sonst ist
   Gold auf Gold nicht lesbar. Nie Farbe allein -- der Text steht daneben. */
.plakette{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:.79rem;font-weight:600;border-radius:99px;padding:4px 11px;
  background:var(--st-neutral-bg);color:var(--st-neutral);
}
.plakette i{width:6px;height:6px;border-radius:50%;flex:none}
/* Ampel auf den Kapazitaetskarten bleibt eine eigene Form: dort ist sie die
   Ueberschrift des Zustands, nicht eine Zelle unter vielen. */
.ampel{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.chip{
  display:inline-block;background:#f3f2ee;border:none;
  border-radius:99px;padding:3px 9px;font-size:.76rem;font-weight:500;color:var(--text-light);white-space:nowrap;
}
.tage{display:inline-flex;align-items:baseline;gap:5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.95rem}
.tage .einheit{font-size:.76rem;font-weight:500;opacity:.72}
.tage.warnung{color:#8f5d13}
.tage.ueberfaellig{color:var(--alarm)}
.tage.ok{color:var(--text-light);font-weight:500}
.tage.ok .einheit{color:var(--text-muted);opacity:1}

/* Fortschritt zur 70-Stunden-Schwelle */
.stunden{display:flex;align-items:center;gap:8px;min-width:96px}
.stunden-balken{flex:1;height:6px;background:rgba(0,0,0,.07);border-radius:99px;overflow:hidden;min-width:44px}
.stunden-fuellung{height:100%;border-radius:99px}
.stunden-fuellung.laeuft{background:var(--green-light)}
.stunden-fuellung.offen{background:var(--alarm)}
.stunden-fuellung.fertig{background:var(--green)}
.stunden-text{font-size:.83rem;font-weight:600;white-space:nowrap;color:var(--text-light)}
.stunden-text.offen{color:var(--alarm)}

.leer{padding:56px 24px;text-align:center;color:var(--text-muted)}
.leer strong{display:block;font-size:1.05rem;color:var(--text);margin-bottom:5px}

/* ---------- Detailbereich ---------- */
/* Angedockt statt ueberlagert (Stand 48, aus Richtung C): der Datensatz
   steht als eigene Spalte neben der Liste, der Inhalt rueckt dafuer zur
   Seite (body.mit-detail). Beim Verteilen springt man zwischen Liste und
   Datensatz hin und her -- ein Popup, das den Hintergrund verdeckt und jedes
   Mal auf- und zugeht, ist genau dort die groesste Reibung.
   Der Schleier bleibt fuer schmale Fenster: dort ist kein Platz fuer zwei
   Spalten, da legt sich die Spalte wie frueher darueber. */
.schleier{position:fixed;inset:0;background:rgba(15,25,18,.34);opacity:0;pointer-events:none;transition:opacity .25s;z-index:40}
.schleier.offen{opacity:1;pointer-events:auto}
.detail{
  position:fixed;top:0;right:0;bottom:0;width:min(452px,100%);background:#fafaf8;
  border-left:1px solid var(--karte-line);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:50;display:flex;flex-direction:column;
}
.detail.offen{transform:none}
body.mit-detail{padding-right:452px}

/* Ab dieser Breite bleiben Liste und Datensatz nebeneinander stehen: dann
   braucht es keinen Schleier, und der Inhalt darf sichtbar bleiben. */
@media (min-width:1240px){
  .schleier.offen{opacity:0;pointer-events:none}
}
@media (max-width:1239px){
  body.mit-detail{padding-right:0}
  .detail{box-shadow:var(--shadow-lg)}
}
@media (prefers-reduced-motion:reduce){.detail,.schleier{transition:none}}

.detail-kopf{padding:18px 24px 16px;border-bottom:1px solid #eae8e3;background:var(--white);position:relative;flex-shrink:0}
.detail-vorzeile{
  font-size:.655rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);padding-right:40px;
}
.detail-kopf h2{
  font-family:inherit;font-size:1.4rem;font-weight:600;line-height:1.22;
  letter-spacing:-.015em;margin-top:5px;padding-right:40px;
}
.detail-kopf .unterzeile{color:var(--text-mid);font-size:.85rem;margin-top:3px}
.schliessen{
  position:absolute;top:16px;right:20px;width:30px;height:30px;background:none;
  border:1px solid var(--line);border-radius:var(--r);color:var(--text-light);
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.schliessen:hover{border-color:rgba(22,24,15,.28);color:var(--text)}
.schliessen:focus-visible{outline:2px solid var(--green-light);outline-offset:2px}
.kopf-status{display:flex;align-items:center;gap:13px;margin-top:13px;flex-wrap:wrap;font-size:.9rem}
.kopf-status .trenner{width:1px;height:13px;background:rgba(22,24,15,.16)}
.kopf-status .frist{font-size:.82rem;color:var(--text-mid)}

.detail-koerper{overflow-y:auto;padding:18px 24px 30px;flex:1}
.block{margin-bottom:30px}
.block:last-child{margin-bottom:0}
.block-titel{
  font-size:.655rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:0;padding-bottom:11px;border-bottom:1px solid var(--line);
}
.mini-titel{font-size:.78rem;font-weight:600;color:var(--text-light);margin-bottom:6px}

/* Fussnoten stehen unten und leise, nicht zwischen Titel und Inhalt. */
.block-fussnote{
  font-size:.76rem;color:var(--text-muted);line-height:1.55;
  margin-top:18px;padding-top:13px;border-top:1px solid var(--line-soft);
}

.warnkasten{
  background:var(--alarm-bg);border:1px solid rgba(192,57,43,.2);border-radius:var(--r);
  padding:12px 15px;margin-bottom:22px;font-size:.88rem;color:#7d2818;
}
.warnkasten strong{display:block;font-size:.73rem;letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px;color:var(--alarm)}
.warnkasten ul{margin:0;padding-left:17px}
.warnkasten li{margin-bottom:3px;line-height:1.45}
.warnkasten li:last-child{margin-bottom:0}

.feld{margin-bottom:13px}
.feld label{display:block;font-size:.79rem;font-weight:600;color:var(--text-light);margin-bottom:4px}
.feld select,.feld textarea,.feld input:not([type=checkbox]){
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);outline:none;transition:border-color .2s;
  font-family:inherit;font-size:inherit;
}
.feld textarea{resize:vertical;min-height:62px}
.feld select:focus,.feld textarea:focus,.feld input:focus{border-color:var(--green)}
/* Die Browserpruefung faerbt erst nach einem Absendeversuch, nicht beim Tippen. */
.feld input:user-invalid,.feld select:user-invalid{border-color:var(--red)}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.werte{display:grid;grid-template-columns:auto 1fr;font-size:.87rem;align-items:baseline}
.werte dt{color:var(--text-mid);white-space:nowrap;padding:13px 16px 13px 0;border-bottom:1px solid var(--line-soft)}
.werte dd{font-weight:500;text-align:right;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.werte dt:nth-last-of-type(1),.werte dd:nth-last-of-type(1){border-bottom:none}
.werte dd a{color:var(--green);text-decoration:none;font-weight:600}
.werte dd a:hover{text-decoration:underline}

.aktionen{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}
.aktion{
  flex:1 1 auto;background:none;border:1px solid var(--line);border-radius:var(--r);
  padding:11px 15px;font-size:.85rem;font-weight:500;color:var(--text);
  transition:.2s;white-space:nowrap;
}
.aktion:hover:not(:disabled){border-color:var(--green);background:var(--green-pale);color:var(--green-dark)}
.aktion.stark{background:var(--green);border-color:var(--green);color:#fff}
.aktion.stark:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}

.hakenzeile{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:.9rem;cursor:pointer}
.hakenzeile input{width:17px;height:17px;accent-color:var(--green);cursor:pointer}
.hakenzeile.erledigt span{color:var(--text-muted);text-decoration:line-through}

.notiz-neu{display:flex;gap:7px;margin-bottom:13px}
.notiz-neu input{flex:1;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r);outline:none}
.notiz-neu input:focus{border-color:var(--green)}
.notiz-neu button{background:var(--green);color:#fff;border:none;border-radius:var(--r);padding:8px 15px;font-weight:600}
.notiz-neu button:hover{background:var(--green-dark)}
.notiz{background:var(--cream);border-radius:var(--r);padding:10px 13px;margin-bottom:7px;font-size:.89rem}
.notiz .meta{font-size:.76rem;color:var(--text-muted);margin-bottom:3px}
.keine-notizen{color:var(--text-muted);font-size:.88rem;font-style:italic}

.hinweis-freitext{
  background:var(--warm);border-radius:var(--r);padding:16px 18px;
  font-size:.87rem;line-height:1.6;color:var(--text-light);font-style:italic;
}
.fuss{margin-top:auto;padding:14px 0 0;font-size:.8rem;color:var(--text-muted);line-height:1.5}


/* ---------- Kartenraster ----------
   `.karten` ist der Behaelter, in den die Bereiche ohne Tabelle zeichnen. Die
   Kapazitaetskarten, die hier einmal standen, sind seit Stand 47 weg: die
   Seite zeigt Diagramme (siehe ".bz" weiter unten). Das Raster bleibt fuer
   alles andere, was Karten zeichnet. */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px}

.kap-hinweis{
  background:var(--gold-pale);border-radius:var(--r);padding:12px 16px;
  font-size:.86rem;color:#6d5418;line-height:1.5;margin-bottom:18px;
}
.kap-hinweis strong{display:block;margin-bottom:2px}

/* Balkenpaar Nachfrage gegen Angebot im Detailbereich */
.bereich-zeile{margin-bottom:14px}
.bereich-kopf{display:flex;justify-content:space-between;font-size:.87rem;margin-bottom:5px}
.bereich-kopf span:last-child{color:var(--text-muted);font-size:.83rem}
.bereich-balken{display:flex;flex-direction:column;gap:3px}
.bereich-bar{height:9px;border-radius:99px;background:rgba(0,0,0,.06);position:relative;overflow:hidden}
.bereich-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;display:block}
.bereich-bar.nachfrage i{background:var(--st-amber)}
.bereich-bar.angebot i{background:var(--st-gruen)}
.bereich-legende{display:flex;gap:14px;font-size:.78rem;color:var(--text-muted);margin-bottom:10px}
.bereich-legende b{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}

/* ---------- Kandidatenliste im Matching ---------- */
.kandidat{
  border:none;border-bottom:1px solid var(--line-soft);border-radius:0;
  padding:17px 0 16px;margin-bottom:0;background:none;transition:background .2s;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.kandidat:hover{background:#fdfcf9}
.kandidat.zugeordnet{
  background:var(--green-pale);border-bottom:none;border-radius:var(--r);
  padding:15px 17px;margin-top:14px;
}
/* min-width:0 ist noetig, damit die Gruende umbrechen statt den Knopf
   aus der Zeile zu druecken. */
.kandidat-text{min-width:0}
.kandidat-name{font-weight:600;font-size:.92rem}
.kandidat-gruende{font-size:.8rem;color:var(--text-mid);margin-top:4px;line-height:1.5}
.kandidat-gruende .hebt-hervor{color:var(--green);font-weight:600}
.aktion.klein{
  flex:none;padding:7px 14px;font-size:.79rem;font-weight:600;
  color:var(--green);border-color:rgba(26,92,42,.32);
}
.aktion.klein:hover{background:var(--green-pale);border-color:var(--green)}

/* klein UND stark. Ohne diese Regel gewinnt die gruene Schriftfarbe von
   `.aktion.klein` -- sie steht spaeter in der Datei und hat dieselbe
   Spezifitaet wie `.aktion.stark`. Der Text stand dann gruen auf gruen und war
   unsichtbar; am 20.09.2026 im Screenshot aufgefallen. */
.aktion.klein.stark{background:var(--green);border-color:var(--green);color:#fff}
.aktion.klein.stark:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}

.ausgeschlossen{margin-top:12px}
.ausgeschlossen summary{
  cursor:pointer;font-size:.8rem;color:var(--text-mid);font-weight:500;
  padding:14px 0 4px;user-select:none;list-style:none;
  display:flex;align-items:center;gap:10px;
}
.ausgeschlossen summary::-webkit-details-marker{display:none}
.ausgeschlossen summary::before{
  content:'';width:7px;height:7px;flex:none;margin-left:2px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s;
}
.ausgeschlossen[open] summary::before{transform:rotate(45deg)}
.ausgeschlossen summary:hover{color:var(--text)}
.ausgeschlossen[open] summary{margin-bottom:6px}

.rechenweg{background:var(--cream);border-radius:var(--r);padding:13px 16px;font-size:.85rem;line-height:1.6}
.rechenweg code{font-family:'Outfit',sans-serif;font-weight:600;color:var(--green-dark)}
.mini-liste{font-size:.88rem}
.mini-liste div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line-soft)}
.mini-liste div:last-child{border-bottom:none}
.mini-liste .rechts{color:var(--text-muted);white-space:nowrap}

/* Schmale Fenster: die Schiene schrumpft auf ihre Symbole zusammen. Die
   Beschriftungen fallen weg, der rote Zaehler bleibt -- er ist der einzige,
   der zu etwas auffordert. */
@media (max-width:1000px){
  .seitenleiste{width:64px;padding:18px 10px;align-items:center}
  .seitenleiste .sl-marke span,
  .seitenleiste .sl-eintrag > span:not(.sl-zahl),
  .seitenleiste .sl-person-text{display:none}
  .sl-eintrag{justify-content:center;padding:10px;gap:0}
  .sl-zahl{display:none}
  .sl-zahl.alarm{
    display:flex;position:absolute;margin:0;transform:translate(13px,-13px);
    min-width:18px;height:18px;padding:0 5px;font-size:.68rem;
  }
  .sl-eintrag{position:relative}
  .sl-fuss{width:100%}
  body{padding-left:64px}
  .inhalt-kopf{padding:13px 16px}
  .inhalt-koerper{padding:16px 16px 30px}
}

@media (max-width:900px){
  .werte dd{text-align:left}
  .paar{grid-template-columns:1fr}
}

/* --- Anlegen und Bearbeiten -----------------------------------------------
   Stand 36 eine eigene Seite, kein <dialog> mehr: bei rund vierzig Feldern war
   das Popup eine Rolle Papier. Die Feldliste selbst ist unveraendert, deshalb
   bleiben `.neu-koerper` und `.neu-pflicht` -- den Rahmen darum setzt jetzt
   `.seite-*` weiter unten. */
#neuOeffnen{flex:0 0 auto}

.neu-koerper{padding:22px 28px}
.neu-pflicht{margin-right:auto;font-size:.78rem;color:var(--text-muted)}

/* Loeschen: rot, aber erst beim Zeigen -- ein dauerhaft roter Knopf zieht den
   Blick auf die eine Aktion, die man am seltensten will. */
.aktion.gefahr:hover:not(:disabled){border-color:var(--red);background:#fdf1ef;color:var(--red)}

.neu-hinweis{font-size:.8rem;color:var(--text-muted);line-height:1.45;margin:-4px 0 14px}

/* Zwischenueberschrift im Anlegen-Formular. Seit die Kundenaufnahme den
   vollstaendigen Fragebogen enthaelt, sind es rund vierzig Felder -- ohne
   Gliederung ein Teppich, in dem niemand die Versichertennummer wiederfindet. */
.feld-gruppe{
  font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted);margin:22px 0 11px;padding-bottom:7px;
  border-bottom:1px solid var(--line);
}
.feld-gruppe:first-child{margin-top:0}
/* Der Warnkasten sitzt zwischen Feldern und Knopfzeile. */
.seite-formular .warnkasten{margin:0 0 16px}

/* --- Anmeldung ------------------------------------------------------------
   Liegt ueber allem und ist im Markup NICHT versteckt: faellt JavaScript aus,
   bleibt sie stehen, statt den Blick auf Kundendaten freizugeben. */
.anmeldung{
  position:fixed;inset:0;z-index:200;background:var(--warm);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.anmelde-kasten{
  width:100%;max-width:380px;background:var(--white);border-radius:var(--r-karte);
  box-shadow:var(--shadow-lg);padding:34px 32px 28px;
}
/* Wartezustand: bis feststeht, ob eine Sitzung besteht, ist das Formular aus
   dem Weg. Ohne das blitzt es bei jedem Neuladen kurz auf. */
.anmelde-laedt{display:none;align-items:center;gap:11px;color:var(--text-mid);font-size:.9rem;padding:8px 0 4px}
.anmeldung.prueft .anmelde-laedt{display:flex}
.anmeldung.prueft form,
.anmeldung.prueft .warnkasten,
.anmeldung.prueft .anmelde-status{display:none}
.anmelde-rad{
  width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--green);
  animation:anmeldeDreh .8s linear infinite;
}
@keyframes anmeldeDreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.anmelde-rad{animation-duration:2.6s}}

.anmelde-marke{display:flex;align-items:center;gap:9px;margin-bottom:26px}
.anmelde-marke svg{width:28px;height:28px;flex-shrink:0}
.anmelde-marke span{font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.anmelde-kasten h1{font-family:inherit;font-size:1.45rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.anmelde-unter{color:var(--text-mid);font-size:.86rem;margin:5px 0 22px;line-height:1.45}
.anmelde-kasten .aktion{width:100%;margin-top:6px;padding-block:10px}
.anmelde-status{font-size:.82rem;color:var(--text-muted);text-align:center;min-height:1.2em;margin-top:9px}
.anmelde-fuss{font-size:.78rem;color:var(--text-muted);text-align:center;margin-top:16px;line-height:1.45}
/* Meldungen stehen unter dem jeweils sichtbaren Schritt und gelten fuer alle drei. */
.anmelde-kasten .warnkasten{margin:14px 0 0}

/* --- Fehlerband -----------------------------------------------------------
   Ein fehlgeschlagener Schreibvorgang darf nicht still bleiben: sonst glaubt
   man, gespeichert zu haben, und merkt es erst beim naechsten Neuladen. */
.fehlerband{
  /* Ueber der Anmeldeschicht (200): ein Startfehler dahinter waere unsichtbar,
     und genau dann braucht man ihn. */
  position:fixed;top:0;left:0;right:0;z-index:210;
  display:flex;align-items:center;gap:12px;
  background:var(--red);color:#fff;padding:9px 16px;font-size:.85rem;line-height:1.4;
}
.fehlerband button{background:none;border:none;color:#fff;font-size:1.3rem;line-height:1;margin-left:auto;opacity:.8}
.fehlerband button:hover{opacity:1}

/* --- Person und Admin in der Seitenleiste --------------------------------- */

/* Eigene Person unten in der Schiene. Steht auf Dunkel, also helle Schrift
   -- bis Stand 47 war die Leiste weiss, da galt das Gegenteil. */
.sl-person{margin-bottom:2px;color:#fff}
/* Mit .seitenleiste davor, sonst gewinnt die allgemeine Regel fuer
   .konto-kuerzel weiter unten in der Datei -- und die faerbt den Kreis fuer
   Admins gruen, was auf dem dunklen Gruen der Schiene verschwindet. */
.seitenleiste .konto-kuerzel{background:rgba(255,255,255,.16);color:#fff}
.seitenleiste .sl-avatar{
  width:32px;height:32px;min-width:32px;font-size:.72rem;font-style:normal;
}
.sl-person-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sl-person-text b{font-size:.85rem;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis}
.sl-person-text small{font-size:.7rem;font-weight:500;color:rgba(255,255,255,.55);text-transform:none;letter-spacing:0}

/* --- Konten: Werkbank (Entwurf B) -----------------------------------------
   Liste links, dauerhaftes Arbeitsfeld rechts. Rollen aendern und sperren
   passiert oft hintereinander -- ein Dialog dafuer stuende jedes Mal im Weg. */

.konten-kopf{display:flex;align-items:center;gap:28px;flex-wrap:wrap;width:100%}
.konten-summe{display:flex;gap:26px;font-size:.86rem;color:var(--text-light)}
.konten-summe b{font-family:inherit;font-size:1.3rem;font-weight:600;letter-spacing:-.02em;color:var(--text);margin-right:5px}

.konten-warnung{
  display:flex;align-items:flex-start;gap:12px;margin-left:auto;max-width:560px;
  background:var(--st-amber-bg);border-left:3px solid var(--st-amber);
  border-radius:var(--r);padding:12px 16px;
}
.konten-warnung svg{width:17px;height:17px;flex-shrink:0;margin-top:2px;fill:none;
  stroke:var(--st-amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.konten-warnung strong{display:block;font-size:.87rem;color:#8a6a20}
.konten-warnung span{display:block;font-size:.83rem;color:var(--text-light);margin-top:2px;line-height:1.45}

/* .karten ist von Haus aus das Kartenraster der Kapazitaet. Die Konten
   zeichnen etwas anderes hinein, also hier ausdruecklich ausschalten --
   sonst sitzt die ganze Werkbank in einer 288px-Spalte. */
.karten.bereich-konten{display:block}

.konten-split{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:1080px){.konten-split{grid-template-columns:minmax(0,1fr)}}

/* --- linke Spalte --- */
.konten-links{display:flex;flex-direction:column;gap:11px;min-width:0}

.konten-neu{display:flex;align-items:center;justify-content:center;gap:9px;flex:0 0 auto}
.konten-neu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.konten-neu.an{background:var(--green-dark);border-color:var(--green-dark)}

.konten-suche{position:relative}
.konten-suche svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;fill:none;stroke:var(--text-muted);stroke-width:2.5}
.konten-suche input{width:100%;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);padding:9px 12px 9px 34px;font-size:.87rem;outline:none;transition:border-color .2s}
.konten-suche input:focus{border-color:var(--green)}

.konten-liste{background:var(--white);border:1px solid var(--karte-line);border-radius:var(--r-karte);overflow:hidden}
.konten-liste .keine-notizen{padding:22px 16px;text-align:center}

.konto-zeile{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:none;border-left:3px solid transparent;
  border-top:1px solid var(--line-soft);padding:13px 16px;transition:background .13s;
}
.konto-zeile:first-child{border-top:none}
.konto-zeile:hover{background:var(--cream)}
.konto-zeile.an{border-left-color:var(--green);background:var(--green-pale)}
.konto-zeile.gesperrt{opacity:.55}

.konto-kuerzel{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--st-neutral-bg);color:var(--text-light);
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
}
.konto-kuerzel.admin{background:var(--green);color:#fff}
.konto-kuerzel.gross{width:52px;height:52px;font-size:1.05rem}
.konto-kuerzel.neu{background:var(--green-pale);color:var(--green);font-size:1.5rem;font-weight:400}

.konto-wer{min-width:0;flex:1;line-height:1.35}
.konto-name{display:block;font-weight:600;font-size:.91rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.konto-name i{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-muted);margin-left:5px}
.konto-email{display:block;font-size:.78rem;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.konto-rolle{flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.konto-rolle.admin{color:var(--green)}

/* --- rechte Spalte --- */
.konten-panel{background:var(--white);border:1px solid var(--karte-line);border-radius:var(--r-karte);padding:26px 30px 22px;min-width:0}
.konten-panel .block{margin-bottom:26px}
.konten-panel .block:last-child{margin-bottom:0}
.konten-panel .warnkasten,.konten-panel .gutkasten{margin:18px 0 0}

.panel-kopf{display:flex;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.panel-wer{flex:1;min-width:0}
.panel-wer h2{font-family:inherit;font-size:1.35rem;font-weight:600;line-height:1.25;letter-spacing:-.018em}
.panel-email{font-size:.86rem;color:var(--text-light);margin-top:3px;overflow-wrap:anywhere}

.plakette-gesperrt{flex:0 0 auto;font-size:.76rem;font-weight:600;background:var(--st-grau-bg);
  color:var(--st-grau);padding:4px 11px;border-radius:var(--r-sm)}

/* Rollen als erklaerte Karten statt Auswahlliste: man soll sehen, was man
   vergibt, nicht nur wie es heisst. */
.rollen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media (max-width:620px){.rollen{grid-template-columns:minmax(0,1fr)}}

.rollen-karte{
  text-align:left;background:none;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;transition:.2s;display:block;
}
.rollen-karte:hover:not(:disabled):not(.an){border-color:var(--green);background:var(--green-pale)}
.rollen-karte.an{border-color:var(--green);background:var(--green-pale);cursor:default}
.rollen-karte:disabled:not(.an){opacity:.5;cursor:not-allowed}

.rollen-kopf{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.94rem}
.rollen-kopf i{width:15px;height:15px;border-radius:50%;border:1px solid var(--text-muted);flex:0 0 auto}
.rollen-karte.an .rollen-kopf i{border:4px solid var(--green)}
.rollen-text{display:block;font-size:.83rem;color:var(--text-light);margin-top:8px;line-height:1.5}

.konto-hinweis{font-size:.83rem;color:var(--text-muted)}

.panel-fuss{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft)}
.panel-fuss > span{font-size:.83rem;color:var(--text-muted)}
.panel-fuss .aktion{flex:0 0 auto;margin-left:auto}
.panel-fuss .aktion + .aktion{margin-left:0}

.gutkasten{background:var(--green-pale);border-left:3px solid var(--green);border-radius:var(--r);
  padding:12px 16px;font-size:.87rem;color:var(--green-dark);line-height:1.5}

/* --- Mein Board -----------------------------------------------------------
   Erste Seite nach dem Anmelden. Zeigt zuerst das Faellige, nicht alles: eine
   Liste, die auch die ruhigen Faelle nennt, ist nach zwei Wochen so lang wie
   die Gesamttabelle -- und dann schaut niemand mehr hin. */
.karten.bereich-board{display:block}

.board{max-width:900px}
.board .block{margin-bottom:30px}
.board .block:last-child{margin-bottom:0}

.board-gruss{margin-bottom:28px}
.board-gruss h2{font-size:1.45rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.board-gruss p{color:var(--text-light);font-size:.9rem;margin-top:4px}

/* Kontur statt Schatten -- seit Stand 48 tragen alle Flaechen im Werkzeug
   eine Linie, nicht einen Schlagschatten. */
.board-zeile{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:var(--white);border:1px solid var(--karte-line);border-left:3px solid var(--line);
  border-radius:var(--r);box-shadow:none;
  padding:14px 18px;margin-top:9px;transition:.15s;
}
.board-zeile:hover{border-color:#d7d4cc;border-left-color:var(--green)}
.board-zeile.dringend{border-left-color:var(--st-amber);background:var(--white)}
.board-zeile.leise{background:none;border-color:transparent;border-left-color:var(--line-soft)}
.board-zeile.leise:hover{background:var(--white);border-color:var(--karte-line);border-left-color:var(--green)}

.board-wann{
  flex:0 0 128px;font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-muted);
}
.board-wann.spaet{color:var(--alarm)}

.board-text{flex:1;min-width:0;line-height:1.4}
.board-name{display:block;font-weight:600;font-size:.94rem}
.board-grund{display:block;font-size:.83rem;color:var(--text-light);margin-top:2px}

.board-ruhe{
  display:flex;align-items:center;gap:14px;background:var(--green-pale);
  border-radius:var(--r);padding:18px 22px;margin-bottom:30px;
}
.board-ruhe svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--green);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.board-ruhe strong{display:block;font-size:.94rem;color:var(--green-dark)}
.board-ruhe span{display:block;font-size:.85rem;color:var(--text-light);margin-top:2px}

/* Zaehler am Knopf "Nicht erreicht". */
.zaehler{
  font-weight:700;font-size:.78rem;background:var(--st-amber-bg);color:var(--st-amber);
  padding:2px 7px;border-radius:var(--r-sm);margin-left:5px;
}
.telefon-hinweis{font-size:.85rem;color:var(--text-light);margin-bottom:12px;line-height:1.45}

/* --- Erstkontakt-Band -----------------------------------------------------
   Ganz oben im Kundendatensatz. Erste Frage beim Draufschauen ist nicht
   "welchen Status hat der Fall", sondern "muss ich hier etwas tun". */
.kontaktband{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-radius:var(--r);padding:14px 18px;margin-bottom:22px;border-left:3px solid;
}
.kontaktband svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kontaktband-text{flex:1;min-width:160px;line-height:1.4}
.kontaktband-text strong{display:block;font-size:.94rem}
.kontaktband-text span{display:block;font-size:.83rem;color:var(--text-light);margin-top:2px}
.kontaktband .aktion{flex:0 0 auto}

.kontaktband.offen{background:var(--st-neutral-bg);border-left-color:var(--st-neutral);color:var(--text-light)}
.kontaktband.offen .kontaktband-text strong{color:var(--text)}

.kontaktband.rueckruf{background:var(--st-amber-bg);border-left-color:var(--st-amber);color:var(--st-amber)}
.kontaktband.rueckruf .kontaktband-text strong{color:#8a6a20}

.kontaktband.termin{background:var(--st-gruen-bg);border-left-color:var(--st-gruen);color:var(--st-gruen)}
.kontaktband.termin .kontaktband-text strong{color:var(--green-dark)}
/* Ein Termin, der heute ist oder war, faellt aus der ruhigen Farbe heraus. */
.kontaktband.termin.faellig{background:var(--st-amber-bg);border-left-color:var(--st-amber);color:var(--st-amber)}
.kontaktband.termin.faellig .kontaktband-text strong{color:#8a6a20}

.kontaktband-datum{display:flex;align-items:center;gap:9px;margin-top:7px}
.kontaktband-datum span{font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-muted);margin:0}
.kontaktband-datum input{
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:5px 9px;font-family:inherit;font-size:.83rem;color:var(--text);outline:none;
}
.kontaktband-datum input:focus{border-color:var(--green)}

.feld-zusatz{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-muted)}

/* --- Abrechnungsdaten ------------------------------------------------------
   Was fehlt, soll auffallen: ohne diese Angaben laesst sich mit der
   Pflegekasse nicht abrechnen. */
.fehlt{color:var(--st-amber);font-weight:600;font-size:.85rem}
.nummer{font-variant-numeric:tabular-nums;letter-spacing:.02em}

.papiere{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:4px}
.papier{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.papier:last-child{border-bottom:none}
.papier-titel{display:flex;align-items:center;gap:9px;font-size:.89rem;flex:1;min-width:150px}
.papier-titel svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--text-muted);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.papier.liegt-vor .papier-titel svg{stroke:var(--green);stroke-width:2.6}
.papier-wann{font-size:.8rem;color:var(--text-muted);flex:0 0 auto}
.papier.liegt-vor .papier-wann{color:var(--green)}
.papier input[type=date]{
  flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:5px 9px;font-family:inherit;font-size:.82rem;color:var(--text);outline:none;
}
.papier input[type=date]:focus{border-color:var(--green)}

/* --- Zwei-Faktor-Schritte --------------------------------------------------
   Im selben Kasten wie die Anmeldung, damit der Wechsel vom Passwort zum Code
   kein Seitensprung ist. */
.zf-schritte{margin:4px 0 12px 18px;padding:0;font-size:.87rem;color:var(--text-light);line-height:1.5}
.zf-schritte li{margin-bottom:6px;padding-left:3px}

.zf-qr{
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin:4px 0 12px;min-height:212px;
}
.zf-qr img{width:180px;height:180px;display:block}
/* Solange der Code erzeugt wird, kein kaputtes Bild-Symbol zeigen. */
.zf-qr img:not([src]){visibility:hidden}

.zf-manuell{font-size:.82rem;color:var(--text-light);margin-bottom:14px}
.zf-manuell summary{cursor:pointer;color:var(--green)}
.zf-manuell code{
  display:block;margin-top:8px;padding:9px 11px;background:var(--cream);
  border-radius:var(--r);font-size:.82rem;letter-spacing:.06em;word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);
}

/* Sechs Ziffern gross und gesperrt: man tippt sie vom Handy ab und will jede
   einzeln sehen. */
.feld input.zf-code{
  font-size:1.5rem;letter-spacing:.35em;text-align:center;padding:10px 12px;
  font-variant-numeric:tabular-nums;font-weight:600;
}
.feld input.zf-code::placeholder{color:var(--line);letter-spacing:.35em}

.zf-abmelden{
  display:block;width:100%;margin-top:10px;background:none;border:none;
  font-size:.83rem;color:var(--text-muted);padding:4px;
}
.zf-abmelden:hover{color:var(--text-light);text-decoration:underline}

/* 2FA-Stand in der Kontenverwaltung. "Ohne 2FA" faellt in der Liste auf:
   solche Konten kommen an keine Daten, bis die Einrichtung erledigt ist. */
.zf-fehlt{font-weight:600;color:var(--st-amber)}
.zf-stand-zeile{align-items:center}
.zf-stand{
  flex:0 0 auto;font-size:.8rem;font-weight:600;padding:5px 11px;border-radius:var(--r-sm);
  background:var(--st-grau-bg);color:var(--st-grau);
}
.zf-stand.an{background:var(--st-gruen-bg);color:var(--st-gruen)}
.zf-stand.aus{background:var(--st-amber-bg);color:var(--st-amber)}
.zf-stand-zeile .aktion{flex:0 0 auto}

/* --- Anzeigebild ------------------------------------------------------------
   Dieselbe runde Form wie die Initialen, nur mit Foto darin. */
.konto-kuerzel.mit-bild{background:var(--st-neutral-bg);overflow:hidden;padding:0}
.konto-kuerzel img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
i.konto-kuerzel{font-style:normal}

/* --- Mein Profil --------------------------------------------------------- */
.karten.bereich-profil{display:block}
.profil{max-width:760px}
.profil .block{margin-bottom:30px}
.profil > .gutkasten,.profil > .warnkasten{margin-bottom:22px}

.profil-kopf{display:flex;align-items:center;gap:18px}
.profil-kopf h2{font-size:1.45rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.profil-unter{font-size:.88rem;color:var(--text-light);margin-top:3px}
.konto-kuerzel.profil-gross{width:64px;height:64px;font-size:1.3rem}

.profil-bildzeile{display:flex;align-items:flex-start;gap:22px;margin-top:16px;flex-wrap:wrap}
.konto-kuerzel.profil-vorschau{width:96px;height:96px;font-size:1.9rem}
.profil-bildtext{flex:1;min-width:220px}
.profil-bildtext p{font-size:.87rem;color:var(--text-light);line-height:1.5}
.profil-bildtext .aktionen{padding-top:12px}
.profil-bildtext .aktion{flex:0 0 auto}

/* Das Dateifeld selbst ist unsichtbar, der Knopf ist sein Etikett. Es bleibt
   aber per Tastatur erreichbar -- display:none wuerde das verhindern. */
.profil-datei{position:relative;cursor:pointer}
.profil-datei input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.profil-datei:focus-within{outline:2px solid var(--green-dark);outline-offset:2px}

.profil-passwort{margin-top:16px}

/* =============================================================================
   SEITEN MIT EIGENER ADRESSE (Profil, Formular) — Stand 36

   Profil und Formular liefen bis hierher als Popup ueber der Liste. Bei zwei
   Dutzend Feldern liest sich das wie ein Kassenbon: man scrollt, ohne je zu
   sehen, wie viel noch kommt. Als Seite ist der Rahmen der Bildschirm.
   ============================================================================= */
.seite{max-width:900px}

.seite-kopf{margin-bottom:26px}
.seite-zurueck{
  background:none;border:none;padding:4px 0;margin-bottom:14px;cursor:pointer;
  font:inherit;font-size:.85rem;font-weight:600;color:var(--text-light);
}
.seite-zurueck:hover{color:var(--green)}
.seite-vorzeile{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;
}
.seite-name{font-size:1.6rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.seite-unter{color:var(--text-light);font-size:.9rem;margin-top:5px}
.seite-unter a{color:var(--green);text-decoration:none;font-weight:600}
.seite-unter a:hover{text-decoration:underline}
.seite-kopf .kopf-status{margin-top:14px}

/* Der Inhalt steht seit Stand 48 auf einem weissen Bogen: auf dem hellen
   Arbeitsgrund sah die Seite sonst aus wie ein Text ohne Blatt darunter. */
.seite-koerper{
  background:var(--white);border:1px solid var(--karte-line);border-radius:var(--r-karte);
  padding:24px 28px 26px;
}
.seite-koerper .block{margin-bottom:26px}
.seite-koerper .block:last-child{margin-bottom:0}

/* Link von der Schublade oder einer Liste auf ein Profil. */
.seite-link{color:var(--green);text-decoration:none;font-weight:600;white-space:nowrap}
.seite-link:hover{text-decoration:underline}
.detail-vorzeile .seite-link{margin-left:10px;text-transform:none;letter-spacing:0;font-size:.78rem}

/* Formular als Seite: derselbe Feldsatz wie vorher im Dialog, nur breiter. */
.seite-formular .neu-koerper{padding:0}
.seite-fuss{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);margin-top:28px;padding-top:20px;
}
.seite-fuss .neu-pflicht{flex:1;font-size:.8rem;color:var(--text-muted)}

/* ---------- Dateien am Datensatz ----------
   Prototyp: der Inhalt haengt als Data-URL am Datensatz, deshalb die Grenze
   von 1,5 MB in seite-person.js. */
.datei-waehlen{display:block;margin-bottom:14px}
.datei-waehlen input[type=file]{font:inherit;font-size:.85rem;color:var(--text-light)}
.datei-waehlen input[type=file]::file-selector-button{
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;margin-right:10px;
  background:var(--white);color:var(--text);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 14px;
}
.datei-waehlen input[type=file]::file-selector-button:hover{border-color:var(--green);color:var(--green)}

.datei-zeile{
  display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);
}
.datei-zeile:last-of-type{border-bottom:none}
.datei-zeile svg{width:19px;height:19px;flex:none;color:var(--text-muted)}
.datei-text{flex:1;min-width:0}
.datei-text b{display:block;font-size:.9rem;font-weight:600;word-break:break-word}
.datei-text small{display:block;font-size:.78rem;color:var(--text-muted);margin-top:1px}
.datei-zeile a.aktion{text-decoration:none;display:inline-flex;align-items:center}

/* =============================================================================
   ANSICHT: TEAM ODER ALLTAGSHELD:IN — Stand 36
   ============================================================================= */
.ansicht-schalter{display:flex;align-items:center;gap:10px}
.ansicht-titel{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);
}
.ansicht-knoepfe{display:flex;background:var(--warm);border-radius:99px;padding:3px}
.ansicht-knoepfe button{
  font:inherit;font-size:.83rem;font-weight:600;cursor:pointer;
  background:none;border:none;border-radius:99px;padding:6px 14px;color:var(--text-light);
}
.ansicht-knoepfe button.an{background:var(--white);color:var(--green);box-shadow:var(--shadow-sm)}
#ansichtHelfer{
  font:inherit;font-size:.83rem;padding:7px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--white);color:var(--text);max-width:230px;
}

/* =============================================================================
   MEIN BOARD IN DER HELFERANSICHT — Stand 38

   Zwei Spalten: links nur Menschen, rechts alles ueber mich. Vorher stand
   "Mein Einsatz" als Werteliste mitten zwischen zwei Personenlisten -- beim
   Ueberfliegen sah dann jede Zeile aus wie jede andere.
   ============================================================================= */
.hboard{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;max-width:1180px}
.hboard-leer{max-width:640px}
.hboard-gruss{color:var(--text-mid);font-size:.92rem;margin-bottom:22px}

.hboard-block{margin-bottom:30px}
.hboard-block:last-child{margin-bottom:0}
.hboard-block h2{
  display:flex;align-items:baseline;gap:9px;margin-bottom:12px;
  font-size:1.05rem;font-weight:600;letter-spacing:-.01em;
}
.hboard-block h2 span{font-size:.9rem;font-weight:500;color:var(--text-muted)}
.hboard-unter{font-size:.85rem;color:var(--text-mid);margin:-4px 0 12px}
.hboard-nichts{font-size:.9rem;color:var(--text-muted);padding:6px 0}
.hboard-liste{display:flex;flex-direction:column;gap:10px}

.hboard-voll{
  display:block;background:var(--green-pale);border-radius:var(--r);
  padding:16px 20px;font-size:.88rem;color:var(--text-mid);line-height:1.5;
}
.hboard-voll strong{display:block;color:var(--green-dark);font-size:.94rem;margin-bottom:3px}

/* ---------- Eine Zeile, zwei Listen ----------
   Beide Listen bauen gleich: links ein Merkmal, Mitte Name und Fakten, rechts
   die Knoepfe. "Ansehen" und "Annehmen" sind zwei Entscheidungen, deshalb ist
   die Zeile selbst nicht anklickbar -- ein verirrter Klick darf keine Zusage
   sein. */
.hzeile{
  display:flex;align-items:center;gap:16px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 18px;transition:box-shadow .15s;
}
.hzeile:hover{box-shadow:var(--shadow-sm)}

.hzeile-bild{
  flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--green-pale);color:var(--green);
  font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.hzeile-km{flex:none;width:58px;text-align:center}
.hzeile-km b{display:block;font-size:1.15rem;font-weight:700;color:var(--green);line-height:1.1}
.hzeile-km span{display:block;font-size:.74rem;color:var(--text-muted)}

.hzeile-text{flex:1;min-width:0}
.hzeile-text b{display:block;font-size:.98rem;font-weight:600}
.hzeile-text span{display:block;font-size:.84rem;color:var(--text-mid);margin-top:2px}

.hzeile .plakette{flex:none}
.hzeile .aktion{flex:none}
.hzeile-tel{
  flex:none;width:44px;height:44px;border-radius:var(--r-sm);
  background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;
}
.hzeile-tel:hover{background:var(--green-dark)}
.hzeile-tel svg{width:18px;height:18px}

/* ---------- Die rechte Spalte ---------- */
.hboard-neben{display:flex;flex-direction:column;gap:16px;position:sticky;top:22px}
.hboard-karte{background:var(--white);border:1px solid var(--karte-line);border-radius:var(--r-karte);padding:20px}
.hboard-karte-titel{
  font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:12px;
}
.hboard-karte-titel.hell{color:rgba(255,255,255,.78)}
.hboard-breit{width:100%;justify-content:center;margin-top:16px}

/* Kapazitaet als Ring: "4 von 9" liest im Vorbeigehen niemand. Der gefuellte
   Teil ist der verplante, gezeichnet mit conic-gradient -- kein Bild, keine
   Bibliothek. */
.hboard-karte.kapazitaet{background:var(--green);border-color:var(--green);color:#fff}
.kap-zeile{display:flex;align-items:center;gap:16px}
.kap-ring{flex:none;width:86px;height:86px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.kap-mitte{
  width:62px;height:62px;border-radius:50%;background:var(--green);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.kap-mitte b{font-size:1.1rem;font-weight:700;line-height:1}
.kap-mitte span{font-size:.72rem;color:rgba(255,255,255,.8);margin-top:1px}
.kap-zeile p{font-size:.87rem;line-height:1.45;color:rgba(255,255,255,.88)}

.hboard-karte.wunsch{background:var(--st-gold-bg);border-color:transparent}
.hboard-karte.wunsch .hboard-karte-titel{color:#6b5316}
.hboard-karte.wunsch p{font-size:.86rem;color:#6b5316;line-height:1.5}

/* Routenlink in der Zeile: Text neben dem Symbol, sonst raet man, wofuer die
   Nadel steht. */
.hzeile-route{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:.83rem;font-weight:600;color:var(--green);text-decoration:none;
  padding:6px 4px;white-space:nowrap;
}
.hzeile-route:hover{text-decoration:underline}
.hzeile-route svg{width:15px;height:15px}

/* ---------- Rückfrage vor dem Übernehmen ----------
   Escape, Fokusfang und der Schleier kommen vom <dialog> selbst. */
.hb-dialog{
  width:min(440px,calc(100vw - 32px));padding:26px 28px 22px;
  border:none;border-radius:var(--r);background:var(--white);color:var(--text);
  box-shadow:var(--shadow-lg);
}
.hb-dialog::backdrop{background:rgba(15,25,18,.34)}
.hb-dialog h2{font-size:1.2rem;font-weight:600;letter-spacing:-.015em;margin-bottom:14px}
.hb-dialog .werte{margin-bottom:4px}
.hb-dialog-route{margin-top:12px}
.hb-dialog-hinweis{font-size:.85rem;color:var(--text-mid);line-height:1.5;margin-top:12px}
.hb-dialog-fuss{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}

/* Schmaler Bildschirm: die Nebenspalte wandert unter die Listen. */
@media (max-width:1080px){
  .hboard{grid-template-columns:1fr}
  .hboard-neben{position:static}
}
@media (max-width:640px){
  .hzeile{flex-wrap:wrap;gap:12px}
  .hzeile-text{flex:1 1 100%;order:3}
  .hzeile .aktion,.hzeile-tel{order:4}
}

/* =============================================================================
   POPUP UND PROFIL — Stand 41

   Das Popup beantwortet "wer kuemmert sich, was ist der naechste Schritt", das
   Profil zeigt den ganzen Datensatz. Vorher zeigten beide dasselbe.
   ============================================================================= */

/* Abschnittsueberschrift auf der Profilseite. Das Profil ist lang; ohne
   Zwischenschritte ist es ein Teppich. */
.profil-abschnitt{
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-muted);margin:30px 0 12px;padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.profil-abschnitt:first-child{margin-top:0}

/* Status und Zuständigkeit als Leiste unter dem Kopf: zwei Entscheidungen,
   die keine Überschrift brauchen. Die Beschriftungen stehen als aria-label am
   Feld -- gelesen wird hier der Inhalt, nicht der Feldname. */
.karte-leiste{display:flex;gap:12px;margin-bottom:20px}
.leiste-feld{flex:1;min-width:0;display:block}
.leiste-feld > span{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:5px;
}
.karte-leiste select{width:100%}

/* Weg vom Popup in den ganzen Datensatz. */
.detail-profil{
  display:inline-block;margin-top:4px;font-size:.88rem;font-weight:600;
  color:var(--green);text-decoration:none;
}
.detail-profil:hover{text-decoration:underline}

/* Merkzettel an einem Vorschlag: was fuer ihn spricht, und in Gold, was
   dagegen. Eine Liste, die nur Vorteile nennt, ist eine Empfehlung und keine
   Entscheidungsgrundlage. */
/* `.chip` selbst steht weiter oben und wird auch anderswo benutzt -- hier
   kommen nur der Behaelter und die zwei Faerbungen dazu. */
.kandidat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.kandidat-chips .chip{border-radius:99px;padding:3px 9px}
.chip.gut{background:var(--green-pale);border-color:transparent;color:var(--green-dark);font-weight:600}
.chip.warn{background:var(--st-gold-bg);border-color:transparent;color:#6b5316}

/* Zweite Zeile in einer Tabellenzelle: Ort unter dem Namen, E-Mail unter der
   Telefonnummer. Die Uebersicht der angefangenen Anmeldungen lebt davon --
   dort zaehlt der Kontakt, und der braucht zwei Zeilen. */
.zelle-unter{display:block;font-size:.78rem;color:var(--text-mid);margin-top:2px;font-weight:400}
.zelle-unter.gedimmt{color:var(--text-muted)}
td a{color:var(--green);font-weight:500;text-decoration:none}
td a:hover{text-decoration:underline}

/* =============================================================================
   PROFIL DER ALLTAGSHELD:INNEN — Stand 37

   Arbeitstage und Zeiten als Schaltflaechen statt als Kaestchenliste: das
   Ganze wird am Handy angetippt, und ein 13-Pixel-Kaestchen ist dafuer kein
   Ziel, sondern ein Gluecksspiel.
   ============================================================================= */
.hp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hp-chip{
  font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;
  background:var(--white);color:var(--text);border:1px solid var(--line);
  border-radius:99px;padding:9px 16px;transition:.15s;
}
.hp-chip:hover{border-color:var(--green);color:var(--green)}
.hp-chip.an{background:var(--green);border-color:var(--green);color:#fff}
.hp-chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* Ueberschrift einer Frage, die keine <label> hat, weil mehrere Flaechen
   dazugehoeren. */
.feld-titel{display:block;font-weight:600;font-size:.9rem;margin-bottom:2px}

/* Der offene Aenderungswunsch im Datensatz: gold umrandet, weil er eine
   Entscheidung verlangt und keine Angabe ist. */
.wunsch-block{border-left:3px solid var(--st-gold);padding-left:16px}

/* =============================================================================
   BEWERBUNGEN AUF EINE ANFRAGE — Stand 44
   ============================================================================= */

/* Der Block im Datensatz: da hat jemand die Hand gehoben und wartet. */
.bewerbungen-block{border-left:3px solid var(--green);padding-left:16px}

/* Eine ausgeschriebene Anfrage in der Helferansicht -- seit einer Woche offen. */
.hzeile.dringend{border-color:var(--st-gold)}
.marke-dringend{
  display:inline-block;margin-left:8px;font-size:.7rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;vertical-align:1px;
  background:var(--st-gold-bg);color:#6b5316;border-radius:99px;padding:2px 8px;
}
.hzeile-beworben{
  flex:none;font-size:.8rem;font-weight:600;color:var(--green);
  background:var(--green-pale);border-radius:99px;padding:5px 12px;
}

/* Die eigenen Bewerbungen in der Nebenspalte. */
.bewerbung-zeile{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.bewerbung-zeile:last-child{border-bottom:none}
.bewerbung-zeile b{display:block;font-size:.9rem;font-weight:600}
.bewerbung-zeile span{display:block;font-size:.8rem;color:var(--text-mid);margin-top:2px}
.bewerbung-zeile.gut b{color:var(--green-dark)}
.bewerbung-zeile.weg b,.bewerbung-zeile.weg span{color:var(--text-muted)}

/* =============================================================================
   KAPAZITÄT: DREI ANSICHTEN MIT DIAGRAMMEN — Stand 47

   Balken aus CSS, keine Bibliothek. Eine Farbe je Aussage: Grün ist Angebot
   (Stunden, die es gibt), Gold ist Nachfrage (Stunden, die gesucht werden),
   Rot bleibt der Ampel vorbehalten. Neben jedem Balken steht die Zahl — die
   Grafik ordnet ein, gelesen wird die Zahl.
   ============================================================================= */
.karten.bereich-kapazitaet{display:block}
.kap-seite{max-width:960px}

/* Der Umschalter oben. Gleiche Form wie der Ansichtsschalter in der Kopfzeile,
   damit "hier wird umgeschaltet" nur einmal gelernt werden muss. */
.kap-schalter{display:inline-flex;background:var(--warm);border-radius:99px;padding:3px;margin-bottom:16px}
.kap-schalter button{
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
  background:none;border:none;border-radius:99px;padding:8px 18px;color:var(--text-light);
}
.kap-schalter button:hover{color:var(--text)}
.kap-schalter button.an{background:var(--white);color:var(--green);box-shadow:var(--shadow-sm)}

.kap-block{
  background:var(--white);border:1px solid var(--karte-line);border-radius:var(--r-karte);
  padding:18px 20px 20px;margin-bottom:16px;
}
.kap-block:last-child{margin-bottom:0}
.kap-block h2{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:1.02rem;font-weight:600;letter-spacing:-.01em;margin-bottom:14px;
}
.kap-block h2 small{font-size:.84rem;font-weight:400;color:var(--text-muted)}

/* ---------- Eine Balkenzeile ----------
   Beschriftung, Spur, Zahl. Die Spur ist das Ganze, der Füllstand der Wert.
   Alle Zeilen eines Diagramms teilen dieselbe Spurbreite, sonst vergleicht
   man Äpfel mit Birnen. */
.kap-balken{display:flex;flex-direction:column;gap:2px}
.bz{
  display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(90px,2fr) minmax(130px,auto);
  align-items:center;gap:16px;width:100%;text-align:left;
  background:none;border:none;font:inherit;padding:9px 10px;border-radius:var(--r);
}
button.bz{cursor:pointer}
button.bz:hover{background:var(--cream)}
button.bz:focus-visible{outline:2px solid var(--green);outline-offset:1px}

.bz-name{font-size:.92rem;font-weight:600;min-width:0}
.bz-name small{display:block;font-size:.78rem;font-weight:400;color:var(--text-mid);margin-top:1px}
.bz-name .ampel{margin-left:4px;vertical-align:1px}

/* Die Spur: dünn, abgerundet, und der Füllstand sitzt am linken Rand. */
.bz-spur{display:block;height:10px;border-radius:3px;background:var(--warm);overflow:hidden}
.bz-spur i{display:block;height:100%;border-radius:3px;min-width:3px}
.bz-spur i.angebot{background:var(--green)}
.bz-spur i.nachfrage{background:var(--gold)}

.bz-wert{
  font-size:.88rem;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.bz-wert small{font-weight:400;color:var(--text-muted);margin-left:5px}
.bz-wert small.spaet{color:var(--alarm)}
.bz-wert small.offen{color:var(--st-gold)}

/* ---------- Die Liste "Am längsten offen" ---------- */
.kap-liste{display:flex;flex-direction:column;gap:9px}
.kap-fall{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 18px;font:inherit;transition:box-shadow .15s;
}
.kap-fall:hover{box-shadow:var(--shadow-sm)}
.kap-fall-tage{
  flex:none;width:62px;text-align:center;font-size:1.15rem;font-weight:700;
  color:var(--green);font-variant-numeric:tabular-nums;
}
.kap-fall-tage.spaet{color:var(--alarm)}
.kap-fall-tage small{display:block;font-size:.72rem;font-weight:500;color:var(--text-muted)}
.kap-fall-text{flex:1;min-width:0}
.kap-fall-text b{display:block;font-size:.96rem;font-weight:600}
.kap-fall-text span{display:block;font-size:.83rem;color:var(--text-mid);margin-top:2px}
.kap-fall .chip{flex:none}

.kap-hinweis.gold{background:var(--st-gold-bg);border-color:transparent;color:#5a4520}

@media (max-width:760px){
  .bz{grid-template-columns:1fr auto;gap:8px 12px}
  .bz-spur{grid-column:1/-1;order:3}
  .bz-wert{text-align:right}
}