/*
Theme Name: Stellohween
Description: Schlankes Theme für die Halloweenparty "Stellohween" im Garten: dunkle Bildergalerie mit eigener Lightbox, Info-Seite mit Poster und Countdown, Glut, Nebel und Fledermäuse.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stellohween
*/

/* Schriften (lokal eingebunden, keine Verbindung zu Google) */
@font-face{font-family:"Rubik Wet Paint";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/rubik-wet-paint-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/alegreya-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/alegreya-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/alegreya-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alegreya";font-style:italic;font-weight:700;font-display:swap;src:url(assets/fonts/alegreya-latin-700-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik Wet Paint";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/rubik-wet-paint-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alegreya";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/alegreya-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alegreya";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/alegreya-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alegreya";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/alegreya-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alegreya";font-style:italic;font-weight:700;font-display:swap;src:url(assets/fonts/alegreya-latin-ext-700-italic.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Grundlagen ---------- */
:root{
  --nacht:#0a0f1c;
  --nebel:#17233a;
  --mond:#b9c7dc;
  --kuerbis:#ff7a1a;
  --glut:#ffb04d;
  --gift:#9a55d6;
  --gift-dunkel:#3b1a5e;
  --knochen:#f6e7d0;
  --panel:rgba(9,13,24,.85);
  --schrift-titel:"Rubik Wet Paint",Impact,"Arial Black",sans-serif;
  --schrift-text:"Alegreya",Georgia,"Times New Roman",serif;
  --breite:1120px;
  --rand:clamp(1rem,4vw,2rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  background:var(--nacht);color:var(--knochen);
  font:400 1.2rem/1.6 var(--schrift-text);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--glut)}
a:hover{color:var(--kuerbis)}
:focus-visible{outline:3px solid var(--glut);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed!important;top:.5rem;left:.5rem;width:auto;height:auto;margin:0;padding:.6rem 1rem;clip:auto;background:var(--kuerbis);color:#1a0d00;z-index:200;text-decoration:none;font-weight:700}

/* ---------- Bühne: Hintergrund, Nebel, Glut ---------- */
.szene{
  position:absolute;top:0;left:0;right:0;z-index:-1;
  width:100%;aspect-ratio:1054/1492;
  background:var(--nacht) center top/cover no-repeat;
  will-change:transform;
}
.szene::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 46% at 50% 8%,rgba(10,15,28,.6) 0%,rgba(10,15,28,0) 72%),
    linear-gradient(to bottom,rgba(10,15,28,.08) 0%,rgba(10,15,28,.16) 42%,rgba(10,15,28,.55) 78%,var(--nacht) 100%);
}
.szene__saum{
  position:absolute;left:0;right:0;bottom:0;height:12rem;
  transform:translateY(100%);
  background:linear-gradient(to bottom,var(--nacht) 0%,rgba(10,15,28,0) 100%);
  pointer-events:none;
}
.nebel{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.nebel::before,.nebel::after{
  content:"";position:absolute;left:-30%;width:160%;height:45%;
  background:
    radial-gradient(ellipse at 30% 50%,rgba(150,175,215,.15),transparent 60%),
    radial-gradient(ellipse at 75% 60%,rgba(150,175,215,.10),transparent 55%);
  animation:nebel 70s linear infinite alternate;
}
.nebel::before{bottom:0}
.nebel::after{bottom:18%;opacity:.7;animation-duration:95s;animation-direction:alternate-reverse}
@keyframes nebel{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
#glut{position:fixed;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}

.fledermaus{
  position:fixed;top:0;left:0;z-index:6;pointer-events:none;will-change:transform;
  filter:drop-shadow(0 0 6px rgba(255,122,26,.45));
}
.fledermaus svg{display:block;width:100%;height:auto;overflow:visible}
.fledermaus .fl{fill:#03050a;transform-box:fill-box;transform-origin:50% 30%;animation:flattern .3s ease-in-out infinite alternate}
@keyframes flattern{from{transform:scaleY(1)}to{transform:scaleY(.42)}}

/* ---------- Seitenrahmen ---------- */
.seite{position:relative;z-index:3;min-height:100vh;display:flex;flex-direction:column}
.kopf{
  position:sticky;top:0;z-index:30;
  padding:.75rem var(--rand);
  background:linear-gradient(rgba(6,9,17,.88),rgba(6,9,17,0));
}
.admin-bar .kopf{top:32px}
@media (max-width:782px){.admin-bar .kopf{top:46px}}
.kopf__innen{max-width:var(--breite);margin:0 auto;display:flex;align-items:center;gap:1.5rem}
.kopf__marke{display:block;line-height:0}
.kopf__marke img{height:3.75rem;width:auto}
.ist-info .kopf__marke{
  opacity:0;visibility:hidden;transform:translateY(-.5rem);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;
}
.ist-info .kopf__marke.ist-sichtbar{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .35s ease,transform .35s ease;
}
@media (prefers-reduced-motion:reduce){
  .ist-info .kopf__marke{transition:opacity .01s linear}
  .ist-info .kopf__marke.ist-sichtbar{transition:opacity .01s linear}
}
.menue{margin-left:auto}
.menue ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;margin:0;padding:0}
.menue a{
  display:inline-block;padding:.35rem .1rem;
  color:var(--knochen);text-decoration:none;font-weight:700;font-size:1.3rem;
  border-bottom:3px solid transparent;
}
.menue a:hover,.menue .current-menu-item>a,.menue .current_page_item>a{color:var(--glut);border-bottom-color:var(--kuerbis)}
.menue-schalter{
  display:none;margin-left:auto;padding:.4rem 1rem;
  font:700 1.1rem var(--schrift-text);color:var(--knochen);
  background:rgba(9,13,24,.85);border:2px solid var(--kuerbis);border-radius:999px;cursor:pointer;
}
@media (max-width:720px){
  .kopf__innen{flex-wrap:wrap}
  .menue-schalter{display:block}
  .menue{display:none;width:100%;margin:0}
  .menue.is-offen{display:block}
  .menue ul{flex-direction:column;gap:.25rem;padding:.5rem 0}
  .ist-info .menue-schalter{margin-left:auto}
}

.haupt{width:100%;max-width:var(--breite);margin:0 auto;padding:1rem var(--rand) 4rem;flex:1}

/* Panel mit ausgerissenem Rand oben und unten */
.panel{
  position:relative;
  padding:clamp(2rem,4.5vw,3.25rem) clamp(1.25rem,4vw,3rem);
  background:var(--panel);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  clip-path:polygon(
    0 12px,6% 0,13% 14px,21% 3px,30% 15px,39% 2px,48% 13px,57% 0,66% 16px,75% 4px,84% 14px,92% 1px,100% 11px,
    100% calc(100% - 11px),93% 100%,85% calc(100% - 14px),76% calc(100% - 2px),67% calc(100% - 15px),58% 100%,49% calc(100% - 13px),40% calc(100% - 2px),31% calc(100% - 15px),22% 100%,14% calc(100% - 14px),6% calc(100% - 1px),0 calc(100% - 12px)
  );
}
.panel+.panel{margin-top:2rem}

/* ---------- Typografie ---------- */
h1,h2{
  margin:0 0 1rem;
  font-family:var(--schrift-titel);font-weight:400;line-height:1.1;letter-spacing:.01em;
  color:var(--kuerbis);
  text-shadow:0 2px 0 #000,3px 5px 0 var(--gift-dunkel),0 0 26px rgba(255,122,26,.3);
}
.seitentitel{font-size:clamp(2.6rem,8vw,4.75rem);margin-bottom:1.5rem}
h2{font-size:clamp(2rem,5vw,3rem);margin-top:2.5rem}
h3,h4{font-family:var(--schrift-text);font-weight:700;color:var(--glut);line-height:1.2;margin:2rem 0 .6rem}
h3{font-size:1.6rem}
h4{font-size:1.3rem}
.inhalt>*:first-child{margin-top:0}
.inhalt p,.inhalt ul,.inhalt ol,.inhalt blockquote{max-width:64ch}
.inhalt li{margin:.25rem 0}
.inhalt hr,hr.wp-block-separator{border:0;height:6px;margin:2.5rem 0;background:linear-gradient(90deg,var(--gift),var(--gift-dunkel) 60%,transparent);opacity:.9}
.inhalt blockquote{margin-left:0;padding:.2rem 0 .2rem 1.25rem;border-left:4px solid var(--kuerbis);font-style:italic;color:var(--knochen)}
.inhalt table{border-collapse:collapse;width:100%}
.inhalt th,.inhalt td{padding:.5rem .75rem;border-bottom:1px solid rgba(185,199,220,.25);text-align:left}

/* Rechtstexte (Impressum, Datenschutz): ruhigere Überschriften */
.panel--text h2{
  font-family:var(--schrift-text);font-weight:700;font-size:1.7rem;
  color:var(--glut);text-shadow:none;margin:2.25rem 0 .6rem;
}
.panel--text h3{font-size:1.35rem;margin-top:1.5rem}
.panel--text .inhalt{overflow-wrap:anywhere}

/* Spruchband und Programm (wie auf dem Poster) */
.stello-spruch{
  max-width:none!important;margin:.5rem 0 1.5rem;padding-bottom:.6rem;
  font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:700;font-style:italic;line-height:1.25;color:var(--knochen);
  background:linear-gradient(90deg,var(--kuerbis),rgba(255,122,26,0)) left bottom/100% 4px no-repeat;
}
.programm{margin:1.5rem 0!important;gap:0!important}
.programm>.wp-block-column{padding:.25rem 1rem;text-align:center;margin:0!important}
.programm>.wp-block-column+.wp-block-column{border-left:2px solid rgba(255,122,26,.45)}
.programm p{margin:.15rem auto;font-weight:700;line-height:1.25}
.programm .programm__icon{font-size:2.6rem;line-height:1.2}
@media (max-width:781px){
  .programm>.wp-block-column{padding:.75rem 0}
  .programm>.wp-block-column+.wp-block-column{border-left:0;border-top:2px solid rgba(255,122,26,.45)}
}

/* ---------- Info-Seite ---------- */
.held{position:relative;text-align:center;padding:clamp(.25rem,2vw,1.5rem) 0 2rem}
.held__logo{position:relative;isolation:isolate;display:block;max-width:min(920px,100%);margin:0 auto}
.held__logo::before{
  content:"";position:absolute;inset:-12% -6%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,122,26,.42),rgba(255,122,26,0) 72%);
  animation:flackern 5.5s linear infinite;
}
.held__logo img{display:block;width:100%;height:auto}
@keyframes flackern{
  0%,100%{opacity:.85}7%{opacity:.55}9%{opacity:.95}22%{opacity:.75}31%{opacity:1}
  44%{opacity:.7}47%{opacity:.92}63%{opacity:.6}68%{opacity:1}85%{opacity:.8}
}
.held__datum{
  margin:1.25rem 0 0;
  font-family:var(--schrift-titel);font-size:clamp(1.8rem,5vw,3rem);line-height:1.15;color:var(--kuerbis);
  text-shadow:0 2px 0 #000,3px 5px 0 var(--gift-dunkel),0 0 26px rgba(255,122,26,.3);
}
.held__zeit{margin:.25rem 0 0;font-size:1.5rem;font-weight:700;color:var(--knochen)}
.held__tage{margin:.5rem 0 0;font-size:1.4rem;font-style:italic;color:var(--mond)}

.info{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.poster{margin:0;transform:rotate(-1.2deg)}
.poster a{display:block;cursor:zoom-in;box-shadow:0 0 0 2px #000,0 0 40px rgba(255,122,26,.35),0 18px 40px rgba(0,0,0,.6)}
.poster img{display:block;width:100%;height:auto}
.poster figcaption{margin-top:.75rem;text-align:center;font-size:1rem;font-style:italic;color:var(--mond)}
@media (max-width:820px){
  .info{grid-template-columns:1fr}
  .poster{max-width:420px;margin:0 auto}
}

/* ---------- Galerie ---------- */
.jahres-nav{
  position:sticky;top:5rem;z-index:20;
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin:0 0 1.5rem;padding:.6rem 0;
  background:rgba(9,13,24,.96);
  border-bottom:2px solid rgba(154,85,214,.5);
}
.admin-bar .jahres-nav{top:calc(5rem + 32px)}
@media (max-width:782px){.admin-bar .jahres-nav{top:calc(5rem + 46px)}}
.jahres-nav a{
  display:inline-block;padding:.15rem 1.1rem;
  font-size:1.2rem;font-weight:700;text-decoration:none;color:var(--knochen);
  border:2px solid var(--kuerbis);border-radius:999px;
}
.jahres-nav a:hover{color:var(--glut);border-color:var(--glut)}
.jahres-nav a[aria-current="true"]{background:var(--kuerbis);color:#1a0d00}

.inhalt--galerie p{max-width:64ch}
.inhalt--galerie h2{scroll-margin-top:8.5rem}

/* Galerien als Mauerwerk: Bilder behalten ihr Format */
.inhalt .wp-block-gallery,.inhalt .gallery{
  display:block!important;
  column-width:260px;column-gap:.6rem;
  margin:1rem 0 2.5rem;padding:0;
}
.inhalt .wp-block-gallery.has-nested-images figure.wp-block-image,
.inhalt .gallery .gallery-item{
  display:block!important;position:relative;
  width:100%!important;flex:none!important;float:none!important;
  margin:0 0 .6rem!important;padding:0;
  break-inside:avoid;
}
.inhalt .wp-block-gallery figure a,.inhalt .gallery .gallery-icon a{display:block;cursor:zoom-in}
.inhalt .wp-block-gallery figure img,.inhalt .gallery img{
  display:block;width:100%!important;height:auto!important;
  border:1px solid rgba(255,122,26,.25);
  transition:filter .2s ease,border-color .2s ease;
}
.inhalt .wp-block-gallery figure:hover img,.inhalt .gallery .gallery-item:hover img{filter:brightness(1.1) saturate(1.1);border-color:var(--kuerbis)}
.inhalt .gallery .gallery-icon{margin:0}
.inhalt .wp-block-gallery figcaption,.inhalt .gallery .gallery-caption{
  font-size:1rem;line-height:1.3;color:var(--knochen);
  padding:1.5rem .6rem .5rem;
  background:linear-gradient(transparent,rgba(3,5,10,.85));
}
.inhalt .gallery .gallery-caption{margin:0;position:absolute;left:0;right:0;bottom:0}
.inhalt .wp-block-image{margin:1.5rem 0}
.inhalt .wp-block-image img{border:1px solid rgba(255,122,26,.25)}

/* ---------- Fuß ---------- */
.fuss{padding:2.5rem var(--rand) 2.5rem;text-align:center;color:var(--mond);font-size:1.05rem;background:linear-gradient(rgba(5,8,15,0),rgba(5,8,15,.92))}
.fuss ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.75rem;margin:0 0 .75rem;padding:0}
.fuss a{color:var(--knochen)}
.fuss a:hover{color:var(--glut)}
.fuss p{margin:0}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(4,6,12,.95)}
.lb[hidden]{display:none}
.lb__figur{margin:0;max-width:92vw;text-align:center}
.lb__bild{
  display:block;margin:0 auto;
  max-width:92vw;max-height:80vh;width:auto;height:auto;
  box-shadow:0 0 0 2px #000,0 0 60px rgba(255,122,26,.25);
  opacity:0;transition:opacity .2s ease;
}
.lb__bild.is-geladen{opacity:1}
.lb__text{min-height:1.6em;margin:.9rem auto 0;max-width:70ch;font-size:1.1rem;color:var(--knochen)}
.lb__knopf{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:3.25rem;height:3.25rem;padding:0;
  font:400 2.2rem/1 var(--schrift-text);color:var(--knochen);
  background:rgba(9,13,24,.85);border:2px solid var(--kuerbis);border-radius:50%;cursor:pointer;
}
.lb__knopf:hover{background:var(--kuerbis);color:#1a0d00}
.lb__zu{top:1rem;right:1rem}
.lb__zurueck{left:1rem;top:50%;transform:translateY(-50%)}
.lb__vor{right:1rem;top:50%;transform:translateY(-50%)}
.lb__zaehler{position:absolute;left:0;right:0;bottom:.9rem;margin:0;text-align:center;font-size:1rem;color:var(--mond);pointer-events:none}
.lb--einzeln .lb__zurueck,.lb--einzeln .lb__vor,.lb--einzeln .lb__zaehler{display:none}
@media (max-width:600px){
  .lb__knopf{width:2.75rem;height:2.75rem;font-size:1.9rem}
  .lb__zurueck{left:.4rem;top:auto;bottom:.5rem;transform:none}
  .lb__vor{right:.4rem;top:auto;bottom:.5rem;transform:none}
  .lb__bild{max-height:74vh}
}
body.lb-offen{overflow:hidden}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nebel::before,.nebel::after,.held__logo::before{animation:none}
  #glut,.fledermaus{display:none}
  .lb__bild{transition:none}
  .szene{transform:none!important}
}