/* Lotte — die Familien-App. Warmes Papier, Terracotta, bunte Zettel.
   Eigene Formensprache: Kühlschranktür statt Dashboard. */

:root {
  --papier: #F7F1E8;
  --karte: #FFFDF8;
  --karte-rand: #EADFCE;
  --tinte: #2A241E;
  --tinte-blass: #8A7F72;
  --akzent: #C75B39;         /* Terracotta — Lottes Farbe */
  --akzent-hell: #F3D9CE;
  --gruen: #7A9E7E;
  --gelb: #D9A441;
  --blau: #4A7FA5;
  --rot: #B33A2E;
  --zettel-gelb: #F5E6A8;
  --zettel-rosa: #F2C6C2;
  --zettel-gruen: #CFE3C8;
  --zettel-blau: #C7DAE8;
  --schatten: 0 1px 2px rgba(60, 45, 30, .08), 0 4px 14px rgba(60, 45, 30, .07);
  --radius: 16px;
  --fuss: 64px;
  --sicher-unten: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #201B16;
    --karte: #2A241E;
    --karte-rand: #3A322A;
    --tinte: #F2EAE0;
    --tinte-blass: #A79A8B;
    --akzent: #E07B54;
    --akzent-hell: #4A3228;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  }
}

/* Registrierte Eigenschaft — nur so ist ein Prozentwert animierbar
   (die Tinte, die in der Begrüßung trocknet). */
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
  background: var(--papier);
  color: var(--tinte);
  min-height: 100dvh;
  padding-bottom: calc(var(--fuss) + var(--sicher-unten) + 12px);
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0;
         cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, textarea, select {
  font: inherit; color: var(--tinte);
  background: var(--karte); border: 1.5px solid var(--karte-rand);
  border-radius: 12px; padding: 10px 12px; width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--akzent);
}
img { max-width: 100%; display: block; }

/* ---------- Licht und Papier ----------
   Der Schein wandert mit der Tageszeit über das Blatt: morgens kühl von
   links, abends warm und tief von rechts. Man merkt es nie bewusst — aber
   die App fühlt sich um 7 Uhr anders an als um 21 Uhr. */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 42% at var(--sonne-x, 50%) -8%,
              rgba(255, 214, 150, var(--waerme, .18)), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  body::before {                       /* nachts Lampe statt Sonne */
    background: radial-gradient(50% 38% at 82% -6%,
                rgba(255, 190, 120, .10), transparent 72%);
  }
}
/* Papierkorn: ein einziges SVG-Rauschen, gekachelt. Im Hellen dunkelt es
   ab, im Dunkeln hellt es auf — so arbeitet echtes Papier gegen Licht. */
.korn {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .korn { opacity: .032; mix-blend-mode: screen; }
}

/* ---------- Schrift-Hierarchie ---------- */
.gruss {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 6.6vw, 33px); line-height: 1.18;
  letter-spacing: -.012em; font-weight: 400;
  text-wrap: balance; hanging-punctuation: first;
}
.gruss b { color: var(--akzent); font-weight: 400; font-style: italic; }
/* Die Tinte trocknet: der Name wird geschrieben, nicht eingeblendet —
   eine Wischmaske läuft durch, die Farbe sackt zum Schluss satt nach.
   Einmal pro Sitzung, nie wieder (sonst wird aus Zauber Zappeln). */
.gruss.frisch b {
  -webkit-mask-image: linear-gradient(90deg, #000 var(--p), transparent var(--p));
  mask-image: linear-gradient(90deg, #000 var(--p), transparent var(--p));
  animation: tinte .66s cubic-bezier(.2, .75, .2, 1) both;
}
@keyframes tinte {
  from { --p: 0%; color: color-mix(in srgb, var(--akzent) 45%, var(--papier)); }
  to   { --p: 115%; color: var(--akzent); }
}
@media (prefers-reduced-motion: reduce) {
  .gruss.frisch b { animation: none; -webkit-mask-image: none; mask-image: none; }
}
.rubrik {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-blass);
  margin: 22px 4px 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.rubrik .mehr { letter-spacing: 0; text-transform: none; font-weight: 600;
                color: var(--akzent); font-size: 13px; }

/* ---------- Grundgerüst ---------- */
#app { max-width: 640px; margin: 0 auto; padding: 18px 14px 0; }
.kopf { display: flex; justify-content: space-between; align-items: flex-start;
        gap: 10px; margin-bottom: 4px; }
.datumzeile { color: var(--tinte-blass); font-size: 14px; margin-top: 4px; }

/* Ränder aus Licht statt aus Linien: eine hauchdünne helle Oberkante,
   als fiele Licht auf die Blattkante, darunter zwei gestaffelte Schatten. */
.karte {
  background: var(--karte); border: 0;
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent),
    0 1px 1px rgba(60, 45, 30, .06),
    0 6px 18px -6px rgba(60, 45, 30, .16);
  padding: 14px; margin-bottom: 10px;
}
@media (prefers-color-scheme: dark) {
  .karte {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .055),
      0 1px 2px rgba(0, 0, 0, .45),
      0 10px 24px -10px rgba(0, 0, 0, .6);
  }
}
.karte.knapp { padding: 10px 12px; }
.leer { color: var(--tinte-blass); text-align: center; padding: 26px 10px;
        font-size: 15px; }
.leer .gross { font-size: 34px; display: block; margin-bottom: 6px; }

/* ---------- Avatare / Mitglieder ---------- */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; color: #fff; font-weight: 700;
  border: 2px solid var(--karte);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.avatar.klein { width: 24px; height: 24px; flex-basis: 24px; font-size: 12px;
                border-width: 1.5px; }
.avatar.gross { width: 56px; height: 56px; flex-basis: 56px; font-size: 26px; }

/* ---------- Fußleiste ---------- */
nav.fuss {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: color-mix(in srgb, var(--karte) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--karte-rand);
  padding-bottom: var(--sicher-unten);
}
nav.fuss .innen { max-width: 640px; margin: 0 auto; display: flex; }
nav.fuss button {
  flex: 1; padding: 8px 0 9px; font-size: 10.5px; font-weight: 600;
  color: var(--tinte-blass); display: flex; flex-direction: column;
  align-items: center; gap: 2px; position: relative;
}
nav.fuss button .sym { font-size: 21px; line-height: 1; }
nav.fuss button.an { color: var(--akzent); }
nav.fuss button.an::after {
  content: ""; position: absolute; top: 0; width: 26px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--akzent);
}
nav.fuss .punkt {
  position: absolute; top: 4px; right: calc(50% - 16px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--rot); color: #fff; font-size: 10px; line-height: 16px;
}

/* ---------- Schwebeknopf ---------- */
.fab {
  position: fixed; right: 16px; bottom: calc(var(--fuss) + var(--sicher-unten) + 14px);
  width: 54px; height: 54px; border-radius: 50%; z-index: 39;
  background: var(--akzent); color: #fff; font-size: 26px;
  box-shadow: 0 4px 14px rgba(180, 80, 40, .4);
  display: flex; align-items: center; justify-content: center;
}
.fab:active { transform: scale(.94); }

/* ---------- Heute ---------- */
.terminzeile { display: flex; gap: 10px; padding: 9px 2px;
               align-items: baseline; border-bottom: 1px dashed var(--karte-rand); }
.terminzeile:last-child { border-bottom: 0; }
.terminzeile .wann { flex: 0 0 62px; font-weight: 700; font-size: 14px;
                     color: var(--akzent); }
.terminzeile .was { flex: 1; }
.terminzeile .wo { color: var(--tinte-blass); font-size: 13px; }
.geburtstag { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
.geburtstag .torte { font-size: 22px; }

.fotostreifen { display: flex; gap: 8px; overflow-x: auto; padding: 2px;
                scrollbar-width: none; }
.fotostreifen::-webkit-scrollbar { display: none; }
.fotostreifen img {
  width: 92px; height: 92px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--karte-rand); flex: 0 0 auto;
  background: var(--akzent-hell);
}
.listenkacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.listenkachel { display: flex; align-items: center; gap: 8px; padding: 11px 12px; }
.listenkachel .zahl { margin-left: auto; font-weight: 800; color: var(--akzent);
                      font-size: 18px; }
.listenkachel .zahl.null { color: var(--gruen); }

.hinweis { display: flex; gap: 9px; padding: 8px 2px; font-size: 14.5px;
           border-bottom: 1px dashed var(--karte-rand); align-items: flex-start; }
.hinweis:last-child { border-bottom: 0; }

/* ---------- Pinnwand-Zettel ---------- */
.zettelwand { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zettel {
  padding: 12px 12px 30px; border-radius: 3px; position: relative;
  color: #3A3226; font-size: 14.5px; line-height: 1.4;
  /* Schattenpaar: eng und dunkel direkt unterm Papier, weit und weich
     darunter — das ist der Unterschied zwischen Fläche und Ding. */
  box-shadow: 0 1px 1px rgba(60, 45, 30, .20),
              0 5px 14px rgba(60, 45, 30, .16);
  word-wrap: break-word; white-space: pre-wrap;
  /* Schräge kommt aus der ZETTEL-KENNUNG, nicht aus :nth-child.
     Vorher kippte beim Löschen eines Zettels die Parität — und alle
     anderen drehten sich mit. Jetzt hängt jeder stabil, wie angeklebt. */
  transform: rotate(var(--dreh, 0deg));
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
.zettel:active { transform: rotate(var(--dreh, 0deg)) scale(.985); }
.zettel::before {              /* Klebestreifen */
  content: ""; position: absolute; top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 46px; height: 16px; background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .05);
}
.zettel .wer { position: absolute; bottom: 7px; left: 12px; font-size: 11.5px;
               opacity: .65; font-weight: 600; }
.zettel .weg { position: absolute; bottom: 4px; right: 6px; font-size: 15px;
               opacity: .45; padding: 4px; }
.zettel.gelb { background: var(--zettel-gelb); }
.zettel.rosa { background: var(--zettel-rosa); }
.zettel.gruen { background: var(--zettel-gruen); }
.zettel.blau { background: var(--zettel-blau); }

/* ---------- Fotos ---------- */
.fotogitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.fotogitter img, .fotogitter .platz {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
  background: var(--akzent-hell);
}
.albumchips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 10px;
              scrollbar-width: none; }
.albumchips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 6px 13px; border-radius: 999px; font-size: 13.5px;
  font-weight: 600; background: var(--karte); border: 1.5px solid var(--karte-rand);
  color: var(--tinte-blass);
}
.chip.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Foto-Betrachter */
.betrachter {
  position: fixed; inset: 0; z-index: 60; background: rgba(12, 9, 7, .96);
  display: flex; flex-direction: column;
}
.betrachter .bild { flex: 1; display: flex; align-items: center;
                    justify-content: center; min-height: 0; }
.betrachter img { max-width: 100%; max-height: 100%; object-fit: contain; }
.betrachter .leiste { display: flex; align-items: center; gap: 10px;
                      padding: 12px 16px calc(12px + var(--sicher-unten));
                      color: #EDE6DC; }
.betrachter .leiste .meta { flex: 1; min-width: 0; }
.betrachter .leiste .meta .wer { font-weight: 700; font-size: 14px; }
.betrachter .leiste .meta .text { font-size: 13px; opacity: .8;
                                  overflow-wrap: break-word; }
.betrachter .zu { position: absolute; top: max(10px, env(safe-area-inset-top));
                  right: 10px; font-size: 30px; color: #fff; padding: 8px;
                  z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.betrachter .pfeil { position: absolute; top: 50%; transform: translateY(-50%);
                     font-size: 34px; color: rgba(255,255,255,.75); padding: 14px 10px; }
.betrachter .pfeil.links { left: 0; } .betrachter .pfeil.rechts { right: 0; }

.ladebalken { height: 4px; border-radius: 2px; background: var(--karte-rand);
              overflow: hidden; margin-top: 8px; }
.ladebalken div { height: 100%; width: 0; background: var(--akzent);
                  transition: width .3s; }

/* ---------- Kalender ---------- */
.monatskopf { display: flex; align-items: center; justify-content: space-between;
              margin-bottom: 8px; }
.monatskopf .titel { font-family: Georgia, serif; font-size: 21px; }
.monatskopf button { font-size: 22px; padding: 4px 14px; color: var(--akzent); }
.wochentage, .monat { display: grid; grid-template-columns: repeat(7, 1fr); }
.wochentage span { text-align: center; font-size: 11px; font-weight: 700;
                   color: var(--tinte-blass); padding: 4px 0; }
.tag {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; border-radius: 10px; font-size: 14.5px;
  position: relative;
}
.tag.fremd { color: var(--tinte-blass); opacity: .45; }
.tag.heute { background: var(--akzent-hell); font-weight: 800;
             color: var(--akzent); }
.tag.gewaehlt { outline: 2px solid var(--akzent); outline-offset: -2px; }
.tag .punkte { display: flex; gap: 2.5px; height: 5px; }
.tag .punkte i { width: 5px; height: 5px; border-radius: 50%;
                 background: var(--akzent); }
.tagesliste .terminzeile .wann { flex-basis: 74px; }
.terminzeile .von-wem { margin-left: auto; }
.terminzeile .aktionen { display: flex; gap: 2px; }
.terminzeile .aktionen button { padding: 4px 6px; font-size: 15px;
                                opacity: .6; }

/* ---------- Listen ---------- */
.listenkarte .kopfzeile { display: flex; align-items: center; gap: 9px;
                          margin-bottom: 4px; }
.listenkarte .kopfzeile .name { font-weight: 700; font-size: 16.5px; flex: 1; }
.listenkarte .kopfzeile .stand { font-size: 13px; color: var(--tinte-blass); }
.eintrag { display: flex; align-items: center; gap: 10px; padding: 7px 0;
           border-bottom: 1px dashed var(--karte-rand); }
.eintrag:last-child { border-bottom: 0; }
.eintrag .kasten {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px;
  border: 2px solid var(--tinte-blass); display: flex; align-items: center;
  justify-content: center; font-size: 15px; color: #fff; transition: all .15s;
}
.eintrag.fertig .kasten { background: var(--gruen); border-color: var(--gruen); }
.eintrag .text { flex: 1; transition: opacity .15s; overflow-wrap: anywhere; }
.eintrag.fertig .text { opacity: .5; text-decoration: line-through; }
.eintrag .wer-klein { font-size: 11px; color: var(--tinte-blass); }
.eintrag .weg { opacity: .4; padding: 4px 6px; font-size: 15px; }
.neuzeile { display: flex; gap: 8px; margin-top: 9px; }
.neuzeile input { flex: 1; }
.neuzeile button { background: var(--akzent); color: #fff; border-radius: 12px;
                   padding: 0 16px; font-size: 20px; font-weight: 700; }

/* ---------- Sheets (Formulare von unten) ---------- */
.schleier { position: fixed; inset: 0; background: rgba(20, 14, 10, .45);
            z-index: 50; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  background: var(--karte); border-radius: 22px 22px 0 0;
  padding: 10px 18px calc(20px + var(--sicher-unten));
  max-width: 640px; margin: 0 auto; max-height: 88dvh; overflow-y: auto;
  animation: hoch .22s ease-out;
}
@keyframes hoch { from { transform: translateY(40px); opacity: .6; }
                  to { transform: none; opacity: 1; } }
.sheet .griff { width: 40px; height: 4px; border-radius: 2px;
                background: var(--karte-rand); margin: 2px auto 12px; }
.sheet h3 { font-family: Georgia, serif; font-size: 20px; font-weight: 400;
            margin-bottom: 14px; }
.feld { margin-bottom: 12px; }
.feld label { display: block; font-size: 12px; font-weight: 700;
              color: var(--tinte-blass); margin: 0 2px 5px;
              text-transform: uppercase; letter-spacing: .08em; }
.zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.schalter { display: flex; align-items: center; justify-content: space-between;
            padding: 10px 2px; }
.schalter .knubbel { width: 46px; height: 28px; border-radius: 14px;
  background: var(--karte-rand); position: relative; transition: background .15s; }
.schalter .knubbel::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.schalter.an .knubbel { background: var(--gruen); }
.schalter.an .knubbel::after { left: 21px; }
.personenwahl { display: flex; gap: 8px; flex-wrap: wrap; }
.personenwahl .person { display: flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 14px;
  font-weight: 600; border: 1.5px solid var(--karte-rand); }
.personenwahl .person.an { border-color: var(--akzent);
  background: var(--akzent-hell); }
.hauptknopf { width: 100%; background: var(--akzent); color: #fff;
  border-radius: 14px; padding: 14px; font-size: 16.5px; font-weight: 700;
  margin-top: 6px; }
.hauptknopf:disabled { opacity: .5; }
.nebenknopf { width: 100%; color: var(--rot); padding: 12px; font-weight: 600;
              margin-top: 4px; }
.farbwahl { display: flex; gap: 10px; }
.farbwahl button { width: 40px; height: 40px; border-radius: 10px;
                   border: 2.5px solid transparent; }
.farbwahl button.an { border-color: var(--tinte); }

/* ---------- Anmeldung ---------- */
.anmeldung { min-height: 100dvh; display: flex; flex-direction: column;
             justify-content: center; padding: 30px 26px; max-width: 420px;
             margin: 0 auto; }
.anmeldung .logo { width: 84px; height: 84px; border-radius: 22px;
  background: var(--akzent); color: #FFF6EC; display: flex; align-items: center;
  justify-content: center; font-family: Georgia, serif; font-size: 52px;
  font-style: italic; margin: 0 auto 18px;
  box-shadow: 0 8px 24px rgba(180, 80, 40, .35); }
.anmeldung h1 { font-family: Georgia, serif; text-align: center; font-size: 34px;
                font-weight: 400; }
.anmeldung .unter { text-align: center; color: var(--tinte-blass);
                    margin: 4px 0 26px; }
.anmeldung .fehler { color: var(--rot); text-align: center; margin-top: 12px;
                     font-weight: 600; min-height: 22px; }

/* ---------- Mehr / Familie / Betrieb ---------- */
.mehrzeile { display: flex; align-items: center; gap: 12px; padding: 13px 2px;
             border-bottom: 1px dashed var(--karte-rand); width: 100%;
             text-align: left; font-size: 15.5px; }
.mehrzeile:last-child { border-bottom: 0; }
.mehrzeile .sym { font-size: 20px; width: 28px; text-align: center; }
.mehrzeile .pfeil { margin-left: auto; color: var(--tinte-blass); }
.familienzeile { display: flex; align-items: center; gap: 11px; padding: 9px 2px;
                 border-bottom: 1px dashed var(--karte-rand); }
.familienzeile:last-child { border-bottom: 0; }
.familienzeile .name { font-weight: 700; }
.familienzeile .rolle { font-size: 12px; color: var(--tinte-blass); }
.familienzeile .aktionen { margin-left: auto; display: flex; gap: 4px; }
.familienzeile .aktionen button { padding: 5px 8px; font-size: 14px;
  border-radius: 8px; border: 1px solid var(--karte-rand); font-weight: 600;
  color: var(--tinte-blass); }
.gesperrt-hinweis { color: var(--rot); font-weight: 700; font-size: 12px; }
.betriebszeile { display: flex; justify-content: space-between; padding: 8px 2px;
                 font-size: 14.5px; border-bottom: 1px dashed var(--karte-rand); }
.betriebszeile:last-child { border-bottom: 0; }
.betriebszeile .wert { font-weight: 700; }
.wert.gut { color: var(--gruen); } .wert.warn { color: var(--gelb); }
.wert.rot { color: var(--rot); }

.hinweisbanner { background: var(--akzent-hell); border: 1px solid var(--akzent);
  color: var(--tinte); border-radius: 12px; padding: 10px 12px; font-size: 14px;
  margin-bottom: 10px; }

/* PIN-Anzeige nach Anlegen/Zurücksetzen */
.pin-gross { font-size: 40px; font-weight: 800; letter-spacing: .12em;
             text-align: center; color: var(--akzent); margin: 14px 0; }

.giftig { color: var(--rot); }
.klein { font-size: 12.5px; color: var(--tinte-blass); }
.mittig { text-align: center; }
[hidden] { display: none !important; }

/* Zahlen dürfen beim Ticken nicht springen */
.wann, .zahl, .stand, .pin-gross, .jb-jahr { font-variant-numeric: tabular-nums; }

/* ---------- Der versteckte Haptik-Schalter ----------
   iOS kennt navigator.vibrate nicht. Das Umlegen eines echten
   switch-Kästchens löst ab iOS 17.4 die Systemhaptik aus — deshalb
   sitzt es unsichtbar, aber NICHT display:none (dann bliebe es stumm). */
.verborgen {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; appearance: none; border: 0;
}

/* ---------- Fußleiste: gezeichnete Zeichen statt gemischter Emoji ------- */
nav.fuss button .sym { font-size: 21px; line-height: 1; }
nav.fuss svg {
  width: 23px; height: 23px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
nav.fuss svg .fuellung { fill: currentColor; opacity: 0; transition: opacity .2s; }
nav.fuss button.an svg .fuellung { opacity: .16; }

/* ---------- Ansichten blättern ---------- */
::view-transition-old(root) { animation: vt-raus .15s ease-in both; }
::view-transition-new(root) { animation: vt-rein .2s ease-out both; }
@keyframes vt-raus { to { opacity: 0; } }
@keyframes vt-rein {
  from { opacity: 0; transform: translateX(calc(var(--richtung, 1) * 14px)); }
}

/* ---------- Fehler flüstern, statt zu schreien ---------- */
html.offline body { filter: saturate(.94); }
#toast {
  border-radius: 3px 3px 3px 14px;      /* Eselsohr statt Pille */
}

/* ---------- Das Fenster (Foto von damals) ---------- */
.fenster {
  position: relative; rotate: -1.5deg; margin: 4px 6px 14px;
  padding: 9px 9px 30px; background: var(--karte);
  box-shadow: 0 2px 3px rgba(60, 45, 30, .12),
              0 14px 28px -12px rgba(60, 45, 30, .38);
}
.fenster img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.fenster .satz {
  font-family: Georgia, serif; font-size: 14px; color: var(--tinte-blass);
  margin-top: 8px; position: relative; z-index: 1;
}
.fenster::after {                        /* Jahreszahl blass dahinter */
  content: attr(data-jahr); position: absolute; right: 12px; bottom: -2px;
  font: 400 44px Georgia, serif; color: var(--akzent); opacity: .16;
  letter-spacing: -.03em; pointer-events: none;
}
.fenster .ecke {                         /* Fotoecken, reine CSS-Dreiecke */
  position: absolute; width: 0; height: 0;
  border: 11px solid transparent;
}
.fenster .ecke.lo { top: 0; left: 0; border-top-color: rgba(0,0,0,.16);
                    border-left-color: rgba(0,0,0,.16); }
.fenster .ecke.ru { bottom: 30px; right: 0; border-bottom-color: rgba(0,0,0,.16);
                    border-right-color: rgba(0,0,0,.16); }

/* ---------- Depesche ---------- */
.depesche {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--akzent-hell) 70%, var(--karte)), var(--karte));
  border-left: 3px solid var(--akzent);
  padding: 11px 13px; border-radius: 0 12px 12px 0; margin-bottom: 10px;
  font-size: 14.5px; line-height: 1.45;
}
.depesche .kopf { font-size: 11px; font-weight: 700; letter-spacing: .12em;
                  text-transform: uppercase; color: var(--akzent);
                  margin-bottom: 3px; }

/* ---------- Jahresbild ---------- */
.jahresbild { padding: 12px 12px 14px; }
.jahresbild canvas {
  width: 100%; height: 132px; display: block; border-radius: 8px;
  background: var(--papier);
}
.jb-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.jb-jahr { font-family: Georgia, serif; font-size: 26px; }
.jb-blaettern { margin-left: auto; display: flex; gap: 2px; }
.jb-blaettern button { padding: 3px 11px; font-size: 19px; color: var(--akzent); }
.jb-monate { display: flex; margin-top: 5px; }
.jb-monate span { flex: 1; font-size: 9.5px; color: var(--tinte-blass);
                  text-align: center; }
.jb-fuss { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.jb-fuss .klein { flex: 1; }

/* ---------- Der Sonnenfleck: Licht, das übers Blatt wandert ----------
   Nicht Deko — er steht dort, wo die Sonne heute wirklich steht. */
.sonnenfleck {
  position: fixed; inset: -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 30% at 50% 50%,
              rgba(255, 208, 140, var(--fleck-kraft, .16)), transparent 68%);
  transform: translate(var(--fleck-x, 0), var(--fleck-y, 0));
  transition: transform 60s linear, opacity 3s linear;
  mix-blend-mode: soft-light;
}
@media (prefers-color-scheme: dark) {
  .sonnenfleck { mix-blend-mode: screen; opacity: .5; }
}

/* ---------- Kopfzeile: wer ist im Haus ---------- */
.bewohner { display: flex; gap: 7px; align-items: center; }
.monogramm {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff; position: relative;
  filter: saturate(.25) opacity(.42);        /* weg = blass und still */
  transition: filter .6s ease;
}
.monogramm.heute { filter: saturate(.7) opacity(.78); }
.monogramm.jetzt {
  filter: none;
  animation: atmen 5.5s ease-in-out infinite alternate;
}
.monogramm.jetzt::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--gruen); opacity: .55;
}
@keyframes atmen { to { transform: scale(1.055); } }
@media (prefers-reduced-motion: reduce) { .monogramm.jetzt { animation: none; } }

/* ---------- Der Wochenbogen ---------- */
.wochenbogen { position: relative; height: 26px; margin: 2px 4px 10px; }
.wochenbogen svg { width: 100%; height: 26px; display: block; overflow: visible; }
.wochenbogen .perle { transition: transform 60s linear; }
.wochenzeile { font-size: 11.5px; color: var(--tinte-blass);
               margin: -6px 6px 12px; display: flex; gap: 8px; }
.wochenzeile .mond { font-size: 13px; }

/* ---------- Die Frage des Tages ---------- */
.runde {
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--akzent-hell) 82%, var(--karte)), var(--karte));
  border-radius: 18px; padding: 16px 15px 14px; margin-bottom: 12px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
              0 6px 20px -8px rgba(120, 60, 30, .28);
}
.runde .marke { font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 7px; }
.runde .frage { font-family: Georgia, serif; font-size: 21px; line-height: 1.25;
  text-wrap: balance; margin-bottom: 12px; }
.runde textarea { background: var(--karte); border-radius: 12px; }
.runde .warten { display: flex; align-items: center; gap: 8px; margin-top: 10px;
                 font-size: 13.5px; color: var(--tinte-blass); }
.runde .warten .punkte { display: flex; gap: 4px; }
.runde .warten .punkte i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--akzent);
  opacity: .28; animation: pochen 1.6s ease-in-out infinite;
}
.runde .warten .punkte i:nth-child(2) { animation-delay: .2s; }
.runde .warten .punkte i:nth-child(3) { animation-delay: .4s; }
@keyframes pochen { 50% { opacity: .8; transform: translateY(-2px); } }
.rundenantwort { display: flex; gap: 10px; padding: 9px 0;
                 border-bottom: 1px dashed var(--karte-rand); }
.rundenantwort:last-child { border-bottom: 0; }
.rundenantwort .wortlaut { flex: 1; font-size: 15px; line-height: 1.4; }
.rundenantwort .wer { font-size: 11.5px; color: var(--tinte-blass);
                      font-weight: 700; margin-bottom: 1px; }
.aufgedeckt { animation: aufdecken .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes aufdecken {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
}

/* ---------- Reaktionen ---------- */
.echo-leiste { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
               margin-top: 8px; }
.echo-knopf {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px; font-size: 14px;
  border: 1.5px solid var(--karte-rand); background: var(--karte);
  transition: transform .12s, border-color .15s, background .15s;
}
.echo-knopf .zahl { font-size: 11.5px; font-weight: 700;
                    color: var(--tinte-blass); }
.echo-knopf.meins { border-color: var(--akzent); background: var(--akzent-hell); }
.echo-knopf.meins .zahl { color: var(--akzent); }
.echo-knopf:active { transform: scale(.9); }
.echo-knopf.gerade { animation: echo-puff .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes echo-puff { 40% { transform: scale(1.32) rotate(-7deg); } }
.echo-marke {                          /* kleiner Zähler auf dem Foto */
  position: absolute; right: 4px; bottom: 4px; font-size: 11px;
  background: rgba(20, 14, 10, .55); color: #fff; border-radius: 999px;
  padding: 1px 6px; backdrop-filter: blur(3px); pointer-events: none;
}
.fotogitter .kachel { position: relative; }

/* ---------- Der Nachtrag ---------- */
.nachtrag { font-size: 13px; color: var(--tinte-blass); margin: 0 4px 10px;
            display: flex; gap: 7px; align-items: flex-start; }
.nachtrag .strich { flex: 0 0 3px; align-self: stretch; border-radius: 2px;
                    background: var(--akzent); opacity: .5; }
.neu-gekommen { animation: hereingeschrieben .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hereingeschrieben {
  from { clip-path: inset(0 100% 0 0); opacity: .3; }
  to { clip-path: inset(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .neu-gekommen, .aufgedeckt { animation: none; }
}

/* ---------- Gebrauchsspuren: euer Exemplar ---------- */
.knick {
  position: fixed; left: 0; right: 0; top: 42%; height: 14px; z-index: 0;
  pointer-events: none; opacity: var(--knick-kraft, 0);
  background: linear-gradient(180deg, transparent,
    rgba(120, 100, 78, .13) 45%, rgba(255, 255, 255, .30) 52%, transparent);
}
.kaffeefleck {
  position: fixed; z-index: 0; pointer-events: none;
  width: 92px; height: 92px; right: 12px; bottom: 96px;
  opacity: var(--kaffee-kraft, 0);
  background:
    radial-gradient(circle, transparent 60%, rgba(140, 96, 48, .17) 63%,
                    rgba(140, 96, 48, .09) 72%, transparent 78%);
  transform: rotate(-12deg) scale(1.05);
}

/* ---------- Die Münze ---------- */
.muenze-buehne { display: flex; flex-direction: column; align-items: center;
                 padding: 6px 0 2px; }
.muenze-buehne canvas { width: 132px; height: 132px; }
.muenze-ergebnis { font-family: Georgia, serif; font-size: 23px;
                   min-height: 30px; text-align: center; margin-top: 2px; }
.muenze-chancen { display: flex; gap: 6px; flex-wrap: wrap;
                  justify-content: center; margin-top: 8px; }
.muenze-chancen span { font-size: 11.5px; color: var(--tinte-blass); }
.gestaendnis { margin-top: 10px; padding: 9px 11px; border-radius: 10px;
               background: var(--akzent-hell); font-size: 13.5px;
               font-style: italic; }

/* ==================== Das Lagerfeuer — das Herz ==================== */
.feuerplatz { margin: 8px 2px 12px; }
.feuer-buehne {
  position: relative; height: 210px; border-radius: 18px; overflow: hidden;
  cursor: pointer; isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(255,150,60,.18), transparent 60%),
    linear-gradient(180deg, #12100e 0%, #1d1712 55%, #241a12 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
              0 6px 20px -8px rgba(60,45,30,.4);
}
@media (prefers-color-scheme: light) {
  .feuer-buehne {
    background:
      radial-gradient(120% 90% at 50% 120%, rgba(255,160,70,.28), transparent 58%),
      linear-gradient(180deg, #2a2320 0%, #3a2c22 60%, #4a3526 100%);
  }
}
.feuer-buehne:active { transform: scale(.995); }
.feuer-buehne canvas, .feuer-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.feuer-svg { padding: 8px 0; }
.feuer-himmel {
  position: absolute; top: 0; left: 0; right: 0; height: 46%;
  pointer-events: none; opacity: .9;
}
.feuer-text {
  margin: 8px 4px 0; font-size: 14.5px; color: var(--tinte-blass);
  text-align: center; text-wrap: balance;
}
.feuer-streak {
  color: var(--akzent); font-weight: 700; white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .feuer-text { color: #b8a894; }
}

/* ==================== Der Faden — der Puls ==================== */
html.mit-faden #app { padding-top: calc(46px + env(safe-area-inset-top, 0px)); }
html.mit-faden nav.fuss { /* unberührt */ }
.faden {
  position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  height: calc(46px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--papier) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--karte-rand);
}
.faden svg { width: 100%; height: 46px; display: block; }
.faden-knoten { cursor: pointer; }
.faden-knoten .knoten-kern {
  transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.2));
}
.faden-knoten.meiner .knoten-kern {
  animation: knotenAtmen 3.4s ease-in-out infinite;
}
@keyframes knotenAtmen {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
}
@media (prefers-reduced-motion: reduce) {
  .faden-knoten.meiner .knoten-kern { animation: none; }
}