/* =====================================================================
   KRAFT – Stylesheet
   Design-Richtung: specialized.com – schmale Menüleiste, Logo ganz links,
   Hamburger + Suche rechts, große Vollbreite-Bilder mit kleinen Abständen,
   Pill-Buttons, kräftige Typografie (Archivo) mit Inter als Lesetext.
   Markenfarbe: Kraft-Blau aus dem Logo (Pantone 279).
   ===================================================================== */

:root {
  --blau: #4898d8;        /* Kraft-Logo-Blau – Akzente, Punkte, Linien, Symbole */
  --blau-knopf: #2f79b8;  /* Flächen mit weißer Schrift: erst ab hier ist der
                             Kontrast ausreichend (4,6:1 statt 3,1:1) */
  --blau-tief: #2e6fae;   /* dunklere Stufe für Hover/Kontrast */
  --ink: #101418;         /* fast Schwarz für Text & Buttons */
  --navy: #0c141d;        /* dunkler Grund (Footer, Overlays) */
  --text: #1a222b;
  --text-muted: #5b6672;
  --linie: #e3e7ea;
  --bg: #f4f6f8;
  --weiss: #ffffff;
  --radius: 10px;
  --luecke: 8px;          /* Abstand zwischen Bildkacheln */
  --rand: clamp(16px, 3vw, 40px);           /* einheitlicher Seitenrand – ALLE Reihen beginnen hier */
  --schatten-hover: 0 8px 20px rgba(12, 20, 29, .09);
  --max: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--weiss);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

/* Eine gemeinsame linke Kante für alles: kein zentrierter Kasten mehr */
.container { width: 100%; padding: 0 var(--rand); }
.vollbreite { padding: 0 var(--rand); }

h1, h2, h3 {
  font-family: "Archivo", "Inter", "Segoe UI", sans-serif;
  font-weight: 700; line-height: 1.12; letter-spacing: -.015em;
  text-wrap: balance;
}

.eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blau);
}

.section { padding: clamp(52px, 7vw, 100px) 0; }
.section.vollbreite { padding-left: var(--rand); padding-right: var(--rand); }
.section-titel {
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
  /* Bei langen Ueberschriften auf schmalen Bildschirmen rutschen die
     Karussell-Pfeile in die naechste Zeile, statt seitlich hinauszuragen. */
  flex-wrap: wrap;
}
.section-titel .karussell-pfeile { margin-left: auto; flex: 0 0 auto; }
.section-titel h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; }

/* ---------------------------------------------------------------------
   Buttons – Pill-Form
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; border: 0;
  font-size: .9rem; font-weight: 600; transition: all .18s ease;
}
.btn-dunkel { background: var(--blau-knopf); color: #fff; }
.btn-dunkel:hover { background: var(--blau-tief); }
.btn-hell { background: #fff; color: var(--ink); }
.btn-hell:hover { background: var(--blau-knopf); color: #fff; }
.btn-primaer { background: var(--blau-knopf); color: #fff; }
.btn-primaer:hover { background: var(--blau-tief); }
.btn-umriss { background: transparent; color: var(--ink); border: 1.5px solid currentColor; }
.btn-umriss:hover { color: var(--blau-tief); }
.btn-umriss-hell { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7); }
.btn-umriss-hell:hover { background: rgba(255,255,255,.16); }

/* ---------------------------------------------------------------------
   Header – schmale Leiste, Logo ganz links, Suche + Burger rechts
   --------------------------------------------------------------------- */
.header {
  /* top: -34px = die Topbar (34px hoch) schiebt sich beim Scrollen hinaus,
     die Menüleiste darunter bleibt kleben */
  position: sticky; top: -34px; z-index: 60;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

/* ---- Topbar: schmaler Balken über der Menüleiste ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; height: 34px; padding: 0 var(--rand);
  background: #16324a;
  color: rgba(255, 255, 255, .85);
  font-size: .78rem;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-hinweis {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; opacity: 1; transition: opacity .3s ease;
}
.topbar-hinweis.wechsel { opacity: 0; }
.topbar-service {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  white-space: nowrap;
}
.topbar-label { color: rgba(255, 255, 255, .55); font-weight: 600; }
.topbar-service a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.topbar-service > a > svg { color: #25d366; }  /* Gruen NUR fuer WhatsApp */
@media (max-width: 860px) {
  .topbar-service { display: none; }
  .topbar { justify-content: center; }
  /* Am Handy ist das die einzige Schaltflaeche in dieser Leiste - sie braucht
     genug Hoehe, um sicher mit dem Daumen getroffen zu werden. */
  .topbar-hinweis { text-align: center; display: block; padding: 5px 0; }
}
.header-inner {
  display: flex; align-items: center; gap: 26px; height: 48px;
  padding: 0 var(--rand);
}
.logo { display: flex; align-items: center; align-self: center; flex-shrink: 0; }  /* Logo darf nie schrumpfen */
.header-inner .nav { margin-left: 34px; }
.logo img { height: 22px; width: auto; max-width: none; display: block; }
.footer .logo img { height: 26px; }

.nav { display: flex; gap: 22px; align-items: center; }
.nav > a, .nav-mehr > button {
  font-size: .88rem; font-weight: 600; color: var(--text);
  padding: 4px 0; border-bottom: 2px solid transparent; transition: color .15s;
  display: inline-flex; align-items: center; gap: 4px;
}
.nav > a:hover, .nav > a.aktiv, .nav-mehr > button:hover { color: var(--blau-tief); border-bottom-color: var(--blau); }

/* "und mehr"-Dropdown */
.nav-mehr { position: relative; }
.nav-mehr .dropdown {
  display: none; position: absolute; top: calc(100% + 10px); left: -12px;
  background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  box-shadow: var(--schatten-hover); padding: 10px; min-width: 220px; z-index: 70;
}
.nav-mehr.offen .dropdown { display: block; }
.nav-mehr .dropdown a {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: .9rem; font-weight: 500;
}
.nav-mehr .dropdown a:hover { background: var(--bg); color: var(--blau-tief); }

.header-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }  /* Knoepfe rechts duerfen nie schrumpfen */
/* Sehr schmale Geraete (iPhone SE und aehnlich): Auf 320 px Breite wird die
   Kopfzeile sonst ein paar Pixel zu breit und die Seite laesst sich seitlich
   verschieben. */
@media (max-width: 359px) {
  .header-inner { gap: 12px; padding: 0 12px; }
  .header-rechts { gap: 2px; }
}
.header-kontakt { padding: 7px 18px; font-size: .84rem; margin-right: 4px; }
.icon-knopf {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--text);
  transition: background .15s;
}
.icon-knopf:hover { background: var(--bg); }
.icon-knopf svg { width: 20px; height: 20px; }

/* Suche */
.such-panel {
  display: none; border-top: 1px solid var(--linie); background: #fff;
  padding: 14px 16px 18px;
}
.such-panel.offen { display: block; }
.such-panel .such-feld {
  display: flex; align-items: center; gap: 10px; max-width: 680px; margin: 0 auto;
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 10px 18px;
}
.such-panel input {
  flex: 1; border: 0; outline: 0; font-family: inherit; font-size: 1rem; background: transparent;
}
.such-ergebnisse { max-width: 680px; margin: 10px auto 0; }
.such-ergebnisse a {
  display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 10px;
}
.such-ergebnisse a:hover { background: var(--bg); }
.such-ergebnisse img { width: 54px; height: 40px; object-fit: contain; background: var(--bg); border-radius: 6px; }
.such-ergebnisse .name { font-weight: 600; font-size: .92rem; }
.such-ergebnisse .kat { font-size: .78rem; color: var(--text-muted); }
.such-leer { color: var(--text-muted); font-size: .9rem; padding: 10px; }

/* Hamburger-Menü (Panel rechts) */
.menue-schleier {
  display: none; position: fixed; inset: 0; background: rgba(12, 20, 29, .45); z-index: 80;
}
.menue-schleier.offen { display: block; }
.menue-panel {
  position: fixed; top: 0; right: -340px; width: 320px; max-width: 88vw; height: 100vh;
  background: #fff; z-index: 90; transition: right .25s ease;
  display: flex; flex-direction: column; padding: 18px 0;
  box-shadow: -10px 0 40px rgba(12, 20, 29, .2);
}
.menue-panel.offen { right: 0; }
.menue-panel .kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 14px; border-bottom: 1px solid var(--linie);
}
.menue-panel .kopf img { height: 18px; width: auto; display: block; }
.menue-panel nav { overflow-y: auto; padding: 10px 8px; }
.menue-panel nav a {
  display: block; padding: 12px 14px; border-radius: 10px;
  font-size: 1rem; font-weight: 600;
}
.menue-panel nav a:hover { background: var(--bg); color: var(--blau-tief); }
.menue-panel nav .trenner { height: 1px; background: var(--linie); margin: 10px 14px; }
.menue-panel nav .klein { font-size: .88rem; font-weight: 500; color: var(--text-muted); padding: 9px 14px; }
.menue-panel nav a.unter { padding-left: 30px; font-size: .92rem; font-weight: 500; color: var(--text-muted); }
.menue-panel nav a.unter:hover { color: var(--blau-tief); }

/* ---------------------------------------------------------------------
   Hero – Linienbild (von www.kraft-co.at) oben, Slogan + Buttons darunter
   --------------------------------------------------------------------- */
.hero { padding: 0 var(--rand); margin-top: var(--luecke); }
.hero-flaeche {
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(175deg, #fdfdfe 0%, #eef1f4 100%);
}
.hero-bildflaeche { width: 100%; height: auto; display: block; }
.hero-unten {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px 40px; flex-wrap: wrap; padding: 26px 28px 32px;
}
.hero-slogan {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 800; color: var(--ink);
  line-height: 1.22; max-width: 880px;
}
.hero-slogan em { color: var(--blau-tief); font-style: normal; }
/* Die Beschriftungen bleiben einzeilig - sonst bricht auf schmalen Geraeten
   der laengere Knopf mitten im Wort um, weil die Gruppe nur so breit wird
   wie ihr breitester Knopf. */
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-ctas .btn { white-space: nowrap; }

/* Hero-Variante "video" (Versuch): Das Video "Unsere Stärke" läuft im Hintergrund */
.hero-flaeche.hero-video {
  position: relative; display: flex; align-items: center;
  /* fuellt den ersten Bildschirm: Fensterhoehe minus Kopfbereich */
  min-height: max(480px, calc(100vh - 100px));
  min-height: max(480px, calc(100svh - 100px));
}
.hero-video-hintergrund {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero-flaeche.hero-video::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 18, 26, .58) 0%, rgba(10, 18, 26, .30) 55%, rgba(10, 18, 26, .18) 100%);
}
.hero-video .hero-unten {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
  padding: 48px;
}
/* Zweite Hero-Folie (Serie Y im Spotlight): blendet im 22-Sekunden-Takt mit dem Video */
.hero-folie2 {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% center; opacity: 0;
}
.hero-wechsel .hero-folie2 { animation: heroFolieBild 22s ease-in-out infinite; }
.hero-video .hero-unten.folie-b {
  position: absolute; inset: 0; justify-content: center;
  opacity: 0; visibility: hidden;
}
.hero-wechsel .hero-unten:not(.folie-b) { animation: heroTextA 22s ease-in-out infinite; }
.hero-wechsel .hero-unten.folie-b { animation: heroTextB 22s ease-in-out infinite; }
@keyframes heroFolieBild { 0%, 45% { opacity: 0; } 52%, 93% { opacity: 1; } 100% { opacity: 0; } }
/* Texte nacheinander statt uebereinander: A raus, dann B rein (und zurueck) */
@keyframes heroTextA {
  0%, 44% { opacity: 1; visibility: visible; }
  47%, 96% { opacity: 0; visibility: hidden; }
  100% { opacity: 1; visibility: visible; }
}
@keyframes heroTextB {
  0%, 48% { opacity: 0; visibility: hidden; }
  51%, 92% { opacity: 1; visibility: visible; }
  95%, 100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wechsel .hero-folie2, .hero-wechsel .hero-unten { animation: none; }
}
.hero-video .hero-slogan {
  color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
  font-size: clamp(1.9rem, 3.8vw, 3.4rem); max-width: 980px;
}
.hero-video .hero-slogan em { color: #8ecbf2; }
.hero-video .btn-umriss { color: #fff; border-color: rgba(255, 255, 255, .75); }
.hero-video .btn-umriss:hover { border-color: #fff; }

/* ---------------------------------------------------------------------
   Kategorien – Fotokacheln, volle Breite, kleine Abstände
   --------------------------------------------------------------------- */
.kategorien-reihe { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--luecke); }
.kategorie-karte {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--bg);
}
.kategorie-karte img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.kategorie-karte:hover img { transform: scale(1.03); }
.kategorie-karte::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 45%, rgba(12, 20, 29, .68));
}
.kategorie-karte .name {
  position: absolute; left: 14px; right: 10px; bottom: 10px; z-index: 1;
  color: #fff; font-weight: 700; font-size: .98rem; line-height: 1.25;
  font-family: "Archivo", sans-serif;
}

/* ---------------------------------------------------------------------
   Neuheiten – großes Bildgrid, volle Breite, kleine Abstände
   --------------------------------------------------------------------- */
.neuheiten-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luecke); }
.neuheit {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; display: block; background: var(--bg);
}
.neuheit:nth-child(3n) { grid-column: span 2; aspect-ratio: 21 / 8; }

/* Foto-Kachel: Bild füllt die Fläche, Text liegt auf dunklem Verlauf */
.neuheit.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.neuheit.foto:hover img { transform: scale(1.03); }
.neuheit.foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(12,20,29,0) 40%, rgba(12,20,29,.74) 88%);
}
.neuheit.foto .text { color: #fff; }
.neuheit.foto .claim { color: rgba(255, 255, 255, .85); }
.neuheit.foto .mehr { color: #9ccbf0; }

/* Maschinen-Kachel: Bild füllt die Kachel randlos (Ausschnitt),
   Schrift weiß auf dunklem Verlauf – wie bei den Kategorie-Kacheln */
.neuheit.freisteller img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .5s ease;
}
.neuheit.freisteller:hover img { transform: scale(1.025); }
.neuheit.freisteller::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(12, 20, 29, 0) 45%, rgba(12, 20, 29, .72) 90%);
}
.neuheit.freisteller .text { color: #fff; }
.neuheit.freisteller .claim { color: rgba(255, 255, 255, .85); }
.neuheit.freisteller .mehr { color: #9ccbf0; }

.neuheit .text { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 1; }
.neuheit h3 { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 800; margin-bottom: 2px; }
.neuheit .claim { font-size: .95rem; margin-bottom: 6px; display: block; }
.neuheit .mehr { font-weight: 700; font-size: .9rem; }
.neuheit .mehr::after { content: " →"; }

/* ---------------------------------------------------------------------
   Komplettlinien-Band mit Slogan
   --------------------------------------------------------------------- */
.linien { padding: clamp(20px, 2.6vw, 40px) var(--rand) 0; }
.linien-flaeche {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background-color: var(--bg); background-size: auto 112%; background-position: right -60px center;
  background-repeat: no-repeat; color: var(--text);
}
.linien-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.linien-flaeche::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #f4f6f8 0%, #f4f6f8 26%, rgba(244, 246, 248, .78) 44%, rgba(244, 246, 248, .1) 78%, rgba(244, 246, 248, .04) 100%);
}
.linien-inhalt { z-index: 2; }
.linien-inhalt { position: relative; padding: 64px 5vw; max-width: 700px; }
/* Zwei eigenständige Kästchen nebeneinander, jedes so hoch wie eine Produktkachel */
.linien-paar {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--luecke);
  align-items: stretch;
}
.linien-paar > * {
  height: 400px; border: 0; border-radius: var(--radius); overflow: hidden;
}

.linien-paar .linien-inhalt {
  padding: 34px 30px 30px; max-width: none; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.linien-paar .linien-flaeche .linien-inhalt .btn,
.linien-paar .mobil-flaeche .mobil-inhalt .btn {
  margin-top: auto; align-self: flex-start; flex-shrink: 0;
  height: 48px; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; line-height: 1;
}
.linien-paar .kasten-sub {
  font-size: 1.02rem; color: var(--text); line-height: 1.55;
  margin: 12px 0 0; max-width: 44ch;
}
.linien-paar .linien-titel { font-size: clamp(1.7rem, 2.9vw, 2.4rem); color: var(--ink); margin: 0; min-height: 2.4em; text-wrap: balance; }
.linien-paar .linien-inhalt p { font-size: .92rem; margin-bottom: 14px; max-width: 42ch; }
.linien-paar .linien-schritte { margin: 14px 0 0; gap: 6px; }
.linien-paar .linien-schritt { font-size: .75rem; padding: 4px 10px; }

/* Mobile Anlagen: Bild als weich abgedeckter Hintergrund, wie im linken Kästchen */
.mobil-flaeche {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(120deg, #f8f9fb 0%, #edf0f3 48%, #dce1e7 100%);
  color: var(--text);
}
.mobil-motiv {
  position: absolute; right: 2%; bottom: 76px; z-index: 1;
  height: 66%; width: auto; max-width: 54%; object-fit: contain;
  filter: saturate(1.15) contrast(1.04);
}

.mobil-inhalt {
  position: relative; z-index: 2; height: 100%; max-width: none;
  padding: 34px 30px 30px; display: flex; flex-direction: column; justify-content: flex-start;
}
/* Solange der Anhaenger rechts im Kasten steht, bleibt der Text in der linken Spalte -
   nur der Knopf darf bis an den rechten Rand */
@media (min-width: 701px) {
  .mobil-flaeche .mobil-inhalt { padding-right: 48%; }
}
.mobil-titel { font-size: clamp(1.7rem, 2.9vw, 2.4rem); color: var(--ink); margin: 0; min-height: 2.4em; text-wrap: balance; }
.mobil-inhalt p { color: var(--text-muted); font-size: .92rem; line-height: 1.55; margin-bottom: 18px; max-width: 40ch; }

@media (max-width: 800px) {
  .linien-paar { grid-template-columns: 1fr; }
  .linien-paar > * { height: auto; min-height: 320px; }
  .linien-paar .linien-inhalt { padding: 36px 5vw; max-width: none; }
  .linien-paar .linien-titel, .mobil-titel { min-height: 0; }
}
/* Am Handy: Text volle Breite, der Anhaenger wandert unter den Text */
@media (max-width: 700px) {
  .mobil-flaeche { display: flex; flex-direction: column; }
  .mobil-inhalt { height: auto; padding: 30px 5vw 24px; }
  .mobil-inhalt .btn { margin-top: 18px; align-self: flex-start; }
  .mobil-motiv { position: static; order: 2; height: auto; max-width: 78%; margin: 0 auto 22px; }
}
@media (max-width: 620px) {
  .mobil-flaeche .mobil-bild { aspect-ratio: 16 / 9; height: auto; }
}
.linien-titel {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem); color: var(--ink); margin: 10px 0 18px;
}
.linien-inhalt p { color: var(--text-muted); max-width: 720px; margin-bottom: 26px; }
.linien-schritte { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.linien-schritt {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #c9d2da; border-radius: 999px;
  padding: 7px 16px; font-size: .86rem; font-weight: 600; color: var(--ink); background: #fff;
}
.linien-schritt::after { content: "→"; color: var(--blau); font-weight: 700; }
.linien-schritt:last-child::after { content: ""; }
@media (max-width: 900px) {
  .linien-flaeche { background-size: cover; background-position: center; }
  .linien-flaeche::before { background: rgba(244, 246, 248, .93); }
}
/* ---------------------------------------------------------------------
   Produkt-Karussell
   --------------------------------------------------------------------- */
.karussell-pfeile { display: flex; gap: 10px; }
.pfeil {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--linie); background: #fff; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; font-size: 1.05rem;
}
.pfeil:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.karussell {
  display: flex; gap: var(--luecke); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 0 12px; scrollbar-width: none;
}
.karussell::-webkit-scrollbar { display: none; }

.produkt-karte {
  flex: 0 0 280px; scroll-snap-align: start;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; transition: transform .3s ease, box-shadow .3s ease;
  display: flex; flex-direction: column;
}
.produkt-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); }
.produkt-karte .bild {
  background: var(--bg); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center; padding: 10px;
  overflow: hidden;
}
/* Bodenschatten sind direkt in die Produktbilder eingerechnet (Skript, Backups im Scratchpad). */
.produkt-karte .bild img { max-height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .55s ease; }
.produkt-karte:hover .bild img { transform: scale(1.025); }
/* Breite Fotos (z. B. Reihenfüller) füllen die Kachel besser aus */
.produkt-karte.bild-zoom .bild img { width: 132%; max-width: none; max-height: none; }
.produkt-karte .info { padding: 13px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.produkt-karte h3 {
  font-size: 1.02rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.produkt-karte p {
  font-size: .84rem; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* breite Karte (z. B. Neuheiten Zeile 1) */
.produkt-karte.breit { flex: none; }
.produkt-karte.breit .bild { aspect-ratio: 2012 / 928; padding: 20px; }
.produkt-karte.breit .bild picture { width: 100%; height: 100%; display: block; }
.produkt-karte.breit .bild img { width: 100%; height: 100%; object-fit: contain; }
.produkt-karte.breit h3 { font-size: 1.25rem; }

/* Kartenzeilen unter der breiten Karte / Top-Seller */
.karten-reihe { display: grid; gap: var(--luecke); margin-top: var(--luecke); }
.karten-reihe .produkt-karte { flex: none; }
.karten-reihe.s2 { grid-template-columns: 1fr 1fr; }
/* 2er-Zeile: Bildhöhe wie bei 3 quadratischen Karten in einer Zeile */
.karten-reihe.s2 .produkt-karte .bild { aspect-ratio: 3 / 2; }
.karten-reihe.s3 { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.karten-reihe.s4 { grid-template-columns: repeat(4, 1fr); }
/* s4-Reihe nutzt das quadratische Standardformat der Karte */
.karten-reihe.s5 { grid-template-columns: repeat(5, 1fr); margin-top: 0; }
.karten-reihe.s5 .produkt-karte h3 { font-size: .95rem; }

.promo-karte {
  flex: 0 0 280px; scroll-snap-align: start;
  background: linear-gradient(160deg, var(--blau), var(--blau-tief));
  color: #fff; border-radius: var(--radius);
  padding: 26px 22px; display: flex; flex-direction: column; gap: 12px;
}
.promo-karte h3 { font-size: 1.3rem; font-weight: 800; }
.promo-karte p { font-size: .9rem; color: rgba(255, 255, 255, .88); }
.promo-karte .btn { margin-top: auto; }

/* ---------------------------------------------------------------------
   Top-Seller (Design von der Agentur)
   --------------------------------------------------------------------- */
.section-titel.zentriert { justify-content: center; text-align: center; }

/* Produkt-Kacheln: freigestellte Maschine groß, Text + Button IM Bild */
.pkachel {
  position: relative; display: block; background: var(--bg);
  border-radius: var(--radius); overflow: hidden; transition: box-shadow .3s ease;
}
.pkachel:hover { box-shadow: var(--schatten-hover); }
.pkachel img {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  max-width: 92%; max-height: 74%; object-fit: contain; transition: transform .35s ease;
  mix-blend-mode: multiply;
}
.pkachel:hover img { transform: translate(-50%, -50%) scale(1.02); }
.pkachel .fuss {
  position: absolute; left: 20px; right: 16px; bottom: 14px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 14px;
}
.pkachel .name { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--ink); line-height: 1.25; }
.pkachel .unter { font-size: .82rem; color: var(--text-muted); max-width: 52ch; }
.pkachel.gross { aspect-ratio: 21 / 8; }
.pkachel.gross .name { font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
.pkachel.gross img { max-width: 78%; }
.pkachel-reihe { display: grid; gap: var(--luecke); margin-top: var(--luecke); }
.pkachel-reihe.s2 { grid-template-columns: 1fr 1fr; }
.pkachel-reihe.s3 { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.pkachel-reihe .pkachel { aspect-ratio: 16 / 10.5; }
.pkachel-reihe.s3 .pkachel { aspect-ratio: 4 / 3.3; }
.btn.klein { padding: 9px 18px; font-size: .82rem; white-space: nowrap; }

/* ---------------------------------------------------------------------
   Kontakt-Band "Wir sind für Sie da."
   --------------------------------------------------------------------- */
.kontakt-band { padding: 0 var(--rand); margin: 24px 0 0; }
.kb-innen {
  background: var(--bg);
  border-radius: var(--radius); color: var(--text);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px;
  padding: clamp(28px, 5vw, 60px);
}
.kb-links h2 { color: var(--ink); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; margin-bottom: 12px; }
.kb-links p { color: var(--text-muted); }
.kb-kontakte { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kb-kontakte li { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: .98rem; }
.kb-kontakte svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--blau-tief); }
.kb-kontakte a { color: var(--text); text-decoration: none; }
.kb-kontakte a:hover { color: var(--blau-tief); text-decoration: underline; }
.kb-kontakte small { display: block; font-weight: 500; font-size: .78rem; color: var(--text-muted); }
.kb-form { display: flex; flex-direction: column; gap: 12px; }
.kb-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kb-form label { font-size: .78rem; font-weight: 600; color: var(--text-muted); display: flex; flex-direction: column; gap: 5px; }
.kb-form input, .kb-form select, .kb-form textarea {
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--linie);
  background: #fff; color: var(--text); font-family: inherit; font-size: .9rem;
}
.kb-form input::placeholder, .kb-form textarea::placeholder { color: var(--text-muted); }
.kb-form select option { color: var(--text); }
.kb-form textarea { resize: vertical; }
.kb-form .btn { margin-top: 6px; align-self: flex-start; }
.kb-form .btn-hell { background: var(--blau-tief); color: #fff; }
.kb-form .btn-hell:hover { background: var(--ink); color: #fff; }
.kb-hinweis { font-size: .75rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------
   Vorteile – helle Karten mit Piktogrammen
   --------------------------------------------------------------------- */
.vorteile { background: var(--bg); }
.vorteile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--luecke); }
.vorteil { background: #fff; border-radius: var(--radius); padding: 26px 22px; }
.vorteil svg { width: 34px; height: 34px; color: var(--blau); margin-bottom: 14px; }
.vorteil h3 { font-size: 1.02rem; margin-bottom: 8px; }
.vorteil p { font-size: .87rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------
   Kleine Produktkacheln in einer Zeile ("Effiziente Lösungen")
   --------------------------------------------------------------------- */
.kachel-zeile { display: grid; grid-template-columns: repeat(var(--spalten, 5), 1fr); gap: var(--luecke); }
.kachel-zeile .produkt-karte { flex: none; }
.kachel-zeile .produkt-karte h3 { font-size: .92rem; }
.pkachel.mini { aspect-ratio: 4 / 4.2; }
.karussell .pkachel { flex: 0 0 280px; scroll-snap-align: start; aspect-ratio: 4 / 3.6; }
.pkachel.mini img { top: 38%; max-height: 62%; }
.pkachel.mini .fuss { flex-direction: column; align-items: flex-start; gap: 9px; left: 14px; right: 14px; bottom: 13px; }
.pkachel.mini .name { font-size: .95rem; }

/* aktive Branchen-Kachel ("Ihre Branche") */
.kategorie-karte.aktiv { outline: 3px solid var(--blau); outline-offset: -3px; }
.branchen-intro { color: var(--text-muted); max-width: 860px; margin: -8px 0 22px; }

/* ---------------------------------------------------------------------
   Team (unternehmen.html)
   --------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--luecke); }
.team-karte { background: var(--bg); border-radius: var(--radius); overflow: hidden; }
.team-karte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.team-karte .info { padding: 16px 18px 20px; }
.team-karte h3 { font-size: 1.05rem; margin-bottom: 2px; }
.team-karte .rolle { font-size: .78rem; font-weight: 700; color: var(--blau-tief); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.team-karte p { font-size: .85rem; color: var(--text-muted); }

/* Meilensteine (Firmengeschichte) */
.meilensteine { border-top: 1px solid var(--linie); margin-top: 24px; }
.meilenstein { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 10px 4px; border-bottom: 1px solid var(--linie); font-size: .92rem; }
.meilenstein .datum { font-weight: 700; color: var(--blau-tief); font-variant-numeric: tabular-nums; }

/* Infoseiten: Punkte-Liste + News */
.punkte-liste { list-style: none; margin: 8px 0 20px; }
.punkte-liste li { padding: 9px 0 9px 30px; position: relative; color: var(--text-muted); border-bottom: 1px solid var(--linie); }
.punkte-liste li::before { content: "✓"; position: absolute; left: 4px; color: var(--blau); font-weight: 800; }
.news-grid {
  margin-top: 14px; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: var(--luecke);
}
.news-karte {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.news-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); }
/* Die Titelbilder haben ganz unterschiedliche Formate (Fotos 4:3, freigestellte
   Maschinen hochkant). Deshalb einpassen statt zuschneiden - so fehlt an keinem
   Bild ein Rand, auch wenn dafür etwas Fläche frei bleibt. */
.news-karte .bild { aspect-ratio: 16 / 10; background: var(--bg); overflow: hidden; }
.news-karte .bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.news-karte .inhalt { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.news-karte .datum { font-size: .78rem; font-weight: 700; color: var(--blau-tief); font-variant-numeric: tabular-nums; }
.news-karte h2 { font-size: 1.05rem; margin: 0; }
.news-karte p { font-size: .92rem; color: var(--text-muted); line-height: 1.55; margin: 0; flex: 1; }
.news-karte .weiter { font-size: .88rem; font-weight: 700; color: var(--blau-tief); }
.news-detail { max-width: 760px; margin: 0 auto; }
.news-zurueck {
  display: inline-block; font-size: .9rem; font-weight: 600;
  color: var(--blau-tief); text-decoration: none; margin-bottom: 16px;
}
.news-detail .datum { font-size: .82rem; font-weight: 700; color: var(--blau-tief); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.news-detail h2 { font-size: 1.6rem; margin: 0 0 14px; }
.news-detail .bild {
  border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; background: var(--bg);
  display: flex; justify-content: center;
}
/* Hochkantbilder sonst über 1200 px hoch - Höhe begrenzen, Seitenverhältnis behalten */
.news-detail .bild img { max-width: 100%; max-height: 460px; width: auto; height: auto; display: block; }
.news-detail p { margin-bottom: 12px; line-height: 1.65; }

/* Fotogalerie und Downloads in einer News */
.news-galerie {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin: 24px 0 8px;
}
.news-galerie figure { margin: 0; }
.news-galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); background: var(--bg);
}
.news-galerie figcaption {
  font-size: .82rem; color: var(--text-muted); line-height: 1.45; margin-top: 7px;
}
.news-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.news-downloads .download-link {
  display: inline-block; padding: 10px 16px; border: 1px solid var(--linie);
  border-radius: var(--radius); background: #fff; text-decoration: none;
  font-weight: 700; font-size: .92rem; color: var(--blau-tief);
}
.news-downloads .download-link::before { content: "↓ "; }
.news-downloads .download-link:hover { border-color: var(--blau-tief); }
.news-downloads-liste { margin-top: 22px; padding-left: 20px; }
.news-downloads-liste li { margin-bottom: 6px; }
/* Eingebettete 3D-Ansicht */
.news-3d {
  margin: 8px 0 4px; border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; background: #fff;
}
.news-3d iframe { display: block; width: 100%; aspect-ratio: 3 / 2; border: 0; }
.news-detail h3 { font-size: 1.15rem; margin: 30px 0 12px; }
/* Fördersatz-Tabelle: Zahlen rechtsbündig, der neue Satz hervorgehoben */
.l-modelle.news-tabelle td:first-child { font-weight: 400; color: var(--text-muted); }
.news-tabelle th:not(:first-child), .news-tabelle td:not(:first-child) {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.news-tabelle td:nth-child(3) { color: var(--blau-tief); font-weight: 700; }
.news-tabelle td:nth-child(2) { color: var(--text-muted); }
@media (max-width: 620px) {
  .news-galerie { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------------------------------------------------------------------
   Referenzen – volle Breite
   --------------------------------------------------------------------- */
.referenzen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--luecke); }
.referenz { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; }
.referenz img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.referenz:hover img { transform: scale(1.03); }
.referenz .name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 18px 14px; color: #fff; font-weight: 700; font-size: .95rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .68));
}

/* ---------------------------------------------------------------------
   Footer – hell (Design von der Agentur)
   --------------------------------------------------------------------- */
.footer { background: var(--weiss); border-top: 1px solid var(--linie); margin-top: 40px; }
.footer-kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 44px 0 30px; border-bottom: 1px solid var(--linie);
}
.footer .logo img { height: 26px; }
.footer-kontakt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.footer-kontakt a {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--ink);
}
.footer-kontakt a:hover { color: var(--blau-tief); }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 36px;
  padding: 34px 0 44px;
}
.footer h3, .footer h4 {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 13px;
}
.footer-claim p { font-size: .88rem; color: var(--text-muted); margin-bottom: 12px; max-width: 400px; }
.footer-claim .btn { margin-top: 6px; }
.footer li { margin-bottom: 8px; font-size: .87rem; }
.footer a:hover { color: var(--blau-tief); }
/* Newsletter-Band im Footer */
.footer-newsletter {
  border-bottom: 1px solid var(--linie); padding: 26px 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: stretch;
}
.abo-karte {
  background: var(--bg); border-radius: var(--radius); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.abo-karte h4 { margin: 0; font-size: 1.02rem; }
.abo-karte p { font-size: .87rem; color: var(--text-muted); margin: 0; }
.abo-karte form { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; margin-top: auto; }
.abo-karte input {
  border: 1px solid var(--linie); border-radius: 4px; padding: 11px 14px;
  font: inherit; font-size: .9rem; flex: 1; min-width: 200px; background: var(--weiss); color: var(--text);
}
.abo-karte input:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
.wa-zeile { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.wa-zeile img { width: 84px; height: 84px; border-radius: 10px; border: 1px solid var(--linie); background: #fff; }
@media (max-width: 1080px) {
  .footer-newsletter { grid-template-columns: 1fr; }
}

.footer-unten {
  border-top: 1px solid var(--linie); padding: 16px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: var(--text-muted);
}

/* Social-Icons im Footer */
.footer-social { display: flex; gap: 14px; }
.footer-social a { display: inline-flex; color: var(--text-muted); transition: color .15s; }
.footer-social a:hover { color: var(--ink); }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; }

/* Social-Icons in der Topbar */
.topbar-social { display: inline-flex; gap: 10px; margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .25); }
.topbar-social a { display: inline-flex; color: rgba(255, 255, 255, .75); transition: color .15s; }
.topbar-social a:hover { color: #fff; }
.topbar-social svg { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 700px) { .topbar-social { display: none; } }

/* ---- Kategorie-Piktogramme (Katalogseite) ---- */
.kat-piktos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 26px;
}
.kat-pikto {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 18px 10px 14px; text-decoration: none;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--text); text-align: center;
  transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.kat-pikto:hover { border-color: var(--blau); transform: translateY(-1px); box-shadow: var(--schatten-hover); }
.kat-pikto .ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--bg); color: var(--blau-tief);
  transition: background .18s, color .18s;
}
.kat-pikto .ikon svg { width: 28px; height: 28px; }
.kat-pikto .name { font-size: .88rem; font-weight: 700; line-height: 1.25; }
.kat-pikto:hover .ikon { background: var(--blau); color: #fff; }
.kat-pikto.aktiv { border-color: var(--blau); background: #f2f8fd; }
.kat-pikto.aktiv .ikon { background: var(--blau); color: #fff; }
@media (max-width: 700px) {
  .kat-piktos { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .kat-pikto { padding: 14px 6px 12px; gap: 8px; }
  .kat-pikto .ikon { width: 44px; height: 44px; }
  .kat-pikto .ikon svg { width: 24px; height: 24px; }
  .kat-pikto .name { font-size: .78rem; }
}

/* ---- Download-Seite ---- */
.dl-container { max-width: 960px; }
.dl-abschnitt { font-size: 1.35rem; margin: 38px 0 10px; }
.dl-abschnitt:first-child { margin-top: 0; }
.dl-intro { color: var(--text-muted); margin-bottom: 14px; max-width: 720px; }
.dl-suche {
  width: 100%; max-width: 420px; padding: 10px 14px; margin-bottom: 16px;
  border: 1px solid var(--linie); border-radius: 999px; font-size: .95rem; font-family: inherit;
}
.dl-gruppe { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 6px 18px; margin-bottom: 14px; }
.dl-gruppe h3 { font-size: 1rem; color: var(--blau-tief); margin: 12px 0 4px; }
.dl-zeile {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; justify-content: space-between;
  padding: 10px 0; border-top: 1px solid #f0f2f4;
}
.dl-zeile:first-child, .dl-gruppe h3 + .dl-zeile { border-top: 0; }
.dl-produkt { font-weight: 700; color: var(--text); text-decoration: none; }
.dl-produkt:hover { color: var(--blau-tief); }
.dl-artikel { display: flex; flex-direction: column; }
.dl-artikel .quelle { font-size: .82rem; color: var(--text-muted); }
/* Mehrere Prospekte stehen untereinander, damit klar ist, dass es
   verschiedene Dateien sind (nicht ein Eintrag mit zwei Pfeilen). */
.dl-dateien { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dl-link { color: var(--blau-tief); font-weight: 700; text-decoration: none; font-size: .92rem; white-space: nowrap; max-width: 100%; }
.dl-link:hover { text-decoration: underline; }
/* Am Handy ist kein Platz fuer lange Titel in einer Zeile - dort darf der
   Name umbrechen, sonst schiebt er die ganze Seite zur Seite. */
@media (max-width: 860px) {
  .dl-link { white-space: normal; overflow-wrap: anywhere; }
}
.dl-portraet { background: var(--bg); border-radius: var(--radius); padding: 16px 20px; margin-top: 4px; }
.dl-portraet h3 { font-size: .95rem; margin-bottom: 6px; }
.dl-portraet p { line-height: 1.6; margin: 0; }

/* ---- FAQ ---- */
.faq-container { max-width: 860px; }
.faq-gruppe { font-size: 1.25rem; margin: 56px 0 14px; padding-top: 24px; border-top: 1px solid var(--linie); }
.faq-gruppe:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
details.faq-frage {
  background: var(--bg); border: 1.5px solid var(--linie); border-radius: 12px;
  margin-bottom: 10px; overflow: hidden; transition: border-color .15s, background .15s;
}
details.faq-frage:hover, details.faq-frage[open] { border-color: var(--blau); background: #fff; }
details.faq-frage summary {
  cursor: pointer; padding: 15px 46px 15px 18px; font-weight: 700; font-size: 1.02rem;
  list-style: none; position: relative;
}
details.faq-frage summary::-webkit-details-marker { display: none; }
details.faq-frage summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--blau); transition: transform .2s;
}
details.faq-frage[open] summary::after { content: "–"; }
details.faq-frage .antwort { padding: 0 18px 16px; }
details.faq-frage .antwort p { line-height: 1.65; color: var(--text); }
.faq-abschluss {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 30px; text-align: center; margin-top: 34px;
}
.faq-abschluss h2 { margin-bottom: 8px; font-size: 1.2rem; }
.faq-abschluss p { color: var(--text-muted); margin-bottom: 16px; }

/* ---- Gebrauchtmaschinen ---- */
.gebraucht-gruppe { font-size: 1.3rem; margin: 30px 0 14px; }
.gebraucht-gruppe:first-child { margin-top: 0; }
.gebraucht-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.gebraucht-mini {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.gebraucht-mini:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); }
.gebraucht-mini .foto { aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; }
.gebraucht-mini .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gebraucht-mini .info { padding: 12px 14px 14px; }
.gebraucht-mini h3 { font-size: 1rem; margin-bottom: 3px; }
.gebraucht-mini .meta { font-size: .85rem; color: var(--text-muted); margin-bottom: 7px; }
.gebraucht-mini .preis { font-weight: 800; color: var(--blau-tief); }
.gebraucht-zurueck {
  display: inline-block; color: var(--blau-tief); text-decoration: none;
  font-size: .9rem; font-weight: 600; margin-bottom: 12px;
}
.gebraucht-zurueck:hover { color: var(--ink); }
.gebraucht-detail { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 30px; align-items: start; }
.gebraucht-detail .haupt {
  background: var(--bg); border-radius: var(--radius); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gebraucht-detail .haupt img { width: 100%; height: 100%; object-fit: contain; }
.gebraucht-detail .thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gebraucht-detail .thumbs img {
  width: 72px; height: 54px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; background: var(--bg); display: block;
}
.gebraucht-detail .thumbs img.aktiv { border-color: var(--blau); }
.gebraucht-detail .preis { font-size: 1.35rem; font-weight: 800; color: var(--blau-tief); margin-bottom: 14px; }
.gebraucht-detail .beschreibung { line-height: 1.65; margin-top: 20px; }
.g-downloads { margin-top: 18px; background: var(--bg); border-radius: var(--radius); padding: 14px 18px; }
.g-downloads h3 { font-size: .95rem; margin-bottom: 8px; }
.g-downloads ul { list-style: none; margin: 0; padding: 0; }
.g-downloads li { margin-bottom: 6px; }
.g-downloads a { color: var(--blau-tief); font-weight: 700; text-decoration: none; }
.g-downloads a:hover { text-decoration: underline; }
.gebraucht-leer {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 44px 30px; text-align: center; max-width: 640px; margin: 0 auto;
}
.gebraucht-leer h2 { margin-bottom: 10px; }
.gebraucht-leer p { color: var(--text-muted); margin-bottom: 18px; }
@media (max-width: 800px) {
  .gebraucht-detail { grid-template-columns: 1fr; }
}

/* ---- Firmenseite GAI ---- */
/* Einheitlicher Seitenkopf nach Vorbild Anlagen-Berater: dunkles Band, Eyebrow, weisse Headline */
.gai-kopfband {
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 100%);
  color: #fff; padding: 26px 0 22px;
}
.gai-kopfband .eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #9ec9ec; margin-bottom: 10px;
}
.gai-kopfband h1 { font-family: "Archivo", sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.gai-kopfband p { max-width: 720px; margin-top: 10px; color: rgba(255, 255, 255, .82); font-size: 1rem; }
/* Herobilder der Unterseiten: Seitenrand und Rundung wie der Video-Hero der Startseite */
.gai-hero-bild { padding: 0 var(--rand); margin-top: var(--luecke); }
.gai-hero-bild img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.gai-hero-bild + .section { padding-top: 40px; }
.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; }
/* Nur oben und unten - die Kurzform wuerde den seitlichen Rand von
   .section.vollbreite ueberschreiben. */
.gai-seite .section { padding-top: 34px; padding-bottom: 34px; }
.gai-seite .section.grau { background: var(--bg); }
.gai-werkbild { width: 100%; border-radius: var(--radius); display: block; }
.gai-werk-text { max-width: 860px; margin: 18px auto 0; text-align: center; }
.gai-werk-text h2 { font-family: "Archivo", sans-serif; font-size: 1.7rem; margin-bottom: 8px; }
.gai-werk-text p { color: var(--text); }
.gai-h2 { font-family: "Archivo", sans-serif; font-size: 1.55rem; margin-bottom: 6px; }
.gai-untertext { color: var(--text-muted); max-width: 780px; margin-bottom: 20px; }
.gai-kpi-band { background: var(--bg); padding: 30px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.gai-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.gai-kpi .wert { display: block; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.45rem; color: var(--blau-tief); }
.gai-kpi .label { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 3px; line-height: 1.35; }
.gai-vorteile { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.gai-vorteil { background: var(--bg); border-radius: var(--radius); padding: 22px 24px; position: relative; }
.gai-vorteil .nr {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 2rem; color: var(--blau);
  line-height: 1; margin-bottom: 8px;
}
.gai-vorteil h3 { font-family: "Archivo", sans-serif; font-size: 1.1rem; margin-bottom: 8px; }
.gai-vorteil p { font-size: .92rem; color: var(--text); }
.gai-prozess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gai-schritt { background: var(--weiss); border-radius: var(--radius); padding: 20px; }
.gai-schritt .kreis {
  width: 38px; height: 38px; border-radius: 50%; background: var(--blau-tief); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.1rem; margin-bottom: 12px;
}
.gai-schritt h3 { font-size: 1rem; margin-bottom: 6px; }
.gai-schritt p { font-size: .87rem; color: var(--text-muted); }
.gai-fazit {
  margin-top: 20px; background: var(--bg); color: var(--ink); border-radius: var(--radius);
  padding: 18px 24px; font-weight: 600; font-size: 1rem;
}
.gai-bilderreihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.gai-bilderreihe img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); display: block; }
.gai-bilderreihe figcaption { font-size: .8rem; color: var(--text-muted); margin-top: 7px; }
.gai-video { max-width: 960px; margin: 0 auto; }
.gai-video video, .gai-video-platzhalter { width: 100%; border-radius: var(--radius); display: block; background: var(--ink); }
.gai-video-platzhalter { aspect-ratio: 16 / 9; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.gai-video-platzhalter .hinweis {
  position: absolute; inset: auto 0 0 0; padding: 13px 18px;
  background: rgba(12,20,29,.85); color: #fff; font-size: .92rem; font-weight: 700;
}
.gai-video-platzhalter .hinweis small { font-weight: 400; opacity: .8; }
.gai-video-text { text-align: center; color: var(--text-muted); font-size: .88rem; margin-top: 10px; }
.gai-referenzen { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.gai-referenz video { width: 100%; border-radius: var(--radius); display: block; background: var(--ink); }
.gai-referenz .titel { font-weight: 700; margin-top: 10px; }
.gai-zeit .meilensteine { columns: 2; column-gap: 44px; margin-top: 10px; }
.gai-zeit .meilenstein { break-inside: avoid; }
/* Abschlussband: abgerundete Karte mit Seitenrand wie die Abschluss-Kaesten
   der anderen Seiten, blauer Verlauf, weisse Schrift */
.gai-abschluss-band {
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 100%);
  color: #fff; padding: clamp(28px, 3.4vw, 44px) clamp(22px, 3.2vw, 44px);
  margin: 0 var(--rand) 44px; border-radius: var(--radius);
}
.gai-abschluss-band .container { padding: 0; }
.gai-abschluss-band .btn-primaer { background: #fff; color: var(--blau-tief); }
.gai-abschluss-band .btn-primaer:hover { background: #e6f0fa; color: var(--blau-tief); }
.gai-abschluss-band .btn-hell { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.55); }
.gai-abschluss-band .btn-hell:hover { background: rgba(255,255,255,.26); color: #fff; }
.gai-kopfband .btn-hell, .gai-kopfband .btn-umriss-hell { background: var(--blau-tief); color: #fff; border-color: var(--blau-tief); }
/* (aufgehoben - Kopfband ist jetzt dunkel mit weisser Schrift) */
.gai-abschluss-band h2 { font-family: "Archivo", sans-serif; font-size: 1.6rem; margin-bottom: 10px; color: #fff; }
.gai-abschluss-band p { max-width: 720px; color: #c9d6e2; }
.gai-abschluss-band .ctas { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
/* Prominenter GAI-Banner auf Produktseiten */
.gai-firmen-link {
  display: flex; align-items: center; gap: 22px;
  background: linear-gradient(100deg, var(--navy) 0%, #17293c 100%);
  border-radius: var(--radius); padding: 20px 26px; color: #fff;
  transition: filter .28s ease, transform .28s ease;
}
.gai-firmen-link:hover { filter: brightness(1.08); }
/* Produktfinder-Kachel im Produktkarten-Format (GAI blau, ENOS grün) */
/* Karte, bei der das Bild die ganze Fläche füllt – wie beim Produktfinder */
.produkt-karte.bild-voll .bild { padding: 0; background: var(--bg); }
.produkt-karte.bild-voll .bild img {
  width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; max-height: none;
}
.produkt-karte.finder-karte .bild { padding: 0; }
.produkt-karte.finder-karte.gai .bild { background: linear-gradient(135deg, var(--blau-tief) 0%, var(--blau) 100%); }
.produkt-karte.finder-karte.enos .bild { background: linear-gradient(135deg, #0d7040 0%, #17994f 100%); }
.produkt-karte.finder-karte.firma .bild { background: linear-gradient(135deg, var(--navy) 0%, #17293c 100%); }
.finder-karte.firma .finder-karte-knopf { background: var(--navy); }
.produkt-karte.finder-karte .bild img { mix-blend-mode: normal; width: 54%; max-height: 42%; object-fit: contain; }
.finder-karte-knopf {
  margin-top: auto; align-self: flex-start;
  background: var(--blau-tief); color: #fff; border-radius: 999px;
  padding: 8px 16px; font-weight: 700; font-size: .82rem;
}
.finder-karte.enos .finder-karte-knopf { background: #0d7040; }
.gai-firmen-link img.gai-logo { height: 34px; width: auto; display: block; flex-shrink: 0; }
.gai-firmen-link .text { flex: 1; }
.gai-firmen-link .text strong { display: block; font-family: "Archivo", sans-serif; font-size: 1.08rem; margin-bottom: 2px; }
.gai-firmen-link .text span { font-size: .87rem; color: rgba(255,255,255,.78); }
.gai-firmen-link .pfeilknopf {
  background: #fff; color: var(--navy); border-radius: 999px; padding: 10px 20px;
  font-weight: 700; font-size: .9rem; white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 900px) {
  .gai-kpis { grid-template-columns: repeat(3, 1fr); }
  .gai-vorteile { grid-template-columns: 1fr; }
  .gai-prozess { grid-template-columns: 1fr 1fr; }
  .gai-bilderreihe { grid-template-columns: 1fr; }
  .gai-referenzen { grid-template-columns: 1fr; }
  .gai-zeit .meilensteine { columns: 1; }
  .gai-firmen-link { flex-wrap: wrap; gap: 12px; }
}
/* Am Handy ist fuer zwei Spalten kein Platz mehr - die Texte wuerden die
   Seite seitlich hinausschieben. */
@media (max-width: 620px) {
  .gai-prozess { grid-template-columns: 1fr; }
  .gai-prozess > * { min-width: 0; }
}
/* Auf sehr schmalen Geraeten sind drei Kennzahlen nebeneinander zu eng. */
@media (max-width: 420px) {
  .gai-kpis { grid-template-columns: repeat(2, 1fr); }
  .gai-kpis > * { min-width: 0; }
}
/* Gründerfoto auf der Unternehmensseite */
.gruender-foto {
  float: right; width: min(240px, 42%); margin: 6px 0 14px 26px;
}
.gruender-foto img { width: 100%; display: block; border-radius: 4px; }
.gruender-foto figcaption {
  font-size: .78rem; color: var(--text-muted); margin-top: 7px; text-align: center;
}
@media (max-width: 560px) {
  .gruender-foto { float: none; width: 70%; margin: 0 auto 18px; }
}

/* Branchen-Kacheln als Flüssigkeiten (hochformatig) */
.branchen-fluessig { grid-template-columns: repeat(7, 1fr); }
.branchen-fluessig .kategorie-karte { aspect-ratio: 3 / 3.8; }
.branchen-fluessig .kategorie-karte .name small {
  display: block; font-family: "Inter", sans-serif; font-weight: 500;
  font-size: .75rem; color: rgba(255, 255, 255, .8); margin-top: 3px; line-height: 1.35;
}

/* ---------------------------------------------------------------------
   Katalog (produkte.html)
   --------------------------------------------------------------------- */
.katalog-layout {
  display: grid; grid-template-columns: 250px 1fr; column-gap: 44px;
  grid-template-areas: "filter kopf" "filter steuer" "filter grid";
  grid-template-rows: auto auto 1fr;
  align-content: start; padding-top: 44px; padding-bottom: 72px;
}
.katalog-kopf { grid-area: kopf; }
.katalog-steuer { grid-area: steuer; }
.filter { grid-area: filter; }
.katalog-layout > .katalog-grid { grid-area: grid; align-self: start; }

/* Steuerzeile ueber dem Katalog */
.katalog-steuer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.steuer-knopf {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--linie); border-radius: 999px; padding: 9px 16px;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.steuer-knopf svg { width: 18px; height: 18px; }
.steuer-knopf:hover { border-color: var(--blau); }
.steuer-knopf.aktiv { border-color: var(--blau); background: #f2f8fd; color: var(--blau-tief); }
.steuer-knopf.ikon { padding: 8px; border-radius: 9px; }
.ansicht-wahl { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.steuer-label { font-size: .85rem; color: var(--text-muted); font-weight: 600; margin-right: 2px; }
.filter-badge { display: none; background: var(--blau-knopf); color: #fff; border-radius: 999px; font-size: .75rem; font-weight: 700; padding: 1px 7px; }
.filter-badge.sichtbar { display: inline-block; }

/* Filtergruppen als Akkordeon */
.filter-gruppe { border-bottom: 1px solid var(--linie); }
.filter-gruppe:last-of-type { border-bottom: 0; }
.filter-gruppe > summary {
  list-style: none; cursor: pointer; padding: 13px 0; display: flex; align-items: center; gap: 8px;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--text);
}
.filter-gruppe > summary::-webkit-details-marker { display: none; }
.filter-gruppe > summary::after { content: "+"; margin-left: auto; font-size: 1.25rem; font-weight: 400; color: var(--blau); line-height: 1; }
.filter-gruppe[open] > summary::after { content: "\2013"; }
.gruppe-badge { background: var(--blau-knopf); color: #fff; border-radius: 999px; font-size: .7rem; padding: 1px 7px; letter-spacing: 0; }
/* Der Zähler ist nur dann eine Hilfe, wenn die Gruppe zugeklappt ist – bei offener
   Gruppe sieht man die gesetzten Haken ohnehin */
.filter-gruppe[open] .gruppe-badge, .gruppe-badge:empty { display: none; }
.filter-optionen { padding-bottom: 12px; }

/* Kompakte Kachelansicht */
.katalog-grid.kompakt { grid-template-columns: repeat(4, 1fr); }
.katalog-grid.kompakt .produkt-karte .info { padding: 10px 12px 12px; }
.katalog-grid.kompakt .produkt-karte h3 { font-size: .92rem; }
.katalog-grid.kompakt .produkt-karte p { font-size: .78rem; -webkit-line-clamp: 2; }

@media (min-width: 1101px) {
  .filter-knopf { display: none; }
}
.filter label { display: flex; align-items: center; gap: 10px; font-size: .9rem; padding: 5px 0; cursor: pointer; }
.filter input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blau-tief); }
.filter-reset { margin-top: 22px; font-size: .85rem; color: var(--blau-tief); font-weight: 700; display: none; }
.filter-reset.sichtbar { display: inline; }

.katalog-kopf h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 12px; }
.katalog-kopf p { color: var(--text-muted); max-width: 720px; margin-bottom: 10px; }
/* Downloads stehen fest ausgeklappt da */
.akkordeon-punkt.statisch button { pointer-events: none; cursor: default; }
.akkordeon-punkt.statisch button::after { display: none; }
.katalog-text { color: var(--text-muted); line-height: 1.6; max-width: 72ch; margin: 6px 0 4px; }
.katalog-text:empty { display: none; }
/* Zählzeile ist eine H2 (Überschriftenhierarchie), sieht aber aus wie Fließtext */
.katalog-anzahl { font-size: .85rem; font-weight: 400; color: var(--text-muted); margin-bottom: 20px; }

.katalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start; }
.katalog-grid .produkt-karte { flex: none; }
.katalog-leer { color: var(--text-muted); padding: 40px 0; }

/* ---------------------------------------------------------------------
   Produktseite (Stil: specialized.com Produktseite)
   --------------------------------------------------------------------- */
.krume { font-size: .82rem; color: var(--text-muted); padding-top: 16px; }
.krume a:hover { color: var(--blau-tief); }
.krume .trenn { margin: 0 7px; color: #b9c1c9; }

.kauf-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; padding-top: 16px; padding-bottom: 36px; align-items: start; }
.galerie-spalte { position: sticky; top: 64px; }
.galerie-spalte .hauptbild {
  background: var(--bg); border-radius: var(--radius); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; padding: 28px; overflow: hidden;
}
.galerie-spalte .hauptbild img { max-height: 100%; max-width: 100%; object-fit: contain; }
.galerie-spalte .hauptbild img[src*="png"] { mix-blend-mode: multiply; }
.galerie-spalte .hauptbild img.voll { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; border-radius: 6px; }
.thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.thumbs button {
  width: 78px; height: 60px; border-radius: 8px; background: var(--bg);
  border: 2px solid transparent; display: flex; align-items: center; justify-content: center;
  padding: 5px; overflow: hidden; transition: border-color .15s;
}
.thumbs button.aktiv, .thumbs button:hover { border-color: var(--blau); }
.thumbs img { max-height: 100%; max-width: 100%; object-fit: cover; border-radius: 4px; }

.kauf-info .hersteller { font-size: .76rem; font-weight: 700; color: var(--blau-tief); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.kauf-info h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; margin-bottom: 10px; }
.kauf-info .kurztext { color: var(--text-muted); font-size: .98rem; margin-bottom: 20px; }
.kauf-info .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 12px; }
.kauf-info .hinweis { font-size: .8rem; color: var(--text-muted); }

/* Werbebotschaft neben dem Produktbild */
.kauf-info .werbe {
  background: var(--bg); border-radius: 10px; padding: 18px 20px; margin-bottom: 20px;
}
.kauf-info .werbe h2, .kauf-info .werbe h3 { font-size: 1.02rem; margin-bottom: 6px; }
.kauf-info .werbe p { font-size: .9rem; color: var(--text-muted); }

/* "Auf einen Blick" kompakt in der rechten Spalte */
.blick-mini { margin-bottom: 22px; }
.blick-mini h2, .blick-mini h3 { font-size: 1.02rem; margin-bottom: 8px; }
.blick-mini .blick-liste { border-top: 1px solid var(--linie); margin-bottom: 0; }
.blick-mini .blick-zeile { grid-template-columns: 150px 1fr; padding: 9px 2px; font-size: .87rem; gap: 12px; }

/* Story-Block ("Bereit fürs nächste Abenteuer") */
.story {
  background: var(--bg); border-radius: var(--radius); margin: 0 var(--rand);
  text-align: center; padding: 60px 24px;
}
.story h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 8px 0 14px; }
.story p { max-width: 760px; margin: 0 auto; color: var(--text-muted); font-size: 1rem; }

/* "Auf einen Blick" */
.blick { max-width: 880px; padding: 52px var(--rand) 6px; }
.blick h2 { font-size: 1.55rem; margin-bottom: 16px; }
.blick-liste { border-top: 1px solid var(--linie); margin-bottom: 26px; }
.blick-zeile {
  display: grid; grid-template-columns: 230px 1fr; gap: 18px;
  padding: 13px 4px; border-bottom: 1px solid var(--linie); font-size: .94rem;
}
.blick-zeile .k { font-weight: 700; }
.blick-zeile .w { color: var(--text-muted); }

/* Feature-Abschnitte (Bild + Text abwechselnd) */
.feature-reihe {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--luecke);
  padding: 0 var(--rand); margin-top: var(--luecke); align-items: stretch;
}
.feature-reihe .bild {
  border-radius: var(--radius); overflow: hidden; background: var(--bg);
  min-height: 380px; display: flex; align-items: center; justify-content: center;
}
.feature-reihe .bild img { width: 100%; height: 100%; object-fit: cover; }
.feature-reihe.getauscht .bild { order: 2; }
.feature-reihe .text {
  border-radius: var(--radius); background: var(--bg);
  padding: 48px 5vw; display: flex; flex-direction: column; justify-content: center;
}
.feature-reihe .text h3 { font-size: clamp(1.25rem, 2.3vw, 1.8rem); margin-bottom: 12px; }
.feature-reihe .text p { color: var(--text-muted); font-size: .96rem; }

.varianten { margin-bottom: 22px; }
.varianten label { font-size: .78rem; font-weight: 700; color: var(--text-muted); display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.varianten select {
  width: 100%; max-width: 320px; padding: 12px 16px; font-family: inherit;
  font-size: .95rem; border: 1px solid var(--linie); border-radius: 999px; background: #fff;
}

.kpi-reihe { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.kpi { background: var(--bg); border-radius: 10px; padding: 13px 18px; min-width: 145px; }
.kpi .wert { font-family: "Archivo", sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.kpi .label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.akkordeon { border-top: 1px solid var(--linie); }
.akkordeon-punkt { border-bottom: 1px solid var(--linie); }
.akkordeon-punkt > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 17px 4px; font-size: 1.02rem; font-weight: 700;
  color: var(--text); font-family: "Archivo", "Inter", sans-serif; text-align: left;
}
.akkordeon-punkt > button::after { content: "⌄"; font-size: 1.2rem; color: var(--text-muted); transition: transform .2s; }
.akkordeon-punkt.offen > button::after { transform: rotate(180deg); }
.akkordeon-inhalt { display: none; padding: 0 4px 20px; color: var(--text-muted); font-size: .94rem; }
.akkordeon-punkt.offen .akkordeon-inhalt { display: block; }
.akkordeon-inhalt h3 { color: var(--text); font-size: .88rem; margin: 15px 0 6px; text-transform: uppercase; letter-spacing: .05em; font-family: "Inter", sans-serif; }
.akkordeon-inhalt h3:first-child { margin-top: 0; }

.technik-tabelle { width: 100%; border-collapse: collapse; }
.technik-tabelle td { padding: 10px 8px; border-bottom: 1px solid var(--linie); font-size: .92rem; }
.technik-tabelle td:first-child { font-weight: 600; color: var(--text); width: 42%; }

.angebot-reihe { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; padding-top: 36px; padding-bottom: 36px; align-items: center; }
/* GAI-Firmenbox über der Angebotsbox – gleiche Größe wie diese */
.firma-kachel-zeile { grid-column: 1; }
.firma-kachel-zeile ~ .angebot-box { grid-column: 1; }
.firma-kachel-zeile ~ .kontakt-neben { grid-column: 2; grid-row: 2; align-self: center; }
.gai-firma-box {
  position: relative; overflow: hidden;
  background-color: var(--bg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border-radius: var(--radius); padding: 22px 30px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.gai-firma-box::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(244, 246, 248, .82);
}
.gai-firma-box > * { position: relative; z-index: 1; }
.gai-firma-box h2, .gai-firma-box p { max-width: 62%; }

@media (max-width: 900px) {
  .gai-firma-box::before { background: rgba(244, 246, 248, .92); }
  .gai-firma-box h2, .gai-firma-box p { max-width: 100%; }
}
.gai-firma-logo { height: 22px; width: auto; margin-bottom: 0; }
.gai-firma-box h2 { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin: 0; }
.gai-firma-box p { color: var(--text-muted); font-size: .92rem; margin: 0 0 10px; }
.gai-firma-box .btn-hell { background: var(--blau-tief); color: #fff; }
.gai-firma-box .btn-hell:hover { background: var(--ink); color: #fff; }
.angebot-box {
  background: var(--bg); color: var(--text);
  border-radius: var(--radius); padding: 32px 30px;
}
.angebot-box .btn-hell { background: var(--blau-tief); color: #fff; }
.angebot-box .btn-hell:hover { background: var(--ink); color: #fff; }
.angebot-box h2 { font-size: 1.4rem; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.angebot-box p { color: var(--text-muted); font-size: .92rem; margin-bottom: 20px; }
.kontakt-neben h3 { font-size: 1.12rem; margin-bottom: 10px; }
.kontakt-neben p { font-size: .92rem; color: var(--text-muted); line-height: 1.9; }
.kontakt-neben a { color: var(--blau-tief); font-weight: 700; }

.galerie { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--luecke); }
.galerie .kachel {
  background: var(--bg); border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 200px;
}
.galerie .kachel img { width: 100%; height: 100%; object-fit: cover; }
.galerie .kachel:first-child { grid-row: span 2; }

/* ---------------------------------------------------------------------
   Produktseite: 70 % Bilder/Erklärung links (scrollt), 30 % Info rechts (steht)
   --------------------------------------------------------------------- */
.pdp {
  display: grid; grid-template-columns: 7fr 3fr; gap: 28px;
  grid-template-areas: "bildtop rechts" "links rechts";
  align-items: start; padding-top: 14px; padding-bottom: 40px;
}
.pdp-bild-top { grid-area: bildtop; min-width: 0; }
.pdp-links { grid-area: links; display: flex; flex-direction: column; gap: var(--luecke); min-width: 0; }
.pdp-bild {
  background: var(--bg); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; min-height: 340px; overflow: hidden;
}
.pdp-bild img { max-height: 580px; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Hauptbild: pdpBildZoom (produkt.js) zoomt den Weissraum des Quadrats weg */
.pdp-bild.haupt img { transition: transform .25s ease; }
.pdp-bild.voll { padding: 0; overflow: hidden; }
.pdp-bild.voll img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; mix-blend-mode: normal; }
.pdp-text { padding: 14px 6px 6px; }
.pdp-text h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-bottom: 8px; }
/* Der erste Textblock traegt die Geschichte - fast so gross wie der Produktname */
.pdp-links > .pdp-text:first-child h3 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 10px; text-wrap: balance; }
.pdp-text p { color: var(--text-muted); font-size: .96rem; }
.pdp-rechts { grid-area: rechts; position: sticky; top: 62px; }

/* Landing-Sektionen innerhalb der linken Spalte */
.pdp .landing { margin: 0; }
.pdp .l-sektion { padding: 44px 30px; }
.pdp .l-hinweis, .pdp .l-tabelle-scroll { max-width: none; }

/* ---------------------------------------------------------------------
   Dunkle Produkt-Landingpage (z. B. GAI Serie Y)
   --------------------------------------------------------------------- */
.landing {
  background: var(--weiss); color: var(--text);
  border-radius: var(--radius); overflow: hidden;
  margin: var(--luecke) var(--rand) 24px;
}
.landing h2 {
  color: var(--ink); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 800;
  margin-bottom: 12px; text-align: center;
}
.landing .l-intro {
  color: var(--text-muted); max-width: 640px; margin: 0 auto 34px; text-align: center;
}
.l-sektion { padding: 64px 5vw; border-top: 1px solid var(--linie); }
.landing .l-sektion:first-child { border-top: 0; }

/* Innovations-Sektion mit Callouts */
.l-bild { display: flex; justify-content: center; margin-bottom: 36px; }
.l-bild img { max-width: 100%; max-height: 480px; width: auto; object-fit: contain; border-radius: 12px; }
.l-callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1100px; margin: 0 auto; }
.l-callout { background: var(--bg); border-radius: 12px; padding: 20px 22px; }
.l-callout h3 { color: var(--ink); font-size: 1rem; margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; }
.l-callout .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--blau); flex: 0 0 9px; box-shadow: 0 0 0 4px rgba(72, 152, 216, .22); }
.l-callout li, .l-box li {
  font-size: .88rem; color: var(--text-muted);
  padding: 5px 0 5px 16px; position: relative;
}
.l-callout li::before, .l-box li::before { content: "–"; position: absolute; left: 0; color: var(--blau-tief); }

/* Split-Sektionen (Text + Bild) */
.l-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; max-width: 1100px; margin: 0 auto; }
.l-split h2, .l-split .l-intro { text-align: left; margin-left: 0; }
.l-split.getauscht > div:first-child { order: 2; }
.l-split-bild img { width: 100%; max-height: 480px; object-fit: contain; border-radius: 12px; }
.l-box { background: var(--bg); border-left: 3px solid var(--blau); border-radius: 0 12px 12px 0; padding: 18px 22px; }
.l-box h3 { color: var(--ink); font-size: 1rem; margin-bottom: 8px; }

/* Ausstattungsmatrix + Modelltabelle */
.l-tabelle-scroll { overflow-x: auto; max-width: 1000px; margin: 0 auto; }
.l-matrix, .l-modelle { width: 100%; border-collapse: collapse; font-size: .85rem; }
.l-matrix th, .l-modelle th {
  text-align: left; padding: 10px 12px; color: var(--ink); font-family: "Archivo", sans-serif;
  border-bottom: 2px solid var(--ink); font-size: .82rem; letter-spacing: .05em;
}
.l-matrix th:nth-child(n+3), .l-matrix td.wert { text-align: center; }
.l-matrix td, .l-modelle td { padding: 9px 12px; border-bottom: 1px solid var(--linie); color: var(--text-muted); }
.l-matrix td.gruppe {
  font-family: "Archivo", sans-serif; font-weight: 700; color: var(--ink); text-transform: uppercase;
  font-size: .75rem; letter-spacing: .08em; vertical-align: top; width: 110px;
  border-right: 1px solid var(--linie);
}
.l-matrix .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--blau); }
.l-modelle td:first-child { color: var(--ink); font-weight: 700; }
.l-hinweis { font-size: .78rem; color: var(--text-muted); max-width: 1000px; margin: 12px auto 0; }

/* Umstellungsgrafik alt -> neu (Filterschichten) */
.l-ersatz { max-width: 1000px; margin: 0 auto; display: grid; gap: 8px; }
.l-ersatz-kopf {
  display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center;
  font-family: "Archivo", sans-serif; font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); padding: 0 2px 4px;
}
.l-ersatz-kopf span:last-child { grid-column: 3; }
.l-ersatz-zeile { display: grid; grid-template-columns: 1fr 46px 1fr; align-items: stretch; gap: 0; }
.l-ersatz-zeile .e-alt, .l-ersatz-zeile .e-neu {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 11px 14px; border-radius: var(--radius); font-size: .9rem; font-weight: 700;
}
.l-ersatz-zeile .e-alt { background: #6c7480; color: #fff; }
.l-ersatz-zeile .e-neu { background: #e8f1fa; color: var(--blau-tief); border: 1px solid #d3e4f4; }
.l-ersatz-zeile .e-neu em {
  font-style: normal; font-weight: 500; font-size: .78rem; color: var(--text-muted);
}
.l-ersatz-zeile .e-pfeil {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1.1rem;
}
.l-ersatz-zeile.ohne .e-neu {
  background: var(--bg); border: 1px dashed var(--linie); color: var(--text-muted); font-weight: 500;
}
.l-ersatz-zeile.ohne .e-pfeil { color: #c25b5b; }
@media (max-width: 700px) {
  .l-ersatz-kopf { display: none; }
  .l-ersatz-zeile { grid-template-columns: 1fr; gap: 2px; }
  .l-ersatz-zeile .e-pfeil { transform: rotate(90deg); height: 20px; }
}
/* Optionen-Karten */
.l-optionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1100px; margin: 0 auto; }

/* YouTube-Videokacheln auf Produktseiten */
.l-videos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 1100px; margin: 0 auto; text-align: left;
}
.l-videos .video-karte { flex: none; }
@media (max-width: 760px) {
  .l-videos { grid-template-columns: 1fr; }
}

/* Video-Sektion auf Produktseiten */
.l-video video {
  display: block; width: 100%; max-width: 900px; margin: 0 auto;
  border-radius: 12px; background: #000;
}
/* Hochformat (Handyaufnahmen) schmaler, sonst füllt es die halbe Seite */
.l-video.hoch video { max-width: 380px; }
/* Eingebettete 3D-Ansicht auf Produktseiten */
.l-3d {
  margin: 0 auto; border: 1px solid var(--linie);
  border-radius: 12px; overflow: hidden; background: #fff;
}
.l-3d iframe { display: block; width: 100%; aspect-ratio: 3 / 2; border: 0; overflow: hidden; }

/* ---------------------------------------------------------------------
   Produktseite mit breitem Aufmacher
   --------------------------------------------------------------------- */
.pdp-hero-breit { width: 100%; background: var(--bg); margin-bottom: 4px; }
.pdp-hero-breit .hero-breit-bild { width: 100%; }
.pdp-hero-breit .hero-breit-bild img {
  width: 100%; height: clamp(260px, 42vw, 560px); object-fit: cover; display: block;
}
.pdp.hat-hero { padding-top: 26px; }
.pdp.hat-hero .pdp-bild-top { display: none; }
.pdp.hat-hero { grid-template-areas: "links rechts"; }

/* Eckdaten in der rechten Spalte */
.kauf-info .fakten { margin-top: 18px; }
.kauf-info .fakten h2, .kauf-info .fakten h3 { font-size: 1rem; margin: 0 0 10px; color: var(--ink); }
.fakten-liste { display: flex; flex-direction: column; }
.fakten-zeile {
  display: grid; grid-template-columns: 106px 1fr; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: .88rem;
}
.fakten-zeile:last-child { border-bottom: 0; }
.fakten-zeile .k { color: var(--text-muted); font-weight: 700; }
.fakten-zeile .w { color: var(--ink); }

/* Bildergalerie 2 x 2, zum Vergrößern anklickbar */
.l-galerie {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 1000px; margin: 0 auto;
}
.l-galerie-bild {
  padding: 0; border: 1px solid var(--linie); background: var(--bg);
  border-radius: var(--radius); overflow: hidden; cursor: zoom-in; display: block;
  transition: transform .25s ease, box-shadow .25s ease;
}
.l-galerie-bild:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); }
.l-galerie-bild:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.l-galerie-bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

/* Video über die volle Breite */
.l-video-breit {
  position: relative; display: block; max-width: 1000px; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden; text-decoration: none; background: #000;
}
.l-video-breit img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .5s ease; }
.l-video-breit:hover img { transform: scale(1.02); }
.l-video-breit .play {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: var(--blau-tief); border-radius: 50%;
}
.l-video-breit .titel {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 24px 18px;
  color: #fff; font-weight: 700; font-size: 1.02rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
}

/* Schrittliste zweispaltig */
.l-schritte-split.zweispaltig { display: block; }
.l-schritte-split.zweispaltig .l-schritte {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px;
}

/* Bild groß im Overlay */
.bild-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(10,14,18,.92);
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
}
.bild-overlay img {
  max-width: 100%; max-height: 92vh; border-radius: 8px; display: block;
  background: #fff; padding: 14px;
}
.bild-overlay .schliessen {
  position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.bild-overlay .schliessen:hover { background: rgba(255,255,255,.28); }

@media (max-width: 900px) {
  .l-galerie { grid-template-columns: 1fr; }
  .l-schritte-split.zweispaltig .l-schritte { grid-template-columns: 1fr; }
  .pdp.hat-hero { grid-template-areas: "links" "rechts"; }
}

/* ---------------------------------------------------------------------
   Startseite: Teaser für die mobilen Abfüllanlagen
   --------------------------------------------------------------------- */
.mobil-teaser {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--luecke); align-items: center;
}
.mobil-bild { border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.mobil-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mobil-text h2 { font-size: 1.85rem; margin: 6px 0 12px; text-wrap: balance; }
.mobil-text p { color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; max-width: 52ch; }
.mobil-formen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
/* Maschinenart unter dem Produktnamen */
.pdp-gattung {
  font-size: .92rem; color: var(--text-muted);
  margin: -6px 0 10px;
}

.mobil-form {
  font-size: .82rem; font-weight: 700; color: var(--blau-tief);
  background: var(--bg); border: 1px solid var(--linie);
  border-radius: 999px; padding: 6px 14px;
}
@media (max-width: 960px) {
  .mobil-teaser { grid-template-columns: 1fr; gap: 20px; }
  .mobil-text h2 { font-size: 1.5rem; }
}
.l-video-platzhalter {
  max-width: 700px; margin: 0 auto; padding: 34px 26px;
  background: var(--bg); border: 1px dashed var(--linie); border-radius: 12px;
  color: var(--text-muted); text-align: center; font-size: .95rem;
}

/* Ventil-Diagramm unter der Vorteile-Box */
.l-diagramm { max-width: 760px; margin: 26px auto 0; }
.l-diagramm img { width: 100%; background: #fff; border-radius: 12px; border: 1px solid var(--linie); }
.l-untertitel.zentriert { text-align: center; }
.l-option { background: var(--bg); border-radius: 12px; overflow: hidden; }
.l-option .bild { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.l-option .bild img { width: 100%; height: 100%; object-fit: contain; }
.l-option .name { padding: 12px 14px; font-weight: 600; font-size: .9rem; color: var(--ink); }

/* Ventil-Funktionsweise in Schritten */
.l-schritte-split {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  align-items: center; max-width: 1100px; margin: 0 auto 22px;
}
.l-schritte { display: flex; flex-direction: column; gap: 18px; }
.l-schritt { display: flex; gap: 16px; align-items: flex-start; text-align: left; }
.l-schritt .nr {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--blau-knopf); color: #fff; font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.l-schritt h3 { color: var(--ink); font-size: 1rem; margin-bottom: 3px; }
.l-schritt p { color: var(--text-muted); font-size: .92rem; margin: 0; }
.l-box.breit { max-width: 1100px; margin: 0 auto; text-align: left; }

/* Modellnummern-Erklärung */
.l-untertitel {
  max-width: 1100px; margin: 30px auto 12px; text-align: left;
  color: var(--ink); font-size: 1.05rem;
}
.l-nummer-beispiel {
  display: flex; gap: 34px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin: 26px auto 8px; max-width: 1100px;
}
.l-nummer { display: flex; font-family: "Archivo", Inter, sans-serif; }
.l-nummer .teil {
  font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 800; line-height: 1;
  padding: 10px 18px; border-radius: 14px;
}
.l-nummer .teil.groesse { background: var(--bg); color: var(--ink); border: 2px solid var(--linie); border-radius: 14px 0 0 14px; border-right: none; }
.l-nummer .teil.serie { background: var(--blau-knopf); color: #fff; border-radius: 0 14px 14px 0; }
.l-nummer-legende { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.l-nummer-legende .zeile { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: .95rem; }
.l-nummer-legende .punkt { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.l-nummer-legende .groesse .punkt { background: var(--linie); }
.l-nummer-legende .serie .punkt { background: var(--blau); }
.l-serien {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 1100px; margin: 0 auto; text-align: left;
}
.l-serie {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border-radius: 10px; padding: 10px 14px;
  color: var(--text-muted); font-size: .92rem;
}
.l-serie .ziffer {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  background: var(--blau); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 960px) {
  .l-callouts { grid-template-columns: 1fr; }
  .l-split { grid-template-columns: 1fr; gap: 26px; }
  .l-split.getauscht > div:first-child { order: 0; }
  .l-optionen { grid-template-columns: repeat(2, 1fr); }
  .l-schritte-split { grid-template-columns: 1fr; gap: 26px; }
  .l-serien { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Produktfinder – Startseiten-Kacheln (GAI links, ENOS rechts)
   --------------------------------------------------------------------- */
.finder-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luecke); }
.finder-kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px 26px; border-radius: 12px;
  text-decoration: none; color: #fff;
  transition: filter .28s ease, transform .28s ease;
}
.finder-kachel:hover { filter: brightness(1.07); transform: translateY(-2px); }
.finder-kachel.blau { background: linear-gradient(115deg, var(--blau-tief), var(--blau)); }
.finder-kachel.gruen { background: linear-gradient(115deg, #0d7040, #17994f); }
.finder-kachel .marken-logo { height: 34px; width: auto; display: block; }
.finder-kachel h3 { font-size: 1rem; margin: 0 0 2px; color: #fff; }
.finder-kachel p { color: rgba(255, 255, 255, .85); font-size: .88rem; margin: 0; }
.finder-kachel .finder-cta {
  display: inline-block; background: #fff; color: var(--blau-tief);
  font-weight: 700; font-size: .88rem;
  padding: 9px 20px; border-radius: 999px; margin-top: 2px;
}
.finder-kachel.gruen .finder-cta { color: #0d7040; }
.finder-kachel:hover .finder-cta { box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }

/* ---------------------------------------------------------------------
   Produktfinder – Seite mit den Vergleichstabellen
   --------------------------------------------------------------------- */
.finder-seite { padding-top: 10px; padding-bottom: 40px; }
.finder-kopf { max-width: 820px; padding: 18px 0 6px; }
.finder-kopf h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; margin-bottom: 10px; }
.finder-kopf p { color: var(--text-muted); margin-bottom: 10px; }
.finder-wechsel { color: var(--blau-tief); font-weight: 700; text-decoration: none; font-size: .95rem; display: inline-block; padding: 5px 2px; margin: -5px -2px; }
.finder-wechsel:hover { text-decoration: underline; }
.finder-block { max-width: 980px; margin: 30px auto 0; }
.finder-block h2 { font-size: 1.35rem; margin-bottom: 14px; }
.finder-scroll { overflow-x: auto; border: 1px solid var(--linie); border-radius: 12px; max-width: 980px; }
.finder-tabelle.matrix thead tr:not(.gruppenzeile) th { white-space: normal; font-size: .78rem; padding: 8px 5px; text-align: center; vertical-align: bottom; }
.finder-tabelle { width: 100%; border-collapse: collapse; font-size: .85rem; background: #fff; }
.finder-tabelle th {
  background: var(--bg); color: var(--ink); font-weight: 700;
  padding: 10px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--linie);
}
.finder-tabelle .gruppenzeile th {
  background: var(--ink); color: #fff; text-align: center;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
}
.finder-tabelle .gruppenzeile th:first-child { background: transparent; border-bottom: 0; }
.finder-tabelle.matrix thead tr:not(.gruppenzeile) th:first-child,
.finder-tabelle.enos thead tr:not(.gruppenzeile) th:first-child { background: transparent; border-bottom: 0; }
/* Farbliche Trennung der Leistungsgruppen: bis 3.000 = Blau, über 3.000 = Orange */
.finder-tabelle .gruppenzeile th.g0 { background: var(--blau-tief); }
.finder-tabelle .gruppenzeile th.g1 { background: #a85c1a; }
.finder-tabelle th.g0 { background: #e3eff9; }
.finder-tabelle th.g1 { background: #faeddd; }
.finder-tabelle td.wert.g0 { background: rgba(72, 152, 216, .07); }
.finder-tabelle td.wert.g1 { background: rgba(217, 123, 44, .09); }
.finder-tabelle th.gstart, .finder-tabelle td.gstart { border-left: 3px solid #d97b2c; }
.finder-tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--linie); color: var(--text-muted); }
.finder-tabelle tr:last-child td { border-bottom: none; }
.finder-tabelle.matrix th, .finder-tabelle.matrix td.wert { text-align: center; }
.finder-tabelle.matrix th:first-child, .finder-tabelle.matrix td.merkmal { text-align: left; }
.finder-tabelle td.merkmal, .finder-tabelle td.modell { font-weight: 600; color: var(--ink); white-space: nowrap; }
.finder-tabelle .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--blau); }
.finder-modell { color: #c8102e; font-weight: 700; text-decoration: none; }
a.finder-modell:hover { text-decoration: underline; }
.finder-modell.stumm { cursor: default; }
/* Die Modellnamen in der Tabelle sind Links zur jeweiligen Maschine. Am Handy
   sind sie sonst nur rund 28x15 Pixel gross und kaum zu treffen. */
@media (max-width: 860px) {
  a.finder-modell { display: inline-block; padding: 6px 4px; margin: -6px -4px; }
}
.finder-hinweis { color: var(--text-muted); font-size: .82rem; margin-top: 10px; }

/* ENOS-Finder: visuelle Vergleichsmatrix */
.finder-legende {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  margin-bottom: 12px; font-size: .85rem; color: var(--text-muted);
}
/* Die Erklaerzeile darf auf schmalen Geraeten umbrechen, statt seitlich
   hinauszuragen. */
.finder-legende > span { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; flex-wrap: wrap; }
.fsym { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.fsym.voll { width: 12px; height: 12px; border-radius: 50%; background: #17994f; }
.fsym.leer { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #17994f; background: #fff; box-sizing: border-box; }
.fsym.kein { color: #98a3ad; font-weight: 600; }
.fsym.fzahl.opt { background: #fff; border: 2px solid #17994f; box-sizing: border-box; }
.fsym.fzahl {
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: #e2f2e8; color: #0d7040; font-weight: 700; font-size: .8rem;
}
.finder-tabelle.enos th.e0 { background: #e3eff9; }
.finder-tabelle.enos th.e1 { background: #e2f2e8; }
.finder-tabelle.enos th.e2 { background: #faeddd; }
.finder-tabelle.enos .gruppenzeile th.e0 { background: var(--blau-tief); }
.finder-tabelle.enos .gruppenzeile th.e1 { background: #0d7040; }
.finder-tabelle.enos .gruppenzeile th.e2 { background: #a85c1a; }
.finder-tabelle.enos th.gstart-e, .finder-tabelle.enos td.gstart-e { border-left: 3px solid #0d7040; }
.finder-tabelle.enos th.gstart-l, .finder-tabelle.enos td.gstart-l { border-left: 3px solid #d97b2c; }
.finder-tabelle.enos th.hoch { vertical-align: bottom; padding: 10px 6px; text-align: center; }
.finder-tabelle.enos th.hoch span {
  writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block;
  font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.finder-tabelle.enos td.sym { text-align: center; background: rgba(23, 153, 79, .04); }
.finder-tabelle.enos th.leistung-sub { vertical-align: bottom; font-weight: 600; }
.finder-tabelle.enos td.form { text-align: center; }
.fformen { display: inline-flex; gap: 8px; align-items: center; }
.fform-wrap { display: inline-flex; color: var(--ink); }
.fform-wrap svg { width: 18px; height: 24px; }
.finder-legende .fform-wrap svg { width: 14px; height: 19px; }
.finder-tabelle.enos td.grund { font-size: .84rem; }
.finder-tabelle.enos td.leistung { min-width: 265px; padding: 8px 12px; }
.fbar-zeile { display: grid; grid-template-columns: minmax(92px, auto) 1fr 44px; align-items: center; gap: 8px; padding: 2px 0; }
.fbar-art { font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.fbar-spur { height: 8px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.fbar { display: block; height: 100%; background: linear-gradient(90deg, #17994f, #0d7040); border-radius: 4px; }
.fbar-wert { font-size: .78rem; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.finder-tabelle.enos tr.modellgruppe td {
  background: #f4f6f8; color: var(--ink); font-weight: 800; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em; padding: 8px 12px;
  border-left: 3px solid #17994f;
}
.finder-tabelle.enos tbody tr:not(.modellgruppe):hover td { background: #f2f7f3; }
.modell-hinweis { display: block; font-weight: 500; color: var(--text-muted); font-size: .75rem; margin-top: 2px; white-space: normal; max-width: 150px; }

.finder-fuss {
  margin-top: 36px; padding: 26px; background: var(--bg); border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.finder-fuss p { color: var(--ink); font-weight: 600; margin: 0; }

@media (max-width: 860px) {
  .finder-zeile { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Referenzvideos (YouTube-Kacheln im Karussell)
   --------------------------------------------------------------------- */
.video-karte {
  flex: 0 0 calc((100% - 4 * var(--luecke)) / 5); min-width: 220px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; scroll-snap-align: start;
}
.video-karte .bild {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: var(--ink);
}
.video-karte .bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.video-karte:hover .bild img { transform: scale(1.025); }
.video-karte .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(16, 20, 24, .78); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.video-karte:hover .play { background: var(--blau); }
.video-karte .titel {
  font-weight: 700; color: var(--ink); font-size: .95rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Referenzvideos auf der Startseite im Produktkachel-Format (weiße Karte, quadratisches Bild) */
.karussell .video-karte {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; gap: 0; transition: transform .3s ease, box-shadow .3s ease;
}
.karussell .video-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); }
.karussell .video-karte .bild { aspect-ratio: 1 / 1; border-radius: 0; }
.karussell .video-karte .titel { padding: 12px 16px 16px; font-size: .92rem; }
/* Wie die Top-Seller: 4 Karten pro Ansicht, die fuenfte als Anriss */
.karussell .video-karte { flex-basis: calc((100% - 4 * var(--luecke)) / 4.3); min-width: 0; }
@media (max-width: 900px) { .karussell .video-karte { flex-basis: calc((100% - 2 * var(--luecke)) / 2.3); } }
@media (max-width: 540px) { .karussell .video-karte { flex-basis: 78%; } }
/* Video-Overlay: spielt das YouTube-Video auf der eigenen Seite ab */
.video-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 14, 18, .88);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
}
.video-overlay .rahmen {
  width: min(1000px, 92vw); aspect-ratio: 16 / 9;
  background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
.video-overlay iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-overlay .schliessen {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.5rem;
  cursor: pointer; line-height: 1;
}
.video-overlay .schliessen:hover { background: rgba(255, 255, 255, .28); }

.video-kanal { margin-top: 14px; color: var(--text-muted); font-size: .9rem; }
.video-kanal a { color: var(--blau-tief); font-weight: 700; text-decoration: none; }
.video-kanal a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Inhaltsseiten (Unternehmen, Kontakt, Infoseiten)
   --------------------------------------------------------------------- */
/* seite-kopf im selben dunklen Band-Design */
.seite-kopf {
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 100%);
  color: #fff; padding: 26px 0 22px;
}
.seite-kopf .eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #9ec9ec; margin-bottom: 10px;
}
.seite-kopf h1 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; margin-bottom: 10px; }
.seite-kopf p { color: rgba(255, 255, 255, .82); max-width: 720px; }
.inhalt { padding-top: 44px; padding-bottom: 72px; max-width: 760px; margin: 0 auto; }
.inhalt.inhalt-breit { max-width: none; }
.inhalt.inhalt-breit > p { max-width: 760px; }
.inhalt h2 { font-size: 1.4rem; margin: 30px 0 10px; }
.inhalt p { color: var(--text-muted); margin-bottom: 14px; }

.kontakt-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; padding-top: 44px; padding-bottom: 72px; }
.kontakt-daten h2 { font-size: 1.2rem; margin-bottom: 14px; }
.kontakt-daten p { color: var(--text-muted); line-height: 2; margin-bottom: 20px; }
.kontakt-daten a { color: var(--blau-tief); font-weight: 700; }
.kontakt-formular { display: flex; flex-direction: column; gap: 14px; }
.kontakt-formular label { font-size: .85rem; font-weight: 600; }
.kontakt-formular input, .kontakt-formular textarea {
  width: 100%; padding: 12px 16px; border: 1px solid var(--linie); border-radius: 10px;
  font-family: inherit; font-size: .95rem; margin-top: 6px;
}
.kontakt-formular textarea { min-height: 140px; resize: vertical; }

/* ---------------------------------------------------------------------
   Responsiv
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .kategorien-reihe { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .neuheiten-grid { grid-template-columns: 1fr; }
  .neuheit, .neuheit:nth-child(3n) { grid-column: span 1; aspect-ratio: 16 / 10; }
  .hero-flaeche { min-height: 0; }
  .hero-produkt { grid-template-columns: 1fr; gap: 24px; }
  .hero-bild img { max-height: 34vh; }
  .vorteile-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .katalog-grid { grid-template-columns: repeat(2, 1fr); }
  .kauf-hero { grid-template-columns: 1fr; }
  .galerie-spalte { position: static; }
  .pdp { grid-template-columns: 1fr; grid-template-areas: "bildtop" "rechts" "links"; }
  .pdp-rechts { position: static; }
  .feature-reihe { grid-template-columns: 1fr; }
  .feature-reihe.getauscht .bild { order: 0; }
  .blick-zeile { grid-template-columns: 1fr; gap: 2px; }
  .angebot-reihe { grid-template-columns: 1fr; }
  /* Einspaltig gibt es keine zweite Spalte mehr - ohne diese Ruecknahme
     erzeugt das Raster sie trotzdem und die Seite wird zu breit. */
  .firma-kachel-zeile, .firma-kachel-zeile ~ .angebot-box, .firma-kachel-zeile ~ .kontakt-neben {
    grid-column: 1; grid-row: auto;
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .kb-innen { grid-template-columns: 1fr; }
  .karten-reihe.s2, .karten-reihe.s3 { grid-template-columns: 1fr; }
  /* Neuheiten-Reihe am Handy seitlich scrollen - gleiches Verhalten wie die Top-Seller */
  .karten-reihe.s4, .karten-reihe.s5 {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-bottom: 12px;
  }
  .karten-reihe.s4::-webkit-scrollbar, .karten-reihe.s5::-webkit-scrollbar { display: none; }
  .karten-reihe.s4 .produkt-karte, .karten-reihe.s5 .produkt-karte {
    flex: 0 0 calc((100% - 2 * var(--luecke)) / 2.3); scroll-snap-align: start;
  }
  .produkt-karte.breit .bild { aspect-ratio: 3 / 2; }
  .katalog-layout { grid-template-columns: 1fr; grid-template-areas: "kopf" "steuer" "filter" "grid"; }
  .filter { display: none; border: 1px solid var(--linie); border-radius: var(--radius); padding: 4px 18px; margin-bottom: 18px; }
  .filter.offen { display: block; }
  .katalog-grid.kompakt { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .kachel-zeile { grid-template-columns: repeat(3, 1fr); }
  .video-karte { flex-basis: calc((100% - 2 * var(--luecke)) / 3); min-width: 0; }
}

@media (max-width: 720px) {
  .nav { display: none; }
  .kachel-zeile { grid-template-columns: repeat(2, 1fr); }
  .video-karte { flex-basis: calc((100% - var(--luecke)) / 2); }
  .kategorien-reihe { grid-template-columns: repeat(2, 1fr); }
  .referenzen-grid { grid-template-columns: 1fr; }
  .vorteile-grid { grid-template-columns: 1fr; }
  /* Das Team bleibt auch am Handy zweispaltig - einspaltig waeren es acht
     Bildschirmseiten nur fuer die Portraets. */
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .team-karte .info { padding: 11px 12px 14px; }
  .team-karte h3 { font-size: .92rem; }
  .team-karte .rolle { font-size: .75rem; letter-spacing: .04em; }
  .news-grid { grid-template-columns: 1fr; }
  /* Handy: grosse Ansicht = 1 Karte in voller Breite, kleine Ansicht = 2 pro Reihe */
  .katalog-grid { grid-template-columns: 1fr; }
  .katalog-grid.kompakt { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .galerie { grid-template-columns: 1fr 1fr; }
  .galerie .kachel:first-child { grid-column: span 2; grid-row: auto; }
  .kontakt-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .kb-zeile { grid-template-columns: 1fr; }
  .footer-kontakt { align-items: flex-start; }
  .section { padding: 42px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Fehlerseite 404 */
.fehler-suche { max-width: 720px; }
.fehler-suche label { display: block; font-family: "Archivo", sans-serif; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.fehler-suchzeile { display: flex; gap: 8px; margin-bottom: 26px; }
.fehler-suchzeile input { flex: 1; padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--radius); font-size: .95rem; background: var(--weiss); }
.fehler-suchzeile input:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
.fehler-wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fehler-weg { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none; transition: box-shadow .3s ease, transform .3s ease; }
.fehler-weg:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); }
.fehler-weg strong { color: var(--ink); font-size: .95rem; }
.fehler-weg span { color: var(--text-muted); font-size: .82rem; }
@media (max-width: 800px) { .fehler-wege { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fehler-wege { grid-template-columns: 1fr; } .fehler-suchzeile { flex-direction: column; } }

/* ---------------------------------------------------------------------
   Kundenstimmen auf der Startseite
   --------------------------------------------------------------------- */
.stimmen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stimme {
  position: relative; margin: 0; padding: 30px 30px 24px;
  background: linear-gradient(160deg, #f7f8fa 0%, #eef1f4 55%, #e6eaee 100%);
  border: 1px solid #dfe4e9; border-radius: 14px;
  display: flex; flex-direction: column; gap: 18px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.stimme:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(12, 20, 29, .10); border-color: #cfd6dd; }
/* Anfuehrungszeichen als Grafik, nicht als Schriftzeichen im Textfluss */
.stimme::before {
  content: ""; position: absolute; top: 20px; left: 26px; width: 42px; height: 34px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 34'%3E%3Cpath fill='%234898d8' d='M17 34V17.6C17 7.9 22.5 1.6 33.4 0l1.6 5.2c-6.2 1.4-9.4 5-9.6 10.7H33V34H17Zm-17 0V17.6C0 7.9 5.5 1.6 16.4 0L18 5.2c-6.2 1.4-9.4 5-9.6 10.7H16V34H0Z'/%3E%3C/svg%3E");
  opacity: .18; pointer-events: none;
}
.stimme blockquote {
  margin: 0; padding-top: 26px; line-height: 1.62; color: var(--text);
  font-size: 1.02rem; position: relative; z-index: 1;
}
.stimme figcaption {
  display: flex; flex-direction: column; gap: 16px; margin-top: auto;
  padding-top: 18px; border-top: 1px solid #dfe4e9;
}
.stimme-kopf { display: flex; align-items: center; gap: 16px; }
.stimme-bild {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #dfe4e9; transition: box-shadow .2s ease;
}
.stimme:hover .stimme-bild { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--blau); }
.stimme-wer { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.stimme-wer strong { font-size: 1rem; }
.stimme-wer > span { color: var(--text-muted); font-size: .87rem; }
.stimme-video {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 10px 15px; border-radius: 999px; background: #fff; border: 1px solid #dfe4e9;
  font-size: .86rem; font-weight: 600; color: var(--blau-tief); text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.stimme-video:hover { background: var(--blau); border-color: var(--blau); color: #fff; }
@media (max-width: 900px) {
  .stimmen-grid { grid-template-columns: 1fr; }
  .stimme { padding: 26px 22px 20px; }
  .stimme-bild { width: 72px; height: 72px; }
}

/* ---------------------------------------------------------------------
   Anlagen-Berater
   --------------------------------------------------------------------- */
.berater-kopf {
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 100%);
  color: #fff; padding: 26px 0 22px; margin-bottom: 8px;
}
.berater-kopf h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

.berater-eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #9ec9ec; margin-bottom: 10px;
}
.berater-kopf h1 { color: #fff; margin-bottom: 10px; }
.berater-kopf p { color: #c9d6e2; max-width: 62ch; line-height: 1.6; }
.berater { max-width: 940px; margin: 0 auto; padding: 16px 0 80px; min-height: 540px; }
.berater-weg { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 14px; min-height: 32px; overflow-x: auto; scrollbar-width: none; }
.berater-weg::-webkit-scrollbar { display: none; }
.berater-weg span {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  flex-shrink: 0; white-space: nowrap;
  background: #eef1f4; border: 1px solid var(--linie); font-size: .84rem; color: var(--text-muted);
}
.berater-weg span b { font-weight: 600; color: var(--text); }
.berater-frage { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin: 4px 0 6px; text-wrap: balance; }
.berater-hinweis { color: var(--text-muted); margin-bottom: 16px; max-width: 72ch; }
.berater-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.berater-wahl button {
  position: relative; border: 1.5px solid var(--linie); border-radius: 12px; background: var(--bg);
  padding: 18px 42px 18px 18px; font: inherit; font-weight: 600; color: var(--text);
  cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.berater-wahl button small { display: block; font-weight: 400; color: var(--text-muted); margin-top: 4px; font-size: .84rem; }
.berater-wahl button::after {
  content: "→"; position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  color: var(--blau); font-weight: 700; opacity: 0; transition: opacity .15s, right .15s;
}
.berater-wahl button:hover { border-color: var(--blau); background: #fff; transform: translateY(-2px); box-shadow: var(--schatten-hover); }
.berater-wahl button:hover::after { opacity: 1; right: 13px; }
.berater-wahl button.gewaehlt { border-color: var(--blau); background: #eef5fc; }
.berater-wahl button.gewaehlt::after { content: "✓"; opacity: 1; right: 14px; }
.berater-wahl button.fest { cursor: default; }
.berater-wahl button.fest:hover { transform: none; box-shadow: none; border-color: var(--blau); }
.berater-fuss { margin-top: 24px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.berater-zurueck {
  background: #fff; border: 1.5px solid var(--linie); border-radius: 999px;
  color: var(--text-muted); font: inherit; font-weight: 600; font-size: .9rem;
  cursor: pointer; padding: 11px 18px; display: inline-flex; align-items: center;
  transition: border-color .15s, color .15s;
}
.berater-zurueck:hover { border-color: var(--blau); color: var(--blau-tief); }
.berater-technik {
  margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radius);
  background: #eef5fc; border: 1px solid #d3e3f3; color: var(--text); font-size: .93rem;
}
.berater-treffer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.berater-treffer .produkt-karte { flex: none; }

/* Referenzen-Seite: Projektkarten */
.referenz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--luecke); }
@media (max-width: 960px) { .referenz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .referenz-grid { grid-template-columns: 1fr; } }
.referenz-projekt {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  transition: transform .3s ease, box-shadow .3s ease;
}
.referenz-projekt:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); }
.referenz-projekt .bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.referenz-projekt .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.referenz-projekt:hover .bild img { transform: scale(1.03); }
.referenz-projekt .info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.referenz-projekt .info h3 { font-size: 1.05rem; margin: 0; }
.referenz-projekt .info p { color: var(--text-muted); font-size: .92rem; line-height: 1.55; margin: 0; flex: 1; }
.referenz-projekt .mehr { color: var(--blau-tief); font-weight: 700; font-size: .88rem; }

/* Zahlenband: Kennzahlen unter dem Hero (Gestaltung nach ChatGPT-Vorschlag).
   Breite und Rundung wie die Hero-Fläche - beide beginnen am selben Seitenrand. */
.zahlen-band-aussen { padding: 0 var(--rand); margin-top: var(--luecke); }
.zahlen-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(38px, 5vw, 64px) clamp(20px, 3vw, 40px);
  background:
    radial-gradient(circle at 88% 12%, rgba(60, 142, 210, .30), transparent 28%),
    linear-gradient(118deg, #07131e 0%, #0d2538 48%, #123f61 100%);
  border-block: 1px solid rgba(155, 203, 239, .18);
  box-shadow: 0 18px 48px rgba(8, 24, 38, .16);
}
.zahlen-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
}
.zahlen-titel {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: #b9ddf7; font-size: clamp(.76rem, 1vw, .88rem); font-weight: 650;
  letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; text-align: center;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.zahlen-titel::before,
.zahlen-titel::after {
  content: ""; width: clamp(28px, 5vw, 72px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159, 207, 242, .58));
}
.zahlen-titel::after { transform: rotate(180deg); }
.zahlen-reihe {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  overflow: hidden;
  border: 1px solid rgba(183, 219, 244, .18); border-radius: 16px;
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 22px 55px rgba(1, 10, 18, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
}
.zahl {
  position: relative; min-width: 0; min-height: 210px;
  padding: clamp(22px, 2.6vw, 34px) clamp(14px, 2.2vw, 28px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.zahl + .zahl::before {
  content: ""; position: absolute; top: 24px; bottom: 24px; left: 0; width: 1px;
  background: linear-gradient(transparent, rgba(187, 222, 247, .24) 20%, rgba(187, 222, 247, .24) 80%, transparent);
}
.zahl > * { max-width: 100%; }
.marken-plakette,
.kennzahl-kicker {
  height: 45px; margin-bottom: 9px;
  display: flex; align-items: center; justify-content: center;
}
.marken-plakette {
  width: 116px; padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .82); border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.marken-plakette img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.marken-plakette.enos img { max-height: 38px; }
.kennzahl-kicker {
  color: #9fcff2; font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.zahl .wert {
  color: #fff; font-size: clamp(2rem, 3.15vw, 3rem); font-weight: 750;
  line-height: .98; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* Zahlen bleiben einzeilig, damit die Zeilen bündig stehen */
}
.zahl .wert .qualifier.leer { visibility: hidden; }   /* hält die Zeile frei, damit alle Kacheln bündig bleiben */
.zahl .wert .qualifier {
  display: block; margin-bottom: 3px;
  color: #a9d4f2; font-size: .34em; font-weight: 650; line-height: 1;
  letter-spacing: .10em; text-transform: uppercase;
}
.zahl .label {
  margin-top: 5px; color: rgba(255, 255, 255, .96);
  font-size: clamp(.9rem, 1.15vw, 1rem); font-weight: 650; line-height: 1.2;
}
.zahl .sub {
  color: rgba(218, 235, 247, .70);
  font-size: clamp(.76rem, .95vw, .84rem); line-height: 1.38;
}
.zahl.jubilaeum { gap: 8px; }
.zahl.jubilaeum img {
  display: block; width: clamp(108px, 11vw, 138px); height: auto;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .30));
}
.zahl.jubilaeum .label { margin-top: 0; }

/* Alle Kacheln teilen sich dieselben vier Zeilen (Plakette / Zahl / Bezeichnung /
   Erläuterung) - dadurch stehen sie exakt auf denselben Grundlinien. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    .zahlen-reihe { grid-template-rows: repeat(4, auto); align-items: center; }
    .zahl {
      display: grid; grid-row: span 4; grid-template-rows: subgrid;
      justify-items: center; align-content: center; gap: 5px;
    }
    .zahl.jubilaeum img { grid-row: 1 / 4; align-self: center; }
    .zahl.jubilaeum .label { grid-row: 4; }
  }
}

/* Am Handy: alle vier Kennzahlen auf einen Blick als 2x2-Raster.
   Eine Wischleiste versteckt drei Viertel der Aussage - und wer nicht
   wischt, sieht die Zahlen nie. */
@media (max-width: 860px) {
  .zahlen-band { padding: 30px 0 34px; }
  .zahlen-titel { font-size: .75rem; margin-bottom: 18px; gap: 9px; }
  .zahlen-titel::before,
  .zahlen-titel::after { width: 22px; }
  .zahlen-reihe {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none;
    padding: 0; margin: 0;
  }
  .zahl {
    min-height: 0; padding: 16px 12px 18px;
    text-align: center; align-items: center; justify-content: flex-start;
    border: 1px solid rgba(183, 219, 244, .18); border-radius: 14px;
    background: rgba(255, 255, 255, .065);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  }
  .zahl + .zahl::before { display: none; }
  .zahl .wert { font-size: 1.9rem; }
  .zahl .label { font-size: .84rem; }
  .zahl .sub { font-size: .75rem; line-height: 1.35; }
  .zahl .kennzahl-kicker { font-size: .75rem; }
  .marken-plakette { width: 84px; padding: 7px 9px; }
  .zahl.jubilaeum img { width: 92px; }
  .zahl.jubilaeum .sub { margin-top: 4px; }
}
@media (max-width: 400px) {
  .zahlen-reihe { gap: 8px; }
  .zahl { padding: 14px 8px 16px; }
  .zahl .wert { font-size: 1.7rem; }
  .zahl .label { font-size: .78rem; }
  /* nicht unter 11,2 px - darunter wird die Zeile am Handy unleserlich */
  .zahl .sub { font-size: .75rem; }
}

/* Kundenlogos mit Branchenfilter */
.kunden-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.kunden-knopf {
  border: 1px solid var(--linie); background: #fff; border-radius: 999px;
  padding: 7px 15px; font-size: .88rem; color: var(--text); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.kunden-knopf:hover { border-color: var(--blau-knopf); color: var(--blau-tief); }
.kunden-knopf.aktiv { background: var(--blau-knopf); border-color: var(--blau-knopf); color: #fff; }
.kunden-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1000px) { .kunden-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .kunden-grid { grid-template-columns: repeat(2, 1fr); } }
.kunde {
  position: relative; background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  aspect-ratio: 400 / 220; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 6px; transition: border-color .15s, box-shadow .15s;
}
.kunde:hover { border-color: var(--blau); box-shadow: var(--schatten-hover); }
/* Einheitliche Logogroesse: gilt gleichermassen fuer Bitmap- und SVG-Logos */
.kunde img { width: 86%; height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.kunde.ohne-logo .kunde-name {
  font-weight: 600; font-size: .95rem; text-align: center; color: var(--text); padding: 0 10px; line-height: 1.3;
}
.kunde-tooltip {
  position: absolute; left: 0; right: 0; bottom: 0; background: rgba(12, 20, 29, .88); color: #fff;
  font-size: .78rem; text-align: center; padding: 5px 6px; opacity: 0; transition: opacity .15s;
  pointer-events: none;
}
.kunde:hover .kunde-tooltip { opacity: 1; }
.kunde.ohne-logo .kunde-tooltip { display: none; }
.berater-anfrage {
  margin-top: 18px; padding: 26px 28px; border-radius: 14px;
  background: linear-gradient(160deg, #f7f8fa 0%, #eef1f4 55%, #e6eaee 100%); border: 1px solid #dfe4e9;
}
.berater-anfrage p { color: var(--text); line-height: 1.6; margin-bottom: 16px; }
.berater-notiz { margin-top: 16px; padding: 13px 17px; border-radius: var(--radius); background: #eef5fc; border: 1px solid #d3e3f3; font-size: .93rem; }
.berater-abschluss { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie); }
.berater-abschluss p { color: var(--text-muted); font-size: .9rem; margin-bottom: 14px; }
@media (max-width: 700px) {
  .berater-kopf { padding: 18px 0 16px; }
  .berater-kopf p { display: none; }
  .berater-wahl { grid-template-columns: 1fr; }
  .berater-treffer { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) and (min-width: 701px) {
  .berater-treffer { grid-template-columns: repeat(2, 1fr); }
}

/* Anlagen-Berater-Banner: dunkler Textblock mit schraeger Kante links,
   Maschinenpanorama rechts, drei Vorteils-Plaketten am rechten Rand */
.berater-banner {
  position: relative; display: flex; aspect-ratio: 3.4 / 1; border-radius: var(--radius); overflow: hidden;
  background: #0f2338; color: #fff; isolation: isolate;
}
.bb-bild { position: absolute; inset: 0; z-index: 0; }
.bb-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; filter: saturate(.7) brightness(.8); }
/* Blauer Schleier: die Maschinen bleiben Untermalung, der Berater steht im Vordergrund */
.bb-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12, 29, 48, .8) 0%, rgba(12, 29, 48, .5) 50%, rgba(12, 29, 48, .42) 100%);
}
.bb-panel {
  position: relative; z-index: 1; width: min(58%, 640px); align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: clamp(22px, 2.6vw, 36px) calc(clamp(24px, 3.2vw, 46px) + 110px) clamp(22px, 2.6vw, 36px) clamp(24px, 3.2vw, 46px);
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 120px) 100%, 0 100%);
}
.bb-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8ecbf2; }
.bb-panel h2 { font-size: clamp(1.6rem, 2.9vw, 2.6rem); line-height: 1.06; margin: 0; color: #fff; }
.bb-panel h2 em { font-style: normal; color: #8ecbf2; }
.bb-panel p { color: #d3dde7; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.55; margin: 0; max-width: 44ch; }
.bb-btn { align-self: flex-start; margin-top: 6px; background: var(--blau-knopf); color: #fff; }
.bb-btn:hover { background: var(--blau); color: #fff; }
.bb-punkte {
  position: absolute; right: clamp(16px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); z-index: 1;
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px;
}
.bb-punkte li {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, .95); color: var(--ink); border-radius: 14px;
  padding: 15px 26px 15px 18px; font-size: 1.04rem; line-height: 1.25;
  box-shadow: 0 10px 26px rgba(6, 14, 24, .28); min-width: 250px;
}
.bb-punkte strong { display: block; font-weight: 800; }
.bb-punkte svg { width: 36px; height: 36px; flex: 0 0 36px; color: var(--blau-tief); }
@media (max-width: 860px) {
  .berater-banner { aspect-ratio: auto; flex-direction: column; }
  .bb-panel { width: 100%; clip-path: none; padding: 26px 22px 28px; }
  .bb-bild { position: relative; height: 210px; }
  .bb-punkte {
    position: static; transform: none; flex-direction: row; flex-wrap: wrap;
    gap: 8px; padding: 12px 14px 16px; background: #0f2338;
  }
  .bb-punkte li { flex: 1 1 150px; min-width: 0; padding: 10px 12px; font-size: .84rem; box-shadow: none; }
  .bb-punkte svg { width: 24px; height: 24px; flex-basis: 24px; }
}

/* Werbetitel in der breiten Neuheiten-Karte (Serie Y) */
.produkt-karte.breit .bild { display: flex; flex-direction: column; }
.produkt-karte.breit .bild .werbe-titel {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(1.9rem, 3.8vw, 3.4rem); line-height: 1.12;
  color: var(--ink); text-align: center; text-wrap: balance;
  padding: 26px 16px 4px;
}
.produkt-karte.breit .bild picture { flex: 1; min-height: 0; }
.produkt-karte.breit .bild picture img { width: 100%; height: 100%; object-fit: contain; }
.produkt-karte.breit .bild .werbe-untertitel {
  font-size: clamp(1rem, 1.7vw, 1.4rem); font-weight: 600; color: var(--text-muted);
  text-align: center; text-wrap: balance; padding: 4px 16px 0;
}
.katalog-berater-link { color: var(--blau-tief); font-weight: 600; text-decoration: none; }  /* kein nowrap - zwang sonst die ganze Handyspalte auf 525px */
.katalog-berater-link:hover { text-decoration: underline; }

/* Social-Kanaele prominent im Footer */
.footer-social.gross { gap: 14px; }
.footer-social.gross a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: #fff; border: 1px solid var(--linie); color: var(--text);
  transition: color .15s, border-color .15s, transform .15s;
}
.footer-social.gross a:hover { color: var(--blau-tief); border-color: var(--blau); transform: translateY(-2px); }
.footer-social.gross svg { width: 22px; height: 22px; }

/* Hero nach neuer Vorlage: Eyebrow, grosse Zeile, Untertext, Check-Zeile */
.hero-eyebrow {
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #c8e6fb; margin-bottom: 14px;
  /* Das Video wechselt zwischen hellen und dunklen Bildern. Ein weicher
     Schatten allein traegt nicht - erst die enge dunkle Kontur macht die
     Zeile ueber hellen Maschinenteilen sicher lesbar. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 16px rgba(0, 0, 0, .65);
}
.hero-video .hero-slogan { font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.08; max-width: 820px; }
.hero-untertext {
  color: rgba(255, 255, 255, .88); font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6; max-width: 56ch; margin: 18px 0 6px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.hero-checkzeile {
  display: flex; align-items: center; gap: 9px; margin-top: 22px;
  color: rgba(255, 255, 255, .8); font-size: .9rem;
}
.hero-checkzeile svg { color: #8ecbf2; flex-shrink: 0; }

/* Prozess-Kasten (Warum Kraft): dunkler Ablauf-Block mit vier Schritten */
.prozess-kasten {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px;
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 115%);
  border-radius: 14px; padding: 44px 46px; margin: 34px 0 10px; color: #fff;
}
.prozess-eyebrow {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #8ecbf2; margin-bottom: 12px;
}
.prozess-links h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; margin: 0 0 14px; }
.prozess-links p { color: #c9d6e2; line-height: 1.6; margin-bottom: 22px; max-width: 46ch; }
.btn-weiss { background: #fff; color: var(--ink); }
.btn-weiss:hover { background: #e8eef4; }
.prozess-schritte { list-style: none; margin: 0; padding: 0; }
.prozess-schritte li {
  display: flex; gap: 18px; align-items: flex-start; position: relative;
  padding: 0 0 26px 0;
}
.prozess-schritte li:not(:last-child)::before {
  content: ""; position: absolute; left: 22px; top: 46px; bottom: 2px; width: 1px;
  background: rgba(142, 203, 242, .35);
}
.prozess-schritte .nr {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 45px; height: 45px; border-radius: 50%; border: 1.5px solid rgba(142, 203, 242, .6);
  font-size: .82rem; font-weight: 700; color: #8ecbf2;
}
.prozess-schritte h3 { color: #fff; font-size: 1.08rem; margin: 10px 0 4px; }
.prozess-schritte p { color: #c9d6e2; font-size: .92rem; line-height: 1.5; margin: 0; }
@media (max-width: 860px) {
  .prozess-kasten { grid-template-columns: 1fr; padding: 32px 26px; gap: 28px; }
}

/* Kontaktseite: Ansprechpartner-Karten */
.kontakt-personen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 30px; }
.person-karte {
  background: #fff; border: 1px solid var(--linie); border-radius: 14px;
  padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 14px;
}
.person-karte .portraet {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--linie);
}
.person-karte .wer { display: flex; flex-direction: column; line-height: 1.3; }
.person-karte .wer strong { font-size: 1.1rem; }
.person-karte .wer span { color: var(--text-muted); font-size: .88rem; margin-top: 2px; }
.person-karte .wege { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.person-karte .wege a {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--text); font-weight: 600; font-size: .94rem;
  padding: 9px 12px; border-radius: 9px; background: var(--bg);
  transition: background .15s, color .15s;
}
.person-karte .wege a:hover { background: #e8f1fa; color: var(--blau-tief); }
.person-karte .wege .etikett {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); width: 74px; flex-shrink: 0;
}
.person-karte .wege .wa svg { color: #25d366; }
.zeiten-karte .zeiten { display: flex; flex-direction: column; gap: 10px; }
.zeiten-karte .zeiten div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; background: var(--bg); }
.zeiten-karte .zeiten span { color: var(--text-muted); }
.zeiten-hinweis { color: var(--text-muted); font-size: .85rem; margin-top: auto; }
@media (max-width: 900px) { .kontakt-personen { grid-template-columns: 1fr; } }
/* Auf sehr schmalen Geraeten duerfen die Karten nicht breiter werden als die
   Spalte - sonst schiebt die laengste E-Mail-Adresse die Seite zur Seite. */
.kontakt-personen > * { min-width: 0; }
.person-karte .wege a { overflow-wrap: anywhere; }
.karte-hersteller {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px;
}

/* Dunkle Variante des Linien-Kastens (Serie Y im Spotlight):
   weisser Text und dunkler Verlauf statt des hellen. Rueckbau: "dunkel" in data.js entfernen. */
.linien-flaeche.dunkel { background-size: cover; background-position: 62% center; color: #eaf1f8; }
.linien-flaeche.dunkel::before {
  background: linear-gradient(90deg, rgba(4, 10, 20, .78) 0%, rgba(4, 10, 20, .48) 38%, rgba(4, 10, 20, .08) 72%, rgba(4, 10, 20, 0) 100%);
}
.linien-flaeche.dunkel .linien-titel, .linien-paar .linien-flaeche.dunkel .linien-titel { color: #fff; }
.linien-flaeche.dunkel .kasten-sub, .linien-paar .linien-flaeche.dunkel .kasten-sub { color: rgba(255, 255, 255, .87); }
.linien-flaeche.dunkel .linien-inhalt p { color: rgba(255, 255, 255, .8); }
.linien-flaeche.dunkel .linien-schritt {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .38); color: #fff;
}
.linien-flaeche.dunkel .linien-schritt::after { color: #8ecbf2; }

/* Werbekachel als Vollbild (Serie Y im Spotlight): Bild randlos, Text links im Bild wie im Hero.
   Rueckbau: "werbeVoll" beim Neuheiten-gross-Block in data.js entfernen. */
.produkt-karte.breit.werbe-voll .bild { padding: 0; position: relative; background: #060f1b; display: block; }
.produkt-karte.breit.werbe-voll .bild picture { position: absolute; inset: 0; }
.produkt-karte.breit.werbe-voll .bild picture img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.werbe-links {
  position: absolute; z-index: 1; left: clamp(22px, 4.5vw, 64px); top: clamp(26px, 9%, 90px);
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.3vw, 18px);
  /* Textblock samt linkem Abstand endet an der 40-%-Marke des Bildes */
  max-width: calc(40% - clamp(22px, 4.5vw, 64px));
}
.produkt-karte.breit.werbe-voll .bild .werbe-links .werbe-titel {
  padding: 0; text-align: left; color: #fff; line-height: 1.12;
  /* groesser als der Hero-Slogan, Archivo 800 (dickster verfuegbarer Schnitt) */
  font-size: clamp(1.4rem, 5.4vw, 4.6rem); font-weight: 800; line-height: 1.06;
  letter-spacing: -.02em; text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
}
.produkt-karte.breit.werbe-voll .bild .werbe-links .werbe-untertitel {
  padding: 0; text-align: left; color: rgba(255, 255, 255, .88);
  font-size: clamp(.78rem, 1.5vw, 1.3rem); font-weight: 500; line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5); max-width: 46ch;
}
.werbe-links .btn { margin-top: 2px; }
/* Auch bei kleineren Fenstern bleibt der Block bei 40 % - Schrift schrumpft mit dem Bild.
   Nur am Handy (schmaler Bildausschnitt) darf der Text breiter laufen. */
@media (max-width: 900px) {
  .werbe-links .btn { font-size: .85rem; padding: 9px 15px; }
}
@media (max-width: 540px) {
  .werbe-links { max-width: 82%; }
}

/* Vierer-Karussell: genau 4 Karten pro Ansicht, weitere seitlich verschiebbar (wie Referenzvideos) */
.karussell.vierer .produkt-karte { flex: 0 0 calc((100% - 4 * var(--luecke)) / 4.3); }   /* 4 Karten + 30 % der fuenften als Anriss */
@media (max-width: 900px) {
  .karussell.vierer .produkt-karte { flex-basis: calc((100% - 2 * var(--luecke)) / 2.3); }
}
@media (max-width: 540px) {
  .karussell.vierer .produkt-karte { flex-basis: 78%; }
}

/* Zieh-Scrollen in Karussells */
.karussell { cursor: grab; }
.karussell.wird-gezogen { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.karussell.wird-gezogen a { pointer-events: none; }

/* Kundenstimmen als Zieh-Karussell: 3 Karten + Anriss der vierten */
.karussell.dreier .stimme {
  flex: 0 0 calc((100% - 3 * var(--luecke)) / 3.3);
  display: flex; flex-direction: column;
}
.karussell.dreier .stimme blockquote { flex: 1; }
@media (max-width: 1000px) {
  .karussell.dreier .stimme { flex-basis: calc((100% - 2 * var(--luecke)) / 2.3); }
}
@media (max-width: 640px) {
  .karussell.dreier .stimme { flex-basis: 86%; }
}

/* Neuheiten-Reihe am Handy: eine grosse Karte + Anriss (wie Top-Seller) */
@media (max-width: 540px) {
  .karten-reihe.s4 .produkt-karte, .karten-reihe.s5 .produkt-karte { flex-basis: 78%; }
}

/* Hero-Text haelt die 40-%-Marke der Fensterbreite (samt linkem Innenabstand).
   Schrift und Abstaende skalieren mit Fensterbreite UND -hoehe, damit der Hero
   weiterhin genau in die Fensterhoehe passt. Am Handy (unter 540 px) breiter. */
.hero-video .hero-unten {
  max-width: 64%; box-sizing: border-box;
  gap: clamp(10px, 2vh, 20px);
  /* unten immer genug Luft, auch wenn der Text im schmalen Fenster hoeher umbricht */
  padding: clamp(34px, 3.4vh, 44px) 48px;
}
/* Zweizeiler-Headline: eingemessen, damit "Von der einzelnen Maschine" immer in eine Zeile passt */
.hero-video .hero-slogan {
  font-size: clamp(2rem, min(4.05vw, 7.6vh), 4.6rem); max-width: none;
  line-height: 1.04; letter-spacing: -.035em;
}
.hero-untertext { font-size: clamp(.78rem, min(1.4vw, 2.2vh), 1.15rem); max-width: none; margin: clamp(6px, 1.6vh, 18px) 0 6px; }
.hero-video .hero-unten .hero-checkzeile { font-size: clamp(.68rem, min(1.1vw, 1.9vh), .9rem); margin-top: clamp(8px, 1.8vh, 22px); }
.hero-video .hero-eyebrow { margin-bottom: clamp(6px, 1.4vh, 14px); }
@media (max-width: 900px) {
  .hero-video .hero-unten .btn { font-size: .85rem; padding: 9px 15px; }
}
@media (max-width: 540px) {
  .hero-video .hero-unten { max-width: 92%; }
}
@media (max-height: 700px) {
  .hero-video .hero-unten .btn { font-size: .85rem; padding: 8px 14px; }
}

/* Linien-Karten (Vorschlag 4): graues Bildfeld oben, weisser Kartenfuss mit Text und Knopf */
.linien-paar.vorlage { align-items: stretch; }
.vorlage-karte {
  background: #fff; border: 1px solid var(--linie); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; color: var(--text);
  transition: box-shadow .25s ease, transform .25s ease;
}
.vorlage-karte:hover { box-shadow: var(--schatten-hover); transform: translateY(-2px); }
.vk-bildfeld {
  display: block; background: #e9ebed;
  height: clamp(300px, 27vw, 400px);
}
.vk-bildfeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vk-fuss { display: block; padding: 20px 26px 26px; flex: 1; }
.vorlage-karte h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
.vorlage-karte p { color: var(--text-muted); font-size: .93rem; line-height: 1.55; max-width: 52ch; margin: 0 0 14px; }
.vorlage-karte .vk-knopf { display: inline-block; }

/* Flache Fenster (Laptops, 16:9 klein): Hero-Text kompakter, damit die Hoehe wieder exakt passt */
@media (max-height: 780px) {
  .hero-video .hero-slogan { font-size: clamp(1.4rem, min(4.05vw, 7.2vh), 4.6rem); }
  .hero-video .hero-unten { gap: clamp(8px, 1.7vh, 16px); }
  .hero-untertext { font-size: clamp(.78rem, min(1.4vw, 1.9vh), 1.15rem); }
  .hero-video .hero-unten .hero-checkzeile { margin-top: clamp(6px, 1.4vh, 14px); }
}

/* Vorlage-Karten: keine fixe Hoehe, nichts abschneiden (uebersteuert .linien-paar > *) */
.linien-paar.vorlage > * { height: auto; overflow: visible; }

/* Lange Woerter duerfen die Raster-Spalten nicht aufsprengen (Handy: Karten ragten
   sonst ueber den Bildschirmrand). min-width: 0 erlaubt den Spalten, zu schrumpfen. */
.katalog-grid .produkt-karte, .karten-reihe .produkt-karte, .kachel-zeile .produkt-karte { min-width: 0; }
.produkt-karte .bild { min-width: 0; }
.produkt-karte .bild img { max-width: 100%; }
.produkt-karte .info { min-width: 0; }
.produkt-karte .info h3, .produkt-karte .info p { overflow-wrap: break-word; hyphens: auto; }

/* Unsichtbar, aber fuer Suchmaschinen und Screenreader vorhanden */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; padding: 0; margin: 0;
}

/* Wird es eng, ruecken die Menuepunkte erst zusammen - das Hamburger-Menue
   kommt erst, wenn die Navigation wirklich nicht mehr passt */
@media (max-width: 1050px) {
  .header .nav { gap: 13px; }
  .header-inner .nav { margin-left: 18px; }
}
@media (max-width: 880px) {
  .header .nav { display: none; }
}

/* =====================================================================
   Design-Feinschliff (uebernommen aus der ChatGPT-Variante, 28.08.2026)
   ===================================================================== */

/* Abschnittsueberschriften eine Stufe praesenter */
.section-titel h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: -.02em; }

/* Produktkarten: Namen und Texte leicht groesser, mehr Luft zwischen Bild und Text */
.produkt-karte .bild { background: #f3f6f8; }
.produkt-karte .info { gap: 6px; padding-top: 15px; }
.produkt-karte .info h3 { font-size: 1.08rem; }
.produkt-karte .info p { font-size: .92rem; line-height: 1.55; }
.katalog-grid.kompakt .produkt-karte h3 { font-size: 1rem; }
.katalog-grid.kompakt .produkt-karte p { font-size: .84rem; }

/* Hervorhebung im Werbetitel - gleiches Blau wie im Video-Hero */
.produkt-karte.breit.werbe-voll .bild .werbe-titel em { color: #8ecbf2; font-style: normal; }

/* ---------------------------------------------------------------------
   Positionspunkte unter wischbaren Reihen
   --------------------------------------------------------------------- */
.karussell-punkte {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin-top: 16px;
}
.karussell-punkte[hidden] { display: none; }
.k-punkt {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: #cbd5dd; cursor: pointer;
  transition: background .18s, transform .18s;
}
.k-punkt:hover { background: #9fb4c2; }
.k-punkt.aktiv { background: var(--ink); transform: scale(1.3); }
.k-punkt:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Auf dunklem Grund (Kundenstimmen, Videobaender) */
.section.dunkel .k-punkt, .kb-innen .k-punkt { background: rgba(255, 255, 255, .3); }
.section.dunkel .k-punkt.aktiv, .kb-innen .k-punkt.aktiv { background: #fff; }
@media (max-width: 700px) {
  .karussell-punkte { margin-top: 13px; gap: 7px; }
  .k-punkt { width: 7px; height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .k-punkt { transition: none; }
}

/* ---------------------------------------------------------------------
   Fussbereich: Linklisten am Handy aufklappbar
   --------------------------------------------------------------------- */
.footer-gruppe > summary {
  list-style: none; cursor: default;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-gruppe > summary::-webkit-details-marker { display: none; }
.footer-gruppe > summary h3 { margin-bottom: 13px; }
.footer-gruppe > summary::after {
  content: ""; width: 9px; height: 9px; margin-bottom: 13px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  color: var(--text-muted); transform: rotate(45deg); transition: transform .2s;
  display: none;
}
@media (max-width: 700px) {
  /* Erst hier wird die Ueberschrift zur Schaltflaeche */
  .footer-gruppe > summary { cursor: pointer; padding: 12px 0 2px; }
  .footer-gruppe > summary h3 { margin-bottom: 0; }
  /* zugeklappt zeigt der Winkel nach unten, aufgeklappt nach oben */
  .footer-gruppe > summary::after { display: block; margin-bottom: 3px; transform: rotate(135deg); }
  .footer-gruppe[open] > summary::after { transform: rotate(-45deg); margin-bottom: 0; }
  /* Der Fussbereich ist hell - die Trennlinie muss dunkel sein */
  .footer-gruppe { border-top: 1px solid var(--linie); }
  .footer-gruppe > ul { padding: 8px 0 14px; }
  /* Die Gruppen liegen jetzt Kante an Kante, der Rasterabstand entfaellt */
  .footer-grid { gap: 0; }
  .footer-claim { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-gruppe > summary::after { transition: none; }
}

/* ---------------------------------------------------------------------
   Groessere Antippflaechen am Handy
   Wichtige Ziele - Telefonnummer, Prospekte, Kontaktangaben - sind als
   Textlinks nur rund 16 Pixel hoch. Am Touchscreen ist das zu wenig.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .akkordeon-inhalt ul li { margin-bottom: 4px; }
  .akkordeon-inhalt ul li > a,
  .kauf-info .hinweis a,
  .kontakt-neben p a,
  .kontakt-daten p a,
  .l-hinweis a {
    display: inline-block; padding: 5px 2px; margin: -5px -2px;
  }
}

/* =====================================================================
   Unsere Geschichte - Aufbau nach dem freigegebenen Entwurf
   ===================================================================== */

/* Gruender: Foto links, Text rechts */
.gruender-reihe {
  display: grid; grid-template-columns: minmax(200px, 28%) 1fr;
  gap: clamp(28px, 4vw, 64px); align-items: start;
  padding-top: clamp(30px, 4vw, 54px);
}
.gruender-bild { margin: 0; }
.gruender-bild img { width: 100%; border-radius: var(--radius); display: block; }
.gruender-bild figcaption { font-size: .8rem; color: var(--text-muted); margin-top: 9px; text-align: center; }
.gruender-kicker {
  display: block; font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 1.05rem; color: var(--blau-tief); letter-spacing: .04em; margin-bottom: 6px;
}
.gruender-text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
.gruender-text p { color: var(--text-muted); line-height: 1.75; margin-bottom: 14px; max-width: 72ch; }

/* Interview-Kasten unter dem Gruendertext */
.interview-kasten {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 20px 24px; margin-top: 22px;
}
.interview-kasten h3 { font-size: 1.05rem; margin-bottom: 5px; }
.interview-kasten p { font-size: .9rem; margin-bottom: 0; max-width: 62ch; }
.interview-kasten .btn { flex-shrink: 0; white-space: nowrap; }

/* Meilensteine: Zeitstrahl im dunklen Band */
.zeitstrahl-band {
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 100%);
  border-radius: var(--radius); color: #fff;
  padding: clamp(30px, 4vw, 48px) clamp(22px, 3.4vw, 46px);
}
.zeitstrahl-eyebrow {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #8ecbf2; margin-bottom: 8px;
}
.zeitstrahl-band h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 30px; }
.zeitstrahl { display: flex; gap: 18px; position: relative; }
.zs-station { flex: 1 1 0; min-width: 0; position: relative; padding-top: 26px; }
/* durchgehende Linie */
.zs-station::before {
  content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 2px;
  background: rgba(255, 255, 255, .28);
}
.zs-station:first-child::before { left: 8px; }
.zs-station:last-child::before { right: auto; width: calc(100% - 8px); }
.zs-punkt {
  position: absolute; top: 2px; left: 8px; width: 13px; height: 13px;
  border-radius: 50%; border: 2.5px solid #fff; background: transparent; box-sizing: border-box;
}
.zs-jahr {
  display: block; font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); margin-bottom: 6px;
}
.zs-text { display: block; font-size: .82rem; line-height: 1.5; color: #c9d6e2; padding-right: 8px; }

/* Philosophie: Zitatkarte plus drei Icon-Karten */
.philo-kopf { margin-bottom: 22px; }
.philo-kopf .eyebrow { color: var(--blau-tief); }
.philo-kopf h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.philo-karten { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: var(--luecke); align-items: stretch; }
.philo-karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 26px 24px;
}
.philo-karte h3 { font-size: 1.02rem; margin-bottom: 9px; }
.philo-karte p { font-size: .9rem; color: var(--text-muted); line-height: 1.65; }
.philo-karte:not(.zitat) { text-align: center; }
.philo-karte:not(.zitat) h3 { color: var(--blau-tief); }
.philo-icon { display: inline-flex; width: 46px; height: 46px; margin-bottom: 12px; color: var(--blau-tief); }
.philo-icon svg { width: 100%; height: 100%; }
.philo-karte.zitat { background: var(--bg); }
.philo-karte.zitat h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.3; }
.philo-anfz { display: inline-flex; width: 40px; height: 40px; color: var(--blau); margin-bottom: 10px; }
.philo-anfz svg { width: 100%; height: 100%; }

/* Abschlussband unter dem Team */
.team-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 100%);
  border-radius: var(--radius); color: #fff; padding: 30px 38px;
}
.team-cta h2 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 4px; }
.team-cta p { color: #c9d6e2; margin: 0; }
.team-cta .btn { flex-shrink: 0; }

/* Schmale Fenster: eine Spalte, das Foto bleibt anteilig gross (kein Sprung am Umbruch) */
@media (max-width: 700px) {
  .gruender-reihe { grid-template-columns: 1fr !important; }
  .gruender-bild { width: max(200px, 30%); }
}
@media (max-width: 900px) {
  .gruender-reihe { grid-template-columns: minmax(180px, 28%) 1fr; }
  .philo-karten { grid-template-columns: 1fr 1fr; }
  .philo-karte.zitat { grid-column: 1 / -1; }
  /* Zeitstrahl am Handy: seitlich wischen statt quetschen */
  .zeitstrahl { overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .zeitstrahl::-webkit-scrollbar { display: none; }
  .zs-station { flex: 0 0 190px; scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .philo-karten { grid-template-columns: 1fr; }
  .interview-kasten .btn { white-space: normal; }
}

/* =====================================================================
   "Warum Kraft" - Aufbau nach dem freigegebenen Entwurf
   (der Prozess-Kasten behaelt sein bisheriges Design)
   ===================================================================== */
.wk-intro { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.wk-intro h2 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); margin-bottom: 12px; }
.wk-intro p { color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }

.wk-gruende { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--luecke); margin-bottom: 34px; }
.wk-grund {
  background: var(--bg); border-radius: var(--radius);
  padding: 30px 26px; text-align: center;
}
.wk-grund h3 { font-size: 1.05rem; margin-bottom: 8px; }
.wk-grund p { font-size: .9rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
.wk-icon { display: inline-flex; width: 52px; height: 52px; margin-bottom: 14px; color: var(--blau-tief); }
.wk-icon svg { width: 100%; height: 100%; }

.inhalt-breit .prozess-kasten { margin-bottom: 34px; }

/* Viererband: dunkle Leiste mit Eckdaten */
.wk-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: var(--navy); border-radius: var(--radius);
  padding: 24px 26px; margin-bottom: 34px;
}
.wk-band-punkt { display: flex; align-items: flex-start; gap: 13px; padding: 4px 10px; }
.wk-band-punkt + .wk-band-punkt { border-left: 1px solid rgba(255, 255, 255, .12); }
.wk-band-icon { flex: 0 0 auto; width: 32px; height: 32px; color: #fff; margin-top: 2px; }
.wk-band-icon svg { width: 100%; height: 100%; }
.wk-band-punkt h3 { color: #fff; font-size: .95rem; margin-bottom: 3px; }
.wk-band-punkt p { color: #c9d6e2; font-size: .8rem; line-height: 1.5; margin: 0; }

/* Kundenstimme mit Foto */
.wk-zitat {
  display: grid; grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(22px, 3vw, 44px); align-items: center;
  background: var(--bg); border-radius: var(--radius);
  padding: 28px; margin: 0 0 34px;
}
.wk-zitat img { width: 100%; border-radius: 10px; display: block; }
.wk-anfz { display: inline-flex; width: 34px; height: 34px; color: var(--blau); margin-bottom: 8px; }
.wk-anfz svg { width: 100%; height: 100%; }
.wk-zitat blockquote { margin: 0 0 14px; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.65; color: var(--text); }
.wk-wer { font-size: .92rem; color: var(--text-muted); margin-bottom: 12px; }
.wk-wer strong { color: var(--text); }
.wk-mehr { color: var(--blau-tief); font-weight: 700; text-decoration: none; display: inline-block; padding: 4px 0; }
.wk-mehr:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .wk-gruende { grid-template-columns: 1fr 1fr; }
  .wk-band { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .wk-band-punkt:nth-child(3) { border-left: 0; }
  .wk-zitat { grid-template-columns: 1fr; }
  .wk-zitat img { max-width: 340px; }
}
@media (max-width: 560px) {
  .wk-gruende { grid-template-columns: 1fr; }
  .wk-band { grid-template-columns: 1fr; }
  .wk-band-punkt + .wk-band-punkt { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 14px; }
}

/* Interview mit dem Firmengruender */
.interview-block {
  background: var(--bg); border-radius: var(--radius);
  padding: clamp(28px, 3.6vw, 46px) clamp(22px, 3.4vw, 46px);
}
.interview-kopf { max-width: 78ch; margin-bottom: 26px; }
.interview-kopf .eyebrow { color: var(--blau-tief); }
.interview-kopf h2 { font-size: clamp(1.45rem, 2.5vw, 1.95rem); margin-bottom: 12px; }
.interview-vorspann { color: var(--text-muted); line-height: 1.75; margin: 0; }
.interview-fragen { columns: 2; column-gap: clamp(28px, 3.4vw, 54px); }
.interview-paar { break-inside: avoid; margin-bottom: 22px; }
.interview-paar h3 {
  font-size: 1rem; color: var(--blau-tief); margin-bottom: 6px; line-height: 1.4;
}
.interview-paar p { color: var(--text-muted); line-height: 1.7; font-size: .95rem; margin: 0; }
.interview-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--linie); margin-top: 6px; padding-top: 22px;
}
.interview-quelle { font-size: .82rem; color: var(--text-muted); }
.interview-fuss .btn { white-space: nowrap; }
@media (max-width: 860px) {
  .interview-fragen { columns: 1; }
  .interview-fuss .btn { white-space: normal; }
}

/* =====================================================================
   Referenzen - Aufbau nach dem freigegebenen Entwurf
   ===================================================================== */

/* Kopfbereich: Titel, Kennzahlen und Branchen-Kacheln in einem dunklen Band */
.ref-kopf {
  display: grid; grid-template-columns: 1.25fr auto auto;
  gap: clamp(20px, 2.6vw, 40px); align-items: center;
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 100%);
  border-radius: var(--radius); color: #fff;
  padding: clamp(26px, 3.2vw, 40px) clamp(24px, 3.2vw, 42px);
}
.ref-kopf-eyebrow {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #8ecbf2; margin-bottom: 8px;
}
.ref-kopf-text h1 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 10px; }
.ref-kopf-text p { color: #c9d6e2; line-height: 1.6; margin: 0; max-width: 46ch; }

.ref-kopf-zahlen { display: flex; gap: clamp(16px, 2vw, 30px); align-items: center; }
.ref-zahl { text-align: center; min-width: 0; }
.ref-zahl + .ref-zahl { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: clamp(16px, 2vw, 30px); }
.ref-zahl .wert {
  display: block; font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.1;
}
.ref-zahl .label { display: block; font-size: .84rem; font-weight: 700; margin-top: 3px; }
.ref-zahl .sub { display: block; font-size: .75rem; color: #c9d6e2; margin-top: 2px; }
.ref-zahl.jubilaeum img { width: 62px; height: auto; display: block; margin: 0 auto 4px; }

.ref-kopf-branchen {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  background: rgba(255, 255, 255, .95); border-radius: 12px; padding: 10px;
}
.ref-kopf-branchen:only-child { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
.ref-kopf:has(> .ref-kopf-branchen:only-child) { padding: clamp(12px, 1.4vw, 18px); }
.ref-branche {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: transparent; border: 0; border-radius: 9px;
  padding: 12px 14px; cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 700; color: var(--text);
  transition: background .16s;
}
.ref-branche:hover { background: var(--bg); }
.ref-branche-icon { width: 26px; height: 26px; color: var(--blau-tief); }
.ref-branche-icon svg { width: 100%; height: 100%; }

.ref-mehr { text-align: center; margin-top: 26px; }

/* Ablauf mit Foto */
.ref-ablauf {
  display: grid; grid-template-columns: 1fr minmax(240px, 400px);
  gap: clamp(24px, 3vw, 48px); align-items: center;
  background: var(--bg); border-radius: var(--radius);
  padding: clamp(26px, 3.2vw, 42px);
}
.ref-ablauf-text h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.ref-ablauf-intro { color: var(--text-muted); margin-bottom: 24px; }
.ref-schritte { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 0; margin: 0; }
.ref-schritte li { display: flex; flex-direction: column; gap: 9px; }
.ref-schritte .nr {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blau-knopf); color: #fff;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: .88rem;
}
.ref-schritte h3 { font-size: .95rem; margin-bottom: 4px; }
.ref-schritte p { font-size: .84rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
.ref-ablauf-bild { margin: 0; }
.ref-ablauf-bild img { width: 100%; border-radius: 10px; display: block; }

@media (max-width: 1100px) {
  .ref-kopf { grid-template-columns: 1fr auto; }
  .ref-kopf-branchen { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .ref-kopf { grid-template-columns: 1fr; }
  .ref-kopf-zahlen { justify-content: flex-start; flex-wrap: wrap; }
  .ref-ablauf { grid-template-columns: 1fr; }
  .ref-schritte { grid-template-columns: 1fr 1fr; }
  .ref-ablauf-bild { max-width: 420px; }
}
@media (max-width: 560px) {
  .ref-kopf-branchen, .ref-kopf-branchen:only-child { grid-template-columns: 1fr 1fr; }
  .ref-schritte { grid-template-columns: 1fr; }
  .ref-zahl + .ref-zahl { border-left: 0; padding-left: 0; }
  .ref-kopf-zahlen { gap: 20px; }
}

/* Schaltflaeche unter den Kundenlogos */
.kunden-mehr { text-align: center; margin-top: 22px; }
.kunden-mehr:empty { margin-top: 0; }

/* WhatsApp-Kachel: Am Handy ist ein QR-Code sinnlos - man kann ihn mit
   demselben Geraet nicht abscannen. Dort fuehrt ein Knopf direkt zum Kanal. */
.wa-text-klein { display: none; }
@media (max-width: 700px) {
  .wa-zeile img { display: none; }
  .wa-text-gross { display: none; }
  .wa-text-klein { display: inline; }
  .abo-karte .wa-zeile { display: block; }
  .abo-karte .wa-zeile .btn { width: 100%; text-align: center; }
}

/* "Warum Kraft" am Handy: Die sechs Gruende als kompakte Zeilen mit Symbol
   links statt als hohe Karten untereinander - spart rund die halbe Hoehe. */
@media (max-width: 700px) {
  .wk-gruende { gap: 10px; }
  .wk-grund {
    display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px;
    align-items: start; text-align: left; padding: 16px 18px;
  }
  /* Das Symbol steht links über beide Textzeilen, Überschrift und Text
     gehören in die zweite Spalte - sonst quetscht sich der Text in die
     40 Pixel schmale Symbolspalte. */
  .wk-icon { width: 40px; height: 40px; margin-bottom: 0; grid-column: 1; grid-row: 1 / span 2; }
  .wk-grund h3 { grid-column: 2; grid-row: 1; }
  .wk-grund p { grid-column: 2; grid-row: 2; }
  .wk-grund h3 { font-size: .98rem; margin-bottom: 4px; }
  .wk-grund p { font-size: .86rem; }
  .wk-intro { margin-bottom: 24px; }
}

/* Interview am Handy: Die ersten drei Antworten stehen offen, der Rest
   laesst sich aufklappen. */
.interview-weitere { display: contents; }
.interview-aufklappen { display: none; }
@media (max-width: 860px) {
  .interview-paar.spaeter { display: none; }
  .interview-fragen.offen .interview-paar.spaeter { display: block; }
  .interview-aufklappen { display: block; text-align: center; margin-top: 4px; }
}

/* Hinweiszeile ganz oben: Am Handy die Kurzfassung, damit sie nicht mitten
   im Wort abgeschnitten wird. */
.tb-kurz { display: none; }
@media (max-width: 860px) {
  .tb-lang { display: none; }
  .tb-kurz { display: inline; }
}

/* =====================================================================
   Die Firma GAI - Aufbau nach dem freigegebenen Entwurf
   ===================================================================== */
.gai-werkbild { margin: 0; }
.gai-werkbild img {
  width: 100%; border-radius: var(--radius); display: block;
  aspect-ratio: 21 / 7; object-fit: cover;
}

/* Kernaussage als Band */
.these-band {
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 100%);
  border-radius: var(--radius); color: #fff;
  padding: clamp(30px, 4vw, 52px) clamp(24px, 3.4vw, 52px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 3vw, 52px); align-items: center;
}
/* Die Vorzeile nennt hier eine Zahl - deshalb keine Grossbuchstaben und etwas groesser */
.these-band .eyebrow {
  color: #8ecbf2; text-transform: none; font-size: 1.05rem;
  letter-spacing: .01em; display: block; margin-bottom: 10px;
}
.these-band h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.22; margin-bottom: 0; }
.these-band p { color: #c9d6e2; line-height: 1.7; margin: 0 0 18px; }

/* Symbole in den GAI-Bausteinen */
.gai-sym { display: inline-flex; color: var(--blau-tief); }
.gai-sym svg { width: 100%; height: 100%; }

/* Kennzahlen-Leiste */
.gai-zahlen {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 26px 12px;
}
.gai-zahl { text-align: center; padding: 4px 14px; min-width: 0; }
.gai-zahl + .gai-zahl { border-left: 1px solid var(--linie); }
.gai-zahl .gai-sym { width: 30px; height: 30px; margin-bottom: 9px; }
.gai-zahl .wert {
  display: block; font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.15; margin-bottom: 4px;
}
.gai-zahl .label { display: block; font-size: .78rem; color: var(--text-muted); line-height: 1.45; }

/* Zwei Karten: Ersatzteile und Wertrechnung */
/* Kopf der GAI-Seite: Werkbild und dunkles Textband als ein Block */
.gai-kopfblock { border-radius: var(--radius); overflow: hidden; }
.gai-kopfblock > img {
  display: block; width: 100%; aspect-ratio: 21 / 8; object-fit: cover;
}
.gai-kopfblau {
  background: #12233a; color: #fff;
  padding: clamp(26px, 3.6vw, 46px) clamp(22px, 3.4vw, 52px);
}
.gai-kopfblau h1 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 14px; }
.gai-kopfblau .zeile {
  color: #fff; font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.35; margin: 0;
}
.gai-kopfblau .neben { color: #c9d6e2; line-height: 1.6; margin: 10px 0 0; }
.gai-kopfblau .klein { color: #8ea3b8; font-size: .85rem; margin: 18px 0 0; }

/* Einstiegstext unter dem Kopfblock */
.gai-intro { max-width: 76ch; }
.gai-intro h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin-bottom: 14px; }
.gai-intro p { color: var(--text-muted); line-height: 1.75; margin: 0 0 14px; }

/* Hervorgehobener Textblock, z. B. "Qualitaet, die im eigenen Werk beginnt." */
.gai-zitatblock {
  background: var(--bg); border-left: 4px solid var(--blau);
  border-radius: var(--radius); padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 38px);
}
.gai-zitatblock h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 10px; }
.gai-zitatblock p { color: var(--text-muted); line-height: 1.75; margin: 0; max-width: 90ch; }

/* Ablauf-Zeile unter den Werkbildern */
.gai-fluss {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 14px; margin: 22px 0 0; font-weight: 700; color: var(--blau);
}
.gai-fluss .pfeil { color: var(--text-muted); font-weight: 400; }

/* Roter Faden: die Kaeuferfrage als Vorzeile ueber jedem Abschnitt */
.gai-seite .section-titel .eyebrow,
.gai-seite .gai-titelblock .eyebrow,
.gai-seite .gai-karte .eyebrow,
.gai-seite .gai-intro .eyebrow { display: block; margin-bottom: 8px; }
.gai-seite .gai-schritt { background: var(--bg); }
.zeit-band .eyebrow { display: block; color: #8ecbf2; margin-bottom: 6px; }

/* "Bei GAI sind Sie in guten Haenden" - vier Punkte nebeneinander */
.section-titel.mittig {
  display: block; text-align: center; max-width: 760px; margin: 0 auto 34px;
}
.section-titel.mittig p { color: var(--text-muted); line-height: 1.65; margin-top: 10px; }
.gai-haende {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.gai-haende .gai-hand { padding: 0 clamp(16px, 2vw, 28px); }
.gai-haende .gai-hand + .gai-hand { border-left: 1px solid var(--linie); }
.gai-hand .kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gai-hand .gai-sym { width: 34px; height: 34px; flex: 0 0 34px; }
.gai-hand h3 { font-size: 1.02rem; font-weight: 800; line-height: 1.25; }
.gai-hand p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }

/* Dunkles Band: "Entscheidend ist, wann." */
.zeit-band {
  background: #12233a; color: #fff; border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px);
  display: grid; grid-template-columns: auto 1.4fr 1fr;
  gap: clamp(18px, 2.6vw, 34px); align-items: center;
}
.zeit-band .gai-sym { width: 54px; height: 54px; flex: 0 0 54px; color: #fff; }
.zeit-band h2 { color: #fff; font-size: clamp(1.2rem, 2.1vw, 1.7rem); line-height: 1.25; }
.zeit-band p { color: #c9d6e2; font-size: .92rem; line-height: 1.6; margin: 0; }
.zeit-punkte {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 32px); margin-top: 26px;
}
.zeit-punkte > div { text-align: center; }
.zeit-punkte .gai-sym { width: 34px; height: 34px; margin-bottom: 8px; }
.zeit-punkte strong { display: block; font-size: .95rem; margin-bottom: 4px; }
.zeit-punkte span:not(.gai-sym) {
  display: block; font-size: .85rem; color: var(--text-muted); line-height: 1.5;
}

.gai-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luecke); }
.gai-paar.einzeln { grid-template-columns: 1fr; }

/* Foto in einer Karte, z. B. die Familie Gai */
.gai-karte .karten-bild { margin: 20px 0 0; }
.gai-karte .karten-bild img {
  display: block; width: 100%; border-radius: calc(var(--radius) - 6px);
}
.gai-karte .karten-bild figcaption {
  font-size: .8rem; color: var(--text-muted); margin-top: 8px;
}
.gai-karte { background: var(--bg); border-radius: var(--radius); padding: clamp(24px, 3vw, 38px); }
.gai-karte h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 10px; }
.gai-karte > p { color: var(--text-muted); line-height: 1.7; }
.gai-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.gai-drei > div { text-align: center; }
.gai-drei .gai-sym { width: 34px; height: 34px; margin-bottom: 8px; }
.gai-drei strong { display: block; font-size: .88rem; margin-bottom: 4px; }
.gai-drei span:not(.gai-sym) { font-size: .8rem; color: var(--text-muted); line-height: 1.45; display: block; }

.wert-rechnung {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(10px, 2vw, 26px); flex-wrap: wrap; margin-top: 26px;
}
.wert-glied { text-align: center; width: 150px; }
.wert-glied .gai-sym { width: 42px; height: 42px; margin-bottom: 10px; }
.wert-glied strong { display: block; font-size: .92rem; line-height: 1.35; }
.wert-glied.ergebnis strong { color: var(--blau-tief); }
.wert-zeichen {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.5rem;
  color: var(--blau); padding-top: 12px;
}
.wert-hinweis { text-align: center; color: var(--text-muted); font-size: .9rem; margin-top: 20px; }

.gai-fazit-zeile {
  margin-top: 22px; padding: 18px 22px;
  background: var(--bg); border-left: 3px solid var(--blau);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text); line-height: 1.7;
}
.team-cta .cta-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 700px) {
  /* Zwei Knoepfe nebeneinander sind am Handy zu breit - sie ragten
     sonst ueber den Rand hinaus. */
  .team-cta .cta-knoepfe { width: 100%; flex-direction: column; }
  .team-cta .cta-knoepfe .btn { width: 100%; text-align: center; }
}

@media (max-width: 1000px) {
  .these-band { grid-template-columns: 1fr; }
  .gai-zahlen { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .gai-zahl:nth-child(4) { border-left: 0; }
  .gai-paar { grid-template-columns: 1fr; }
  /* Vier Punkte werden zu 2x2, die Trennlinien wandern mit */
  .gai-haende { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .gai-haende .gai-hand:nth-child(odd) { border-left: 0; padding-left: 0; }
  /* Uhr und Titel oben, Text darunter */
  .zeit-band { grid-template-columns: auto 1fr; }
  .zeit-band p { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .gai-werkbild img { aspect-ratio: 16 / 10; }
  .gai-kopfblock > img { aspect-ratio: 16 / 10; }
  .gai-zahlen { grid-template-columns: repeat(2, 1fr); }
  .gai-zahl:nth-child(odd) { border-left: 0; }
  /* Die drei Punkte als Zeilen mit Symbol links */
  .gai-drei { grid-template-columns: 1fr; gap: 14px; }
  .gai-drei > div { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; text-align: left; }
  .gai-drei .gai-sym { grid-row: 1 / span 2; margin-bottom: 0; }
  .gai-drei strong { grid-column: 2; }
  .gai-drei span:not(.gai-sym) { grid-column: 2; }
  .wert-glied { width: 128px; }
  .gai-haende { grid-template-columns: 1fr; row-gap: 22px; }
  .gai-haende .gai-hand { border-left: 0; padding: 0; }
  .zeit-band { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .zeit-band .gai-sym { width: 44px; height: 44px; flex-basis: 44px; }
  /* Die drei Punkte als Zeilen mit Symbol links */
  .zeit-punkte { grid-template-columns: 1fr; gap: 14px; }
  .zeit-punkte > div { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; text-align: left; }
  .zeit-punkte .gai-sym { grid-row: 1 / span 2; margin-bottom: 0; }
  .zeit-punkte strong { grid-column: 2; }
  .zeit-punkte span:not(.gai-sym) { grid-column: 2; }
}

/* Titel mit Untertext auf der GAI-Seite: untereinander, nicht nebeneinander */
.gai-titelblock { margin-bottom: 22px; max-width: 78ch; }
.gai-titelblock h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.gai-titelblock p { color: var(--text-muted); line-height: 1.7; margin: 0; }

/* Karten auf der GAI-Seite: Symbol statt Nummer, Katalog als Textzeile */
.gai-vorteil .gai-sym { display: inline-flex; width: 40px; height: 40px; color: var(--blau); margin-bottom: 12px; }
.gai-vorteil .gai-sym svg { width: 100%; height: 100%; }
.gai-katalog-link { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--blau); text-decoration: none; }
.gai-katalog-link:hover { text-decoration: underline; }

/* ---- "Warum Kraft": Service-Block ---- */
.wk-service { margin: 6px 0 34px; }
.wk-service-kopf { max-width: 720px; margin-bottom: 22px; }
.wk-service-kopf .eyebrow { display: block; margin-bottom: 8px; }
.wk-service-kopf h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 10px; }
.wk-service-kopf p { color: var(--text-muted); line-height: 1.7; }
.wk-service-punkte { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luecke); }
.wk-service-punkt { background: var(--bg); border-radius: var(--radius); padding: 24px 26px; }
.wk-service-punkt .wk-icon { width: 44px; height: 44px; margin-bottom: 10px; }
.wk-service-punkt h3 { font-size: 1.05rem; margin-bottom: 6px; }
.wk-service-punkt p { color: var(--text-muted); line-height: 1.65; font-size: .95rem; margin: 0; }
.wk-merksatz {
  display: flex; align-items: center; gap: 18px;
  background: #12233a; color: #fff; border-radius: var(--radius);
  padding: 22px 28px; margin: var(--luecke) 0;
}
.wk-merksatz .wk-band-icon { width: 40px; height: 40px; flex: 0 0 40px; margin: 0; }
.wk-merksatz p { margin: 0; font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.35; color: #fff; }
.wk-service-unten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luecke); }
.wk-lohn, .wk-notruf { border-radius: var(--radius); padding: 24px 26px; }
.wk-lohn { border: 1px solid var(--linie); }
.wk-notruf { background: var(--bg); }
.wk-lohn h3, .wk-notruf h3 { font-size: 1.1rem; margin-bottom: 8px; }
.wk-lohn p, .wk-notruf p { color: var(--text-muted); line-height: 1.65; margin: 0; }
.wk-notruf .btn { margin-top: 14px; }
@media (max-width: 760px) {
  .wk-service-punkte, .wk-service-unten { grid-template-columns: 1fr; }
  .wk-merksatz { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---- Querverweis-Kachel "Warum bei Kraft kaufen?" auf Produktseiten ---- */
.firma-kachel-zeile { display: flex; flex-direction: column; gap: 18px; }
.wk-kachel {
  background: linear-gradient(150deg, #0c141d 0%, #16324a 62%, #2e6fae 100%);
  color: #fff; border-radius: var(--radius); padding: 22px 30px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.wk-kachel .eyebrow { color: #8ecbf2; }
.wk-kachel h2 { color: #fff; font-size: 1.25rem; font-weight: 800; margin: 0; }
.wk-kachel p { color: #c9d6e2; font-size: .92rem; margin: 0 0 10px; line-height: 1.6; }
/* ---- Barrierefreiheit: Skip-Link und sichtbarer Tastaturfokus ---- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--blau-tief); color: #fff; padding: 10px 16px;
  border-radius: 8px; font-weight: 700; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 6px;
}
/* ---- Hilfsklassen statt Inline-Styles ---- */
.section-oben-30 { padding-top: 30px; }
.section-unten-8 { padding-bottom: 8px; }
.abstand-oben-20 { margin-top: 20px; }
.abstand-oben-26 { margin-top: 26px; }
.ohne-abstand-oben { margin-top: 0; }
.mittig { text-align: center; }
.gai-video-text { margin: 0 0 14px; }
.link-blau { color: var(--blau-tief); font-weight: 700; }

/* ---- Katalog: zunaechst 24 Produkte ---- */
.katalog-versteckt { display: none !important; }
.katalog-mehr { text-align: center; margin: 26px 0 6px; }

/* ---- Tabellen: seitlich wischbar, mit Schattenkante und Hinweis ---- */
.l-tabelle-scroll, .finder-scroll {
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
    linear-gradient(to right, rgba(0,0,0,.14), rgba(0,0,0,0)) left / 14px 100% no-repeat,
    linear-gradient(to left, rgba(0,0,0,.14), rgba(0,0,0,0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
@media (max-width: 760px) {
  .l-tabelle-scroll::before, .finder-scroll::before {
    content: "\2190 Tabelle seitlich wischen \2192"; display: block;
    font-size: .75rem; color: var(--text-muted); margin: 0 0 6px;
  }
  /* Produkt-Landingseiten: Bilder mobil niedriger, damit die Seite kuerzer wird */
  .l-bild img, .l-split-bild img { max-height: 260px; }
  .l-galerie-bild img { max-height: 220px; object-fit: cover; }
}

/* ---- Aufklapper fuer technische Tabellen ---- */
details.l-aufklapper > summary {
  cursor: pointer; font-weight: 700; color: var(--blau-tief); list-style: none;
  padding: 12px 16px; border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 12px;
}
details.l-aufklapper > summary::-webkit-details-marker { display: none; }
details.l-aufklapper > summary::before { content: "+ "; }
details.l-aufklapper[open] > summary::before { content: "\2013 "; }
@media (min-width: 761px) { details.l-aufklapper > summary { display: none; } }
/* ---- Formulare: Spamschutz-Feld unsichtbar, Dankesmeldung ---- */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formular-danke { background: var(--bg); border-radius: var(--radius); padding: 28px; }
.formular-danke h3 { margin-bottom: 8px; }
.formular-danke p { color: var(--text-muted); margin: 0; }
.formular-hinweis { font-size: .8rem; color: var(--text-muted); }

/* ---- Zweiter Hero-Block: Etikettiermaschinen (Startseite) ---- */
.hero2 { padding: 0 var(--rand); margin-top: 22px; }
.hero2-flaeche { position: relative; border-radius: var(--radius); overflow: hidden; background: #2b3746; }
.hero2-bild { width: 100%; height: auto; display: block; }
.hero2-text {
  position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 40px 32px 40px 48px; color: #fff;
}
.hero2-text .hero-eyebrow { color: #cfe3f5; }
.hero2-titel { font-size: clamp(2rem, 4.6vw, 4.1rem); font-weight: 800; line-height: 1.08; margin: 0; color: #fff; }
.hero2-titel em { color: #8ecbf2; font-style: normal; }
.hero2-untertext { font-size: clamp(.9rem, 1.25vw, 1.1rem); line-height: 1.5; margin: 0; color: #e6eef6; max-width: 520px; }
.hero2-text .btn-umriss { color: #fff; border-color: rgba(255, 255, 255, .8); }
.hero2-text .btn-umriss:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 800px) {
  .hero2-text { position: static; width: auto; padding: 22px 20px 26px; gap: 12px; }
  .hero2-untertext { max-width: none; }
}
/* Textblock oben links, damit er ueber den Flaschen bleibt (Bild: Flaschen im unteren Drittel) */
@media (min-width: 801px) {
  .hero2-text { justify-content: flex-start; top: 7%; bottom: auto; width: 46%; padding: 0 24px 0 48px; gap: 14px; }
  .hero2-untertext { max-width: 470px; font-size: clamp(.85rem, 1.15vw, 1.02rem); }
  .hero2-titel { font-size: clamp(2rem, 4.4vw, 3.9rem); }
}

/* ---- Zwei quadratische Kacheln: Abfuellen / Etikettieren (Startseite) ---- */
.duo { padding: 0 var(--rand); margin-top: 22px; }
.duo-innen { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.duo-karte { position: relative; border-radius: var(--radius); overflow: hidden; background: #d9dde2; }
.duo-bild { width: 100%; height: auto; display: block; }
.duo-text { position: absolute; left: 0; right: 0; top: 6%; padding: 0 30px; color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.duo-text h2 { font-size: clamp(1.3rem, 2.15vw, 1.9rem); font-weight: 800; line-height: 1.08; margin: 0; color: var(--ink); }
.duo-text p { margin: 0; font-size: clamp(.85rem, 1.05vw, .98rem); line-height: 1.4; color: #2c3a48; max-width: 92%; }
.duo-text .hero-ctas { margin-top: 2px; }
.duo-text .btn-umriss { color: var(--ink); border-color: rgba(16, 20, 24, .55); }
.duo-text .btn-umriss:hover { background: rgba(16, 20, 24, .08); }
@media (max-width: 800px) {
  .duo-innen { grid-template-columns: 1fr; gap: 16px; }
  .duo-text { position: static; padding: 18px 18px 22px; }
  .duo-text p { max-width: none; }
}
/* Zahlenband schmaeler (Michael, 04.09.2026) */
.zahlen-band { padding: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 40px); }
@media (max-width: 800px) { .zahlen-band { padding: 20px 0 22px; } }

/* =====================================================================
   VARIANTE "Seitenkopf hell" (Michael, 08.09.2026)
   Die dunklen Kopfbaender der Unterseiten (Anlagen-Berater, Geschichte,
   GAI, Warum Kraft, Referenzen, News, FAQ, Gebrauchtmaschinen, Downloads,
   Kontakt) werden weiss - nur der Seitenname in Schwarz, Einleitung grau.
   RUECKGAENGIG MACHEN: diesen gesamten Block bis zur Endmarke loeschen.
   ===================================================================== */
.seite-kopf, .gai-kopfband, .berater-kopf {
  background: #fff; color: var(--text); padding: 36px 0 4px; margin-bottom: 0;
}
.seite-kopf .eyebrow, .gai-kopfband .eyebrow, .berater-eyebrow { display: none !important; }
/* Ohne dunkles Band rueckt der Inhalt naeher an den Titel */
.seite-kopf + .section, .gai-kopfband + .section { padding-top: 18px; }
.seite-kopf + .inhalt { padding-top: 12px; }
.seite-kopf + .inhalt > h2:first-child { margin-top: 0; }
.seite-kopf h1, .gai-kopfband h1, .berater-kopf h1 {
  color: var(--ink); font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 10px;
}
.seite-kopf p, .gai-kopfband p, .berater-kopf p { display: none; }
.seite-kopf h1, .gai-kopfband h1, .berater-kopf h1 { margin-bottom: 4px; }
.gai-kopfband .btn-hell, .gai-kopfband .btn-umriss-hell { background: var(--blau-knopf); color: #fff; border-color: var(--blau-knopf); }
/* ENDE Variante "Seitenkopf hell" */

/* Downloadcenter: Prospekte je Hersteller aufklappbar (Michael, 08.09.2026) */
details.dl-hersteller {
  background: var(--bg); border: 1.5px solid var(--linie); border-radius: 12px;
  margin-bottom: 10px; overflow: hidden; transition: border-color .15s, background .15s;
}
details.dl-hersteller:hover, details.dl-hersteller[open] { border-color: var(--blau); background: #fff; }
details.dl-hersteller summary {
  cursor: pointer; list-style: none; position: relative;
  display: flex; align-items: center; gap: 16px; padding: 14px 46px 14px 18px;
}
details.dl-hersteller summary::-webkit-details-marker { display: none; }
details.dl-hersteller summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--blau);
}
details.dl-hersteller[open] summary::after { content: "–"; }
.dl-hersteller-logo { height: 26px; width: auto; flex: 0 0 auto; }
.dl-hersteller-name { font-weight: 700; font-size: 1.02rem; color: var(--text); }
.dl-hersteller-zaehler { margin-left: auto; font-size: .86rem; color: var(--text-muted); white-space: nowrap; }
details.dl-hersteller .dl-gruppe { border: 0; border-top: 1px solid var(--linie); border-radius: 0; margin: 0; padding: 4px 18px 8px; }
details.dl-hersteller .dl-zeile:first-child { border-top: 0; }
@media (max-width: 600px) {
  details.dl-hersteller summary { flex-wrap: wrap; gap: 8px 12px; padding-right: 40px; }
  .dl-hersteller-zaehler { margin-left: 0; flex-basis: 100%; }
}
details.dl-hersteller .dl-gemeinsam { background: var(--bg); margin: 8px -18px 4px; padding: 10px 18px; border-top: 0; }
details.dl-hersteller .dl-gemeinsam .dl-produkt { color: var(--blau-tief); }

/* ---- Prozess-Schemata: Klick vergroessert, Variante "bildUnten" in voller Breite ---- */
.l-zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; max-width: 100%; border-radius: 12px; }
.l-zoom img { display: block; }
.l-zoom:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.l-bild.gross { margin-bottom: 30px; }
.l-bild.gross img { max-height: 660px; }
.l-box.breit { max-width: 1100px; margin: 0 auto; }
@media (max-width: 760px) {
  .l-bild.gross img { max-height: none; }
}

/* ---- Startseite "Aktuell": drei neueste News, Link rechts neben dem Titel ---- */
.section-link { font-size: .92rem; font-weight: 700; color: var(--blau-tief); text-decoration: none; white-space: nowrap; padding-bottom: 6px; }
.section-link:hover { text-decoration: underline; }
@media (min-width: 961px) {
  .news-grid.aktuell { grid-template-columns: repeat(3, 1fr); }
}

/* ---- News-Kachel unter den Neuheiten: Foto füllt das Bildfeld, Datum als Kicker ---- */
.produkt-karte.news-kachel .bild { padding: 0; }
.produkt-karte.news-kachel .bild img { width: 100%; height: 100%; max-height: none; max-width: none; object-fit: contain; mix-blend-mode: normal; }
.produkt-karte.news-kachel .info h3 { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.produkt-karte.news-kachel .karte-hersteller { color: var(--blau-tief); }

/* ---- News-Tabellen: kein Querscrollen, Spalten dürfen umbrechen, linksbündig, leichte Kopfzeile ---- */
.news-detail .l-tabelle-scroll { overflow-x: visible; }
.news-tabelle { width: 100%; }
.news-tabelle th, .news-tabelle td,
.news-tabelle th:not(:first-child), .news-tabelle td:not(:first-child) { text-align: left; white-space: normal; }
.news-tabelle th { border-bottom: 1px solid var(--linie); color: var(--text-muted); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.news-tabelle td:first-child { color: var(--ink); font-weight: 700; }

/* ---- News-Bild im Bericht: kein grauer Hintergrund; Querformate füllen die volle Breite ---- */
.news-detail .bild { background: none; }
.news-detail .bild.breit img { width: 100%; max-height: none; }

/* ---- Startseite: einzeilige "Aktuell"-Leiste über den Neuheiten ---- */
.aktuell-zeile-wrap { padding-top: 34px; }
.aktuell-zeile {
  display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 10px;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  text-decoration: none; color: var(--text); transition: box-shadow .25s ease, transform .25s ease;
}
.aktuell-zeile:hover { box-shadow: var(--schatten-hover); transform: translateY(-1px); }
.az-bild { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--bg); }
.az-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.az-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blau-tief); white-space: nowrap; }
.az-datum { font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.az-titel { font-weight: 700; font-size: 1rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-weiter { font-size: .88rem; font-weight: 700; color: var(--blau-tief); white-space: nowrap; }
@media (max-width: 720px) {
  .aktuell-zeile { flex-wrap: wrap; gap: 8px 12px; }
  .az-titel { flex-basis: 100%; white-space: normal; order: 5; }
  .az-weiter { order: 6; }
}

/* ---- Footer-Box "Aktuell" (neuester News-Eintrag) ---- */
.footer-newsletter { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.aktuell-karte { display: flex; flex-direction: column; gap: 6px; }
.aktuell-karte .ak-datum { font-size: .8rem; font-weight: 700; color: var(--blau-tief); font-variant-numeric: tabular-nums; }
.aktuell-karte .ak-titel { font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.35; }
.aktuell-karte .ak-titel:hover { color: var(--blau-tief); }
.aktuell-karte p { margin: 0; }
.aktuell-karte .ak-weiter { margin-top: auto; padding-top: 6px; font-size: .88rem; font-weight: 700; color: var(--blau-tief); text-decoration: none; }