/* Türchen – Empfänger-Seite. Farben und Schriften wie in der App (DesignSystem.swift). */
@font-face { font-family: "Cormorant"; src: url("/assets/fonts/CormorantGaramond.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/assets/fonts/CormorantGaramond-Italic.ttf") format("truetype"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Pinyon"; src: url("/assets/fonts/PinyonScript-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --cream: #F3EBDD; --ivory: #FAF5EC; --card: #FFFBF4; --ink: #2B2420; --ink-soft: #6B5D52; --line: #E2D5C0;
  --bordeaux: #6E1423; --bordeaux-dark: #4E0D18; --forest: #23402F;
  --gold: #C9A045; --gold-light: #F3D98B; --gold-dark: #8A6A1F;
  --foil: linear-gradient(135deg, #8A6A1F, #D9B964 30%, #F3D98B 50%, #B8892E 75%, #8A6A1F);
  --backdrop: #EFE4D0; --title: var(--ink);
  --serif: "Cormorant", "Iowan Old Style", Georgia, serif;
  --script: "Pinyon", "Snell Roundhand", cursive;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: lining-nums;
}
body[data-dark="1"] { --title: var(--ivory); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; font-family: var(--sans); color: var(--title);
  background: var(--backdrop); transition: background .4s;
  display: flex; flex-direction: column;
}

/* ---------- Kopf ---------- */
.bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 16px 6px;
  background: linear-gradient(var(--backdrop) 60%, transparent);
}
.dedication { display: flex; align-items: baseline; gap: 8px; }
.for { font: italic 500 1.1rem var(--serif); opacity: .8; }
.name { font: 2.4rem/1.1 var(--script); color: var(--bordeaux); }
body[data-dark="1"] .name { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.round {
  position: absolute; right: 14px; top: max(10px, env(safe-area-inset-top)); width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: var(--card); color: var(--bordeaux);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.round.left { right: auto; left: 14px; }
.round svg { width: 20px; height: 20px; fill: currentColor; }
.round .off { display: none; }
.round[aria-pressed="false"] .on { display: none; }
.round[aria-pressed="false"] .off { display: block; }

/* ---------- Szene ---------- */
/* Himmel der Szene bis an den oberen Rand verlängern: oberste Bildzeilen gestreckt und weichgezeichnet,
   unten weich auslaufend – die Szene blendet ihren oberen Rand darüber selbst ein. */
.sky {
  position: absolute; left: 0; right: 0; top: 0; height: var(--sky-height, 0px); z-index: 0; pointer-events: none;
  background-image: var(--sky-image, none); background-repeat: no-repeat;
  background-size: var(--sky-width, 100%) 2500%; background-position: center top;
  filter: blur(14px); transform: scale(1.06);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 90px), transparent); mask-image: linear-gradient(#000 calc(100% - 90px), transparent);
}
.bar, .stage, .foot { position: relative; z-index: 1; }
.stage { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 0 12px; }
.status { font: italic 500 1.1rem var(--serif); margin: 2px 16px 10px; text-align: center; min-height: 1.4em; opacity: .85; }
.scene {
  position: relative; width: min(100%, calc((100dvh - 150px) * 0.6667), 620px); aspect-ratio: 2 / 3;
  background-size: cover; perspective: 900px;
  -webkit-mask-image: linear-gradient(transparent, #000 60px); mask-image: linear-gradient(transparent, #000 60px);
}
.error { font: 500 1.2rem var(--serif); text-align: center; margin: 40px 24px; }

.door {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
}
.door:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.door .inside, .door .leaf { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.door .inside {
  background: radial-gradient(circle, #FFE3A3, #E9A443 55%, #6B3A12); display: grid; place-items: center;
  opacity: 0; transition: opacity .2s .1s;
}
.door .inside img { width: 100%; height: 100%; object-fit: cover; }
.door .inside svg { width: 38%; height: 38%; fill: var(--bordeaux); }
.door .leaf {
  transform-origin: left center; transition: transform .7s cubic-bezier(.3,1.2,.45,1), opacity .3s .5s, box-shadow .7s;
  backface-visibility: hidden;
}
.door.open .inside { opacity: 1; }
.door.open .leaf { transform: rotateY(-112deg); opacity: 0; box-shadow: -4px 0 12px rgba(0,0,0,.35); }
.door:active .leaf { scale: .95; }
.door.shake { animation: shake .4s linear; }
@keyframes shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }

/* Gemalte Szenen: die Tür ist ein Ausschnitt des Bildes */
.door.cutout .leaf { background-repeat: no-repeat; box-shadow: inset 0 0 0 1.5px var(--gold); }
.plate {
  position: absolute; left: 50%; top: 0; translate: -50% -22%; width: max(20px, 42%); aspect-ratio: 1; border-radius: 50%;
  background: var(--foil); box-shadow: 0 1px 3px rgba(0,0,0,.4); display: grid; place-items: center;
  font: 700 clamp(.6rem, 2.6vw, 1.05rem) var(--serif); color: var(--bordeaux-dark); line-height: 1;
}
/* Papeterie: geprägte Kartonklappe */
.door.card .leaf {
  background: linear-gradient(135deg, var(--card), #F1E6D3); box-shadow: 0 1px 2px rgba(43,36,32,.15), inset 1.5px 1.5px 0 #fff, inset -1.5px -1.5px 0 rgba(184,154,110,.55);
}
.door.card .leaf::after { content: ""; position: absolute; inset: 6%; border-radius: inherit; border: 1.5px solid var(--gold); }
.door.card .num {
  position: absolute; inset: 0; display: grid; place-items: center; font: 600 clamp(1rem, 6vw, 2.2rem) var(--serif);
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.door[data-shape="round"], .door[data-shape="round"] .leaf { border-radius: 50%; }
.door[data-shape="arch"] .leaf, .door[data-shape="arch"] .inside { border-radius: 50% 50% 6px 6px / 38% 38% 6px 6px; }
.door[data-shape="rect"] .leaf, .door[data-shape="rect"] .inside { border-radius: 7px; }
.door.today .leaf { box-shadow: 0 0 0 2.5px var(--gold-light), 0 0 16px 2px var(--gold-light); animation: glow 1.6s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 0 2px var(--gold-light), 0 0 6px var(--gold-light); } }

.snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

/* ---------- Fuß ---------- */
.foot { text-align: center; padding: 6px 16px max(18px, env(safe-area-inset-bottom)); }
.from { font: italic 500 1.05rem var(--serif); margin: 0 0 8px; opacity: .8; }
.brand { color: inherit; opacity: .7; text-decoration: none; font-size: .9rem; }
.brand:hover { opacity: 1; text-decoration: underline; }

.toast {
  position: fixed; left: 50%; top: max(70px, calc(env(safe-area-inset-top) + 60px)); translate: -50% 0; z-index: 20;
  background: var(--card); color: var(--ink); padding: 11px 20px; border-radius: 999px; font: 600 1.1rem var(--serif);
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); box-shadow: 0 6px 24px rgba(0,0,0,.22);
}

/* ---------- Brief (geöffnetes Türchen) ---------- */
.letter { border: 0; padding: 0; width: min(560px, 100vw); max-width: 100vw; max-height: 100dvh; background: transparent; color: var(--ink); }
.letter::backdrop { background: rgba(20,12,8,.55); backdrop-filter: blur(3px); }
.paper {
  position: relative; margin: 10px; padding: 46px 22px 26px; max-height: calc(100dvh - 20px); overflow: auto; border-radius: 22px;
  background: linear-gradient(var(--ivory), var(--cream)); box-shadow: 0 10px 40px rgba(0,0,0,.3);
  animation: rise .4s cubic-bezier(.2,.9,.3,1); text-align: center;
}
.paper::before { content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 16px; pointer-events: none; }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.close {
  position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; z-index: 2;
  background: rgba(110,20,35,.08); color: var(--bordeaux); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.letter-head { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 18px; }
.gold-num { font: 600 4rem/1 var(--serif); background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.caps { font: 600 .75rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); }
.ornament { width: 200px; height: 12px; margin-top: 8px; background:
  linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 70%, transparent), transparent) center / 100% 1px no-repeat; position: relative; }
.ornament::after { content: "✦"; position: absolute; left: 50%; top: 50%; translate: -50% -55%; color: var(--gold); font-size: .7rem; background: var(--ivory); padding: 0 6px; }
.letter-body { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.text { font: 500 1.5rem/1.35 var(--serif); white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.text.soft { font-style: italic; color: var(--ink-soft); }
.sign { font: 2.4rem var(--script); color: var(--bordeaux); text-align: right; margin: 14px 6px 0; }
.author { font: italic 500 1.05rem var(--serif); color: var(--ink-soft); text-align: right; margin: 2px 6px 0; }

.polaroid { background: #fff; padding: 10px 10px 34px; box-shadow: 0 8px 22px rgba(43,36,32,.2); rotate: -1.5deg; margin: 4px 8px; }
.polaroid img { width: 100%; display: block; }
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding: 10px 2px 4px; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery .polaroid { flex: 0 0 86%; scroll-snap-align: center; }
.gallery .polaroid:nth-child(even) { rotate: 1.6deg; }
.dots { display: flex; justify-content: center; gap: 7px; align-items: center; font: 600 1rem var(--serif); color: var(--ink-soft); }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dots i.on { width: 9px; height: 9px; background: var(--foil); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 18px; border-radius: 999px; cursor: pointer;
  font: 650 1.3rem var(--serif); color: var(--ivory); text-decoration: none; border: 0;
  background: linear-gradient(var(--bordeaux), var(--bordeaux-dark)); box-shadow: inset 0 0 0 3px var(--bordeaux), inset 0 0 0 4.2px var(--gold), 0 6px 14px rgba(110,20,35,.3);
}
.btn.paper-btn { background: var(--card); color: var(--bordeaux); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
.btn:disabled { opacity: .5; }

.voice { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: 16px; padding: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent); }
.voice button { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--bordeaux); color: var(--ivory); cursor: pointer; display: grid; place-items: center; box-shadow: inset 0 0 0 3px var(--bordeaux), inset 0 0 0 4.5px var(--gold); }
.voice button svg { width: 20px; height: 20px; fill: currentColor; }
.wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 30px; }
.wave i { flex: 1; border-radius: 3px; background: color-mix(in srgb, var(--bordeaux) 25%, transparent); }
.wave i.on { background: var(--bordeaux); }
.voice time { font: 600 .85rem var(--sans); color: var(--ink-soft); min-width: 2.6em; }
video { width: 100%; max-height: 60dvh; border-radius: 16px; background: #000; box-shadow: 0 0 0 2px var(--gold); }

/* Gutschein */
.ticket {
  position: relative; display: grid; grid-template-columns: 1fr 64px; border-radius: 16px; background: linear-gradient(135deg, #FFFBF3, #F4E9D6);
  box-shadow: 0 8px 22px rgba(43,36,32,.16), inset 0 0 0 1.6px var(--gold); text-align: center;
  -webkit-mask: radial-gradient(circle 11px at calc(100% - 64px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - 64px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at calc(100% - 64px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - 64px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket .main { padding: 22px 16px; border-right: 1.2px dashed color-mix(in srgb, var(--gold) 70%, transparent); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ticket h3 { font: 650 1.8rem/1.15 var(--serif); margin: 0; color: var(--ink); }
.ticket .note { font: italic 500 1rem var(--serif); color: var(--ink-soft); margin: 0; }
.ticket .names { font: italic 500 .95rem var(--serif); color: var(--ink-soft); }
.ticket .names b { font: 1.6rem var(--script); color: var(--bordeaux); font-weight: 400; }
.ticket .stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ticket .stub span { writing-mode: vertical-rl; font: 600 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); }
.seal { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); background: radial-gradient(circle at 35% 30%, #9B2335, var(--bordeaux) 60%, var(--bordeaux-dark)); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.seal svg { width: 45%; height: 45%; fill: currentColor; }
.stamp {
  position: absolute; left: calc(50% - 32px); top: 50%; translate: -50% -50%; rotate: -11deg; padding: 6px 16px; border-radius: 8px;
  border: 2.5px solid var(--bordeaux); color: var(--bordeaux); background: rgba(255,251,243,.82); opacity: .9; font: 700 1.7rem var(--serif); letter-spacing: .12em; text-transform: uppercase; text-align: center; line-height: 1.1;
  animation: stamp .35s cubic-bezier(.3,1.6,.5,1);
}
.stamp small { display: block; font: italic 600 .9rem var(--serif); letter-spacing: 0; text-transform: none; }
@keyframes stamp { from { scale: 1.8; opacity: 0; } }

/* Rätsel */
.riddle { perspective: 1000px; }
.riddle .inner { position: relative; transition: transform .7s cubic-bezier(.3,1.1,.4,1); transform-style: preserve-3d; }
.riddle.flipped .inner { transform: rotateY(180deg); }
.riddle .face { border-radius: 18px; padding: 22px 18px; background: linear-gradient(135deg, #FFFBF3, #F4E9D6); box-shadow: 0 8px 22px rgba(43,36,32,.16), inset 0 0 0 1.6px var(--gold); backface-visibility: hidden; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.riddle .back { position: absolute; inset: 0; transform: rotateY(180deg); justify-content: center; }
.riddle h3 { font: 650 1.7rem/1.2 var(--serif); margin: 0; }
.riddle .answer { font: 2.6rem/1.15 var(--script); color: var(--bordeaux); }
.option { width: 100%; padding: 12px 16px; border-radius: 12px; border: 0; background: var(--card); box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--gold) 55%, transparent); font: 600 1.2rem var(--serif); color: var(--ink); text-align: left; cursor: pointer; }
.option.wrong { box-shadow: inset 0 0 0 1.2px var(--bordeaux); animation: shake .4s; }
.option.right { background: var(--bordeaux); color: var(--ivory); }
.hint { font: italic 500 1rem var(--serif); color: var(--bordeaux); min-height: 1.3em; margin: 0; }
.link-btn { border: 0; background: none; color: var(--bordeaux); font: 600 .95rem var(--sans); cursor: pointer; }

/* Geheimes Foto */
.scratch { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px var(--gold), 0 8px 20px rgba(43,36,32,.2); touch-action: none; }
.scratch img { width: 100%; display: block; }
.scratch canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity .6s; }

/* Zeichnung */
.drawing { position: relative; aspect-ratio: 1.3; border-radius: 14px; background: linear-gradient(135deg, #FFFCF5, #F6EDDD); box-shadow: inset 0 0 0 1.6px var(--gold), 0 8px 20px rgba(43,36,32,.14); }
.drawing canvas { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
.drawing .again { position: absolute; right: 12px; bottom: 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: var(--card); color: var(--bordeaux); font: 600 .8rem var(--sans); cursor: pointer; }

/* Ort */
.place { border-radius: 18px; padding: 16px; background: linear-gradient(135deg, #FFFBF3, #F4E9D6); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent); display: flex; flex-direction: column; gap: 12px; }
.place .caption { font: 2rem/1.2 var(--script); color: var(--bordeaux); margin: 0; }
.map { height: 240px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1.6px var(--gold); background: var(--cream); display: grid; place-items: center; }
.map .consent { padding: 20px; font: 500 1rem var(--serif); color: var(--ink-soft); }
.map .consent small { display: block; margin-top: 6px; font: .75rem var(--sans); }
.place h3 { font: 650 1.4rem var(--serif); margin: 0; }
.place .addr { font: .85rem var(--sans); color: var(--ink-soft); margin: 0; }
.pin { width: 40px; height: 52px; }

/* Foto-Puzzle */
.puzzle-wrap { display: flex; flex-direction: column; gap: 12px; }
.puzzle {
  position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  background: linear-gradient(var(--bordeaux), var(--bordeaux-dark)); box-shadow: 0 0 0 2px var(--gold), 0 8px 20px rgba(43,36,32,.2);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.puzzle-grid { position: absolute; inset: 4px; transition: inset .5s cubic-bezier(.3,1.1,.4,1); }
.piece {
  position: absolute; width: calc(100% / 3); height: calc(100% / 3); padding: 1.5px; border: 0; background: none; cursor: pointer;
  transition: left .38s cubic-bezier(.3,1.25,.45,1), top .38s cubic-bezier(.3,1.25,.45,1), padding .5s; -webkit-tap-highlight-color: transparent;
}
.piece span {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 6px;
  box-shadow: inset 0 0 0 .8px rgba(243,217,139,.35); transition: transform .2s, box-shadow .2s, border-radius .5s;
}
.piece img { position: absolute; width: 300%; height: 300%; max-width: none; object-fit: cover; pointer-events: none; }
.piece.picked { z-index: 2; }
.piece.picked span { transform: scale(1.06); box-shadow: 0 0 0 3px var(--gold-light), 0 6px 16px rgba(0,0,0,.45); }
.piece:focus-visible { outline: none; }
.piece:focus-visible span { box-shadow: 0 0 0 3px var(--gold-light); }
.puzzle.solved .puzzle-grid { inset: 0; }
.puzzle.solved .piece { padding: 0; cursor: default; }
.puzzle.solved .piece span { border-radius: 0; box-shadow: none; }
.puzzle.solved::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: plus-lighter;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%) -150% 0 / 200% 100% no-repeat;
  animation: sweep 1.4s .2s ease-out;
}
@keyframes sweep { to { background-position: 250% 0; } }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst i {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-style: normal; font-size: 1.6rem; color: var(--gold-light);
  text-shadow: 0 0 6px var(--gold); animation: burst 1.1s ease-out forwards;
}
.burst i.small { font-size: .9rem; }
@keyframes burst { from { scale: .2; opacity: 1; } to { left: calc(50% + var(--dx)); top: calc(50% + var(--dy)); scale: 1; opacity: 0; } }
.puzzle-foot { display: flex; align-items: center; gap: 14px; min-height: 2.6rem; }
.puzzle-hint { flex: 1; margin: 0; text-align: left; font: italic 500 1.05rem var(--serif); color: var(--ink-soft); }
.puzzle-foot .link-btn { flex: none; opacity: .85; }
.puzzle-done { flex: 1; margin: 0; font: 2.4rem/1.1 var(--script); color: var(--bordeaux); animation: stamp .45s cubic-bezier(.3,1.6,.5,1); }

/* Rezeptkarte */
.recipe {
  position: relative; border-radius: 18px; padding: 24px 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #FFFBF3, #F4E9D6); box-shadow: 0 8px 22px rgba(43,36,32,.16), inset 0 0 0 1.6px var(--gold);
}
.recipe::before { content: ""; position: absolute; inset: 7px; border-radius: 12px; border: .8px solid color-mix(in srgb, var(--gold) 45%, transparent); pointer-events: none; }
.recipe .holly { position: absolute; top: 14px; width: 30px; height: 30px; }
.recipe .holly.left { left: 14px; }
.recipe .holly.right { right: 14px; scale: -1 1; }
.recipe .holly svg { width: 100%; height: 100%; }
.recipe .caps { letter-spacing: .3em; }
.recipe h3 { font: 2.8rem/1.15 var(--script); font-weight: 400; color: var(--bordeaux); margin: 2px 8px 0; overflow-wrap: anywhere; }
.recipe .ornament::after { background: #FCF6EC; }
.recipe section { align-self: stretch; text-align: left; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.recipe section .caps { font-size: .7rem; letter-spacing: .16em; }
.recipe ul, .recipe ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.recipe ul { gap: 6px; }
.recipe ol { gap: 10px; counter-reset: step; }
.recipe li { position: relative; padding-left: 26px; font: 550 1.2rem/1.3 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.recipe ul li::before { content: "✦"; position: absolute; left: 4px; top: .25em; font-size: .6rem; color: var(--gold); }
.recipe ol li { padding-left: 36px; font-weight: 500; font-size: 1.15rem; }
.recipe ol li::before {
  counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .95rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--ivory);
  background: var(--bordeaux); box-shadow: inset 0 0 0 1.5px var(--bordeaux), inset 0 0 0 2.5px var(--gold);
}
.recipe .bon { align-self: flex-end; margin: 6px 4px 0; font: 1.7rem var(--script); color: var(--gold-dark); }

/* Song des Tages */
.song {
  position: relative; border-radius: 18px; padding: 24px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ivory);
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.14) 0 1.2px, transparent 2px),
    radial-gradient(circle at 74% 14%, rgba(255,255,255,.1) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 86% 62%, rgba(255,255,255,.12) 0 1px, transparent 1.8px),
    radial-gradient(circle at 10% 78%, rgba(255,255,255,.1) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 58% 88%, rgba(255,255,255,.08) 0 1.2px, transparent 2px),
    linear-gradient(#8A1C2E, var(--bordeaux) 50%, var(--bordeaux-dark));
  box-shadow: 0 8px 22px rgba(110,20,35,.35), inset 0 0 0 1.6px var(--gold);
}
.song::before { content: ""; position: absolute; inset: 7px; border-radius: 12px; border: .8px solid rgba(243,217,139,.3); pointer-events: none; }
.vinyl {
  width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; margin: 4px 0 6px;
  background:
    conic-gradient(from 20deg, transparent, rgba(255,255,255,.13), transparent 18%, transparent 50%, rgba(255,255,255,.08), transparent 68%),
    repeating-radial-gradient(circle, #1A1414 0 3px, #221B1B 3px 4px),
    #120D0D;
  box-shadow: 0 6px 16px rgba(0,0,0,.45); animation: spin 9s linear infinite;
}
.vinyl .label { width: 48px; height: 48px; border-radius: 50%; background: var(--foil); display: grid; place-items: center; position: relative; }
.vinyl .label::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--bordeaux); }
.vinyl .label svg { width: 14px; height: 14px; fill: var(--bordeaux); translate: 0 -12px; }
@keyframes spin { to { rotate: 360deg; } }
.song .caps { color: var(--gold-light); letter-spacing: .3em; }
.song .rule { width: 160px; height: 1px; background: linear-gradient(90deg, transparent, rgba(243,217,139,.7), transparent); }
.song-note { margin: 2px 6px; font: 2.4rem/1.2 var(--script); background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.service {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 600 .82rem var(--sans);
  color: rgba(250,245,236,.85); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 .8px rgba(243,217,139,.35);
}
.service svg { width: 15px; height: 15px; fill: currentColor; fill-rule: evenodd; }
.btn.gold-btn { margin-top: 6px; background: var(--foil); color: var(--bordeaux-dark); font-weight: 700; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.3); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .door .leaf, .paper, .riddle .inner { transition: none; animation: none; }
  .vinyl, .puzzle.solved::after, .piece, .piece span, .puzzle-grid { animation: none; transition: none; }
  .door.today .leaf { animation: none; }
}

/* `font:`-Kurzschreibweise setzt Ziffern zurück – Türchen-Zahlen immer gleich hoch */
.num, .plate, .gold-num, .status, .dots, time { font-variant-numeric: lining-nums; }

/* ---------- Übersicht „Meine Türchen“ ---------- */
.overview { text-align: left; padding-top: 22px; }
.overview-title { font: 650 1.6rem var(--serif); text-align: center; margin: 0 40px 18px; color: var(--ink); }
.overview .caps { display: block; margin: 18px 4px 10px; }
.ov-list { display: flex; flex-direction: column; gap: 8px; }
.ov-row {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent; background: none; text-align: left; font: inherit; color: var(--ink);
}
.ov-row:hover, .ov-row:focus-visible { background: color-mix(in srgb, var(--card) 80%, transparent); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.ov-row.voucher { background: var(--card); border-color: color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 2px 8px rgba(43,36,32,.08); }
.ov-row.voucher.done { opacity: .7; }
.ov-badge {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 650 1.5rem var(--serif); font-variant-numeric: lining-nums; /* die Kurzschreibweise setzt sonst Mediävalziffern */
  color: var(--bordeaux); background: var(--cream); border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
}
.ov-row.voucher .ov-badge { background: var(--bordeaux); border: 0; }
.ov-badge svg { width: 20px; height: 20px; fill: var(--gold-light); }
.ov-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ov-kind { font: 600 .9rem var(--sans); }
.ov-title { font: 650 1.2rem var(--serif); }
.ov-snippet, .ov-date { font: italic 500 1rem var(--serif); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-state { flex: none; font: 600 .75rem var(--sans); color: var(--ink-soft); text-align: right; }
.ov-state.open { color: var(--bordeaux); border: 1.2px solid var(--bordeaux); border-radius: 999px; padding: 4px 10px; }
.ov-chevron { flex: none; color: var(--gold); font-size: 1.2rem; }
.ov-reply { flex: none; font-size: 1.15rem; line-height: 1; }

/* ---------- Antwort an den Absender (unten im Brief) ---------- */
.reply {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 22px 2px 0; padding: 18px 14px 16px;
  border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.reply:empty { display: none; }
.moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mood {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 14px; cursor: pointer;
  border: 0; background: none; color: var(--ink-soft); font: inherit; -webkit-tap-highlight-color: transparent;
  transition: background .2s, transform .2s cubic-bezier(.3,1.6,.5,1);
}
.mood .emoji { font-size: 1.9rem; line-height: 1.1; }
.mood small { font: 600 .68rem var(--sans); letter-spacing: .02em; }
.mood[aria-checked="true"] { background: color-mix(in srgb, var(--bordeaux) 9%, transparent); box-shadow: inset 0 0 0 1.5px var(--bordeaux); color: var(--bordeaux); transform: scale(1.06); }
.mood:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.reply-field { position: relative; }
.reply-input {
  width: 100%; resize: vertical; min-height: 84px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--ivory); color: var(--ink); font: 500 1.2rem/1.35 var(--serif);
}
.reply-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.reply-count { position: absolute; right: 12px; bottom: 8px; font: 600 .72rem var(--sans); color: var(--ink-soft); }
.reply-count.over { color: var(--bordeaux); }
.record {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px dashed color-mix(in srgb, var(--gold) 70%, transparent); background: none; color: var(--bordeaux); font: inherit;
}
.record svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.record-label { display: flex; flex-direction: column; font: 600 1.05rem var(--serif); }
.record-label small, .record-label time { font: 500 .78rem var(--sans); color: var(--ink-soft); }
.record.on { border-style: solid; background: color-mix(in srgb, var(--bordeaux) 8%, transparent); }
.record.on svg { animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .35; } }
.reply-voice-row { display: flex; align-items: center; gap: 8px; }
.reply-voice-row .voice { flex: 1; min-width: 0; }
.icon-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.reply-mood { font-size: 2.6rem; line-height: 1; animation: stamp .35s cubic-bezier(.3,1.6,.5,1); }
.reply-text { font: italic 500 1.25rem/1.35 var(--serif); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.reply-note { font: italic 500 1.05rem var(--serif); color: var(--ink-soft); margin: 0; }
.link-btn.soft { color: var(--ink-soft); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .reply-mood, .record.on svg { animation: none; } .mood { transition: none; } }
.foot .legal { margin-top: 10px; font-size: .8rem; opacity: .7; }
.foot .legal a { color: inherit; }