/* Ergänzungen zum Familien-Stil (familie/familie.css) für das Betreuer-Portal */
.status{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.8rem;font-weight:700;background:#243052;color:#c9d2e4}
.status.gruen{background:rgba(127,208,143,.16);color:#7fd08f}
.status.gold{background:rgba(233,192,90,.16);color:#e9c05a}
.status.rot{background:rgba(232,120,120,.16);color:#f0a0a0}
html[data-thema="hell"] .status{background:#e6e2d8;color:#3a4256}
html[data-thema="hell"] .status.gruen{color:#2f7a3f}
html[data-thema="hell"] .status.gold{color:#8a6420}
.feld input[type=file]{padding:.6rem;font-size:.95rem}
.feld .fehler,.fehler{color:#f0a0a0;font-size:.9rem;margin-top:.2rem}
.ankreuzen{display:flex;gap:.6rem;align-items:flex-start;margin:.5rem 0}
.ankreuzen input{width:1.3rem;height:1.3rem;margin-top:.15rem;flex:none}
.liste-zeile{display:flex;justify-content:space-between;gap:.8rem;align-items:center;padding:.7rem 0;border-top:1px solid rgba(255,255,255,.08)}
.liste-zeile:first-of-type{border-top:0}
.liste-zeile .wer{font-weight:700}
.liste-zeile .knopf{white-space:nowrap}
.signatur-rahmen{position:relative;background:#fff;border-radius:12px;height:190px;margin:.6rem 0;touch-action:none}
.signatur-rahmen canvas{width:100%;height:100%;display:block;border-radius:12px}
.signatur-rahmen .linie{position:absolute;left:1rem;right:1rem;bottom:2.2rem;border-top:1px dashed #8c94a6;color:#8c94a6;font-size:.75rem;padding-top:.2rem;pointer-events:none}
.knopfreihe{display:flex;gap:.6rem}
.knopfreihe>*{flex:1}
.iban{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:.03em}
.beleg-bild{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:10px;background:#0b111e;margin:.5rem 0}
.ausweis-bild{display:block;width:100%;border-radius:10px;margin:.5rem 0}
.blind{text-align:center;padding:1.4rem 1rem}
.blind .gross{font-size:2.4rem}
.kassen{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
form.inline{display:inline}
textarea{width:100%;min-height:4.5rem;font:inherit;border-radius:10px;padding:.6rem}

/* ------------------------------------------------------------- Corporate Design v1 (Nachtblau und Gold)
   Farben exakt aus dem CI: Gold #C69829, Gold hell #E9C05A, Gold dunkel #8A6420, Champagner #F6E7C1,
   Nachtblau #15233E, Mitternacht #0A1020, Papierweiß #F8F6F1, Text #1D2433. Goldverlauf 100° für Knöpfe und Goldlinie. */
:root {
  --ci-gold: #c69829; --ci-gold-hell: #e9c05a; --ci-gold-dunkel: #8a6420; --ci-champagner: #f6e7c1;
  --ci-nachtblau: #15233e; --ci-mitternacht: #0a1020; --ci-papier: #f8f6f1; --ci-text: #1d2433;
  --ci-verlauf: linear-gradient(100deg, #8a6420 0%, #c69829 22%, #f6e7c1 46%, #e9c05a 56%, #c69829 76%, #8a6420 100%);
  --ci-goldlinie: linear-gradient(90deg, #8a6420 0%, #c69829 18%, #f6e7c1 46%, #e9c05a 54%, #c69829 82%, #8a6420 100%);
  --bg: var(--ci-nachtblau); --surface: #1c2d4d; --surface-2: #22365c; --line: rgba(198,152,41,.28);
  --gold: var(--ci-gold); --gold-licht: var(--ci-gold-hell); --gold-hell: var(--ci-champagner); --auf-gold: var(--ci-mitternacht);
  --fg: #ece8de; --stark: var(--ci-papier); --muted: #b3b8c6; --info-bg: #1b2c4c; --feld: #0f1a30; --feld-linie: rgba(198,152,41,.4);
}
html, body { background: var(--ci-nachtblau); }
/* Kopf: Nachtblau mit Goldlinie darunter */
.kopf { background: linear-gradient(180deg, var(--ci-mitternacht), var(--ci-nachtblau)); border-bottom: 0; position: sticky; }
.kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--ci-goldlinie); }
.kopf .t { color: var(--ci-gold-hell); font-weight: 700; }
.kopf .s { color: var(--ci-champagner); opacity: .85; }
.kopf form button, .thema-knopf { border-color: rgba(246,231,193,.35); color: var(--ci-champagner); }
main { padding-top: 1.1rem; }
h1, h2, h3 { color: var(--ci-gold-hell); font-weight: 700; }
/* Karten: Nachtblau, feiner Goldrand, Überschrift in Gold */
.karte { background: #1c2d4d; border: 1px solid rgba(198,152,41,.3); border-radius: 12px; }
.label { color: var(--ci-gold-hell); letter-spacing: .15em; }
.karte .label { padding-bottom: .45rem; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #c69829, rgba(198,152,41,0)) 1; }
.liste-zeile { border-top-color: rgba(198,152,41,.18); }
/* Runde Knöpfe: Hauptknopf im Goldverlauf, Nebenknopf mit Goldrand */
.knopf { border-radius: 999px; border: 1.5px solid var(--ci-gold); background: transparent; color: var(--ci-gold-hell); font-weight: 700; }
.knopf.gold, .knopf.haupt { background: var(--ci-verlauf); border: 0; color: var(--ci-mitternacht); }
/* Hinweise: Gold statt Rot/Blau – Rot nur bei echten Fehlern */
.hinweis.wichtig { background: rgba(198,152,41,.12); border-left: 3px solid var(--ci-gold); }
.hinweis.wichtig b { color: var(--ci-gold-hell); }
.hinweis.info { background: #22365c; border-left: 3px solid rgba(246,231,193,.5); }
.meldung { background: #22365c; border-left: 3px solid var(--ci-gold); }
/* Datum-Kachel, Status, Menü unten */
.datum { background: var(--ci-nachtblau); border: 1px solid rgba(198,152,41,.3); }
.datum b { color: var(--ci-gold-hell); }
.status.gold { background: rgba(198,152,41,.18); color: var(--ci-gold-hell); }
.reiter { background: rgba(10,16,32,.97); border-top: 0; }
.reiter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ci-goldlinie); }
.reiter a { color: #9aa3b8; }
.reiter a.an { color: var(--ci-gold-hell); }
.reiter .punkt { background: var(--ci-gold-hell); box-shadow: 0 0 0 2px var(--ci-mitternacht); }
input, select, textarea { border-radius: 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ci-gold); outline-offset: 1px; }

/* Hell: Papierweiß, Text #1D2433, Gold dunkel auf Weiß, Kopf bleibt Nachtblau */
html[data-thema="hell"] {
  --bg: var(--ci-papier); --surface: #fff; --surface-2: var(--ci-papier); --line: #e6dcc3; --fg: var(--ci-text);
  --stark: var(--ci-nachtblau); --muted: #5f6676; --gold: var(--ci-gold-dunkel); --gold-licht: var(--ci-gold-dunkel);
  --feld: #fff; --feld-linie: #d8c9a3; --info-bg: #eef1f6;
}
html[data-thema="hell"], html[data-thema="hell"] body { background: var(--ci-papier); }
html[data-thema="hell"] .kopf { background: var(--ci-nachtblau); border-bottom: 0; }
html[data-thema="hell"] h1, html[data-thema="hell"] h2, html[data-thema="hell"] h3 { color: var(--ci-nachtblau); }
html[data-thema="hell"] .karte { background: #fff; border-color: #e6dcc3; }
html[data-thema="hell"] .label { color: var(--ci-gold-dunkel); }
html[data-thema="hell"] .knopf { color: var(--ci-gold-dunkel); border-color: var(--ci-gold); }
html[data-thema="hell"] .knopf.gold, html[data-thema="hell"] .knopf.haupt { color: var(--ci-mitternacht); }
html[data-thema="hell"] .hinweis.wichtig { background: #fbf4e2; }
html[data-thema="hell"] .hinweis.wichtig b { color: var(--ci-gold-dunkel); }
html[data-thema="hell"] .hinweis.info, html[data-thema="hell"] .meldung { background: #eef1f6; }
html[data-thema="hell"] .datum { background: var(--ci-papier); border-color: #e6dcc3; }
html[data-thema="hell"] .datum b, html[data-thema="hell"] .status.gold { color: var(--ci-gold-dunkel); }
html[data-thema="hell"] .reiter { background: rgba(255,255,255,.97); }
html[data-thema="hell"] .reiter a.an { color: var(--ci-gold-dunkel); }
html[data-thema="hell"] .liste-zeile { border-top-color: #eee5cf; }
.karte .label + .termin, .karte .label + .liste-zeile { border-top: 0; }
.termin { border-top-color: rgba(198,152,41,.18); }
.karte .label, .ansprech .label { color: var(--ci-gold-hell); }
html[data-thema="hell"] .karte .label, html[data-thema="hell"] .ansprech .label { color: var(--ci-gold-dunkel); }
html[data-thema="hell"] .termin { border-top-color: #eee5cf; }
input[type=checkbox], input[type=radio] { accent-color: var(--ci-gold); }