/* =========================================================
   BELO — moto equipment
   Schwarz / Racing-Rot. Leitmotiv: die Schräge aus dem Logo.
   ========================================================= */

:root{
  /* Farbe */
  --bg:#0B0B0C;
  --bg-2:#101012;
  --surface:#141416;
  --surface-2:#1A1A1E;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.18);
  --red:#E10600;
  --red-hot:#FF2A18;
  --text:#F2F0EC;
  --muted:#8A8A92;
  --muted-2:#5B5B62;

  /* Form */
  --shear:-11deg;          /* Neigung des BELO-Logos */
  --max:1360px;
  --gut:clamp(20px,4.2vw,56px);
  --r:3px;

  /* Schrift */
  --f-d:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-m:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 16px/1.65 var(--f-b);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--f-d);font-weight:900;line-height:.92;letter-spacing:-.025em}
p{margin:0}
::selection{background:var(--red);color:#fff}

:focus-visible{outline:2px solid var(--red-hot);outline-offset:3px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.red{color:var(--red)}
.mut{color:var(--muted)}

.skip{
  position:fixed;top:-100px;left:16px;z-index:200;background:var(--red);color:#fff;
  padding:12px 18px;font:600 13px var(--f-m);transition:top .2s
}
.skip:focus{top:16px}

/* ---------- Kilometerzähler am linken Rand ----------
   Ersetzt den früheren Fortschrittsbalken oben. Sitzt im Seitenrand, damit er
   den Inhalt nicht berührt — unter 1100px ist dafür kein Platz, dort entfällt er. */
.odo{
  position:fixed;left:clamp(10px,1.5vw,34px);top:50%;transform:translateY(-50%);
  z-index:120;display:none;flex-direction:column;align-items:center;gap:18px;
  pointer-events:none;
}
.odo__val{
  writing-mode:vertical-rl;
  font:500 11px/1 var(--f-m);letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);
}
.odo__val b{
  font-size:17px;font-weight:700;letter-spacing:.06em;
  color:var(--red);font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px rgba(225,6,0,.5);
}
/* Skalenstriche im Hintergrund geben dem Balken den Charakter eines Instruments */
.odo__rail{
  position:relative;width:4px;height:clamp(200px,42vh,420px);
  background:
    repeating-linear-gradient(to bottom,var(--line-2) 0 2px,transparent 2px 10%),
    var(--line);
  overflow:hidden;
}
.odo__rail i{
  position:absolute;inset:0 0 auto 0;display:block;height:0;
  background:linear-gradient(to bottom,var(--red-hot),var(--red));
  box-shadow:0 0 14px var(--red),0 0 38px rgba(225,6,0,.55);
}
/* Kopf des Balkens — markiert die aktuelle Position deutlicher */
.odo__rail i::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  width:10px;height:10px;border-radius:50%;
  background:var(--red-hot);
  box-shadow:0 0 12px var(--red-hot),0 0 30px rgba(255,42,24,.6);
}
/* Erst ab dieser Breite ist im Seitenrand genug Platz */
@media (min-width:1180px){ .odo{display:flex} }

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
/* Solange die Kopfzeile transparent ueber dem Hero-Foto liegt, braucht die
   Navigation einen Untergrund — sonst steht sie auf hellen Bildstellen kaum
   lesbar da. Beim Scrollen uebernimmt .stuck und der Verlauf blendet aus. */
.hdr::before{
  content:"";position:absolute;inset:0 0 auto 0;height:210%;z-index:-1;
  background:linear-gradient(to bottom,var(--bg) 0%,transparent 100%);
  opacity:.92;transition:opacity .3s;pointer-events:none;
}
.hdr.stuck::before{opacity:0}
.hdr.stuck{
  background:rgba(11,11,12,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.hdr__in{
  max-width:var(--max);margin-inline:auto;padding:0 var(--gut);
  height:86px;display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);
}
.hdr__logo img{width:clamp(116px,11.5vw,152px);height:auto}
.hdr__logo{transition:opacity .2s}
.hdr__logo:hover{opacity:.7}

.nav{display:flex;gap:clamp(14px,2.2vw,32px);margin-left:auto}
.nav a{
  position:relative;font:600 14px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;
  color:#CFCCC6;padding:8px 0;transition:color .18s;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav a:hover,.nav a.is-here{color:var(--text)}
.nav a:hover::after,.nav a.is-here::after{transform:scaleX(1);transform-origin:left}

.hdr__act{display:flex;align-items:center;gap:12px}

/* ---------- Sprachumschalter ----------
   DE | EN im Kopf. Die aktive Sprache ist nicht verlinkt (aria-current),
   damit Tastatur und Screenreader nicht auf dieselbe Seite springen. */
.lang{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--f-m);letter-spacing:.1em}
.lang a,.lang span{padding:6px 2px;transition:color .18s}
.lang span{position:relative}
.lang span::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);
}
.lang i{width:1px;height:12px;background:var(--line-2);display:block}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 26px;overflow:hidden;
  font:700 12px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-2);transition:color .25s,border-color .25s;
}
.btn span{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:-2px;background:var(--red);
  transform:scaleX(0) skewX(var(--shear));transform-origin:left;
  transition:transform .38s var(--ease);
}
.btn:hover::before{transform:scaleX(1.08) skewX(var(--shear))}
.btn:hover{color:#fff;border-color:var(--red)}
.btn--red{background:var(--red);border-color:var(--red);color:#fff}
.btn--red::before{background:#fff}
.btn--red:hover{color:var(--red);border-color:#fff}
.btn--ghost{height:40px;padding:0 18px;border-color:rgba(255,255,255,.32)}
.btn--line{background:transparent}

.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger i{display:block;width:22px;height:2px;background:var(--text);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-4px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{
  /* Der Helm sitzt im Originalbild ganz oben — Y klein halten, sonst wird er
     angeschnitten. X 58% ruecke den Fahrer aus dem Textbereich nach rechts. */
  width:100%;height:100%;object-fit:cover;object-position:58% 6%;
  /* frueher stark entsaettigt und abgedunkelt — der Fahrer ging darin unter.
     Jetzt bleibt Farbe stehen, der Text sitzt stattdessen auf dem Verlauf. */
  filter:grayscale(.22) contrast(1.1) saturate(1.08) brightness(.78);
  transform:scale(1.03);
  animation:heroburn 28s ease-in-out infinite alternate;
}
/* Langsamer Kameraflug — driftet nach unten rechts, damit der Helm im Bild bleibt */
@keyframes heroburn{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to  {transform:scale(1.11) translate3d(-1.2%,1%,0)}
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,var(--bg) 0%,rgba(11,11,12,.92) 26%,rgba(11,11,12,.55) 50%,rgba(11,11,12,.12) 74%,rgba(11,11,12,.42) 100%),
    linear-gradient(to top,var(--bg) 5%,rgba(11,11,12,.42) 36%,transparent 64%),
    radial-gradient(70% 70% at 88% 28%,rgba(255,42,24,.22),transparent 62%),
    radial-gradient(120% 90% at 10% 84%,rgba(225,6,0,.22),transparent 58%);
}
.hero__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px);
  background-size:100% 92px;
  mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
}

.hero__in{
  position:relative;max-width:var(--max);margin-inline:auto;width:100%;
  padding:0 var(--gut);padding-bottom:clamp(26px,4vh,48px);padding-top:clamp(108px,13vh,134px);
}

.eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,2.2vh,24px);
  font:500 clamp(10px,1vw,11px)/1.4 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.eyebrow__bar{display:block;flex:none;width:46px;height:3px;background:var(--red);transform:skewX(var(--shear))}

.hero__h{
  font-size:clamp(2.7rem,7.6vw,7.2rem);
  letter-spacing:-.045em;text-transform:uppercase;
  text-shadow:0 4px 40px rgba(0,0,0,.55);
  margin-bottom:clamp(16px,2.6vh,28px);
}
.hero__h span{display:block;transform-origin:left}
.hero__h .red{
  position:relative;display:inline-block;padding-right:.08em;
}
.hero__h .red::after{
  content:"";position:absolute;left:-.01em;right:-.01em;bottom:-.03em;height:.07em;
  background:var(--red);transform:skewX(var(--shear));
}

.hero__lead{
  max-width:34ch;color:var(--text);
  font:600 clamp(18px,1.9vw,26px)/1.4 var(--f-b);letter-spacing:-.015em;
  text-shadow:0 2px 24px rgba(0,0,0,.75);
}
.hero__lead em{font-style:normal;color:var(--red-hot)}
.hero__sub{
  margin-top:12px;max-width:44ch;color:#B6B3AE;
  font-size:clamp(14px,1.15vw,16px);line-height:1.7;
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.hero__sub strong{color:var(--text);font-weight:600}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,2.2vh,26px)}

.hero__stats{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--max);margin-inline:auto;width:100%;padding:0 var(--gut);
  border-top:1px solid var(--line);
}
.stat{padding:18px 0 22px;border-left:1px solid var(--line);padding-left:20px}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font:900 clamp(26px,3.1vw,42px)/1 var(--f-d);letter-spacing:-.03em;font-style:italic}
.stat span{display:block;margin-top:6px;font:400 11px/1.4 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.hero__scroll{
  position:absolute;right:var(--gut);bottom:clamp(150px,20vh,210px);
  width:1px;height:64px;background:var(--line-2);overflow:hidden;
}
.hero__scroll i{position:absolute;inset:0 0 auto 0;height:22px;background:var(--red);animation:scr 2.1s var(--ease) infinite}
@keyframes scr{0%{transform:translateY(-100%)}60%,100%{transform:translateY(300%)}}

/* =========================================================
   PRODUKT-LEISTE
   Läuft dauerhaft durch, hält bei Hover und Tastaturfokus an.
   ========================================================= */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.strip{
  position:relative;overflow:hidden;
  border-block:1px solid var(--line);background:var(--bg-2);
}
.strip__row{display:flex;width:max-content;animation:strip 64s linear infinite}
.strip:hover .strip__row,
.strip:focus-within .strip__row{animation-play-state:paused}
@keyframes strip{to{transform:translateX(-50%)}}

.sitem{
  position:relative;flex:none;display:flex;align-items:center;gap:18px;
  padding:20px clamp(22px,2.4vw,34px);text-align:left;
  border-right:1px solid var(--line);
  transition:background .3s;
}
.sitem:hover{background:var(--surface)}
.sitem::after{                                  /* rote Schräge beim Hover */
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--red);transform:scaleX(0) skewX(var(--shear));transform-origin:left;
  transition:transform .4s var(--ease);
}
.sitem:hover::after{transform:scaleX(1) skewX(var(--shear))}
.sitem__ph{
  position:relative;flex:none;width:104px;height:88px;
}
.sitem__ph img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;object-position:center;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.6));
  transition:transform .45s var(--ease);
}
.sitem:hover .sitem__ph img{transform:scale(1.09) translateY(-3px)}
.sitem__tx{display:flex;flex-direction:column;gap:5px;white-space:nowrap}
.sitem__b{font:500 9px/1 var(--f-m);letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.sitem__n{font:800 15px/1 var(--f-d);letter-spacing:-.01em;text-transform:uppercase;color:var(--text)}
.sitem__k{font:400 10px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

.strip__fade{position:absolute;top:0;bottom:0;width:clamp(40px,7vw,110px);pointer-events:none;z-index:2}
.strip__fade--l{left:0;background:linear-gradient(to right,var(--bg-2),transparent)}
.strip__fade--r{right:0;background:linear-gradient(to left,var(--bg-2),transparent)}

/* =========================================================
   SPOTLIGHT — ein Produkt gross herausgestellt
   ========================================================= */
.spot{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(64px,9vh,120px) 0;
  border-bottom:1px solid var(--line);background:var(--bg);
}
.spot__glow{
  position:absolute;inset:-30% -10% -30% -25%;z-index:-2;
  background:radial-gradient(45% 55% at 32% 50%,rgba(225,6,0,.30),transparent 70%);
}
.spot__wm{
  position:absolute;right:-2%;top:50%;transform:translateY(-50%) skewX(var(--shear));
  z-index:-1;font:900 clamp(9rem,20vw,20rem)/1 var(--f-d);font-style:italic;
  letter-spacing:-.05em;color:rgba(255,255,255,.028);
  pointer-events:none;user-select:none;white-space:nowrap;
}
.spot__in{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,70px);align-items:center;
}

/* --- Produkt mit Messpunkten --- */
.spot__stage{position:relative}
.spot__prod{position:relative;width:100%;aspect-ratio:1/.92}
.spot__prod>img{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.75));
  --par:0px;
  animation:spotfloat 7s ease-in-out infinite;
}
@keyframes spotfloat{
  0%,100%{transform:translateY(var(--par))}
  50%    {transform:translateY(calc(var(--par) - 14px))}
}

.hs{position:absolute;transform:translate(-50%,-50%);z-index:2}
.hs__dot{
  position:relative;display:block;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff 0 14%,var(--red) 42%,#A50400 100%);
  border:0;cursor:pointer;
  box-shadow:
    0 0 0 5px rgba(225,6,0,.26),
    0 0 16px 3px rgba(225,6,0,.5),
    0 0 34px 7px rgba(225,6,0,.2);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.hs__dot:hover,.hs__dot:focus-visible{
  transform:scale(1.18);
  box-shadow:
    0 0 0 6px rgba(225,6,0,.4),
    0 0 26px 6px rgba(225,6,0,.8),
    0 0 60px 16px rgba(225,6,0,.4);
}
/* zwei versetzte Ringe -> deutlich spuerbarer Puls */
.hs__dot::before,
.hs__dot::after{
  content:"";position:absolute;inset:-11px;border-radius:50%;
  border:2px solid var(--red);pointer-events:none;
  animation:hspulse 2.6s var(--ease) infinite;
}
.hs__dot::after{animation-delay:1.3s}
@keyframes hspulse{
  0%  {transform:scale(.55);opacity:.95}
  70% {transform:scale(1.75);opacity:0}
  100%{transform:scale(1.75);opacity:0}
}

.hs__lbl{
  position:absolute;top:50%;transform:translateY(-50%) scale(.96);
  width:max-content;max-width:220px;padding:11px 15px;
  background:rgba(16,16,18,.96);border:1px solid var(--line-2);
  backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.hs--right .hs__lbl{left:26px}
.hs--left  .hs__lbl{right:26px}
.hs:hover .hs__lbl,.hs:focus-within .hs__lbl{opacity:1;transform:translateY(-50%) scale(1)}
.hs__lbl b{
  display:block;font:800 12px/1.2 var(--f-d);text-transform:uppercase;letter-spacing:.01em;color:var(--text);
}
.hs__lbl span{
  display:block;margin-top:5px;font:400 11px/1.45 var(--f-m);color:var(--muted);
}

/* --- Noten, die hinter dem Helm aufsteigen ---
   Liegen unter dem Produktbild (z-index 0 gegen 1), tauchen also erst
   ausserhalb der Helmsilhouette auf. Klingt nach der Musikwiedergabe
   der eingebauten Sprechanlage. */
.notes{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none;--f:1}
.note{
  position:absolute;display:block;color:var(--red-hot);
  opacity:0;transform:translateY(0) scale(.6);
  filter:drop-shadow(0 0 14px rgba(255,42,24,.7));
  animation:noteup var(--dur,9s) var(--ease) var(--del,0s) infinite;
}
.note--pale{color:#F6F3EE;filter:drop-shadow(0 0 12px rgba(255,255,255,.4))}
.note svg{display:block;width:100%;height:auto}
@keyframes noteup{
  0%   {opacity:0;   transform:translate(0,0) rotate(0deg) scale(.6)}
  7%   {opacity:1}
  62%  {opacity:.9}
  100% {opacity:0;   transform:translate(calc(var(--dx,26px) * var(--f)),
                                          calc(var(--dy,-190px) * var(--f)))
                                rotate(var(--rot,16deg)) scale(1.05)}
}

/* --- Textspalte --- */
.spot__badge{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  padding:8px 15px 8px 12px;background:var(--red);color:#fff;
  font:700 10px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;
  transform:skewX(var(--shear));
}
.spot__badge>span{transform:skewX(calc(var(--shear) * -1))}
.spot__badge i{
  width:6px;height:6px;border-radius:50%;background:#fff;
  animation:blink 1.8s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.spot__brand{font:500 11px/1 var(--f-m);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.spot__h{
  margin:12px 0 10px;font-size:clamp(2.3rem,5.4vw,4.6rem);
  text-transform:uppercase;letter-spacing:-.04em;
}
.spot__kind{
  font:400 11px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--red);
}
.spot__claim{
  margin-top:20px;max-width:46ch;color:#C9C7C2;font-size:clamp(15px,1.25vw,17px);line-height:1.7;
}

.spot__feat{list-style:none;margin:clamp(22px,3vh,32px) 0 0;padding:0;display:grid;gap:14px}
.spot__feat li{position:relative;padding-left:26px}
.spot__feat b{
  display:block;font:800 13px/1.3 var(--f-d);text-transform:uppercase;letter-spacing:.01em;
}
.spot__feat span{display:block;margin-top:3px;color:var(--muted);font-size:14px;line-height:1.6}
.spot__feat li::before{
  content:"";position:absolute;left:0;top:.42em;width:14px;height:3px;
  background:var(--red);transform:skewX(var(--shear));
}

.spot__specs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(24px,3.4vh,34px);background:var(--line);border:1px solid var(--line);
}
.spot__spec{background:var(--bg-2);padding:16px 14px}
.spot__spec b{
  display:block;font:900 clamp(17px,1.7vw,22px)/1 var(--f-d);font-style:italic;letter-spacing:-.02em;
}
.spot__spec b i{font-style:normal;font-size:.6em;color:var(--muted);margin-left:4px;font-weight:600}
.spot__spec span{
  display:block;margin-top:7px;font:400 9px/1.3 var(--f-m);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}

.spot__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(26px,3.6vh,38px);
}
.spot__price{display:flex;flex-direction:column;gap:5px}
.spot__price span{font:400 10px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.spot__price b{font:900 clamp(24px,2.6vw,34px)/1 var(--f-d);font-style:italic;letter-spacing:-.02em}

/* =========================================================
   SECTION-BASIS
   ========================================================= */
.sec{padding:clamp(80px,11vh,150px) 0;position:relative}
.sec__head{margin-bottom:clamp(36px,5.5vh,64px)}
.sec__head--row{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}
.kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font:500 11px/1 var(--f-m);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.kicker__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:22px;background:var(--red);color:#fff;
  font-weight:700;letter-spacing:.06em;transform:skewX(var(--shear));
}
.sec__h{font-size:clamp(2.1rem,5.2vw,4.4rem);text-transform:uppercase;letter-spacing:-.04em}
.sec__lead{max-width:44ch;color:var(--muted);line-height:1.75}

/* =========================================================
   SORTIMENT
   ========================================================= */
.split{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.split__card{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(24px,2.4vw,34px);
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .3s,transform .4s var(--ease);
}
.split__card::before{
  content:"";position:absolute;inset:auto -20% -70% -20%;height:100%;
  background:linear-gradient(to top,rgba(225,6,0,.28),transparent);
  transform:translateY(30%) skewY(4deg);opacity:0;
  transition:opacity .45s var(--ease),transform .45s var(--ease);z-index:-1;
}
.split__card:hover{border-color:rgba(225,6,0,.45);transform:translateY(-4px)}
.split__card:hover::before{opacity:1;transform:translateY(0) skewY(4deg)}

.split__media{
  position:relative;display:block;
  height:clamp(168px,16vw,228px);margin-bottom:clamp(20px,2vw,28px);
}
.split__media img{
  position:absolute;inset:0;padding-inline:8%;
  width:100%;height:100%;object-fit:contain;object-position:center;
  filter:drop-shadow(0 24px 38px rgba(0,0,0,.7));
  transform:scale(.96);transition:transform .5s var(--ease);
}
.split__card:hover .split__media img{transform:scale(1.05) translateY(-4px)}

.split__num{font:500 11px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.split__card h3{
  margin:14px 0 12px;font-size:clamp(1.5rem,2.4vw,2.1rem);
  text-transform:uppercase;hyphens:auto;
}
.split__card p{position:relative;z-index:1;color:var(--muted);font-size:14.5px;line-height:1.7}
.split__go{
  margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:10px;
  font:700 11px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;
}
.split__go::after{content:"→";transition:transform .3s var(--ease)}
.split__card:hover .split__go::after{transform:translateX(6px)}

/* =========================================================
   MARKEN-GRID
   ========================================================= */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3.5vh,38px)}
.chip{
  height:40px;padding:0 20px;border:1px solid var(--line-2);
  font:600 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:9px;
  transition:color .2s,border-color .2s,background .2s;
}
.chip b{font-weight:700;color:var(--muted-2)}
.chip:hover{color:var(--text);border-color:var(--text)}
.chip.is-on{background:var(--red);border-color:var(--red);color:#fff}
.chip.is-on b{color:rgba(255,255,255,.6)}

.brands{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.brand{
  position:relative;isolation:isolate;overflow:hidden;
  aspect-ratio:1/.86;background:var(--bg-2);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;
  transition:background .35s var(--ease);
}
.brand[hidden]{display:none}
.brand::before{
  content:"";position:absolute;inset:-30% -10%;z-index:-1;
  background:linear-gradient(160deg,rgba(225,6,0,.9),rgba(140,3,0,.65));
  transform:translateY(101%) skewY(-7deg);
  transition:transform .5s var(--ease);
}
.brand:hover::before,.brand:focus-visible::before{transform:translateY(0) skewY(-7deg)}
.brand__logo{
  width:min(74%,150px);height:56px;object-fit:contain;object-position:center;
  opacity:.72;transition:opacity .3s,transform .45s var(--ease),filter .3s;
}
.brand:hover .brand__logo{opacity:1;transform:translateY(-8px) scale(1.04)}
/* Marke ohne Logodatei: Schriftzug im Display-Schnitt, gleiche Flaeche wie ein Logo. */
.brand__logo--wort,.mhead__logo--wort{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:900 clamp(13px,1.5vw,17px)/1.15 var(--f-d);font-style:italic;
  letter-spacing:-.01em;text-transform:uppercase;
}
/* Ohne Logodatei traegt der Schriftzug den Namen — die Kachel laesst dann die
   zweite Zeile weg, sonst stuende dasselbe zweimal untereinander. Damit die
   Kachel trotzdem gleich hoch bleibt, bekommt der Schriftzug die Hoehe beider. */
.brand__logo--wort{height:85px}
.brand:hover .brand__logo--wort{transform:translateY(-8px) scale(1.04)}
.brand__name{
  margin-top:16px;font:800 13px/1 var(--f-d);font-style:italic;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  transition:color .3s,transform .45s var(--ease);
}
.brand:hover .brand__name{color:#fff;transform:translateY(-8px)}
.brand__cat{
  position:absolute;top:12px;left:12px;
  font:500 9px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
  transition:color .3s;
}
.brand:hover .brand__cat{color:rgba(255,255,255,.75)}
.brand__more{
  position:absolute;left:0;right:0;bottom:0;padding:11px;
  font:700 10px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.28);opacity:0;transform:translateY(100%);
  transition:opacity .3s,transform .38s var(--ease);
}
.brand:hover .brand__more{opacity:1;transform:translateY(0)}

/* =========================================================
   HIGHLIGHT-RAIL
   ========================================================= */
.rail-sec{padding-bottom:clamp(70px,9vh,120px)}
.rail__nav{display:flex;gap:8px}
.rnav{
  width:46px;height:46px;border:1px solid var(--line-2);
  font-size:22px;line-height:1;color:var(--muted);
  transition:color .2s,border-color .2s,background .2s;
}
.rnav:hover{background:var(--red);border-color:var(--red);color:#fff}

.rail{
  display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.pcard{
  position:relative;flex:0 0 clamp(232px,25vw,300px);scroll-snap-align:start;
  background:var(--surface);border:1px solid var(--line);
  padding:22px 22px 24px;display:flex;flex-direction:column;
  transition:background .3s,border-color .3s;
}
.pcard:hover{background:var(--surface-2);border-color:rgba(225,6,0,.4)}
.pcard__ph{
  position:relative;aspect-ratio:1;max-height:230px;margin-bottom:20px;
}
.pcard__ph::after{
  content:"";position:absolute;inset:18% 12% 6%;z-index:0;
  background:radial-gradient(60% 50% at 50% 100%,rgba(225,6,0,.34),transparent 72%);
  opacity:0;transition:opacity .4s;
}
.pcard:hover .pcard__ph::after{opacity:1}
.pcard__ph img{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));
  transition:transform .5s var(--ease);
}
.pcard:hover .pcard__ph img{transform:scale(1.07) translateY(-5px)}
.pcard__brand{font:500 10px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.pcard__name{margin:9px 0 4px;font:800 15px/1.25 var(--f-d);text-transform:uppercase;letter-spacing:-.01em}
.pcard__kind{font:400 11px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.pcard__price{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font:500 12px/1 var(--f-m);color:var(--muted);
}
.pcard__price b{font:800 15px/1 var(--f-d);color:var(--text);font-style:italic}

/* =========================================================
   KATALOG
   ========================================================= */
.katalog{background:var(--bg-2);border-block:1px solid var(--line)}
#kat-h{margin-bottom:22px}
.katalog__in{display:grid;grid-template-columns:1fr .78fr;gap:clamp(32px,6vw,90px);align-items:center}
.ticks{list-style:none;margin:26px 0 32px;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:26px;color:var(--muted);font-size:15px}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;
  background:var(--red);transform:skewX(var(--shear));
}
.katalog__img{position:relative;display:block}
.katalog__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 24px;background:var(--red);color:#fff;
  font:700 11px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transition:opacity .3s,transform .4s var(--ease);
  box-shadow:0 18px 40px rgba(0,0,0,.5);pointer-events:none;
}
.katalog__play i{
  width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #fff;
}
.katalog__img:hover .katalog__play,
.katalog__img:focus-visible .katalog__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.katalog__img img{
  width:100%;border:1px solid var(--line);
  box-shadow:-30px 40px 70px rgba(0,0,0,.6);
  transform:perspective(1400px) rotateY(-9deg) rotateX(1.5deg);
  transition:transform .7s var(--ease);
}
.katalog__img:hover img{transform:perspective(1400px) rotateY(-4deg) rotateX(0)}
.katalog__tag{
  position:absolute;left:-26px;bottom:-14px;
  padding:11px 18px;background:var(--red);color:#fff;
  font:900 20px/1 var(--f-d);font-style:italic;letter-spacing:.02em;
  transform:skewX(var(--shear));
}

/* =========================================================
   HÄNDLER
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{
  position:relative;background:var(--bg);padding:clamp(26px,3vw,38px);
  transition:background .3s;
}
.card::after{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:var(--red);transform:scaleY(0);transform-origin:bottom;
  transition:transform .4s var(--ease);
}
.card:hover{background:var(--surface)}
.card:hover::after{transform:scaleY(1);transform-origin:top}
.card__ix{font:500 10px/1 var(--f-m);letter-spacing:.2em;color:var(--muted-2)}
.card h3{margin:16px 0 12px;font-size:clamp(1.05rem,1.45vw,1.3rem);text-transform:uppercase;letter-spacing:-.02em}
.card p{color:var(--muted);font-size:14.5px;line-height:1.7}

.cta-band{
  margin-top:clamp(28px,4vh,44px);padding:clamp(28px,4vw,46px);
  border:1px solid var(--line);background:var(--surface);
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;right:-6%;top:-60%;width:42%;height:220%;
  background:radial-gradient(closest-side,rgba(225,6,0,.22),transparent);
  transform:skewX(var(--shear));
}
.cta-band>div{position:relative;max-width:52ch}
.cta-band h3{font-size:clamp(1.3rem,2.4vw,2rem);text-transform:uppercase;margin-bottom:10px}
.cta-band p{color:var(--muted);font-size:15px}
.cta-band .btn{position:relative}

/* =========================================================
   FOOTER
   ========================================================= */
.ft{position:relative;border-top:1px solid var(--line);padding-top:clamp(56px,8vh,90px);overflow:hidden}
.ft__top{display:grid;grid-template-columns:.8fr 2fr;gap:clamp(30px,5vw,70px);padding-bottom:clamp(40px,6vh,70px)}
.ft__brand img{width:clamp(110px,12vw,150px)}
.ft__claim{margin-top:10px;font:500 10px/1 var(--f-m);letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2)}
.ft__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:32px}
.ft__col h4{
  margin-bottom:14px;font:700 10px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--red);
}
.ft__col p{color:var(--muted);font-size:14.5px;line-height:1.85}
.ft__col a{transition:color .2s;border-bottom:1px solid transparent}
.ft__col a:hover{color:var(--text);border-bottom-color:var(--red)}

.ft__bot{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  padding:22px 0 26px;border-top:1px solid var(--line);
  font:400 11px/1.6 var(--f-m);letter-spacing:.06em;color:var(--muted-2);
}
.ft__bot a:hover{color:var(--text)}
.ft__wm{
  position:absolute;left:50%;bottom:-.32em;transform:translateX(-50%) skewX(var(--shear));
  font:900 26vw/1 var(--f-d);font-style:italic;letter-spacing:-.04em;
  color:rgba(255,255,255,.022);pointer-events:none;user-select:none;white-space:nowrap;
}

/* =========================================================
   RECHTSTEXTE (Impressum)
   ========================================================= */
.legal{padding:calc(86px + clamp(48px,7vh,90px)) 0 clamp(60px,8vh,100px)}
.legal__head{margin-bottom:clamp(34px,5vh,58px)}
.legal .sec__h{font-size:clamp(2.2rem,5vw,4rem)}

.legal__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-bottom:clamp(34px,5vh,58px);
}
.legal__block{background:var(--bg-2);padding:clamp(22px,2.4vw,30px)}
.legal__block h2{
  margin-bottom:16px;
  font:700 10px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--red);
}
.legal__adr{font-style:normal;color:var(--muted);font-size:15px;line-height:1.85}
.legal__adr strong{color:var(--text);font-weight:600}

.legal__dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15px}
.legal__dl dt{font:400 11px/1.6 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.legal__dl dd{margin:0;color:var(--muted);line-height:1.6}
.legal__dl a{border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.legal__dl a:hover{color:var(--text);border-bottom-color:var(--red)}

.legal__text{max-width:74ch;margin-bottom:clamp(28px,4vh,44px)}
.legal__text h2{
  position:relative;margin-bottom:16px;padding-left:26px;
  font-size:clamp(1.15rem,1.8vw,1.5rem);text-transform:uppercase;letter-spacing:-.02em;
}
.legal__text h2::before{
  content:"";position:absolute;left:0;top:.52em;width:14px;height:3px;
  background:var(--red);transform:skewX(var(--shear));
}
.legal__text p{color:var(--muted);font-size:15px;line-height:1.85}

.legal__parties{margin:22px 0;display:grid;gap:0}
.legal__parties dt{
  padding-top:14px;border-top:1px solid var(--line);
  font:800 13px/1.3 var(--f-d);text-transform:uppercase;letter-spacing:.01em;
}
.legal__parties dt span{
  display:block;margin-top:5px;
  font:400 10px/1 var(--f-m);letter-spacing:.16em;color:var(--red);
}
.legal__parties dd{margin:7px 0 16px;color:var(--muted);font-size:15px;line-height:1.6}

/* Hinweis auf den englischen Rechtsseiten: verbindlich ist die deutsche Fassung. */
.legal__hint{
  max-width:72ch;margin:-10px 0 34px;padding:12px 16px;
  border-left:2px solid var(--red);
  font:400 14px/1.6 var(--f-b);
}

.legal__back{margin-top:clamp(34px,5vh,54px)}

/* =========================================================
   MODAL
   ========================================================= */
.modal{
  width:min(1060px,calc(100vw - 32px));max-height:min(88vh,900px);
  padding:0;border:1px solid var(--line-2);background:var(--bg);color:var(--text);
  overflow:hidden;
}
.modal::backdrop{background:rgba(5,5,6,.84);backdrop-filter:blur(6px)}
.modal[open]{animation:pop .32s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.985)}}
.modal__x{
  position:absolute;top:14px;right:14px;z-index:3;
  width:42px;height:42px;border:1px solid var(--line-2);font-size:15px;color:var(--muted);
  transition:background .2s,color .2s,border-color .2s;
}
.modal__x:hover{background:var(--red);border-color:var(--red);color:#fff}
.modal__in{overflow-y:auto;max-height:inherit}

.mhead{
  position:relative;overflow:hidden;padding:clamp(30px,4vw,46px);
  border-bottom:1px solid var(--line);background:var(--bg-2);
}
.mhead::before{
  content:"";position:absolute;left:-10%;top:-70%;width:46%;height:240%;
  background:radial-gradient(closest-side,rgba(225,6,0,.24),transparent);
  transform:skewX(var(--shear));
}
.mhead__row{position:relative;display:flex;flex-wrap:wrap;gap:26px;align-items:center}
.mhead img{width:clamp(120px,15vw,190px);height:64px;object-fit:contain;object-position:left center}
.mhead__t{flex:1;min-width:240px}
.mhead__cat{font:500 10px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.mhead h2{margin:12px 0 12px;font-size:clamp(1.8rem,4vw,3.1rem);text-transform:uppercase}
.mhead p{color:var(--muted);font-size:15px;max-width:56ch;line-height:1.7}
.mhead__meta{
  position:relative;display:flex;flex-wrap:wrap;gap:26px;margin-top:24px;padding-top:22px;
  border-top:1px solid var(--line);
  font:400 11px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
}
.mhead__meta b{color:var(--text);font-weight:500}

.mprods{padding:clamp(26px,3.4vw,40px)}
.mprods__h{
  margin-bottom:22px;font:700 10px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.mprod{
  background:var(--bg);padding:20px;display:flex;flex-direction:column;
  transition:background .3s;
}
.mprod:hover{background:var(--surface)}
.mprod .pcard__ph{margin-bottom:16px}
.mprod__go{
  margin-top:auto;padding-top:14px;
  font:700 10px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;transition:color .2s;
}
.mprod__go::after{content:"→";transition:transform .3s var(--ease)}
.mprod:hover .mprod__go{color:var(--red)}
.mprod:hover .mprod__go::after{transform:translateX(5px)}
.mfoot{
  padding:0 clamp(26px,3.4vw,40px) clamp(26px,3.4vw,40px);
  display:flex;flex-wrap:wrap;gap:12px;
}

/* ---------- Blätter-Katalog ----------
   Das Iframe läuft auf fester Größe (1280x1269), damit der alte WordPress-Kopf
   berechenbar 416px hoch ist. app.js schneidet ihn weg und skaliert den Rest.  */
.flip{
  width:100vw;max-width:100vw;height:100svh;max-height:100svh;
  padding:0;margin:0;border:0;background:var(--bg);overflow:hidden;
}
/* display nur im geoeffneten Zustand setzen — sonst schlaegt es die
   Browser-Regel dialog:not([open]){display:none} und der Dialog bliebe
   nach dem Schliessen sichtbar. */
.flip[open]{display:flex;flex-direction:column}
.flip::backdrop{background:#08080A}
.flip__bar{
  flex:none;display:flex;align-items:center;gap:18px;
  height:60px;padding:0 14px 0 clamp(16px,3vw,28px);
  border-bottom:1px solid var(--line);background:var(--bg-2);
}
.flip__t{
  font:500 11px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
}
.flip__t b{color:var(--text);font-weight:500}
.flip__ext{
  margin-left:auto;font:700 10px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.flip__ext:hover{color:var(--text);border-bottom-color:var(--red)}
.flip__x{
  flex:none;width:44px;height:44px;border:1px solid var(--line-2);
  font-size:15px;color:var(--muted);
  transition:background .2s,color .2s,border-color .2s;
}
.flip__x:hover{background:var(--red);border-color:var(--red);color:#fff}

.flip__stage{position:relative;flex:1;overflow:hidden;background:var(--bg)}
.flip__stage iframe{
  position:absolute;top:0;left:0;width:1280px;height:1269px;border:0;background:#2C3A3C;
  transform-origin:top left;                 /* Versatz + Skalierung setzt app.js */
}
.flip__load{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--bg);color:var(--muted);
  font:500 11px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;
  transition:opacity .4s;
}
.flip__load.gone{opacity:0;pointer-events:none}
.flip__load i{
  width:26px;height:3px;background:var(--red);transform:skewX(var(--shear));
  animation:flipload 1.1s var(--ease) infinite;
}
@keyframes flipload{0%,100%{opacity:.25;transform:skewX(var(--shear)) scaleX(.5)}50%{opacity:1;transform:skewX(var(--shear)) scaleX(1)}}

.legal mark{
  background:var(--red);color:#fff;padding:1px 7px;
  font:700 11px/1.5 var(--f-m);letter-spacing:.08em;text-transform:uppercase;
}
.legal__text code{font:400 13px var(--f-m);color:var(--text)}

/* =========================================================
   HÄNDLERSUCHE
   ========================================================= */
.haendler .legal__head{margin-bottom:clamp(26px,3.6vh,40px)}

.hsuche{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:18px}
.hsuche__feld{flex:1;min-width:260px;max-width:460px}
.hsuche__feld input{
  width:100%;height:52px;padding:0 18px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line-2);border-radius:0;
  font:400 15px var(--f-b);
  transition:border-color .2s;
}
.hsuche__feld input::placeholder{color:var(--muted-2)}
.hsuche__feld input:focus{outline:0;border-color:var(--red)}
.hsuche__zahl{
  font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

.hliste{
  display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  border:1px solid var(--line);margin-top:clamp(20px,3vh,30px);
}
.hkarte{
  position:relative;background:var(--surface);
  padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;
  transition:background .25s;
}
.hkarte::after{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:var(--red);transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s var(--ease);
}
.hkarte:hover{background:var(--surface-2)}
.hkarte:hover::after{transform:scaleY(1);transform-origin:top}
.hkarte__n{
  font:800 16px/1.25 var(--f-d);text-transform:uppercase;letter-spacing:-.01em;
}
.hkarte__land{
  margin-top:6px;font:500 10px/1 var(--f-m);letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);
}
.hkarte__adr{
  margin-top:14px;font-style:normal;color:var(--muted);font-size:14.5px;line-height:1.65;
}
.hkarte__kontakt{display:flex;flex-direction:column;gap:3px;margin-top:12px;font-size:14.5px}
.hkarte__kontakt a{color:var(--text);border-bottom:1px solid transparent;width:fit-content}
.hkarte__kontakt a:hover{border-bottom-color:var(--red)}

.hkarte__zeiten{margin-top:14px}
.hkarte__zeiten summary{
  cursor:pointer;list-style:none;
  font:700 10px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:8px 0;transition:color .2s;
}
.hkarte__zeiten summary::-webkit-details-marker{display:none}
.hkarte__zeiten summary::before{content:"+ ";color:var(--red)}
.hkarte__zeiten[open] summary::before{content:"– "}
.hkarte__zeiten summary:hover{color:var(--text)}
.hkarte__zeiten dl{
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:6px 0 0;
  font:400 13px/1.5 var(--f-b);
}
.hkarte__zeiten dt{font:500 11px/1.6 var(--f-m);color:var(--muted-2)}
.hkarte__zeiten dd{margin:0;color:var(--muted)}

.hkarte__weg{
  margin-top:auto;padding-top:18px;
  font:700 10px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
}
.hkarte__weg::after{content:"→";transition:transform .3s var(--ease)}
.hkarte:hover .hkarte__weg::after{transform:translateX(5px)}

.hleer{
  margin-top:28px;padding:26px;border:1px solid var(--line);
  color:var(--muted);font-size:15px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ========================================================================
   MARKEN-LANDINGPAGE (marke-<key>.html)
   Kopf mit Logo und Kennzahlen, Fliesstext, Produktgitter nach Bauart,
   Ersatzteile als schlanke Liste am Fuss.
   ======================================================================== */
.mlp__kopf{padding:calc(86px + clamp(40px,7vh,86px)) 0 clamp(36px,5vh,60px);position:relative;overflow:hidden}
.mlp__kopf::before{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--line);
}
.mlp__kin{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mlp__zeichen{margin:22px 0 clamp(18px,3vh,30px);display:flex}
.mlp__logo{height:clamp(54px,7vw,86px);width:auto;max-width:min(300px,70%);object-fit:contain;object-position:left center}
.mlp__logo--wort{
  display:flex;align-items:center;
  font:900 clamp(26px,4.2vw,52px)/1 var(--f-d);font-style:italic;
  letter-spacing:-.02em;text-transform:uppercase;
}
.mlp__h{
  font:900 clamp(1.9rem,4.4vw,3.4rem)/1.02 var(--f-d);
  letter-spacing:-.03em;text-transform:uppercase;max-width:18ch;
}
.mlp__lead{margin-top:20px;max-width:62ch;font-size:clamp(15px,1.5vw,18px);line-height:1.65}
.mlp__fakten{
  margin-top:clamp(28px,4vh,44px);display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);padding-top:22px;
}

/* ---- Fliesstext + Argumente ---- */
.mlp__tin{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mlp__fliess{max-width:68ch}
.mlp__fliess p{font-size:clamp(15px,1.45vw,17px);line-height:1.75}
.mlp__fliess p + p{margin-top:18px}
.mlp__arg{margin-top:clamp(34px,5vh,56px)}

/* ---- Produkte, nach Bauart gruppiert ---- */
.mlp__gruppe + .mlp__gruppe{margin-top:clamp(34px,5vh,54px)}
.mlp__gh{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font:700 12px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;
}
.mlp__gh::after{content:"";flex:1;height:1px;background:var(--line)}
.mlp__gh b{
  font:700 11px/1 var(--f-m);padding:4px 9px;
  transform:skewX(var(--shear));order:-1;
}
.mlp__grid{
  display:grid;gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.mlp__p{height:100%}

/* ---- Ersatzteile: Liste statt Kacheln ---- */
.mlp__tliste{
  display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.mlp__tgruppe h3{
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line);
  font:700 11px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;
}
.mlp__tgruppe ul{list-style:none}
.mlp__tgruppe li + li{border-top:1px solid var(--line)}
.mlp__tgruppe a{
  display:flex;align-items:baseline;gap:12px;padding:10px 0;
  font-size:14px;line-height:1.4;transition:color .18s;
}
.mlp__tn{flex:1}
.mlp__tp{font:700 12px/1 var(--f-m);white-space:nowrap}

@media (max-width:860px){
  .mlp__fakten{grid-template-columns:1fr 1fr;gap:0}
  .mlp__fakten .stat{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-block:16px}
  .mlp__fakten .stat:nth-child(-n+2){border-top:0}
  .mlp__fakten .stat:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
  .mlp__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

@media (max-width:1080px){
  .katalog__in{grid-template-columns:1fr;gap:44px}
  .katalog__img{max-width:420px}
  .ft__top{grid-template-columns:1fr;gap:38px}
  .spot__in{grid-template-columns:1fr;gap:clamp(26px,4vh,44px)}
  .notes{--f:.62}                 /* weniger Platz nach oben -> kuerzere Flugbahn */
  .spot__stage{max-width:440px;margin-inline:auto;width:100%}
  .spot__wm{display:none}
  .spot__claim{max-width:none}
}
@media (max-width:860px){
  .hdr__in{height:74px}
  .burger{display:flex}
  .nav{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;margin:0;
    background:rgba(11,11,12,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .4s var(--ease);
  }
  .nav.open{max-height:70vh}
  .nav a{padding:18px var(--gut);font-size:15px;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .hdr__act .btn--ghost{display:none}
  .lang{font-size:11px;gap:6px}
  .split{grid-template-columns:1fr}
  .split__media{height:clamp(160px,32vw,210px)}
  .hero__stats{grid-template-columns:1fr 1fr}
  .stat{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-block:16px}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
  .hero__scroll{display:none}
  .cta-band{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .spot__specs{grid-template-columns:1fr 1fr}
  .hs__lbl{max-width:150px;padding:9px 12px}
  .brands{grid-template-columns:1fr 1fr}
  .brand{aspect-ratio:1/1}
  .brand__logo{height:44px;width:80%}
  .hero__h{font-size:clamp(1.95rem,9.4vw,3rem)}
  .hide-sm{display:none}
  .hero__in{padding-top:112px}
  .ft__bot{flex-direction:column;gap:8px}
}

/* =========================================================
   MOTION-PRÄFERENZ
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .strip__row{animation:none}
  .hero__media img{animation:none}
  .spot__prod>img{animation:none}
  .note{animation:none;opacity:.35;transform:none}
  .hs__dot::after{animation:none}
}