/* Modern Rokamat website — layered on colors_and_type.css */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{background:#fff;color:#0b0b0c;overflow-x:hidden;font-feature-settings:"ss01","cv11"}
img{max-width:100%;display:block}
a{text-decoration:none}

.v2-container{max-width:1440px;margin:0 auto;padding:0 40px}
@media (max-width:760px){.v2-container{padding:0 20px}}

/* Breadcrumb row under the global nav — site-wide chrome, used by every
   non-home page that renders <div class="pdp-crumb">. */
.pdp-crumb{background:#fafafa;border-bottom:1px solid #eee;padding:14px 0}
.pdp-crumb .v2-container{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--rok-text-muted-accessible)}
.pdp-crumb a{color:var(--rok-text-muted-accessible);text-decoration:none;transition:color .15s}
.pdp-crumb a:hover{color:var(--rok-orange)}
.pdp-crumb .cur{color:#0b0b0c;font-weight:600}
.pdp-crumb span{color:var(--rok-text-muted-accessible)}

.v2-eyebrow{
  font-family:'Roboto',system-ui,sans-serif;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  /* AA: kleiner Orange-Eyebrow auf hellem Grund braucht das dunklere Text-Orange
     (5.0:1). Auf dunklen Sektionen (CAS, Dealer-CTA, …) wird die Farbe weiter
     unten je Kontext zu Marken-Orange/Weiß überschrieben. */
  color:var(--rok-orange-text);display:inline-flex;align-items:center;gap:10px;
}
.v2-eyebrow::before{content:"";width:24px;height:1px;background:var(--rok-orange)}

.v2-display{
  font-family:'Roboto',system-ui,sans-serif;
  font-weight:900;font-style:italic;
  font-size:clamp(48px,7.5vw,120px);
  line-height:.92;letter-spacing:-.02em;
  text-transform:uppercase;
}
.v2-display .thin{font-weight:300;font-style:normal;letter-spacing:-.01em}

/* ---- top utility bar ---- */
.v2-topbar{
  background:#0b0b0c;color:#fff;
  font-size:12px;padding:8px 0;
}
.v2-topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:1440px;margin:0 auto;padding:0 40px}
.v2-topbar a{color:#fff;opacity:.85;transition:opacity .2s}
.v2-topbar a[href^="tel:"]{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.v2-topbar a[href^="tel:"] svg{flex:none}
.v2-topbar a:hover{opacity:1;color:var(--rok-orange)}
.v2-topbar .pipe{opacity:.3;margin:0 10px}
.v2-topbar-social{display:inline-flex;align-items:center;gap:12px;vertical-align:middle}
/* A11y-Audit 30.08.2026: target-size (WCAG 2.5.8 AA) schlug auf allen 14
   gemessenen Seiten fehl — die Social-Links hatten nur die Groesse ihrer
   SVG-Grafik. 24x24 ist das Minimum; die Grafik selbst bleibt gleich. */
.v2-topbar-social a{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
.v2-topbar-social svg{flex:none;display:block}
.v2-locale-switch{display:inline-flex;align-items:center}
.v2-locale-switch a{text-decoration:none}
.v2-locale-switch .cur{opacity:1;color:var(--rok-orange);font-weight:600}

/* ---- main nav ---- */
.v2-nav{
  position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eaeaea;
}
.v2-nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 40px;max-width:1440px;margin:0 auto}
.v2-nav-logo{display:flex;align-items:center;text-decoration:none;line-height:1}
.v2-nav-logo img{height:52px;width:auto;display:block}
.v2-nav img{height:52px}
.v2-nav-links{display:flex;gap:32px;font-family:'Roboto',sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.v2-nav-links a{color:#0b0b0c;position:relative;padding:6px 0}
.v2-nav-links a:hover{color:var(--rok-orange-text)}
.v2-nav-links a.current{color:var(--rok-orange-text)}
.v2-nav-links a.current::after{content:"";position:absolute;bottom:-15px;left:0;right:0;height:2px;background:var(--rok-orange)}
.v2-nav-links a .caret{font-size:9px;margin-left:4px;opacity:.5;transition:transform .25s,opacity .2s;display:inline-block}
.v2-nav-links a.is-open .caret{transform:rotate(180deg);opacity:1}
.v2-nav-links a.is-open{color:var(--rok-orange-text)}

/* ---- MEGA DROPDOWN ---- */
.v2-mega{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.12);
  opacity:0;pointer-events:none;
  transition:opacity var(--rok-dur-base) var(--rok-ease);
  z-index:990;
}
.v2-mega.open{opacity:1;pointer-events:auto}
.v2-mega-inner{max-width:1440px;margin:0 auto;padding:48px 40px 44px}
.v2-mega-morph{
  height:0;
  overflow:hidden;
  transition:height var(--rok-dur-slow) var(--rok-ease);
  will-change:height;
}
/* Inhalts-Crossfade: der .v2-mega-swap ist per React key={openKey} verschlüsselt
   und remountet bei jedem Sektionswechsel. Eine Transition feuert auf einem frisch
   gemounteten Knoten nicht (kein 0-Opacity-Startframe) → Inhalt poppt. Eine CSS-
   Animation spielt dagegen bei jedem Mount automatisch ab, also fadet der Inhalt
   sowohl beim ersten Öffnen als auch beim Produkte→Service→Unternehmen-Wechsel. */
.v2-mega-swap{
  opacity:1;
  animation:megaSwapFade var(--rok-dur-base) var(--rok-ease);
}
@keyframes megaSwapFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .v2-mega{transition:none}
  .v2-mega-morph{transition:none}
  .v2-mega-swap{animation:none}
  .v2-mob-submorph{transition:none}
  .v2-nav-links a .caret{transition:none}
}

/* produkte — grid mit thumbs */
.v2-mega-prod{display:grid;grid-template-columns:1.1fr 3fr;gap:60px}
.v2-mega-prod .intro{display:flex;flex-direction:column;gap:20px}
.v2-mega-prod .intro .eyb{font-family:'Roboto',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rok-orange-text);font-weight:700}
.v2-mega-prod .intro h3{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:36px;line-height:.95;letter-spacing:-.01em;color:#0b0b0c;margin:0;
}
.v2-mega-prod .intro h3 .thin{font-weight:300;font-style:normal;color:var(--rok-text-muted-accessible);display:block}
.v2-mega-prod .intro p{font-size:14px;line-height:1.6;color:var(--rok-text-muted-accessible);max-width:280px;margin:0}
.v2-mega-prod .intro .allcta{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#0b0b0c;border-top:1px solid #0b0b0c;padding-top:16px;width:fit-content;
  transition:color .2s,border-color .2s;
}
.v2-mega-prod .intro .allcta:hover{color:var(--rok-orange);border-color:var(--rok-orange)}

.v2-mega-prod .grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ececec;border:1px solid #ececec;
}
.v2-mega-prod .card{
  background:#fff;padding:0;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:background .25s;
}
.v2-mega-prod .card::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--rok-orange);transition:height .3s var(--rok-ease);z-index:1;
}
.v2-mega-prod .card:hover{background:#fafaf8}
.v2-mega-prod .card:hover::before{height:100%}
.v2-mega-prod .card .card-head{
  display:flex;gap:14px;align-items:flex-start;padding:16px 16px 10px;
  text-decoration:none;color:inherit;
}
.v2-mega-prod .card .thumb{
  flex:0 0 52px;width:52px;height:52px;background:#f5f5f3;display:grid;place-items:center;
  transition:background .25s;
}
.v2-mega-prod .card:hover .thumb{background:#fff}
.v2-mega-prod .card .thumb img{
  width:40px;height:40px;object-fit:contain;
  filter:grayscale(1) brightness(.3);transition:filter .25s;
}
.v2-mega-prod .card:hover .thumb img{filter:none}
.v2-mega-prod .card .body{flex:1;min-width:0}
.v2-mega-prod .card .n{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;font-size:11px;
  color:var(--rok-text-muted-accessible);letter-spacing:.1em;margin-bottom:4px;transition:color .25s;
}
.v2-mega-prod .card:hover .n{color:var(--rok-orange)}
.v2-mega-prod .card .name{
  font-family:'Roboto',sans-serif;font-weight:700;font-size:14px;color:#0b0b0c;
  letter-spacing:.02em;line-height:1.3;display:flex;align-items:center;gap:6px;
}
.v2-mega-prod .card .card-arrow{
  font-size:13px;color:var(--rok-orange);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;
}
.v2-mega-prod .card .card-head:hover .card-arrow{opacity:1;transform:translateX(0)}
.v2-mega-prod .card .d{font-size:12px;line-height:1.45;color:var(--rok-text-muted-accessible);padding:0 16px 16px}
.v2-mega-prod .card .tagline{
  font-family:'Roboto',sans-serif;font-size:10.5px;line-height:1.4;letter-spacing:.02em;
  color:var(--rok-text-muted-accessible);padding:0 16px 10px 82px;margin-top:-2px;
}

/* model pills — individually clickable */
.v2-mega-prod .model-list{
  list-style:none;margin:0;padding:0 16px 14px 82px;
  display:flex;flex-wrap:wrap;gap:4px 6px;
}
.v2-mega-prod .model-list li{margin:0}
.v2-mega-prod .model-link{
  display:inline-block;
  font-family:'Roboto',sans-serif;font-size:11px;font-weight:500;
  color:var(--rok-text-muted-accessible);text-decoration:none;letter-spacing:.01em;
  padding:3px 8px;border:1px solid #ececec;background:#fafafa;
  transition:all .15s;
}
.v2-mega-prod .model-link:hover{
  background:var(--rok-orange);border-color:var(--rok-orange);color:#fff;
}
/* accessory sub-chip — sekundäre Aktion, monochrom-grau, dezent.
   Liegt nach der Basis-Hover-Regel, damit der orange Hover dort nicht zieht. */
.v2-mega-prod .model-link.model-link--accessory{
  font-size:10px;font-weight:500;color:var(--rok-text-muted-accessible);letter-spacing:.02em;
  background:transparent;border:1px solid transparent;padding:3px 7px;
}
.v2-mega-prod .model-link.model-link--accessory:hover{
  background:#f1f1f1;border-color:#f1f1f1;color:#333;
}

/* service & unternehmen — 4 col structured */
.v2-mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
.v2-mega-cols .col h4{
  font-family:'Roboto',sans-serif;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rok-orange-text);margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #eaeaea;
}
.v2-mega-cols .col ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.v2-mega-cols .col li a{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  color:#0b0b0c;text-decoration:none;padding:4px 0;
  font-family:'Roboto',sans-serif;font-size:14px;font-weight:500;letter-spacing:0;
  transition:color .2s,transform .2s;
}
.v2-mega-cols .col li a:hover{color:var(--rok-orange);transform:translateX(2px)}
.v2-mega-cols .col li a .sub{display:block;font-size:12px;font-weight:400;color:var(--rok-text-muted-accessible);margin-top:2px;letter-spacing:0;text-transform:none}
.v2-mega-cols .col li a .arrow{font-size:12px;opacity:0;transition:opacity .2s,transform .2s;color:var(--rok-orange)}
.v2-mega-cols .col li a:hover .arrow{opacity:1;transform:translateX(2px)}

/* featured card (rightmost column in service/unternehmen) — entire card is clickable */
.v2-mega-feat{
  background:#0b0b0c;color:#fff;padding:24px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:220px;
  text-decoration:none;cursor:pointer;transition:background .2s;
}
.v2-mega-feat::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(234,91,10,.35),transparent 60%);pointer-events:none;transition:background .25s;
}
.v2-mega-feat:hover::before{background:radial-gradient(circle at 100% 0%,rgba(234,91,10,.55),transparent 65%)}
.v2-mega-feat .eyb{position:relative;font-family:'Roboto',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--rok-orange)}
.v2-mega-feat h4{
  position:relative;font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:22px;line-height:1;margin:0;letter-spacing:-.01em;color:#fff;
}
.v2-mega-feat p{position:relative;font-size:12px;line-height:1.5;color:rgba(255,255,255,.7);margin:0}
.v2-mega-feat .cta{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-family:'Roboto',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;border-bottom:1px solid var(--rok-orange);padding-bottom:6px;width:fit-content;transition:color .2s;
}
.v2-mega-feat:hover .cta{color:var(--rok-orange)}
.v2-nav-cta{display:flex;align-items:center;gap:12px}
.v2-lang{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Roboto',sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rok-text-muted-accessible);text-decoration:none;padding:6px 4px;transition:color .2s;
}
.v2-lang .flag{font-size:14px;line-height:1}
.v2-lang:hover{color:#0b0b0c}
.v2-lang.active{color:#0b0b0c}
.v2-icon-btn{width:40px;height:40px;display:grid;place-items:center;background:none;border:1px solid #e0e0e0;cursor:pointer;transition:all .2s}
.v2-icon-btn:hover{background:#0b0b0c;color:#fff;border-color:#0b0b0c}
.v2-icon-btn svg{width:18px;height:18px}

/* ---- buttons ---- */
.v2-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;background:var(--rok-orange);color:var(--rok-text-on-orange);
  font-family:'Roboto',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  border:none;cursor:pointer;transition:all .25s var(--rok-ease);
}
.v2-btn:hover{background:#0b0b0c;color:#fff;transform:translateX(4px)}
.v2-btn .arrow{transition:transform .25s}
.v2-btn:hover .arrow{transform:translateX(6px)}
.v2-btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.v2-btn.ghost:hover{background:#fff;color:#0b0b0c;border-color:#fff}
.v2-btn.dark{background:#0b0b0c;color:#fff}
.v2-btn.dark:hover{background:var(--rok-orange);color:var(--rok-text-on-orange)}

/* ---- HERO SLIDER ---- */
.v2-hero{position:relative;background:#0b0b0c;color:#fff;overflow:hidden;min-height:min(92vh,820px)}
.v2-hero-track{position:relative;min-height:inherit}
.v2-slide{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;transition:opacity .7s var(--rok-ease);
}
.v2-slide.active{opacity:1;pointer-events:auto}
/* Der Textkasten ist ZWEIERLEI: Platz fuer die Headline UND der dunkle
   Lesbarkeits-Verlauf darunter. Deshalb waechst hier beides gemeinsam.

   Owner-Vorgabe 30.08.2026: „Die Groesse muss bleiben, wenn, dann waechst es
   nach rechts." Die 980px liessen der 120px-Headline nur 820px Textbreite —
   rund elf Versalien. Alles darueber lief entweder in die vierte, fuenfte,
   sechste Zeile oder (bei einem einzelnen langen Wort) rechts aus dem Bild:
   `.v2-hero` hat `overflow:hidden`, der Kasten selbst nicht, also ragte der
   Text ueber den Verlauf hinaus und wurde am Viewportrand hart abgeschnitten
   (fr „ENTHOUSIASTES", 30.08. live gemessen).

   1220px geben 1060px Textbreite. Der Wert ist ein DECKEL, kein Ziel: die
   Fit-Rechnung unten nutzt ihn nur, soweit der Text ihn braucht. Der Verlauf
   blendet bei 85% seiner Breite aus, endet also bei ~1037px statt ~833px —
   das Motiv rechts bleibt frei.

   `container-type: inline-size` macht diesen Kasten zum Bezug fuer `cqi`:
   `100cqi` ist ab hier exakt die Textbreite (Content-Box, Padding schon
   abgezogen). Damit steht die verfuegbare Breite an genau EINER Stelle und
   muss in der Groessenrechnung nicht zweitgepflegt werden. */
.v2-slide-left{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 80px 120px 80px;max-width:min(1220px,100%);
  container-type:inline-size;
  background:linear-gradient(90deg,rgba(11,11,12,.82) 0%,rgba(11,11,12,.55) 50%,rgba(11,11,12,0) 85%);
}
.v2-slide-kicker{
  display:flex;align-items:center;gap:16px;margin-bottom:28px;
  font-family:'Roboto',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
}
.v2-slide-kicker .dash{width:40px;height:1px;background:var(--rok-orange)}
.v2-slide-kicker .num{color:var(--rok-orange)}
/* Groesse der Display-Headline — Owner-Vorgabe 30.08.2026: Designgroesse
   halten, nach rechts wachsen, und erst wenn das nicht reicht, minimal und
   dynamisch verkleinern; hoechstens drei Zeilen.

   `--hl-em` liefert der Server (`lib/content/headline-fit.ts`): die Breite in
   em, die EINE Zeile mindestens haben muss, damit die ganze Headline in drei
   Zeilen passt — aus den echten Zeichen gerechnet, nicht geschaetzt.
   `100cqi / var(--hl-em)` ist damit genau die Groesse, bei der die laengste
   Zeile den Kasten fuellt; `min()` mit `--hl-cap` deckelt sie auf die
   Designgroesse. Ergebnis: solange der Platz reicht, aendert sich NICHTS.

   Die erste `font-size` ist der Rueckfall fuer Browser ohne Container-Query-
   Einheiten — sie ueberspringen die zweite Zeile als ungueltig und bekommen
   das Bestandsverhalten. `--hl-cap` statt eines festen Werts, damit der
   Mobile-Zweig weiter unten nur den Deckel tauschen muss und die Fit-Rechnung
   dort genauso greift.

   `overflow-wrap:break-word` gilt jetzt in JEDER Breite (vorher nur <=900px):
   Es ist das Netz unter der Rechnung — kaeme je ein Wort durch, das laenger
   ist als der Kasten, bricht es um, statt abgeschnitten zu werden. */
.v2-slide-h{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  --hl-cap:120px;
  font-size:var(--hl-cap);
  font-size:min(var(--hl-cap),calc(100cqi / var(--hl-em,6.83)));
  line-height:.92;letter-spacing:-.02em;
  overflow-wrap:break-word;
  margin:0 0 24px;color:#fff;
}
.v2-slide-h .ro{color:var(--rok-orange)}
.v2-slide-h .thin{font-weight:300;font-style:normal;letter-spacing:-.01em;color:rgba(255,255,255,.8)}
.v2-slide p{font-size:17px;line-height:1.55;max-width:440px;margin:0 0 36px;color:rgba(255,255,255,.7);font-weight:300}
.v2-slide-meta{display:flex;gap:32px;margin-bottom:36px}
.v2-slide-meta div{font-family:'Roboto',sans-serif}
.v2-slide-meta .k{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px}
.v2-slide-meta .v{font-size:22px;font-weight:900;font-style:italic;color:#fff}
.v2-slide-cta{display:flex;gap:12px;align-items:center}

.v2-slide-right{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  background:linear-gradient(135deg,#1a1a1c 0%,#0b0b0c 100%);
}
.v2-slide-right::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 40%,rgba(234,91,10,.25),transparent 60%);
}
.v2-slide-right img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(1.05);
  animation:kenburn 20s ease-in-out infinite alternate;
}
@keyframes kenburn{
  from{transform:scale(1.05) translate(0,0)}
  to{transform:scale(1.15) translate(-2%,-2%)}
}
.v2-slide-right::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.2) 0%,transparent 30%,rgba(11,11,12,.5) 100%);
  pointer-events:none;
}
.v2-slide-tag{
  position:absolute;top:40px;right:40px;z-index:2;
  background:var(--rok-orange);color:var(--rok-text-on-orange);padding:8px 14px;
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
}

/* Slider UI */
.v2-hero-controls{
  position:absolute;left:80px;bottom:40px;z-index:5;
  display:flex;align-items:center;gap:16px;
}
.v2-hero-arrow{
  width:52px;height:52px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;cursor:pointer;transition:all .25s;display:grid;place-items:center;backdrop-filter:blur(8px);
}
.v2-hero-arrow:hover{background:var(--rok-orange);border-color:var(--rok-orange)}
.v2-hero-counter{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;
  font-size:14px;letter-spacing:.1em;color:#fff;
}
.v2-hero-counter .cur{color:var(--rok-orange);font-size:18px}
.v2-hero-counter .total{opacity:.5}

.v2-hero-dots{
  position:absolute;right:40px;bottom:40px;z-index:5;
  display:flex;flex-direction:column;gap:4px;
}
/* A11y target-size (≥44×44px, Mobile): die sichtbare Strich-Optik bleibt 36×2px,
   aber der klickbare Button wird über transparentes padding + negativen margin
   unsichtbar auf 44×44px vergrößert (kein Layout-Shift, kein Radius). Der
   sichtbare Strich liegt im ::before, der Button selbst ist transparent. */
.v2-hero-dots button{
  width:44px;height:24px;background:transparent;border:0;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:flex-end;
  margin:0 -4px;
}
.v2-hero-dots button::before{
  content:"";width:36px;height:2px;background:rgba(255,255,255,.2);
  transition:background .25s,width .25s;display:block;
}
.v2-hero-dots button.active::before{background:var(--rok-orange);width:56px}

.v2-hero-progress{position:absolute;top:0;left:0;height:2px;background:var(--rok-orange);z-index:5;transition:width .1s linear}

/* ---- STATS BAND ---- */
.v2-stats{background:var(--rok-white);color:var(--rok-ink);padding:28px 0;border-top:1px solid var(--rok-gray-200)}
.v2-stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.v2-stat{padding:8px 32px;border-left:1px solid var(--rok-gray-200)}
.v2-stat:first-child{border-left:0}
.v2-stat .num{font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;font-size:40px;line-height:1;color:var(--rok-orange);letter-spacing:-.02em}
.v2-stat .lab{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-top:8px;color:var(--rok-ink)}

/* ---- SECTION HEADERS ---- */
.v2-section{padding:120px 0}
.v2-section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px;gap:40px;flex-wrap:wrap}
.v2-section-head h2,.v2-section-head h1{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(40px,5.2vw,80px);line-height:.95;letter-spacing:-.02em;margin:12px 0 0;max-width:900px;
}
.v2-section-head h2 .thin,.v2-section-head h1 .thin{font-weight:300;font-style:normal;color:var(--rok-text-muted-accessible)}
.v2-section-head .side{max-width:360px;font-size:15px;line-height:1.6;color:var(--rok-text-muted-accessible)}

/* ---- PRODUCT PALETTE GRID ---- */
.v2-palette{background:#f5f5f3}
.v2-palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e2e2de}
@media (max-width:1080px){.v2-palette-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.v2-palette-grid{grid-template-columns:1fr}}
.v2-pal-card{
  position:relative;background:#fff;padding:36px 32px 32px;min-height:340px;
  display:flex;flex-direction:column;transition:background .4s var(--rok-ease);
  overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;
}
.v2-pal-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--rok-orange);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--rok-ease)}
.v2-pal-card:hover::before{transform:scaleX(1)}
/* A11y color-contrast: dekorative Riesen-Nummer (56px, große-Text-Schwelle 3:1).
   #e5e5e2 (1.26:1) → #8f8f8f (3.26:1 auf #fff). Bleibt optisch ein heller
   "Ghost"-Akzent, erfüllt aber AA für große Texte. */
.v2-pal-num{font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;font-size:56px;line-height:1;color:#8f8f8f;letter-spacing:-.02em;transition:color .3s}
.v2-pal-card:hover .v2-pal-num{color:var(--rok-orange)}
.v2-pal-icon{display:inline-flex;flex:0 0 auto;color:var(--rok-fg);transition:color .3s var(--rok-ease)}
.v2-pal-icon svg{width:26px;height:26px;fill:currentColor;display:block}
.v2-pal-card:hover .v2-pal-icon{color:var(--rok-orange)}
.v2-pal-img{margin:18px auto 22px;width:120px;height:120px;display:grid;place-items:center;flex:0 0 auto;transition:transform .45s var(--rok-ease)}
.v2-pal-img img{width:100%;height:100%;object-fit:contain;transition:filter .3s var(--rok-ease);filter:grayscale(1) brightness(0.35)}
.v2-pal-card:hover .v2-pal-img{transform:translateY(-4px) scale(1.06)}
.v2-pal-card:hover .v2-pal-img img{filter:none}
.v2-pal-name{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:22px;letter-spacing:-.01em;margin:0 0 8px;color:#0b0b0c;
  display:flex;align-items:center;gap:10px;
}
.v2-pal-desc{font-size:13px;line-height:1.5;color:var(--rok-text-muted-accessible);margin:0 0 20px;flex:1}
.v2-pal-link{
  font-family:'Roboto',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:#0b0b0c;display:inline-flex;align-items:center;gap:8px;transition:all .25s;align-self:flex-start;
}
.v2-pal-card:hover .v2-pal-link{color:var(--rok-orange);gap:14px}

/* Newsletter card — fills remaining slots in the palette grid */
.v2-pal-news{
  grid-column: span 3;
  background:#0b0b0c;color:#fff;padding:40px 44px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:340px;
}
.v2-pal-news::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 90% 10%, rgba(234,91,10,.28), transparent 55%),
    radial-gradient(circle at 10% 100%, rgba(234,91,10,.12), transparent 50%);
  pointer-events:none;
}
.v2-pal-news::after{
  content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--rok-orange);
}
.v2-pal-news-eyb{
  position:relative;font-family:'Roboto',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--rok-orange);
}
.v2-pal-news-title{
  position:relative;font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(26px,2.2vw,38px);line-height:1;letter-spacing:-.015em;margin:0;color:#fff;
}
.v2-pal-news-desc{
  position:relative;font-size:14px;line-height:1.55;color:rgba(255,255,255,.72);margin:0;max-width:44ch;
}
.v2-pal-news-field{
  position:relative;display:flex;align-items:stretch;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);margin-top:6px;transition:border-color .25s;
}
.v2-pal-news-field:focus-within{border-color:var(--rok-orange);background:rgba(255,255,255,.12)}
.v2-pal-news-field input{
  flex:1;background:transparent;border:0;outline:0;padding:14px 16px;
  color:#fff;font-family:'Roboto',sans-serif;font-size:14px;letter-spacing:.01em;
}
.v2-pal-news-field input::placeholder{color:rgba(255,255,255,.45)}
.v2-pal-news-field button{
  background:var(--rok-orange);border:0;color:var(--rok-text-on-orange);padding:0 18px;cursor:pointer;
  display:grid;place-items:center;transition:background .2s;
}
.v2-pal-news-field button:hover{background:#c94b06}
.v2-pal-news-done{
  position:relative;font-size:12px;color:var(--rok-orange);font-weight:700;letter-spacing:.04em;min-height:0;
}
.v2-pal-news.done .v2-pal-news-field{opacity:.5;pointer-events:none}
.v2-pal-news-foot{
  position:relative;font-family:'Roboto',sans-serif;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:auto;
}
@media (max-width:1080px){.v2-pal-news{grid-column: span 1}}
@media (max-width:560px){.v2-pal-news{grid-column: span 1;padding:32px 28px}}

/* ---- CAS SPOTLIGHT ---- */
.v2-cas{background:#0b0b0c;color:#fff;padding:140px 0;position:relative;overflow:hidden}
.v2-cas-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}
.v2-cas-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1a1a1c}
.v2-cas-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.v2-cas-img .badge{
  position:absolute;top:24px;left:24px;background:var(--rok-orange);color:var(--rok-text-on-orange);
  padding:10px 18px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.v2-cas h2{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(40px,4.8vw,72px);line-height:.95;letter-spacing:-.02em;margin:20px 0 24px;color:#fff;
}
.v2-cas h2 .ro{color:var(--rok-orange);font-weight:300;font-style:normal}
/* Dunkle CAS-Sektion: Eyebrow auf #0b0b0c darf Marken-Orange bleiben
   (5.62:1 ≥ AA), nicht das dunklere Text-Orange (würde auf Dunkel durchfallen). */
.v2-cas .v2-eyebrow{color:var(--rok-orange)}
.v2-cas p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.7);max-width:460px;margin:0 0 36px;font-weight:300}
.v2-cas-feats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 40px;padding:28px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.v2-cas-feats div .k{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--rok-orange);font-weight:700;margin-bottom:6px}
.v2-cas-feats div .v{font-size:15px;color:#fff;line-height:1.4}

/* ---- MADE IN GERMANY ---- */
.v2-made{background:#fff;padding:120px 0;position:relative}
.v2-made-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}
.v2-made-left h2{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(44px,5.5vw,84px);line-height:.95;letter-spacing:-.02em;margin:20px 0 24px;
}
.v2-made-left h2 .thin{font-weight:300;font-style:normal}
.v2-made-left .flag{
  display:inline-flex;align-items:center;gap:14px;padding:10px 16px;background:#f5f5f3;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;
}
.v2-made-left .flag span{display:flex;width:32px;height:20px;overflow:hidden}
.v2-made-left .flag span i{flex:1;display:block}
.v2-made-left p{font-size:17px;line-height:1.65;color:var(--rok-text-muted-accessible);max-width:520px;margin:0 0 28px}
.v2-made-facts{list-style:none;padding:0;margin:0 0 40px;display:grid;gap:18px}
.v2-made-facts li{display:grid;grid-template-columns:60px 1fr;gap:20px;align-items:start;padding:18px 0;border-top:1px solid #eaeaea}
.v2-made-facts li:last-child{border-bottom:1px solid #eaeaea}
.v2-made-facts li .n{font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;color:var(--rok-orange);font-size:22px}
.v2-made-facts li .t{font-size:15px;line-height:1.5;color:#0b0b0c}
.v2-made-facts li .t strong{display:block;margin-bottom:4px;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.02em}

.v2-made-photo{position:relative;aspect-ratio:4/5}
.v2-made-photo img{width:100%;height:100%;object-fit:cover}
.v2-made-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(11,11,12,.3) 100%);
}
.v2-made-badge{
  position:absolute;right:-24px;bottom:40px;background:var(--rok-orange);color:var(--rok-text-on-orange);padding:24px 28px;
  font-family:'Roboto',sans-serif;
}
.v2-made-badge .big{font-weight:900;font-style:italic;font-size:40px;line-height:.9;letter-spacing:-.02em}
.v2-made-badge .lab{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-top:6px;opacity:.85}

/* ---- DEALER LOCATOR (legacy minimal) ---- */
.v2-dealer{
  background:#f5f5f3;padding:120px 0;position:relative;
}

/* ---- DEALER FINDER v2 ---- */
.v2-dealer-v2{background:#f5f5f3;padding:120px 0;position:relative}
.v2-dealer-v2 h2{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.02em;margin:14px 0 0;color:#0b0b0c;
}
.v2-dealer-v2 h2 .thin{font-weight:200;font-style:normal;color:var(--rok-text-muted-accessible)}

.v2-dealer-shell{
  margin-top:48px;display:grid;grid-template-columns:minmax(380px,460px) 1fr;gap:0;
  background:#fff;border:1px solid #e2e2de;
}

/* LEFT: search + list */
.v2-dealer-side{display:flex;flex-direction:column;border-right:1px solid #e2e2de;min-height:680px}
.v2-dealer-search{padding:24px 24px 16px;border-bottom:1px solid #eee}
.v2-dealer-search .row{display:flex;align-items:center;gap:0;background:#f5f5f3;border:1px solid #e2e2de}
.v2-dealer-search .row:focus-within{border-color:#0b0b0c}
.v2-dealer-search .ic{padding:0 14px;color:var(--rok-orange);font-size:18px}
.v2-dealer-search input{flex:1;border:0;background:transparent;padding:14px 6px;font:inherit;font-size:15px;outline:none}
.v2-dealer-search button{background:#0b0b0c;color:#fff;border:0;padding:0 22px;font-family:'Roboto',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;align-self:stretch}
.v2-dealer-search button:hover{background:var(--rok-orange)}

.v2-dealer-search .filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;align-items:center}
.v2-dealer-search .filters button{
  background:#fff;border:1px solid #e2e2de;color:#333;padding:7px 12px;font:inherit;font-size:12px;
  font-weight:600;cursor:pointer;letter-spacing:.02em;display:inline-flex;gap:8px;align-items:center;
  transition:all .15s ease;
}
.v2-dealer-search .filters button em{font-style:normal;color:var(--rok-text-muted-accessible);font-size:11px;font-weight:500}
.v2-dealer-search .filters button:hover{border-color:#0b0b0c}
.v2-dealer-search .filters button.active{background:#0b0b0c;color:#fff;border-color:#0b0b0c}
.v2-dealer-search .filters button.active em{color:rgba(255,255,255,.6)}
.v2-dealer-search .filters .sep{width:1px;height:20px;background:#e2e2de;margin:0 4px}

.v2-dealer-meta{
  padding:12px 24px;font-size:12px;color:var(--rok-text-muted-accessible);display:flex;gap:10px;align-items:center;
  border-bottom:1px solid #eee;background:#fafafa;
}
.v2-dealer-meta b{color:#0b0b0c}
.v2-dealer-meta .dot{color:var(--rok-text-muted-accessible)}
.v2-dealer-meta a{color:var(--rok-orange-text);font-weight:600;text-decoration:none}

.v2-dealer-list{
  flex:1;overflow-y:auto;max-height:560px;
  scrollbar-width:thin;scrollbar-color:var(--rok-text-muted-accessible) #fff;
}
.v2-dealer-list::-webkit-scrollbar{width:6px}
.v2-dealer-list::-webkit-scrollbar-thumb{background:var(--rok-text-muted-accessible)}

.v2-dealer-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:16px 24px;
  border:0;border-bottom:1px solid #f0f0ec;cursor:pointer;transition:background .15s ease;
  align-items:start;width:100%;background:#fff;text-align:left;font:inherit;color:inherit;
}
.v2-dealer-card:hover,.v2-dealer-card.active{background:#fafaf7}
.v2-dealer-card.active{box-shadow:inset 3px 0 0 var(--rok-orange)}
.v2-dealer-card .num{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;font-size:11px;
  color:var(--rok-orange-text);letter-spacing:.1em;width:28px;padding-top:2px;
}
.v2-dealer-card .body h3{
  font-family:'Roboto',sans-serif;font-weight:700;font-size:14px;margin:0 0 4px;color:#0b0b0c;line-height:1.3;
}
/* A11y-Fix (nested-interactive, WCAG 4.1.2): der Kartenname ist jetzt ein
   echter <button> statt der ganzen Karte — Reset auf reinen Textlook, damit
   sich am sichtbaren Layout nichts ändert. */
.v2-dealer-card .body .pick{display:block;width:100%;border:0;margin:0;padding:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}
.v2-dealer-card .body .adr{font-size:12.5px;color:var(--rok-text-muted-accessible);line-height:1.5}
/* Ansprechpartner — dieselbe Skala wie .adr, nur dunkler, damit der Name als
   eigene Information lesbar ist und nicht mit der Adresse verschwimmt. */
.v2-dealer-card .body .person{display:block;font-size:12.5px;color:var(--rok-night);line-height:1.5;margin-top:2px}
.v2-dealer-card .body .tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.v2-dealer-card .body .tag{
  font-size:10px;padding:3px 8px;border:1px solid #e2e2de;color:var(--rok-text-muted-accessible);
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;
}
.v2-dealer-card .body .tag.demo{border-color:var(--rok-orange);color:var(--rok-orange-text)}
.v2-dealer-card .body .tag.service{border-color:#0b0b0c;color:#0b0b0c;background:#0b0b0c;color:#fff}
.v2-dealer-card .dist{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;font-size:13px;color:#0b0b0c;
  text-align:right;line-height:1;
}
.v2-dealer-card .dist em,
.v2-dealer-card .dist a{display:block;font-family:'Roboto',sans-serif;font-style:italic;font-weight:900;font-size:11px;color:var(--rok-orange-text);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:1.2}
.v2-dealer-card .dist em{color:var(--rok-text-muted-accessible);font-weight:500;font-style:normal}
/* A11y target-size: klickbarer Karten-Link ≥24px hoch (Optik via Zentrierung erhalten) */
.v2-dealer-card .dist a{display:flex;align-items:center;justify-content:flex-end;min-height:24px}
.v2-dealer-card .dist a:hover{text-decoration:underline}

/* RIGHT: map */
.v2-dealer-map-wrap{position:relative;background:#0b0b0c;min-height:680px;overflow:hidden}
.v2-dealer-map{width:100%;height:100%;display:block;position:absolute;inset:0}
#dealer-pins .pin{cursor:pointer;transition:transform .15s ease}
#dealer-pins .pin:hover,#dealer-pins .pin.active{transform:scale(1.4)}
#dealer-pins .pin circle{transition:all .15s ease}
#dealer-pins .pin.active .core{fill:#fff}
#dealer-pins .pin.active .ring{stroke:#fff;stroke-width:2;opacity:1}

.v2-dealer-legend{
  position:absolute;left:20px;bottom:20px;background:rgba(11,11,12,.85);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;
  gap:6px 18px;font-size:11px;color:#ccc;letter-spacing:.04em;
}
.v2-dealer-legend .d{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.v2-dealer-legend .d.hq{background:var(--rok-orange);box-shadow:0 0 0 3px rgba(234,91,10,.25)}
.v2-dealer-legend .d.demo{background:var(--rok-orange)}
.v2-dealer-legend .d.service{background:#fff}
.v2-dealer-legend .d.std{background:#888}

.v2-dealer-tooltip{
  position:absolute;background:#fff;color:#0b0b0c;padding:12px 14px;
  border:1px solid #0b0b0c;min-width:200px;pointer-events:none;
  transform:translate(-50%,calc(-100% - 14px));z-index:5;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.v2-dealer-tooltip::after{
  content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#0b0b0c;
}
.v2-dealer-tooltip .ttl{font-weight:700;font-size:13px;margin-bottom:4px}
.v2-dealer-tooltip .adr{font-size:12px;color:var(--rok-text-muted-accessible);line-height:1.4}
.v2-dealer-tooltip .tag{
  display:inline-block;margin-top:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;background:var(--rok-orange);color:var(--rok-text-on-orange);font-weight:700;
}
.v2-dealer-empty{padding:32px 24px;color:var(--rok-text-muted-accessible);text-align:center;font-size:13px}

.v2-dealer-cta{
  margin-top:32px;background:#0b0b0c;color:#fff;padding:32px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.v2-dealer-cta .v2-eyebrow{color:rgba(255,255,255,.5)}
.v2-dealer-cta h3{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:32px;margin:6px 0 0;letter-spacing:-.01em;color:#fff;
}
.v2-dealer-cta .v2-btn.ghost{border-color:#fff;color:#fff}
.v2-dealer-cta .v2-btn.ghost:hover{background:#fff;color:#0b0b0c}

@media (max-width:1100px){
  .v2-dealer-shell{grid-template-columns:1fr}
  .v2-dealer-side{border-right:0;border-bottom:1px solid #e2e2de;min-height:auto}
  .v2-dealer-list{max-height:380px}
  .v2-dealer-map-wrap{min-height:520px}
  .v2-dealer-cta{flex-direction:column;align-items:flex-start;text-align:left}
}
.v2-dealer-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.v2-dealer h2{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.02em;margin:20px 0 20px;
}
.v2-dealer p{font-size:16px;line-height:1.6;color:var(--rok-text-muted-accessible);max-width:480px;margin:0 0 28px}
.v2-dealer-form{display:flex;gap:0;margin-bottom:14px;background:#fff;padding:6px;border:1px solid #e2e2de}
.v2-dealer-form input{flex:1;border:0;padding:14px 18px;font:inherit;font-size:15px;outline:none;background:transparent}
.v2-dealer-form button{background:#0b0b0c;color:#fff;border:0;padding:0 26px;font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.v2-dealer-form button:hover{background:var(--rok-orange)}
.v2-dealer-tiny{font-size:12px;color:var(--rok-text-muted-accessible);letter-spacing:.06em}

.v2-dealer-map{position:relative;aspect-ratio:5/4;background:#0b0b0c;overflow:hidden}
.v2-dealer-map svg{width:100%;height:100%;display:block}
.v2-dealer-map .ping{fill:var(--rok-orange)}

/* ---- Leaflet overrides ---- */
/* Isolate the map's stacking context so Leaflet's internal pane z-indexes
 * (200–700) cannot climb above the site header (1000) or mega-nav (990).
 * Without `isolation:isolate` the open mega panel would slide *under* the
 * dealer map on the haendlersuche page. */
.v2-dealer-map-wrap{isolation:isolate;position:relative;z-index:0}
.v2-dealer-map-wrap .rok-dealer-leaflet,
.v2-dealer-map-wrap .leaflet-container{position:absolute;inset:0;width:100%;height:100%;background:#0b0b0c;font-family:inherit}
.v2-dealer-map-loading{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.06em;background:#0b0b0c}
/* Soften the tile filter so the bottom row doesn't darken into a strip
 * that looks like a "black bar" under the map. */
.v2-dealer-map-wrap .leaflet-tile-pane{filter:saturate(.85) contrast(1.0) brightness(.92)}
.v2-dealer-map-wrap .leaflet-control-zoom a{background:rgba(11,11,12,.9);border-color:rgba(255,255,255,.16);color:#fff}
.v2-dealer-map-wrap .leaflet-control-zoom a:hover{background:var(--rok-orange);color:#fff}
/* Attribution: transparent background with text-shadow halo so the dark
 * strip at bottom-right disappears entirely. Text stays legible on both
 * light tiles and the dark wrap fallback. */
.v2-dealer-map-wrap .leaflet-control-attribution{
  background:transparent;
  color:rgba(255,255,255,.65);
  font-size:10px;
  text-shadow:0 0 4px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.6);
  padding:2px 6px;
}
.v2-dealer-map-wrap .leaflet-control-attribution a{color:#fff;text-shadow:inherit}
.rok-dealer-divicon{background:transparent;border:0}
.rok-dealer-marker{position:relative;display:block;width:20px;height:20px;border-radius:50%;background:rgba(234,91,10,.22);box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.rok-dealer-marker span{position:absolute;inset:5px;border-radius:50%;background:var(--rok-orange);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.rok-dealer-marker.hq{width:28px;height:28px;background:rgba(234,91,10,.28);box-shadow:0 0 0 6px rgba(234,91,10,.16),0 0 24px rgba(234,91,10,.45)}
.rok-dealer-marker.hq span{inset:7px;background:#fff;border:4px solid var(--rok-orange)}
.rok-dealer-marker.active{box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(234,91,10,.38)}
.v2-dealer-map-wrap .leaflet-popup-content-wrapper{border-radius:0;border:1px solid #0b0b0c;box-shadow:0 12px 34px rgba(0,0,0,.35)}
.v2-dealer-map-wrap .leaflet-popup-content{font-size:13px;line-height:1.45;color:#0b0b0c}
.v2-dealer-map-wrap .leaflet-popup-content a{color:var(--rok-orange);font-weight:700}
.v2-dealer-map-wrap .leaflet-popup-content a.rok-dealer-popup-link{display:inline-block;font-family:'Roboto',sans-serif;font-style:italic;font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;margin-top:4px}
.v2-dealer-map-wrap .leaflet-popup-content a.rok-dealer-popup-link:hover{text-decoration:underline}

/* MarkerCluster-Bubble (Leaflet-Plugin). Bewusst rund (border-radius:50%) —
 * externe Karten-UI-Library, KEIN ROKAMAT-Design-Element (wie Zoom-/Attribution-
 * Controls). 40×40px erfüllt WCAG 2.5.5 Target-Size. Marken-Orange auf dunkler
 * Karte; schwarzer Text (#000) für AA-Kontrast auf Orange. Überschreibt die
 * Plugin-Defaults aus MarkerCluster.Default.css (grün/gelb/rund). */
.v2-dealer-map-wrap .rok-dealer-cluster{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--rok-orange);color:var(--rok-text-on-orange);
  border:2px solid #fff;border-radius:50%;
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;font-size:14px;
  box-shadow:0 0 0 4px rgba(234,91,10,.25);cursor:pointer;
}
.v2-dealer-map-wrap .rok-dealer-cluster:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
}

/* Hover tooltip — compact, dark, matches site palette. Click still opens the
 * full popup; this is just an immediate "what is this pin" preview.
 *
 * Width is fixed at 260px so every tooltip has the same visual footprint —
 * Codex' recommendation against the 220px (often-2-zeilig) and 300px
 * (dominates dense clusters) alternatives. `box-sizing:border-box` so padding
 * doesn't push the actual width past 260px. */
.leaflet-tooltip.rok-dealer-tooltip{
  background:#0b0b0c;border:0;border-radius:0;
  padding:0;color:#fff;font-family:'Roboto',system-ui,sans-serif;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  pointer-events:none;white-space:normal;
  width:260px;max-width:260px;box-sizing:border-box;
}
.leaflet-tooltip.rok-dealer-tooltip::before{border-top-color:#0b0b0c}
.leaflet-tooltip.rok-dealer-tooltip .rok-dealer-tip{
  display:flex;flex-direction:column;gap:2px;padding:8px 12px;
}
.leaflet-tooltip.rok-dealer-tooltip .rok-dealer-tip strong{
  font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;
  line-height:1.3;
}
.leaflet-tooltip.rok-dealer-tooltip .rok-dealer-tip span{
  font-size:11px;color:rgba(255,255,255,.78);line-height:1.35;
}

/* ---- FOOTER ---- */
.v2-footer{background:#0b0b0c;color:var(--rok-footer-text-muted);padding:80px 0 0}
.v2-footer-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.1)}
.v2-footer-top h2{color:#fff;font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 18px}
.v2-footer-top ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.v2-footer-top a{color:var(--rok-footer-text-muted);font-size:14px;transition:color .2s}
.v2-footer-top a:hover{color:var(--rok-orange)}
.v2-footer-brand img{height:36px;filter:brightness(0) invert(1);margin-bottom:20px}
.v2-footer-brand p{font-size:14px;line-height:1.6;max-width:300px;margin:0 0 20px;color:var(--rok-footer-text-muted)}
.v2-footer-brand .contact{font-size:13px;line-height:1.7;color:var(--rok-footer-text-muted)}
.v2-footer-bottom{padding:22px 0;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--rok-footer-text-muted);gap:18px;flex-wrap:wrap}
.v2-footer-bottom a{color:var(--rok-footer-text-muted)}
.v2-footer-bottom a:hover{color:var(--rok-orange)}

/* ---- TWEAKS PANEL ---- */
.v2-tweaks{
  position:fixed;bottom:24px;right:24px;z-index:100;
  background:#fff;border:1px solid #0b0b0c;padding:20px;
  font-family:'Roboto',sans-serif;font-size:13px;color:#0b0b0c;
  display:none;flex-direction:column;gap:14px;min-width:260px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.v2-tweaks.open{display:flex}
.v2-tweaks h6{margin:0;font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--rok-orange);font-style:italic}
.v2-tweaks label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--rok-text-muted-accessible);margin-bottom:6px}
.v2-tweaks select,.v2-tweaks input[type=color]{width:100%;padding:8px 10px;border:1px solid #e0e0e0;background:#fff;font:inherit;font-size:13px}
.v2-tweaks input[type=color]{height:36px;padding:2px;cursor:pointer}
.v2-tweaks .row{display:flex;gap:8px;align-items:center}

/* Reveal — `.v2-reveal` was originally opacity:0 by default and faded in via
 * an IntersectionObserver in /js/index.js. That script only runs once per
 * initial page load; Next.js client-side navigation (e.g. clicking from Home
 * → Service in the mega-nav) replaces the DOM without re-attaching the
 * observer, so `.v2-reveal` elements on the new page would stay invisible
 * forever — the whole DealerSection on /service, /produkte, /unternehmen,
 * /kontakt disappeared for any user who arrived via client-nav.
 *
 * Fix: default state is VISIBLE. The script opts in by adding the
 * `rok-reveal-ready` class to <html> BEFORE attaching the observer; if the
 * script never runs (or DOM changed after attachment), content is still
 * shown. */
.v2-reveal{opacity:1;transform:none;transition:opacity .8s var(--rok-ease),transform .8s var(--rok-ease)}
html.rok-reveal-ready .v2-reveal{opacity:0;transform:translateY(30px)}
html.rok-reveal-ready .v2-reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .v2-slide-left{padding:40px 24px;max-width:100%}
  /* Headline darf auf schmalen Viewports nicht abgeschnitten werden: lange
     deutsche Komposita (z.B. ELEGANTGEGLÄTTET) sind ein unteilbares Wort
     (angrenzende Inline-Spans ohne Whitespace) und würden bei festem 64px
     über den Rand laufen + von .v2-hero{overflow:hidden} gekappt. clamp
     skaliert fluid (Cap 64px == bisheriger Wert an der 900px-Grenze, Boden
     28px). word-break/hyphens pinnen die Defaults (kein break-all, kein
     Trennstrich-Glyph in der Versal-Headline).

     Getauscht wird hier seit 30.08.2026 nur noch der DECKEL `--hl-cap`, nicht
     die `font-size` selbst: so gilt die Fit-Rechnung aus der Grundregel auch
     mobil weiter — der Deckel ist dort eben 64px statt 120px. Setzte man die
     Groesse hier direkt, faellt die Dreizeilen-Garantie genau auf den engsten
     Viewports weg, wo sie am noetigsten ist. `overflow-wrap` steht jetzt in
     der Grundregel und muss hier nicht wiederholt werden. */
  .v2-slide-h{--hl-cap:clamp(28px,8.5vw,64px);word-break:normal;hyphens:none}
  .v2-stats-inner{grid-template-columns:repeat(2,1fr)}
  .v2-stat{padding:12px 20px}
  .v2-cas-inner,.v2-made-inner,.v2-dealer-inner{grid-template-columns:1fr;gap:40px}
  .v2-footer-top{grid-template-columns:1fr 1fr;gap:32px}
  /* .v2-nav-links-Umbruch NICHT hier (900px): die Desktop-Nav kollidiert
     schon bei ~1000px (Logo+Links+CTA = 927px Inhalt + 80px Padding, danach
     0 Gap → Overlap). Der Nav-Umschaltpunkt lebt daher in einem eigenen
     1100px-Query weiter unten, getrennt von diesen 900px-Layoutregeln. */
  .v2-hero-dots{display:none}
  /* Reflow @320px (WCAG 1.4.10): das Händler-Grid blies horizontal über den
     Viewport, weil `1fr`-Tracks (= minmax(auto,1fr)) auf die min-content-Breite
     des unteilbaren Karteninhalts aufgehen → minmax(0,1fr) erlaubt Schrumpfen
     unter min-content; Such-Input muss flex-schrumpfbar werden (min-width:0).
     Made-Badge hängt per right:-24px bewusst übers Foto (Desktop) → mobil
     bündig (right:0), sonst ragt es über den rechten Bildschirmrand. */
  .v2-dealer-shell{grid-template-columns:minmax(0,1fr)}
  .v2-dealer-card{grid-template-columns:auto minmax(0,1fr) auto}
  .v2-dealer-search input{min-width:0}
  .v2-made-badge{right:0}
}

/* ====== GLOBAL SEARCH OVERLAY ============================================ */
.rok-search{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-start;justify-content:center;padding:88px 20px 32px;animation:rokFadeIn .15s ease}
.rok-search-backdrop{position:absolute;inset:0;background:rgba(11,11,12,.62);backdrop-filter:blur(6px);border:0;cursor:pointer}
.rok-search-panel{position:relative;width:min(720px,100%);background:#fff;border:1px solid var(--rok-gray-200);box-shadow:0 36px 80px rgba(0,0,0,.32);display:flex;flex-direction:column;max-height:calc(100vh - 120px);overflow:hidden}
.rok-search-bar{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--rok-gray-200);background:#fff}
.rok-search-bar .rok-search-ic{width:20px;height:20px;color:var(--rok-orange);flex:0 0 auto}
.rok-search-bar input{flex:1;border:0;outline:0;font:inherit;font-size:18px;color:#0b0b0c;background:transparent}
.rok-search-bar input::placeholder{color:var(--rok-text-muted-accessible)}
.rok-search-bar kbd{font-family:inherit;font-size:11px;letter-spacing:.12em;padding:4px 8px;border:1px solid var(--rok-gray-200);color:var(--rok-text-muted-accessible);background:#fafafa}
/* A11y (WCAG 2.4.7): das Suchfeld selbst bleibt outline:0 (s.o.), der
   Fokus-Ersatz sitzt am umschließenden Balken — gleiche Technik wie
   `.v2-dealer-search .row:focus-within`. */
.rok-search-bar:focus-within{border-bottom-color:var(--rok-orange)}
.rok-search-body{overflow:auto;padding:8px 0 16px}
.rok-search-empty{padding:32px 22px;color:var(--rok-text-muted-accessible);font-size:14px;line-height:1.6}
.rok-search-empty em{font-style:italic;color:#0b0b0c;font-weight:700;margin:0 2px}
.rok-search-group{padding:12px 0 4px}
.rok-search-group + .rok-search-group{border-top:1px solid var(--rok-gray-200)}
.rok-search-group-h{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--rok-text-muted-accessible);padding:8px 22px;margin-bottom:4px}
.rok-search-group ul{list-style:none;margin:0;padding:0}
.rok-search-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px 16px;padding:12px 22px;color:#0b0b0c;text-decoration:none;border-left:3px solid transparent;transition:background .12s,border-color .12s}
.rok-search-row:hover{background:#fafafa;border-left-color:var(--rok-orange)}
.rok-search-row .meta{display:contents}
.rok-search-row .ttl{font-weight:700;font-size:15px;grid-column:1}
.rok-search-row .exc{grid-column:1;font-size:13px;color:var(--rok-text-muted-accessible);font-weight:400;line-height:1.45}
.rok-search-row .path{grid-column:2;grid-row:1 / span 2;font-size:11px;letter-spacing:.04em;color:var(--rok-text-muted-accessible);white-space:nowrap}
.rok-search-row--product{grid-template-columns:120px 1fr auto;align-items:start;gap:4px 16px}
.rok-search-row--product .thumb{grid-column:1;grid-row:1 / span 2;width:120px;aspect-ratio:16 / 9;background:#f3f3f3;overflow:hidden;display:block}
.rok-search-row--product .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rok-search-row--product .meta{display:contents}
.rok-search-row--product .ttl{grid-column:2;grid-row:1;white-space:normal;overflow-wrap:anywhere}
.rok-search-row--product .exc{grid-column:2;grid-row:2;white-space:normal;overflow-wrap:anywhere}
.rok-search-row--product .path{grid-column:3;grid-row:1 / span 2;align-self:start;white-space:nowrap}
@keyframes rokFadeIn{from{opacity:0}to{opacity:1}}

/* ====== PDF ON-PAGE OVERLAY (Lightbox) =================================== */
/* Scharfkantig (kein Radius), Tokens + Backdrop analog .rok-search. */
.rok-pdf{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:32px 20px;animation:rokFadeIn .15s ease}
.rok-pdf-backdrop{position:absolute;inset:0;background:rgba(11,11,12,.62);backdrop-filter:blur(6px);border:0;cursor:pointer}
.rok-pdf-panel{position:relative;width:min(1180px,100%);height:min(920px,calc(100vh - 64px));background:#fff;border:1px solid var(--rok-gray-200);box-shadow:0 36px 80px rgba(0,0,0,.32);display:flex;flex-direction:column;overflow:hidden}
.rok-pdf-toolbar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--rok-gray-200);background:#fff;overflow-x:auto;flex:0 0 auto}
.rok-pdf-title{flex:1;min-width:0;margin:0;font-size:14px;font-weight:700;color:#0b0b0c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rok-pdf-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:1px solid var(--rok-gray-200);background:#fff;color:#0b0b0c;cursor:pointer;text-decoration:none;flex:0 0 auto;transition:background .12s,color .12s}
.rok-pdf-btn:hover{background:#0b0b0c;color:#fff}
.rok-pdf-btn:focus-visible{outline:3px solid var(--rok-orange);outline-offset:2px}
.rok-pdf-btn:disabled{opacity:.45;cursor:default}
.rok-pdf-btn:disabled:hover{background:#fff;color:#0b0b0c}
.rok-pdf-page{min-width:96px;text-align:center;font-weight:700;font-size:13px;color:#0b0b0c;flex:0 0 auto}
.rok-pdf-stage{flex:1;overflow:auto;background:#f4f4f4;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.rok-pdf-canvas{display:block;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);max-width:100%}
.rok-pdf-status{margin:24px 0;padding:14px 20px;background:#fff;border:1px solid var(--rok-gray-200);color:#0b0b0c;font-size:14px}
.rok-pdf-error{margin:24px 0;padding:14px 20px;background:#fff;border:1px solid var(--rok-orange);color:#0b0b0c;font-size:14px}
.rok-pdf-error a{color:#0b0b0c;font-weight:700;text-decoration:underline}
.rok-pdf-print-root{display:none}
@media (max-width:640px){
  .rok-pdf{padding:0}
  .rok-pdf-panel{width:100vw;height:100vh;border:0}
  .rok-pdf-toolbar{flex-wrap:nowrap}
  .rok-pdf-stage{padding:12px}
}
@media print{
  body > *{visibility:hidden}
  .rok-pdf-print-root,.rok-pdf-print-root *{visibility:visible}
  .rok-pdf-print-root{display:block;position:absolute;inset:0;margin:0;padding:0}
  .rok-pdf-print-root canvas{display:block;width:100%;height:auto;page-break-after:always}
}


/* ====== MOBILE MENU (hamburger + drawer) ================================ */
.v2-burger{display:none;width:40px;height:40px;border:1px solid #e0e0e0;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;margin-left:8px}
.v2-burger:hover{background:#0b0b0c}
.v2-burger:hover .v2-burger-bar{background:#fff}
.v2-burger-bar{display:block;width:18px;height:2px;background:#0b0b0c;transition:transform .2s,opacity .15s}
.v2-burger-bar.open:nth-child(1){transform:translateY(7px) rotate(45deg)}
.v2-burger-bar.open:nth-child(2){opacity:0}
.v2-burger-bar.open:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.v2-mob-drawer{position:fixed;inset:0;z-index:1100;display:flex;animation:rokFadeIn .15s ease}
.v2-mob-backdrop{position:absolute;inset:0;background:rgba(11,11,12,.55);border:0;cursor:pointer}
.v2-mob-panel{position:relative;background:#fff;width:min(380px,90vw);height:100vh;margin-left:auto;display:flex;flex-direction:column;box-shadow:-12px 0 36px rgba(0,0,0,.22);overflow:auto;animation:rokSlideIn .22s ease}
@keyframes rokSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}

.v2-mob-list{list-style:none;margin:0;padding:24px 0 8px;flex:1 0 auto}
.v2-mob-list > li{border-bottom:1px solid var(--rok-gray-200)}
.v2-mob-list > li > a, .v2-mob-row > a{display:block;padding:18px 24px;font-family:'Roboto',sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0b0b0c;text-decoration:none;flex:1}
.v2-mob-list > li > a:hover, .v2-mob-row > a:hover{color:var(--rok-orange)}
.v2-mob-list > li > a.current, .v2-mob-row > a.current{color:var(--rok-orange)}

.v2-mob-row{display:flex;align-items:center}
.v2-mob-toggle{width:48px;height:48px;border:0;background:transparent;font-size:20px;font-weight:300;color:var(--rok-text-muted-accessible);cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.v2-mob-toggle:hover{color:var(--rok-orange);background:#fafafa}
.v2-mob-open > .v2-mob-row{background:#fafafa}
.v2-mob-open > .v2-mob-row > a{color:var(--rok-orange)}

.v2-mob-sub{list-style:none;margin:0;padding:0 0 12px;background:#fafafa}
.v2-mob-sub li a{display:flex;flex-direction:column;gap:2px;padding:10px 24px 10px 36px;color:#0b0b0c;text-decoration:none;border-left:3px solid transparent;transition:border-color .12s,background .12s}
.v2-mob-sub li a:hover{border-left-color:var(--rok-orange);background:#fff}
.v2-mob-sub-t{font-size:14px;font-weight:600}
.v2-mob-sub-s{font-size:11px;letter-spacing:.06em;color:var(--rok-text-muted-accessible);text-transform:uppercase}
.v2-mob-submorph{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--rok-dur-base) var(--rok-ease)}
.v2-mob-submorph.open{grid-template-rows:1fr}
.v2-mob-submorph > .v2-mob-sub{overflow:hidden;min-height:0;padding-bottom:0}
.v2-mob-submorph > .v2-mob-sub > li:last-child{padding-bottom:12px}

.v2-mob-cta{padding:18px 24px 28px;border-top:1px solid var(--rok-gray-200);display:flex;flex-direction:column;gap:12px;flex:0 0 auto}
.v2-mob-cta .v2-btn{text-align:center;justify-content:center}
.v2-mob-tel{color:#0b0b0c;text-decoration:none;font-size:13px;letter-spacing:.06em;font-weight:600;text-align:center;padding:8px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.v2-mob-tel svg{flex:none}

/* Nav-Umschaltpunkt bei 1100px (NICHT 900px wie die übrigen Mobil-Layout-
   regeln): die Top-Level-Nav (bes. lange DE/FR-Labels) läuft schon knapp über
   1000px in die CTA/Logo → Overlap. Bei 1100px greift der Hamburger mit ~50px
   Luft, bevor etwas kollidiert. */
@media (max-width:1100px){
  .v2-nav-links{display:none}
  .v2-burger{display:flex}
  /* Mobile-Header entstauen: der große „Händler suchen"-Button raus aus der
     Top-Leiste (bleibt im Drawer unter .v2-mob-cta erreichbar). Such-Icon
     (.v2-icon-btn) bleibt. */
  .v2-nav-cta .v2-btn{display:none}
  /* Hamburger gehört auf Mobil ganz nach rechts (Daumen-Reichweite). Der
     Burger steht im DOM vor der CTA → per order ans Ende ziehen; die
     CTA-Gruppe (Such-Icon) per margin-left:auto nach rechts schieben, sodass
     space-between aufgehoben wird und [Logo] … [Suche][Burger] entsteht. */
  .v2-nav-cta{margin-left:auto}
  .v2-burger{order:3}
}

/* Prevent stray horizontal overflow from oversized hero text on mobile */
@media (max-width:760px){
  html, body{overflow-x:hidden}
}

/* ---- Cookie notice (one-time informational banner, slim bottom bar) ---- */
.rok-cookie-notice{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:#0b0b0c;color:#f5f5f5;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -8px 24px rgba(0,0,0,.18);
  font-family:'Roboto',sans-serif;
  animation:rokCookieIn .25s var(--rok-ease) both;
}
.rok-cookie-notice-inner{
  max-width:1280px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.rok-cookie-notice-text{
  margin:0;font-size:13px;line-height:1.55;color:rgba(245,245,245,.92);
  max-width:980px;
}
.rok-cookie-notice-link{
  color:var(--rok-orange);text-decoration:underline;text-underline-offset:2px;
}
.rok-cookie-notice-link:hover{color:#fff}
.rok-cookie-notice-btn{
  flex:none;
  display:inline-flex;align-items:center;
  padding:10px 22px;background:var(--rok-orange);color:var(--rok-text-on-orange);
  font-family:'Roboto',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  border:none;cursor:pointer;transition:background .2s var(--rok-ease);
}
.rok-cookie-notice-btn:hover{background:var(--rok-orange-hover,#c94d07)}
.rok-cookie-notice-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes rokCookieIn{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@media (max-width:760px){
  .rok-cookie-notice-inner{flex-direction:column;align-items:stretch;gap:12px;padding:14px 18px}
  .rok-cookie-notice-text{font-size:12.5px}
  .rok-cookie-notice-btn{align-self:flex-end}
}


/* ---------------------------------------------------------------------------
 * Editierbare TEXT-Slots: gespeicherte Zeilenumbrüche sichtbar machen.
 *
 * Slot-Werte sind PLAIN TEXT — kein Markup. Die Bridge liest `textContent`,
 * next-intl-ICU wirft auf Tags, und /api/admin/content-doc-set sanitized
 * Richtext serverseitig weg. Ein „<br>" ist damit auf keinem Schreibpfad
 * möglich; das EINZIGE Umbruch-Mittel ist ein "\n" IM WERT.
 *
 * Ohne `pre-line` kollabiert dieses "\n" beim Rendern still zu einem
 * Leerzeichen: gespeichert, aber unsichtbar — dieselbe Fehlerklasse wie
 * „Erfolg gemeldet, Seite nie geändert". Genau das war der Footer-Befund
 * (Conv 415, 27.07.: „Werkstatt & Ersatzteile"-Adresse) und vorher schon
 * Conv-401. Bis hierher wurde es je Slot per Inline-Style geflickt (2 von
 * 37 Emittern) — jeder weitere mehrzeilige Wert wäre ein neues Ticket.
 *
 * Deshalb EINE Regel am Kind-Marker statt N Inline-Styles. `data-cms-kind`
 * unterscheidet sauber: "text" (hier), "richtext" (bringt eigenes Markup
 * mit — NICHT anfassen, sonst würden Quell-Umbrüche des HTML zu Leerzeilen),
 * "image"/"block"/"document" (kein Text).
 *
 * Regressionsrisiko vor dem Bau an der LIVE-Ausgabe gemessen (10 Seiten,
 * 691 text-Slots): KEIN einziger Slot trägt Newlines aus der Quell-
 * formatierung — alle Emitter setzen den Wert einzeilig. `pre-line` ist
 * damit überall dort ein No-Op, wo kein Umbruch im WERT steht. Gefunden
 * wurden dabei zwei Werte, die heute still kollabieren: page:26:/excerpt
 * und page:34:/excerpt.
 *
 * `pre-line` (nicht `pre-wrap`): Einrückungen/Doppelspaces aus Copy-Paste
 * sollen weiter kollabieren, nur der Umbruch zählt.
 * ------------------------------------------------------------------------ */
[data-cms-kind="text"] {
  white-space: pre-line;
}

/* Visuell verborgen, für AT weiter erreichbar — identisches Muster wie
   `.rok-sr-only` in index_category.css, hier dupliziert, weil DIESE Datei
   sitewide lädt (layout.tsx) und index_category.css nur auf Kategorie-/
   Produkt-/News-Seiten. Genutzt u.a. für den A11y-Fix heading-order auf
   /haendlersuche (WCAG-Befund 30.08.2026). */
.rok-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}