/* Startseite gltools.de, Runde 2 (02.11.2026): dunkles Designsystem aus dem Skill ui-ux-pro-max
 * (Lauf "dark immersive tech studio orange mascot", --variance 8 --motion 8 --density 3, Muster "Immersive/Interactive Experience"):
 * Grund #0B0B10, Schrift #F8FAFC, zweite Schrift #94A3B8, Flaeche #1E1E23, Akzent und Knopf #3B82F6 mit Text #000000.
 * Schriften: Space Grotesk (Ueberschriften) und DM Sans (Text), lokal (SIL OFL 1.1). Das Orange gehoert dem Fuchs, nicht der Oberflaeche.
 * Haus-Regeln des taste-skill bleiben: keine Linien, keine Schatten in Ruhe, keine Symbole-Karten, hoechstens 5-7 Schriftgroessen,
 * gleiche Aussenraender, Abschnitte 120-240 px auseinander. EINE Ausnahme auf Wunsch des Owners: das Licht der orangen Gelenke
 * als Lichtquelle hinter dem Fuchs (.w-buehne::before, ein Verlauf). Bewegung nur transform/opacity (und der Shutter per clip-path)
 * mit prefers-reduced-motion-Rueckfall; ohne Skript bleibt alles sichtbar (die Klasse .js setzt erst wegweiser.js). */

@font-face{font-family:"Space Grotesk";src:url(/marke/space-grotesk-latin.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/marke/dm-sans-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}

/* ------------------------------------------------------------------------------------------------ Tokens */
.wegweiser{
  --grund:#0B0B10;--tinte:#F8FAFC;--grau:#94A3B8;--leise:#94A3B8;--feld:#1E1E23;--feld2:#2A2A31;--flaeche:#1E1E23;--linie:#2A2A31;
  --akzent:#3B82F6;--akzent-text:#000;--gelb:#3B82F6;--gelb-hell:#3B82F6;--nacht-text:#F8FAFC;
  --w-kopf:"Space Grotesk","DM Sans",system-ui,sans-serif;--w-text-schrift:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --w-rand:16px;
  --w-plakat:clamp(40px,10.4vw,128px);          /* h1 */
  --w-gross:var(--w-plakat);                    /* Suchzeile, Zahlen, Fragen, E-Mail im Fuss: wie die h1 */
  --w-titel:clamp(32px,8.6vw,40px);             /* h2 und Satz mit Luecke */
  --w-satz:22px;
  --w-lead:18px; --w-text:17px; --w-klein:15px;
  --w-abstand:clamp(88px,22vw,120px);
  --w-weich:cubic-bezier(.22,.61,.36,1);
  --w-spur:#3A3A44;
  font-family:var(--w-text-schrift);font-feature-settings:normal;color:var(--tinte);background:var(--grund);
}
@media(min-width:768px){.wegweiser{--w-rand:32px}}
@media(min-width:720px){.wegweiser{--w-gross:clamp(56px,5.6vw,80px);--w-titel:clamp(34px,3.3vw,46px);--w-satz:clamp(26px,2.4vw,34px);--w-lead:20px;--w-abstand:clamp(112px,11vw,160px)}}
@media(min-width:900px){.wegweiser{--w-plakat:clamp(76px,7.3vw,116px)}}
.wegweiser h1,.wegweiser h2,.wegweiser h3,.w-tuer-titel,.w-zahl,.w-gross,.w-suchfeld,.w-luecke,.w-mail,.w-aussage,.w-prod-name,.w-prod-preis,.wegweiser .wortmarke,.w-klausel-titel{font-family:var(--w-kopf)}
.wegweiser main{padding-top:0}
.w-rahmen{max-width:1200px;margin:0 auto;padding:0 var(--w-rand)}
@media(min-width:1240px){.w-rahmen{max-width:1320px}}
.w-abschnitt{padding-top:var(--w-abstand)}
.w-hero,.w-abschnitt,.w-ablauf,.w-fuss{overflow-x:clip}
.wegweiser ::selection{background:var(--akzent);color:#000}

/* Kopf und Knoepfe im dunklen System: Leiste ohne Linie und Glas, Knoepfe eckig; der Akzent gehoert der Hauptaktion */
.wegweiser .kopf{border-bottom:0;background:var(--grund);-webkit-backdrop-filter:none;backdrop-filter:none} /* taste-skill-ignore: schaltet das Glas des gemeinsamen Kopfes AB */
.wegweiser .zeichen{background:var(--tinte);color:#000;font-family:var(--w-kopf);font-size:15px}
.wegweiser .zeichen::after{background:var(--akzent)}
.wegweiser .mobil summary{border:0;background:var(--feld);border-radius:0}
.wegweiser .mobil-tafel{box-shadow:none;border-bottom:0}
.wegweiser .mobil-tafel a{border-bottom:0}
.wegweiser .knopf{border-radius:0;box-shadow:none;background:var(--feld);color:var(--tinte);border-color:var(--feld)}
.wegweiser .knopf.dunkel:hover{background:var(--feld2);border-color:var(--feld2)}
.wegweiser .knopf.haupt{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text);box-shadow:none}
.wegweiser .knopf.haupt:hover{background:#5B9BFF;border-color:#5B9BFF}
.wegweiser .knopf:active{transform:scale(.97)}
.wegweiser .sprache{border-radius:0}
.wegweiser .sprung{color:#000}
.wegweiser .sprache,.wegweiser .nav-cta{font-size:15px}
.wegweiser .menue a[aria-current]{border-bottom-color:var(--akzent)}

/* Links im Fliesstext: Unterstreichung antwortet auf Zeiger und Fokus */
.w-wege a,.w-beleg a,.w-preise a,.w-prod-kauf,.w-fuss-links a,.w-nach-oben{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.07em;text-underline-offset:.22em;transition:text-decoration-color .2s}
.w-wege a:hover,.w-beleg a:hover,.w-preise a:hover,.w-prod-kauf:hover,.w-fuss-links a:hover,.w-nach-oben:hover,.w-wege a:focus-visible,.w-beleg a:focus-visible,.w-preise a:focus-visible,.w-prod-kauf:focus-visible{text-decoration-color:currentColor}
.w-wege{margin:0;display:flex;flex-wrap:wrap;gap:0 28px}
.w-wege a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.pfeil{margin-left:.35em}

/* ------------------------------------------------------------------------------------------------ 1. Hero */
.w-hero{padding-top:clamp(20px,3.4vw,48px)}
.w-hero-gitter{display:grid;grid-template-columns:minmax(0,1fr) 42%;grid-template-areas:"h1 h1" "satz buehne" "aktion buehne" "vertrauen vertrauen" "tueren tueren";column-gap:16px;row-gap:18px;align-items:start}
.w-plakat{grid-area:h1;margin:0;max-width:none;font-size:var(--w-plakat);line-height:.96;letter-spacing:-.04em;font-weight:700;text-wrap:nowrap;hyphens:none}
.w-z{display:block;white-space:nowrap}
.w-hero-text{display:contents}
.w-satz{grid-area:satz}
.w-aktion{grid-area:aktion;align-self:start}
.w-vertrauen{grid-area:vertrauen}
.w-satz{margin:0;max-width:34ch;font-size:var(--w-lead);line-height:1.5}
.w-aktion{margin:0}
.w-knopf{min-height:56px;padding:0 22px;font-size:var(--w-text);font-weight:640;white-space:nowrap}
@media(min-width:900px){.w-knopf{padding:0 28px}}
.w-vertrauen{margin:0;max-width:34em;font-size:var(--w-klein);line-height:1.5;color:var(--grau)}
/* Buehne: freigestellter Fuchs, daneben nichts; das Licht seiner Gelenke ist die Lichtquelle der Szene */
.w-buehne{grid-area:buehne;position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;min-height:210px}
.w-buehne::before{content:"";position:absolute;left:50%;top:56%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,122,24,.46),rgba(255,122,24,.2) 50%,rgba(255,122,24,0) 100%)} /* taste-skill-ignore: Wunsch des Owners, Licht der Szene */
.w-stand{position:relative;display:block;width:auto;height:100%;max-height:min(66svh,620px);max-width:100%;aspect-ratio:var(--verh,.8);object-fit:contain}
.w-buehne.fuchs-live .w-stand{visibility:hidden}
/* Die vier Tueren: reine Textflaechen in einem Tonschritt */
.w-tueren{grid-area:tueren;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.w-tuer{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:92px;padding:14px 16px;background:var(--feld);color:var(--tinte);text-decoration:none;transition:background .25s,color .25s,transform .35s var(--w-weich)}
.w-tuer-haupt{background:var(--feld2)}
.w-tuer-titel{font-size:var(--w-lead);line-height:1.2;font-weight:700;letter-spacing:-.015em}
.w-tuer-zeile{font-size:var(--w-text);line-height:1.3}
@media(hover:hover){.w-tuer:hover{background:#34343d;transform:translateY(-3px)}}
.w-tuer:active{transform:scale(.97)}
.w-tuer:focus-visible{outline-offset:2px}
@media(min-width:900px){
  .w-hero-gitter{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"h1 buehne" "text buehne" "tueren buehne";column-gap:clamp(24px,4vw,64px);row-gap:clamp(20px,2.4vw,32px);min-height:calc(100svh - 120px)}
  .w-hero{padding-top:clamp(28px,3.6vw,56px)}
  .w-hero-text{display:block;grid-area:text}
  .w-satz,.w-aktion,.w-vertrauen{grid-area:auto}
  .w-aktion{margin:20px 0 0}
  .w-vertrauen{margin:14px 0 0}
  .w-satz{font-size:var(--w-lead);max-width:44ch}
  .w-buehne{min-height:0}
  .w-buehne::before{width:120%}
  .w-stand{max-height:min(86svh,780px)}
  .w-tuer{min-height:120px;padding:18px 22px}
  .w-hero-text{max-width:620px}
}

/* ------------------------------------------------------------------------------------------------ Aussagen (Statement) */
.w-aussage{margin:0;max-width:none;font-size:var(--w-satz);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.w-aussage strong{font-weight:700}

/* 2. Musterarbeiten als ein Absatz */
.w-name{display:inline;color:var(--grau);text-decoration:none;transition:color .2s}
.w-name:hover,.w-name:focus-visible,.w-name.ist-gewaehlt{color:var(--tinte)}
.w-name span{border-bottom:0}
.w-eintrag{margin-right:.08em;white-space:nowrap}
.w-eintrag::after{content:","}
.w-eintrag:last-child::after{content:"."}
.w-mini{display:inline-block;width:1.25em;height:.8em;margin-left:.22em;object-fit:cover;vertical-align:baseline;transform-origin:left center;transition:transform .35s var(--w-weich)}
.w-name:hover .w-mini,.w-name:focus-visible .w-mini{transform:scale(1.6)}
.w-streifen{margin:clamp(28px,4vw,52px) 0 0}
.w-streifen-link{display:block;overflow:hidden;background:var(--feld)}
.w-streifen img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.w-streifen figcaption{margin-top:14px;font-size:var(--w-klein);color:var(--grau)}
.w-streifen-name{color:var(--tinte);font-weight:640;margin-right:.4em}
.w-beleg{display:grid;gap:10px 48px;margin-top:clamp(24px,3vw,40px);font-size:var(--w-text)}
.w-beleg p{margin:0;max-width:62ch}
@media(max-width:1099px){.w-eintrag:nth-child(n+9){display:none}.w-eintrag:nth-child(8)::after{content:"."}}
@media(max-width:719px){.w-eintrag:nth-child(n+7){display:none}.w-eintrag:nth-child(6)::after{content:"."}.w-eintrag:nth-child(n+4) .w-mini{display:none}}
@media(min-width:900px){.w-streifen img{aspect-ratio:2.2/1}.w-beleg{grid-template-columns:1fr 1fr}.w-beleg .w-wege{grid-column:1/-1}}

/* 3. Das wird gerade gesucht: Hauptbuch */
.w-band{margin-top:var(--w-abstand);padding:clamp(64px,8vw,112px) 0;background:var(--feld)}
.w-buch{display:grid;gap:44px}
.w-buch-kopf h2,.w-titel2{margin:0;max-width:none;font-size:var(--w-titel);line-height:1.08;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.w-lead{margin:16px 0 0;max-width:30em;font-size:var(--w-lead);line-height:1.5;color:var(--tinte)}
.w-buch-kopf .w-wege{margin-top:8px}
.w-buch-liste{list-style:none;margin:0;padding:0;display:grid;gap:44px}
.w-zeile{display:grid;grid-template-columns:1fr;gap:6px 28px}
.w-zahl{margin:0;font-size:var(--w-gross);line-height:.9;font-weight:700;letter-spacing:-.045em;font-variant-numeric:tabular-nums lining-nums}
.w-zeile-text h3{margin:0;font-size:var(--w-lead);line-height:1.25;font-weight:700}
.w-zeile-text p{margin:0}
.w-mass{font-size:var(--w-klein);color:var(--grau);margin-top:2px!important}
.w-gibt{margin-top:10px!important;font-size:var(--w-text);line-height:1.5;max-width:34em}
.w-zeile .w-wege{margin-top:6px!important}
@media(max-width:719px){.w-buch-liste{gap:84px}}
@media(min-width:720px){.w-zeile{grid-template-columns:minmax(2.1em,auto) 1fr;align-items:start}.w-zahl{text-align:right;min-width:2.1em}}
@media(min-width:900px){
  .w-buch{grid-template-columns:repeat(12,1fr);column-gap:24px}
  .w-buch-kopf{grid-column:1/6;align-self:start;position:sticky;top:112px}
  .w-buch-liste{grid-column:7/13}
  .w-buch-weiter{grid-column:7/13}
}

/* 4. Suche als Ueberschrift: das eine Live-Ding */
.w-suchzeile{display:flex;align-items:center;gap:16px}
.w-suchfeld{flex:1;min-width:0;margin:0;padding:.06em 0;font:inherit;font-family:var(--w-kopf);font-size:var(--w-gross);line-height:1.1;letter-spacing:-.04em;font-weight:700;color:var(--tinte);caret-color:var(--akzent);background:transparent;border:0;border-radius:0;-webkit-appearance:none;appearance:none}
.w-suchfeld::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.w-suchfeld::placeholder{color:var(--leise);opacity:1}
.w-suchknopf{flex:none;min-height:52px}
.js .w-suchknopf{display:none}
.w-treffer{margin-top:clamp(18px,2.4vw,30px);max-width:560px}
@media(min-width:900px){.w-suche{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}.w-suchzeile{grid-column:1/-1}.w-beispiele{grid-column:1/6;grid-row:2;margin-top:clamp(18px,2.4vw,30px)}.w-treffer{grid-column:7/13;grid-row:2;width:100%}}
.w-treffer[hidden]{display:none}
.w-treffer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.w-treffer a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:56px;padding:12px 18px;background:var(--feld);color:var(--tinte);text-decoration:none;transition:background .2s,color .2s,transform .3s var(--w-weich)}
.w-treffer a:hover,.w-treffer a:focus-visible{background:var(--akzent);color:#000}
.w-treffer a:active{transform:scale(.98)}
.w-t-titel{font-weight:640;font-size:var(--w-text);line-height:1.3}
.w-t-art{font-size:var(--w-klein);white-space:nowrap;opacity:.8}
.w-leer{margin:0;padding:14px 18px;background:var(--feld);font-size:var(--w-text)}
.w-beispiele{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:clamp(20px,2.4vw,30px) 0 0;font-size:var(--w-klein);color:var(--grau)}
.w-beispiele span{margin-right:6px}
.w-beispiel{min-height:44px;padding:0 18px;font:inherit;font-size:var(--w-text);color:var(--tinte);background:var(--feld);border:0;border-radius:0;cursor:pointer;transition:background .2s,color .2s,transform .2s}
@media(hover:hover){.w-beispiel:hover{background:var(--akzent);color:#000}}
.w-beispiel:active{transform:scale(.96)}
@media(max-width:719px){.w-suchzeile{flex-wrap:wrap}.w-suchknopf{width:100%}}

/* 5. So laeuft ein Auftrag: zwei Felder, ein Regler */
.w-ablauf{margin-top:var(--w-abstand);background:var(--feld)}
.w-klausel-titel{margin:0;max-width:none;padding:clamp(40px,5vw,72px) var(--w-rand) 18px;font-size:var(--w-titel);line-height:1.08;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.w-stufen{list-style:none;margin:0;padding:0}
.w-stufe{padding:0 var(--w-rand) 28px}
.w-stufe p{margin:0}
.w-klausel{font-size:var(--w-lead);font-weight:700;margin-bottom:6px!important}
.w-stufe-text{max-width:30em;font-size:var(--w-lead);line-height:1.5;align-self:end}
.w-stufe-ui{margin-top:16px}
.w-preise{margin:0;padding:22px var(--w-rand) clamp(40px,5vw,64px);font-size:var(--w-text);line-height:1.6}
.w-preise a{white-space:nowrap}
.js .w-ablauf{display:grid;grid-template-columns:1fr}
.js .w-klausel-titel{grid-row:4;min-height:3.4em;padding-bottom:10px}
.js .w-stufen{display:contents}
.js .w-stufe{display:none}
.js .w-stufe.ist-aktiv{display:contents}
.js .w-klausel{display:none}
.js .w-stufe.ist-aktiv .w-stufe-text{grid-row:5;padding:0 var(--w-rand) 24px}
.js .w-stufe.ist-aktiv .w-stufe-ui{grid-row:1;margin:0;padding:36px var(--w-rand);background:var(--grund);display:grid;place-items:center;min-height:min(46svh,380px)}
.js .w-regler{grid-row:2}
.js .w-stufennamen{grid-row:3}
.js .w-preise{grid-row:6}
.w-regler{position:relative;height:56px;margin:12px var(--w-rand) 0}
.w-regler[hidden],.w-stufennamen[hidden]{display:none}
.w-spur{position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;background:var(--w-spur);overflow:hidden}
.w-fuell{position:absolute;inset:0;background:var(--akzent);transform-origin:left center;transform:scaleX(var(--p,0));transition:transform .5s var(--w-weich)}
.w-regler-feld{position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.w-regler-feld::-webkit-slider-runnable-track{height:56px;background:transparent}
.w-regler-feld::-moz-range-track{height:56px;background:transparent}
.w-regler-feld::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:40px;margin-top:8px;border:0;border-radius:0;background:var(--tinte);transition:transform .2s}
.w-regler-feld::-moz-range-thumb{width:40px;height:40px;border:0;border-radius:0;background:var(--tinte)}
.w-regler-feld:active::-webkit-slider-thumb{transform:scale(.9)}
.w-regler-feld:focus-visible{outline:3px solid var(--tinte);outline-offset:2px}
.w-stufennamen{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px var(--w-rand) 8px}
.w-preise p{margin:0}
.w-preise .w-wege{margin-top:6px}
.w-stufenname{min-height:44px;padding:0;text-align:left;font:inherit;font-size:var(--w-text);color:var(--grau);background:transparent;border:0;cursor:pointer;transition:color .2s}
.w-stufenname:hover,.w-stufenname.ist-aktiv{color:var(--tinte)}
.w-stufenname.ist-aktiv{font-weight:700}
/* die kleinen Oberflaechen (data-ui): eigene Konventionen, hell auf dem dunklen Feld, echte Raender erlaubt */
.w-ui{--tinte:#0B0B10;--grau:#475569;--feld:#E2E8F0;width:100%;max-width:440px;padding:22px;background:#F8FAFC;color:#0B0B10;font-size:var(--w-text);line-height:1.5;border:1px solid #CBD5E1}
@media(min-width:900px){.w-ui{max-width:540px;padding:32px;font-size:var(--w-lead)}.w-ui-kopf{margin-bottom:22px!important}.w-ui-feld,.w-ui-preise li,.w-ui-schritte li,.w-ui-dateien li{padding-top:12px;padding-bottom:12px}}
.w-ui p,.w-ui ul{margin:0;padding:0;list-style:none}
.w-ui-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px!important}
.w-ui-kopf span{padding:2px 10px;font-size:var(--w-klein);background:var(--feld);color:var(--grau)}
.w-ui-feld{display:grid;grid-template-columns:5.2em 1fr;gap:8px;padding:8px 0;border-bottom:1px solid #E2E8F0} /* taste-skill-ignore: data-ui */
.w-ui-feld span{color:var(--grau)}
.w-ui-text{margin-top:14px!important}
.w-ui-preise li,.w-ui-schritte li,.w-ui-dateien li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 0;border-bottom:1px solid #E2E8F0} /* taste-skill-ignore: data-ui */
.w-ui-preise li em{grid-column:1/-1;order:3;font-style:normal;font-size:var(--w-klein);color:var(--grau)}
.w-ui-preise b{font-variant-numeric:tabular-nums}
.w-ui-schritte li{grid-template-columns:auto 1fr auto;align-items:center}
.w-ui-schritte li::before{content:"";width:14px;height:14px;border:2px solid #3B82F6}
.w-ui-schritte .fertig::before{background:#3B82F6}
.w-ui-schritte .jetzt{font-weight:700}
.w-ui-schritte em,.w-ui-dateien em{font-style:normal;font-size:var(--w-klein);color:var(--grau)}
@media(min-width:900px){
  .js .w-ablauf{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto auto auto;min-height:0}
  .js .w-klausel-titel{grid-column:1;grid-row:1;padding-left:max(var(--w-rand),calc(50vw - 568px));padding-top:clamp(56px,6vw,88px);min-height:0}
  .js .w-stufe.ist-aktiv .w-stufe-text{grid-column:1;grid-row:2;padding-left:max(var(--w-rand),calc(50vw - 568px));padding-right:40px}
  .js .w-stufe.ist-aktiv .w-stufe-ui{grid-column:2;grid-row:1/3;min-height:min(62svh,560px);padding:48px}
  .js .w-regler{grid-column:1/3;grid-row:3;margin-left:max(var(--w-rand),calc(50vw - 568px));margin-right:max(var(--w-rand),calc(50vw - 568px));margin-top:28px}
  .js .w-stufennamen{grid-column:1/3;grid-row:4;display:flex;justify-content:space-between;padding-left:max(var(--w-rand),calc(50vw - 568px));padding-right:max(var(--w-rand),calc(50vw - 568px))}
  .js .w-preise{grid-column:1/3;grid-row:5;padding-left:max(var(--w-rand),calc(50vw - 568px));padding-right:max(var(--w-rand),calc(50vw - 568px))}
}
@media(min-width:1240px){
  .js .w-klausel-titel,.js .w-stufe.ist-aktiv .w-stufe-text,.js .w-stufennamen,.js .w-preise{padding-left:max(var(--w-rand),calc(50vw - 628px))}
  .js .w-stufennamen,.js .w-preise{padding-right:max(var(--w-rand),calc(50vw - 628px))}
  .js .w-regler{margin-left:max(var(--w-rand),calc(50vw - 628px));margin-right:max(var(--w-rand),calc(50vw - 628px))}
}

/* 6. Fertige Produkte als Tabelle, Partnerzeile links */
.w-tafel{display:grid;gap:44px;margin-top:clamp(36px,4.4vw,64px)}
.w-partner .w-lead{margin-top:18px;max-width:34em;font-size:var(--w-text)}
.w-partner .w-wege{margin-top:8px}
.w-prodliste{list-style:none;margin:0;padding:0}
.w-prod{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;margin:0 -14px;padding:14px;transition:background .25s}
@media(hover:hover){.w-prod:hover{background:var(--feld)}}
.w-prod-art{grid-column:1/-1;font-size:var(--w-klein);color:var(--grau)}
.w-prod-name{display:flex;align-items:center;gap:14px;color:var(--tinte);text-decoration:none;font-size:var(--w-lead);font-weight:700;line-height:1.25;letter-spacing:-.012em}
.w-prod-name img{flex:none;width:72px;height:72px;object-fit:cover;background:var(--feld)}
.w-prod-name img[src*="produkt-"]{object-fit:contain;padding:4px}
.w-prod-zeile{display:block;margin-top:6px;max-width:34em;font-family:var(--w-text-schrift);font-size:var(--w-klein);font-weight:400;line-height:1.45;letter-spacing:0;color:var(--grau)}
.w-prod-name:hover span,.w-prod-name:focus-visible span{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.07em;text-decoration-color:var(--grau)}
.w-prod-preis{font-size:var(--w-lead);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.w-prod-kauf{grid-column:1/-1;display:inline-flex;align-items:center;min-height:44px;font-size:var(--w-text);font-weight:640;color:var(--tinte)}
.w-tafel-rechts .w-wege{margin-top:10px}
.w-tafel-rechts .zahlweg{margin:22px 0 0;max-width:46em;font-size:var(--w-klein);color:var(--grau)}
@media(min-width:720px){
  .w-prod{grid-template-columns:7em 1fr auto auto;gap:18px;align-items:center}
  .w-prod-art{grid-column:auto}
  .w-prod-name{gap:22px}
  .w-prod-name img{width:120px;height:120px}
  .w-prod-kauf{grid-column:auto}
}
@media(min-width:900px){.w-tafel{grid-template-columns:5fr 7fr;column-gap:clamp(32px,5vw,80px)}}

/* 7. Fragen: weite Ueberschrift, eingerueckte Fragen */
.w-gross{margin:0;max-width:none;font-size:var(--w-gross);line-height:.95;letter-spacing:-.04em;font-weight:700}
.w-fragen{display:grid;gap:clamp(32px,4vw,56px)}
.w-frage{margin:0 0 6px;padding:0 20px;background:transparent;transition:background .3s}
.w-frage[open]{background:var(--feld)}
.w-frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:68px;font-size:var(--w-lead);font-weight:500;line-height:1.3;letter-spacing:-.01em;transition:transform .25s var(--w-weich)}
.w-frage summary::-webkit-details-marker{display:none}
.w-frage summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--tinte);border-bottom:2px solid var(--tinte);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--w-weich)}
.w-frage[open] summary::after{transform:translateY(3px) rotate(-135deg)}
@media(hover:hover){.w-frage:not([open]) summary:hover{transform:translateX(6px)}}
.w-antwort{padding:0 0 26px}
.w-antwort p{margin:0;max-width:44em;font-size:var(--w-text);line-height:1.6}
@media(min-width:900px){
  .w-fragen{grid-template-columns:repeat(12,1fr);column-gap:24px}
  .w-fragen .w-gross{grid-column:1/-1}
  .w-fragen-liste{grid-column:5/13}
  .w-frage{padding:0 24px}
}

/* 8. Schluss: ein Satz mit Luecke */
.w-luecke{display:flex;flex-wrap:wrap;align-items:center;gap:.14em .3em;margin:0;max-width:none;font-size:var(--w-titel);line-height:1.1;letter-spacing:-.04em;font-weight:700}
.w-luecke label{white-space:nowrap}
.w-luecke input{flex:1 1 6em;min-width:0;width:7.2em;max-width:100%;height:1.25em;padding:0 .3em;font:inherit;font-family:var(--w-kopf);letter-spacing:inherit;font-weight:500;color:var(--tinte);background:var(--feld);border:0;border-radius:0;caret-color:var(--akzent)}
.w-luecke input::placeholder{color:var(--leise);opacity:1}
.w-luecke .knopf{min-height:1.25em;padding:0 .4em;font-size:inherit;font-weight:700;letter-spacing:inherit;line-height:1.1;font-family:var(--w-kopf)}
.w-luecke .knopf .pfeil svg{width:.42em;height:.42em}
.w-hinweis{margin:22px 0 0;max-width:34em;font-size:var(--w-lead);line-height:1.5}
@media(min-width:720px){.w-luecke{font-size:var(--w-gross)}.w-luecke input{flex:1 1 6em;width:auto;max-width:9.8em;padding:0 .2em}}

/* 9. Fuss: die E-Mail-Adresse ist die Ueberschrift */
.w-fuss{margin-top:var(--w-abstand);background:var(--feld);color:var(--tinte);display:flex;min-height:min(78svh,720px)}
.w-fuss-innen{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-top:36px;padding-bottom:36px}
.w-fuss-oben{display:grid;gap:14px 28px;font-size:var(--w-klein);line-height:1.5}
.w-fuss-oben p{margin:0}
.w-fuss a{color:var(--tinte)}
.w-nach-oben{justify-self:start;min-height:44px;display:inline-flex;align-items:center}
.w-mail{display:block;margin-top:auto;font-size:var(--w-plakat);line-height:.95;letter-spacing:-.04em;font-weight:700;color:var(--tinte);text-decoration:none;overflow-wrap:anywhere;transition:color .25s,transform .4s var(--w-weich)}
@media(hover:hover){.w-mail:hover{color:var(--akzent);transform:translateX(8px)}}
.w-fuss-links{display:flex;flex-wrap:wrap;gap:4px 26px;font-size:var(--w-klein)}
.w-fuss-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration-color:transparent}
.w-fuss :focus-visible{outline-color:#fff}
@media(min-width:900px){.w-fuss{min-height:min(90svh,900px)}.w-fuss-oben{grid-template-columns:repeat(3,1fr) auto;align-items:start}.w-fuss-oben .w-nach-oben{justify-self:end}}

/* ------------------------------------------------------------------------------------------------ Der Fuchs, der laeuft und redet */
/* "Fragen?"-Knopf des Hilfe-Bots: auf dieser Seite ist der Fuchs der Chat. Der Bot selbst bleibt, wie er ist (nur sein Knopf ruht). */
.wegweiser .glh-knopf{display:none}
.wegweiser .glh-fenster{right:12px;bottom:calc(var(--w-heim,170px) + 28px);width:min(380px,calc(100vw - 24px));max-height:min(520px,calc(100svh - var(--w-heim,170px) - 100px));background:var(--feld);color:var(--tinte);border:0;border-radius:0;box-shadow:0 12px 40px rgba(0,0,0,.5);font-family:var(--w-text-schrift)}
.wegweiser .glh-kopf{background:var(--feld2);font-family:var(--w-kopf)}
.wegweiser .glh-kopf button{color:var(--tinte)}
.wegweiser .glh-du{background:var(--akzent);color:#000;border-radius:0}
.wegweiser .glh-bot a{color:var(--tinte)}
.wegweiser .glh-vorschlag button{background:var(--feld2);border:0;border-radius:0;color:var(--tinte)}
.wegweiser .glh-zeile{border-top:0;background:var(--feld2)}
.wegweiser .glh-zeile input{background:var(--grund);color:var(--tinte);border:0;border-radius:0}
.wegweiser .glh-zeile button{background:var(--akzent);color:#000;border-radius:0}
.wegweiser .glh-fenster button:focus-visible,.wegweiser .glh-fenster input:focus-visible{outline-color:var(--tinte)}

.w-fuchs{position:fixed;left:0;top:0;z-index:40;width:var(--fb,300px);height:var(--fh,400px);transform-origin:0 0;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;padding:0;background:none;touch-action:manipulation;will-change:transform}
.w-fuchs[hidden]{display:none}
.w-fuchs{pointer-events:none}
.w-fuchs.ruht{pointer-events:auto}
.w-fuchs:focus-visible{outline:3px solid var(--tinte);outline-offset:-6px}
.w-fuchs-dreh{position:absolute;inset:0}
.w-fuchs-wippen{position:absolute;inset:0}
.w-pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;-webkit-user-drag:none;user-select:none}
.w-pose.ist-pose{opacity:1}
.w-fuchs-knoepfe{position:fixed;left:0;top:0;z-index:41;display:flex;gap:8px;will-change:transform}
.w-fuchs-knoepfe[hidden]{display:none}
.w-fknopf{min-width:44px;min-height:44px;padding:0 14px;font:inherit;font-family:var(--w-text-schrift);font-size:var(--w-klein);font-weight:600;color:var(--tinte);background:var(--feld2);border:0;border-radius:0;cursor:pointer;transition:background .2s,color .2s,transform .2s}
@media(hover:hover){.w-fknopf:hover{background:#3A3A44}}
.w-fknopf:active{transform:scale(.95)}
.w-fknopf[aria-pressed="true"]{background:var(--akzent);color:#000}
.w-fuchs-ruf{position:fixed;right:12px;bottom:12px;z-index:40;min-height:48px;padding:0 18px;font:inherit;font-weight:700;color:#000;background:var(--akzent);border:0;border-radius:0;cursor:pointer}
.w-fuchs-ruf[hidden]{display:none}
.w-fuchs.weicht,.w-fuchs-knoepfe.weicht,.w-sprech.weicht{opacity:0;pointer-events:none}
.w-fuchs,.w-fuchs-knoepfe,.w-fuchs-knoepfe{transition:opacity .2s}
.wegweiser button,.wegweiser summary,.wegweiser [role=button],.wegweiser a.knopf,.wegweiser input[type=range]{cursor:pointer}
/* Sprechblase: schwebt ueber dem Fuchs, deshalb darf sie einen Schatten haben (sie schwebt wirklich) */
.w-sprech{position:fixed;left:0;top:0;z-index:42;width:min(300px,calc(100vw - 24px));padding:14px 16px 16px;background:var(--tinte);color:#0B0B10;font-family:var(--w-text-schrift);font-size:var(--w-text);line-height:1.45;font-weight:500;opacity:0;pointer-events:none;transform:translate3d(0,8px,0);transition:opacity .25s,transform .3s var(--w-weich);will-change:transform,opacity}
.w-sprech.ist-offen{opacity:1;pointer-events:auto}
.w-sprech p{margin:0}
.w-sprech-zu{position:absolute;top:0;right:0;min-width:44px;min-height:44px;font:inherit;font-size:20px;line-height:1;color:#0B0B10;background:transparent;border:0;cursor:pointer}
.w-sprech-text{padding-right:26px}
.w-bton{margin-top:8px;min-width:0;min-height:44px;padding:0 14px;color:#0B0B10;background:#E2E8F0}
.w-bton[aria-pressed="true"]{background:#3B82F6;color:#000}
.w-sprech::after{content:"";position:absolute;bottom:-9px;right:var(--spitze,48px);width:18px;height:18px;background:var(--tinte);transform:rotate(45deg)}
.w-sprech.ist-links::after{display:none}
/* Idle: atmen; beim Gehen: wippen. Nur transform. */
@keyframes w-atmen{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.2%) scale(1.012)}}
@keyframes w-gehen{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-3.4%) rotate(1.2deg)}}
@media(prefers-reduced-motion:no-preference){
  .w-fuchs-wippen{animation:w-atmen 4s ease-in-out infinite}
  .w-fuchs.geht .w-fuchs-wippen{animation:w-gehen .46s ease-in-out infinite}
  .w-fuchs.spricht .w-fuchs-wippen{animation:w-atmen 1.1s ease-in-out infinite}
}
@media(max-width:899px){.w-sprech{font-size:16px}}
.w-fuchs-noch{display:none}

/* ------------------------------------------------------------------------------------------------ Bewegung */
@keyframes w-hoch{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  /* erster Bildschirm: nur CSS, kein Skript noetig; der Inhalt steht auch ohne Animation */
  .w-z{animation:w-hoch .95s var(--w-weich) both}
  .w-z2{animation-delay:.1s}
  .w-satz{animation:w-hoch .8s var(--w-weich) .28s both}
  .w-aktion{animation:w-hoch .8s var(--w-weich) .36s both}
  .w-vertrauen{animation:w-hoch .8s var(--w-weich) .44s both}
  .w-tuer{animation:w-hoch .8s var(--w-weich) calc(.34s + var(--i,0) * 80ms) both}
  .w-stand{animation:w-hoch 1.1s var(--w-weich) .2s both}
  /* ab dem zweiten Bildschirm: gestaffelt je Abschnitt, nur wenn das Skript laeuft (.js) */
  .js .w-rein{opacity:0;transform:translateY(24px);transition:opacity .85s var(--w-weich),transform .85s var(--w-weich);transition-delay:calc(var(--i,0) * 80ms)}
  .js .w-rein.ist-da{opacity:1;transform:none}
  /* Signatur: das grosse Bild oeffnet sich wie ein Shutter und setzt sich aus 1,12 fach in die Ruhe */
  .js .w-streifen-link{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
  .js .w-streifen-link img{transform:scale(1.12);transition:transform 1.6s var(--w-weich)}
  .js .w-streifen.ist-da .w-streifen-link{clip-path:inset(0)}
  .js .w-streifen.ist-da .w-streifen-link img{transform:none}
  .js .w-streifen figcaption{opacity:0;transition:opacity .8s var(--w-weich) .6s}
  .js .w-streifen.ist-da figcaption{opacity:1}
  .js .w-streifen.wechsel img{opacity:.35}
  .w-streifen img{transition:opacity .25s}
  .js .w-ablauf .w-stufe.ist-aktiv .w-stufe-ui .w-ui{animation:w-hoch .6s var(--w-weich) both}
  .js .w-ablauf .w-stufe.ist-aktiv .w-stufe-text{animation:w-hoch .6s var(--w-weich) .08s both}
  .js .w-klausel-titel.wechsel{animation:w-hoch .5s var(--w-weich) both}
}
@media(prefers-reduced-motion:reduce){
  .w-tuer,.w-mini,.w-treffer a,.w-prod,.w-frage,.w-mail,.w-fuell,.w-sprech{transition:none}
  .w-tuer:hover,.w-mail:hover{transform:none}
}