@import "fonts.css";
/* Kalender-Ansicht (öffentlich und Editor-Vorschau) */
.cal-body { margin: 0; font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; background: #241a12; }
.adv { --font: "Quicksand", "Trebuchet MS", system-ui, sans-serif; --ink: #2c2013;
  position: relative; min-height: 100vh; box-sizing: border-box; padding: clamp(28px, 6vw, 72px) clamp(16px, 4vw, 48px) 56px;
  background-color: var(--bg); background-size: cover; background-position: center; background-attachment: fixed;
  color: var(--title); font-family: var(--font); }
/* Ohne eigenes Hintergrundbild: Wasser mit Wellenringen */
.adv.no-img { background-image:
  radial-gradient(circle at 10% 14%, transparent 0 46px, rgba(255,255,255,.09) 47px 49px, transparent 50px 78px, rgba(255,255,255,.06) 79px 81px, transparent 82px),
  radial-gradient(circle at 90% 58%, transparent 0 60px, rgba(255,255,255,.08) 61px 63px, transparent 64px 104px, rgba(255,255,255,.05) 105px 107px, transparent 108px),
  radial-gradient(circle at 34% 98%, transparent 0 52px, rgba(255,255,255,.07) 53px 55px, transparent 56px 90px, rgba(255,255,255,.05) 91px 93px, transparent 94px),
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22)); }
.adv.has-bg { background-image: linear-gradient(rgba(6, 16, 28, var(--dim, 0)), rgba(6, 16, 28, var(--dim, 0))), var(--bg-land); }
@media (orientation: portrait) { .adv.has-bg { background-image: linear-gradient(rgba(6, 16, 28, var(--dim, 0)), rgba(6, 16, 28, var(--dim, 0))), var(--bg-port); } }
.adv[data-font="sans"] { --font: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; }
.adv[data-font="serif"] { --font: Georgia, "Times New Roman", serif; }
.adv.is-edit { min-height: 100%; background-attachment: scroll; }

.adv-head { text-align: center; max-width: 900px; margin: 0 auto clamp(20px, 5vw, 52px); position: relative; z-index: 2; }
.adv-title { margin: 0; font-size: 3.6rem; font-size: clamp(2.3rem, 8vw, 4.8rem); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; text-shadow: 0 3px 0 rgba(0,0,0,.22); overflow-wrap: anywhere; }
.adv-sub { margin: .7em 0 0; font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; font-size: clamp(1rem, 2.4vw, 1.35rem); opacity: .95; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.adv.light .adv-sub { text-shadow: 0 0 14px rgba(255, 255, 255, .8), 0 1px 0 rgba(255, 255, 255, .6); }

.adv-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(6px, 2vw, 22px) clamp(8px, 2.5vw, 26px); max-width: 980px; margin: 0 auto; }
@media (max-width: 560px) { .adv-grid { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); } }
/* Die Enten schwimmen leicht versetzt */
.adv[data-shape="duck"] .door:nth-child(even) { margin-top: clamp(8px, 2.4vw, 26px); }

.door { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; color: var(--num); font: inherit; -webkit-tap-highlight-color: transparent; }
.door svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; filter: drop-shadow(0 5px 0 rgba(0,0,0,.22)); transition: transform .18s ease; }
.door svg .shape { fill: var(--door); }
.door.flip svg { transform: scaleX(-1); }
.door .num { position: absolute; left: var(--nx); top: var(--ny); transform: translate(-50%, -50%); z-index: 2; font-size: 2rem; font-size: clamp(1.4rem, 5vw, 2.5rem); font-weight: 600; line-height: 1; pointer-events: none; }
.adv[data-shape="duck"] .door::after { content: ""; position: absolute; left: 6%; right: 2%; bottom: -4%; height: 16%; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; }
.door:hover svg, .door:focus-visible svg { transform: translateY(-4px) rotate(-3deg); }
.door.flip:hover svg, .door.flip:focus-visible svg { transform: translateY(-4px) scaleX(-1) rotate(-3deg); }
.door:focus-visible { outline: 3px solid var(--title); outline-offset: 4px; border-radius: 14px; }
.door.locked { cursor: not-allowed; }
.door.locked svg { filter: drop-shadow(0 5px 0 rgba(0,0,0,.22)) saturate(.72) brightness(.94); }
.door.locked:hover svg { transform: none; }
.door.locked.flip:hover svg { transform: scaleX(-1); }
.door.locked .num, .door.seen .num { display: flex; flex-direction: column; align-items: center; gap: .18em; }
.door.locked .num::after, .door.seen .num::after { content: ""; width: .6em; height: .6em; background: currentColor; opacity: .75; -webkit-mask: var(--badge) center/contain no-repeat; mask: var(--badge) center/contain no-repeat; }
.door.locked { --badge: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6 10V8a6 6 0 1 1 12 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h8V8a4 4 0 1 0-8 0z%22/%3E%3C/svg%3E"); }
.door.seen { --badge: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 12.5l5 5L20 6.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%223.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.door .pen { position: absolute; right: 8%; bottom: 4%; z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: #2c2013; color: #fff; display: grid; place-items: center; font-size: 14px; pointer-events: none; border: 2px solid #fff; }
.door .dot { position: absolute; right: 10%; top: 6%; z-index: 3; width: 14px; height: 14px; border-radius: 50%; background: #eab74a; border: 1.5px solid rgba(44, 32, 19, .3); pointer-events: none; }

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

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #2c2013; color: #fff; padding: 12px 20px; border-radius: 999px;
  font: 16px/1.3 "Atkinson Hyperlegible", system-ui, sans-serif; z-index: 60; max-width: calc(100vw - 32px); box-shadow: 0 10px 24px rgba(44, 32, 19, .3); }

.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(9, 32, 40, .72); display: grid; place-items: center; padding: 16px; overflow-y: auto; animation: modalFade .22s ease; }
.modal { background: #fff; color: #2c2013; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border: 1.5px solid rgba(44, 32, 19, .3); border-radius: 20px; padding: clamp(20px, 4vw, 36px);
  position: relative; font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; box-shadow: 0 20px 40px rgba(44, 32, 19, .28), 0 1px 0 rgba(44, 32, 19, .35); animation: modalPop .32s cubic-bezier(.22, .8, .25, 1); }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .modal-back, .modal { animation: none; } }
.modal h2 { margin: 0 52px 16px 0; font-family: var(--font); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.12; color: var(--num); }
.modal .close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(44, 32, 19, .3); background: #eab74a; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 0 rgba(44, 32, 19, .4), 0 4px 10px rgba(44, 32, 19, .15); }
.modal .close:active { transform: translateY(3px); box-shadow: none; }
.modal .close:focus-visible { outline: 3px solid var(--num); outline-offset: 2px; }
.modal p { line-height: 1.65; margin: 0 0 1em; font-size: 1.08rem; max-width: 62ch; }
.modal h4 { margin: 1.1em 0 .5em; font-size: 1.2rem; line-height: 1.3; color: var(--num); }
.modal h4:first-child { margin-top: 0; }
.modal ul { margin: 0 0 1em; padding-left: 1.3em; max-width: 62ch; }
.modal li { line-height: 1.55; font-size: 1.08rem; margin-bottom: .35em; }
.modal strong { font-weight: 700; }
.modal img, .modal video { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 0 0 1em; }
.modal audio { width: 100%; margin: 0 0 1em; }
.modal iframe { width: 100%; border: 0; border-radius: 12px; margin: 0 0 1em; }
.modal .dl { display: inline-block; padding: 10px 20px; border-radius: 999px; background: #eab74a; color: #2c2013; border: 1.5px solid rgba(44, 32, 19, .3); font-weight: 700; text-decoration: none; margin: 0 0 1em; box-shadow: 0 1px 0 rgba(44, 32, 19, .4), 0 4px 10px rgba(44, 32, 19, .15); }
.modal .link-host { display: block; margin: -.5em 0 1em; font-size: .85rem; color: rgba(44, 32, 19, .65); }
.modal .dl.small { padding: 6px 16px; font-size: .9rem; font-family: inherit; margin: 0; cursor: pointer; }
.puzzle-wrap { max-width: 380px; margin: 0 0 1em; }
.puzzle-help { margin: 0 0 8px; font-size: .88rem; color: #7a6a58; }
.puzzle { display: grid; gap: 3px; aspect-ratio: 1 / 1; background: rgba(44, 32, 19, .18); border-radius: 12px; overflow: hidden; padding: 3px; box-shadow: inset 0 0 0 1.5px rgba(44, 32, 19, .2); }
.puzzle .tile { border-radius: 5px; cursor: pointer; transition: transform .1s ease; background-color: #fff; position: relative; }
.puzzle .tile:active { transform: scale(.94); }
.puzzle .tile.empty { visibility: hidden; }
.puzzle .tile-n { position: absolute; top: 3px; left: 3px; min-width: 1.4em; padding: 1px 4px; border-radius: 999px; background: rgba(44, 32, 19, .72); color: #fff; font-size: .72rem; line-height: 1.5; text-align: center; font-weight: 700; pointer-events: none; }
.puzzle.solved .tile-n { display: none; }
.puzzle.solved { gap: 0; padding: 0; box-shadow: none; }
.puzzle.solved .tile { border-radius: 0; cursor: default; }
.puzzle-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: .92rem; color: #7a6a58; }
.memory-wrap { max-width: 420px; margin: 0 0 1em; }
.hops-wrap { max-width: 560px; margin: 0 0 1em; }
.hops { display: grid; gap: 4px; }
.hop { aspect-ratio: 1; max-width: 64px; width: 100%; justify-self: center; border-radius: 10px; background: #f3e9d6; box-shadow: inset 0 0 0 1.5px rgba(44, 32, 19, .15); display: grid; place-items: center; font-size: clamp(1.1rem, 5vw, 2rem); line-height: 1; user-select: none; }
.hop.gap { background: rgba(44, 32, 19, .06); box-shadow: none; border: 1.5px dashed rgba(44, 32, 19, .25); box-sizing: border-box; }
.hop.L span { display: inline-block; transform: scaleX(-1); }
.hop.can { cursor: pointer; background: #fbe8b8; box-shadow: inset 0 0 0 2px #eab74a; }
.hop.can:hover, .hop.can:focus-visible { background: #f6d98c; outline: none; }
.hop.moved span { animation: hopIn .28s ease; }
.hop.L.moved span { animation-name: hopInL; }
@keyframes hopIn { from { transform: translateY(-10px) scale(.85); } to { transform: none; } }
@keyframes hopInL { from { transform: scaleX(-1) translateY(-10px) scale(.85); } to { transform: scaleX(-1); } }
.hops-note { min-height: 1.2em; margin: 8px 0 0; font-size: .88rem; color: #9c2b22; }
.hops-btns { display: flex; gap: 6px; }
.modal .dl.small[disabled] { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .hop.moved span { animation: none; } }
.memgrid { display: grid; gap: 8px; perspective: 700px; }
.memcard { aspect-ratio: 3 / 4; cursor: pointer; }
.memcard.done { cursor: default; }
.memcard-inner { position: relative; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.4, .2, .2, 1); transform-style: preserve-3d; }
.memcard.open .memcard-inner { transform: rotateY(180deg); }
.memcard-back, .memcard-front { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.memcard-back { background: linear-gradient(135deg, #eab74a, #c9752f); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px rgba(44, 32, 19, .25); }
.memcard-back::after { content: "?"; color: rgba(44, 32, 19, .55); font-weight: 700; font-size: 1.4rem; }
.memcard-front { background-color: #fff; background-size: cover; background-position: center; transform: rotateY(180deg); box-shadow: inset 0 0 0 1.5px rgba(44, 32, 19, .2); }
.memcard.done .memcard-front { box-shadow: inset 0 0 0 2.5px #2f5d3f; }
.modal .empty { color: #7a6a58; }

.pw-box { max-width: 380px; margin: 12vh auto 0; padding: 28px; background: #fff; border: 1.5px solid rgba(44, 32, 19, .3); border-radius: 20px; color: #2c2013; box-shadow: 0 20px 40px rgba(44, 32, 19, .28), 0 1px 0 rgba(44, 32, 19, .35); }
.pw-box h1 { font-size: 1.7rem; margin: 0 0 8px; font-family: "Quicksand", system-ui, sans-serif; }
.pw-box label { display: block; margin: 16px 0 6px; font-weight: 700; }
.pw-box input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 2px solid #c9ac82; border-radius: 10px; font-size: 1rem; }
.pw-box button { margin-top: 16px; width: 100%; padding: 12px; border: 1.5px solid rgba(44, 32, 19, .3); border-radius: 999px; background: #eab74a; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 1px 0 rgba(44, 32, 19, .4), 0 4px 10px rgba(44, 32, 19, .15); }
.pw-err { color: #9c2b22; margin: 10px 0 0; font-weight: 700; }
.cal-body[style*="--bg"] { background: var(--bg); color: var(--title); }

.door svg .eye { fill: var(--eye, #2c2013); }
.adv.light { --eye: #ffffff; }
.adv.light .door::after { border-color: rgba(18, 48, 58, .3); }
.adv.light .door svg { filter: drop-shadow(0 5px 0 rgba(18, 48, 58, .16)); }
.adv.light .adv-title { text-shadow: 0 0 22px rgba(255, 255, 255, .85), 0 0 8px rgba(255, 255, 255, .9), 0 2px 0 rgba(255, 255, 255, .6); }
/* Klassische Tür: Rahmen, Türblatt mit zwei Füllungen, Klinke. Beim Öffnen schwingt das Türblatt nach innen. */
.door.tuer { aspect-ratio: 4 / 5; }
.tuer .dframe { position: absolute; inset: 0; border-radius: 12px 12px 3px 3px; background: var(--door-dk, #6b4a12);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 0 0 2px rgba(0, 0, 0, .12); transition: transform .18s ease; }
.door.tuer { container-type: inline-size; }
.tuer .hole { position: absolute; inset: 7% 7% 5% 7%; border-radius: 6px 6px 0 0; perspective: 700px; perspective: 520cqw; background: #2b1a0b; }
.tuer .inside { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(90% 80% at 50% 78%, #fff1b8 0%, #ffcf66 40%, #c97a1e 78%, #7a4310 100%); }
.tuer .inside::after { content: "\2605"; position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-size: 2rem; font-size: clamp(1.4rem, 5vw, 2.6rem); line-height: 1; color: rgba(255, 255, 255, .9); text-shadow: 0 0 14px rgba(255, 214, 110, .95); }
.tuer .leaf { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--door); border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1), inset 0 -12px 20px rgba(0, 0, 0, .1); transition: transform .75s cubic-bezier(.25, .8, .3, 1), filter .75s ease; }
.tuer .leaf::before, .tuer .leaf::after { content: ""; position: absolute; left: 13%; right: 13%; border-radius: 4px;
  background: linear-gradient(rgba(255, 255, 255, .08), rgba(0, 0, 0, .07)); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .14), inset 0 3px 8px rgba(255, 255, 255, .18), 0 1px 0 rgba(255, 255, 255, .22); }
.tuer .leaf::before { top: 7%; bottom: 53%; }
.tuer .leaf::after { top: 53%; bottom: 7%; }
.door.tuer .num { left: 50%; top: 28%; z-index: 2; }
.tuer .knob { position: absolute; right: 8%; top: 54%; width: 11%; aspect-ratio: 1; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fffbe8, #d9c48f 55%, #6d5a26); box-shadow: 0 2px 3px rgba(0, 0, 0, .45); }
.door.open { z-index: 3; }
.tuer.open .leaf { transform: rotateY(-100deg); filter: brightness(.82); }
.tuer.open .leaf .num { opacity: 0; transition: opacity .18s ease; }
.tuer:not(.locked):not(.open):hover .leaf, .tuer:not(.locked):not(.open):focus-visible .leaf { transform: rotateY(-13deg); }
.tuer:not(.locked):not(.open):hover .dframe { transform: translateY(-3px); }
.tuer.locked .leaf { filter: saturate(.9) brightness(.97); }
.adv[data-shape="door"] .adv-grid { gap: clamp(12px, 3vw, 34px); }
.door.tuer:focus-visible { outline: 3px solid var(--title); outline-offset: 5px; }
.door.nope { animation: nope .42s ease; }
@keyframes nope { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.adv.light .tuer .dframe { box-shadow: 0 6px 0 rgba(18, 48, 58, .18), inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 0 0 2px rgba(0, 0, 0, .12); }
@media (prefers-reduced-motion: reduce) { .tuer .leaf, .tuer .dframe { transition: none; } .door.nope { animation: none; } }
/* Türstile */
.tuer .inside { transition: opacity .25s ease; }
.adv.trans .tuer .hole { background: transparent; }
.adv.trans .tuer .inside, .tuer.glass .inside, .tuer.outline .inside { opacity: 0; }
.adv.trans .tuer.open .inside, .tuer.glass.open .inside, .tuer.outline.open .inside { opacity: 1; }
/* Bogen */
.tuer.arch .dframe { border-radius: 50% 50% 3px 3px / 28% 28% 0 0; }
.tuer.arch .hole { border-radius: 50% 50% 0 0 / 27% 27% 0 0; }
.tuer.arch .leaf::before { top: 9%; border-radius: 50% 50% 4px 4px / 42% 42% 4px 4px; }
.door.tuer.arch .num { top: 32%; }
/* Glas: durchsichtig, der Hintergrund scheint durch */
.tuer.glass .dframe { background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .14), inset 0 0 0 2px rgba(255, 255, 255, .6); }
.tuer.glass .hole { background: transparent; }
.tuer.glass .leaf { background: linear-gradient(140deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .16) 100%), var(--door-glass, rgba(255, 255, 255, .2));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), inset 0 0 26px rgba(255, 255, 255, .16); }
.tuer.glass .leaf::before, .tuer.glass .leaf::after { background: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .42); }
.door.tuer.glass .num { color: var(--title); text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.tuer.glass .knob { background: radial-gradient(circle at 35% 30%, #fff, #e8eef0 55%, #9fb0b6); }
.tuer.glass.open .leaf { filter: none; }
/* Umriss: nur Linien */
.tuer.outline .dframe { background: transparent; box-shadow: none; border: 3px solid var(--door-solid, #fff); }
.tuer.outline .hole { background: transparent; inset: 5%; }
.tuer.outline .leaf { background: transparent; box-shadow: none; border: 2px solid var(--door-solid, #fff); }
.tuer.outline .leaf::before, .tuer.outline .leaf::after { background: none; box-shadow: none; border: 2px solid var(--door-solid, #fff); opacity: .55; }
.door.tuer.outline .num { color: var(--door-solid, #fff); }
.tuer.outline .knob { background: var(--door-solid, #fff); box-shadow: none; }
.tuer.outline.open .leaf { filter: none; }
.tuer.locked.outline .leaf, .tuer.locked.glass .leaf { filter: none; }
/* Fenster: zwei Flügel mit Scheiben */
.tuer.window .leaf.l { inset: 0 50% 0 0; transform-origin: 0 50%; border-radius: 6px 0 0 0; }
.tuer.window .leaf.r { inset: 0 0 0 50%; transform-origin: 100% 50%; border-radius: 0 6px 0 0; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1); }
.tuer.window .leaf::before, .tuer.window .leaf::after { left: 14%; right: 14%; background: rgba(255, 255, 255, .26); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .16), inset 0 0 14px rgba(255, 255, 255, .3); }
.tuer.window .leaf::before { top: 8%; bottom: 54%; }
.tuer.window .leaf::after { top: 50%; bottom: 8%; }
.tuer.window .leaf.r .knob { right: auto; left: 7%; top: 50%; }
.tuer.window.open .leaf.l { transform: rotateY(-100deg); filter: brightness(.82); }
.tuer.window.open .leaf.r { transform: rotateY(100deg); filter: brightness(.82); }
.tuer.window:not(.locked):not(.open):hover .leaf.l, .tuer.window:not(.locked):not(.open):focus-visible .leaf.l { transform: rotateY(-12deg); }
.tuer.window:not(.locked):not(.open):hover .leaf.r, .tuer.window:not(.locked):not(.open):focus-visible .leaf.r { transform: rotateY(12deg); }
.door.tuer.window .num { top: 50%; z-index: 4; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--door-dk); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 1.3rem; font-size: clamp(1.1rem, 3.6vw, 2rem); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: opacity .3s ease, transform .3s ease; }
.tuer.window.open .num { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
/* Papier: ausgestanzte Klappen wie bei einem Papier-Adventskalender, Zahl in Goldfolie */
.adv { --noise: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .30 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E"); }
.tuer.paper .dframe { background: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 0 1px rgba(255, 255, 255, .3); }
.tuer.paper .hole { inset: 0; border-radius: 3px; background: transparent; }
.tuer.paper .inside { background: linear-gradient(135deg, #fbf3df, #ecdeba); box-shadow: inset 7px 7px 14px rgba(0, 0, 0, .4), inset -2px -2px 6px rgba(0, 0, 0, .14); opacity: 0; }
.tuer.paper.open .inside { opacity: 1; }
.tuer.paper .inside::after { font-size: 1.8rem; font-size: clamp(1.2rem, 4.5vw, 2.2rem); color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(160deg, var(--foil-deep) 0%, var(--foil-mid) 42%, var(--foil-deep) 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.tuer.paper .leaf { border-radius: 3px; background-color: var(--flap-base, rgba(0, 0, 0, .11));
  background-image: var(--noise), linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12));
  box-shadow: inset 4px 0 5px -2px rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 1px 3px rgba(0, 0, 0, .35); }
.tuer.paper .leaf::before { top: 8%; bottom: 8%; left: 11%; right: 11%; border-radius: 2px; background: none; box-shadow: none; border: 1px solid var(--foil-line); }
.tuer.paper .leaf::after { display: none; }
.tuer.paper .knob { display: none; }
.door.tuer.paper .num { top: 50%; font-size: 2rem; font-size: clamp(1.7rem, 6.8vw, 3.3rem);
  background: linear-gradient(160deg, var(--foil-lt) 5%, var(--foil-mid) 48%, var(--foil-dk) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.door.tuer.paper .num::after { background: var(--foil-mid); }
.tuer.paper:not(.locked):not(.open):hover .dframe { transform: none; }
.tuer.paper .leaf { transition: transform .75s cubic-bezier(.25, .8, .3, 1), filter .75s ease, background-color .4s ease; }
.tuer.paper.open .leaf { filter: none; background-color: #f4ecd6; }
.tuer.paper.open .leaf::before { border-color: rgba(0, 0, 0, .12); }
.tuer.paper.locked .leaf { filter: none; }
.adv.light .tuer.paper .dframe { box-shadow: 0 0 0 1px rgba(18, 48, 58, .5), 0 1px 0 1px rgba(255, 255, 255, .7); }
.adv.light .tuer.paper .leaf { --flap-base: rgba(255, 255, 255, .42); box-shadow: inset 4px 0 5px -2px rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(18, 48, 58, .1), 0 1px 3px rgba(18, 48, 58, .25); }
.adv.light .door.tuer.paper .num { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)); }
/* Bunt gemischt: Türchen in verschiedenen Größen, lückenlos wie ein Mosaik */
.adv-grid.mixed { max-width: 920px; grid-template-columns: repeat(var(--mc), minmax(0, 1fr)); grid-template-rows: repeat(var(--mr), minmax(0, 1fr)); aspect-ratio: var(--mc) / var(--mr); }
.adv .adv-grid.mixed { gap: 8px; gap: clamp(6px, 1.3vw, 14px); }
.adv-grid.mixed .door, .adv-grid.mixed .door.tuer { aspect-ratio: auto; width: 100%; height: 100%; margin: 0; }
.adv-grid.mixed .door svg { inset: 4%; width: 92%; height: 92%; }
.adv-grid.mixed .door.tuer.paper .num { font-size: 1.5rem; }
.adv-grid.mixed .door.t-S .num { font-size: 1.2rem; font-size: clamp(1.05rem, 3.4vw, 2rem); }
.adv-grid.mixed .door.t-M .num { font-size: 1.5rem; font-size: clamp(1.3rem, 4.4vw, 2.6rem); }
.adv-grid.mixed .door.t-L .num { font-size: 2.6rem; font-size: clamp(2rem, 8vw, 4.6rem); }
.adv-grid.mixed .door.t-S .num::after { width: .5em; height: .5em; }
/* Milchglas: schlichte, matte Glasfläche mit heller Zahl, passt auf Fotos */
.tuer.frost .dframe { background: none; box-shadow: none; border-radius: 12px; }
.tuer.frost .hole { inset: 0; border-radius: 12px; background: transparent; }
.tuer.frost .inside { opacity: 0; border-radius: inherit; }
.tuer.frost.open .inside { opacity: 1; }
.tuer.frost .leaf { border-radius: 12px; background: linear-gradient(rgba(10, 12, 20, .12), rgba(10, 12, 20, .12)), rgba(255, 255, 255, .24); backdrop-filter: blur(5px) saturate(1.1); -webkit-backdrop-filter: blur(5px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 6px 16px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 3px rgba(234, 183, 74, .28); }
.tuer.frost .leaf::before, .tuer.frost .leaf::after, .tuer.frost .knob { display: none; }
.door.tuer.frost .num { top: 50%; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.door.tuer.frost .num::after { background: #fff; opacity: .85; }
.tuer.frost.open .leaf, .tuer.frost.locked .leaf { filter: none; }
.adv.light .tuer.frost .leaf { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); box-shadow: 0 6px 14px rgba(18, 48, 58, .22), inset 0 1px 0 #fff, inset 0 0 0 3px rgba(197, 141, 42, .22); }
.adv.light .door.tuer.frost .num { color: #2c2013; text-shadow: 0 0 10px rgba(255, 255, 255, .8), 0 0 3px rgba(255, 255, 255, .9); }
.adv.light .door.tuer.frost .num::after { background: #2c2013; }
/* Szene: alle Türchen klein und frei über dem Bild verteilt, ohne Scrollen */
.adv.scatter { height: 100vh; height: 100dvh; min-height: 0; padding: 12px clamp(8px, 2vw, 20px) 8px; display: flex; flex-direction: column; overflow: hidden; }
.adv.scatter.is-edit { height: 100%; }
.adv.scatter .adv-head { margin: 0 auto 4px; }
.adv.scatter .adv-title { font-size: 1.8rem; font-size: clamp(1.4rem, 3.2vw, 2.6rem); }
.adv.scatter .adv-sub { margin: .2em 0 0; font-size: clamp(.85rem, 1.5vw, 1.1rem); }
.adv-grid.scatter { display: block; position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; }
.adv-grid.scatter .door, .adv-grid.scatter .door.tuer { position: absolute; width: var(--d, 90px); height: var(--d, 90px); aspect-ratio: auto; margin: 0; }
.adv-grid.scatter .door.tuer .num { font-size: 1.4rem; font-size: max(15px, calc(var(--d, 90px) * .36)); }
.adv-grid.scatter .door.t-L .num { font-size: max(20px, calc(var(--d, 90px) * .42)); }
.adv-grid.scatter .door .pen { width: 22px; height: 22px; font-size: 11px; right: 4%; bottom: 4%; }
.adv-grid.scatter .door svg { inset: 3%; width: 94%; height: 94%; }
.adv.scatter .adv-foot { margin: 4px auto 0; font-size: 12px; }
/* Bunt gemischt und Raster: alles auf einer Seite, wenn der Bildschirm es zulässt */
.adv-grid.mixed { width: min(920px, 100%, calc((100vh - 200px) * var(--mc) / var(--mr))); margin-inline: auto; }
.adv-foot { position: relative; z-index: 2; margin: 52px auto 0; text-align: center; font: 14px/1.6 "Atkinson Hyperlegible", system-ui, sans-serif; opacity: .9; }
.adv-foot a { color: inherit; text-underline-offset: 3px; }
.adv-foot .coffee { font-weight: 700; }
.coffee::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .4em; vertical-align: -.16em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 8h12v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5zm12 1h2a3 3 0 0 1 0 6h-2v-2h2a1 1 0 0 0 0-2h-2zM7 2h2v3H7zm4 0h2v3h-2z%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 8h12v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5zm12 1h2a3 3 0 0 1 0 6h-2v-2h2a1 1 0 0 0 0-2h-2zM7 2h2v3H7zm4 0h2v3h-2z%22/%3E%3C/svg%3E") center/contain no-repeat; }
.adv-foot .sep { margin: 0 8px; opacity: .6; }

@media (prefers-reduced-motion: reduce) { .door svg { transition: none; } .door:hover svg { transform: none; } .door.flip:hover svg { transform: scaleX(-1); } }

/* Vorschau-Leiste (nur für den Besitzer) */
.pv-bar { position: fixed; left: 8px; bottom: 8px; z-index: 80; max-width: min(430px, calc(100vw - 16px)); padding: 8px 12px 10px; border-radius: 12px; background: rgba(15, 25, 30, .86); color: #fff; font: 14px/1.35 var(--text, system-ui, sans-serif);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pv-head { display: flex; align-items: center; gap: 10px; }
.pv-head strong { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #eab74a; }
.pv-info { flex: 1; font-size: 13px; opacity: .9; }
.pv-min { border: 1px solid rgba(255, 255, 255, .4); background: none; color: #fff; border-radius: 6px; width: 26px; height: 26px; line-height: 1; cursor: pointer; }
.pv-body[hidden] { display: none; }
.pv-lbl { display: block; margin: 8px 0 3px; font-size: 12px; opacity: .8; }
.pv-bar input[type=datetime-local] { width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff; color-scheme: dark; font: inherit; }
.pv-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pv-btns button { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.pv-btns button:hover { background: rgba(255, 201, 51, .3); border-color: #eab74a; }
.pv-note { margin: 8px 0 0; font-size: 12px; opacity: .7; }
@media (max-width: 560px) { .pv-note { display: none; } .pv-bar { left: 6px; right: 6px; max-width: none; } }

/* Kleine Vorschau des tatsächlichen Inhalts hinter der geöffneten Klappe statt des Sterns */
.tuer .inside.has-media { background-size: cover; background-position: center; }
.tuer .inside.has-media::after, .tuer .inside.has-text::after { content: none; }
.tuer .inside .peek-text { position: absolute; inset: 10% 8%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  font-size: .8rem; font-size: clamp(.62rem, 2.6vw, .85rem); line-height: 1.3; text-align: center; color: rgba(255, 255, 255, .95); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

/* Besondere Tage */
.door .sday { position: absolute; left: 8%; top: 4%; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: #eab74a; color: #2c2013; display: grid; place-items: center; font-size: 12px; line-height: 1; pointer-events: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.modal .sday-line { margin: -8px 0 16px; font-size: .95rem; font-weight: 700; color: #b5822a; letter-spacing: .01em; }
.adv-grid.scatter .door .sday { width: 16px; height: 16px; font-size: 9px; left: 4%; top: 4%; }

/* Quiz */
.quiz-wrap { max-width: 560px; margin: 0 0 1em; }
.quiz-count { margin: 0 0 4px; font-size: .85rem; color: #7a6a58; }
.quiz-q { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.quiz-answers { display: grid; gap: 8px; margin-bottom: 12px; }
.quiz-a { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(44, 32, 19, .2); background: #fbf5ea; color: #2c2013; font: inherit; font-size: 1rem; cursor: pointer; transition: background .15s, border-color .15s; }
.quiz-a:hover:not([disabled]), .quiz-a:focus-visible { background: #f6e6c4; border-color: #eab74a; outline: none; }
.quiz-a[disabled] { cursor: default; opacity: .75; }
.quiz-a.right { background: #dcefe2; border-color: #2f5d3f; opacity: 1; }
.quiz-a.right::after { content: " ✓"; color: #2f5d3f; font-weight: 700; }
.quiz-a.wrong { background: #f6dcd8; border-color: #9c2b22; opacity: 1; }
.quiz-a.wrong::after { content: " ✗"; color: #9c2b22; font-weight: 700; }
.quiz-explain { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: .95rem; line-height: 1.5; }
.quiz-explain.ok { background: #eaf5ee; }
.quiz-explain.no { background: #fbeceb; }
.quiz-result { font-size: 1.2rem; font-weight: 700; margin: 0 0 12px; }

/* Klassisches Puzzle */
.jig-wrap { margin: 0 0 1em; user-select: none; -webkit-user-select: none; }
.jig-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.jig-bar .dl[aria-pressed="true"] { background: #2c2013; color: #fff; border-color: #2c2013; }
.jig { position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: rgba(44, 32, 19, .07); box-shadow: inset 0 0 0 1.5px rgba(44, 32, 19, .15); }
.jig-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.jig-board { position: absolute; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1.5px rgba(44, 32, 19, .25); overflow: hidden; }
.jig-board img { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .2s; }
.jig-board.ghost img { opacity: .25; }
.jig-piece { position: absolute; left: 0; top: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.jig-piece.drag { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4)); }
.jig-piece.placed { filter: none; }
.jig-solved .jig { box-shadow: inset 0 0 0 3px #3a8a55; }

/* Gewinnspiel-Türchen */
.contest { max-width: 560px; margin: 0 0 1em; padding: 16px 18px; border-radius: 14px; background: #fbf5ea; border: 1.5px solid rgba(44, 32, 19, .15); }
.contest-h { margin: 0 0 8px; font-weight: 700; font-size: 1.1rem; }
.contest-q { margin: 0 0 8px; font-weight: 700; line-height: 1.4; }
.contest-f { display: grid; gap: 4px; margin-bottom: 10px; }
.contest-f label { font-size: .9rem; color: #5b4a38; }
.contest-f input, .contest-f textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(44, 32, 19, .25); background: #fff; color: #2c2013; font: inherit; }
.contest-f input:focus, .contest-f textarea:focus { outline: none; border-color: #eab74a; box-shadow: 0 0 0 3px rgba(234, 183, 74, .3); }
.contest-c { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; font-size: .92rem; line-height: 1.4; }
.contest-c input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.contest-terms { margin: 0 0 10px; font-size: .88rem; }
.contest-terms summary { cursor: pointer; color: #7a5a1a; }
.contest-note { margin: 4px 0 12px; font-size: .85rem; color: #7a6a58; }
.contest-msg { margin: 8px 0 0; font-weight: 600; }
.contest-msg.ok { font-size: 1.05rem; color: #2f5d3f; }
.contest-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contest .dl { margin: 0; cursor: pointer; }

/* Gutschein-Türchen */
.coupon { max-width: 560px; margin: 0 0 1em; padding: 16px 18px; border-radius: 14px; background: #fbf5ea; border: 2px dashed #d9a93e; text-align: center; }
.coupon-h { margin: 0 0 6px; font-weight: 700; font-size: 1.1rem; }
.coupon-t { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.4; }
.coupon-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.coupon-code { font: 700 1.35rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; padding: 8px 14px; border-radius: 10px; background: #fff; color: #2c2013; border: 1.5px solid rgba(44, 32, 19, .2); user-select: all; word-break: break-all; }
.coupon-copy { padding: 9px 14px; border-radius: 999px; border: 1.5px solid rgba(44, 32, 19, .3); background: #fff; color: #2c2013; font: inherit; font-weight: 600; cursor: pointer; }
.coupon-copy:hover, .coupon-copy:focus-visible { border-color: #eab74a; }
.coupon-u { margin: 0 0 10px; font-size: .88rem; color: #7a6a58; }
.coupon-x { margin: 0; font-weight: 600; color: #7a6a58; }
.coupon .dl { margin: 4px 0 0; }

/* Hinweis „Erstellt mit“ bei Gratis-Kalendern */
.adv-badge { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: calc(100% - 32px); margin: 32px auto 4px; padding: 6px 18px 6px 8px; border-radius: 999px;
  background: rgba(255, 252, 245, .94); color: #2c2013; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .15s ease, box-shadow .15s ease; }
.adv-badge:hover, .adv-badge:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
.adv-badge:focus-visible { outline: 3px solid #eab74a; outline-offset: 3px; }
.adv-badge img { width: 44px; height: 44px; flex: none; }
.adv-badge-t { display: grid; line-height: 1.25; }
.adv-badge-t strong { font-size: .98rem; }
.adv-badge-t > span { font-size: .85rem; color: #7a5a1a; }
.adv-badge-t .nw { white-space: nowrap; }
@media (max-width: 420px) { .adv-badge { padding-right: 14px; } .adv-badge-t strong { font-size: .9rem; } .adv-badge img { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .adv-badge { transition: none; } .adv-badge:hover { transform: none; } }

/* Zwei-Klick-Lösung für fremde Inhalte */
.ext-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: 0 0 1em; padding: 24px 20px; border-radius: 14px;
  background: #f3ece0; border: 1.5px dashed rgba(44, 32, 19, .3); text-align: center; color: #2c2013; }
.ext-h { margin: 0; font-weight: 700; font-size: 1.1rem; }
.ext-t { margin: 0; max-width: 30rem; font-size: .92rem; color: #5b4a38; line-height: 1.45; }
.ext-ph .dl { margin: 4px 0 0; cursor: pointer; }
.ext-always { font-size: .85rem; color: #5b4a38; display: flex; gap: 6px; align-items: center; cursor: pointer; }