/* ------------------------------------------------------------------
   Florence & Simon — Gäste-App
   „Eine Karte, die weiss, wie spät es ist."

   Der Bildschirm ist das Papier (Blush), Inhalte liegen als weisse
   Blätter darauf, Gold ist ausschliesslich Haarlinie und Botanik.
   Stilkanon: design/karten-stil.md

   Bedienung: grosse Schrift, Wörter statt Symbole, keine Gesten,
   Tippflächen ab 48 px, Kontrast überall mindestens 4.5:1.
   ------------------------------------------------------------------ */

@font-face { font-family: "Brittany"; src: url("fonts/BrittanySignatureScript.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DidotTitel"; src: url("fonts/DidotTitle.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Didot"; src: url("fonts/Didot.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Caslon"; src: url("fonts/ACaslonPro-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: light;

  /* Flächen */
  --blush: #F7E9E8;
  --blush-tief: #F0DBD9;
  --papier: #FFFFFF;

  /* Schrift — nur Töne, die auf Blush UND Weiss ueber 4.5:1 liegen */
  --tinte: #4A3936;        /*  9.2 auf Blush · 10.9 auf Weiss */
  --mauve-tief: #6F534E;   /*  5.9 auf Blush ·  7.0 auf Weiss */
  --mauve-lese: #7A5A55;   /*  5.2 auf Blush ·  6.1 auf Weiss */

  /* Zierde — niemals fuer Lesetext */
  --gold: #C4A365;
  --linie: #C9AEA9;
  --fokus: #6B4A20;

  /* Tiefe in drei Lagen: Kontakt, Streuung, Raum — so liegt Papier auf Papier,
     statt wie eine Web-Karte zu schweben. */
  --papier-schatten:
      0 1px 1px rgba(74, 57, 54, .06),
      0 6px 14px -10px rgba(74, 57, 54, .28),
      0 24px 48px -32px rgba(74, 57, 54, .45);
  --papier-schatten-hoch:
      0 2px 2px rgba(74, 57, 54, .07),
      0 12px 24px -14px rgba(74, 57, 54, .30),
      0 40px 72px -44px rgba(74, 57, 54, .50);
  --praegung: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .5);
  /* Radien in drei Stufen, damit nichts zufällig wirkt:
     Blätter und Knöpfe gleich, kleine Flächen enger, Marken ganz rund. */
  --rund: 18px;
  --rund-klein: 12px;
  --rund-voll: 999px;
  --nav-hoehe: 76px;

  --skript: "Brittany", "Snell Roundhand", cursive;
  --titel: "DidotTitel", "Didot", "Bodoni 72", Georgia, serif;
  --zahl: "Didot", "Bodoni 72", Georgia, serif;
  --lese: "Caslon", Georgia, "Times New Roman", serif;

  --weich: cubic-bezier(.22, 1, .36, 1);
  --stift: cubic-bezier(.32, .72, 0, 1);
}

/* Verlaufsstufen der Ringe: ausgewertet aus dem Lichtmodell der Drucksachen.
   Bei 75 % am dunkelsten, bei 100 % wieder heller — das Gegenlicht am Rundprofil. */
.g0{stop-color:#F6E7C4} .g1{stop-color:#DFCDA8} .g2{stop-color:#CAB58D} .g3{stop-color:#A58B5F}
.g4{stop-color:#896C3D} .g5{stop-color:#94784A} .g6{stop-color:#A48B5F}
.p0{stop-color:#FFFFFF} .p1{stop-color:#EBECED} .p2{stop-color:#D8DADD} .p3{stop-color:#B7BBC0}
.p4{stop-color:#9FA4AA} .p5{stop-color:#A8ADB3} .p6{stop-color:#B7BBC0}

* { box-sizing: border-box; }

html {
  font-size: 118.75%;              /* 19 px bei Standardeinstellung, waechst mit */
  -webkit-text-size-adjust: auto;  /* Dynamic Type nicht abwuergen */
  scrollbar-gutter: stable;        /* sonst springt die Leiste, wenn eine Seite laenger wird */
}
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }   /* koppelt an die iPhone-Schriftgroesse */
}

body {
  margin: 0;
  background: var(--blush);
  color: var(--tinte);
  font-family: var(--lese);
  font-size: 1.1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

/* Papierkorn: erzeugt im Browser, kein Bild. Macht die Fläche stofflich
   statt digital-glatt — dieselbe Wirkung wie Naturpapier im Druck. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23k)' opacity='.14'/></svg>");
}

/* ------------------------------------------------------------ Zierschicht
   Blumenrand, Rahmen und Blütenflug liegen hinter allem und sind für
   Bedienung und Vorlesefunktion nicht vorhanden. */
.zier { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.zier-rahmen {
  position: absolute; inset: 10px;
  border: 1px solid var(--gold); opacity: .38;
  border-radius: calc(var(--rund) + 6px);
}
.zier-ecke { position: absolute; width: 108px; height: 98px; opacity: .3; }
.zier-ecke-lo { top: 4px; left: 2px; transform: rotate(180deg); }
.zier-ecke-ro { top: 4px; right: 2px; transform: rotate(180deg) scaleX(-1); }
.zier-ecke-lu { bottom: 4px; left: 2px; transform: scaleX(-1); }
.zier-ecke-ru { bottom: 4px; right: 2px; }
.zier-bluete { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.zier-bluete.faellt { opacity: .75; }

button, input, label, a { font: inherit; }
[hidden] { display: none !important; }
.fs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sprunglink { position: absolute; left: -9999px; }
.sprunglink:focus {
  position: fixed; left: 12px; top: 12px; z-index: 99;
  background: var(--papier); color: var(--tinte);
  padding: 14px 18px; border-radius: var(--rund); outline: 3px solid var(--fokus);
}

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: var(--rund-klein); }

/* ---------------------------------------------------------------- Zeichen
   Eine Familie: 1.5 Strich, runde Enden, nie allein — immer neben dem Wort. */
.ikon {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -4px;
}

/* ---------------------------------------------------------- Begrüssung */
.intro {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  background: var(--blush);
  transition: opacity .5s ease;
}
.intro.weg { opacity: 0; pointer-events: none; }
.fs-ringe { width: min(62vw, 260px); aspect-ratio: 62 / 35; }
.fs-ring {
  stroke-linecap: butt;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: fs-zeichnen 900ms var(--stift) forwards;
}
.fs-ring-g { animation-delay: 260ms; }
.fs-ring-x { opacity: 0; animation: fs-auf 200ms linear 1160ms forwards; }
.intro-namen {
  margin: 0;
  font-family: var(--skript);
  font-size: clamp(2.2rem, 11vw, 3.2rem);
  line-height: 1.3;
  color: var(--mauve-tief);
  opacity: 0; transform: translateY(8px);
  animation: fs-namen 600ms var(--weich) 1250ms forwards;
}
@keyframes fs-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes fs-auf { to { opacity: 1; } }
@keyframes fs-namen { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Tor */
.tor { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; padding: 24px; background: var(--blush); }
.tor-innen { max-width: 24rem; text-align: center; }
.skript-gross { margin: 0; font-family: var(--skript); font-size: 2.6rem; line-height: 1.3; color: var(--mauve-tief); }
.tor-text { margin: 8px 0 28px; color: var(--mauve-lese); }
.feld-label { display: block; margin-bottom: 8px; font-size: 1rem; color: var(--mauve-tief); }
.feld {
  width: 100%; padding: 16px 20px;
  font-size: 1.3rem; text-align: center;
  color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--rund);
}
.fehler { margin: 12px 0 0; color: var(--tinte); font-weight: 600; }

/* ------------------------------------------------------------ Gerüst */
.kopf {
  position: sticky; top: 0; z-index: 2;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  text-align: center;
  background: var(--blush);
}
.kopf::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 56%; height: 1px; background: var(--gold); opacity: .55;
}
/* Ein einziger Lichtstrich über die Goldlinie, wenn die App aufgeht. */
.kopf-glanz {
  position: absolute; left: 22%; right: 22%; bottom: 0; height: 1px; overflow: hidden;
}
.kopf-glanz::after {
  content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 1px;
  background: linear-gradient(90deg, transparent, #FFF6DF, transparent);
  animation: fs-glanz 2.6s ease-in-out 2.6s 2;
}
@keyframes fs-glanz { to { left: 110%; } }
.kopf-namen { margin: 0; font-family: var(--skript); font-size: 1.7rem; line-height: 1.3; color: var(--mauve-tief); }

/* Die Leiste schwebt 12 px über dem Rand — der Abstand darunter rechnet das mit,
   sonst verschwindet der letzte Knopf jeder Seite dahinter. */
main { padding: 24px 16px calc(var(--nav-hoehe) + 12px + env(safe-area-inset-bottom) + 36px); perspective: 1600px; }
.seite { position: relative; max-width: 34rem; margin: 0 auto; transform-origin: left center; }
.seite > * { position: relative; z-index: 1; }

/* Blattwende: die Seite dreht sich weg wie ein umgeschlagenes Blatt, die neue
   kommt von der anderen Seite nach. Der Schattenkeil wandert mit. */
.seite.wendet-raus { animation: fs-wende-raus 200ms cubic-bezier(.4, 0, 1, 1) forwards; }
.seite.wendet-rein { animation: fs-wende-rein 380ms var(--weich) both; }
.seite.wendet-rein::before {
  content: ""; position: absolute; inset: -8px -8px -8px -8px; z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(74, 57, 54, .22) 0%, rgba(74, 57, 54, .06) 26%, transparent 55%);
  animation: fs-wende-schatten 380ms var(--weich) both;
}
@keyframes fs-wende-raus {
  to { opacity: 0; transform: rotateY(-13deg) translateX(-3%) scale(.985); }
}
@keyframes fs-wende-rein {
  from { opacity: 0; transform: rotateY(15deg) translateX(5%) scale(.975); }
  to   { opacity: 1; transform: none; }
}
@keyframes fs-wende-schatten { from { opacity: 1; } to { opacity: 0; } }

.seiten-titel {
  margin: 0 0 8px;
  font-family: var(--titel); font-weight: 400;
  font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.2;
  color: var(--tinte); text-align: center;
}
.seiten-titel:focus { outline: none; }
.tagesmarke { margin: 0 0 16px; text-align: center; color: var(--mauve-lese); font-size: 1rem; }
.text { margin: 0 0 16px; }
.hinweis { margin: 12px 0 0; color: var(--mauve-lese); }
.hinweis-klein { color: var(--mauve-lese); font-size: .95rem; }
.stapel { display: flex; flex-direction: column; gap: 12px; }

/* Motive */
.fs-zweig { display: block; width: 132px; height: 28px; margin: 0 auto 24px; }
.fs-zweig-schluss { width: 108px; margin: 32px auto 0; opacity: .75; }
.fs-wasserzeichen {
  position: absolute; right: -64px; bottom: -28px; z-index: 0;
  width: 300px; aspect-ratio: 62 / 35; opacity: .07; pointer-events: none;
}
.fs-ecke { display: block; width: 68px; height: 62px; margin: 8px auto 0; opacity: .8; }
.ort-signatur { margin: 28px 0 0; text-align: center; font-family: var(--skript); font-size: 2rem; line-height: 1.3; color: var(--mauve-tief); }

/* ------------------------------------------------------------- Blätter */
.blatt {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 30%),
    var(--papier);
  border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 26px 24px; box-shadow: var(--papier-schatten), var(--praegung);
}
/* Goldene Innenlinie wie der Rahmen auf der gedruckten Karte —
   der Radius folgt der Aussenkante, sonst schneidet sie in den Ecken. */
.blatt::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid var(--gold); opacity: .22;
  border-radius: calc(var(--rund) - 8px);
}
.zwischentitel {
  display: flex; align-items: center; gap: 10px;
  margin: 32px 0 12px; padding-top: 20px;
  border-top: 1px solid var(--linie);
  font-family: var(--titel); font-weight: 400; font-size: 1.05rem; color: var(--tinte);
}
.zwischentitel .ikon { width: 21px; height: 21px; stroke: var(--gold); vertical-align: 0; }
.blatt > .zwischentitel:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Bühnenbild: der Kranz als Medaillon hinter der Uhrzeit. Position wird in JS
   auf die Zahl ausgerichtet, damit die Zeit wirklich in der Mitte steht. */
.kranz {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(90vw, 420px); aspect-ratio: 1;
  left: var(--kranz-x, 50%); top: var(--kranz-y, 60px);
  transform: translate(-50%, -50%) rotate(var(--kranz-dreh, -4deg));
  opacity: 0;
  animation: fs-buehne 1400ms var(--weich) 240ms forwards;
}
/* Lichtkreis darunter: hebt das Medaillon vom Papier ab, ohne eine Kante zu ziehen */
.kranz::before {
  content: ""; position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .7) 38%,
    rgba(240, 219, 217, .45) 62%, rgba(240, 219, 217, 0) 78%);
}
/* Haarfeiner Goldkreis als Fassung */
.kranz::after {
  content: ""; position: absolute; inset: 17%;
  border: 1px solid var(--gold); border-radius: 50%; opacity: .30;
}
.kranz svg { position: relative; width: 100%; height: 100%; }
@keyframes fs-buehne {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(.9); }
  to   { opacity: .34; transform: translate(-50%, -50%) rotate(var(--kranz-dreh, -4deg)) scale(1); }
}

/* Was gerade läuft — der wichtigste Baustein */
.jetzt-blatt {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%),
    var(--papier);
  border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 24px 24px 24px 28px;
  box-shadow: var(--papier-schatten-hoch), var(--praegung);
  animation: fs-schweben 7s ease-in-out infinite;
}
.jetzt-blatt.nachher { box-shadow: var(--papier-schatten), var(--praegung); animation-delay: -3.5s; }

/* Schweben: 3 px, sieben Sekunden — sichtbar nur als Ruhe, nicht als Bewegung. */
@keyframes fs-schweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.fs-ader {
  position: absolute; left: 10px; top: 16px; bottom: 16px; width: 3px;
  background: var(--linie); border-radius: var(--rund-voll); overflow: hidden;
}
.fs-ader::before {
  content: ""; position: absolute; left: 0; top: 0; width: 3px;
  height: var(--fortschritt, 0%);
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 70%, rgba(196, 163, 101, .25) 100%);
  transition: height 600ms cubic-bezier(.4, 0, .2, 1);
}
.jetzt-marke { margin: 0 0 12px; font-size: 1rem; color: var(--mauve-lese); }
.jetzt-zeit { margin: 0; font-family: var(--zahl); font-size: 2.7rem; line-height: 1; color: var(--mauve-tief); font-variant-numeric: tabular-nums; }
.jetzt-was { margin: 8px 0 0; font-size: 1.55rem; line-height: 1.25; color: var(--tinte); }
.jetzt-hinweis { margin: 12px 0 0; color: var(--mauve-lese); }
.jetzt-blatt.nachher .jetzt-zeit { font-size: 1.9rem; }
.jetzt-blatt.nachher .jetzt-was { font-size: 1.25rem; }

/* ------------------------------------------------------------- Knöpfe */
.knopf {
  position: relative; overflow: hidden;
  display: block; width: 100%; min-height: 60px; margin-top: 20px;
  padding: 16px 20px;
  font-family: var(--lese); font-weight: 600; font-size: 1.1rem;
  text-align: center; text-decoration: none;
  color: var(--papier);
  /* Verlauf, aber nur zwischen Tönen, die weisse Schrift tragen:
     5.78 : 1 oben, 8.18 : 1 unten. */
  background: linear-gradient(180deg, #7E5E59 0%, var(--mauve-tief) 55%, #634944 100%);
  background-color: var(--mauve-tief);
  border: 0; border-radius: var(--rund);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 8px 18px -12px rgba(74, 57, 54, .7);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 160ms ease, filter 160ms ease;
}
/* Zeichen und Wort mittig als Paar */
.knopf { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.knopf .ikon { width: 23px; height: 23px; vertical-align: 0; }
.knopf .knopf-zusatz { flex-basis: 100%; }
/* Goldkante am oberen Rand — die Prägung der Karten, übersetzt auf den Knopf */
.knopf::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .8;
}
.knopf:active { transform: translateY(1px) scale(.99); filter: brightness(.96); }
.knopf-gross { min-height: 68px; font-size: 1.2rem; }
.knopf-still { color: var(--mauve-tief); background: transparent; border: 2px solid var(--mauve-tief); box-shadow: none; }
.knopf-zusatz { display: block; margin-top: 6px; font-weight: 400; font-size: .92rem; opacity: .95; }
.knopf-notruf { background: var(--tinte); }

.knopf-ruf {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  margin-top: 0; text-align: left; font-weight: 400;
  color: var(--tinte); background: var(--blush);
  border: 1px solid var(--linie); box-shadow: none;
  border-radius: var(--rund);
}
.knopf-ruf > span:first-of-type { flex: 1; }
.knopf-ruf .ikon { stroke: var(--mauve-tief); }
.knopf-ruf small { display: block; font-size: .92rem; color: var(--mauve-lese); }
.knopf-ruf .ruf { font-weight: 600; color: var(--mauve-tief); white-space: nowrap; }
.karte-hinweis {
  display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 16px 20px;
  background: var(--blush); border: 1px dashed var(--linie);
  border-radius: var(--rund); color: var(--mauve-lese);
}
.karte-hinweis .ikon { stroke: var(--mauve-lese); }

/* --------------------------------------------------------- Tagesleiste */
.tage {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-bottom: 32px; border-bottom: 1px solid var(--linie);
}
.tag {
  position: relative; min-height: 64px; padding: 8px 0 12px;
  background: none; border: 0; cursor: pointer; color: var(--mauve-lese); line-height: 1.2;
}
.tag b { display: block; font-weight: 400; font-size: .95rem; }
.tag i { font-style: normal; font-family: var(--zahl); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tag.ist-aktiv { color: var(--tinte); }
.tag.ist-aktiv::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 26px; height: 2px; background: var(--gold);
  box-shadow: 0 0 8px rgba(196, 163, 101, .8);
  animation: fs-marke 320ms var(--weich) both;
}
@keyframes fs-marke { from { width: 6px; opacity: 0; } }

.tag-titel { margin: 0; text-align: center; font-family: var(--skript); font-size: 2.1rem; line-height: 1.3; color: var(--mauve-tief); }
.tag-datum { margin: 6px 0 24px; text-align: center; color: var(--mauve-lese); font-size: 1rem; }

/* -------------------------------------------------------- Programmzeile */
.punkt { display: grid; grid-template-columns: minmax(4.4rem, max-content) 1fr; column-gap: 20px; }
.punkt + .punkt { margin-top: 28px; }
.p-zeit { font-family: var(--zahl); font-size: 1.35rem; line-height: 1.25; color: var(--mauve-tief); font-variant-numeric: tabular-nums; }
.p-was { font-size: 1.2rem; line-height: 1.3; }
.p-hinw, .p-offen { grid-column: 2; margin-top: 4px; color: var(--mauve-lese); font-size: .98rem; }
.p-offen { color: var(--mauve-tief); }
.punkt.wichtig .p-was { font-weight: 600; }
.punkt.wichtig .p-was::before { content: "Wichtig — "; color: var(--mauve-tief); }
.punkt.ist-jetzt {
  margin: 0 -12px; padding: 16px 20px 16px 17px;
  background: var(--blush); border-left: 3px solid var(--gold);
  border-radius: var(--rund-klein);
}
.punkt.ist-jetzt + .punkt { margin-top: 28px; }

/* --------------------------------------------------------------- Fotos */
.fotokarton {
  padding: 24px; background: var(--blush); border-radius: var(--rund);
  outline: 1px dashed var(--linie); outline-offset: -8px;
}
.fotokarton { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.feld-label-mitte { margin-top: 18px; text-align: center; }
.feld-schmal { font-size: 1.1rem; padding: 12px 16px; }
.fotokarton .knopf { margin-top: 0; }
.foto-zaehler { margin: 24px 0 12px; color: var(--mauve-lese); }
.abzuege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Abzüge, nicht Listenzeilen: weisser Rand, minimale Schieflage, echter Schatten */
.abzug {
  position: relative; padding: 6px 6px 4px; background: var(--papier);
  border-radius: var(--rund-klein);
  box-shadow: var(--papier-schatten);
  transform: rotate(-.8deg);
  animation: fs-abzug 420ms var(--weich) both;
}
.abzug img { border-radius: calc(var(--rund-klein) - 6px); }
.abzug-weg { border-radius: var(--rund-voll); }
.abzug:nth-child(even) { transform: rotate(1deg); }
.abzug:nth-child(3n) { transform: rotate(.3deg); }
.abzug img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
@keyframes fs-abzug {
  from { opacity: 0; transform: rotate(-3deg) translateY(10px) scale(.96); }
}
.abzug-weg {
  width: 100%; min-height: 44px; margin-top: 4px;
  font-size: .92rem; color: var(--mauve-tief);
  background: none; border: 0; cursor: pointer;
}

/* -------------------------------------------------------------- Abendessen
   Eine Karte je Abend. Grosse Wahlflächen statt Auswahllisten — antippen
   statt aufklappen, und immer sichtbar, was gewählt ist. */
.text-mitte { text-align: center; }
.essen-karte {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 28%),
    var(--papier);
  border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 24px; margin-bottom: 20px;
  box-shadow: var(--papier-schatten), var(--praegung);
}
.essen-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.essen-tag { font-family: var(--titel); font-size: 1.25rem; color: var(--tinte); }
.essen-datum { color: var(--mauve-lese); }
.essen-was { margin: 8px 0 18px; font-size: 1.15rem; }
.essen-was strong { font-weight: 600; }
.essen-frage {
  margin: 20px 0 10px; font-family: var(--titel); font-size: 1rem; color: var(--tinte);
}
.wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.wahl-knopf {
  flex: 1 1 auto; min-width: 92px; min-height: 56px;
  padding: 12px 16px;
  font-family: var(--lese); font-size: 1.05rem;
  color: var(--mauve-tief); background: var(--blush);
  border: 1px solid var(--linie); border-radius: var(--rund-voll);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.wahl-knopf .ikon { width: 20px; height: 20px; opacity: 0; }
.wahl-knopf[aria-pressed="true"] {
  color: var(--papier); background: var(--mauve-tief);
  box-shadow: inset 0 0 0 1px rgba(196, 163, 101, .55);
}
.wahl-knopf[aria-pressed="true"] .ikon { opacity: 1; stroke: var(--gold); }
.wahl-pizza { flex: 1 1 46%; }
.pizza-person {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--linie);
}
.pizza-person:first-of-type { border-top: 0; padding-top: 0; }
.pizza-titel { margin: 0 0 8px; color: var(--mauve-lese); }
.essen-bestaetigt {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 14px 16px;
  background: var(--blush); border-radius: var(--rund-klein); color: var(--tinte);
}
.essen-bestaetigt .ikon { stroke: var(--gold); }

/* ------------------------------------------------------------ Fotobuch
   Ein aufgeschlagenes Album: zwei Reihen je Seite, Bilder in wechselnder
   Grösse und minimal schief eingeklebt, Seitenzahl in Gold. */
.fotobuch { margin-top: 32px; }
.buch {
  position: relative;
  padding: 22px 18px 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 26%),
    var(--papier);
  border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--papier-schatten);
  min-height: 220px;
}
/* Falz in der Mitte — der Hinweis darauf, dass es ein Buch ist */
.buch::before {
  content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 18px;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg,
    rgba(122, 90, 85, 0) 0%, rgba(122, 90, 85, .07) 45%,
    rgba(122, 90, 85, .12) 50%, rgba(122, 90, 85, .07) 55%, rgba(122, 90, 85, 0) 100%);
}
.buch-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.buch-bild {
  position: relative; padding: 7px 7px 5px; background: var(--papier);
  border-radius: var(--rund-klein);
  box-shadow: var(--papier-schatten);
  cursor: pointer; border: 0; width: 100%;
  animation: fs-abzug 420ms var(--weich) both;
}
.buch-bild:nth-child(4n+1) { transform: rotate(-1.1deg); }
.buch-bild:nth-child(4n+2) { transform: rotate(.9deg); }
.buch-bild:nth-child(4n+3) { transform: rotate(.4deg); }
.buch-bild:nth-child(4n)   { transform: rotate(-.6deg); }
.buch-bild:nth-child(6n+1) { grid-column: span 2; }
.buch-bild img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: calc(var(--rund-klein) - 6px); background: var(--blush-tief);
}
.buch-bild:nth-child(6n+1) img { aspect-ratio: 16 / 10; }
.buch-bild figcaption {
  padding: 6px 2px 0; font-size: .92rem; color: var(--mauve-lese); text-align: center;
}
.buch-leer { text-align: center; color: var(--mauve-lese); padding: 26px 8px; }
.buch-steuerung {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin-top: 18px;
}
.buch-knopf { margin-top: 0; min-height: 56px; }
.buch-zaehler {
  margin: 0; font-family: var(--zahl); font-size: 1.05rem; color: var(--mauve-tief);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ikon-links { transform: rotate(90deg); }
.ikon-rechts { transform: rotate(-90deg); }
.buch.wendet { animation: fs-buch-wende 420ms var(--weich); }
@keyframes fs-buch-wende {
  0% { transform: rotateY(0) ; opacity: 1; }
  45% { transform: rotateY(-8deg) scale(.985); opacity: .35; }
  100% { transform: none; opacity: 1; }
}

/* --------------------------------------------------------- Schaukasten */
.schaukasten {
  position: fixed; inset: 0; z-index: 70;
  display: grid; grid-template-rows: 1fr auto auto; gap: 12px;
  padding: 16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background: rgba(43, 33, 31, .93);
  animation: fs-namen 240ms var(--weich) both;
}
.schaukasten img {
  min-height: 0; max-width: 100%; max-height: 100%;
  margin: auto; object-fit: contain;
  border-radius: var(--rund-klein);
  background: var(--papier); padding: 6px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.schaukasten-text { margin: 0; text-align: center; color: #F2E4E2; font-size: 1rem; }
.schaukasten-leiste { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.schaukasten-leiste .knopf { margin-top: 0; min-height: 56px; }
.schaukasten-leiste .knopf-still { color: #F2E4E2; border-color: rgba(242, 228, 226, .6); }

/* ------------------------------------------------------------ Navigation */
/* Die Leiste schwebt über dem Rand statt zu kleben — dadurch bleibt der
   Blumenrand ringsum sichtbar. */
.nav {
  position: fixed; left: 12px; right: 12px; z-index: 2;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 6px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund-voll);
  box-shadow: var(--papier-schatten-hoch);
}

/* Die Blase liegt unter den Knöpfen und gleitet zum gewählten hinüber.
   Sie zieht sich in Flugrichtung leicht in die Länge und federt am Ziel aus —
   dieselbe Bewegung wie ein Tropfen, der von einem Punkt zum nächsten läuft. */
.nav-blase {
  position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0;
  width: 25%;
  border-radius: var(--rund-voll);
  background: var(--blush);
  box-shadow: inset 0 0 0 1px rgba(196, 163, 101, .45);
  transform-origin: center;
  transition: width 320ms var(--weich);   /* nur bei Grössenänderung der Leiste */
  will-change: transform;
}
.nav-knopf {
  position: relative; min-height: 64px; padding: 8px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; border-radius: var(--rund-voll); cursor: pointer;
  font-family: var(--lese); font-size: 1rem; color: var(--mauve-tief);
  transition: background 180ms ease, color 180ms ease;
}
.nav-knopf { position: relative; z-index: 1; }
.nav-knopf .ikon { width: 25px; height: 25px; transition: transform 320ms var(--weich), stroke 240ms ease; }
.nav-knopf.ist-aktiv { color: var(--tinte); font-weight: 600; }
.nav-knopf.ist-aktiv .ikon { stroke: var(--gold); transform: translateY(-1px) scale(1.08); }
.nav-knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }

/* ------------------------------------------------------------ Rücksicht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .fs-ader::before { transition-duration: 600ms !important; }  /* das ist Inhalt, keine Zierde */
}


@media (max-width: 24rem) {
  .punkt { grid-template-columns: 1fr; }
  .p-hinw, .p-offen { grid-column: 1; }
}
@media (min-width: 46rem) {
  main { padding-bottom: 40px; }
  .nav { position: sticky; }
}