:root{--ink:#194d50;--red:#bd3f43;--cream:#fff9eb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,sans-serif}button,a,input{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;font:inherit}a{color:inherit}header{position:absolute;z-index:5;top:0;width:100%;padding:26px 5%;display:flex;align-items:center;justify-content:space-between}.brand{font-size:22px;font-weight:900;text-decoration:none;letter-spacing:-1px}.brand span{color:var(--red)}nav{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:bold}nav a{text-decoration:none}.pill{border:0;border-radius:30px;padding:13px 23px;background:var(--ink);color:white;font-weight:bold}.hero{background:#bfe7e8;position:relative;overflow:hidden;min-height:870px;text-align:center;padding-top:120px}.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:11px;font-weight:800}.hero h1{font-family:Georgia,serif;font-size:clamp(48px,6vw,80px);line-height:1.02;letter-spacing:-3px;margin:19px 0}.hero h1 em{color:var(--red);font-style:normal}.intro{font-size:16px;line-height:1.7;max-width:440px;margin:0 auto}.countdown{display:flex;gap:20px;justify-content:center;margin:24px 0 12px}.countdown b{display:block;font-size:28px}.countdown small{font-size:9px;text-transform:uppercase;letter-spacing:2px}.countdown span{min-width:54px}.village{position:relative;width:min(1200px,110%);margin:0 auto;height:420px}.village svg{width:100%;height:100%;overflow:visible}.spot{position:absolute;border:0;background:white;color:var(--ink);border-radius:24px;padding:12px 18px;box-shadow:0 5px 0 #1d59531a;font-size:13px;font-weight:800;transition:transform .2s}.spot:hover{transform:translateY(-6px)}.spot:after{content:'↗';margin-left:12px;color:var(--red)}.menu-spot{left:40%;top:60%}.invite-spot{left:13%;top:64%}.wish-spot{right:13%;top:62%}.explore{position:relative;font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-top:0}.snow{position:absolute;inset:0;pointer-events:none;overflow:hidden}.flake{position:absolute;color:white;animation:fall linear infinite;top:-30px;opacity:.8}@keyframes fall{to{transform:translate(30px,930px) rotate(180deg)}}.section{max-width:1080px;margin:auto;padding:85px 36px}.section-title{font-family:Georgia,serif;font-size:46px;letter-spacing:-1.5px;line-height:1.1;margin:15px 0 22px}.details{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.details p{line-height:1.8;color:#537171}.note{font-size:12px!important}.invitation{background:#f3dfbd;padding:35px;transform:rotate(2deg);border:10px solid #fff;box-shadow:0 12px 30px #264e4710;text-align:center}.invitation h3{font:36px Georgia,serif}.invitation hr{border:0;border-top:1px solid #bba982;margin:25px}.invitation .tiny{font-size:11px;letter-spacing:2px}.menu{background:#e6eeDF;text-align:center}.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:45px}.courses article{border-top:1px solid #a6bab0;padding-top:24px}.courses .icon{font-size:42px}.courses h3{font:25px Georgia,serif;margin:18px 0 10px}.courses p{font-size:14px;line-height:1.7}.courses small{font-size:10px;letter-spacing:2px}.together{display:flex;align-items:center;justify-content:space-between;gap:40px}.red{background:var(--red)}footer{border-top:1px solid #d7ddcc;padding:30px 5%;display:flex;justify-content:space-between;font-size:12px}dialog{border:0;border-radius:20px;padding:35px;max-width:460px;width:calc(100% - 32px);color:var(--ink);background:var(--cream);box-shadow:0 20px 100px #143b4a44}dialog::backdrop{background:#123d4b88;backdrop-filter:blur(5px)}dialog h2{font:32px Georgia,serif}dialog p{line-height:1.7}.close{float:right;border:0;background:transparent;font-size:24px;color:var(--ink)}label{display:block;font-size:13px;margin-top:15px}input{display:block;width:100%;margin:6px 0 12px;padding:12px;border:1px solid #a9bcb0;border-radius:8px;font:inherit}button:focus-visible,a:focus-visible{outline:3px solid #b44a26;outline-offset:5px}.settings{background:none;border:0;color:var(--ink);text-decoration:underline;font-size:12px}.twinkle{animation:twinkle 2s ease-in-out infinite alternate}@keyframes twinkle{to{opacity:.5}}@media(max-width:700px){header{padding:22px 6%}.brand{font-size:18px}nav a{display:none}nav{gap:10px}.pill{padding:12px 17px}.hero{padding-top:115px;min-height:775px}.hero h1{letter-spacing:-2px}.intro{padding:0 30px;font-size:14px}.village{width:160%;margin-left:-30%;height:355px;margin-top:20px}.spot{font-size:11px;padding:10px}.invite-spot{left:22%;top:72%}.wish-spot{right:22%;top:72%}.menu-spot{left:43%;top:56%}.details{grid-template-columns:1fr;gap:35px}.section{padding:55px 25px}.section-title{font-size:37px}.courses{grid-template-columns:1fr;gap:25px}.together{display:block}.together button{margin-top:15px}footer{gap:25px;flex-wrap:wrap}.explore{font-size:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Sittergarten: Fonduekarte und Platz für ein eigenes Foto */
.sittergarten-photo { padding-top: 0; padding-bottom: 65px; }
.sittergarten-photo img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; border-radius: 16px; }
.fondue-meat { max-width: 660px; margin: 45px auto 55px; padding: 32px 20px; border-top: 1px solid #a6bab0; border-bottom: 1px solid #a6bab0; }
.fondue-meat h3, .cheese-title { font: 32px Georgia, serif; margin: 18px 0; }
.fondue-meat p { line-height: 1.7; }
.fondue-price { color: var(--red); font-size: 24px !important; font-weight: bold; }
.fondue-price span { display: block; color: var(--ink); font-size: 12px; font-weight: normal; margin-top: 5px; }
.cheese-title + .courses { margin-top: 25px; }
@media (max-width: 700px) { .sittergarten-photo { padding-bottom: 45px; } .sittergarten-photo img { aspect-ratio: 3 / 2; } }

/* Dezente weihnachtliche Rotakzente */
#inviteTop { background: var(--red); }
.countdown b { color: var(--red); }
.invitation { border-top-color: #bd3f43; background: #f6e4d7; }
.invitation h3 { color: var(--red); }

/* Festlicher Restaurantabend: Tannengrün und Dunkelrot ab der Einladung. */
#fest, .sittergarten-photo, .menu, .together, footer, dialog {
  --ink: #163e30;
  --red: #8b2638;
}
#fest .eyebrow, .together .eyebrow { color: var(--red); }
#fest .section-title, .together .section-title { color: var(--ink); }
#fest > div > p { color: #365448; }
#fest .invitation {
  background: #812b3b;
  color: #fff9ef;
  border: 10px solid #fff9ef;
  border-top-color: #173f31;
  box-shadow: 0 12px 30px #173f3120;
}
#fest .invitation h3, #fest .invitation p { color: #fff9ef; }
#fest .invitation hr { border-top-color: #ffffff55; }
.menu { background: #183f31; color: #fff9ef; }
.menu > .section > .eyebrow { color: #f4cbd0; }
.fondue-meat {
  background: #fff9f2;
  color: #163e30;
  border-top: 4px solid #8b2638;
  border-bottom: 1px solid #dac5c6;
  border-radius: 8px;
}
.fondue-meat .eyebrow, .fondue-meat h3 { color: #8b2638; }
.menu .courses article {
  background: #fff9f2;
  color: #163e30;
  border-top: 4px solid #8b2638;
  border-radius: 8px;
  padding: 25px 14px;
}
.menu .courses h3 { color: #8b2638; }
footer { background: #183f31; color: #fff9ef; border-top: 3px solid #8b2638; }
footer .settings { color: #fff9ef; }
/* Auf kleinen Bildschirmen bleibt auch das Posthaus samt Schild sichtbar. */
@media (max-width: 700px) {
  .village { width: 125%; margin-left: -12.5%; }
  .invite-spot { left: 15%; }
  .wish-spot { right: 15%; }
  .menu-spot { left: 40%; }
}

/* Christmas in New York: Schneeweiss, Weinrot und tiefes Tannengrün. */
:root { --ink: #153d2e; --red: #81243a; --cream: #ffffff; --santa-space: 94px; }
body { padding-right: var(--santa-space); }
header { width: calc(100% - var(--santa-space)); color: #ffffff; }
header .brand span { color: #ffffff; }
header .brand { border-bottom: 2px solid #a83b51; padding-bottom: 6px; }
.hero { background: radial-gradient(ellipse at 50% 65%, #285c47 0%, #123628 75%); color: #ffffff; }
.hero h1 em { color: #ffffff; background: #81243a; padding: 0 14px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .eyebrow, .intro, .countdown b { color: #ffffff; }
.countdown small { color: #e1ece5; }
.hero .explore { color: #173f31; }
#fest, .sittergarten-photo, .menu, .together, footer, dialog { --ink: #153d2e; --red: #81243a; }
#fest .invitation { background: #81243a; border-color: #ffffff; border-top-color: #153d2e; }
#fest .invitation, #fest .invitation h3, #fest .invitation p { color: #ffffff; }
.menu, footer { background: #123b2c; color: #ffffff; }
.fondue-meat, .menu .courses article { background: #ffffff; border-top-color: #81243a; }
.santa-lane { position: fixed; z-index: 10; right: 0; top: 0; bottom: 0; width: var(--santa-space); background: #f7faf7; border-left: 1px solid #d9e4dc; pointer-events: none; overflow: hidden; }
.lane-star, .lane-bottom { position: absolute; width: 100%; text-align: center; color: #81243a; font-size: 27px; }
.lane-star { top: 22px; } .lane-bottom { bottom: 10px; }
.santa-track { position: absolute; top: 76px; bottom: 48px; width: 100%; }
.ladder { position: absolute; top: 0; bottom: 0; left: 25%; width: 50%; border-left: 5px solid #174632; border-right: 5px solid #174632; border-radius: 5px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, #174632 29px, #174632 33px, transparent 33px, transparent 46px); }
.climbing-santa { position: absolute; top: 0; left: 5%; width: 90%; height: auto; overflow: visible; filter: drop-shadow(0 3px 2px #123b2c28); will-change: transform; }
.santa-arm, .santa-leg { transform-box: fill-box; transform-origin: center; }
.left-arm, .right-leg { transform: translateY(var(--climb-step, 0px)); }
.right-arm, .left-leg { transform: translateY(calc(-1 * var(--climb-step, 0px))); }
@media (max-width: 900px) { :root { --santa-space: 66px; } .details { gap: 35px; } }
@media (max-width: 700px) {
 :root { --santa-space: 44px; }
 .hero h1 { font-size: clamp(34px, 8.5vw, 48px); }
 .hero h1 em { padding: 0 5px 4px; }
 header { padding: 20px 12px; gap: 10px; }
 .brand { font-size: 16px; }
 #inviteTop { font-size: 11px; padding: 11px; }
 .ladder { border-left-width: 3px; border-right-width: 3px; background-size: 100% 32px; }
 .santa-track { top: 65px; bottom: 35px; }
 .lane-star, .lane-bottom { font-size: 20px; }
 .section-title { font-size: 32px; }
 .invitation { padding: 25px 12px; }
 .invitation h3 { font-size: 29px; }
 .countdown { gap: 9px; }
 .spot { padding: 9px 7px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
 .climbing-santa { will-change: auto; }
 .santa-arm, .santa-leg { transform: none; }
}
.hero .explore { display: inline-block; background: #ffffff; padding: 9px 14px; border-radius: 20px; max-width: 95%; }

/* Gemauerter Kamin mit verschneitem Abschluss und Feuerstelle. */
.santa-lane {
  border-left: 3px solid #d9c7c5;
  background-color: #733244;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='56' viewBox='0 0 92 56'%3E%3Cpath d='M0 0H92M0 28H92M0 56H92M46 0V28M0 28V56M92 28V56' fill='none' stroke='%23c4a4a3' stroke-width='3'/%3E%3Cpath d='M3 5H42M50 5H88M5 33H85' stroke='%238b4455' stroke-width='3'/%3E%3C/svg%3E");
}
.chimney-cap { position: absolute; inset: 12px 0 auto; height: 28px; background: #4c2030; border-top: 9px solid white; border-bottom: 4px solid #bc9299; border-radius: 8px 8px 0 0; text-align: center; }
.chimney-cap span { position: relative; top: -17px; color: #ffffff; font-size: 24px; }
.santa-track { top: 62px; bottom: 33px; z-index: 2; }
.ladder { border-color: #e1d6c8; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, #e1d6c8 29px, #e1d6c8 33px, transparent 33px, transparent 46px); opacity: .85; }
.fireplace { position: absolute; bottom: 12px; left: 5%; width: 90%; height: 92px; border: 6px solid #c4a4a3; border-bottom: 10px solid #47202c; border-radius: 40px 40px 3px 3px; background: #251b20; overflow: hidden; }
.fireplace-glow { position: absolute; inset: 30% -15% -30%; background: radial-gradient(ellipse, #d59766 0%, #8b263855 40%, transparent 70%); opacity: .35; transition: opacity .4s; }
.santa-arrived .fireplace-glow { opacity: 1; }
.arrival-spark { position: absolute; bottom: 0; left: 8%; color: #ffffff; opacity: 0; transition: opacity .4s; }
.santa-arrived .arrival-spark { opacity: 1; }
/* Navigation bleibt beim Entdecken erreichbar. */
.explore-nav { position: sticky; top: 0; z-index: 8; display: flex; justify-content: center; gap: 9px; padding: 12px; background: #ffffffed; backdrop-filter: blur(12px); border-bottom: 1px solid #dce6df; }
.explore-nav a { padding: 10px 17px; border-radius: 25px; color: #153d2e; font-size: 13px; text-decoration: none; white-space: nowrap; }
.explore-nav a:hover, .explore-nav a[aria-current="location"] { background: #81243a; color: white; }
#dorf, #fest, #menu, #auswahl, #geschenk { scroll-margin-top: 82px; }
.fondue-picker .eyebrow { color: #81243a; }
.picker-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; margin-top: 30px; align-items: start; }
.picker-row { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; border-bottom: 1px solid #dce6df; align-items: center; }
.picker-row h3 { font: 23px Georgia, serif; margin: 0 0 8px; }
.picker-row p { font-size: 12px; line-height: 1.6; margin: 0 0 8px; }
.picker-row strong { color: #81243a; font-size: 14px; }
.stepper { display: flex; align-items: center; gap: 9px; }
.stepper button { width: 38px; height: 38px; border: 1px solid #bdcfc3; border-radius: 50%; background: white; color: #153d2e; font-size: 23px; }
.stepper button:hover:not(:disabled) { background: #81243a; color: white; }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper output { min-width: 22px; text-align: center; font-weight: bold; }
.selection-card { background: #f0f5f1; border-top: 4px solid #81243a; border-radius: 8px; padding: 30px; }
.selection-card p { line-height: 1.7; }
.selection-total { font-size: 34px; font-weight: bold; color: #81243a; margin: 15px 0; }
.gift-section { background: #81243a; color: white; }
.gift-layout { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 45px; }
.gift-interaction { text-align: center; }
.gift-button { border: 0; background: transparent; color: white; display: inline-flex; flex-direction: column; align-items: center; padding: 16px; }
.gift-bow { font-size: 70px; line-height: .65; transition: transform .4s; }
.gift-box { display: grid; place-items: center; width: 110px; height: 95px; background: #153d2e; border-top: 12px solid #245440; border-radius: 4px; position: relative; box-shadow: 0 12px 18px #42111c33; }
.gift-box::before { content: ''; position: absolute; top: -12px; bottom: 0; width: 16px; left: 47px; background: white; }
.gift-box span { z-index: 1; color: #81243a; font-size: 23px; }
.gift-label { font-size: 13px; margin-top: 15px; }
.gift-button:hover .gift-bow, .gift-button[aria-expanded="true"] .gift-bow { transform: translateY(-12px) rotate(-8deg); }
#giftMessage { line-height: 1.7; min-height: 1em; }
#nextGift { background: white; color: #81243a; }
@media (max-width: 700px) {
 .explore-nav { gap: 1px; padding: 8px 3px; }
 .explore-nav a { display: block; font-size: 10px; padding: 10px 7px; }
 .picker-layout, .gift-layout { grid-template-columns: 1fr; gap: 25px; }
 .picker-row h3 { font-size: 20px; }
 .stepper { gap: 4px; }
 .stepper button { width: 32px; height: 36px; }
 .selection-card { padding: 22px; }
 .fireplace { height: 65px; border-width: 3px; border-bottom-width: 7px; }
 .chimney-cap { height: 24px; }
 .santa-track { top: 58px; bottom: 26px; }
}

/* Ablauf, Anmeldung und persönliche Geschenkfragen */
.timeline { list-style: none; margin: 35px 0 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 135px 1fr; gap: 25px; padding: 20px 0 20px 24px; border-left: 3px solid #81243a; position: relative; }
.timeline li::before { content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #81243a; left: -7px; top: 25px; }
.timeline strong { color: #81243a; }
.timeline h3 { margin: 0 0 8px; font: 25px Georgia,serif; }
.timeline p { line-height: 1.7; margin: 0; }
.evening-plan { padding-top: 0; }
.registration form { max-width: 680px; margin-top: 30px; }
.registration fieldset { border: 0; padding: 0; margin: 25px 0; }
.registration legend { font-weight: bold; }
.registration legend span, .registration label > span { font-weight: normal; font-size: 12px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { display: flex; align-items: center; gap: 12px; border: 1px solid #b5c8bc; border-radius: 12px; padding: 18px; cursor: pointer; }
.choice:has(input:checked) { background: #edf4ee; border: 2px solid #81243a; padding: 17px; }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: #81243a; flex-shrink: 0; }
.choice small { display: block; font-size: 11px; margin-top: 7px; }
select { width: 100%; border: 1px solid #a9bcb0; border-radius: 8px; padding: 12px; font: inherit; background: white; color: #153d2e; margin: 8px 0 16px; }
.registration-preview { background: #edf4ee; padding: 18px; border-radius: 8px; line-height: 1.6; }
#giftAnswerForm { margin-bottom: 18px; }
#giftAnswerForm .pill { background: white; color: #81243a; }
#giftAnswerForm input { background: white; color: #153d2e; }
[hidden] { display: none !important; }
.music-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: start; }
.music-controls { display: flex; flex-wrap: wrap; gap: 9px; }
.music-controls .pill { font-size: 12px; padding: 12px 16px; }
.video-wrap { min-height: 220px; background: #153d2e; border-radius: 12px; overflow: hidden; }
.video-wrap iframe { width: 100%; min-height: 220px; aspect-ratio: 16/9; border: 0; display: block; }
#musicVolume { accent-color: #81243a; }
.music-dock { position: fixed; bottom: 12px; left: 12px; z-index: 12; display: flex; gap: 3px; padding: 5px; border: 1px solid #d2ded6; border-radius: 28px; background: white; box-shadow: 0 4px 20px #123b2c22; }
.music-dock button, .music-dock a { background: none; border: 0; padding: 9px 11px; font-size: 12px; color: #81243a; text-decoration: none; }
.music-dock button:first-child { background: #81243a; color: white; border-radius: 24px; }
footer { padding-bottom: 90px; }
.explore-nav { gap: 4px; }
.explore-nav a { padding-inline: 12px; }
#musik, #ablauf { scroll-margin-top: 80px; }
@media (max-width: 700px) {
 .timeline li { grid-template-columns: 1fr; gap: 10px; }
 .choice-grid, .music-layout { grid-template-columns: 1fr; }
 .explore-nav { flex-wrap: wrap; }
 .explore-nav a { padding: 9px 5px; font-size: 9px; }
 .music-dock { max-width: calc(100% - var(--santa-space) - 18px); left: 7px; bottom: 7px; }
 .music-dock button, .music-dock a { padding: 9px 8px; font-size: 10px; }
}

.name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.record-art { min-height: 270px; border-radius: 14px; background: radial-gradient(circle, #81243a 0 17%, #ffffff 17% 18%, #123b2c 18% 38%, #234c39 38% 39%, #123b2c 39% 43%, #234c39 43% 44%, #123b2c 44%); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.record-art strong { font-size: 12px; letter-spacing: 2px; }
.record-art span { font-size: 10px; letter-spacing: 2px; }
.record-art span:first-child { font-size: 28px; }
#originalSongLink { display: inline-block; text-decoration: none; font-size: 12px; }
@media(max-width:700px) { .name-grid { grid-template-columns: 1fr; gap: 0; } }

/* Weihnachtliche Papeterie: Tannenzweige, Weinrot, weisse Karten. */
.winter-welcome { background: #f4f7f3; position: relative; padding-top: 35px; }
.winter-welcome::before { content: ''; display: block; height: 130px; width: min(650px, 95%); margin: -35px auto -25px; background: url('bilder/winterzweige.svg') center top / contain no-repeat; }
#fest { padding-top: 55px; padding-bottom: 65px; }
#fest .eyebrow { line-height: 1.8; }
#fest .section-title { font-size: clamp(35px, 4vw, 54px); }
#fest .invitation { position: relative; background: #792137; border: 12px solid white; border-top-color: white; outline: 1px solid #d8ded7; padding: 48px 28px; }
#fest .invitation::before { content: ''; position: absolute; inset: 10px; border: 1px solid #f5e6e780; pointer-events: none; }
#fest .invitation::after { content: '✦'; position: absolute; top: -25px; left: calc(50% - 24px); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #143e2c; color: white; border: 3px solid white; font-size: 24px; }
.evening-plan { padding-bottom: 65px; }
.evening-plan > .eyebrow, .evening-plan > .section-title { text-align: center; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: white; padding: 25px 25px 15px; border-radius: 5px; border-top: 4px solid #81243a; box-shadow: 0 15px 35px #173f3108; }
.timeline li { display: block; padding: 22px 16px; border-left: 1px solid #dbe4dc; }
.timeline li:first-child { border-left: 0; }
.timeline li::before { display: none; }
.timeline strong { display: inline-block; background: #81243a; color: white; padding: 6px 10px; border-radius: 18px; font-size: 12px; margin-bottom: 18px; }
.timeline h3 { font-size: 23px; }
.timeline p { font-size: 13px; }
.sittergarten-photo { padding-bottom: 75px; }
.sittergarten-photo img { border: 8px solid white; border-radius: 3px; box-shadow: 0 12px 30px #173f3112; }
.menu { position: relative; background-color: #123b2c; background-image: radial-gradient(#ffffff10 1px, transparent 1px); background-size: 22px 22px; border-top: 8px solid #81243a; }
.menu .section > .eyebrow::before { content: '✦  ✧  ✦'; display: block; color: white; font-size: 22px; letter-spacing: 16px; margin-bottom: 28px; }
.menu .fondue-meat { border: 1px solid #d9e1d9; border-top: 7px solid #81243a; box-shadow: 0 12px 30px #051d1530; border-radius: 3px; }
.menu .courses article { border-radius: 3px; border-top-width: 7px; }
.registration-wrap { position: relative; background: #762137; background-image: radial-gradient(#ffffff13 1px, transparent 1px); background-size: 28px 28px; }
.registration { display: grid; grid-template-columns: .8fr 1.2fr; gap: 55px; align-items: start; padding-top: 90px; padding-bottom: 90px; }
.registration-intro { color: white; position: sticky; top: 120px; padding-top: 30px; }
.registration-intro .eyebrow { color: #f0d7dd; line-height: 1.8; }
.registration-intro .section-title { font-size: clamp(42px, 5vw, 66px); }
.registration-intro p { line-height: 1.9; color: #f5e5e9; }
.festive-seal { width: 65px; height: 65px; display: grid; place-items: center; border: 1px solid #ffffff80; border-radius: 50%; font-size: 37px; margin-bottom: 35px; }
.rsvp-date { border-top: 1px solid #ffffff55; margin-top: 35px; padding-top: 25px; display: flex; gap: 20px; align-items: center; }
.rsvp-date strong { font: 72px Georgia, serif; }
.rsvp-date span { font-size: 10px; letter-spacing: 2px; line-height: 2; }
.registration form { position: relative; margin: 0; background: #fff; padding: 35px; border-radius: 7px; box-shadow: 0 20px 60px #300b1b40; border-top: 7px solid #153d2e; }
.form-heading { text-align: center; padding-bottom: 20px; border-bottom: 1px solid #dbe4dc; margin-bottom: 20px; }
.form-heading > span { font-size: 29px; color: #81243a; }
.form-heading h3 { font: 32px Georgia,serif; margin: 9px 0; }
.form-heading p { font-size: 13px; color: #517160; margin: 0; }
.registration input:not([type="radio"]):not([hidden]), .registration select { background: #f5f8f4; border: 1px solid #d2ddd4; border-radius: 7px; min-height: 46px; }
.registration input:focus, .registration select:focus { outline: 2px solid #81243a; outline-offset: 2px; }
.registration label { font-size: 12px; }
.registration legend { font-size: 14px; }
.form-number { background: #153d2e; border-radius: 50%; width: 24px; height: 24px; display: inline-grid; place-items: center; color: white; margin-right: 5px; font-size: 10px !important; }
.registration .choice { min-height: 85px; border-color: #d2ddd4; background: white; padding: 14px 10px; gap: 8px; }
.registration .choice:has(input:checked) { padding: 13px 9px; border-color: #81243a; background: #f9eff2; }
.registration .choice > span { font-size: 13px; font-weight: bold; }
.registration .choice small { font-size: 10px; font-weight: normal; line-height: 1.5; }
.registration .registration-preview { font-size: 12px; border-left: 3px solid #153d2e; border-radius: 3px; padding: 14px; }
.registration button[type="submit"] { width: 100%; background: #81243a; padding: 16px; border-radius: 7px; }
#registrationHint { color: #607368; font-size: 10px !important; line-height: 1.6; overflow-wrap: anywhere; }
.gift-section { background: #f2f6f1; color: #153d2e; }
.gift-section .eyebrow { color: #81243a; }
.gift-interaction { background: white; border: 1px solid #d2ddd4; border-top: 5px solid #81243a; padding: 26px; border-radius: 4px; box-shadow: 0 12px 30px #173f3112; }
.gift-button { color: #81243a; }
.gift-box { background: #81243a; border-top-color: #a23c54; }
.gift-box span { color: #153d2e; }
#giftAnswerForm .pill, #nextGift { background: #153d2e; color: white; }
.together { position: relative; border-top: 1px solid #d4dfd5; }
.together .eyebrow::before { content: '✦'; margin-right: 10px; font-size: 18px; }
/* Ein einziger Santa-Schalter für die Musik. */
.santa-music { position: fixed; bottom: 16px; left: 16px; z-index: 12; display: flex; align-items: center; gap: 9px; background: #fff; color: #81243a; border: 2px solid #81243a; border-radius: 40px; padding: 7px 14px 7px 8px; box-shadow: 0 5px 22px #122f2425; font-size: 12px; font-weight: bold; }
.music-santa { font-size: 29px; line-height: 1.2; }
.santa-music[aria-pressed="true"] { background: #81243a; color: white; border-color: white; }
.music-indicator { font-size: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 950px) {
 .registration { gap: 30px; grid-template-columns: .7fr 1fr; }
 .registration form { padding: 25px; }
 .timeline { grid-template-columns: 1fr 1fr; }
 .timeline li:nth-child(3) { border-left: 0; }
 .registration .choice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
 .winter-welcome::before { height: 105px; margin-bottom: -20px; }
 #fest { padding-top: 25px; }
 #fest .invitation { padding: 40px 18px; }
 .registration { grid-template-columns: 1fr; gap: 30px; padding: 50px 18px; }
 .registration-intro { position: static; padding-top: 0; text-align: center; }
 .registration-intro .section-title { font-size: 43px; }
 .festive-seal { margin: 0 auto 20px; }
 .rsvp-date { justify-content: center; margin-top: 20px; padding-top: 15px; }
 .rsvp-date strong { font-size: 52px; }
 .registration form { padding: 22px 17px; }
 .form-heading h3 { font-size: 28px; }
 .timeline { grid-template-columns: 1fr; padding: 12px 18px; }
 .timeline li { border-left: 0; border-bottom: 1px solid #dbe4dc; padding: 20px 0; }
 .timeline li:last-child { border-bottom: 0; }
 .gift-interaction { padding: 20px 16px; }
 .santa-music { bottom: 10px; left: 10px; padding: 5px 11px 5px 6px; font-size: 10px; gap: 6px; }
 .music-santa { font-size: 25px; }
}

/* Wiederkehrender Story-Effekt: Überschrift bleibt stehen, Inhalt zieht vorbei. */
.story-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 55px; }
.story-lead, #fest > div:first-child, .gift-layout > div:first-child, .together > div:first-child { position: sticky; top: 110px; align-self: start; }
.story-lead p { line-height: 1.8; }
#fest { align-items: start; min-height: 650px; }
#ablauf { padding-top: 60px; padding-bottom: 80px; }
#ablauf .timeline { display: block; margin: 0; padding: 12px 25px; }
#ablauf .timeline li { border-left: 0; border-bottom: 1px solid #dbe4dc; padding: 28px 0; }
#ablauf .timeline li:last-child { border-bottom: 0; }
#ablauf .story-lead { text-align: left; }
#team { min-height: 560px; padding-top: 60px; }
#team img { object-fit: contain; aspect-ratio: auto; height: auto; width: 100%; }
#team .eyebrow { color: #81243a; }
#menu { text-align: left; }
#menu .story-lead > .eyebrow { color: #f0d7dd; line-height: 1.8; }
#menu .story-lead > .eyebrow::before { content: '✦  ✧  ✦'; display: block; color: white; letter-spacing: 12px; font-size: 23px; margin-bottom: 25px; }
#menu .story-menu { min-width: 0; text-align: center; }
#menu .fondue-meat { margin-top: 0; }
#menu .courses { grid-template-columns: 1fr; gap: 25px; }
#menu .courses article { padding: 30px 20px; }
.gift-layout { align-items: start; min-height: 600px; }
.together.story-layout { padding-top: 85px; padding-bottom: 85px; min-height: 570px; }
.calendar-story { background: #f2f6f1; border: 1px solid #d2ddd4; border-top: 7px solid #81243a; text-align: center; padding: 38px 25px; }
.calendar-story > .eyebrow { color: #81243a; line-height: 1.8; }
.calendar-day { display: block; font: 110px Georgia,serif; color: #81243a; margin: 20px 0; }
.calendar-story p { line-height: 1.8; font-size: 13px; margin-bottom: 24px; }
.outlook-link { display: inline-block; text-decoration: none; text-align: center; line-height: 1.5; }
#team { scroll-margin-top: 80px; }
@media (max-width: 950px) { .story-layout { gap: 30px; } }
@media (max-width: 700px), (max-height: 650px) {
 .story-lead, #fest > div:first-child, .gift-layout > div:first-child, .together > div:first-child, .registration-intro { position: static; }
}
@media (max-width: 700px) {
 .story-layout { grid-template-columns: 1fr; gap: 30px; }
 #fest, #team, .gift-layout, .together.story-layout { min-height: 0; }
 #ablauf, #team { padding-top: 30px; padding-bottom: 45px; }
 #menu .story-lead { text-align: center; }
 .together.story-layout { padding: 55px 25px; }
 .calendar-story { padding: 28px 16px; }
 .calendar-day { font-size: 85px; }
}

/* Geschlossen bleiben Geschenk und Text zusammen; geöffnet bleibt der Story-Effekt. */
.gift-layout:not(.is-open) { min-height: 0; align-items: center; }
.gift-layout:not(.is-open) > div:first-child { position: static; align-self: center; }
.gift-layout:not(.is-open) #giftMessage:empty { display: none; }

/* Kleine Weihnachtsüberraschungen im Dorf und am Kamin. */
.sleigh-flight { position:absolute; top:475px; left:0; width:240px; z-index:3; pointer-events:none; transform:translateX(-280px); animation:sleigh-pass 28s linear infinite; }
.sleigh-flight svg { display:block; width:100%; filter:drop-shadow(0 4px 5px #082a2340); }
@keyframes sleigh-pass { 0% { transform:translate(-280px,20px) rotate(-4deg); } 32%,100% { transform:translate(calc(100vw + 280px),-35px) rotate(-4deg); } }
body.magic-paused .sleigh-flight { animation-play-state:paused; }
.fireplace { padding:0; cursor:pointer; pointer-events:auto; z-index:3; }
.fireplace:focus-visible { outline:3px solid white; outline-offset:-4px; }
.fire-sparks { position:absolute; inset:0; pointer-events:none; }
.fire-sparks i { position:absolute; bottom:12%; left:50%; width:4px; height:4px; border-radius:50%; background:#ffe4a6; box-shadow:0 0 6px #ffce78; animation:ember-rise .95s ease-out forwards; }
@keyframes ember-rise { from { transform:translate(0,0) scale(1); opacity:1; } to { transform:translate(var(--drift),-65px) scale(.2); opacity:0; } }
.fireplace.is-sparkling .fireplace-glow { opacity:1; }
@media(max-width:700px) { .sleigh-flight { top:435px; width:175px; } }
@media(prefers-reduced-motion:reduce) { .sleigh-flight { display:none; } .fire-sparks i { display:none; } }

/* Mehr Platz für den Team-Comic, weiterhin ohne Zuschnitt. */
#team { max-width: 1200px; grid-template-columns: .8fr 1.5fr; gap: 32px; }
#team > * { min-width: 0; }
@media (max-width: 700px) {
 #team { grid-template-columns: 1fr; padding-left: 12px; padding-right: 12px; gap: 24px; }
 #team .story-lead { padding: 0 13px; }
 #team img { border-width: 5px; }
}
#team .story-lead { container-type: inline-size; }
#team .section-title { font-size: clamp(16px, 9cqw, 40px); hyphens: none; overflow-wrap: normal; word-break: normal; }
#team .team-word { white-space: nowrap; }
@media (min-width: 701px) and (max-width: 950px) {
 #team { grid-template-columns: 1fr; min-height: 0; }
 #team .story-lead { position: static; }
}

/* Weihnachtsspiel anstelle der Geschenkfragen. */
#spiel { scroll-margin-top:82px; }
.memory-layout { grid-template-columns:.85fr 1.15fr; }
.memory-panel { padding:28px; border:1px solid #d2ddd4; border-top:5px solid #81243a; background:white; box-shadow:0 12px 30px #173f3112; text-align:center; min-width:0; }
.memory-score { display:flex; justify-content:space-between; gap:15px; margin-bottom:22px; text-transform:uppercase; font-size:11px; letter-spacing:1.5px; }
.memory-score strong { display:block; margin-top:7px; font:26px Georgia,serif; color:#81243a; }
.memory-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.memory-card { position:relative; aspect-ratio:1; padding:0; border:2px solid #a45568; border-radius:10px; background:linear-gradient(90deg,transparent 43%,#ffffff18 43%,#ffffff18 57%,transparent 57%),linear-gradient(0deg,transparent 43%,#ffffff18 43%,#ffffff18 57%,transparent 57%),#81243a; color:#fff; font-size:30px; transition:transform .2s,background .2s; }
.memory-card:hover { transform:translateY(-3px); }
.memory-card.is-revealed { background:#f4f7f2; border-color:#d1ddd3; }
.memory-card.is-matched { background:#dfece1; border-color:#1d503b; cursor:default; }
.memory-status { min-height:3.6em; line-height:1.6; font-size:14px; margin:22px 0 16px; }
#registrationHint { overflow-wrap:anywhere; }
@media(max-width:700px) { .memory-layout { grid-template-columns:1fr; } .memory-panel { padding:18px 12px; } .memory-board { gap:7px; } .memory-card { font-size:25px; } }

.email-fallback { margin-top:24px; padding:20px; border:1px solid #d2ddd4; border-radius:12px; background:#f2f6f1; }
.email-fallback h4 { margin:0 0 12px; font:24px Georgia,serif; }
.email-fallback p { line-height:1.6; font-size:13px; overflow-wrap:anywhere; }
.email-fallback textarea { width:100%; box-sizing:border-box; padding:12px; border:1px solid #a9bcb0; border-radius:8px; font:13px/1.6 Arial,sans-serif; color:#153d2e; background:white; resize:vertical; }
.email-fallback .pill { display:inline-block; margin-top:12px; text-decoration:none; font-size:12px; }

/* Sanft aufsteigender Rauch aus dem Dorf-Schornstein. */
.chimney-smoke { fill:none; stroke:#fff; stroke-width:11px; stroke-linecap:round; opacity:0; animation:chimney-drift 5s ease-out infinite; }
.smoke-two { animation-delay:-2.5s; stroke-width:8px; }
@keyframes chimney-drift {
  0% { transform:translate(0,9px); opacity:0; }
  20% { opacity:.5; }
  60% { transform:translate(9px,-16px); opacity:.3; }
  100% { transform:translate(21px,-42px); opacity:0; }
}
body.magic-paused .chimney-smoke { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .smoke-one { opacity:.4; } .smoke-two { display:none; } }

/* Weihnachtsbrief: undurchsichtige Startansicht vor der eigentlichen Website. */
body.letter-closed { overflow:hidden; }
body.letter-closed #siteContent { visibility:hidden; }
.letter-entrance { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; padding:30px 20px; overflow:auto; background:radial-gradient(ellipse at 50% 40%,#29513e 0%,#102c23 64%,#091c17 100%); color:#f2e5ce; text-align:center; }
.letter-entrance[hidden] { display:none; }
.letter-entrance::before { content:''; position:absolute; inset:15px; border:1px solid #c4a47738; pointer-events:none; }
.letter-kicker { font:10px Arial,sans-serif; letter-spacing:5px; color:#dbc29b; margin:0 0 15px; }
.letter-welcome h2 { font:clamp(25px,4vw,42px)/1.15 Georgia,serif; margin:0; font-weight:normal; }
.envelope { position:relative; display:block; flex-shrink:0; width:min(540px,85vw); height:auto; aspect-ratio:1.65; border:0; padding:0; background:none; color:#402d22; perspective:1200px; isolation:isolate; filter:drop-shadow(0 22px 22px #0006); text-align:center; }
.envelope-back,.envelope-front,.envelope-flap { position:absolute; inset:0; border-radius:5px; background-color:#b28a5c; background-image:repeating-linear-gradient(8deg,#fff1 0 1px,transparent 1px 5px),repeating-linear-gradient(98deg,#472e1910 0 1px,transparent 1px 3px),linear-gradient(125deg,#d2b58b,#b08a5f 65%,#c7a77c); }
.envelope-back { box-shadow:inset 0 0 25px #61452444; }
.envelope-front { z-index:3; box-shadow:inset 0 0 0 1px #77573555,inset 0 -15px 35px #69472422; background-image:linear-gradient(32deg,transparent 49.7%,#79593644 50%,transparent 50.5%),linear-gradient(-32deg,transparent 49.7%,#79593633 50%,transparent 50.5%),repeating-linear-gradient(8deg,#fff1 0 1px,transparent 1px 5px),linear-gradient(125deg,#d2b58b,#b08a5f 65%,#c7a77c); }
.envelope-flap { z-index:4; height:57%; clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:top center; background-image:repeating-linear-gradient(8deg,#fff1 0 1px,transparent 1px 5px),linear-gradient(155deg,#e1c49a,#bc9568); }
.envelope-address { position:absolute; left:8%; right:8%; bottom:12%; display:grid; gap:9px; }
.envelope-address small { font:8px Arial,sans-serif; letter-spacing:2px; color:#563f2d; }
.envelope-address strong { font:italic clamp(21px,4vw,34px) Georgia,serif; color:#183a2c; }
.envelope-address > span { font:11px Georgia,serif; }
.postmark { position:absolute; right:5%; top:8%; width:75px; height:75px; display:flex; flex-direction:column; justify-content:center; border:2px double #6b342b88; border-radius:50%; font:8px/1.7 Arial,sans-serif; color:#71392d; transform:rotate(15deg); z-index:5; }
.envelope-sprig { position:absolute; left:6%; bottom:7%; font-size:35px; color:#254c34; }
.wax-seal { position:absolute; z-index:6; left:calc(50% - 37px); top:calc(48% - 37px); width:74px; height:74px; padding:4px; border-radius:46% 51% 47% 53%; background:radial-gradient(circle at 35% 25%,#a74250,#792334 62%,#521727); border:3px solid #a14851; box-shadow:inset 0 0 0 3px #641e2d,0 5px 8px #43261e66; transition:transform .25s; }
.wax-seal svg { width:100%; height:100%; filter:drop-shadow(0 1px 1px #431520); }
.envelope:hover .wax-seal { transform:scale(1.06); }
.envelope:focus-visible { outline:2px solid #f2e5ce; outline-offset:12px; }
.letter-sheet { position:absolute; z-index:2; inset:7% 6%; background:#f4ead7; box-shadow:0 0 12px #553a2422; border:1px solid #d9c7a6; padding:20px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; color:#214232; }
.letter-sheet > span { font:10px Arial,sans-serif; letter-spacing:1px; }
.letter-sheet strong { font:clamp(20px,4vw,34px)/1.1 Georgia,serif; }
.letter-sheet i { font:12px Georgia,serif; color:#81243a; }
.letter-hint { font:12px/1.6 Arial,sans-serif; letter-spacing:.4px; margin:0; color:#e1ceb0; }
.is-opening .wax-seal { animation:seal-open .35s ease-in forwards; }
.is-opening .envelope-flap { animation:flap-open .7s .2s ease-in-out forwards; }
.is-opening .letter-sheet { animation:letter-rise .8s .7s ease-out forwards; }
.letter-entrance.is-opening { animation:entrance-fade .4s 1.4s ease-in forwards; pointer-events:none; }
@keyframes seal-open { to { transform:translateY(30px) rotate(-15deg); opacity:0; } }
@keyframes flap-open { to { transform:rotateX(180deg); z-index:1; } }
@keyframes letter-rise { to { transform:translateY(-48%); } }
@keyframes entrance-fade { to { opacity:0; } }
.letter-revealed { animation:site-unfold .65s ease-out both; }
@keyframes site-unfold { from { opacity:0; } to { opacity:1; } }
@media(max-width:600px) { .letter-entrance { gap:35px; } .postmark { width:48px; height:48px; font-size:5px; } .wax-seal { width:58px; height:58px; left:calc(50% - 29px); top:calc(45% - 29px); } .envelope-address { gap:6px; bottom:11%; } .envelope-address small { font-size:6px; letter-spacing:1px; } .envelope-address > span { font-size:9px; } .letter-hint { max-width:270px; } .envelope-sprig { font-size:24px; left:3%; } }
@media(max-height:550px) and (min-width:601px) { .letter-entrance { gap:16px; } .letter-welcome h2 { font-size:24px; } .envelope { width:350px; } }

/* Fokus nach dem Brief bleibt zugänglich, ohne Rahmen um die Überschrift. */
.hero h1[tabindex="-1"]:focus { outline: none; }

/* Drei zentrierte Menüpunkte, auch auf dem Handy sichtbar. */
header { justify-content:center; }
header nav { justify-content:center; gap:30px; }
header nav a { display:inline-block; white-space:nowrap; }
@media(max-width:700px) {
 header nav { gap:16px; font-size:12px; }
 header nav .pill { padding:11px 14px; font-size:12px; }
}
@media(max-width:360px) {
 header nav { gap:10px; font-size:11px; }
 header nav .pill { padding:10px; font-size:11px; }
}