/* Adventskalender 2026 – gemeinsame Gestaltung der Türchenseiten
   Farbthemen: thema-nacht, thema-tanne, thema-wein, thema-schnee, thema-kranz (Adventssonntage), thema-gold (Weihnachten) */
:root{
  --gold:#e8c26a; --gold-hell:#f6dfa0; --rot:#9b2f2f;
  --grund:#1d2b45; --grund2:#2a3d60; --text:#fdf8ee; --leise:#e9dfc8;
  --karte:rgba(255,255,255,.07); --rand:var(--gold); --akzent:var(--gold);
}
body.thema-nacht { --grund:#1d2b45; --grund2:#2f4670; }
body.thema-tanne { --grund:#12321f; --grund2:#1f5134; }
body.thema-wein  { --grund:#4a1518; --grund2:#7a2529; }
body.thema-kranz { --grund:#0f2a1a; --grund2:#24502f; --akzent:#ffd77a; }
body.thema-gold  { --grund:#2b1a08; --grund2:#5a3a10; --akzent:#ffd77a; }
body.thema-schnee{ --grund:#f4efe4; --grund2:#ffffff; --text:#2a1f1a; --leise:#4a3d33;
                   --karte:rgba(155,47,47,.06); --rand:#b8913a; --akzent:#9b2f2f; --gold:#9a7425; }

*{box-sizing:border-box}
html{font-size:22px}   /* Senioren-Standard der .ai-Seiten; A-/A+ aus fontsize-widget.js */
body{
  margin:0; min-height:100vh; color:var(--text);
  font-family:Georgia,"Times New Roman",serif; font-size:0.909rem; line-height:1.6;
  background:radial-gradient(ellipse at top, var(--grund2), var(--grund) 72%) fixed;
  background-color:var(--grund);
  overflow-x:hidden;
}
a{color:var(--akzent)}

/* Kopfleiste */
.kopf{display:flex; justify-content:space-between; align-items:center; gap:12px;
      max-width:900px; margin:0 auto; padding:14px 16px; font-family:Arial,sans-serif; position:relative; z-index:2}
.zurueck{font-size:0.764rem; text-decoration:none; color:var(--text); border:2px solid var(--rand);
         border-radius:24px; padding:6px 16px; background:var(--karte)}
.zurueck:hover,.zurueck:focus{background:var(--rand); color:var(--grund)}
.schrift{display:flex; gap:6px}
.schrift button{font:700 0.727rem Arial,sans-serif; min-width:44px; padding:6px 10px; border-radius:8px; cursor:pointer;
                border:2px solid var(--rand); background:var(--karte); color:var(--text)}
.schrift button:hover{background:var(--rand); color:var(--grund)}

/* Blatt */
.blatt{position:relative; z-index:1; max-width:860px; margin:6px auto 30px; padding:28px 28px 30px;
       border:2px solid var(--rand); border-radius:18px; background:var(--karte);
       box-shadow:0 10px 30px rgba(0,0,0,.28); text-align:center}
body.thema-schnee .blatt{background:#fffdf8; box-shadow:0 10px 30px rgba(90,60,30,.15)}
/* Zierecken – je nach Thema anders */
.blatt::before,.blatt::after{content:""; position:absolute; width:58px; height:58px; pointer-events:none;
  border:3px solid var(--rand); opacity:.7}
.blatt::before{top:10px; left:10px; border-right:0; border-bottom:0; border-radius:12px 0 0 0}
.blatt::after{bottom:10px; right:10px; border-left:0; border-top:0; border-radius:0 0 12px 0}
body.thema-tanne .blatt::before, body.thema-tanne .blatt::after,
body.thema-kranz .blatt::before, body.thema-kranz .blatt::after{border-style:dashed}
body.thema-wein .blatt{border-width:3px; outline:1px solid var(--rand); outline-offset:6px}

.datum{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:6px}
.datum img{width:96px; height:96px; border-radius:10px; box-shadow:0 0 0 3px var(--rand), 0 6px 14px rgba(0,0,0,.3)}
.tag{margin:0; font-size:clamp(1.164rem,4vw,1.6rem); color:var(--gold); letter-spacing:.03em}
.art{margin:0; font-family:Arial,sans-serif; font-size:0.691rem; text-transform:uppercase; letter-spacing:.14em; color:var(--leise)}
.sonntag{display:inline-block; margin:10px 0 4px; padding:6px 22px; border-radius:30px; font-size:clamp(1.018rem,3.6vw,1.382rem);
         background:linear-gradient(135deg,#b23a3a,#7a1f22); color:#fff; border:2px solid var(--gold); box-shadow:0 0 18px rgba(255,215,122,.35)}
h1{font-weight:normal; color:var(--text); font-size:clamp(1.309rem,5vw,1.964rem); line-height:1.2; margin:14px 0 4px}
.kuenstler{margin:0 0 20px; font-size:0.945rem; color:var(--gold); font-style:italic}

/* Video: lädt erst nach Klick */
.video{position:relative; aspect-ratio:16/9; width:100%; border-radius:14px; overflow:hidden;
       background:#000; box-shadow:0 0 0 3px var(--rand), 0 10px 26px rgba(0,0,0,.35)}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.abspielen{position:absolute; inset:0; width:100%; border:0; cursor:pointer; color:#fff; font-family:Arial,sans-serif;
           display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
           background:radial-gradient(circle at center, rgba(155,47,47,.9), rgba(20,20,30,.95) 75%)}
.abspielen .knopf{width:94px; height:94px; border-radius:50%; background:var(--gold); position:relative;
                  box-shadow:0 0 0 6px rgba(255,255,255,.25); transition:transform .2s}
.abspielen .knopf::after{content:""; position:absolute; left:37px; top:26px; border-style:solid;
                         border-width:21px 0 21px 34px; border-color:transparent transparent transparent #5a1a1c}
.abspielen:hover .knopf,.abspielen:focus .knopf{transform:scale(1.08)}
.abspielen .was{font-size:0.982rem; font-weight:700}
.abspielen .klein{font-size:0.655rem; opacity:.85; max-width:30em; padding:0 14px}
.abspielen:focus-visible{outline:4px solid var(--gold); outline-offset:-6px}
.folgt{aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
       border-radius:14px; border:3px dashed var(--rand); padding:20px; font-size:0.945rem}
.folgt .stern{font-size:2.182rem; color:var(--gold); animation:funkeln 2.4s ease-in-out infinite}

.begleittext{max-width:40em; margin:24px auto 0; font-size:0.909rem; text-align:left}
.begleittext p{margin:0 0 .8em}
.zeile{margin-top:22px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; font-family:Arial,sans-serif}
.zeile a{font-size:0.764rem}

/* Adventskranz */
.kranz{position:relative; width:min(340px,86%); height:150px; margin:16px auto 6px}
.kranz .ring{position:absolute; left:0; right:0; bottom:8px; height:46px; border-radius:50%;
             background:radial-gradient(ellipse at center, #2f6b3a 0 40%, #1d4a27 60%, transparent 72%);
             box-shadow:0 0 0 4px #1d4a27 inset}
.kranz .ring::before{content:""; position:absolute; inset:6px 10%; border-radius:50%;
             background:repeating-conic-gradient(#3d8048 0 8deg, #22562c 8deg 16deg); opacity:.85;
             -webkit-mask:radial-gradient(ellipse, transparent 40%, #000 42%); mask:radial-gradient(ellipse, transparent 40%, #000 42%)}
.kranz .beere{position:absolute; width:12px; height:12px; border-radius:50%; background:#c0392b; bottom:22px; z-index:2}
.kerzen{position:absolute; left:0; right:0; bottom:26px; display:flex; justify-content:space-around; padding:0 14%; z-index:1}
.kerze{position:relative; width:26px; height:72px; border-radius:4px 4px 2px 2px;
       background:linear-gradient(90deg,#8e1f24,#c8383e 45%,#8e1f24)}
.kerze:nth-child(2){height:80px} .kerze:nth-child(3){height:76px}
.kerze::before{content:""; position:absolute; top:-8px; left:12px; width:2px; height:9px; background:#333}
.kerze.brennt .flamme{position:absolute; top:-34px; left:4px; width:18px; height:28px;
       border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
       background:radial-gradient(ellipse at 50% 70%, #fff 0 18%, #ffe27a 30%, #ff9a2a 62%, transparent 72%);
       filter:drop-shadow(0 0 10px #ffcc55); transform-origin:50% 90%; animation:flackern 1.6s ease-in-out infinite}
.kerze.brennt:nth-child(2) .flamme{animation-delay:.4s} .kerze.brennt:nth-child(3) .flamme{animation-delay:.8s}
.kerze.brennt:nth-child(4) .flamme{animation-delay:1.1s}
.kranz-satz{margin:0 0 6px; font-style:italic; color:var(--leise)}
@keyframes flackern{0%,100%{transform:scale(1) rotate(-2deg)}25%{transform:scale(1.06,.94) rotate(2deg)}
  50%{transform:scale(.95,1.07) rotate(-1deg)}75%{transform:scale(1.03,.98) rotate(1.5deg)}}

/* Fallende Sterne/Flocken */
.flocke{position:fixed; top:-1.455rem; z-index:0; pointer-events:none; user-select:none; color:var(--gold);
        opacity:.35; animation:fallen linear infinite}
body.thema-schnee .flocke{color:#9fb7cf; opacity:.55}
@keyframes fallen{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(108vh) rotate(360deg); opacity:0}}
@keyframes funkeln{0%,100%{transform:scale(.85); opacity:.6}50%{transform:scale(1.15); opacity:1}}

/* Weihnachten */
body.weihnachten .blatt{border-width:3px; box-shadow:0 0 40px rgba(255,215,122,.25), 0 10px 30px rgba(0,0,0,.35)}
.gruss{font-size:clamp(1.455rem,6vw,2.327rem); color:var(--gold); margin:4px 0 0; text-shadow:0 0 20px rgba(255,215,122,.45)}
.baum-bereich{margin:34px auto 0; max-width:640px}
.baum-bereich h2{font-weight:normal; color:var(--gold); font-size:1.236rem; margin:0 0 4px}
.baum-bereich .hilfe{margin:0 0 10px; color:var(--leise); font-size:0.8rem}
.baum{position:relative; width:min(420px,92%); aspect-ratio:420/470; margin:0 auto}
.baum svg{width:100%; height:100%; display:block}
.kugel{position:absolute; width:16%; aspect-ratio:1; border-radius:50%; border:3px solid #fff3; cursor:pointer;
       transform:translate(-50%,-50%); box-shadow:inset -6px -8px 12px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.35);
       font:700 0.873rem Arial,sans-serif; color:#fff; transition:transform .2s}
.kugel::before{content:""; position:absolute; top:-12%; left:42%; width:16%; height:14%; background:#d9c27a; border-radius:2px}
.kugel:hover,.kugel:focus-visible{transform:translate(-50%,-50%) scale(1.15); outline:none; box-shadow:0 0 0 4px var(--gold), 0 0 22px var(--gold)}
.kugel.offen{opacity:.55}
.k1{background:radial-gradient(circle at 35% 30%,#ff8a80,#b71c1c)} .k2{background:radial-gradient(circle at 35% 30%,#ffe082,#c49000)}
.k3{background:radial-gradient(circle at 35% 30%,#90caf9,#1565c0)} .k4{background:radial-gradient(circle at 35% 30%,#ce93d8,#6a1b9a)}
.k5{background:radial-gradient(circle at 35% 30%,#a5d6a7,#2e7d32)} .k6{background:radial-gradient(circle at 35% 30%,#ffcc80,#e65100)}
.ueberraschung{margin:18px auto 0; max-width:36em; padding:22px 24px; border-radius:14px; text-align:left;
               background:#fffaf0; color:#2a1f1a; border:3px solid var(--gold); box-shadow:0 8px 24px rgba(0,0,0,.35);
               animation:aufgehen .45s ease-out}
.ueberraschung[hidden]{display:none}
.ueberraschung h3{margin:0 0 8px; color:#9b2f2f; font-size:1.055rem; font-weight:normal}
.ueberraschung p{margin:0 0 .6em}
.ueberraschung a{color:#9b2f2f; font-weight:700}
.ueberraschung .zitat{font-style:italic}
.ueberraschung button{font:700 0.8rem Arial,sans-serif; padding:10px 18px; border-radius:10px; cursor:pointer;
                      background:#9b2f2f; color:#fff; border:0; margin:4px 8px 4px 0}
.ueberraschung .loesung{background:#fff0d0; padding:8px 12px; border-radius:8px}
@keyframes aufgehen{from{transform:scale(.9); opacity:0}to{transform:scale(1); opacity:1}}
.funke{position:fixed; pointer-events:none; z-index:50; color:#ffd77a; font-size:22px; animation:funke 1.1s ease-out forwards}
@keyframes funke{to{transform:translate(var(--dx),var(--dy)) scale(.3); opacity:0}}

.dank{position:relative; z-index:1; text-align:center; font-family:Arial,sans-serif; font-size:0.727rem; color:var(--leise); padding:0 16px 34px}

@media (max-width:600px){
  body{font-size:0.836rem}
  .blatt{margin:4px 10px 24px; padding:22px 16px 24px; border-radius:14px}
  .blatt::before,.blatt::after{width:34px; height:34px}
  .datum img{width:72px; height:72px}
  .abspielen .knopf{width:72px; height:72px}
  .abspielen .knopf::after{left:28px; top:20px; border-width:16px 0 16px 26px}
  .abspielen .klein{display:none}
  .zurueck{padding:6px 12px; font-size:0.727rem}
}
@media (prefers-reduced-motion:reduce){
  .flocke,.funke{display:none}
  .kerze.brennt .flamme,.folgt .stern{animation:none}
}

/* WhatsApp-Teilen */
.teilen{margin:22px 0 0}
.whatsapp{display:inline-block; background:#25d366; color:#fff !important; text-decoration:none; font:700 0.82rem Arial,sans-serif;
          padding:10px 20px; border-radius:24px}
.whatsapp:hover,.whatsapp:focus{background:#1da851}