/* Familienplan – Darstellung.
   Feste Vorgaben aus dem Konzept: Fließtext 18 px, nirgends unter 16 px,
   Textkontrast mindestens 7:1, Rahmen mindestens 3:1, Trefferflächen 48 px.
   Alle Größen in rem, damit der Schriftgrößenregler durchgreift.
*/

:root {
  --skala: 1;

  --grund: #FFFFFF;
  --flaeche: #F3F5F3;
  --flaeche-tief: #E9ECEA;
  --text: #15181A;
  --text-leise: #414845;
  --linie: #D5D9D6;
  --rahmen: #6C7370;
  --akzent: #0F5C4E;
  --akzent-flaeche: #E1EEE9;
  --gefahr: #97231F;
  --gefahr-flaeche: #FBEAE8;
  --warn-flaeche: #FBF2E2;
  --warn-rahmen: #A97A15;

  --p-gruen: #1F5C4C;   --p-gruen-text: #FFFFFF;
  --p-violett: #4A4494; --p-violett-text: #FFFFFF;
  --p-ocker: #6B4A08;   --p-ocker-text: #FFFFFF;
  --p-rot: #8A2F2F;     --p-rot-text: #FFFFFF;
  --p-blau: #1B5670;    --p-blau-text: #FFFFFF;
  --p-lila: #6A3070;    --p-lila-text: #FFFFFF;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund: #101312;
    --flaeche: #1A1E1D;
    --flaeche-tief: #232827;
    --text: #ECEEEB;
    --text-leise: #A9B1AD;
    --linie: #2B302E;
    --rahmen: #7D8683;
    --akzent: #7EC8AE;
    --akzent-flaeche: #16251F;
    --gefahr: #F0938A;
    --gefahr-flaeche: #2A1917;
    --warn-flaeche: #251E10;
    --warn-rahmen: #8A6B22;

    --p-gruen: #7CC7AE;   --p-gruen-text: #0B1512;
    --p-violett: #ADA6E8; --p-violett-text: #14111F;
    --p-ocker: #D8AB4B;   --p-ocker-text: #1A1305;
    --p-rot: #E8938B;     --p-rot-text: #1F0F0E;
    --p-blau: #7EC2E2;    --p-blau-text: #0A1720;
    --p-lila: #D397DC;    --p-lila-text: #1C0E1E;
  }
}

:root[data-thema="dunkel"] {
  --grund: #101312;
  --flaeche: #1A1E1D;
  --flaeche-tief: #232827;
  --text: #ECEEEB;
  --text-leise: #A9B1AD;
  --linie: #2B302E;
  --rahmen: #7D8683;
  --akzent: #7EC8AE;
  --akzent-flaeche: #16251F;
  --gefahr: #F0938A;
  --gefahr-flaeche: #2A1917;
  --warn-flaeche: #251E10;
  --warn-rahmen: #8A6B22;

  --p-gruen: #7CC7AE;   --p-gruen-text: #0B1512;
  --p-violett: #ADA6E8; --p-violett-text: #14111F;
  --p-ocker: #D8AB4B;   --p-ocker-text: #1A1305;
  --p-rot: #E8938B;     --p-rot-text: #1F0F0E;
  --p-blau: #7EC2E2;    --p-blau-text: #0A1720;
  --p-lila: #D397DC;    --p-lila-text: #1C0E1E;
}

* { box-sizing: border-box; }

/* Muss vor allen Layoutregeln stehen: sonst überschreibt ein display:flex
   das hidden-Attribut, und ein „unsichtbarer" Balken fängt weiter Klicks ab. */
[hidden] { display: none !important; }

html {
  /* Grundlage ist 16 px, die Standardgröße des Browsers. Bis 1.9.1 stand hier
     1.125em, also 18 px — und die kleinste wählbare Stufe war genau diese 18 px.
     Eine Untergrenze ohne Luft nach unten ist keine Hilfe, sondern eine
     Zwangsjacke: Der Aufgabendialog war bei dieser Größe kaum noch Formular,
     sondern Fließtext, und wichtige Hinweise gingen darin unter.
     Die Stufen liegen jetzt bei 100 (16 px), 112 (18 px), 128 (20,5 px) und
     145 (23,2 px). Eingabefelder bleiben in jeder Stufe bei mindestens 16 px,
     sonst zoomt Safari beim Antippen hinein. */
  font-size: calc(1em * var(--skala));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 0 calc(8rem + env(safe-area-inset-bottom)) 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.6;
}

h1, h2, h3 { line-height: 1.25; margin: 0; text-wrap: balance; }
p { margin: 0 0 .6rem; }

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--akzent); color: var(--grund); padding: .6rem 1rem;
}
.sprung:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Kopf ---------- */

#kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;
}
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.kopf-klein { font-size: .9rem; color: var(--text-leise); margin: 0 0 .1rem; }
#kopf-titel { font-size: 1.35rem; }

.filter-knopf {
  min-height: 48px; min-width: 48px; padding: 0 .9rem;
  border: 2px solid var(--rahmen); background: var(--grund); color: var(--text);
  border-radius: 24px; font: inherit; font-size: .95rem; cursor: pointer;
}

/* ---------- Ansichten ---------- */

main { padding: 0 1rem; max-width: 40rem; margin: 0 auto; }
.ansicht { padding-top: 1rem; }
.abschnitt {
  font-size: .95rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-leise); margin: 1.6rem 0 .6rem; font-weight: 600;
}
.zeitraum { font-size: .95rem; color: var(--text-leise); }
.hinweis { font-size: .95rem; color: var(--text-leise); }
.leer {
  padding: 1rem; border: 1px dashed var(--rahmen); border-radius: 10px;
  color: var(--text-leise); font-size: .95rem;
}

/* ---------- Terminzeilen ---------- */

.jetzt-block {
  background: var(--akzent-flaeche);
  border: 2px solid var(--akzent);
  border-radius: 12px;
  padding: 1rem;
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.jetzt-block .jt-zeit,
.jetzt-block .jt-titel,
.jetzt-block .zeile-unter { display: block; }
.jetzt-block .jt-zeit { font-size: 1.05rem; color: var(--text-leise); }
.jetzt-block .jt-titel { font-size: 1.35rem; font-weight: 700; margin: .1rem 0 .3rem; line-height: 1.25; }
.jetzt-block .chip-gruppe { margin-top: .6rem; }

.tagkopf {
  position: sticky; top: 5.4rem; z-index: 10;
  background: var(--grund);
  font-size: .95rem; font-weight: 700;
  padding: .5rem 0 .3rem; margin-top: .8rem;
  border-bottom: 1px solid var(--linie);
}
.tagkopf.ist-heute { color: var(--akzent); }

.zeile {
  display: flex; gap: .7rem; align-items: flex-start;
  width: 100%; min-height: 56px; padding: .7rem .2rem;
  background: none; border: 0; border-bottom: 1px solid var(--linie);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.zeile:hover { background: var(--flaeche); }
.zeile-haupt { flex: 1 1 auto; min-width: 0; }
.zeile-titel { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.zeile-unter { display: block; font-size: .9rem; color: var(--text-leise); line-height: 1.4; }
.zeile-zeit {
  flex: none; font-size: .95rem; font-variant-numeric: tabular-nums;
  color: var(--text-leise); padding-top: .1rem; min-width: 4.2rem;
}
.zeile-zeit.ganztag { font-style: normal; }
.offen-marke {
  display: inline-block; margin: 0 .45rem 0 .4rem; padding: 0 .45rem;
  border: 2px dashed var(--rahmen); border-radius: 10px;
  font-size: .9rem; color: var(--text-leise);
}
.serie-marke { margin: 0 .35rem; color: var(--text-leise); }

/* ---------- Personen-Chips ---------- */

.chip-person {
  flex: none; width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  font-size: .9rem; font-weight: 700; letter-spacing: .02em;
}
.chip-person.gross { width: 2.6rem; height: 2.6rem; font-size: .95rem; }
.chip-gruppe { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }

.form-kreis    { border-radius: 50%; }
.form-quadrat  { border-radius: 6px; }
.form-raute    { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.form-sechseck { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.form-tropfen  { border-radius: 50% 50% 50% 8px; }
.form-schild   { clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }

.farbe-gruen   { background: var(--p-gruen);   color: var(--p-gruen-text); }
.farbe-violett { background: var(--p-violett); color: var(--p-violett-text); }
.farbe-ocker   { background: var(--p-ocker);   color: var(--p-ocker-text); }
.farbe-rot     { background: var(--p-rot);     color: var(--p-rot-text); }
.farbe-blau    { background: var(--p-blau);    color: var(--p-blau-text); }
.farbe-lila    { background: var(--p-lila);    color: var(--p-lila-text); }

/* ---------- Knöpfe ---------- */

button {
  font: inherit; font-size: 1rem; cursor: pointer;
  min-height: 48px; border-radius: 10px;
  border: 2px solid var(--rahmen); background: var(--grund); color: var(--text);
  padding: .5rem 1rem;
}
button:hover { background: var(--flaeche); }
button.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--grund); font-weight: 600; }
button.still { border-color: var(--linie); color: var(--text-leise); }
button.gefahr { border-color: var(--gefahr); color: var(--gefahr); }
button.voll { display: block; width: 100%; margin-bottom: .6rem; }
button[disabled] { opacity: .55; cursor: not-allowed; }

.knopfspalte { display: flex; flex-direction: column; gap: .6rem; }

/* ---------- Chips ---------- */

.chips { border: 0; padding: 0; margin: 0 0 1rem; }
.chips legend { font-size: .95rem; font-weight: 600; color: var(--text-leise); padding: 0 0 .4rem; }
.chipreihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  min-height: 48px; padding: .3rem .9rem;
  border: 2px solid var(--rahmen); border-radius: 24px;
  background: var(--grund); color: var(--text); font: inherit; font-size: .95rem;
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--akzent); border-color: var(--akzent); color: var(--grund); font-weight: 600;
}
.chip .chip-person { width: 2rem; height: 2rem; font-size: .9rem; }

/* Eine Reihe, die genau eine Antwort trägt — der Ersatz für die
   Aufklappmenüs. Sie sieht aus wie die Chipreihen daneben, damit im Dialog
   nicht zwei Bedienarten nebeneinanderstehen. */
/* Nummerierte Schritte in einem Dialog – hier trägt die Reihenfolge wirklich
   Information: Schritt 3 ergibt ohne Schritt 2 keinen Sinn. */
.schritte { margin: .4rem 0 .8rem; padding-left: 1.4rem; }
.schritte li { margin-bottom: .5rem; line-height: 1.5; }

.abo-eintrag {
  border: 2px solid var(--linie); border-radius: 12px;
  padding: .7rem .8rem; margin-bottom: .6rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.abo-eintrag .abo-kopf { font-weight: 600; }
.abo-eintrag .abo-unter { font-size: .9rem; color: var(--text-leise); line-height: 1.4; }
.abo-eintrag .abo-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }

.wahlreihe { margin-top: .1rem; }
/* „Kein Bereich" und „Noch offen" sind keine Entscheidungen, sondern deren
   Abwesenheit. Sie zeigen den Stand, ziehen aber nicht den Blick auf sich. */
.wahlreihe .chip[data-wert=""][aria-pressed="true"] {
  background: var(--flaeche-tief); border-color: var(--rahmen); color: var(--text-leise);
}
.wahlreihe.gesperrt { opacity: .55; }
.wahlreihe.gesperrt .chip { cursor: default; }
.feld-titel {
  display: block; font-size: .95rem; font-weight: 600;
  color: var(--text-leise); margin-bottom: .3rem;
}

/* ---------- Formularfelder ---------- */

.feld { display: block; margin-bottom: 1rem; }
.feld > span, .unterfeld > span {
  display: block; font-size: .95rem; font-weight: 600; color: var(--text-leise); margin-bottom: .3rem;
}
.feld em { font-style: normal; font-weight: 400; }
.unterfeld { display: block; margin-top: .6rem; }
/* Alle Eingabefelder, nicht nur die vier, die mir zuerst eingefallen sind:
   Das Passwortfeld der Servereinrichtung stand bei 13,3 px und ließ Safari beim
   Antippen hineinzoomen — ausgerechnet dort, wo man sorgfältig tippen will. */
input[type="text"], input[type="date"], input[type="time"], input[type="number"],
input[type="password"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input:not([type]), select, textarea {
  width: 100%; min-height: 48px; padding: .5rem .7rem;
  font: inherit;
  /* Fest bei mindestens 16 px, in JEDER Schriftstufe: Darunter zoomt Safari
     beim Antippen ins Feld hinein, und die Seite bleibt danach verschoben.
     Seit die kleinste Stufe 16 px Grundgröße hat, ist das kein theoretischer
     Fall mehr, sondern der Normalfall. */
  font-size: max(1rem, 16px);
  color: var(--text); background: var(--grund);
  border: 2px solid var(--rahmen); border-radius: 10px;
}
input[type="file"] { font-size: max(.95rem, 15px); }
textarea { min-height: 4rem; line-height: 1.5; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 26rem) { .zweispaltig { grid-template-columns: 1fr; } }
.feldzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.feldzeile label { font-size: .95rem; font-weight: 600; color: var(--text-leise); }
.feldzeile select { width: auto; min-width: 10rem; }
.feldfehler {
  color: var(--gefahr); background: var(--gefahr-flaeche);
  border: 2px solid var(--gefahr); border-radius: 8px;
  padding: .6rem .8rem; font-size: .95rem;
}

/* ---------- Dialoge ---------- */

dialog {
  border: 0; border-radius: 14px; padding: 0;
  width: min(34rem, 94vw); max-height: 88vh;
  background: var(--grund); color: var(--text);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
dialog::backdrop { background: rgba(0,0,0,.55); }
.dialog-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem; border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; background: var(--grund);
}
.dialog-kopf h2 { font-size: 1.2rem; }
.schliessen { min-width: 48px; min-height: 48px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--text-leise); }
.dialog-inhalt { padding: 1rem; overflow-y: auto; }
.dialog-fuss {
  display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap;
  padding: 1rem; border-top: 1px solid var(--linie);
  position: sticky; bottom: 0; background: var(--grund);
}
.dialog-fuss .haupt { flex: 1 1 10rem; }

/* ---------- Listen in „Mehr“ ---------- */

.eintrag {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .2rem; border-bottom: 1px solid var(--linie);
}
.eintrag-haupt { flex: 1 1 auto; min-width: 0; }
.eintrag-name { font-weight: 600; }
.eintrag-unter { font-size: .9rem; color: var(--text-leise); }
.eintrag button { min-height: 48px; padding: .4rem .8rem; font-size: .95rem; }

/* ---------- Tableiste ---------- */

/* Vier gleich breite Spalten statt vier gleich wachsender Streifen.

   Mit flex konnten die Tabs nur wachsen, nicht schrumpfen: Bei der größten
   Schriftgröße war vom vierten Tab noch ein Rest von vier Pixeln übrig, das
   Wort stand außerhalb des Bildschirms. Wer die größte Schrift wählt – also
   genau die Person, für die der Regler gebaut ist –, kam danach nicht mehr an
   Familie, Sicherung, Abgleich und den Regler selbst. */
#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--grund);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  min-width: 0; min-height: 56px; border: 0; border-radius: 0;
  background: none; color: var(--text-leise);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  font-size: .9rem; font-weight: 600;
  padding: .4rem 0;
}
/* Lieber umbrechen als abgeschnitten werden – die Leiste darf höher werden.
   Silbentrennung statt Bruch an beliebiger Stelle: „Kalen-der" liest sich, in
   „Kalende / r" stolpert das Auge. */
.tab .tab-text {
  display: block; max-width: 100%;
  overflow-wrap: break-word; hyphens: auto;
  line-height: 1.15; text-align: center;
}
.tab .tab-symbol { font-size: 1.1rem; line-height: 1; }
.tab.aktiv { color: var(--akzent); box-shadow: inset 0 3px 0 var(--akzent); }

#fab {
  position: fixed; right: 1rem; z-index: 31;
  bottom: calc(4.6rem + env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--akzent); border: 2px solid var(--akzent); color: var(--grund);
  font-size: 1.9rem; line-height: 1; padding: 0;
}

/* ---------- Balken und Meldungen ---------- */

.balken {
  position: sticky; top: 0; z-index: 40;
  padding: .8rem 1rem; font-size: .95rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
}
.balken p { margin: 0; }
.balken-knoepfe { display: flex; gap: .5rem; }
.balken button { min-height: 44px; padding: .3rem .8rem; font-size: .9rem; }
.balken-fehler { background: var(--gefahr-flaeche); border-bottom: 3px solid var(--gefahr); color: var(--text); }
.balken-info { background: var(--warn-flaeche); border-bottom: 3px solid var(--warn-rahmen); color: var(--text); }

.status {
  position: fixed; left: -9999px; top: 0;
}

/* Die sichtbare Hälfte von sagen().

   Bis 1.9.0 ging jede Rückmeldung ausschließlich in die Region bei
   left:-9999px – gedacht für Screenreader, für Augen unsichtbar. „Diesmal
   übersprungen", „Kalenderdatei erstellt", „Bereich aufgelöst": alles passierte
   lautlos. Wer den Knopf drückte und nichts sah, drückte noch einmal.

   Jetzt sagt dieselbe Funktion es beiden: der Region wie bisher und hier
   sichtbar für ein paar Sekunden. */
/* Ein Hinweis, der nicht übersehen werden darf, aber auch kein Fehler ist. */
.warnhinweis {
  border-left: 4px solid var(--warn-rahmen);
  background: var(--warn-flaeche);
  padding: .6rem .8rem; border-radius: 8px;
  font-size: 1rem; line-height: 1.5; color: var(--text);
  margin: .4rem 0 .6rem;
}

.meldung {
  position: fixed; left: 1rem; right: 1rem; z-index: 31;
  bottom: calc(4.8rem + env(safe-area-inset-bottom));
  background: var(--flaeche-tief); border: 2px solid var(--rahmen); border-radius: 12px;
  padding: .6rem .8rem; font-size: .95rem; color: var(--text);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
@media (prefers-reduced-motion: no-preference) {
  .meldung { animation: meldung-auf .15s ease-out; }
  @keyframes meldung-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

.undo {
  position: fixed; left: 1rem; right: 1rem; z-index: 32;
  bottom: calc(4.8rem + env(safe-area-inset-bottom));
  background: var(--flaeche-tief); border: 2px solid var(--rahmen); border-radius: 12px;
  padding: .6rem .8rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  font-size: .95rem;
}
.undo button { min-height: 44px; padding: .3rem .8rem; font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Aufgaben ---------- */

.gruppe-kopf {
  font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-leise); margin: 1.4rem 0 .4rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--linie);
}

.aufgabe {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .5rem 0; border-bottom: 1px solid var(--linie);
}
.haken {
  flex: none; width: 48px; height: 48px; padding: 0;
  border: 2px solid var(--rahmen); border-radius: 10px;
  background: var(--grund); color: var(--akzent);
  font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
}
.haken[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--grund); }

.aufgabe-haupt {
  flex: 1 1 auto; min-width: 0; text-align: left;
  background: none; border: 0; padding: .2rem 0; font: inherit; color: inherit;
  min-height: 48px; border-radius: 6px; cursor: pointer;
}
.aufgabe-titel { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.aufgabe-unter { display: block; font-size: .9rem; color: var(--text-leise); line-height: 1.4; }
.aufgabe.ist-erledigt .aufgabe-titel { text-decoration: line-through; color: var(--text-leise); }

.uebernehmen {
  flex: none; width: 2.2rem; height: 2.2rem; min-height: 2.2rem; padding: 0;
  border: 2px dashed var(--rahmen); border-radius: 50%;
  background: none; color: var(--text-leise); font-size: 1.1rem; line-height: 1;
}
.aufgabe-rechts { flex: none; display: flex; align-items: center; gap: .4rem; min-height: 48px; }

details.erledigt-block { margin-top: 1.2rem; }
details.erledigt-block > summary {
  cursor: pointer; min-height: 48px; display: flex; align-items: center;
  font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-leise); border-bottom: 1px solid var(--linie);
}

.danke-knopf {
  min-height: 44px; padding: .2rem .7rem; font-size: .9rem;
  border-radius: 22px; border: 2px solid var(--akzent); color: var(--akzent); background: none;
}
.danke-zahl { font-size: .9rem; color: var(--text-leise); }

/* Neutraler Hinweis – bewusst nicht rot, bewusst ohne Namen */
.warnung {
  background: var(--flaeche); border: 1px solid var(--rahmen); border-left: 4px solid var(--akzent);
  border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .95rem;
}
.warnung p { margin: 0 0 .4rem; }
.warnung p:last-child { margin: 0; }

/* ---------- Auswertung ---------- */

.anteil { margin-bottom: .8rem; }
.anteil-kopf { display: flex; justify-content: space-between; font-size: .95rem; margin-bottom: .2rem; }
.anteil-zahl { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.anteil-balken { height: 14px; background: var(--flaeche-tief); border-radius: 7px; overflow: hidden; }
.anteil-fuellung { height: 100%; background: var(--akzent); }

/* ---------- Rotationsvorschau im Aufgabendialog ---------- */

.vorschau {
  display: flex; flex-direction: column; gap: .35rem;
  margin-top: .8rem; padding: .7rem .8rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
}
.vorschau-titel {
  font-size: .9rem; font-weight: 600; color: var(--text-leise);
  text-transform: uppercase; letter-spacing: .05em;
}
.vorschau-zeile { display: flex; align-items: center; gap: .55rem; font-size: .95rem; }
.vorschau-datum {
  min-width: 5.2rem; color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* ---------- Woche und Wochenband ---------- */

.wochenkopf {
  font-size: .95rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-leise);
  margin: 1.7rem 0 .5rem; padding-bottom: .3rem;
}
.wochenkopf.ist-woche { color: var(--akzent); }
.ansicht > .wochenkopf:first-of-type { margin-top: .4rem; }

.wochenband {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 12px; padding: .6rem .7rem .5rem;
  display: flex; flex-direction: column; gap: .5rem;
  margin-bottom: .6rem;
}
.bandzeile {
  display: flex; flex-direction: column; gap: .35rem;
  width: 100%; min-height: 48px; padding: .3rem .2rem;
  background: none; border: 0; border-radius: 8px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.bandzeile:hover { background: var(--flaeche-tief); }
.band-kopf { display: flex; align-items: center; gap: .5rem; }
.band-name { flex: 1 1 auto; min-width: 0; font-size: 1rem; font-weight: 600; }
.band-frist { flex: none; font-size: .9rem; color: var(--text-leise); }
.bandzeile.ist-erledigt .band-name { text-decoration: line-through; color: var(--text-leise); }

.band-spur, .band-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.band-spur { align-items: center; min-height: 14px; }
.band-spur span { height: 8px; border-radius: 4px; background: var(--flaeche-tief); }
.band-spur span.an { background: var(--akzent); }
/* Der Stichtag ist höher, nicht anders gefärbt: Er ist das Ende derselben
   Strecke. Eine Aussparung war zu leise – auf dem Handy blieb davon eine
   Haarlinie übrig, die man für einen freien Tag halten konnte. */
.band-spur span.stichtag {
  background: var(--akzent);
  height: 14px; border-radius: 4px;
}
.bandzeile.ist-erledigt .band-spur span.an,
.bandzeile.ist-erledigt .band-spur span.stichtag { background: var(--rahmen); }
.band-tage { font-size: max(.85rem, 14px); color: var(--text-leise); text-align: center; padding: 0 .2rem; }

/* ---------- Ansichtsschalter ---------- */

.ansicht-schalter { display: flex; gap: .5rem; margin: 0 0 .9rem; flex-wrap: wrap; }
button.klein {
  min-height: 44px; padding: .35rem 1rem; font-size: .95rem;
  border-color: var(--linie); color: var(--text-leise);
}
button.klein.an {
  background: var(--akzent-flaeche); border-color: var(--akzent);
  color: var(--text); font-weight: 600;
}

/* Aufgaben im Kalender: erkennbar keine Termine. Der gestrichelte Rahmen an
   der Marke ist dasselbe Zeichen wie die „offen"-Marke in der Aufgabenliste. */
.zeile.ist-aufgabe .aufgaben-marke {
  font-size: .9rem; font-style: normal;
  border: 2px dashed var(--rahmen); border-radius: 10px;
  padding: 0 .4rem; min-width: 0; text-align: center;
  color: var(--text-leise);
}
.zeile.ist-aufgabe.ist-erledigt .zeile-titel { text-decoration: line-through; color: var(--text-leise); }
.zeile.ist-aufgabe.ist-erledigt .aufgaben-marke { border-style: solid; border-color: var(--linie); }

.gruppe-zusatz { font-weight: 400; color: var(--text-leise); }

.feldzeile.ankreuz { justify-content: flex-start; gap: .7rem; }
.feldzeile.ankreuz input {
  width: 24px; height: 24px; flex: none; accent-color: var(--akzent); cursor: pointer;
}
.feldzeile.ankreuz label { margin: 0; cursor: pointer; }

/* ---------- Vorlagen ---------- */

.vorlage {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: .9rem 1rem; margin-bottom: .8rem; background: var(--flaeche);
}
.vorlage h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.vorlage p { font-size: .95rem; color: var(--text-leise); }
.vorlage ul { margin: .4rem 0 .8rem; padding-left: 1.2rem; font-size: .95rem; color: var(--text-leise); }
.vorlage > button { width: 100%; }

.vorlage-aufgaben { margin: .6rem 0 .5rem; }
/* Die ganze Zeile ist das Ziel, nicht nur das Kästchen – 48px hoch, damit ein
   Daumen sie trifft, ohne danebenzugreifen. */
.vorlage-zeile {
  display: flex; align-items: flex-start; gap: .7rem;
  min-height: 48px; padding: .35rem .4rem;
  border-radius: 8px; cursor: pointer;
}
.vorlage-zeile:hover { background: var(--flaeche-tief); }
.vorlage-zeile.fest { cursor: default; }
.vorlage-zeile.fest:hover { background: none; }
.vorlage-zeile input {
  width: 24px; height: 24px; margin: .45rem 0 0; flex: none;
  accent-color: var(--akzent); cursor: pointer;
}
.vorlage-zeile.fest input { cursor: not-allowed; }
.vorlage-text { display: flex; flex-direction: column; gap: .1rem; padding-top: .25rem; }
.vorlage-titel { display: block; font-size: 1rem; color: var(--text); }
.vorlage-zeile.fest .vorlage-titel { color: var(--text-leise); }
.vorlage-takt { display: block; font-size: .95rem; color: var(--text-leise); }

.vorlage-wer { margin: .6rem 0 .8rem; display: flex; flex-direction: column; gap: .4rem; }
.vorlage-wer-titel { font-size: .95rem; font-weight: 600; color: var(--text-leise); }

.vorlage-schalter { display: flex; gap: .5rem; margin-bottom: .7rem; }
.vorlage-schalter button {
  width: auto; flex: 0 0 auto; min-height: 40px;
  padding: .3rem .9rem; font-size: .95rem;
}

/* ---------- Abgleich ---------- */

.qr-rahmen {
  display: flex; justify-content: center; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
  padding: .8rem; margin-bottom: 1rem; min-height: 8rem;
}
.qr-rahmen canvas { max-width: 100%; height: auto; image-rendering: pixelated; }
.qr-rahmen video { max-width: 100%; border-radius: 8px; background: #000; }

.konflikt {
  border: 2px solid var(--warn-rahmen); background: var(--warn-flaeche);
  border-radius: 10px; padding: .9rem 1rem; margin-bottom: .8rem;
}
.konflikt h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.konflikt p { font-size: .95rem; margin: 0 0 .6rem; }
.konflikt .wahl { display: flex; flex-direction: column; gap: .5rem; }
.konflikt .wahl button { width: 100%; text-align: left; }

/* ---------- Leseseite ---------- */

.lese-seite { padding-bottom: 3rem; }
.lese-seite .zeile { cursor: default; }
.lese-seite .tagkopf { top: 0; }
.lese-zeile { min-height: 0; }
.lese-aufgabe { font-size: .95rem; padding: .4rem 0; border-bottom: 1px solid var(--linie); }

.freigabe {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: .8rem 1rem; margin-bottom: .7rem; background: var(--flaeche);
}
.freigabe h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.freigabe p { font-size: .95rem; color: var(--text-leise); margin: 0 0 .6rem; }
.freigabe .knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.freigabe .knoepfe button { flex: 1 1 8rem; }

/* ---------- Hilfe-Fragezeichen ---------- */

.abschnitt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hilfe {
  flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0;
  border-radius: 50%; border: 2px solid var(--rahmen);
  background: var(--grund); color: var(--text-leise);
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  text-transform: none; letter-spacing: 0;
}

/* ---------- Handbuch ---------- */

.hb-eintrag {
  display: block; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--linie); border-radius: 0;
  background: none; color: inherit; padding: .7rem .2rem; min-height: 48px;
}
.hb-eintrag .hb-titel { display: block; font-weight: 600; }
.hb-eintrag .hb-auszug { display: block; font-size: .9rem; color: var(--text-leise); }
.hb-teil {
  font-size: .95rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-leise); margin: 1.2rem 0 .3rem;
}
#hb-kapitel h3 { font-size: 1.15rem; margin: .8rem 0 .6rem; }
#hb-kapitel-text p { margin-bottom: .8rem; }
#hb-zurueck { width: 100%; }

/* ---------- Essensplan ---------- */

.essen-zeile {
  display: block; font-size: .95rem; color: var(--text-leise);
  padding: .4rem .2rem; border-bottom: 1px solid var(--linie);
}
.essen-zeile strong { color: var(--text); font-weight: 600; }

/* ---------- Kindermodus ---------- */

#kindmodus { padding: 0 1rem calc(2rem + env(safe-area-inset-bottom)); max-width: 40rem; margin: 0 auto; }
.kind-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(1rem + env(safe-area-inset-top)) 0 1rem;
  border-bottom: 2px solid var(--linie); margin-bottom: 1rem;
}
.kind-kopf h1 { font-size: 1.8rem; }
.kind-karte {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem;
  border: 2px solid var(--linie); border-radius: 16px;
  padding: 1rem; margin-bottom: .9rem; background: var(--flaeche);
}
.kind-karte .kind-zeit {
  flex: none; order: 1; font-size: 1.3rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kind-karte .chip-person { order: 2; }
.kind-karte .haken { order: 1; }
/* Der Text bekommt eine eigene Zeile über die volle Breite – sonst quetscht er
   sich neben Uhrzeit und Kürzel in eine Spalte von vier Wörtern Breite. */
.kind-karte .kind-text { flex: 1 1 100%; order: 3; min-width: 0; }
.kind-karte.kind-aufgabe .kind-text { flex: 1 1 auto; order: 2; }
.kind-karte .kind-titel { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.kind-karte .kind-wer { display: block; font-size: 1rem; color: var(--text-leise); }
.kind-aufgabe { background: var(--grund); }
.kind-aufgabe .haken { width: 60px; height: 60px; font-size: 1.7rem; }
.kind-abschnitt { font-size: 1.15rem; font-weight: 700; margin: 1.6rem 0 .7rem; }
.kind-fuss { margin-top: 2rem; }
.kind-fuss button { width: 100%; }