/* =======================================================================
   Pergament (08.10.2026, v8). Farben aus dem Key-Art gemessen: helles,
   ruhiges Beigepapier (Rand #DFC198, Papier #EBD0A8), Tuschlavierung in
   Grau-Braun (#382D21 bis #B59670), Zinnoberrot der Pflaumenblueten und
   Baender, orange Laternenglut, Gold-Bronze #BE8A4D.

   Die Buehne zeigt das Key-Art selbst (hero-keyart-*.webp) als Banner,
   Text und Knoepfe stehen darunter auf dem Papier. Ueber dem Bild nur
   was ins Bild gehoert: zwei flackernde Laternen genau ueber den
   gemalten, fallende Pflaumenblueten von links oben, ein Kranich in
   Tusche, ein Hauch Nebel unten.

   Liegt als LETZTE Datei ueber dog.css und den Seitendateien. Die
   Grunddateien bleiben unveraendert, Rueckweg: den <link> in base.html
   entfernen.

   Die Atmosphaere-Bilder sind hell auf Alpha gemalt (siehe dog.css). Auf
   Papier macht filter:brightness(0) daraus Tusche, die Form bleibt im
   Alphakanal. Rot entsteht aus Schwarz ueber die Filterkette --rot-f.
   Qualitaetsfarben der Items (armory.css --q*) bleiben unangetastet.
   ======================================================================= */
:root{
  color-scheme:light;

  --page:#DFC198;   --bar:#D5B588;   --card:#E8D0AA;  --card-act:#EFDBB8;
  --sunk:#F5E7CE;
  --edge:#A88A64;   --edge-lit:#7E6246; --edge-in:#9A7C5A;
  --engrave-dark:#B59670; --engrave-light:#EFDBB8;
  --atmo-lamp:.12;

  --fg:#2B1D12;     --fg-body:#36271A; --fg-mut:#4F3B28; --fg-faint:#614A33;

  --gold:#7A4A12;   --gold-hi:#93601F; --gold-dim:#6A3E0C; --gold-deep:#BE8A4D;
  --alarm:#9A2A18;  --ok:#33602A;

  --shadow-head:none;
  --shadow-sub:0 1px 0 rgba(245,231,206,.5);

  /* Key-Art-Akzente */
  --wein:#9E2F1C;   --wein-hi:#B8432A; --messing:#BE8A4D;
  --rolle:#2E241C;  --rolle-hi:#3D3127; --rolle-tief:#1F1812;
  --tusche-f:brightness(0);
  --rot-f:brightness(0) invert(24%) sepia(92%) saturate(3600%) hue-rotate(354deg) brightness(98%);
  --rosa-f:brightness(0) invert(62%) sepia(40%) saturate(1600%) hue-rotate(310deg) brightness(104%);
}

/* Dunkle Inseln (Fuss, Statusfries, Tooltips, Bildkarten) bekommen die
   alten hellen Schrifttoene zurueck, statt jede Regel einzeln zu ueberschreiben. */
.foot,.status,.tip,.render .badge,.render .worn,.tile{
  --fg:#F3E8D4; --fg-body:#E2D4BC; --fg-mut:#C4B49A; --fg-faint:#A99A82;
  --gold:#D9A962; --gold-hi:#F0D3A0; --gold-dim:#C2914C; --gold-deep:#8A6A32;
  --edge:#5A4836; --edge-in:#6A5640; --ok:#8FC57A;
  --shadow-sub:0 0 5px rgba(0,0,0,.85),0 1px 5px rgba(0,0,0,.7)}

/* ---------------------------------------------------- Grundlagen */
:focus-visible{outline-color:var(--wein);box-shadow:0 0 0 5px rgba(245,231,206,.9)}
::selection{background:var(--wein);color:#F8ECD6}
.skip{background:var(--wein);color:#F8ECD6}

/* Ruhiges Papier: eine Farbe, nur feines Korn. Keine Flecken. */
body{background:var(--page)}
body::before{opacity:.14}
.sect{background-color:var(--page)}
.sect--bar{background-color:var(--bar)}

/* ---------------------------------------------------- Kopfleiste
   Helles Papier, unten Goldlinie und ein feiner Zinnoberstreif wie die
   Baender im Key-Art. */
.hdr{background:linear-gradient(180deg,#EAD3AE,#DDBF94);
  box-shadow:0 1px 0 var(--messing),0 3px 0 var(--wein),0 8px 16px -10px rgba(46,36,28,.45)}
.brand .mark [fill="#D2A24C"]{fill:var(--gold)}
.nav a::after{background:var(--wein)}
.nav a[aria-current]{color:var(--wein)}
.flag{box-shadow:0 0 0 1px rgba(0,0,0,.22)}
.lng__menu{box-shadow:0 12px 28px rgba(60,40,20,.28)}
.lng__menu a:hover{background:rgba(158,47,28,.12)}
.lng__menu a[aria-current]{color:var(--wein)}

/* ---------------------------------------------------- Knoepfe
   Zinnober mit Goldrand und hellem Text. */
.btn-p,.btn-hero{background:linear-gradient(180deg,var(--wein-hi),var(--wein));
  color:#FBEFD8;border-color:var(--messing);
  box-shadow:inset 0 0 0 1px rgba(80,18,8,.5),0 2px 0 rgba(60,30,10,.2)}
.btn-hero{box-shadow:inset 0 0 0 1px rgba(80,18,8,.5),0 10px 22px -10px rgba(158,47,28,.6)}
.btn-p:hover,.btn-hero:hover{background:linear-gradient(180deg,#CB5232,#A8361F);
  border-color:#DDB070;color:#FFF7E8;
  box-shadow:inset 0 0 0 1px rgba(80,18,8,.5),0 12px 26px -10px rgba(158,47,28,.7)}
.btn-s{border-color:var(--wein);color:var(--wein);background:rgba(245,231,206,.6)}
.btn-s:hover{background:var(--wein);border-color:var(--wein);color:#FBEFD8}
.btn-ghost{border-color:var(--rolle);color:var(--fg);background:rgba(245,231,206,.55)}
.btn-ghost:hover{background:var(--rolle);border-color:var(--rolle);color:#F3E8D4}
.tag{background:var(--wein);color:#FBEFD8}

/* ---------------------------------------------------- Buehne
   Das Key-Art als Banner, oben mittig, hoechstens 1440 px breit (das
   Original hat 1131 px). Unten laeuft es ins Papier aus, auf breiten
   Schirmen auch seitlich. Das Seiten-Emblem entfaellt, das Logo steht
   im Bild. Die Nacht-Ebenen (Ast, Felskante, Nebelbank, Mondstrahlen,
   alte Laterne) passen nicht zum Tag und sind aus. */
.stage__art{position:absolute;inset-block:0 auto;inset-inline:0;margin-inline:auto;
  inline-size:min(100%,1440px);block-size:auto;aspect-ratio:1131/529;
  background:url("../hero-keyart-1440.webp") no-repeat center/100% 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);
  mask-image:linear-gradient(180deg,#000 80%,transparent)}
@media (max-width:1100px){.stage__art{background-image:url("../hero-keyart-1100.webp")}}
@media (max-width:760px){.stage__art{background-image:url("../hero-keyart-760.webp")}}
@media (min-width:1441px){.stage__art{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,#000 80%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,#000 80%,transparent);
  mask-composite:intersect}}
.stage__art img{visibility:hidden}
.stage__scrim{background:none}
.stage::after,.stage__inner::before,.stage__inner::after,.fog .glow{display:none}

/* Text unter dem Bild: Oberkante = 90 % der Bannerhoehe
   (529/1131 = 46,77 % der Breite), mittig. */
.stage__inner{min-block-size:0;justify-content:center;text-align:center;
  padding-block:min(42.1%,606px) 64px}
.hero{max-inline-size:640px;margin-inline:auto}
.hero__emblem{display:none}
.hero p{color:var(--fg-body);text-shadow:0 1px 0 rgba(245,231,206,.6);margin-inline:auto}
.cta{justify-content:center}
.stage .btn-ghost{background:rgba(245,231,206,.6);border-color:var(--rolle);color:var(--fg)}
.stage .btn-ghost:hover{background:var(--rolle);border-color:var(--rolle);color:#F3E8D4}
.hero .beta-seal{position:relative;inset:auto;margin-inline:auto}
.beta-seal{border-color:var(--messing);
  background:linear-gradient(180deg,var(--wein-hi),var(--wein));
  box-shadow:0 0 0 1px rgba(80,18,8,.5),0 8px 18px -10px rgba(158,47,28,.65),
    inset 0 1px 0 rgba(255,230,190,.25)}
.beta-seal__lbl{color:#F3E2C4}
.beta-seal__sep{background:rgba(232,196,130,.6)}
.beta-seal__when{background-image:linear-gradient(90deg,#E8C27E,#FFF3D6 50%,#E8C27E)}

/* Laternen. Sitzen genau auf den gemalten (29 % und 72 % der Breite,
   38 % der Hoehe). Warmes Licht im Modus screen hellt das Papier um die
   Laterne auf, statt es orange zu faerben. Zwei teilerfremde Takte,
   damit sie nie im Gleichschritt flackern. */
.stage__art::before,.stage__art::after{content:"";position:absolute;
  inset-block-start:38%;inline-size:14%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,170,80,.62),rgba(240,120,50,.30) 42%,rgba(230,100,40,0) 100%);
  animation:laterne 3.1s ease-in-out infinite}
.stage__art::before{inset-inline-start:29%}
.stage__art::after{inset-inline-start:72%;animation-duration:3.7s;animation-delay:-1.3s}
@keyframes laterne{
    0%{opacity:.55;transform:scale(.94)}
   14%{opacity:.82;transform:scale(1.02)}
   27%{opacity:.62;transform:scale(.97)}
   44%{opacity:.95;transform:scale(1.07)}
   58%{opacity:.6;transform:scale(.96)}
   79%{opacity:.85;transform:scale(1.03)}
  100%{opacity:.55;transform:scale(.94)}}

/* Pflaumenblueten. Vier Blaetter aus dem Blatt-Sprite, zinnober und rosa
   umgefaerbt, starten links oben bei den Zweigen und segeln pendelnd
   nach rechts unten. Teilerfremde Dauern, kein Muster. */
.stage__scrim::before,.stage__scrim::after,.fog::before,.fog .f1::after{
  content:"";position:absolute;inset:auto;pointer-events:none;opacity:0;
  inline-size:20px;block-size:23px;
  background:url("../img/atmo/leaf.webp") 0 0/160px 23px;will-change:transform}
.stage__scrim::before{inset-block-start:5vh;inset-inline-start:14%;filter:var(--rot-f);
  animation:pt20 1.1s steps(8) infinite,petal-a 14s linear infinite}
.stage__scrim::after{inset-block-start:9vh;inset-inline-start:23%;filter:var(--rosa-f);
  animation:pt20 1.4s steps(8) infinite,petal-b 18s linear -7s infinite}
.fog::before{inset-block-start:2vh;inset-inline-start:8%;filter:var(--rot-f);
  inline-size:15px;block-size:17px;background-size:120px 17px;
  animation:pt15 1.7s steps(8) infinite,petal-c 21s linear -12s infinite}
.fog .f1::after{inset-block-start:-14vh;inset-inline-start:31%;filter:var(--rosa-f);
  inline-size:15px;block-size:17px;background-size:120px 17px;
  animation:pt15 1.25s steps(8) infinite,petal-a 16s linear -4s infinite}
@keyframes pt20{to{background-position:-160px 0}}
@keyframes pt15{to{background-position:-120px 0}}
@keyframes petal-a{
    0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
    6%{opacity:.9}
   18%{transform:translate3d(5vw,9vh,0) rotate(70deg)}
   34%{transform:translate3d(3vw,18vh,0) rotate(20deg)}
   50%{transform:translate3d(10vw,27vh,0) rotate(120deg)}
   66%{transform:translate3d(8vw,36vh,0) rotate(60deg);opacity:.85}
   82%{transform:translate3d(15vw,45vh,0) rotate(170deg);opacity:.6}
  100%{transform:translate3d(19vw,54vh,0) rotate(220deg);opacity:0}}
@keyframes petal-b{
    0%{transform:translate3d(0,0,0) rotate(10deg);opacity:0}
    6%{opacity:.85}
   20%{transform:translate3d(7vw,8vh,0) rotate(-40deg)}
   38%{transform:translate3d(4vw,17vh,0) rotate(30deg)}
   55%{transform:translate3d(13vw,26vh,0) rotate(-60deg)}
   72%{transform:translate3d(11vw,35vh,0) rotate(10deg);opacity:.75}
  100%{transform:translate3d(22vw,48vh,0) rotate(-90deg);opacity:0}}
@keyframes petal-c{
    0%{transform:translate3d(0,0,0) rotate(-20deg);opacity:0}
    7%{opacity:.75}
   25%{transform:translate3d(9vw,12vh,0) rotate(60deg)}
   45%{transform:translate3d(6vw,22vh,0) rotate(0deg)}
   65%{transform:translate3d(16vw,33vh,0) rotate(90deg);opacity:.65}
  100%{transform:translate3d(26vw,50vh,0) rotate(150deg);opacity:0}}

/* Kranich als Tusche, Nebel unten warm und duenn wie die Wolkenwirbel
   im Bild. Auf schmalen Schirmen liegt das Nebelband schon unter dem
   Banner, dort aus. */
.fog .f1,.fog .f2{filter:none}
.fog .f1::before{filter:brightness(0) opacity(.6)}
.fog .f2{opacity:.22;filter:sepia(.5) brightness(1.04)}
.fog .f2::after{opacity:.18;animation:drift-near 23s linear infinite}
@media (max-width:800px){.fog .f2{display:none}}

.motion-off .stage__art::before,.motion-off .stage__art::after,
.motion-off .stage__scrim::before,.motion-off .stage__scrim::after,
.motion-off .fog::before,.motion-off .fog .f1::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .stage__art::before,.stage__art::after,.stage__scrim::before,.stage__scrim::after,
  .fog::before,.fog .f1::after{animation:none}}

/* ---------------------------------------------------- Atmosphaere */
.sect--bar + .sect::before,.status + .sect::before{
  background:linear-gradient(to bottom,rgba(94,66,40,.12),rgba(94,66,40,0))}
.sect + .sect--bar::before{background:linear-gradient(to bottom,rgba(60,42,30,.08),rgba(60,42,30,0))}
/* Kopfband der Unterseiten: Bergruecken mit Pagode als Tusche */
main.sect::before{background:url("../img/atmo/band-head.webp") no-repeat center top/cover;
  filter:var(--tusche-f);opacity:.42}
.status + .sect .col h2::before{filter:var(--tusche-f);opacity:.1}
main.sect::after{filter:var(--tusche-f);opacity:.07}
.sect--bar + .sect::after,.sect + .sect--bar::after,.status + .sect::after{
  filter:var(--tusche-f);opacity:.3}
#chronik .col::after,#konto .col::before,
#chronik .col>.motiv,#konto .col>.motiv{filter:var(--tusche-f)}
.col h2::after{filter:var(--tusche-f);opacity:.6}
.eyebrow::before{filter:var(--rot-f)}

/* ---------------------------------------------------- Statusfries
   Tuscheband mit Goldkanten. */
.status{background:linear-gradient(180deg,var(--rolle-hi),var(--rolle));
  border-block:1px solid var(--messing)}

/* ---------------------------------------------------- Karten & Listen */
.card,.news a,.packs{box-shadow:inset 0 0 0 1px rgba(255,246,228,.35),0 8px 18px -12px rgba(60,42,30,.45)}
.pack--pop{background:var(--card-act);box-shadow:inset 3px 0 0 var(--wein)}
.tile--figur,.waehler__bild{background:linear-gradient(180deg,var(--rolle-hi),var(--rolle-tief) 66%)}
.tile .veil{background:linear-gradient(180deg,rgba(31,24,18,0) 36%,rgba(31,24,18,.92) 100%)}
.tl__ms{box-shadow:0 8px 18px -12px rgba(80,55,25,.35)}

/* ---------------------------------------------------- Formular als Rolle
   Helles Papier innen, Tuscherahmen mit Goldkante, oben und unten ein
   Rollstab mit Messingkappen. */
.panel{position:relative;background:linear-gradient(180deg,#F1DFC0,#E8D0AA);
  border:1px solid var(--messing);
  box-shadow:0 0 0 5px var(--rolle),0 0 0 6px var(--messing),
             0 18px 36px -14px rgba(46,36,28,.55)}
.panel::before,.panel::after{content:"";position:absolute;inset-inline:-18px;
  block-size:12px;border-radius:6px;pointer-events:none;
  background:linear-gradient(90deg,var(--messing) 0 14px,var(--rolle-tief) 14px calc(100% - 14px),var(--messing) calc(100% - 14px));
  box-shadow:inset 0 1px 0 rgba(255,240,200,.35),0 2px 4px rgba(0,0,0,.35)}
.panel::before{inset-block-start:-12px}
.panel::after{inset-block-end:-12px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--wein);outline:none;
  box-shadow:0 0 0 2px rgba(158,47,28,.18)}
.hint--bad{color:var(--alarm)}

/* ---------------------------------------------------- Meldungen */
.meld__i{box-shadow:0 6px 14px -10px rgba(80,55,25,.4)}
.meld__i--success{border-color:color-mix(in srgb,var(--ok) 40%,transparent);
  border-inline-start-color:var(--ok);color:#264A1C}
.meld__i--error,.meld__i--danger{color:#6E1A14}
.meld__i--info{color:var(--gold-dim)}

/* ---------------------------------------------------- Fuss */
.foot{background:linear-gradient(180deg,var(--rolle-hi),var(--rolle));
  border-block-start:3px solid var(--messing);box-shadow:inset 0 1px 0 var(--rolle-tief)}

/* ---------------------------------------------------- Seitendateien */
/* tafel.css: Statusfarben fuer Papiergrund */
.st--paid,.st--applied,.st--credited,.st--delivered{color:#2C5A30;
  border-color:color-mix(in srgb,#2C5A30 45%,transparent)}
/* armory.css */
.stats .row{border-block-end-color:var(--edge)}
.doll{box-shadow:0 10px 22px -14px rgba(80,55,25,.4)}
/* wiki.css: helle Schrifttoene auf Papier abgedunkelt */
.wk-werte,.wk-dl div{background:var(--card)}
.wk-werte .v{color:var(--fg)}
.wk-steck__bild{background:radial-gradient(70% 70% at 50% 45%,var(--rolle-hi),var(--rolle-tief) 75%)}
.wk-typ--truhe,.wk-typ--herstellung,.wk-typ--verbesserung,.wk-typ--vorstufe{color:#24466A;border-color:#6F8BA8}
.wk-typ--laden,.wk-typ--itemshop{color:#36561F;border-color:#7E9A68}
.wk-typ--quest,.wk-typ--event{color:#56306E;border-color:#9A7DAE}
.wk-tag--rot{color:#8A2E1E;border-color:#B07060}
.wk-chip--gold{color:#FBEFD8 !important}
.wk-chip--rot{color:#8A2E1E !important;border-color:#B07060 !important}
.wk-chip--el{color:#24466A !important;border-color:#6F8BA8 !important}
.wk-stufen a[aria-current]{color:#FBEFD8}
.wk-reich--1{color:#8A2E1E !important;border-color:#B07060 !important}
.wk-reich--2{color:#634A08 !important;border-color:#A88C3E !important}
.wk-reich--3{color:#23466E !important;border-color:#6F8BAB !important}

/* v10: eigene Tusche-Szenerie neben dem Banner (nur breite Schirme).
   Links Mondberge, rechts Pagode auf Felsen; Mond- und Tempellicht atmen. */
@media (min-width:1441px){
  .stage::before,.stage::after{content:"";display:block;position:absolute;z-index:-1;
    inset-block:0 auto;block-size:674px;inline-size:380px;pointer-events:none;
    opacity:1;filter:none;animation:none;background-repeat:no-repeat;background-size:380px 674px}
  .stage::before{inset-inline-end:calc(50% + 700px);
    background-image:url("../img/side-left.webp");background-position:right top;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);
    mask-image:linear-gradient(90deg,transparent,#000 30%)}
  .stage::after{inset-inline-start:calc(50% + 700px);inset-inline-end:auto;
    background-image:url("../img/side-right.webp");background-position:left top;
    -webkit-mask-image:linear-gradient(270deg,transparent,#000 30%);
    mask-image:linear-gradient(270deg,transparent,#000 30%)}
  .stage__inner::before,.stage__inner::after{content:"";display:block;position:absolute;z-index:-1;
    inset:auto;border-radius:50%;transform:none;filter:none;pointer-events:none}
  .stage__inner::before{inset-block-start:5px;inset-inline-start:calc(50% - 965px);
    inline-size:240px;block-size:240px;
    background:radial-gradient(closest-side,rgba(255,246,222,.75),rgba(255,232,190,.32) 45%,transparent);
    animation:mondlicht 6s ease-in-out infinite alternate}
  .stage__inner::after{inset-block-start:70px;inset-inline-start:calc(50% + 735px);
    inline-size:200px;block-size:260px;
    background:radial-gradient(closest-side,rgba(255,176,90,.42),rgba(255,150,70,.14) 55%,transparent);
    animation:tempellicht 3.4s ease-in-out infinite alternate}
}
@keyframes mondlicht{from{opacity:.5;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
@keyframes tempellicht{0%{opacity:.6}40%{opacity:.95}55%{opacity:.75}100%{opacity:1}}
.motion-off .stage__inner::before,.motion-off .stage__inner::after{animation:none}
@media (prefers-reduced-motion:reduce){.stage__inner::before,.stage__inner::after{animation:none}}
/* v11: Seiten aus dem Original-Nachtbild umgefaerbt, Lichter auf Mond und Laterne */
@media (min-width:1441px){
  .stage__inner::before{inset-block-start:49px;inset-inline-start:calc(50% - 871px)}
  .stage__inner::after{inset-block-start:178px;inset-inline-start:calc(50% + 663px);inline-size:140px;block-size:180px}
}
/* v12: Seiten fuellen die ganze Flaeche bis zum Bildschirmrand */
@media (min-width:1441px){
  .stage::before,.stage::after{inline-size:auto;background-size:cover;-webkit-mask-image:none;mask-image:none}
  .stage::before{inset-inline-start:0;inset-inline-end:calc(50% + 700px);background-position:right top}
  .stage::after{inset-inline-start:calc(50% + 700px);inset-inline-end:0;background-position:left top}
  .stage__inner::before{inset-block-start:80px;inset-inline-start:calc(50% - 861px)}
  .stage__inner::after{inset-block-start:172px;inset-inline-start:calc(50% + 662px)}
}
/* v13: eine durchgehende Buehne statt Banner + Seiten. Links Logo, Text
   und Knoepfe, rechts die Szene (Original-Nachtbild umgefaerbt, Raender
   als Tuschewaesche ins Papier ausgeblendet, hero-scene.webp 1400x788).
   --sh = Buehnenhoehe = Bildhoehe, Lichter rechnen von der rechten Kante. */
.stage{--sh:clamp(560px,40vw,740px)}
.stage::before,.stage::after,.stage__inner::before,.stage__inner::after{display:none}
.stage__art{inset:0;margin-inline:auto;inline-size:min(100%,1920px);block-size:auto;aspect-ratio:auto;
  background:url("../img/hero-scene.webp") no-repeat right top/calc(var(--sh)*1.7766) var(--sh);
  -webkit-mask-image:none;mask-image:none}
@media (min-width:1921px){.stage__art{
  -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);
  mask-image:linear-gradient(90deg,#000 82%,transparent)}}
.stage__inner{min-block-size:var(--sh);justify-content:flex-start;text-align:start;
  padding-block:56px 72px;padding-inline:max(var(--gutter),calc(50% - 680px))}
.hero{max-inline-size:520px;margin-inline:0}
.hero__emblem{display:block;inline-size:min(440px,84vw);margin-block-end:14px}
.hero p{margin-inline:0}
.cta{justify-content:flex-start}
.hero .beta-seal{margin-inline:0}
/* Mond (69 % / 30 % im Bild) und Tempellaterne (72 % / 39 %) */
.stage__art::before{inset-inline-start:calc(100% - var(--sh)*.549);inset-block-start:calc(var(--sh)*.297);
  inline-size:calc(var(--sh)*.24);
  background:radial-gradient(closest-side,rgba(255,240,205,.55),rgba(250,215,160,.22) 45%,rgba(240,200,140,0) 100%);
  animation:mondlicht 6s ease-in-out infinite alternate}
.stage__art::after{inset-inline-start:calc(100% - var(--sh)*.503);inset-block-start:calc(var(--sh)*.389);
  inline-size:calc(var(--sh)*.09)}
/* Mittlere Breiten: Papierschleier hinter dem Text */
@media (min-width:901px) and (max-width:1400px){.stage__scrim{
  background:linear-gradient(90deg,rgba(223,193,152,.9),rgba(223,193,152,.55) 38%,rgba(223,193,152,0) 58%)}}
/* Schmal: Szene oben, Text mittig darunter */
@media (max-width:900px){
  .stage{--sh:62vw}
  .stage__inner{min-block-size:0;justify-content:center;text-align:center;
    padding-block:calc(var(--sh)*.6) 56px}
  .hero{margin-inline:auto}
  .hero p,.hero .beta-seal,.hero__emblem{margin-inline:auto}
  .hero__emblem{inline-size:min(360px,80vw)}
  .cta{justify-content:center}
}
/* v14: links wieder das Key-Art-Banner mit dem Logo (statt des kleinen
   Emblems), rechts die Szene. Banner-Raender sind schon Papierfarbe und
   laufen per Maske weich aus. */
.hero{max-inline-size:min(660px,48vw)}
.hero__emblem{display:none}
.hero::before{content:"";display:block;inline-size:100%;aspect-ratio:1131/529;margin-block-end:14px;
  background:url("../hero-keyart-1100.webp") no-repeat center/100% 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 86%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 86%,transparent);
  mask-composite:intersect}
@media (max-width:900px){
  .hero{max-inline-size:640px}
  .hero::before{background-image:url("../hero-keyart-760.webp")}
}
/* v15: Szene fuellt den ganzen Bereich rechts vom Logo bis zum Rand.
   hero-pano.webp 2340x900 (2,6:1, links gespiegelt verlaengert), deckend,
   Uebergang als weiches Oval per Maske. Breite der Szene im Bild:
   --dw = max(Kastenbreite, Hoehe*2,6). Lichter rechnen damit; ihr
   margin-top in % bezieht sich auf die Breite, daher geht --dw/2,6. */
.stage{--sh:clamp(600px,44vw,min(940px,calc(100svh - var(--head) - 40px)));
  --pad:clamp(20px,3vw,96px);--hw:min(900px,44vw)}
.stage__art{inset-block:0;inset-inline:calc(var(--pad) + var(--hw)*.7) 0;inline-size:auto;margin:0;
  background:url("../img/hero-pano.webp") no-repeat right top/max(100%,calc(var(--sh)*2.6)) auto;
  -webkit-mask-image:radial-gradient(ellipse 70% 72% at 60% 42%,#000 50%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 72% at 60% 42%,#000 50%,transparent 100%)}
.stage__scrim{background:none}
.stage__inner{padding-inline:var(--pad) var(--gutter)}
.hero{max-inline-size:var(--hw)}
.stage__art::before,.stage__art::after{inset-block-start:0}
.stage__art::before{inset-inline-start:calc(100% - max(100%,calc(var(--sh)*2.6))*.2113);
  margin-block-start:calc(max(100%,calc(var(--sh)*2.6))*.1142);
  inline-size:calc(max(100%,calc(var(--sh)*2.6))*.09)}
.stage__art::after{inset-inline-start:calc(100% - max(100%,calc(var(--sh)*2.6))*.1935);
  margin-block-start:calc(max(100%,calc(var(--sh)*2.6))*.1496);
  inline-size:calc(max(100%,calc(var(--sh)*2.6))*.035)}
@media (min-width:901px) and (max-width:1400px){.stage__scrim{background:none}}
@media (max-width:900px){
  .stage{--sh:66vw;--hw:640px}
  .stage__art{inset:0 0 auto 0;block-size:var(--sh);
    -webkit-mask-image:radial-gradient(ellipse 75% 70% at 55% 45%,#000 50%,transparent 100%);
    mask-image:radial-gradient(ellipse 75% 70% at 55% 45%,#000 50%,transparent 100%)}
  .stage__inner{padding-inline:var(--gutter);padding-block:calc(var(--sh)*.8) 56px}
  .hero{max-inline-size:640px}
}

/* v16: Zwei gleich gebaute Ovale. Das Key-Art-Banner links laeuft wie
   die Tempel-Szene rundum weich oval ins Papier aus, die Szene rechts
   beginnt dahinter und blendet zum Banner hin ganz aus. */
.hero::before{background-image:url("../hero-keyart-1440.webp");
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
  -webkit-mask-composite:source-over;
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
  mask-composite:add}
.stage__art{inset-inline-start:calc(var(--pad) + var(--hw)*.9);
  -webkit-mask-image:radial-gradient(ellipse 64% 72% at 64% 42%,#000 50%,transparent 100%);
  mask-image:radial-gradient(ellipse 64% 72% at 64% 42%,#000 50%,transparent 100%)}
@media (max-width:900px){
  .hero::before{background-image:url("../hero-keyart-760.webp")}
  .stage__art{inset-inline-start:0;
    -webkit-mask-image:radial-gradient(ellipse 75% 70% at 55% 45%,#000 50%,transparent 100%);
    mask-image:radial-gradient(ellipse 75% 70% at 55% 45%,#000 50%,transparent 100%)}}

/* v17: Das Key-Art-Banner im Stil der Tempel-Szene umgefaerbt (Skript
   keysepia.py): Papier wird dunstiges Sepia, Tusche dunkelbraun, Gold
   und Laternen mondhell. Oval wie v16. */
.hero::before{background-image:url("../img/hero-keyart-sepia-1440.webp")}
@media (max-width:900px){.hero::before{background-image:url("../img/hero-keyart-sepia-760.webp")}}

/* v19: Kein eingefuegtes Banner mehr. Links eine eigene Szene nach dem
   Vorbild des Banners im Stil der Tempel-Szene (Emblem mit Laternen im
   Mondschein, Pagoden, Nebelberge, Kirschzweig), Rand und Ausblendung
   stecken im Bild (Alpha). Laeuft links ueber den Bildschirmrand,
   rechte Szene unveraendert. */
.hero::before{background-image:url("../img/hero-left-1280.webp");aspect-ratio:1280/800;
  margin-inline-start:calc(-1*var(--pad));inline-size:calc(100% + var(--pad));
  -webkit-mask-image:none;mask-image:none}
@media (max-width:900px){
  .hero::before{background-image:url("../img/hero-left-760.webp");margin-inline-start:0;inline-size:100%}}

/* v20: Linke Spalte wie die rechte Szene. Das ganze Banner (Krieger,
   Frau, Emblem, Pagoden, Zweig) als Nachtbild im Licht der Tempel-Szene,
   eigene Ebene vom linken Bildschirmrand ueber die volle Buehnenhoehe,
   laeuft rechts in die Tempel-Szene und unten in Nebel fuer den Text aus.
   .hero::before bleibt nur Platzhalter, damit Text und Knoepfe darunter
   bleiben. */
.stage::before{content:"";display:block;position:absolute;z-index:0;pointer-events:none;
  inset-block:0;inset-inline:0 auto;block-size:auto;inline-size:calc(var(--pad) + var(--hw)*1.3);
  opacity:1;filter:none;animation:none;
  background:url("../img/hero-left26-1440.webp") no-repeat left top/cover;
  -webkit-mask-image:none;mask-image:none}
.hero::before{background-image:none;aspect-ratio:1131/529;margin-inline-start:0;inline-size:100%;
  -webkit-mask-image:none;mask-image:none}
@media (max-width:900px){
  .stage::before{display:none}
  .hero::before{background-image:url("../img/hero-left26-760.webp");aspect-ratio:760/356}}

/* v21: Linkes Bild mit Luft oben (--lt), Breite = Ebene, Text und Knoepfe
   beginnen im Nebel direkt unter dem Banner, Play-Knopf liegt noch im Bild.
   Textanfang = --lt + Bannerhoehe (Ebene*674/1440) minus Platzhalter. */
.stage{--lt:clamp(24px,3vw,64px)}
.stage::before{inset-block:var(--lt) 0;background-size:100% auto}
.stage__inner{align-items:flex-start;
  padding-block-start:calc(var(--lt) + var(--pad)*.468 + var(--hw)*.14 - 34px)}
@media (max-width:900px){
  .stage__inner{align-items:center;padding-block-start:calc(var(--sh)*.8)}}

/* v22: Beta-Siegel, Spruch und Knoepfe ganz unter das Banner, ca. 32px
   Abstand zur Bannerunterkante (vorher -34px = Ueberlappung). */
.stage__inner{padding-block-start:calc(var(--lt) + var(--pad)*.468 + var(--hw)*.14 + 82px)}
@media (max-width:900px){
  .stage__inner{padding-block-start:calc(var(--sh)*.8)}}

/* v26: Mittel-Ebene fuer die Luecke zwischen Banner und Tempel-Szene:
   Tusche-Bergruecken im Nebel, Kiefern, Pagode mit Laterne (mid.py).
   Liegt unter beiden Ebenen (z -1, .stage hat clip-path), links weich
   auslaufend. Linkes Bild mit einem Teil der Originalfarben. */
.stage::after{content:"";display:block;position:absolute;z-index:-1;pointer-events:none;
  inset-block:calc(var(--sh)*.4) auto;block-size:calc(var(--sh)*.6);
  inset-inline:calc(var(--pad) + var(--hw)*.62) 0;inline-size:auto;
  opacity:1;filter:none;animation:none;transform:none;
  background:url("../img/hero-mid26.webp") no-repeat left bottom/auto 100%;
  -webkit-mask-image:none;mask-image:none}
@media (max-width:900px){.stage::after{display:none}}

/* v27: Mitte aus der Tempel-Szene selbst (hero-pano27 = Bergkette nach links verlaengert), Szene breiter mit weichem Einlauf links, prozedurale Mittel-Ebene aus */
.stage::after{display:none}
.stage__art{inset-inline-start:calc(var(--pad) + var(--hw)*.86);
  background:url("../img/hero-pano27.webp") no-repeat right top/max(100%,calc(var(--sh)*2.6)) auto;
  -webkit-mask-image:radial-gradient(ellipse 86% 96% at 62% 40%,#000 52%,transparent 100%),linear-gradient(to right,transparent,rgba(0,0,0,.16) 9%,rgba(0,0,0,.84) 21%,#000 30%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 86% 96% at 62% 40%,#000 52%,transparent 100%),linear-gradient(to right,transparent,rgba(0,0,0,.16) 9%,rgba(0,0,0,.84) 21%,#000 30%);
  mask-composite:intersect}
@media (max-width:900px){
  .stage__art{inset-inline-start:0;
    -webkit-mask-image:radial-gradient(ellipse 75% 70% at 55% 45%,#000 50%,transparent 100%);
    mask-image:radial-gradient(ellipse 75% 70% at 55% 45%,#000 50%,transparent 100%)}}

/* v28: linker Szenenrand als organische Nebelkante (hero-edge28.webp, Alpha-Maske auf die Box gestreckt) statt geradem Verlauf */
.stage__art{
  -webkit-mask-image:radial-gradient(ellipse 86% 96% at 62% 40%,#000 52%,transparent 100%),url("../img/hero-edge28.webp");
  -webkit-mask-size:100% 100%,100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 86% 96% at 62% 40%,#000 52%,transparent 100%),url("../img/hero-edge28.webp");
  mask-size:100% 100%,100% 100%;mask-repeat:no-repeat;mask-composite:intersect}
@media (max-width:900px){
  .stage__art{
    -webkit-mask-image:radial-gradient(ellipse 75% 70% at 55% 45%,#000 50%,transparent 100%);
    mask-image:radial-gradient(ellipse 75% 70% at 55% 45%,#000 50%,transparent 100%)}}

/* Handy (08.10.2026): Szene oben, Logo-Banner weich darueber. Die Szene laeuft
   jetzt nach unten und links ganz ins Papier aus (vorher harte Kante unten
   rechts), das Banner geht ueber die volle Breite. */
@media (max-width:900px){
  .stage{--sh:62vw}
  .stage__art{
    -webkit-mask-image:radial-gradient(ellipse 50% 58% at 58% 42%,#000 45%,transparent 100%);
    mask-image:radial-gradient(ellipse 50% 58% at 58% 42%,#000 45%,transparent 100%);
    -webkit-mask-size:100% 100%;mask-size:100% 100%}
  .stage__inner{padding-block-start:calc(var(--sh)*.62)}
  .hero::before{margin-inline:calc(-1*var(--gutter));inline-size:calc(100% + 2*var(--gutter))}
}

/* Handy v2 (08.10.2026): statt zwei Ovalen uebereinander ein durchgehender
   Kopfstreifen. Tempel-Szene randlos ueber die volle Breite, so hoch wie das
   Banner, unten weich ins Papier; Logo-Banner liegt direkt darauf. */
@media (max-width:900px){
  .stage{--sh:calc(min(100vw,640px + 2*var(--gutter))*.4684 + 22px)}
  .stage__art{inset:0 0 auto 0;block-size:var(--sh);
    background-size:max(100%,calc(var(--sh)*2.6)) auto;background-position:right top;
    -webkit-mask-image:linear-gradient(#000 62%,transparent);
    mask-image:linear-gradient(#000 62%,transparent);
    -webkit-mask-size:100% 100%;mask-size:100% 100%}
  .stage__inner{padding-block-start:6px}
}

/* Handy-Menue im Pergament-Look */
.navm__menu{background:linear-gradient(180deg,#EAD3AE,#DDBF94)}
.navm__menu a[aria-current]{color:var(--wein);border-inline-start-color:var(--wein)}

/* Handy: die Rollstaebe ragten 18px ueber den Kasten, bei 16px Seitenrand
   also 2px ueber den Bildschirm (Messingkappen abgeschnitten). */
@media (max-width:599px){.panel::before,.panel::after{inset-inline:-11px}}