@font-face{font-family:"Funnel";src:url("fonts/FunnelDisplay.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"FunnelSans";src:url("fonts/FunnelSans.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"SplineMono";src:url("fonts/SplineMono.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  --nacht:#070712; --tiefe:#151025; --kerze:#FF7315; --flamme:#FFB347;
  --violett:#53206F; --papier:#F5F0E6;
  --papier-ruhig:rgba(245,240,230,.76);
  --kante:rgba(245,240,230,.16);
  --breite:1200px; --lese:620px;
  --display:"Funnel",Georgia,serif;
  --text:"FunnelSans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"SplineMono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--nacht);color:var(--papier);
  font:400 1.125rem/1.65 var(--text);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.015em;margin:0}
h2{font-size:clamp(1.75rem,1.1rem + 2.2vw,2.85rem)}
h3{font-size:1.3rem;line-height:1.2}
p{margin:0 0 1rem;max-width:var(--lese)}
.lese{max-width:var(--lese)}
.huelle{width:min(100% - 2.5rem,var(--breite));margin-inline:auto}
.skip{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:var(--kerze);color:#150800;z-index:99;font-weight:600;text-decoration:none}
.skip:focus{width:auto;height:auto;clip-path:none;padding:.7rem 1.1rem;left:.5rem;top:.5rem}
:focus-visible{outline:2.5px solid var(--flamme);outline-offset:3px;border-radius:2px}
::selection{background:var(--kerze);color:#150800}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--tiefe)}
::-webkit-scrollbar-thumb{background:#3a2c52;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--violett)}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:40;background:rgba(7,7,18,.92);border-bottom:1px solid var(--kante);backdrop-filter:blur(8px)}
.kopf-innen{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.marke{font-family:var(--display);font-weight:800;font-size:1.3rem;text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:.6rem}
.marke span{color:var(--kerze)}
.marke svg{color:var(--flamme)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:.62rem .82rem;text-decoration:none;font-size:1rem;color:var(--papier-ruhig);border-radius:3px;transition:color .16s,background .16s}
.nav a:hover{color:var(--papier);background:rgba(83,32,111,.42)}
.nav li{position:relative}
.hat > a{display:flex;align-items:center;gap:.25rem}
.hat > a svg{width:15px;height:15px;opacity:.65}
.unter{position:absolute;left:0;top:100%;min-width:248px;background:#100c1e;border:1px solid var(--kante);padding:.4rem;display:none;box-shadow:0 18px 44px rgba(0,0,0,.6)}
.hat:hover .unter,.hat:focus-within .unter{display:block}
.unter a{font-size:.92rem;padding:.55rem .7rem}
.knopf-menue{display:none;margin-left:auto;background:none;border:1px solid var(--kante);color:var(--papier);padding:.55rem .8rem;font:inherit;font-size:.92rem;cursor:pointer;align-items:center;gap:.5rem}
.nav-mobil{display:none}
.nav-mobil[hidden]{display:none}

/* ---------- Held ---------- */
.held{position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end}
.held-bild{position:absolute;inset:0;z-index:0;overflow:clip}
/* Drei Schichten, weil drei Bewegungen nicht auf einem transform liegen können. */
.held-zoom,.held-kb{position:absolute;inset:0}
.held-kb{animation:langsam-heran 52s ease-in-out infinite alternate;will-change:transform}
@keyframes langsam-heran{from{transform:scale(1)}to{transform:scale(1.13)}}

.held-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.held-schleier{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,var(--nacht) 4%,rgba(7,7,18,.72) 42%,rgba(7,7,18,.34) 100%)}
.nebel{position:absolute;left:0;right:0;bottom:0;height:44%;z-index:2;pointer-events:none;
  background:radial-gradient(60% 100% at 30% 100%,rgba(245,240,230,.10),transparent 70%),
             radial-gradient(50% 100% at 72% 100%,rgba(245,240,230,.08),transparent 70%);
  animation:ziehen 42s linear infinite}
@keyframes ziehen{0%{transform:translateX(-4%)}50%{transform:translateX(4%)}100%{transform:translateX(-4%)}}
.held-inhalt{position:relative;z-index:3;padding-block:3rem 3.4rem}

/* impeccable-disable clipped-overflow-container -- .held-bild ist der Rahmen des
   Hero-Bildes und schneidet es absichtlich zu. Ein Zoom-Effekt braucht das: ohne
   den Clip schiebt das skalierte Bild die Seite seitlich auf (am 02.09. gemessen).
   Abgeschnitten wird nur Bildflaeche, kein Inhalt und kein Bedienelement. */
/* ---------- Das Haus kommt entgegen (Frank, 02.09.2026) ----------
   Beim Scrollen durch den Hero wächst das Haus heran, der Schleier zieht zu.
   Scroll-driven animation: die Scrollposition IST die Zeitachse, es läuft im
   Compositor. Kein scroll-Listener, der je Frame feuert.
   ⚠ .held-bild braucht overflow:hidden, sonst schiebt das skalierte Bild die
   Seite seitlich auf — genau die Überlauf-Falle vom 01.09.                 */
@keyframes heran{from{transform:scale(1.01) translateY(0)}to{transform:scale(1.26) translateY(7%)}}
@keyframes eintauchen{from{opacity:.9}to{opacity:1}}

@supports (animation-timeline:scroll()){
  .held-zoom{transform-origin:50% 46%;will-change:transform;
    animation:heran linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  .held-schleier{animation:eintauchen linear both;
    animation-timeline:scroll(root);animation-range:0 90vh}
}

/* impeccable-disable marquee -- Deko-Silhouetten im Hero: aria-hidden, tragen
   keinen Inhalt, verdecken keinen. Die Regel zielt auf Laufbaender, die Text
   wegscrollen ("hides half its content"). Bewusst gesetzt am 02.09.2026 auf
   Franks ausdruecklichen Wunsch, nicht um eine Zahl zu schoenen. */
/* ---------- Fledermäuse (aus Entwurf A, Flügelschlag ergänzt) ----------
   Zwei ineinandergesteckte Bewegungen: die Gruppe fliegt quer durchs Bild
   (transform-box:view-box, deshalb tragen die Prozente über die ganze Breite),
   der Pfad darin schlägt um seine eigene Mitte (transform-box:fill-box).
   Silhouetten, kein Leuchten — farbige Schatten auf Dunkel sind `dark-glow`. */
.fledermaeuse{position:absolute;top:8%;left:0;width:100%;height:24vh;z-index:2;
  color:rgba(4,4,11,.92);pointer-events:none}
.fm{will-change:transform}
.fm-1{animation:flug 27s linear infinite}
.fm-2{animation:flug 36s linear infinite;animation-delay:-11s;opacity:.72}
.fm-3{animation:flug 45s linear infinite;animation-delay:-21s;opacity:.48}
@keyframes flug{
  0%{transform:translate(-12%,0) scale(.6)}
  25%{transform:translate(23%,-11px) scale(.82)}
  50%{transform:translate(53%,5px) scale(.68)}
  75%{transform:translate(80%,-8px) scale(.94)}
  100%{transform:translate(115%,2px) scale(.72)}}
.fluegel{transform-box:fill-box;transform-origin:center;
  animation:schlag 1.05s ease-in-out infinite}
.fm-2 .fluegel{animation-duration:.88s}
.fm-3 .fluegel{animation-duration:1.24s}
@keyframes schlag{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.52)}}

@media (prefers-reduced-motion:reduce){
  .held-zoom,.held-kb,.held-schleier,.fm,.fluegel{animation:none!important;transform:none!important}
  .fledermaeuse{display:none}
}
.held h1{font-size:clamp(2.3rem,1.2rem + 4.6vw,4.4rem);max-width:16ch}
.held-sub{margin-top:1.1rem;font-size:1.22rem;color:var(--papier-ruhig);max-width:46ch}
.held-reihe{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:flex-end;justify-content:space-between;margin-top:2.2rem}
.tat{display:inline-flex;align-items:center;gap:.55rem;background:var(--kerze);color:#150800;text-decoration:none;font-weight:600;padding:.92rem 1.5rem;font-size:1rem;transition:transform .16s,background .16s}
.tat:hover{background:var(--flamme);transform:translateY(-2px)}
.tat svg{width:19px;height:19px}
.tat-2{background:none;color:var(--papier);border:1px solid var(--kante);margin-left:.7rem}
.tat-2:hover{background:rgba(83,32,111,.5);border-color:var(--violett)}

/* Uhr */
.uhr{border:1px solid var(--kante);background:rgba(21,16,37,.72);padding:1.05rem 1.35rem;display:flex;gap:1.5rem;align-items:center}
.uhr-titel{font:400 .92rem/1.3 var(--text);color:var(--papier-ruhig);max-width:9rem}
.uhr-werte{display:flex;gap:1.15rem;font-family:var(--mono);font-variant-numeric:tabular-nums}
.uhr-wert{text-align:center}
.uhr-zahl{font-size:2.1rem;font-weight:600;line-height:1;color:var(--flamme);display:block}
.uhr-name{font-size:.72rem;color:var(--papier-ruhig);letter-spacing:.02em}

/* ---------- Achse (Signature) ---------- */
.achse{position:relative}
.achse::before{content:"";position:absolute;left:calc(50% - var(--breite)/2 + 21px);top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,transparent,rgba(245,240,230,.3) 6%,rgba(245,240,230,.3) 94%,transparent);z-index:0}
.halt{position:relative;padding-block:4.6rem}
.halt-kopf{display:grid;grid-template-columns:44px 1fr;gap:1.6rem;align-items:start}
.mond{width:46px;height:46px;border-radius:50%;background:var(--nacht);border:2px solid rgba(245,240,230,.32);position:relative;
  display:grid;place-items:center;flex:none;transition:border-color .3s,box-shadow .3s}
.mond i{display:block;width:24px;height:24px;border-radius:50%;background:var(--papier);position:relative;overflow:hidden;transition:background .3s}
.mond i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--nacht);transform:translateX(var(--phase,-40%))}
.halt.aktiv .mond{border-color:var(--kerze);box-shadow:0 0 0 5px rgba(255,115,21,.12)}
.halt.aktiv .mond i{background:var(--flamme)}
.halt-text{color:var(--papier-ruhig);margin-top:.85rem;max-width:var(--lese)}
.halt-koerper{margin-top:2.4rem;margin-left:60px}
@media (max-width:900px){.achse::before{left:21px}.halt-koerper{margin-left:0}}

/* ---------- Karten ---------- */
.raster{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
@media (min-width:1080px){#kategorien .raster{grid-template-columns:repeat(5,1fr)}
  #kategorien .karte h3{font-size:1.125rem;overflow-wrap:break-word;hyphens:auto}}
.karte{position:relative;display:flex;flex-direction:column;background:var(--tiefe);border:1px solid var(--kante);
  text-decoration:none;overflow:hidden;transition:border-color .2s,transform .2s}
.karte:hover{border-color:var(--kerze);transform:translateY(-3px)}
.karte-bild{aspect-ratio:16/10;overflow:hidden;background:#0d0a18}
.karte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.karte:hover .karte-bild img{transform:scale(1.045)}
.karte-text{padding:1.05rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.karte-text p{color:var(--papier-ruhig);font-size:1rem;margin:0}
.karte-fuss{margin-top:auto;padding-top:.85rem;display:flex;align-items:center;gap:.4rem;color:var(--kerze);font-size:.92rem;font-weight:500}
.karte-fuss svg{width:17px;height:17px;transition:transform .2s}
.karte:hover .karte-fuss svg{transform:translateX(4px)}
.dauer{font-family:var(--mono);font-size:.82rem;color:var(--flamme);display:inline-flex;align-items:center;gap:.35rem}
.dauer svg{width:15px;height:15px}

/* Grusel-Stufen */
.stufen{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.stufe{border:1px solid var(--kante);background:var(--tiefe);overflow:hidden;display:flex;flex-direction:column}
.stufe-bild{aspect-ratio:4/3;overflow:hidden}
.stufe-bild img{width:100%;height:100%;object-fit:cover}
.stufe-text{padding:1.1rem 1.2rem 1.35rem}
.skala{display:flex;gap:4px;margin-bottom:.7rem}
.skala i{width:26px;height:5px;background:rgba(245,240,230,.18);display:block}
.skala i.an{background:var(--kerze)}
.stufe p{color:var(--papier-ruhig);font-size:1rem;margin:.5rem 0 0}

/* Wochenplan */
.plan{display:grid;gap:0;background:var(--tiefe);padding:1.3rem}
.plan-zeile:first-child{border-top:0}
.plan-zeile{display:grid;grid-template-columns:132px 1fr;gap:1.4rem;padding:1.15rem .4rem;border-top:1px solid var(--kante);align-items:baseline}
.plan-zeile:last-child{border-bottom:0}
.plan-zeile:hover{background:rgba(83,32,111,.22)}
.plan-wann{font-family:var(--mono);font-size:.92rem;color:var(--flamme)}
.plan-was strong{font-weight:600;font-size:1.125rem}
.plan-was p{color:var(--papier-ruhig);font-size:1rem;margin:.25rem 0 0;max-width:var(--lese)}
.jetzt{color:var(--kerze)}

/* Bühne */
.buehne{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:center}
.buehne-bild{position:relative;border:1px solid var(--kante)}
.buehne-bild img{aspect-ratio:4/3;object-fit:cover;width:100%}
.punkte{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1.05rem}
.punkte li{display:grid;grid-template-columns:26px 1fr;gap:.85rem;align-items:start}
.punkte svg{width:22px;height:22px;color:var(--kerze);margin-top:2px}
.punkte strong{display:block;font-weight:600;margin-bottom:.15rem}
.punkte span{color:var(--papier-ruhig);font-size:1rem}
@media (max-width:820px){.buehne{grid-template-columns:1fr;gap:1.8rem}}

/* Werkstatt */
.werk{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.6rem;align-items:center}
.werk-liste{list-style:none;margin:1.3rem 0 0;padding:0;columns:2;column-gap:1.6rem}
.werk-liste li{padding:.42rem 0;color:var(--papier-ruhig);font-size:1rem;break-inside:avoid;border-bottom:1px solid rgba(245,240,230,.08)}
@media (max-width:820px){.werk{grid-template-columns:1fr}.werk-liste{columns:1}}

/* Kinder */
.kinder{position:relative;border:1px solid var(--kante);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.kinder-bild img{width:100%;height:100%;object-fit:cover;min-height:340px}
.kinder-text{padding:2.4rem 2.2rem}
.kinder-text p{color:var(--papier-ruhig)}
.warn{margin-top:1.3rem;border:1px solid rgba(255,115,21,.42);background:rgba(255,115,21,.07);padding:.92rem 1.1rem;font-size:1rem}
.warn strong{color:var(--flamme)}
@media (max-width:820px){.kinder{grid-template-columns:1fr}.kinder-bild img{min-height:230px}}

/* FAQ */
.faq{border-top:1px solid var(--kante);padding-top:.65rem;max-width:800px}
.faq details{border-bottom:1px solid var(--kante)}
.faq summary{cursor:pointer;padding:1.25rem 2.4rem 1.25rem 0;font-family:var(--display);font-weight:600;font-size:1.3rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.5rem;top:1.55rem;width:11px;height:11px;
  border-right:2px solid var(--kerze);border-bottom:2px solid var(--kerze);transform:rotate(45deg);transition:transform .22s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--flamme)}
.faq-a{padding:0 0 1.35rem;color:var(--papier-ruhig);max-width:var(--lese)}

/* Fuß */
.fuss{margin-top:5rem;border-top:1px solid var(--kante);background:var(--tiefe);position:relative}
.fuss-flamme{position:absolute;left:50%;top:0;width:min(760px,90%);height:150px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(255,115,21,.16),transparent 72%);animation:flackern 5.5s ease-in-out infinite}
@keyframes flackern{0%,100%{opacity:.82}45%{opacity:1}70%{opacity:.9}}
.fuss-innen{position:relative;padding-block:3.6rem 2rem;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.6rem}
.fuss h3{font-family:var(--display);font-size:1.125rem;margin:0 0 .85rem;font-weight:700}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fuss a{color:var(--papier-ruhig);text-decoration:none;font-size:1rem}
.fuss a:hover{color:var(--kerze)}
.fuss-unten{margin-top:1.4rem;padding-block:0 1.9rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.85rem;color:rgba(245,240,230,.6)}
@media (max-width:820px){.fuss-innen{grid-template-columns:1fr;gap:1.9rem}}

/* Mobil */
@media (max-width:1024px){
  body{font-size:1.06rem}
  .nav{display:none}
  .knopf-menue{display:inline-flex}
  .nav-mobil{display:block;border-top:1px solid var(--kante);padding:.7rem 0 1.1rem}
  .nav-mobil[hidden]{display:none}
  .nav-mobil ul{list-style:none;margin:0;padding:0}
  .nav-mobil a{display:block;padding:.85rem .2rem;text-decoration:none;color:var(--papier-ruhig);border-bottom:1px solid rgba(245,240,230,.09);min-height:44px}
  .nav-mobil .tief a{padding-left:1.4rem;font-size:.92rem}
  .held-reihe{flex-direction:column;align-items:stretch}
  .uhr{justify-content:space-between}
}
@media (max-width:560px){
  .halt{padding-block:3.2rem}
  .halt-kopf{grid-template-columns:34px 1fr;gap:1rem}
  .mond{width:34px;height:34px}.mond i{width:17px;height:17px}
  .achse::before{left:16px}
  .uhr{flex-direction:column;align-items:flex-start;gap:.9rem}
  .uhr-werte{gap:1.4rem}
  .plan-zeile{grid-template-columns:1fr;gap:.35rem}
  .tat{width:100%;justify-content:center}
  .tat-2{margin-left:0;margin-top:.7rem}
}

/* ------------------------------------------------------------------
   Einbettung in das GeneratePress-Gerüst (02.09.2026)

   Der Inhalt sitzt korrekt im GP-Container — dadurch begrenzt ihn dessen
   max-width, und `.inside-article` legt eine weiße Fläche darunter. Beides
   muss für die randlosen Abschnitte dieses Designs aufgehoben werden.
   ⚠ Nur auf der Startseite (`.home`): die Innenseiten laufen noch auf dem
   alten Stylesheet und brauchen den Container unverändert.

   ⛔ `body{padding-top:… !important}` stammt aus dem alten Design, dessen
   Kopf `position:fixed` war. Der neue Kopf ist `sticky` — das Polster
   erzeugte einen schwarzen Balken über der Seite.                     */
/* ✅ 03.09.2026: `body{padding-top:0!important}` ist hier ERSATZLOS RAUS.
   Es hielt gegen das `padding-top: var(--hd-header-height) !important` aus
   hd-shell.css, das für einen `position:fixed`-Kopf gedacht war und auf jeder
   Innenseite einen 74 px hohen schwarzen Balken erzeugte. Seit dem
   Innenseiten-Umbau ist hd-shell.css auf allen Seiten abgemeldet, damit ist
   die Gegenwehr gegenstandslos.
   ⛔ Wer hd-shell.css je zurückholt, holt den Balken mit zurück. */
body.home{background:var(--nacht)}
.home #page.grid-container{max-width:none;background:var(--nacht)}
.home #content,.home #primary,.home #main{padding:0;margin:0;background:var(--nacht)}
.home .inside-article{background:transparent;padding:0;border:0;box-shadow:none;border-radius:0}
.home .entry-content{margin:0}
.home .entry-content > :first-child{margin-top:0}

/* Die beiden Hero-Knöpfe standen live untereinander statt nebeneinander:
   ihr Block-Container schrumpfte im Flex-Elternteil auf 228 px, also die Breite
   EINES Knopfes (am 02.09.2026 gemessen). Statt der Ursache im GP-Reset
   nachzugehen, wird das Verhalten hier explizit gesetzt — das hält unabhängig
   davon, was das Theme mitbringt. */
.held-reihe > div:first-child{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.held-reihe > div:first-child .tat{margin-left:0}