/* ═══════════════════════════════════════════════════════════════════════════
   LOHR OBERFLÄCHENTECHNIK — theme.css
   Markenschicht über dem SSI Endoskeleton. base.css bleibt unberührt.

   GESTALTUNGSIDEE — "Das Spektrum ist das Sortiment"
   Der Farbverlauf aus der Markenvorlage ist hier kein Dekor, sondern die
   Ordnung des Katalogs: die vier Produktbereiche liegen in derselben Folge
   auf dem Verlauf wie im Streifen selbst.
       Pulverlacke   → Rot    (Verlauf   0 %)
       Lackzubehör   → Ocker  (Verlauf  37 %)
       Maskierungen  → Grün   (Verlauf  65 %)
       Messgeräte    → Blau   (Verlauf 100 %)
   Der Grund bleibt neutral (Logo-Schwarz auf Warmweiß) — Farbe gehört der
   Ware, nicht der Oberfläche.

   KONTRAST-REGEL (wichtig!)
   Die reinen Verlaufsfarben sind als Text unbrauchbar: Gelb #d2c322 auf Weiß
   erreicht nur 1,8:1. Deshalb zwei Sätze:
       --spektrum-*  reine Verlaufsfarben, NUR für den Verlaufsstreifen
                     und für Flächen auf dunklem Grund
       --kat-*       abgedunkelte Partner, geprüft ≥ 4,5:1 auf Weiß,
                     für Text, Icons, Linien und Rahmen
   Farbe ist nie alleiniger Bedeutungsträger — jeder Bereich trägt zusätzlich
   Bezeichnung und Icon.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Schriften kommen aus fonts/lohr.css und liegen lokal auf dem Server.
   Bewusst kein @import von fonts.googleapis.com: das würde bei jedem
   Seitenaufruf die IP-Adresse der Besucher an Google übertragen. */

/* ─── 1. MARKEN-TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Verlauf — exakt aus Farbstreifen.pdf abgegriffen */
  --spektrum-rot:    #b11f1f;
  --spektrum-gelb:   #d2c322;
  --spektrum-gruen:  #498548;
  --spektrum-blau:   #287ba2;
  --spektrum: linear-gradient(
    90deg,
    var(--spektrum-rot)    0%,
    var(--spektrum-gelb)  37%,
    var(--spektrum-gruen) 65%,
    var(--spektrum-blau) 100%
  );

  /* Kontraststarke Partner für Text/Icons/Linien (Prüfwerte auf #ffffff) */
  --kat-pulverlacke:  #a01d1d;  /*  7,4:1 */
  --kat-lackzubehoer: #7d6a10;  /*  5,2:1 */
  --kat-maskierungen: #3a6b39;  /*  6,2:1 */
  --kat-messgeraete:  #22688a;  /*  6,1:1 */

  /* Logo-Farben, direkt aus Logo_2026.pdf */
  --logo-tinte: #1a1a18;
  --logo-grau:  #d9dada;
}

/* ─── 2. SEMANTISCHE ZUORDNUNG (überschreibt base.css) ──────────────────── */
:root {
  --primary:         #1a1a18;
  --primary-dark:    #000000;
  --primary-light:   #4a4a45;
  --primary-rgb:     26, 26, 24;

  --bg:              #ffffff;
  --bg-alt:          #f4f3f0;   /* warmes Neutral, passend zum Logo-Grau */
  --bg-dark:         #16150f;

  --text:            #33322c;   /* 11,4:1 auf Weiß */
  --text-muted:      #5d5c55;   /*  6,6:1 auf Weiß */
  --text-light:      #46453f;
  --text-on-primary: #ffffff;
  --heading:         var(--logo-tinte);

  --border:          rgba(26, 26, 24, 0.14);
  --card-bg:         #ffffff;
  --shadow:          rgba(22, 21, 15, 0.10);
  --focus:           var(--spektrum-blau);

  --font-heading: 'Outfit', 'Barlow', system-ui, sans-serif;
  --font-nav:     'Outfit', 'Barlow', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;
}

/* ─── 3. TYPOGRAFIE ─────────────────────────────────────────────────────── */
/* Outfit ersetzt die Hausschrift „Now" (geometrische Sans, nicht frei
   lizenziert). Barlow trägt die Lauftexte — schmaler, für Datenblätter und
   Formulare ruhiger zu lesen als eine durchgehende Geometrische. */

h1, h2, h3, h4,
.hero-title,
.section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.section-title {
  text-wrap: balance;
}

/* Marken-Eigenheit aus dem Logo: gesperrte Versalien als Auszeichnung */
.section-tag,
.kat-label,
.nav-links a,
.banner-label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 500;
}

/* layouts/modern.css setzt die Dachzeile als abgerundete Pille. Das passt
   nicht zu einer Marke, deren Logo und Buttons durchgehend scharfkantig
   sind — hier zurück auf reine Schrift. Klasse .layout-modern mitgeführt,
   sonst gewinnt das Layout-Modul über die höhere Spezifität. */
.layout-modern .section-tag,
.section-tag {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  background: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--space-md);
  letter-spacing: 0.18em;
}

/* Auch hier gegen layouts/modern.css (dort fs-lg und 45rem breit).
   58 Zeichen halten die Zeile im gut lesbaren Bereich. */
.layout-modern .section-lead,
.section-lead {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-light);
  max-width: 58ch;
}

.mx-auto.section-lead { margin-inline: auto; }

/* Sprungziele nicht unter die fixe Navigation rutschen lassen */
html { scroll-padding-top: calc(var(--nav-height) + 1.5rem); }

/* ─── 4. VERLAUFSSTREIFEN ───────────────────────────────────────────────── */
/* Das Markenzeichen. Rein dekorativ, deshalb aria-hidden im Markup. */
.spektrum-leiste {
  height: 0.375rem;
  background: var(--spektrum);
  flex: none;
}

.spektrum-leiste--fein { height: 0.25rem; }

/* Über der Navigation klebend, damit der Streifen beim Scrollen bleibt */
.spektrum-leiste--kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1001;
}

/* ─── 5. NAVIGATION ─────────────────────────────────────────────────────── */
/* Abweichung von der Vorlage, bewusst: dort steht weiße Navigationsschrift
   direkt auf dem Verlauf — über dem gelben Abschnitt sind das rund 1,8:1 und
   damit unlesbar. Der Streifen bleibt als Marke erhalten, die Schrift wandert
   auf weißen Grund. */
.site-nav {
  top: 0.375rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(0.75rem);
  border-bottom: 1px solid var(--border);
}

/* Die Wortmarke ist breit und flach — bei 2rem wird „OBERFLÄCHENTECHNIK"
   unleserlich. Zwei Dateien, weil dieser Teil je nach Grund die Farbe
   wechseln muss: img/logo.svg (schwarz) für hellen Untergrund,
   img/logo-light.svg (weiß) für dunklen. „LOHR" bleibt in beiden im
   Original-Hellgrau. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  /* Das Logo ist auch der Weg nach oben — Trefferfläche für den Daumen */
  min-height: 2.75rem;
}

.nav-logo img {
  height: 2.25rem;
  width: auto;
}

.nav-links a {
  font-size: var(--fs-xs);
  color: var(--text);
  position: relative;
  padding-block: 0.35rem;
}

/* Der Verlauf als Unterstreichung — wächst aus der Mitte */
.nav-links a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0.125rem;
  background: var(--spektrum);
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-links a.active { color: var(--heading); }

/* ─── 6. HERO-BILDSTRECKE ───────────────────────────────────────────────── */
/* Die Panoramaaufnahmen liegen übereinander und werden ineinander geblendet
   (Modul bildwechsler, data-auto). Überblenden statt Schieben, weil die
   Bilder sehr breit und ruhig sind — ein Schub würde nur unruhig wirken.
   Wischen blättert zusätzlich von Hand. */
.hero-slider {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 66vh, 42rem);
  /* base.css gibt jedem <section> Innenabstand — der Hero ist randlos */
  padding: 0;
}

.hero-spur {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  /* Entscheidend fürs Handy: senkrecht scrollen bleibt dem Browser
     überlassen, nur die waagrechte Geste gehört der Bildstrecke. */
  touch-action: pan-y;
}

.bildwechsler--bereit .hero-spur { cursor: grab; }
.bildwechsler--zieht  .hero-spur { cursor: grabbing; }

.hero-slide {
  grid-area: 1 / 1;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
  /* Bild nicht versehentlich als Datei aus der Seite ziehen */
  user-select: none;
  -webkit-user-drag: none;
}

.hero-slide.is-aktiv { opacity: 1; }

/* Liegt nur ein Bild vor, blendet nichts — es steht einfach da. */
.bildwechsler--einzeln .hero-slide { opacity: 1; }

/* Lesbarkeit der Schrift sicherstellen, unabhängig vom Bildinhalt */
.hero-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(12, 12, 10, 0.90) 0%,
    rgba(12, 12, 10, 0.70) 46%,
    rgba(12, 12, 10, 0.34) 100%
  );
}

.hero-slider .hero-content {
  position: relative;
  z-index: 2;
  /* durchgreifen lassen, damit über dem Text ebenso gewischt werden kann */
  pointer-events: none;
  width: min(100% - 2 * var(--space-lg), var(--max-width));
  margin-inline: auto;
  padding-block: var(--space-3xl);
}

.hero-slider .hero-content a { pointer-events: auto; }

.hero-slider .hero-eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Kleines Verlaufsstück als Marker vor der Dachzeile */
.hero-slider .hero-eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 0.1875rem;
  background: var(--spektrum);
  flex: none;
}

.hero-slider .hero-title {
  color: #ffffff;
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.06;
  max-width: 16ch;
  text-wrap: balance;
}

.hero-slider .hero-subtitle {
  color: rgba(255, 255, 255, 0.88);
  max-width: 46ch;
  font-size: var(--fs-md);
  line-height: 1.65;
}

/* ─── 6b. PUNKTE DER BILDSTRECKEN ───────────────────────────────────────── */
/* Ein Knopf je Bild. Die Trefferfläche ist immer 44px, sichtbar ist nur
   ein kurzer Strich — dasselbe Muster im Hero wie in den Produktkacheln. */
.bildpunkt {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.bildpunkt::before {
  content: "";
  width: 1.5rem;
  height: 0.1875rem;
  background: var(--punkt-ruhe, rgba(255, 255, 255, 0.42));
  transition: background 0.25s;
}

.bildpunkt:hover::before { background: var(--punkt-hover, rgba(255, 255, 255, 0.75)); }
.bildpunkt[aria-current="true"]::before { background: var(--punkt-aktiv, #ffffff); }

.hero-punkte {
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--space-md);
  display: flex;
  gap: 0.35rem;
}

/* ─── 7. PRODUKTBEREICHE ────────────────────────────────────────────────── */
.kat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.kat {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

/* Die Verlaufsposition des Bereichs als Kopflinie */
.kat::before {
  content: "";
  height: 0.25rem;
  background: var(--kat-farbe, var(--logo-tinte));
  flex: none;
}

.kat:hover,
.kat:focus-within {
  transform: translateY(-0.375rem);
  box-shadow: var(--shadow-lg);
  border-color: var(--kat-farbe, var(--border));
}

/* Bildstrecke je Produktbereich: Klick oder Wisch blättert weiter,
   kein automatischer Wechsel — vier gleichzeitig laufende Kacheln wären
   unruhig. Gleiche Überblendtechnik wie im Hero. */
.kat-galerie {
  position: relative;
  background: #ffffff;
  /* Eigenes Band unter dem Bild für die Punkte — sie sollen die Ware nicht
     berühren. Gilt auch für Kacheln mit nur einem Bild, damit alle vier
     Karten gleich hoch bleiben. */
  padding-bottom: 2.5rem;
}

.kat-spur {
  display: grid;
  /* senkrechtes Scrollen bleibt dem Browser überlassen */
  touch-action: pan-y;
}

.bildwechsler--klickbar .kat-spur { cursor: pointer; }
.bildwechsler--zieht   .kat-spur { cursor: grabbing; }

/* Katalogware freigestellt auf Weiß — deshalb contain statt cover */
.kat-bild {
  grid-area: 1 / 1;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: 100%;
  /* Oben und an den Seiten Luft, unten etwas weniger — darunter folgt
     ohnehin das Punkteband. */
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.45s ease-in-out;
  user-select: none;
  -webkit-user-drag: none;
}

.kat-bild.is-aktiv { opacity: 1; }

/* Ein Herstellerlogo ist kein Produktfoto — es braucht mehr Luft, sonst
   drückt es als Schriftzug über die volle Kachelbreite. */
.kat-bild--marke {
  padding: var(--space-xl) calc(var(--space-xl) * 1.8);
}

/* Solange nur ein Bild vorliegt, gibt es nichts zu blättern */
.bildwechsler--einzeln .kat-bild { opacity: 1; }

/* Punkte sitzen auf hellem Grund und brauchen dunkle Marken */
.kat-punkte {
  /* Werte fest, nicht aus dem Farbschema — die Fläche darunter ist
     immer weiß, egal ob helles oder dunkles Schema. */
  --punkt-ruhe:  rgba(26, 26, 24, 0.22);
  --punkt-hover: rgba(26, 26, 24, 0.45);
  --punkt-aktiv: var(--kat-auf-hell, var(--logo-tinte));
  /* Über dem Bild statt im Textfluss — sonst verschieben Karten mit
     Bildstrecke ihren Text gegenüber Karten mit nur einem Bild. */
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  /* Kein Umbruch: die Knoepfe sollen schrumpfen (siehe unten), sonst
     weichen sie lieber in eine zweite Zeile aus. */
  flex-wrap: nowrap;
  gap: 0;
}

/* In der Kachel ist weniger Platz als im Hero, und wie viel, haengt vom
   Farbschema ab (im Dunklen ist die Flaeche eingerueckt). Deshalb duerfen
   die Knoepfe schrumpfen statt umzubrechen — 44px hoch bleiben sie, die
   Breite faellt nie unter 1,5rem = 24px, die Untergrenze nach WCAG 2.5.8. */
.kat-punkte .bildpunkt {
  flex: 0 1 2rem;
  width: 2rem;
  min-width: 1.5rem;
}

.kat-punkte .bildpunkt::before { width: 60%; }

/* Zählerhinweis, damit erkennbar ist, dass es mehr zu sehen gibt */
.bildwechsler--bereit.kat-galerie::after {
  content: attr(data-stand);
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 1;
  padding: 0.2rem 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  /* Ebenfalls fest: sitzt auf der weißen Bildfläche. Mit --text-muted käme
     im dunklen Schema helles Grau auf Weiß heraus (2,4:1). */
  color: #5d5c55;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(26, 26, 24, 0.14);
  pointer-events: none;
}

.kat-body {
  padding: var(--space-lg);
  padding-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
}

.kat-label {
  font-size: var(--fs-xs);
  color: var(--kat-farbe, var(--text-muted));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kat-label svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  flex: none;
}

.kat h3 {
  font-size: var(--fs-md);
  margin: 0;
  color: var(--heading);
}

.kat p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

.kat ul {
  list-style: none;
  padding: 0;
  margin: var(--space-xs) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-light);
}

.kat li {
  padding-left: 0.9rem;
  position: relative;
  line-height: 1.6;
  margin-bottom: 0.2rem;
}

.kat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.3rem;
  height: 0.3rem;
  background: var(--kat-farbe, var(--text-muted));
}

/* Verlaufsposition je Bereich.
   Zwei Token je Bereich, und das aus einem konkreten Grund:
   --kat-farbe     folgt dem Farbschema (im Dunklen aufgehellt) und gilt für
                   alles auf dem Kachelgrund — Kopflinie, Label, Aufzählung.
   --kat-auf-hell  bleibt in JEDEM Schema dunkel und gilt für alles, was auf
                   der Bildfläche liegt. Die ist immer weiß, weil die
                   Freisteller ihren weißen Grund selbst mitbringen. Ohne
                   diese Trennung säße im dunklen Schema ein aufgehelltes
                   Rot auf Weiß — nur 2,9:1. */
.kat--pulverlacke  { --kat-farbe: var(--kat-pulverlacke);  --kat-auf-hell: #a01d1d; }
.kat--lackzubehoer { --kat-farbe: var(--kat-lackzubehoer); --kat-auf-hell: #7d6a10; }
.kat--maskierungen { --kat-farbe: var(--kat-maskierungen); --kat-auf-hell: #3a6b39; }
.kat--messgeraete  { --kat-farbe: var(--kat-messgeraete);  --kat-auf-hell: #22688a; }

/* ─── 8. SCHAURAUM ──────────────────────────────────────────────────────── */
.schauraum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.schauraum-daten {
  display: grid;
  gap: var(--space-md);
  font-size: var(--fs-base);
}

.schauraum-zeile {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.schauraum-zeile dt {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  padding-top: 0.15em;
}

.schauraum-zeile dd {
  margin: 0;
  color: var(--text);
  line-height: 1.65;
}

.schauraum-zeile a {
  color: var(--heading);
  text-decoration-color: var(--border);
  text-underline-offset: 0.2em;
}

.schauraum-zeile a:hover { text-decoration-color: currentColor; }

/* ─── 9. FACHTEXT UND FAQ ───────────────────────────────────────────────── */
/* Die vier Wissensblöcke greifen dieselbe Verlaufsordnung auf wie das
   Sortiment darüber — Beschichtungsstoff, Aufnahme, Abdeckung, Prüfung. */
.wissen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl) var(--space-3xl);
}

.wissen {
  padding-top: var(--space-md);
  border-top: 0.1875rem solid var(--wissen-farbe, var(--border));
}

.wissen:nth-child(1) { --wissen-farbe: var(--kat-pulverlacke); }
.wissen:nth-child(2) { --wissen-farbe: var(--kat-lackzubehoer); }
.wissen:nth-child(3) { --wissen-farbe: var(--kat-maskierungen); }
.wissen:nth-child(4) { --wissen-farbe: var(--kat-messgeraete); }

.wissen h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-sm);
}

.wissen p {
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  max-width: 62ch;
}

.wissen p:last-child { margin-bottom: 0; }

.wissen strong {
  color: var(--text);
  font-weight: 600;
}

.wissen-region {
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  max-width: 72ch;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-muted);
}

/* FAQ aus base.css an die Marke angleichen */
.faq-question {
  font-family: var(--font-heading);
  font-weight: 500;
  /* Trefferfläche für den Daumen */
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.faq-item.open .faq-question { color: var(--heading); }

/* ─── 10. ANFAHRT ────────────────────────────────────────────────────────── */
.anfahrt {
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: var(--space-xl);
}

/* Verlauf als Kopfkante des Kastens */
.anfahrt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.25rem;
  background: var(--spektrum);
}

.anfahrt h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-md);
}

/* ── Karte: Vorschau lokal, interaktive Karte erst auf Klick ──────────── */
.karte {
  position: relative;
  margin: 0 0 var(--space-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  overflow: hidden;
  /* Hoehe vorab festlegen, damit beim Nachladen nichts springt */
  aspect-ratio: 16 / 9;
}

.karte-bild,
.karte-rahmen {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.karte-bild { object-fit: cover; }

/* Knopf sitzt auf dem Kartenbild — die Vorschau bleibt sichtbar */
.karte-laden {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  /* Ohne nowrap steht einem absolut gesetzten Element mit nur `left`
     lediglich die halbe Containerbreite zur Verfügung — die Beschriftung
     bräche auf schmalen Schirmen mehrzeilig um. */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 var(--space-lg);
  border: 0;
  cursor: pointer;
  background: var(--logo-tinte);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
  transition: background 0.2s;
}

.karte-laden:hover { background: #000000; }

.karte-laden:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.karte-laden svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  flex: none;
}

.karte-hinweis {
  font-size: var(--fs-xs) !important;
  line-height: 1.65 !important;
  color: var(--text-muted);
  margin-bottom: var(--space-lg) !important;
}

.karte-hinweis a { color: var(--heading); }

.anfahrt p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.anfahrt-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.anfahrt-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* Trefferfläche für den Daumen */
  min-height: 2.75rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--heading);
  text-decoration: none;
}

.anfahrt-links svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  flex: none;
}

.anfahrt-links a:hover { text-decoration: underline; }

.anfahrt-hinweis {
  font-size: var(--fs-xs) !important;
  margin-bottom: 0 !important;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

/* ─── 11. ANFRAGE-ABSCHNITT UND DIALOG ──────────────────────────────────── */
.anfrage {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.anfrage-hinweis {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

/* Telefon und E-Mail als eigene, sicher treffbare Ziele statt als
   Verweise mitten im Satz — auf dem Handy sind das die Hauptwege. */
.direktwege {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
  margin-top: var(--space-xs);
}

.direktwege a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--heading);
  text-decoration: none;
  border-bottom: 0.125rem solid transparent;
  transition: border-color 0.25s;
}

.direktwege a:hover,
.direktwege a:focus-visible { border-bottom-color: var(--spektrum-blau); }

.direktwege svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  flex: none;
}

.anfrage-dialog {
  width: min(100% - 2rem, 44rem);
  max-height: min(88dvh, 52rem);
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
  overflow: auto;
  overscroll-behavior: contain;
}

.anfrage-dialog::backdrop {
  background: rgba(12, 12, 10, 0.62);
  backdrop-filter: blur(0.15rem);
}

/* Verlauf als Oberkante des Dialogs — die Marke auch hier */
.anfrage-dialog-kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.anfrage-dialog-kopf::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.25rem;
  background: var(--spektrum);
}

.anfrage-dialog-kopf h2 {
  font-size: var(--fs-lg);
  margin: 0;
}

.anfrage-schliessen {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--border);
  color: var(--heading);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.anfrage-schliessen svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.anfrage-schliessen:hover {
  background: var(--bg-alt);
  border-color: var(--logo-tinte);
}

.anfrage-dialog form {
  padding: var(--space-xl);
}

/* Formularfelder an die Marke angleichen: kantig, ruhig, klarer Fokus */
.anfrage-dialog input,
.anfrage-dialog textarea,
.anfrage-dialog select {
  border-radius: 0;
  border: 1px solid var(--border);
  background: #ffffff;
  font-family: var(--font-body);
  /* Unter 16px zoomt iOS Safari beim Antippen in die Seite hinein.
     base.css setzt --fs-base auf bis zu 14px — hier bewusst fix. */
  font-size: 1rem;
}

.anfrage-dialog input:focus-visible,
.anfrage-dialog textarea:focus-visible,
.anfrage-dialog select:focus-visible {
  outline: 2px solid var(--spektrum-blau);
  outline-offset: 1px;
  border-color: var(--spektrum-blau);
  box-shadow: none;
}

.anfrage-dialog label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-light);
}

/* ─── 12. SCHALTFLÄCHEN ─────────────────────────────────────────────────── */
/* Tinte statt Buntfarbe — und der Verlauf als Kante, die beim Zeigen wächst.
   Das ist die eine Stelle, an der die Marke „anfasst". */
.btn {
  border-radius: 0;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 500;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--logo-tinte);
  border-color: var(--logo-tinte);
  color: #ffffff;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0.1875rem;
  background: var(--spektrum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease-out;
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after { transform: scaleX(1); }

.btn-primary:hover {
  background: #000000;
  border-color: #000000;
}

.btn-outline {
  border-color: var(--border);
  color: var(--heading);
}

.btn-outline:hover {
  border-color: var(--logo-tinte);
  background: var(--logo-tinte);
  color: #ffffff;
}

/* Auf dem Hero steht die Zweitaktion auf dunklem Bild */
.hero-slider .btn-outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.hero-slider .btn-outline:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--logo-tinte);
}

/* ─── 13. LIEFERANT RIPOL ─────────────────────────────────────────────── */
.marken-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.marken-zeile a {
  display: inline-flex;
  align-items: center;
  /* Trefferfläche für den Daumen, auch wenn das Logo flach ist */
  min-height: 2.75rem;
  padding-block: 0.5rem;
}

.marken-zeile img {
  /* Die Sektion handelt vom Lieferanten — das Logo darf Präsenz haben.
     Die Unterzeile „the Power of Colour" bleibt dabei lesbar. */
  height: 4.5rem;
  width: auto;
}

.marken-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--heading);
  text-decoration: none;
  border-bottom: 0.125rem solid transparent;
  transition: border-color 0.25s;
}

.marken-link:hover,
.marken-link:focus-visible { border-bottom-color: var(--spektrum-rot); }

.marken-link svg {
  width: 0.95rem;
  height: 0.95rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

/* ─── 14. FUSSZEILE ─────────────────────────────────────────────────────── */
/* Auch hier: Vorlage setzt weiße Schrift auf den Verlauf (unlesbar über Gelb).
   Der Verlauf bleibt als Abschlusskante, der Text steht auf Tinte. */
.site-footer {
  background: var(--bg-dark);
  border-top: 0;
}

.site-footer .footer-logo img {
  /* helle Wortmarke für dunklen Grund */
  content: url("img/logo-light.svg");
  height: 2.25rem;
  width: auto;
}

.footer-abschluss {
  height: 0.375rem;
  background: var(--spektrum);
}

/* ─── 15. DUNKLES FARBSCHEMA ────────────────────────────────────────────── */
/* shared.js hängt einen Umschalter an und folgt der Systemeinstellung.
   Die Bereichsfarben brauchen dort hellere Partner, sonst versinken sie. */
html[data-theme="dark"] {
  --bg:         #131310;
  --bg-alt:     #1c1c18;
  --bg-dark:    #0c0c0a;
  --text:       #e6e5df;
  --text-muted: #a8a79e;
  --text-light: #cbcac2;
  --heading:    #ffffff;
  --card-bg:    #1c1c18;
  --border:     rgba(255, 255, 255, 0.14);
  --primary:      #f4f3f0;
  --primary-dark: #ffffff;
  --primary-rgb:  244, 243, 240;
  --text-on-primary: #16150f;

  /* aufgehellte Bereichsfarben, geprüft auf #1c1c18 */
  --kat-pulverlacke:  #e07b7b;
  --kat-lackzubehoer: #cbb84e;
  --kat-maskierungen: #78ba76;
  --kat-messgeraete:  #6cb6d8;
}

/* Die Bildfläche bleibt auch im dunklen Schema weiß — die Freisteller
   bringen ihren weißen Grund selbst mit, ein dunkler Kasten darunter
   ergäbe nur einen weißen Fleck im Bild. Damit sie nicht als greller
   Block in der Kachel sitzt, wird sie eingerückt und gerahmt: so liest
   sie sich als bewusster Leuchtkasten statt als Loch. */
html[data-theme="dark"] .kat-galerie {
  margin: var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Formularfelder im Dialog: hell wäre hier falsch, der Text ist hell.
   Ohne diese Regel stünde heller Text auf weißem Feld (1,3:1). */
html[data-theme="dark"] .anfrage-dialog input,
html[data-theme="dark"] .anfrage-dialog textarea,
html[data-theme="dark"] .anfrage-dialog select {
  background: #24241f;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] .anfrage-dialog input::placeholder,
html[data-theme="dark"] .anfrage-dialog textarea::placeholder {
  color: #8f8e86;
}

html[data-theme="dark"] .anfrage-schliessen:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.45);
}

html[data-theme="dark"] .btn-primary {
  background: #f4f3f0;
  border-color: #f4f3f0;
  color: var(--logo-tinte);
}

html[data-theme="dark"] .btn-primary:hover {
  background: #ffffff;
  border-color: #ffffff;
}

html[data-theme="dark"] .site-nav {
  background: rgba(19, 19, 16, 0.94);
}

html[data-theme="dark"] .nav-logo img {
  content: url("img/logo-light.svg");
}

/* ─── 15b. RECHTSTEXTE ──────────────────────────────────────────────────── */
/* Impressum und Datenschutz werden gelesen, nicht überflogen — deshalb
   engere Zeilenlänge, mehr Durchschuss, klare Zwischenüberschriften. */
.rechtstext {
  max-width: 44rem;
}

.rechtstext h2 {
  font-size: var(--fs-md);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.rechtstext h3 {
  font-size: var(--fs-base);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  color: var(--text);
}

.rechtstext p,
.rechtstext li {
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 68ch;
}

.rechtstext .section-lead {
  color: var(--text-light);
  font-size: var(--fs-md);
}

.rechtstext ul {
  padding-left: 1.1rem;
  margin-bottom: var(--space-md);
}

.rechtstext li { margin-bottom: var(--space-sm); }

.rechtstext strong { color: var(--text); }

.rechtstext a {
  color: var(--heading);
  text-underline-offset: 0.2em;
}

.rechtstext code {
  font-size: 0.92em;
  background: var(--bg-alt);
  padding: 0.1em 0.35em;
}

.rechtstext-stand {
  margin-top: var(--space-2xl);
  font-size: var(--fs-xs) !important;
  color: var(--text-muted);
}

/* Offener Punkt, der vor dem Livegang zu klären ist — sichtbar, aber
   nicht als Fehlermeldung gestaltet. */
.hinweis-offen {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  background: var(--bg-alt);
  border-left: 0.25rem solid var(--spektrum-rot);
}

.hinweis-offen p { margin: 0; }

/* ─── 16. ANPASSUNGEN AN base.css ───────────────────────────────────────── */
/* Das Endoskeleton ist auf mehrseitige Auftritte ausgelegt. Für den
   Onepager sind ein paar seiner Annahmen zu korrigieren — bewusst hier
   und nicht in base.css, damit die gemeinsame Grundlage unberührt bleibt. */

/* base.css färbt jeden zweiten Abschnitt automatisch ein. Auf einer Seite
   mit Hero, Produkten, Lieferant, Kontakt und Anfrage trifft das die
   falschen. Wechsel deshalb explizit über Klassen steuern. */
section:nth-of-type(even) { background: var(--bg); }
section.section-alt { background: var(--bg-alt); }
section.anfrage      { background: var(--bg-alt); }

/* Der Markenstreifen schiebt die Navigation um seine Höhe nach unten —
   der Inhalt darunter muss dieselbe Höhe mitbekommen. */
body { padding-top: calc(var(--nav-height) + 0.375rem); }

/* Der Hero ist links gesetzt, base.css zentriert Heldentexte. */
.hero-slider .hero-content { text-align: left; }
.hero-slider .hero-subtitle { margin-inline: 0; }
.hero-slider .hero-ctas { justify-content: flex-start; }

/* Ohne zweites Bild baut das Modul keine Punkte — dann auch keine Fläche. */
.hero-punkte:empty,
.kat-punkte:empty { display: none; }

/* Eingabefelder unter 16px lassen iOS Safari beim Antippen hineinzoomen.
   base.css setzt --fs-base auf bis zu 14px, deshalb hier fix. */
.form-group input,
.form-group textarea,
.form-group select { font-size: 1rem; }

/* ─── 17. RESPONSIV ─────────────────────────────────────────────────────── */
/* Handy zuerst gedacht: ab hier wird zusammengeklappt, nicht gestaucht. */
@media (max-width: 60rem) {
  .kat-grid    { grid-template-columns: repeat(2, 1fr); }
  .wissen-grid { gap: var(--space-xl); }
  .schauraum   { grid-template-columns: 1fr; gap: var(--space-xl); }
}

@media (max-width: 46rem) {
  .kat-grid,
  .wissen-grid { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  /* Der Hero darf auf dem Handy nicht den ganzen Bildschirm fressen —
     darunter muss erkennbar weitergehen. */
  .hero-slider { min-height: 26rem; }
  .hero-slider .hero-title { max-width: 100%; }
  .hero-slider .hero-content { padding-block: var(--space-2xl); }
  .hero-slider .hero-eyebrow::before { width: 1.5rem; }

  /* Zwei Knöpfe nebeneinander werden zu schmal — untereinander, volle Breite */
  .hero-slider .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-slider .hero-ctas .btn { justify-content: center; }

  .schauraum-zeile {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  /* Telefon- und E-Mail-Links sind auf dem Handy die wichtigsten Ziele
     überhaupt — als reine Textzeile sind sie nur ~17px hoch und damit zu
     knapp für den Daumen. Hier jede auf eine eigene, hohe Zeile. */
  .schauraum-zeile dd a,
  .site-footer .footer-col a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Nur zwischen den Rufnummern: die werden zu eigenen Zeilen und brauchen
     das <br> nicht mehr. In der Anschrift müssen die Umbrüche bleiben,
     sonst läuft sie zu einer einzigen Zeile zusammen. */
  .schauraum-tel br { display: none; }

  .anfahrt { padding: var(--space-lg); }

  /* 16:9 wird auf Handybreite zu flach, um die Umgebung zu erkennen */
  .karte { aspect-ratio: 4 / 3; }

  /* Dialog auf dem Handy als Vollflächen-Blatt, nicht als schwebender Kasten */
  .anfrage-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
  }

  .anfrage-dialog form,
  .anfrage-dialog-kopf { padding-inline: var(--space-lg); }
}

/* ─── 18. BEWEGUNG REDUZIEREN ───────────────────────────────────────────── */
/* Das Modul bildwechsler schaltet den automatischen Wechsel hier ohnehin
   ab; blendet trotzdem noch von Hand geblättert wird, dann ohne Blende. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .kat-bild,
  .nav-links a::after,
  .btn-primary::after,
  .kat {
    transition: none;
  }
  .kat:hover,
  .kat:focus-within { transform: none; }
}