/* Zoom und Kameraflug in das Adventstürchen. © 2026 Erik Schauer, do1ffe@darc.de */

.kalender-zoom { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; pointer-events: none; }
.kalender-zoom *, .kalender-zoom *::before, .kalender-zoom *::after { pointer-events: none !important; }

#türchen-erlebnis {
    --erlebnis-gold: #ffd27a;
    --erlebnis-text: #f5f2e8;
    --erlebnis-neben: #bacdd5;
    --erlebnis-reisetiefe: 2500px;
    --erlebnis-tür-breite: clamp(148px, 32dvh, 244px);
    --erlebnis-tür-höhe: calc(var(--erlebnis-tür-breite) * 1.374);
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: min(880px, calc(100vw - 28px));
    height: min(760px, calc(100dvh - 28px));
    max-width: none;
    max-height: none;
    padding: 0;
    margin: auto;
    overflow: hidden;
    color: var(--erlebnis-text);
    color-scheme: dark;
    font: 400 16px/1.5 system-ui, sans-serif;
    text-align: left;
    background: #092032;
    border: 1px solid #dbb87370;
    border-radius: 24px;
    box-shadow: 0 24px 100px #0009, 0 0 70px #dcb57415;
}

#türchen-erlebnis[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
#türchen-erlebnis::backdrop { background: #031018db; backdrop-filter: blur(7px); }
/* Der native Dialog hält bereits den Fokus; die sichtbare Kamera startet aber
   auf dem Originalkalender unter seinem zunächst durchsichtigen Hintergrund. */
#türchen-erlebnis.erlebnis--zoomt { background: transparent; border-color: transparent; box-shadow: none; }
#türchen-erlebnis.erlebnis--zoomt::backdrop { background: transparent; backdrop-filter: none; }
#türchen-erlebnis.erlebnis--zoomt .erlebnis__bühne { background: transparent; }
#türchen-erlebnis.erlebnis--zoomt .erlebnis__bühne > *,
#türchen-erlebnis.erlebnis--zoomt .erlebnis__marke,
#türchen-erlebnis.erlebnis--zoomt .erlebnis__fuß { visibility: hidden; }
#türchen-erlebnis.erlebnis--zoomt .erlebnis__kopf { border-color: transparent; }
#türchen-erlebnis.erlebnis--überblendet { animation: erlebnis-kulisse-einblenden 420ms ease-in-out both; }
#türchen-erlebnis.erlebnis--überblendet::backdrop { animation: erlebnis-kulisse-einblenden 420ms ease-in-out both; }
#türchen-erlebnis *, #türchen-erlebnis *::before, #türchen-erlebnis *::after { box-sizing: border-box; }
#türchen-erlebnis [hidden] { display: none !important; }
#türchen-erlebnis p { width: auto; max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
#türchen-erlebnis button, #türchen-erlebnis a { font: inherit; letter-spacing: normal; text-transform: none; }
#türchen-erlebnis button { margin: 0; width: auto; box-shadow: none; transform: none; cursor: pointer; }
#türchen-erlebnis a { color: var(--erlebnis-gold); text-decoration: underline; text-underline-offset: 4px; }
#türchen-erlebnis button:focus-visible, #türchen-erlebnis a:focus-visible { outline: 3px solid #fff0cb; outline-offset: 4px; }
#türchen-erlebnis button:disabled { cursor: wait; opacity: .6; }

#türchen-erlebnis .erlebnis__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid #ffffff14; }
#türchen-erlebnis .erlebnis__marke { color: var(--erlebnis-gold); font-size: 14px; font-weight: 600; letter-spacing: .045em; }
#türchen-erlebnis .erlebnis__marke span { margin-right: 7px; }
#türchen-erlebnis .erlebnis__schließen { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0 0 3px; border: 1px solid #b9cdd540; border-radius: 50%; background: #173441; color: #f1ece0; font: 300 29px/1 system-ui, sans-serif; }
#türchen-erlebnis .erlebnis__schließen:hover { background: #294b59; border-color: #d7b872; }
#türchen-erlebnis .erlebnis__bühne { position: relative; min-height: 0; overflow: hidden; isolation: isolate; perspective: 1000px; perspective-origin: 50% calc(50% - 17px); background: radial-gradient(ellipse at 50% 35%, #214b57, #0b2333 75%); }
#türchen-erlebnis .erlebnis__kamera { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(0); }
#türchen-erlebnis .erlebnis__sterne { position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(circle at 12% 16%, #fff 1px, transparent 2px), radial-gradient(circle at 84% 21%, #fff 1px, transparent 2px), radial-gradient(circle at 32% 74%, #fff 1px, transparent 2px), radial-gradient(circle at 93% 82%, #fff 1px, transparent 2px), radial-gradient(circle at 67% 8%, #fff 1px, transparent 2px), radial-gradient(circle at 5% 59%, #fff 1px, transparent 2px); }
#türchen-erlebnis .erlebnis__hintergrund { position: absolute; inset: 26px 24px 65px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; opacity: .13; pointer-events: none; mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); mask-size: 100% 100%, var(--erlebnis-tür-breite) var(--erlebnis-tür-höhe); mask-position: 0 0, center calc(50% + 2px); mask-repeat: no-repeat; mask-composite: exclude; }
#türchen-erlebnis .erlebnis__hintergrund span { display: grid; place-items: center; border: 1px dashed #eedfa3; border-radius: 8px; color: var(--erlebnis-gold); font: 400 32px Georgia, serif; transform: rotate(-5deg); }
#türchen-erlebnis .erlebnis__tür { position: absolute; width: var(--erlebnis-tür-breite); height: var(--erlebnis-tür-höhe); left: calc(50% - var(--erlebnis-tür-breite) / 2); top: calc(50% - var(--erlebnis-tür-höhe) / 2 - 17px); transform: translateZ(2px); transform-style: preserve-3d; }
#türchen-erlebnis .erlebnis__fach { position: absolute; inset: 0; border-radius: 9px; background: transparent; border: 3px solid #c9a964; box-shadow: inset 0 0 0 4px #071e2c, 0 0 0 5px #071e2c, 0 0 20px #ffce7633; }
#türchen-erlebnis .erlebnis__blatt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; transform-origin: 0 50%; transform-style: preserve-3d; border: 1px solid #d6b76f; border-left: 4px solid #bf9850; border-radius: 8px; background: radial-gradient(ellipse at 60% 5%, #406570, #163e4e 70%); box-shadow: inset 0 0 0 6px #142f38, inset 0 0 0 7px #c9a96480, 8px 6px 18px #0005; backface-visibility: visible; }
#türchen-erlebnis .erlebnis__blatt::before { content: ""; position: absolute; inset: 14px; border: 1px dashed #d5c28a4d; border-radius: 2px; }
#türchen-erlebnis .erlebnis__blatt::after { content: ""; position: absolute; inset: -1px; border-radius: 7px; background: linear-gradient(90deg, #b2a386, #dfd2b4 35%, #c9ba97); border: 1px solid #a3936c; transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; }
#türchen-erlebnis .erlebnis__blattkopf { color: var(--erlebnis-gold); font-size: 11px; letter-spacing: .24em; margin-top: 13%; }
#türchen-erlebnis .erlebnis__nummer { color: #ffe7b2; font: 400 calc(var(--erlebnis-tür-breite) * .49)/.98 Georgia, serif; margin-top: 8%; text-shadow: 0 3px 10px #0006; }
#türchen-erlebnis .erlebnis__antenne { display: block; width: 15%; height: 16%; margin-top: 6%; opacity: .7; background: linear-gradient(#d7c68d, #d7c68d) center/2px 100% no-repeat, linear-gradient(#d7c68d, #d7c68d) center 25%/100% 2px no-repeat, linear-gradient(#d7c68d, #d7c68d) center 65%/70% 2px no-repeat; transform: skewY(-15deg); }
#türchen-erlebnis .erlebnis__blattfuß { color: #e4dbb8; font-size: clamp(8px, 1.5dvh, 11px); margin-top: 7%; }
#türchen-erlebnis .erlebnis__griff { position: absolute; top: 48%; right: -1px; width: 13px; height: 28px; border-radius: 15px 0 0 15px; background: #091e2e; border: 1px solid #d6b76f; border-right: 0; }
#türchen-erlebnis.erlebnis--bildtür .erlebnis__blatt { justify-content: center; background-origin: border-box; background-repeat: no-repeat; border: 1px solid #071822; border-left: 1px dashed #f3e7c48c; border-radius: 2px; box-shadow: 0 0 0 2px #f9d994, 0 0 16px #ffcd6c80, 2px 4px 8px #0006; }
#türchen-erlebnis.erlebnis--bildtür .erlebnis__blatt::before { inset: 5px; border-left: 0; border-color: #ffefca70; }
#türchen-erlebnis.erlebnis--bildtür .erlebnis__blattkopf,
#türchen-erlebnis.erlebnis--bildtür .erlebnis__antenne,
#türchen-erlebnis.erlebnis--bildtür .erlebnis__blattfuß { display: none; }
#türchen-erlebnis.erlebnis--bildtür .erlebnis__nummer { margin: 0; line-height: 1; letter-spacing: -.025em; transform: translateZ(1px); }
#türchen-erlebnis.erlebnis--bildtür .erlebnis__fach { border-radius: 2px; }
#türchen-erlebnis .erlebnis__licht { position: absolute; width: 1800px; height: 1800px; left: calc(50% - 900px); top: calc(50% - 917px); pointer-events: none; opacity: 0; background: radial-gradient(circle, #ffdf9a77 0, #ffc75e22 38%, transparent 67%); transform: translateZ(-2800px); transition: opacity 1000ms ease-in-out; }
#türchen-erlebnis .erlebnis__tiefenrahmen { position: absolute; width: 284px; height: 358px; left: calc(50% - 142px); top: calc(50% - 196px); border: 2px solid #d7bb7859; border-radius: 12px; box-shadow: 0 0 24px #d7bb781c, inset 0 0 24px #d7bb781c; pointer-events: none; visibility: hidden; }
#türchen-erlebnis .erlebnis__tiefenrahmen--nah { transform: translateZ(-700px); }
#türchen-erlebnis .erlebnis__tiefenrahmen--fern { width: 420px; height: 440px; left: calc(50% - 210px); top: calc(50% - 237px); transform: translateZ(-1500px); border-color: #d7bb783b; }

#türchen-erlebnis [data-zustand="öffnet"] .erlebnis__blatt { will-change: transform; animation: erlebnis-blatt-aufklappen 1800ms cubic-bezier(.45,0,.25,1) both; }
#türchen-erlebnis [data-zustand="fliegt"] .erlebnis__kamera { will-change: transform; animation: erlebnis-kameraflug 2600ms cubic-bezier(.45,0,.25,1) both; }
#türchen-erlebnis [data-zustand="fliegt"] .erlebnis__blatt { transform: rotateY(-116deg); }
#türchen-erlebnis [data-zustand="fliegt"] .erlebnis__tiefenrahmen { visibility: visible; animation: erlebnis-kulisse-einblenden 700ms ease-in-out both; }
#türchen-erlebnis [data-zustand="öffnet"] .erlebnis__licht,
#türchen-erlebnis [data-zustand="fliegt"] .erlebnis__licht,
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__licht { opacity: .55; }
/* Nach der Ankunft heben sich Kamera- und Ergebnistiefe geometrisch auf.
   Den identischen Endframe flach darstellen: So liegen keine 3D-Lichtebenen
   über den Inhalten und Chromium kann Links und Schaltflächen sicher treffen. */
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__kamera { transform: none; transform-style: flat; }
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__tür,
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__hintergrund,
#türchen-erlebnis [data-zustand="fehler"] .erlebnis__tür,
#türchen-erlebnis [data-zustand="fehler"] .erlebnis__hintergrund { visibility: hidden; }
#türchen-erlebnis [data-zustand="fliegt"] .erlebnis__sterne { animation: erlebnis-sterne-vorbei 2600ms ease-in-out both; }
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__sterne { opacity: .12; }

/* Eine identische, rein dekorative Ankunft für Gewinn und Niete. Die echte
   Ergebnisfläche wird erst freigegeben, wenn der Kameraflug beendet ist. */
#türchen-erlebnis .erlebnis__ankunft { position: absolute; inset: 26px 30px 65px; border-radius: 18px; pointer-events: none; visibility: hidden; opacity: 0; background: radial-gradient(ellipse at 50% 48%, #e5ddbd88 0, #a9d3ce36 26%, #103242 72%); box-shadow: inset 0 0 90px #d4e6d518; transform: translateZ(calc(-1 * var(--erlebnis-reisetiefe))); transition: opacity 1000ms ease-in-out; }
#türchen-erlebnis [data-zustand="öffnet"] .erlebnis__ankunft,
#türchen-erlebnis [data-zustand="fliegt"] .erlebnis__ankunft,
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__ankunft { visibility: visible; opacity: 1; }
#türchen-erlebnis .erlebnis__ergebnis { position: absolute; inset: 26px 30px 65px; padding: 28px 24px; text-align: center; background: #103242; border: 1px solid #bd9651; border-radius: 18px; box-shadow: 0 24px 70px #0006, 0 0 70px #e5b35b12; transform: translateZ(calc(-1 * var(--erlebnis-reisetiefe))); overflow: auto; scrollbar-width: thin; scrollbar-color: #8b805f #103242; overflow-wrap: anywhere; visibility: hidden; }
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__ergebnis,
#türchen-erlebnis [data-zustand="fehler"] .erlebnis__ergebnis { visibility: visible; }
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__ergebnis { transform: none; animation: erlebnis-kulisse-einblenden 650ms ease-out both; }
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__licht,
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__tiefenrahmen,
#türchen-erlebnis [data-zustand="ergebnis"] .erlebnis__ankunft { visibility: hidden; }
#türchen-erlebnis [data-zustand="fehler"] .erlebnis__ergebnis { transform: translateZ(0); }
#türchen-erlebnis .erlebnis__inhalt { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; width: 100%; }
#türchen-erlebnis .erlebnis__siegel { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; margin-bottom: 17px; color: var(--erlebnis-gold); background: #ffd27a12; border: 1px solid #ffd27a40; border-radius: 50%; }
#türchen-erlebnis .erlebnis__siegel svg { width: 34px; height: 34px; }
#türchen-erlebnis .erlebnis__stern, #türchen-erlebnis .erlebnis__fehlerzeichen { display: none; }
#türchen-erlebnis .erlebnis__fehlerzeichen { font: 500 36px/1 Georgia, serif; }
#türchen-erlebnis .erlebnis__kicker { margin: 0 0 9px; font-size: 12px; letter-spacing: .18em; color: var(--erlebnis-gold); }
#türchen-erlebnis #erlebnis-titel { padding: 0; margin: 0 0 20px; color: #fff0cd; font: 400 clamp(26px, 4vw, 42px)/1.15 Georgia, serif; text-shadow: none; letter-spacing: normal; max-width: 100%; }
#türchen-erlebnis #erlebnis-titel:focus { outline: none; }
#türchen-erlebnis .erlebnis__preis { color: var(--erlebnis-text); font-size: clamp(18px, 2.5vw, 25px); font-weight: 650; line-height: 1.4; margin: 0 0 16px; max-width: 600px; }
#türchen-erlebnis .erlebnis__nachricht { color: #d5e2e5; max-width: 540px; font-size: 16px; line-height: 1.6; }
#türchen-erlebnis .erlebnis__sponsor { margin-top: 14px; font-size: 14px; }
#türchen-erlebnis .erlebnis__qr, #türchen-erlebnis .erlebnis__anmeldung { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; font-size: 15px; }
#türchen-erlebnis .erlebnis__zurück { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 46px; padding: 12px 20px; margin-top: 24px; color: #282116; background: linear-gradient(110deg, #fbc767, #ffe0a0); border: 1px solid #f8ca73; border-radius: 11px; font-size: 14px; font-weight: 650; line-height: 1.4; }
#türchen-erlebnis .erlebnis__zurück:hover { background: #ffe6b7; }
#türchen-erlebnis .erlebnis__ergebnis[data-ergebnis="niete"] { border-color: #96bfc75c; background: #123140; }
#türchen-erlebnis .erlebnis__ergebnis[data-ergebnis="niete"] .erlebnis__siegel { color: #cce8ec; background: #bddfe510; border-color: #bddfe530; }
#türchen-erlebnis .erlebnis__ergebnis[data-ergebnis="niete"] .erlebnis__geschenk,
#türchen-erlebnis .erlebnis__ergebnis[data-ergebnis="fehler"] .erlebnis__geschenk { display: none; }
#türchen-erlebnis .erlebnis__ergebnis[data-ergebnis="niete"] .erlebnis__stern,
#türchen-erlebnis .erlebnis__ergebnis[data-ergebnis="fehler"] .erlebnis__fehlerzeichen { display: block; }
#türchen-erlebnis .erlebnis__ergebnis[data-ergebnis="niete"] #erlebnis-titel { color: #e7f2f5; }
#türchen-erlebnis .erlebnis__ergebnis[data-ergebnis="niete"] .erlebnis__kicker { color: #cce8ec; }
#türchen-erlebnis .erlebnis__ergebnis[data-ergebnis="fehler"] { border-color: #daac7f; }
#türchen-erlebnis .erlebnis__konfetti { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
#türchen-erlebnis .erlebnis__konfetti i { position: absolute; top: 37%; left: 50%; width: 7px; height: 11px; border-radius: 1px; background: var(--farbe); opacity: 0; animation: erlebnis-konfetti-fliegt 2100ms cubic-bezier(.15,.55,.5,1) var(--verzögerung) both; }
#türchen-erlebnis .erlebnis__status { position: absolute; bottom: 16px; inset-inline: 12px; z-index: 6; margin: 0; padding: 0; color: var(--erlebnis-neben); text-align: center; font-size: 13px; line-height: 1.4; pointer-events: none; }
#türchen-erlebnis .erlebnis__fuß { padding: 12px 18px; border-top: 1px solid #ffffff12; text-align: center; font-size: 11px; color: var(--erlebnis-neben); }

@keyframes erlebnis-kulisse-einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes erlebnis-blatt-aufklappen { from { transform: rotateY(0deg); } to { transform: rotateY(-116deg); } }
@keyframes erlebnis-kameraflug { from { transform: translateZ(0); } to { transform: translateZ(var(--erlebnis-reisetiefe)); } }
@keyframes erlebnis-sterne-vorbei { from { opacity: .55; transform: scale(1); } to { opacity: .12; transform: scale(3.5); } }
@keyframes erlebnis-konfetti-fliegt { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 8% { opacity: 1; } 38% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--drehung)); } 100% { opacity: 0; transform: translate(var(--ende-x), 520px) rotate(var(--ende-drehung)); } }

@media (max-width: 520px) {
    #türchen-erlebnis { width: calc(100vw - 16px); height: min(720px, calc(100dvh - 16px)); border-radius: 18px; }
    #türchen-erlebnis .erlebnis__kopf { padding: 10px 14px; gap: 10px; }
    #türchen-erlebnis .erlebnis__marke { font-size: 12px; }
    #türchen-erlebnis .erlebnis__hintergrund { inset-inline: 14px; gap: 12px; }
    #türchen-erlebnis .erlebnis__ankunft { inset: 14px 12px 66px; border-radius: 14px; }
    #türchen-erlebnis .erlebnis__ergebnis { inset: 14px 12px 66px; padding: 23px 17px; border-radius: 14px; }
    #türchen-erlebnis .erlebnis__nachricht { font-size: 14px; }
    #türchen-erlebnis .erlebnis__siegel { width: 55px; height: 55px; margin-bottom: 14px; }
    #türchen-erlebnis .erlebnis__zurück { width: 100%; padding-inline: 12px; font-size: 13px; }
    #türchen-erlebnis .erlebnis__status { font-size: 12px; }
    #türchen-erlebnis .erlebnis__fuß { padding: 10px 12px; font-size: 10px; }
}

@media (max-height: 580px) {
    /* Auch im Querformat liegt die Ergebnisfläche zunächst vollständig hinter der Tür. */
    #türchen-erlebnis { --erlebnis-tür-breite: clamp(105px, 33dvh, 170px); --erlebnis-reisetiefe: 7000px; }
    #türchen-erlebnis .erlebnis__kopf { padding-block: 5px; }
    #türchen-erlebnis .erlebnis__fuß { padding-block: 6px; }
    #türchen-erlebnis .erlebnis__ankunft { inset: 10px 14px 46px; }
    #türchen-erlebnis .erlebnis__ergebnis { inset: 10px 14px 46px; padding: 18px 20px; }
    #türchen-erlebnis .erlebnis__siegel { width: 38px; height: 38px; margin-bottom: 8px; }
    #türchen-erlebnis .erlebnis__siegel svg { width: 24px; height: 24px; }
    #türchen-erlebnis #erlebnis-titel { margin-bottom: 10px; font-size: 26px; }
    #türchen-erlebnis .erlebnis__preis { font-size: 18px; margin-bottom: 8px; }
    #türchen-erlebnis .erlebnis__nachricht { font-size: 14px; }
    #türchen-erlebnis .erlebnis__zurück { margin-top: 15px; }
    #türchen-erlebnis .erlebnis__status { bottom: 12px; font-size: 12px; }
    #türchen-erlebnis .erlebnis__blattkopf { font-size: 8px; }
    #türchen-erlebnis .erlebnis__blattfuß { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    #türchen-erlebnis *, #türchen-erlebnis *::before, #türchen-erlebnis *::after { animation: none !important; transition: none !important; }
    #türchen-erlebnis .erlebnis__konfetti { display: none; }
}