/* FamLog - Wand-Tablet. Auf Blickdistanz gebaut: große Schrift, klare Farben, keine Kleinigkeiten.
   Alle Maße hängen an --e (ein "Wandpunkt"), damit 11"- und 13"-Tablets gleich aussehen. */
:root {
  --navy: #1C3A5B;
  --teal: #22B2A1;
  --papier: #F4F1EA;
  --karte: #FFFFFF;
  --text: #17222E;
  --leise: #6B7684;
  --linie: #E4DED2;
  --feiertag: #FFF1CF;
  --feiertag-text: #835600;
  --gefahr: #D64545;
  --e: clamp(13px, 1.18vw, 24px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--papier); color: var(--text);
  font: 500 var(--e)/1.3 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none;
  overflow: hidden; overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }

/* ---------- Kopplung ---------- */
body.koppeln { display: grid; place-items: center; text-align: center; padding: 24px; overflow: auto; }
.koppeln .logo { width: calc(var(--e) * 16); margin-bottom: calc(var(--e) * 2); }
.koppeln h1 { font-size: calc(var(--e) * 2); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .6em; }
.koppeln p { font-size: calc(var(--e) * 1.2); margin: .4em 0; }
.koppeln .code {
  display: inline-flex; gap: .15em; margin: .5em 0; padding: .25em .6em; border-radius: .3em;
  font-size: calc(var(--e) * 6); font-weight: 800; letter-spacing: .12em; color: var(--navy);
  background: var(--karte); box-shadow: 0 6px 30px rgb(28 58 91 / 10%); font-variant-numeric: tabular-nums;
}
.koppeln .code span { width: .3em; }
.leise { color: var(--leise); }
.klein { font-size: calc(var(--e) * .95) !important; }

/* ---------- Wand ---------- */
body.wand {
  display: grid; grid-template-rows: auto auto 1fr; height: 100vh; height: 100dvh;
  padding: calc(env(safe-area-inset-top) + var(--e) * .9) calc(var(--e) * 1.1) calc(env(safe-area-inset-bottom) + var(--e) * .9);
  gap: calc(var(--e) * .6);
}
.oben { display: flex; align-items: center; gap: calc(var(--e) * 1.4); }
.uhr { display: flex; flex-direction: column; line-height: 1; }
.uhr b { font-size: calc(var(--e) * 3.4); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--navy); }
.uhr span { font-size: calc(var(--e) * 1.15); font-weight: 700; color: var(--leise); margin-top: .25em; }

.leute { flex: 1; display: flex; flex-wrap: wrap; gap: calc(var(--e) * .45); justify-content: center; }
.leute button {
  display: inline-flex; align-items: center; gap: .45em; padding: .3em .85em .3em .3em; border-radius: 99px;
  background: var(--karte); font-weight: 700; box-shadow: 0 1px 3px rgb(28 58 91 / 8%);
  border: 2px solid transparent; transition: opacity .2s, border-color .2s;
}
.leute button.an { border-color: var(--c); }
.leute.gefiltert button:not(.an) { opacity: .4; }

.avatar {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%; color: #fff; font-weight: 800;
  width: 1.9em; height: 1.9em; font-size: 1em; background: var(--c, var(--leise));
}
.avatar.mini { width: 1.45em; height: 1.45em; font-size: .78em; }

.steuer { display: flex; align-items: center; gap: calc(var(--e) * .45); }
.steuer .rund, .steuer .text, .steuer .plus {
  height: calc(var(--e) * 2.7); min-width: calc(var(--e) * 2.7); border-radius: calc(var(--e) * .9);
  background: var(--karte); font-weight: 800; font-size: calc(var(--e) * 1.3); box-shadow: 0 1px 3px rgb(28 58 91 / 8%);
}
.steuer .text { padding: 0 1em; font-size: calc(var(--e) * 1.05); }
.steuer .plus { background: var(--teal); color: #fff; font-size: calc(var(--e) * 1.9); box-shadow: 0 4px 14px rgb(34 178 161 / 35%); margin-left: calc(var(--e) * .3); }
.umschalter { display: flex; background: var(--linie); border-radius: calc(var(--e) * .9); padding: 3px; margin-right: calc(var(--e) * .4); }
.umschalter button { padding: 0 .75em; height: calc(var(--e) * 2.4); border-radius: calc(var(--e) * .75); font-weight: 700; color: var(--leise); }
.umschalter button.an { background: var(--karte); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / 10%); }

.titelzeile { display: flex; align-items: baseline; gap: 1em; padding: 0 .2em; font-weight: 700; color: var(--leise); white-space: nowrap; overflow: hidden; }
.titelzeile #zeitraum { color: var(--text); font-weight: 800; font-size: 1.15em; }
.geburtstage { overflow: hidden; text-overflow: ellipsis; }
.offline { margin-left: auto; color: var(--gefahr); }

/* ---------- Woche: Zeitraster wie am Stehkalender ---------- */
.raster { min-height: 0; }
.raster.zeit {
  --zeitspalte: 2.6em; --spalten: var(--zeitspalte) repeat(var(--n, 7), minmax(0, 1fr));
  display: flex; flex-direction: column; background: var(--karte); border-radius: calc(var(--e) * 1);
  box-shadow: 0 1px 3px rgb(28 58 91 / 7%); overflow: hidden;
}
.w-kopfzeile, .w-ganzzeile, .w-flaeche { display: grid; grid-template-columns: var(--spalten); }
.w-kopfzeile > *, .w-ganzzeile > *, .w-tag { border-left: 1px solid var(--linie); min-width: 0; }
.w-kopfzeile > .w-ecke, .w-ganzzeile > .w-ecke { border-left: 0; }
.w-kopf { display: flex; align-items: baseline; justify-content: center; gap: .35em; padding: .45em .3em .35em; border-bottom: 1px solid var(--linie); }
.w-kopf b { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); }
.w-kopf span { font-size: 1.55em; font-weight: 800; letter-spacing: -.03em; }
.woche .w-kopf.wochenende b { color: var(--gefahr); }
.woche .w-kopf.heute span {
  background: var(--gefahr); color: #fff; border-radius: 99px; min-width: 1.6em; padding: 0 .25em; text-align: center; line-height: 1.5;
}
.woche .w-kopf.heute b { color: var(--gefahr); }
.w-ganzzeile { border-bottom: 2px solid var(--linie); }
.w-ganz { display: flex; flex-direction: column; gap: .25em; padding: .3em; min-height: 2.2em; max-height: 7.5em; overflow-y: auto; scrollbar-width: none; }
.w-ganz::-webkit-scrollbar { display: none; }
.w-ganz .karte-termin, .w-ganz .pille { font-size: .88em; }
.w-flaeche { flex: 1; min-height: 0; position: relative; }
.w-zeiten { position: relative; }
.w-zeiten span {
  position: absolute; right: .45em; transform: translateY(-50%); font-size: .8em; font-weight: 700;
  color: var(--leise); font-variant-numeric: tabular-nums;
}
.w-tag {
  position: relative;
  background-image: linear-gradient(var(--linie) 1px, transparent 1px);
  background-size: 100% calc(100% / var(--stunden));
}
.w-tag.wochenende, .w-ganz.wochenende { background-color: #FBFAF6; }
.w-tag.ferien, .w-ganz.ferien { background-color: #F5FBF6; }
.w-tag.heute, .w-ganz.heute { background-color: #F2FAF9; }
.w-tag.vorbei > *, .w-ganz.vorbei > *, .w-kopf.vorbei { opacity: .5; }

/* Termin im Raster: Lage und Höhe kommen aus der Uhrzeit */
.karte-termin.im-raster {
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; overflow: hidden;
  position: absolute; padding: .25em .35em .25em .55em; border-radius: .45em; border: 1.5px solid var(--karte);
  font-size: .9em; line-height: 1.18; min-height: 1.55em; z-index: 1;
}
.karte-termin.im-raster::before { width: .26em; }
.karte-termin.im-raster .z { font-size: .85em; }
.karte-termin.im-raster .o { font-size: .8em; }
.karte-termin.im-raster.kurz { flex-direction: row; gap: .35em; align-items: center; white-space: nowrap; }
.karte-termin.im-raster.kurz .t { overflow: hidden; text-overflow: ellipsis; }
.karte-termin.im-raster.kurz .o { display: none; }
.karte-termin.im-raster.kurz .zeile1 { flex: none; }
/* Schmale Karte: nur Beginn zeigen, Platz für die Teilnehmer */
@container (max-width: 9.5em) { .karte-termin .bis { display: none; } }
/* Im Raster etwas größere Köpfe - auf Blickdistanz erkennbar */
.karte-termin.im-raster .wer .avatar.mini { width: 1.7em; height: 1.7em; font-size: .78em; }
@container (max-width: 5.5em) { .karte-termin .wer .avatar + .avatar { margin-left: -.6em; } }

/* Roter Strich: jetzt */
.jetzt-linie {
  position: absolute; left: var(--zeitspalte); right: 0; height: 0; border-top: 1.5px solid rgb(214 69 69 / 45%);
  z-index: 3; pointer-events: none;
}
.jetzt-linie i { position: absolute; top: -2.5px; height: 4px; background: var(--gefahr); border-radius: 2px; }
.jetzt-linie i::before { content: ''; position: absolute; left: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--gefahr); }

/* Einträge */
.karte-termin {
  position: relative; text-align: left; width: 100%; border-radius: .6em; padding: .45em .55em .5em .8em;
  background: var(--c-hell, #F2F4F6);
  overflow: hidden; display: block;
}
.karte-termin::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .32em; background: var(--balken, var(--c, #9AA8B8)); }
.karte-termin .z { display: block; font-size: .88em; font-weight: 800; color: var(--c-dunkel, #4B525C); font-variant-numeric: tabular-nums; }
.karte-termin .t { display: block; font-weight: 700; line-height: 1.22; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.karte-termin .o { display: block; font-size: .82em; color: var(--leise); margin-top: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karte-termin .zeile1 { display: flex; align-items: center; gap: .3em; min-width: 0; }
.karte-termin .zeile1 .z { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karte-termin .wer { display: flex; flex: none; margin-left: auto; }
/* Teilnehmer leicht überlappend, mit weißem Rand - wie eine kleine Gruppe */
.karte-termin .wer .avatar { box-shadow: 0 0 0 1.5px var(--karte); }
.karte-termin .wer .avatar + .avatar { margin-left: -.35em; }
.karte-termin.ganztags { background: var(--c, #9AA8B8); color: #fff; padding: .35em .55em; }
.karte-termin.ganztags::before { display: none; }
.karte-termin.ganztags .o { color: rgb(255 255 255 / 85%); }
.karte-termin.ganztags .wer .avatar { box-shadow: 0 0 0 1.5px rgb(255 255 255 / 70%); }
.karte-termin.ausgeblendet { display: none; }

.pille { border-radius: .6em; padding: .35em .55em; font-weight: 800; font-size: .92em; line-height: 1.2; }
.pille.feiertag { background: var(--feiertag); color: var(--feiertag-text); }
.pille.ferien { background: #E5F4E6; color: #2F6B33; font-weight: 700; }
.pille.ferien.erster { font-weight: 800; }
.pille.geburtstag { background: var(--c-hell, #FDE7E5); color: var(--text); display: flex; align-items: center; gap: .35em; }
.pille.geburtstag i { font-style: normal; font-size: 1.25em; }
.pille.geburtstag small { margin-left: auto; font-size: 1.1em; color: var(--c-dunkel, #B65044); }

.frei { flex: 1; min-height: 2em; }

/* ---------- Familie: ein Tag, eine Spalte je Person ---------- */
.raster.familie .w-kopf { justify-content: flex-start; align-items: center; gap: .45em; padding: .45em .55em; }
.raster.familie .w-kopf b { color: var(--text); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raster.familie .w-tag.heute, .raster.familie .w-ganz.heute { background-color: var(--karte); }
.raster.familie .w-tag.ferien, .raster.familie .w-ganz.ferien { background-color: #F5FBF6; }

/* ---------- Ohne Kalender (Listen, Routinen): Wochennavigation und Filter weg ---------- */
body.ohne-kalender #zurueck, body.ohne-kalender #heute, body.ohne-kalender #vor, body.ohne-kalender .leute { visibility: hidden; }

.tafel { background: var(--karte); border-radius: calc(var(--e) * 1); box-shadow: 0 1px 3px rgb(28 58 91 / 7%); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tafel-kopf { display: flex; align-items: center; gap: .8em; padding: .8em 1em .4em; flex-wrap: wrap; }
.tafel-kopf h2 { margin: 0; font-size: 1.5em; font-weight: 800; letter-spacing: -.02em; }
.tafel-reiter { display: flex; gap: .3em; }
.tafel-reiter button { padding: .3em .8em; border-radius: 99px; background: var(--papier); font-weight: 700; }
.tafel-reiter button.an { background: var(--navy); color: #fff; }
.leise-knopf { margin-left: auto; color: var(--leise); font-weight: 700; padding: .3em .6em; }
.eingabe { display: flex; gap: .5em; padding: .4em 1em .6em; }
.eingabe input { flex: 1; min-width: 0; font: inherit; font-size: 1.15em; padding: .5em .8em; border-radius: .7em; border: 2px solid var(--linie); background: var(--papier); color: var(--text); -webkit-user-select: text; user-select: text; }
.eingabe input:focus { outline: none; border-color: var(--teal); background: var(--karte); }
.plus-knopf { width: 2.6em; flex: none; border-radius: .7em; background: var(--teal); color: #fff; font-size: 1.6em; font-weight: 800; line-height: 1; }
.vorschlaege { display: flex; gap: .4em; padding: 0 1em .6em; overflow-x: auto; scrollbar-width: none; }
.vorschlaege button { flex: none; padding: .3em .8em; border-radius: 99px; border: 1.5px dashed var(--linie); color: var(--leise); font-weight: 700; }
.wer-wahl { display: flex; gap: .4em; padding: 0 1em .6em; flex-wrap: wrap; }
.wer-wahl button { display: inline-flex; align-items: center; gap: .35em; padding: .2em .7em .2em .2em; border-radius: 99px; background: var(--papier); font-weight: 700; border: 2px solid transparent; }
.wer-wahl button.an { border-color: var(--c); background: var(--c-hell); }
.tafel-liste { flex: 1; overflow-y: auto; border-top: 1px solid var(--linie); scrollbar-width: none; }
.abhaken { display: flex; align-items: center; gap: .8em; width: 100%; text-align: left; padding: .7em 1em; border-bottom: 1px solid var(--linie); font-size: 1.15em; font-weight: 700; }
.abhaken .kreis { flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2.5px solid var(--linie); display: grid; place-items: center; color: transparent; font-weight: 900; font-size: .9em; }
.abhaken .text { flex: 1; min-width: 0; }
.abhaken .text em { font-style: normal; color: var(--leise); }
.abhaken .text small { display: block; font-size: .75em; color: var(--leise); }
.abhaken .text small.ueber { color: var(--gefahr); }
.abhaken.erledigt .kreis { background: var(--teal); border-color: var(--teal); color: #fff; }
.abhaken.erledigt .text { text-decoration: line-through; color: var(--leise); font-weight: 500; }
.leer-hinweis { color: var(--leise); text-align: center; padding: 2em 1em; font-weight: 700; margin: 0; }
.leer-gross { justify-content: center; align-items: center; text-align: center; padding: 3em; grid-column: 1 / -1; }
.leer-gross b { font-size: 1.8em; }
.leer-gross p { max-width: 30em; color: var(--leise); font-size: 1.15em; }

.raster.listen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--e) * .6); }
.raster.routinen { display: grid; gap: calc(var(--e) * .6); }

/* Routinen: ein Kind je Spalte */
.kind { border-top: .35em solid var(--c); overflow-y: auto; scrollbar-width: none; }
.kind-kopf { display: flex; align-items: center; gap: .6em; padding: .8em 1em .5em; font-size: 1.3em; }
.kind-kopf b { font-weight: 800; flex: 1; }
.sterne { font-weight: 800; color: #B7791F; background: #FFF4D6; padding: .15em .6em; border-radius: 99px; font-size: .85em; }
.routine { padding: .2em 1em 1em; }
.routine-kopf { display: flex; align-items: baseline; justify-content: space-between; font-weight: 800; font-size: 1.15em; margin: .4em 0 .4em; }
.routine-kopf small { color: var(--leise); font-weight: 700; font-size: .85em; }
.routine.geschafft .routine-kopf small { color: var(--teal); }
.fortschritt { height: .55em; background: var(--linie); border-radius: 99px; overflow: hidden; margin-bottom: .7em; }
.fortschritt span { display: block; height: 100%; background: var(--c); border-radius: 99px; transition: width .35s ease; }
.schritte { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr)); gap: .5em; }
.schritt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em;
  min-height: 6.2em; padding: .6em .4em; border-radius: 1em; background: var(--c-zart);
  border: 2px solid var(--c-rand); font-weight: 700; text-align: center; line-height: 1.15;
  transition: transform .15s, background .2s;
}
.schritt .emoji { font-size: 2.2em; line-height: 1; }
.schritt .haken { position: absolute; top: .35em; right: .35em; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--karte); color: transparent; display: grid; place-items: center; font-weight: 900; font-size: .9em; }
.schritt.erledigt { background: var(--c); border-color: var(--c); color: #fff; }
.schritt.erledigt .haken { color: var(--c); }
.schritt.erledigt .emoji { filter: saturate(.4) brightness(1.2); }
.schritt.hops { transform: scale(1.08); }
.routine.spaeter { opacity: .75; }
.routine.spaeter .schritt { min-height: 4.4em; }
.routine.spaeter .schritt .emoji { font-size: 1.5em; }

/* ---------- Blatt (Dialog) ---------- */
.schleier { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgb(15 28 43 / 45%); z-index: 40; animation: einblenden .2s; }
.blatt {
  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, calc(var(--e) * 46)); max-height: 92vh; overflow: auto;
  background: var(--karte); border-radius: calc(var(--e) * 1.4); padding: calc(var(--e) * 1.4);
  box-shadow: 0 20px 60px rgb(0 0 0 / 30%); animation: hoch .22s ease-out;
  -webkit-user-select: text; user-select: text;
}
@keyframes einblenden { from { opacity: 0; } }
@keyframes hoch { from { opacity: 0; transform: translate(-50%, -46%); } }
.blatt-kopf { display: flex; align-items: flex-start; gap: 1em; margin-bottom: .8em; }
.blatt-kopf h2 { flex: 1; margin: 0; font-size: 1.7em; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.schliessen { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--papier); font-size: 1.4em; line-height: 1; flex: none; }
.detail p { margin: .45em 0; font-size: 1.15em; }
.detail .wer { display: flex; flex-wrap: wrap; gap: .5em; margin: .8em 0; }
.detail .wer span { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; }
.detail .notiz { white-space: pre-wrap; background: var(--papier); border-radius: .6em; padding: .7em .8em; font-size: 1.05em; }

.formular { display: flex; flex-direction: column; gap: .8em; }
.formular input, .formular select, .formular textarea {
  width: 100%; font: inherit; font-size: 1.05em; color: var(--text); background: var(--papier);
  border: 2px solid transparent; border-radius: .6em; padding: .55em .7em; min-height: 2.6em;
  -webkit-appearance: none; appearance: none; margin-top: .25em;
}
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--teal); background: var(--karte); }
.formular input.gross { font-size: 1.45em; font-weight: 700; padding: .45em .6em; margin: 0; }
.formular label { font-weight: 700; color: var(--leise); font-size: .95em; flex: 1; min-width: 0; }
.formular .reihe { display: flex; gap: .7em; align-items: flex-end; }
.formular .kipp { display: flex; align-items: center; gap: .5em; flex: none; color: var(--text); padding-bottom: .6em; }
.formular .kipp input { width: 1.4em; height: 1.4em; min-height: 0; padding: 0; margin: 0; -webkit-appearance: checkbox; appearance: auto; accent-color: var(--teal); }
.formular .breit { flex: 2; }
.formular .wer { display: flex; flex-wrap: wrap; gap: .5em; }
.formular .wer button {
  display: inline-flex; align-items: center; gap: .45em; padding: .3em .9em .3em .3em; border-radius: 99px;
  background: var(--papier); font-weight: 700; border: 2px solid transparent;
}
.formular .wer button.an { border-color: var(--c); background: var(--c-hell); }
.fehler { background: #FDECEC; color: #8E1F1F; border-radius: .6em; padding: .6em .8em; font-weight: 700; }
.knoepfe { display: flex; gap: .6em; align-items: center; margin-top: .3em; }
.knoepfe span { flex: 1; }
.knopf { height: 2.8em; padding: 0 1.3em; border-radius: .75em; background: var(--navy); color: #fff; font-weight: 800; font-size: 1.05em; }
.knopf.zweit { background: var(--papier); color: var(--text); }
.knopf.gefahr { background: transparent; color: var(--gefahr); border: 2px solid currentColor; }

/* ---------- Nacht ---------- */
.nacht { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; background: #050A10; color: #5E6E80; display: grid; place-items: center; text-align: center; }
.nacht b { display: block; font-size: calc(var(--e) * 7); font-weight: 800; letter-spacing: -.04em; color: #3B4C5F; font-variant-numeric: tabular-nums; }
.nacht span { font-size: calc(var(--e) * 1.3); font-weight: 700; }

/* ---------- Hochformat: gleiches Raster, etwas größere Schrift ---------- */
@media (orientation: portrait) {
  :root { --e: clamp(13px, 1.75vw, 24px); }
  .oben { flex-wrap: wrap; }
  .leute { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .steuer { margin-left: auto; }
  .raster.zeit { --zeitspalte: 2.2em; }
  .karte-termin.im-raster { font-size: .82em; }
  .karte-termin.im-raster .o { display: none; }
}

/* Serie: nur dieser / folgende / alle */
.umfang { display: flex; flex-wrap: wrap; gap: .4em .8em; align-items: center; background: var(--papier); border-radius: .6em; padding: .6em .8em; font-weight: 700; }
.umfang span { color: var(--leise); }
.umfang label { display: inline-flex; align-items: center; gap: .35em; color: var(--text); flex: none; font-size: 1em; }
.umfang input { width: 1.2em; height: 1.2em; min-height: 0; margin: 0; padding: 0; -webkit-appearance: radio; appearance: auto; accent-color: var(--teal); }

/* Belohnungen */
.geschenk { font-size: 1.1em; width: 2em; height: 2em; border-radius: 50%; background: #FFF4D6; flex: none; }
.wartet { display: flex; flex-wrap: wrap; gap: .3em; padding: 0 1em .4em; }
.wartet span { font-size: .85em; font-weight: 700; color: #835600; background: #FFF4D6; border-radius: 99px; padding: .15em .6em; }
.belohnungen { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: .6em; }
.belohnung {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .25em; padding: .8em .5em .7em; border-radius: 1em;
  background: var(--c-zart); border: 2px solid var(--c-rand); font-weight: 700; text-align: center;
}
.belohnung .emoji { font-size: 2.4em; line-height: 1.1; }
.belohnung .preis { font-weight: 800; color: #B7791F; }
.belohnung .nochmal { display: none; font-size: .78em; color: var(--c); }
.belohnung.gewaehlt { background: var(--karte); border-color: var(--c); box-shadow: 0 0 0 3px var(--c-ring); }
.belohnung.gewaehlt .nochmal { display: block; }
.belohnung.zu-teuer { opacity: .45; }
.belohnung.zu-teuer .preis { color: var(--leise); }
.jubel { text-align: center; }
.jubel-emoji { font-size: 5em; line-height: 1; margin: .2em 0; animation: hops .6s ease-out; }
.jubel h2 { font-size: 2em; margin: .2em 0; }
@keyframes hops { 0% { transform: scale(.3); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ---------- Termin-Formular: für Finger, nicht für Maus ---------- */
.blatt.breit { width: min(96vw, calc(var(--e) * 64)); max-height: 94vh; padding: calc(var(--e) * 1.2) calc(var(--e) * 1.4); }
.termin-form { gap: .9em; }
.termin-form .gross { font-size: 1.5em; }
.termin-form .wer button { padding: .4em 1em .4em .4em; font-size: 1.05em; }
.tf-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.4em; align-items: start; }
.tf-feld { display: flex; flex-direction: column; gap: .65em; min-width: 0; }
.tf-kopf { display: flex; align-items: baseline; gap: .6em; margin-top: .2em; }
.tf-kopf b { font-weight: 800; }
.tf-kopf span { color: #188C7F; font-weight: 800; }
.tf-schalter { display: flex; align-items: center; gap: .6em; font-weight: 700; color: var(--text) !important; padding: .3em 0; }
.tf-schalter input { width: 1.5em; height: 1.5em; min-height: 0; margin: 0; padding: 0; -webkit-appearance: checkbox; appearance: auto; accent-color: var(--teal); flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: .45em; }
.chips button {
  min-height: 2.6em; padding: 0 1.05em; border-radius: 99px; background: var(--papier);
  font-weight: 700; border: 2px solid transparent; white-space: nowrap;
}
.chips button.an { background: var(--navy); color: #fff; }

.kal { background: var(--papier); border-radius: 1em; padding: .6em; }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4em; }
.kal-kopf b { font-weight: 800; font-size: 1.1em; }
.kal-kopf button { width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--karte); font-size: 1.3em; font-weight: 800; }
.kal-gitter { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2em; text-align: center; }
.kal-gitter > span { font-size: .8em; font-weight: 800; color: var(--leise); padding: .2em 0; }
.kal-tag { height: 2.55em; border-radius: .65em; font-weight: 700; font-variant-numeric: tabular-nums; }
.kal-tag.fremd { opacity: .35; }
.kal-tag.heute { box-shadow: inset 0 0 0 2px var(--teal); }
.kal-tag.im-bereich { background: #D3F0EC; border-radius: 0; }
.kal-tag.anfang { border-top-left-radius: .65em; border-bottom-left-radius: .65em; }
.kal-tag.ende { border-top-right-radius: .65em; border-bottom-right-radius: .65em; }
.kal-tag.anfang, .kal-tag.ende { background: var(--teal); color: #fff; }
.kal.klein .kal-tag { height: 2.2em; }

.zeiten { display: flex; flex-direction: column; gap: .5em; }
.zeit-felder { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.zeit-feld {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1em; padding: .5em .9em .55em;
  border-radius: .9em; background: var(--papier); border: 2px solid transparent; text-align: left;
}
.zeit-feld span { font-weight: 700; color: var(--leise); font-size: .9em; }
.zeit-feld b { font-size: 2.1em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.zeit-feld:active { border-color: var(--teal); }
.chips .leise { align-self: center; font-weight: 700; margin-right: .1em; }

/* Uhr zum Zeit-Wählen */
.uhr-schleier { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; background: rgb(15 28 43 / 35%); }
.uhr-blatt {
  position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%, -50%);
  --blatt-groesse: calc(var(--e) * 26);
  width: calc(var(--blatt-groesse) + var(--e) * 2.2); max-width: 94vw; background: var(--karte); border-radius: calc(var(--e) * 1.4);
  padding: calc(var(--e) * 1.1); box-shadow: 0 20px 60px rgb(0 0 0 / 35%); animation: einblenden .15s;
}
.uhr-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6em; }
.uhr-kopf > span { font-weight: 800; color: var(--leise); }
.uhr-zeit { display: flex; align-items: center; gap: .1em; font-size: 2.6em; font-weight: 800; font-variant-numeric: tabular-nums; }
.uhr-teil { padding: 0 .15em; border-radius: .2em; color: var(--leise); font-weight: 800; }
.uhr-teil.an { background: #D3F0EC; color: #188C7F; }
.zifferblatt {
  /* feste Größe statt aspect-ratio - ältere iPads kennen das nicht */
  position: relative; width: var(--blatt-groesse); height: var(--blatt-groesse); border-radius: 50%; background: var(--papier);
  touch-action: none; margin: .2em 0 .8em;
}
.zifferblatt .mitte { position: absolute; left: 50%; top: 50%; width: .5em; height: .5em; margin: -.25em 0 0 -.25em; border-radius: 50%; background: var(--teal); }
.ziffern { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.ziffer {
  position: absolute; width: 2.3em; height: 2.3em; margin: -1.15em 0 0 -1.15em; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05em; font-variant-numeric: tabular-nums; z-index: 1;
}
.ziffer.innen { font-size: .88em; color: var(--leise); width: 2.1em; height: 2.1em; margin: -1.05em 0 0 -1.05em; }
.ziffer.an { background: var(--teal); color: #fff; }
.zeiger {
  position: absolute; left: 50%; bottom: 50%; width: 2px; margin-left: -1px; background: var(--teal);
  height: calc(var(--r) * 50%); transform-origin: 50% 100%; transform: rotate(var(--w)); pointer-events: none;
}
/* Minuten zwischen den 5er-Marken: kleiner Punkt an der Zeigerspitze */
.zeiger.zwischen::after { content: ''; position: absolute; left: 50%; top: 0; width: 1.9em; height: 1.9em; margin: -.95em 0 0 -.95em; border-radius: 50%; background: var(--teal); box-shadow: inset 0 0 0 .7em var(--teal), inset 0 0 0 .75em #fff; }

@media (orientation: portrait) {
  .tf-spalten { grid-template-columns: 1fr; }
}
.dauer-text { margin: -.1em 0 0 .2em; font-weight: 700; color: #188C7F; }
.dauer-text.falsch, .zeit-feld.falsch b { color: var(--gefahr); }
.zeit-feld.falsch { border-color: var(--gefahr); }
.zeit-feld.blinkt { animation: blinkt .9s ease-out; }
@keyframes blinkt { 0%, 40% { background: #D3F0EC; border-color: var(--teal); } 100% { background: var(--papier); border-color: transparent; } }