/* ═══════════════════════════════════════════════════════════════════
   RACOON, ein Zweig am Wurmi-Stamm.

   Alles Gemeinsame liegt in faden.css und wird hier nicht wiederholt:
   Tokens, Schema-Ableitung aus einem Grundton, hell und dunkel, der
   Wobble-Filter, die Checkliste mit Federzug, der Telefonrahmen mit
   echten Geraetemassen.

   Was hier steht, ist das, was Wurmi nicht hat, weil Lerche und Amsel
   es nicht brauchen: ein App-Rahmen mit Kopf und Tableiste, eine
   Tagesnavigation, ziehbare Zeilen, Kachelraster, Akkordeons und ein
   Kalenderraster.

   ── Die eigene Verbotsspalte ─────────────────────────────────────────
   1Q1T gilt hier nicht: Racoon ist kein Werkzeug, durch das man
   hindurchgefuehrt wird, sondern ein Raum, in den zwei Menschen
   zehnmal am Tag fuer zehn Sekunden greifen. Dafuer braucht es
   Uebersichten, Kacheln und selbst sortierbare Listen, und alle drei
   stehen auf Wurmis Verbotsliste.

   Was Racoon stattdessen verbietet, und zwar strenger als Wurmi:

     Kein Rot, nirgends. Ueberfaelliges traegt Sand, nicht Alarm.
     Keine Zahl fuer Rueckstand, kein Mahnblock, keine Zusammenfassung
       des Versaeumten.
     Keine Beitragsstatistik, keine Rangliste, kein Wer-hat-mehr.
     Keine Meldung, wenn die andere Person etwas abhakt.

   Der Grund ist nicht Systemtreue. Ein Schuldsignal ist in einer
   Beziehung teurer als in einem Arbeitswerkzeug, nicht billiger.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Drei Flaechen fuer die drei Akkordeons der Einkaufsliste.
      Die Anforderung verlangt drei unterscheidbare Hintergruende. Mit
      --accent-tint und --sage-tint waeren es zwei Gruentoene, die im
      Schema Salbei fast gleich ausfallen. Der dritte kommt deshalb aus
      Sand: ein anderer Farbton, kein anderer Gruenwert, und in allen
      sechs Schemata unterscheidbar. Sand heisst in Wurmi "ueber dem
      Wert", also abgeschlossen. ── */
:root{
  /* Der Vorschlagsgrund war --paper-warm und damit fast der Seitengrund:
     im Bild war kein Feld zu erkennen, nur schwebende Kacheln. Jetzt
     leicht Richtung Tinte statt Richtung Weiss. Das hat zwei Vorteile:
     der Unterschied ist sichtbar, und die Kacheln darin (--paper-warm)
     heben sich vom Feld ab, statt darin zu verschwinden. */
  --feld-offen:  color-mix(in srgb, var(--paper), var(--ink) 5%);
  --feld-liste:  var(--accent-tint);
  --feld-fertig: color-mix(in srgb, var(--paper-warm), var(--sand) 26%);
  --tab-h: 62px;
  --kopf-h: 56px;
}

/* ═══════════════ DER APP-RAHMEN ═══════════════
   Wurmi legt eine .spalte ins Geraet, die als Ganzes rollt. Eine App
   rollt nicht als Ganzes: Kopf und Tableiste stehen, nur die Mitte
   bewegt sich. Deshalb ersetzt .app die .spalte, statt sie zu
   erweitern. */
.app{
  position:relative;z-index:2;
  height:100%;display:flex;flex-direction:column;
}

.app-kopf{
  flex:none;height:var(--kopf-h);
  display:flex;align-items:center;gap:var(--s3);
  padding:0 var(--s4);
  border-bottom:1px solid var(--line);
}
.app-kopf .marke-tier{width:30px;height:30px;flex:none}
.app-kopf .marke-tier path,.app-kopf .marke-tier circle{
  fill:none;stroke:var(--sage-deep);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.app-kopf .marke-tier .auge{fill:var(--sage-deep);stroke:none}
.app-kopf .titel{
  font-family:var(--display);font-weight:600;font-size:18px;
  letter-spacing:-.01em;flex:1;
}

/* Der Bussi-Knopf sitzt im Kopf, nicht in der Tableiste. Er ist keine
   Ansicht, sondern eine Geste: immer erreichbar, nie ein Ort. */
.bussi-knopf{
  width:40px;height:40px;flex:none;border-radius:50%;
  border:1.5px solid var(--line-strong);background:transparent;
  display:grid;place-items:center;cursor:pointer;
  transition:background var(--t-answer) var(--e-out), transform 120ms var(--e-out);
}
.bussi-knopf svg{width:20px;height:20px;fill:none;stroke:var(--sage-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bussi-knopf:hover{background:var(--accent-tint)}
.bussi-knopf:active{transform:scale(.92)}

.app-inhalt{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s4) var(--s4) var(--s5);
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--paper-warm), var(--ink) 24%) transparent;
}

/* ═══════════════ DER NETZSTREIFEN ═══════════════
   Sitzt zwischen Kopf und Inhalt, ueber allem, was man tut, und bleibt
   dort stehen, solange die Lage anhaelt. Er scrollt nicht mit: eine
   Warnung, die man wegscrollen kann, ist keine.

   Sand, nicht Rot. Racoons Verbotsspalte ganz oben in dieser Datei
   sagt es fuer Ueberfaelliges, und hier gilt es genauso: kein Netz zu
   haben ist keine Verfehlung, es ist ein Zustand. Das Signal muss
   sichtbar sein, nicht laut.

   Drei Lagen, drei Toene:
     (ohne)   Sand      — kein Netz, es sammelt sich
     .laeuft  Akzent    — Empfang zurueck, es geht gerade raus
     .fertig  Salbei    — alles oben, verschwindet nach ein paar Sekunden */
.netzstreifen{
  flex:none;
  display:flex;align-items:flex-start;gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:color-mix(in srgb, var(--paper-warm), var(--sand) 52%);
  border-bottom:1px solid color-mix(in srgb, var(--sand), var(--ink) 18%);
  font-size:13px;line-height:1.4;color:var(--ink);
  animation:streifen-ein var(--t-enter) var(--e-out);
}
/* Der Punkt links ist kein Symbol, sondern ein Signal: er pulst,
   solange etwas offen ist, und steht still, wenn es erledigt ist. */
.netzstreifen::before{
  content:"";flex:none;width:8px;height:8px;border-radius:50%;
  margin-top:5px;
  background:var(--sand-strich);
  animation:streifen-puls 2.4s ease-in-out infinite;
}
/* Kein Netz: voller Punkt, hier ist nichts. Server nicht erreichbar:
   hohler Punkt — die Leitung steht, am anderen Ende hebt nur niemand
   ab. Ein winziger Unterschied, aber wer die App taeglich benutzt,
   liest ihn irgendwann schneller als den Satz. */
.netzstreifen.server::before{
  background:transparent;
  box-shadow:inset 0 0 0 2px var(--sand-strich);
}
.netzstreifen.laeuft{
  background:var(--accent-tint);
  border-bottom-color:color-mix(in srgb, var(--accent), var(--ink) 12%);
}
.netzstreifen.laeuft::before{ background:var(--accent-deep) }
.netzstreifen.fertig{
  background:var(--sage-tint);
  border-bottom-color:var(--line);
  color:var(--ink-soft);
}
.netzstreifen.fertig::before{ background:var(--sage-deep);animation:none }

@keyframes streifen-ein{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
@keyframes streifen-puls{
  0%,100%{opacity:1}
  50%{opacity:.35}
}
@media (prefers-reduced-motion: reduce){
  .netzstreifen,.netzstreifen::before{animation:none}
}

/* Die Konfliktbuehne erbt alles von der Bussi-Buehne, bis auf die
   Liste: mehrere Saetze untereinander statt eines mittigen. Linksbuendig,
   weil man sie liest und nicht bewundert. */
.konflikt-liste{
  list-style:none;margin:var(--s3) 0 var(--s4);padding:0;
  max-width:34ch;text-align:left;
  display:flex;flex-direction:column;gap:var(--s3);
  font-size:14px;line-height:1.45;color:var(--ink-soft);
}
.konflikt-liste li{
  padding-left:var(--s4);position:relative;
}
.konflikt-liste li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--sand-strich);
}

/* ── Die Tableiste. Vier Orte, nicht mehr. Ein fuenfter waere der
      Moment, in dem die App anfaengt, sich selbst zu verwalten. ── */
/* Fuenf Spalten, seit der Chat dazugekommen ist. Die Zahl steht in
   einer Variablen und nicht als 5 in der Regel: waere sie hart
   gesetzt, faenden wir den naechsten Umbau erst, wenn der fuenfte Tab
   in die zweite Zeile rutscht — genau das ist beim vierten auf
   fuenften passiert. */
.app-tabs{
  flex:none;height:var(--tab-h);
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
  background:var(--paper-warm);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.app-tabs button{
  border:none;background:transparent;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--ink-soft);min-height:44px;
  padding:0 2px;overflow:hidden;
  transition:color var(--t-answer) var(--e-out);
}
.app-tabs svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Bei fuenf Spalten wird es eng: der Name darf schrumpfen, aber nie
   umbrechen — zwei Zeilen im Tab sprengen die Leistenhoehe. */
.app-tabs span{font-size:10.5px;font-weight:500;letter-spacing:0;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.app-tabs button.an{color:var(--sage-deep);font-weight:600}
.app-tabs button.an span{font-weight:600}

/* ═══════════════ SEITENKOPF INNERHALB EINER ANSICHT ═══════════════ */
.seitentitel{
  font-family:var(--display);font-weight:600;font-size:22px;
  letter-spacing:-.015em;margin:0 0 var(--s2);
}
.seitenzeile{
  font-size:14px;color:var(--ink-soft);margin:0 0 var(--s4);
}

/* ── Tagesnavigation. Zwei Pfeile und ein Datum, das antippbar ist und
      auf heute zurueckspringt. Kein Kalenderaufklapp: das waere eine
      zweite Aufgabe in einer Zeile, die nur orientieren soll. ── */
.tagnav{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);
}
.tagnav button{
  width:38px;height:38px;flex:none;border-radius:50%;
  border:1.5px solid var(--line-strong);background:transparent;
  display:grid;place-items:center;cursor:pointer;
  transition:background var(--t-answer) var(--e-out);
}
.tagnav button:hover{background:var(--sage-tint)}
.tagnav button svg{width:18px;height:18px;fill:none;stroke:var(--ink);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tagnav .datum{
  flex:1;text-align:center;background:transparent;border:none;
  cursor:pointer;font:inherit;min-height:44px;border-radius:var(--r-field);
  font-family:var(--display);font-weight:600;font-size:17px;
  color:var(--ink);letter-spacing:-.01em;
  transition:background var(--t-answer) var(--e-out);
}
.tagnav .datum:hover{background:var(--sage-tint)}
.tagnav .datum b{display:block;font-family:var(--ui);font-weight:500;
  font-size:12.5px;color:var(--ink-soft);letter-spacing:0}

/* ── Segmentfilter. Wurmi hat einen im Geruest, aber der gehoert dort
      zum Werkzeug und nicht zur Oberflaeche. Racoon braucht ihn IN der
      Oberflaeche, also eine eigene, ruhigere Fassung. ── */
.filter{
  display:flex;gap:2px;padding:3px;margin-bottom:var(--s4);
  background:var(--sage-tint);border-radius:var(--r-pill);
}
.filter button{
  flex:1;min-height:36px;border:none;background:transparent;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-soft);
  border-radius:var(--r-pill);
  transition:background var(--t-answer) var(--e-out), color var(--t-answer) var(--e-out);
}
.filter button.an{background:var(--paper-warm);color:var(--ink);font-weight:600;
  box-shadow:0 1px 3px rgba(43,46,40,.10)}

/* ── Wem gehoert es. Ein Punkt mit Anfangsbuchstabe, keine Farbe als
      alleiniger Traeger: der Buchstabe steht immer drin. ── */
.wer{
  width:20px;height:20px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:10.5px;font-weight:700;font-family:var(--display);
  color:var(--auf-akzent);background:var(--accent);
}
.wer.b{background:var(--sand);color:#20231B}
.wer.beide{background:var(--sage);color:var(--paper-warm)}

/* ── Ueberfaellig. Sandton, kein Rot, keine Zahl. Die Zeile sagt, seit
      wann, und sonst nichts. Ein Zaehler waere ein Rueckstand, und der
      steht auf der eigenen Verbotsliste. ── */
.seit{
  display:inline-flex;align-items:center;gap:4px;
  padding:1px 7px;border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--paper-warm), var(--sand) 40%);
  color:var(--ink);font-size:11.5px;font-weight:500;
}

/* Prioritaet. Zwei Stufen, mehr braucht ein Haushalt nicht: wichtig
   oder normal. Drei Stufen sind eine Sortieraufgabe. */
.wichtig{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--sage-deep);font-weight:600;font-size:11.5px;
}

/* ── Warum diese Reihenfolge. Wurmi verlangt, dass das System ordnet
      und den Grund nennt. Racoon laesst ziehen, sagt aber, was ohne
      Ziehen gilt. ── */
.ordnung{
  font-size:12.5px;color:var(--ink-soft);font-style:italic;
  margin:calc(var(--s2) * -1) 0 var(--s4);padding-left:var(--s2);
}

/* ── Abschnittsmarke innerhalb einer Liste ── */
.abschnitt-marke{
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin:var(--s5) 0 var(--s2);padding-left:var(--s2);
}
.abschnitt-marke:first-child{margin-top:0}

/* ═══════════════ AUFGABEN ALS KACHELN ═══════════════
   Zeilen waren die vorsichtige Wahl, und sie waren zu kleinteilig: bei
   selten mehr als sechs Aufgaben am Tag ist eine Liste viel Struktur
   fuer wenig Inhalt. Zwei Spalten, grosse Flaechen, der Daumen trifft
   ueberall.

   Die Bedienung hat zwei Stufen, und das ist der heikle Teil:

     kurz tippen  = abhaken. Das ist die haeufige Handlung und kostet
                    darum am wenigsten.
     lang druecken = oeffnen. Beim Halten waechst eine Flaeche von unten
                    hoch, damit man sieht, dass etwas passiert, und
                    rechtzeitig loslassen kann.
     ziehen       = sortieren. Bewegt sich der Finger, bevor die halbe
                    Sekunde um ist, wird aus dem Halten ein Ziehen und
                    die Kachel oeffnet NICHT.

   Ohne die dritte Regel schliessen sich Sortieren und Oeffnen
   gegenseitig aus: beides beginnt mit einem Finger, der liegen bleibt. */
.aufgaben-kacheln{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);
  margin-bottom:var(--s4);
}

.auf-kachel{
  position:relative;overflow:hidden;
  min-height:122px;padding:var(--s3);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
  text-align:left;cursor:pointer;font:inherit;
  background:var(--paper-warm);
  border:1.5px solid var(--line);
  border-radius:var(--r-inner);
  transition:border-color var(--t-answer) var(--e-out),
             background var(--t-answer) var(--e-out);
  /* pan-y statt none. Mit none kann der Finger die Liste nicht mehr
     rollen, sobald er auf einer Kachel aufsetzt — und weil Kacheln
     fast die ganze Flaeche einnehmen, waere die Seite auf dem Telefon
     praktisch festgenagelt. Mit pan-y rollt sie senkrecht weiter, und
     eine waagrecht beginnende Bewegung faengt das Ziehen ab.

     GEMESSEN: `pan-y` war genau der Fehler. Damit gehoert JEDE
     senkrechte Bewegung auf einer Kachel dem Browser — er beansprucht
     sie fuers Scrollen und schickt uns ein pointercancel. Solange man
     nur innerhalb des Rasters seitlich sortiert, faellt das kaum auf.
     Sobald die Zielleiste unten dazukam, starb jedes Ziehen genau auf
     dem Weg dorthin: der Finger geht nach unten, der Browser sagt
     "das ist Scrollen", und die Geste ist weg.

     Jetzt `none`: was auf einer Kachel beginnt, gehoert uns. Gescrollt
     wird ueber alles andere — Kopfzeile, Filterleiste, die Luecken
     zwischen den Kacheln, die Abschnitte darunter. Bei zwei Spalten
     mit Abstand ist genug Flaeche da.

     Der Wert muss FEST stehen und darf nicht beim pointerdown gesetzt
     werden: der Browser liest ihn beim Treffertest des touchstart,
     also bevor irgendein Handler laeuft. */
  touch-action:none;
  user-select:none;
}
.auf-kachel:hover{border-color:var(--accent-deep)}

/* Die Fuellung beim Halten. Bewegung mit Ursache: der Finger ist die
   Ursache, und sie hoert auf, sobald er weg ist. */
.auf-kachel::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--accent-tint);
  transform:scaleY(0);transform-origin:bottom;
}
.auf-kachel.haelt::before{
  transition:transform 500ms linear;
  transform:scaleY(1);
}
@media(prefers-reduced-motion:reduce){
  .auf-kachel.haelt::before{transition:none;transform:scaleY(1);opacity:.5}
}
.auf-kachel > *{position:relative;z-index:1}

.auf-kachel .zeichen{
  width:30px;height:30px;flex:none;
  fill:none;stroke:var(--sage-deep);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.auf-kachel .mono{width:30px;height:30px;font-size:17px}
.auf-kachel .was{
  font-size:14.5px;line-height:1.25;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
/* align-self:stretch ist hier tragend. Die Kachel richtet ihre Kinder
   links aus (align-items:flex-start), damit der Name nicht mittig
   steht. Dadurch war auch der Fuss nur so breit wie sein Inhalt, und
   drei kleine Hinweise brachen in drei Zeilen um, statt nebeneinander
   zu stehen: aus einer 122px-Kachel wurden 170px. */
.auf-kachel .kfuss{
  margin-top:auto;align-self:stretch;
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;
}
.auf-kachel .kfuss svg{
  width:12px;height:12px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
/* Wem sie gehoert, oben rechts. Aus dem Fluss genommen, damit der Name
   die volle Breite behaelt. */
.auf-kachel .wer{position:absolute;top:var(--s3);right:var(--s3);z-index:2}

/* Erledigt. Gedaempft, nicht durchgestrichen: durchgestrichen liest
   sich als geloescht. */
.auf-kachel.durch{background:var(--accent-tint);border-color:transparent}
/* Nicht --ink-soft, sondern ein Wert dazwischen. Gemessen: im dunklen
   Modus kam die gedaempfte Schrift auf dem aufgehellten Akzentton je
   nach Schema auf 3,57 bis 4,00, verlangt sind 4,5. Der Wert war der
   einzige, der ueber alle Messrunden hinweg stabil blieb, und damit
   der einzige, dem ich glaube. Die Daempfung bleibt sichtbar, sie
   faellt nur nicht mehr unter die Grenze. */
.auf-kachel.durch .was{color:color-mix(in srgb, var(--ink-soft), var(--ink) 45%)}
.auf-kachel.durch .zeichen{stroke:var(--ink-soft);opacity:.65}
.auf-kachel.durch .mono{color:var(--ink-soft);border-color:var(--ink-soft);opacity:.65}
.auf-kachel .haken-strich{
  position:absolute;top:34px;right:10px;left:auto;width:30px;height:27px;z-index:2;
}
.auf-kachel .haken-strich path{stroke:var(--accent-deep);stroke-width:2.8}

/* Wartend. Gedaempft, aber anders als erledigt: blass statt gefaerbt. */
/* Wartend. Die erste Fassung war nur blass (.62), und damit war der
   Zustand nicht mitgeteilt, sondern versteckt: man sah eine
   durchsichtige Kachel und wusste nicht, warum. Wurmis Regel
   "Bedeutung nie allein in der Farbe" gilt fuer Deckkraft genauso.
   Jetzt steht "wartet" im Fuss, und die Daempfung ist nur noch die
   Verstaerkung einer Aussage, die schon dasteht. */
.auf-kachel.wartet{opacity:.82}
.auf-kachel .wartetext{
  display:inline-flex;align-items:center;gap:4px;
  padding:1px 7px;border-radius:var(--r-pill);
  background:var(--sage-tint);color:var(--ink);font-weight:500;
}

/* ── In der Hand. Die Kachel wird abgehoben, nicht blass: blass hiesse
      "weg", und sie ist ja gerade das, worauf man schaut. Die leichte
      Drehung ist kein Schmuck, sondern die Ansage, dass sie geloest ist
      und noch nirgends liegt. Nichts ist ganz gerade. ── */
.auf-kachel.zieht{
  z-index:60;
  border-color:var(--accent-deep);
  background:var(--paper-warm);
  box-shadow:0 14px 30px -10px rgba(43,46,40,.38);
  transform:rotate(-1.6deg) scale(1.03);
  cursor:grabbing;
}
[data-theme="dark"] .auf-kachel.zieht{box-shadow:0 14px 30px -8px rgba(0,0,0,.6)}

/* Der freie Platz, an den sie faellt. Gestrichelt, weil er kein Inhalt
   ist, sondern eine Aussicht. */
.auf-platz{
  border:1.5px dashed var(--line-strong);
  border-radius:var(--r-inner);
  background:color-mix(in srgb, var(--paper), var(--accent) 10%);
}

@media(prefers-reduced-motion:reduce){
  .auf-kachel.zieht{transform:none}
}

/* ── Der Oeffnen-Knopf. Langes Druecken ist auf dem Handy die richtige
      Geste, aber mit der Maus findet sie niemand und mit der Tastatur
      ist sie gar nicht moeglich. Deshalb dieser kleine Knopf: mit dem
      Zeiger erscheint er beim Darueberfahren, mit der Tastatur beim
      Fokus, und auf dem Handy stoert er nicht, weil dort niemand
      hoverd. ── */
.auf-kachel .oeffnen{
  position:absolute;bottom:6px;right:6px;z-index:3;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-strong);
  opacity:0;transition:opacity var(--t-answer) var(--e-out);
}
.auf-kachel .oeffnen svg{
  width:14px;height:14px;fill:none;stroke:var(--ink-soft);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.auf-kachel:hover .oeffnen,
.auf-kachel .oeffnen:focus-visible{opacity:1}
@media(hover:none){
  /* Auf dem Handy gibt es kein Darueberfahren: der Knopf waere dauernd
     sichtbar und wuerde die Kachel zumuellen. Dort gilt langes
     Druecken. */
  .auf-kachel .oeffnen{display:none}
}

/* ═══════════════ KACHELN ═══════════════
   Aus faden-designsystem.html uebernommen, nicht nacherfunden.
   104px Klickflaeche, weil eine Kachel mit dem Daumen getroffen wird. */
.kacheln{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:var(--s2);
}
.kachel{
  position:relative;
  min-height:96px;padding:var(--s3) var(--s2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);cursor:pointer;font:inherit;
  background:var(--paper-warm);
  border:1.5px solid var(--line);
  border-radius:var(--r-inner);
  transition:background var(--t-answer) var(--e-out),
             border-color var(--t-answer) var(--e-out),
             transform 110ms var(--e-out);
}
.kachel:hover{border-color:var(--accent-deep);background:var(--accent-tint)}
.kachel:active{transform:translateY(1px)}
.kachel svg.zeichen{
  width:34px;height:34px;fill:none;stroke:var(--sage-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.kachel span{
  font-size:13px;font-weight:500;text-align:center;line-height:1.2;
  color:var(--ink);
}
.kachel .menge{font-size:11.5px;color:var(--ink-soft);font-weight:500}

/* ── Das Monogramm. Fuer alles, was noch kein gezeichnetes Zeichen hat.
      Handgeschrieben wirkt es durch die Anzeigeschrift und eine leichte
      Drehung, nicht durch eine Schreibschrift: eine echte Schreibschrift
      waere bei 13px unlesbar. Die Farbe kommt aus dem Schema, nicht aus
      dem Eintrag, sonst entsteht ein zweites Farbsystem. ── */
.mono{
  width:34px;height:34px;display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:19px;
  color:var(--sage-deep);
  border:2px solid var(--sage-deep);border-radius:14px 5px 14px 5px;
  transform:rotate(-3deg);
}

/* Die drei Zustaende der Einkaufsliste. */
.kachel.auf-liste{background:var(--feld-liste);border-color:var(--accent-deep)}
.kachel.fertig{background:var(--feld-fertig);border-color:transparent}
.kachel.fertig span{color:var(--ink-soft)}
.kachel.fertig svg.zeichen{stroke:var(--ink-soft);opacity:.7}
.kachel.fertig .mono{color:var(--ink-soft);border-color:var(--ink-soft);opacity:.7}

/* Der Federzug quittiert die Wahl, wie in der Checkliste. */
.kachel .haken-strich{position:absolute;top:6px;right:6px;width:26px;height:24px;left:auto}
.kachel .haken-strich path{stroke:var(--accent-deep);stroke-width:2.6}

/* Der Aufraeumknopf unter der Einkaufsliste. Kein Akkordeon, keine
   Rueckfrage: was erledigt ist, verschwindet auf einen Druck. */
.raeumen{
  display:block;width:100%;margin-top:var(--s3);min-height:44px;
  padding:var(--s2) var(--s3);
  border:1.5px solid var(--line-strong);background:transparent;
  cursor:pointer;font:inherit;
  font-size:14px;font-weight:600;color:var(--ink);
  border-radius:var(--r-pill);
  transition:background var(--t-answer) var(--e-out), border-color var(--t-answer) var(--e-out);
}
.raeumen span{
  display:block;font-size:11.5px;font-weight:400;color:var(--ink-soft);margin-top:1px;
}
.raeumen:hover{background:var(--paper-warm);border-color:var(--accent-deep)}

/* Ist nichts mehr offen, ist Abschliessen die einzige sinnvolle
   Handlung und traegt darum den Akzent. Vorher ist es eine Moeglichkeit
   unter mehreren und bleibt zurueckhaltend. */
.raeumen.voll{
  background:var(--accent);border-color:var(--accent-deep);color:var(--auf-akzent);
}
.raeumen.voll span{color:var(--auf-akzent);opacity:.75}
.raeumen.voll:hover{background:var(--accent-deep)}

/* ═══════════════ AKKORDEON ═══════════════ */
.klapp{
  border-radius:var(--r-inner);margin-bottom:var(--s3);overflow:hidden;
}
.klapp.offen-feld{background:var(--feld-offen)}
.klapp.liste-feld{background:var(--feld-liste)}
.klapp.fertig-feld{background:var(--feld-fertig)}

.klapp > summary{
  list-style:none;cursor:pointer;min-height:46px;
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);
  font-size:14px;font-weight:600;color:var(--ink);
}
.klapp > summary::-webkit-details-marker{display:none}
.klapp > summary .anzahl{
  margin-left:auto;font-size:12.5px;font-weight:500;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.klapp > summary .pfeil{
  width:16px;height:16px;flex:none;fill:none;stroke:var(--ink-soft);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-answer) var(--e-out);
}
.klapp[open] > summary .pfeil{transform:rotate(90deg)}
.klapp .klapp-inhalt{padding:0 var(--s3) var(--s4)}

/* Innerhalb eines gefaerbten Feldes sind die Kacheln heller als der
   Grund, nicht dunkler: sonst verschwindet das Raster im Feld. */
.klapp .kachel{background:var(--paper-warm);border-color:transparent}
.klapp.liste-feld .kachel{background:var(--paper-warm)}
.klapp .kachel:hover{border-color:var(--accent-deep)}

/* Erledigt im Feld. Die Regel darueber gab allen Kacheln im Akkordeon
   denselben hellen Grund und hob damit die Daempfung wieder auf: der
   Unterschied haengt sonst nur am Haeckchen. Statt einer eigenen
   Farbe faellt die Kachel jetzt in den Feldgrund zurueck und wird
   blasser. Das ist "leicht ausgrauen", ohne einen dritten Farbwert
   einzufuehren. */
.klapp .kachel.fertig{background:transparent;border-color:transparent;opacity:.58}
.klapp .kachel.fertig:hover{opacity:.85;border-color:var(--line-strong)}

/* ═══════════════ EINGABEZEILE, KLEBEND ═══════════════
   Sitzt ueber der Tableiste, nicht darunter: was man tippt, muss man
   sehen, und die Tastatur schiebt von unten. */
.eingabe-leiste{
  flex:none;padding:var(--s3) var(--s4);
  border-top:1px solid var(--line);
  background:var(--paper-warm);
}
.eingabe-zeile{
  display:flex;align-items:center;gap:var(--s2);
  background:var(--paper);border:1.5px solid var(--line-strong);
  border-radius:var(--r-pill);padding:0 var(--s2) 0 var(--s4);
  transition:border-color var(--t-answer) var(--e-out);
}
.eingabe-zeile:focus-within{border-color:var(--accent-deep)}
.eingabe-zeile input{
  flex:1;border:none;background:transparent;font:inherit;font-size:15.5px;
  color:var(--ink);min-height:44px;outline:none;
}
.eingabe-zeile input::placeholder{color:var(--ink-soft)}

/* Der Treffer erscheint als Knopf mit Zeichen und Namen, direkt in der
   Zeile. Ein Vorschlag, den man antippt, keine Liste, die man liest. */
.treffer{
  display:flex;align-items:center;gap:var(--s2);
  padding:6px var(--s3) 6px var(--s2);min-height:36px;
  background:var(--accent);border:none;border-radius:var(--r-pill);
  cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  color:var(--auf-akzent);white-space:nowrap;
  animation:treffer-auf 160ms var(--e-out);
}
@keyframes treffer-auf{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.treffer svg{width:20px;height:20px;fill:none;stroke:var(--auf-akzent);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.treffer .mono{
  width:20px;height:20px;font-size:12px;border-width:1.5px;border-radius:8px 3px 8px 3px;
  color:var(--auf-akzent);border-color:var(--auf-akzent);
}

/* ═══════════════ KALENDER ═══════════════ */
.monat{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
  margin-bottom:var(--s5);
}
.monat .wt{
  text-align:center;font-size:11px;font-weight:600;color:var(--ink-soft);
  padding:var(--s2) 0;letter-spacing:.04em;
}
.monat .tag{
  aspect-ratio:1;border:none;background:transparent;cursor:pointer;font:inherit;
  border-radius:12px 4px 12px 4px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:14px;color:var(--ink);
  transition:background var(--t-answer) var(--e-out);
}
.monat .tag:hover{background:var(--sage-tint)}
.monat .tag.fremd{color:var(--ink-soft);opacity:.45}
.monat .tag.heute{background:var(--accent);color:var(--auf-akzent);font-weight:700}
.monat .tag .punkte-reihe{display:flex;gap:2px;height:4px}
.monat .tag i{width:4px;height:4px;border-radius:50%;background:var(--sage-deep)}
.monat .tag i.geb{background:var(--sand)}
.monat .tag.heute i{background:var(--auf-akzent)}

.termin{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s3) var(--s2);border-radius:var(--r-field);
  width:100%;text-align:left;background:transparent;border:none;
  cursor:pointer;font:inherit;
  transition:background var(--t-answer) var(--e-out);
}
.termin:hover{background:var(--sage-tint)}
.termin .zeit{
  font-family:var(--display);font-weight:600;font-size:13px;
  color:var(--ink-soft);width:44px;flex:none;padding-top:2px;
  font-variant-numeric:tabular-nums;
}
.termin .was{font-size:15.5px;line-height:1.3}
.termin .neben{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.termin .zeichen{width:22px;height:22px;flex:none;fill:none;stroke:var(--sage-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Die Glocke am Ende der Zeile. Sie trug vorher die Klasse
   `pfeil-klein`, und dafuer gab es hier drin gar keine Regel: kein
   fill:none, kein stroke, keine Groesse. Also zeichnete der Browser
   seinen Standard — schwarz gefuellt und in voller Groesse. Gemessen:
   42px schwarzer Klecks neben einem 6px grossen Zeichen. */
.termin .erinnerungszeichen{
  width:16px;height:16px;flex:none;margin-left:auto;align-self:center;
  fill:none;stroke:var(--ink-soft);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ═══════════════ AUFGABENBLATT (Detail) ═══════════════ */
.feldzeile{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s2);border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.feldzeile:last-of-type{border-bottom:none}
.feldzeile .fmarke{
  color:var(--ink-soft);font-size:13px;width:96px;flex:none;
  display:flex;align-items:center;gap:6px;padding:0;
}
.feldzeile .fmarke svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.feldzeile .wert{flex:1;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}

.kommentar{
  display:flex;gap:var(--s3);padding:var(--s3) 0;
}
.kommentar .wer{margin-top:2px}
.kommentar .inhalt{flex:1}
.kommentar .kopf{font-size:12.5px;color:var(--ink-soft);margin-bottom:2px}
.kommentar p{font-size:14.5px;line-height:1.45;margin:0}

/* ── Zuruf schreiben. Ein Feld, ein Knopf, kein Formular: was man hier
      sagt, ist ein Satz, keine Eingabe. ── */
.zuruf-neu{
  display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);
  background:var(--paper-warm);border:1.5px solid var(--line-strong);
  border-radius:var(--r-pill);padding:0 4px 0 var(--s4);
  transition:border-color var(--t-answer) var(--e-out);
}
.zuruf-neu:focus-within{border-color:var(--accent-deep)}
.zuruf-neu input{
  flex:1;border:none;background:transparent;font:inherit;font-size:14.5px;
  color:var(--ink);min-height:44px;outline:none;
}
.zuruf-neu input::placeholder{color:var(--ink-soft)}
.zuruf-senden{
  width:36px;height:36px;flex:none;border-radius:50%;
  border:none;background:var(--accent);cursor:pointer;
  display:grid;place-items:center;
}
.zuruf-senden svg{
  width:17px;height:17px;fill:none;stroke:var(--auf-akzent);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.zuruf-hinweis{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--ink-soft);margin:var(--s2) 0 0;padding-left:var(--s3);
}
.zuruf-hinweis svg{
  width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* ═══════════════ BUSSI ═══════════════
   Eine eigene kleine Buehne. Kein Ort in der Tableiste, sondern etwas,
   das sich ueber die Ansicht legt und wieder geht. */
.bussi-buehne{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);padding:var(--s6);text-align:center;
  background:color-mix(in srgb, var(--paper), transparent 6%);
  backdrop-filter:blur(3px);
  animation:bussi-auf 240ms var(--e-out);
}
@keyframes bussi-auf{from{opacity:0}to{opacity:1}}
.bussi-buehne .figur{width:96px;height:96px}
.bussi-buehne .spruch{
  font-family:var(--display);font-size:20px;font-weight:600;
  letter-spacing:-.01em;line-height:1.3;
}
.bussi-buehne .klein{font-size:14px;color:var(--ink-soft)}

/* ═══════════════ ANMELDEN ═══════════════
   Der zweite Schritt der Anmeldebuehne: ein Feld und zwei Knoepfe.
   Die Buehne ist schon zentriert, das Formular erbt das — es braucht
   nur eine Breite, sonst laeuft das Feld auf einem Rechner ueber die
   ganze Fensterbreite und sieht aus wie eine Suchleiste.

   16px auf dem Feld sind kein Geschmack: Safari auf dem iPhone zoomt
   beim Hineintippen in JEDES Feld unter 16px hinein, und die Buehne
   waere danach verrutscht. */
.anmelde-form{
  display:flex;flex-direction:column;align-items:stretch;
  gap:var(--s3);width:100%;max-width:300px;
}
.anmelde-feld{
  min-height:46px;padding:0 var(--s4);
  border:1.5px solid var(--line-strong);border-radius:var(--r-field);
  background:var(--paper);color:var(--ink);
  font:inherit;font-size:16px;text-align:center;
  letter-spacing:.18em;
  transition:border-color var(--t-answer) var(--e-out);
}
.anmelde-feld::placeholder{letter-spacing:.18em;color:var(--ink-soft);opacity:.5}
.anmelde-feld:focus{outline:none;border-color:var(--accent-deep)}
.anmelde-knoepfe{
  display:flex;gap:var(--s3);align-items:center;justify-content:center;
  flex-wrap:wrap;
}
/* Der Fehler steht UNTER dem Feld und nicht als Blatt darueber: eine
   Meldung, die den Grund verdeckt, muss erst weggeklickt werden, und
   das ist beim dritten Tippfehler zum Wahnsinnigwerden. `role="alert"`
   liest der Screenreader von selbst vor, ohne dass der Fokus springt. */
.anmelde-fehler{
  font-size:13.5px;line-height:1.35;color:var(--ink);
  background:var(--sand);border-radius:var(--r-inner);
  padding:var(--s2) var(--s3);
}

/* Zwei Knoepfe nebeneinander gibt es nur bei der Einladung: sie ist
   die einzige Buehne, die etwas vorschlaegt, statt etwas zu melden.
   Und wer etwas vorschlaegt, muss ein Nein anbieten, das keine
   Sackgasse ist — "Spaeter" steht gleichberechtigt daneben, nur ohne
   Farbe. */
.einladung-knoepfe{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
  justify-content:center}
.erf-spaeter{
  min-height:44px;padding:0 var(--s5);
  border:1.5px solid var(--line);background:transparent;
  color:var(--ink-soft);font:inherit;font-size:15px;
  border-radius:var(--r-pill);cursor:pointer;
  transition:background var(--t-answer) var(--e-out);
}
.erf-spaeter:hover{background:var(--sage-tint)}

/* Das fliegende Herz. Bewegung mit Ursache: es gibt genau eine, und
   sie ist der Tastendruck. */
.herzflug{
  position:absolute;pointer-events:none;z-index:25;
  animation:herz-hoch 900ms var(--e-out) forwards;
}
.herzflug svg{width:26px;height:26px;fill:var(--accent);stroke:var(--accent-deep);stroke-width:1.5}
@keyframes herz-hoch{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  20%{opacity:1;transform:translateY(-14px) scale(1.05)}
  100%{opacity:0;transform:translateY(-96px) scale(.85)}
}
@media(prefers-reduced-motion:reduce){
  .herzflug{animation:none;opacity:0}
  .bussi-buehne{animation:none}
  .treffer{animation:none}
}

/* ═══════════════ FARBWAHL ═══════════════
   Der Ton selbst ist die Beschriftung, der Name steht daneben: eine
   Farbe zu waehlen, ohne sie zu sehen, ist Raten. Und weil Bedeutung
   nie allein in der Farbe liegen darf, traegt die gewaehlte
   zusaetzlich den Federzug. */
.farbwahl{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:var(--s2);margin-bottom:var(--s5);
}
.farbe{
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s2);cursor:pointer;font:inherit;
  background:var(--paper-warm);border:1.5px solid var(--line);
  border-radius:var(--r-inner);
  transition:border-color var(--t-answer) var(--e-out);
}
.farbe:hover{border-color:var(--accent-deep)}
.farbe.an{border-color:var(--accent-deep);background:var(--accent-tint)}
.farbpunkt{
  width:38px;height:38px;border-radius:50%;position:relative;overflow:visible;
  border:1.5px solid rgba(43,46,40,.18);
}
.farbpunkt .haken-strich{position:absolute;left:1px;top:0;width:36px;height:32px}
.farbpunkt .haken-strich path{stroke:#20231B;stroke-width:3}
.farbname{font-size:13.5px;font-weight:500;color:var(--ink)}
.farbe.an .farbname{font-weight:600}
.farbneben{font-size:11.5px;color:var(--ink-soft);text-align:center;line-height:1.2}

/* ═══════════════ BEARBEITBARE FELDZEILEN ═══════════════ */
.feldzeile.knopf{
  display:flex;width:100%;text-align:left;
  background:transparent;border:none;border-bottom:1px solid var(--line);
  cursor:pointer;font:inherit;min-height:52px;
  transition:background var(--t-answer) var(--e-out);
}
.feldzeile.knopf:hover{background:var(--sage-tint)}
.feldzeile.knopf .pfeil-klein{
  width:15px;height:15px;flex:none;align-self:center;
  fill:none;stroke:var(--ink-soft);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6;
}
.feldzeile .leerwert{color:var(--ink-soft);font-style:italic}

/* Der Titel ist bearbeitbar, und das muss man sehen: ein Stift, der
   beim Darueberfahren deutlicher wird. Ohne Hinweis tippt niemand auf
   eine Ueberschrift. */
.seitentitel.bearbeitbar{
  display:flex;align-items:center;gap:var(--s2);
  cursor:pointer;border-radius:var(--r-field);
  margin-left:calc(var(--s2) * -1);padding:2px var(--s2);
  transition:background var(--t-answer) var(--e-out);
}
.seitentitel.bearbeitbar:hover{background:var(--sage-tint)}
.stift-mini{
  width:16px;height:16px;flex:none;fill:none;stroke:var(--ink-soft);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.45;
  transition:opacity var(--t-answer) var(--e-out);
}
.seitentitel.bearbeitbar:hover .stift-mini{opacity:1}
.name-feld{
  width:100%;font:inherit;font-family:var(--display);font-weight:600;
  font-size:22px;letter-spacing:-.015em;color:var(--ink);
  background:var(--paper-warm);border:1.5px solid var(--accent-deep);
  border-radius:var(--r-field);padding:2px var(--s2);outline:none;
}

/* ═══════════════ WÄHLBLATT ═══════════════ */
.wahlliste{display:grid;gap:2px}
.wahl{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;text-align:left;min-height:52px;padding:var(--s2) var(--s3);
  background:transparent;border:none;border-radius:var(--r-field);
  cursor:pointer;font:inherit;
  transition:background var(--t-answer) var(--e-out);
}
.wahl:hover{background:var(--sage-tint)}
.wahl.an{background:var(--accent-tint)}
.wahl svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--sage-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wahl-text{flex:1;min-width:0}
.wahl-name{display:block;font-size:15.5px;line-height:1.3}
.wahl.an .wahl-name{font-weight:600}
.wahl-neben{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:1px}
.wahl-haken{position:relative;width:22px;height:22px;flex:none}
.wahl-haken .haken-strich{position:absolute;left:-6px;top:-6px;width:32px;height:29px}
.wahl-haken .haken-strich path{stroke:var(--accent-deep);stroke-width:2.6}

/* Loeschen. Sichtbar anders als der stille Ausweg daneben, aber ohne
   Rot: Wurmi kennt kein Rot, und ein Loeschknopf, der schreit, wird
   aus Versehen gedrueckt. */
.ausweg.loeschen{
  display:block;margin:var(--s5) auto 0;color:var(--ink-soft);
  text-decoration-color:var(--line-strong);
}
.ausweg.loeschen:hover{color:var(--ink)}

/* Der Waschbaer als Absender einer Notiz. Kein Personenpunkt: er ist
   keine Person, und eine Aenderungsnotiz ist kein Zuruf. */
.kommentar .wer.racoon{
  background:var(--sage-tint);display:grid;place-items:center;padding:1px;
}
.kommentar .wer.racoon svg{width:100%;height:100%}
.kommentar .wer.racoon svg path,.kommentar .wer.racoon svg circle{
  fill:none;stroke:var(--sage-deep);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.kommentar .wer.racoon svg .auge{fill:var(--sage-deep);stroke:none}
.kommentar.vonracoon p{color:var(--ink-soft);font-style:italic;font-size:13.5px}

/* ═══════════════ ANLEGEN ═══════════════
   Anders als die anderen Buehnen: hier wird nicht geschaut, sondern
   getippt. Deshalb sitzt das Blatt oben statt mittig, damit es die
   Tastatur nicht von unten wegschiebt. */
.anlegen-buehne{justify-content:flex-start;padding:var(--s5) var(--s4)}
.anlegen-blatt{
  width:100%;background:var(--paper-warm);
  border:1.5px solid var(--line);border-radius:var(--r-card);
  padding:var(--s5) var(--s4) var(--s4);
  box-shadow:0 14px 34px -14px rgba(43,46,40,.3);
  text-align:left;
}
[data-theme="dark"] .anlegen-blatt{box-shadow:0 14px 34px -12px rgba(0,0,0,.6)}
.anlegen-titel{
  font-family:var(--display);font-weight:600;font-size:20px;
  letter-spacing:-.015em;margin-bottom:var(--s4);
}
.anlegen-oder{
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin:var(--s5) 0 var(--s3);
}
.anlegen-kacheln{max-height:212px;overflow-y:auto;padding-bottom:2px}
.anlegen-kacheln .kachel{min-height:86px}
.anlegen-blatt .ausweg{display:block;margin:var(--s5) auto 0}

/* ═══════════════ AUSZEICHNUNGEN ═══════════════ */
.erf{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s3) var(--s2);
  border-bottom:1px solid var(--line);
}
.erf:last-of-type{border-bottom:none}

.erf-kreis{
  width:26px;height:26px;flex:none;margin-top:1px;
  border-radius:50%;border:2px solid var(--line-strong);
  position:relative;overflow:visible;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink-soft);
}
.erf-kreis.voll{background:var(--accent);border-color:var(--accent-deep)}
.erf-kreis .haken-strich{position:absolute;left:-5px;top:-7px;width:36px;height:32px}

.erf-text{flex:1;min-width:0}
.erf-name{display:block;font-size:15px;font-weight:600;line-height:1.3}
.erf-spruch{
  display:block;font-size:13px;color:var(--ink-soft);line-height:1.4;margin-top:2px;
}
.erf.hat .erf-spruch{font-style:italic}

/* Der Fortschritt. Ein Balken, und die Zahl daneben sagt es genauer:
   zwei Zahlen fuer dieselbe Sache waeren eine zu viel, deshalb steht
   dort kein Prozentwert. */
.erf-balken{
  display:block;height:5px;margin:6px 0 4px;
  background:var(--sage-tint);border-radius:var(--r-pill);overflow:hidden;
}
.erf-balken i{
  display:block;height:100%;background:var(--accent-deep);
  border-radius:var(--r-pill);
}

/* Im Dunkeln. Gestrichelt und blass: es ist da, aber noch nicht euer. */
.erf.verborgen{opacity:.55}
.erf.verborgen .erf-kreis{border-style:dashed}
.erf.verborgen .erf-name{font-weight:500;color:var(--ink-soft)}

/* ── Die Buehne, wenn eine faellt. Gleiche Anatomie wie beim Bussi,
      damit die App nur eine Art hat, gross zu werden. ── */
.erfolg-buehne .erf-marke{
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);
}
.erf-weiter{
  min-height:44px;padding:0 var(--s6);margin-top:var(--s2);
  border:1.5px solid var(--accent-deep);background:var(--accent);
  color:var(--auf-akzent);font:inherit;font-weight:600;font-size:15px;
  border-radius:var(--r-pill);cursor:pointer;
}
.erf-weiter:hover{background:var(--accent-deep)}
.erfolg-buehne .figur,
.gruss-buehne .figur{width:104px;height:104px}

/* ═══════════════ WASCHBAER-EINWURF ═══════════════
   Der Geleitkasten aus Wurmi, aber schmaler: hier steht ein Einzeiler,
   kein Absatz. */
.einwurf{
  display:flex;gap:var(--s3);align-items:center;
  background:var(--accent-tint);border-radius:var(--r-inner);
  padding:var(--s3) var(--s4);margin-bottom:var(--s4);
}
.einwurf .figur{width:44px;height:44px;flex:none}   /* 44 statt 38: unter 40px kippt die volle Figur, siehe baer.js */
.einwurf p{font-size:14.5px;line-height:1.4;margin:0;color:var(--ink)}

/* ═══════════════ HANDLUNGSKNOPF, SCHWEBEND ═══════════════
   Eine Hauptaktion je Ansicht, unten rechts ueber dem Inhalt. */
.plus{
  position:absolute;right:var(--s4);bottom:calc(var(--tab-h) + var(--s4));
  width:52px;height:52px;border-radius:50%;z-index:15;
  border:1.5px solid var(--accent-deep);background:var(--accent);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 16px -4px rgba(43,46,40,.28);
  transition:transform 120ms var(--e-out);
}
.plus:active{transform:scale(.94)}
.plus svg{width:24px;height:24px;fill:none;stroke:var(--auf-akzent);
  stroke-width:2.4;stroke-linecap:round}

/* ═══════════════ LEERE ANSICHT ═══════════════
   Kein "nichts gefunden". Der Waschbaer sagt es freundlich, und es gibt
   genau einen Weg weiter. */
.leer{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding:var(--s7) var(--s4);text-align:center;
}
.leer .figur{width:64px;height:64px}
.leer p{font-size:15px;color:var(--ink-soft);margin:0;line-height:1.45}

/* ═══════════════ VORLAGENZEILE ═══════════════ */
.vorlage{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;text-align:left;background:transparent;border:none;
  cursor:pointer;font:inherit;padding:var(--s3) var(--s2);
  border-radius:var(--r-field);
  transition:background var(--t-answer) var(--e-out);
}
.vorlage:hover{background:var(--sage-tint)}
.vorlage .zeichen{width:28px;height:28px;flex:none;fill:none;stroke:var(--sage-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vorlage .text{flex:1;min-width:0}
.vorlage .was{font-size:15.5px;display:block;line-height:1.3}
.vorlage .takt{font-size:12.5px;color:var(--ink-soft);margin-top:2px;
  display:flex;align-items:center;gap:5px}
.vorlage .takt svg{width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── Noch nicht gebaut ──
   Diese vier Eintraege sehen aus wie die anderen und sind es nicht.
   Statt sie zu verstecken, tragen sie es sichtbar: gedaempft, und am
   Ende der Zeile steht, woran man ist. Der Pfeil ist weg — er hat
   "hier geht es weiter" versprochen, und das war die eigentliche
   Luege. Angetippt werden duerfen sie trotzdem, dann erklaert Racoon
   es selbst. */
.vorlage.kommt .zeichen{stroke:var(--ink-soft);opacity:.6}
.vorlage.kommt .was{color:var(--ink-soft)}
.kommt-marke{
  flex:none;align-self:center;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;
  color:var(--ink-soft);background:var(--sage-tint);
  border:1px solid var(--line);
  padding:3px 9px;border-radius:var(--r-pill);
  white-space:nowrap;
}
/* Im Aufgabenblatt sitzt die Zeile direkt unter der Schrittliste und
   soll kleiner sein als eine Einstellung unter Mehr. */
.schritt-kommt{padding-left:var(--s2)}
.schritt-kommt .zeichen{width:22px;height:22px}
.schritt-kommt .was{font-size:14px}
.kommt-buehne .erf-marke{
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);
}

/* ═══════════════ LISTENKARTE (Einkauf, Uebersicht) ═══════════════ */
.listenkarte{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;text-align:left;background:var(--paper-warm);border:1.5px solid var(--line);
  cursor:pointer;font:inherit;padding:var(--s4);margin-bottom:var(--s2);
  border-radius:var(--r-inner);
  transition:border-color var(--t-answer) var(--e-out), background var(--t-answer) var(--e-out);
}
.listenkarte:hover{border-color:var(--accent-deep);background:var(--accent-tint)}
.listenkarte .text{flex:1}
.listenkarte .was{font-family:var(--display);font-weight:600;font-size:16.5px;
  display:block;letter-spacing:-.01em}
.listenkarte .neben{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.listenkarte .zeichen{width:26px;height:26px;flex:none;fill:none;stroke:var(--sage-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════ ZURUECK ═══════════════ */
.zurueck-zeile{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);
}
.zurueck-knopf{
  display:inline-flex;align-items:center;gap:6px;min-height:38px;
  padding:0 var(--s3) 0 var(--s2);border-radius:var(--r-pill);
  border:none;background:transparent;cursor:pointer;font:inherit;
  font-size:14px;color:var(--ink-soft);
  transition:background var(--t-answer) var(--e-out), color var(--t-answer) var(--e-out);
}
.zurueck-knopf:hover{background:var(--sage-tint);color:var(--ink)}
.zurueck-knopf svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════ ANSICHTSWECHSEL ═══════════════
   Wurmi wechselt Blaetter mit Ausatmen und Einatmen. In einer App mit
   Tableiste waere das zu viel: man wechselt hier oft und beilaeufig.
   Deshalb nur ein kurzes Einblenden, und nur beim Wechsel des Ortes,
   nicht beim Filtern innerhalb einer Ansicht. */
.app-inhalt.kommt{animation:inhalt-an var(--t-enter) var(--e-out)}
@keyframes inhalt-an{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .app-inhalt.kommt{animation:none}
}

/* ═══════════════ GERUEST ═══════════════
   Racoon laeuft immer im Telefonrahmen: eine Haushalts-App am Desktop
   ist kein Ziel. Der Desktop-Handy-Schalter aus Wurmis Geruest
   entfaellt deshalb, Hell/Dunkel und die Schemata bleiben. */
body.handy .geraet{display:flex;flex-direction:column}
body.handy .geraet .app{flex:1;min-height:0}

/* ── Das Artikelblatt. Das Zeichen gross, weil es hier um genau
      diesen einen Artikel geht und sonst wenig auf der Seite steht. ── */
.artikel-schau{
  display:grid;place-items:center;padding:var(--s5) 0 var(--s6);
}
.artikel-zeichen{
  width:76px;height:76px;fill:none;stroke:var(--sage-deep);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.artikel-mono{
  width:76px;height:76px;font-size:40px;border-width:2.5px;
  border-radius:28px 10px 28px 10px;
}

/* ── Farbwechsel vor Augen. Nur waehrend eines Wechsels aktiv, sonst
      waere jede Ansicht traege. Wird vom Skript fuer 900ms gesetzt. ── */
html.farbwechsel *,
html.farbwechsel *::before,
html.farbwechsel *::after{
  transition:background-color 620ms var(--e-soft),
             border-color 620ms var(--e-soft),
             color 620ms var(--e-soft),
             stroke 620ms var(--e-soft),
             fill 620ms var(--e-soft) !important;
}

/* ── Im Werkbank-Rahmen ──────────────────────────────────────────────
   Dort IST der Rahmen das Telefon: die Geruestleiste faellt weg, das
   Geraet fuellt das Fenster und traegt weder Schatten noch Rundung,
   weil der Rahmen darum die schon hat. */
body.imrahmen .geruest-leiste{display:none}
body.imrahmen .buehne{padding:0;height:100dvh}
body.imrahmen .geraet{
  width:100%;max-width:none;height:100dvh;
  transform:none;border-radius:0;box-shadow:none;
}

/* ═══════════════ AUF EINEM ECHTEN TELEFON ═══════════════
   Bis hierher war der Telefonrahmen die Simulation. Auf einem echten
   Geraet ist er ein Telefon im Telefon: gemessen wurden auf einem
   375x812-Bildschirm nur 337x728 genutzt, mit Rand, Schatten und
   runden Ecken mitten auf dem Display.

   Unter 520px Breite ist der Bildschirm der Rahmen. Dieselben Regeln
   wie im Werkbank-Modus, nur ausgeloest durch die Geraetegroesse
   statt durch die Adresse. */
@media (max-width: 520px){
  body.handy{height:100dvh;overflow:hidden}
  body.handy .buehne{padding:0;height:100dvh}
  body.handy .geraet{
    width:100%;max-width:none;height:100dvh;
    transform:none;border-radius:0;box-shadow:none;
  }

  /* Die Aussparungen des Geraets. Oben die Kamerainsel, unten der
     Balken zum Wischen: ohne diese Polster liegt der Racoon-Schriftzug
     unter der Uhr und die Tableiste unter dem Balken. */
  body.handy .app-kopf{
    height:auto;min-height:var(--kopf-h);
    padding-top:env(safe-area-inset-top,0);
  }
  body.handy .app-inhalt{
    padding-left:max(var(--s4), env(safe-area-inset-left,0));
    padding-right:max(var(--s4), env(safe-area-inset-right,0));
  }
}

/* ═══════════════ KEIN MARKIEREN BEIM HALTEN ═══════════════
   Langes Druecken oeffnet ein Blatt — und weil der Finger dabei noch
   auf dem Glas liegt, faengt iOS im neu erschienenen Blatt sofort an,
   Text zu markieren. Man landet also in der Bearbeitung und hat
   gleichzeitig eine blaue Auswahl und die Lupe im Bild.

   Deshalb: In der ganzen App wird nichts markiert, ausser in
   Eingabefeldern. Text markieren zu koennen ist in einer Haushalts-App
   kein Verlust — kopieren will man hier nichts, und wer doch will,
   nimmt die Eingabefelder.

   -webkit-touch-callout unterdrueckt zusaetzlich das Kontextmenue,
   das iOS beim langen Druecken sonst ueber allem aufklappt. */
.app, .app *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  /* Der graue Blitz beim Antippen. Auf einer Kachel, die ohnehin ihre
     eigene Rueckmeldung hat, ist er nur Unruhe. */
  -webkit-tap-highlight-color:transparent;
}

/* Eingaben sind die Ausnahme: dort MUSS man markieren koennen, sonst
   laesst sich kein Wort korrigieren. */
.app input, .app textarea{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

/* Kurz taub nach dem Oeffnen per langem Druecken. 300ms reichen, um
   das Loslassen abzufangen, und sind kurz genug, dass niemand es als
   Traegheit bemerkt. */
.app.taub .app-inhalt{pointer-events:none}

/* Der Federzug in der Vitrine wird NICHT geschrieben, sondern steht
   einfach da. Er ist dort ein Zustand ("habt ihr"), kein Ereignis
   ("gerade passiert") — und vierzig Haken, die sich bei jedem
   Neuzeichnen gleichzeitig malen, sind ein Flimmern, kein Federzug. */
.erf .haken-strich path{animation:none;stroke-dashoffset:0}

/* ═══════════════ NATIVE DATUMS- UND ZEITFELDER ═══════════════
   Bewusst die eingebauten Felder des Geraets statt selbstgebauter
   Listen: auf dem iPhone kommt damit der gewohnte Rad-Picker, am
   Rechner der Kalender des Browsers. Beides kennt man schon, beides
   muss niemand nachbauen und pflegen.

   Sie bekommen nur die Schrift und die Farbe der App, sonst nichts —
   Datumsfelder umzustylen endet immer im Kampf gegen den Browser. */
.dfeld{
  font:inherit;font-size:15px;color:var(--ink);
  background:transparent;border:none;padding:2px 0;
  min-height:32px;
}
.dfeld:focus{outline:2px solid var(--accent-deep);outline-offset:2px;border-radius:6px}

/* "ohne" neben der Uhrzeit: eine Aufgabe braucht keine, und ein
   leeres Zeitfeld laesst sich auf manchen Geraeten nicht mehr leeren. */
.zeitweg{
  margin-left:var(--s3);min-height:30px;padding:0 var(--s3);
  border:1px solid var(--line-strong);background:transparent;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--ink-soft);border-radius:var(--r-pill);
}
.zeitweg:hover{color:var(--ink);border-color:var(--accent-deep)}

/* Die Uhrzeit auf einer Aufgabenkachel. */
.auf-kachel .umzeit{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--ink);font-weight:500;
}

/* ── Ein Schalter fuer ja und nein. Wurmi hat keinen; ganztaegig ist
      aber genau die Frage, die einen braucht: zwei Zustaende, sofort
      sichtbar, kein Blatt dazwischen. ── */
.schalter{
  width:48px;height:28px;flex:none;padding:2px;cursor:pointer;
  border:1.5px solid var(--line-strong);background:var(--paper);
  border-radius:var(--r-pill);display:flex;align-items:center;
  transition:background var(--t-answer) var(--e-out), border-color var(--t-answer) var(--e-out);
}
.schalter i{
  width:20px;height:20px;border-radius:50%;background:var(--ink-soft);
  display:block;transition:transform var(--t-answer) var(--e-out), background var(--t-answer) var(--e-out);
}
.schalter.an{background:var(--accent);border-color:var(--accent-deep)}
.schalter.an i{transform:translateX(20px);background:var(--auf-akzent)}

/* Die Zeitspalte im Kalender traegt jetzt zwei Zeilen. */
.termin .zeit .bis{font-size:11.5px;opacity:.75}
.termin{cursor:pointer;-webkit-user-select:none;user-select:none}

/* ═══════════════════════════════════════════════════════════════════
   DER CHAT

   Zwei Menschen, ein Strom. Die Zurufe laufen mit, erkennbar an ihrem
   Bezug zur Aufgabe — antippen springt dorthin. Absichtlich keine
   Lesebestaetigungen, keine Tippanzeige, keine Reaktionen: das sind
   Mechaniken, die Druck erzeugen, und Druck ist das Letzte, was ein
   gemeinsamer Haushalt braucht.
   ═══════════════════════════════════════════════════════════════════ */
.chatstrom{display:flex;flex-direction:column;gap:var(--s3);padding-bottom:var(--s4)}

.chatzeile{max-width:82%;display:flex;flex-direction:column;gap:3px}
.chatzeile.ich{align-self:flex-end;align-items:flex-end}
.chatzeile.sie{align-self:flex-start}

.chatblase{
  padding:9px var(--s4);border-radius:var(--r-inner);
  background:var(--paper-warm);border:1px solid var(--line);
  font-size:15px;line-height:1.42;overflow-wrap:anywhere;
}
.chatzeile.ich .chatblase{
  background:var(--accent-tint);border-color:color-mix(in srgb,var(--accent),var(--ink) 8%);
  border-radius:26px 8px 26px 8px;
}
.chatzeile.sie .chatblase{border-radius:8px 26px 8px 26px}

.chatwann{font-size:11.5px;color:var(--ink-soft);padding:0 var(--s2)}

/* Ein Zuruf im Strom. Er sieht anders aus als eine Nachricht, weil er
   etwas anderes ist: er haengt an einer Aufgabe und bleibt dort auch,
   wenn man ihn hier liest. */
.chatzeile.zuruf .chatblase{
  background:var(--sage-tint);border-color:var(--line);
  border-radius:var(--r-inner);cursor:pointer;
}
.chatbezug{
  display:flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--ink-soft);margin-bottom:3px;
}
.chatbezug svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* Racoons eigene Zeilen tragen keinen Namen. */
.chatzeile.baer .chatblase{
  background:transparent;border:1px dashed var(--line-strong);
  color:var(--ink-soft);font-style:italic;font-size:14px;
}

.chattag{
  align-self:center;font-size:11.5px;color:var(--ink-soft);
  padding:2px var(--s4);border-radius:var(--r-pill);background:var(--sage-tint);
  margin:var(--s2) 0;
}
.chatleer{text-align:center;color:var(--ink-soft);font-size:14px;padding:var(--s6) var(--s4)}

/* Der Punkt an der Tableiste. Kein Zaehler: "drei ungelesene" macht
   eine Liste auf, die man abarbeiten muss. Ein Punkt sagt nur, dass
   etwas da ist. */
.app-tabs button{position:relative}
.app-tabs .punkt{
  position:absolute;top:7px;right:calc(50% - 17px);
  width:8px;height:8px;border-radius:50%;background:var(--accent-deep);
}

/* ── Suche über dem Strom ── */
/* Die Suche klebt oben.

   Vorher stand sie einfach am Anfang des Blatts — und weil der Chat
   beim Öffnen ans ENDE springt, lag sie gemessen 10484 Pixel über dem
   Sichtfeld. Man konnte sie nur finden, indem man den gesamten Verlauf
   hochscrollte, also genau die Arbeit machte, die die Suche einem
   abnehmen soll. Jetzt bleibt sie stehen, egal wo man im Verlauf ist. */
.chatsuche{
  display:flex;gap:var(--s2);align-items:center;margin-bottom:var(--s4);
  position:sticky;top:0;z-index:6;
  background:var(--paper);padding:var(--s2) 0;
}
.chatsuche input{
  flex:1;min-height:38px;padding:0 var(--s4);font:inherit;font-size:14px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--paper-warm);color:var(--ink);
}
.chatsuche input:focus{outline:none;border-color:var(--accent-deep)}

/* ── „Ab hier neu" ───────────────────────────────────────────────────
   Ein Strich, kein Zähler. Man will nicht wissen, wie viel man
   verpasst hat, sondern wo man weiterliest. */
.chatmarke{
  display:flex;align-items:center;gap:var(--s3);
  margin:var(--s3) 0;color:var(--accent-deep);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;
}
.chatmarke::before,.chatmarke::after{
  content:"";flex:1;height:1px;background:color-mix(in srgb,var(--accent-deep),transparent 55%);
}

/* Eine Zeile, mit der man etwas tun kann, hält sich beim Drücken.

   Die Auswahl ist hier abgeschaltet, und das war der eigentliche Grund,
   warum am Telefon nie eine Reaktion zustande kam: ein langer Druck auf
   Text ist auf iOS die native Textauswahl. Nach einer halben Sekunde
   sprangen die Greifer und das Lupenmenü auf, der Zeigerstrom wurde
   abgebrochen — und die Reaktionsleiste kam gar nicht erst durch. Am
   Schreibtisch mit der Maus fiel das nie auf.

   `touch-action` bleibt bewusst unangetastet: auf `none` gesetzt liesse
   sich der Chat nicht mehr scrollen. Es genügt, dem Browser die
   Textauswahl und das Aufklappmenü zu nehmen. */
.chatblase[data-zeile]{
  cursor:pointer;transition:transform 120ms var(--e-out);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.chatblase.haelt{transform:scale(.975)}

/* ── Reaktionen ──────────────────────────────────────────────────────
   Sechs feste Zeichen, bunte System-Emoji. Sie sind das erste Farbige
   in einer Oberfläche aus einem Grundton und Strichen — bewusst, weil
   sie ohne Erklärung verstanden werden. Sie bleiben klein und sitzen
   unter der Blase, damit sie die Zeile nicht überstimmen.

   Ein Racoon-eigener Satz kommt später und tauscht sich still gegen
   diesen aus. */
/* Die gesetzten Zeichen haengen am unteren Rand der Blase, leicht
   darueber geschoben — wie in jedem Messenger. Vorher standen sie als
   eigene Zeile darunter, und dann sah eine Blase mit Reaktion aus wie
   zwei Nachrichten. */
.reaktionen{display:flex;gap:3px;flex-wrap:wrap;margin-top:-9px;
  position:relative;z-index:2;padding-left:var(--s3)}
.chatzeile.ich .reaktionen{justify-content:flex-end;padding-right:var(--s3);padding-left:0}
.reaktion{
  display:inline-flex;align-items:center;gap:3px;
  min-height:24px;padding:1px 7px;cursor:pointer;font:inherit;font-size:13px;
  background:var(--paper-warm);border:1px solid var(--line);
  border-radius:var(--r-pill);line-height:1;
}
.reaktion span{font-size:14px;line-height:1}
.reaktion i{font-style:normal;font-size:11px;color:var(--ink-soft)}
.reaktion.an{background:var(--accent-tint);border-color:var(--accent-deep)}
.reaktion.an i{color:var(--ink)}
.reaktion:hover{border-color:var(--accent-deep)}

.blattzitat{
  font-size:13px;color:var(--ink-soft);text-align:center;
  margin:0 0 var(--s4);font-style:italic;overflow-wrap:anywhere;
}

/* ── Schnellzeilen ───────────────────────────────────────────────────
   Sie rollen zur Seite, statt vier Zeilen Höhe zu fressen. */
.schnellzeilen{
  display:flex;gap:var(--s2);overflow-x:auto;padding:0 0 var(--s2);
  scrollbar-width:none;
}
.schnellzeilen::-webkit-scrollbar{display:none}
.schnellzeile{
  flex:none;min-height:32px;padding:0 var(--s4);cursor:pointer;
  font:inherit;font-size:13px;white-space:nowrap;
  background:var(--sage-tint);border:1px solid var(--line);
  border-radius:var(--r-pill);color:var(--ink);
}
.schnellzeile:hover{border-color:var(--accent-deep)}

/* ═══════════════════════════════════════════════════════════════════
   DAS BUSSI

   Es wird zugestellt, nicht abgeschickt. Racoon trägt es am Kopf,
   bis jemand hinschaut — kein Zähler daran, denn wie viele es sind,
   erfährt man beim Aufmachen, und vorher soll es keine Erwartung
   geben.
   ═══════════════════════════════════════════════════════════════════ */
.app-kopf{position:relative}
.bussi-marke{
  position:absolute;left:26px;top:11px;
  width:19px;height:19px;padding:0;flex:none;cursor:pointer;
  border:1.5px solid var(--paper-warm);border-radius:50%;
  background:var(--accent);display:grid;place-items:center;
  animation:bussi-klopft 2.6s ease-in-out infinite;
}
.bussi-marke svg{width:11px;height:11px;fill:var(--auf-akzent);stroke:none}
@keyframes bussi-klopft{
  0%,88%,100%{transform:scale(1)}
  92%{transform:scale(1.22)}
  96%{transform:scale(1.05)}
}
@media (prefers-reduced-motion: reduce){ .bussi-marke{animation:none} }

.bussi-liste{
  list-style:none;margin:var(--s4) 0 0;padding:0;max-width:30ch;
  display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink-soft);
}
.bussi-liste li{
  display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;
  padding:5px var(--s4);background:var(--accent-tint);
  border-radius:var(--r-pill);
}
.bussi-liste .bfuer{color:var(--ink)}
.bussi-glas .klein.leise{opacity:.75;margin-top:var(--s3)}
.bussi-dafuer{color:var(--accent-deep)}
.bussi-dafuer svg{width:15px;height:15px;vertical-align:-2px;margin-right:4px;
  fill:none;stroke:currentColor;stroke-width:2}

/* ═══════════════════════════════════════════════════════════════════
   DIE SPIELHALLE

   Ein anderer Raum, und er darf sich auch so anfuehlen. Trotzdem
   dieselben Farben und dieselben schiefen Radien: es ist ein
   Hinterzimmer derselben Wohnung, kein zweites Programm.
   ═══════════════════════════════════════════════════════════════════ */
.halle-raster{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4)}

.halle-kachel{
  all:unset;display:flex;flex-direction:column;gap:6px;box-sizing:border-box;
  padding:var(--s4);min-height:124px;cursor:pointer;
  background:var(--paper-warm);border:1.5px solid var(--line);
  border-radius:26px 8px 26px 8px;
  transition:border-color var(--t-answer) var(--e-out), transform 120ms var(--e-out);
}
.halle-kachel:hover{border-color:var(--accent-deep)}
.halle-kachel:active{transform:scale(.98)}
.halle-kachel>svg{width:26px;height:26px;fill:none;stroke:var(--sage-deep);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.halle-kachel .hname{font-family:var(--display);font-size:15.5px;line-height:1.2}
.halle-kachel .hkurz{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.halle-kachel .hbest{font-size:12px;color:var(--ink-soft);margin-top:auto;padding-top:6px}

.halle-kachel.zu{
  cursor:default;background:color-mix(in srgb,var(--paper),var(--ink) 3%);
  border-style:dashed;
}
.halle-kachel.zu:hover{border-color:var(--line)}
.halle-kachel.zu .hname,.halle-kachel.zu>svg{opacity:.42}
.halle-kachel.zu .hkurz{font-style:italic}

/* ── Das Spielfeld ───────────────────────────────────────────────────
   Feste Proportion statt fester Pixel: dasselbe Spiel ist auf jedem
   Geraet gleich schwer. Alles darin rechnet in Prozent.

   touch-action:none gilt NUR hier. In der App waere es fatal — dort
   steht pan-y, sonst liesse sich nicht mehr scrollen. Ein Spielfeld
   scrollt nicht, es spielt. */
.spielfeld{
  position:relative;overflow:hidden;
  width:100%;aspect-ratio:3/4;max-height:58vh;margin:var(--s4) auto 0;
  background:var(--paper-warm);border:1.5px solid var(--line-strong);
  border-radius:26px 8px 26px 8px;
  touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;
}
/* Alles im Feld ist durchlässig, damit ein Tipper beim FELD ankommt
   und nicht bei der Tonne, die gerade zufällig darunter liegt. Drei
   Ausnahmen, alle bewusst: Dinge, die man direkt antippt. */
.spielfeld *{pointer-events:none}
.spielfeld .sp-ding{pointer-events:auto}
/* Die Trommel ist der Knopf. Vorher war sie tot gestellt, und damit war
   die einzige offensichtliche Handlung — auf die Trommel zeigen, in die
   es soll — auch die einzige ohne Wirkung. */
.spielfeld .sp-trommel{pointer-events:auto}
/* Die Einführungstafel muss antippbar sein, sonst kommt man nicht
   heraus. Sie liegt über allem und hält das Spiel an. */
.spielfeld .sp-einfuehrung,
.spielfeld .sp-einfuehrung *{pointer-events:auto}

.sp-punkte{
  position:absolute;top:10px;left:14px;z-index:3;
  font-family:var(--display);font-size:26px;color:var(--ink);opacity:.45;
}
/* Die Leben oben rechts. Sie waren 9 Pixel gross und standen in der
   Ecke — gemeldet wurde "waere cool wenn es auch Leben gaebe", bei
   einem Spiel, das drei hat. Wer sie nicht sieht, hat sie nicht.

   Jetzt Pfoten statt Punkte, doppelt so gross, mit Rand und einem
   kurzen Zucken beim Verloeschen. Kein Alarm, aber sichtbar. */
.sp-leben{position:absolute;top:12px;right:12px;z-index:3;display:flex;gap:7px}
.sp-leben i{
  width:17px;height:17px;border-radius:58% 42% 58% 42%;display:block;
  background:var(--accent-deep);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--paper-warm),transparent 20%);
  transition:background 200ms var(--e-out), transform 200ms var(--e-out);
}
.sp-leben i.aus{
  background:transparent;
  box-shadow:inset 0 0 0 2px var(--line-strong);
  transform:scale(.82);opacity:.6;
}

@keyframes sp-zuck{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.sp-zuck{animation:sp-zuck 180ms var(--e-out)}
.sp-bumm{filter:saturate(.3)}

/* 1 · Mülltonnennacht */
/* Sie heisst Muelltonnen-NACHT und war taghell. Jetzt ist sie dunkel:
   ein tiefes Blaugruen nach unten hin heller, weil auch nachts der
   Boden mehr Licht abbekommt als der Himmel. Die Figuren darin bleiben
   hell — ein schwarzer Waschbaer auf schwarzem Grund waere Kunst und
   kein Spiel. */
/* Weniger schwarz: "evtl ist alles ein bisschen zu schwarz". Der
   Himmel bleibt tief, aber blauer statt russig, und nach unten hin
   deutlich heller — eine Stadt bei Nacht ist nie dunkel, sie ist nur
   anders hell. */
.sp-gasse{
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--ink),var(--sage-deep) 42%) 0%,
    color-mix(in srgb,var(--ink),var(--sage-deep) 58%) 48%,
    color-mix(in srgb,var(--sage-deep),var(--paper) 22%) 100%);
}
/* Der Mond. Ein Kreis oben rechts, mehr braucht eine Nacht nicht. */
.sp-gasse::before{
  content:"";position:absolute;top:9%;right:12%;
  width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--paper),var(--sand) 22%);
  box-shadow:0 0 26px 6px color-mix(in srgb,var(--paper),transparent 78%);
}
/* Alles im Feld wird hell gezeichnet, damit es auf dem dunklen Grund
   steht. */
.sp-gasse .sp-baer svg path,.sp-gasse .sp-baer svg circle{stroke:var(--paper)}
.sp-gasse .sp-baer svg .auge{fill:var(--paper);stroke:none}
.sp-gasse .sp-punkte,.sp-gasse .sp-ebene{color:color-mix(in srgb,var(--paper),transparent 18%)}
.sp-gasse::after{content:"";position:absolute;left:0;right:0;bottom:16%;
  border-bottom:2px solid var(--line-strong)}
.sp-baer{position:absolute;left:14%;width:13%;aspect-ratio:1}
.sp-baer svg{width:100%;height:100%}
/* Vier Sorten Hindernis statt dreimal demselben grauen Kasten. Die
   Höhe macht die Schwierigkeit, das Aussehen den Rhythmus: man soll
   von weitem sehen, ob der nächste Sprung knapp wird. Gezeichnet wird
   mit Rand, Radius und Verlauf — keine Bilddateien, damit sie den
   Grundton der App behalten. */
.sp-tonne{
  position:absolute;width:9%;
  background:color-mix(in srgb,var(--sand),var(--ink) 16%);
  border:1.5px solid var(--ink-soft);border-radius:4px 4px 2px 2px;
}
/* Die Tonne: Deckel als heller Streifen oben. */
.sp-tonne.tonne{
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--sand),var(--ink) 6%) 0 16%,
    color-mix(in srgb,var(--sand),var(--ink) 18%) 16%);
  border-radius:5px 5px 2px 2px;
}
/* Die Hecke: breit, niedrig, grün, oben ausgefranst. */
.sp-tonne.hecke{
  background:color-mix(in srgb,var(--sage-deep),var(--paper) 12%);
  border-color:var(--sage-deep);
  border-radius:14px 12px 3px 3px;
}
.sp-tonne.hecke::before{
  content:"";position:absolute;left:6%;right:6%;top:-22%;height:44%;
  background:color-mix(in srgb,var(--sage-deep),var(--paper) 2%);
  border-radius:50% 50% 30% 30%;
}
/* Die Kiste: kantig, mit einem Brett quer. */
.sp-tonne.kiste{
  background:color-mix(in srgb,var(--sand),var(--ink) 10%);
  border-radius:2px;
}
.sp-tonne.kiste::before{
  content:"";position:absolute;left:-1px;right:-1px;top:44%;height:14%;
  background:color-mix(in srgb,var(--sand-strich),var(--ink) 8%);
}
/* Der Sack: schmal, hoch, oben zugebunden. */
.sp-tonne.sack{
  background:color-mix(in srgb,var(--ink-soft),var(--paper) 46%);
  border-color:var(--ink-soft);
  border-radius:46% 46% 8px 8px;
}
.sp-tonne.sack::before{
  content:"";position:absolute;left:32%;right:32%;top:-9%;height:13%;
  background:var(--ink-soft);border-radius:3px;
}

/* 2 · Pfotenwäsche */
.sp-ding{
  position:absolute;width:17%;aspect-ratio:1;cursor:pointer;
  display:grid;place-items:center;
  background:var(--paper);border:1.5px solid var(--line-strong);
  border-radius:18px 6px 18px 6px;animation:sp-auf 160ms var(--e-out);
}
.sp-ding svg{width:62%;height:62%;fill:none;stroke:var(--sage-deep);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sp-ding.seife{background:var(--sand);border-color:var(--sand-strich)}
.sp-ding.seife svg{stroke:var(--ink)}
@keyframes sp-auf{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}

/* 3 · Waschtag */
.sp-trommel{
  position:absolute;bottom:6%;width:22%;aspect-ratio:1;transform:translateX(-50%);
  display:grid;place-items:center;border-radius:18px 6px 18px 6px;border:2px solid;
}
.sp-waesche{
  position:absolute;width:15%;aspect-ratio:1;transform:translateX(-50%);
  display:grid;place-items:center;border-radius:14px 5px 14px 5px;border:2px solid;
}
.sp-trommel.fa,.sp-waesche.fa{border-color:var(--accent-deep);background:var(--accent-tint)}
.sp-trommel.fb,.sp-waesche.fb{border-color:var(--sand-strich);
  background:color-mix(in srgb,var(--paper),var(--sand) 55%)}
.sp-trommel.fc,.sp-waesche.fc{border-color:var(--sage-deep);background:var(--sage-tint)}
.sp-trommel svg,.sp-waesche svg{width:58%;height:58%;fill:none;stroke:var(--ink);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Wo es landen wird. Ohne diese Markierung bewegt sich zwar das Stück,
   aber man sieht nicht, in welche Trommel es fällt — bei drei fast
   gleich hellen Trommeln fühlt sich das an, als lenke man gar nicht.
   Deutlich genug, um es aus dem Augenwinkel zu sehen, und leise genug,
   um die Zeichen nicht zu überstimmen. */
.sp-trommel{transition:transform 120ms var(--e-out),box-shadow 120ms var(--e-out)}
.sp-trommel.ziel{
  transform:translateX(-50%) scale(1.07);
  box-shadow:0 0 0 3px var(--accent-deep);
}

/* ── Die Einführung ──────────────────────────────────────────────────
   Liegt über dem Feld und hält es an, bis sie weggetippt ist. Drei
   Zeilen, ein Knopf — mehr liest niemand, der gerade spielen wollte. */
.sp-einfuehrung{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  padding:var(--s4);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(2px);
}
.sp-ein-tafel{
  background:var(--paper-warm);border:1.5px solid var(--line-strong);
  border-radius:26px 8px 26px 8px;padding:var(--s4);max-width:300px;
}
.sp-ein-tafel h3{font-family:var(--display);font-size:17px;margin:0 0 var(--s3)}
.sp-ein-tafel ol{margin:0 0 var(--s4);padding-left:1.15em;font-size:13.5px;line-height:1.5}
.sp-ein-tafel li+li{margin-top:5px}
.sp-ein-los{
  width:100%;min-height:42px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  background:var(--accent);border:1.5px solid var(--accent-deep);
  color:var(--auf-akzent);border-radius:var(--r-pill);
}

/* 4 · Kühlschrankraub */
.sp-kueche{transition:background var(--t-answer) var(--e-out)}
/* Was gerade in der Hand ist. Ohne die Zahl wächst nur ein Korb, und
   beim Loslassen springt die Punktzahl aus dem Nichts. */
.sp-hand{
  position:absolute;left:50%;bottom:26%;transform:translateX(-50%);
  font-family:var(--display);font-size:22px;color:var(--sage-deep);
  pointer-events:none;
}
.sp-kueche.sp-gesehen{background:color-mix(in srgb,var(--paper-warm),var(--sand) 58%)}
.sp-auge{
  position:absolute;top:15%;left:50%;transform:translateX(-50%);
  width:26%;aspect-ratio:1;display:grid;place-items:center;
  opacity:.32;transition:opacity var(--t-answer) var(--e-out);
}
/* Die Vorwarnung: der Kopf hebt sich und wird deutlicher, bevor er
   sich dreht. Ohne dieses halbe Bild ist das Spiel eine Münze. */
.sp-auge.gleich{opacity:.7;transform:translateX(-50%) translateY(-6%) scale(1.06)}
.sp-auge.sieht{opacity:1}
.sp-auge svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sp-beute{
  position:absolute;bottom:18%;left:37%;width:26%;aspect-ratio:1;
  display:grid;place-items:center;transition:transform 90ms linear;
}
.sp-beute svg{width:100%;height:100%;fill:none;stroke:var(--sage-deep);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sp-beute.voll svg{stroke:var(--accent-deep)}
.sp-hinweis{position:absolute;bottom:6%;left:0;right:0;text-align:center;
  font-size:13px;color:var(--ink-soft)}

/* 5 · Der Turm */
.sp-turm{background:linear-gradient(to bottom,var(--sage-tint) 0%,var(--paper-warm) 55%)}
/* Der Träger, in dem der ganze Turm steht. Er ist so hoch wie das Feld
   — nur deshalb meint `translateY(%)` an ihm auch Feldhöhe. Vorher
   wurde jeder Stein einzeln verschoben, und dort bezog sich das
   Prozent auf die 7 % hohe Steinhöhe; die Ansicht wanderte damit um
   ein Vierzehntel dessen, was gemeint war. */
.sp-turmlauf{
  position:absolute;inset:0;
  transition:transform 260ms var(--e-out);
}
.sp-stein{
  position:absolute;height:7%;display:grid;place-items:center;
  background:var(--paper);border:1.5px solid var(--line-strong);
  border-radius:10px 4px 10px 4px;
}
.sp-stein.sockel{background:var(--sage-tint);border-color:var(--sage-deep)}
.sp-stein.faellt{background:var(--accent-tint);border-color:var(--accent-deep)}
.sp-stein.weg{opacity:.25;transition:opacity 400ms var(--e-out)}
.sp-stein svg{height:70%;aspect-ratio:1;fill:none;stroke:var(--sage-deep);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 7 · Wäscheleine
   Ein Tipper, eine Lücke. Die Laken hängen von oben und stehen von
   unten — zwei Rechtecke mit weichem Innenrand, damit die Lücke wie
   eine Lücke aussieht und nicht wie ein Spalt zwischen Balken. */
.sp-leine{background:linear-gradient(to bottom,var(--sage-tint) 0%,var(--paper-warm) 70%)}
/* Breite UND Höhe in Prozent, kein `aspect-ratio`. Das ist keine
   Kleinigkeit: die Trefferprüfung rechnet mit 11 % Breite und 11 %
   Höhe, und bei `aspect-ratio:1` in einem hochkanten Feld wäre der
   gezeichnete Waschbär 17 % breit und 12,9 % hoch — gemessen. Kasten
   und Zeichnung müssen dasselbe sein, sonst verliert man an Stellen,
   an denen es im Bild klar durchgeht.

   Das SVG behält seine Proportion von selbst und sitzt mittig. */
.sp-flatter{
  position:absolute;width:11%;height:11%;
  z-index:2;
  transition:transform 90ms linear;
}
.sp-flatter svg{width:100%;height:100%}
/* Der Klaps beim Flattern sitzt auf dem SVG, nicht auf dem Kasten:
   der Kasten traegt die Neigung als Inline-Transform, und zwei
   Transformationen am selben Element ueberschreiben einander. */
.sp-flatter.auf svg{animation:sp-flatter 220ms var(--e-out)}
@keyframes sp-flatter{from{transform:scale(1.14)}to{transform:none}}
@media(prefers-reduced-motion:reduce){ .sp-flatter.auf svg{animation:none} }
.sp-laken{
  position:absolute;width:13%;
  background:color-mix(in srgb,var(--paper),var(--sand) 46%);
  border:1.5px solid var(--sand-strich);
}
.sp-laken.oben{top:0;border-radius:2px 2px 16px 16px;border-top:none}
.sp-laken.unten{bottom:0;border-radius:16px 16px 2px 2px;border-bottom:none}
/* Der Strich der Leine selbst, damit oben etwas hängt und nicht schwebt. */
.sp-laken.oben::before{
  content:"";position:absolute;left:-14%;right:-14%;top:0;height:2px;
  background:var(--ink-soft);
}

/* 6 · Nachtwanderung */
.sp-nacht{background:color-mix(in srgb,var(--paper-warm),var(--ink) 12%)}
.sp-brett{position:absolute;inset:12% 8% 8%;
  display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px}
.sp-feld{border-radius:5px;background:color-mix(in srgb,var(--paper-warm),var(--ink) 18%)}
.sp-feld.nah{background:var(--paper-warm)}
.sp-feld.moebel{background:var(--sand-strich)}
.sp-feld.ziel{box-shadow:inset 0 0 0 2px var(--accent-deep)}
.sp-feld.ich{background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent-deep)}

/* Der Abspann. Kein "Game Over" — Racoon sagt es freundlicher, und
   der Bestwert steht daneben, nicht darueber. */
.sp-abspann{text-align:center;margin-top:var(--s5)}
.sp-abspann .gross{font-family:var(--display);font-size:44px;line-height:1}
.sp-abspann .dazu{color:var(--ink-soft);font-size:14px;margin-top:var(--s2);line-height:1.45}
.sp-knopfzeile{display:flex;gap:var(--s3);margin-top:var(--s5);justify-content:center}
/* Nicht gleich breit erzwingen: „Eines zurück" brach sonst auf zwei
   Zeilen, weil es neben „Danke" die halbe Breite bekam. */
.sp-knopfzeile>*{white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  .sp-zuck,.sp-ding{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════
   HEUTE ERLEDIGT

   Erledigtes lag vorher zwischen dem Offenen. Bei fuenf Kacheln geht
   das, bei zwoelf sucht man das Offene zwischen dem Erledigten. Jetzt
   unten, zugeklappt, aber nicht weg: korrigieren muss man koennen.
   ═══════════════════════════════════════════════════════════════════ */
.erledigt-marke{
  all:unset;box-sizing:border-box;display:flex;align-items:center;gap:var(--s2);
  width:100%;margin-top:var(--s5);padding:var(--s3) var(--s2);cursor:pointer;
  border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-soft);
}
.erledigt-marke .anzahl{
  margin-left:auto;min-width:22px;height:22px;padding:0 6px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--sage-tint);color:var(--ink);font-size:12px;
}
.erledigt-marke .klapppfeil{
  width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-answer) var(--e-out);
}
.erledigt-marke.zu .klapppfeil{transform:rotate(-90deg)}
.erledigt-marke:hover{color:var(--ink)}
.erledigt-raster{margin-top:var(--s3);opacity:.82}

/* Alles weg: dann darf er. Kein Pokal, kein Konfetti-Gewitter — er
   legt sich hin, und ein paar Krümel fallen. */
.feierabend{
  position:relative;text-align:center;padding:var(--s6) var(--s4) var(--s5);
  background:var(--sage-tint);border-radius:26px 8px 26px 8px;
  margin-top:var(--s3);overflow:hidden;
}
.feierabend .figur{width:96px;height:96px;margin:0 auto;display:block}
.feierabend .spruch{
  font-family:var(--display);font-size:17px;line-height:1.3;
  margin:var(--s3) auto 0;max-width:28ch;
}
.feierabend .klein{font-size:13px;color:var(--ink-soft);margin-top:var(--s2)}
.konfetti{position:absolute;inset:0;pointer-events:none}
.konfetti i{
  position:absolute;top:-8%;left:calc(8% + var(--i) * 11%);
  width:6px;height:6px;border-radius:2px;
  background:var(--accent-deep);opacity:0;
  animation:kruemel 3.4s var(--e-out) infinite;
  animation-delay:calc(var(--i) * 380ms);
}
.konfetti i:nth-child(even){background:var(--sand-strich);width:5px;height:5px}
@keyframes kruemel{
  0%{opacity:0;transform:translateY(0) rotate(0)}
  10%{opacity:.85}
  85%{opacity:.85}
  100%{opacity:0;transform:translateY(240px) rotate(220deg)}
}
@media (prefers-reduced-motion: reduce){ .konfetti{display:none} }

/* ── Kalenderkopf und gewaehlter Tag ─────────────────────────────── */
.kalkopf{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);
}
.kalkopf button{
  all:unset;display:grid;place-items:center;min-width:36px;min-height:36px;
  cursor:pointer;border-radius:var(--r-pill);color:var(--ink-soft);
}
.kalkopf button:hover{background:var(--sage-tint);color:var(--ink)}
.kalkopf .kalname{
  flex:1;font-family:var(--display);font-weight:600;font-size:20px;
  letter-spacing:-.015em;color:var(--ink);
}
.kalkopf svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.tag.gewaehlt{
  background:var(--accent);color:var(--auf-akzent);font-weight:600;
}
.tag.gewaehlt .punkte-reihe i{background:var(--auf-akzent)}
.tag.heute:not(.gewaehlt){box-shadow:inset 0 0 0 1.5px var(--accent-deep)}
.leerTag{padding:var(--s4) var(--s2);font-style:italic}

/* ── Hinweis in der Vitrine ──────────────────────────────────────── */
.erf-hinweis{
  display:block;font-size:12.5px;color:var(--ink-soft);
  margin:1px 0 5px;line-height:1.35;
}
.erf.offen .erf-name{color:var(--ink-soft)}

/* ── Bussi: der Klopfstreifen und die Zeile im Chat ──────────────── */
.bussi-klopf{
  all:unset;box-sizing:border-box;position:absolute;z-index:60;
  left:var(--s4);right:var(--s4);bottom:calc(var(--tab-h) + var(--s3));
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);cursor:pointer;
  background:var(--accent-tint);border:1.5px solid var(--accent-deep);
  border-radius:26px 8px 26px 8px;
  box-shadow:0 10px 28px -14px rgba(43,46,40,.4);
  font-size:14px;color:var(--ink);
  animation:klopf-rein var(--t-arrive) var(--e-out);
}
.bussi-klopf svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bussi-klopf b{margin-left:auto;font-weight:600;font-size:13px;color:var(--accent-deep)}
@keyframes klopf-rein{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){ .bussi-klopf{animation:none} }

.chatzeile.bussizeile .chatblase{
  display:flex;align-items:center;gap:var(--s2);
  background:var(--accent-tint);border-color:var(--accent-deep);
  border-radius:var(--r-pill);cursor:default;
}
.chatzeile.bussizeile .chatblase[data-bussi-auf]{cursor:pointer}
.bussizeichen{width:17px;height:17px;flex:none;fill:none;stroke:var(--accent-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bussi-auf{font-size:12px;color:var(--accent-deep);font-weight:600;margin-left:var(--s2)}

/* ═══════════════════════════════════════════════════════════════════
   RACOONS KORB

   Kein Spielfeld, sondern ein Platz. Deshalb ruhiger als die
   Automaten: kein Punktestand, keine Leben, keine Uhr.
   ═══════════════════════════════════════════════════════════════════ */
.halle-kachel.korb{
  margin-top:var(--s4);flex-direction:row;align-items:center;gap:var(--s4);
  min-height:0;padding:var(--s4);
  background:var(--sage-tint);border-color:var(--sage-deep);
}
.halle-kachel.korb .figur{width:52px;height:52px;flex:none}
.halle-kachel.korb .hkurz{margin:0}

.pflege-buehne{
  /* `relative` und `overflow:hidden`, damit der Ball darin liegt und
     an den Raendern verschwindet statt ueber das Blatt zu rollen. */
  position:relative;overflow:hidden;
  text-align:center;padding:var(--s5) var(--s4);margin-top:var(--s4);
  background:var(--sage-tint);border-radius:26px 8px 26px 8px;
  transition:background var(--t-arrive) var(--e-out);
}
.pflege-buehne.mau{background:color-mix(in srgb,var(--paper-warm),var(--sand) 42%)}
.pflege-buehne .figur{width:112px;height:112px;margin:0 auto;display:block}
.pflege-buehne .spruch{
  font-family:var(--display);font-size:16.5px;line-height:1.35;
  margin:var(--s3) auto 0;max-width:30ch;
}

.pflege-werte{margin:var(--s5) 0 var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.pflege-zeile{display:flex;align-items:center;gap:var(--s3)}
.pflege-zeile .pmarke{width:62px;flex:none;font-size:13px;color:var(--ink-soft)}
.pbalken{
  flex:1;height:8px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper),var(--ink) 8%);overflow:hidden;
}
.pbalken i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--accent-deep);
  transition:width var(--t-arrive) var(--e-out), background var(--t-answer) var(--e-out);
}
.pbalken.knapp i{background:var(--sand-strich)}

.pflege-knoepfe{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s2)}
.pflege-knoepfe .halle-kachel{min-height:104px;padding:var(--s3);gap:4px}
.pflege-knoepfe .hname{font-size:14px}
.pflege-knoepfe .hkurz{font-size:11.5px}
@media (max-width:360px){
  .pflege-knoepfe{grid-template-columns:1fr}
  .pflege-knoepfe .halle-kachel{min-height:0;flex-direction:row;align-items:center;gap:var(--s3)}
}

/* ── Der Waschbaer selbst ist die Bedienung ──
   Die Buehne ist jetzt ein Knopf. Das ist die wichtigste Aenderung am
   Korb: man tippt IHN an, nicht etwas neben ihm. Ein Tier, das man
   ueber eine Schaltflaeche streichelt, ist kein Tier.

   Kein Rahmen, kein Schatten, keine Knopf-Anmutung — nur der Zeiger
   und, solange es noch keiner probiert hat, das Wort "Antippen"
   darunter. Nach der ersten Beruehrung verschwindet es fuer immer:
   ein Hinweis, der stehen bleibt, nachdem man ihn befolgt hat, ist
   eine Belehrung. */
.korb-buehne{
  display:block;width:100%;border:none;font:inherit;color:inherit;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  /* Waagrecht gehört die Bewegung dem Streicheln, senkrecht bleibt sie
     beim Scrollen. Ohne `touch-action` zieht der Browser den Zeiger
     beim ersten Wischen ab und schickt `pointercancel` — dann wäre das
     Streichen genau die Geste, die nie ankommt. Mit `none` wiederum
     liesse sich die Seite über der Figur nicht mehr scrollen, und die
     Figur steht mitten im Blatt. */
  touch-action:pan-y;
}
.korb-buehne:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
.korb-figur{display:block}
.korb-tipp{
  display:inline-block;margin-top:var(--s3);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.7;
}
/* Die Antwort auf die Beruehrung. Kurz, klein, einmal hin und her —
   eine Bewegung mit genau einer Ursache, und die ist der Finger. */
.korb-figur.wackelt{animation:korb-wackel 420ms var(--e-out)}
@keyframes korb-wackel{
  0%{transform:rotate(0) translateY(0)}
  25%{transform:rotate(-3.5deg) translateY(-3px)}
  55%{transform:rotate(3deg) translateY(-1px)}
  80%{transform:rotate(-1.5deg)}
  100%{transform:rotate(0) translateY(0)}
}
@media(prefers-reduced-motion:reduce){ .korb-figur.wackelt{animation:none} }

/* ── Was er gesammelt hat ──
   Kleine Flaechen in einem Raster, wie eine Schublade. Angetippt
   erzaehlt er dazu — die Geschichte steht darunter und nicht in einem
   eigenen Blatt, damit man durch den ganzen Korb durchtippen kann,
   ohne staendig etwas zu schliessen. */
.korb-raster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
  gap:var(--s2);margin-bottom:var(--s3);
}
.korb-stueck{
  aspect-ratio:1;display:grid;place-items:center;
  background:var(--sage-tint);border:1.5px solid transparent;
  border-radius:18px 6px 18px 6px;cursor:pointer;padding:0;
  transition:border-color var(--t-answer) var(--e-out),
             background var(--t-answer) var(--e-out);
}
.korb-stueck svg{width:26px;height:26px;fill:none;stroke:var(--sage-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.korb-stueck:hover{background:color-mix(in srgb,var(--sage-tint),var(--grundton) 18%)}
.korb-stueck.an{border-color:var(--accent-deep);background:var(--accent-tint)}
.korb-geschichte{
  font-size:13.5px;line-height:1.45;color:var(--ink);
  min-height:3.2em;padding-left:var(--s2);
}
.korb-geschichte b{font-weight:600}
.korb-leer{color:var(--ink-soft);font-size:13px}
.korb-merkt{font-size:13.5px}

/* Die Fundbuehne: dasselbe Geruest wie Auszeichnung und Bussi, mit
   dem Gegenstand gross in der Mitte. */
.fund-buehne .erf-marke{
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);
}
.fund-zeichen svg{
  width:44px;height:44px;fill:none;stroke:var(--sage-deep);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* Der Satz unter "Deine". Er erklaert nicht die Funktion, sondern
   nimmt die Sorge: wer eine Auszeichnung fuers Zoegern bekommt, will
   wissen, dass sie niemand sonst sieht. */
.erf-nurdu{margin:calc(var(--s2) * -1) 0 var(--s2);padding-left:var(--s2);font-size:12.5px}

/* ── Die Nachtszene ──
   Der leere Korb, bevor er kommt. Dunkler als alles andere in der
   App — es ist die einzige Stelle, an der die Oberflaeche selbst
   Nacht hat. Kein Knopf, nichts zu tippen: zwei Sekunden, in denen
   man nur wartet. Das ist der ganze Effekt. */
.nacht-buehne{background:color-mix(in srgb, var(--paper), var(--ink) 7%)}
.nacht-leer{
  font-family:var(--display);font-size:16px;line-height:1.5;
  color:var(--ink-soft);max-width:26ch;font-style:italic;
  animation:nacht-an 1400ms var(--e-out);
}
@keyframes nacht-an{from{opacity:0}to{opacity:1}}
.nacht-buehne .erf-marke{
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);
}
@media(prefers-reduced-motion:reduce){ .nacht-leer{animation:none} }

/* ═══════════════ KALENDER: AUFGABEN UND AGENDA ═══════════════
   Der Kalender zeigt jetzt beides. Damit man sie auseinanderhaelt,
   ohne hinzusehen: Termine haben Punkte (sie finden statt), Aufgaben
   eine Zahl am Rand (sie sind faellig und lassen sich schieben). */
.tag .tag-arbeit{
  position:absolute;top:3px;right:4px;
  font-size:9.5px;font-weight:700;line-height:1;
  color:var(--ink-soft);opacity:.75;
}
.tag{position:relative}
.tag.vorbei span:first-child{opacity:.45}
.tag.gewaehlt .tag-arbeit,.tag.heute .tag-arbeit{opacity:1}

/* Zurueck zu heute. Steht nur da, wenn man weg ist — ein Knopf, der
   dorthin fuehrt, wo man schon ist, ist Moebliierung. */
.zurueck-heute{
  display:inline-flex;align-items:center;gap:4px;
  min-height:34px;padding:0 var(--s3) 0 var(--s2);margin:var(--s2) 0 0;
  border:1px solid var(--line);background:transparent;border-radius:var(--r-pill);
  font:inherit;font-size:12.5px;color:var(--ink-soft);cursor:pointer;
}
.zurueck-heute:hover{background:var(--sage-tint)}
.zurueck-heute svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Eine Aufgabe in der Kalenderzeile. Dieselbe Bauform wie ein
   Termin, aber ohne Uhrzeit und mit einem offenen Ring statt eines
   Zeichens — sie hat keine Stunde, sie hat einen Tag. */
.kalarbeit .arbeitpunkt{
  width:16px;height:16px;flex:none;border-radius:50%;
  border:2px dashed var(--line-strong);align-self:center;
}
.kalarbeit .neben{font-size:12px;color:var(--ink-soft);display:block;margin-top:2px}
.kalarbeit.durch .was{color:var(--ink-soft);text-decoration:line-through;
  text-decoration-color:var(--line-strong)}

/* Die Agenda: nach Tagen gruppiert. Der Tageskopf ist selbst ein
   Knopf — man liest "Donnerstag, drei Sachen" und will dann dorthin. */
.agendatag{margin-bottom:var(--s3)}
.agendakopf{
  display:flex;align-items:baseline;gap:var(--s2);width:100%;
  background:transparent;border:none;cursor:pointer;font:inherit;
  padding:var(--s2) var(--s2) 4px;text-align:left;
  border-bottom:1px solid var(--line);margin-bottom:2px;
}
.agendakopf:hover{background:var(--sage-tint)}
.agendaname{font-weight:600;font-size:13px}
.agendafern{font-size:11.5px;color:var(--ink-soft);margin-left:auto}

/* ── Schritte anlegen ──
   Die angelegten stehen als Marken unter dem Feld, damit man beim
   Tippen in einem Rutsch sieht, was schon drin ist. */
.schritt-liste{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--s3);
  max-height:96px;overflow-y:auto}
.schritt-marke{
  font-size:12px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--sage-tint);color:var(--ink-soft);
}
.schritt-neu{padding-left:var(--s2)}
.schritt-neu .zeichen{width:22px;height:22px}
.schritt-neu .was{font-size:14px;color:var(--ink-soft)}
.marke-neben{font-weight:400;text-transform:none;letter-spacing:0;opacity:.8}

/* ── Bussi-Konto ──
   Zeilen, keine Karten: es ist ein Verlauf, und ein Verlauf liest
   sich von oben nach unten. */
.bussizeile{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s3) var(--s2);border-bottom:1px solid var(--line);
}
.bussizeile:last-child{border-bottom:none}
.bussizeile.schmal{padding-top:6px;padding-bottom:6px}
.bussizeichen{
  width:20px;height:20px;flex:none;margin-top:1px;
  fill:none;stroke:var(--accent-deep);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.bussizeile .text{flex:1;min-width:0}
.bussizeile .was{font-size:14.5px;display:block;line-height:1.3}
.bussizeile .neben{font-size:12px;color:var(--ink-soft);display:block;margin-top:2px}

/* ── Die Wochenansicht ──
   Sieben Zeilen statt eines Rasters. Kein Stundengitter: Aufgaben
   haben selten eine Uhrzeit, und ein Gitter, in dem alles oben in
   der Ganztagszeile klebt, ist Platz mit Linien drin. */
.kalsicht{margin:var(--s2) 0 var(--s3)}
.woche{display:flex;flex-direction:column;margin-bottom:var(--s4)}
.wochentag{
  display:grid;grid-template-columns:58px 1fr;gap:var(--s2);
  padding:var(--s2) 0;border-bottom:1px solid var(--line);align-items:start;
}
.wochentag:last-child{border-bottom:none}
.wochentag.vorbei{opacity:.55}
.wochentag.heute{background:var(--accent-tint);border-radius:12px;
  padding-left:var(--s2);padding-right:var(--s2)}
.wochentag.gewaehlt:not(.heute){background:var(--sage-tint);border-radius:12px;
  padding-left:var(--s2);padding-right:var(--s2)}
.wochenkopf{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:transparent;border:none;cursor:pointer;font:inherit;padding:2px 0;
}
.wtag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.wzahl{font-family:var(--display);font-size:17px;font-weight:600;line-height:1}
.wheute{font-size:10px;color:var(--accent-deep);font-weight:600}
.wocheninhalt{display:flex;flex-wrap:wrap;gap:4px;padding-top:3px;min-height:26px}
.wleer{color:var(--ink-soft);opacity:.5;font-size:13px;padding-top:2px}
.wpille{
  font-size:12px;line-height:1.3;padding:3px 9px;border-radius:var(--r-pill);
  cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;border:1px solid transparent;
}
.termin-pille{background:var(--accent);color:var(--auf-akzent);font-weight:500}
.arbeit-pille{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.arbeit-pille.wichtig{border-color:var(--sand-strich);font-weight:600}
.wpille:hover{filter:brightness(.97)}

/* Urlaubstage im Raster. Sandton, kein Rot, keine Schraffur — es ist
   eine Auskunft, keine Sperre. */
.tag.urlaub{background:color-mix(in srgb, var(--paper), var(--sand) 30%)}
.tag.urlaub.gewaehlt,.tag.urlaub.heute{background:var(--accent-tint)}

/* ── Die Kalenderleiste ──
   Zwei Umschalter nebeneinander: WAS man sieht (Monat/Woche) und
   WESSEN (alle/unsere/meine). Sie stehen in einer Zeile, weil sie
   zusammen die Antwort auf "welcher Ausschnitt" sind — untereinander
   sähen sie aus wie zwei verschiedene Sachen. */
.kalleiste{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;
  margin-bottom:var(--s3)}
.kalleiste .filter{margin:0}
.kalsicht{flex:none}
.kalwer{flex:1;min-width:150px}
.kalkopf .kalname{text-align:center}

/* ── Das allererste Bussi ──
   Eine Zaehlung kann nichts Liebevolleres als den Anfang zeigen. Am
   Jahrestag bekommt der Kasten den Akzentton — einmal im Jahr, und
   dann faellt es auf. */
.bussi-erstes{
  display:flex;align-items:center;gap:var(--s3);
  background:var(--sage-tint);border-radius:26px 8px 26px 8px;
  padding:var(--s3) var(--s4);margin-bottom:var(--s4);
}
.bussi-erstes.jahrestag{background:var(--accent-tint);
  box-shadow:inset 0 0 0 1.5px var(--accent-deep)}
.bussi-erstes .figur{width:52px;height:52px;flex:none}
.bussi-erstes .marke{
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:2px;
}
.bussi-erstes p{margin:0;font-size:13.5px;line-height:1.4}

/* Zurueckschicken direkt aus dem Verlauf. */
.bussi-zurueck{
  all:unset;display:grid;place-items:center;flex:none;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  align-self:center;
}
.bussi-zurueck:hover{background:var(--accent-tint)}
.bussi-zurueck svg{width:18px;height:18px;fill:none;stroke:var(--accent-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Der Po-Klaps ──
   Die Pfoten fliegen wie die Herzen, nur gefuellt statt umrissen —
   ein Klaps ist etwas Kurzes und Volles, kein Schweben. */
.pfotenflug svg{fill:var(--sand-strich);stroke:none}
.bussi-knopf.klapst{transform:scale(.88) rotate(-8deg)}

/* ═══════════════ CHAT: ZETTEL, KARTEN, ANTWORTEN ═══════════════ */

/* Der eine Zettel. Sandton, damit er wie Papier wirkt und nicht wie
   eine Meldung — er mahnt nicht, er haengt nur da. */
.zettel{
  display:flex;align-items:flex-start;gap:var(--s3);width:100%;text-align:left;
  background:color-mix(in srgb,var(--paper-warm),var(--sand) 38%);
  border:none;border-radius:4px 22px 4px 22px;cursor:pointer;font:inherit;
  padding:var(--s3) var(--s4);margin-bottom:var(--s3);
  box-shadow:0 2px 6px -3px rgba(43,46,40,.2);
}
.zettel.leer{background:transparent;box-shadow:none;
  border:1.5px dashed var(--line-strong);color:var(--ink-soft);font-size:13px}
.zettelzeichen{width:20px;height:20px;flex:none;margin-top:2px;
  fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zettel.leer .zettelzeichen{stroke:var(--ink-soft)}
.zettel .text{flex:1;min-width:0}
.zetteltext{display:block;font-size:15px;line-height:1.35}
.zettelvon{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:3px}

/* Eine Karte im Chat. Sie sitzt unter der Blase und gehoert sichtbar
   dazu — deshalb dieselbe Breite und kein eigener Rahmen um alles. */
.chatkarte{
  margin:4px 0 0;padding:var(--s3);max-width:86%;
  background:var(--paper-warm);border:1.5px solid var(--line);
  border-radius:18px 6px 18px 18px;
}
.chatzeile.ich .chatkarte{margin-left:auto;border-radius:18px 18px 6px 18px}
.chatkarte.entschieden{background:var(--sage-tint)}
.karte-kopf{display:flex;align-items:center;gap:6px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s2)}
.kartezeichen{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.karte-wann{font-size:13px;color:var(--ink);margin-bottom:var(--s2);font-weight:500}
.karte-optionen{display:flex;flex-direction:column;gap:4px}
.karte-option{
  display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;
  padding:7px var(--s3);font:inherit;font-size:14px;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
}
.karte-option:hover:not(:disabled){border-color:var(--accent-deep)}
.karte-option:disabled{cursor:default}
.karte-option.meine{border-color:var(--accent-deep);background:var(--accent-tint)}
.karte-option.gewonnen{border-color:var(--accent-deep);font-weight:600}
.karte-text{flex:1}
.karte-marke{
  width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;font-family:var(--display);
  background:var(--accent);color:var(--auf-akzent);
}
.karte-marke.andere{background:var(--sand);color:#20231B}
.karte-fuss{font-size:11.5px;color:var(--ink-soft);margin-top:var(--s2)}

/* Das Zitat in einer Antwort. Ein Streifen ueber dem eigenen Text,
   nicht daneben — man liest erst, worauf sich das bezieht. */
.chatzitat{
  display:block;font-size:12px;line-height:1.35;color:var(--ink-soft);
  border-left:2.5px solid var(--accent-deep);padding-left:var(--s2);
  margin-bottom:5px;
}
.chatzitat b{color:var(--ink)}
.chatzitat i{opacity:.75}

/* Der Streifen ueber der Eingabe, solange eine Antwort offen ist. */
.antwortstreifen{
  display:flex;align-items:center;gap:var(--s2);
  padding:6px var(--s3);margin-bottom:4px;font-size:12px;color:var(--ink-soft);
  background:var(--sage-tint);border-radius:12px;
  border-left:2.5px solid var(--accent-deep);
}
.antwortstreifen span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.antwortstreifen b{color:var(--ink)}
.antwortstreifen button{
  all:unset;cursor:pointer;width:26px;height:26px;flex:none;
  display:grid;place-items:center;border-radius:50%;font-size:17px;color:var(--ink-soft);
}
.antwortstreifen button:hover{background:var(--paper-warm)}
.schnellzeile.karte-neu{display:inline-flex;align-items:center;gap:5px;
  border-color:var(--accent-deep);color:var(--ink)}
.schnellzeile.karte-neu svg{width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Die schwebende Zeichenleiste ──
   Klebt an der Blase, nicht am Bildschirm. Deshalb absolut in .app
   positioniert und vom Skript gesetzt — CSS allein kann nicht wissen,
   wo eine Blase gerade steht.

   Sie ist bewusst schmal und hell: sie liegt ueber dem Gespraech und
   darf es nicht verdecken, nur kurz ueberlagern. */
.zeichenleiste{
  position:absolute;z-index:30;
  display:flex;align-items:center;gap:2px;
  padding:4px 6px;
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:0 6px 18px -6px rgba(43,46,40,.3);
  opacity:0;transform:scale(.88);transform-origin:bottom center;
  transition:opacity 140ms var(--e-out), transform 140ms var(--e-out);
}
.zeichenleiste.da{opacity:1;transform:scale(1)}
.zl-zeichen{
  all:unset;cursor:pointer;width:36px;height:36px;
  display:grid;place-items:center;font-size:20px;line-height:1;
  border-radius:50%;
  transition:transform 120ms var(--e-out), background 120ms var(--e-out);
}
.zl-zeichen:hover{transform:scale(1.22)}
.zl-zeichen.an{background:var(--accent-tint)}
.zl-mehr{
  all:unset;cursor:pointer;width:32px;height:32px;
  display:grid;place-items:center;font-size:17px;color:var(--ink-soft);
  border-radius:50%;margin-left:2px;
  border-left:1px solid var(--line);
}
.zl-mehr:hover{background:var(--sage-tint);color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .zeichenleiste{transition:none;opacity:1;transform:none}
  .zl-zeichen:hover{transform:none}
}

/* ── Die Morgenrunde ──
   Eine Karte je Aufgabe, gross und allein auf dem Schirm. Das ist der
   Punkt: man sieht genau eine Sache und entscheidet ueber genau die.
   Ein Brett mit neun Kacheln beantwortet die Frage "was mach ich
   heute" nicht, eine Karte schon. */
.rundenblatt{gap:var(--s3)}
.runde-zaehler{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);
}
.runde-karte{
  background:var(--sage-tint);border-radius:26px 8px 26px 8px;
  padding:var(--s6) var(--s5);max-width:24ch;width:100%;
}
.runde-zeichen{
  width:34px;height:34px;margin:0 auto var(--s3);display:block;
  fill:none;stroke:var(--sage-deep);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.runde-was{font-family:var(--display);font-size:21px;font-weight:600;line-height:1.25}
.runde-neben{font-size:12.5px;color:var(--ink-soft);margin-top:var(--s2)}
.runde-knoepfe{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}
.runde-knoepfe button{min-height:42px;padding:0 var(--s4);font-size:14px}

/* ── Aufgehoben ──
   Zeilen, kein Raster, und bewusst ohne Kreis zum Abhaken: das hier
   ist keine Arbeit. Antippen heisst "war schon", und was war, bleibt
   lesbar stehen statt durchgestrichen. */
.aufg-zeile{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line)}
.aufg-zeile:last-child{border-bottom:none}
.aufg-haupt{
  flex:1;min-width:0;display:flex;align-items:center;gap:var(--s3);
  background:transparent;border:none;cursor:pointer;font:inherit;text-align:left;
  padding:var(--s3) var(--s2);border-radius:var(--r-field);
}
.aufg-haupt:hover{background:var(--sage-tint)}
.aufg-zeichen{width:20px;height:20px;flex:none;fill:none;stroke:var(--sage-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aufg-zeile.war .aufg-zeichen{stroke:var(--accent-deep);fill:var(--accent-tint)}
.aufg-zeile .was{font-size:15px;display:block;line-height:1.3}
.aufg-zeile.war .was{color:var(--ink-soft)}
.aufg-zeile .neben{font-size:12px;color:var(--ink-soft);display:block;margin-top:2px}
.aufg-weg{
  all:unset;cursor:pointer;width:32px;height:32px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  font-size:18px;color:var(--ink-soft);opacity:.5;
}
.aufg-weg:hover{opacity:1;background:var(--sage-tint)}

/* Die Sorte in der Liste im Glas. Klein und beilaeufig — ein Klaps
   braucht keine Ueberschrift. */
.bussi-liste .bart{
  font-size:10.5px;font-weight:600;letter-spacing:.05em;
  padding:1px 7px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper),var(--sand) 50%);
  color:var(--ink);margin-right:5px;
}

/* ── Die Ablegeziele beim Ziehen ──
   Sie gibt es nur, solange eine Kachel in der Luft ist. Auf einem
   Telefon ist immer nur ein Tag sichtbar — es gibt also kein zweites
   Ziel, auf das man ziehen koennte, solange man keines erzeugt.

   OBEN, direkt unter der Kopfzeile. Der erste Versuch setzte sie auf
   top:0 und verschwand hinter dem Kopf; der zweite schob sie nach
   unten und funktionierte, war aber falsch: beim Anheben geht der
   Blick nach oben, und die Kachel selbst liegt unter dem Finger und
   verdeckt alles darunter. Jetzt gemessen unter den Kopf gesetzt. */
.zielleiste{
  position:absolute;left:0;right:0;z-index:34;
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  padding:var(--s2) var(--s3) var(--s3);
  background:color-mix(in srgb,var(--paper-warm),transparent 4%);
  backdrop-filter:blur(4px);
  border-bottom:1px solid var(--line);
  border-radius:0 0 20px 20px;
  box-shadow:0 8px 18px -10px rgba(43,46,40,.32);
  transform:translateY(-115%);opacity:0;
  transition:transform 180ms var(--e-out), opacity 180ms var(--e-out);
  /* KEIN pointer-events:none. Der erste Versuch hatte es, mit der
     Begruendung "getroffen wird per elementFromPoint" — und genau das
     ist der Widerspruch: elementFromPoint liefert bei none das
     Element DARUNTER. Die Leiste war sichtbar und fuer den Treffer
     unsichtbar. Die gezogene Kachel braucht none, die Ziele nicht. */
}
.zielleiste.da{transform:translateY(0);opacity:1}
.zielfeld{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--s2) 2px;border-radius:14px;
  border:1.5px dashed var(--line-strong);
  transition:background 120ms linear, border-color 120ms linear, transform 120ms var(--e-out);
}
.zielzeichen{width:17px;height:17px;fill:none;stroke:var(--ink-soft);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zielname{font-size:11px;font-weight:600;line-height:1.1;text-align:center}
.zieltag{font-size:9.5px;color:var(--ink-soft);line-height:1}
.zielfeld.an{
  background:var(--accent);border-color:var(--accent-deep);border-style:solid;
  transform:scale(1.06);
}
.zielfeld.an .zielname,.zielfeld.an .zieltag{color:var(--auf-akzent)}
.zielfeld.an .zielzeichen{stroke:var(--auf-akzent)}
@media(prefers-reduced-motion:reduce){
  .zielleiste{transition:none;transform:none;opacity:1}
  .zielfeld{transition:none}
}

/* Der Korb im Automatentest. Er zeigt zusätzlich, welche Tageszeit und
   welches Gemüt gerade gelten — in der App wäre das eine Erklärung zu
   viel, hier ist es der Prüfgegenstand. */
.korb-lage{
  text-align:center;font-size:11.5px;color:var(--ink-soft);
  margin:var(--s2) 0 0;letter-spacing:.02em;
}
.korb-fundteil{margin-top:var(--s5)}

/* ── Sofortige Antwort auf eine Pflegehandlung ───────────────────────
   Disneys Squash & Stretch, auf ein Minimum eingedampft: kurz
   zusammendrücken, dann überschwingen. Es läuft BEVOR der Server
   antwortet — aus der Tamagotchi-Auswertung ist die gefühlte Latenz
   der Unterschied zwischen einem Wesen und einem Formular. */
.korb-figur.gepflegt{animation:korb-gepflegt 460ms var(--e-out)}
@keyframes korb-gepflegt{
  0%  {transform:scale(1,1)}
  22% {transform:scale(1.1,.88) translateY(3%)}
  55% {transform:scale(.95,1.08) translateY(-4%)}
  78% {transform:scale(1.02,.99)}
  100%{transform:none}
}
/* Was die Handlung bewirkt hat — eine Zahl, die aufsteigt und vergeht.
   Keine Summe, kein Verlauf: eine Statistik über Fürsorge steht auf
   der Verbotsspalte. */
.pflege-wirkung{
  position:absolute;top:6px;right:10px;
  font-size:12px;font-weight:600;color:var(--sage-deep);
  pointer-events:none;animation:pflege-auf 1100ms var(--e-out) forwards;
}
@keyframes pflege-auf{
  0%  {opacity:0;transform:translateY(6px)}
  18% {opacity:1;transform:translateY(0)}
  70% {opacity:1;transform:translateY(-6px)}
  100%{opacity:0;transform:translateY(-14px)}
}
.pflege-knoepfe .halle-kachel{position:relative}
@media(prefers-reduced-motion:reduce){
  .korb-figur.gepflegt{animation:none}
  .pflege-wirkung{animation:none;opacity:1}
}

/* ═══════════════ RACOON BEWEGT SICH ═══════════════════════════════
   Bis hierher war er ein Standbild mit zwei Zuckungen: einmal beim
   Streicheln, einmal beim Pflegen. Dazwischen sass er vollkommen
   still, und ein Wesen, das vollkommen still sitzt, ist ein Bild.

   Drei Ebenen, die einander nicht in die Quere kommen:

     1 ATMEN     laeuft dauernd, sitzt am SVG. Winzig — 1,5 Prozent
                 Hoehe. Man sieht es nicht bewusst, man merkt nur,
                 dass etwas da ist.
     2 REGUNGEN  alle paar Sekunden eine kleine Bewegung, sitzt an
                 der Huelle. Blinzeln, Ohrenzucken, Umschauen,
                 Strecken. Nie zweimal dieselbe hintereinander.
     3 ANTWORTEN auf eine Handlung, ebenfalls an der Huelle. Jede
                 Handlung sieht anders aus: Kauen beim Fuettern,
                 Huepfen beim Spielen, Schuetteln beim Waschen.

   Ebene 1 sitzt INNEN (am SVG), Ebene 2 und 3 AUSSEN (an der Huelle).
   Sonst wuerde jede Regung das Atmen abschalten, und zwischen zwei
   Regungen stuende er wieder still.

   Die Kopfgruppe traegt ihre Neigung als SVG-Attribut. Eine
   CSS-Transformation daran wuerde sie ueberschreiben und den
   geneigten Kopf geradestellen — deshalb wird nur aussen an der
   Figur oder innen an Ohren und Augen bewegt. */

.korb-figur > .figur{
  transform-origin:50% 86%;          /* er sitzt auf, er schwebt nicht */
  animation:baer-atmen 4200ms ease-in-out infinite;
}
@keyframes baer-atmen{
  0%,100%{transform:scale(1,1)}
  50%    {transform:scale(.992,1.015)}
}
/* Geht es ihm schlecht, atmet er langsamer und tiefer. Kein zweites
   Bild, kein trauriges Gesicht — nur ein anderer Takt. */
.korb-figur.matt > .figur{animation-duration:6800ms}
@keyframes baer-doesen{
  0%,100%{transform:scale(1,1) translateY(0)}
  50%    {transform:scale(.985,1.03) translateY(-1%)}
}
.korb-figur.doest > .figur{animation:baer-doesen 7400ms ease-in-out infinite}

/* ── Ebene 2: die Regungen ───────────────────────────────────────── */

/* Blinzeln. Das billigste Lebenszeichen von allen und das wirksamste.
   `transform-box:fill-box` ist noetig, weil ein SVG-Kreis sonst um den
   Ursprung des Koordinatensystems skaliert und nicht um sich selbst —
   er wandert dann aus dem Gesicht statt zuzugehen. */
.figur .pupille{transform-box:fill-box;transform-origin:center}
.korb-figur.blinzelt .pupille{animation:baer-blinzeln 200ms ease-in-out}
@keyframes baer-blinzeln{
  0%,100%{transform:scaleY(1)}
  50%    {transform:scaleY(.08)}
}
/* Zwei Mal kurz hintereinander: so blinzelt niemand gleichmaessig. */
.korb-figur.blinzelt2 .pupille{animation:baer-blinzeln2 620ms ease-in-out}
@keyframes baer-blinzeln2{
  0%,18%,36%,54%,100%{transform:scaleY(1)}
  9%,45%             {transform:scaleY(.08)}
}

/* Ohrenzucken. Nur das rechte, und nur ein bisschen — beide zugleich
   sieht aus wie ein Schreck, eines sieht aus wie Zuhoeren. */
.figur .ohr{transform-box:fill-box;transform-origin:bottom center}
.korb-figur.ohr .ohr.rechts{animation:baer-ohr 420ms var(--e-out)}
@keyframes baer-ohr{
  0%,100%{transform:rotate(0)}
  30%    {transform:rotate(-13deg)}
  62%    {transform:rotate(5deg)}
}

/* Umschauen. Langsam nach links, kurz halten, zurueck. Waschbaeren
   tun das dauernd, und es ist die Bewegung, die am staerksten nach
   "jemand ist da drin" aussieht. */
.korb-figur.schaut{animation:baer-schaut 2600ms ease-in-out}
@keyframes baer-schaut{
  0%,100%  {transform:translateX(0) rotate(0)}
  26%,48%  {transform:translateX(-3.5%) rotate(-3.5deg)}
  70%,82%  {transform:translateX(2.5%) rotate(2.5deg)}
}

/* Strecken. Einmal lang machen, dann fallen lassen. */
.korb-figur.streckt{animation:baer-streckt 1500ms var(--e-out)}
@keyframes baer-streckt{
  0%,100%{transform:scale(1,1) translateY(0)}
  34%    {transform:scale(.94,1.08) translateY(-3%)}
  62%    {transform:scale(1.04,.97) translateY(1%)}
}

/* ── Ebene 3: die Antworten auf eine Handlung ────────────────────── */

/* Kauen. Drei kurze Stupser, wie ein Tier, das etwas im Maul hat. */
.korb-figur.kaut{animation:baer-kaut 900ms ease-in-out}
@keyframes baer-kaut{
  0%,100%      {transform:translateY(0) scale(1,1)}
  14%,42%,70%  {transform:translateY(2%) scale(1.03,.96)}
  28%,56%,84%  {transform:translateY(-1%) scale(.99,1.02)}
}

/* Huepfen. Einmal hoch, hart landen, nachfedern. */
.korb-figur.huepft{animation:baer-huepft 760ms var(--e-out)}
@keyframes baer-huepft{
  0%  {transform:translateY(0) scale(1,1)}
  16% {transform:translateY(2%) scale(1.08,.9)}
  46% {transform:translateY(-16%) scale(.94,1.08)}
  74% {transform:translateY(0) scale(1.07,.93)}
  88% {transform:translateY(0) scale(.98,1.02)}
  100%{transform:none}
}

/* Schuetteln. Schnell, quer, wie ein nasses Tier. */
.korb-figur.schuettelt{animation:baer-schuettelt 680ms linear}
@keyframes baer-schuettelt{
  0%,100%                {transform:translateX(0) rotate(0)}
  10%,30%,50%,70%        {transform:translateX(-3%) rotate(-4deg)}
  20%,40%,60%,80%        {transform:translateX(3%) rotate(4deg)}
  90%                    {transform:translateX(-1%) rotate(-1.5deg)}
}

/* Abwenden. Wenn er satt ist und trotzdem gefuettert wird. Er dreht
   sich weg, wartet kurz, dreht zurueck — kein Nein, nur ein Kommentar. */
.korb-figur.wendet{animation:baer-wendet 1400ms var(--e-out)}
@keyframes baer-wendet{
  0%,100%  {transform:rotate(0) translateX(0)}
  22%,62%  {transform:rotate(-11deg) translateX(-5%)}
  84%      {transform:rotate(3deg) translateX(1%)}
}

@media(prefers-reduced-motion:reduce){
  .korb-figur > .figur,
  .korb-figur.doest > .figur{animation:none}
  .korb-figur.blinzelt .pupille,.korb-figur.blinzelt2 .pupille,
  .korb-figur.ohr .ohr.rechts,
  .korb-figur.schaut,.korb-figur.streckt,
  .korb-figur.kaut,.korb-figur.huepft,
  .korb-figur.schuettelt,.korb-figur.wendet{animation:none}
}

/* Der Ball beim Spielen. Er rollt von rechts herein, bleibt kurz vor
   der Figur liegen und rollt weiter — dazwischen hüpft sie. Mehr
   braucht es nicht, damit "Spielen" nach Spielen aussieht statt nach
   einem dritten Knopf. */
.korb-ball{
  position:absolute;bottom:12%;right:14%;
  width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,
    color-mix(in srgb,var(--accent),var(--paper) 35%), var(--accent-deep));
  box-shadow:0 2px 0 0 color-mix(in srgb,var(--ink),transparent 82%);
  pointer-events:none;
  animation:korb-ball 1500ms var(--e-out) forwards;
}
@keyframes korb-ball{
  0%  {transform:translateX(140px) rotate(0);opacity:0}
  18% {transform:translateX(0) rotate(-320deg);opacity:1}
  55% {transform:translateX(-10px) rotate(-350deg);opacity:1}
  72% {transform:translateX(-6px) translateY(-26px) rotate(-420deg)}
  100%{transform:translateX(-150px) translateY(0) rotate(-760deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){ .korb-ball{display:none} }

/* ── Der Waschbär läuft ──────────────────────────────────────────────
   "Die Figur könnte auch animiert sein. Zb wie bei Super Mario
   original." Dort ist es kein Kunstwerk, sondern zwei Bilder im
   Wechsel — und genau das trägt: ein Körper, der sich im Takt hebt und
   senkt, liest sich als Laufen, auch wenn keine Beine zu sehen sind.

   Hier ein Heben und Neigen im Zweiertakt. Es sitzt am SVG, nicht am
   Kasten: den Kasten braucht der Sprung, und zwei Transformationen am
   selben Element überschreiben einander. */
.sp-baer svg{animation:sp-lauf 320ms steps(2, jump-none) infinite}
@keyframes sp-lauf{
  0%  {transform:translateY(0) rotate(-2deg)}
  100%{transform:translateY(-7%) rotate(2.5deg)}
}
/* In der Luft wird nicht gelaufen. Er streckt sich beim Absprung und
   fängt sich beim Landen — das ist der Teil, der einen Sprung erst
   nach Sprung aussehen lässt. */
.sp-baer.fliegt svg{animation:none;transform:scale(.94,1.08) rotate(-4deg)}
.sp-baer.landet svg{animation:none;animation:sp-landung 260ms var(--e-out)}
@keyframes sp-landung{
  0%  {transform:scale(1.12,.86) translateY(4%)}
  55% {transform:scale(.97,1.04) translateY(-2%)}
  100%{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .sp-baer svg,.sp-baer.landet svg{animation:none}
  .sp-baer.fliegt svg{transform:none}
}

/* ── Der Klapppfeil am Monatsraster ──────────────────────────────────
   Er sitzt AM Raster, nicht in der Reiterleiste: er gehört zu dem, was
   er zumacht. Vorher war das Einklappen ein dritter Reiter neben Monat
   und Woche — ein Reiter verspricht aber eine ANDERE Ansicht, und
   dieselbe Seite ohne Raster ist keine andere Ansicht, sondern eine
   zusammengeklappte. */
.kalklapp{
  display:flex;align-items:center;gap:6px;width:100%;
  margin:var(--s3) 0 0;padding:7px var(--s3);
  background:transparent;border:none;border-radius:var(--r-inner);
  font:inherit;font-size:12.5px;color:var(--ink-soft);cursor:pointer;
}
.kalklapp:hover{background:var(--sage-tint)}
.kalklapp svg{
  width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform 180ms var(--e-out);
}
.kalklapp.zu svg{transform:rotate(-90deg)}

/* ── Die Ebenen der Mülltonnennacht ──────────────────────────────────
   Der Name der Ebene steht oben mittig und wechselt beim Übergang. Er
   ist eine Uhrzeit und keine Zahl: ein Waschbär misst eine Nacht nicht
   in Ebenen, sondern daran, wie spät es ist. */
.sp-ebene{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--display);font-size:13px;color:var(--ink-soft);
  white-space:nowrap;pointer-events:none;
}
.sp-ebene.neu{animation:sp-ebene 1100ms var(--e-out)}
@keyframes sp-ebene{
  0%  {opacity:0;transform:translateX(-50%) translateY(-8px) scale(.9)}
  22% {opacity:1;transform:translateX(-50%) translateY(0) scale(1.14)}
  100%{opacity:1;transform:translateX(-50%) scale(1)}
}
/* Die offene Tonne am Ende einer Ebene. Sie ist kein Hindernis: der
   Deckel liegt daneben, und innen ist sie dunkel. */
.sp-tonne.offen{
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--ink),var(--paper) 42%) 0 26%,
    color-mix(in srgb,var(--sand),var(--ink) 20%) 26%);
  border-color:var(--sage-deep);border-width:2px;
  border-radius:3px 3px 2px 2px;
}
.sp-tonne.offen::before{
  content:"";position:absolute;left:-38%;bottom:0;width:34%;height:22%;
  background:color-mix(in srgb,var(--sand),var(--ink) 16%);
  border:1.5px solid var(--ink-soft);border-radius:3px;
  transform:rotate(-16deg);
}
/* Die angebissenen Äpfel. Sie liegen in Sprunghöhe zwischen den
   Hindernissen — freiwillige Gefahr, und genau das ist der Reiz. */
/* ── Der angebissene Apfel ───────────────────────────────────────────
   Das Zeichen aus zeichen.js war ein ganzer Apfel, und gemeldet wurde
   "die aepfel sehen nicht angebissen aus" — zu Recht, es war einfach
   ein Apfel. Jetzt gezeichnet statt bezeichnet: ein runder Koerper mit
   einem Biss rechts oben, ein Stiel, ein Blatt. Der Biss ist ein
   zweiter Kreis in der Feldfarbe, der ein Stueck herausnimmt — bei
   dieser Groesse die einzige Form, die man noch erkennt. */
/* ── Der Apfel ─────────────────────────────────────────────────────
   Donats Zeichnung, als ein Stück SVG. Vorher war er aus drei
   CSS-Kästen mit runden Ecken zusammengesetzt — Körper, Biss, Blatt —
   und der Biss war eine Innenzeichnung, die bei zwanzig Pixeln nichts
   mehr war. In seiner Zeichnung verändert der Biss die Silhouette,
   und das überlebt jede Grösse.

   ── Warum er einen dunklen Saum bekommt ─────────────────────────
   Gemeldet: "ich hab bei Mülltonnennacht keine Äpfel gesehen", und
   zwar nach mehr als zwölf Hindernissen — sie waren also da. Sie
   waren nur nicht zu sehen, und das ist nachgemessen:

   Der Gassen-Verlauf geht von dunkel oben (58,64,56) nach HELL unten
   (112,121,109). Der Apfel liegt am Boden, also genau im hellsten
   Streifen des Feldes — und er war in hellem Salbeigrün gezeichnet.
   Kontrastverhältnis dort: 1,98. Oben im Bild wären es 4,67 gewesen,
   aber oben ist der Apfel nie.

   Eine einzelne Füllfarbe kann das nicht lösen, weil der Grund unter
   ihm zwischen 58 und 112 wandert: was oben gut steht, verschwindet
   unten, und umgekehrt. Deshalb hell gefüllt UND dunkel umsäumt —
   der Saum trägt, wo die Füllung nicht mehr trägt. Gemessen mit Saum:
   mindestens 3,9 an jeder Stelle des Verlaufs, statt 1,98. */
.sp-apfel{
  position:absolute;width:7%;aspect-ratio:1;pointer-events:none;
}
.sp-apfel svg{
  display:block;width:100%;height:100%;
  fill:color-mix(in srgb,var(--paper),var(--sand) 22%);
  filter:
    drop-shadow(0 0 1.4px color-mix(in srgb,var(--ink),transparent 10%))
    drop-shadow(0 1px 1px color-mix(in srgb,var(--ink),transparent 45%));
}
.sp-apfel.weg{animation:sp-apfel-weg 320ms var(--e-out) forwards}
@keyframes sp-apfel-weg{
  0%  {transform:scale(1);opacity:1}
  100%{transform:scale(1.9) translateY(-40%);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .sp-ebene.neu,.sp-apfel{animation:none}
}

/* Die Pfeile beim Waschtag. Sie zeigen, dass es zwei Hälften gibt —
   unsichtbare Flächen probiert niemand aus. Am Rand, durchlässig, und
   ab dem fünften Stück verschwinden sie: wer so weit kommt, hat es
   verstanden. */
/* ── Die Pfeile beim Waschtag ────────────────────────────────────────
   Zweite Rueckmeldung dazu: "Die Pfeile deutlich groesser und mehr ins
   Feld, dafuer ausgrauen und auch eine Touchreaktion einbauen, die man
   sieht auch wenn die Daumen drueber sind."

   Alle drei Punkte hier drin. Groesser (34 auf 54 Pixel) und weiter
   innen (3 auf 9 Prozent), dafuer blasser im Ruhezustand — ein Zeichen,
   das man sucht, darf gross sein, solange es leise ist.

   Die Reaktion ist ein RING, der vom Pfeil aus nach aussen waechst.
   Ein Daumen verdeckt das Zentrum, aber nie den Rand: was sich
   ausdehnt, sieht man auch unter der Hand noch. Ein blosses
   Aufleuchten des Pfeils waere genau da unsichtbar, wo es zaehlt. */
.sp-pfeil{
  position:absolute;top:40%;z-index:2;pointer-events:none;
  width:54px;height:54px;display:grid;place-items:center;
  font-size:46px;line-height:1;color:var(--ink-soft);opacity:.22;
  transition:opacity 220ms var(--e-out), transform 160ms var(--e-out);
}
.sp-pfeil.links{left:9%}
.sp-pfeil.rechts{right:9%}
.sp-pfeil.an{opacity:.8;transform:scale(1.18)}
.sp-pfeil.weg{opacity:0}
/* Der Ring. Er waechst ueber den Daumen hinaus und verblasst dabei. */
.sp-pfeil::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:3px solid var(--accent-deep);
  opacity:0;transform:scale(.4);
}
.sp-pfeil.an::after{animation:sp-ring 420ms var(--e-out)}
@keyframes sp-ring{
  0%  {opacity:.75;transform:scale(.35)}
  100%{opacity:0;transform:scale(2.3)}
}
@media(prefers-reduced-motion:reduce){ .sp-pfeil.an::after{animation:none} }
/* Eine Pfote zurück. Ein kurzes Aufleuchten, kein Fanfarenstoß. */
.sp-leben-dazu .sp-leben i:not(.aus){animation:sp-pfote-dazu 620ms var(--e-out)}
@keyframes sp-pfote-dazu{
  0%,100%{transform:scale(1)}
  40%    {transform:scale(1.5)}
}
@media(prefers-reduced-motion:reduce){
  .sp-leben-dazu .sp-leben i:not(.aus){animation:none}
}

/* ── Die Z beim Schlafen steigen ─────────────────────────────────────
   Sie waren immer da und wurden trotzdem nicht gesehen: zwei stehende
   Striche neben einem Kopf sind zwei Striche. Zwei, die langsam nach
   oben treiben und verblassen, sind Schlaf. */
.figur .zett{transform-box:fill-box;transform-origin:center}
.korb-figur .zett.eins{animation:zett 2600ms ease-in-out infinite}
.korb-figur .zett.zwei{animation:zett 2600ms ease-in-out infinite 900ms}
@keyframes zett{
  0%  {transform:translateY(2px) scale(.7);opacity:0}
  25% {opacity:.9}
  100%{transform:translateY(-9px) scale(1.15);opacity:0}
}

/* ── Herzchen beim Streicheln ────────────────────────────────────────
   "Evtl können kleine Herzchen erscheinen wenn man ihn streichelt."
   Eines je Streichler, an zufälliger Stelle über ihm, steigt und
   vergeht. Sie zählen nichts und schalten nichts frei — sie sind das
   Einzige, was passiert, und genau deshalb sind sie schön. */
.korb-herz{
  position:absolute;width:16px;height:16px;pointer-events:none;z-index:2;
  animation:korb-herz 1200ms var(--e-out) forwards;
}
.korb-herz svg{width:100%;height:100%;fill:var(--accent-deep);stroke:none}
@keyframes korb-herz{
  0%  {transform:translateY(0) scale(.4) rotate(-8deg);opacity:0}
  20% {transform:translateY(-6px) scale(1) rotate(4deg);opacity:.95}
  100%{transform:translateY(-46px) scale(.85) rotate(-6deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .korb-figur .zett.eins,.korb-figur .zett.zwei{animation:none}
  .korb-herz{display:none}
}

/* Ebenenname und -zahl übereinander, klein und mittig. Der Name ist
   eine Uhrzeit, die Zahl steht darunter für die, die zählen wollen. */
.sp-ebene .ebname{display:block;font-size:13px;line-height:1.1}
.sp-ebene .ebzahl{display:block;font-size:10px;opacity:.62;letter-spacing:.06em}
/* Der Apfelzähler unten links: ein kleiner Apfel und eine Zahl. */
/* Der Zähler unten links. Er sitzt am unteren Rand und damit im
   hellsten Teil des Gassen-Verlaufs — hell auf hell ergab dort ein
   Kontrastverhältnis von 3,69. Nicht unsichtbar, aber zu wenig für
   eine Zahl, die man im Vorbeirennen ablesen soll. Derselbe dunkle
   Saum wie beim Apfel bringt sie auf über 6. */
.sp-apfelzahl{
  position:absolute;left:14px;bottom:12px;z-index:3;
  display:flex;align-items:center;gap:5px;pointer-events:none;
  font-family:var(--display);font-size:14px;
  color:color-mix(in srgb,var(--paper),transparent 6%);
  text-shadow:0 1px 2px color-mix(in srgb,var(--ink),transparent 25%);
}
.sp-apfelzahl svg{
  width:14px;height:14px;display:block;
  fill:color-mix(in srgb,var(--paper),var(--sand) 22%);
  filter:drop-shadow(0 0 1.2px color-mix(in srgb,var(--ink),transparent 20%));
}

/* Der Stern. Ab der dritten Ebene, selten, in der Luft — und damit
   wieder das, was der Apfel am Boden nicht mehr ist: eine freiwillige
   Gefahr. Er zählt wie fünf Äpfel und sieht auch so aus: heller,
   grösser, mit einem Schimmer. */
.sp-stern{
  position:absolute;width:9%;aspect-ratio:1;pointer-events:none;
  display:grid;place-items:center;
  animation:sp-stern-funkel 1800ms ease-in-out infinite;
}
.sp-stern svg{
  width:100%;height:100%;fill:none;
  stroke:color-mix(in srgb,var(--paper),var(--sand) 30%);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--paper),transparent 55%));
}
@keyframes sp-stern-funkel{
  0%,100%{transform:scale(1) rotate(-4deg);opacity:.92}
  50%    {transform:scale(1.12) rotate(4deg);opacity:1}
}
.sp-stern.weg{animation:sp-apfel-weg 320ms var(--e-out) forwards}
@media(prefers-reduced-motion:reduce){ .sp-stern{animation:none} }

/* Der Regenbogen hinter der Wäscheleine. Kleine Punkte, die liegen
   bleiben, wo er war, und verblassen — die Farbe wandert mit jedem
   Punkt weiter durch den Farbkreis, also entsteht der Bogen aus der
   Bewegung und nicht aus einem Verlauf. Fliegt er hoch, steigt er mit.

   Die einzige Stelle in der App, an der es bunt wird. Im Hinterraum
   darf etwas passieren, was im Haushalt nichts verloren hätte. */
.sp-bogen{
  position:absolute;width:5.5%;aspect-ratio:1;border-radius:50%;
  pointer-events:none;
  /* Unter dem Waschbaeren. Er hat z-index 2, der Schweif 0 — vorher
     lagen die Punkte im Dokument NACH ihm und malten sich damit
     darueber. */
  z-index:0;
  animation:sp-bogen 900ms linear forwards;
}
@keyframes sp-bogen{
  0%  {opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(.35)}
}
@media(prefers-reduced-motion:reduce){ .sp-bogen{display:none} }

/* ── Die Stadt hinter der Gasse ──────────────────────────────────────
   Sterne oben, eine Skyline mit erleuchteten Fenstern, Laternen mit
   Lichtkegel. Alles aus Farbverläufen — kein Bild, keine zusätzliche
   Datei, und es skaliert von selbst mit dem Feld.

   Die Sterne sind ein `radial-gradient` mit winzigen Punkten, die
   Fenster ein `repeating-linear-gradient` über den Häusern. Das ist
   der billigste Weg zu einer Stadt, den es gibt, und bei dieser Grösse
   auch der richtige: eine gezeichnete Skyline wäre bei 340 Pixeln
   Breite Matsch. */
.sp-stadt{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
/* Sterne: feine helle Punkte im oberen Drittel. */
.sp-stadt .sterne{
  position:absolute;inset:0 0 58% 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, var(--paper), transparent),
    radial-gradient(1.2px 1.2px at 28% 44%, color-mix(in srgb,var(--paper),transparent 22%), transparent),
    radial-gradient(1.6px 1.6px at 46% 16%, var(--paper), transparent),
    radial-gradient(1.1px 1.1px at 58% 52%, color-mix(in srgb,var(--paper),transparent 34%), transparent),
    radial-gradient(1.5px 1.5px at 74% 30%, var(--paper), transparent),
    radial-gradient(1.2px 1.2px at 86% 60%, color-mix(in srgb,var(--paper),transparent 26%), transparent),
    radial-gradient(1.3px 1.3px at 34% 68%, color-mix(in srgb,var(--paper),transparent 40%), transparent),
    radial-gradient(1.4px 1.4px at 66% 8%, var(--paper), transparent);
  opacity:.8;
  animation:sp-sterne 5200ms ease-in-out infinite;
}
@keyframes sp-sterne{ 0%,100%{opacity:.62} 50%{opacity:.92} }

/* Die gezeichnete Skyline. Sie sitzt unten und wird beschnitten statt
   verzerrt — gestreckte Haeuser sehen sofort falsch aus. */
/* Der Traeger, in dem zwei Abzuege nebeneinander liegen. Er wird
   geschoben; sobald der erste draussen ist, steht der zweite an seiner
   Stelle, und die Verschiebung springt bei 100 Prozent zurueck —
   nahtlos, ohne dass jemals ein Rand sichtbar wird. */
.sp-skylauf{
  position:absolute;left:0;bottom:16%;width:200%;height:26%;
  display:flex;
}
.sp-skyline{
  width:50%;height:100%;flex:none;
  opacity:.72;
}
.sp-skyline .haus{ fill:color-mix(in srgb,var(--ink),var(--sage-deep) 30%); }
.sp-skyline .licht{ fill:color-mix(in srgb,var(--sand),var(--paper) 34%); opacity:.9; }
.sp-skyline .licht.blinkt{
  fill:color-mix(in srgb,var(--sand),var(--paper) 10%);
  animation:sp-blink 2400ms ease-in-out infinite;
}
@keyframes sp-blink{ 0%,100%{opacity:.25} 50%{opacity:1} }
/* Zwei Strassenlaternen. Der Lichtkegel ist ein Kegel aus einem
   Verlauf, die Lampe selbst ein heller Punkt darüber. */
@media(prefers-reduced-motion:reduce){ .sp-stadt .sterne{animation:none} }

/* ── Die Strassenlaternen ────────────────────────────────────────────
   Sie stehen an DERSELBEN Strasse wie die Tonnen und ziehen deshalb mit
   derselben Geschwindigkeit vorbei. Vorher standen sie fest an zwei
   Stellen, und damit war die Kulisse ein Bild hinter einem Laufband
   statt einer Strasse, an der man entlangläuft.

   Der Lichtkegel ist ein Dreieck aus einem Verlauf, die Lampe ein
   heller Punkt mit Schein darüber. */
.sp-laterne{
  position:absolute;bottom:16%;width:2px;height:17%;
  background:color-mix(in srgb,var(--ink),var(--paper) 38%);
  opacity:.85;pointer-events:none;
}
.sp-laterne::before{
  content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%);
  width:11px;height:8px;border-radius:50% 50% 30% 30%;
  background:color-mix(in srgb,var(--sand),var(--paper) 46%);
  box-shadow:0 0 14px 4px color-mix(in srgb,var(--sand),transparent 40%);
}
.sp-laterne::after{
  content:"";position:absolute;left:50%;top:2px;transform:translateX(-50%);
  width:56px;height:210%;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--sand),transparent 58%),
    transparent 84%);
  clip-path:polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}
@media(prefers-reduced-motion:reduce){ .sp-stadt .sterne{animation:none} }

/* Die zwei Knöpfe der Musikfrage nebeneinander. "Lieber still" ist der
   leisere von beiden — nicht weil es die schlechtere Wahl wäre,
   sondern weil ein Nein keinen Nachdruck braucht. */
.sp-ein-text{font-size:13px;line-height:1.5;margin:0 0 var(--s4);color:var(--ink-soft)}
.sp-ein-zwei{display:flex;gap:var(--s2)}
.sp-ein-zwei .sp-ein-los{flex:1}
.sp-ein-still{
  flex:1;min-height:42px;font:inherit;font-size:14px;cursor:pointer;
  background:transparent;border:1.5px solid var(--line-strong);
  color:var(--ink-soft);border-radius:var(--r-pill);
}

/* Ein kurzer Zuruf im Spielfeld. Für das eine Mal, an dem etwas Neues
   dazukommt und man es sonst nicht bemerken würde. Er verschwindet von
   selbst — ein Hinweis, den man wegtippen muss, ist eine Unterbrechung. */
.sp-ruf{
  position:absolute;left:50%;top:32%;transform:translateX(-50%);z-index:4;
  padding:8px var(--s4);border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper),transparent 8%);
  color:var(--ink);font-family:var(--display);font-size:15px;
  white-space:nowrap;pointer-events:none;
  animation:sp-ruf-auf 320ms var(--e-out);
  transition:opacity 560ms var(--e-out), transform 560ms var(--e-out);
}
.sp-ruf.weg{opacity:0;transform:translateX(-50%) translateY(-14px)}
@keyframes sp-ruf-auf{
  0%  {opacity:0;transform:translateX(-50%) scale(.8)}
  100%{opacity:1;transform:translateX(-50%) scale(1)}
}
@media(prefers-reduced-motion:reduce){ .sp-ruf{animation:none} }

/* ── Der Spielmodus ──────────────────────────────────────────────────
   Gemeldet: "in der eigentlichen App taucht ein Problem in Kombi mit
   dem unteren Menü auf. Evtl ist eine Art Spielmodus notwendig um die
   Menüführung zu schützen."

   Stimmt, und es ist schlimmer als unschön: die Reiterleiste liegt am
   unteren Rand, und genau dort tippt man beim Spielen. Ein Tipper
   daneben wirft einen mitten im Sprung in die Einkaufsliste.

   Der Spielmodus nimmt die Leiste heraus, solange gespielt wird, und
   setzt an ihre Stelle einen einzigen Knopf zum Aufhören. Damit ist
   die Fläche unten nicht mehr gefährlich, sondern leer — und wer
   zurück will, hat genau einen Weg, den er nicht aus Versehen
   trifft. */
.app.spielt .app-tabs{ display:none; }
.spiel-raus{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:40;
  min-height:40px;padding:0 var(--s5);cursor:pointer;
  font:inherit;font-size:13.5px;
  background:color-mix(in srgb,var(--paper-warm),transparent 8%);
  border:1.5px solid var(--line-strong);color:var(--ink-soft);
  border-radius:var(--r-pill);
}
/* Der Platz unten wird trotzdem freigehalten, damit das Spielfeld
   nicht unter dem Knopf endet. */
.app.spielt .app-inhalt{ padding-bottom:76px; }

/* ── Zehenspitzen ────────────────────────────────────────────────────
   Minesweeper in der dunklen Wohnung. Die Felder sind gross genug für
   einen Daumen — bei acht mal acht auf einem Telefon sind das rund
   38 Pixel, und darunter trifft man nicht mehr verlässlich.

   Die Zahlen bekommen abgestufte Farben, aber in EINER Familie: das
   Original benutzt Blau, Grün, Rot, Violett, und in dieser App wäre
   das ein Fremdkörper. Hier wird nur dunkler, je mehr Möbel danebenstehen. */
.sp-zehen{background:color-mix(in srgb,var(--ink),var(--sage-deep) 52%)}
.sp-zehen .sp-brett{
  position:absolute;inset:10% 5% 16%;
  display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;
}
.sp-zehen .sp-feld{
  border:none;cursor:pointer;font:inherit;font-weight:700;font-size:15px;
  display:grid;place-items:center;padding:0;
  background:color-mix(in srgb,var(--ink),var(--paper) 22%);
  border-radius:5px;color:var(--paper);
  pointer-events:auto;
}
.sp-zehen .sp-feld.offen{
  background:color-mix(in srgb,var(--sage-deep),var(--paper) 30%);
  color:var(--ink);
}
.sp-zehen .sp-feld.offen.n1{color:color-mix(in srgb,var(--ink),var(--paper) 34%)}
.sp-zehen .sp-feld.offen.n2{color:color-mix(in srgb,var(--ink),var(--paper) 18%)}
.sp-zehen .sp-feld.offen.n3{color:var(--ink)}
.sp-zehen .sp-feld.offen.n4,
.sp-zehen .sp-feld.offen.n5,
.sp-zehen .sp-feld.offen.n6,
.sp-zehen .sp-feld.offen.n7,
.sp-zehen .sp-feld.offen.n8{color:var(--ink);text-decoration:underline}
.sp-zehen .sp-feld.moebel{
  background:var(--sand-strich);color:var(--ink);
}
.sp-zehen .sp-feld.markiert{
  background:color-mix(in srgb,var(--accent-deep),var(--ink) 20%);
  color:var(--auf-akzent);
}
/* Der Umschalter unten. Er zeigt, was ein Tipper GERADE tut — nicht,
   was er tun würde. Ein Knopf, der den anderen Zustand anzeigt, ist
   die häufigste Quelle für Fehlbedienung. */
.sp-zehenleiste{
  position:absolute;left:0;right:0;bottom:3%;
  display:flex;align-items:center;justify-content:center;gap:var(--s3);
  pointer-events:none;
}
.sp-modus{
  display:inline-flex;align-items:center;gap:6px;pointer-events:auto;
  min-height:34px;padding:0 var(--s4);cursor:pointer;font:inherit;font-size:13px;
  background:color-mix(in srgb,var(--paper-warm),transparent 10%);
  border:1.5px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink);
}
.sp-modus.an{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--auf-akzent)}
.sp-modus .mz{font-size:15px;line-height:1}
.sp-uebrig{font-size:12px;color:color-mix(in srgb,var(--paper),transparent 24%)}

/* ═══════════════ DIE ANLEITUNG AUF DEN STARTBILDSCHIRM ═══════════════
   Eine nummerierte Liste, die auch dann lesbar bleibt, wenn jemand sie
   am Telefon mit einer Hand haelt und mit der anderen im Teilen-Menue
   sucht. Grosse Ziffern, viel Abstand, keine Kaestchen: Es sind vier
   Schritte, kein Formular. */
.anleitung{
  list-style:none;counter-reset:schritt;
  margin:var(--s3) 0;padding:0;
}
.anleitung li{
  counter-increment:schritt;
  position:relative;padding:var(--s2) 0 var(--s2) 38px;
  font-size:15px;line-height:1.5;color:var(--ink);
}
.anleitung li::before{
  content:counter(schritt);
  position:absolute;left:0;top:var(--s2);
  width:26px;height:26px;border-radius:50%;
  background:var(--sage-tint);color:var(--sage-deep);
  font-family:var(--display);font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
/* Die Linie zwischen den Schritten macht aus vier Zeilen einen Weg. */
.anleitung li:not(:last-child)::after{
  content:"";position:absolute;left:13px;top:calc(var(--s2) + 28px);
  width:1.5px;height:calc(100% - 26px);
  background:var(--line);
}