/* ghoulslife.de – Gestaltung im Stil des Spiels: Pink und Schwarz, Neon-Türkis, Lila und Giftgrün, Nähte als Trennlinien,
   Särge und Spitzbögen, Spinnennetze, Fledermäuse, Totenkopf-Muster. Schriften lokal (SIL OFL 1.1, siehe schriften/).
   Formen (Sarg, Spitzbogen) als CSS-Variablen in formen.css, erzeugt von bauen.py. */
@font-face{font-family:"Griffy";src:url(schriften/Griffy-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Creepster";src:url(schriften/Creepster-Regular.ttf) format("truetype");font-display:swap}

:root{
  --pink:#ff3ea5; --pink-hell:#ff7cc4; --pink-tief:#c2187a;
  --schwarz:#0d060f; --grund:#150a18; --flaeche:#221027; --flaeche2:#2d1533; --rand:#4a2553;
  --tuerkis:#27e3d4; --lila:#b45cff; --gift:#9dff3a;
  --text:#fbeef7; --text2:#dcc5d9; --text3:#b79fb5;
  --display:"Creepster","Griffy",Georgia,serif; --comic:"Griffy",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --breite:1180px; --radius:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund) url(deko/muster.svg) repeat;color:var(--text);font:17px/1.6 var(--sans);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--tuerkis);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--pink-hell)}
:focus-visible{outline:3px solid var(--gift);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 20px}
.schmal-wrap{max-width:760px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gift);color:#000;padding:10px 16px;border-radius:8px;font-weight:700}
.sprung:focus{top:12px}
.klein{font-size:.88rem;color:var(--text3)}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}
h2{font:400 clamp(1.7rem,4vw,2.5rem)/1.15 var(--comic);color:var(--pink);transform:rotate(-1.2deg);transform-origin:left;
   text-shadow:3px 3px 0 #000,0 0 18px rgba(255,62,165,.35);letter-spacing:.5px}
h3{font:400 1.35rem/1.2 var(--comic);color:var(--tuerkis)}
p{margin:0 0 1em}

/* ---- Work-in-Progress-Band (Absperrband) ---- */
.wip-band{position:relative;z-index:5;background:repeating-linear-gradient(-45deg,var(--pink) 0 18px,#111 18px 36px);
  padding:7px 0;box-shadow:0 3px 0 #000,0 0 18px rgba(255,62,165,.35);transform:rotate(-.4deg) scale(1.01)}
.wip-text{max-width:var(--breite);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;
  background:#0d060f;border:2px solid var(--gift);border-radius:6px;width:fit-content;padding:4px 14px;font-size:.92rem;text-align:center}
.wip-text strong{font:400 1.05rem/1.2 var(--comic);color:var(--gift);text-transform:uppercase;letter-spacing:1.5px}
.wip-text span{color:var(--text)}
.entwurf{background:#fff3b0;color:#3a2600;text-align:center;padding:8px 16px;font-weight:700;border-bottom:3px dashed #000}

/* ---- Kopf und Navigation ---- */
.kopf{position:relative;z-index:20;background:linear-gradient(#0d060f,#170b1b);border-bottom:3px solid #000}
.kopf::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:16px;background:url(deko/naht_pink.svg) repeat-x center/28px 16px;pointer-events:none}
.kopf-zeile{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.logo{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-decoration:none;color:var(--text)}
.logo-schaedel{width:46px;height:46px;grid-row:1/3;filter:drop-shadow(0 0 8px rgba(255,62,165,.55));transform:rotate(-8deg)}
.logo-text{font:400 1.75rem/1 var(--display);color:var(--pink);letter-spacing:1px;text-shadow:2px 2px 0 #000}
.logo-unter{font:400 .8rem/1.2 var(--comic);color:var(--tuerkis);letter-spacing:.5px}
.logo:hover .logo-schaedel{transform:rotate(6deg) scale(1.06);transition:transform .2s}
.menue ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.menue>ul>li{position:relative}
.menue a{display:block;padding:9px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:600;font-size:.98rem}
.menue a:hover,.menue a.hier{background:var(--flaeche2);color:var(--pink-hell)}
.menue a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--pink)}
.pfeil{font-size:.75em;margin-left:4px;color:var(--pink)}
.menue .unter{display:none;position:absolute;left:0;top:100%;min-width:230px;flex-direction:column;align-items:stretch;gap:0;
  background:var(--flaeche);border:2px solid var(--pink);border-radius:12px;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.menue .hat-unter:hover .unter,.menue .hat-unter:focus-within .unter{display:flex}
.menue .unter a{font-weight:500}
.menue-mobil{display:none}

/* ---- Grundbausteine ---- */
.knopf{display:inline-block;background:var(--pink);color:#12040d;font-weight:800;text-decoration:none;padding:12px 22px;border-radius:999px;
  border:3px solid #000;box-shadow:4px 4px 0 #000;transition:transform .12s,box-shadow .12s;font-size:1rem;cursor:pointer;font-family:inherit}
.knopf:hover{color:#12040d;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.knopf.zweit{background:var(--flaeche2);color:var(--text);border-color:var(--tuerkis);box-shadow:4px 4px 0 #000}
.knopf.zweit:hover{color:var(--tuerkis)}
.marke{display:inline-block;font:700 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:1px;padding:5px 9px;border-radius:6px;vertical-align:middle;transform:rotate(-2deg)}
.marke.arbeit{background:linear-gradient(#ffe34d,#ffe34d) padding-box,repeating-linear-gradient(-45deg,#111 0 5px,#ffe34d 5px 10px) border-box;border:4px solid transparent;color:#111}
.marke.geplant{background:var(--lila);color:#fff;border:2px solid #111}
h2 .marke{font-size:.7rem;margin-left:8px;transform:rotate(1.2deg)}
.naht{height:16px;margin:10px 0;background:url(deko/naht_pink.svg) repeat-x center/28px 16px}
.naht-tuerkis{background-image:url(deko/naht_tuerkis.svg)}
.naht-lila{background-image:url(deko/naht_lila.svg)}
.schach{height:22px;background:repeating-conic-gradient(var(--pink) 0 25%,#0d060f 0 50%) 0 0/22px 22px;border-block:3px solid #000}
.punkte{padding-left:0;list-style:none}
.punkte li{position:relative;padding-left:30px;margin:0 0 .55em}
.punkte li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 72'%3E%3Cpath d='M30 0L6 40h17L12 72l33-45H28L40 0z' fill='%2327e3d4'/%3E%3C/svg%3E") no-repeat center/contain}
.lead{font-size:1.15rem;color:var(--text2);max-width:760px}
.unter-h{color:var(--text2)}
.mehr{margin-top:22px}

/* ---- Held (Startseite) ---- */
.held{position:relative;overflow:hidden;min-height:min(78vh,720px);display:flex;align-items:center;padding:70px 0 60px;
  background:linear-gradient(100deg,rgba(13,6,15,.94) 0%,rgba(13,6,15,.78) 45%,rgba(13,6,15,.25) 100%),var(--held-bild,none) center/cover no-repeat,#1a0b1d}
.held-inhalt{position:relative;z-index:2;width:100%}
.held-vor{font:400 1.2rem/1.2 var(--comic);color:var(--tuerkis);margin:0 0 6px;transform:rotate(-2deg);display:inline-block}
.held-titel{font:400 clamp(3.4rem,11vw,7.4rem)/.95 var(--display);color:var(--pink);margin:0 0 18px;letter-spacing:2px;transform:rotate(-3deg);transform-origin:left;
  text-shadow:4px 4px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,0 0 30px rgba(255,62,165,.55)}
.held-text{font-size:1.2rem;max-width:560px;color:var(--text);text-shadow:0 1px 3px #000}
.held-knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 26px}
.held-hinweis{font-size:.9rem;color:var(--text2);text-shadow:0 1px 2px #000}
.stempel{position:absolute;right:20px;top:-30px;margin:0;font:400 1.7rem/1 var(--comic);color:var(--gift);border:4px double var(--gift);
  padding:10px 16px;border-radius:10px;transform:rotate(12deg);text-transform:uppercase;letter-spacing:2px;background:rgba(13,6,15,.6);
  box-shadow:0 0 16px rgba(157,255,58,.35)}
.netz-deko{position:absolute;top:0;z-index:1;width:clamp(150px,22vw,300px);height:auto;pointer-events:none;opacity:.8}
.netz-deko.links{left:0}
.netz-deko.rechts{right:0;transform:scaleX(-1)}
.held .netz-deko.rechts{width:clamp(120px,16vw,220px)}
.fm{position:absolute;z-index:1;color:#0d060f;filter:drop-shadow(0 0 6px rgba(180,92,255,.8))}
.fm1{width:90px;right:26%;top:16%;transform:rotate(-8deg)}
.fm2{width:56px;right:14%;top:34%;transform:rotate(10deg)}
.fm3{width:40px;right:34%;top:52%;transform:rotate(-16deg)}
@media (prefers-reduced-motion:no-preference){
  .fm1{animation:flattern 6s ease-in-out infinite}
  .fm2{animation:flattern 5s ease-in-out -2s infinite}
  .fm3{animation:flattern 7s ease-in-out -4s infinite}
  @keyframes flattern{0%,100%{translate:0 0}50%{translate:-14px -12px}}
}

/* ---- Store-Knöpfe (eigene, neutrale Knöpfe; keine offiziellen Abzeichen) ---- */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:10px;min-width:210px;padding:9px 16px 9px 12px;border-radius:14px;background:#000;color:#fff;
  border:2px solid var(--tuerkis);text-decoration:none;box-shadow:3px 3px 0 var(--pink)}
.store-icon{width:26px;height:32px;flex:none}
.store span{display:flex;flex-direction:column;line-height:1.15}
.store small{font-size:.72rem;color:var(--text2)}
.store b{font-size:1.15rem}
.store em{font-style:normal;font-size:.75rem;font-weight:700;color:var(--gift)}
.store.aus{cursor:not-allowed;opacity:.62;filter:grayscale(1);border-style:dashed;box-shadow:none;user-select:none}
.store.aus em{color:#fff}
.stores.klein .store{min-width:0;padding:6px 12px 6px 9px}
.stores.klein .store b{font-size:.95rem}

/* ---- Seitenkopf der Unterseiten ---- */
.seitenkopf{position:relative;overflow:hidden;padding:54px 0 34px;background:linear-gradient(180deg,rgba(255,62,165,.16),transparent 80%)}
.seitenkopf .wrap{position:relative;z-index:2}
.titel{font:400 clamp(2.6rem,8vw,4.6rem)/1 var(--display);color:var(--pink);margin:10px 0 16px;letter-spacing:1.5px;transform:rotate(-2deg);transform-origin:left;
  text-shadow:3px 3px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,0 0 24px rgba(255,62,165,.45)}
.seitenkopf .netz-deko{width:clamp(130px,18vw,230px)}
.status-box{display:flex;gap:14px;align-items:flex-start;background:var(--flaeche);border:2px dashed #ffe34d;border-radius:var(--radius);padding:14px 18px;margin:8px 0 24px}
.status-box p{margin:0}
.status-blitz{width:22px;height:34px;flex:none;fill:#ffe34d;margin-top:2px}
.stand-hinweis{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text2);margin:0 0 14px}
.mini{width:20px;height:20px;flex:none}

/* ---- Abschnitte mit Bild im Spitzbogen ---- */
.abschnitt{padding:34px 0}
.abschnitt-raster{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.bild-links .abschnitt-text{order:2}
.ohne-bild .abschnitt-raster{grid-template-columns:1fr}
.ohne-bild .abschnitt-text{max-width:900px}
.abschnitt-bild{margin:0}
.abschnitt-bild figcaption{font-size:.9rem;color:var(--text2);margin-top:10px;text-align:center}
.bild{display:block;position:relative;border-radius:10px;overflow:hidden;background:#000}
.bild img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .3s}
.bild:hover img{transform:scale(1.04)}
.bogen{padding:5px;background:linear-gradient(135deg,var(--pink),var(--lila) 55%,var(--tuerkis));clip-path:var(--bogen-quer);border-radius:0 0 12px 12px;
  filter:drop-shadow(0 0 14px rgba(255,62,165,.35))}
.bogen img{clip-path:var(--bogen-quer);border-radius:0 0 8px 8px}
.bild::after{content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(13,6,15,.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") no-repeat center/20px;
  opacity:0;transition:opacity .2s}
.bild:hover::after,.bild:focus-visible::after{opacity:1}

/* ---- Galerie ---- */
.galerie{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.galerie figure{margin:0;background:var(--flaeche);border:2px solid var(--rand);border-radius:var(--radius);padding:8px 8px 10px;height:100%;
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.galerie figcaption{font-size:.9rem;color:var(--text2);padding:8px 4px 0;line-height:1.4}
.galerie li:nth-child(3n+1) figure{border-color:rgba(255,62,165,.55)}
.galerie li:nth-child(3n+2) figure{border-color:rgba(39,227,212,.5)}
.galerie li:nth-child(3n) figure{border-color:rgba(180,92,255,.55)}
.kartons{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.karton{display:block;border-radius:8px;overflow:hidden;transition:transform .2s;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.karton:hover{transform:rotate(-2deg) scale(1.04)}
.karton img{display:block;width:100%;height:auto}

/* ---- Särge (Bereiche) ---- */
.saerge{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px 26px}
.sarg a{display:block;height:100%;padding:4px;clip-path:var(--sarg);background:linear-gradient(160deg,var(--pink),var(--lila));text-decoration:none;color:var(--text);
  transition:transform .18s}
.sarg:nth-child(3n+2) a{background:linear-gradient(160deg,var(--tuerkis),var(--lila))}
.sarg:nth-child(3n) a{background:linear-gradient(160deg,var(--gift),var(--pink))}
.sarg a:hover{transform:translateY(-6px) rotate(-1deg)}
.sarg a:focus-visible{outline:none}
.sarg a:focus-visible .sarg-innen{background:#3a1a42}
.sarg-innen{display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;clip-path:var(--sarg);background:linear-gradient(180deg,#2a1230,#140a17);
  padding:30px 34px 44px}
.sarg-bild{display:block;width:100%;aspect-ratio:16/10;clip-path:var(--bogen-quer);background:#000;margin-bottom:14px}
.sarg-bild img{display:block;width:100%;height:100%;object-fit:cover}
.sarg-titel{font:400 1.55rem/1.1 var(--comic);color:var(--pink);text-shadow:2px 2px 0 #000;margin-bottom:6px}
.sarg:nth-child(3n+2) .sarg-titel{color:var(--tuerkis)}
.sarg:nth-child(3n) .sarg-titel{color:var(--gift)}
.sarg-text{font-size:.93rem;color:var(--text2);line-height:1.45;margin-bottom:12px}
.sarg .marke{margin-top:auto}

/* ---- Neuigkeiten ---- */
.neu-liste{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.neu-liste li{position:relative;background:var(--flaeche);border-radius:var(--radius);padding:18px 18px 12px;border:2px solid var(--rand);border-left:6px solid var(--pink)}
.neu-liste li.neu-besser{border-left-color:var(--tuerkis)}
.neu-liste li.neu-behoben{border-left-color:var(--gift)}
.neu-kat{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;background:var(--pink);color:#12040d;padding:3px 8px;border-radius:5px;margin-bottom:8px}
.neu-besser .neu-kat{background:var(--tuerkis)}
.neu-behoben .neu-kat{background:var(--gift)}
.neu-liste h3{margin:0 0 6px}
.neu-datum{font-size:.82rem;color:var(--text3);margin:0}

/* ---- Eltern-Kasten ---- */
.eltern-vorschau{padding:40px 0}
.eltern-kasten{display:flex;gap:26px;align-items:center;background:linear-gradient(135deg,#2a1230,#1a0d20);border:3px solid var(--tuerkis);border-radius:28px;padding:28px 30px;
  box-shadow:0 0 0 6px #000,0 0 30px rgba(39,227,212,.25)}
.eltern-schaedel{width:88px;height:88px;flex:none;transform:rotate(-10deg)}
.eltern-kasten h2{color:var(--tuerkis)}

/* ---- FAQ ---- */
.faq details{background:var(--flaeche);border:2px solid var(--rand);border-radius:var(--radius);margin:0 0 12px;overflow:hidden}
.faq details[open]{border-color:var(--pink)}
.faq summary{cursor:pointer;padding:16px 50px 16px 20px;font-weight:700;font-size:1.05rem;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;translate:0 -50%;font:400 1.8rem/1 var(--comic);color:var(--pink)}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--pink-hell)}
.antwort{padding:0 20px 8px;border-top:2px dashed var(--rand);padding-top:14px;color:var(--text2)}

/* ---- Weiter-Navigation ---- */
.weiter{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:24px;padding-bottom:50px}

/* ---- Rechtstexte ---- */
.text{max-width:860px}
.text h2{font-size:1.7rem;margin-top:1.4em}
.text h3{margin-top:1.2em}
.text h4{color:var(--pink-hell);margin:1em 0 .4em}
.text li{margin-bottom:.35em}
.tabelle{overflow-x:auto;margin:0 0 1em}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{border:1px solid var(--rand);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--flaeche2)}
hr{border:0;height:16px;background:url(deko/naht_lila.svg) repeat-x center/28px 16px;margin:2em 0}
code{background:var(--flaeche2);padding:1px 5px;border-radius:4px}

/* ---- Kontaktformular ---- */
.kontakt{background:var(--flaeche);border:3px solid var(--pink);border-radius:22px;padding:24px;box-shadow:6px 6px 0 #000;margin-bottom:20px}
.feld{margin:0 0 18px}
.feld label{display:block;font-weight:700;margin-bottom:6px}
.optional{font-weight:400;color:var(--text3)}
.kontakt input[type=email],.kontakt input[type=text],.kontakt select,.kontakt textarea{width:100%;font:inherit;color:var(--text);background:#120814;
  border:2px solid var(--rand);border-radius:10px;padding:11px 12px}
.kontakt textarea{resize:vertical;min-height:170px}
.kontakt input:focus,.kontakt select:focus,.kontakt textarea:focus{border-color:var(--tuerkis);outline:none;box-shadow:0 0 0 3px rgba(39,227,212,.3)}
.haken{display:flex;gap:12px;align-items:flex-start}
.haken input{width:22px;height:22px;margin-top:3px;flex:none;accent-color:var(--pink)}
.haken label{font-weight:400}
.falle{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.zaehler{font-size:.84rem;color:var(--text3);margin:6px 0 0;text-align:right}
.pflicht-hinweis{font-size:.88rem;color:var(--text3)}
.kinder-hinweis{background:#1b0d20;border-left:4px solid var(--gift);padding:8px 12px;border-radius:6px;font-size:.93rem}
.meldung{margin:16px 0 0;padding:12px 14px;border-radius:10px;font-weight:600}
.meldung.ok{background:rgba(157,255,58,.14);border:2px solid var(--gift)}
.meldung.fehler{background:rgba(255,62,165,.14);border:2px solid var(--pink)}
.kontakt button[disabled]{opacity:.6;cursor:wait}

/* ---- Fußzeile ---- */
.fuss{margin-top:40px;background:#0b050d}
.fuss-inhalt{padding-top:34px;padding-bottom:40px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px 40px}
.fuss-marke{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.fuss-marke p{margin:0}
.fuss-marke p b{font:400 1.4rem var(--display);color:var(--pink);letter-spacing:1px}
.fuss-schaedel{width:52px;height:52px}
.fuss nav{display:flex;flex-direction:column;gap:6px}
.fuss nav a{color:var(--text2);text-decoration:none}
.fuss nav a:hover{color:var(--pink-hell);text-decoration:underline}
.fuss .recht{grid-column:1/-1;margin:0;padding-top:18px;border-top:2px dashed var(--rand);color:var(--text2);font-size:.93rem}
.fuss .klein{grid-column:1/-1;margin:0}

/* ---- Bildbetrachter ---- */
.licht{position:fixed;inset:0;z-index:1000;background:rgba(8,3,10,.94);display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:56px 70px 20px;touch-action:pan-y}
.licht[hidden]{display:none}
.licht-bild{max-width:100%;max-height:calc(100vh - 150px);border-radius:10px;box-shadow:0 0 0 3px var(--pink),0 0 40px rgba(255,62,165,.35);background:#000;
  object-fit:contain;user-select:none}
.licht-unter{display:flex;gap:16px;align-items:baseline;justify-content:center;flex-wrap:wrap;color:var(--text);margin-top:14px;max-width:900px;text-align:center}
.licht-zaehler{font:400 1.1rem var(--comic);color:var(--tuerkis);white-space:nowrap}
.licht button{position:absolute;display:flex;align-items:center;justify-content:center;background:var(--flaeche2);color:#fff;border:2px solid var(--pink);border-radius:50%;
  width:52px;height:52px;cursor:pointer;font-size:1.6rem;line-height:1;box-shadow:3px 3px 0 #000}
.licht button:hover{background:var(--pink);color:#12040d}
.licht-zu{top:14px;right:14px}
.licht-zurueck{left:12px;top:50%;translate:0 -50%}
.licht-vor{right:12px;top:50%;translate:0 -50%}
.licht button[hidden]{display:none}
.licht-laedt .licht-bild{opacity:.4}
body.licht-offen{overflow:hidden}

/* ---- Mobil ---- */
@media (max-width:980px){
  .menue{display:none}
  .menue-mobil{display:block;position:relative}
  .menue-mobil summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 14px;border:2px solid var(--pink);border-radius:12px;font-weight:700}
  .menue-mobil summary::-webkit-details-marker{display:none}
  .burger{display:flex;flex-direction:column;gap:4px}
  .burger i{display:block;width:20px;height:3px;border-radius:2px;background:var(--pink)}
  .menue-mobil>ul{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,86vw);list-style:none;margin:0;padding:10px;background:var(--flaeche);
    border:2px solid var(--pink);border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.7)}
  .menue-mobil ul ul{list-style:none;padding:0 0 4px 14px;margin:0;border-left:2px dashed var(--rand);margin-left:12px}
  .menue-mobil a{display:block;padding:9px 10px;color:var(--text);text-decoration:none;border-radius:8px}
  .menue-mobil a:hover{background:var(--flaeche2)}
  .menue-mobil a[aria-current=page]{color:var(--pink);font-weight:700}
  .abschnitt-raster{grid-template-columns:1fr;gap:22px}
  .bild-links .abschnitt-text{order:0}
  .fuss-inhalt{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1/-1}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .logo-schaedel{width:38px;height:38px}
  .logo-text{font-size:1.4rem}
  .wip-text{font-size:.8rem;padding:3px 10px}
  .held{padding:56px 0 40px;min-height:0;background:linear-gradient(180deg,rgba(13,6,15,.55) 0%,rgba(13,6,15,.88) 55%,rgba(13,6,15,.97) 100%),var(--held-bild,none) center top/cover no-repeat,#1a0b1d}
  .stempel{font-size:1.1rem;right:10px;top:-38px;padding:6px 10px}
  .held-text{font-size:1.05rem}
  .store{min-width:0;flex:1 1 150px}
  .fm1{right:6%;top:6%;width:64px}.fm2{right:30%;top:3%}.fm3{display:none}
  .kartons{grid-template-columns:repeat(2,1fr)}
  .saerge{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
  .eltern-kasten{flex-direction:column;align-items:flex-start;padding:22px}
  .eltern-schaedel{width:60px;height:60px}
  .fuss-inhalt{grid-template-columns:1fr}
  .licht{padding:56px 8px 16px}
  .licht button.licht-zurueck,.licht button.licht-vor{top:auto;bottom:14px;translate:none;width:46px;height:46px}
  .licht-bild{max-height:calc(100vh - 190px)}
  .licht-unter{padding:0 56px}
  .weiter{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ---- Mitmachen ---- */
.mitmachen-vorschau{padding:30px 0 0}
.mitmachen-kasten{position:relative;display:flex;gap:24px;align-items:center;background:linear-gradient(135deg,#34113a,#1a0b1d);border:3px dashed var(--gift);
  border-radius:28px;padding:28px 30px;box-shadow:0 0 30px rgba(157,255,58,.18)}
.mitmachen-fm{width:120px;flex:none;color:var(--lila);filter:drop-shadow(0 0 8px rgba(180,92,255,.7));transform:rotate(-12deg)}
.mitmachen-kasten h2{color:var(--gift)}
.stempel-klein{display:inline-block;margin:0 0 10px;font:400 1.1rem/1 var(--comic);color:#12040d;background:var(--gift);padding:6px 12px;border-radius:8px;
  transform:rotate(-3deg);box-shadow:3px 3px 0 #000}
.gesucht .sarg-innen{padding-top:40px}
.sarg-nr{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#0d060f;border:3px solid var(--pink);
  font:400 2.2rem/1 var(--display);color:var(--pink);margin-bottom:12px;box-shadow:0 0 14px rgba(255,62,165,.5)}
.sarg:nth-child(3n+2) .sarg-nr{border-color:var(--tuerkis);color:var(--tuerkis)}
.sarg:nth-child(3n) .sarg-nr{border-color:var(--gift);color:var(--gift)}
.mitmachen-cta{border-color:var(--gift)}
.mitmachen-cta h2{color:var(--gift)}
@media (max-width:600px){
  .mitmachen-kasten{flex-direction:column;align-items:flex-start;padding:22px}
  .mitmachen-fm{width:80px}
}

/* ---- Kontakt: Fehler und Hinweise ---- */
.kontakt-fehler{display:none;background:rgba(255,62,165,.14);border:2px solid var(--pink);border-radius:14px;padding:14px 16px;margin:0 0 18px}
.kontakt-fehler:target,.kontakt-fehler.zeigen{display:block}
.feld-fehler{margin:6px 0 0;color:#ff9fd0;font-weight:700;font-size:.92rem}
.feld-fehler::before{content:"✖ ";color:var(--pink)}
.feld.falsch input,.feld.falsch select,.feld.falsch textarea{border-color:var(--pink)}
.hinweis-mitmachen{display:none;margin:10px 0 0;padding:8px 12px;border-left:4px solid var(--gift);background:#1b0d20;border-radius:6px;font-size:.92rem}
.kontakt:has(option[value=mitmachen]:checked) .hinweis-mitmachen{display:block}
.wappen{object-fit:contain;display:inline-block}