/* =========================================================================
   Hutschelhexen Bad Bergzabern e.V. – Design „Hexensprung“
   Baut auf hexen.css auf (Grundschrift, Navigation, Formulare, Termine).
   Teil 1: Bewegung · Teil 2: Startseite · Teil 3: Unterseiten · Teil 4: Inhaltselemente
   Bewegung nur unter html.inszeniert (bewegung.js), sonst ruhig und vollständig.
   QUADRONET® Internetlösungen, 03.11.2026
   ========================================================================= */

/* ----- Teil 1: Bewegung ------------------------------------------------- */
html.ruhe *,html.ruhe *::before,html.ruhe *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
html{font-synthesis:none}
/* Knopf „Bewegung anhalten“ (Bühne und Fußleiste) */
.ruheknopf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--kante);border-radius:999px;
  background:rgba(10,8,7,.72);color:var(--linde);font:500 1rem/1 var(--kapit);cursor:pointer}
.ruheknopf:hover{border-color:var(--flamme);color:var(--glut2)}
.ruheknopf svg{width:16px;height:16px;flex:none}
.ruheknopf .r-an{display:none}
html.ruhe .ruheknopf .r-aus{display:none}
html.ruhe .ruheknopf .r-an{display:inline}
.anlauf__ruhe{position:absolute;z-index:4;right:var(--rand);bottom:20px}

/* ----- Teil 2: Startseite ----------------------------------------------- */
/* ====== Variante 1 · Hexensprung · dramatisch ====== */



/* --- Anlauf: klebende Bühne, 0…1 über --p --- */
.anlauf{position:relative;background:var(--russ);--p:0}   /* Startwert, bis bewegung.js misst – sonst alle Takte zugleich sichtbar */
.anlauf__buehne{position:relative;overflow:hidden;min-height:calc(100svh - var(--anker));display:grid;align-items:end}
.anlauf__schloss{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;opacity:.7}
.anlauf__schleier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,7,.75) 0%,rgba(10,8,7,.15) 34%,rgba(10,8,7,.1) 55%,rgba(10,8,7,.8) 100%)}
.anlauf__feuerbild{position:absolute;inset:0;width:100%;height:100%;z-index:1;object-fit:cover;object-position:50% 70%;opacity:.6;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 46% 62% at 50% 92%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 46% 62% at 50% 92%,#000 30%,transparent 100%)}
.anlauf canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:none}
.anlauf__inhalt{position:relative;z-index:2;padding:clamp(48px,8vw,120px) var(--rand) clamp(40px,6vw,88px);max-width:var(--breite);margin-inline:auto;width:100%}
.takt{margin:0;font:800 clamp(2.5rem,6.5vw,6rem)/1.08 var(--display);color:var(--linde);text-shadow:0 2px 24px rgba(0,0,0,.6)}
.takt + .takt{margin-top:.25em}
.takt em{font-style:normal;color:var(--flamme)}
.anlauf h1{margin-top:clamp(32px,5vw,64px);font:800 clamp(3.5rem,11vw,10rem)/1 var(--display);letter-spacing:-.01em}
.anlauf__unter{margin-top:22px;max-width:40ch;font-size:clamp(1.125rem,1.8vw,1.375rem)}
.anlauf__aktion{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.anlauf__hexe{display:none}
.anlauf__hinweis{display:none}

/* Inszeniert: Bühne klebt, Takte wechseln mit dem Scrollen */
.inszeniert .anlauf{height:420svh}
.inszeniert .anlauf__buehne{position:sticky;top:var(--anker);height:calc(100svh - var(--anker));min-height:0}
.inszeniert .anlauf__feuerbild{display:none}
.inszeniert .anlauf canvas{display:block}
/* Das Schloss tritt aus der Nacht, je höher das Feuer brennt */
.inszeniert .anlauf__schloss{opacity:calc(.3 + var(--p,0) * .6);will-change:opacity}
.inszeniert .anlauf__inhalt{position:absolute;inset:0;padding:0;max-width:none}
.inszeniert .takt,.inszeniert .anlauf__schluss{position:absolute;left:var(--rand);right:var(--rand);margin:0 auto;max-width:var(--breite)}
.inszeniert .takt{top:18%;
  --ein:clamp(0,(var(--p) - var(--a)) * 14,1);
  --aus:clamp(0,(var(--b) - var(--p)) * 14,1);
  opacity:calc(var(--ein) * var(--aus));
  translate:0 calc((1 - var(--ein)) * 30px - (1 - var(--aus)) * 30px);
}
.inszeniert .takt + .takt{margin-top:0}
.inszeniert .t1{--a:-1;--b:.22}
.inszeniert .t2{--a:.24;--b:.44}
.inszeniert .t3{--a:.46;--b:.64}
.inszeniert .anlauf__schluss{top:auto;bottom:clamp(32px,6vh,72px);
  --ein:clamp(0,(var(--p) - .8) * 8,1);opacity:var(--ein);translate:0 calc((1 - var(--ein)) * 40px)}
.inszeniert .anlauf__schluss:focus-within{opacity:1;translate:none}
.inszeniert .anlauf__schluss h1{margin-top:0}
.inszeniert .anlauf__hinweis{display:flex;position:absolute;left:50%;bottom:24px;translate:-50% 0;align-items:center;gap:10px;font:500 1rem var(--kapit);color:var(--asche);opacity:calc(1 - var(--p) * 12)}
.inszeniert .anlauf__hinweis svg{width:20px;height:20px;animation:hx-nicken 2.4s ease-in-out infinite}
@keyframes hx-nicken{50%{translate:0 5px}}
/* Die Hexe nimmt Anlauf und springt in einem Bogen über das Feuer */
.inszeniert .anlauf__hexe{
  display:block;position:absolute;z-index:3;left:0;bottom:6%;height:clamp(180px,38vh,420px);width:auto;
  --s:clamp(0,(var(--p) - .5) / .3,1);
  translate:calc(-30vw + var(--s) * 130vw) calc(-1 * sin(var(--s) * 180deg) * 34vh);
  rotate:calc(-8deg + var(--s) * 16deg);
  opacity:calc(clamp(0,(var(--p) - .48) * 30,1) * clamp(0,(.84 - var(--p)) * 20,1));
  filter:drop-shadow(0 0 30px rgba(240,138,60,.55));
}

/* --- Der nächste Sprung --- */
.sprungzahl{padding-block:clamp(80px,10vw,140px);text-align:center;background:linear-gradient(var(--russ),var(--kohle))}
.sprungzahl__zahl{font:800 clamp(7rem,24vw,18rem)/.8 var(--display);color:var(--glut2);text-shadow:0 0 18px rgba(240,138,60,.55),0 0 60px rgba(232,90,74,.35)}
.inszeniert .sprungzahl__zahl{animation:hx-flackern 5s ease-in-out infinite}
@keyframes hx-flackern{0%,100%{opacity:1}40%{opacity:.88}55%{opacity:.97}70%{opacity:.9}}
.sprungzahl__was{margin-top:18px;font:700 clamp(1.5rem,3vw,2.25rem)/1.2 var(--display)}
.sprungzahl__wann{margin-top:10px;color:var(--asche)}
.sprungzahl .naechte__zahl{display:block!important;grid-row:auto}
.sprungzahl:not(.ist-gezaehlt) .sprungzahl__zahl{display:none}

/* --- Zündschnur: Termine --- */
.schnur{position:relative;list-style:none;margin:0;padding:0 0 0 56px}




.schnur h3{margin-top:6px;font:700 clamp(1.5rem,2.6vw,2.125rem)/1.15 var(--text)}
.schnur p{margin-top:6px;color:var(--asche)}
.schnur .nr{display:inline-block;margin-left:10px;padding:2px 10px;border:1px solid var(--gelb);border-radius:999px;color:var(--gelb);font:500 .9375rem var(--kapit)}

/* --- Masken aus der Glut --- */
.glut{position:relative;overflow:hidden;background:radial-gradient(120% 70% at 50% 110%,#3a170c 0,#1a0d08 45%,var(--russ) 75%)}
.glut__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,48px);align-items:end;margin-top:56px}
.glut__reihe figure{text-align:center}
.glut__reihe img{width:100%;height:auto;max-height:440px;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(240,120,50,.35)) drop-shadow(0 0 2px rgba(255,180,92,.3))}
.glut__reihe figcaption{margin-top:18px;font:500 1.0625rem var(--kapit);letter-spacing:.04em;color:var(--asche)}
.glut__reihe figcaption b{display:block;font:700 2.5rem/1 var(--display);color:var(--flamme)}
.inszeniert .glut__reihe figure{transition:translate 1.1s cubic-bezier(.2,.7,.2,1),filter 1.4s}
.inszeniert .glut__reihe:not(.sichtbar) figure{translate:0 80px;filter:brightness(.25)}
.inszeniert .glut__reihe figure:nth-child(2){transition-delay:.15s}
.inszeniert .glut__reihe figure:nth-child(3){transition-delay:.3s}
@media (max-width:640px){.glut__reihe{grid-template-columns:1fr 1fr}.glut__reihe figure:first-child{grid-column:1 / -1;max-width:280px;margin-inline:auto}}

/* --- Bilder in der Glut --- */
.glutbilder{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.glutbilder a{position:relative;display:block;overflow:hidden;text-decoration:none}
.glutbilder img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.7) sepia(.35);transition:filter .6s}
.glutbilder a:hover img,.glutbilder a:focus-visible img{filter:none}
.glutbilder .b1{grid-column:span 7;aspect-ratio:16/10}.glutbilder .b2{grid-column:span 5;aspect-ratio:auto}
.glutbilder .b3{grid-column:span 4;aspect-ratio:4/3}.glutbilder .b4{grid-column:span 4;aspect-ratio:4/3}.glutbilder .b5{grid-column:span 4;aspect-ratio:4/3}
.glutbilder span{position:absolute;left:0;bottom:0;padding:8px 14px;background:var(--russ);font:500 1rem var(--kapit);color:var(--linde)}
@media (hover:none){.glutbilder img{filter:none}}
@media (max-width:760px){.glutbilder .b1,.glutbilder .b2{grid-column:1 / -1;aspect-ratio:16/10}.glutbilder .b3,.glutbilder .b4,.glutbilder .b5{grid-column:span 6}.glutbilder .b5{grid-column:1 / -1}}

/* ----- Teil 3: Unterseiten (und gemeinsame Glut-Bausteine) -------------- */
.v1{--russ:#0A0807;--kohle:#15100D;--rinde:#241A14;--flamme:#F08A3C;--glut2:#FFB45C}
.v1 body{background:var(--russ)}
.v1s main .link:hover{color:var(--glut2);text-decoration-color:var(--flamme)}

/* ----- Zündschnur unter der Kopfleiste = Lesefortschritt ---------------- */
.lunte{display:none}
.inszeniert .lunte{display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.lunte i{position:absolute;left:0;top:0;height:100%;width:calc(var(--lese,0) * 100%);
  background:linear-gradient(90deg,rgba(232,90,74,.15),var(--flamme));box-shadow:0 0 8px rgba(240,138,60,.6)}
.lunte i::after{content:"";position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--glut2);box-shadow:0 0 10px 3px rgba(240,138,60,.8),0 0 24px 6px rgba(232,90,74,.35);
  animation:hx-knistern .3s steps(2) infinite}
@keyframes hx-knistern{50%{scale:.65;opacity:.75}}

/* ----- Seitenkopf: Glut von unten, Funken, Foto ausgebrannt ------------- */
.glutkopf{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(80% 130% at 62% 135%,#4a1c0c 0,#1d0e08 42%,var(--russ) 76%);
  border-bottom:1px solid var(--rinde)}
.glutkopf::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 5%,var(--flamme) 60%,transparent 95%);opacity:.75}
.glutkopf__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 50%;
  opacity:.34;filter:grayscale(1) sepia(.55) brightness(.85) contrast(1.1);
  -webkit-mask-image:linear-gradient(90deg,transparent 18%,#000 72%);mask-image:linear-gradient(90deg,transparent 18%,#000 72%)}
.glutkopf canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;display:none}
.inszeniert .glutkopf canvas{display:block}
.glutkopf .wrap{position:relative;padding-block:clamp(44px,6.5vw,96px) clamp(52px,7vw,96px)}
.glutkopf h1{margin-top:18px;font:800 clamp(3.25rem,8.5vw,7.5rem)/1.04 var(--display);color:var(--linde);
  text-shadow:0 0 38px rgba(240,138,60,.32),0 2px 2px rgba(0,0,0,.6);overflow-wrap:anywhere;hyphens:auto}
.glutkopf .t-lead{margin-top:20px;max-width:44ch;color:var(--linde)}
.glutkopf .krumen{color:var(--asche)}
.glutkopf .krumen a{color:var(--flamme);text-decoration-color:rgba(240,138,60,.45)}
.v1s .krumen li + li::before{content:"";display:inline-block;width:5px;height:5px;margin:0 10px 0 2px;vertical-align:.2em;
  border-radius:50%;background:var(--flamme);box-shadow:0 0 6px var(--flamme)}
@media (max-width:760px){
  .glutkopf__bild{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 80%);mask-image:linear-gradient(180deg,transparent 0,#000 80%);opacity:.26}
}

/* ----- Überschriften im Inhalt: eingebrannte Kerbe ---------------------- */
.v1s .fliess h2,.v1s .t-h2,.schnur h2{color:var(--linde)}
.v1s .fliess h2::after,.v1s .kerbe::after{content:"";display:block;width:72px;height:2px;margin-top:14px;
  background:linear-gradient(90deg,var(--flamme),transparent);box-shadow:0 0 10px rgba(240,138,60,.45)}
.v1s .fliess > *{max-width:68ch}

/* ----- Zündschnur (wie Startseite), hier auch für die Chronik ----------- */
.schnur,.schnur[role="list"]{position:relative;list-style:none;margin:0;padding:0 0 0 56px}
.schnur::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:2px;background:var(--rinde)}
.schnur__brand{position:absolute;left:20px;top:0;width:2px;height:calc(var(--l,1) * 100%);background:linear-gradient(var(--glut),var(--flamme));box-shadow:0 0 12px var(--flamme)}
html:not(.inszeniert) .schnur__brand{height:100%}
.schnur li{position:relative;padding:22px 0 34px;border-bottom:1px solid var(--rinde)}
.schnur li:last-child{border-bottom:0}
.schnur li::before{content:"";position:absolute;left:-44px;top:32px;width:14px;height:14px;border-radius:50%;background:var(--rinde);border:2px solid var(--kante);transition:background .4s,box-shadow .4s,border-color .4s}
.schnur li.sichtbar::before,html:not(.inszeniert) .schnur li::before{background:var(--flamme);border-color:var(--glut2);box-shadow:0 0 14px 2px rgba(240,138,60,.7)}
.schnur__datum{font:500 1rem var(--kapit);letter-spacing:.06em;color:var(--flamme)}
.schnur p{margin-top:8px}

/* Chronik: Jahreszahlen als Glut */
.jahre-schnur li{padding-block:26px 40px}
.jahre-schnur .schnur__jahr{display:block;font:800 clamp(2.75rem,5vw,4.25rem)/1 var(--display);color:#4A3B30;transition:color .8s,text-shadow .8s}
.jahre-schnur li.sichtbar .schnur__jahr,html:not(.inszeniert) .jahre-schnur .schnur__jahr{color:var(--flamme);text-shadow:0 0 22px rgba(240,138,60,.45)}
.jahre-schnur h2{margin-top:10px;font:700 clamp(1.75rem,3vw,2.375rem)/1.12 var(--display)}
.jahre-schnur p{max-width:62ch}
.jahre-schnur li.ist-feuer .schnur__jahr{color:var(--glut2)}
.jahre-schnur li.ist-feuer::before{width:20px;height:20px;left:-47px;top:36px}
.inszeniert .jahre-schnur li.ist-feuer.sichtbar .schnur__jahr{animation:hx-flackern 5s ease-in-out infinite}
@keyframes hx-flackern{0%,100%{opacity:1}40%{opacity:.86}55%{opacity:.97}70%{opacity:.9}}

/* Masken in der Seitenspalte: freigestellt, von unten angeglüht */
.masken-spalte{display:flex;flex-direction:column;gap:40px;align-items:center}
@media (min-width:1000px){.masken-spalte{position:sticky;top:calc(var(--anker) + 40px)}}
.masken-spalte figure{text-align:center}
.masken-spalte img{width:min(100%,300px);height:auto;filter:drop-shadow(0 26px 30px rgba(240,120,50,.35)) drop-shadow(0 0 2px rgba(255,180,92,.3))}
.masken-spalte figcaption{margin-top:14px;font:500 1.0625rem var(--kapit);letter-spacing:.04em;color:var(--asche)}

/* Narrenruf klein: Wörter fangen Feuer */
.ruf{padding-block:clamp(72px,10vw,140px);text-align:center;background:radial-gradient(60% 80% at 50% 120%,#2a1209 0,transparent 70%)}
.ruf p{font:800 clamp(2.25rem,7vw,6rem)/1.1 var(--display)}
.ruf span{display:inline-block;color:#4A3B30;
  color:color-mix(in oklch,#4A3B30,var(--glut2) calc(clamp(0,var(--l,1) * 10 - var(--i),1) * 100%));
  text-shadow:0 0 calc(clamp(0,var(--l,1) * 10 - var(--i),1) * 28px) rgba(240,138,60,.6)}
html:not(.inszeniert) .ruf span{color:var(--glut2)}
.ruf small{display:block;margin-top:24px;font:500 1.0625rem var(--kapit);letter-spacing:.06em;color:var(--asche)}

/* ----- Vorstandschaft: Ämter als Glutleisten ---------------------------- */
.v1s .aemter div{position:relative;padding:22px 0 22px 22px;border-top:0;border-bottom:1px solid var(--rinde)}
.v1s .aemter div::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;background:var(--rinde);transition:background .3s,box-shadow .3s}
.v1s .aemter div:hover::before{background:var(--flamme);box-shadow:0 0 10px var(--flamme)}
.v1s .aemter dt{color:var(--flamme)}
.v1s .aemter dd{font:700 1.625rem/1.25 var(--text)}
.v1s .aemter div:nth-child(-n+4) dd{font:700 clamp(1.75rem,2.6vw,2.25rem)/1.15 var(--display)}

/* ----- Termine: Zündschnur durch die Stempel ---------------------------- */
.v1s .termine{position:relative}
.v1s .termine::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:2px;translate:-1px 0;
  background:linear-gradient(var(--glut),var(--flamme));box-shadow:0 0 10px rgba(240,138,60,.5);opacity:.85}
@media (max-width:480px){.v1s .termine::before{left:34px}}
.v1s .termin{border-bottom-color:var(--rinde)}
.v1s .stempel{position:relative;z-index:1;background:var(--russ);border-color:var(--kante);transition:border-color .5s,box-shadow .5s}
.v1s .stempel__tag{color:var(--linde);transition:color .5s}
.v1s .termin.sichtbar .stempel,html.v1s:not(.inszeniert) .stempel{border-color:var(--flamme);
  box-shadow:inset 0 0 0 5px var(--russ),inset 0 0 0 6px rgba(240,138,60,.55),0 0 22px rgba(240,138,60,.3)}
.v1s .termin.sichtbar .stempel__tag,html.v1s:not(.inszeniert) .stempel__tag{color:var(--glut2)}
.v1s .monat{color:var(--linde)}
.v1s .chip:hover{border-color:var(--flamme)}
.v1s .chip[aria-pressed="true"]{background:var(--flamme);border-color:var(--flamme);color:var(--russ)}
.v1s .hinweis{border-color:var(--rinde);border-left:2px solid var(--flamme)}
/* Hexensprung-Karte: Kopftuchspitze bleibt, darin brennt es */
.v1s .hexensprung{background:radial-gradient(110% 90% at 50% 115%,#8a300f 0,#46180b 38%,var(--kohle) 74%);color:var(--linde);margin-block:40px}
.v1s .hexensprung .t-klein{color:var(--flamme)!important}
.v1s .hexensprung h3{color:var(--glut2);text-shadow:0 0 18px rgba(240,138,60,.5),0 0 60px rgba(232,90,74,.3)}
.v1s .hexensprung .gross{color:var(--glut2)}
.v1s.inszeniert .hexensprung .gross{animation:hx-flackern 5s ease-in-out infinite}

/* ----- Gästebuch, Kontakt: Formulare in der Glut ------------------------ */
.v1s .kasten{background:linear-gradient(180deg,#1a110c,var(--kohle) 40%);border-color:var(--rinde);
  box-shadow:inset 0 2px 0 var(--flamme),0 -14px 40px -28px rgba(240,138,60,.8)}
.v1s .eingabe{border-color:#5a4a3c}
.v1s .eingabe:hover{border-color:var(--kante)}
.v1s .eingabe:focus-visible{border-color:var(--flamme);box-shadow:0 0 0 3px rgba(240,138,60,.22)}
.v1s .eintrag{border-top-color:var(--rinde)}
.v1s .eintrag__text::first-letter{color:var(--flamme);text-shadow:0 0 18px rgba(240,138,60,.45)}
.v1s .seiten a[aria-current="page"]{background:var(--flamme);border-color:var(--flamme);color:var(--russ)}

/* ----- Bilder: ausgebrannt, beim Zeigen in Farbe ------------------------ */
.v1s .galerie img{filter:grayscale(1) brightness(.72) sepia(.35);transition:filter .6s}
.v1s .galerie figure:hover img,.v1s .galerie figure:focus-within img{filter:none}
@media (hover:none){.v1s .galerie img{filter:none}}
.v1s .galerie figcaption{font:500 1rem/1.35 var(--kapit);letter-spacing:.03em}

/* ----- 404: vom Besen gefallen ------------------------------------------ */
.absturz{justify-self:center;width:min(70%,260px);height:auto;rotate:148deg;
  filter:drop-shadow(0 0 30px rgba(240,138,60,.5))}
.inszeniert .absturz{animation:hx-trudeln 6s ease-in-out infinite}
@keyframes hx-trudeln{0%,100%{rotate:148deg;translate:0 0}50%{rotate:160deg;translate:0 14px}}

@media (forced-colors:active){.lunte,.glutkopf canvas{display:none!important}}

/* ----- Teil 4: Inhaltselemente im CMS ----------------------------------- */
/* Chronik-Jahre: jedes Jahr ist ein eigenes Element, die Schnur läuft durch */
.schnur-halter{position:relative}
.schnur__glied{position:relative;padding:26px 0 40px;border-bottom:1px solid var(--rinde)}
.schnur__glied::before{content:"";position:absolute;left:-44px;top:36px;width:14px;height:14px;border-radius:50%;background:var(--rinde);border:2px solid var(--kante);transition:background .4s,box-shadow .4s,border-color .4s}
.schnur__glied.sichtbar::before,html:not(.inszeniert) .schnur__glied::before{background:var(--flamme);border-color:var(--glut2);box-shadow:0 0 14px 2px rgba(240,138,60,.7)}
.jahre-schnur .schnur__glied.sichtbar .schnur__jahr,html:not(.inszeniert) .jahre-schnur .schnur__glied .schnur__jahr{color:var(--flamme);text-shadow:0 0 22px rgba(240,138,60,.45)}
.jahre-schnur .schnur__glied.ist-feuer .schnur__jahr{color:var(--glut2)}
.jahre-schnur .schnur__glied.ist-feuer::before{width:20px;height:20px;left:-47px;top:40px}
.inszeniert .jahre-schnur .schnur__glied.ist-feuer.sichtbar .schnur__jahr{animation:hx-flackern 5s ease-in-out infinite}
.jahre-schnur .schnur__glied > * + *{margin-top:10px}
.jahre-schnur .schnur__glied p{max-width:62ch}
.jahr-glied:last-of-type .schnur__glied{border-bottom:0}

/* Startseite: Elemente bringen ihre Breite selbst mit; Standardelemente bekommen sie hier */
.seite-start > .frame{max-width:var(--breite);margin-inline:auto;padding:clamp(56px,7vw,104px) var(--rand)}
.seite-start .ruf{padding-block:clamp(96px,12vw,180px)}
.seite-start .ruf p{font-size:clamp(2.75rem,9vw,8.5rem)}
.ce-schnur .schnur-halter{margin-top:8px}

/* Bilder aus dem Feuer: auch ohne Link */
.glutbilder > div{position:relative;display:block;overflow:hidden}
.glutbilder > div:hover img{filter:none}
.glutbilder .b2 img{aspect-ratio:auto}
.glutbilder img{display:block}

/* Masken */
.glut__text{max-width:56ch}
.glut__text > * + *{margin-top:1em}

/* Einladung */
.feuerplatz__text{margin-top:20px;max-width:52ch}
.feuerplatz__text > * + *{margin-top:1em}
.feuerplatz__aktion{margin-top:28px}

/* Standard-Inhaltselemente (fluid_styled_content) im Inhaltsbereich */
.inhalt{min-width:0}
.inhalt > * + *{margin-top:clamp(36px,4.5vw,64px)}
.inhalt > .jahr-glied + .jahr-glied{margin-top:0}
.inhalt .frame > header{margin-bottom:18px}
.inhalt .frame > header h2,.seite-start .frame > header h2{font:700 clamp(2rem,3.6vw,2.75rem)/1.12 var(--display);color:var(--linde)}
.inhalt .frame > header h2::after,.seite-start .frame > header h2::after{content:"";display:block;width:72px;height:2px;margin-top:14px;
  background:linear-gradient(90deg,var(--flamme),transparent);box-shadow:0 0 10px rgba(240,138,60,.45)}
.inhalt .frame > header h3{font:700 clamp(1.5rem,2.6vw,2rem)/1.15 var(--display)}
.inhalt .frame > header h6,.inhalt .frame > header p{font:500 1.0625rem var(--kapit);letter-spacing:.04em;color:var(--flamme)}
.ce-bodytext{max-width:68ch}
.inhalt--breit .ce-bodytext{max-width:80ch}
.ce-bodytext > * + *{margin-top:1em}
.ce-bodytext h2,.ce-bodytext h3{margin-top:1.4em;font:700 clamp(1.5rem,2.6vw,2rem)/1.15 var(--display)}
.ce-bodytext ul,.ce-bodytext ol{padding-left:1.3em}
.ce-bodytext li + li{margin-top:.35em}
.ce-bodytext ul li::marker{color:var(--flamme)}
.ce-bodytext a{color:var(--linde);text-decoration:underline;text-decoration-color:var(--flamme);text-underline-offset:.25em}
.ce-bodytext a:hover{color:var(--glut2)}
.ce-bodytext blockquote{padding-left:24px;border-left:2px solid var(--flamme);font-style:italic;font-size:1.25em}
.inhalt .ce-gallery figcaption,.inhalt .image-caption{margin-top:8px;font:500 1rem/1.35 var(--kapit);letter-spacing:.03em;color:var(--asche)}
.inhalt .ce-gallery img{height:auto;max-width:100%}
.inhalt--rand .ce-gallery img{filter:drop-shadow(0 18px 24px rgba(240,120,50,.25))}
.inhalt table.contenttable,.inhalt .ce-table{width:100%;border-collapse:collapse}
.inhalt .contenttable th,.inhalt .contenttable td{padding:12px 14px;border-bottom:1px solid var(--rinde);text-align:left;vertical-align:top}
.inhalt .contenttable th{font:500 1rem var(--kapit);letter-spacing:.04em;color:var(--flamme)}
.inhalt .ce-uploads{list-style:none;margin:0;padding:0}
.inhalt .ce-uploads li{padding:14px 0;border-bottom:1px solid var(--rinde)}
.inhalt .ce-uploads a{color:var(--linde)}
.inhalt .ce-uploads .ce-uploads-description{color:var(--asche)}

/* Inhaltselemente mit eigener Breite innerhalb des Inhaltsbereichs der Unterseiten */
.inhalt > .ce-schnur,.inhalt > .ce-glutbilder{max-width:none;padding:0}
.inhalt .kopfzeile .t-h2{font-size:clamp(2rem,3.6vw,2.75rem)}
.inhalt .kopfzeile{margin-bottom:8px}

/* Bildergalerien (fluid_styled_content) als Raster statt fester Breiten */
.inhalt .ce-gallery{float:none!important;width:auto!important;max-width:100%;margin:0}
.inhalt .ce-gallery .ce-outer,.inhalt .ce-gallery .ce-inner{float:none;position:static;right:auto}
.inhalt .ce-gallery .ce-inner{display:grid;grid-template-columns:repeat(var(--spalten,1),minmax(0,1fr));gap:12px}
.inhalt .ce-gallery[data-ce-columns="2"]{--spalten:2}
.inhalt .ce-gallery[data-ce-columns="3"]{--spalten:3}
.inhalt .ce-gallery[data-ce-columns="4"]{--spalten:4}
@media (max-width:640px){.inhalt .ce-gallery[data-ce-columns="3"],.inhalt .ce-gallery[data-ce-columns="4"]{--spalten:2}}
.inhalt .ce-gallery .ce-row{display:contents}
.inhalt .ce-gallery .ce-column{float:none;width:auto!important;margin:0!important;padding:0!important}
.inhalt .ce-gallery figure{display:block;margin:0}
.inhalt .ce-gallery img{width:100%;height:auto}
.inhalt .ce-textpic .ce-gallery{margin-bottom:20px}
/* Galerien der Bilderseite: ausgebrannt, beim Zeigen in Farbe (wie „Bilder aus dem Feuer“) */
.frame-type-image .ce-gallery img{aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) brightness(.72) sepia(.35);transition:filter .6s}
.frame-type-image .ce-gallery figure:hover img{filter:none}
@media (hover:none){.frame-type-image .ce-gallery img{filter:none}}

/* Galerie (qn_masonry_gallery) und GLightbox im Hexen-Stil.
   „.v1“ vorne, weil die Erweiterungs-CSS per f:asset.css nach dieser Datei kommt. */
.v1 .qn-masonry-gallery{--qn-radius:0px}
.v1 .qn-gallery-figure{margin:0;background:var(--kohle);border-radius:0!important}
.v1 .qn-gallery-figure img{filter:grayscale(1) brightness(.72) sepia(.35);transition:filter .6s,transform .6s}
.v1 .qn-gallery-link:hover .qn-gallery-figure img,.v1 .qn-gallery-link:focus-visible .qn-gallery-figure img{filter:none;transform:scale(1.03)}
.v1 .qn-gallery-link:focus-visible{outline:2px solid var(--flamme);outline-offset:2px}
@media (hover:none){.v1 .qn-gallery-figure img{filter:none}}
.v1 .qn-shadow{box-shadow:none}
.v1 .qn-overlay{background:var(--russ);color:var(--linde);font:500 1rem/1.3 var(--kapit)}
.v1 .qn-load-more-btn{min-height:48px;padding:0 24px;border:0;border-radius:0;background:transparent;color:var(--linde);
  box-shadow:inset 0 0 0 2px var(--linde);font:500 1.0625rem var(--kapit);cursor:pointer}
.v1 .qn-load-more-btn:hover{box-shadow:inset 0 0 0 2px var(--flamme);color:var(--glut2)}
.v1 .qn-gallery-controls{margin-top:28px;text-align:center}
.inhalt .frame-type-qnmasonrygallery_gallery + .frame-type-qnmasonrygallery_gallery{margin-top:clamp(48px,6vw,88px)}
/* GLightbox */
.v1 .goverlay{background:rgba(10,8,7,.96)!important}
.v1 .glightbox-clean .gslide-media{box-shadow:0 0 0 1px var(--rinde),0 30px 80px -20px rgba(240,120,50,.35)}
.v1 .glightbox-clean .gslide-description{background:var(--kohle)}
.v1 .glightbox-clean .gslide-title{margin:0;font:500 1.0625rem/1.35 var(--kapit);letter-spacing:.03em;color:var(--linde)}
.v1 .glightbox-clean .gslide-desc{font:400 1rem/1.5 var(--text);color:var(--asche)}
.v1 .glightbox-clean .gnext,.v1 .glightbox-clean .gprev,.v1 .glightbox-clean .gclose,.v1 .qn-glightbox-slideshow-btn{
  background:rgba(10,8,7,.8)!important;border:1px solid var(--kante);border-radius:50%;color:var(--linde)}
.v1 .glightbox-clean .gnext:hover,.v1 .glightbox-clean .gprev:hover,.v1 .glightbox-clean .gclose:hover,.v1 .qn-glightbox-slideshow-btn:hover{
  border-color:var(--flamme);box-shadow:0 0 16px rgba(240,138,60,.4)}
.v1 .glightbox-clean .gnext path,.v1 .glightbox-clean .gprev path,.v1 .glightbox-clean .gclose path{fill:currentColor}
.v1 .glightbox-clean .gbtn:focus-visible{outline:2px solid var(--flamme);outline-offset:2px}
.inhalt a.lightbox{display:block}

/* ===== Teil 5: Vereinsleben (Termine, Gästebuch, Formulare) ===== */
.ce-termine > .hinweis{margin:0}
.termine-leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px;margin-top:36px}
.termine-filter{display:flex;flex-wrap:wrap;gap:10px}
.termine-filter[hidden]{display:none}
.termine-abo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0}
.termine-abo__url{font-size:.9375rem;color:var(--asche);overflow-wrap:anywhere}
.termine-monat{padding-top:clamp(40px,5vw,64px)}
.termine-monat[hidden]{display:none}
.ce-termine > .termine-monat:first-of-type{padding-top:clamp(28px,3.5vw,44px)}
.termine-monat > .monat{margin-bottom:8px}
.termine-monat > .hexensprung{margin:32px 0}
.hexensprung__ort{margin-top:14px;font-size:1.375rem}
.hexensprung__hinweis{margin-top:6px}
.hexensprung__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.termin time,.hexensprung time{display:contents}
.gaestebuch__anzahl{font:700 1.25rem var(--text)}
.gaestebuch__liste{list-style:none;margin:16px 0 0;padding:0}
.gaestebuch__schreiben{margin-top:32px}
.spalten:has(.gaestebuch-formular) .gaestebuch__schreiben{display:none}
.gaestebuch-formular .t-h2{font-size:clamp(2.25rem,3.4vw,2.75rem)}
.gaestebuch-formular__intro{margin-top:14px;font-size:1.0625rem}
.gaestebuch-formular__zurueck{margin-top:20px}
.gaestebuch-formular .erfolg:focus{outline:2px solid var(--gelb);outline-offset:3px}
.inhalt form.formular{max-width:720px}
.inhalt--rand form.formular,.kasten form.formular{max-width:none}
.formular .ist-fehler.eingabe,.formular .eingabe.ist-fehler{border:2px solid var(--glut)}
.formular span.fehler{display:block}
.formular__navigation{display:flex;flex-wrap:wrap;gap:12px}
.formular .wahl label{display:inline}
.formular button[disabled]{opacity:.6;cursor:progress}
.inhalt .erfolg{max-width:720px}

/* ----- Teil 5: Besen „Nach oben“ ----------------------------------------
   Pfeil mit Reisig als Befiederung, Kerbschnitt-Ecken wie die Bilder.
   Erscheint nach gut einer Bildschirmhöhe und füllt sich von unten mit Glut
   (--besen = Lesefortschritt 0…1, setzt bewegung.js). Klick: der Besen hebt
   ab (nur html.inszeniert), die Seite rollt hoch, Fokus an den Seitenanfang.
   Die Fase liegt auf ::before/::after – clip-path am Link selbst würde den
   Fokusring abschneiden. */
.oben{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden}
.oben:focus{outline:none;box-shadow:none}
.besen{--fase:12px;position:fixed;z-index:40;
  right:max(var(--rand),env(safe-area-inset-right));
  bottom:calc(max(20px,calc(env(safe-area-inset-bottom) + 12px)) + var(--qn-im-unten,0px));   /* über einer Meldungs-Leiste */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:68px;min-height:84px;padding:10px 6px 8px;
  color:var(--linde);font:500 .8125rem/1.1 var(--kapit);letter-spacing:.04em;text-align:center;text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(12px);translate:0 calc(var(--hub,0px) * -1);
  transition:opacity .3s,transform .3s,translate .25s,visibility 0s linear .3s}
.besen.da{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s,translate .25s,visibility 0s}
.besen::before,.besen::after{content:"";position:absolute;z-index:-1;
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% var(--fase),100% calc(100% - var(--fase)),calc(100% - var(--fase)) 100%,var(--fase) 100%,0 calc(100% - var(--fase)),0 var(--fase))}
.besen::before{inset:0;background:var(--kante);transition:background .2s}
.besen::after{--fase:11.6px;inset:1px;
  /* Glutstand mit glimmender Kante – wie die Lunte unter der Kopfleiste */
  background:linear-gradient(to top,rgba(232,90,74,.34),rgba(240,138,60,.14) calc(var(--besen,0) * 100% - 2px),
    rgba(255,180,92,.6) calc(var(--besen,0) * 100% - 1px),transparent calc(var(--besen,0) * 100%)),rgba(10,8,7,.92)}
.besen:hover{color:var(--glut2)}
.besen:hover::before,.besen:focus-visible::before{background:var(--flamme)}
.besen svg{width:30px;height:41px;overflow:visible}
.besen__spitze{stroke:var(--gelb)}
.besen__stiel{stroke:var(--asche)}
.besen__band{fill:var(--tuch)}
.besen__reisig{stroke:var(--gelb);opacity:.85;transition:filter .2s}
.besen__reisig .aussen{stroke:var(--asche)}
.besen__funke{fill:var(--glut2);opacity:0}
.besen__flug{position:relative;display:block;transition:transform .25s}
.inszeniert .besen:hover .besen__flug{transform:translateY(-3px)}
.inszeniert .besen:hover .besen__reisig{filter:drop-shadow(0 0 3px rgba(240,138,60,.9))}
.inszeniert .besen:hover .besen__funke{animation:besen-funke .9s ease-out infinite}
.inszeniert .besen:hover .besen__funke + .besen__funke{animation-delay:.45s}
@keyframes besen-funke{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(6px)}}
/* Abflug: der Besen steigt mit Glutschweif auf, der Kasten blendet verzögert aus */
.besen.abflug{transition:opacity .3s .5s,transform .3s .5s,translate .25s,visibility 0s linear .8s}
.besen.abflug .besen__flug{animation:besen-abflug .8s cubic-bezier(.5,0,.75,0) forwards}
.besen__flug::after{content:"";position:absolute;left:50%;top:88%;width:3px;height:0;margin-left:-1.5px;border-radius:2px;opacity:0;
  background:linear-gradient(var(--glut2),rgba(232,90,74,0));box-shadow:0 0 8px rgba(240,138,60,.7)}
.besen.abflug .besen__flug::after{animation:besen-schweif .8s ease-in forwards}
@keyframes besen-abflug{0%{transform:none}18%{transform:translateY(5px) rotate(-3deg)}100%{transform:translateY(-80vh) rotate(4deg);opacity:0}}
@keyframes besen-schweif{0%{height:0;opacity:0}20%{opacity:1}100%{height:90px;opacity:.9}}
.nav-offen .besen{opacity:0;visibility:hidden}
@media (max-width:480px){
  .besen{width:52px;min-height:62px;padding:8px 4px}
  .besen .besen__text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (forced-colors:active){
  .besen{border:1px solid ButtonText;forced-color-adjust:none;background:Canvas;color:ButtonText}
  .besen::before,.besen::after{display:none}
  .besen svg *{stroke:ButtonText}
  .besen .besen__band,.besen .besen__funke{fill:ButtonText}
}
@media print{.besen{display:none!important}}

/* ----- Teil 6: Wichtige Meldung (qn_important_message) im Hexenstil -------
   Die Extension ist themeneutral; hier bekommt sie Farben und Schriften.
   Kontraste geprüft: Linde/Ruß 14,7 · Glut/Ruß 11,4 · Asche/Ruß 8,2 ·
   Tuchschrift/Tuch 5,6 · Tuchdunkel/Linde 6,3 · Leise/Linde 6,2. */
:root{
  --qn-im-farbe-dunkel:var(--russ); --qn-im-farbe-dunkel2:var(--rinde);
  --qn-im-farbe-dunkel-schrift:var(--linde); --qn-im-farbe-dunkel-leise:var(--asche);
  --qn-im-farbe-dunkel-akzent:var(--glut2,#FFB45C); --qn-im-farbe-dunkel-fokus:var(--gelb);
  --qn-im-farbe-hell:var(--linde); --qn-im-farbe-hell-schrift:var(--russ);
  --qn-im-farbe-hell-leise:#5C4A3A; --qn-im-farbe-hell-akzent:var(--tuch-dunkel); --qn-im-farbe-hell-fokus:var(--tuch);
  --qn-im-farbe-akzent:var(--tuch); --qn-im-farbe-auf-akzent:var(--tuch-schrift);
  --qn-im-farbe-marke:var(--flamme,#F08A3C);
  --qn-im-farbe-warnung:var(--gelb); --qn-im-farbe-warnung-text:var(--tuch);
  --qn-schriftfamilie:var(--text); --qn-schriftfamilie-mono:var(--kapit); --qn-schriftfamilie-ueberschrift:var(--display);
}
.kopf{top:var(--qn-im-oben,0px)}   /* eine Laufschrift oben schiebt die Kopfleiste nach unten */
.qn-im__titel{font-family:var(--display);font-weight:400;line-height:1.1}
.qn-im__kicker{text-transform:none;letter-spacing:.06em}
.qn-im-knopf{min-height:48px;padding:0 24px;font:700 1.0625rem/1 var(--kapit);letter-spacing:.04em;border-radius:2px}
@supports (corner-shape:bevel){.qn-im-knopf{border-radius:10px;corner-shape:bevel}}