@font-face{font-family:'Fraunces';src:url('/assets/fonts/Fraunces.woff2') format('woff2');
  font-weight:100 900;font-display:swap}
/* Runde 22: Poppins wie im Kit (Social, Print, FAQ) statt Archivo. */
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-Bold.woff2') format('woff2');font-weight:700 900;font-display:swap}
*{font-synthesis-weight:none}
@property --winkel{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  /* Markenfarben, am 17.09.2026 in Ellis Dateien GEMESSEN, nicht uebernommen.
     Die frueher notierten Werte (#6E1221, #F4FD24, #FDFFA4) kommen im Original
     nicht vor. Quellen stehen im Styleguide, Blatt Farbe. */
  --basis:#4C0C14;    /* Rot dunkel, 69,5 % von keyvisual.png */
  --marke:#800034;    /* Wortmarke auf hellem Grund, keyvisual 2.jpg */
  --signal:#FC80A8;   /* Pink, 11,0 %: Wortmarke auf dunkel, Knoepfe, Schilder, Band */
  --weiss:#FFFFFF;
  --tanne:#435A26;    /* Tannengruen, aus Ellis Duftbaum (elemente.jpg) gemessen, Runde 7 */
  --gold:#F0B429;     /* nur Zeiger-Stern und Sterne */
  --gelb:#FCF894;     /* nur als Paar mit Gold fuer einen Stoerer, sonst nirgends */
  --rosa:#FDE3EC;     /* Signal 20 % auf Weiss: die helle Flaeche, Ton in Ton */
  /* Aliasse fuer aeltere Regeln, zeigen auf die Hauptfarben. */
  --leucht:var(--signal); --weich:var(--weiss);
  --tiefe:#3A0810; --ink:#2A0410;

  /* Rollen, Runde 3. Der Grund ist WEISS. Papier und Weich sind zu Akzentflaechen
     geworden: Karten, Baender, einzelne Sektionen. Sie tragen die Seite nicht mehr. */
  --weiss:#FFFFFF;
  --grund:#FFFFFF; --tief:#FDE3EC; --schrift:#800034; --neben:#8A3A52; --akzent:#800034;
  --linie:rgba(128,0,52,.13);

  /* Schein statt Glow. Auf Papier eine weiche Wolke ohne harten Kern, das ist
     Ellis helle Fassung. Der harte Neon-Glow gilt nur noch in .dunkel. */
  --halo-signal:drop-shadow(0 0 18px rgba(252,128,168,.55)) drop-shadow(0 0 48px rgba(252,128,168,.3));
  --halo-leucht:drop-shadow(0 0 16px rgba(252,128,168,.6)) drop-shadow(0 0 44px rgba(252,128,168,.32));
  --halo-marke:drop-shadow(0 0 22px rgba(252,128,168,.45));
  --glow-signal:0 0 6px #FC80A8,0 0 18px rgba(252,128,168,.75),0 0 42px rgba(252,128,168,.45);
  --glow-leucht:0 0 6px #FC80A8,0 0 18px rgba(252,128,168,.7),0 0 48px rgba(252,128,168,.4);
  --schein-signal:drop-shadow(0 0 5px rgba(252,128,168,.95)) drop-shadow(0 0 20px rgba(252,128,168,.55));
  --schein-leucht:drop-shadow(0 0 6px rgba(252,128,168,.9)) drop-shadow(0 0 26px rgba(252,128,168,.4));

  /* Glas, drei Stufen. Auf hellem Grund helles Glas. */
  --tanne-stern:var(--gold); --tanne-text:#4C0C14;
  --glas-pille:color-mix(in srgb,#FFFFFF 88%,transparent);
  --glas-dialog:color-mix(in srgb,#FFFFFF 92%,transparent);
  --glas-karte:color-mix(in srgb,#FFFFFF 86%,transparent);
  --glas-rand:rgba(128,0,52,.13);
  --glas-schein:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(128,0,52,.06);

  --rand:clamp(20px,5vw,64px); --spalte:1280px;
  --t1:8px; --t2:16px; --t3:clamp(22px,2.6vw,32px);
  --t4:clamp(38px,5vh,64px); --t5:clamp(72px,11vh,128px);
  --weich-kurve:cubic-bezier(.22,.61,.36,1);
  /* Runde 7: Blazeface (Adobe Fonts, ein Schnitt, Gewicht 100). font-synthesis:none
     verhindert Fettung aus dem einen Schnitt; faellt sie aus, traegt Fraunces in 900. */
  --kopf:'ohno-blazeface-1','Fraunces',Georgia,'Times New Roman',serif;
  /* Nur fuer ASCII-Bilder, die Zeichenbreite tragen muessen. Systemschrift, kein
     Download, zaehlt nicht als dritte Markenschrift. */
  --fest:ui-monospace,SFMono-Regular,Menlo,monospace;
  --text:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* --mono ist entfallen. Zeiten, Daten und Preise laufen in Archivo mit
     tabular-nums und gesperrten Versalien, siehe .mono unten. */
}
*{box-sizing:border-box}
/* Muss oben stehen: jede Klassenregel mit display schlaegt sonst das eingebaute [hidden]. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:#FFFFFF}
/* Weiss ist der Regelfall (Runde 3). Creme nur noch als Flaeche, nie als Grund. */
.hell{--grund:#FFFFFF;--tief:#FDE3EC;--schrift:#800034;--neben:#8A3A52;--akzent:#800034;
  --linie:rgba(128,0,52,.13);
  --glas-pille:color-mix(in srgb,#FFFFFF 88%,transparent);
  --glas-dialog:color-mix(in srgb,#FFFFFF 92%,transparent);
  --glas-karte:color-mix(in srgb,#FFFFFF 86%,transparent);--glas-rand:rgba(128,0,52,.13);
  --glas-schein:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(128,0,52,.06);
  background:var(--grund);color:var(--schrift)}
/* Dunkel ist die Ausnahme: Auftakt, Fuss, Adventskalender. Nur hier leuchtet Neon. */
.dunkel{--grund:#4C0C14;--tief:#3A0810;--schrift:#FFFFFF;--neben:#E0B6AC;--akzent:#FC80A8;
  --linie:rgba(255,255,255,.16);
  --glas-pille:color-mix(in srgb,#4C0C14 88%,transparent);
  --glas-dialog:color-mix(in srgb,#3A0810 92%,transparent);
  --glas-karte:rgba(255,255,255,.08);--glas-rand:rgba(255,255,255,.2);
  --glas-schein:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.2);
  --halo-signal:var(--schein-signal);--halo-leucht:var(--schein-leucht);--halo-marke:var(--schein-signal);
  background:var(--grund);color:var(--schrift)}

/* Korn liegt in der FLAECHE, nicht ueber dem Fenster, also scrollt es mit.
   Auf Papier ein Hauch (multiply), auf Basis deutlich (screen). */
.hell,.dunkel,.fuss{position:relative;isolation:isolate}
.hell::after,.dunkel::after,.fuss::after{content:"";position:absolute;inset:0;
  pointer-events:none;z-index:6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}
.hell::after{opacity:.016;mix-blend-mode:multiply}
.dunkel::after,.fuss::after{opacity:.07;mix-blend-mode:screen}

body{margin:0;background:var(--grund);color:var(--schrift);
  font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%}
img,video{display:block}
a{color:inherit}
.mono,.chip,.zahl,time,.preis{font-family:var(--text);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;letter-spacing:.01em}
.skip{position:absolute;left:-9999px;top:0;padding:14px 20px;background:var(--signal);
  color:var(--ink);z-index:300;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--spalte);margin:0 auto;padding:0 var(--rand)}
.wrap.schmal{max-width:780px}
.nur-lesegeraet{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.nojs .nur-js{display:none}

/* ---------------------------------------------------------------- Ladeschirm */
/* Draussen vor dem Markt ist es dunkel, die Neonreklame geht an, dann tritt man
   ein und es wird hell. Deshalb ist der Schirm die einzige grosse dunkle Flaeche
   und der Uebergang zum hellen Hero ist der Eintritt.

   Sichtbar NUR unter html.laedt, gesetzt allein vom Inline-Skript im Kopf: ohne
   JavaScript gibt es den Schirm nicht. position:fixed, keine Layoutwirkung, kein CLS.
   z-index 500, damit er ueber dem Tor liegt (das steht spaeter im DOM und hatte
   vorher dieselbe Stufe, der Schirm lag darunter und war unsichtbar). */
.ladeschirm{position:fixed;inset:0;z-index:500;display:flex;align-items:center;
  justify-content:center;background:var(--basis);opacity:0;visibility:hidden;
  transition:opacity .34s var(--weich-kurve),visibility 0s linear .34s}
html.laedt .ladeschirm{opacity:1;visibility:visible;transition-delay:0s}
html.laedt{overflow:hidden}
html.laedt.flug .ladeschirm{background:transparent;pointer-events:none;transition:background .5s var(--weich-kurve)}
html.laedt.flug .lade__unten,html:not(.laedt) .ladeschirm .lade__unten{opacity:0;transition:opacity .2s}
.lade{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(26px,5vh,48px)}
/* Runde 22: ASCII nur noch hier. Der Keyvisual-Baum baut sich aus Zeichen auf (ascii_bild.py). */
.lade__ascii{position:absolute;z-index:0;right:clamp(4%,7vw,9%);top:6%;width:clamp(190px,23vw,380px);
  aspect-ratio:1100/1806;pointer-events:none;opacity:1;transition:opacity .3s}
html.laedt.flug .lade__ascii{opacity:0}
@media(max-width:700px){.lade__ascii{width:130px;right:3%;top:64px}}
@media(prefers-reduced-motion:reduce){.lade__ascii{display:none}}
.lade__marke{position:relative;width:min(72vw,560px);line-height:0;transform-origin:50% 50%;
  will-change:transform;color:var(--signal)}
.lade__marke.fliegt{transition:transform .68s cubic-bezier(.22,1,.36,1)}
.lade__marke svg{width:100%;height:auto;display:block}
/* Zwei Kopien: unten der Glow (ein filter auf der ganzen Gruppe), oben die scharfe Roehre. */
.lade__marke .neon--glow{position:absolute;inset:0;filter:blur(9px);opacity:.9}
/* Jeder Pfad zuendet mit Flackern in seiner Reihenfolge (--i aus site.py), der Stern
   zuletzt mit einem kleinen Pop. Summe der Verzoegerungen bleibt unter der Mindestzeit
   des Schirms, sonst trifft der Flug bewegte Pfade. */
.neon path{opacity:0;animation:neon-an .5s steps(1,end) calc(var(--i,0)*70ms) both}
.neon path[data-stern]{animation:neon-stern .62s steps(1,end) calc(var(--i,0)*70ms + 160ms) both;
  transform-origin:50% 50%;transform-box:fill-box}
@keyframes neon-an{0%{opacity:0}18%{opacity:.45}30%{opacity:0}48%{opacity:1}62%{opacity:.3}78%{opacity:1}100%{opacity:1}}
@keyframes neon-stern{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.18)}55%{opacity:.4}70%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
/* Ankommend (html.weiter) steht alles sofort, der Besucher hat das Zuenden beim Weggehen gesehen. */
html.weiter .neon path{animation-duration:0s;animation-delay:0s}
/* Unter der Marke die Laufzeit in der Hausschrift, darunter ein Strich, der auflaeuft.
   Vorher stand dort eine Ladezahl in Mono, die las sich wie ein Systemdialog. */
.lade__unten{display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .2s}
.lade__laufzeit{font-family:var(--kopf);font-weight:500;font-size:clamp(15px,1.8vw,20px);
  letter-spacing:.01em;color:var(--weiss);margin:0;opacity:.85}
.lade__strich{width:min(50vw,240px);height:2px;background:rgba(255,255,255,.2);overflow:hidden;border-radius:2px}
.lade__strich i{display:block;height:100%;width:var(--p,0%);background:var(--signal);
  box-shadow:var(--glow-signal);transition:width .18s linear}

/* ---------------------------------------------------------------- Navigation */
/* Hell ist der Regelfall, .auf-dunkel ist die Ausnahme (Auftakt, Fuss, Advent).
   Vorher war es umgekehrt. Die Wortmarke leuchtet hier NICHT, sie steht flach in
   der Markenfarbe: ein Logo in der Leiste ist eine Kennung, kein Leuchtschild. */
.pille{position:fixed;top:clamp(.7rem,1.6vh,1.2rem);left:50%;transform:translateX(-50%);
  z-index:200;width:min(calc(100% - 2*var(--rand)),var(--spalte));
  display:flex;align-items:center;gap:1rem;isolation:isolate;
  padding:.45rem .5rem .45rem 1.1rem;border-radius:999px;
  background:color-mix(in srgb,#FFFFFF 88%,transparent);border:1px solid transparent;color:var(--marke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 20px rgba(128,0,52,.07);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  transition:background .35s var(--weich-kurve),color .35s var(--weich-kurve)}
/* Der winterliche Lauf am Rand: ein 1 px Verlauf, der um die Pille wandert, wie eine
   Lichterkette. Maskentrick, damit nur der Rand vom Verlauf uebrig bleibt. Auf hellem
   Grund deutlich zurueckgenommen, sonst flimmert er. */
.pille::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--winkel),rgba(128,0,52,.14) 0%,#FC80A8 14%,#FFFFFF 30%,rgba(128,0,52,.14) 48%,rgba(128,0,52,.14) 58%,#FC80A8 70%,#FFFFFF 84%,rgba(128,0,52,.14) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1;
  animation:pille-rand 14s linear infinite}
@keyframes pille-rand{to{--winkel:360deg}}
.pille.dicht{background:color-mix(in srgb,#FFFFFF 96%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 28px rgba(128,0,52,.1)}
.pille.auf-dunkel{background:color-mix(in srgb,#4C0C14 88%,transparent);color:#FFFFFF}
.pille.auf-dunkel.dicht{background:color-mix(in srgb,#4C0C14 96%,transparent)}
.pille__marke{display:flex;align-items:center;min-height:44px;flex:none;color:currentColor;transition:color .25s}
.pille__marke svg{height:26px;width:auto}
.pille.auf-dunkel .pille__marke{color:var(--signal)}
.pille__weg{display:flex;gap:1.4rem;margin-left:auto;font-size:14px;font-weight:500}
.pille__weg a{text-decoration:none;color:#8A3A52;display:inline-flex;align-items:center;
  min-height:44px;position:relative;transition:color .2s}
.pille__weg a::after{content:"";position:absolute;left:0;right:100%;bottom:12px;height:1.5px;
  background:currentColor;transition:right .3s var(--weich-kurve)}
.pille__weg a:hover,.pille__weg a[aria-current]{color:var(--marke)}
.pille__weg a:hover::after,.pille__weg a[aria-current]::after{right:0}
.pille.auf-dunkel .pille__weg a{color:#E0B6AC}
.pille.auf-dunkel .pille__weg a:hover,.pille.auf-dunkel .pille__weg a[aria-current]{color:#FFFFFF}
@media(max-width:980px){.pille__weg{display:none}}

/* ---- Burger und Menuefeld (Runde 10). Vorher waren die Wege unter 980 px einfach
   weg, ohne Ersatz: von unterwegs kam man nur ueber die Startseite irgendwohin. */
/* Die Balken sitzen absolut. Im Raster standen sie nicht symmetrisch zur Mitte,
   dadurch ergab der Versatz beim Oeffnen ein Groesserzeichen statt eines Kreuzes. */
.burger{display:none;position:relative;width:44px;height:44px;flex:none;border:0;
  background:transparent;cursor:pointer;padding:0;color:currentColor}
.burger span{position:absolute;left:12px;width:20px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--weich-kurve),opacity .2s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:980px){.burger{display:block}.pille .knopf.pille__knopf{display:none}}
.menue{position:fixed;z-index:199;left:50%;transform:translateX(-50%);
  top:calc(clamp(.7rem,1.6vh,1.2rem) + 62px);
  width:min(calc(100% - 2*var(--rand)),var(--spalte));
  border-radius:22px;padding:.5rem;
  background:color-mix(in srgb,#FFFFFF 97%,transparent);
  box-shadow:0 18px 50px rgba(76,12,20,.18);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.menue[hidden]{display:none}
.menue__weg{display:grid}
.menue__weg a{display:flex;align-items:center;min-height:52px;padding:0 .9rem;border-radius:14px;
  text-decoration:none;color:var(--marke);font-weight:600;font-size:17px}
.menue__weg a+a{border-top:1px solid rgba(128,0,52,.1)}
.menue__weg a[aria-current]{background:rgba(252,128,168,.18)}
.menue__weg a.menue__haupt{margin-top:.45rem;background:var(--marke);color:var(--weiss);justify-content:center;border-top:0}
@media(min-width:981px){.menue{display:none}}

/* ---- Mitlaufendes Inhaltsverzeichnis (Runde 10). Erst ab 1200 px: darunter macht
   der Burger dieselbe Arbeit, und auf 390 px kollidiert eine Randspalte mit dem Daumen.
   Eigener heller Grund, weil die Spalte auch ueber dunklen Abschnitten steht. */
.inhalt{display:none}
@media(min-width:1200px){
  /* Runde 11: kompakter und erst beim Scrollen. Im Hero stand die Spalte vorher
     neben der Wortmarke und nahm ihr die Luft. Sichtbar wird sie ueber .da, das
     setzt cbe.js, sobald der Hero oben aus dem Bild ist. Seiten ohne Hero
     bekommen .da sofort. */
  .inhalt{display:block;position:fixed;right:clamp(.8rem,1.8vw,1.8rem);top:50%;
    transform:translateY(-50%) translateX(10px);
    z-index:120;max-width:172px;padding:.4rem .5rem;border-radius:14px;
    background:color-mix(in srgb,#FFFFFF 86%,transparent);
    box-shadow:0 6px 24px rgba(76,12,20,.09);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s var(--weich-kurve),transform .35s var(--weich-kurve),visibility .35s;
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
  .inhalt.da{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)}
  .inhalt__liste{list-style:none;margin:0;padding:0;display:grid;gap:0}
  .inhalt__liste a{display:flex;align-items:center;gap:.45rem;min-height:24px;padding:.05rem .1rem;
    text-decoration:none;color:#7A2E44;font-size:11.5px;font-weight:500;line-height:1.25;
    transition:color .25s var(--weich-kurve)}
  .inhalt__liste i{width:10px;height:2px;border-radius:2px;background:currentColor;opacity:.4;flex:none;
    transition:width .3s var(--weich-kurve),opacity .3s}
  .inhalt__liste a:hover{color:var(--marke)}
  .inhalt__liste a.hier{color:var(--marke);font-weight:600}
  .inhalt__liste a.hier i{width:20px;opacity:1;background:var(--signal)}
}

/* ---- Partner (Runde 10): typografische Reihe statt Logowand. */
.partner{list-style:none;margin:0;padding:0;display:grid}
.partner__reihe{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.4rem .9rem;
  padding:1.05rem 0;border-top:1px solid rgba(128,0,52,.14)}
.partner__reihe:last-child{border-bottom:1px solid rgba(128,0,52,.14)}
.partner__rolle{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8A3A52}
.partner__name{font-family:var(--kopf);font-size:clamp(22px,2.4vw,30px);line-height:1.1;
  color:var(--marke);text-decoration:none}
.partner__name:hover{text-decoration:underline;text-underline-offset:4px}
.partner__insta{font-size:14px;color:#8A3A52;text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.partner__reihe{grid-template-columns:1fr}}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:50px;padding:0 26px;border-radius:999px;border:1px solid var(--marke);
  background:var(--marke);color:var(--weiss);text-decoration:none;cursor:pointer;
  font-family:var(--text);font-weight:600;font-size:15px;position:relative;
  transition:transform .2s var(--weich-kurve),box-shadow .3s,background .25s,color .25s,border-color .25s}
.knopf:hover{box-shadow:0 8px 26px rgba(128,0,52,.28)}
.knopf.leer{background:transparent;color:var(--marke);border-color:rgba(128,0,52,.3)}
.knopf.leer:hover{border-color:var(--marke);box-shadow:none;background:rgba(128,0,52,.05)}
/* Auf Signal schreibt Basis, nicht die Markenfarbe: gemessen sind das 6,4:1
   statt 4,5:1, und die Markenfarbe auf Pink lag knapp unter der Schwelle. */
.knopf.signal{background:var(--signal);border-color:var(--signal);color:var(--basis)}
.knopf.signal:hover{box-shadow:0 8px 26px rgba(252,128,168,.45)}
/* Runde 7: auf dunkel ist der Knopf Signal, flach, ohne Glow (Vladi: "muss nicht leuchten"). */
.dunkel .knopf{background:var(--signal);border-color:var(--signal);color:var(--basis)}
.dunkel .knopf:hover{box-shadow:0 8px 26px rgba(252,128,168,.35);background:#FF93B6;border-color:#FF93B6}
.dunkel .knopf.leer{background:transparent;color:var(--weiss);border-color:var(--glas-rand)}
.dunkel .knopf.leer:hover{border-color:var(--signal);color:var(--signal)}
.pille .knopf{min-height:44px;padding:0 22px;font-size:14px}
.pille.auf-dunkel .knopf{background:var(--signal);border-color:var(--signal);color:var(--basis)}

/* ---------------------------------------------------------------- Chips */
.chip{display:inline-flex;align-items:center;gap:.5em;min-height:34px;padding:0 14px;
  border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.01em;
  border:1px solid rgba(128,0,52,.2);color:var(--marke);background:rgba(255,255,255,.4);white-space:nowrap}
.chip .zahl,.chip time{font-family:var(--text);font-variant-numeric:tabular-nums;font-size:.95em}
.chip.leucht{background:var(--signal);color:var(--basis);border-color:transparent}
.chip.signal{background:var(--signal);color:var(--basis);border-color:transparent}
.chip.beispiel{background:repeating-linear-gradient(-45deg,rgba(128,0,52,.09) 0 6px,transparent 6px 12px);
  border-style:dashed;color:var(--neben)}
.dunkel .chip{color:var(--weiss);border-color:var(--glas-rand);background:rgba(0,0,0,.16)}
.dunkel .chip.leucht{background:var(--signal);color:var(--basis)}
.dunkel .chip.signal{background:var(--signal);color:var(--basis)}
.dunkel .chip.beispiel{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.16) 0 6px,transparent 6px 12px);color:var(--signal)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
/* Runde 7: Laufzeit und Zeiten im Hero als Zeile mit Punkten, keine Chips mehr (Vladi). */
.fakten{display:flex;flex-wrap:wrap;gap:0 1.5em;margin:0;font-size:15px;color:var(--weiss);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.fakten span{display:inline-flex;align-items:center;gap:.7em;min-height:40px}
.fakten b{font-weight:600;color:var(--signal)}
.fakten span+span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal);opacity:.75}

/* Das Schnee-Canvas aus Runde 2. Diese Regel sass im Schluesselbund-Block und ist
   beim Ersetzen mitgefallen (Falle 6): ohne sie wird das Canvas statisch, 900 px
   hoch, und schiebt den Hero aus dem Bild. Die Pruefung "schon da" hatte nur das
   .schnee{display:none} in den Media-Bloecken gefunden. */
.schnee{position:fixed;inset:0;z-index:210;pointer-events:none;width:100%;height:100%}
html.nojs .schnee{display:none}

/* ---------------------------------------------------------------- Hero, Foto */
/* Runde 4: ein Foto fuellt den Hero, die Wortmarke steht gross im Verlauf davor,
   ein Aktionsschild haengt an der Schnur ins Bild. Die Bilder wechseln alle 6 s.
   Der Schleier ist eine DECKENDE Flaeche unten plus Verlauf darueber, sonst misst
   kein Werkzeug den Kontrast und oben im Verlauf steht der Text ungeschuetzt. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(120px,18vh,180px) 0 clamp(56px,9vh,96px);overflow:hidden;isolation:isolate}
/* Runde 22: der Hero ist das Keyvisual. Rot dunkel flaechig mit Koernung, keine Fotos,
   kein Verlauf (Elli: Verlaeufe und eingefaerbte Overlays raus). */
.hero__grund{position:absolute;inset:0;z-index:0;background:var(--basis) url('/assets/kit/koernung.png') repeat;
  background-size:256px 256px}
.hero__deko{position:absolute;z-index:1;pointer-events:none;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.hero__deko--stern1{width:clamp(70px,8vw,130px);left:clamp(52%,58vw,62%);top:22%;transform:rotate(-12deg)}
.hero__deko--stern2{width:clamp(130px,16vw,260px);left:-4%;bottom:-6%;transform:rotate(14deg)}
.hero__deko--disco1{width:clamp(70px,7vw,120px);right:-28px;top:58%}
.hero__deko--disco2{width:clamp(60px,6vw,100px);left:-24px;top:34%}
@media(max-width:700px){.hero__deko--stern1{left:auto;right:42%;top:18%}.hero__deko--disco2{display:none}}
.hero__in{position:relative;z-index:3;display:grid;gap:var(--t3);align-content:end}
.hero__marke{margin:0;line-height:0;color:var(--signal)}
.hero__marke svg{width:min(100%,640px);height:auto;display:block;filter:var(--schein-signal)}
.hero__claim{max-width:34ch;font-size:clamp(19px,2.2vw,24px);line-height:1.38;color:var(--weiss);margin:0}
.hero__fakten{margin:0}
/* Das Aktionsschild: Etikettstreifen an einer Schnur, rechts oben, leicht gedreht. */
.hero__aktion{position:absolute;z-index:4;top:0;right:clamp(24%,30vw,34%);text-decoration:none;
  display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;
  animation:schild-pendel 7s ease-in-out infinite}
.hero__schnur{display:block;width:2px;height:clamp(140px,26vh,300px);background:rgba(255,255,255,.55)}
.hero__schild{display:block;padding:.55em 1.1em;border-radius:.45em;background:var(--signal);color:var(--basis);
  font-family:var(--kopf);font-weight:900;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.005em;
  transform:rotate(-3deg);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.hero__aktion:hover .hero__schild,.hero__aktion:focus-visible .hero__schild{transform:rotate(0) scale(1.04)}
@keyframes schild-pendel{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@media(max-width:700px){.hero__aktion{right:36%}.hero__schnur{height:clamp(90px,16vh,160px)}}
/* Runde 7: Ellis Duftbaum haengt an der Kette rechts im Hero und pendelt zum Zeiger (JS,
   GSAP). Die Laufzeit steht als Signal-Schild darunter und kommt aus content.json. */
.hero__tanne{position:absolute;z-index:2;right:clamp(4%,7vw,9%);top:-2%;width:clamp(190px,23vw,380px);
  transform-origin:50% 0;pointer-events:none;display:flex;flex-direction:column;align-items:center;will-change:transform}
.hero__tanne img{width:100%;height:auto;display:block}
.hero__tanne .hero__kette{width:30%;margin-bottom:-4%;position:relative;z-index:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
/* Runde 22: Vladis Baum von Flaeche 9 als Bild, Glow und Schatten sind eingerechnet. */
.hero__tanne .hero__baum{width:100%;height:auto}
@media(max-width:700px){.hero__tanne{width:130px;right:3%;top:56px}}
@media(prefers-reduced-motion:reduce){.hero__aktion{animation:none}.hero__deko{transform:none}}

/* ---------------------------------------------------------------- Aussteller (Runde 6) */
.aussteller{display:grid;gap:var(--t3);grid-template-columns:1fr}
@media(min-width:640px){.aussteller{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.aussteller{grid-template-columns:repeat(3,1fr)}.akarte:nth-child(3n+2){margin-top:var(--t5)}}
.akarte{position:relative;display:flex;flex-direction:column;gap:var(--t1);background:var(--weiss);border-radius:26px;padding:14px 14px var(--t3);
  border:1px solid rgba(128,0,52,.14);overflow:hidden;isolation:isolate;
  transition:transform .35s var(--weich-kurve),box-shadow .35s,border-color .35s}
/* Runde 7: Lichtkarte statt Himmel-Flaeche und Chips. Ein Lichtschein in Signal hinter der
   Karte, eine duenne Linie, Kategorie und Zeit als Text (Vladi: keine Bubbles). */
.akarte::before{content:"";position:absolute;left:50%;bottom:-42%;z-index:-1;width:124%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(252,128,168,.36) 0%,rgba(252,128,168,.11) 46%,transparent 70%)}
.akarte:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 18px 40px rgba(76,12,20,.12);border-color:rgba(252,128,168,.65)}
.akarte .szene{margin:0;border-radius:18px}
.akarte__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:6px;
  font-family:var(--text);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.akarte__nr{color:var(--neben)}
.akarte__kat{color:var(--marke);font-weight:600}
.akarte h3{margin:0;font-family:var(--kopf);font-weight:900;font-size:clamp(21px,2vw,26px);letter-spacing:-.005em}
.akarte p{margin:0;font-size:15px;color:var(--neben)}
.akarte__fuss{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;
  padding-top:var(--t2);border-top:1px solid var(--linie);font-size:13.5px;color:var(--neben)}
.akarte__fuss a{color:var(--marke);text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.akarte__fuss a:hover{text-decoration:underline}
.aussteller__kopf{display:grid;gap:var(--t2);grid-template-columns:1fr;align-items:end;margin-bottom:var(--t4)}
@media(min-width:900px){.aussteller__kopf{grid-template-columns:1.2fr 1fr}}

/* ---------------------------------------------------------------- Deko (Zeichen-Raster) */
/* Runde 6: Flocke, Stern, Tanne als Halbton aus Zeichen, PNG-Maske plus Farbe aus CSS.
   Ein bis zwei je Blatt, am Rand, hinter dem Inhalt, schwebt leicht, weicht dem Zeiger aus. */
.blatt{overflow:clip}
.deko{position:absolute;z-index:0;pointer-events:none;width:var(--deko-b,240px);aspect-ratio:1/1;
  background:var(--deko) center/contain no-repeat;opacity:1;will-change:transform;
  filter:drop-shadow(0 8px 14px rgba(76,12,20,.22));
  /* Runde 7: --neig folgt dem Zeiger, --srot dem Scrollen, --schub ist der kurze Stoss bei Naehe (JS). */
  transform:translate3d(var(--dx,0px),var(--dy,0px),0) rotate(calc(var(--rot,0deg) + var(--neig,0deg) + var(--srot,0deg))) scale(var(--schub,1))}
.deko--rechts-oben{right:calc(-1 * var(--deko-b) * .25);top:var(--t3)}
.deko--links-oben{left:calc(-1 * var(--deko-b) * .25);top:var(--t3)}
.deko--rechts-unten{right:calc(-1 * var(--deko-b) * .2);bottom:var(--t3)}
.deko--links-unten{left:calc(-1 * var(--deko-b) * .2);bottom:var(--t3)}
.blatt>.wrap{position:relative;z-index:1}
.deko--zuckerstange,.deko--flocke_haenger,.deko--bogen_haenger{aspect-ratio:3/4}
@media(max-width:700px){.deko{width:calc(var(--deko-b,240px) * .55)}}
/* Runde 24 (Vladi): Deko liegt nie auf Text. Unter 1100 px ist neben der Spalte kein Platz, dort haengt
   jede Deko oben rechts im Anschnitt, ueber der Kopfzeile. Gemessen in pruefen.mjs bei 390, 768, 1440 px. */
@media(max-width:1100px){.deko{top:calc(var(--deko-b) * -.42)!important;bottom:auto!important;
  left:auto!important;right:calc(var(--deko-b) * -.12)!important;width:calc(var(--deko-b,240px) * .5)}
  .deko--zuckerstange,.deko--flocke_haenger,.deko--bogen_haenger{top:calc(var(--deko-b) * -.55)!important}}
/* Partner: rechts neben der Liste ist kein Platz, die Kugel haengt unter ihr im Rand des Blatts. */
@media(min-width:1101px){#partner .deko{bottom:calc(var(--deko-b) * -.55)}}
/* Runde 22: Sticker wie im Kit (C1), Blazeface auf Pink oder Gelb, gekippt, mit Schein. */
.sticker{display:inline-block;vertical-align:middle;margin:0 .3em;padding:.28em .8em .34em;border-radius:.55em;
  font-family:var(--kopf);font-weight:900;font-size:clamp(15px,1.5vw,20px);line-height:1;letter-spacing:.01em;
  text-transform:uppercase;color:var(--marke);transform:rotate(var(--dreh,-5deg));white-space:nowrap}
.sticker--pink{background:var(--signal);box-shadow:0 0 14px rgba(252,128,168,.75)}
.sticker--gelb{background:#FCF894;box-shadow:0 0 14px rgba(252,248,148,.7)}
.kopfzeile+.sticker,.sticker+.zweispalt{position:relative}
.kitbaum{width:min(100%,260px);height:auto;display:block}
@media (prefers-reduced-motion:reduce){.deko{transform:none!important}}

/* ---------------------------------------------------------------- Zeiger */
/* Ein Punkt mit Nachlauf, magnetisch an Knoepfen, Wegen und Anhaengern: der Knopf
   rueckt dem Zeiger entgegen, der Punkt zieht zur Mitte. Nur bei feinem Zeiger,
   nie auf Touch, nie bei reduzierter Bewegung. Der Systemzeiger bleibt sichtbar. */
.zeiger{position:fixed;left:0;top:0;z-index:250;pointer-events:none;width:0;height:0;
  opacity:0;will-change:transform;transition:opacity .25s var(--weich-kurve)}
.zeiger.da{opacity:1}
/* Runde 5: der Zeiger ist Ellis Stern, ohne Kontur, in Leucht mit weichem Schatten,
   damit er auf hell und dunkel steht. Ueber Links waechst er und dreht, daneben
   erscheint ein Glas-Etikett mit dem Ziel (data-ziel), ueber Fotos der Bildtext. */
.zeiger__stern{position:absolute;left:-14px;top:-14px;width:28px;height:28px;color:var(--gold);
  filter:drop-shadow(0 1px 2px rgba(76,12,20,.55));transform-origin:50% 50%;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),color .2s}
.zeiger__stern svg{display:block;width:100%;height:100%;fill:currentColor}
.zeiger__stern svg *{fill:currentColor}
.zeiger.magnet .zeiger__stern{transform:scale(1.43) rotate(22deg)}
/* Runde 7: der Stern bleibt auf hell und dunkel Gold (Vladi), dahinter ein Schweif aus kleineren Sternen. */
.schweif{position:fixed;left:0;top:0;z-index:249;pointer-events:none}
.schweif i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;color:var(--gold);opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 1px 2px rgba(76,12,20,.4))}
.schweif i svg{display:block;width:100%;height:100%;fill:currentColor}
.schweif i svg *{fill:currentColor}
@media (hover:none),(pointer:coarse){.schweif{display:none}}
.zeiger__etikett{position:absolute;left:22px;top:18px;white-space:nowrap;font-family:var(--text);font-weight:600;
  font-size:12.5px;line-height:1;padding:8px 12px;border-radius:999px;color:var(--marke);
  background:var(--glas-pille);border:1px solid var(--glas-rand);box-shadow:var(--glas-schein);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(6px);
  transition:opacity .22s var(--weich-kurve),transform .22s var(--weich-kurve)}
.zeiger.etikett .zeiger__etikett{opacity:1;transform:none}
.zeiger.ring .zeiger__stern{transform:scale(1.3)}
[data-magnet]{will-change:transform;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),background .25s,border-color .25s,color .25s}
[data-magnet].magnet{transition:transform .1s ease-out,background .25s,border-color .25s,color .25s}
@media (hover:none),(pointer:coarse){.zeiger{display:none}}

/* ---------------------------------------------------------------- ASCII */
.ascii-zeile{font-family:var(--fest);font-size:12px;letter-spacing:.02em;color:var(--neben);max-width:none;width:100%;
  white-space:nowrap;overflow:hidden;text-align:center;opacity:.7;user-select:none;margin:0;padding:var(--t2) 0}
.ascii-zeile b{color:var(--signal);font-weight:500}
.ascii{font-family:var(--fest);font-size:clamp(6px,1.05vw,11px);line-height:1;letter-spacing:0;
  color:var(--signal);margin:0;white-space:pre;text-align:center;user-select:none;
  text-shadow:0 0 10px rgba(252,128,168,.35)}
.ascii b{font-weight:400;color:var(--signal)}

/* ---------------------------------------------------------------- Blatt */
.blatt{padding:var(--t5) 0;position:relative}
.blatt__kopf{display:flex;align-items:center;gap:1rem;margin-bottom:var(--t4);
  font-family:var(--text);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neben)}
.blatt__linie{flex:1;height:1px;background:var(--linie)}
h1,h2,h3{font-family:var(--kopf);font-weight:900;font-synthesis:none;letter-spacing:-.01em;margin:0;
  font-optical-sizing:auto}
h1{font-size:clamp(40px,7vw,84px);line-height:.94}
h2{font-size:clamp(32px,5vw,62px);line-height:.98;margin-bottom:.5em;max-width:18ch;text-wrap:balance}
h3{font-size:clamp(20px,2.3vw,27px);line-height:1.15}
p{margin:0 0 1.1em;max-width:62ch}
.lede{font-size:clamp(18px,2.1vw,23px);line-height:1.45;max-width:50ch}
.neben{color:var(--neben)}
.klein{font-size:13px;color:var(--neben)}
.leucht{color:var(--signal)}
.signal{color:var(--signal)}
.glow{text-shadow:var(--glow-signal)}
.glow.leucht{text-shadow:var(--glow-leucht)}

/* ---------------------------------------------------------------- Zeiten */
.zeiten{display:grid;gap:var(--t2)}
@media(min-width:700px){.zeiten{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.zeit{padding:var(--t3);border-radius:22px;background:var(--glas-pille);border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--glas-schein),0 10px 30px rgba(76,12,20,.12);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  display:flex;flex-direction:column;gap:var(--t1)}
.zeit b{font-family:var(--kopf);font-weight:900;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.005em}
.zeit .zahl{font-size:clamp(18px,1.8vw,22px);color:var(--akzent);font-weight:500;white-space:nowrap}
.zeit.geschlossen{background:rgba(255,255,255,.55);border-style:dashed;border-color:rgba(255,255,255,.7);color:var(--neben)}
.zeit.geschlossen b{color:var(--neben)}
.vorbehalt{margin:var(--t2) 0 0;font-size:13px;color:var(--neben)}
.zweispalt{display:grid;gap:var(--t4);align-items:start}
@media(min-width:900px){.zweispalt{grid-template-columns:1fr 1fr}}


/* ---------------------------------------------------------------- Anfahrt */
/* Die Adresse allein traegt kein Blatt. Der Ort ist ein Bogen unter einem Gleis,
   also wird er gezeichnet, und die drei Wege stehen mit Minutenangabe daneben. */
.bogen{width:100%;height:auto;color:var(--marke);display:block}
.wege{list-style:none;margin:var(--t4) 0 0;padding:0;display:grid;gap:var(--t2)}
@media(min-width:760px){.wege{grid-template-columns:repeat(3,1fr)}}
.weg{padding:var(--t3);border-radius:22px;background:var(--glas-pille);border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--glas-schein),0 10px 30px rgba(76,12,20,.12);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  display:grid;grid-template-columns:1fr auto;gap:4px var(--t2);align-items:baseline}
.weg__wie{grid-column:1/-1;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--neben)}
.weg b{font-family:var(--kopf);font-weight:900;font-size:clamp(19px,2vw,23px);letter-spacing:-.005em}
.weg__zeit{font-size:15px;color:var(--marke);white-space:nowrap;opacity:.7}
.weg p{grid-column:1/-1;margin:6px 0 0;font-size:14.5px;color:var(--neben);max-width:none}

/* ---------------------------------------------------------------- Mitmachen */
/* Vorher eine breite Lichtkarte mit zwei gleich grossen Knoepfen, die nichts zeigte.
   Jetzt drei Schritte, ein Weg, und der Karabiner als Zeichen des Blattes. */
.mitmachen{display:grid;gap:var(--t4);align-items:center}
@media(min-width:900px){.mitmachen{grid-template-columns:1.25fr .75fr}}
.schritte{list-style:none;margin:var(--t4) 0 0;padding:0;display:grid;gap:var(--t3);counter-reset:s}
.schritt{display:grid;grid-template-columns:auto 1fr;gap:var(--t3);align-items:start}
.schritt__nr{font-size:14px;color:var(--marke);font-weight:600;padding-top:3px;
  min-width:2.4em;border-top:2px solid var(--signal)}
.schritt b{display:block;font-family:var(--kopf);font-weight:900;font-size:clamp(19px,2vw,23px);
  letter-spacing:-.02em;margin-bottom:.25em}
.schritt p{margin:0;font-size:15px;color:var(--neben)}
.mitmachen__wege{display:flex;align-items:center;gap:var(--t2);flex-wrap:wrap;margin:var(--t4) 0 0}
.mitmachen__wege .neben{font-size:15px}
.mitmachen__wege a[href^="mailto"]{color:var(--schrift);text-decoration:underline;text-underline-offset:3px}
/* Das Bild rechts steht sofort scharf. Karabiner und Kette sind am 17.09.2026
   gestrichen: Vladi, "das was da unten spindelt kann raus". */
.mitmachen__bild{justify-self:center;width:min(100%,380px)}
/* Runde 10: kein Freisteller mehr, ein echtes Standfoto. */
.mitmachen__szene{border-radius:20px;overflow:hidden;transform:rotate(-1.5deg);
  box-shadow:0 22px 44px rgba(76,12,20,.28)}
.mitmachen__szene img{width:100%;height:100%;object-fit:cover;display:block}


/* ---------------------------------------------------------------- Farbflächen */
/* Ab Runde 3 tragen diese Blaetter die Farbe: der Grund ist weiss, Creme und Signal
   sind Flaechen, die einzelne Sektionen herausheben.
   Auf Signal schreibt Basis (6,4:1), nie die Markenfarbe (4,47:1, zu wenig). */
.signalkarte{--grund:#FC80A8;--tief:#FDA8C4;--schrift:#3A0810;--neben:#4C0C14;--akzent:#3A0810;
  --linie:rgba(76,12,20,.22);background:var(--grund);color:var(--schrift)}
/* Runde 7: der Knopf auf Signal ist Weiss mit Marke, ein weicher Lichtschein dahinter (Vladi). */
.signalkarte .knopf{background:var(--weiss);border-color:var(--weiss);color:var(--marke);
  box-shadow:0 0 0 6px rgba(255,255,255,.2),0 0 38px rgba(255,255,255,.55)}
.signalkarte .knopf:hover{box-shadow:0 0 0 9px rgba(255,255,255,.28),0 0 56px rgba(255,255,255,.85)}
.signalkarte .knopf.leer{background:transparent;color:var(--basis);border-color:rgba(76,12,20,.35)}
.signalkarte .chip{background:rgba(255,255,255,.34);border-color:rgba(76,12,20,.25);color:var(--basis)}
.signalkarte .schritt__nr{color:var(--basis);border-top-color:var(--basis)}
.weichblatt{--grund:#FDE3EC;--tief:#FBD0DF;background:var(--grund)}
.signalkarte{border-radius:clamp(24px,3.4vw,44px);padding:clamp(38px,5.5vw,76px) clamp(24px,4vw,64px);
  position:relative;overflow:hidden;isolation:isolate}
/* Band aus Leucht als Trenner zwischen zwei Blaettern, statt der ASCII-Zeile. */
.band{background:var(--signal);color:var(--basis);padding:var(--t3) 0;overflow:hidden}
.band__spur{display:flex;gap:2.5rem;width:max-content;font-family:var(--kopf);font-weight:900;
  font-size:clamp(17px,2vw,22px);letter-spacing:-.01em;white-space:nowrap;
  animation:band-lauf 34s linear infinite}
.band__spur span{display:inline-flex;align-items:center;gap:2.5rem}
.band__spur i{font-style:normal;opacity:.5}
@keyframes band-lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band__spur{animation:none}}

/* ---------------------------------------------------------------- Karten (Glas 3) */
.karten{display:grid;gap:var(--t2)}
@media(min-width:640px){.karten{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.karten{grid-template-columns:repeat(3,1fr)}}
.karte{position:relative;display:flex;flex-direction:column;gap:var(--t1);padding:var(--t3);
  border-radius:24px;background:var(--glas-karte);border:1px solid var(--glas-rand);
  box-shadow:var(--glas-schein);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  text-decoration:none;color:inherit;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--weich-kurve),border-color .3s,background .3s}
.karte:hover{transform:translateY(-4px);border-color:rgba(252,128,168,.55);background:rgba(255,255,255,.08)}
.karte__bild{aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--tief);margin:0 0 var(--t1);
  display:grid;place-items:center;color:var(--signal)}
.karte__bild img{width:100%;height:100%;object-fit:cover}
.karte__bild svg{width:38%;height:auto;opacity:.55;filter:var(--schein-signal)}
.karte h3{font-size:clamp(19px,2vw,24px)}
.karte p{margin:0;font-size:15px;color:var(--neben)}
.karte__fuss{margin-top:auto;padding-top:var(--t2);display:flex;justify-content:space-between;
  align-items:center;gap:var(--t1);flex-wrap:wrap}
.karte__nr{position:absolute;top:var(--t2);right:var(--t2);font-family:var(--text);font-size:11px;
  letter-spacing:.14em;color:var(--neben)}
/* Getraenke */
.karte--liste{gap:0}
.karte--liste h3{margin-bottom:var(--t2)}
.zeile{display:grid;grid-template-columns:1fr auto;gap:var(--t2);align-items:baseline;
  padding:12px 0;border-top:1px solid var(--linie)}
.zeile:last-child{border-bottom:1px solid var(--linie)}
.zeile b{font-weight:600;display:block}
.zeile i{font-style:normal;font-size:13px;color:var(--neben)}
.zeile .preis{font-size:17px;color:var(--akzent);font-weight:600;white-space:nowrap}
.zeile .preis::after{content:" €";font-size:.8em;color:var(--neben)}

/* ---------------------------------------------------------------- Lichtkarte (hell) */
.lichtkarte{position:relative;overflow:hidden;isolation:isolate;border-radius:clamp(22px,3.2vw,42px);
  background:var(--weiss);color:var(--basis);border:1px solid rgba(128,0,52,.16);padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px);
  --grund:#FFFFFF;--tief:#FDE3EC;--schrift:#4C0C14;--neben:#6E2A3E;--akzent:#800034;--linie:rgba(128,0,52,.18)}
.lichtkarte::before{content:"";position:absolute;right:-18%;top:-40%;z-index:-1;width:min(70%,620px);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(252,128,168,.42) 0%,rgba(252,128,168,.14) 45%,transparent 70%)}
.lichtkarte h2{color:var(--basis)}
.lichtkarte .knopf{background:var(--marke);border-color:var(--marke);color:var(--weiss)}
.lichtkarte .knopf:hover{box-shadow:0 0 22px rgba(128,0,52,.45)}
.lichtkarte .knopf.leer{background:transparent;color:var(--basis)}
.lichtkarte .knopf.leer:hover{color:var(--basis);border-color:var(--basis)}
.lichtkarte__in{display:grid;gap:var(--t3);align-items:center}
@media(min-width:900px){.lichtkarte__in{grid-template-columns:1.2fr .8fr}}
.lichtkarte__baum{justify-self:end;width:min(46%,180px);color:var(--basis);opacity:.92}
.lichtkarte__baum svg{width:100%;height:auto}

/* ---------------------------------------------------------------- Scrollbaum */
/* Kleine Tanne am rechten Rand, fuellt sich von unten mit dem Scrollfortschritt. */
.scrollbaum{position:fixed;right:clamp(10px,1.4vw,22px);bottom:clamp(14px,2.4vh,28px);z-index:190;
  width:34px;aspect-ratio:200/326;pointer-events:none;opacity:0;transition:opacity .4s}
.scrollbaum.da{opacity:1}
.scrollbaum i{position:absolute;inset:0;-webkit-mask:url('/assets/kit/silhouette_ruhig.png') center/contain no-repeat;
  mask:url('/assets/kit/silhouette_ruhig.png') center/contain no-repeat}
.tanne{color:var(--tanne)}
.tanne .tanne__streifen rect{fill:var(--signal)}
.scrollbaum .tanne{color:inherit}
.scrollbaum .tanne .tanne__streifen rect{fill:currentColor}
/* Falle (Runde 11): .scrollbaum .tanne stand frueher NACH diesen beiden Zeilen und
   gewann bei gleicher Spezifitaet. Beide Baeume trugen dieselbe Farbe, der
   Fortschritt war unsichtbar. Jetzt zuerst die Grundfarbe, dann die beiden
   Fassungen, und die tragen mit svg.leer ein Element mehr im Waehler. */
.scrollbaum .leer{background:rgba(128,0,52,.20)}
/* Marke statt Leucht: Gelb war auf Weiss nicht erkennbar (Vladi 17.09.). */
.scrollbaum .voll{background:var(--marke);clip-path:inset(calc(100% - var(--p,0%)) 0 0 0)}
@media(max-width:700px){.scrollbaum{display:none}}

/* ---------------------------------------------------------------- Fuss */
.fuss{--grund:#3A0810;--tief:#4C0C14;--schrift:#FFFFFF;--neben:#E0B6AC;--akzent:#FC80A8;
  --linie:rgba(255,255,255,.16);
  background:var(--grund);color:var(--schrift);padding:var(--t5) 0 var(--t3);border-top:1px solid var(--linie)}
.fuss__oben{display:grid;gap:var(--t4);padding-bottom:var(--t4);border-bottom:1px solid var(--linie)}
@media(min-width:800px){.fuss__oben{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.fuss__marke{color:var(--signal);}
.fuss__marke svg{height:30px;width:auto;margin-bottom:1rem}
.fuss h4{font-family:var(--text);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neben);margin:0 0 .8rem}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fuss a{text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  color:var(--neben);transition:color .2s}
.fuss a:hover{color:var(--signal)}
.fuss p{color:var(--neben);font-size:15px}
.fuss__unten{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
  padding-top:1.5rem;font-family:var(--text);font-size:14px;color:var(--neben)}
/* Absenderzeile: die beiden Zeichen des Hauses. */
.absender{display:flex;align-items:center;gap:var(--t3);flex-wrap:wrap}
.absender a{min-height:0;color:var(--weiss);opacity:.85}
.absender a:hover{opacity:1;color:var(--signal)}
.absender svg{height:26px;width:auto;display:block}
.absender .platzhalter{font-family:var(--text);font-size:11px;letter-spacing:.12em;border:1px dashed var(--glas-rand);
  padding:6px 10px;border-radius:8px}

/* ---------------------------------------------------------------- Advent */
/* Der 24-Tuerchen-Kalender ist am 17.09.2026 gestrichen: Mechanik ohne Inhalt, und
   Elli hatte ihn nie bestellt. Geblieben sind die vier Adventssonntage als ruhiger
   Block auf der Startseite. Der Adventsinhalt lebt in der fuenften Vorlagenfamilie. */
.advents-satz{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--t2)}
@media(max-width:560px){.advents-satz{grid-template-columns:1fr}}
.advents{position:relative;padding:var(--t3);border-radius:22px;background:var(--tief);
  border:1px solid var(--linie);display:grid;gap:2px;align-content:start;overflow:hidden}
/* Die Ziffer laeuft nach rechts unten aus dem Feld, muss aber lesbar bleiben. Bei
   -.34em Ueberstand las sich die 4 als 2, deshalb knapper angeschnitten. */
.advents__nr{position:absolute;right:-.05em;bottom:-.16em;font-family:var(--kopf);font-weight:900;
  font-size:clamp(64px,6.6vw,96px);line-height:1;color:var(--weiss);opacity:.9;pointer-events:none}
.advents__was{position:relative;font-weight:600;font-size:15px;color:var(--akzent)}
.advents__tag{position:relative;font-family:var(--kopf);font-weight:900;
  font-size:clamp(21px,2.2vw,27px);letter-spacing:-.005em;font-variant-numeric:tabular-nums}
/* Der naechste Sonntag traegt Signal, gesetzt per JavaScript. Ohne JavaScript sehen
   alle vier gleich aus, die Daten stehen trotzdem da. */
.advents.naechster{background:var(--signal);border-color:var(--signal);color:var(--basis)}
.advents.naechster .advents__was,.advents.naechster .advents__tag{color:var(--basis)}
.advents.naechster .advents__nr{color:var(--weiss);opacity:.6}


/* ---------------------------------------------------------------- Szenen */
/* Das Foto steht sofort. Die Maske ist eine Zugabe fuer JavaScript und Bewegung:
   ohne beides ist inset(0) der Ausgangszustand und nichts fehlt. */
.szene{position:relative;margin:0;overflow:hidden;border-radius:clamp(14px,1.6vw,22px);
  background:var(--basis);isolation:isolate}
.szene img{display:block;width:100%;height:100%;object-fit:cover;will-change:transform}
.szene__unter{position:absolute;left:0;bottom:0;right:0;z-index:2;
  padding:clamp(18px,3vw,38px);color:var(--weiss,#FFFFFF);
  background-color:rgba(76,12,20,.93)}
.szene__unter::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:clamp(48px,7vw,92px);pointer-events:none;
  background:linear-gradient(to top,rgba(76,12,20,.93) 0%,rgba(76,12,20,.55) 46%,rgba(76,12,20,0) 100%)}
.szene__unter b{display:block;font-family:var(--kopf);font-weight:900;
  font-size:clamp(20px,2.4vw,30px);letter-spacing:-.005em;line-height:1.05}
.szene__unter span{display:block;margin-top:.3em;font-size:clamp(13px,1.3vw,16px);opacity:.88}
.szene.platzhalter{display:grid;place-items:center;border:1px dashed var(--glas-rand);
  color:var(--neben);font-size:12px;letter-spacing:.1em}

/* ---------------------------------------------------------------- Bildbahn */
/* Runde 5: eine Reihe auf voller Breite, ziehbar. overflow:hidden statt scroll,
   die Position kommt von Draggable (transform). Ohne JS scrollt die Bahn nativ. */
.bahn{margin-top:var(--t4);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative}
.bahn__bild--kopie{pointer-events:auto}
.bahn.zieht{cursor:grabbing}
html.nojs .bahn{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bahn__spur{display:flex;gap:clamp(10px,1.4vw,20px);width:max-content;padding:0 var(--rand);will-change:transform}
.bahn__bild{flex:0 0 auto;width:clamp(210px,24vw,360px);padding:0;border:0;background:none;
  cursor:inherit;color:inherit;font:inherit;border-radius:clamp(14px,1.6vw,22px);-webkit-user-drag:none}
.bahn__bild:nth-child(even){width:clamp(240px,28vw,420px);margin-top:clamp(20px,4vw,60px)}
.bahn__bild .szene{margin:0;pointer-events:none}
.bahn__bild:focus-visible{outline:3px solid var(--marke);outline-offset:4px}
/* Leuchtkasten */
.kasten{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;
  display:none;place-items:center;color:var(--weiss)}
.kasten[open]{display:grid}
.kasten::backdrop{background:rgba(76,12,20,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kasten__bild{margin:0;max-width:min(92vw,1100px);max-height:88dvh;display:grid;gap:12px;justify-items:center}
.kasten__bild img{max-width:100%;max-height:78dvh;object-fit:contain;border-radius:18px;display:block}
.kasten__bild figcaption{font-size:14px;color:var(--weiss);opacity:.8}
.kasten__zu,.kasten__pfeil{position:fixed;width:52px;height:52px;border-radius:50%;border:1px solid rgba(252,248,148,.35);
  background:rgba(0,0,0,.25);color:var(--weiss);font-size:22px;display:grid;place-items:center;cursor:pointer}
.kasten__zu{top:18px;right:18px}
.kasten__pfeil{top:50%;transform:translateY(-50%)}
.kasten__pfeil--zurueck{left:18px}.kasten__pfeil--vor{right:18px}
.kasten__zu:focus-visible,.kasten__pfeil:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
@media(max-width:700px){.kasten__pfeil{top:auto;bottom:18px;transform:none}}
/* Glasbuehne: Karten auf einem eigenen Marktfoto, Glas mit Blur */
.glasbuehne{position:relative;border-radius:clamp(18px,2.2vw,30px);overflow:hidden;padding:clamp(16px,2.4vw,32px);isolation:isolate}
.glasbuehne .szene.buehne{position:absolute;inset:0;margin:0;border-radius:0;aspect-ratio:auto;z-index:-1}
.glasbuehne .szene.buehne::after{content:"";position:absolute;inset:0;background:rgba(76,12,20,.28)}
.glasbuehne .zeiten,.glasbuehne .wege{margin:0}

/* ---------------------------------------------------------------- Speisekarte */
.essen{display:grid;gap:var(--t3)}
.essen__paar{align-items:center}
@media(max-width:760px){
  .essen__paar{display:grid;grid-template-columns:1fr}
  .essen__paar .szene{order:-1}
}

/* Zeichenschnee ist in Runde 22 entfallen: ASCII gibt es nur noch als ASCII-Baum im
   Ladeschirm und beim Seitenwechsel (.lade__ascii, CSS in stil.py). */

/* Die 404-Tanne */
.vierNullVier{max-width:220px;margin:0 auto}
.vierNullVier img{width:100%;height:auto;display:block}

/* ---------------------------------------------------------------- Einblenden */
.auf{opacity:1}

/* ---------------------------------------------------------------- Barrierefreiheit */
/* Ziel WCAG 2.2 AA. Die Kontraste sind gemessen, nicht geschaetzt: Marke auf Papier
   10,1:1, Nebentext 6,1:1, Signal auf Basis 6,4:1. Signal und Leucht sind NIE
   Textfarbe auf hellem Grund (2,2:1 und 1,0:1), sie sind Flaechen. */
:focus-visible{outline:2px solid var(--marke);outline-offset:3px;border-radius:4px}
.dunkel :focus-visible,.fuss :focus-visible{outline-color:var(--signal)}
.anh:focus-visible{outline-offset:6px}
/* Wer hohen Kontrast einstellt, bekommt klare Kanten statt Schein und Glas. */
@media (prefers-contrast:more){
  :root{--neben:#6E2A3E;--linie:rgba(128,0,52,.42)}
  .dunkel{--neben:#F0D0C4;--linie:rgba(255,255,255,.5)}
  .anh,.hero__marke,.pille__marke{filter:none!important}
  .karte,.vorlage,.reiterkarte,.tuer,.pille,.glas1,.glas2,.glas3{backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;background:var(--grund)!important;border-color:var(--schrift)!important}
  .chip{border-color:var(--schrift)}
  .schnee{display:none}
}
/* Erzwungene Farben (Windows-Kontrastmodus): Systemfarben gewinnen, Deko verschwindet. */
@media (forced-colors:active){
  .schnee,.zeiger,.bund__band,.arm::before{display:none}
  .pille,.karte,.tuer,.vorlage{border:1px solid CanvasText;background:Canvas;backdrop-filter:none}
  .knopf{border:1px solid ButtonText;background:ButtonFace;color:ButtonText;forced-color-adjust:none}
  .anh svg,.hero__marke svg{forced-color-adjust:auto}
  :focus-visible{outline:2px solid Highlight}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .auf{opacity:1!important;transform:none!important}
  .ladeschirm{display:none}
  .schnee{display:none}
  .neon path{opacity:1}
  .pille::before{animation:none}
  .zeiger{display:none}
  /* Der Bund liegt als ruhige Reihe. Die absolute Lage haengt an .js-bund, deshalb
     reicht es, sie hier zurueckzunehmen, und es gilt zugleich ohne JavaScript. */
  .js-bund .bund__liste{display:flex;flex-wrap:wrap;gap:var(--t2);align-items:flex-start;
    justify-content:center;position:static;padding-top:clamp(20px,5vh,54px);inset:auto}
  .js-bund .arm{position:static;width:clamp(74px,17%,110px);margin:0;padding-top:0;rotate:0deg!important}
  .js-bund .arm::before{display:none}
  .js-bund .bund__ring,.js-bund .bund__band{display:none}
  .js-bund .anh__text{position:static;opacity:1;transform:none;display:block;margin-top:8px;
    background:none;border:0;padding:0;font-size:12px;text-align:center;-webkit-backdrop-filter:none;backdrop-filter:none}
}