/* weltseite-winter.css — Zusatz für welt/vierundzwanzig-fenster/ („Vierundzwanzig Fenster bis zu dir",
   Nora Westfield, Stillwater Bay – Winterromane), 22.09.2026. Nur über YAML zusatz_css geladen.
   Bildwelt des Covers: Nachtblau, Laternengold, rot-weißes Karo. Eigenes Klassenpräfix wf- (weltseite.css ist
   gemeinsam; Lehre 20.09.2026). */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');
.t-winter{--nacht:#0a1328;--nacht2:#0f1b36;--schiefer:#172647;--linie:rgba(242,194,123,.2);
  --gold:#e9b86c;--gold-hell:#f7d9a4;--text:#eef0f6;--text2:#aab5cc;--karo:#c8402f;--licht:#ffcf7f}
.t-winter [hidden]{display:none !important}
.t-winter ::selection{background:#e9b86c;color:#0a1328}
.t-winter .knopf.voll{color:#1a1206;box-shadow:0 6px 28px rgba(233,184,108,.28)}
.t-winter button.knopf{background:transparent;font:inherit;cursor:pointer}
.t-winter button.knopf.voll{background:var(--gold)}
.t-winter .knopf.aus{opacity:.85;cursor:default;background:rgba(233,184,108,.16);color:var(--gold-hell);box-shadow:none;border-color:rgba(233,184,108,.5)}
.t-winter .knopf.klein{font-size:.82rem;padding:7px 16px}
.t-winter .w-nav.fest{background:rgba(10,19,40,.92)}
.t-winter .w-hero h1{font-size:clamp(2.4rem,6.8vw,5rem);line-height:1.05;max-width:860px;text-wrap:balance}
.t-winter .w-hero-img{object-position:30% 50%}
@media (max-width:900px){.t-winter .w-hero-img{object-position:60% 50%}}   /* 29.09.: Hero mit Klippe – am Handy Leuchtturm im Bild */
.t-winter .w-hero::after{background:linear-gradient(to top,rgba(10,19,40,1) 0%,rgba(10,19,40,.86) 18%,rgba(10,19,40,.42) 46%,rgba(10,19,40,.08) 70%,rgba(10,19,40,.3) 100%),
  linear-gradient(to right,rgba(10,19,40,.5) 0%,rgba(10,19,40,0) 60%)}
.t-winter .w-sprung{background:rgba(10,19,40,.9)}
.t-winter .w-intro p:first-of-type::first-letter{color:var(--gold)}

/* ---------------------------------------------------------------- Die Straße */
.wf-str{padding-bottom:70px}
.wf-kopf{display:grid;grid-template-columns:1fr 190px;gap:36px;align-items:end;margin-bottom:34px}
.wf-kopf .sek-kopf{margin:0}
.wf-status{margin-top:16px !important;color:var(--gold-hell) !important;font-style:italic}
.wf-kopf .knoepfe{margin-top:18px}
.wf-zweig{margin:0;text-align:center}
.wf-zw-bild{position:relative;width:100%;max-width:190px;margin:0 auto;aspect-ratio:460/685;border-radius:10px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.wf-zw-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wf-zw-bereit .wf-zw-knospen{transition:opacity 1.2s}
.wf-zw-bluete{opacity:clamp(0,calc((var(--s,1) - .8) * 5),1)}
.wf-zw-bereit .wf-zw-bluete{transition:opacity 1.6s}
.wf-zweig.leer .wf-zw-knospen,.wf-zweig.leer .wf-zw-bluete{opacity:0}
.wf-zweig figcaption{font-size:.8rem;line-height:1.45;color:var(--text2);margin-top:6px}
.wf-zweig figcaption b{display:block;font-family:'Cinzel',serif;font-weight:400;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}

.wf-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(233,184,108,.4) transparent;outline:none}
.wf-scroll:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.wf-bild{position:relative;width:100%;max-width:1800px;margin:0 auto;min-width:1180px;overflow:hidden;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.wf-bild-img{width:100%;height:auto;display:block}
.wf-wisch{display:none;text-align:center;font-size:.8rem;color:var(--text2);margin:10px 0 0;letter-spacing:.04em}
.wf-wisch::before{content:"← "}.wf-wisch::after{content:" →"}
@media (max-width:1180px){.wf-wisch{display:block}}

.wf-f{position:absolute;transform:translate(-50%,-50%);padding:0;margin:0;border:0;background:transparent;cursor:pointer;border-radius:2px;z-index:2}
.wf-f::before{content:"";position:absolute;inset:0;border-radius:inherit;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(ellipse at 50% 62%,#fff0c8 0%,#ffc86a 42%,#f09a3c 78%,#c9651f 100%);transition:opacity 1.4s ease}
.wf-f::after{content:"";position:absolute;inset:-70% -90%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,196,110,.42) 0%,rgba(255,170,80,.14) 38%,rgba(255,160,70,0) 68%);transition:opacity 1.8s ease}
.wf-f.an::before{opacity:.93;animation:wfFlacker 6s ease-in-out infinite;animation-delay:calc(var(--v) * -6s)}
.wf-f.an::after{opacity:1}
.wf-f.glimmt::before{opacity:.28;animation:wfGlimm 3.2s ease-in-out infinite}
.wf-f.zuendet::after{animation:wfZuend 1.2s ease-out}
@keyframes wfFlacker{0%,100%{opacity:.93}40%{opacity:.84}55%{opacity:.96}70%{opacity:.88}}
@keyframes wfGlimm{0%,100%{opacity:.18}50%{opacity:.4}}
@keyframes wfZuend{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
.wf-nr{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font-family:'Cinzel',serif;font-size:.72rem;line-height:1;
  color:#1a1206;background:var(--gold-hell);border-radius:999px;padding:4px 7px 3px;opacity:0;transition:opacity .25s;white-space:nowrap;pointer-events:none}
.wf-f:hover .wf-nr,.wf-f:focus-visible .wf-nr,.wf-f.gew .wf-nr,.wf-f.heute .wf-nr{opacity:1}
.wf-f.heute .wf-nr::after{content:" · heute"}
.wf-f:focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px}
.wf-f.gew{outline:2px solid var(--gold-hell);outline-offset:3px}
.wf-f-turm::before,.wf-f-turm.an::before{display:none}
.wf-f-turm.an::after{opacity:1;inset:-160% -260%;background:radial-gradient(circle,rgba(255,210,130,.55) 0%,rgba(255,190,100,.18) 40%,rgba(255,180,90,0) 70%)}
.wf-feuer{position:absolute;width:1.2%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,#fffbe8 0%,#ffe19a 30%,rgba(255,200,110,0) 70%);opacity:.25;transition:opacity .12s}
.wf-feuer::after{content:"";position:absolute;left:50%;top:50%;width:1500%;height:260%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,236,190,.55) 0%,rgba(255,220,160,.12) 35%,rgba(255,220,160,0) 62%);opacity:0;transition:opacity .12s}
body.wf-blitz .wf-feuer{opacity:1}
body.wf-blitz .wf-feuer::after{opacity:1}
body.wf-aus .wf-feuer{opacity:0}

.wf-blatt{max-width:760px;margin:34px auto 0;min-height:150px;padding:26px 30px;border:1px solid var(--linie);border-radius:10px;
  background:linear-gradient(160deg,rgba(255,207,127,.08),rgba(255,207,127,.02));outline:none}
.wf-leer{color:var(--text2);font-style:italic;margin:0;text-align:center}
.wf-blatt h3{font-family:'Playfair Display',serif;font-weight:500;font-size:1.6rem;color:#fff;margin:4px 0 10px}
.wf-kd{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0}
.wf-duft{margin:0 0 10px;color:var(--gold-hell)}.wf-duft span{color:var(--text2);font-style:italic}
.wf-satz{margin:0 0 12px}
.wf-kap{margin:0;font-size:.86rem;color:var(--text2)}

/* ---------------------------------------------------------------- Leuchtturm */
.wf-lt{background:radial-gradient(ellipse at 30% 40%,#13244a 0%,var(--nacht) 70%)}
.wf-lt-in{display:grid;grid-template-columns:minmax(260px,1fr) 1.1fr;gap:56px;align-items:center}
/* Gemaltes Bild (Laterne dunkel) + im Takt: Ausschnitt mit brennender Laterne, Lichthof, Strahl nach beiden Seiten */
.wf-lt-rahmen{position:relative;margin:0 auto;max-width:460px;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);isolation:isolate}
.wf-lt-foto{display:block;width:100%;height:auto}
.wf-lt-an{position:absolute;height:auto;opacity:0;transition:opacity .4s ease-out;pointer-events:none}
.wf-lt-rahmen::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .45s ease-out;background:radial-gradient(ellipse 75% 45% at var(--lx) var(--ly),rgba(255,226,170,.30) 0%,rgba(255,210,150,.10) 45%,rgba(255,200,140,0) 80%)}
.wf-lt-lampe{position:absolute;left:var(--lx);top:var(--ly);width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,250,228,1) 0%,rgba(255,220,150,.75) 12%,rgba(255,195,105,.28) 34%,rgba(255,180,90,0) 66%);mix-blend-mode:screen;opacity:0;transition:opacity .4s ease-out}
.wf-strahl{position:absolute;left:0;right:0;top:calc(var(--ly) - 9%);height:18%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .45s ease-out;filter:blur(5px)}
.wf-strahl::before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,var(--lx) 47%,100% 0,100% 100%,var(--lx) 53%,0 100%);
  background:radial-gradient(ellipse 60% 50% at var(--lx) 50%,rgba(255,244,210,.85) 0%,rgba(255,230,175,.35) 45%,rgba(255,220,160,0) 100%)}
body.wf-blitz .wf-lt-an,body.wf-blitz .wf-lt-lampe,body.wf-blitz .wf-strahl,body.wf-blitz .wf-lt-rahmen::after{opacity:1;transition-duration:.06s}
body.wf-aus .wf-lt-an,body.wf-aus .wf-lt-lampe,body.wf-aus .wf-strahl,body.wf-aus .wf-lt-rahmen::after{opacity:0}
@media (prefers-reduced-motion:reduce){body:not(.wf-aus) .wf-lt-an{opacity:1}body:not(.wf-aus) .wf-lt-lampe{opacity:.45}}
.wf-takt{text-align:center;font-family:'Cinzel',serif;letter-spacing:.24em;text-transform:uppercase;font-size:.78rem;color:var(--gold-hell);min-height:1.4em;margin:6px 0 0}
.wf-lt-tx blockquote{margin:24px 0;padding:0 0 0 20px;border-left:2px solid var(--gold)}
.wf-lt-tx blockquote p{font-style:italic;margin:0 0 6px}
.wf-lt-tx cite{font-size:.82rem;color:var(--text2);font-style:normal}
.wf-ida{margin-top:30px;padding:22px 24px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--linie)}
.wf-ida-k{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.wf-ida-out{min-height:6.5em}
.wf-ida-out p{margin:0 0 6px;font-style:italic}
.wf-ida-out cite{display:block;font-size:.8rem;color:var(--text2);font-style:normal;margin-bottom:12px}

/* ---------------------------------------------------------------- Zettel und Kakao */
.wf-zt-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.wf-zt-bild{margin:0}.wf-zt-bild img{border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.wf-zt-zitat{margin:0 0 26px;padding:0}
.wf-zt-zitat p{font-style:italic;margin:0 0 6px;color:var(--text)}
.wf-zt-zitat cite{font-size:.82rem;color:var(--text2);font-style:normal}
.wf-papier{position:relative;transform:rotate(-2.2deg);margin:10px 8px 26px;padding:30px 30px 26px 44px;color:#2b3550;
  background-color:#fbfaf4;background-image:linear-gradient(rgba(104,140,196,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(104,140,196,.28) 1px,transparent 1px);
  background-size:18px 18px;box-shadow:0 18px 40px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.08);border-radius:2px}
.wf-papier::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.06));pointer-events:none}
.wf-papier p{font-family:'Caveat','Segoe Print','Bradley Hand',cursive;font-size:clamp(1.55rem,3.2vw,2.05rem);line-height:1.25;margin:0;color:#23305a}
.wf-papier-nr{position:absolute;left:-14px;top:-14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:'Caveat',cursive;font-size:1.5rem;color:#fff;background:var(--karo);box-shadow:0 6px 14px rgba(0,0,0,.35);
  background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.18) 75%),linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.18) 75%);
  background-size:10px 10px;background-position:0 0,5px 5px}
.wf-zt-schluss{color:var(--text2);font-style:italic}
.wf-rezept{margin-top:80px;display:grid;grid-template-columns:1fr 1fr;border-radius:12px;overflow:hidden;
  background:#fbf6ea;color:#2c2418;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.wf-rz-bild img{width:100%;height:100%;object-fit:cover;object-position:28% 60%}
.wf-rz-tx{padding:38px 40px}
.wf-rz-tx .kicker{color:var(--karo)}
.wf-rz-tx h3{font-family:'Playfair Display',serif;font-weight:500;font-size:2rem;margin:0 0 6px;color:#1d1710}
.wf-rz-motto{font-style:italic;color:#23305a;margin:0 0 16px}
.wf-rz-port{font-weight:600;margin:0 0 6px}
.wf-rz-tx ul{margin:0 0 16px;padding-left:1.1em}.wf-rz-tx li{margin:2px 0}
.wf-rz-nach{font-style:italic;color:#4d4231}
.wf-rz-q{font-size:.82rem;color:#7a6b53;margin:18px 0 0;border-top:1px solid rgba(0,0,0,.1);padding-top:12px}

/* ---------------------------------------------------------------- Handy */
@media (max-width:900px){
  .wf-kopf{grid-template-columns:1fr 110px;gap:18px}
  .wf-zw-bild{max-width:120px}
  .wf-lt-in,.wf-zt-grid,.wf-rezept{grid-template-columns:1fr;gap:32px}
  .wf-rezept{gap:0}.wf-rz-bild img{height:260px}
  .wf-rz-tx{padding:28px 22px}
  .wf-blatt{margin:24px 16px 0;padding:22px 20px}
  .wf-papier{margin:14px 6px 22px}
}
@media (max-width:520px){.wf-kopf{grid-template-columns:1fr}.wf-zweig{display:flex;gap:14px;align-items:center;text-align:left}.wf-zw-bild{width:92px;flex:none;margin:0}}
@media (prefers-reduced-motion:reduce){.wf-f.an::before,.wf-f.glimmt::before,.wf-f.zuendet::after{animation:none}.wf-zw-bild img{transition:none}}