/* Adventskalender für Lehrkräfte (Olga, 07.11.2026). Farben aus dem Skill branding: Petrol, Seeglas, Senf, Rostrot, Salbei, Creme. */
.advent{overflow-x:clip;--rost:#9A4F43;--senf-hell:#FBF1DC;--mint:#EAF2EF;padding-bottom:20px}
.advent-kopf{padding-top:34px;padding-bottom:6px;text-align:center}
.advent-kopf .hand{font-size:1.6rem;margin:0}
.advent-kopf h1{font-size:clamp(2.2rem,5.2vw,4rem);line-height:1.05;letter-spacing:-.02em;margin:.15rem auto .6rem;max-width:18ch}
.advent-kopf .lead{font-size:1.2rem;color:var(--muted);max-width:56ch;margin:0 auto}
.advent-sprung{margin:18px auto 0;text-align:center;max-width:none}
.advent-buehne{display:block;padding-top:22px}
.advent-bild{position:relative;width:100%;max-width:760px;margin:0 auto;aspect-ratio:2160/2864}
.advent-bild picture,.advent-bild img.szene{display:block;width:100%;height:auto}
.advent-bild img.szene{mix-blend-mode:multiply;user-select:none;-webkit-user-drag:none}
/* Türchen: kleine Papieranhänger mit Zahl in Handschrift, bewusst klein, damit das Bild wirkt (Olga, 07.11.2026) */
.tuer{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:23px;height:23px;border-radius:50%;
border:1.5px solid #fff;background:#FEFAF6e6;color:var(--petrol);font-family:CaveatLocal,cursive;font-weight:600;font-size:.95rem;line-height:1;
display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 2px 6px #28302f40;
transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.tuer::after{content:"";position:absolute;inset:-10px;border-radius:50%} /* größere Tippfläche */
.tuer:hover,.tuer:focus-visible{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 4px 12px #28302f55,0 0 0 2px var(--mustard)}
.tuer.offen{background:#2C6663e6;color:#fff}
.tuer.gesehen{background:#A9BFA6e6;color:#fff}
.tuer.gesehen::before{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--mustard);border:1.5px solid #fff}
.tuer.heute{background:var(--mustard);color:#28302F;animation:advent-puls 2.4s ease-in-out infinite}
@keyframes advent-puls{0%,100%{box-shadow:0 2px 6px #28302f40,0 0 0 0 #D9A441aa}50%{box-shadow:0 2px 6px #28302f40,0 0 0 9px #D9A44100}}
.tuer.wackeln{animation:advent-wackeln .45s ease}
@keyframes advent-wackeln{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(-12deg)}75%{transform:translate(-50%,-50%) rotate(10deg)}}
/* Rechner: Querformat über die ganze Breite, Anmeldung darunter */
@media(min-width:1280px){
.advent-bild{width:100vw;max-width:none;margin-left:calc(50% - 50vw);aspect-ratio:2752/1536}
.advent-bild img.szene{mix-blend-mode:normal}
.tuer{left:var(--qx);top:var(--qy);width:27px;height:27px;font-size:1.08rem}
.advent-seite{max-width:640px;margin:34px auto 0}
}
/* Seitenleiste: Anmeldung oder Stand */
.advent-seite{scroll-margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 26px 22px;box-shadow:var(--shadow)}
.advent-seite h2{font-size:1.65rem;margin:0 0 10px}
.advent-seite p{margin:0 0 12px}
.advent-seite .hand{font-size:1.35rem;margin:0}
.advent-seite form{display:grid;gap:8px;margin-top:6px}
.advent-seite label{font-weight:700;margin-top:6px}
.advent-seite input:not([type=checkbox]){font:inherit;padding:11px 12px;border:1px solid #7b8580;border-radius:8px;background:#fff;color:var(--ink);width:100%}
.advent-seite .check{font-weight:400;font-size:.95rem;line-height:1.45;margin-top:8px}
.advent-seite .check input{margin-top:4px;flex:none;width:18px;height:18px}
.advent-seite .button{width:100%;padding:13px 16px;margin-top:8px;font-size:1.05rem}
.advent-seite .geschenk{background:var(--senf-hell);border-left:5px solid var(--mustard);border-radius:12px;padding:12px 14px;font-size:.98rem}
.advent-seite .klein{font-size:.86rem;color:var(--muted);margin:10px 0 0}
.advent-seite .meldung{min-height:1.4em;color:var(--petrol);font-weight:700;margin:6px 0 0}
.advent-seite .meldung.fehler{color:var(--rost)}
.advent-seite .trenner{border:0;border-top:1px solid var(--line);margin:18px 0 12px}
.advent-seite details summary{color:var(--petrol);font-weight:700}
.advent-code{display:inline-block;font-size:1.6rem;font-weight:700;letter-spacing:.08em;color:var(--petrol);background:var(--mint);border-radius:10px;padding:8px 14px;margin:4px 0 12px}
.advent-zaehler{font-family:CaveatLocal,cursive;font-size:2.2rem;color:var(--rost);line-height:1;margin:2px 0 10px}
.advent-liste{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.advent-liste button{font:inherit;font-size:.95rem;border:1px solid var(--glass);background:#fff;color:var(--petrol);border-radius:999px;padding:5px 12px;cursor:pointer}
.advent-liste button:hover,.advent-liste button:focus-visible{border-color:var(--petrol)}
/* Was dich erwartet */
.advent-was{padding-top:56px}
.advent-was h2{text-align:center}
.advent-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.advent-drei>div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);position:relative}
.advent-drei img{position:absolute;right:-10px;top:-24px;width:78px;height:auto;transform:rotate(8deg);filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)}
.advent-drei h3{color:var(--petrol);padding-right:52px}
.advent-drei p{color:var(--muted);margin:0}
.advent-schritte{counter-reset:s;list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:26px 0 0}
.advent-schritte li{border-top:4px solid var(--mustard);padding:14px 4px 0}
.advent-schritte li::before{counter-increment:s;content:counter(s);display:block;font-family:CaveatLocal,cursive;font-size:2rem;color:var(--rost);line-height:1}
.advent-faq{max-width:760px;margin:44px auto 0}
.advent-faq details{border-top:1px solid var(--line);padding:14px 0}
.advent-faq details:last-child{border-bottom:1px solid var(--line)}
.advent-faq p{margin:.6rem 0 0;color:var(--muted)}
/* Türchen geöffnet */
.advent-dialog{border:0;border-radius:24px;padding:0;width:min(760px,calc(100% - 24px));max-height:calc(100% - 24px);box-shadow:0 30px 80px #28302f55;background:#FEFAF6;color:var(--ink)}
.advent-dialog::backdrop{background:#28302f88;backdrop-filter:blur(2px)}
.advent-dialog[open]{animation:advent-auf .38s cubic-bezier(.2,.8,.2,1)}
@keyframes advent-auf{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.ad-kopf{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;background:var(--petrol);color:#fff;padding:14px 18px 14px 22px}
.ad-kopf .nr{font-family:CaveatLocal,cursive;font-size:2.4rem;line-height:1;color:#FBF1DC}
.ad-kopf .datum{font-size:.95rem;opacity:.9}
.ad-kopf .zu{margin-left:auto;font:inherit;background:transparent;border:1px solid #ffffff99;color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;min-height:40px}
.ad-inhalt{padding:22px 24px 28px}
.ad-teil{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 22px 18px;margin:0 0 18px;position:relative}
.ad-teil .sticker{position:absolute;right:12px;top:-18px;width:70px;height:auto;transform:rotate(7deg);filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)}
.ad-teil .art{font-family:CaveatLocal,cursive;font-size:1.35rem;color:var(--rost);margin:0}
.ad-teil h3{font-size:1.5rem;margin:.1rem 0 .5rem;padding-right:70px;color:var(--petrol)}
.ad-teil .einl{color:var(--muted);font-style:italic}
.ad-gedicht{font-size:1.08rem;line-height:1.6;margin:10px 0 6px;padding-left:16px;border-left:4px solid var(--mustard)}
.ad-gedicht span{display:block}
.ad-gedicht .strophe{height:.8em}
.ad-teil ol,.ad-teil ul{padding-left:22px}
.ad-teil li{margin:.35rem 0}
.ad-quelle{font-size:.82rem;color:var(--muted);margin-top:10px}
.ad-quelle a{color:var(--muted)}
.ad-fakten{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.ad-fakten span{background:var(--mint);color:var(--petrol);border-radius:999px;padding:3px 11px;font-size:.88rem;font-weight:700}
.ad-reiter{display:flex;gap:6px;margin:14px 0 0;border-bottom:2px solid var(--line)}
.ad-reiter button{font:inherit;font-weight:700;background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:8px 12px;color:var(--muted);cursor:pointer}
.ad-reiter button[aria-selected=true]{color:var(--petrol);border-bottom-color:var(--petrol)}
.ad-warum{background:var(--senf-hell);border-left:5px solid var(--mustard);border-radius:12px;padding:12px 14px;margin-top:14px;font-size:.98rem}
.ad-achtung{background:#F8EEE9;border-left:5px solid var(--rost);border-radius:12px;padding:10px 14px;margin-top:10px;font-size:.95rem}
.ad-pdf{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.ad-pdf .button{margin:0}
.ad-pdf .button.leise{background:#fff;color:var(--petrol)!important}
.ad-unterschrift{margin:14px 0 0;line-height:1.4}
.ad-unterschrift .olga{font-family:CaveatLocal,cursive;font-weight:600;font-size:2rem;color:#D9A441;display:inline-block;transform:rotate(-5deg);margin:2px 0 0 6px}
.ad-gruss{font-family:CaveatLocal,cursive;font-size:1.5rem;color:var(--petrol);text-align:center;margin:6px 0 0}
/* Konfetti am 24. Dezember: nur Tupfen in Bewegung (Markenregel) */
.advent-konfetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.advent-konfetti i{position:absolute;top:-20px;width:10px;height:10px;border-radius:50%;animation:advent-fall linear forwards}
@keyframes advent-fall{to{transform:translate3d(var(--dx),110vh,0)}}
@media(max-width:1279px){
.advent-seite{margin-top:24px}
.advent-drei{grid-template-columns:1fr;gap:30px}
.advent-schritte{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
.advent-kopf{padding-top:18px}
.tuer{width:21px;height:21px;font-size:.85rem}
.advent-schritte{grid-template-columns:1fr}
.ad-inhalt{padding:16px 14px 22px}
.ad-teil{padding:18px 16px 14px}
.ad-teil .sticker{width:56px}
}
@media(prefers-reduced-motion:reduce){.tuer,.tuer.heute,.advent-dialog[open]{animation:none;transition:none}}
/* So sehen die Blätter aus (Olga, 07.11.2026) */
.advent-blaetter{margin:54px 0 0;text-align:center}
.advent-blaetter .lead{color:var(--muted);margin:0 auto 22px;max-width:60ch}
.blaetter-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:start}
.blaetter-reihe figure{margin:0;background:#fff;padding:10px 10px 6px;box-shadow:0 10px 24px #28302f22;border-radius:4px}
.blaetter-reihe figure:nth-child(odd){transform:rotate(-1.6deg)} .blaetter-reihe figure:nth-child(even){transform:rotate(1.4deg)}
.blaetter-reihe img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.blaetter-reihe figcaption{font-family:CaveatLocal,cursive;font-size:1.3rem;color:var(--petrol);margin-top:4px}
.advent-app{background:var(--mint);border-radius:12px;padding:12px 14px;margin-top:14px}
.advent-app p{margin:0 0 6px} .advent-app p:last-child{margin:0}
@media(max-width:1279px){.blaetter-reihe{grid-template-columns:1fr 1fr;gap:16px}}
/* „Hol dir deinen Code“ direkt am Bild (Olga, 07.11.2026), nur solange niemand angemeldet ist */
.advent-ruf{position:absolute;z-index:3;right:12px;top:12px;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;
background:#fffffff2;border-radius:16px;padding:10px 18px 12px;box-shadow:0 10px 26px #28302f30;transform:rotate(2deg);transition:transform .2s ease}
.advent-ruf .hand{font-size:1.15rem;margin:0}
.advent-ruf b{background:var(--petrol);color:#fff;border-radius:8px;padding:8px 14px;font-size:1rem}
.advent-ruf:hover,.advent-ruf:focus-visible{transform:rotate(0) scale(1.04)}
.advent-ruf[hidden]{display:none}
@media(min-width:1280px){.advent-ruf{right:max(24px,calc(50vw - 560px));top:28px;padding:14px 24px 16px}.advent-ruf b{font-size:1.1rem;padding:10px 18px}}
@media(max-width:520px){.advent-ruf{right:6px;top:6px;padding:6px 10px 8px}.advent-ruf .hand{font-size:.95rem}.advent-ruf b{font-size:.85rem;padding:6px 10px}}
/* Knopf nur einmal zeigen: am Rechner am Bild, auf dem Handy direkt über dem Bild */
@media(min-width:1280px){.advent-sprung{display:none}}
@media(max-width:1279px){.advent-ruf{display:none}}
/* Runde 07.11.2026 nachmittags: Bild links bis zum Rand, Anmeldung rechts, wärmere Farben, Code-Seite, Schritte als Kästchen */
.advent-buehne{background:#F7EDE0;padding:22px 16px 26px;margin-top:22px}
.advent-bild img.szene{mix-blend-mode:multiply}
.advent-seite{background:#FFF9F1;border:1px solid #EBD9C0;box-shadow:0 18px 40px #9a4f4322}
.advent-seite h2{color:#9A4F43}
.advent-seite .button{background:#9A4F43;border-color:#9A4F43}
.advent-seite .button:hover,.advent-seite .button:focus-visible{background:#7f3f35;border-color:#7f3f35}
.advent-seite .geschenk{background:#FBF1DC}
.advent-sprung .button{background:#9A4F43;border-color:#9A4F43;padding:12px 22px;font-size:1.08rem}
.schon-code{font-size:.95rem;margin:0 !important}
.schon-code a{color:var(--petrol);font-weight:700}
@media(min-width:1280px){
.advent-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:30px;align-items:center;
padding:30px max(24px,calc((100vw - 1320px)/2)) 34px 0;max-width:none}
.advent-bild{width:100%;max-width:none;margin:0;aspect-ratio:2752/1536}
.advent-seite{max-width:none;margin:0}
.advent-sprung{display:none}
}
.advent-ruf{display:none!important}
.schritte-titel{text-align:center;margin:56px 0 0}
.advent-schritte li{background:#fff;border:1px solid var(--line);border-top:4px solid var(--mustard);border-radius:16px;padding:16px 18px 18px;box-shadow:var(--shadow)}
.advent-codeseite{max-width:560px;margin:0 auto;padding-top:36px;padding-bottom:40px;text-align:center}
.advent-codeseite .code-bild{width:120px;height:auto;border-radius:24px;box-shadow:0 10px 26px #28302f2a;margin:0 auto 10px;display:block}
.advent-codeseite h1{font-size:clamp(2rem,5vw,2.8rem);margin:.1rem 0 .6rem}
.advent-codeseite form{display:grid;gap:8px;text-align:left;background:#FFF9F1;border:1px solid #EBD9C0;border-radius:20px;padding:20px;margin:18px 0 14px}
.advent-codeseite label{font-weight:700}
.advent-codeseite input{font:inherit;font-size:1.2rem;letter-spacing:.06em;padding:12px;border:1px solid #7b8580;border-radius:10px}
.advent-codeseite .button{background:#9A4F43;border-color:#9A4F43;padding:13px 16px;font-size:1.05rem}
.advent-codeseite .meldung{min-height:1.4em;color:var(--petrol);font-weight:700;margin:0}
.advent-codeseite .meldung.fehler{color:#9A4F43}
@media(max-width:1279px){.advent-buehne{padding:18px 0 22px}.advent-bild{max-width:760px}.advent-seite{margin:20px 16px 0}}
@media(min-width:1280px){.advent-buehne{align-items:start}.advent-bild{position:sticky;top:16px}}
/* Runde 07.11.2026 abends: Kopf über die ganze Breite und knapp, Bild sofort sichtbar, Bild und Anmeldung gleich hoch, Kasten ragt über das Bild */
.advent-kopf{padding:14px 16px 4px;text-align:center}
.advent-kopf h1{max-width:none;font-size:clamp(1.9rem,4.2vw,3.2rem);margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.2em .6em}
.advent-kopf h1 .hand{font-size:.62em;margin:0;letter-spacing:0}
.advent-sprung{margin:12px 0 0}
@media(min-width:1280px){
.advent-buehne{display:block;position:relative;height:clamp(560px,calc(100vh - 190px),900px);padding:0;margin-top:14px;background:#F7EDE0;overflow:hidden}
.advent-bild{position:absolute;left:0;top:0;height:100%;width:auto;aspect-ratio:2009/1383;max-width:none;margin:0}
.advent-bild picture,.advent-bild img.szene{height:100%;width:auto}
.advent-bild img.szene{mix-blend-mode:normal}
.tuer{left:var(--bx);top:var(--by)}
.advent-seite{position:absolute;top:22px;bottom:22px;right:max(24px,calc((100vw - 1320px)/2));width:410px;max-height:none;overflow:auto;
background:#FFF9F1f2;backdrop-filter:blur(3px);border-radius:22px;padding:22px 24px}
.advent-seite p{font-size:.97rem}
}
@media(max-width:1279px){.advent-buehne{margin-top:12px}}
/* Code-Seite: Winterbild als Hintergrund, durchscheinender Kasten */
.advent-codehintergrund{background:#F7EDE0 url('/assets/images/advent/winterdorf-quer-1600.webp') center/cover no-repeat;padding:48px 16px 60px;min-height:calc(100vh - 160px);display:flex;align-items:center;justify-content:center}
.advent-codehintergrund .advent-codeseite{max-width:520px;width:100%;margin:0;padding:26px 26px 20px;background:#FFF9F1d9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
border:1px solid #ffffffaa;border-radius:24px;box-shadow:0 24px 60px #28302f33}
.advent-codehintergrund form{background:#ffffffb3}
@media(max-width:600px){.advent-codehintergrund{background-image:url('/assets/images/advent/winterdorf-720.webp');padding:28px 12px 40px}}
/* Die Bühne wächst mit dem Anmeldekasten, damit nichts im Kasten gescrollt werden muss */
@media(min-width:1280px){
.advent-buehne{display:grid;grid-template-columns:1fr;grid-template-rows:auto;height:auto;min-height:clamp(560px,calc(100vh - 190px),900px)}
.advent-bild{position:relative;grid-area:1/1;align-self:stretch;justify-self:start;height:auto;min-height:100%}
.advent-bild picture{position:absolute;inset:0}
.advent-bild img.szene{height:100%;width:100%;object-fit:cover}
.advent-seite{position:relative;grid-area:1/1;justify-self:end;align-self:start;top:auto;bottom:auto;right:auto;margin:22px max(24px,calc((100vw - 1320px)/2)) 22px 0;overflow:visible}
}
/* Runde 07.11.2026 spät: Bild füllt die ganze Breite, Anmeldekasten reicht bis an den Schlitten, Code-Seite durchscheinender */
@media(min-width:1280px){
.advent-buehne{display:block;position:relative;height:auto;min-height:0}
.advent-bild{position:relative;width:100%;height:auto;min-height:0;aspect-ratio:2009/1383;justify-self:auto;align-self:auto}
.advent-bild picture{position:static}
.advent-bild img.szene{width:100%;height:auto;object-fit:fill}
.advent-seite{position:absolute;left:61%;right:max(24px,calc((100vw - 1440px)/2));top:24px;width:auto;margin:0;max-height:calc(100% - 48px);overflow:auto}
}
.advent-codehintergrund .advent-codeseite{background:#FFF9F199;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.advent-codehintergrund form{background:#ffffff80}
/* Runde 07.11.2026 abends: Das Bild schließt unten genau mit dem Anmeldekasten ab. Die Bühne ist so hoch wie der Kasten,
das Bild füllt sie wie „cover“, advent.js setzt dazu das innere Bildfeld (.bild-innen), damit die Türchen mitwandern. */
.bild-innen{position:relative}
@media(min-width:1280px){
.advent-buehne{display:grid;grid-template-columns:1fr;position:relative;min-height:600px}
.advent-bild{grid-area:1/1;position:relative;width:auto;height:auto;aspect-ratio:auto;align-self:stretch;overflow:hidden;min-height:0}
.bild-innen{position:absolute;left:0;top:0}
.bild-innen picture,.bild-innen img.szene{display:block;width:100%;height:100%}
.advent-seite{grid-area:1/1;position:relative;left:auto;right:auto;top:auto;justify-self:end;align-self:start;
width:min(460px,34vw);margin:24px max(24px,calc((100vw - 1440px)/2)) 24px 0;max-height:none;overflow:visible}
}
@media(min-width:1280px){.advent-seite{margin:24px 24px 24px 0;width:min(460px,34vw)}}
/* Eigene Kalenderseite (Olga, 07.11.2026): großes Bild, oben knapp der Stand, unten offene Türchen und Tipps */
.advent-kalenderseite{background:#F7EDE0}
.kal-kopf{text-align:center;padding:14px 16px 8px}
.kal-kopf .hand{font-size:1.5rem;margin:0}
.kal-kopf .advent-zaehler{font-size:2.2rem;margin:0}
.kal-kopf #advent-standtext{margin:4px auto 0;color:var(--muted);max-width:60ch}
.kal-bild{position:relative;margin:10px auto 0;width:100%;max-width:820px;aspect-ratio:2160/2864}
.kal-bild picture,.kal-bild img.szene{display:block;width:100%;height:auto}
.kal-bild img.szene{mix-blend-mode:multiply}
.kal-unten{text-align:center;padding-top:18px;padding-bottom:30px}
.kal-unten .advent-liste{justify-content:center}
.kal-unten .advent-app{max-width:560px;margin:14px auto 0;text-align:left}
@media(min-width:1280px){
.kal-bild{max-width:none;width:min(100%,calc((100vh - 150px) * 1.4144));aspect-ratio:1901/1344;border-radius:6px;overflow:hidden;box-shadow:0 18px 40px #28302f22}
.kal-bild img.szene{mix-blend-mode:normal}
.kal-bild .tuer{left:var(--kx);top:var(--ky);width:30px;height:30px;font-size:1.15rem}
}
#advent-willkommen .advent-code{font-size:2rem;margin:4px 0 10px}
#advent-willkommen .button{background:#9A4F43;border-color:#9A4F43;padding:13px 22px;font-size:1.08rem}
/* Sterne statt Kreise (Olga, 07.11.2026): zu = creme, offen = Gold, heute = Gold mit Leuchten */
.tuer{border:0!important;border-radius:0!important;box-shadow:none!important;background:url("data:image/svg+xml;utf8,") center/contain no-repeat!important;
width:34px;height:34px;padding-top:4px;color:#2C6663;filter:drop-shadow(0 2px 3px #28302f55)}
.tuer::before{display:none!important}
.tuer.offen,.tuer.gesehen{background-image:url("data:image/svg+xml;utf8,")!important;color:#28302F}
.tuer.heute{background-image:url("data:image/svg+xml;utf8,")!important;color:#28302F;animation:advent-leuchten 2.2s ease-in-out infinite}
@keyframes advent-leuchten{0%,100%{filter:drop-shadow(0 2px 3px #28302f55)}50%{filter:drop-shadow(0 0 10px #F2C552) drop-shadow(0 2px 3px #28302f55)}}
.tuer:hover,.tuer:focus-visible{transform:translate(-50%,-50%) scale(1.22);box-shadow:none!important}
@media(min-width:1280px){.tuer{width:38px;height:38px;font-size:1.12rem} .kal-bild .tuer{width:44px;height:44px;font-size:1.3rem}}
@media(max-width:520px){.tuer{width:28px;height:28px;font-size:.85rem;padding-top:3px}}
/* Kalenderseite wärmer: Sticker oben und unten, Bild randlos über die ganze Breite */
.advent-kalenderseite{background:#F7EDE0}
.kal-kopf,.kal-unten{position:relative}
.kal-kopf{padding:22px 16px 18px}
.kal-deko{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 4px #28302f22)}
.kal-bild{max-width:none!important;width:100%!important;margin:0!important;border-radius:0!important;box-shadow:none!important}
.kal-unten{padding:26px 16px 40px;text-align:center}
.kal-zahlen-titel{font-family:CaveatLocal,cursive;font-size:1.6rem;color:#9A4F43;margin:0 auto 10px}
.kal-zahlen{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;max-width:760px}
.stern-zahl{width:100%;aspect-ratio:1;border:0;padding:5px 0 0;cursor:pointer;font:600 1.25rem CaveatLocal,cursive;color:#2C6663;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;filter:drop-shadow(0 2px 3px #28302f30);transition:transform .2s}
.stern-zahl.auf{background-image:url("data:image/svg+xml;utf8,");color:#28302F}
.stern-zahl:hover,.stern-zahl:focus-visible{transform:scale(1.12)}
.kal-unten .advent-app{max-width:560px;margin:18px auto 0;text-align:left}
@media(max-width:700px){.kal-zahlen{grid-template-columns:repeat(6,minmax(0,1fr));max-width:340px} .kal-deko{width:44px!important} .kal-kopf{padding-top:60px}}
/* Sticker auf großen Bildschirmen etwas kräftiger (07.11.2026) */
@media(min-width:1100px){.kal-deko{scale:1.6}.kal-kopf{padding:34px 16px 30px}.kal-unten{padding:40px 16px 56px}}
.kal-kopf>p{margin-left:auto!important;margin-right:auto!important}
@media(max-width:1279px){.kal-bild{margin-top:-56px!important}}
@media(max-width:700px){.kal-unten .kal-deko[style*="bottom"]{display:none}.kal-unten{padding-top:56px}}
/* Runde 16 (Olga, 07.11.2026): Sterne im Bild alle gleich (suchen gehört dazu), Zahlen passen hinein */
.tuer,.tuer.offen,.tuer.gesehen,.tuer.heute{background-image:url("data:image/svg+xml;utf8,")!important;color:#2C6663!important;animation:none;
display:grid;place-items:center;padding:3px 0 0!important;font:700 11.5px/1 Atkinson,Arial,sans-serif!important;letter-spacing:-.03em;width:36px!important;height:36px!important}
.tuer.wackeln{animation:advent-wackeln .45s ease}
@media(min-width:1280px){.tuer{width:40px!important;height:40px!important;font-size:12.5px!important}}
@media(max-width:520px){.tuer{width:33px!important;height:33px!important;font-size:10.5px!important}}
.stern-zahl{background-image:url("data:image/svg+xml;utf8,");padding:6px 0 0;font-size:1.15rem}
.stern-zahl.auf{background-image:url("data:image/svg+xml;utf8,")}
/* Kopf: eine Zeile über die ganze Breite, keine Sticker */
.kal-kopf{padding:20px 16px 14px!important}
.kal-titel{font-family:CaveatLocal,cursive;font-weight:600;color:#9A4F43;font-size:clamp(1.9rem,4.2vw,3.5rem);line-height:1.08;margin:0 auto;max-width:none;letter-spacing:0}
.kal-kopf .meldung{margin:6px auto 0}
.kal-kopf .meldung:empty{display:none}
/* Bild: weiter herausgezoomt und so hoch, dass es auf den Bildschirm passt */
@media(min-width:900px){
.kal-bild{aspect-ratio:3168/1344!important;width:min(100%,calc((100svh - 190px) * 2.357))!important;margin:0 auto!important}
.kal-bild img.szene{mix-blend-mode:multiply!important}
.kal-bild .tuer{left:var(--bx);top:var(--by);width:44px!important;height:44px!important;font-size:14px!important}
}
@media(max-width:1279px){.kal-bild{margin-top:0!important}}
@media(max-width:899px){.kal-bild{margin-top:-40px!important}}
/* Unten bis an den grünen Fuß, kein weißer Streifen */
.advent-kalenderseite{padding-bottom:0!important}
.advent-kalenderseite+footer{margin-top:0!important}
@media(max-width:700px){.kal-kopf{padding-top:18px!important}}
/* Türchen-Fenster wie die bunten PDFs: Monatsrahmen, Handschrift, farbige Kästen */
.advent-dialog{width:min(860px,calc(100% - 16px));max-height:calc(100svh - 16px);border-radius:4px;background:#FFFBF5;overflow:hidden;
border:1px solid transparent;border-image-source:url(/advent/rahmen/dezember.webp);border-image-slice:200;border-image-width:118px;border-image-repeat:round}
.advent-dialog[open]{display:flex;flex-direction:column}
.ad-kopf{position:static;background:none;color:inherit;display:block;padding:100px 104px 2px}
.ad-tag{font-family:CaveatLocal,cursive;font-weight:600;color:#9A4F43;font-size:1.45rem;margin:0;max-width:none}
.ad-tag .nr{font:inherit;color:inherit}
.ad-tag .datum{font:inherit;opacity:1}
.ad-kopf .zu{position:absolute;top:14px;right:14px;z-index:3;background:#fff;border:1px solid #2C6663;color:#2C6663;border-radius:999px;padding:6px 14px;font-weight:700}
.ad-inhalt{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 104px 12px;margin-bottom:84px}
.ad-teil{background:none!important;border:0!important;border-radius:0!important;padding:0!important;margin:0 0 30px!important}
.ad-teil+.ad-teil{padding-top:26px!important;border-top:2px dotted #D9A44180!important}
.ad-teil .sticker{right:-8px;top:-4px;width:86px}
.ad-teil+.ad-teil .sticker{top:18px}
.ad-teil .art{font-size:1.3rem}
.ad-teil h3{font-family:CaveatLocal,cursive;font-weight:600;font-size:2.5rem;line-height:1.02;color:#2C6663;padding-right:96px;margin:.05rem 0 .45rem}
.ad-stufe{border-radius:14px;padding:14px 18px 8px;margin:14px 0 0}
.ad-stufe.gs{background:var(--mint)}
.ad-stufe.sek{background:var(--senf-hell)}
.ad-stufe h4{color:#2C6663;font-size:1.08rem;margin:0 0 2px}
.ad-stufe ol{margin:4px 0 6px}
.ad-warum{margin-top:16px}
.ad-pdf{margin-top:8px}
@media(max-width:600px){
.advent-dialog{border-image-width:58px;width:calc(100% - 8px);max-height:calc(100svh - 8px)}
.ad-kopf{padding:52px 48px 2px}
.ad-kopf .zu{top:8px;right:8px;padding:4px 12px}
.ad-inhalt{padding:2px 46px 8px;margin-bottom:46px}
.ad-teil h3{font-size:2rem;padding-right:58px}
.ad-teil .sticker{width:58px;right:-6px}
.ad-stufe{padding:12px 12px 6px}
.ad-stufe ol,.ad-teil ol,.ad-teil ul{padding-left:18px}
}
@media(max-width:600px){
.advent-dialog{border-image-width:46px}
.ad-kopf{padding:44px 36px 2px}
.ad-tag{font-size:1.15rem}
.ad-inhalt{padding:2px 34px 8px;margin-bottom:38px;font-size:.94rem}
.ad-teil h3{font-size:1.8rem;padding-right:50px}
.ad-teil .sticker{width:50px;right:-4px}
.ad-stufe{padding:10px 10px 4px}
.kal-unten{padding-top:40px}
}
/* Runde 17 (Olga, 07.11.2026): Bild wieder weiß ohne Schleier, Sterne durchscheinend, Zahlen in Handschrift */
.kal-bild img.szene{mix-blend-mode:normal!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.kal-bild{background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax)}
@media(max-width:899px){.kal-bild{margin-top:0!important}.kal-bild img.szene{-webkit-mask-image:none;mask-image:none}}
.tuer,.tuer.offen,.tuer.gesehen,.tuer.heute{background-image:url("data:image/svg+xml;utf8,")!important;color:#2C6663!important;
font:600 16px/1 CaveatLocal,cursive!important;letter-spacing:0;padding:4px 0 0!important;width:34px!important;height:34px!important;
text-shadow:0 0 2px #fff,0 0 5px #fff,0 0 8px #fff;filter:drop-shadow(0 1px 2px #28302f38)!important}
.tuer:hover,.tuer:focus-visible{background-image:url("data:image/svg+xml;utf8,")!important}
@media(min-width:1280px){.tuer{width:38px!important;height:38px!important;font-size:18px!important}}
@media(min-width:900px){.kal-bild .tuer{width:40px!important;height:40px!important;font-size:19px!important}}
@media(max-width:520px){.tuer{width:30px!important;height:30px!important;font-size:14.5px!important;padding-top:3px!important}}
/* Runde 18 (Olga, 07.11.2026): Rahmen luftiger, oben voll, Seiten höchstens vier Sticker, unten drei und tiefer, mehr Abstand zum Text */
.advent-dialog{border:0!important;border-image:none!important;width:min(900px,calc(100% - 16px));background-color:#FFFBF5;
background-image:url(/advent/rahmen/dezember-oben.webp),url(/advent/rahmen/dezember-unten.webp),url(/advent/rahmen/dezember-links.webp),url(/advent/rahmen/dezember-rechts.webp);
background-repeat:no-repeat;background-size:100% auto,100% auto,auto 58%,auto 58%;background-position:center top,center bottom -26px,left center,right center}
.ad-kopf{padding:176px 132px 4px}
.ad-inhalt{padding:4px 132px 14px;margin-bottom:126px}
.ad-kopf .zu{top:16px;right:16px}
@media(max-width:600px){
.advent-dialog{width:calc(100% - 8px);background-size:100% auto,100% auto,auto 34%,auto 34%;background-position:center top,center bottom -10px,left center,right center}
.ad-kopf{padding:78px 44px 2px}
.ad-inhalt{padding:2px 44px 8px;margin-bottom:60px}
}
/* Runde 19 (Olga, 07.11.2026): Datumszeile höher, der scrollende Inhalt in einem weißen Kasten */
.ad-kopf{padding:138px 140px 0}
.ad-inhalt{background:#fff;border:1px solid #EFE7DD;border-radius:16px;box-shadow:0 3px 14px #28302f14;margin:18px 112px 118px;padding:22px 28px 18px}
@media(max-width:600px){
.ad-kopf{padding:64px 40px 0}
.ad-inhalt{margin:12px 26px 58px;padding:16px 14px 12px;border-radius:12px}
}
.ad-teil .sticker{position:static!important;float:right;margin:-8px -10px 10px 14px;transform:rotate(7deg)}
.ad-teil h3{padding-right:0!important}
.ad-teil::after{content:"";display:block;clear:both}
@media(max-width:600px){.ad-kopf{padding-top:72px}.ad-tag{font-size:1.1rem}.ad-tag .jahr{display:none}}