/* ── Familien-Dashboard (Wand-Anzeige /anzeige und PC /familie): 1920×1080-Bühne, per JS (rothenFitStage) eingepasst ── */
.fd-stage { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #F3F5F7; --fd-acc: #5E2B6E; --fd-acc-soft: #F1E9F4; --fd-line: #E3E7EB; --fd-muted: #5B6875; }
.fd { position: absolute; left: var(--fd-x, 0); top: var(--fd-y, 0); width: var(--fd-w, 1920px); height: var(--fd-h, 1080px); transform: scale(var(--fd-scale, 1)); transform-origin: 0 0;
      box-sizing: border-box; padding: 24px 36px 14px; display: flex; flex-direction: column; gap: 16px; color: #15202B; line-height: 1.4;
      font-family: var(--rothn-font), system-ui, sans-serif; transition: filter .4s; }
.fd-stage.grau .fd { filter: grayscale(1) brightness(.72) contrast(.9); }
.fd *, .fd *::before, .fd *::after { box-sizing: border-box; }
.fd button { font: inherit; color: inherit; }
.fd a { color: inherit; text-decoration: none; }
.fd-karte, .fd-spalte, .fd-kind, .fd-wetter, .fd-alle { background: #fff; border-radius: 22px; box-shadow: 0 1px 2px rgba(21,32,43,.06), 0 0 0 1px rgba(21,32,43,.05); }

.fd-kopf { display: flex; align-items: center; gap: 36px; padding: 4px 4px 0; }
.fd-zurueck { width: 60px; height: 60px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 1px 2px rgba(21,32,43,.06), 0 0 0 1px rgba(21,32,43,.05); }
.fd-logo { height: 76px; width: auto; display: block; }
.fd-datum { flex: 1; min-width: 0; }
.fd-tag { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.fd-kw { font-size: 18px; font-weight: 600; color: var(--fd-muted); }
.fd-wetter { display: flex; align-items: center; gap: 22px; padding: 10px 22px; border-radius: 20px; }
.fd-wetter > span:nth-child(2) { display: flex; flex-direction: column; }
.fd-wetter-jetzt { display: flex; }
.fd-wetter-temp { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.fd-wetter-info { font-size: 15px; color: var(--fd-muted); white-space: nowrap; }
.fd-wetter-tage { display: flex; gap: 10px; padding-left: 20px; border-left: 1px solid var(--fd-line); }
.fd-wetter-tag { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; }
.fd-wetter-tag .wd { font-size: 15px; font-weight: 700; color: var(--fd-muted); }
.fd-wetter-tag .mm { font-size: 16px; font-weight: 700; }
.fd-wetter-tag small { color: var(--fd-muted); font-weight: 500; font-size: 16px; }
.fd-uhr { font-size: 80px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; padding-left: 36px; border-left: 1px solid var(--fd-line); }

.fd-haupt { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 20px; }
.fd-links { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.fd-leiste { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.fd-blaettern { display: flex; align-items: center; gap: 12px; }
.fd-pfeil { width: 52px; height: 52px; border-radius: 50%; border: 1px solid #DDE2E7; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fd-pfeil:disabled { opacity: .35; cursor: default; }
.fd-wochentitel { min-width: 270px; }
.fd-wochentitel h2 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.1; }
.fd-wochentitel div { font-size: 15px; font-weight: 600; color: var(--fd-muted); }
.fd-filter { display: flex; align-items: center; gap: 10px; }
.fd-filter .lbl { font-size: 16px; font-weight: 700; color: var(--fd-muted); margin-right: 4px; }
.fd-alle { height: 56px; padding: 0 24px; border-radius: 28px; border: 0; font-size: 18px; font-weight: 800; cursor: pointer; }
.fd-alle.an { background: var(--fd-acc); color: #fff; }
.fd-logo-btn { border: 0; background: none; padding: 0; cursor: pointer; flex: none; }
.fd-art { width: 52px; height: 52px; border-radius: 50%; border: 3px solid transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; box-shadow: 0 1px 2px rgba(21,32,43,.06), 0 0 0 1px rgba(21,32,43,.08); }
.fd .fd-art.termine { color: #1D4ED8; } .fd .fd-art.pruefungen { color: #B42318; } .fd .fd-art.aufgaben { color: #1D4ED8; }
.fd .fd-art.einkauf { color: #15803D; } .fd .fd-art.ideen { color: #B45309; }
.fd-art.an { border-color: #15202B; background: #F3F5F7; }
.fd-trenner { width: 1px; height: 40px; background: var(--fd-line); margin: 0 4px; }
.fd-person { width: 56px; height: 56px; border-radius: 50%; border: 4px solid transparent; font-size: 19px; font-weight: 800; cursor: pointer; }
.fd-person.an { border-color: #15202B; }

.fd-woche { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.fd-spalte { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow: hidden; }
.fd-spalte.heute { box-shadow: 0 0 0 3px var(--fd-acc); }
.fd-spaltenkopf { display: flex; align-items: baseline; gap: 7px; padding: 6px 9px; border-radius: 10px; white-space: nowrap; overflow: hidden; }
.fd-spaltenkopf .t { font-size: 19px; font-weight: 800; text-transform: capitalize; }
.fd-spaltenkopf .d { font-size: 15px; font-weight: 600; opacity: .8; }
.fd-spalte.heute .fd-spaltenkopf { background: var(--fd-acc); color: #fff; }
.fd-termin { border-radius: 12px; padding: 6px 9px 7px; display: flex; flex-direction: column; gap: 3px; transition: opacity .2s, filter .2s; }
.fd-termin.pruef { background: #FFF6E5; }
.fd-termin .z { display: flex; align-items: center; gap: 5px; }
.fd-termin .zeit { font-size: 14px; font-weight: 600; color: var(--fd-muted); font-variant-numeric: tabular-nums; margin-left: 2px; }
.fd-termin .pl { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #B45309; }
.fd-termin .titel { font-size: 17px; font-weight: 700; line-height: 1.18; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere;
                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-chip { border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; line-height: 1; }
.fd-feld { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 13px; font-weight: 800; transition: opacity .2s, filter .2s; }
.fd-feld.mini { width: 18px; height: 18px; border: 2px solid var(--fd-muted); border-radius: 5px; margin-left: 6px; }
.fd-mehr { font-size: 14px; font-weight: 700; color: var(--fd-muted); padding: 0 4px; }
.fd-leer { font-size: 15px; color: var(--fd-muted); padding: 4px 2px; }
.fd .aus { opacity: .22; filter: grayscale(1); }

.fd-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fd-karte { padding: 14px 18px; min-width: 0; }
.fd-karten-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fd-k-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; }
.fd-k-ico.aufgaben { background: #E6EEFB; color: #1D4ED8; }
.fd-k-ico.einkauf { background: #E7F5E9; color: #15803D; }
.fd-k-ico.ideen { background: #FFF1DC; color: #B45309; }
.fd-k-titel { margin: 0; font-size: 20px; font-weight: 800; flex: 1; }
.fd-pille { height: 26px; padding: 0 10px; border-radius: 13px; background: var(--fd-acc-soft); color: var(--fd-acc); font-size: 13px; font-weight: 700; display: flex; align-items: center; white-space: nowrap; }
.fd-plus { width: 48px; height: 48px; border-radius: 14px; border: 0; flex: none; display: flex; align-items: center; justify-content: center; background: var(--fd-acc); cursor: pointer; }
.fd .fd-plus { color: #fff; }
.fd-zeile { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--fd-line); font-size: 17px; transition: opacity .2s, filter .2s; }
.fd-zeile .txt { flex: 1; min-width: 0; font-weight: 600; line-height: 1.25; hyphens: auto; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-zeile .meta { font-weight: 700; white-space: nowrap; color: var(--fd-muted); }
.fd-daumen { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; color: var(--fd-muted); }
.fd-daumen.plus { color: #15803D; }
.fd-ek-gruppe { border-top: 1px solid var(--fd-line); padding: 6px 0 2px; }
.fd-ek-gruppe .n { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.fd-ek-gruppe .anz { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #E6EEFB; color: #1D4ED8; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.fd-ek-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.fd-ek { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 0; }
.fd-ek .txt { min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.fd-ek .ges { display: block; font-size: 13px; font-weight: 600; color: var(--fd-muted); }
.fd-ek-check { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #C9D2DA; background: #fff; flex: none; cursor: pointer; padding: 0; }
.fd-ek-punkt { width: 10px; height: 10px; border-radius: 50%; background: #15202B; flex: none; margin: 0 4px; }
.fd-ek-check:hover { border-color: #15803D; background: #E7F5E9; }
.fd-ek-anz { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 7px; background: #E7F5E9; color: #166534; font-size: 15px; font-weight: 800; }

.fd-ausblick { padding: 12px 22px 10px; }
.fd-ausblick-kopf { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 6px; font-size: 15px; color: var(--fd-muted); }
.fd-ausblick-kopf h2 { margin: 0; font-size: 22px; font-weight: 800; color: #15202B; }
.fd-ausblick-kopf .sp { flex: 1; }
.fd-ausblick-kopf .leg { display: flex; align-items: center; gap: 7px; }
.fd-ausblick-kopf .q { width: 14px; height: 14px; border-radius: 4px; }
.fd-ausblick-kopf .stufen { padding-left: 18px; border-left: 1px solid var(--fd-line); gap: 4px; }
.fd-graph { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 4px; }
.fd-g-tag { border-radius: 12px; padding: 6px 4px 4px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fd-g-tag.we { background: #F5F6F8; }
/* Die Tage, die oben in der Woche gerade angezeigt werden: dezente Linie unten (keine Flächenfarbe) */
.fd-g-tag.sicht { box-shadow: inset 0 -4px 0 var(--fd-acc); }
.fd-g-tag.heute { background: var(--fd-acc-soft); box-shadow: inset 0 0 0 2px var(--fd-acc); }
.fd-g-saeule { height: 96px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.fd-g-balken { width: 64%; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.fd-g-balken > span { display: block; border-radius: 4px; transition: opacity .2s, filter .2s; }
.fd-g-datum { text-align: center; border-top: 1px solid var(--fd-line); padding-top: 4px; line-height: 1.1; }
.fd-g-datum span { display: block; font-size: 13px; font-weight: 700; color: var(--fd-muted); }
.fd-g-datum b { font-size: 17px; }
.fd-g-tag.heute .fd-g-datum span, .fd-g-tag.heute .fd-g-datum b { color: var(--fd-acc); }

.fd-kinder { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fd-kind { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; transition: opacity .2s, filter .2s; }
.fd-kind .kopf { display: flex; align-items: center; gap: 14px; }
.fd-kind .n { font-size: 24px; font-weight: 800; line-height: 1.1; }
.fd-kind .h { font-size: 15px; color: var(--fd-muted); }
.fd-kind .werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.fd-kind .werte > div { min-width: 0; display: flex; flex-direction: column; }
.fd-kind .werte .l { font-size: 15px; color: var(--fd-muted); }
.fd-kind .werte b { font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.fd-kind .werte b.warn { color: #B45309; }
.fd-kind .bar { display: block; height: 8px; border-radius: 4px; background: #EDF0F3; margin-top: 6px; overflow: hidden; }
.fd-kind .bar > span { display: block; height: 100%; border-radius: 4px; }

.fd-fuss { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--fd-muted); }
.fd-fuss .sp { flex: 1; }
.fd-aktualisieren { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--fd-line); background: #fff; font-size: 13px; font-weight: 700; color: var(--fd-muted); cursor: pointer; }
.fd-version { font-size: 13px; font-weight: 700; color: var(--fd-muted); }
.fd-aktualisieren:disabled { opacity: .6; cursor: default; }
.fd-spaltenkopf { flex-wrap: wrap; row-gap: 4px; }
/* Kind-Detail: Werte oben, darunter zuklappbare Abschnitte mit Luft dazwischen */
.fd-dk-kopf { display: flex; gap: 14px; margin-bottom: 18px; }
.fd-dk-wert { flex: 1; background: #F7F8FA; border-radius: 16px; padding: 12px 18px; display: flex; flex-direction: column; }
.fd-dk-wert span { font-size: 15px; color: var(--fd-muted); font-weight: 600; }
.fd-dk-wert b { font-size: 24px; font-weight: 800; }
.fd-dk-spalte { display: flex; flex-direction: column; gap: 14px; }
.fd-abschnitt { border: 1px solid var(--fd-line); border-radius: 18px; overflow: hidden; }
.fd-abschnitt-kopf { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 0; background: #F7F8FA; cursor: pointer; text-align: left; font-size: 21px; font-weight: 800; }
.fd-abschnitt-kopf .t { flex: 1; }
.fd-abschnitt-kopf .chev { display: inline-flex; color: var(--fd-muted); transition: transform .15s ease; }
.fd-abschnitt.offen .fd-abschnitt-kopf .chev { transform: rotate(90deg); }
.fd-abschnitt.offen .fd-abschnitt-kopf { border-bottom: 1px solid var(--fd-line); }
.fd-abschnitt-inhalt { padding: 4px 18px 10px; }
.fd-spaltenkopf .kw { margin-left: 0; font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 8px; background: #EDF0F3; color: var(--fd-muted); }
.fd-spalte.heute .fd-spaltenkopf .kw { background: rgba(255,255,255,.2); color: #fff; }
.fd-g-datum i { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: var(--fd-acc); }
.fd-ausblick-kopf .leg { transition: opacity .2s, filter .2s; }
.fd-haken { position: relative; border: 3px solid transparent; border-radius: 50%; padding: 0; background: none; cursor: pointer; display: inline-flex; }
.fd-haken.an { border-color: #15803D; }
.fd-haken.an .fd-chip { opacity: .55; }
.fd-haken .ok { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; background: #15803D; color: #fff; display: flex; align-items: center; justify-content: center; }
.fd-ek-check.an { background: #15803D; border-color: #15803D; color: #fff; display: flex; align-items: center; justify-content: center; cursor: default; }
.fd-ek-check.wartet { background: #FDE7C4; border-color: #D97706; }
.fd-aemtli.fertig .txt b { text-decoration: line-through; color: var(--fd-muted); }
.fd-vollbild { border: 0; background: none; padding: 0; font-size: 13px; font-weight: 700; color: var(--fd-acc); cursor: pointer; }
.fd-fuss-hinweis { background: #FDF0D8; color: #15202B; border-radius: 10px; padding: 3px 10px; }

.fd-dialog-hg { position: absolute; inset: 0; background: rgba(21,32,43,.55); }
.fd-dialog { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: 1040px; background: #fff; border-radius: 28px; padding: 26px 32px 28px;
             box-shadow: 0 24px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 16px; max-height: 1000px; overflow: auto; }
/* Detail-Fenster (Tag, Aufgaben, Einkauf, Ideen, Kind) */
.fd-detail { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); width: 1240px; max-height: 940px; background: #fff; border-radius: 28px; padding: 26px 32px 28px;
             box-shadow: 0 24px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 14px; z-index: 2; }
.fd-detail .fd-btn { height: 56px; text-decoration: none; }
.fd-detail-inhalt { overflow: auto; min-height: 0; display: flex; flex-direction: column; }
.fd-dz { display: flex; align-items: center; gap: 16px; padding: 12px 4px; border-top: 1px solid var(--fd-line); font-size: 20px; transition: opacity .2s, filter .2s; }
.fd-dz:first-child { border-top: 0; }
.fd-dz.pruef { background: #FFF9EE; border-radius: 12px; padding-left: 10px; padding-right: 10px; }
.fd-dz .zeit { min-width: 120px; font-weight: 700; color: var(--fd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-dz .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-dz .txt b { font-weight: 700; overflow-wrap: anywhere; }
.fd-dz .txt small { font-size: 16px; color: var(--fd-muted); }
.fd-dz-wer { display: flex; gap: 4px; min-width: 72px; }
.fd-dk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.fd-dk h3 { margin: 10px 0 4px; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-muted); }
.fd-dk-spalte { min-width: 0; }
.fd-ek-liste.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 24px; }
.fd-detail .fd-ek .txt { font-size: 20px; }
.fd-woche.aus, .fd-ausblick.aus, .fd-karte.aus { opacity: .3; filter: grayscale(1); }
.fd-karte { cursor: pointer; }
.fd-g-tag { cursor: pointer; }
.fd-dialog-kopf { display: flex; align-items: center; gap: 16px; }
.fd-dialog-kopf h2 { margin: 0; font-size: 30px; font-weight: 800; flex: 1; }
.fd-x { width: 56px; height: 56px; border-radius: 16px; border: 0; background: #EDF0F3; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fd-reiter { display: flex; gap: 6px; padding: 5px; border-radius: 18px; background: #EDF0F3; }
.fd .fd-reiter button { flex: 1; height: 58px; border-radius: 14px; border: 0; font-size: 20px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; background: transparent; color: var(--fd-muted); }
.fd .fd-reiter button.an { background: #fff; color: var(--fd-acc); box-shadow: 0 1px 4px rgba(21,32,43,.18); }
.fd-feldgruppe { display: flex; flex-direction: column; gap: 10px; }
.fd-feldgruppe .lbl { font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-muted); }
.fd-optionen { display: flex; gap: 10px; flex-wrap: wrap; }
.fd-opt { height: 54px; padding: 0 22px; border-radius: 16px; border: 2px solid #DDE2E7; background: #fff; font-size: 18px; font-weight: 700; cursor: pointer; }
.fd .fd-opt.an { border-color: var(--fd-acc); background: var(--fd-acc-soft); color: var(--fd-acc); }
.fd-wer { height: 58px; padding: 0 20px 0 8px; border-radius: 29px; border: 3px solid #DDE2E7; background: #fff; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.fd-wer.an { border-color: var(--fd-acc); }
.fd-eingabe { width: 100%; height: 70px; padding: 0 22px; border-radius: 16px; border: 2px solid #C9D1D9; font: inherit; font-size: 26px; font-weight: 600; color: #15202B; background: #fff; outline-color: var(--fd-acc); }
.fd-eingabe.fd-datum-feld { width: 260px; height: 54px; font-size: 20px; padding: 0 14px; }
.fd-eingabe.gross { height: auto; padding: 14px 22px; font-size: 22px; resize: none; }
.fd-dialog-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: start; }
.fd-stepper { display: flex; align-items: center; gap: 14px; }
.fd-stepper button { width: 54px; height: 54px; border-radius: 16px; border: 2px solid #DDE2E7; background: #fff; font-size: 28px; font-weight: 700; cursor: pointer; }
.fd-stepper button:disabled { opacity: .4; }
.fd-stepper span { min-width: 40px; text-align: center; font-size: 28px; font-weight: 800; }
.fd .fd-knopf { height: 54px; padding: 0 20px; border-radius: 999px; border: 2px solid #CDE7D3; background: #F1F9F3; color: #166534; font-size: 18px; font-weight: 700; cursor: pointer; }
.fd .fd-knopf.drauf { background: #fff; border-color: #CDE7D3; color: #166534; }
.fd .fd-knopf { display: inline-flex; align-items: center; gap: 8px; }
.fd-knopf-gruppe { font-size: 13px; font-weight: 600; color: var(--fd-muted); }
.fd-dialog-fehler { background: #FDE8E4; color: #8F1D12; border-radius: 12px; padding: 10px 14px; font-size: 17px; font-weight: 600; }
.fd-dialog-fuss { display: flex; justify-content: flex-end; gap: 14px; padding-top: 4px; }
.fd-btn { height: 62px; padding: 0 30px; border-radius: 18px; border: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; background: #EDF0F3; cursor: pointer; }
.fd .fd-btn.primaer { background: var(--fd-acc); color: #fff; font-weight: 800; }
.fd-btn:disabled { opacity: .45; cursor: default; }

.fd-ruhe { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6vh; cursor: pointer; }
.fd-ruhe-pille { padding: 14px 26px; border-radius: 999px; background: rgba(21,32,43,.82); color: #fff; font-size: 20px; font-weight: 600; }
.fd-ruhe.aus { background: #000; color: #5B6470; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0; font-size: 22px; font-weight: 600; font-family: var(--rothn-font), sans-serif; }
.fd-ruhe-uhr { font-size: 120px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #3A4250; }

/* ── Bildschirmtastatur: Fenster am unteren Rand stehen über der Tastatur (Variablen aus rothen.js) ── */
.modal-sheet, .sheet { bottom: var(--tastatur, 0px); transition: bottom .15s ease; }
.modal-sheet { max-height: min(90vh, calc(var(--vvh, 100vh) - 16px)); }
.sheet { max-height: min(88vh, calc(var(--vvh, 100vh) - 24px)); }

/* ── PC-Startseite (Familien-Board): Zähler in der Seitenleiste, Ausblick 21 Tage, Kinder-Karten, Aktuelles rechts ── */
.side-lbl { flex: 1; min-width: 0; }
.side-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #E9EDF1; color: #3A4753; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }

@media (min-width: 1100px) {
    .app-shell > .home-head, .app-shell > .home-content { max-width: 1280px; }
    .home-content { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 20px; row-gap: 16px; }
    .home-content > .sa { grid-column: 1 / -1; grid-row: 1; margin: 0; }
    .home-content > .akt-block { grid-column: 1; grid-row: 2; min-width: 0; }
    .home-content > .kk { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
    .home-content > .akt-block .aktuelles-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: stretch; }
    .home-content > .akt-block .aktuelles-list > .aktuelles-item { margin: 0; }
    .home-content > .akt-block .aktuelles-list > :not(.aktuelles-item) { grid-column: 1 / -1; }
    .home-content > .kz-mini { display: none; }
    .akt-block > .akt-head { margin-top: 0; }
}

.sa { padding: 16px 20px 14px; margin: 0; }
.sa-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sa-kopf h2 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.sa-sum { font-size: .85rem; color: var(--rothn-text-muted); }
.sa-sp { flex: 1; }
.sa-seg { display: flex; padding: 3px; border-radius: 12px; background: #EDF0F3; }
.sa-seg button { height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: .85rem; font-weight: 700; color: var(--rothn-text-muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sa-seg button.an { background: #fff; color: var(--rothn-text); box-shadow: 0 1px 3px rgba(21,32,43,.15); }
.sa-link { font-size: .82rem; font-weight: 700; color: var(--rothn-primary-dark); }
.sa-leg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--rothn-text-muted); margin-bottom: 8px; }
.sa-modus { display: flex; gap: 4px; }
.sa-modus button { height: 28px; padding: 0 11px; border-radius: 14px; border: 1px solid #DDE2E7; background: #fff; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; color: var(--rothn-text); }
.sa-modus button.an { background: var(--rothn-primary); border-color: var(--rothn-primary); color: #fff; }
.sa-l { display: flex; align-items: center; gap: 6px; }
.sa-l .q, .sa-eintrag .q { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sa-stufen { padding-left: 12px; border-left: 1px solid #E3E7EB; gap: 4px; }
.sa-scroll { overflow-x: auto; }
.sa-graph { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 4px; min-width: 760px; }
.sa-tag { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; padding: 5px 2px 4px; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-tag.we { background: #F3F5F7; }
.sa-tag:hover { background: #EEF1F4; }
.sa-tag.an { background: var(--rothn-primary-soft); box-shadow: inset 0 0 0 2px var(--rothn-primary); }
.sa-saeule { height: 88px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.sa-anz { font-size: .68rem; font-weight: 700; color: var(--rothn-text-muted); }
.sa-balken { width: 70%; display: flex; flex-direction: column; gap: 2px; }
.sa-balken > span { display: block; border-radius: 3px; }
.sa-feld { width: 24px; height: 24px; box-sizing: border-box; border: 2px solid; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; flex: none; }
.sa-feld.mini { width: 14px; height: 14px; border: 1.5px solid #5B6875; border-radius: 4px; margin-left: 4px; }
.sa-datum { text-align: center; border-top: 1px solid #E3E7EB; padding-top: 4px; line-height: 1.15; }
.sa-datum span { display: block; font-size: .66rem; font-weight: 700; color: var(--rothn-text-muted); }
.sa-datum b { font-size: .85rem; }
.sa-tag.heute .sa-datum span, .sa-tag.heute .sa-datum b { color: var(--rothn-primary-dark); }
.sa-detail { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: #F7F8FA; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.sa-detail-kopf { min-width: 160px; display: flex; flex-direction: column; font-size: .88rem; }
.sa-detail-kopf strong { text-transform: capitalize; }
.sa-detail-kopf span { font-size: .78rem; color: var(--rothn-text-muted); }
.sa-detail-liste { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sa-eintrag { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 11px; border-radius: 9px; background: #fff; border: 1px solid #E3E7EB; font-size: .84rem; color: var(--rothn-text); text-decoration: none !important; }
.sa-eintrag .z, .sa-eintrag .w { color: var(--rothn-text-muted); }
.sa-leer { font-size: .84rem; color: var(--rothn-text-muted); }

.kk { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; align-content: start; }
.kk-karte { margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; color: var(--rothn-text); }
.kk-karte:hover { box-shadow: var(--rothn-shadow-hover); }
.kk-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.kk-chip { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; flex: none; }
.kk-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kk-name strong { font-size: 1rem; }
.kk-name span { font-size: .76rem; color: var(--rothn-text-muted); }
.kk-chev { color: var(--rothn-text-muted); display: flex; }
.kk-zeile { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.kk-zeile .module-icon.klein { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.kk-txt { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: baseline; font-size: .82rem; }
.kk-txt .l { color: #3A4753; }
.kk-txt b { font-weight: 700; white-space: nowrap; }
.kk-txt b.warn { color: #B45309; }
.kk-txt b.neg { color: var(--rothn-danger); }
.kk-bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: #EDF0F3; margin-top: 4px; overflow: hidden; }
.kk-bar > span { display: block; height: 100%; border-radius: 3px; }
.kk-laden { font-size: .8rem; color: var(--rothn-text-muted); }

/* Kinder-PIN an der Anzeige: Anmelde-Fenster und 30-Sekunden-Leiste */
.fd-sitzung { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 12px; border-radius: 999px; background: #15202B; color: #fff; font-size: 19px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.fd-sitzung-zeit { min-width: 52px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.15); }
.fd-sitzung .fd-btn { height: 44px; padding: 0 18px; font-size: 17px; background: #fff; color: #15202B; }
.fd-pin { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 4; width: 520px; background: #fff; border-radius: 28px; padding: 26px 30px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fd-pin h2 { margin: 0; font-size: 28px; font-weight: 800; }
.fd-pin-hinweis { font-size: 16px; color: var(--fd-muted); text-align: center; }
.fd-pin-punkte { display: flex; gap: 14px; }
.fd-pin-punkte span { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #C9D2DA; }
.fd-pin-punkte span.voll { background: var(--fd-acc); border-color: var(--fd-acc); }
.fd-pin-tasten { display: grid; grid-template-columns: repeat(3, 100px); gap: 12px; }
.fd .fd-pin-tasten button { height: 76px; border-radius: 20px; border: 2px solid #DDE2E7; background: #F7F8FA; font-size: 32px; font-weight: 800; cursor: pointer; }
.fd .fd-pin-tasten button.ok { background: var(--fd-acc); border-color: var(--fd-acc); color: #fff; }
.fd .fd-pin-tasten button:disabled { opacity: .4; }

/* Kind-Detail: Kacheln klickbar, Eintragen (Medienzeit/Lernen), Werte auf der Kinderkarte antippbar */
button.fd-dk-wert { border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.fd-wert-klick { cursor: pointer; border-radius: 10px; margin: -4px; padding: 4px; }
.fd-wert-klick:active { background: #F3F5F7; }
.fd-eintragen { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 6px; }
.fd-eintragen .lbl { font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-muted); }
.fd-ok { background: #E7F5E9; color: #166534; border-radius: 12px; padding: 8px 12px; font-size: 17px; font-weight: 700; }
.fd-wetter-ort { font-size: 13px; font-weight: 700; color: var(--fd-muted); }

/* Kind-Fenster: „Achtung"-Liste statt Kacheln */
.fd-achtung { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.fd .fd-achtung-punkt { border: 0; border-radius: 14px; padding: 10px 16px; font-size: 18px; font-weight: 700; text-align: left; cursor: pointer; }
.fd .fd-achtung-punkt.rot { background: #FDE8E4; color: #8F1D12; }
.fd .fd-achtung-punkt.orange { background: #FFF1DC; color: #8A3F06; }
.fd .fd-achtung-punkt.neutral { background: #F3F5F7; color: #15202B; }
.fd .fd-achtung-punkt.blau { background: #E6EEFB; color: #1D4ED8; }
.fd .fd-achtung-punkt.gut { background: #E7F5E9; color: #166534; cursor: default; }
.fd-kind .h.zuletzt { font-size: 13px; opacity: .85; }
.fd-kind .werte small.saldo { font-size: 13px; font-weight: 700; color: var(--fd-muted); }
.fd-kind .werte small.saldo.neg { color: #B42318; }
.fd-kind .kopf .zuletzt { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--fd-muted); white-space: nowrap; }
.fd-aemtli .zeit { min-width: 56px; text-align: right; }
.fd-saldo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; margin-bottom: 4px; border-radius: 14px; background: #F3F5F7; font-size: 18px; }
.fd-saldo span { color: var(--fd-muted); font-weight: 700; }
.fd-saldo span + b + span { margin-left: 14px; }
.fd-saldo b { font-size: 22px; font-weight: 800; }
.fd-saldo b.neg { color: #B42318; }
.fd-saldo small { flex-basis: 100%; font-size: 15px; color: var(--fd-muted); }

/* Ausblick: Prüfungen über 21 Tage hinaus blättern */
.sa-rahmen { display: flex; align-items: stretch; gap: 6px; }
.sa-rahmen > .sa-scroll { flex: 1; min-width: 0; }
.sa-blaettern { flex: none; width: 34px; border: 1px solid #DDE2E7; border-radius: 12px; background: #fff; color: var(--rothn-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 0; font: inherit; }
.sa-blaettern:disabled { opacity: .35; cursor: default; }
.sa-blaettern:not(:disabled):hover { background: #F3F5F7; }
.sa-spaeter { font-size: .7rem; font-weight: 800; color: var(--rothn-primary-dark); }
.sa-mehr { font-size: .7rem; font-weight: 800; color: var(--rothn-text-muted); text-align: center; }
.sa-datum small { display: block; font-size: .62rem; font-weight: 700; color: var(--rothn-text-muted); text-transform: uppercase; }