/* Erstes Licht – Stand V42 vom 10.11.2026 (Ergänzungen am Ende der Datei). Weihnachtsfassung V7 vom 06.11.2026, Seitenaufbau V14 vom 06.11.2026 (ohne Inline-Stile, passend zur Sicherheitsrichtlinie der Website)
   Nachthimmel, Kerzen- und Laternenlicht, Tannengrün, Stechpalmenrot, warmes Briefpapier. */
:root {
  --night: #0a1a36;
  --night-deep: #050d1c;
  --gold: #f2c46b;
  --gold-soft: #ffe2a3;
  --amber: #f5a623;
  --cream: #f7efe0;
  --paper: #fbf3e1;
  --paper-edge: #ead8b2;
  --ink: #3a2a1a;
  --fir: #1e4a34;
  --holly: #a3222b;
  --muted: rgba(247, 239, 224, .78);
  --faint: rgba(247, 239, 224, .55);
  --glass: rgba(255, 244, 220, .06);
  --line: rgba(242, 196, 107, .3);
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--cream);
  background: var(--night-deep);
  background-image:
    radial-gradient(ellipse 70% 38% at 50% 0%, rgba(245, 166, 35, .22), transparent 72%),
    radial-gradient(ellipse 120% 60% at 50% 110%, rgba(30, 74, 52, .35), transparent 70%),
    linear-gradient(180deg, #102650 0%, var(--night) 38%, var(--night-deep) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .7;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 28% 8%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 47% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 63% 12%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 81% 26%, #fff, transparent 60%), radial-gradient(1px 1px at 92% 6%, #fff, transparent 60%),
    radial-gradient(1px 1px at 6% 40%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 72% 44%, #fff, transparent 60%),
    radial-gradient(1px 1px at 37% 52%, #fff, transparent 60%), radial-gradient(1px 1px at 88% 62%, #fff, transparent 60%);
}
#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--gold-soft); }
[hidden] { display: none !important; }

main { position: relative; z-index: 2; max-width: 520px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 56px) max(16px, env(safe-area-inset-left)); outline: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.22; margin: 0 0 10px; text-wrap: balance; }
h1 { font-size: 31px; }
h2 { font-size: 23px; }
h3 { font-size: 19px; }
p { margin: 0 0 14px; }
.lead { color: var(--muted); }
.small { font-size: 14px; color: var(--faint); }
.center { text-align: center; }
.hand { font-family: var(--hand); }

/* Kopf mit Tannenzweigen */
.hero { position: relative; text-align: center; padding: 18px 0 6px; }
/* V7: gemaltes Startbild, nur auf der Startseite; Schnee (z-index 1) fällt darüber, Inhalt (z-index 2) liegt darauf */
.home-art { display: none; position: absolute; left: 50%; transform: translateX(-50%); width: min(100vw, 640px); z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, #000 62%, transparent 100%); }
.home .home-art { display: block; }
.home-art img { display: block; width: 100%; height: auto; }
.home .hero { padding-top: calc(min(100vw, 640px) * .73); }  /* V8: Überschrift etwas tiefer, Bernds Wunsch */
.home .hero h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
@media (min-width: 641px) {
  .home-art {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, #000 58%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, #000 58%, transparent);
    mask-composite: intersect;
  }
}
.boughs { position: relative; height: 0; }
.boughs .b { position: absolute; top: -6px; width: 56%; max-width: 270px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.boughs .b.l { left: -24px; }
.boughs .b.r { right: -24px; transform: scaleX(-1); }
.boughs + .hero { padding-top: 70px; }
.lantern-wrap { position: relative; width: 104px; margin: 0 auto 10px; }
.lantern-wrap::before { content: ""; position: absolute; left: 50%; top: 52%; width: 260px; height: 260px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 196, 92, .42), rgba(255, 170, 60, .12) 40%, transparent 68%); animation: glow 3.2s ease-in-out infinite; pointer-events: none; }
.lantern { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(255, 190, 90, .45)); }
.lantern .lflame { transform-origin: 70px 136px; animation: flicker 2.4s ease-in-out infinite; }
.bflame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 2.2s ease-in-out infinite; }
.twinkle { animation: twinkle 2.8s ease-in-out infinite; }
@keyframes flicker { 0%,100% { transform: scale(1) rotate(-1deg); } 30% { transform: scale(1.05, .95) rotate(1.6deg); } 60% { transform: scale(.96, 1.06) rotate(-1.4deg); } }
@keyframes glow { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes twinkle { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.promise { display: inline-block; font-size: 13px; color: var(--gold-soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; margin: 2px 0 10px; background: rgba(5, 13, 28, .35); }
.counter { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.counter b { color: var(--gold-soft); font-variant-numeric: tabular-nums; }

/* Schaltflächen */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 12px 18px; margin: 0 0 10px; border-radius: 16px; border: 1px solid var(--line); background: rgba(10, 26, 54, .62); color: var(--cream); font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; text-align: center; transition: transform .08s, background .2s; backdrop-filter: blur(4px); }
.btn:active { transform: scale(.985); }
.btn:focus-visible, .door:focus-visible, .chip:focus-visible, .env:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.btn.primary { background: linear-gradient(180deg, #ffe7ae, var(--gold) 55%, #e2a94a); color: #2b1a08; border-color: transparent; box-shadow: 0 8px 26px rgba(245, 166, 35, .32), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.red { background: linear-gradient(180deg, #b9333b, var(--holly)); border-color: rgba(255, 180, 160, .35); }
.btn.green { background: linear-gradient(180deg, #2a6045, var(--fir)); border-color: rgba(170, 220, 180, .25); }
.btn.ghost { background: none; backdrop-filter: none; }
.btn .sub { display: block; font-weight: 400; font-size: 13px; opacity: .85; }
.btn.stack { flex-direction: column; gap: 0; }
.row { display: flex; gap: 10px; }
.row > .btn { flex: 1; min-width: 0; }
.linkbtn { background: none; border: 0; padding: 6px 0; color: var(--faint); text-decoration: underline; font-size: 14px; cursor: pointer; }

.card { position: relative; background: rgba(10, 26, 54, .66); border: 1px solid rgba(242, 196, 107, .2); border-radius: 20px; padding: 18px; margin: 0 0 14px; backdrop-filter: blur(6px); }
.card.warm { background: linear-gradient(160deg, rgba(120, 60, 20, .35), rgba(10, 26, 54, .7)); }
.divider { height: 18px; margin: 16px 0; background: center / 84px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 18'%3E%3Cpath d='M0 9h30M54 9h30' stroke='%23f2c46b' stroke-opacity='.4'/%3E%3Cpath d='M42 2 l3 6 -3 8 -3 -8z' fill='%23f2c46b' fill-opacity='.8'/%3E%3C/svg%3E"); }

/* Formular */
label.lbl { display: block; font-weight: 600; font-size: 15px; margin: 14px 0 6px; }
.input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(242, 196, 107, .32); background: rgba(5, 13, 28, .55); color: var(--cream); font-size: 17px; }
.input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
textarea.input { min-height: 140px; resize: vertical; line-height: 1.55; }
textarea.paper-input { min-height: 200px; line-height: 1.3; }
textarea.paper-input.gift-ta { min-height: 110px; }
.input::placeholder { color: rgba(247, 239, 224, .42); }
.paper-input { background: linear-gradient(180deg, var(--paper), #f4e7cb); color: var(--ink); border-color: var(--paper-edge); font-family: var(--hand); font-weight: 500; font-size: 25px; line-height: 1.3; }
.paper-input::placeholder { color: rgba(58, 42, 26, .45); }
.counter-chars { text-align: right; font-size: 13px; color: var(--faint); margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.chip { border: 1px solid var(--line); background: rgba(242, 196, 107, .1); border-radius: 999px; padding: 7px 12px; font-size: 14px; cursor: pointer; color: var(--cream); text-align: left; }
.err { color: #ffb4a8; font-size: 14px; min-height: 20px; margin: 6px 0; }
.ok { color: #b9e4bf; font-size: 15px; }

/* Umschlag und Brief */
.stage { position: relative; padding: 132px 0 8px; text-align: center; }
.env { position: relative; width: min(320px, 100%); aspect-ratio: 16 / 12; margin: 18px auto 18px; cursor: pointer; perspective: 900px; border: 0; padding: 0; background: none; display: block; }
.env .body { position: absolute; inset: 0; z-index: 2; border-radius: 10px; background: linear-gradient(160deg, #f8edd5, #ecdcb8); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .4); overflow: hidden; }
.env .body::before, .env .body::after { content: ""; position: absolute; bottom: 0; width: 60%; height: 70%; background: linear-gradient(160deg, #efe0bf, #e2cfa6); }
.env .body::before { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.env .body::after { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.env .flap { position: absolute; left: 0; right: 0; top: 0; height: 52%; transform-origin: top; z-index: 3; }
.env .flap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #f3e4c4, #e6d3ab); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .15)); }
.env .seal { position: absolute; left: 50%; top: 52%; width: 58px; height: 58px; transform: translate(-50%, -50%); z-index: 4; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.env .addr { position: absolute; left: 0; right: 0; bottom: 6%; z-index: 3; color: var(--ink); font-family: var(--hand); font-size: 27px; line-height: 1.1; }
.env .addr small { display: block; font-size: 20px; opacity: .75; }
.env .letter-peek { position: absolute; left: 8%; right: 8%; top: 8%; height: 80%; padding: 12px 14px; text-align: left; overflow: hidden; background: linear-gradient(180deg, var(--paper), #f3e5c6); border-radius: 6px; z-index: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); }
.tap { font-family: var(--hand); font-size: 26px; color: var(--gold-soft); animation: twinkle 2.4s ease-in-out infinite; }

.letter { position: relative; margin: 6px auto 10px; padding: 28px 22px 24px; border-radius: 8px; color: var(--ink); text-align: left;
  background: radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, .7), transparent 60%), linear-gradient(180deg, var(--paper), #f2e3c3);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(150, 110, 60, .18); animation: rise .9s cubic-bezier(.3, .7, .2, 1) both; }
.letter::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(160, 110, 50, .22); border-radius: 4px; pointer-events: none; }
.letter .to { font-family: var(--hand); font-weight: 600; font-size: 33px; line-height: 1.1; margin-bottom: 10px; color: #6b3d16; }
.letter .msg { font-family: var(--hand); font-weight: 500; font-size: 27px; line-height: 1.32; color: #3b2614; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 14px; }
.letter .from { font-family: var(--hand); font-weight: 600; font-size: 33px; text-align: right; color: #6b3d16; }
.letter .sprig { position: absolute; right: -14px; top: -26px; width: 120px; transform: rotate(14deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(.98); } to { opacity: 1; transform: none; } }
.chain { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--muted); margin: 16px 0 22px; text-align: center; }
.chain svg { width: 12px; height: 20px; flex: none; }
.preview-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--gold); color: var(--night-deep); border-radius: 6px; padding: 3px 8px; margin: 18px 0 4px; }
.sharetext { min-height: 130px; font-size: 16px; }

/* Kalender */
.scene-wrap { position: relative; margin: 12px -16px 6px; height: 170px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); }
.scene-wrap .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 18px; }
.door { position: relative; aspect-ratio: 1 / 1.12; max-width: 100%; border-radius: 10px; border: 1px solid rgba(242, 196, 107, .45); color: var(--gold-soft); font-family: var(--serif); font-size: 25px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18), inset 0 0 0 4px rgba(242, 196, 107, .18), 0 6px 14px rgba(0, 0, 0, .35); }
.door.c0 { background: linear-gradient(160deg, #8f2730, #641920); }
.door.c1 { background: linear-gradient(160deg, #2a6045, #17402b); }
.door.c2 { background: linear-gradient(160deg, #24427a, #142a55); }
.door::after { content: ""; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .8; }
.door.locked { filter: saturate(.55) brightness(.75); cursor: default; }
.door.open { background: radial-gradient(circle at 50% 60%, #fff3cf, #ffc96b 38%, #b86a22 80%); color: #4a2a08; border-color: var(--gold-soft); }
.door.open::after { display: none; }
.door.today { box-shadow: 0 0 0 2px var(--gold-soft), 0 0 24px rgba(255, 200, 100, .6); animation: glow 2.2s ease-in-out infinite; filter: none; }
.door .heart { position: absolute; top: 4px; left: 7px; font-size: 13px; color: #ffc2b3; }
.door.open .heart { color: var(--holly); }
.candles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 4px 0 10px; }
.candles i { width: 8px; height: 14px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: rgba(247, 239, 224, .16); }
.candles i.on { background: radial-gradient(ellipse at 50% 72%, #fff 0 18%, #ffe39a 32%, #f5a623 66%, transparent 76%); filter: drop-shadow(0 0 4px rgba(255, 196, 80, .9)); }
.banner { border-radius: 18px; padding: 14px 16px; margin: 14px 0; background: linear-gradient(160deg, rgba(163, 34, 43, .35), rgba(120, 60, 20, .25)); border: 1px solid rgba(255, 180, 160, .35); }
.banner b { font-family: var(--serif); font-size: 18px; }
.review { background: #ffe39a; color: var(--night-deep); font-weight: 700; font-size: 13px; border-radius: 8px; padding: 6px 10px; margin-top: 14px; display: inline-block; }

/* Türchen */
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.door-card { margin-top: 18px; }
.door-text { font-family: var(--serif); font-size: 20px; line-height: 1.62; }
.quiz { display: flex; gap: 10px; margin: 18px 0 8px; }
.quiz .btn { margin: 0; }
.answer { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 244, 220, .09); }
.answer .verdict { font-weight: 700; color: var(--gold-soft); display: block; margin-bottom: 4px; }
.personal { margin: 18px 0 0; }

/* Fragen */
.qcard { min-height: 230px; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 30px 22px; color: var(--ink); background: linear-gradient(180deg, var(--paper), #f1e1bf); border: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.qcard .q { font-family: var(--serif); font-size: 24px; line-height: 1.45; }
.qcard .num { font-size: 13px; color: rgba(58, 42, 26, .55); margin-top: 18px; }

/* Buch und Weltformel */
.book { display: flex; gap: 16px; align-items: flex-start; }
.book img { width: 104px; max-width: 100%; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); flex: none; }
.book-cover { display: block; flex: none; border-radius: 6px; transition: transform .25s ease; }
.book-cover:hover, .book-cover:focus-visible { transform: translateY(-3px) rotate(-1deg); }
.book-cover:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }
.book-cover img { display: block; width: 120px; }
.book h2 a { color: inherit; text-decoration: none; }
.book h2 a:hover { text-decoration: underline; }
.card.book .book-more { display: inline-block; margin-top: 4px; }
.book > div { min-width: 0; }
.book h2 { font-size: 21px; margin-bottom: 4px; }
.book .sub { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.hwf { background: linear-gradient(160deg, rgba(7, 76, 145, .55), rgba(5, 13, 28, .75)); border-color: rgba(231, 195, 118, .35); }
.hwf .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.nl { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nl .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.footer { text-align: center; margin-top: 30px; font-family: var(--hand); color: var(--faint); font-size: 24px; }

.toast { position: fixed; z-index: 10; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translateX(-50%) translateY(20px); background: var(--gold); color: var(--night-deep); font-weight: 700; padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.spinner { width: 28px; height: 28px; margin: 12px auto; border-radius: 50%; border: 3px solid rgba(242, 196, 107, .25); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .lantern .lflame, .bflame, .twinkle, .lantern-wrap::before, .door.today, .tap { animation: none; }
  .letter { animation: none; }
}

/* Abstände als Klassen statt Inline-Stile (die Website erlaubt nur Stile aus Dateien) */
.sp10 { height: 10px; } .sp12 { height: 12px; } .sp20 { height: 20px; }
.mt6 { margin: 6px 0 0 !important; } .mt8 { margin: 8px 0 0 !important; } .mt10 { margin: 10px 0 0 !important; } .mt12 { margin: 12px 0 0 !important; }
.mb4 { margin: 0 0 4px !important; } .mb10 { margin: 0 0 10px !important; }
.pb0 { padding-bottom: 0 !important; } .p14 { padding: 14px !important; } .muted { color: var(--muted); }
#nlbtn { margin: 0; }
.gift-ta { min-height: 96px; margin-top: 8px; }
.book img.broken { display: none; }
.fd1 { animation-delay: .7s; } .fd2 { animation-delay: 1.4s; } .fd3 { animation-delay: 2.1s; } .fd4 { animation-delay: 2.8s; } .fd5 { animation-delay: 3.5s; } .fd6 { animation-delay: 4.2s; } .fd7 { animation-delay: 4.9s; }
.td1 { animation-delay: .35s; } .td2 { animation-delay: .7s; } .td3 { animation-delay: 1.05s; } .td4 { animation-delay: 1.4s; } .td5 { animation-delay: 1.75s; } .td6 { animation-delay: 2.1s; } .td7 { animation-delay: 2.45s; }

/* ---------- V4: Umschlag öffnen, Licht, Brief schreibt sich ---------- */
.env-wrap { position: relative; }
.env { z-index: 1; }
.env.opening .flap { animation: flapOpen .8s .2s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes flapOpen { 0% { transform: rotateX(0); z-index: 3; } 49% { z-index: 3; } 50% { z-index: 0; } 100% { transform: rotateX(180deg); z-index: 0; } }
.peek-to { display: block; font-family: var(--hand); font-weight: 600; font-size: 23px; line-height: 1.1; color: #6b3d16; }
.peek-lines { display: block; height: 70%; margin-top: 8px; background: repeating-linear-gradient(180deg, transparent 0 15px, rgba(107, 61, 22, .2) 15px 16px); }
.shine { position: absolute; left: 50%; top: 18px; width: 460px; height: 460px; transform: translate(-50%, -50%) scale(.25); opacity: 0; pointer-events: none; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 225, 1) 0, rgba(255, 220, 140, .85) 14%, rgba(255, 185, 80, .4) 34%, rgba(255, 160, 60, .12) 52%, transparent 70%); }
.env .letter-peek { transition: box-shadow 1.2s ease .8s; }
.env.opening .letter-peek { box-shadow: 0 0 34px 12px rgba(255, 214, 130, .6), 0 2px 10px rgba(0, 0, 0, .2); }
.shine::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: spin 24s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 160, .2) 0 5deg, transparent 5deg 17deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%); mask-image: radial-gradient(circle, #000 18%, transparent 66%); }
.spark { position: absolute; z-index: 6; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; background: #fff0c4; box-shadow: 0 0 8px 2px rgba(255, 200, 100, .85); transform: translate(-50%, -50%); }
.tap { transition: opacity .3s; }
.tap.gone { opacity: 0; animation: none; }
.orb { position: fixed; z-index: 7; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0, #fff4d2 32%, #ffc65f 62%, rgba(255, 170, 60, 0) 74%);
  box-shadow: 0 0 22px 10px rgba(255, 205, 115, .7), 0 0 70px 30px rgba(255, 170, 60, .35); }

.warmth { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 2.4s ease;
  background: radial-gradient(ellipse 95% 58% at 50% 10%, rgba(255, 186, 92, .34), rgba(255, 150, 60, .12) 45%, transparent 76%); }
.warmth.on { opacity: 1; }

.lantern { transition: filter 1.2s ease; }
.lantern-wrap.unlit .lantern { filter: brightness(.42) saturate(.5); }
.lantern-wrap.unlit .lflame { opacity: 0; animation: none; }
.lantern-wrap.unlit::before { opacity: 0; animation: none; }
.lantern-wrap.ignite::before { animation: igniteGlow 1.7s ease-out both, glow 3.2s 1.7s ease-in-out infinite; }
.lantern-wrap.ignite .lflame { animation: igniteFlame 1.1s ease-out both, flicker 2.4s 1.1s ease-in-out infinite; }
.lantern-wrap.ignite::after { content: ""; position: absolute; left: 50%; top: 52%; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 230, 170, .85), 0 0 30px 6px rgba(255, 200, 110, .5); animation: ring 1.3s ease-out forwards; }
@keyframes igniteGlow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); } 32% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } 100% { opacity: .9; transform: translate(-50%, -50%) scale(1); } }
@keyframes igniteFlame { 0% { opacity: 0; transform: scale(.1); } 40% { opacity: 1; transform: scale(1.4, 1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ring { from { opacity: 1; width: 26px; height: 26px; } to { opacity: 0; width: 340px; height: 340px; } }
.ember { position: absolute; top: 46%; z-index: 0; width: 3px; height: 3px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: #ffe2a0; box-shadow: 0 0 6px 2px rgba(255, 190, 90, .75); animation: ember 4s linear infinite; }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -170px) scale(.35); } }

.letter.pre { opacity: 0; animation: none; }
.letter.unfold { animation: unfold 1.05s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes unfold { 0% { opacity: 0; transform: perspective(900px) rotateX(-20deg) translateY(28px) scale(.95); } 100% { opacity: 1; transform: none; } }
.letter.pre .to, .letter.pre .from { clip-path: inset(0 100% 0 0); }
.letter.pre .to.write, .letter.pre .from.write { animation: write .9s ease-out forwards; }
@keyframes write { to { clip-path: inset(0 0 0 0); } }
.letter.pre .w { opacity: 0; }
.letter.pre .w.ink { animation: ink .6s ease-out forwards; }
@keyframes ink { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
.skiphint { text-align: center; font-size: 13px; color: var(--faint); margin: 0 0 8px; transition: opacity .4s; }
#after.later { opacity: 0; transform: translateY(18px); pointer-events: none; }
#after.later.shown { opacity: 1; transform: none; pointer-events: auto; transition: opacity .9s ease, transform .9s ease; }

/* An mehrere Menschen */
.prow { display: flex; gap: 8px; margin: 0 0 8px; }
.prow .input { flex: 1; min-width: 0; }
.pdel { flex: none; width: 48px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 13, 28, .55); color: var(--gold-soft); font-size: 22px; line-height: 1; cursor: pointer; }
.btn.sm { min-height: 44px; padding: 8px 14px; font-size: 15px; margin: 0; width: auto; }
.prow-act { margin: 2px 0 4px; flex-wrap: wrap; }
.prow-act > .btn { flex: 1 1 auto; }
.people { list-style: none; margin: 0; padding: 0; }
.person { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(242, 196, 107, .18); }
.person:last-child { border-bottom: 0; }
.pname { font-family: var(--hand); font-weight: 600; font-size: 27px; line-height: 1.1; color: var(--gold-soft); overflow-wrap: anywhere; }
.pact { display: flex; gap: 8px; flex: none; }
.person.done .pname::after { content: " ✓"; color: #a6e3a6; font-family: var(--sans); font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  .shine::after, .ember, .lantern-wrap.ignite::after { animation: none; }
  .lantern-wrap.ignite::before, .lantern-wrap.ignite .lflame { animation: none; }
  .letter.unfold { animation: none; }
}

/* ---------- V5: Umschlag-Beschriftung, Türchen, Animationen ---------- */
.env .addr.to { top: 12%; bottom: auto; z-index: 5; font-size: 31px; font-weight: 600; transition: opacity .25s; }
.env .addr.from { top: auto; bottom: 8%; z-index: 3; font-size: 21px; opacity: .8; }
.env.opening .addr.to { opacity: 0; }

.door-card { position: relative; overflow: hidden; padding-top: 22px; }
.door-card.reveal { animation: doorReveal .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes doorReveal { 0% { opacity: 0; transform: perspective(900px) rotateY(-24deg) scale(.92); box-shadow: 0 0 0 rgba(255, 200, 100, 0); } 60% { box-shadow: 0 0 60px 10px rgba(255, 200, 100, .35); } 100% { opacity: 1; transform: none; box-shadow: none; } }
.door-num { position: absolute; right: 14px; top: 6px; font-family: var(--serif); font-size: 64px; font-weight: 600; line-height: 1; color: rgba(242, 196, 107, .16); pointer-events: none; }
.door-card h2 { font-size: 25px; margin: 2px 0 10px; }
.door-text { font-size: 19px; }
.today-box { display: block; margin: 16px 0 2px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, var(--paper), #f2e3c3); color: var(--ink); }
.today-lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a5a22; margin-bottom: 2px; }
.today-txt { display: block; font-family: var(--hand); font-weight: 600; font-size: 25px; line-height: 1.25; color: #4a2f16; }
.card.remind h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 20px; }
.small.ok { color: #a6e3a6; }
.door.swing { z-index: 2; transform-origin: left center; box-shadow: 0 0 24px rgba(255, 200, 100, .6); }

.fx { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.fxp { position: absolute; display: block; pointer-events: none; }
.fxp.star { width: 16px; height: 16px; background: radial-gradient(circle, #fff7d6, #f2c46b 60%); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 6px rgba(255, 210, 120, .9)); }
.fxp.flake { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .7); }
.fxp.spark { width: 5px; height: 5px; border-radius: 50%; background: #ffe6a8; box-shadow: 0 0 10px 3px rgba(255, 190, 90, .8); }
.fxp.rays { width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 210, .85) 0, rgba(255, 210, 120, .35) 22%, transparent 60%), repeating-conic-gradient(from 0deg, rgba(255, 226, 160, .32) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%); mask-image: radial-gradient(circle, #000 25%, transparent 68%); }
.fxp.glitter { width: 7px; height: 11px; border-radius: 2px; }
.fxp.glitter.c0 { background: #f2c46b; } .fxp.glitter.c1 { background: #fff3cf; } .fxp.glitter.c2 { background: #e8a64a; }
.fxp.comet { width: 150px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .9)); box-shadow: 0 0 12px 2px rgba(255, 220, 150, .7); }
.fxp.comet::after { content: ""; position: absolute; right: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 6px rgba(255, 230, 170, .9); }
@media (prefers-reduced-motion: reduce) { .door-card.reveal { animation: none; } }

/* V6: Bilder hinter den Türchen und beim Licht */
.door-img { margin: -22px -18px 16px; }
.door-img img, .light-img img { display: block; width: 100%; height: auto; }
.door-img img { border-radius: 20px 20px 0 0; }
.door-num.on-img { top: auto; display: none; }
.light-img { margin: 6px 0 4px; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(242, 196, 107, .25); }

/* V9: Lichterdorf als Adventskalender. Lage und Größe setzt app.js (element.style); jedes Türchen ist ein Fensterladen
   mit dem Bildausschnitt als Oberfläche, geöffnet steht er seitlich offen, dahinter das Bild des Tages. */
.mt18 { margin-top: 18px; }
.village { position: relative; margin: 14px -16px 8px; container-type: inline-size; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
@media (min-width: 521px) { .village { margin: 14px 0 8px; border-radius: 18px; } }
.village img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; background: #13244a; }
.vdoor { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; color: #fff4d6; }
.vdoor:focus-visible { outline: none; }
.vdoor:focus-visible .win { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.vdoor .win { position: absolute; display: block; perspective: 260px; border-radius: 42% 42% 3px 3px / 16% 16% 3px 3px; }
.vdoor.arch .win { border-radius: 50% 50% 3px 3px / 30% 30% 3px 3px; }
.vdoor .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 160, .7); }
.vdoor .win::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0;
  box-shadow: inset 0 0 6px 2px rgba(60, 28, 4, .55), 0 0 10px 2px rgba(255, 196, 96, .7); }
.vdoor.open .win::before, .vdoor.going .win::before { opacity: 1; }
.vdoor .leaf { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; z-index: 2;
  background-repeat: no-repeat; transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .75s cubic-bezier(.3, .1, .25, 1), box-shadow .75s; }
.vdoor.arch .leaf { width: 50%; }
.vdoor.arch .leaf.l { border-radius: 100% 0 3px 3px / 30% 0 3px 3px; }
.vdoor.arch .leaf.r { left: 50%; transform-origin: 100% 50%; border-radius: 0 100% 3px 3px / 0 30% 3px 3px; }
/* offen: der Laden steht schräg zur Seite, mit Schatten, wie bei einem Adventskalender aus Pappe */
.vdoor.open .leaf, .vdoor.going .leaf { transform: rotateY(-78deg); box-shadow: inset -8px 0 10px rgba(0, 0, 0, .45), 4px 0 6px rgba(0, 0, 0, .35); }
.vdoor.open.arch .leaf.r, .vdoor.going.arch .leaf.r { transform: rotateY(78deg); box-shadow: inset 8px 0 10px rgba(0, 0, 0, .45), -4px 0 6px rgba(0, 0, 0, .35); }
.vdoor .num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; font-family: var(--serif); font-weight: 600; font-size: 18px; font-size: 4.6cqw; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums;
  text-shadow: 0 0 3px rgba(5, 13, 28, .95), 0 1px 2px rgba(5, 13, 28, .95), 0 0 10px rgba(5, 13, 28, .7); pointer-events: none; transition: opacity .3s, transform .75s cubic-bezier(.3, .1, .25, 1); }
.vdoor.locked .num { color: rgba(255, 236, 196, .8); }
.vdoor.ready .num, .vdoor.today .num { color: #ffe9b0; }
/* offen: die Zahl wandert klein in die Ecke des Bildes */
.vdoor.open .num, .vdoor.going .num { top: auto; left: auto; right: 4%; bottom: 3%; transform: none; font-size: 12px; font-size: 2.6cqw; color: #fffaf0;
  background: rgba(5, 13, 28, .62); border-radius: 4px; padding: 1px 3px; text-shadow: none; }
/* bereit (verpasst oder Prüfmodus): feiner goldener Rahmen; heute: goldener Rahmen, das Fenster glimmt */
.vdoor.ready .win::after, .vdoor.today .win::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; z-index: 4; }
.vdoor.ready .win::after { border: 1.5px solid rgba(255, 220, 150, .6); }
.vdoor.today .win::after { border: 2px solid rgba(255, 232, 170, .95); box-shadow: 0 0 12px rgba(255, 200, 100, .9), inset 0 0 10px rgba(255, 190, 90, .55); animation: vglow 2.6s ease-in-out infinite; }
@keyframes vglow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.vdoor .heart { position: absolute; right: 2%; top: 0; z-index: 5; font-size: 12px; font-size: 2.8cqw; color: #ffc2b3; text-shadow: 0 0 3px rgba(5, 13, 28, .9); pointer-events: none; }
.village-hint { margin: 0 0 16px; }
@media (prefers-reduced-motion: reduce) { .vdoor.today .win::after { animation: none; opacity: .9; } .vdoor .leaf, .vdoor .num { transition: none; } }

/* ---------- V13 (6.11.2026): Seitenaufbau wie auf der Website ----------
   Kopfzeile und Hauptmenü kommen aus site-header.css (aus der Website übernommen).
   Breiten wie auf der Website: Text 42rem, breite Seiten 70rem wie die Kopfzeile, zwei Spalten ab 1000px.
   Die Bausteine: .duo (Bild links, Titel und Inhalt rechts; auf dem Handy untereinander) und .pair (zwei Karten nebeneinander). */
.crumb { display: inline-block; margin: 16px 0 0; padding: 4px 0; font-size: 15px; color: var(--gold-soft); text-decoration: none; }
.crumb:hover, .crumb:focus-visible { text-decoration: underline; }
.desk-only, .home-pic { display: none; }
.duo__pic { margin: 0; }
.book-pic { margin: 22px auto 0; max-width: 190px; }
/* Adventskalender verschenken: gemaltes Bild (V13) */
.gift-pic { margin: 14px -16px 12px; }
.gift-pic img { display: block; width: 100%; height: auto; }
@media (min-width: 521px) { .gift-pic { margin: 14px 0 12px; } .gift-pic img { border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); } }
/* Lichterdorf im Querformat (nur am Computer) */
.village--wide img { aspect-ratio: 2576 / 1451; }
.village--wide .vdoor .num { font-size: 2.35cqw; }
.village--wide .vdoor.open .num, .village--wide .vdoor.going .num { font-size: 1.15cqw; }
.village--wide .vdoor .heart { font-size: 1.3cqw; }
.book-pic img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 14px 36px rgba(0, 0, 0, .55); }
.book-pic img.broken { display: none; }
.duo--book .duo__head { text-align: center; }
.duo--book .duo__head h1 { margin-top: 6px; }
@media (min-width: 760px) {
  main { max-width: calc(42rem + 32px); }
  h1 { font-size: 34px; }
}
@media (min-width: 1000px) {
  body.wide main { max-width: calc(70rem + 32px); }
  body.wide main > :not(.duo):not(.pair):not(.crumb):not(.door-card):not(.cards3) { max-width: 42rem; margin-left: auto; margin-right: auto; }
  .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(36px, 4.5vw, 76px); align-items: start; margin: 22px 0 10px; }
  .duo__head { grid-column: 2; grid-row: 1; }
  .duo__main { grid-column: 2; grid-row: 2; }
  .duo__pic { grid-column: 1; grid-row: 1 / span 2; width: 100%; justify-self: center; position: sticky; top: calc(3.6rem + 22px); } /* V14: Bild bleibt neben dem Text stehen, wie auf der Website */
  .duo__pic > img, .home-pic img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
  /* Hochformat-Bilder: nie höher als der Bildschirm, damit man sie neben dem Formular ganz sieht */
  .home-pic img, .desk-only > img { width: auto; max-width: 100%; max-height: calc(100vh - 3.6rem - 48px); margin-inline: auto; }
  .duo__head > .sp20 { display: none; }
  .desk-only, .home-pic { display: block; }
  .duo h1 { font-size: clamp(32px, 2.7vw, 46px); }
  .duo .lead { font-size: 18.5px; }
  /* Startseite: das gemalte Bild steht links, nicht mehr hinter dem Text */
  .home .home-art { display: none; }
  .home .hero { padding-top: 4px; text-align: left; }
  .home .hero h1 { text-shadow: none; }
  /* Startbild für den Computer (start-hoch, 2:3, ganz durchgemalt); Titel und Knöpfe stehen rechts mittig daneben */
  .duo--home { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; }
  .duo--home .duo__head { grid-row: 2; }
  .duo--home .duo__main { grid-row: 3; margin-top: 10px; }
  .duo--home .duo__pic { grid-row: 1 / span 4; }
  .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; margin: 0 0 14px; }
  .pair > .card { margin: 0; }
  .pair .book { flex-direction: row; align-items: center; gap: 26px; padding: 26px 26px; }
  .pair .book-cover img { width: clamp(170px, 15vw, 220px); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
  .pair .book h2 { font-size: 25px; margin-bottom: 8px; }
  .pair .book .sub { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
  .pair .book .book-more { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--cream); font-weight: 600; font-size: 15px; text-decoration: none; transition: background .2s, color .2s; }
  .pair .book .book-more:hover { background: var(--gold); color: var(--night-deep); }
  /* Adventskalender: das Dorf links, groß; bleibt beim Scrollen stehen, wenn der Bildschirm hoch genug ist */
  .duo--cal { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .duo--cal .village { margin-top: 0; }
  .duo--cal .village-hint { margin-top: 10px; }
  /* mit dem Querformat: Titel mittig, das Dorf über die ganze Breite, darunter zwei Spalten */
  .duo--cal.duo--calwide { display: block; }
  .duo--calwide .duo__head { max-width: 48rem; margin: 0 auto 24px; text-align: center; }
  .duo--cal.duo--calwide .duo__pic { position: static; }
  .duo--calwide .village { margin: 0; border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
  .duo--calwide .village-hint { margin: 12px 0 0; }
  .duo--calwide .duo__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 26px; }
  .duo--calwide .duo__main > .card { margin: 0; }
  /* Türchen: Bild links, Geschichte rechts */
  body[data-page="t"] .door-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; padding: 16px; overflow: clip; margin-top: 22px; }
  body[data-page="t"] .door-img { margin: 0; position: sticky; top: calc(3.6rem + 16px); }
  body[data-page="t"] .door-img img { border-radius: 14px; }
  body[data-page="t"] .door-body { padding: 18px 20px 14px 0; }
  body[data-page="t"] .door-card:not(:has(.door-img)) { display: block; padding: 22px 18px; }
  body[data-page="t"] .door-card:not(:has(.door-img)) .door-body { padding: 0; }
  body[data-page="t"] .door-card h2 { font-size: clamp(26px, 2.2vw, 34px); }
  /* Licht verschenken und Adventskalender verschenken: Bild links, Formular rechts */
  .duo--gift .gift-pic { margin: 0; }
  .duo--gift .gift-pic img { border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); width: auto; max-width: 100%; max-height: calc(100vh - 3.6rem - 48px); margin-inline: auto; }
  .duo--gift .duo__pic, .duo--compose .duo__pic { position: sticky; top: calc(3.6rem + 22px); }
  .duo--gift .duo__head h1, .duo--compose .duo__head h1 { margin-top: 6px; }
  /* Fragen für den Tisch: die Frage groß links */
  .duo--questions .qcard { min-height: 360px; margin: 0; }
  .duo--questions .qcard .q { font-size: clamp(26px, 2.2vw, 34px); }
  /* Erinnerungen: zwei Karten nebeneinander */
  .remind-head { text-align: center; margin-top: 10px; }
  .pair--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pair--even > .card { display: flex; flex-direction: column; }
  .pair--even > .card > p { flex-grow: 1; }
  /* Buch */
  .duo--book { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  .duo--book .duo__head { text-align: left; }
  .book-pic { max-width: 330px; margin: 22px auto 0; }
  .duo__pic.book-pic > img { border-radius: 6px; }
}
@media (min-width: 1000px) and (min-height: 860px) {
  .duo--cal .duo__pic { position: sticky; top: calc(3.6rem + 18px); }
}

/* ---------- V15: installierte App (html.is-app) ----------
   Kopfzeile mit „Erstes Licht“ statt der Website-Marke, Startseite mit den drei Wegen gleich unter der Überschrift. */
html.is-app .site-header .brand span { display: inline; opacity: 1; transform: none; }
html.is-app .brand img { border-radius: 8px; }
html.is-app .home .hero.duo__head { padding-top: calc(min(100vw, 640px) * .62); }
html.is-app .home .hero.duo__head h1 { margin-bottom: 14px; }
.app-intro { padding: 14px 0 0; }
@media (max-width: 380px) { html.is-app .site-header .brand span { font-size: .95rem; } }
@media (min-width: 1000px) { html.is-app .home .hero.duo__head { padding-top: 4px; } .app-intro { text-align: left; } }
/* Sprachwahl im App-Menü (nur auf schmalen Handys sichtbar) */
.app-langs { display: none; }
@media (max-width: 560px) {
  html.is-app #langs { display: none; }
  html.is-app .app-langs { display: flex; gap: 10px; padding: 14px 0 6px; border: 0; }
  .app-langs button { flex: 1; font: inherit; font-weight: 600; letter-spacing: .08em; color: var(--gold, #e7c376); background: transparent;
    border: 1px solid rgba(231, 195, 118, .35); border-radius: 999px; padding: 10px 0; cursor: pointer; }
  .app-langs button[aria-current="true"] { background: rgba(231, 195, 118, .9); color: #10203f; }
}

/* V17: Seite „App installieren“ */
.install-icon { display: block; width: 96px; height: 96px; margin: 6px auto 14px; border-radius: 22px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.install-choices { display: grid; gap: 12px; }
.install-choice, .install-link { display: flex; align-items: center; justify-content: center; gap: 10px; }
.install-choice .ic, .install-link .ic, .install-steps .key { display: inline-flex; }
.install-choice[aria-pressed="true"] { outline: 2px solid rgba(231, 195, 118, .8); outline-offset: 2px; }
.install-panel { margin-top: 14px; }
.install-panel .card { margin: 0; }
.install-steps { margin: 0; padding-left: 1.4em; line-height: 1.65; font-size: 17px; }
.install-steps li + li { margin-top: 8px; }
.install-steps .key { vertical-align: -4px; padding: 1px 6px; margin: 0 2px; border: 1px solid rgba(231, 195, 118, .5); border-radius: 7px; color: var(--gold, #e7c376); font-weight: 700; line-height: 1.2; }
.install-qr { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; text-align: left; }
.install-qr img { width: 180px; height: 180px; border-radius: 12px; background: #fff; }
.install-qr p { flex: 1 1 14rem; margin: 0; }
.install-url { font-weight: 700; color: var(--gold, #e7c376); font-size: 19px; margin: 8px 0 0; }
@media (min-width: 760px) { .install-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* V19: Cover auf der Buchseite als Link zu Amazon */
.book-cover-link { display: block; border-radius: 6px; transition: transform .25s ease; }
.book-cover-link:hover { transform: translateY(-3px); }
.book-pic figcaption { margin-top: 10px; }
.book-pic figcaption .amz-note { opacity: .7; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .book-cover-link, .book-cover-link:hover { transition: none; transform: none; } }

/* V21: Hinweis auf ein angefangenes Licht, Versionsnummer unten im App-Menü (nur im ausklappbaren Menü) */
.kept { margin: 0 0 12px; padding: 10px 14px; border: 1px solid rgba(231, 195, 118, .35); border-radius: 12px; background: rgba(231, 195, 118, .08); font-size: 15px; }
.kept .linkbtn { margin-left: 6px; padding: 0; }
.app-ver { display: none; }
@media (max-width: 1120px) {
  html.is-app .app-ver { display: block; padding: 18px 0 4px; font-size: .8rem; letter-spacing: .04em; opacity: .55; border: 0; }
}

/* V22: „Sofort lesen“ unter dem Umschlag, Uhrzeit für Erinnerungen */
.readnow { display: block; margin: 10px auto 0; font-size: 15px; color: var(--cream); opacity: .8; transition: opacity .3s; }
.readnow.gone { opacity: 0; pointer-events: none; }
.timepick { margin: 4px 0 10px; text-align: left; }
.timepick .lbl { display: block; margin-bottom: 6px; }
.tchips { align-items: center; }
.tchips .chip[aria-pressed="true"] { background: rgba(242, 196, 107, .9); color: #10203f; border-color: transparent; }
.tother { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--faint); }
.input.time { width: auto; min-width: 7.5rem; padding: 7px 10px; margin: 0; font-size: 16px; color-scheme: dark; }
.remind .timepick { text-align: center; }
.remind .tchips { justify-content: center; }

/* V23: Danke sagen, „Meine Lichter“, Hinweis auf neuen Dank */
.thank .thanks { justify-content: center; }
.thank .chip { text-align: center; }
.thank .chip[aria-pressed="true"] { background: rgba(242, 196, 107, .9); color: #10203f; border-color: transparent; }
.thank .ok { font-family: var(--hand); font-size: 24px; line-height: 1.35; color: var(--gold-soft); margin: 6px 0 0; }
.mine-h { margin: 22px 0 10px; font-size: 1.15rem; }
.mine { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mine-item { padding: 14px 16px; margin: 0; }
.mine-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.mine-who { font-weight: 600; }
.mine-date { font-size: 14px; color: var(--faint); white-space: nowrap; }
.mine-st p { margin: 6px 0 0; }
.mine-thx { color: var(--gold-soft); }
.mine-item .btn.sm { margin: 10px 0 0; width: auto; display: inline-flex; }
.mine-item .linkbtn { margin-top: 4px; }
.thanks-new { background: rgba(242, 196, 107, .14); border-color: rgba(242, 196, 107, .55); color: var(--gold-soft); }

/* V24: Ein Licht für jeden Tag */
.day-btn { background: rgba(242, 196, 107, .12); border-color: rgba(242, 196, 107, .55); color: var(--gold-soft); }
.day-head { text-align: center; }
.day-head .kicker { margin-bottom: 2px; }
.day-card h2 { margin: 2px 0 10px; }
.day-card p { margin: 0 0 8px; }
.day-card .btn { margin-top: 10px; }
.day-card .src { margin: 8px 0 0; color: var(--faint); }
.day-card .src a { color: inherit; }
.day-deed { margin: 0 0 16px; }
.day-days ul { margin: 6px 0 0; padding-left: 1.1em; }
.day-days li { margin: 6px 0; }
.day-next { font-family: var(--hand); font-size: 24px; color: var(--gold-soft); margin: 18px 0 10px; }
.cards3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.cards3 > .card { margin: 0; }

/* V24: Code für den Lesestand */
.code-big { font-family: var(--serif, Lora, serif); font-size: 40px; font-weight: 600; letter-spacing: .12em; color: var(--gold-soft); text-align: center; margin: 4px 0 8px; }
.code-restore { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(242, 196, 107, .2); }
.code-row { display: flex; gap: 8px; align-items: center; }
.code-row .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 18px; padding: 10px 12px; }
.code-row .btn { width: auto; margin: 0; white-space: nowrap; }

/* ---------- V25 (7.11.2026): gemaltes Lichtbild beim Empfänger statt der gezeichneten Laterne ----------
   Die Flamme liegt im Querformat (licht, Handy) bei 56 % / 21 %, im Hochformat (licht-hoch, Computer) bei 59,5 % / 23,5 %. */
.light-hero { --fx: 56%; --fy: 21%; position: relative; margin: 8px 0 18px; border-radius: 18px; overflow: hidden; isolation: isolate;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .5), 0 0 0 1px rgba(242, 196, 107, .22); background: #0b1433; }
.light-hero img { display: block; width: 100%; height: auto; transition: filter 1.6s ease; }
.light-hero .flame-glow { position: absolute; left: var(--fx); top: var(--fy); width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 236, 180, .55), rgba(255, 190, 90, .22) 28%, rgba(255, 160, 60, .08) 48%, transparent 66%); animation: glow 3.2s ease-in-out infinite; }
.light-hero .flame-spot { position: absolute; left: var(--fx); top: var(--fy); width: 120px; height: 70px; transform: translate(-50%, -50%); pointer-events: none; }
.light-hero .flame-spot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.light-hero.unlit img { filter: brightness(.38) saturate(.55); }
.light-hero.unlit .flame-glow { opacity: 0; animation: none; }
/* vor dem Entzünden die gemalte Flamme abdunkeln, damit sie wirklich erst mit der Lichtkugel aufleuchtet */
.light-hero::after { content: ""; position: absolute; left: var(--fx); top: var(--fy); width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 1.1s ease;
  background: radial-gradient(circle, rgba(6, 12, 34, .92) 0, rgba(6, 12, 34, .7) 38%, transparent 70%); }
.light-hero.unlit::after { opacity: 1; }
.light-hero.ignite .flame-glow { animation: igniteGlow 1.7s ease-out both, glow 3.2s 1.7s ease-in-out infinite; }
.light-hero.ignite .flame-spot::after { box-shadow: 0 0 0 2px rgba(255, 230, 170, .85), 0 0 30px 6px rgba(255, 200, 110, .5); animation: ring 1.3s ease-out forwards; }
.light-hero .ember { animation-name: emberUp; }
@keyframes emberUp { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -90px) scale(.35); } }
@media (min-width: 1000px) {
  .duo--letter { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  .duo--letter .duo__pic { grid-row: 1 / span 2; }
  .duo--letter .duo__main { grid-row: 1 / span 2; }
  /* feste Größe (2:3), damit die Flamme schon vor dem Laden des Bildes an ihrem Platz ist; sticky wie die anderen Bilder links */
  .light-hero { --fx: 59.5%; --fy: 23.5%; position: sticky; margin: 0; width: min(100%, calc((100vh - 3.6rem - 48px) * 2 / 3)); aspect-ratio: 2 / 3; justify-self: center; border-radius: 24px; }
  .light-hero picture { display: block; height: 100%; }
  .light-hero img { width: 100%; height: 100%; object-fit: cover; }
  .light-hero .flame-glow { width: 80%; }
  .duo--letter .letter { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .light-hero .flame-glow, .light-hero.ignite .flame-glow, .light-hero.ignite .flame-spot::after, .light-hero .ember { animation: none; }
  .light-hero img, .light-hero::after { transition: none; }
}
/* V25: die gezeichneten Zweige am Brief passen nicht zum gemalten Bild darüber */
.duo--letter .letter .sprig { display: none; }
/* V25: der warme Schein gilt für die ganze Fläche, nicht nur für die Textspalte */
main > .warmth { max-width: none !important; margin: 0 !important; }

/* ---------- V26 (08.11.2026): ein paar Sätze mehr in der Kalenderansicht, mit Link zur Seite über den Adventskalender ---------- */
.cal-more { margin-top: .7rem; line-height: 1.55; }
.cal-more a { white-space: nowrap; }

/* V28: der kürzeste Weg zur App nach dem Licht, im geschenkten Kalender und auf „App installieren“ */
.install-card { text-align: center; }
.install-card h2 { margin: 4px 0 6px; }
.install-card .lead { margin: 0 0 14px; }
.install-icon.sm { width: 64px; height: 64px; margin: 2px auto 10px; border-radius: 16px; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.install-go { display: flex; align-items: center; justify-content: center; gap: 10px; }
.install-play svg { flex: none; }
.install-card .install-steps { display: inline-block; text-align: left; margin: 2px auto 10px; max-width: 30rem; }
.install-card .install-first { text-align: left; max-width: 30rem; margin: 0 auto 10px; font-size: 17px; line-height: 1.6; }
.install-first .key { vertical-align: -2px; padding: 1px 6px; margin: 0 2px; border: 1px solid rgba(231, 195, 118, .5); border-radius: 7px; color: var(--gold, #e7c376); font-weight: 700; }
.install-card #instcopy { margin: 0 auto 10px; }
.install-card .install-why { max-width: 30rem; margin: 12px auto 0; padding-top: 12px; border-top: 1px solid rgba(242, 196, 107, .18); }
.install-card .install-qr { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(242, 196, 107, .18); }
.install-card .install-qr img { width: 140px; height: 140px; }
.install-other { font-size: 18px; margin: 22px 0 10px; text-align: center; }
@media (min-width: 760px) { .install-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- V29 (Bernd, 9.11.2026): Bücher groß und gut erkennbar ----------
   Handy: Cover groß und mittig über dem Text (beide Karten gleich); Computer: Cover links neben Titel und Text.
   Startseite der App: Der Einleitungstext trägt die Klasse hero und erbte den Bildabstand – das gab eine große leere Fläche. */
.home .hero.app-intro { padding-top: 14px; }
.hwf-cover { display: block; border-radius: 6px; transition: transform .25s ease; }
.hwf-cover img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.hwf-cover:hover, .hwf-cover:focus-visible { transform: translateY(-3px) rotate(-1deg); }
.hwf-cover:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }
@media (max-width: 999px) {
  .card.book { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .card.book .book-cover, .hwf-cover { width: min(58vw, 230px); margin: 4px auto 0; }
  .card.book .book-cover img { width: 100%; height: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
  .card.book h2 { font-size: 23px; }
  .card.book .sub { font-size: 15.5px; line-height: 1.5; margin-bottom: 14px; }
  .card.book .book-more { padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; color: var(--cream); font-weight: 600; font-size: 15px; text-decoration: none; }
  .hwf-cover { margin-bottom: 20px; }
  .hwf .eyebrow, .hwf h2 { text-align: center; }
  .book-pic { max-width: min(76vw, 340px); }
}
@media (min-width: 1000px) {
  .card.hwf--cover { display: grid; grid-template-columns: clamp(150px, 12vw, 190px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; align-content: start; }
  .card.hwf--cover > * { grid-column: 2; }
  .card.hwf--cover > .hwf-cover { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .card.hwf--cover > .nl, .card.hwf--cover > .mt12, .card.hwf--cover > a.btn { grid-column: 1 / -1; }
}

/* ---------- V30 (Bernd, 9.11.2026): Lichter auf „Dein Licht für heute“ ----------
   Gemaltes Licht (img/tageslicht.webp, mit Transparenz) links und rechts der Überschrift; auf dem Handy kleiner neben dem Datum.
   Ablauf: links entzündet sich, flammt auf, beruhigt sich – das rechte folgt (weitergegeben). Danach: Kern flackert, Schein dreht sich langsam, Funken steigen. */
.day-row { display: flex; align-items: center; justify-content: center; }
.day-row > h1, .day-row > .kicker { margin-left: 0; margin-right: 0; position: relative; z-index: 1; }
.dl { position: relative; flex: none; display: none; opacity: 0; animation: dl-on 1.5s cubic-bezier(.2, .7, .2, 1) .45s forwards; pointer-events: none; }
.dl--r { animation-delay: 1.35s; }
.dl--m { width: 88px; height: 88px; margin: -30px -10px -30px -14px; }
.dl--r.dl--m { margin: -30px -14px -30px -10px; }
.dl--d { width: clamp(150px, 13vw, 200px); aspect-ratio: 1; margin: -60px -24px -60px -34px; }
.dl--r.dl--d { margin: -60px -34px -60px -24px; }
.dl--m { display: block; }
@media (min-width: 700px) { .dl--m { display: none; } .dl--d { display: block; } }
@media (max-width: 380px) { .dl--m { width: 64px; height: 64px; margin: -22px -6px -22px -8px; } .dl--r.dl--m { margin: -22px -8px -22px -6px; } }  /* V39: auf schmalen Handys ragte das rechte Licht über den Rand */
.dl__fl { position: absolute; inset: 0; animation: dl-flicker 2.7s ease-in-out infinite; }
.dl--r .dl__fl { animation-duration: 3.3s; animation-delay: -1.1s; }
.dl__fl img { display: block; width: 100%; height: 100%; animation: dl-turn 48s linear infinite; will-change: transform; }
.dl--r .dl__fl img { animation-direction: reverse; animation-duration: 56s; }
.dl::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 90, .38), rgba(255, 170, 60, 0) 70%); animation: dl-breathe 5.5s ease-in-out infinite; }
.dl--r::before { animation-delay: -2.4s; }
.dl i { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #ffd98a; box-shadow: 0 0 6px 2px rgba(255, 190, 80, .7); opacity: 0; animation: dl-spark 5.2s ease-out infinite; }
.dl i:nth-of-type(1) { --dx: -18px; animation-delay: 2.2s; }
.dl i:nth-of-type(2) { --dx: 14px; animation-delay: 4s; animation-duration: 6.1s; }
.dl i:nth-of-type(3) { --dx: 4px; animation-delay: 6.3s; animation-duration: 5.6s; }
.dl--r i:nth-of-type(1) { animation-delay: 3.1s; }
.dl--r i:nth-of-type(2) { animation-delay: 5.2s; }
.dl--r i:nth-of-type(3) { animation-delay: 7.4s; }
.dl--m i { width: 2px; height: 2px; margin: -1px; box-shadow: 0 0 4px 1px rgba(255, 190, 80, .7); }
@keyframes dl-on {
  0% { opacity: 0; transform: scale(.25); }
  30% { opacity: 1; transform: scale(1.22); }
  55% { transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); }
}
/* Aufflammen: warmer goldweißer Blitz über dem Licht (statt Helligkeitsfilter, der die Farbe ins Gelbgrüne kippen ließ) */
.dl::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 246, 225, .95) 0%, rgba(255, 214, 140, .7) 22%, rgba(255, 170, 70, .25) 48%, rgba(255, 150, 50, 0) 70%);
  animation: dl-flash 1.5s ease-out .45s forwards; }
.dl--r::after { animation-delay: 1.35s; }
@keyframes dl-flash { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1); } }
@keyframes dl-flicker {
  0% { opacity: 1; transform: scale(1); }
  9% { opacity: .84; transform: scale(.972); }
  15% { opacity: 1; transform: scale(1.018); }
  27% { opacity: .91; transform: scale(.99); }
  36% { opacity: 1; transform: scale(1.03); }
  48% { opacity: .87; transform: scale(.982); }
  57% { opacity: .97; transform: scale(1.008); }
  69% { opacity: .9; transform: scale(.986); }
  81% { opacity: 1; transform: scale(1.022); }
  92% { opacity: .93; transform: scale(.995); }
}
@keyframes dl-turn { to { transform: rotate(360deg); } }
@keyframes dl-breathe { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes dl-spark {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 1; }
  70% { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -78px); }
}
.dl--m i { animation-name: dl-spark-m; }
@keyframes dl-spark-m { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--dx, 0px) * .4), -34px); } }
@media (prefers-reduced-motion: reduce) {
  .dl, .dl__fl, .dl__fl img, .dl::before { animation: none; opacity: 1; }
  .dl::after { display: none; }
  .dl i { display: none; }
}
@media (min-width: 700px) { .day-head .lead { margin-top: 20px; } }

/* ---------- V31/V32 (Bernd, 9.11.2026): Startbild lebt – Kerzen flackern, Rauch steigt ----------
   V31 hellte nur die gemalten Flammen auf – gemessen änderten sich nur 1–5 von 255 Helligkeitsstufen, nicht sichtbar.
   V32: Über jeder gemalten Flamme steht eine eigene gezeichnete Flamme (.fx-flame, deckend, etwas größer), die sich streckt, duckt und neigt;
   dahinter pulsiert der Lichtschein im Glas (.fx-glow, mix-blend-mode: screen). Rauch: kräftigere Schwaden, die über den gemalten Rauch hinaus steigen.
   V33 (Bernd, 20:16): Schein etwas ruhiger; Rauch verschwindet hinter den Zweigen – Maske img/rauch-maske-q.png / -h.png, aus dem Bild berechnet
   (Himmel sichtbar, von oben hängende Zweige verdecken).
   .art-fx liegt genau über dem Bild (Handy: in .home-art, Computer: in .art-box). Lage in Prozent der Bildbreite/-höhe (start.webp, start-hoch.webp). */
.art-fx { position: absolute; inset: 0; pointer-events: none; }
.home-art { overflow: hidden; }
.art-box { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; }
.fx-glow { position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) * var(--gs, 6)); aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 205, 120, .85) 0%, rgba(255, 170, 70, .42) 22%, rgba(255, 140, 40, .13) 45%, rgba(255, 130, 30, 0) 67%);
  transform: translate(-50%, -50%); animation: fx-glow 1.9s ease-in-out infinite; }
.fx-flame { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--ar); transform: translate(-50%, -50%); }
.fx-flame::before { content: ""; position: absolute; inset: 0; transform-origin: 50% 96%;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100' preserveAspectRatio='none'><defs><radialGradient id='g' cx='50%25' cy='72%25' r='62%25' fx='50%25' fy='78%25'><stop offset='0' stop-color='%23fffef8'/><stop offset='.32' stop-color='%23fff4cc'/><stop offset='.58' stop-color='%23ffdb7e'/><stop offset='.82' stop-color='%23ffb24a'/><stop offset='1' stop-color='%23ff9433' stop-opacity='.55'/></radialGradient></defs><path d='M20 0C24 20 37 40 37 63C37 84 29.5 100 20 100C10.5 100 3 84 3 63C3 40 16 20 20 0Z' fill='url(%23g)'/></svg>") center / 100% 100% no-repeat;
  filter: blur(.45px); animation: fx-flame 1.05s ease-in-out infinite; }
.fx--kl.fx-glow { animation-delay: -.7s; animation-duration: 2.2s; }
.fx--kl.fx-flame::before { animation-delay: -.35s; animation-duration: 1.2s; }
.fx--kr.fx-glow { animation-delay: -1.3s; animation-duration: 2.5s; }
.fx--kr.fx-flame::before { animation-delay: -.8s; animation-duration: .95s; }
.fx--zaun.fx-glow { animation-delay: -.4s; animation-duration: 2.8s; }
.fx--zaun.fx-flame::before { animation-delay: -.55s; animation-duration: 1.3s; }
@keyframes fx-flame {
  0%, 100% { transform: translateX(0) scale(1, 1) skewX(0deg); opacity: .95; }
  9% { transform: translateX(-3%) scale(.92, 1.24) skewX(-7deg); opacity: 1; }
  21% { transform: translateX(2%) scale(1.06, .9) skewX(5deg); opacity: .88; }
  33% { transform: translateX(4%) scale(.9, 1.3) skewX(8deg); opacity: 1; }
  46% { transform: translateX(-1%) scale(1.04, .93) skewX(-3deg); opacity: .9; }
  58% { transform: translateX(-4%) scale(.93, 1.18) skewX(-8deg); opacity: 1; }
  71% { transform: translateX(1%) scale(1.07, .92) skewX(4deg); opacity: .86; }
  84% { transform: translateX(3%) scale(.95, 1.14) skewX(6deg); opacity: 1; }
}
@keyframes fx-glow {
  0%, 100% { opacity: .52; transform: translate(-50%, -50%) scale(1); }
  12% { opacity: .9; transform: translate(-50%, -50%) scale(1.09); }
  24% { opacity: .24; transform: translate(-50%, -50%) scale(.92); }
  39% { opacity: .82; transform: translate(-50%, -50%) scale(1.05); }
  53% { opacity: .3; transform: translate(-50%, -50%) scale(.94); }
  68% { opacity: .9; transform: translate(-50%, -50%) scale(1.08); }
  82% { opacity: .22; transform: translate(-50%, -50%) scale(.92); }
}
/* Rauch: sechs Schwaden steigen nacheinander aus dem Schornstein, werden größer, verwehen und steigen über den gemalten Rauch hinaus */
.fx-smoke { position: absolute; left: var(--sx); bottom: calc(100% - var(--sy)); width: var(--sw); height: var(--sh); transform: translateX(-50%); mix-blend-mode: screen;
  -webkit-mask: var(--sm) 0 0 / 100% 100% no-repeat; mask: var(--sm) 0 0 / 100% 100% no-repeat; }
.fx-smoke i { position: absolute; left: 50%; bottom: 0; width: 40%; aspect-ratio: 1.2; margin-left: -20%; border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse, rgba(240, 245, 255, .82) 0%, rgba(224, 233, 255, .45) 32%, rgba(208, 222, 255, .12) 52%, rgba(205, 220, 255, 0) 68%); filter: blur(2.5px);
  animation: fx-smoke 6.4s cubic-bezier(.3, .1, .6, 1) infinite; --k: 1; --o: 1; }
/* unregelmäßige Schübe: verschiedene Abstände, Größen und Dichten */
.fx-smoke i:nth-child(2) { animation-delay: -1.1s; --k: .7; --o: .55; }
.fx-smoke i:nth-child(3) { animation-delay: -1.7s; --k: 1.15; --o: .9; }
.fx-smoke i:nth-child(4) { animation-delay: -3.3s; --k: .85; --o: .7; }
.fx-smoke i:nth-child(5) { animation-delay: -4.2s; --k: 1.05; --o: 1; }
.fx-smoke i:nth-child(6) { animation-delay: -5.4s; --k: .75; --o: .6; }
.fx-smoke i:nth-child(n+7) { display: none; }
@keyframes fx-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(calc(.3 * var(--k))); }
  9% { opacity: var(--o); }
  30% { transform: translate(12%, calc(var(--rise) * .3)) scale(calc(.6 * var(--k))); }
  55% { opacity: calc(var(--o) * .8); transform: translate(-16%, calc(var(--rise) * .58)) scale(calc(.95 * var(--k))); }
  80% { opacity: calc(var(--o) * .4); transform: translate(-36%, calc(var(--rise) * .82)) scale(calc(1.3 * var(--k))); }
  100% { opacity: 0; transform: translate(-54%, var(--rise)) scale(calc(1.6 * var(--k))); }
}
/* Lage – Handy (start.webp, 1080 × 1620): --w Breite der gezeichneten Flamme (deckt die gemalte ganz ab), --gs Größe des Scheins */
.art-fx--q .fx--lat { --x: 50.83%; --y: 18.7%; --w: 3.3%; --ar: .5; --gs: 6.5; }
.art-fx--q .fx--kl { --x: 24.35%; --y: 3.65%; --w: 1.85%; --ar: .5; --gs: 5.6; }
.art-fx--q .fx--kr { --x: 83.52%; --y: 3.2%; --w: 1.8%; --ar: .46; --gs: 5.6; }
.art-fx--q .fx-smoke { --sx: 25%; --sy: 27.6%; --sw: 26%; --sh: 19.6%; --rise: -230%; --sm: url(img/rauch-maske-q.png); }
/* Lage – Computer (start-hoch.webp, 1024 × 1536) */
.art-fx--h .fx--lat { --x: 49.9%; --y: 22.7%; --w: 3.2%; --ar: .5; --gs: 6.5; }
.art-fx--h .fx--kl { --x: 23.44%; --y: 6.55%; --w: 2.05%; --ar: .5; --gs: 5.6; }
.art-fx--h .fx--kr { --x: 85.55%; --y: 6.35%; --w: 2.05%; --ar: .5; --gs: 5.6; }
.art-fx--h .fx--zaun { --x: 77.05%; --y: 56.85%; --w: 2.4%; --ar: .58; --gs: 6; }
.art-fx--h .fx-smoke { --sx: 23.63%; --sy: 39.3%; --sw: 28%; --sh: 26%; --rise: -290%; --sm: url(img/rauch-maske-h.png); }
@media (min-width: 1000px) {
  .home-pic .art-box { border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
  .home-pic .art-box img { box-shadow: none; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .art-fx { display: none; } }

/* ---------- V34 (Bernd, 9.11.2026): Kalenderbild lebt – alle Laternen flackern, der große Stern funkelt ----------
   Gleiche Flammen wie im Startbild (.fx-flame, .fx-glow), nur kleiner; jede Laterne mit eigenem Takt (--d1/--t1 Flamme, --d2/--t2 Schein, aus app.js).
   Stern (.fx-star): weicher Schein (b), lange Strahlen (i.r1) und kurze schräge Strahlen (i.r2), die sich unabhängig strecken, drehen und aufblitzen.
   Die Ebene liegt über dem Bild und unter den Türchen (im HTML davor), Klicks gehen durch. */
.art-fx--dorf .fx-flame::before { animation-delay: var(--d1, 0s); animation-duration: var(--t1, 1.05s); }
.art-fx--dorf .fx-glow { animation-delay: var(--d2, 0s); animation-duration: var(--t2, 2.2s); }
.art-fx--hoch .fx-flame { --w: 1.15%; --ar: .62; }
.art-fx--hoch .fx-glow { --w: 1.15%; --gs: 5.5; }
.art-fx--quer .fx-flame { --w: .62%; --ar: .62; }
.art-fx--quer .fx-glow { --w: .62%; --gs: 5.5; }
.fx-star { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; transform: translate(-50%, -50%); mix-blend-mode: screen; }
.art-fx--hoch .fx-star { --s: 11%; }
.art-fx--quer .fx-star { --s: 6.4%; }
.fx-star b { position: absolute; inset: 30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 225, .95) 0%, rgba(255, 214, 130, .5) 30%, rgba(255, 190, 90, 0) 70%);
  animation: fx-star-glow 2.9s ease-in-out infinite; }
.fx-star i { position: absolute; inset: 0; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><radialGradient id='g' cx='50%25' cy='50%25' r='50%25'><stop offset='0' stop-color='%23ffffff'/><stop offset='.12' stop-color='%23fff6d8'/><stop offset='.4' stop-color='%23ffd47a' stop-opacity='.85'/><stop offset='1' stop-color='%23ffb347' stop-opacity='0'/></radialGradient></defs><path d='M50 0 L52 46 L100 50 L52 54 L50 100 L48 54 L0 50 L48 46 Z' fill='url(%23g)'/></svg>") center / 100% 100% no-repeat; }
.fx-star .r1 { animation: fx-star-long 3.4s ease-in-out infinite; }
.fx-star .r2 { inset: 16%; transform: rotate(45deg); opacity: .8; animation: fx-star-short 4.6s ease-in-out infinite; }
@keyframes fx-star-long {
  0%, 100% { transform: scale(.82); opacity: .55; }
  14% { transform: scale(1.12); opacity: 1; }
  28% { transform: scale(.9); opacity: .65; }
  46% { transform: scale(1.04); opacity: .9; }
  60% { transform: scale(.8); opacity: .5; }
  78% { transform: scale(1.22); opacity: 1; }
  88% { transform: scale(.92); opacity: .7; }
}
@keyframes fx-star-short {
  0%, 100% { transform: rotate(45deg) scale(.7); opacity: .35; }
  22% { transform: rotate(52deg) scale(1.05); opacity: .9; }
  45% { transform: rotate(40deg) scale(.8); opacity: .45; }
  67% { transform: rotate(49deg) scale(1.12); opacity: 1; }
  84% { transform: rotate(43deg) scale(.75); opacity: .4; }
}
@keyframes fx-star-glow { 0%, 100% { transform: scale(.85); opacity: .5; } 30% { transform: scale(1.15); opacity: 1; } 55% { transform: scale(.9); opacity: .6; } 80% { transform: scale(1.1); opacity: .95; } }

/* ---------- V35 (Bernd, 9.11.2026): Lichtbild beim Empfänger – beide Flammen flackern; Unterschrift im Brief ----------
   .lh-fl steht mit dem Fuß am Docht (--bx/--by, Prozent des Bildes), Höhe --h und Breite --w, geneigt um --r wie die gemalte Flamme.
   a = große Flamme der linken Kerze, b = kleine Flamme der rechten Kerze (Handy: wird gerade entzündet und neigt sich zur großen; Computer: brennt schon).
   Erst nach dem Entzünden sichtbar (nicht bei .unlit). Gleiche Flammenform und gleiches Flackern wie im Start- und Kalenderbild. */
.lh-fl { position: absolute; left: var(--bx); top: var(--by); width: var(--w); height: var(--h); transform: translate(-50%, -100%) rotate(var(--r)); transform-origin: 50% 100%;
  pointer-events: none; mix-blend-mode: screen; opacity: .9; transition: opacity 1.2s ease .5s; }
.lh-fl::before { content: ""; position: absolute; inset: 0; transform-origin: 50% 96%;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100' preserveAspectRatio='none'><defs><radialGradient id='g' cx='50%25' cy='72%25' r='62%25' fx='50%25' fy='78%25'><stop offset='0' stop-color='%23fffef8'/><stop offset='.32' stop-color='%23fff4cc'/><stop offset='.58' stop-color='%23ffdb7e'/><stop offset='.82' stop-color='%23ffb24a'/><stop offset='1' stop-color='%23ff9433' stop-opacity='.55'/></radialGradient></defs><path d='M20 0C24 20 37 40 37 63C37 84 29.5 100 20 100C10.5 100 3 84 3 63C3 40 16 20 20 0Z' fill='url(%23g)'/></svg>") center / 100% 100% no-repeat;
  filter: blur(.8px); animation: fx-flame 1.15s ease-in-out infinite; }
.lh-fl--b::before { animation-duration: .95s; animation-delay: -.4s; }
.light-hero.unlit .lh-fl { opacity: 0; transition: none; }
/* Handy: licht.webp 1200 × 900 */
.lh-fl--a { --bx: 54.9%; --by: 26.4%; --w: 4.6%; --h: 18.5%; --r: 6deg; }
.lh-fl--b { --bx: 60.3%; --by: 29.6%; --w: 1.6%; --h: 6.2%; --r: -26deg; }
@media (min-width: 1000px) {
  /* Computer: licht-hoch.webp 1024 × 1536 */
  .lh-fl--a { --bx: 58.1%; --by: 24.4%; --w: 4.9%; --h: 10.2%; --r: 15deg; }
  .lh-fl--b { --bx: 62.2%; --by: 27.3%; --w: 3.4%; --h: 6.2%; --r: 0deg; }
}
@media (prefers-reduced-motion: reduce) { .lh-fl::before { animation: none; } }
/* Unterschrift: rechts, aber etwas eingerückt und leicht schräg wie von Hand gesetzt (getestet mit kurzem, mittlerem und langem Text) */
.letter .from { text-align: left; margin-left: auto; width: fit-content; max-width: 100%; padding-right: 12%; transform: rotate(-2deg); transform-origin: 100% 50%; }

/* ---------- V36 (Bernd, 9.11.2026): Lichtbild im Hochformat (licht-hoch 1024 × 1536) lebt ----------
   Stern oben rechts funkelt, zwei Laternen am Zaun flackern, aus vier Schornsteinen steigt Rauch (ohne Maske: darüber ist freier Himmel).
   Im Brief (.light-hero) nur ab 1000 px (darunter steht das Querformat) und erst nach dem Entzünden; auf „Licht schreiben“ im Bild am Computer,
   dort flackern auch die beiden Kerzenflammen (.lh-fl, Lage aus V35). */
.light-hero .art-fx--lh { display: none; transition: opacity 1.4s ease .6s; }
.light-hero.unlit .art-fx--lh { opacity: 0; transition: none; }
@media (min-width: 1000px) {
  .light-hero .art-fx--lh { display: block; }
  .desk-only .art-box { border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
  .desk-only .art-box img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 3.6rem - 48px); border-radius: 0; box-shadow: none; }
}
.art-fx--lh .fx-smoke { -webkit-mask: none; mask: none; }
.art-fx--lh .fx--s1 { --sx: 13.9%; --sy: 57.4%; --sw: 13%; --sh: 11%; --rise: -360%; }
.art-fx--lh .fx--s2 { --sx: 28.5%; --sy: 60.9%; --sw: 12%; --sh: 12%; --rise: -440%; }
.art-fx--lh .fx--s2 i { animation-duration: 7.2s; }
.art-fx--lh .fx--s3 { --sx: 54.3%; --sy: 58.6%; --sw: 8%; --sh: 7%; --rise: -360%; }
.art-fx--lh .fx--s3 i { animation-duration: 5.6s; }
.art-fx--lh .fx--s4 { --sx: 84.2%; --sy: 63.6%; --sw: 7%; --sh: 3.6%; --rise: -95%; }
.art-fx--lh .fx--s4 i { animation-duration: 6.6s; }
.art-fx--lh .fx--lg { --x: 65.34%; --y: 73.9%; --w: 1.5%; --ar: .62; --gs: 6; }
.art-fx--lh .fx--lk { --x: 56.79%; --y: 75.07%; --w: 1%; --ar: .62; --gs: 6; }
.art-fx--lh .fx-glow.fx--lk { animation-delay: -.9s; animation-duration: 2.6s; }
.art-fx--lh .fx-flame.fx--lk::before { animation-delay: -.5s; animation-duration: 1.2s; }
.art-fx--lh .fx-star { --x: 85.18%; --y: 8.07%; --s: 9%; }
@media (prefers-reduced-motion: reduce) { .light-hero .art-fx--lh, .desk-only .art-fx--lh { display: none; } }

/* ---------- V37 (Bernd, 9.11.2026): weitere Belebung ----------
   1 Bild „Adventskalender verschenken“, 2 Türchenbilder, 3 Kerzenreihe, 4 Fragekarte (in app.js), 5 Zähler, 6 Meine Lichter. */
/* 1 – Schenken: Ebene --gq zum Querformat (Handy, schenken 1536 × 1024), --gh zum Hochformat (Computer, schenken-hoch 1024 × 1536) */
.gift-pic .art-box { position: relative; width: 100%; overflow: hidden; }
@media (min-width: 521px) { .gift-pic .art-box { border-radius: 18px; } }
.art-fx--gh { display: none; }
@media (min-width: 1000px) {
  .duo--gift .gift-pic .art-box { width: fit-content; max-width: 100%; margin-inline: auto; border-radius: 24px; }
  .art-fx--gq { display: none; }
  .art-fx--gh { display: block; }
}
.art-fx--gift .fx-smoke { -webkit-mask: none; mask: none; }
.art-fx--gq .fx--lat { --x: 6.71%; --y: 81.2%; --w: 1.9%; --ar: .55; --gs: 6; }
.art-fx--gq .fx--st { --x: 82.76%; --y: 4.33%; --s: 6%; }
.art-fx--gq .fx--bow { --x: 52.18%; --y: 28.3%; --s: 4.2%; }
.art-fx--gq .fx-smoke { --sx: 76.9%; --sy: 22.6%; --sw: 6%; --sh: 5%; --rise: -150%; }
.art-fx--gh .fx--lat { --x: 13.53%; --y: 87.5%; --w: 2.6%; --ar: .55; --gs: 6; }
.art-fx--gh .fx--st { --x: 78.02%; --y: 5.81%; --s: 9%; }
.art-fx--gh .fx--bow { --x: 50.19%; --y: 30.3%; --s: 6%; }
.art-fx--gh .fx-smoke { --sx: 76.65%; --sy: 19.6%; --sw: 9%; --sh: 5%; --rise: -170%; }
.fx-star.fx--bow .r1 { animation-duration: 2.6s; animation-delay: -1.2s; }
.fx-star.fx--bow .r2 { animation-duration: 3.8s; }
.fx-star.fx--bow b { animation-duration: 2.2s; }
/* 2 – Türchenbilder: Lage und Breite je Flamme aus DOOR_FX (app.js); Schein etwas zarter, weil die Bilder schon warm sind */
.door-img { position: relative; }
.door-img .art-fx { overflow: hidden; border-radius: 20px 20px 0 0; }
.art-fx--door .fx-flame { --ar: .55; }
.art-fx--door .fx-glow { --gs: 5; background: radial-gradient(circle, rgba(255, 210, 130, .6) 0%, rgba(255, 175, 80, .26) 22%, rgba(255, 140, 40, .08) 45%, rgba(255, 130, 30, 0) 66%); }
.art-fx--door .fx-glow.fx-g { --gs: 6.5; }
@media (min-width: 1000px) { body[data-page="t"] .door-img .art-fx { border-radius: 14px; } }
/* 3 – Kerzenreihe: brennende Kerzen flackern, jede im eigenen Takt; eine neue entzündet sich */
.candles i.on { transform-origin: 50% 92%; animation: cnd-flick 1.3s ease-in-out infinite; }
.candles i.on:nth-child(3n) { animation-duration: 1.55s; animation-delay: -.4s; }
.candles i.on:nth-child(3n+1) { animation-duration: 1.15s; animation-delay: -.8s; }
.candles i.on:nth-child(4n) { animation-delay: -.2s; }
.candles i.on.new { animation: cnd-ignite 1.5s cubic-bezier(.2, .7, .2, 1) .5s both, cnd-flick 1.3s ease-in-out 2s infinite; }
@keyframes cnd-flick { 0%, 100% { transform: scale(1, 1); opacity: 1; } 20% { transform: scale(.9, 1.12) skewX(-4deg); } 40% { transform: scale(1.05, .92); opacity: .85; } 60% { transform: scale(.94, 1.08) skewX(3deg); opacity: 1; } 80% { transform: scale(1.03, .95); opacity: .9; } }
@keyframes cnd-ignite {
  0% { opacity: .12; transform: scale(.5); filter: none; }
  35% { opacity: 1; transform: scale(1.6, 1.8); filter: drop-shadow(0 0 10px rgba(255, 214, 130, 1)) drop-shadow(0 0 4px #fff); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 196, 80, .9)); }
}
/* 5 – Zähler: am Ende ein goldenes Aufleuchten */
.counter b.done { animation: cnt-glow 1.4s ease-out; }
@keyframes cnt-glow { 0% { text-shadow: 0 0 0 rgba(255, 210, 120, 0); } 30% { text-shadow: 0 0 14px rgba(255, 210, 120, .95), 0 0 4px rgba(255, 240, 200, .9); color: #fff3d2; } 100% { text-shadow: 0 0 0 rgba(255, 210, 120, 0); } }
/* 6 – Meine Lichter: ein kleines atmendes Licht, solange die Liste leer ist; jedes Licht in der Liste mit kleiner Flamme */
.mine-light { display: block; width: 92px; height: 92px; margin: -6px auto 2px; animation: ml-breathe 4.2s ease-in-out infinite; }
.mine-light img { display: block; width: 100%; height: 100%; }
@keyframes ml-breathe { 0%, 100% { transform: scale(.92); opacity: .78; } 50% { transform: scale(1.06); opacity: 1; } }
.mine-fl { display: inline-block; width: 9px; height: 15px; margin: 0 8px -1px 0; vertical-align: baseline; transform-origin: 50% 92%;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100' preserveAspectRatio='none'><defs><radialGradient id='g' cx='50%25' cy='72%25' r='62%25' fx='50%25' fy='78%25'><stop offset='0' stop-color='%23fffef8'/><stop offset='.32' stop-color='%23fff4cc'/><stop offset='.58' stop-color='%23ffdb7e'/><stop offset='.82' stop-color='%23ffb24a'/><stop offset='1' stop-color='%23ff9433' stop-opacity='.55'/></radialGradient></defs><path d='M20 0C24 20 37 40 37 63C37 84 29.5 100 20 100C10.5 100 3 84 3 63C3 40 16 20 20 0Z' fill='url(%23g)'/></svg>") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 190, 80, .8)); animation: cnd-flick 1.25s ease-in-out infinite; }
.mine-item:nth-child(2n) .mine-fl { animation-duration: 1.45s; animation-delay: -.5s; }
@media (prefers-reduced-motion: reduce) {
  .candles i.on, .candles i.on.new, .counter b.done, .mine-light, .mine-fl { animation: none; }
}

/* ---------- V39 vom 10.11.2026: Prüfbericht umgesetzt ---------- */
/* Erinnerungen: drei Karten nebeneinander, Uhrzeitwahl überall mittig */
.cards3 .timepick { text-align: center; }
.cards3 .tchips { justify-content: center; }
@media (min-width: 1000px) { .cards3 { margin-top: 8px; } }
/* Tippflächen: Satzanfänge, Uhrzeiten und Text-Knöpfe mindestens 44 px hoch */
.chip { min-height: 44px; display: inline-flex; align-items: center; }
.linkbtn { padding: 11px 0; }
.kept .linkbtn { padding: 0; }
/* Satzanfänge auf dem Handy in einer Zeile zum Wischen – das Schreibfeld rückt nach oben */
@media (max-width: 759px) {
  .chips--row { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 6px 0; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .chips--row::-webkit-scrollbar { display: none; }
  .chips--row .chip { flex: none; white-space: nowrap; scroll-snap-align: start; }
}
/* Nach dem Verschicken */
.sentbox { text-align: center; margin: 0 0 16px; padding: 14px 14px 6px; border-radius: 16px; background: linear-gradient(160deg, rgba(242, 196, 107, .16), rgba(242, 196, 107, .05)); border: 1px solid rgba(242, 196, 107, .45); animation: sent-in .5s cubic-bezier(.2, .7, .2, 1); }
.sentbox .sent-t { margin: 0 0 2px; font-family: var(--serif); font-size: 21px; color: var(--gold-soft); }
.sentbox .small { margin: 0 0 10px; }
.mine-light.sent-light { width: 64px; height: 64px; margin: -8px auto -2px; }
@keyframes sent-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
/* Gemaltes Licht statt der Strich-Laterne (Laden, Fehler, gesperrtes Türchen, Kalender bereit) */
.mine-light.big { width: 150px; height: 150px; margin: 6px auto 4px; }
/* Meine Lichter */
.mine-act { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 2px; }
.mine-item .mine-act .linkbtn { margin-top: 0; }
.linkbtn.sure { color: #ffb4a8; }
.mine-link { display: flex; align-items: center; justify-content: center; }
.mine-link .mine-fl { margin-right: 10px; }
/* Geschenkter Kalender: das Geschenk steht ganz oben */
.banner--top { margin: 18px 0 4px; }
/* Über diese App: ein Gedanke je Zeile */
.info-list { margin: 14px 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--muted); }
.info-list li { position: relative; padding-left: 22px; }
.info-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(242, 196, 107, .7); }
@media (prefers-reduced-motion: reduce) { .sentbox { animation: none; } }

/* ---------- V39 (Bernd, 10.11.2026): „Dein Licht für heute“ am Computer – Sternenhimmel mit Kalenderblatt ---------- */
.day-pic { margin: 0; }
.day-days--one { }
@media (min-width: 1000px) {
  .duo--day { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
  .duo--day .day-head h1 { margin: 2px 0 8px; }
  .duo--day .day-head .lead { margin-bottom: 18px; }
  .duo--day .day-deed, .duo--day .day-days--one { display: none; }   /* stehen auf dem Kalenderblatt */
  .duo--day #daybody > .card:first-child { margin-top: 0; }
}
.sky { position: relative; height: calc(100vh - 3.6rem - 152px); min-height: 500px; max-height: 800px; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  background: radial-gradient(ellipse 90% 55% at 50% 100%, rgba(245, 166, 35, .3), rgba(245, 166, 35, 0) 70%), linear-gradient(180deg, #0d2757 0%, #0a1c40 55%, #06112a 100%); }
.sky-art { position: absolute; container-type: size; }
.sky-bg { display: block; width: 100%; height: 100%; }
.sky-stars { position: absolute; inset: 0; }
.sky-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #9db4e6; opacity: .24; transform: translate(-50%, -50%); }
.sky-stars i.old { background: #e2c58c; opacity: .5; }
.sky-stars i.on { background: #fff3d2; opacity: 1; box-shadow: 0 0 5px 1.5px rgba(255, 213, 130, .5); }
.sky-stars i.tw { animation: st-tw 6s ease-in-out infinite; }
.sky-stars i.now { width: 40px !important; height: 40px !important; opacity: 1; background: radial-gradient(circle, rgba(255, 200, 100, .62), rgba(255, 200, 100, 0) 66%); animation: st-now 3.2s ease-in-out infinite; }
.sky-stars i.now::before { content: ""; position: absolute; inset: 14%; background: #fff6dc; -webkit-clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@keyframes st-tw { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@keyframes st-now { 0%, 100% { transform: translate(-50%, -50%) scale(.72) rotate(0deg); opacity: .7; } 50% { transform: translate(-50%, -50%) scale(1.12) rotate(8deg); opacity: 1; } }
.sky-moon, .sky-moonglow { position: absolute; right: 10%; top: 6.5%; width: 17%; aspect-ratio: 1; }
.sky-moonglow { border-radius: 50%; transform: scale(1.9); background: radial-gradient(circle, rgba(255, 233, 184, .34) 28%, rgba(255, 233, 184, 0) 68%); }
.blatt { position: absolute; left: 5.5%; width: 53%; bottom: 5%; transform: rotate(-2.2deg); border-radius: 6px 6px 10px 10px; background: linear-gradient(180deg, #fbf3e1, #f1e1bf); color: var(--ink); text-align: center; padding: 0 20px 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .5); animation: blatt-in .9s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.blatt::before { content: ""; display: block; height: 26px; margin: 0 -20px 12px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #b52a33, #8c1b24); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.blatt .loch { position: absolute; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #0a1a36; box-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
.blatt .loch.l { left: 24%; } .blatt .loch.r { right: 24%; }
.blatt .wt { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8a5a22; }
.blatt .tag { font-family: var(--serif); font-weight: 600; font-size: clamp(64px, 5.8vw, 88px); line-height: .95; margin: 2px 0 0; }
.blatt .mon { font-family: var(--serif); font-size: 21px; margin: 2px 0 10px; }
.blatt hr { border: 0; border-top: 1px dashed rgba(138, 90, 34, .45); margin: 0 0 10px; }
.blatt .lbl2 { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a5a22; }
.blatt .tat { font-family: var(--hand); font-weight: 600; font-size: 23px; line-height: 1.18; color: #4a2f16; margin: 2px 0 8px; }
.blatt .ist { font-size: 12.5px; line-height: 1.35; color: #6b4a22; margin: 0; }
@keyframes blatt-in { from { opacity: 0; transform: translateY(26px) rotate(1.5deg); } to { opacity: 1; transform: rotate(-2.2deg); } }
.sky-cap { text-align: center; font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.sky-cap b { color: var(--gold-soft); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .sky-stars i.tw, .sky-stars i.now, .blatt { animation: none; } .sky-stars i.now { transform: translate(-50%, -50%); } }

/* V39: die vier Jahreszeiten im Sternenhimmel – was sich bewegt */
body[data-page="heute"]:not([data-sky="winter"]) #snow { display: none; }   /* Schnee fällt auf dieser Seite nur im Winter */
.art-fx--sky .fx-flame { --ar: .62; }
.art-fx--sky .fx-glow { --gs: 6; }
.art-fx--sky .fx-glow.fx-g { --gs: 3.2; opacity: .55; }
.art-fx--sky .fx-smoke { --sw: 8%; --sh: 5%; --rise: -210%; -webkit-mask: none; mask: none; }
.sk-petal, .sk-leaf { position: absolute; opacity: 0; animation: sk-fall 11s linear infinite; will-change: transform, opacity; }
.sk-petal { width: 1.15cqw; height: .8cqw; border-radius: 70% 30% 70% 30%; background: #ffe6ee; box-shadow: 0 0 3px rgba(255, 220, 230, .6); }
.sk-leaf { width: 1.7cqw; height: 1.15cqw; border-radius: 4% 85% 4% 85%; box-shadow: inset 0 0 0 1px rgba(120, 50, 10, .25); }
@keyframes sk-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  35% { transform: translate(calc(var(--dx) * .2), calc(var(--dy) * .35)) rotate(calc(var(--rot) * .35)); }
  65% { transform: translate(calc(var(--dx) * .75), calc(var(--dy) * .65)) rotate(calc(var(--rot) * .65)); }
  88% { opacity: .95; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
.sk-fly { position: absolute; width: .55cqw; height: .55cqw; min-width: 3px; min-height: 3px; border-radius: 50%; background: #f6ffb0; box-shadow: 0 0 6px 2px rgba(214, 255, 120, .85), 0 0 14px 5px rgba(190, 255, 90, .35); animation: sk-wander 7s ease-in-out infinite alternate, sk-blink 3s ease-in-out infinite; }
@keyframes sk-wander { 0% { transform: translate(0, 0); } 35% { transform: translate(calc(var(--dx) * .6), calc(var(--dy) * -.4)); } 70% { transform: translate(calc(var(--dx) * -.3), var(--dy)); } 100% { transform: translate(var(--dx), calc(var(--dy) * .4)); } }
@keyframes sk-blink { 0%, 100% { opacity: 0; } 30% { opacity: 1; } 62% { opacity: .85; } 82% { opacity: .1; } }
.sk-fog { position: absolute; left: 14%; top: 76.5%; width: 46%; height: 6.5%; border-radius: 50%; background: radial-gradient(ellipse at 40% 50%, rgba(214, 222, 246, .5), rgba(214, 222, 246, .16) 55%, rgba(214, 222, 246, 0) 75%); filter: blur(6px); animation: sk-fog 22s ease-in-out infinite alternate; }
.sk-fog--2 { left: 30%; top: 78.5%; width: 34%; height: 4.5%; animation-duration: 31s; animation-direction: alternate-reverse; opacity: .8; }
@keyframes sk-fog { from { transform: translateX(-9%) scaleX(.94); opacity: .55; } to { transform: translateX(11%) scaleX(1.08); opacity: 1; } }

/* ---------- V40 (Bernd, 10.11.2026): der Sternenhimmel auch auf dem Handy – oben auf „Dein Licht für heute“ ---------- */
@media (max-width: 999px) {
  .duo--day .day-pic { margin: 12px -16px 0; }
  .duo--day .sky { height: min(104vw, 52vh); min-height: 340px; max-height: 620px; border-radius: 0 0 22px 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
  .duo--day .blatt { left: 6%; width: 148px; bottom: 6.5%; padding: 0 12px 12px; }
  .duo--day .blatt::before { height: 20px; margin: 0 -12px 8px; }
  .duo--day .blatt .loch { top: 6px; width: 8px; height: 8px; }
  .duo--day .blatt .wt { font-size: 11px; }
  .duo--day .blatt .tag { font-size: 62px; }
  .duo--day .blatt .mon { font-size: 16px; margin-bottom: 0; }
  .duo--day .blatt hr, .duo--day .blatt .lbl2, .duo--day .blatt .tat, .duo--day .blatt .ist { display: none; }   /* Tat und besonderer Tag stehen auf dem Handy im Text */
  .duo--day .sky-moon, .duo--day .sky-moonglow { width: 15%; right: 9%; top: 7%; }
  .duo--day .sky-cap { margin: 10px 0 0; font-size: 13.5px; }
  .duo--day .day-head { margin-top: 12px; }
}
@media (min-width: 560px) and (max-width: 999px) { .duo--day .day-pic { margin: 14px 0 0; } .duo--day .sky { border-radius: 22px; } }

/* ---------- V41 (Bernd, 10.11.2026): die zwei Lichter steigen zum Stern von heute auf ---------- */
.dl { will-change: transform; }
.dl-merge { position: fixed; z-index: 6; width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fffbe8 0%, #ffe6a4 22%, rgba(255, 190, 80, .75) 45%, rgba(255, 160, 50, 0) 72%); box-shadow: 0 0 26px 10px rgba(255, 196, 96, .55); }
.sky-stars i.now.flare { animation: st-flare 2.2s cubic-bezier(.2, .7, .2, 1); }
@keyframes st-flare {
  0% { transform: translate(-50%, -50%) scale(.8); filter: brightness(1); }
  16% { transform: translate(-50%, -50%) scale(3.4) rotate(12deg); filter: brightness(1.7); }
  45% { transform: translate(-50%, -50%) scale(2.2) rotate(4deg); filter: brightness(1.35); }
  100% { transform: translate(-50%, -50%) scale(.9) rotate(0deg); filter: brightness(1); }
}
.sky-burst { position: absolute; width: clamp(180px, 46%, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; animation: st-burst 2.2s ease-out forwards;
  background:
    linear-gradient(90deg, rgba(255, 244, 214, 0) 0%, rgba(255, 244, 214, .95) 50%, rgba(255, 244, 214, 0) 100%) center / 100% 2px no-repeat,
    linear-gradient(0deg, rgba(255, 244, 214, 0) 0%, rgba(255, 244, 214, .95) 50%, rgba(255, 244, 214, 0) 100%) center / 2px 100% no-repeat,
    radial-gradient(circle, rgba(255, 246, 220, .95) 0%, rgba(255, 214, 130, .6) 14%, rgba(255, 190, 90, .22) 34%, rgba(255, 180, 70, 0) 62%); }
@keyframes st-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 40% { opacity: .75; transform: translate(-50%, -50%) scale(1.08) rotate(6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25) rotate(10deg); } }

/* ---------- V42 (10.11.2026): Am Computer stehen die zwei Lichter frei neben der Überschrift und nehmen ihr keinen Platz –
   „Dein Licht für heute“ bleibt einzeilig, auch nachdem die Lichter zum Stern geflogen sind ---------- */
@media (min-width: 1000px) {
  .duo--day .day-row--title { --dw: clamp(120px, 10.5vw, 168px); flex-wrap: nowrap; }
  .duo--day .day-row--title h1 { white-space: nowrap; }
  /* jedes Licht nimmt netto nur zwei Fünftel seiner Breite ein; sein Schein berührt den Rand des Wortes */
  .duo--day .day-row--title .dl--d, .duo--day .day-row--title .dl--r.dl--d { width: var(--dw); margin: calc(var(--dw) / -2) calc(var(--dw) * -.3); }
}

/* V43: Bitte um Bewertung (nach dem Verschicken, Seite #bewerten) */
.ratebox { text-align: center; border-color: rgba(242, 196, 107, .45); }
.ratebox h2 { margin-top: 0; }
.ratebox > p { margin: 0 0 12px; }
.ratebox .rate-more { margin-top: 10px; }
.ratebox .rate-desk { margin: 12px 0 0; }
.ratebox .rate-thanks { margin: 4px 0 8px; font-family: var(--serif); font-size: 19px; color: var(--gold-soft); }
body[data-page="bewerten"] .ratebox { max-width: 42rem; margin-left: auto; margin-right: auto; }