/* Signal-Werk · Designsystem — 2026-09-25, Fassung 1.0
   Eine Farbwelt, eine Schrift, ein Takt für alle Seiten des Auftritts (nicht für die Werkzeuge selbst).
   Wird von seite-bauen.py als letztes Stylesheet eingehängt und legt die Farbnamen der einzelnen Seiten
   (--p…, --i…, --bg…, --t…, --bone…, Akzente) auf eine gemeinsame Palette um. Bewegung: bewegung.js.
   One palette, one type system, one rhythm for every page of the site (not the tools). */

/* ── 1 · Palette / tokens ──────────────────────────────────────────────── */
html:root{
  /* Grund: warmes Fast-Schwarz in fünf Stufen */
  --sw-g0:#08070A; --sw-g1:#0D0C10; --sw-g2:#14121A; --sw-g3:#1C1924; --sw-g4:#27232F;
  --sw-kante:rgba(255,255,255,.085); --sw-kante-hi:rgba(255,255,255,.16);
  /* Schrift */
  --sw-tx1:#F5F0E9; --sw-tx2:#BFB7AC; --sw-tx3:#8F887F; --sw-tx4:#6B655E;
  /* Signal: der warme Verlauf ist die Marke */
  --sw-rot:#FF5A36; --sw-rot-hi:#FF7B5A; --sw-orange:#FF8A2A; --sw-amber:#FFB23E;
  --sw-signal:linear-gradient(100deg,#FF4D3A 0%,#FF7A2E 45%,#FFB23E 100%);
  /* Gegenfarbe und Zustände */
  --sw-violett:#8C7CFF; --sw-violett-hi:#AFA3FF; --sw-minze:#3FE0B0; --sw-minze-hi:#72EDC7; --sw-rosa:#FF4F8B;
  /* Schriften */
  --sw-fd:'Bricolage Grotesque',system-ui,sans-serif;
  --sw-fb:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,system-ui,sans-serif;
  --sw-fm:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Maß */
  --sw-r:14px; --sw-r-s:10px; --sw-schatten:0 1px 0 rgba(255,255,255,.05) inset,0 24px 60px -24px rgba(0,0,0,.7);
  --sw-glut:0 0 0 1px rgba(255,122,46,.35),0 18px 50px -12px rgba(255,90,54,.45);
  --sw-ease:cubic-bezier(.2,.8,.2,1);

  /* Umlegen der seiteneigenen Namen auf die Palette */
  --p000:var(--sw-g0);--p100:var(--sw-g1);--p200:var(--sw-g2);--p300:var(--sw-g3);--p400:var(--sw-g4);
  --i000:var(--sw-g0);--i100:var(--sw-g1);--i200:var(--sw-g2);--i300:var(--sw-g3);--i400:var(--sw-g4);
  --bg0:var(--sw-g0);--bg1:var(--sw-g1);--bg2:var(--sw-g2);--bg3:var(--sw-g3);
  --line:#2A2631;--line-hi:#3B3645;--border:#2A2631;
  --bone:var(--sw-tx1);--bone2:var(--sw-tx2);--bone3:var(--sw-tx3);
  --t1:var(--sw-tx1);--t2:var(--sw-tx2);--t3:var(--sw-tx3);--t4:var(--sw-tx4);
  --zinnober:var(--sw-rot);--zinnober-tx:var(--sw-rot-hi);--karmin:var(--sw-rot);--karmin-tx:var(--sw-rot-hi);
  --krapp:var(--sw-rosa);--krapp-hi:#FF7FA9;--red:var(--sw-rot);
  --ocker:var(--sw-amber);--orange:var(--sw-orange);--yellow:var(--sw-amber);--zitron:var(--sw-amber);--chartreuse:var(--sw-amber);
  --jade:var(--sw-minze);--jade-tx:var(--sw-minze-hi);--patina:var(--sw-minze);--patina-hi:var(--sw-minze-hi);--green:var(--sw-minze);--cyan:#5CD6FF;
  --indigo:var(--sw-violett);--indigo-tx:var(--sw-violett-hi);--violett:var(--sw-violett);--violett-hi:var(--sw-violett-hi);
  --ultramarin:var(--sw-violett);--ultramarin-hi:var(--sw-violett-hi);--purple:var(--sw-violett);
  --magenta:var(--sw-rosa);--magenta-tx:#FF7FA9;
  --fd:var(--sw-fd);--ff-d:var(--sw-fd);--fb:var(--sw-fb);--ff-ui:var(--sw-fb);--fm:var(--sw-fm);--ff-m:var(--sw-fm);
  /* Seitengerüst */
  --sw-p000:var(--sw-g0);--sw-p100:var(--sw-g1);--sw-line:#2A2631;--sw-bone:var(--sw-tx1);--sw-bone2:var(--sw-tx2);--sw-bone3:var(--sw-tx3);
  --sw-zinnober:var(--sw-rot);--sw-ocker:var(--sw-amber);
  color-scheme:dark;
}

/* ── 2 · Grund / base ──────────────────────────────────────────────────── */
html{scroll-behavior:smooth;scroll-padding-top:84px;font-size:clamp(15px,.25vw + 13px,16.5px)!important}
body{background:var(--sw-g1)!important;color:var(--sw-tx1);font-family:var(--sw-fb);letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1100px 620px at 82% -8%,rgba(255,110,50,.13),transparent 62%),
             radial-gradient(900px 560px at -6% 18%,rgba(140,124,255,.10),transparent 60%),
             radial-gradient(800px 600px at 50% 110%,rgba(255,178,62,.06),transparent 60%)}
::selection{background:rgba(255,122,46,.35);color:#fff}
:focus-visible{outline:2px solid var(--sw-amber)!important;outline-offset:3px;border-radius:6px}
a{transition:color .2s var(--sw-ease),border-color .2s var(--sw-ease),opacity .2s}
.wrap a:not([class]),main a:not([class]){color:var(--sw-tx1);text-decoration:none;background-image:linear-gradient(var(--sw-rot),var(--sw-rot));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:1px}
.wrap a:not([class]):hover{color:var(--sw-amber)}
p,li{color:var(--sw-tx2)}
strong,b{color:var(--sw-tx1)}

/* Überschriften: groß, eng, ruhig — keine Großbuchstaben-Wand mehr */
h1,h2,.display{font-family:var(--sw-fd)!important;font-weight:800!important;font-stretch:100%!important;text-transform:none!important;
  letter-spacing:-.035em!important;color:var(--sw-tx1)}
h1,.display{font-size:clamp(1.85rem,3.3vw,2.75rem)!important;line-height:1.08!important;margin-bottom:.5em}
h2{font-size:clamp(1.3rem,2.1vw,1.75rem)!important;line-height:1.15!important}
h3,h4{font-family:var(--sw-fd);font-weight:700;letter-spacing:-.015em;text-transform:none!important;color:var(--sw-tx1)}
h1 .quiet{color:var(--sw-tx3)!important}
.sw-glanz{background:var(--sw-signal);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}

/* Kleine Marken- und Kennzeilen */
.label,.mono,.note.mono,.eyebrow .label,.sec-num,.sh .n,.num,.nr,.k,.lbl{font-family:var(--sw-fm)!important;letter-spacing:.14em}
.sh .n,.sec-num,.num,.nr{color:var(--sw-amber)!important}
.wrap.top>.mono:first-child,.wrap.intro>.mono:first-child,.eyebrow .label{display:inline-flex;align-items:center;gap:10px;font-size:11px!important;text-transform:uppercase;
  color:var(--sw-amber)!important;padding:7px 14px;border:1px solid rgba(255,178,62,.28);border-radius:999px;background:rgba(255,178,62,.06)}
.eyebrow .bar{display:none}

/* Einleitungen */
.lead,.lede,.wrap.top>p,.wrap.intro>p,.sec-note{font-size:clamp(.98rem,1.05vw,1.08rem)!important;line-height:1.55!important;color:var(--sw-tx2)!important;max-width:62ch}
.note{color:var(--sw-tx3)}

/* ── 3 · Rahmen und Abschnitte ─────────────────────────────────────────── */
.wrap{width:min(100% - 40px,1180px)!important;max-width:none!important;margin-inline:auto!important;padding-inline:0!important}
.wrap.top,.wrap.intro,.sw-rail+.wrap{padding-top:clamp(32px,4.5vw,64px)!important;padding-bottom:clamp(16px,2.5vw,32px)!important}
h1{color:var(--sw-tx1)!important}
h1[style*="font-size"]{font-size:clamp(1.6rem,2.8vw,2.2rem)!important}
.step .top{height:4px!important;padding:0!important}
.sec{padding-block:clamp(36px,5vw,72px)!important;border-top:0!important;position:relative}
.sec+.sec::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 20%,rgba(255,255,255,.09) 80%,transparent)}
.sh,.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px!important;flex-wrap:wrap}

/* ── 4 · Karten: Glas, weiche Kanten, Hebung beim Überfahren ───────────── */
.panel,.anw-karte,.item,.unit,.card,.karte,.eintrag,.feld,.weg,.perk,.step,.stance>div,.zahlen>div,.stufe,.lohn{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
  border:1px solid var(--sw-kante)!important;border-radius:var(--sw-r)!important;box-shadow:var(--sw-schatten);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:transform .45s var(--sw-ease),border-color .3s,box-shadow .45s var(--sw-ease),background .3s}
.panel::before,.panel::after,.unit::before{display:none!important}
a.item:hover,a.unit:hover,.anw-karte:hover,a.card:hover,.stance>div:hover,.weg:hover,.step:hover{
  transform:translateY(-4px)!important;border-color:rgba(255,138,42,.38)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 70px -28px rgba(255,90,54,.35),0 24px 60px -24px rgba(0,0,0,.8)}
.item,.unit{padding:16px 18px!important}
.item h3,.unit h3{font-size:15.5px!important;letter-spacing:-.01em!important;text-transform:none!important}
.item p,.unit p{font-size:13.5px!important;line-height:1.5!important}
.list{gap:12px!important}

/* ── 5 · Knöpfe ────────────────────────────────────────────────────────── */
.btn,a.go,.go,button.btn,.sw-knopf{font-family:var(--sw-fb)!important;font-weight:600!important;font-stretch:100%!important;
  text-transform:none!important;letter-spacing:-.005em!important;font-size:.94rem!important;border-radius:999px!important;
  padding:11px 20px!important;display:inline-flex;align-items:center;gap:8px;line-height:1.1;
  transition:transform .35s var(--sw-ease),box-shadow .35s var(--sw-ease),background .25s,border-color .25s,color .25s!important}
.btn-solid,.btn.primary,.btn:not(.btn-ghost):not(.ghost):not(.sek),.sw-knopf{background:var(--sw-signal)!important;color:#1B0C05!important;border:0!important;
  box-shadow:0 10px 30px -10px rgba(255,90,54,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-solid:hover,.btn:not(.btn-ghost):not(.ghost):not(.sek):hover,.sw-knopf:hover{transform:translateY(-2px) scale(1.02)!important;box-shadow:0 18px 40px -12px rgba(255,90,54,.8),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-ghost,.btn.ghost,.btn.sek,.sw-knopf-ghost{background:rgba(255,255,255,.05)!important;color:var(--sw-tx1)!important;border:1px solid var(--sw-kante-hi)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost:hover,.sw-knopf-ghost:hover{background:rgba(255,255,255,.1)!important;transform:translateY(-2px)!important}
a.go,.item .go{padding:0!important;background:none!important;font-size:.9rem!important;color:var(--sw-amber)!important;border:0!important;box-shadow:none!important}

/* ── 6 · Marken, Chips, Legende ───────────────────────────────────────── */
.chip,.kat-chips button,.filt button,.tag{border-radius:999px!important;font-family:var(--sw-fm)!important;font-size:10.5px!important;letter-spacing:.08em!important;
  padding:6px 12px!important;border:1px solid var(--sw-kante-hi)!important;background:rgba(255,255,255,.035)!important;color:var(--sw-tx2)!important;transition:all .25s var(--sw-ease)}
.kat-chips button:hover{color:var(--sw-tx1)!important;border-color:rgba(255,178,62,.5)!important}
.kat-chips button.an{background:var(--sw-signal)!important;color:#1B0C05!important;border-color:transparent!important;opacity:1!important}
.kat-filter input,input[type=search],input[type=email],input[type=text],textarea,select{background:rgba(255,255,255,.04)!important;border:1px solid var(--sw-kante-hi)!important;
  border-radius:12px!important;color:var(--sw-tx1)!important;padding:12px 16px!important;font:inherit;font-size:1rem!important}
input:focus,textarea:focus,select:focus{border-color:rgba(255,138,42,.6)!important;box-shadow:0 0 0 4px rgba(255,138,42,.14);outline:0}
.kat-zahl{font-family:var(--sw-fm)!important;color:var(--sw-amber)!important;opacity:1!important}
.kat-h3{font-size:clamp(1.05rem,1.4vw,1.25rem)!important;margin:32px 0 4px!important}
.kat-h3 .k{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.07);opacity:1!important;font-size:11px!important;color:var(--sw-tx2)}
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px}
.lg i{width:9px!important;height:9px!important;border-radius:50%!important}

/* ── 7 · Tabellen ─────────────────────────────────────────────────────── */
.wrap table,.cmp{border-collapse:separate!important;border-spacing:0;border:1px solid var(--sw-kante)!important;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02)}
.wrap table th,.cmp th{background:rgba(255,255,255,.04);color:var(--sw-tx3)!important;font-family:var(--sw-fm)!important;font-size:10.5px!important;letter-spacing:.12em!important;text-transform:uppercase;font-weight:400}
.wrap table td,.wrap table th,.cmp td,.cmp th{border-bottom:1px solid var(--sw-kante)!important;padding:12px 14px!important}
.wrap table tr:last-child td{border-bottom:0!important}
.wrap table tbody tr{transition:background .2s}
.wrap table tbody tr:hover{background:rgba(255,255,255,.03)}

/* ── 8 · Band, Kopfleiste, Fuß ─────────────────────────────────────────── */
.sw-band{background:var(--sw-signal)!important;border:0!important;color:#1B0C05!important;font:600 12.5px/1.3 var(--sw-fb)!important;letter-spacing:0!important;text-transform:none!important;padding:9px 20px!important}
.sw-band a{color:#1B0C05!important;text-decoration:none!important}
.sw-band a:hover{text-decoration:underline!important}
.sw-rail{background:rgba(10,9,12,.62)!important;-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border-bottom:1px solid var(--sw-kante)!important}
.sw-rail-in{max-width:1180px!important;height:60px!important;padding:0 20px!important}
.sw-brand{font-family:var(--sw-fd)!important;font-weight:800!important;font-stretch:100%!important;letter-spacing:-.01em!important;text-transform:none!important;font-size:17px!important}
.sw-label{font-family:var(--sw-fm)!important;color:var(--sw-tx3)!important}
.sw-rail a.sw-nav{font-family:var(--sw-fb)!important;font-size:13.5px!important;letter-spacing:0!important;text-transform:none!important;color:var(--sw-tx2)!important;padding:8px 10px!important;border-radius:999px;border:0!important}
.sw-rail a.sw-nav:hover{color:var(--sw-tx1)!important;background:rgba(255,255,255,.06)}
.sw-rail a.sw-nav.aktiv{color:var(--sw-tx1)!important;background:rgba(255,255,255,.09)}
.sw-lang{border-radius:999px!important;border:1px solid var(--sw-kante-hi)!important;font-family:var(--sw-fm)!important;padding:6px 12px!important}
.sw-foot{background:var(--sw-g0)!important;border-top:1px solid var(--sw-kante)!important;padding:72px 0 64px!important}
.sw-foot-in{max-width:1180px!important;padding:0 20px!important}
.sw-foot h4{font-family:var(--sw-fm)!important;color:var(--sw-tx3)!important}
.sw-foot a{font-family:var(--sw-fb);color:var(--sw-tx2)!important}
.sw-foot a:hover{color:var(--sw-tx1)!important}

/* ── 9 · Werkzeugkarten mit Bild (Werkstatt, Startseite) ──────────────── */
.sw-raster{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px!important;flex-direction:initial!important}
.sw-raster>.item,.sw-karte{display:flex!important;flex-direction:column;padding:0!important;overflow:hidden;gap:0!important}
.sw-bild{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--sw-g0);border-bottom:1px solid var(--sw-kante);position:relative}
.sw-bild img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .9s var(--sw-ease),filter .6s;filter:saturate(.92) brightness(.92)}
.sw-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,7,10,.55));pointer-events:none}
.sw-karte:hover .sw-bild img,.sw-raster>.item:hover .sw-bild img{transform:scale(1.045);filter:saturate(1.08) brightness(1)}
.sw-karte-text{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.sw-karte-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sw-karte-kopf h3{margin:0!important}
.sw-licht.sw-karte,.sw-raster>.item.sw-licht{background-image:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,138,42,.10),transparent 45%)!important}
.sw-karte-go{margin-top:auto;padding-top:6px;font-size:.9rem;font-weight:600;color:var(--sw-amber)}
.sw-karte-go i{font-style:normal;display:inline-block;transition:transform .35s var(--sw-ease)}
.sw-karte:hover .sw-karte-go i{transform:translateX(4px)}
.sw-stand{font-family:var(--sw-fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap;border:1px solid}
.sw-stand-stabil{color:var(--sw-minze-hi);border-color:rgba(63,224,176,.35);background:rgba(63,224,176,.08)}
.sw-stand-testbetrieb{color:var(--sw-amber);border-color:rgba(255,178,62,.35);background:rgba(255,178,62,.08)}
.sw-stand-prototyp{color:var(--sw-violett-hi);border-color:rgba(140,124,255,.4);background:rgba(140,124,255,.1)}

/* ── 10 · Bewegung (Klassen setzt bewegung.js) ─────────────────────────── */
html.sw-js .sw-rv{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .9s var(--sw-ease),transform 1s var(--sw-ease);transition-delay:var(--sw-v,0ms)}
html.sw-js .sw-rv.sw-in{opacity:1;transform:none}
@keyframes sw-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sw-glimmen{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sw-band{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 11 · Kleine Geräte ───────────────────────────────────────────────── */
@media (max-width:900px){
  .sw-rail-in{height:56px!important}
  .sw-rail a.sw-nav{font-size:13px!important;padding:10px 8px!important}
}
@media (max-width:640px){
  .wrap{width:min(100% - 32px,1180px)!important}
  .item,.unit{padding:16px!important}
  .sw-raster{grid-template-columns:1fr}
  h1,.display{font-size:clamp(1.6rem,7vw,2.1rem)!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.sw-js .sw-rv{opacity:1!important;transform:none!important}
  *{animation:none!important}
}

/* Lichtkegel, der dem Zeiger folgt (bewegung.js setzt --mx/--my) */
.sw-licht{background-image:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,138,42,.10),transparent 45%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important}

/* Kopfleiste nie breiter als das Fenster (auch auf Seiten mit Flex-Körper wie 404) */
.sw-rail,.sw-band,.sw-foot{width:100%;max-width:100vw;align-self:stretch;box-sizing:border-box}
@media (max-width:900px){.sw-rail-in{overflow-x:auto!important;max-width:100%;box-sizing:border-box}}
html{overflow-x:clip}

/* Werkzeugkarte ab 2026-09-28: ganze Fläche öffnet das Werkzeug, „Details" die Produktseite */
.sw-karte{position:relative}
.sw-karte-link{color:inherit!important;text-decoration:none!important;background:none!important;padding:0!important}
.sw-karte-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.sw-karte-fuss{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.sw-karte-fuss .sw-karte-go{margin:0;padding:0}
.sw-karte-mehr{position:relative;z-index:2;font:600 11px/1 var(--sw-fm)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--sw-tx2)!important;
  text-decoration:none!important;background:none!important;padding:7px 10px!important;border:1px solid var(--sw-kante-hi);border-radius:999px}
.sw-karte-mehr:hover{color:var(--sw-tx1)!important;border-color:rgba(255,178,62,.5)}
.sw-karte:hover{transform:translateY(-4px);border-color:rgba(255,138,42,.38)!important}
.sw-karte:hover .sw-bild img{transform:scale(1.045);filter:saturate(1.08) brightness(1)}
.sw-karte:focus-within{outline:2px solid var(--sw-amber);outline-offset:2px}
.btn,a.btn{text-decoration:none!important}