/* v2-blocks.css — Welle 5-10 Components: campaign-banner, geo-hint,
   references-list/grid, legal-stub/fallback, cert-list, service-extras.
   Folgt dem bestehenden v2-* / page-narrow / rok-* Pattern, keine
   externen UI-Libs. Wird vom Layout global geladen.

   Farben/Radien/Schatten/Motion referenzieren ausschließlich die
   --rok-* Tokens aus colors_and_type.css (keine hartkodierten Hex-Werte).
   Fein abgestimmte rem-Abstände bleiben lokal, da sie nicht auf der
   --rok-space-* Skala liegen. */

/* ------- Campaign Banner (Block 1.4) ---------------------------- */
.campaign-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1.5rem;
  background: var(--rok-notice-bg);
  border-bottom: var(--rok-border-w) solid var(--rok-notice-border);
  font-size: 0.92rem;
}
.campaign-banner--header { justify-content: center; }
.campaign-banner-image img {
  height: 28px; width: auto; border-radius: var(--rok-radius-1);
}
.campaign-banner-eyebrow {
  font-weight: var(--rok-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  color: var(--rok-notice-accent);
  margin-right: 0.4rem;
}
.campaign-banner-text { margin: 0; color: var(--rok-notice-fg); }
.campaign-banner-cta {
  color: var(--rok-notice-accent);
  text-decoration: none;
  font-weight: var(--rok-fw-medium);
  white-space: nowrap;
}
.campaign-banner-cta:hover { text-decoration: underline; }
.campaign-banner-cta .arrow { margin-left: 0.25rem; }

/* ------- Campaign Banner — footer_above (Block 1.4, Story-Design) -----
   NUR position=footer_above bekommt das neue, prominente Design: links ein
   16:9-Bild, rechts eine dunkle Typo-Box im .v2-mega-feat-Look
   (#0b0b0c + oranger Radial). Content-Breite, scharfkantig (radius 0),
   Tokens-only. home_top/header bleiben unberührt (eigene Regeln oben).
   ACHTUNG: teilt Markup mit der Admin-Vorschau (CampaignBannerView) → die
   Vorschau zeigt dasselbe Design (beabsichtigt). */
/* Live == Editor-Vorschau (.k02-fbanner): voll-breit, ~doppelte Höhe (Bildspalte
   400px → 16:9 ≈ 225px), große Italic-Headline, gespiegelte Paddings/Schriften.
   Quelle der Wahrheit ist die Editor-Vorschau in kampagnen.css. */
.campaign-banner--footer_above {
  display: grid;
  grid-template-columns: minmax(0, 400px) 1fr;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: var(--rok-container-max);
  margin: 0 auto;
  padding: 0;
  background: #0b0b0c;
  border: var(--rok-border-w, 1px) solid var(--rok-border, #e6e6e6);
  font-size: inherit;
  overflow: hidden;
}
/* Ohne Bild: keine Bildspalte → Body spannt voll, behält Banner-Höhe. */
.campaign-banner--footer_above.campaign-banner--noimg { grid-template-columns: 1fr; }
.campaign-banner--footer_above.campaign-banner--noimg .campaign-banner-body { min-height: 200px; }
.campaign-banner--footer_above .campaign-banner-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--rok-gray-150, #f2f2f2);
  overflow: hidden;
}
.campaign-banner--footer_above .campaign-banner-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.campaign-banner--footer_above .campaign-banner-body {
  position: relative;
  overflow: hidden;
  background: #0b0b0c;
  color: #fff;
  padding: 22px 30px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: center;
}
.campaign-banner--footer_above .campaign-banner-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(234, 91, 10, 0.35), transparent 60%);
  pointer-events: none;
}
.campaign-banner--footer_above .campaign-banner-eyebrow {
  position: relative;
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--rok-fw-bold, 700);
  color: var(--rok-orange);
}
.campaign-banner--footer_above .campaign-banner-h {
  position: relative;
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.05;
  color: #fff;
}
.campaign-banner--footer_above .campaign-banner-cta {
  position: relative;
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: var(--rok-fw-bold, 700);
  color: #fff;
  transition: color 0.2s;
}
.campaign-banner--footer_above .campaign-banner-cta:hover {
  color: var(--rok-orange);
  text-decoration: none;
}
.campaign-banner--footer_above .campaign-banner-cta .arrow { margin-left: 0; color: var(--rok-orange); }

@media (max-width: 720px) {
  .campaign-banner--footer_above { grid-template-columns: 1fr; }
}

/* ------- Geo-IP Hint Banner (Block 4.3) ------------------------- */
.geo-hint {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--rok-navy);
  color: var(--rok-white);
  font-size: 0.9rem;
}
.geo-hint-inner {
  max-width: var(--rok-container-max);
  margin: 0 auto;
  padding: 0.55rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.geo-hint-msg { flex: 1; min-width: 200px; }
.geo-hint-cta {
  color: var(--rok-white);
  text-decoration: underline;
  font-weight: var(--rok-fw-medium);
}
.geo-hint-cta .arrow { margin-left: 0.25rem; }
.geo-hint-dismiss {
  background: transparent;
  border: 0;
  color: var(--rok-white-a70);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.4rem;
}
.geo-hint-dismiss:hover { color: var(--rok-white); }

/* ------- Markt-/Länder-Switcher (Block 4.1) -------------------- */
/* Scharfkantig (radius 0), Tokens-only. Natives <details> als Dropdown:
   JS-frei bedienbar, tastatur-/screenreader-zugänglich. */
.v2-market-switch {
  position: relative;
  display: inline-block;
  font-size: 12px;
}
.v2-market-switch > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.v2-market-switch > summary::-webkit-details-marker { display: none; }
.v2-market-switch-caret { font-size: 9px; transition: transform .2s; }
.v2-market-switch[open] .v2-market-switch-caret { transform: rotate(180deg); }
.v2-market-switch-trigger { text-transform: uppercase; letter-spacing: .08em; }

.v2-market-switch-panel {
  position: absolute;
  z-index: 1100;
  /* Owner-Fix (2026-07-30): das Panel bekommt eine EXPLIZITE Breite.
     Vorher stand hier nur `min-width`/`max-width` — ein absolut positioniertes
     Element ohne `width` wird aber „shrink-to-fit" und fällt auf seine
     MIN-CONTENT-Breite zurück, weil der enthaltende Block (`.v2-market-switch`,
     ein winziges inline-block) fast keine Breite anbietet. Gemessen: 428px
     Panel bei 1440px Viewport ⇒ bei `columns: 3` nur 111px pro Spalte —
     exakt die Breite, die „Deutschland DE EN" und „Großbritannien EN"
     brauchen. Deshalb brach ausgerechnet der Heimatmarkt zweizeilig um.
     `max-width` konnte das nie heilen: es deckelt nur, es fordert nichts.
     Mit `width` fordert das Panel den Platz aktiv an; `max-width` bleibt als
     Viewport-Schutz stehen. */
  width: min(92vw, 380px);
  min-width: 240px;
  max-width: 92vw;
  /* Kein künstlicher Deckel mehr: das Panel soll sich so weit entfalten, wie
     der Bildschirm es hergibt, und NUR scrollen, wenn der Platz wirklich nicht
     reicht. Vorher kappte `60vh` schon bei 60% der Fensterhöhe.
     `dvh` statt `vh`, weil auf Mobil die sichtbare Höhe mit der ein-/aus-
     blendenden Browserleiste springt; die vh-Zeile bleibt als Fallback. */
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  background: var(--rok-white);
  color: var(--rok-ink);
  /* Owner-Fix (2026-07-29): Panel-Outline raus — die Abgrenzung zum
     Hintergrund trägt jetzt allein `box-shadow` (siehe unten). Die
     Trennlinien ZWISCHEN den Länderzeilen (`.v2-market-switch-market`
     border-top/-bottom, `--rok-orange-tint`) sind eine andere Regel und
     bleiben unangetastet. */
  border: 0;
  border-radius: var(--rok-radius-0);
  box-shadow: var(--rok-shadow-lg);
  padding: 14px 16px;
}
/* Header (Topbar oben rechts): Panel klappt nach unten, rechtsbündig. */
.v2-market-switch--header .v2-market-switch-panel { top: calc(100% + 8px); right: 0; }
/* Footer (Footer-Bottom): Panel klappt nach oben, linksbündig. */
.v2-market-switch--footer .v2-market-switch-panel { bottom: calc(100% + 8px); left: 0; }

.v2-market-switch-heading {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: var(--rok-fw-medium);
  color: var(--rok-navy);
}
.v2-market-switch-list { list-style: none; margin: 0; padding: 0; }
/* 26 Märkte passen einspaltig auf keinen Bildschirm. Ab genug Breite deshalb
   mehrspaltig — dann entfaltet sich die Liste vollständig, statt zu scrollen.
   Unter 900px (Mobil/Portrait-Tablet) bleibt es einspaltig.

   Owner-Fix (2026-07-30, zweite Runde): der Abstand zwischen Ländername und
   Sprachkürzel soll etwa halbiert werden. Dieser Abstand ist NICHT die `gap`
   der Zeile — die ist nur ein Minimum. Sichtbar ist der Freiraum, den
   `justify-content: space-between` in einer zu breiten Spalte aufreißt.
   Eine global schmalere Spalte scheidet aus: gemessen reicht die längste
   Zeile von 121px (dänisch „Storbritannien EN") bis 283px (kroatisch
   „Sjedinjene Američke Države EN ES FR"). Was für Deutsch eng wäre, würde
   Kroatisch abschneiden.

   Deshalb `columns` (Spalten füllen die Breite) → Grid mit
   `minmax(200px, max-content)`: jede Spalte wird nur so breit wie ihre
   LÄNGSTE ZEILE, mindestens aber 200px, damit es nicht gedrängt wirkt. Der
   Abstand folgt damit dem Inhalt der jeweiligen Sprache statt einer festen
   Panelbreite. Das Panel misst sich per `width: max-content` daran aus.

   `grid-auto-flow: column` + feste Zeilenzahl füllt spaltenweise (wie vorher
   `columns`). Die Zeilenzahl ist an 25 Märkte angepasst (⌈25/3⌉ = 9 bzw.
   ⌈25/2⌉ = 13); kommen Märkte dazu, legt Grid automatisch eine weitere
   Spalte an — bei mehr als 27 lohnt ein Blick, ob die Zeilenzahl mitwachsen
   soll. `overflow-x` des Panels fängt den Grenzfall ab. */
@media (min-width: 900px) {
  .v2-market-switch-panel { width: max-content; max-width: min(92vw, 840px); }
  .v2-market-switch-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(13, auto);
    grid-auto-columns: minmax(200px, max-content);
    column-gap: 48px;
  }
  /* In mehrspaltiger Darstellung trägt das erste Element JEDER Spalte oben
     eine Trennlinie — die Regel `:first-child { border-top: 0 }` greift nur
     für das allererste. Linie deshalb nach unten verlegen. */
  .v2-market-switch-list .v2-market-switch-market { border-top: 0; border-bottom: var(--rok-border-w) solid var(--rok-orange-tint); }
  .v2-market-switch-list .v2-market-switch-market:last-child { border-bottom: 0; }
}
@media (min-width: 1300px) {
  .v2-market-switch-panel { max-width: min(94vw, 1240px); }
  .v2-market-switch-list { grid-template-rows: repeat(9, auto); }
}
/* Eine Länderzeile ist ab jetzt per Kontrakt EINZEILIG: Land und Sprachkürzel
   stehen nebeneinander, nie untereinander. `nowrap` auf beiden Seiten macht
   das zur Zusage statt zum Zufall — die Spalten oben messen sich am Inhalt,
   die längste Zeile passt also per Konstruktion. */
.v2-market-switch-market {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-top: var(--rok-border-w) solid var(--rok-orange-tint);
}
.v2-market-switch-market:first-child { border-top: 0; }
/* Wenn der Platz doch einmal nicht reicht (gemessener Extremfall: rumänisch
   „Statele Unite ale Americii" + EN ES FR im 320px-Drawer), gibt der LÄNDERNAME
   nach, nie die Sprachkürzel — die sind die Links. Ellipse statt Umbruch hält
   die Einzeiligkeit auch dort, und der volle Name steht weiter im `title`
   des Zeileninhalts bzw. im zugänglichen Namen der Sprachlinks. */
.v2-market-switch-country {
  color: var(--rok-ink);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-market-switch-market.is-current .v2-market-switch-country {
  color: var(--rok-orange);
  font-weight: var(--rok-fw-medium);
}
.v2-market-switch-market.is-dormant .v2-market-switch-country { opacity: .55; }
.v2-market-switch-langs {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 14px;
  justify-content: flex-end;
  /* Die Kürzel sind die Klickziele — sie schrumpfen nie. */
  flex: 0 0 auto;
}
/* Sehr schmale Geräte: Abstände zusammenziehen, damit die Ellipse oben erst
   spät greift. Reine Verdichtung, keine andere Struktur. */
@media (max-width: 480px) {
  .v2-market-switch-market { gap: 12px; }
  .v2-market-switch-langs { gap: 10px; }
}
/* Panel-scoped (höhere Spezifität, kein !important): Die kontextweiten Anker-
   Regeln (weiße Topbar-Links, gedämpfte Footer-Top-Links)
   (je 0,1,1) übersteuerten sonst die Sprachlinks im stets WEISSEN Panel →
   weiß/hellgrau auf weiß = unsichtbar und faktisch nicht klickbar (Header +
   Footer). `.v2-market-switch-panel .v2-market-switch-lang` = 0,2,0 gewinnt in
   beiden Hüllen; `opacity:1` neutralisiert die Topbar-Abdunklung. */
.v2-market-switch-panel .v2-market-switch-lang { color: var(--rok-link); opacity: 1; text-decoration: none; }
.v2-market-switch-panel .v2-market-switch-lang:hover { color: var(--rok-link-hover); text-decoration: underline; }
.v2-market-switch-panel .v2-market-switch-lang.is-disabled { color: var(--rok-navy); opacity: .5; cursor: default; }
/* `.v2-market-switch-soon` („BALD VERFÜGBAR") ist am 2026-07-30 ersatzlos
   entfallen — Owner-Ansage: kein Status, keine Ankündigung. Die Ausgrauung
   (`.is-disabled`, `.is-dormant`) sagt bereits alles Nötige. */

/* Topbar-Hülle: Switcher + LocaleSwitcher in einer Zeile. */
.v2-topbar-switchers { display: inline-flex; align-items: center; }
/* Mobil (≤900px, analog Burger-Breakpoint): Sprach-/Länderwahl ist in den
   Drawer verlagert → Topbar-Switcher ausblenden. Hier (statt index.css), weil
   die Basis-Regel oben in DIESER Datei steht und sonst per Quelltext-Reihen-
   folge gewinnt (gleiche Spezifität, Media-Query zählt nicht). */
@media (max-width: 900px) { .v2-topbar-switchers { display: none; } }
.v2-topbar-switchers .v2-market-switch > summary { color: var(--rok-white); opacity: .85; }
.v2-topbar-switchers .v2-market-switch > summary:hover { opacity: 1; color: var(--rok-orange); }
/* Footer-Variante: heller Trigger auf dunklem Footer. */
.v2-market-switch--footer > summary { color: var(--rok-white); opacity: .8; }
.v2-market-switch--footer > summary:hover { opacity: 1; color: var(--rok-orange); }

/* Mobile-Variante: lebt INNERHALB der Mobil-Navigation (Drawer als `<li>` in
   `.v2-mob-list`). Reines CSS-Hüllen-Override (gleiche Klassen): Panel klappt
   INLINE auf (kein Overlay), volle Breite, ohne eigene Border/Schatten — die
   Drawer-Zeile rahmt bereits. Trigger ist optisch eine Drawer-Zeile
   (Großbuchstaben, Padding wie `.v2-mob-list > li > a`). */
.v2-market-switch--mobile { display: block; width: 100%; font-size: 14px; }
.v2-market-switch--mobile > summary {
  width: 100%;
  justify-content: space-between;
  padding: 18px 24px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rok-night);
}
.v2-market-switch--mobile > summary:hover { color: var(--rok-orange); }
.v2-market-switch--mobile[open] > summary { color: var(--rok-orange); }
.v2-market-switch--mobile .v2-market-switch-panel {
  position: static;
  min-width: 0;
  width: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--rok-gray-50);
  padding: 4px 24px 16px;
}
/* Überschrift im Panel ist im Drawer redundant (der Trigger sagt es bereits). */
.v2-market-switch--mobile .v2-market-switch-heading { display: none; }

/* ------- References Hub + Cards (Block 3.4) --------------------- */
.references-page .page-narrow-hero { margin-bottom: 2rem; }
.references-group { margin: 2.5rem 0; }
.references-group h2 {
  font-size: 1.05rem;
  letter-spacing: var(--rok-tracking-wide);
  text-transform: uppercase;
  color: var(--rok-fg-muted);
  margin: 0 0 1rem;
}
.references-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.references-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--rok-white);
  border: var(--rok-border-w) solid var(--rok-border);
  border-radius: var(--rok-radius-2);
  overflow: hidden;
  transition: box-shadow var(--rok-dur-base) var(--rok-ease);
}
.references-card:hover { box-shadow: var(--rok-shadow-md); }
.references-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--rok-gray-150);
}
.references-card-img--blank {
  display: block;
  background: linear-gradient(135deg, var(--rok-gray-150) 0%, var(--rok-gray-200) 100%);
}
.references-card-body { padding: 1rem; }
.references-card-body h3 { margin: 0 0 0.35rem; font-size: 1rem; line-height: var(--rok-lh-snug); }
.references-card-body p { margin: 0; color: var(--rok-fg-muted); font-size: 0.88rem; line-height: 1.4; }
.references-empty {
  margin: 2rem 0;
  padding: 2rem 1.5rem;
  text-align: center;
  border: var(--rok-border-w) dashed var(--rok-border);
  border-radius: var(--rok-radius-2);
  color: var(--rok-fg-muted);
}

/* Reference Detail */
.reference-page .reference-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--rok-ink);
  margin-bottom: 2rem;
  border-radius: var(--rok-radius-2);
  overflow: hidden;
  /* Bezugsrahmen für die absolut gesetzte .video-facade (index_product.css) —
     ohne ihn ankert der Consent-Button am Viewport statt am Hero. */
  position: relative;
}
.reference-page .reference-video iframe {
  width: 100%; height: 100%; border: 0;
}
.reference-page .reference-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--rok-radius-2);
  margin-bottom: 2rem;
}
.reference-body { font-size: 0.97rem; line-height: 1.65; }

/* ------- Legal Pages — Stub & Fallback (Block 4.5) -------------- */
.legal-page .page-narrow-hero { margin-bottom: 1.5rem; }
.legal-page .legal-fallback-hint {
  background: var(--rok-notice-bg);
  border: var(--rok-border-w) solid var(--rok-notice-border);
  border-radius: var(--rok-radius-2);
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  color: var(--rok-notice-fg);
  margin-top: 0.8rem;
}
.legal-stub {
  margin: 2rem 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: var(--rok-border-w) dashed var(--rok-border);
  border-radius: var(--rok-radius-2);
  color: var(--rok-fg-muted);
}
.legal-body {
  font-size: 0.97rem;
  line-height: 1.65;
}
.legal-body h2 { margin: 1.8rem 0 0.6rem; font-size: 1.15rem; }
.legal-body p { margin: 0 0 0.9rem; }

/* ------- Certificates Page (PDF Phase 2.2-B) -------------------- */
.cert-list { margin: 1.5rem 0 3rem; }
.cert-list .muted { color: var(--rok-fg-muted); font-style: italic; }

/* ------- Service Extras (PDF Phase 2.2-B) ----------------------- */
.service-extras {
  margin: 2.5rem auto;
  max-width: var(--rok-container-max);
  padding: 0 1.5rem;
}
.service-extras h2 {
  font-size: 1.05rem;
  letter-spacing: var(--rok-tracking-wide);
  text-transform: uppercase;
  color: var(--rok-fg-muted);
  margin: 0 0 1rem;
}

/* ------- page-narrow Container (falls noch nicht im index.css) --- */
.page-narrow {
  max-width: 880px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}
.page-narrow-hero {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--rok-border-w) solid var(--rok-border);
}
.page-narrow-hero .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rok-fg-muted);
  margin-bottom: 0.4rem;
}
.page-narrow-hero h1 {
  font-size: 2rem;
  line-height: var(--rok-lh-tight);
  margin: 0 0 0.7rem;
}
.page-narrow-hero p {
  font-size: 1.02rem;
  color: var(--rok-fg-muted);
  max-width: 60ch;
  margin: 0;
}

/* Suche-Filter (Angebot 2.3) — hier statt in der Legacy-index.css, damit der
   Watchdog nur diese token-basierten Regeln scannt, nicht die ganze WP-CSS. */
.rok-search-filters{display:flex;flex-wrap:wrap;gap:10px 14px;padding:12px 22px;border-bottom:1px solid var(--rok-gray-200);background:var(--rok-gray-100)}
.rok-search-filter{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 160px}
.rok-search-filter-l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--rok-gray-500)}
.rok-search-select{appearance:none;-webkit-appearance:none;font:inherit;font-size:13px;color:var(--rok-ink);background:var(--rok-white);border:1px solid var(--rok-gray-200);border-radius:var(--rok-radius-0);padding:8px 10px;cursor:pointer;width:100%}
.rok-search-select:focus{outline:0;border-color:var(--rok-orange)}

/* ============================================================
   NewsletterBand — globale Anmeldefläche über dem Footer
   (Shell rendert sie default auf jeder Seite; News-Flächen
   tragen ihre eigene .news-letter-Sektion und opten aus).
   Design gespiegelt von .news-letter (index_news.css), aber
   eigenständige Klassen + hier global geladen, damit das Band
   auf ALLEN Seiten korrekt aussieht.
   ============================================================ */
.nl-band{background:var(--rok-night);color:var(--rok-white);padding:96px 0;position:relative;overflow:hidden}
.nl-band-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center;position:relative;z-index:1}
.nl-band-copy .v2-eyebrow{color:var(--rok-white-a50)}
.nl-band h2{
  font-family:'Roboto',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(34px,4.4vw,64px);line-height:.95;letter-spacing:-.02em;margin:14px 0 20px;color:var(--rok-white);
}
.nl-band h2 .thin{font-weight:200;font-style:normal;color:var(--rok-white-a50)}
.nl-band p{font-size:16px;line-height:1.6;color:var(--rok-white-a70);margin:0;max-width:480px}
.nl-band-form .row{display:flex;background:var(--rok-white-a06);border:1px solid var(--rok-white-a15);padding:6px}
.nl-band-form .row:focus-within{border-color:var(--rok-white)}
.nl-band-form input{flex:1;border:0;background:transparent;padding:14px 18px;color:var(--rok-white);font:inherit;font-size:15px;outline:none;min-width:0}
.nl-band-form input::placeholder{color:var(--rok-white-a40)}
.nl-band-form button{
  background:var(--rok-orange);color:var(--rok-text-on-orange);border:0;padding:0 28px;cursor:pointer;white-space:nowrap;
  font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.nl-band-form button:hover{background:var(--rok-white);color:var(--rok-night)}
.nl-band-form .tiny{font-size:11.5px;color:var(--rok-white-a50);margin-top:10px}
.nl-band-form .tiny a{color:var(--rok-white);text-decoration:underline}
.nl-band-form .nl-ok{
  margin-top:16px;background:var(--rok-orange);color:var(--rok-text-on-orange);padding:12px 16px;
  font-size:13px;font-weight:600;letter-spacing:.04em;
}
.nl-band-form .nl-ok strong{margin-right:6px}
.nl-band-form .nl-err{
  margin-top:16px;background:var(--rok-danger);color:var(--rok-white);padding:12px 16px;
  font-size:13px;font-weight:600;letter-spacing:.04em;
}
.nl-band-form .nl-err strong{margin-right:6px}
@media (max-width:1100px){
  .nl-band{padding:72px 0}
  /* minmax(0,1fr) statt 1fr: sonst geht die Spalte bei ~320px auf die
     min-content-Breite des Inhalts auf (Grid-Blowout) und das Anmelde-
     Formular inkl. Button wird von .nl-band{overflow:hidden} abgeschnitten
     (WCAG 1.4.10). minmax(0,…) erlaubt Schrumpfen unter min-content. */
  .nl-band-inner{grid-template-columns:minmax(0,1fr);gap:36px}
}

/* =====================================================================
   NEWSLETTER-FILL-CARD — visuelle Basis (global).
   Füllt eine leere Grid-Zelle mit einer Newsletter-Anmeldebox im Mega-Menü-
   Look (schwarz + radialer Orange-Gradient, eckig, AA-Kontrast). Genutzt von
   den .cat-grid-Rastern (PDP/Kategorie) UND der Social-Wall auf der Home-Page.
   Diese Box/Form/Typo-Regeln lagen bis 2026-07-14 in index_category.css; sie
   sind hierher (global) gezogen, damit die Karte auch außerhalb der Kategorie-
   Seiten korrekt aussieht. Die .cat-grid-spezifischen Span/Sichtbarkeits-Regeln
   bleiben in index_category.css.
   ===================================================================== */
.nl-fill-card{
  background:var(--rok-night);color:var(--rok-white);padding:32px;position:relative;overflow:hidden;border-radius:0;
  display:flex;flex-direction:column;gap:14px;justify-content:center;min-height:100%;
}
.nl-fill-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(234,91,10,.35),transparent 60%); /* watchdog-allow: token-guard dekorativer Orange-Glow; kein Alpha-Orange-Token vorhanden, Parität mit .cat-grid-Karte */
}
.nl-fill-card > *{position:relative;z-index:1}
.nl-fill-card .eyb{font-family:'Roboto',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--rok-orange)}
.nl-fill-card h3{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:var(--rok-white)}
.nl-fill-card .body{font-size:13px;line-height:1.55;color:var(--rok-white-a70);margin:0;max-width:46ch}
.nl-fill-card form{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.nl-fill-card .nl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nl-fill-card .row{display:flex;background:var(--rok-white-a06);border:1px solid var(--rok-white-a15);padding:5px}
.nl-fill-card .row:focus-within{border-color:var(--rok-white)}
.nl-fill-card input[type=email]{flex:1;min-width:0;border:0;background:transparent;padding:12px 14px;color:var(--rok-white);font:inherit;font-size:15px;outline:none}
.nl-fill-card input[type=email]::placeholder{color:var(--rok-white-a50)}
.nl-fill-card button[type=submit]{flex:0 0 auto;border:0;background:var(--rok-orange);color:var(--rok-text-on-orange);font-family:'Roboto',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;padding:0 18px;cursor:pointer;transition:background .2s}
.nl-fill-card button[type=submit]:hover{background:var(--rok-orange-hover)}
.nl-fill-card button[type=submit]:disabled{opacity:.6;cursor:default}
.nl-fill-card .consent{font-size:11px;line-height:1.5;color:var(--rok-white-a50);margin:0}
.nl-fill-card .consent a{color:var(--rok-white);text-decoration:underline}
.nl-fill-card .nl-ok,.nl-fill-card .nl-err{font-size:12px;line-height:1.5;margin:6px 0 0}
.nl-fill-card .nl-ok{color:var(--rok-white)}
.nl-fill-card .nl-ok strong{color:var(--rok-orange)}
.nl-fill-card .nl-err{color:#ffd2c2} /* watchdog-allow: token-guard Fehler-Text-Peach auf dunkler Karte; kein Token, Parität mit .cat-grid-Karte */
.nl-fill-card .nl-err strong{color:var(--rok-white)}
.nl-fill-card .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}

/* Social-Wall-Sonderfall: die Fill-Card trägt inline `grid-column:span 2`
   (Rest-Lücke der 3-Spalten-Reihe). Bei ≤560px wird .v2-palette-grid 1-spaltig
   → span 2 würde eine implizite 2. Spalte erzeugen (Grid-Blowout/Overflow,
   WCAG 1.4.10). Volle Zeile erzwingen; schlägt das inline-Style, daher !important. */
@media (max-width:560px){
  .v2-palette-grid > .nl-fill-card{grid-column:1 / -1 !important}
}

/* =====================================================================
   Kampagnen Landing Page — Lauftext-Lesebreite. Produkt + Zubehör nutzen
   jetzt die LIVE-Bausteine der Website (.cat-card/.cat-grid.list-view +
   renderAccessoriesSectionHtml/.pdp-accessories), NICHT mehr bespoke Markup
   — siehe CampaignLandingView. Das frühere .campaign-lp(-product/-acc/-eyebrow)
   Story-Raster wurde entfernt (war nirgends live).
   ===================================================================== */
.campaign-lp-body {
  max-width: 68ch;
}
.campaign-lp-body p {
  margin: 0 0 1.1rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--rok-navy, #3d444e);
}
.campaign-lp-body p:last-child { margin-bottom: 0; }
/* Redaktionelle Einleitungs-Headline (CMS-Stil) ÜBER dem Lauftext. */
.campaign-lp-headline { max-width: 68ch; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }
.campaign-lp-headline-h {
  margin: 0;
  font-size: clamp(1.5rem, 3.5vw, var(--rok-fs-2xl));
  font-weight: var(--rok-fw-bold); line-height: 1.18; letter-spacing: -0.01em;
  color: var(--rok-navy);
}
/* Hero-CTA-Reihe: primärer Kampagnen-CTA + „Vertriebspartner kontaktieren". */
.campaign-lp-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-self: flex-start; }
/* Händlersuche-Sektion: Scroll-Ziel des „Vertriebspartner kontaktieren"-Buttons —
   Offset, damit der Anker nicht unter dem fixierten Header landet. */
.campaign-lp-dealer { scroll-margin-top: 80px; }

/* =====================================================================
   Kampagnen Landing — HERO im echten Website-Grid (ersetzt das dünne
   .page-narrow-hero). Full-bleed, fette 900/italic/uppercase-Headline mit
   orangem ersten Wort (.ro) wie .v2-slide-h, Bild + dunkler Verlauf.
   ===================================================================== */
.campaign-lp-hero {
  position: relative;
  display: flex;
  min-height: min(70vh, 720px);
  overflow: hidden;
  background: var(--rok-night);
}
.campaign-lp-hero-media { position: absolute; inset: 0; z-index: 1; }
.campaign-lp-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.campaign-lp-hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  /* watchdog-allow: token-guard Dunkler Lesbarkeits-Verlauf mit variabler Alpha (night) — spiegelt das etablierte .v2-slide-left-Hero-Overlay; kein --rok-Token fuer night-mit-Alpha */
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.9) 0%, rgba(11, 11, 12, 0.6) 50%, rgba(11, 11, 12, 0.2) 85%);
}
/* Mehrbild-Slideshow: gestapelte Slides, Auto-Crossfade (wie Startseiten-Hero). */
.campaign-lp-hero-slide {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.7s var(--rok-ease, ease);
}
.campaign-lp-hero-slide.is-active { opacity: 1; }
/* Dots — scharfkantig, über dem Verlauf. */
.campaign-lp-hero-dots {
  position: absolute; z-index: 3; left: clamp(2rem, 6vw, 5rem); bottom: 22px;
  display: flex; gap: 8px;
}
.campaign-lp-hero-dot {
  width: 26px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: var(--rok-white); opacity: 0.4; transition: opacity 0.15s;
}
.campaign-lp-hero-dot:hover { opacity: 0.75; }
.campaign-lp-hero-dot.is-active { background: var(--rok-orange); opacity: 1; }
.campaign-lp-hero-noimg { position: absolute; inset: 0; z-index: 1; }
.campaign-lp-hero-noimg::after {
  content: ""; position: absolute; inset: 0;
  /* watchdog-allow: token-guard Oranger Radial-Akzent mit Alpha — identische Kampagnen-Signatur wie .campaign-lp-product-media::after in dieser Datei; kein --rok-Token fuer orange-mit-Alpha */
  background: radial-gradient(circle at 100% 0%, rgba(234, 91, 10, 0.3), transparent 60%);
}
/* Wie im Startseiten-Hero (index.css, .v2-slide-left): der Kasten traegt den
   Platz UND den Lesbarkeits-Verlauf, also waechst er mit. 1240px statt 1000px
   geben der Headline auf breiten Schirmen rund 1080px Textbreite; die
   Fit-Rechnung unten nutzt davon nur, was der Text braucht.
   `container-type: inline-size` macht `100cqi` zur Textbreite. */
.campaign-lp-hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: min(1240px, 100%);
  container-type: inline-size;
  padding: clamp(2rem, 6vw, 5rem);
}
.campaign-lp-hero-kicker {
  display: flex; align-items: center; gap: 16px; margin-bottom: 28px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--rok-white);
}
.campaign-lp-hero-kicker .dash { width: 40px; height: 1px; background: var(--rok-orange); }
/* Dieselbe Fit-Rechnung wie `.v2-slide-h` (index.css) — dort steht die
   ausfuehrliche Begruendung. `--hl-em` liefert `CampaignLandingView` aus dem
   echten Titel; `clamp(...)` bleibt der Deckel, also aendert sich an kurzen
   Titeln nichts. Die erste `font-size` ist der Rueckfall ohne cqi-Support. */
.campaign-lp-hero-h {
  margin: 0 0 24px;
  font-weight: 900; font-style: italic; text-transform: uppercase;
  --hl-cap: clamp(2.5rem, 7vw, 6.5rem);
  font-size: var(--hl-cap);
  font-size: min(var(--hl-cap), calc(100cqi / var(--hl-em, 6.83)));
  line-height: 0.92; letter-spacing: -0.02em; color: var(--rok-white);
  overflow-wrap: break-word; /* lange dt. Komposita im Hero nicht überlaufen lassen */
}
.campaign-lp-hero-h .ro { color: var(--rok-orange); }
.campaign-lp-hero-sub {
  margin: 0 0 36px; max-width: 540px;
  font-size: 1.0625rem; line-height: 1.55; font-weight: 300;
  /* watchdog-allow: token-guard Weiss mit Alpha fuer Hero-Subtext auf Dunkel — spiegelt .v2-slide p; kein --rok-Token fuer white-mit-Alpha */
  color: rgba(255, 255, 255, 0.72);
}
.campaign-lp-hero-inner .v2-btn { align-self: flex-start; }

/* Inhalt unter dem Hero — zentrierte Lese-Breite (ersetzt .page-narrow). */
.campaign-lp-wrap {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
@media (max-width: 720px) {
  .campaign-lp-hero { min-height: 58vh; }
}