/* ==========================================================================
   Rahmen: Farben, Schrift, Kopf- und Fusszeile, gleich auf allen Seiten.
   Markup: tools/rahmen.cjs. Verhalten: assets/rahmen.js.

   Gestaltung «Glanz» seit 01.11.2026 (Davids Rückmeldung am selben Abend: kein
   Retro, kein LED-Band, keine Monospace-Optik; hochwertig und modern wie
   OpenAI, ElevenLabs oder der Eventforum-Auftritt). Hell als Grundzustand,
   dunkel über den Design-Schalter. Schrift Geist (lokal). Die Farb-Tokens
   stehen nur hier; alle anderen Stylesheets lesen sie.
   ========================================================================== */
:root,[data-theme="light"]{
  color-scheme:light;
  --bg:#FBFBFC; --bg2:#FFFFFF; --bg3:#F3F4F7;
  --ink:#0B0C10; --mut:#4B4F5C; --soft:#6E7380;
  --line:rgba(11,12,16,.08); --line2:rgba(11,12,16,.14);
  --accent:#3B6CF6; --accent-ink:#2350D9; --link-line:rgba(35,80,217,.3);
  --acc2:#8B5CF6; --acc3:#F97362;
  --verlauf:linear-gradient(100deg,#3B6CF6 0%,#8B5CF6 52%,#F97362 100%);
  --led:#2350D9; --tally:#E5484D; --ok:#16A34A;
  --nav-bg:rgba(251,251,252,.72);
  --glas:rgba(255,255,255,.62); --glas-rand:rgba(255,255,255,.75);
  --schatten:0 1px 2px rgba(16,24,40,.04),0 12px 32px -12px rgba(16,24,40,.14);
  --schatten-gross:0 2px 4px rgba(16,24,40,.04),0 40px 80px -32px rgba(30,41,90,.28);
  --karte-schatten:var(--schatten-gross);
  --sans:'Geist','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist','Inter',system-ui,sans-serif;
  --code:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --t1:.18s; --t2:.35s; --t3:.8s;
  --rund:20px; --rund-k:12px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#07080B; --bg2:#0F1116; --bg3:#161922;
  --ink:#F4F5F8; --mut:#B3B8C5; --soft:#8A90A0;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --accent:#6E95FF; --accent-ink:#8FAEFF; --link-line:rgba(143,174,255,.35);
  --led:#8FAEFF;
  --nav-bg:rgba(7,8,11,.7);
  --glas:rgba(22,25,34,.55); --glas-rand:rgba(255,255,255,.08);
  --schatten:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
  --schatten-gross:0 40px 80px -32px rgba(0,0,0,.8);
  --karte-schatten:var(--schatten-gross);
}

/* ---------- Grundlage ---------- */
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-feature-settings:"ss01","cv11"}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
code,pre,kbd{font-family:var(--code)}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);
      padding:10px 14px;border-radius:999px;font-size:14px;text-decoration:none;font-family:var(--sans)}
.skip:focus{top:12px}
/* Kleine Kennung über Überschriften */
.umd{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.02em;line-height:1.3}
.punkt{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
       box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent)}
.punkt.rot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.punkt.led{background:var(--accent)}
.verlauf-text{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:60;font-family:var(--sans);background:var(--nav-bg);
      -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
      border-bottom:1px solid transparent;transition:border-color var(--t2),background var(--t2)}
.kopf[data-gescrollt]{border-bottom-color:var(--line)}
.kopf-in{max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,32px);height:64px;
         display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.kopf-marke{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;
            font-weight:600;font-size:15.5px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.kopf-marke i{width:22px;height:22px;border-radius:7px;background:var(--verlauf);flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.kopf-nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:4px;border-radius:999px;
             background:color-mix(in srgb,var(--bg2) 70%,transparent);border:1px solid var(--line)}
.kopf-nav li{margin:0;padding:0}
.kopf-nav a{position:relative;display:inline-flex;align-items:baseline;padding:8px 14px;border-radius:999px;font-size:14px;line-height:1.2;
            color:var(--mut);text-decoration:none;white-space:nowrap;transition:color var(--t1),background var(--t1)}
.kopf-nav a:hover,.kopf-nav a:focus-visible{color:var(--ink);background:var(--bg3)}
.kopf-nav a[aria-current]{color:var(--ink);background:var(--bg2);box-shadow:var(--schatten)}
.kopf-de{font-size:9px;letter-spacing:.04em;margin-left:4px;color:var(--soft);position:relative;top:-.5em}
.kopf-akt{justify-self:end;display:flex;align-items:center;gap:8px}
.kopf-uhr{display:none}
.kopf-knopf{height:38px;min-width:38px;padding:0 12px;border-radius:999px;border:1px solid var(--line);
            background:var(--bg2);color:var(--mut);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
            text-decoration:none;font:inherit;font-size:13px;font-weight:500;transition:color var(--t1),border-color var(--t1)}
.kopf-knopf:hover,.kopf-knopf:focus-visible{color:var(--ink);border-color:var(--line2)}
.kopf-sprache{min-width:44px}
.kopf-tgl{width:38px;padding:0}
.kopf-tgl svg{width:16px;height:16px;display:block;transition:transform .5s var(--ease)}
.kopf-tgl:active svg{transform:rotate(40deg) scale(.9)}
.kopf .ic-sun{display:none}
[data-theme="dark"] .kopf .ic-sun{display:block}
[data-theme="dark"] .kopf .ic-moon{display:none}
.kopf-hinweis{border-top:1px solid var(--line);margin:0;padding:8px clamp(16px,3vw,32px);text-align:center;
              font-size:13px;color:var(--mut);background:var(--bg3)}
.kopf-hinweis:empty{display:none}
.kopf-hinweis a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

.kopf-burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);
             color:var(--ink);cursor:pointer;padding:0;flex:none;align-items:center;justify-content:center}
.kopf-burger span{display:block;position:relative;width:18px;height:11px}
.kopf-burger span::before,.kopf-burger span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;
             border-radius:2px;background:currentColor;transition:transform var(--t2) var(--ease),width var(--t2) var(--ease)}
.kopf-burger span::before{top:0}
.kopf-burger span::after{bottom:0;width:13px}
.kopf-burger[aria-expanded="true"] span::before{transform:translateY(4.7px) rotate(45deg)}
.kopf-burger[aria-expanded="true"] span::after{width:18px;transform:translateY(-4.7px) rotate(-45deg)}

@media (max-width:880px){
  .kopf-in{grid-template-columns:1fr auto;height:60px}
  .kopf-burger{display:inline-flex}
  .kopf-knopf{height:44px;min-width:44px}
  .kopf-tgl{width:44px}
  .kopf-nav{position:absolute;left:12px;right:12px;top:calc(100% + 8px);background:var(--bg2);border:1px solid var(--line);border-radius:var(--rund);
            padding:8px;box-shadow:var(--schatten-gross);transform:translateY(-8px) scale(.98);opacity:0;visibility:hidden;pointer-events:none;
            transition:transform .35s var(--ease),opacity .25s var(--ease),visibility .35s}
  .kopf[data-offen] .kopf-nav{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .kopf-nav ul{flex-direction:column;align-items:stretch;gap:2px;background:none;border:0;padding:0}
  .kopf-nav a{display:flex;align-items:center;min-height:52px;padding:4px 16px;font-size:18px;letter-spacing:-.02em;color:var(--ink);border-radius:14px}
  .kopf-nav a[aria-current]{box-shadow:none;background:var(--bg3)}
  body.mnav-offen{overflow:hidden}
  body.mnav-offen::after{content:"";position:fixed;inset:0;background:rgba(10,12,20,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:55;animation:kopf-blende .3s var(--ease)}
}
@keyframes kopf-blende{from{opacity:0}to{opacity:1}}

/* ---------- Fuss ---------- */
.fuss{background:var(--bg3);color:var(--mut);border-top:1px solid var(--line);
      padding:clamp(56px,7vw,88px) 0 36px;font-family:var(--sans);font-size:14px;line-height:1.6}
.fuss-in{max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.fuss-raster{display:grid;gap:36px 48px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
.fuss p{margin:0 0 12px;max-width:58ch;font-size:inherit;line-height:inherit;color:inherit}
.fuss .fuss-name{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.fuss-name i{width:20px;height:20px;border-radius:6px;background:var(--verlauf);flex:none}
.fuss .fuss-disc,.fuss .fuss-netz{font-size:13px}
.fuss a{color:var(--mut);text-decoration:none;transition:color var(--t1)}
.fuss a:hover,.fuss a:focus-visible{color:var(--ink)}
.fuss-netz a{border-bottom:1px solid var(--line2)}
.fuss h2{font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink);margin:2px 0 12px;max-width:none}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:0;padding:0}
.fuss li a{display:inline-flex;align-items:center;min-height:34px}
.fuss-meta{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
           align-items:center;gap:10px 20px;flex-wrap:wrap;font-size:13px}
.fuss-tick{display:inline-flex;align-items:center;gap:8px;font-size:12.5px}
.fuss-punkt{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;animation:fuss-puls 2.4s infinite}
@keyframes fuss-puls{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.4)}55%{box-shadow:0 0 0 6px rgba(22,163,74,0)}}
.fuss .fuss-marken{margin-top:16px;font-size:12px;line-height:1.55;color:var(--soft);max-width:90ch}
@media (max-width:900px){.fuss-raster{grid-template-columns:1fr 1fr}.fuss-marke{grid-column:1/-1}}
@media (max-width:520px){.fuss-raster{grid-template-columns:1fr}}
@media (pointer:coarse){.fuss li a{min-height:44px}}

@media (prefers-reduced-motion:reduce){
  .kopf-nav,.kopf-burger span::before,.kopf-burger span::after{transition-duration:.001s}
  body.mnav-offen::after{animation:none}
  .fuss-punkt{animation:none}
}

/* ---------- Murmeln (Markenzeichen, gezeichnet von assets/murmeln.js) ----------
   Elemente mit data-murmel geben nur Ort und Grösse vor; die Zeichenfläche
   liegt fest über dem Fenster. Ohne WebGL malt CSS eine einfache Kugel. */
.murmel-flaeche{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:61}
[data-murmel]{display:inline-block;border-radius:50%;flex:none}
.kopf-marke i[data-murmel]{width:26px;height:26px;border-radius:50%}
.fuss-name i[data-murmel]{width:24px;height:24px;border-radius:50%}
.mit-murmeln [data-murmel]{background:none !important;box-shadow:none !important}
.ohne-murmeln [data-murmel],html:not(.mit-murmeln) [data-murmel]{
  background:radial-gradient(circle at 34% 28%,#fff 0 6%,rgba(255,255,255,0) 22%),
             radial-gradient(circle at 50% 60%,var(--m-hell,#7b6bff),var(--m-tief,#1a1250) 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
[data-murmel^="blau"]{--m-hell:#2c8cff;--m-tief:#03184f}
[data-murmel^="violett"]{--m-hell:#9b5cff;--m-tief:#25085f}
[data-murmel^="koralle"]{--m-hell:#ff7a5c;--m-tief:#4a0f12}
[data-murmel^="gruen"]{--m-hell:#27d49a;--m-tief:#003526}
[data-murmel^="perle"]{--m-hell:#dce8fb;--m-tief:#162a52}
.murmel{position:absolute;display:block;aspect-ratio:1;pointer-events:none}
.murmel-klein{width:16px;height:16px;vertical-align:-3px}