/* ===================================================================
   Family !Plan — Design-System
   CoreX / TiNi #Software
   -------------------------------------------------------------------
   Created:     2026-09-10
   Last Change: 2026-09-10

   WARUM DIESE DATEI IM ADDON LIEGT UND NICHT IM THEME

   Der Kern hat ein Theme-System (themes/<slug>/ ueberschreibt
   templates/defaults/). Naheliegend waere, das ganze Design dort
   abzulegen. Zwei Gruende dagegen:

   1. resolveThemePath() deckt Addon-Module NICHT ab — der Ausdruck
      passt nur auf coreX/modules/…/templates/…. Die Familien-Vorlagen
      tragen die neuen Klassen also ohnehin selbst.
   2. Waere das Design im Theme, saehe das Board unter jedem anderen
      Theme kaputt aus — nicht schlichter, sondern falsch: Karten ohne
      Rahmen, Fortschritt ohne Balken, Punktestaende ohne Form.

   Deshalb: das Design-System liegt beim Modul und wird von jeder
   Familienseite eingehaengt (family_admin::assets()). Das Theme
   family-plan liefert nur die HUELLE — Hintergrund, Navigation,
   Typografie — und ist optional.

   AUFBAU

   1. Custom Properties          (ein Ort fuer alle Werte)
   2. Akzentfarben je Person     (--fp-accent, gesetzt am Element)
   3. Grundflaechen              .glass-card .glass-panel
   4. Bausteine                  .task-card .reward-card .progress-card
                                 .family-avatar .points-badge
   5. Bootstrap-Ueberschreibungen (nur was auf Familienseiten vorkommt)
   6. Bewegung                    inkl. prefers-reduced-motion
   7.-15. Einzelteile             kleine Bildschirme, Schrift, Farbwahl,
                                  Kiosk, Tagesleiste, Erledigt-Modal,
                                  Verwaltungskacheln, Kiosk-Leiste,
                                  Symbolauswahl
   =================================================================== */


/* ==================================================================
   1. CUSTOM PROPERTIES
   ================================================================== */

:root {
  /* --- Hintergrund: hell, weich, neutral. Die Farbe kommt aus den
         Akzenten der Personen, nicht aus der Flaeche. --- */
  --fp-bg:            #f4f6fb;
  --fp-bg-tint-a:     rgba(129, 140, 248, 0.20);   /* Indigo, oben rechts */
  --fp-bg-tint-b:     rgba(45, 212, 191, 0.16);    /* Teal, unten links  */
  --fp-bg-tint-c:     rgba(251, 191, 156, 0.14);   /* Apricot, Mitte     */

  /* --- Glas ---
         Zwei Stufen: Karten liegen auf der Flaeche (kraeftiger),
         Panels rahmen Gruppen von Karten (zurueckhaltender). */
  --fp-glass:         rgba(255, 255, 255, 0.68);
  --fp-glass-soft:    rgba(255, 255, 255, 0.46);
  --fp-glass-strong:  rgba(255, 255, 255, 0.82);
  --fp-glass-hover:   rgba(255, 255, 255, 0.86);
  --fp-blur:          18px;
  --fp-blur-sm:       10px;

  --fp-border:        rgba(255, 255, 255, 0.62);
  --fp-border-soft:   rgba(148, 163, 184, 0.22);

  /* Zwei Schatten: aufliegend und angehoben. Beide sehr weich und
     bewusst blau statt grau — ein grauer Schatten auf einem blau
     getoenten Hintergrund sieht schmutzig aus. */
  --fp-shadow:        0 12px 40px rgba(30, 40, 70, 0.08);
  --fp-shadow-lift:   0 18px 52px rgba(30, 40, 70, 0.14);
  --fp-sheen:         inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* --- Radien ---
         Grosszuegig, wie gewuenscht. Eine Stufung, damit kleine
         Elemente nicht wie Tabletten wirken. */
  --fp-radius:        24px;
  --fp-radius-lg:     28px;
  --fp-radius-sm:     16px;
  --fp-radius-pill:   999px;

  /* --- Text --- */
  --fp-text:          #1e293b;
  --fp-text-soft:     #64748b;
  --fp-text-dim:      #94a3b8;
  --fp-text-strong:   #0f172a;

  /* --- Zustaende ---
         Bewusst entsaettigt. "Ueberfaellig" soll auffallen, ohne ein
         Kind zu erschrecken: Bernstein statt Signalrot. Rot bleibt
         Fehlern vorbehalten, die jemand beheben muss. */
  --fp-ok:            #0f9d76;
  --fp-ok-soft:       rgba(15, 157, 118, 0.12);
  --fp-warn:          #d98324;
  --fp-warn-soft:     rgba(217, 131, 36, 0.13);
  --fp-late:          #c2683c;
  --fp-late-soft:     rgba(194, 104, 60, 0.13);
  --fp-info:          #4f77d4;
  /* Fuer das X im Erledigt-Modal: ein echtes Rot, aber entsaettigt.
     --fp-late (Terracotta) ist fuer "ueberfaellig" reserviert und
     waere hier nicht als Abbruch zu erkennen. */
  --fp-danger-ring:   #d2544f;
  --fp-info-soft:     rgba(79, 119, 212, 0.12);

  /* --- Der Akzent ---
         Das ist die eine Variable, die ueberall wirkt. Ohne Person
         gesetzt gilt dieser Wert; ein Element mit
         style="--fp-accent: …" faerbt sich und alles darin um.
         Die -rgb-Fassung braucht es fuer rgba()-Ableitungen: CSS kann
         aus #rrggbb keinen Alphawert bauen. */
  --fp-accent:        #5b7cfa;
  --fp-accent-rgb:    91, 124, 250;
  --fp-accent-ink:    #ffffff;   /* Text AUF der Akzentflaeche */

  /* --- Abstaende ---
         Nur zwei Werte. Die Luftigkeit entsteht aus Wiederholung,
         nicht aus vielen Sonderfaellen. */
  --fp-gap:           1.25rem;
  --fp-gap-lg:        2rem;

  /* --- Fingerziel ---
         44px ist die Untergrenze von Apples HIG und gilt hier fuer
         JEDEN Knopf, weil die Anwendung auf einem Wohnzimmertablet
         von Kindern bedient wird. */
  --fp-touch:         44px;

  /* --- Schrift ---
         System-Stack statt Google Fonts. Nicht aus Bequemlichkeit:
         eine Schriftart vom Google-CDN ist eine Uebermittlung an einen
         Empfaenger im Drittland, bei jedem Seitenaufruf, und diese
         Anwendung fuehrt ein Verarbeitungsverzeichnis. Der Stack liefert
         auf genau den Zielgeraeten das Gewuenschte: iPad/iPhone -> SF
         Pro, Android -> Roboto, Windows 11 -> Segoe UI Variable.

         Eigene Schrift gewuenscht? Eine .woff2 nach
         addon/modules/family_admin/assets/fonts/ legen, das @font-face
         am Ende dieser Datei einkommentieren — so macht es das
         lcars-Theme mit Antonio. NICHT per CDN einbinden. */
  --fp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text',
             'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif;
}


/* ==================================================================
   2. AKZENTFARBEN JE PERSON
   ------------------------------------------------------------------
   Als Klassen, damit die Vorlage einen NAMEN setzt und keinen
   Farbwert. Wer spaeter die Palette aendert, aendert sie hier — nicht
   in siebzehn Templates.

   Die Zuordnung Person -> Klasse kommt aus der Datenbank
   (addon_family_participants.accent_color). Ein leerer Wert bedeutet
   "kein eigener Akzent" und faellt auf den Vorgabewert zurueck.
   ================================================================== */

.fp-accent-blue     { --fp-accent: #4f7bf7; --fp-accent-rgb:  79, 123, 247; --fp-accent-ink: #fff; }
.fp-accent-petrol   { --fp-accent: #0e8a94; --fp-accent-rgb:  14, 138, 148; --fp-accent-ink: #fff; }
.fp-accent-violet   { --fp-accent: #7c5cf0; --fp-accent-rgb: 124,  92, 240; --fp-accent-ink: #fff; }
.fp-accent-mint     { --fp-accent: #17a97f; --fp-accent-rgb:  23, 169, 127; --fp-accent-ink: #fff; }
.fp-accent-orange   { --fp-accent: #e08234; --fp-accent-rgb: 224, 130,  52; --fp-accent-ink: #fff; }
.fp-accent-rose     { --fp-accent: #dd5f92; --fp-accent-rgb: 221,  95, 146; --fp-accent-ink: #fff; }
.fp-accent-lilac    { --fp-accent: #a05fd6; --fp-accent-rgb: 160,  95, 214; --fp-accent-ink: #fff; }
.fp-accent-sun      { --fp-accent: #cf9c1b; --fp-accent-rgb: 207, 156,  27; --fp-accent-ink: #fff; }
.fp-accent-sky      { --fp-accent: #2b8fc7; --fp-accent-rgb:  43, 143, 199; --fp-accent-ink: #fff; }
.fp-accent-forest   { --fp-accent: #3f8a52; --fp-accent-rgb:  63, 138,  82; --fp-accent-ink: #fff; }


/* ==================================================================
   3. GRUNDFLAECHEN
   ================================================================== */

/* Die Buehne. Traegt den Hintergrund, wenn kein Theme aktiv ist —
   damit die Familienseiten auch unter dem Standard-Theme aussehen wie
   gedacht. Ist family-plan aktiv, setzt dessen body denselben
   Hintergrund und diese Regel wird nicht gebraucht. */
.fp-stage {
  position: relative;
  font-family: var(--fp-font);
  color: var(--fp-text);
  padding-bottom: 1.5rem;
}

/* Die weichen Farbflaechen. Als ::before/::after am Buehnen-Element
   und nicht am body, weil das Modul den body nicht besitzt.
   pointer-events:none ist Pflicht — sonst faengt die Flaeche Klicks. */
.fp-stage::before,
.fp-stage::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(90px);
}
.fp-stage::before {
  width: 46rem; height: 46rem;
  top: -16rem; right: -12rem;
  background: radial-gradient(circle, var(--fp-bg-tint-a) 0%, transparent 68%);
}
.fp-stage::after {
  width: 38rem; height: 38rem;
  bottom: -14rem; left: -10rem;
  background: radial-gradient(circle, var(--fp-bg-tint-b) 0%, transparent 68%);
}

/* --- Die Karte. Das eine Grundelement. --- */
.glass-card {
  background: var(--fp-glass);
  -webkit-backdrop-filter: blur(var(--fp-blur)) saturate(140%);
  backdrop-filter: blur(var(--fp-blur)) saturate(140%);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow), var(--fp-sheen);
  padding: var(--fp-gap);
  position: relative;
}

/* Das Panel rahmt eine Gruppe von Karten und tritt dafuer zurueck.
   Ohne diese zweite Stufe stapeln sich sonst Glas auf Glas und das
   Bild wird milchig. */
.glass-panel {
  background: var(--fp-glass-soft);
  -webkit-backdrop-filter: blur(var(--fp-blur-sm));
  backdrop-filter: blur(var(--fp-blur-sm));
  border: 1px solid var(--fp-border-soft);
  border-radius: var(--fp-radius-lg);
  padding: var(--fp-gap-lg);
}

/* Anklickbare Karten: der Hinweis darauf gehoert an die Karte, nicht
   nur an den Knopf darin. */
.glass-card--tap {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.glass-card--tap:hover,
.glass-card--tap:focus-within {
  transform: translateY(-2px);
  background: var(--fp-glass-hover);
  box-shadow: var(--fp-shadow-lift), var(--fp-sheen);
}

/* Ein Akzentstreifen am linken Rand statt eines farbigen Rahmens.
   Ein voller Rahmen in der Personenfarbe konkurriert mit dem Glas und
   laesst die Karte wie eine Warnung aussehen. */
.glass-card--accent::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--fp-accent);
  opacity: .85;
}

.fp-section-title {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--fp-text-strong);
  margin: 0 0 .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.fp-section-title .fp-count {
  font-size: .78rem;
  font-weight: 600;
  color: var(--fp-text-soft);
  background: rgba(148, 163, 184, .16);
  border-radius: var(--fp-radius-pill);
  padding: .1rem .55rem;
}


/* ==================================================================
   4. BAUSTEINE
   ================================================================== */

/* --- Begruessung ------------------------------------------------- */

.fp-greeting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-gap);
}
.fp-greeting h1 {
  font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fp-text-strong);
  margin: 0;
}
.fp-greeting p {
  margin: .3rem 0 0;
  color: var(--fp-text-soft);
  font-size: .95rem;
}

/* --- Punktestand: das Wallet ------------------------------------- */

.points-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  border-radius: var(--fp-radius-pill);
  background: rgba(var(--fp-accent-rgb), .12);
  border: 1px solid rgba(var(--fp-accent-rgb), .22);
  color: var(--fp-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.points-badge--sm { padding: .2rem .55rem; font-size: .8rem; gap: .3rem; }

/* Das Wallet auf dem Dashboard: gross, aber nicht laut. Die Zahl
   traegt sich selbst, sie braucht keine farbige Flaeche. */
.points-wallet {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.35rem;
  border-radius: var(--fp-radius);
  background: var(--fp-glass-strong);
  border: 1px solid var(--fp-border);
  box-shadow: var(--fp-shadow), var(--fp-sheen);
}
.points-wallet__value {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--fp-accent);
  font-variant-numeric: tabular-nums;
}
.points-wallet__label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fp-text-dim);
  font-weight: 600;
}
.points-wallet__symbol { font-size: 1.5rem; line-height: 1; }

/* Mehrere Token-Sorten nebeneinander. */
.points-wallet__row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  align-items: flex-end;
}

/* --- Avatare ----------------------------------------------------- */

.family-avatar {
  --fp-avatar-size: 44px;
  width: var(--fp-avatar-size);
  height: var(--fp-avatar-size);
  flex: 0 0 var(--fp-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--fp-accent-rgb), .16);
  color: var(--fp-accent);
  font-weight: 700;
  font-size: calc(var(--fp-avatar-size) * .40);
  line-height: 1;
  /* Der Ring in der Personenfarbe ist die eigentliche Kennzeichnung —
     er wirkt auch dann, wenn kein Foto hinterlegt ist. */
  box-shadow: 0 0 0 2px rgba(var(--fp-accent-rgb), .30),
              0 2px 8px rgba(30, 40, 70, .10);
  -webkit-user-select: none;   /* Safari/iOS: ohne Praefix wirkungslos */
  user-select: none;
}
.family-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.family-avatar--sm { --fp-avatar-size: 32px; }
.family-avatar--lg { --fp-avatar-size: 64px; }
.family-avatar--xl { --fp-avatar-size: 88px; }

/* Ein Kachelgitter der Familie. auto-fit statt fester Spalten: vier
   Personen fuellen die Breite, zwei stehen nicht verloren links. */
.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--fp-gap);
}
.family-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 1rem .5rem;
  border-radius: var(--fp-radius-sm);
  transition: background-color .18s ease;
}
.family-member:hover { background: rgba(var(--fp-accent-rgb), .07); }
.family-member__name { font-weight: 650; font-size: .95rem; color: var(--fp-text-strong); }
.family-member__meta { font-size: .8rem; color: var(--fp-text-soft); }

/* --- Aufgabenkarte ----------------------------------------------- */

.task-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  height: 100%;
  background: var(--fp-glass);
  -webkit-backdrop-filter: blur(var(--fp-blur)) saturate(140%);
  backdrop-filter: blur(var(--fp-blur)) saturate(140%);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow), var(--fp-sheen);
  padding: 1.15rem;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.task-card:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-lift), var(--fp-sheen); }

.task-card__head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
/* Das Emoji/Icon als eigene Flaeche. Ein Emoji im Textfluss wird von
   Kindern uebersehen; als Kachel ist es der Einstiegspunkt. */
.task-card__icon {
  flex: 0 0 2.75rem;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--fp-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  background: rgba(var(--fp-accent-rgb), .13);
  -webkit-user-select: none;   /* Safari/iOS: ohne Praefix wirkungslos */
  user-select: none;
}
.task-card__title {
  font-weight: 650;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--fp-text-strong);
  margin: 0;
}
.task-card__desc {
  font-size: .875rem;
  color: var(--fp-text-soft);
  margin: 0;
}
.task-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
  font-size: .82rem;
  color: var(--fp-text-soft);
  margin-top: auto;
}
.task-card__foot { margin-top: .25rem; }

/* Wichtig: ein warmer Schimmer, kein roter Rahmen. */
.task-card--prio { box-shadow: var(--fp-shadow), var(--fp-sheen), inset 0 0 0 1px var(--fp-warn-soft); }
.task-card--prio .task-card__icon { background: var(--fp-warn-soft); }

/* Ueberfaellig: dezent, aber sichtbar. Terracotta statt Signalrot —
   ein Kind soll nachsehen, nicht erschrecken. */
.task-card--late { box-shadow: var(--fp-shadow), var(--fp-sheen), inset 0 0 0 1px var(--fp-late-soft); }
.task-card--late .task-card__icon { background: var(--fp-late-soft); }

/* Gemeldet, wartet auf Bestaetigung: die Karte tritt zurueck. */
.task-card--waiting { background: var(--fp-glass-soft); }
.task-card--waiting .task-card__title { color: var(--fp-text-soft); }

/* Erledigt (im Rueckblick): abgehakt und ruhig. */
.task-card--done .task-card__title { color: var(--fp-text-soft); }
.task-card--done .task-card__icon  { background: var(--fp-ok-soft); }

/* --- Statusmarken ------------------------------------------------ */

.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .6rem;
  border-radius: var(--fp-radius-pill);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: rgba(148, 163, 184, .16);
  color: var(--fp-text-soft);
}
.fp-chip--ok    { background: var(--fp-ok-soft);   color: var(--fp-ok); }
.fp-chip--warn  { background: var(--fp-warn-soft); color: var(--fp-warn); }
.fp-chip--late  { background: var(--fp-late-soft); color: var(--fp-late); }
.fp-chip--info  { background: var(--fp-info-soft); color: var(--fp-info); }
.fp-chip--accent{ background: rgba(var(--fp-accent-rgb), .13); color: var(--fp-accent); }

/* --- Fortschritt ------------------------------------------------- */

.fp-progress {
  height: 10px;
  border-radius: var(--fp-radius-pill);
  background: rgba(148, 163, 184, .20);
  overflow: hidden;
}
.fp-progress__bar {
  height: 100%;
  border-radius: var(--fp-radius-pill);
  background: linear-gradient(90deg,
              rgba(var(--fp-accent-rgb), .75) 0%,
              var(--fp-accent) 100%);
  /* Die Breite kommt per style-Attribut aus der Vorlage. */
  transition: width .6s cubic-bezier(.22, .61, .36, 1);
}
.fp-progress--tall { height: 14px; }

.progress-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: var(--fp-glass);
  -webkit-backdrop-filter: blur(var(--fp-blur));
  backdrop-filter: blur(var(--fp-blur));
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow), var(--fp-sheen);
  padding: var(--fp-gap);
  height: 100%;
}
.progress-card__label {
  font-size: .82rem;
  color: var(--fp-text-soft);
  font-weight: 600;
}
.progress-card__value {
  font-size: 1.7rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--fp-text-strong);
  font-variant-numeric: tabular-nums;
}
.progress-card__hint { font-size: .82rem; color: var(--fp-text-dim); }

/* Kreisfoermiger Fortschritt ueber conic-gradient — kein SVG, kein
   JavaScript. Der Prozentwert kommt als --fp-pct aus der Vorlage. */
.fp-ring {
  --fp-pct: 0;
  --fp-ring-size: 5.5rem;
  width: var(--fp-ring-size);
  height: var(--fp-ring-size);
  flex: 0 0 var(--fp-ring-size);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background:
    conic-gradient(var(--fp-accent) calc(var(--fp-pct) * 1%),
                   rgba(148, 163, 184, .20) 0);
  position: relative;
}
.fp-ring::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--fp-glass-strong);
}
.fp-ring__text {
  position: relative;
  font-weight: 700;
  font-size: .95rem;
  color: var(--fp-text-strong);
  font-variant-numeric: tabular-nums;
}

/* --- Belohnungskarte --------------------------------------------- */

.reward-card {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  height: 100%;
  background: var(--fp-glass);
  -webkit-backdrop-filter: blur(var(--fp-blur)) saturate(140%);
  backdrop-filter: blur(var(--fp-blur)) saturate(140%);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow), var(--fp-sheen);
  padding: 1.15rem;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.reward-card:hover { transform: translateY(-3px); box-shadow: var(--fp-shadow-lift), var(--fp-sheen); }

.reward-card__icon {
  font-size: 2.4rem;
  line-height: 1;
  -webkit-user-select: none;   /* Safari/iOS: ohne Praefix wirkungslos */
  user-select: none;
}
.reward-card__title { font-weight: 650; font-size: 1rem; color: var(--fp-text-strong); }
.reward-card__desc  { font-size: .84rem; color: var(--fp-text-soft); }
.reward-card__price { margin-top: auto; }

/* Leistbar: der Knopf ist deutlich. */
.reward-card--ready { box-shadow: var(--fp-shadow), var(--fp-sheen), inset 0 0 0 1px rgba(var(--fp-accent-rgb), .28); }

/* Noch nicht leistbar: NICHT ausgegraut, sondern als Ziel gezeigt.
   Ein graues Feld sagt "geht nicht"; ein Fortschritt sagt "noch 40". */
.reward-card--goal { background: var(--fp-glass-soft); }
.reward-card--goal .reward-card__icon { opacity: .75; }

/* Sehr teuer: als langfristiges Ziel gekennzeichnet. */
.reward-card--far .reward-card__icon { opacity: .6; }


/* ==================================================================
   5. BOOTSTRAP-UEBERSCHREIBUNGEN
   ------------------------------------------------------------------
   Nur innerhalb von .fp-stage. Ausserhalb — Verwaltungsseiten des
   Kerns, Taskmanager, Protokolle — bleibt Bootstrap wie es ist. Die
   Anwendung soll nicht wie Bootstrap aussehen; der Kern soll sich
   nicht aendern, weil ein Addon installiert ist.
   ================================================================== */

.fp-stage .btn {
  border-radius: var(--fp-radius-pill);
  font-weight: 600;
  padding: .6rem 1.25rem;
  min-height: var(--fp-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-width: 1px;
  transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease;
}
.fp-stage .btn:active { transform: scale(.97); }
/* Auch .btn-group-sm > .btn und .btn-lg: Bootstrap macht Knoepfe in einer
   kleinen Gruppe klein, OHNE ihnen .btn-sm zu geben. Meine Regel griff
   deshalb nicht, und die Tagesnavigation bestand aus 44px hohen Knoepfen
   mit winziger Schrift -- gemeint waren kleine. */
.fp-stage .btn-sm,
.fp-stage .btn-group-sm > .btn { min-height: 36px; padding: .35rem .9rem; font-size: .85rem; }
.fp-stage .btn-lg,
.fp-stage .btn-group-lg > .btn { min-height: 52px; padding: .8rem 1.6rem; font-size: 1.05rem; }

/* Der Haupt-Knopf traegt die Akzentfarbe der Person. Damit ist
   "Erledigt" bei Mia mintgruen und bei Ben orange — ohne eine einzige
   Sonderregel im Template. */
.fp-stage .btn-primary,
.fp-stage .btn-success {
  background: var(--fp-accent);
  border-color: transparent;
  color: var(--fp-accent-ink);
  box-shadow: 0 6px 18px rgba(var(--fp-accent-rgb), .28);
}
.fp-stage .btn-primary:hover,
.fp-stage .btn-success:hover {
  background: var(--fp-accent);
  filter: brightness(1.07);
  color: var(--fp-accent-ink);
  box-shadow: 0 10px 26px rgba(var(--fp-accent-rgb), .34);
}
.fp-stage .btn-outline-primary,
.fp-stage .btn-outline-success,
.fp-stage .btn-outline-secondary {
  background: var(--fp-glass-soft);
  border-color: var(--fp-border-soft);
  color: var(--fp-text);
}
.fp-stage .btn-outline-primary:hover,
.fp-stage .btn-outline-success:hover,
.fp-stage .btn-outline-secondary:hover {
  background: rgba(var(--fp-accent-rgb), .10);
  border-color: rgba(var(--fp-accent-rgb), .30);
  color: var(--fp-accent);
}
.fp-stage .btn-light {
  background: var(--fp-glass-strong);
  border-color: var(--fp-border-soft);
  color: var(--fp-text);
}
.fp-stage .btn-warning {
  background: var(--fp-warn);
  border-color: transparent;
  color: #fff;
}
.fp-stage .btn:disabled,
.fp-stage .btn.disabled {
  background: rgba(148, 163, 184, .14);
  border-color: transparent;
  color: var(--fp-text-dim);
  box-shadow: none;
  opacity: 1;   /* Bootstrap dimmt zusaetzlich — doppelt ist unlesbar. */
}

/* Karten des Kerns auf Familienseiten bekommen die Glasflaeche, damit
   noch nicht umgestellte Vorlagen nicht wie Fremdkoerper wirken. */
.fp-stage .card {
  background: var(--fp-glass);
  -webkit-backdrop-filter: blur(var(--fp-blur));
  backdrop-filter: blur(var(--fp-blur));
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow), var(--fp-sheen);
}
.fp-stage .card-header {
  background: transparent;
  border-bottom: 1px solid var(--fp-border-soft);
  font-weight: 650;
  color: var(--fp-text-strong);
  border-radius: var(--fp-radius) var(--fp-radius) 0 0;
  padding: .9rem 1.15rem;
}
.fp-stage .card-body { padding: 1.15rem; }

.fp-stage .badge { border-radius: var(--fp-radius-pill); font-weight: 600; padding: .3rem .65rem; }

.fp-stage .alert {
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border-soft);
  background: var(--fp-glass-soft);
  -webkit-backdrop-filter: blur(var(--fp-blur-sm));
  backdrop-filter: blur(var(--fp-blur-sm));
  color: var(--fp-text);
}
.fp-stage .alert-success { border-color: rgba(15, 157, 118, .28);  background: var(--fp-ok-soft); }
.fp-stage .alert-warning { border-color: rgba(217, 131, 36, .28);  background: var(--fp-warn-soft); }
.fp-stage .alert-info    { border-color: rgba(79, 119, 212, .28);  background: var(--fp-info-soft); }
.fp-stage .alert-danger  { border-color: rgba(194, 104, 60, .30);  background: var(--fp-late-soft); }

.fp-stage .form-control,
.fp-stage .form-select {
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border-soft);
  background: var(--fp-glass-strong);
  min-height: var(--fp-touch);
  padding: .55rem .9rem;
  color: var(--fp-text);
}
.fp-stage .form-control:focus,
.fp-stage .form-select:focus {
  border-color: rgba(var(--fp-accent-rgb), .45);
  box-shadow: 0 0 0 4px rgba(var(--fp-accent-rgb), .13);
  background: #fff;
}
.fp-stage .form-control-sm { min-height: 38px; }
.fp-stage .form-label { font-weight: 600; font-size: .88rem; color: var(--fp-text); }
.fp-stage .form-text  { color: var(--fp-text-dim); }

.fp-stage .form-check-input {
  width: 1.15rem; height: 1.15rem;
  border-color: var(--fp-border-soft);
}
.fp-stage .form-check-input:checked {
  background-color: var(--fp-accent);
  border-color: var(--fp-accent);
}
.fp-stage .form-switch .form-check-input { width: 2.4rem; height: 1.3rem; }

.fp-stage .progress {
  height: 10px;
  border-radius: var(--fp-radius-pill);
  background: rgba(148, 163, 184, .20);
}
.fp-stage .progress-bar {
  border-radius: var(--fp-radius-pill);
  background: linear-gradient(90deg, rgba(var(--fp-accent-rgb), .75), var(--fp-accent));
}

/* Tabellen: Zeilentrenner statt Rahmen, damit sie auf Glas nicht wie
   ein Raster wirken. */
.fp-stage .table {
  --bs-table-bg: transparent;
  color: var(--fp-text);
  border-color: var(--fp-border-soft);
}
.fp-stage .table > thead th {
  border-bottom: 1px solid var(--fp-border-soft);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fp-text-dim);
  font-weight: 650;
}
.fp-stage .table > tbody > tr > * { border-color: rgba(148, 163, 184, .14); }

.fp-stage .list-group-item {
  background: var(--fp-glass-soft);
  border-color: var(--fp-border-soft);
  color: var(--fp-text);
  padding: .85rem 1.1rem;
}
.fp-stage .list-group-item:first-child { border-radius: var(--fp-radius-sm) var(--fp-radius-sm) 0 0; }
.fp-stage .list-group-item:last-child  { border-radius: 0 0 var(--fp-radius-sm) var(--fp-radius-sm); }

.fp-stage .dropdown-menu,
.modal-content {
  border-radius: var(--fp-radius);
  border: 1px solid var(--fp-border);
  background: var(--fp-glass-strong);
  -webkit-backdrop-filter: blur(var(--fp-blur));
  backdrop-filter: blur(var(--fp-blur));
  box-shadow: var(--fp-shadow-lift);
}
.modal-header, .modal-footer { border-color: var(--fp-border-soft); }

.fp-stage .btn-group > .btn { border-radius: var(--fp-radius-pill); }
.fp-stage .btn-group > .btn:not(:first-child) { margin-left: .4rem; }


/* ==================================================================
   6. BEWEGUNG
   ------------------------------------------------------------------
   Kurz und wenig. Die Rueckmeldung soll bestaetigen, nicht feiern.
   ================================================================== */

/* Beim Abschicken: die Karte sinkt kurz ein. Der Zustand kommt von
   family-design.js VOR dem normalen Formular-Absenden — das Formular
   geht danach unveraendert an denselben Handler wie bisher. */
.task-card.is-completing {
  animation: fp-complete .34s cubic-bezier(.34, 1.4, .64, 1) forwards;
  pointer-events: none;
  /* Der gruene Rand steht HIER und nicht im Keyframe. Er soll am Ende
     einfach da sein, nicht animiert werden -- und box-shadow ist der
     einzige Wert in dieser Animation, der den Browser neu zeichnen
     laesst. transform allein laeuft auf dem Compositor. */
  box-shadow: var(--fp-shadow), var(--fp-sheen), inset 0 0 0 2px var(--fp-ok-soft);
}
@keyframes fp-complete {
  0%   { transform: scale(1);    }
  45%  { transform: scale(.965); }
  100% { transform: scale(1);    }
}

/* Die Belohnungsmeldung. Fest am unteren Rand, damit sie auf dem
   Tablet im Blickfeld ist und keinen Inhalt verschiebt. */
.fp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 1.5rem);
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.4rem;
  border-radius: var(--fp-radius-pill);
  background: var(--fp-glass-strong);
  -webkit-backdrop-filter: blur(var(--fp-blur));
  backdrop-filter: blur(var(--fp-blur));
  border: 1px solid var(--fp-border);
  box-shadow: var(--fp-shadow-lift);
  font-weight: 650;
  color: var(--fp-text-strong);
  opacity: 0;
  transition: opacity .24s ease, transform .24s ease;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}
.fp-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Wenn die Bottom-Navigation da ist, darf die Meldung nicht darunter
   liegen. */
body.fp-has-bottomnav .fp-toast {
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

/* Konfetti: ein paar Rechtecke, die fallen. Keine Bibliothek. */
.fp-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1070;
  overflow: hidden;
}
.fp-confetti i {
  position: absolute;
  width: 7px; height: 11px;
  border-radius: 2px;
  opacity: .9;
  animation: fp-fall var(--fp-dur, 1.5s) cubic-bezier(.3, .7, .5, 1) forwards;
}
@keyframes fp-fall {
  0%   { transform: translateY(-12vh) rotate(0deg);      opacity: 0; }
  12%  { opacity: .95; }
  100% { transform: translateY(88vh) rotate(520deg);     opacity: 0; }
}

.fp-countup { font-variant-numeric: tabular-nums; }


/* ==================================================================
   HILFSKLASSEN
   ------------------------------------------------------------------
   Nur diese fuenf, und nur weil sie sonst als style="…" in jeder
   Vorlage stuenden. Bootstrap hat .text-muted, aber das ist an
   --bs-secondary-color gebunden und nicht an unsere Textfarben.
   ================================================================== */

.fp-muted        { color: var(--fp-text-soft); }
.fp-dim          { color: var(--fp-text-dim); }
.fp-accented     { color: var(--fp-accent); }
/* Ein grosses Symbol als Zustandsbild — leere Liste, Erfolg, Sperre. */
.fp-emoji-xl     { font-size: 2.2rem; line-height: 1; }
.fp-emoji-lg     { font-size: 1.6rem; line-height: 1; }

/*
 * Wer weniger Bewegung eingestellt hat, bekommt sie nicht.
 *
 * Und zwar so, dass das ERGEBNIS bleibt: die Karte behaelt ihren
 * Rahmen, die Meldung erscheint, der Fortschritt steht auf seinem
 * Wert. Bewegung ist hier Verzierung und nirgends Information.
 */
@media (prefers-reduced-motion: reduce) {
  .fp-stage *,
  .fp-toast,
  .fp-confetti i {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .fp-confetti { display: none; }
  .task-card.is-completing { animation: none; box-shadow: var(--fp-shadow), var(--fp-sheen), inset 0 0 0 2px var(--fp-ok-soft); }
  .glass-card--tap:hover, .task-card:hover, .reward-card:hover { transform: none; }
}


/* ==================================================================
   7. KLEINE BILDSCHIRME
   ------------------------------------------------------------------
   Mobile first heisst hier: die Karten stapeln ohnehin (Bootstrap-
   Grid). Was zusaetzlich noetig ist, ist WENIGER — weniger Rand,
   weniger Unschaerfe, groessere Ziele.
   ================================================================== */

@media (max-width: 575.98px) {
  :root {
    --fp-radius:    20px;
    --fp-radius-lg: 22px;
    --fp-gap:       1rem;
    --fp-gap-lg:    1.25rem;
    /* Unschaerfe ist auf Telefonen teuer und faellt auf kleinen
       Flaechen kaum auf. */
    --fp-blur:      12px;
  }
  .glass-card, .task-card, .reward-card, .progress-card { padding: 1rem; }
  .fp-stage .btn { width: 100%; }
  /* Ausnahme: Knopfgruppen und ausdruecklich schmale Knoepfe. */
  .fp-stage .btn-group .btn,
  .fp-stage .btn-auto { width: auto; }
  .points-wallet { width: 100%; }
}

/* Auf dem Tablet soll das Wichtigste ohne Scrollen sichtbar sein —
   also engere Abstaende als auf dem Desktop, nicht weitere. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  :root { --fp-gap: 1.1rem; --fp-gap-lg: 1.5rem; }
}

/* Sehr grosse Bildschirme: die Inhaltsbreite begrenzen. Ein Board
   ueber 2000 Pixel Breite ist nicht mehr erfassbar. */
.fp-shell { max-width: 1500px; margin-inline: auto; }


/* ==================================================================
   8. EIGENE SCHRIFT (Vorlage, bewusst auskommentiert)
   ------------------------------------------------------------------
   .woff2 nach assets/fonts/ legen, hier einkommentieren, in
   --fp-font vorne anstellen. NICHT per CDN — siehe Kommentar bei
   --fp-font.

   @font-face {
     font-family: 'Family Sans';
     font-style: normal;
     font-weight: 400 750;
     font-display: swap;
     src: url('fonts/family-sans.woff2') format('woff2');
   }
   ================================================================== */


/* ==================================================================
   9. FARBWAHL (Teilnehmer-Formular)
   ------------------------------------------------------------------
   Ein <select> mit Farbnamen zwingt zum Lesen und Uebersetzen. Eine
   Reihe Farbkreise zeigt die Wahl. Technisch bleiben es
   Radio-Knoepfe: Tastatur, Screenreader und ein Formular ohne
   JavaScript funktionieren unveraendert.
   ================================================================== */

.fp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.fp-swatch { position: relative; }

/* Der Knopf selbst bleibt da (Tastatur, Screenreader), nur unsichtbar.
   display:none wuerde ihn aus der Fokusreihenfolge nehmen. */
.fp-swatch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.fp-swatch span {
  display: block;
  /* 44px, wie jedes andere Ziel: das wird auf einem Tablet getippt. */
  width: var(--fp-touch);
  height: var(--fp-touch);
  border-radius: 50%;
  background: var(--fp-accent);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55),
              0 2px 8px rgba(30, 40, 70, .12);
  transition: transform .16s ease, box-shadow .16s ease;
}

/* „keine Farbe": durchgestrichen und in Grau, damit es nicht wie eine
   weitere Farbe aussieht. */
.fp-swatch--none span {
  background: rgba(148, 163, 184, .22);
  position: relative;
}
.fp-swatch--none span::after {
  content: '';
  position: absolute;
  inset: 50% 18% auto;
  height: 2px;
  background: var(--fp-text-dim);
  transform: rotate(-45deg);
}

.fp-swatch input:checked + span {
  transform: scale(1.12);
  box-shadow: inset 0 0 0 3px #fff,
              0 0 0 3px var(--fp-accent),
              0 4px 12px rgba(30, 40, 70, .18);
}
.fp-swatch--none input:checked + span {
  box-shadow: inset 0 0 0 3px #fff,
              0 0 0 3px var(--fp-text-dim);
}

/* Der Fokusring muss sichtbar sein, obwohl der Knopf unsichtbar ist. */
.fp-swatch input:focus-visible + span {
  outline: 3px solid rgba(var(--fp-accent-rgb), .5);
  outline-offset: 3px;
}


/* ==================================================================
   10. KIOSK
   ------------------------------------------------------------------
   Die einzige Seite ohne Anmeldung, und die einzige, auf der ein Kind
   vor einem Tablet steht. Alles hier ist groesser als sonst:

     - Bildkacheln statt Listenzeilen
     - Ziele weit ueber 44px, weil im Vorbeigehen getippt wird
     - keine Navigation (das Menue ist im Kioskbetrieb aus)

   Die Personenfarbe traegt hier mehr als sonst: ein Kind, das noch
   nicht liest, erkennt seinen Ring, nicht seinen Namen.
   ================================================================== */

.fp-kiosk {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 52rem;
  margin-inline: auto;
}

.fp-kiosk__area {
  text-align: center;
  font-size: clamp(1.1rem, .9rem + 1vw, 1.5rem);
  font-weight: 650;
  color: var(--fp-text-strong);
  margin: 0 0 .35rem;
}
.fp-kiosk__hint {
  text-align: center;
  color: var(--fp-text-soft);
  font-size: 1.05rem;
  margin: 0 0 2rem;
}

/* Die Personenkacheln. auto-fit: vier Kinder fuellen die Reihe, zwei
   stehen mittig und nicht verloren am linken Rand. */
.fp-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--fp-gap);
  justify-content: center;
}

.fp-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 1.4rem .8rem;
  border-radius: var(--fp-radius);
  background: var(--fp-glass);
  -webkit-backdrop-filter: blur(var(--fp-blur));
  backdrop-filter: blur(var(--fp-blur));
  border: 1px solid var(--fp-border);
  box-shadow: var(--fp-shadow), var(--fp-sheen);
  text-decoration: none;
  color: inherit;
  /* Grosszuegig: das ist ein Ziel fuer einen Kinderfinger auf einem
     Tablet, das an der Wand haengt. */
  min-height: 11rem;
  transition: transform .16s ease, box-shadow .16s ease;
}
.fp-person:hover,
.fp-person:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--fp-shadow-lift), var(--fp-sheen);
}
.fp-person:active { transform: scale(.97); }

.fp-person__name {
  font-weight: 680;
  font-size: 1.1rem;
  color: var(--fp-text-strong);
  text-align: center;
  line-height: 1.25;
}

/* Gesperrt: kein Knopf, sondern eine Auskunft. Terracotta und nicht
   Signalrot -- das Kind hat sich vertippt, nichts kaputtgemacht. */
.fp-person--locked {
  background: var(--fp-glass-soft);
  box-shadow: var(--fp-shadow), var(--fp-sheen), inset 0 0 0 1px var(--fp-late-soft);
  cursor: default;
}
.fp-person--locked .family-avatar { filter: grayscale(.7); opacity: .7; }
.fp-person__locked {
  font-size: .85rem;
  color: var(--fp-late);
  text-align: center;
  font-weight: 600;
}

/* --- Die PIN-Eingabe --- */

.fp-pin {
  max-width: 24rem;
  margin-inline: auto;
  text-align: center;
}
.fp-pin__who {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fp-text-strong);
  margin: .75rem 0 .25rem;
}

/* Grosse Ziffern mit weitem Abstand: auf einem Tablet aus einem Meter
   Entfernung muss man sehen, wie viele man schon getippt hat. */
.fp-pin input {
  font-size: 1.9rem;
  letter-spacing: .6rem;
  text-align: center;
  max-width: 11rem;
  margin-inline: auto;
  /* Der Abstand schiebt die Ziffern optisch nach rechts — der
     Ausgleich haelt sie mittig. */
  text-indent: .6rem;
  padding-block: .7rem;
  font-variant-numeric: tabular-nums;
}

.fp-pin__keys {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.fp-pin__keys .btn { min-width: 8rem; font-size: 1.05rem; padding-block: .8rem; }

@media (max-width: 575.98px) {
  .fp-people      { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
  .fp-person      { min-height: 9rem; padding: 1rem .5rem; }
  .fp-person__name { font-size: 1rem; }
  /* Auf dem Telefon duerfen die Kiosk-Knoepfe die Breite nehmen. */
  .fp-pin__keys .btn { min-width: 0; }
}


/* ==================================================================
   11. TAGESLEISTE
   ------------------------------------------------------------------
   Statt zweier Pfeilknoepfe: die Tage um den angezeigten herum, jeder
   als kleine Karte mit der Zahl der offenen Aufgaben. Man sieht damit
   nicht nur, wo man ist, sondern auch, was kommt — und dass der
   Samstag voll ist, bevor man ihn anklickt.

   Der aktive Tag ist groesser, die Nachbarn kleiner und blasser. Das
   ist die eigentliche Aussage der Leiste: HIER bin ich.

   Waagerecht scrollbar, mit Schnappen. Auf einem Telefon passen keine
   sieben Karten, und abgeschnittene Karten am Rand sind der Hinweis,
   dass es weitergeht.
   ================================================================== */

.fp-daystrip {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: .25rem .1rem 1rem;
  margin-bottom: .75rem;
  /* Die Leiste scrollt, die SEITE nicht. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fp-daystrip::-webkit-scrollbar { display: none; }

.fp-day {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  /* Die Nachbarn: kleiner, aber immer noch ein Fingerziel (44px). */
  width: 3.4rem;
  min-height: var(--fp-touch);
  padding: .5rem .3rem;
  border-radius: var(--fp-radius-sm);
  background: var(--fp-glass-soft);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--fp-text-soft);
  transition: transform .16s ease, background-color .16s ease, color .16s ease;
}
.fp-day:hover {
  background: var(--fp-glass);
  color: var(--fp-text);
}

.fp-day__wd {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
}
.fp-day__num {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Die Zahl der offenen Aufgaben. Ein Punkt, keine Zahl, wenn es viele
   sind? Nein -- die Zahl ist die Information. */
.fp-day__count {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .25rem;
  border-radius: var(--fp-radius-pill);
  background: rgba(var(--fp-accent-rgb), .16);
  color: var(--fp-accent);
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Alles erledigt: ein Haken statt einer Null. Eine 0 sieht aus wie ein
   Fehler, ein Haken wie eine Belohnung. */
.fp-day__done {
  font-size: .8rem;
  line-height: 1.15rem;
  color: var(--fp-ok);
}
/* Nichts an diesem Tag: gar kein Zeichen. Ein leerer Tag braucht keine
   Auszeichnung, und drei Haken nebeneinander waeren eine Luege. */
.fp-day__empty { height: 1.15rem; }

/* --- Der aktive Tag --- */
.fp-day--active {
  width: 4.4rem;
  padding: .7rem .4rem;
  background: var(--fp-glass-strong);
  border-color: rgba(var(--fp-accent-rgb), .30);
  color: var(--fp-text-strong);
  box-shadow: var(--fp-shadow), var(--fp-sheen);
  transform: translateY(-2px);
}
.fp-day--active .fp-day__wd  { opacity: 1; color: var(--fp-accent); }
.fp-day--active .fp-day__num { font-size: 1.35rem; }

/* --- Heute, wenn es nicht der angezeigte Tag ist --- */
.fp-day--today:not(.fp-day--active) .fp-day__num {
  color: var(--fp-accent);
}
.fp-day--today:not(.fp-day--active)::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fp-accent);
  margin-top: .1rem;
}

/* --- Vergangene Tage treten zurueck --- */
.fp-day--past:not(.fp-day--active) { opacity: .62; }

@media (max-width: 575.98px) {
  .fp-day          { width: 3rem; }
  .fp-day--active  { width: 3.9rem; }
  /* Auf dem Telefon soll die Leiste den Rand beruehren, damit die
     abgeschnittene Karte sichtbar macht, dass es weitergeht. */
  .fp-daystrip     { margin-inline: -.5rem; padding-inline: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-daystrip    { scroll-snap-type: none; }
  .fp-day--active { transform: none; }
}


/* ==================================================================
   12. DAS ERLEDIGT-MODAL
   ------------------------------------------------------------------
   Zwischen "antippen" und "gebucht" gehoert eine Frage. Nicht als
   Sicherheitsabfrage — sondern weil das der Moment ist, in dem sich
   die Erledigung gut anfuehlen soll, und weil man aus Versehen auf
   eine Karte kommt.

   Der Daumen ist gross und mittig, das X ist rund und rot umrandet.
   Beides ist eindeutig, ohne zu lesen.
   ================================================================== */

.fp-taskmodal .modal-content {
  border-radius: var(--fp-radius-lg);
  border: 1px solid var(--fp-border);
  background: var(--fp-glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 24px 70px rgba(30, 40, 70, .22);
  overflow: visible;   /* das X darf ueberstehen */
  padding-top: .5rem;
}

.fp-taskmodal .modal-body { padding: 1.75rem 1.5rem 1.5rem; }

/* --- Das X: rund, rot umrandet, oben rechts ---------------------- */

.fp-taskmodal__x {
  position: absolute;
  top: -.85rem;
  right: -.85rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  /* Weiss gefuellt mit rotem Rand, nicht rot gefuellt: ein roter Kreis
     neben einem gruenen Daumen sieht aus wie "Ampel", und das X ist
     kein gleichwertiger zweiter Weg — es ist der Rueckweg. */
  background: #fff;
  border: 2px solid var(--fp-danger-ring);
  color: var(--fp-danger-ring);
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(30, 40, 70, .18);
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, color .16s ease;
}
.fp-taskmodal__x:hover,
.fp-taskmodal__x:focus-visible {
  background: var(--fp-danger-ring);
  color: #fff;
  transform: scale(1.08);
}
.fp-taskmodal__x:active { transform: scale(.94); }

/* --- Inhalt ------------------------------------------------------ */

.fp-taskmodal__icon {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: .5rem;
  display: inline-block;
}

.fp-taskmodal__title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fp-text-strong);
  margin: 0 0 .35rem;
}
.fp-taskmodal__desc { font-size: .95rem; margin: 0 0 .85rem; }
.fp-taskmodal__desc:empty { display: none; }

.fp-taskmodal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.fp-taskmodal__meta:empty { display: none; }

.fp-taskmodal__reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1.1rem;
}
.fp-taskmodal__earns {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 650;
  color: var(--fp-text-dim);
}
.fp-taskmodal__reward .points-badge { font-size: 1.15rem; padding: .45rem 1rem; }

.fp-taskmodal__note { margin-bottom: 1.1rem; }

/* --- Der Daumen -------------------------------------------------- */

.fp-taskmodal__go {
  width: 100%;
  /* Deutlich hoeher als ein normaler Knopf: das ist die eine Sache,
     die man hier tun will. */
  min-height: 3.75rem;
  font-size: 1.1rem;
  gap: .7rem;
}
.fp-taskmodal__thumb {
  font-size: 1.6rem;
  line-height: 1;
  /* Der Daumen bleibt farbig, waehrend der Text die Tinte der
     Akzentflaeche traegt. Ohne das wird das Emoji auf manchen
     Systemen mit eingefaerbt und sieht schmutzig aus. */
  filter: none;
}

/* ==================================================================
   Der spielerische Auftritt
   ------------------------------------------------------------------
   Bootstrap blendet ein Modal ein und schiebt es leicht nach unten.
   Hier springt es kurz heran — 260 ms, mit einem Hauch Ueberschwung.
   Mehr wuerde beim dritten Mal stoeren.
   ================================================================== */

.fp-taskmodal.fade .modal-dialog {
  transform: scale(.86) translateY(1.5rem);
  opacity: 0;
  transition: transform .26s cubic-bezier(.34, 1.46, .64, 1), opacity .2s ease;
}
.fp-taskmodal.show .modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Der Daumen wackelt einmal beim Erscheinen. Einmal, nicht dauernd:
   eine Schleife zieht den Blick vom Text weg. */
.fp-taskmodal.show .fp-taskmodal__thumb {
  animation: fp-thumb .5s .2s cubic-bezier(.34, 1.46, .64, 1) 1;
}
@keyframes fp-thumb {
  0%   { transform: rotate(0deg)   scale(1);    }
  35%  { transform: rotate(-14deg) scale(1.18); }
  70%  { transform: rotate(8deg)   scale(1.06); }
  100% { transform: rotate(0deg)   scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
  .fp-taskmodal.fade .modal-dialog,
  .fp-taskmodal.show .modal-dialog {
    transform: none;
    transition: none;
  }
  .fp-taskmodal.show .fp-taskmodal__thumb { animation: none; }
}

@media (max-width: 575.98px) {
  .fp-taskmodal .modal-dialog { margin: 1.25rem; }
  .fp-taskmodal__x { top: -.6rem; right: -.6rem; width: 2.5rem; height: 2.5rem; }
  .fp-taskmodal__icon { font-size: 2.6rem; }
}


/* ==================================================================
   13. VERWALTUNGSKACHELN
   ------------------------------------------------------------------
   Grosse Symbole, weil hier auch jemand sucht, der die Woerter nicht
   liest. Die ganze Kachel ist das Ziel -- kein Knopf darin.
   ================================================================== */

.fp-manage__icon {
  font-size: 2.1rem;
  line-height: 1;
  margin-bottom: .5rem;
  display: block;
}

@media (max-width: 575.98px) {
  .fp-manage__icon { font-size: 1.8rem; }
}


/* ==================================================================
   14. DIE KIOSK-LEISTE
   ------------------------------------------------------------------
   Sie erscheint nur in einer PIN-Sitzung -- also wenn ein KIND
   angemeldet ist. Drei Ziele:

     Klemmbrett  zurueck zum Board (der einzige Weg zurueck)
     Zahnrad     ein Erwachsener uebernimmt
     rotes X     fertig, naechste Person

   Alle drei rund und 44px, weil sie mit dem Finger getroffen werden.
   Symbole statt Woerter: das Kind liest sie nicht.
   ================================================================== */

.fp-kbar__btn {
  width: var(--fp-touch);
  height: var(--fp-touch);
  flex: 0 0 var(--fp-touch);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  background: var(--fp-glass-strong);
  border: 1px solid var(--fp-border-soft);
  color: var(--fp-text);
  cursor: pointer;
  transition: transform .14s ease, background-color .16s ease, color .16s ease;
}
.fp-kbar__btn:hover,
.fp-kbar__btn:focus-visible {
  background: rgba(var(--fp-accent-rgb), .12);
  border-color: rgba(var(--fp-accent-rgb), .30);
  color: var(--fp-accent);
  transform: scale(1.06);
}
.fp-kbar__btn:active { transform: scale(.94); }

/* Das X: dasselbe Zeichen und dieselbe Farbe wie im Erledigt-Modal,
   damit es dieselbe Bedeutung behaelt -- hier wird nichts gebucht. */
.fp-kbar__btn--off {
  border-color: var(--fp-danger-ring);
  color: var(--fp-danger-ring);
  font-size: 1.5rem;
}
.fp-kbar__btn--off:hover,
.fp-kbar__btn--off:focus-visible {
  background: var(--fp-danger-ring);
  border-color: var(--fp-danger-ring);
  color: #fff;
}

/* Die Leiste selbst als Glasstreifen, nicht als Bootstrap-Kasten. */
[data-family-kiosk-bar] {
  background: rgba(255, 255, 255, .62) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--fp-border) !important;
  border-radius: 0 0 var(--fp-radius) var(--fp-radius);
}
[data-family-kiosk-bar] > div:first-child {
  font-size: 1.05rem;
  color: var(--fp-text-strong);
}

@media (prefers-reduced-motion: reduce) {
  .fp-kbar__btn:hover, .fp-kbar__btn:active { transform: none; }
}


/* ==================================================================
   15. SYMBOLAUSWAHL
   ------------------------------------------------------------------
   Derselbe Bau wie die Farbwahl in Abschnitt 9, und aus demselben
   Grund: es bleiben Radio-Knoepfe. Tastatur, Vorleseprogramm und ein
   Formular ohne JavaScript funktionieren unveraendert; das Skript
   ergaenzt nur die Suche.

   Zusammengeklappt ist es ein <details>. 134 Symbole standig offen
   wuerden das Formular unbenutzbar machen -- man scrollte an jedem
   anderen Feld vorbei.
   ================================================================== */

.fp-iconpick {
  /* fieldset bringt Rahmen, Rand und eine eigene Innenbreite mit. */
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.fp-iconpick__legend {
  /* legend ist von Haus aus float-artig und nimmt keine Breite an. */
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: .35rem;
  font-size: .875rem;
}

.fp-iconpick__box {
  border-radius: var(--fp-radius-sm);
  background: var(--fp-glass);
  border: 1px solid var(--fp-border);
}

.fp-iconpick__summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--fp-touch);
  padding: .5rem .85rem;
  cursor: pointer;
  border-radius: var(--fp-radius-sm);
  /* Den Standard-Pfeil weg: das grosse Symbol IST der Hinweis. */
  list-style: none;
}

.fp-iconpick__summary::-webkit-details-marker { display: none; }

.fp-iconpick__summary:hover { background: var(--fp-glass-strong); }

/* Der Fokus gehoert an das <summary>, nicht an das <details> -- sonst
   umrahmt er im offenen Zustand die ganze Auswahl. */
.fp-iconpick__summary:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}

.fp-iconpick__current {
  font-size: 1.75rem;
  line-height: 1;
  width: 2.25rem;
  text-align: center;
}

.fp-iconpick__summary-text {
  font-size: .9375rem;
  color: var(--fp-text-soft);
}

.fp-iconpick__panel {
  padding: .25rem .85rem .85rem;
  /* Begrenzt, damit die Auswahl das Formular nicht wegdrueckt. */
  max-height: 22rem;
  overflow-y: auto;
  /* Kein -webkit-overflow-scrolling: touch. Seit iOS 13 traegt es
     nichts mehr bei -- es steht weiter oben in der Tagesleiste und ist
     auch dort wirkungslos. */
}

.fp-iconpick__search {
  width: 100%;
  min-height: var(--fp-touch);
  margin: .35rem 0 .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-glass);
  color: var(--fp-text-strong);
  font: inherit;
}

.fp-iconpick__group + .fp-iconpick__group { margin-top: .6rem; }

.fp-iconpick__title {
  margin: 0 0 .35rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fp-text-soft);
}

.fp-iconpick__grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Der Knopf bleibt da (Tastatur, Vorleseprogramm), nur unsichtbar.
   display:none wuerde ihn aus der Fokusreihenfolge nehmen -- dann
   waere die Auswahl mit der Tastatur nicht mehr erreichbar. */
.fp-iconpick__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fp-iconpick__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px ist die Untergrenze fuer einen Finger; hier etwas mehr, weil
     ein Kind das auf einem Tablet trifft. */
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--fp-radius-sm);
  border: 2px solid transparent;
  background: var(--fp-glass-strong);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease,
              background-color .16s ease;
}

.fp-iconpick__glyph {
  font-size: 1.65rem;
  line-height: 1;
}

/* Der Name ist der zugaengliche Name des Knopfes und muss vorhanden
   bleiben -- nur nicht sichtbar. Sichtbar traegt ihn das title-Attribut. */
.fp-iconpick__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.fp-iconpick__opt:hover {
  background: var(--fp-glass);
  transform: translateY(-2px);
}

.fp-iconpick__radio:checked + .fp-iconpick__opt {
  border-color: var(--fp-accent);
  background: rgba(var(--fp-accent-rgb), 0.14);
  transform: translateY(-2px);
}

/* Der Fokusring gehoert sichtbar an die Beschriftung, weil der Knopf
   selbst verborgen ist. */
.fp-iconpick__radio:focus-visible + .fp-iconpick__opt {
  outline: 3px solid var(--fp-accent);
  outline-offset: 2px;
}

/* Was die Suche ausblendet. Eine eigene Klasse und kein Inline-Stil:
   das Skript setzt sie, der Stil steht hier. */
.fp-iconpick__opt--off,
.fp-iconpick__radio.fp-iconpick__opt--off,
.fp-iconpick__group--off { display: none; }

.fp-iconpick__empty {
  margin: .5rem 0 0;
  font-size: .875rem;
  color: var(--fp-text-soft);
}

@media (prefers-reduced-motion: reduce) {
  .fp-iconpick__opt,
  .fp-iconpick__opt:hover,
  .fp-iconpick__radio:checked + .fp-iconpick__opt { transform: none; }
}

@media (max-width: 575.98px) {
  /* Auf dem Telefon flacher, damit noch etwas vom Formular sichtbar
     bleibt, wenn die Auswahl offen ist. */
  .fp-iconpick__panel { max-height: 16rem; }
}

/* Das Symbol einer Kategorie in der Liste. Feste Breite, damit die
   Farbmarke bei Kategorien ohne Symbol nicht verrutscht. */
.fp-cat-icon {
  display: inline-block;
  width: 1.5rem;
  font-size: 1.1rem;
  line-height: 1;
  text-align: center;
}