@font-face{font-family:"Clash Display";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/clash-display-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Clash Display";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/clash-display-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Clash Display";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/clash-display-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Author";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/author-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Author";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/author-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Author";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/author-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --grund:oklch(96.40% 0.0029 264.5);--schale:oklch(93.06% 0.0058 264.5);--flaeche:oklch(98.84% 0.0013 0);--flaeche-hoch:oklch(99.43% 0.0013 0);
  --haar:oklch(88.40% 0.0093 258.3);--feldrand:oklch(57.69% 0.0208 258.4);--tinte:oklch(22.02% 0.0115 254.1);--tinte-weich:oklch(46.50% 0.0220 258.4);
  --gruen:oklch(56.33% 0.1771 141.4);--gruen-tief:oklch(48.39% 0.1505 141.3);--gruen-dunkel:oklch(37.89% 0.1161 140.9);--gruen-hell:oklch(94.28% 0.0281 138.7);
  --fehler:oklch(50.13% 0.1783 28.7);--fehler-hell:oklch(94.78% 0.0199 25.2);--produktgrund:oklch(100.00% 0.0000 0);
  --g-gelb:oklch(83.04% 0.1699 84.0);--g-stern-leer:oklch(89.41% 0.0059 264.5);--g-stern-rand:oklch(53.99% 0.1273 59.5);--g-blau:oklch(53.18% 0.1807 258.3);
  --g-av-1:oklch(45.32% 0.1848 292.6);--g-av-2:oklch(51.66% 0.0931 181.1);--g-av-3:oklch(53.63% 0.1799 35.4);--g-av-4:oklch(51.34% 0.1603 255.7);--g-av-5:oklch(44.95% 0.0486 39.2);--g-av-6:oklch(48.98% 0.1868 2.5);
  --pe-gold:oklch(53.96% 0.0999 79.6);
  --schatten:0 1px 2px oklch(20% .01 250 / .06),0 18px 40px -22px oklch(20% .02 250 / .28);
  --schatten-hoch:0 2px 6px oklch(20% .01 250 / .08),0 34px 70px -30px oklch(20% .02 250 / .38);
  --ring:inset 0 0 0 1px oklch(20% .01 250 / .06);
  --ring-stark:inset 0 0 0 1px oklch(20% .01 250 / .11);
  --kurve:cubic-bezier(.32,.72,0,1);
  --kurve-raus:cubic-bezier(.16,1,.3,1);
  --r-huelle:28px;--r-kern:22px;--r-feld:14px;--r-rund:999px;
  --rand:clamp(16px,3.2vw,40px);
  --breit:1400px;
  --kopf:72px;
  --schrift-titel:"Clash Display","Avenir Next","Segoe UI",system-ui,sans-serif;
  --schrift-text:"Author","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:100px;scrollbar-color:var(--feldrand) var(--schale);accent-color:var(--gruen-tief)}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--schrift-text);font-size:1.0625rem;line-height:1.62;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4{margin:0;text-wrap:balance}
button{font:inherit;color:inherit}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
table{border-collapse:collapse;width:100%}
::selection{background:var(--gruen);color:var(--flaeche)}
input,textarea,select{caret-color:var(--gruen-tief)}
:focus-visible{outline:3px solid var(--gruen-tief);outline-offset:3px;border-radius:4px}

.fs-sprung{position:absolute;left:var(--rand);top:-100px;z-index:90;background:var(--gruen-tief);color:var(--flaeche);padding:12px 20px;border-radius:var(--r-rund);font-weight:600;text-decoration:none}
.fs-sprung:focus{top:14px}
.fs-bahn{max-width:var(--breit);margin-inline:auto;padding-inline:var(--rand)}
.fs-eng{max-width:800px;margin-inline:auto}
.fs-nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.fs-js) .fs-nur-js{display:none !important}
html.fs-js .fs-ohne-js{display:none !important}
.fs-nowrap{white-space:nowrap}
.fs-zahlen{font-variant-numeric:tabular-nums}
.fs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.fs-abstand-s{margin-top:16px}
.fs-abstand-m{margin-top:clamp(22px,3vw,34px)}
.fs-abstand-l{margin-top:clamp(34px,5vw,56px)}
.fs-kasten{padding:20px 22px}
.fs-mitte{text-align:center}

/* Einspaltige Grundraster als minmax(0,1fr), damit kein langes Wort die Spur aufblaeht. */
.fs-hero-raster,.fs-bento,.fs-fuss-raster,.fs-merkmale,.fs-kontakt-raster,.fs-team-raster,.fs-kopf-raster,
.fs-produkte,.fs-marken,.fs-leasing,.fs-produkt-raster,.fs-kasse-raster,.fs-korb-raster,.fs-leistungen,.fs-zwei,.fs-drei{grid-template-columns:minmax(0,1fr)}

/* ---------- Typografie ---------- */
h1,h2,.fs-titel{font-family:var(--schrift-titel);font-weight:600;letter-spacing:-.022em;line-height:1.02;hyphens:manual;overflow-wrap:break-word}
h1{font-size:clamp(2.5rem,1.5rem + 3.6vw,4.4rem)}
h2{font-size:clamp(1.9rem,1.3rem + 2vw,3rem);line-height:1.05}
h3{font-family:var(--schrift-titel);font-weight:600;font-size:1.36rem;line-height:1.18;letter-spacing:-.012em}
h4{font-family:var(--schrift-text);font-weight:600;font-size:1rem;line-height:1.32}
.fs-lead{font-size:clamp(1.06rem,.98rem + .4vw,1.26rem);line-height:1.55;color:var(--tinte-weich);max-width:44ch}
.fs-klein{font-size:.92rem;color:var(--tinte-weich)}
.fs-winzig{font-size:.82rem;color:var(--tinte-weich);line-height:1.5}
.fs-etikett{font-family:var(--schrift-text);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen-tief)}
.fs-textlink{color:var(--gruen-tief);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;font-weight:500}
.fs-textlink:hover{text-decoration-thickness:2px}
.fs-fliess p+p,.fs-fliess p+ul,.fs-fliess ul+p,.fs-fliess p+ol,.fs-fliess ol+p,.fs-fliess table+p,.fs-fliess p+table{margin-top:1em}
.fs-fliess a{color:var(--gruen-tief);text-decoration:underline;text-underline-offset:3px}
.fs-fliess h2{margin-top:2.2em;margin-bottom:.5em;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem)}
.fs-fliess h2:first-child{margin-top:0}
.fs-fliess h3{margin-top:1.6em;margin-bottom:.35em}
.fs-fliess ul{padding-left:1.15em;list-style:disc}
.fs-fliess ol{padding-left:1.3em}
.fs-fliess li+li{margin-top:.3em}
.fs-fliess dl{display:grid;grid-template-columns:minmax(0,1fr);gap:.2em 1.5em;margin:0}
.fs-fliess dt{font-weight:600}
.fs-fliess dd{margin:0 0 .7em}
.fs-fliess table{margin-top:1em;font-size:.96rem}
.fs-fliess th,.fs-fliess td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--haar);vertical-align:top}
.fs-fliess th{font-weight:600}
.fs-fliess blockquote{margin:1em 0;padding:18px 22px;background:var(--flaeche);border-radius:var(--r-feld);box-shadow:var(--ring-stark)}

/* ---------- Icons ---------- */
.fs-icon{width:20px;height:20px;flex:none}
.fs-icon--gross{width:26px;height:26px}

/* ---------- Double-Bezel ---------- */
.fs-huelle{background:var(--schale);border-radius:var(--r-huelle);padding:6px;box-shadow:var(--ring)}
.fs-kern{background:var(--flaeche);border-radius:var(--r-kern);box-shadow:var(--ring),0 1px 0 oklch(100% 0 0 / .8) inset;overflow:hidden}
figure.fs-kern{margin:0}
.fs-kern--bild{background:var(--schale)}
.fs-kern--bild picture{display:block;width:100%;height:100%}
.fs-kern--bild img{width:100%;height:100%;object-fit:cover}
.fs-kern--breit{aspect-ratio:16/7}
.fs-kern--hoch{aspect-ratio:4/3}
.fs-kern--quer{aspect-ratio:3/2}
.fs-kern--leer{display:grid;place-items:center;width:100%;height:100%;min-height:180px;background:var(--schale)}
.fs-kern--leer .fs-marke__signet{width:64px;height:64px;color:var(--haar)}
.fs-schwebt{box-shadow:var(--schatten)}

/* ---------- Knoepfe: Button-in-Button ---------- */
.fs-knopf{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 22px 6px 6px;border:0;border-radius:var(--r-rund);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .2s var(--kurve),background-color .2s var(--kurve),color .2s var(--kurve),box-shadow .2s var(--kurve)}
.fs-knopf:active{transform:translateY(1px) scale(.985)}
.fs-knopf__kreis{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-rund);flex:none;transition:transform .2s var(--kurve)}
.fs-knopf:hover .fs-knopf__kreis{transform:scale(1.06)}
.fs-knopf--voll{background:var(--gruen-tief);color:var(--flaeche);box-shadow:var(--schatten)}
.fs-knopf--voll .fs-knopf__kreis{background:var(--flaeche);color:var(--gruen-tief)}
.fs-knopf--voll:hover{background:var(--gruen-dunkel)}
.fs-knopf--leer{background:var(--flaeche);color:var(--tinte);box-shadow:var(--ring-stark)}
.fs-knopf--leer .fs-knopf__kreis{background:var(--gruen-hell);color:var(--gruen-tief)}
.fs-knopf--leer:hover{background:var(--flaeche-hoch);box-shadow:var(--ring-stark),var(--schatten)}
.fs-knopf--schmal{min-height:44px;padding:4px 18px 4px 4px;font-size:.94rem}
.fs-knopf--schmal .fs-knopf__kreis{width:36px;height:36px}
.fs-knopf--nurtext{padding-inline:22px}
.fs-knopf--breit{width:100%;justify-content:center}
.fs-knopf[disabled],.fs-knopf[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.fs-knopf[disabled]:hover .fs-knopf__kreis{transform:none}

/* ---------- Chips ---------- */
.fs-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-rund);background:var(--flaeche);color:var(--tinte-weich);font-size:.86rem;font-weight:500;box-shadow:var(--ring)}
.fs-chip--akzent{background:var(--gruen-hell);color:var(--gruen-dunkel)}
/* Chips als Sprunglinks (Hero): Trefferflaeche per ::after auf 44 px Hoehe, Optik bleibt schlank. */
.fs-chip--link{position:relative;text-decoration:none;transition:box-shadow .2s var(--kurve),color .2s var(--kurve),transform .2s var(--kurve)}
.fs-chip--link::after{content:"";position:absolute;inset:-6px 0}
.fs-chip--link:hover{color:var(--tinte);box-shadow:var(--ring-stark),var(--schatten)}
.fs-chip--akzent.fs-chip--link:hover{color:var(--gruen-dunkel);box-shadow:inset 0 0 0 1px var(--gruen),var(--schatten)}
.fs-chip--link:active{transform:scale(.98)}
.fs-chip__punkt{width:7px;height:7px;border-radius:var(--r-rund);background:currentColor;flex:none}
.fs-chip--zu .fs-chip__punkt{background:transparent;box-shadow:inset 0 0 0 2px currentColor}

/* ---------- Vorschau-Band ---------- */
.fs-vorschau{position:relative;z-index:70;background:var(--tinte);color:var(--grund);font-size:.86rem;line-height:1.4}
.fs-vorschau .fs-bahn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;padding-block:9px}
.fs-vorschau a{color:var(--grund);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Entwurfsnotiz ---------- */
.fs-notiz{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px 18px;border-radius:var(--r-feld);background:var(--gruen-hell);color:var(--gruen-dunkel);font-size:.9rem;line-height:1.5;box-shadow:var(--ring)}
.fs-notiz+.fs-notiz{margin-top:10px}
.fs-produkt__aktion{position:absolute;top:14px;right:14px}
.fs-kaufbox__aktion{justify-self:start;margin-bottom:6px}
.fs-notiz .fs-icon{margin-top:2px}
.fs-notiz strong{font-weight:600}

/* ---------- Kopfzeile ---------- */
.fs-kopfzeile{position:sticky;top:0;z-index:50;background:var(--grund);box-shadow:0 1px 0 var(--haar)}
.fs-kopfzeile .fs-bahn{display:flex;align-items:center;gap:12px;height:var(--kopf)}
.fs-marke{display:flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;flex:none;margin-right:auto}
.fs-marke__bild{height:46px;width:auto}
.fs-marke__wort{display:grid;gap:0}
.fs-marke__name{font-family:var(--schrift-titel);font-weight:700;font-size:1.05rem;line-height:1;letter-spacing:-.01em}
.fs-marke__zusatz{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinte-weich);font-weight:600}
.fs-hauptnavi{display:none;align-items:center;gap:2px}
.fs-hauptnavi a{position:relative;padding:9px 11px;border-radius:var(--r-feld);text-decoration:none;font-size:.95rem;font-weight:500;color:var(--tinte-weich);white-space:nowrap;transition:color .2s var(--kurve),background-color .2s var(--kurve)}
.fs-hauptnavi a:hover{color:var(--tinte);background:var(--schale)}
.fs-hauptnavi a[aria-current="page"]{color:var(--tinte)}
.fs-hauptnavi a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;border-radius:2px;background:var(--gruen)}
.fs-kopf-aktionen{display:none;align-items:center;gap:8px;flex:none}
.fs-kopf-tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px 8px 12px;border-radius:var(--r-rund);text-decoration:none;font-weight:600;font-size:.95rem;color:var(--tinte);background:var(--flaeche);box-shadow:var(--ring-stark);transition:background-color .2s var(--kurve),box-shadow .2s var(--kurve)}
.fs-kopf-tel:hover{background:var(--flaeche-hoch);box-shadow:var(--ring-stark),var(--schatten)}
.fs-kopf-tel .fs-icon{color:var(--gruen-tief)}
.fs-kopf-status{display:none;align-items:center;gap:8px;font-size:.86rem;color:var(--tinte-weich);white-space:nowrap}
.fs-kopf-status .fs-chip__punkt{background:var(--gruen)}
.fs-kopf-status[data-zu="ja"] .fs-chip__punkt{background:var(--tinte-weich)}
.fs-korbknopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;padding-inline:12px;border:0;border-radius:var(--r-rund);background:var(--flaeche);color:var(--tinte);font-weight:600;font-size:.92rem;text-decoration:none;box-shadow:var(--ring);transition:background-color .2s var(--kurve)}
.fs-korbknopf:hover{background:var(--flaeche-hoch)}
.fs-korbknopf .fs-icon{color:var(--gruen-tief)}
.fs-korb-zahl{display:none;min-width:22px;height:22px;padding-inline:6px;border-radius:var(--r-rund);background:var(--gruen-tief);color:var(--flaeche);font-size:.76rem;font-weight:700;line-height:22px;text-align:center}
.fs-korb-zahl[data-anzahl]:not([data-anzahl="0"]){display:inline-block}
.fs-menuknopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;padding-inline:14px;border:0;border-radius:var(--r-rund);background:var(--flaeche);color:var(--tinte);font-weight:600;font-size:.92rem;cursor:pointer;box-shadow:var(--ring);transition:background-color .2s var(--kurve)}
.fs-menuknopf:hover{background:var(--flaeche-hoch)}
/* Seit dem Kontoknopf passt die Kopfzeile mit Wortmarke und Menuewort erst ab rund 400px ungequetscht. Unter 390px
   zeigt der Menueknopf nur das Symbol (Wort bleibt fuer Screenreader, Name "Menue"), Abstaende 8px; erst unter 360px
   weicht die Wortmarke der Kopfzeile, sonst scrollt die Seite bei 320px waagerecht. Fuss und Schublade behalten sie. */
@media (max-width:389px){.fs-kopfzeile .fs-bahn{gap:8px}.fs-menuknopf{position:relative;padding-inline:0;width:48px}.fs-menuknopf__wort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:359px){.fs-kopfzeile .fs-marke__wort{display:none}}

/* ---------- Schublade ---------- */
.fs-schublade{position:fixed;inset:0;z-index:80;display:grid;justify-items:end;overflow:hidden;background:oklch(20% .01 250 / .45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--kurve),visibility 0s var(--kurve) .3s}
.fs-schublade[data-offen="ja"]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s var(--kurve),visibility 0s var(--kurve)}
.fs-schublade__blatt{width:min(400px,88vw);height:100%;background:var(--grund);padding:22px max(20px,var(--rand)) 30px;overflow-y:auto;display:grid;align-content:start;gap:22px;transform:translateX(18px);transition:transform .3s var(--kurve-raus);box-shadow:var(--schatten-hoch)}
.fs-schublade[data-offen="ja"] .fs-schublade__blatt{transform:none}
.fs-schublade__kopf{display:flex;align-items:center;justify-content:space-between;gap:14px}
.fs-schublade__zu{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:var(--r-rund);background:var(--flaeche);color:var(--tinte);cursor:pointer;box-shadow:var(--ring)}
.fs-schublade__navi{display:grid;gap:2px}
.fs-schublade__navi a{padding:13px 12px;border-radius:var(--r-feld);text-decoration:none;font-size:1.06rem;font-weight:500;min-height:48px;display:flex;align-items:center}
.fs-schublade__navi a:hover{background:var(--flaeche)}
.fs-schublade__navi a[aria-current="page"]{color:var(--gruen-tief)}
.fs-schublade__navi .fs-schublade__trenner{margin:8px 12px 4px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-weich);font-weight:600}
.fs-schublade__aktionen{display:grid;gap:10px}
.fs-schublade__aktionen .fs-knopf{justify-content:flex-start;width:100%}

/* ---------- Mobile Kontaktleiste ---------- */
.fs-leiste{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--flaeche);box-shadow:0 -1px 0 var(--haar),0 -12px 30px -20px oklch(20% .02 250 / .5);padding-bottom:env(safe-area-inset-bottom)}
.fs-leiste a{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-height:60px;padding:8px 4px;text-decoration:none;font-size:.74rem;font-weight:600;letter-spacing:.02em;color:var(--tinte);transition:background-color .2s var(--kurve)}
.fs-leiste a:active{background:var(--schale)}
.fs-leiste a .fs-icon{color:var(--gruen-tief)}
.fs-leiste .fs-korb-zahl{position:absolute;top:6px;right:calc(50% - 26px)}
/* Unter 960 px steht die Leiste: Fokus und Sprungziele halten unten Abstand, sonst liegt ein fokussiertes Feld darunter (WCAG 2.4.11). */
@media (max-width:959px){html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}}

/* ---------- Abschnitte ---------- */
.fs-abschnitt{padding-block:clamp(64px,9vw,112px)}
.fs-abschnitt--eng{padding-block:clamp(48px,6vw,80px)}
.fs-abschnitt--kante{border-top:1px solid var(--haar)}
.fs-abschnitt--band{background:var(--schale)}
.fs-abschnittkopf{display:grid;gap:14px;max-width:62ch;margin-bottom:clamp(30px,4vw,48px)}
.fs-abschnittkopf--breit{max-width:none}
.fs-abschnittkopf--zeile{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px 24px;max-width:none}
.fs-abschnittkopf p{color:var(--tinte-weich)}

/* ---------- Hero ---------- */
.fs-hero{position:relative;padding-top:clamp(34px,4.5vw,60px);padding-bottom:clamp(44px,6vw,80px)}
.fs-hero-raster{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
.fs-hero__text{display:grid;gap:22px;justify-items:start}
.fs-hero h1{max-width:15ch}
.fs-hero__knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.fs-hero__belege{display:flex;flex-wrap:wrap;gap:10px}
.fs-hero__bild{position:relative}
.fs-hero__bild .fs-kern{aspect-ratio:4/3}
.fs-hero__bild{display:grid;gap:12px}
.fs-hero__status{position:static;justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-rund);background:var(--flaeche);color:var(--tinte);font-size:.88rem;font-weight:600;box-shadow:var(--schatten)}
.fs-hero__status .fs-chip__punkt{background:var(--gruen)}
.fs-hero__status[data-zu="ja"] .fs-chip__punkt{background:var(--tinte-weich)}

/* ---------- Merkmale ---------- */
.fs-merkmale{display:grid;gap:1px;background:var(--haar);border-radius:var(--r-kern);overflow:hidden;box-shadow:var(--ring)}
.fs-merkmale li{list-style:none;background:var(--flaeche);padding:22px 24px;display:grid;gap:8px;align-content:start}
.fs-merkmale .fs-icon{color:var(--gruen-tief);width:24px;height:24px}
.fs-merkmale h3{font-family:var(--schrift-text);font-size:1.02rem;font-weight:600;letter-spacing:0}
.fs-merkmale p{color:var(--tinte-weich);font-size:.95rem}

/* ---------- Bento ---------- */
.fs-bento{display:grid;gap:clamp(14px,2vw,20px);grid-auto-flow:dense}
.fs-kachel{display:grid;grid-template-rows:auto 1fr;text-decoration:none;transition:transform .22s var(--kurve),box-shadow .22s var(--kurve);height:100%}
.fs-kachel:hover{transform:translateY(-3px);box-shadow:var(--ring),var(--schatten)}
.fs-kachel__bild{aspect-ratio:3/2;background:var(--schale);min-height:0}
/* Das Bild fuellt die Kachel im Seitenverhaeltnis der Kachel (vorher bestimmte das Foto die Hoehe: hochkant wurde die
   Kachel lang, 16:9 liess unten einen Streifen frei). min-height:0 nimmt die inhaltsbasierte Mindesthoehe weg. */
/* Der Kern fuellt die ganze Kachel: Ist die Nachbarkachel in der Reihe hoeher, bleibt sonst unter dem Text ein grauer
   Streifen der Huelle stehen (Leerzelle). */
.fs-kachel>.fs-kern{grid-row:1/-1}
.fs-kachel__bild picture{display:block;width:100%;height:100%}
.fs-kachel__bild img{width:100%;height:100%;object-fit:cover}
.fs-kachel--gross .fs-kachel__bild{aspect-ratio:16/9}
.fs-kachel__text{display:grid;gap:10px;padding:22px 24px 24px;align-content:start}
.fs-kachel__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.fs-kachel p{color:var(--tinte-weich);font-size:.96rem}
.fs-kachel__mehr{display:inline-flex;align-items:center;gap:7px;color:var(--gruen-tief);font-weight:600;font-size:.94rem;margin-top:2px}
.fs-kachel__mehr .fs-icon{transition:transform .25s var(--kurve)}
.fs-kachel:hover .fs-kachel__mehr .fs-icon{transform:translateX(3px)}
.fs-kachel--text{grid-template-rows:1fr}
.fs-kachel--text .fs-kachel__text{padding:26px 28px;gap:14px}
.fs-kachel--text .fs-icon{color:var(--gruen-tief);width:28px;height:28px}
/* Kachelpaare (Luis 13.10.): zwei Kacheln einer Reihe mit gleicher Bildhoehe. Oben gibt das Kinderfoto hochkant (5:7,
   das ganze Rad) die Hoehe vor, unten das Lastenrad (gross). Ab 760 px teilen sich die Kacheln eines Paars per subgrid
   eine Bild- und eine Textzeile des Bento: Die fuellende Kachel (fs-kachel--fuellt) traegt nichts zur Hoehe bei (Bild
   absolut) und fuellt die Bildzeile per cover, die Texte beginnen auf einer Linie. Ohne subgrid gilt die alte Kachel. */
.fs-kachel--hochkant .fs-kachel__bild{aspect-ratio:5/7}
.fs-kachel--unten .fs-kachel__bild img{object-position:45% 85%}
/* Der Chip neben „E-Bikes“ ist hoeher als die Titelzeile; ohne Ausgleich saesse die Ueberschrift 2 px tiefer als nebenan. */
.fs-kachel__kopf .fs-chip{margin-block:-4px}
@media (min-width:760px){
  .fs-kachel--paar{grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  .fs-kachel--paar>.fs-kern{display:grid;grid-template-rows:subgrid;row-gap:0}
  .fs-kachel--paar.fs-kachel--fuellt .fs-kachel__bild{aspect-ratio:auto;position:relative}
  .fs-kachel--paar.fs-kachel--fuellt .fs-kachel__bild picture{position:absolute;inset:0}
}
/* Mountainbike und Trekking (Luis 13.10.): kein Rad abgeschnitten. Das Mountainbike-Foto steht hochkant (5:7, die ganze
   Reihe), die Trekking-Kachel fuellt dieselbe Hoehe und rueckt ihr Foto nach rechts unten, wo das rote Rad steht (es
   reicht bis 1,4 % ueber den unteren Bildrand). Ab 960 px und unter 760 px ist die Reihe unsichtbar (display:contents),
   die Kacheln stehen im Bento (2 + 4 Spalten bzw. untereinander). Zwischen 760 und 959 px hat das Bento zwei gleich
   breite Spalten; ein gleich breites Paar schnitte dort die Mountainbikes oder das rote Rad ab. Deshalb dort eine eigene
   Reihe 2 : 3 mit denselben Paarregeln (Trekking dann rund 1,07 : 1, das rote Rad bleibt mit 5 % Rand ganz). Unter
   760 px steht die Trekking-Kachel in 3:2 statt 16:9 wie andere grosse Kacheln: so bleibt das ganze Foto zu sehen. */
.fs-bento__reihe{display:contents}
.fs-kachel--rechts-unten .fs-kachel__bild{aspect-ratio:3/2}
.fs-kachel--rechts-unten .fs-kachel__bild img{object-position:78% 100%}
@media (min-width:760px) and (max-width:959.98px){
  .fs-bento__reihe{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:inherit}
}

/* ---------- Zubehoer und Ersatzteile: Fotomosaik (Luis 13.10.) ----------
   Mobile-Collapse: unter 760 px ein seitlich wischbarer Streifen (Muster der Rezensionsreihe), gleiche Hoehe, Breite aus
   dem Seitenverhaeltnis je Foto, die naechste Karte ist angeschnitten. Ab 760 px ein Mosaik aus 6 x 3 Zellen mit festen
   Flaechen: die zwei Waende gross (ABUS schmal ueber drei Zeilen, Shimano quer 3 x 2), Reifen 2 x 2, Nahaufnahmen klein,
   Helme breit. Das Raster hat 2:1, die Zellen sind damit fast quadratisch und jede Flaeche ist belegt. */
.fs-sortiment{display:flex;gap:10px;margin:0 calc(-1 * var(--rand));padding:2px var(--rand) 6px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand);scrollbar-width:none}
.fs-sortiment::-webkit-scrollbar{display:none}
.fs-sortiment:focus-visible{outline-offset:-3px;border-radius:var(--r-feld)}
.fs-sortiment__bild{flex:0 0 auto;height:clamp(200px,56vw,260px);aspect-ratio:var(--seite);border-radius:var(--r-feld);overflow:hidden;background:var(--schale);box-shadow:var(--ring);scroll-snap-align:start}
.fs-sortiment__bild picture{display:block;width:100%;height:100%}
.fs-sortiment__bild img{width:100%;height:100%;object-fit:cover}
.fs-sortiment__bild--shimano{--seite:4/3;grid-area:shim}
.fs-sortiment__bild--abus{--seite:1/2;grid-area:abus}
.fs-sortiment__bild--reifen{--seite:1/1;grid-area:reif}
.fs-sortiment__bild--schutzbleche{--seite:1/1;grid-area:schu}
.fs-sortiment__bild--schaltwerk{--seite:1/1;grid-area:sram}
.fs-sortiment__bild--bremse{--seite:1/1;grid-area:brem}
.fs-sortiment__bild--helme{--seite:4/3;grid-area:helm}
@media (min-width:760px){
  .fs-sortiment{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-flow:dense;
    grid-template-areas:"abus shim shim shim reif reif" "abus shim shim shim reif reif" "abus schu sram brem helm helm";aspect-ratio:2/1;margin:0;padding:0;overflow:visible}
  .fs-sortiment__bild{height:auto;aspect-ratio:auto;min-height:0}
}

/* ---------- 360-Grad-Rundgang (Zwei-Klick, Luis 13.10.) ----------
   Vorschaubild im Double-Bezel, der Startknopf mittig darauf (eigene Flaeche, kein Text auf dem Foto, kein Verlauf). Nach
   dem Klick sitzt der Viewer (iframe aus rundgang/) im selben Rahmen. Mobile-Collapse: unter 760 px hoch (4:5), damit der
   Viewer am Handy genug Hoehe hat, und randlos wie der Fotostreifen darueber: Die Werkzeugleiste des Viewers braucht die
   volle Breite (bei 346 px im Rahmen ueberlappten sich zwei ihrer Knoepfe, gemessen 13.10.). Das Bild wechselt dort auf
   die hohe Ansicht (picture/source). */
.fs-rundgang{position:relative;aspect-ratio:16/9;isolation:isolate;background:var(--schale)}
.fs-rundgang picture{position:absolute;inset:0;display:block}
.fs-rundgang img{width:100%;height:100%;object-fit:cover}
.fs-rundgang__start{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:20px}
.fs-rundgang__start .fs-knopf{box-shadow:var(--schatten-hoch)}
/* Fokus auf dem Foto zweifarbig (hell innen, Gruen aussen), damit er auf hellen wie dunklen Bildstellen sichtbar bleibt. */
.fs-rundgang__start .fs-knopf:focus-visible{outline:3px solid var(--flaeche);outline-offset:2px;box-shadow:0 0 0 8px var(--gruen-tief),var(--schatten-hoch)}
.fs-rundgang iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--schale)}
.fs-rundgang__fenster{margin-top:14px}
@media (max-width:759px){
  .fs-rundgang{aspect-ratio:4/5}
  .fs-rundgang-huelle{margin-inline:calc(-1 * var(--rand));padding:0;border-radius:0;box-shadow:none}
  .fs-rundgang-huelle .fs-rundgang{border-radius:0;box-shadow:none}
}

/* ---------- Werkstatt: Luft und Schraube (Luis 13.10.) ----------
   Zwei Hochformate nebeneinander, auch am Handy (dort ueber dem Text), daneben der Text. Raster wie die Werkstatt auf der
   Startseite (fs-kontakt-raster), auf der Werkstattseite einmal. */
.fs-luft{align-items:center}
.fs-luft__bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vw,16px)}
.fs-luft__bilder .fs-kern--bild{aspect-ratio:4/5}
.fs-luft__text{max-width:44ch}

/* ---------- Leistungen (Werkstatt) ---------- */
.fs-leistungen{display:grid;gap:clamp(14px,2vw,20px)}
.fs-leistung{display:grid;gap:12px;padding:24px 26px;align-content:start;height:100%}
.fs-leistung .fs-icon{color:var(--gruen-tief);width:28px;height:28px}
.fs-leistung p{color:var(--tinte-weich);font-size:.96rem}
.fs-leistung__preis{font-family:var(--schrift-titel);font-weight:600;font-size:1.1rem}
.fs-schritte{display:grid;gap:14px;counter-reset:schritt}
.fs-schritt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;align-items:start;padding:20px 22px}
.fs-schritt::before{counter-increment:schritt;content:counter(schritt);display:grid;place-items:center;width:40px;height:40px;grid-row:span 2;border-radius:var(--r-rund);background:var(--gruen-hell);color:var(--gruen-dunkel);font-family:var(--schrift-titel);font-weight:700;font-size:1.1rem}
.fs-schritt h3{font-size:1.14rem}
.fs-schritt p{color:var(--tinte-weich);font-size:.96rem}

/* ---------- Produkte ---------- */
.fs-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:clamp(22px,3vw,34px)}
.fs-filter__gruppe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fs-filter__label{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-weich);margin-right:4px}
.fs-filter button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 16px;border:0;border-radius:var(--r-rund);background:var(--flaeche);color:var(--tinte);font-size:.9rem;font-weight:500;cursor:pointer;box-shadow:var(--ring);transition:background-color .2s var(--kurve),color .2s var(--kurve)}
.fs-filter button:hover{background:var(--flaeche-hoch)}
.fs-filter button[aria-pressed="true"]{background:var(--gruen-tief);color:var(--flaeche)}
.fs-filter__stand{margin-left:auto;font-size:.9rem;color:var(--tinte-weich)}
.fs-produkte{display:grid;gap:clamp(14px,2vw,20px)}
.fs-produkt{position:relative;display:flex;height:100%;transition:transform .22s var(--kurve)}
.fs-produkt[hidden]{display:none}
.fs-produkt:hover{transform:translateY(-3px)}
.fs-produkt .fs-huelle{display:flex;flex-direction:column;flex:1;min-width:0}
.fs-produkt .fs-kern{flex:1;display:block}
.fs-produkt__bild{aspect-ratio:4/3;background:var(--schale);position:relative}
.fs-produkt__bild img{object-fit:cover}
.fs-produkt__marke{position:absolute;top:14px;left:14px}
.fs-produkt__text{display:grid;gap:8px;padding:20px 22px 22px;align-content:start}
.fs-produkt__kat{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-weich);font-weight:600}
.fs-produkt h3{font-size:1.22rem}
.fs-produkt h3 a{text-decoration:none}
.fs-produkt h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-huelle)}
.fs-produkt__meta{color:var(--tinte-weich);font-size:.9rem}
.fs-produkt__fuss{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px;padding-top:12px;border-top:1px solid var(--haar)}
.fs-preis{font-family:var(--schrift-titel);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fs-preis__alt{font-family:var(--schrift-text);font-weight:400;font-size:.9rem;color:var(--tinte-weich);text-decoration:line-through;margin-right:8px}
.fs-preis__zusatz{display:block;font-size:.78rem;color:var(--tinte-weich);font-weight:400;font-family:var(--schrift-text);letter-spacing:0;white-space:normal}
.fs-verfuegbar{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--gruen-dunkel);font-weight:500}
.fs-verfuegbar .fs-chip__punkt{background:var(--gruen)}
.fs-verfuegbar--bestellbar{color:var(--tinte-weich)}
.fs-verfuegbar--bestellbar .fs-chip__punkt{background:var(--tinte-weich)}
.fs-produkte-leer{display:grid;gap:16px;justify-items:center;padding:32px;text-align:center;color:var(--tinte-weich)}
.fs-produkte-leer__knoepfe{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fs-filter__zeile{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;width:100%}
.fs-auswahl{display:grid;gap:4px;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-weich)}
.fs-auswahl select{min-height:44px;padding:8px 40px 8px 16px;border:1px solid var(--feldrand);border-radius:var(--r-rund);background:var(--flaeche);color:var(--tinte);font:inherit;font-size:.92rem;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M48 96l80 80 80-80' fill='none' stroke='%23525a66' stroke-width='20' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 16px center;background-size:14px 14px;background-repeat:no-repeat}
.fs-auswahl select:hover{background-color:var(--flaeche-hoch)}
.fs-auswahl select:focus-visible{outline:3px solid var(--gruen-tief);outline-offset:3px}
.fs-filter__zeile .fs-filter__stand{align-self:center}
/* Herstellerfotos: Freisteller auf Weiss, die Flaeche dahinter ist dasselbe Weiss (--produktgrund, Luis 13.10.).
   Produktkarten sind ganz weiss: Eine Kante zwischen weissem Bild und --flaeche (1 % Helligkeit) wirkte nur als
   Schmutzstreifen oder als zweite Linie ueber der Preislinie. Der Bildbereich selbst bleibt durchsichtig.
   Kein mix-blend-mode mehr (Luis 15.10.): Mit einem Farbfilter des Bildschirms (Nachtlicht, Farbprofil, HDR) rechnet
   der Browser den Ton bei multiply doppelt, die Fotoflaeche wurde gelbgruen statt weiss. Weiss auf Weiss braucht keine
   Mischung; den Ring des Kerns legt ::after ueber das Foto, damit die Kartenkante ohne Stufe durchlaeuft. */
.fs-produkt .fs-kern{background:var(--produktgrund)}
.fs-produkt__bild.fs-foto{background:none}
.fs-foto .fs-kern--bild,.fs-galerie .fs-kern--bild,.fs-position__bild.fs-foto{background:var(--produktgrund)}
.fs-foto img{object-fit:contain}
.fs-produkt .fs-kern,.fs-foto .fs-kern--bild,.fs-galerie .fs-kern--bild{position:relative}
.fs-produkt .fs-kern::after,.fs-foto .fs-kern--bild::after,.fs-galerie .fs-kern--bild::after{content:"";position:absolute;inset:0;border-radius:var(--r-kern);box-shadow:var(--ring);pointer-events:none}
.fs-produkt__varianten{font-size:.86rem;color:var(--tinte-weich)}
.fs-produkt__vorher{font-size:.78rem;color:var(--tinte-weich);margin-top:6px}
.fs-preis__ab{font-family:var(--schrift-text);font-weight:500;font-size:.86rem;color:var(--tinte-weich);margin-right:6px}
.fs-preis--anfrage{font-size:1.05rem}
.fs-kaufbox .fs-preis--anfrage{font-size:1.5rem}

/* ---------- Produktseite ---------- */
.fs-produkt-raster{display:grid;gap:clamp(22px,4vw,48px);align-items:start}
.fs-galerie{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fs-galerie .fs-galerie__gross{grid-column:1/-1}
.fs-galerie>:last-child:nth-child(even){grid-column:1/-1}
.fs-galerie .fs-kern{aspect-ratio:4/3}

/* ---------- Lupe: Produktfotos gross ansehen ---------- */
/* Ausloeser ist ein echter Link auf die grosse Datei; das Skript oeffnet stattdessen den Dialog.
   Der Fokusring liegt innen, weil der Kern ueberstehende Ringe abschneidet. */
.fs-lupe-link{position:relative;display:block;width:100%;height:100%;cursor:zoom-in}
.fs-lupe-link:focus-visible{outline-offset:-6px;border-radius:var(--r-feld)}
.fs-lupe-link__zeichen{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-rund);background:var(--flaeche);color:var(--tinte);box-shadow:var(--ring-stark),var(--schatten);transition:transform .2s var(--kurve)}
.fs-galerie>.fs-huelle .fs-lupe-link__zeichen{top:8px;right:8px;width:36px;height:36px}
.fs-galerie>.fs-huelle .fs-lupe-link__zeichen .fs-icon{width:18px;height:18px}
.fs-lupe-link img{transition:transform .5s var(--kurve-raus)}
@media (hover:hover){
  .fs-lupe-link:hover .fs-lupe-link__zeichen{transform:scale(1.06)}
  .fs-lupe-link:hover img{transform:scale(1.015)}
}
html:has(.fs-lupe[open]){overflow:hidden}
.fs-lupe{--lupe-rand:clamp(8px,2vw,24px);box-sizing:border-box;width:min(100% - 2 * var(--lupe-rand),1400px);height:calc(100dvh - 2 * var(--lupe-rand));max-width:none;max-height:none;margin:auto;padding:6px;border:0;border-radius:var(--r-huelle);background:var(--schale);color:var(--tinte);box-shadow:var(--ring),var(--schatten-hoch);overflow:hidden}
.fs-lupe::backdrop{background:oklch(20% .02 250 / .62)}
.fs-lupe[open]{animation:fs-lupe-auf .26s var(--kurve-raus)}
.fs-lupe[open]::backdrop{animation:fs-lupe-blende .26s var(--kurve-raus)}
@keyframes fs-lupe-auf{from{opacity:0;transform:scale(.985)}}
@keyframes fs-lupe-blende{from{opacity:0}}
.fs-lupe__kern{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;background:var(--flaeche);border-radius:var(--r-kern);box-shadow:var(--ring),0 1px 0 oklch(100% 0 0 / .8) inset;overflow:hidden}
.fs-lupe__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px clamp(14px,2vw,22px);border-bottom:1px solid var(--haar)}
.fs-lupe__titel{min-width:0;margin:0;overflow:hidden;font-family:var(--schrift-titel);font-weight:600;font-size:1.05rem;letter-spacing:-.005em;text-overflow:ellipsis;white-space:nowrap}
.fs-lupe__aktionen{display:flex;gap:8px;flex:none}
.fs-lupe__knopf{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:var(--r-rund);background:var(--grund);color:var(--tinte);cursor:pointer;box-shadow:var(--ring-stark);transition:background-color .2s var(--kurve),color .2s var(--kurve),transform .2s var(--kurve)}
.fs-lupe__knopf .fs-icon{width:22px;height:22px}
.fs-lupe__knopf:hover,.fs-lupe__knopf[aria-pressed="true"]{background:var(--gruen-hell);color:var(--gruen-tief)}
.fs-lupe__knopf:active{transform:scale(.96)}
.fs-lupe__knopf[aria-pressed="true"] .fs-lupe__plus,.fs-lupe__knopf[aria-pressed="false"] .fs-lupe__minus{display:none}
.fs-lupe__buehne{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);min-height:0;padding:clamp(8px,2vw,28px);overflow:hidden;background:var(--produktgrund);cursor:zoom-in;touch-action:none;user-select:none;-webkit-user-select:none}
.fs-lupe--zoom .fs-lupe__buehne{cursor:zoom-out}
.fs-lupe__buehne picture{display:block;width:100%;height:100%;min-height:0}
/* Bis das grosse Foto da ist, steht die kleine Fassung aus der Seite als Hintergrund im selben Rahmen.
   Die Buehne ist weiss wie die Produktbildflaechen (--produktgrund), ohne mix-blend-mode (siehe Produktfotos). */
.fs-lupe__buehne img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background-position:center;background-size:contain;background-repeat:no-repeat;transform-origin:50% 50%;transition:transform .28s var(--kurve-raus);will-change:transform;-webkit-user-drag:none}
.fs-lupe__buehne img.fs-lupe__sofort{transition:none}
.fs-lupe__fuss{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;padding:8px;border-top:1px solid var(--haar)}
.fs-lupe__fuss [data-lupe-weiter]{grid-column:3}
.fs-lupe__text{grid-column:2;margin:0;text-align:center;font-size:.9rem;line-height:1.4;color:var(--tinte-weich)}
.fs-lupe__zahl{margin-right:10px;font-weight:600;color:var(--tinte);font-variant-numeric:tabular-nums}
.fs-kaufbox{display:grid;gap:18px;padding:26px 28px}
.fs-kaufbox__preis{display:grid;gap:4px}
.fs-kaufbox .fs-preis{font-size:2rem}
.fs-produktkopf{display:grid;gap:10px;margin-bottom:clamp(20px,3vw,32px)}
.fs-produktkopf h1{font-size:clamp(2rem,1.4rem + 2.2vw,3.4rem);max-width:20ch}
.fs-produktkopf .fs-klein{max-width:70ch}
.fs-kaufbox fieldset{display:grid;gap:10px}
.fs-kaufbox legend{font-weight:600;font-size:.95rem;margin-bottom:4px}
.fs-groessen{display:flex;flex-wrap:wrap;gap:8px}
.fs-groesse{position:relative}
.fs-groesse input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.fs-groesse span{display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:44px;padding:8px 14px;border-radius:var(--r-feld);background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--feldrand);font-weight:600;cursor:pointer;transition:background-color .2s var(--kurve),box-shadow .2s var(--kurve)}
.fs-groesse input:checked+span{background:var(--gruen-tief);color:var(--flaeche);box-shadow:inset 0 0 0 1px var(--gruen-tief)}
.fs-groesse input:focus-visible+span{outline:3px solid var(--gruen-tief);outline-offset:3px}
.fs-groesse input:disabled+span{color:var(--tinte-weich);background:var(--schale);box-shadow:none;text-decoration:line-through;cursor:not-allowed}
.fs-farbwahl{display:flex;flex-wrap:wrap;gap:8px}
.fs-farbe{position:relative}
.fs-farbe input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.fs-farbe>span{display:grid;justify-items:center;gap:4px;width:112px;min-height:44px;padding:6px 6px 8px;border-radius:var(--r-feld);background:var(--produktgrund);box-shadow:inset 0 0 0 1px var(--haar);cursor:pointer;transition:box-shadow .2s var(--kurve)}
.fs-farbe img{width:96px;height:72px;object-fit:contain}
.fs-farbe__name{font-size:.84rem;line-height:1.25;text-align:center;color:var(--tinte)}
.fs-farbe>span:hover{box-shadow:inset 0 0 0 1px var(--feldrand)}
.fs-farbe input:checked+span{box-shadow:inset 0 0 0 2px var(--gruen-tief)}
.fs-farbe input:checked+span .fs-farbe__name{font-weight:600}
.fs-farbe input:focus-visible+span{outline:3px solid var(--gruen-tief);outline-offset:3px}
.fs-kaufbox__knoepfe{display:grid;gap:10px}
.fs-kaufbox__hinweise{display:grid;gap:8px;font-size:.9rem;color:var(--tinte-weich)}
.fs-kaufbox__hinweise li{display:flex;gap:10px;list-style:none;align-items:flex-start}
.fs-kaufbox__hinweise .fs-icon{color:var(--gruen-tief);width:18px;height:18px;margin-top:3px}
.fs-korb-meldung{display:none;padding:12px 16px;border-radius:var(--r-feld);background:var(--gruen-hell);color:var(--gruen-dunkel);font-size:.92rem;font-weight:500}
.fs-korb-meldung[data-zeigen="ja"]{display:block}
.fs-ausstattung{margin-top:clamp(28px,4vw,44px)}
.fs-ausstattung table{font-size:.96rem}
.fs-ausstattung th{width:38%;font-weight:600;text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--haar);vertical-align:top;color:var(--tinte-weich)}
.fs-ausstattung td{padding:11px 0;border-bottom:1px solid var(--haar);vertical-align:top}
.fs-highlights{display:grid;gap:8px;list-style:none}
.fs-highlights li{display:flex;gap:10px;align-items:flex-start}
.fs-highlights .fs-icon{color:var(--gruen-tief);margin-top:3px;width:18px;height:18px}

/* ---------- Warenkorb ---------- */
.fs-korb-raster{display:grid;gap:clamp(20px,3vw,36px);align-items:start}
.fs-positionen{display:grid;gap:12px;list-style:none}
.fs-position{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px 18px;padding:16px;align-items:start}
.fs-position__bild{aspect-ratio:4/3;border-radius:var(--r-feld);overflow:hidden;background:var(--schale)}
.fs-position__bild img{width:100%;height:100%;object-fit:cover}
.fs-position__text{display:grid;gap:4px}
.fs-position__name{font-weight:600}
.fs-position__meta{font-size:.9rem;color:var(--tinte-weich)}
.fs-position__fuss{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding-top:12px;border-top:1px solid var(--haar)}
.fs-menge{display:inline-flex;align-items:center;gap:2px;border-radius:var(--r-rund);background:var(--schale);padding:3px}
.fs-menge button{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:var(--r-rund);background:var(--flaeche);cursor:pointer;box-shadow:var(--ring)}
.fs-menge button:hover{background:var(--flaeche-hoch)}
.fs-menge output{min-width:36px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.fs-entfernen{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--tinte-weich);font-size:.9rem;cursor:pointer;padding:8px 10px;border-radius:var(--r-feld);min-height:40px}
.fs-entfernen:hover{color:var(--fehler);background:var(--fehler-hell)}
.fs-summe{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:24px 26px}
.fs-summe h2{font-size:clamp(1.45rem,1.2rem + .8vw,1.85rem);overflow-wrap:break-word;hyphens:auto}
.fs-summe__zeile{display:flex;justify-content:space-between;gap:16px;font-size:.98rem}
.fs-summe__zeile--gesamt{font-family:var(--schrift-titel);font-weight:600;font-size:1.3rem;padding-top:12px;border-top:1px solid var(--haar)}
.fs-summe__zeile span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.fs-korb-leer{display:grid;gap:18px;justify-items:start;padding:32px 30px}

/* ---------- Kasse ---------- */
.fs-kasse-raster{display:grid;gap:clamp(20px,3vw,36px);align-items:start}
.fs-schrittleiste{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-bottom:clamp(22px,3vw,30px)}
.fs-schrittleiste li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-rund);background:var(--flaeche);color:var(--tinte-weich);font-size:.88rem;font-weight:500;box-shadow:var(--ring)}
.fs-schrittleiste li[aria-current="step"]{background:var(--gruen-tief);color:var(--flaeche)}
.fs-schrittleiste li span:first-child{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-rund);background:oklch(20% .01 250 / .08);font-size:.76rem;font-weight:700}
.fs-schrittleiste li[aria-current="step"] span:first-child{background:oklch(100% 0 0 / .2)}
.fs-formular{display:grid;gap:22px;padding:26px 28px}
.fs-formular fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:14px}
.fs-formular legend{font-family:var(--schrift-titel);font-weight:600;font-size:1.2rem;padding:0;margin-bottom:6px}
.fs-feld{display:grid;gap:6px;align-content:start}
.fs-feld label{font-weight:600;font-size:.95rem}
.fs-feld .fs-hilfe{font-size:.86rem;color:var(--tinte-weich)}
.fs-feld input,.fs-feld textarea,.fs-feld select{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--feldrand);border-radius:var(--r-feld);background:var(--flaeche);color:var(--tinte);font:inherit;transition:border-color .2s var(--kurve),box-shadow .2s var(--kurve)}
.fs-feld textarea{min-height:130px;resize:vertical}
.fs-feld input:focus,.fs-feld textarea:focus,.fs-feld select:focus{outline:none;border-color:var(--gruen-tief);box-shadow:0 0 0 3px var(--gruen-hell)}
.fs-feld[data-fehler="ja"] input,.fs-feld[data-fehler="ja"] textarea{border-color:var(--fehler);box-shadow:0 0 0 3px var(--fehler-hell)}
.fs-feld__fehler{display:none;font-size:.86rem;color:var(--fehler);font-weight:500}
.fs-feld[data-fehler="ja"] .fs-feld__fehler{display:block}
.fs-zwei{display:grid;gap:14px}
/* Laden-Reihe auf Ueber uns: drei Fotos nebeneinander ab 760 px (vorher ohne display:grid untereinander, je 1308 px breit). */
.fs-drei{display:grid;gap:clamp(14px,2vw,20px)}
.fs-wahl{display:grid;gap:10px}
.fs-wahl label{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:16px 18px;border-radius:var(--r-feld);background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--haar);cursor:pointer;transition:box-shadow .2s var(--kurve)}
.fs-wahl label:hover{box-shadow:inset 0 0 0 1px var(--feldrand)}
.fs-wahl input{width:20px;height:20px;margin:0;grid-row:span 2}
.fs-wahl label:has(input:checked){box-shadow:inset 0 0 0 2px var(--gruen-tief)}
.fs-wahl__titel{font-weight:600}
.fs-wahl__text{grid-column:2;font-size:.88rem;color:var(--tinte-weich)}
.fs-wahl__preis{grid-row:span 2;font-family:var(--schrift-titel);font-weight:600;white-space:nowrap}
.fs-haken{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:.95rem}
.fs-haken input{width:20px;height:20px;margin:3px 0 0}
.fs-haken a{color:var(--gruen-tief)}
.fs-haken[data-fehler="ja"]{color:var(--fehler)}
.fs-turnstile{min-height:65px;display:grid;align-items:center}
.fs-turnstile__hinweis{font-size:.86rem;color:var(--tinte-weich)}
.fs-fehlerliste{display:none;padding:14px 18px;border-radius:var(--r-feld);background:var(--fehler-hell);color:var(--fehler);font-size:.92rem}
.fs-fehlerliste[data-zeigen="ja"]{display:block}
.fs-fehlerliste ul{padding-left:1.1em;list-style:disc;margin-top:6px}
.fs-fehlerliste a{color:inherit}
.fs-uebersicht{display:grid;gap:12px;padding:22px 24px}
.fs-uebersicht__zeile{display:flex;justify-content:space-between;gap:16px;font-size:.95rem}
.fs-uebersicht__zeile span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.fs-uebersicht__zeile--gesamt{font-family:var(--schrift-titel);font-weight:600;font-size:1.2rem;padding-top:10px;border-top:1px solid var(--haar)}
.fs-bestellknopf{margin-top:6px}
.fs-status{display:none;padding:14px 18px;border-radius:var(--r-feld);background:var(--gruen-hell);color:var(--gruen-dunkel);font-size:.95rem}
.fs-status[data-zeigen="ja"]{display:block}
.fs-status[data-art="fehler"]{background:var(--fehler-hell);color:var(--fehler)}

/* ---------- Marken und Partner ---------- */
.fs-marken{display:grid;gap:clamp(14px,2vw,20px)}
.fs-marke-karte{display:grid;gap:10px;padding:24px 26px;align-content:start;height:100%;text-decoration:none}
.fs-marke-karte h3{font-size:1.5rem}
.fs-marke-karte p{color:var(--tinte-weich);font-size:.95rem}
/* Leasing: jede Kachel umschliesst ihr Logo ohne Leerraum. Schmal: Logo-Wolke mit fester Logohoehe,
   die Kachel hat die Breite des Logos. Ab 960 px eine Reihe, flex-grow = Seitenverhaeltnis (aus dem
   Bau), dadurch fuellen die Kacheln die Breite und alle Logos sind gleich hoch. */
.fs-leasing{--paar:8;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fs-partner{--logo-h:min(48px,calc((100vw - 2 * var(--rand) - 70px) / var(--paar)));display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:0;padding:12px 14px;background:var(--flaeche);border-radius:var(--r-feld);box-shadow:var(--ring-stark),var(--schatten);text-decoration:none;font-family:var(--schrift-titel);font-weight:600;transition:transform .22s var(--kurve),box-shadow .22s var(--kurve)}
.fs-partner img{display:block;height:var(--logo-h);width:auto}
.fs-partner:active{transform:scale(.98)}
@media (hover:hover){.fs-partner:hover{transform:translateY(-2px);box-shadow:var(--ring-stark),var(--schatten-hoch)}}

/* ---------- Zeiten ---------- */
.fs-zeiten{border-radius:var(--r-kern);overflow:hidden;box-shadow:var(--ring);background:var(--flaeche)}
.fs-zeiten tr{border-bottom:1px solid var(--haar)}
.fs-zeiten tr:last-child{border-bottom:0}
.fs-zeiten th,.fs-zeiten td{padding:13px 18px;text-align:left;font-weight:500}
.fs-zeiten th{font-weight:500;color:var(--tinte-weich)}
.fs-zeiten td{text-align:right;font-variant-numeric:tabular-nums}
.fs-zeiten tr[data-heute="ja"]{background:var(--gruen-hell)}
.fs-zeiten tr[data-heute="ja"] th,.fs-zeiten tr[data-heute="ja"] td{color:var(--gruen-dunkel);font-weight:600}
.fs-zeiten td[data-zu="ja"]{color:var(--tinte-weich)}
.fs-zeiten small{display:block;font-size:.8rem;color:var(--tinte-weich);font-weight:400}

/* ---------- Google-Rezensionen (gestaltet wie Googles eigene Karten) ---------- */
.fs-g{--g-rand:clamp(16px,2.4vw,24px);display:grid;gap:18px;padding:var(--g-rand);overflow:hidden;background:var(--flaeche);border-radius:var(--r-kern);box-shadow:var(--ring-stark),var(--schatten);font-family:"Google Sans Text","Google Sans",Roboto,Arial,sans-serif;color:var(--tinte)}
.fs-g__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.fs-g__marke{display:flex;align-items:center;gap:14px}
.fs-g__logo{width:36px;height:36px;flex:none}
.fs-g__titel{font-size:1.05rem;font-weight:500;line-height:1.3}
.fs-g__note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;line-height:1.2}
.fs-g__zahl{font-size:1.5rem;font-weight:500}
.fs-g__sterne{display:inline-flex}
.fs-g__sternbild{display:block;width:80px;height:16px}
.fs-g__sterne--gross .fs-g__sternbild{width:100px;height:20px}
.fs-g__sternbild polygon{stroke:var(--g-stern-rand);stroke-width:.7;stroke-linejoin:round}
.fs-g__stern{fill:var(--g-gelb)}
.fs-g__stopp-an{stop-color:var(--g-gelb)}
.fs-g__stopp-aus{stop-color:var(--g-stern-leer)}
.fs-g__anzahl{color:var(--g-blau);font-size:.92rem;text-decoration:none}
.fs-g__anzahl:hover{text-decoration:underline}
.fs-g__steuer{display:flex;align-items:center;gap:10px}
.fs-g__knopf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-rund);background:var(--flaeche-hoch);box-shadow:inset 0 0 0 1px var(--haar);color:var(--g-blau);font-weight:500;font-size:.92rem;text-decoration:none;white-space:nowrap;transition:box-shadow .2s var(--kurve)}
.fs-g__knopf .fs-icon{width:17px;height:17px}
.fs-g__knopf:hover{box-shadow:inset 0 0 0 1px var(--feldrand)}
.fs-g__knopf:active{transform:scale(.98)}
.fs-g__pfeile{display:inline-flex;gap:8px}
.fs-g__pfeil{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--flaeche-hoch);color:var(--tinte);box-shadow:var(--ring-stark),0 1px 3px oklch(20% .01 250 / .18);cursor:pointer;transition:box-shadow .2s var(--kurve),opacity .2s var(--kurve)}
.fs-g__pfeil .fs-icon{width:20px;height:20px}
.fs-g__pfeil:hover:not(:disabled){box-shadow:var(--ring-stark),0 2px 8px oklch(20% .01 250 / .22)}
.fs-g__pfeil:active:not(:disabled){transform:scale(.96)}
.fs-g__pfeil:disabled{opacity:.38;cursor:default}
.fs-g__reihe{display:flex;gap:14px;margin:0 calc(-1 * var(--g-rand));padding:2px var(--g-rand) 4px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g-rand);scrollbar-width:none}
.fs-g__reihe::-webkit-scrollbar{display:none}
.fs-g__reihe:focus-visible{outline-offset:-3px;border-radius:var(--r-feld)}
.fs-g__karte{display:flex;flex:0 0 min(86%,320px);scroll-snap-align:start}
.fs-g__inhalt{display:flex;flex-direction:column;gap:10px;width:100%;padding:18px 18px 14px;background:var(--flaeche-hoch);border-radius:var(--r-feld);box-shadow:inset 0 0 0 1px var(--haar)}
.fs-g__kopfzeile{display:flex;align-items:center;gap:12px;min-width:0}
.fs-g__avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:var(--flaeche);font-size:1.1rem;font-weight:500;line-height:1}
.fs-g__avatar--1{background:var(--g-av-1)}.fs-g__avatar--2{background:var(--g-av-2)}.fs-g__avatar--3{background:var(--g-av-3)}
.fs-g__avatar--4{background:var(--g-av-4)}.fs-g__avatar--5{background:var(--g-av-5)}.fs-g__avatar--6{background:var(--g-av-6)}
.fs-g__name{font-weight:500;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-g__logo-klein{width:20px;height:20px;flex:none;margin-left:auto}
.fs-g__bewertet{display:flex;align-items:center;gap:8px}
.fs-g__zeit{font-size:.84rem;color:var(--tinte-weich)}
.fs-g__text{margin:0;font-size:.92rem;line-height:1.5}
.fs-g--kurz .fs-g__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.fs-g--kurz .fs-g__karte--offen .fs-g__text{display:block;-webkit-line-clamp:unset;overflow:visible}
.fs-g__mehr{align-self:flex-start;min-height:44px;margin:-6px 0 -10px;padding:0 2px;border:0;background:none;color:var(--g-blau);font:inherit;font-size:.9rem;font-weight:500;cursor:pointer}
.fs-g__mehr:hover{text-decoration:underline}
.fs-g__hinweis{max-width:110ch}

/* ---------- Team ---------- */
.fs-team-raster{display:grid;gap:clamp(14px,2vw,20px)}
/* Teamfoto: am Handy ueber den Karten (4:3), ab 760 px links ueber beide Kartenzeilen und so hoch wie die Karten
   (Hoehe aus dem Foto in 4:3, die Karten strecken sich mit). */
.fs-person{display:grid;gap:10px;padding:24px 26px;align-content:start;height:100%}
.fs-person__rolle{color:var(--gruen-tief);font-weight:600;font-size:.95rem}
.fs-person h3{font-size:1.4rem}
.fs-person p{color:var(--tinte-weich);font-size:.96rem}
.fs-person--gesicht{grid-template-columns:auto minmax(0,1fr);column-gap:20px}
.fs-person--gesicht>*{grid-column:2}
.fs-person--gesicht>.fs-person__gesicht{grid-column:1;grid-row:1/span 3}
.fs-person__gesicht{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--grund);box-shadow:var(--ring-stark)}
.fs-person__bild{width:auto;height:64px}

/* ---------- Kontakt ---------- */
.fs-kontakt-raster{display:grid;gap:clamp(18px,3vw,30px);align-items:start}
.fs-kontaktkarte{display:grid;gap:18px;padding:26px 28px;align-content:start}
.fs-kontaktzeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;text-decoration:none}
.fs-kontaktzeile__kreis{display:grid;place-items:center;width:42px;height:42px;grid-row:span 2;border-radius:var(--r-rund);background:var(--gruen-hell);color:var(--gruen-tief);flex:none}
.fs-kontaktzeile__label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-weich)}
.fs-kontaktzeile__wert{font-size:1.08rem;font-weight:600;overflow-wrap:anywhere}
a.fs-kontaktzeile:hover .fs-kontaktzeile__wert{color:var(--gruen-tief)}
.fs-kontakt-raster--gleich{align-items:stretch}
/* Besuch: Kopf ueber den Zeiten, die Karte steht neben den Zeiten und ist genau so hoch. */
.fs-besuch{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,30px)}
.fs-besuch__kopf{margin-bottom:0}
.fs-besuch__karte{display:grid}
/* Karte: Huelle und Kern fuellen die Rasterzelle, die Buehne nimmt den Rest neben dem Fuss. */
.fs-karte-huelle{display:grid;height:100%}
.fs-karte{position:relative;display:flex;flex-direction:column;min-height:420px}
.fs-karte__buehne{position:relative;flex:1;display:grid;place-items:center;min-height:280px;padding:16px;background:var(--schale)}
.fs-karte__vorschau,.fs-karte__vorschau img,.fs-karte__buehne iframe{position:absolute;inset:0;width:100%;height:100%}
.fs-karte__vorschau img{object-fit:cover;opacity:.55}
.fs-karte__buehne iframe{border:0;background:var(--schale)}
.fs-karte__osm{position:absolute;right:0;bottom:0;padding:2px 8px;background:var(--flaeche);color:var(--tinte-weich);font-size:.72rem}
.fs-karte__platz{position:relative;display:grid;justify-items:center;gap:10px;width:min(100%,420px);padding:18px 20px 10px;text-align:center;background:var(--flaeche);border-radius:var(--r-feld);box-shadow:var(--ring-stark),var(--schatten-hoch)}
.fs-karte__titel{font-family:var(--schrift-titel);font-weight:600;font-size:1.15rem;line-height:1.2}
.fs-karte__merken{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.88rem;color:var(--tinte-weich);cursor:pointer}
.fs-karte__merken input{width:20px;height:20px;margin:0}
.fs-karte__extern{font-size:.88rem}
.fs-karte--geladen .fs-karte__buehne{min-height:220px}
.fs-karte--geladen .fs-karte__vorschau,.fs-karte--geladen .fs-karte__osm,.fs-karte--geladen .fs-karte__platz{display:none}
.fs-karte__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 14px;border-top:1px solid var(--haar)}
.fs-karte__wahl{display:inline-flex;padding:4px;gap:4px;border-radius:var(--r-rund);background:var(--schale);box-shadow:var(--ring)}
.fs-karte__wahl button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:0;border-radius:var(--r-rund);background:none;color:var(--tinte-weich);font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:background-color .2s var(--kurve),color .2s var(--kurve)}
.fs-karte__wahl button .fs-icon{width:18px;height:18px}
.fs-karte__wahl button[aria-pressed="true"]{background:var(--flaeche);color:var(--tinte);box-shadow:var(--ring-stark),0 1px 2px oklch(20% .01 250 / .1)}
.fs-karte__wahl button:hover{color:var(--tinte)}
.fs-karte__aus{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-right:auto;padding:0 6px;border:0;background:none;color:var(--tinte-weich);font:inherit;font-size:.86rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fs-karte__aus .fs-icon{width:16px;height:16px}
.fs-karte__aus:hover{color:var(--tinte)}

/* ---------- Einzugsgebiet ---------- */
.fs-orte{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.fs-orte li{padding:7px 14px;border-radius:var(--r-rund);background:var(--flaeche);color:var(--tinte-weich);font-size:.88rem;box-shadow:var(--ring)}

/* ---------- Fragen ---------- */
.fs-fragen{display:grid;gap:10px;max-width:76ch}
.fs-frage{border-radius:var(--r-feld);background:var(--flaeche);box-shadow:var(--ring);overflow:hidden}
.fs-frage summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;cursor:pointer;font-weight:600;list-style:none;min-height:56px}
.fs-frage summary::-webkit-details-marker{display:none}
.fs-frage summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--gruen-tief);border-bottom:2px solid var(--gruen-tief);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--kurve)}
.fs-frage[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.fs-frage__text{padding:0 20px 20px;color:var(--tinte-weich)}
.fs-frage__text p+p{margin-top:.8em}

/* ---------- Aufruf ---------- */
.fs-aufruf{display:grid;gap:20px;justify-items:center;text-align:center;padding:clamp(34px,5vw,56px) clamp(22px,4vw,48px)}
.fs-aufruf h2{max-width:18ch}
.fs-aufruf p{max-width:52ch;color:var(--tinte-weich)}
.fs-aufruf__knoepfe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* Kikis Gesicht als Plakette auf der Oberkante (Doppelrahmen wie die Karten, Kreis statt Rechteck). */
.fs-aufruf-huelle{position:relative;margin-top:62px}
.fs-aufruf-huelle .fs-aufruf{padding-top:clamp(78px,8vw,92px)}
.fs-aufruf__kiki{position:absolute;left:50%;top:0;z-index:1;transform:translate(-50%,-50%);display:grid;place-items:center;width:124px;height:124px;padding:6px;border-radius:50%;background:var(--schale);box-shadow:var(--ring)}
.fs-aufruf__kiki picture{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--flaeche);box-shadow:var(--ring-stark),var(--schatten)}
.fs-aufruf__gesicht{width:auto;height:84px;transform:translateY(2px)}
/* 404: Kiki schaut ueber die Meldung. */
.fs-fehlerseite__kiki{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--flaeche);box-shadow:var(--ring-stark),var(--schatten)}
.fs-fehlerseite__gesicht{width:auto;height:80px}

/* ---------- Fusszeile ---------- */
.fs-fusszeile{border-top:1px solid var(--haar);padding-block:clamp(42px,5vw,64px) 24px;margin-bottom:76px}
.fs-fuss-raster{display:grid;gap:clamp(26px,4vw,44px)}
.fs-fuss-marke{display:grid;gap:14px;justify-items:start}
.fs-fussblock{display:grid;gap:10px;align-content:start}
.fs-fussblock h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-weich);font-weight:600;font-family:var(--schrift-text)}
.fs-fussblock ul{display:grid;gap:7px;list-style:none}
.fs-fussblock a{text-decoration:none;color:var(--tinte-weich);font-size:.96rem}
.fs-fussblock a:hover{color:var(--gruen-tief)}
.fs-fussblock address{font-style:normal;color:var(--tinte-weich);font-size:.96rem;line-height:1.7}
.fs-fussende{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:clamp(30px,4vw,48px);padding-top:20px;border-top:1px solid var(--haar);color:var(--tinte-weich);font-size:.86rem}
.fs-fussende ul{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none}
.fs-fussende a{text-decoration:none}
.fs-fussende a:hover{color:var(--gruen-tief)}
.fs-fussende__haus{display:grid;gap:2px}
/* „Website made by / Pemediacorp“ in der Mitte der Schlusszeile, wie auf allen Pemediacorp-Seiten (Luis 13.10.): zwei
   Zeilen, der Name groesser im Pemediacorp-Gold (--pe-gold, Ausnahme vom einen Akzent, Begruendung bei PEMEDIACORP in
   dieser Datei). Beim Ueberfahren waechst der Name leicht, nur transform; bei reduzierter Bewegung unterstrichen. */
.fs-credit{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15;text-align:center}
.fs-credit__von{font-family:var(--schrift-titel);font-weight:700;font-size:.84rem;letter-spacing:.01em;color:var(--tinte)}
.fs-fussende .fs-credit__name{display:inline-block;font-family:var(--schrift-titel);font-weight:700;font-size:1.2rem;color:var(--pe-gold);transition:transform .3s var(--kurve)}
.fs-fussende .fs-credit__name:hover,.fs-fussende .fs-credit__name:focus-visible{color:var(--pe-gold);transform:scale(1.08)}
.fs-fussende .fs-credit__name:active{transform:scale(1.02)}
.fs-fussende .fs-credit__name:focus-visible{outline:3px solid var(--gruen-tief);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  .fs-fussende .fs-credit__name{transition:none}
  .fs-fussende .fs-credit__name:hover,.fs-fussende .fs-credit__name:focus-visible,.fs-fussende .fs-credit__name:active{transform:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
}
@media (max-width:639px){
  .fs-fussende{flex-direction:column;align-items:flex-start}
  .fs-credit{align-items:flex-start;text-align:left}
}
@media (min-width:640px){
  .fs-fussende{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .fs-fussende nav{justify-self:end}
  .fs-fussende nav ul{justify-content:flex-end}
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.fs-seitenkopf{padding-block:clamp(34px,4.5vw,58px) clamp(26px,3vw,38px)}
.fs-kopf-raster{display:grid;gap:clamp(22px,3vw,36px);align-items:end}
.fs-seitenkopf h1{max-width:15ch}
.fs-seitenkopf .fs-lead{max-width:46ch}
.fs-brotkrumen{display:flex;flex-wrap:wrap;gap:6px;list-style:none;font-size:.84rem;color:var(--tinte-weich);margin-bottom:16px}
.fs-brotkrumen a{text-decoration:none}
.fs-brotkrumen a:hover{color:var(--gruen-tief)}
.fs-brotkrumen li+li::before{content:"/";margin-right:6px;color:var(--haar)}

/* ---------- Fehlerseite ---------- */
.fs-fehlerseite{display:grid;gap:24px;justify-items:start;padding-block:clamp(60px,10vw,140px);max-width:56ch}

/* ---------- Bildnachweis ---------- */
.fs-bildnachweis{color:var(--tinte-weich);font-size:.8rem;margin-top:10px}

/* ---------- Einblenden ---------- */
/* Der Grundzustand ist der vollstaendige: ohne JavaScript und bei reduzierter Bewegung steht
   alles da. Das Skript setzt fs-warte nur fuer Abschnitte unterhalb des Fensters. */
.fs-auf{transition:opacity .46s var(--kurve-raus),transform .46s var(--kurve-raus)}
.fs-auf[data-warte]{opacity:0;transform:translateY(14px)}
.fs-auf[data-sofort]{transition:none}

/* Reduzierte Bewegung: gezielt statt pauschal. Bewegung (transform, Einblenden, Schublade) faellt weg,
   Farb- und Rahmenwechsel bleiben als Rueckmeldung erhalten. */
@media (prefers-reduced-motion:reduce){
  .fs-auf,.fs-kachel,.fs-produkt,.fs-partner,.fs-knopf,.fs-knopf__kreis,.fs-kachel__mehr .fs-icon,.fs-schublade,.fs-schublade__blatt,.fs-frage summary::after{transition-duration:.01ms !important}
  .fs-auf[data-warte]{opacity:1;transform:none}
  .fs-kachel:hover,.fs-produkt:hover,.fs-partner:hover{transform:none}
  .fs-g__knopf,.fs-g__pfeil,.fs-karte__wahl button,.fs-chip--link{transition-duration:.01ms !important}
  .fs-chip--link:active{transform:none}
  .fs-lupe[open],.fs-lupe[open]::backdrop{animation:none}
  .fs-lupe__buehne img,.fs-lupe-link img,.fs-lupe-link__zeichen,.fs-lupe__knopf{transition-duration:.01ms !important}
  .fs-lupe-link:hover img,.fs-lupe-link:hover .fs-lupe-link__zeichen{transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Breiten ---------- */
@media (min-width:560px){
  .fs-merkmale{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-produkte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-position{grid-template-columns:120px minmax(0,1fr)}
  .fs-galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-galerie .fs-galerie__gross{grid-column:1/-1}
  .fs-partner{--logo-h:min(48px,calc((100vw - 2 * var(--rand) - 88px) / var(--paar)));padding:14px 18px}
}
@media (min-width:760px){
  .fs-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-team-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-team-raster--foto{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .fs-team-raster--foto .fs-team__foto{grid-row:1/span 2}
  .fs-team-raster--foto .fs-team__foto .fs-kern{aspect-ratio:auto;height:100%}
  .fs-kopf-raster{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .fs-marken{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-leistungen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fs-kopf-status{display:inline-flex}
}
@media (min-width:960px){
  .fs-kopf-aktionen{display:flex}
  .fs-leiste{display:none}
  .fs-fusszeile{margin-bottom:0}
  .fs-hero-raster{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .fs-merkmale{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fs-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fs-kachel--gross{grid-column:span 4}
  .fs-kachel--halb{grid-column:span 3}
  .fs-kachel--klein{grid-column:span 2}
  .fs-produkte{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fs-produkt-raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .fs-produkt-medien{grid-column:1;grid-row:1}
  .fs-produkt-raster>.fs-kaufbox-anker{grid-column:2;grid-row:1/span 2}
  .fs-produkt-daten{grid-column:1;grid-row:2}
  .fs-kaufbox-anker{position:sticky;top:calc(var(--kopf) + 16px)}
  .fs-korb-raster{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .fs-kasse-raster{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .fs-kontakt-raster{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .fs-fuss-raster{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
  .fs-marken{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fs-besuch{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-areas:"kopf ." "zeiten karte";row-gap:clamp(30px,4vw,48px)}
  .fs-besuch__kopf{grid-area:kopf}
  .fs-besuch__zeiten{grid-area:zeiten}
  .fs-besuch__karte{grid-area:karte}
  .fs-besuch .fs-karte{min-height:0}
  .fs-kontakt-raster--gleich .fs-karte{min-height:0}
  .fs-g__karte{flex-basis:calc((100% - 2 * var(--g-rand) - 3 * 14px) / 3.4)}
  .fs-leistungen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fs-kachel__bild{aspect-ratio:16/10}
  .fs-kachel--gross .fs-kachel__bild{aspect-ratio:16/8}
}
@media (min-width:1200px){
  .fs-hauptnavi{display:flex}
  .fs-produkte{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1280px){
  .fs-leasing{flex-wrap:nowrap;justify-content:stretch;gap:12px}
  .fs-leasing .fs-partner{order:0;flex:1 1 0;padding:18px 20px}
  .fs-partner img{width:100%;height:auto}
}
@media (min-width:1400px){
  .fs-produkte{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media print{
  .fs-kopfzeile,.fs-leiste,.fs-schublade,.fs-vorschau,.fs-fusszeile nav{display:none}
}

.fs-leasing{--paar:8.03}.fs-partner--bikeleasing{order:1}.fs-partner--company-bike{order:2}.fs-partner--deutsche-dienstrad{order:3}.fs-partner--jobrad{order:4}.fs-partner--businessbike{order:5}@media (min-width:1280px){.fs-leasing .fs-partner--bikeleasing{flex-grow:5.902}.fs-leasing .fs-partner--company-bike{flex-grow:2.132}.fs-leasing .fs-partner--deutsche-dienstrad{flex-grow:5.865}.fs-leasing .fs-partner--jobrad{flex-grow:3.380}.fs-leasing .fs-partner--businessbike{flex-grow:3.889}}
:root{--marke-karte:oklch(74.83% 0.1823 123.5);--marke-rot:oklch(57.36% 0.2294 29.1);--marke-frage:oklch(56.07% 0.2178 27.0);--marke-limette:oklch(85.53% 0.2352 132.1)}
.fs-h3{font-family:var(--schrift-titel);font-weight:600;font-size:1.3rem;line-height:1.2;margin:0}
.fs-seitenkopf--knapp h1{font-size:clamp(2.1rem,1.6rem + 2vw,3.2rem)}
.fs-schmal{max-width:560px;margin-inline:auto}

/* ---------- Clubkarte ---------- */
.fs-clubkarte{position:relative;overflow:clip;display:grid;gap:14px;max-width:520px;padding:clamp(18px,3vw,26px);border-radius:var(--r-kern);background:var(--marke-karte);color:var(--tinte);box-shadow:inset 0 0 0 5px var(--marke-karte),inset 0 0 0 7px var(--tinte),var(--schatten-hoch)}
.fs-clubkarte__kopf{display:block}
.fs-clublogo{display:block;width:min(100%,360px);height:auto}
.fs-clublogo__zahnrad,.fs-clublogo__gesicht,.fs-clublogo__schrift{fill:var(--tinte)}
.fs-clublogo__scheibe{fill:var(--flaeche)}
.fs-clublogo__club{fill:var(--marke-rot);font-family:var(--schrift-titel);font-weight:700;font-size:44px;letter-spacing:.02em}
.fs-clubkarte__titel{margin:0;font-family:var(--schrift-titel);font-weight:600;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase}
.fs-clubkarte__daten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5em),1fr));gap:10px 16px;margin:0}
.fs-clubkarte__daten dt{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.fs-clubkarte__daten dd{margin:0;font-weight:600;font-size:1rem;overflow-wrap:anywhere}
.fs-clubkarte__pruef{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding-top:12px;border-top:1px solid var(--tinte)}
.fs-clubkarte__qr{width:132px;aspect-ratio:1;padding:6px;border-radius:var(--r-feld);background:var(--flaeche)}
.fs-qr{display:block;width:100%;height:100%}
.fs-qr__grund{fill:var(--flaeche)}
.fs-qr__punkte{fill:var(--tinte)}
.fs-clubkarte__zeit{display:grid;justify-items:start;gap:8px}
.fs-ring{width:44px;height:44px;transform:rotate(-90deg)}
.fs-ring__spur{fill:none;stroke:var(--flaeche);stroke-width:4}
.fs-ring__rest{fill:none;stroke:var(--tinte);stroke-width:4;stroke-dasharray:30;stroke-linecap:round}
.fs-clubkarte__uhr{font-variant-numeric:tabular-nums;font-weight:600;font-size:1.05rem}
.fs-clubkarte__glanz{position:absolute;top:-40%;bottom:-40%;left:-60%;width:40%;pointer-events:none;background:var(--flaeche);opacity:.22;transform:translateX(-120%) rotate(18deg);animation:fs-glanz 5.5s var(--kurve) infinite}
@keyframes fs-glanz{0%{transform:translateX(-120%) rotate(18deg)}55%,100%{transform:translateX(520%) rotate(18deg)}}
.fs-clubkarte--gross{max-width:560px;margin-inline:auto}
.fs-clubkarte--gross .fs-clubkarte__pruef{grid-template-columns:minmax(0,1fr);justify-items:center}
.fs-clubkarte--gross .fs-clubkarte__qr{width:min(56vw,220px)}
.fs-clubkarte--gross .fs-clubkarte__zeit{justify-items:center}
/* Muster der Mitgliedskarte auf „Über uns“ (Luis 13.10.): gerade wie die echte Karte auf karte.html, ohne Glanz. */
.fs-club-muster{display:grid;place-items:center}
.fs-club-muster .fs-clubkarte{width:100%}
.fs-club-buehne{display:grid;place-items:center}
.fs-club-buehne .fs-clubkarte{width:100%;transform:rotate(-3deg)}

/* ---------- Vorteile ---------- */
.fs-vorteile{display:grid;gap:clamp(14px,2vw,20px);list-style:none;margin:0;padding:0}
.fs-vorteil{display:grid;gap:10px;padding:22px 24px;height:100%;align-content:start}
.fs-vorteil .fs-icon{width:28px;height:28px;color:var(--gruen-tief)}
.fs-vorteil h3,.fs-feldkarte h3,.fs-felder-los h3{margin:0;font-size:1.2rem}
.fs-vorteil p{color:var(--tinte-weich);font-size:.96rem}

/* ---------- Formulare ---------- */
.fs-club-raster{display:grid;gap:clamp(22px,4vw,48px);align-items:start}
.fs-clubform{display:grid;gap:18px;padding:clamp(20px,3vw,30px)}
.fs-clubform__teil{display:grid;gap:16px}
.fs-schrittliste{display:grid;gap:8px;padding-left:1.3em;color:var(--tinte-weich)}
.fs-wahlgruppe{display:grid;gap:10px;margin:0;padding:0;border:0}
.fs-wahlgruppe legend{margin-bottom:8px;font-weight:600;font-size:.95rem}
.fs-wahl-klein{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:var(--r-feld);background:var(--flaeche-hoch);box-shadow:var(--ring-stark);cursor:pointer}
.fs-wahl-klein input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--gruen-tief)}
.fs-wahl-klein>span{display:grid;gap:2px}
.fs-wahl-klein>span>span{font-size:.9rem;color:var(--tinte-weich)}
.fs-wahl-klein:has(input:checked){box-shadow:inset 0 0 0 2px var(--gruen-tief)}
.fs-democode{padding:12px 16px;border-radius:var(--r-feld);background:var(--schale)}
.fs-democode strong{font-variant-numeric:tabular-nums;letter-spacing:.2em;font-size:1.2rem}
.fs-notiz--demo{background:var(--schale);color:var(--tinte)}
.fs-notiz--warnung{background:var(--fehler-hell);color:var(--fehler)}
.fs-knopfreihe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.fs-knopfreihe .fs-knopf{width:auto}
.fs-textknopf{min-height:44px;padding:0 4px;border:0;background:none;color:var(--gruen-tief);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.fs-textknopf:disabled{color:var(--tinte-weich);text-decoration:none;cursor:default}
.fs-textknopf--ernst{color:var(--fehler)}
.fs-knopf--gefahr{background:var(--fehler);color:var(--flaeche);box-shadow:var(--schatten)}
.fs-knopf--gefahr .fs-knopf__kreis{background:var(--flaeche);color:var(--fehler)}
.fs-knopf[aria-busy="true"]{opacity:.6;cursor:progress}
.fs-trenner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0;color:var(--tinte-weich);font-size:.9rem}
.fs-trenner::before,.fs-trenner::after{content:"";height:1px;background:var(--haar)}
/* „Passwort vergessen?“ unter dem Passwortfeld: nur so breit wie der Text, nicht auf Formularbreite gedehnt. */
.fs-clubform__teil>.fs-textknopf{justify-self:start}
/* Turnstile im Server-Betrieb (interaction-only): ohne Interaktion bleibt das Feld leer, also ohne die 65 px Mindesthöhe
   des Kassen-Widgets; verlangt Cloudflare eine Interaktion, nimmt das Widget seine eigene Höhe. */
.fs-turnstile[data-club-turnstile]{min-height:0}

/* ---------- Konto ---------- */
.fs-skelett{display:grid;gap:14px;max-width:520px}
.fs-skelett span{display:block;height:28px;border-radius:var(--r-feld);background:var(--schale);animation:fs-puls 1.4s var(--kurve) infinite alternate}
.fs-skelett span:first-child{height:220px;border-radius:var(--r-kern)}
@keyframes fs-puls{to{opacity:.55}}
.fs-konto-raster{display:grid;gap:clamp(22px,4vw,44px);align-items:start}
.fs-konto-karte{display:grid;gap:14px}
.fs-konto-einstellungen{display:grid;gap:16px}
.fs-kontoblock{display:grid;gap:12px;padding:20px 22px;border-radius:var(--r-kern);background:var(--flaeche);box-shadow:var(--ring)}
.fs-kontoblock--ernst{box-shadow:inset 0 0 0 1px var(--fehler-hell)}
/* Nur direkte Kinder: .fs-passkey__form (Umbenennen) bleibt flex. Knöpfe und Textknöpfe nicht auf Blockbreite dehnen. */
.fs-kontoblock>form{display:grid;gap:12px}
.fs-kontoblock>.fs-knopf,.fs-kontoblock>.fs-textknopf,.fs-kontoblock>.fs-textlink,.fs-kontoblock>form>.fs-knopf{justify-self:start}
.fs-passkeys{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.fs-passkey{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-feld);background:var(--flaeche-hoch);box-shadow:var(--ring)}
@media(max-width:479px){.fs-passkey{grid-template-columns:auto minmax(0,1fr)}.fs-passkey>.fs-textknopf{grid-column:2;justify-self:start}}
.fs-passkey__form{display:flex;gap:8px;align-items:center;min-width:0}
.fs-passkey__form input{flex:1;min-width:0;min-height:44px;padding:8px 10px;font:inherit;color:var(--tinte);background:var(--flaeche);border:1px solid var(--feldrand);border-radius:var(--r-feld)}
.fs-passkey .fs-icon{width:22px;height:22px;color:var(--gruen-tief)}
.fs-passkey small{display:block;color:var(--tinte-weich)}

/* ---------- Karte im Vollbild ---------- */
.fs-karte-voll{padding-block:clamp(18px,4vw,40px) clamp(40px,6vw,72px)}
.fs-karte-voll__titel{margin-bottom:18px;font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem);text-align:center}
.fs-karte-voll__hinweis{margin-top:14px;text-align:center}
.fs-karte-voll .fs-knopfreihe{justify-content:center;margin-top:10px}
.fs-karte-voll [data-karte-leer]{display:grid;justify-items:center;gap:14px;text-align:center}
/* Konto, Karte und Prüfung: keine feste Kontaktleiste, sie verdeckte mobil den Prüf-QR und „Jetzt einlösen“; der Platz unter dem Fuß entfällt mit. */
body[data-club-seite="konto"] .fs-leiste,body[data-club-seite="karte"] .fs-leiste,body[data-club-seite="pruefen"] .fs-leiste{display:none}
body[data-club-seite="konto"] .fs-fusszeile,body[data-club-seite="karte"] .fs-fusszeile,body[data-club-seite="pruefen"] .fs-fusszeile{margin-bottom:0}

/* ---------- Prüfung am Tresen ---------- */
.fs-pruefung{display:grid;justify-items:center;gap:14px;padding:clamp(24px,4vw,40px);border-radius:var(--r-kern);text-align:center;background:var(--flaeche);box-shadow:var(--ring-stark),var(--schatten)}
.fs-pruefung[data-gueltig="ja"]{background:var(--gruen-hell);color:var(--gruen-dunkel)}
.fs-pruefung[data-gueltig="nein"]{background:var(--fehler-hell);color:var(--fehler)}
.fs-pruefung__symbol .fs-icon{width:72px;height:72px}
.fs-pruefung__titel{margin:0;font-size:clamp(2rem,1.6rem + 2vw,3rem)}
.fs-pruefung__daten{display:grid;gap:8px;margin:0}
.fs-pruefung__daten div{display:grid;gap:2px}
.fs-pruefung__daten dt{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.fs-pruefung__daten dd{margin:0;font-size:1.15rem;font-weight:600}
/* Demo-Hinweis über dem jeweils sichtbaren Zustand (Anmeldung, Ergebnis oder Leer-Zustand). */
.fs-pruef-stapel{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
/* Fokus nach Scan oder Ergebnis: Rahmen in der Farbe der Karte (rot, grün oder Tinte) und mit ihrem Radius statt des grünen Standardrings. */
.fs-pruefung:focus-visible,.fs-ergebnis:focus-visible{outline-color:currentColor;border-radius:var(--r-kern)}

/* ---------- Glücksrad ---------- */
.fs-aktion-kopf{padding-block:clamp(18px,3vw,32px) clamp(40px,6vw,80px)}
.fs-aktion-raster{display:grid;gap:clamp(24px,4vw,56px);align-items:start;max-width:1200px}
.fs-aktion-text{display:grid;gap:12px;align-content:start}
.fs-aktion-ablauf{display:grid;gap:16px;margin-top:8px}
/* scroll-margin-top gleich der Kopfzeile: seite-gluecksrad.ts setzt das Rad samt Zeiger nach dem Dreh direkt darunter (G9). */
.fs-rad-buehne{position:relative;width:min(100%,520px);margin-inline:auto;padding-top:22px;scroll-margin-top:var(--kopf)}
.fs-rad-zeiger{position:absolute;top:0;left:50%;z-index:1;width:30px;transform:translateX(-50%)}
.fs-rad-zeiger svg{display:block;width:100%;fill:var(--tinte)}
.fs-rad{display:block;width:100%;height:auto}
.fs-rad__scheibe{transform-box:fill-box;transform-origin:center}
.fs-rad__scheibe--dreht{transition:transform 4.6s cubic-bezier(.33,0,.11,1)}
.fs-rad__rand{fill:var(--schale);stroke:var(--haar);stroke-width:1}
.fs-rad__feld{stroke:var(--haar);stroke-width:.8}
.fs-rad__feld--los{fill:var(--flaeche)}
.fs-rad__feld--zubehoer{fill:var(--marke-limette)}
.fs-rad__feld--rabatt{fill:var(--marke-rot)}
.fs-rad__symbol--los{fill:var(--gruen-tief)}
.fs-rad__text{font-family:var(--schrift-titel);font-weight:700;font-size:11px;letter-spacing:.06em;fill:var(--tinte)}
.fs-rad__beschriftung--zubehoer{fill:var(--tinte)}
.fs-rad__beschriftung--rabatt{fill:var(--flaeche-hoch)}
.fs-rad__klein,.fs-rad__name,.fs-rad__prozent{font-family:var(--schrift-titel);font-weight:700}
/* Kleine Zeile (SOFORT, RABATT) sichtbar unter dem Namen: leichter, ohne Laufweite; 7 Einheiten bleiben bei 390 px über 11 px. */
.fs-rad__klein{font-size:7px;font-weight:500;letter-spacing:0}
.fs-rad__name{font-size:8px}
.fs-rad__prozent{font-size:22px}
.fs-rad__nabe{fill:var(--tinte)}
.fs-ticket{display:block;width:100%;max-width:300px;height:auto}
.fs-ticket__form{fill:var(--flaeche-hoch);stroke:var(--gruen);stroke-width:1.5}
.fs-ticket__perforation{stroke:var(--haar);stroke-width:1.5;stroke-dasharray:4 5}
.fs-ticket__rad{fill:var(--tinte)}
.fs-ticket__frage{fill:var(--marke-frage);stroke:var(--flaeche-hoch);stroke-width:90;stroke-linejoin:round;paint-order:stroke}
.fs-ticket__los{font-family:var(--schrift-titel);font-weight:700;font-size:13px;letter-spacing:.12em;fill:var(--tinte);transform:translateX(-7px)}
.fs-ticket--ergebnis{max-width:220px}
.fs-ergebnis{display:grid;gap:14px}
/* Postleitzahl: fünf Ziffern brauchen kein volles Feld. */
[data-schritt="profil"] .fs-feld[data-feld="plz"] input{max-width:10em}
/* „Ab 18 Jahren.“ unter dem Newsletter-Häkchen, bündig mit dessen Text (20px Kästchen plus 12px Abstand). */
.fs-haken__hinweis{margin:-10px 0 0 32px}
.fs-haken:has(input:disabled){cursor:not-allowed}
/* Nur das Newsletter-Häkchen des Glücksrads, gesperrt unter 18: Rand in --tinte-weich statt des blassen
   Browser-Standards, damit das Kästchen sichtbar bleibt. Gesperrt ist es dort nie angehakt (seite-gluecksrad.ts), daher
   ohne Haken-Symbol. Andere Häkchen (etwa die Werbe-Einwilligung im Konto, während der Anfrage gesperrt und angehakt)
   behalten das Kästchen des Browsers samt Haken. */
.fs-haken[data-feld="newsletter"] input:disabled{appearance:none;box-sizing:border-box;border:2px solid var(--tinte-weich);border-radius:4px;background:var(--schale)}
.fs-ergebnis__karte{display:grid;gap:12px;padding:22px 24px;border-radius:var(--r-kern);background:var(--flaeche);box-shadow:var(--ring-stark),var(--schatten);animation:fs-auftritt .3s var(--kurve-raus)}
@keyframes fs-auftritt{from{opacity:0;transform:translateY(8px)}}
.fs-ergebnis__titel{margin:0;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.fs-ergebnis__symbol .fs-icon{width:44px;height:44px;color:var(--gruen-tief)}
.fs-ergebnis__daten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0}
.fs-ergebnis__daten div{display:contents}
.fs-ergebnis__daten dt{font-weight:600}
.fs-ergebnis__daten dd{margin:0}
.fs-ergebnis__qr{width:168px;padding:8px;border-radius:var(--r-feld);background:var(--flaeche);box-shadow:var(--ring-stark)}
.fs-ergebnis__hinweis{margin:0;padding:12px 16px;border-radius:var(--r-feld);background:var(--gruen-hell);color:var(--gruen-dunkel);font-size:.95rem}
/* Plan 3e: reserviertes Ergebnis nach dem Dreh. Ruhig: Restzeit in ganzen Minuten, der Balken schrumpft ohne Übergang in
   Schritten von rund 0,3 % (alle 5 Sekunden), keine Farbe für Eile. */
.fs-vorab{display:grid;gap:12px;padding:20px 22px;border-radius:var(--r-kern);background:var(--flaeche);box-shadow:var(--ring-stark),var(--schatten);animation:fs-auftritt .3s var(--kurve-raus)}
.fs-vorab:focus-visible{outline-color:var(--gruen-tief);outline-offset:3px}
.fs-vorab__kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.fs-vorab__symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-rund);background:var(--gruen-hell);color:var(--gruen-tief)}
.fs-vorab__symbol .fs-icon{width:26px;height:26px}
.fs-vorab__titel{margin:0;font-size:clamp(1.25rem,1.1rem + .7vw,1.55rem);line-height:1.2;text-wrap:balance}
.fs-vorab__vorspann{display:block;margin-bottom:4px;font-family:var(--schrift-text);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-weich)}
.fs-vorab__text{margin:0;color:var(--tinte-weich)}
.fs-vorab__text strong{color:var(--tinte);font-weight:600;white-space:nowrap}
.fs-vorab__zeit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;padding-top:12px;border-top:1px solid var(--haar)}
.fs-vorab__zeit .fs-icon{color:var(--gruen-tief)}
.fs-vorab__rest{font-weight:600;font-variant-numeric:tabular-nums}
.fs-vorab__balken{grid-column:1/-1;display:block;height:4px;border-radius:var(--r-rund);background:var(--schale);overflow:hidden}
.fs-vorab__balken>span{display:block;height:100%;background:var(--gruen-tief);transform-origin:left center}
.fs-vorab-start .fs-knopfreihe{margin-top:2px}
.fs-felder-raster{display:grid;gap:clamp(14px,2vw,20px)}
.fs-felder-los{display:grid;gap:12px;height:100%;padding:22px 24px;align-content:start}
.fs-felderliste{display:grid;gap:clamp(12px,2vw,16px);list-style:none;margin:0;padding:0}
.fs-feldkarte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;align-content:start;height:100%;padding:18px 20px}
.fs-feldkarte .fs-icon{grid-row:span 3;width:26px;height:26px;color:var(--tinte)}
.fs-feldkarte p{color:var(--tinte-weich);font-size:.94rem}
.fs-feldkarte .fs-feldkarte__anzahl{font-size:.82rem;font-weight:600}
.fs-infoliste{display:grid;gap:14px;margin:clamp(30px,4vw,48px) 0 0}
.fs-infoliste div{display:grid;gap:2px;padding-bottom:14px;border-bottom:1px solid var(--haar)}
.fs-infoliste dt{font-weight:600}
.fs-infoliste dd{margin:0;color:var(--tinte-weich)}

/* ---------- Breiten und reduzierte Bewegung ---------- */
@media (min-width:560px){
  .fs-vorteile,.fs-felderliste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-felderliste>li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:960px){
  .fs-club-raster,.fs-konto-raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .fs-konto-karte{position:sticky;top:calc(var(--kopf) + 16px)}
  .fs-aktion-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"text rad" "ablauf rad"}
  .fs-aktion-text{grid-area:text}
  .fs-rad-buehne{grid-area:rad}
  .fs-aktion-ablauf{grid-area:ablauf}
  .fs-vorteile{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fs-felder-raster{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
@media (prefers-reduced-motion:reduce){
  .fs-clubkarte__glanz{animation:none;opacity:0}
  .fs-rad__scheibe--dreht{transition:none}
  .fs-skelett span,.fs-ergebnis__karte,.fs-vorab{animation:none}
  .fs-club-buehne .fs-clubkarte{transform:none}
}
.fs-aktionsband__kern{display:grid;gap:clamp(16px,3vw,32px);align-items:center;padding:clamp(20px,3vw,32px)}
.fs-aktionsband h2{margin:8px 0 0;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);text-wrap:balance}
.fs-aktionsband p{margin:8px 0 0;max-width:60ch;color:var(--tinte-weich)}
.fs-aktionsband .fs-etikett{display:block;line-height:1.4}
.fs-ticket--band{max-width:200px}
@media(min-width:600px){.fs-aktionsband__kern{grid-template-columns:160px minmax(0,1fr)}.fs-aktionsband__kern>.fs-knopf{grid-column:2;justify-self:start}}
@media(min-width:960px){.fs-aktionsband__kern{grid-template-columns:200px minmax(0,1fr) auto}.fs-aktionsband__kern>.fs-knopf{grid-column:auto}}