/* Layout: Vollbild-Foto als fester Hintergrund, Titel und große Glas-Türchen scrollen darüber; Lightbox pro Türchen aus Inhaltsblöcken */
:root{
  --bg:#f4f2ec; --bg2:#e2ded1; --fg:#434343; --muted:#6f6a60; --card:#ffffff; --line:#cfc9b8;
  --accent:#99133d; --accent-fg:#fff; --gold:#e2ded1; --ok:#2f7d4f; --bad:#b4432f;
  --door-tint:255,255,255; --door-text:#ffffff;
  --display:"Merriweather",Georgia,"Times New Roman",serif; --body:"Lato","Segoe UI",system-ui,sans-serif;
  --cols:4; --alpha:.14; --radius:12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1c1a1a;--bg2:#2a2626;--fg:#f1ede6;--muted:#aaa39a;--card:#262222;--line:#4a4343;--accent:#c42a58;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1c1a1a;--bg2:#2a2626;--fg:#f1ede6;--muted:#aaa39a;--card:#262222;--line:#4a4343;--accent:#c42a58;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;min-height:100%}

/* Hintergrund */
#bgwrap{position:fixed;inset:0;z-index:0;background:#2a1d10}
#bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
#bgcv{position:absolute;inset:0;width:100%;height:100%}
#bgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,.25))}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}

/* Seite */
.page{position:relative;z-index:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 40px}
header{text-align:center;padding:56px 0 28px}
.logo{display:inline-block;font-family:var(--display);font-weight:700;letter-spacing:.22em;font-size:14px;border:2px solid rgba(255,255,255,.8);padding:6px 14px;border-radius:4px}
.logo img{display:block;height:var(--logoh,60px);max-width:min(100%,80vw);width:auto;object-fit:contain}
h1{font-family:var(--display);font-weight:900;font-size:clamp(30px,5vw,54px);line-height:1.08;margin:22px auto 12px;text-wrap:balance;max-width:18ch}
header p{max-width:60ch;margin:0 auto;color:rgba(255,255,255,.9);font-size:17px}
.stat{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:rgba(255,255,255,.85)}
.stat b{display:block;font-family:var(--display);font-size:24px;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}

/* Türchen */
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:clamp(8px,1.4vw,18px)}
.door .num{font-size:clamp(28px,4vw,46px)}
.door{position:relative;aspect-ratio:1;max-width:100%;border-radius:var(--radius);cursor:pointer;padding:0;font:inherit;color:#fff;background:transparent;border:0;perspective:1400px;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.5);outline:none}
/* Türblatt: klappt an der linken Kante auf */
.leaf{position:absolute;inset:0;border-radius:var(--radius);border:1px solid rgba(var(--door-tint),.6);background:rgba(var(--door-tint),var(--alpha));color:var(--door-text);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .9s cubic-bezier(.35,0,.15,1),box-shadow .9s,background .15s;z-index:2}
.door:hover .leaf,.door:focus-visible .leaf{background:rgba(var(--door-tint),calc(var(--alpha) + .14))}
.door:focus-visible .leaf{box-shadow:0 0 0 3px var(--gold)}
.door.opened .leaf{transform:rotateY(-62deg);backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(90deg,rgba(var(--door-tint),.18),rgba(var(--door-tint),.5));border-right:2px solid rgba(255,255,255,.85);box-shadow:10px 0 22px rgba(0,0,0,.5)}
.door.opened .leaf .kind{display:none}
.door.opened .leaf .num{transform:translateX(-14%);opacity:.95}
.door.opened:hover .leaf{transform:rotateY(-76deg)}
/* Innenseite: sichtbar, wenn die Tür offen steht */
.inner{position:absolute;inset:0;border-radius:var(--radius);border:1px solid rgba(255,255,255,.35);background:rgba(10,14,25,.32);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;z-index:1}
.inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 45%),linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.5))}
.inner .t{position:relative;z-index:1;font-family:var(--display);font-weight:700;font-size:clamp(11px,1.15vw,15px);text-align:center;padding:0 6px 0 42%;line-height:1.25;text-wrap:balance}
.inner .n{position:absolute;top:8px;left:12px;z-index:1;font-family:var(--display);font-size:15px;opacity:.85}
.inner .k{position:absolute;bottom:10px;left:42%;right:0;z-index:1;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.inner .n{left:auto;right:12px}
.door:not(.opened) .inner{visibility:hidden}
.door.opened .inner{box-shadow:inset 20px 0 30px -14px rgba(0,0,0,.5)}
.door.opened:hover .inner{border-color:rgba(255,255,255,.7)}
.door .num{font-family:var(--display);font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.door .kind{position:absolute;left:0;right:0;bottom:12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.85)}
.door.locked{cursor:not-allowed}
.door.locked .leaf{border-color:rgba(255,255,255,.3)}
.door.locked .num{opacity:.5}
.door.today .leaf{box-shadow:0 0 0 2px var(--gold)}
.door.today .num{animation:glow 2.4s ease-in-out infinite}
.door.quiz .kind{color:var(--gold)}
.door .lock{position:absolute;top:12px;right:12px;width:16px;height:16px;opacity:.6}
.door .edit{position:absolute;top:10px;right:10px;font-size:11px;background:var(--accent);color:#fff;border-radius:4px;padding:2px 7px;text-shadow:none;font-weight:700;z-index:3}
@media (prefers-reduced-motion:reduce){.leaf{transition:none}}
.door.empty .kind{color:rgba(255,255,255,.55)}
@keyframes glow{0%,100%{text-shadow:0 0 6px rgba(240,200,90,.5)}50%{text-shadow:0 0 22px rgba(240,200,90,1),0 0 40px rgba(240,200,90,.6)}}
.toast{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));background:var(--card);color:var(--fg);padding:10px 14px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:14px;z-index:30;text-shadow:none}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font-size:13px;margin:22px 0 0;color:rgba(255,255,255,.85)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:rgba(255,255,255,.6)}
.legend .l-quiz::before{background:var(--gold)}.legend .l-form::before{background:#9fe3b6}
footer{font-size:13px;color:rgba(255,255,255,.8);margin-top:36px;padding-top:14px;border-top:1px solid rgba(255,255,255,.3);display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px}

/* Demo-Leiste */
.demo{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;background:var(--bg2);color:var(--fg);border-bottom:1px solid var(--line);padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));font-size:14px}
.demo label{font-weight:700}
.demo input[type=date]{font:inherit;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}
.demo .hint{color:var(--muted)}
.demo button{font:inherit;font-size:13px;padding:5px 10px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.demo button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:640px){.demo .hint{display:none}.demo{gap:6px 10px;font-size:13px}}

/* Lightbox */
.ov{position:fixed;inset:0;background:rgba(10,14,25,.72);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-left,0px));z-index:20}
.box{background:var(--card);color:var(--fg);text-shadow:none;border-radius:14px;width:min(600px,100%);max-height:88vh;max-height:88dvh;overflow:auto;-webkit-overflow-scrolling:touch;padding:26px;position:relative;box-shadow:0 30px 70px rgba(0,0,0,.4)}
@media (max-width:480px){.box{padding:22px 18px 20px}}
.box .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:6px}
.box h2{font-family:var(--display);font-size:28px;line-height:1.1;margin:0 0 14px;text-wrap:balance}
.box h3{font-family:var(--display);font-size:20px;margin:14px 0 6px}
.box p{margin:0 0 12px}
.close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font-size:20px;cursor:pointer;line-height:1}
.btn{display:inline-block;font:inherit;font-weight:700;padding:11px 18px;border-radius:8px;border:0;background:var(--accent);color:var(--accent-fg);cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn.sm{padding:6px 10px;font-size:13px}
.opt{display:block;width:100%;text-align:left;font:inherit;padding:11px 14px;margin:6px 0;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);cursor:pointer}
.opt:hover{border-color:var(--accent)}
.opt.right{border-color:var(--ok);background:#e3f1e8;background:color-mix(in srgb,var(--ok) 14%,var(--card))}
.opt.wrong{border-color:var(--bad);background:#f6e3df;background:color-mix(in srgb,var(--bad) 14%,var(--card))}
.opt:disabled{cursor:default}
.note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
.result{padding:12px 14px;border-radius:8px;margin-top:10px;font-weight:600}
.result.ok{background:#e3f1e8;background:color-mix(in srgb,var(--ok) 14%,var(--card));color:var(--ok)}
.result.bad{background:#f6e3df;background:color-mix(in srgb,var(--bad) 14%,var(--card));color:var(--bad)}
.bk.over{box-shadow:0 0 0 2px rgba(201,116,31,.4)}
.b-img{width:100%;max-width:100%;max-height:300px;object-fit:cover;border-radius:10px;margin:0 0 14px;display:block}
.b-img.ph{height:170px;background:linear-gradient(160deg,#1f2d4a,var(--accent));display:flex;align-items:flex-end;padding:10px 14px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.video{display:flex;gap:12px;align-items:center;background:#121b2e;color:#fff;border-radius:10px;padding:12px 14px;text-decoration:none;margin:0 0 14px}
.video b{display:block}.video small{color:#c9c0ad}.video svg{flex:none;width:34px;height:34px}
.blk{margin:0 0 14px}
form.reg{display:grid;gap:12px;margin-top:8px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.f2{grid-template-columns:1fr}}
label.fl{display:grid;gap:4px;font-size:14px;font-weight:700}
label.fl input,label.fl textarea,label.fl select{font:inherit;font-weight:400;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);min-width:0;width:100%}
label.fl textarea{min-height:80px;resize:vertical}
label.ck{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400}
label.ck input{margin-top:4px}
.err{color:var(--bad);font-size:14px;font-weight:600}

/* Pflege-Modus */
.admin{position:relative;z-index:2;background:var(--card);color:var(--fg);text-shadow:none;border-bottom:3px solid var(--accent);padding:18px max(16px,env(safe-area-inset-right,0px)) 22px max(16px,env(safe-area-inset-left,0px))}
.admin .in{max-width:1180px;margin:0 auto;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
@media (max-width:860px){.admin .in{grid-template-columns:1fr}}
.admin h3{margin:0 0 10px;font-family:var(--display);font-size:20px}
.admin h4{margin:14px 0 6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.panel{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row label{font-size:14px;font-weight:700;display:flex;gap:6px;align-items:center}
.row input[type=range]{width:120px}
.row input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.row select,.row input[type=text]{font:inherit;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}
.addbar{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.addbar button{font:inherit;font-size:13px;font-weight:700;padding:6px 12px;border-radius:20px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
.addbar button:hover{background:var(--accent);color:#fff}
.blocks{display:grid;gap:8px}
.bk{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:10px 10px 10px 6px}
.bk.drag{opacity:.4}.bk.over{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent)}
.bk .grip{cursor:grab;color:var(--muted);font-size:20px;line-height:1;padding-top:6px;text-align:center;user-select:none}
.bk .grip:active{cursor:grabbing}
.bk .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:6px}
.bk .fields{display:grid;gap:8px}
.bk .fields input,.bk .fields textarea{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);width:100%;min-width:0}
.bk .fields textarea{min-height:70px;resize:vertical}
.rt-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.rt-bar button{font:inherit;font-size:13px;min-width:30px;padding:3px 8px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.rt-bar button:hover{border-color:var(--accent)}
.rt{min-height:90px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);outline:none;line-height:1.5}
.rt:focus{border-color:var(--accent)}
.rt:empty::before{content:"Text eingeben …";color:var(--muted)}
.rich ul,.rich ol{margin:0 0 12px;padding-left:22px}.rich p{margin:0 0 12px}.rich a{color:var(--accent)}
.box .rich h3{margin-top:0}
.bk .tools{display:grid;gap:4px}
.bk .tools button{font:inherit;font-size:12px;padding:3px 8px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.bk .thumb{max-width:100%;max-height:90px;border-radius:6px;display:block;margin-top:4px}
.ok{color:var(--ok);font-weight:700;font-size:14px}
.empty-note{font-size:14px;color:var(--muted);padding:10px;border:1px dashed var(--line);border-radius:8px}
@media (prefers-reduced-motion:reduce){.door.today .num{animation:none}#snow{display:none}}