/*!
Theme Name: Betonwerk Käse
Theme URI: https://kaese-betonsteinwerk.de
Author: webcoon werbeagentur
Author URI: https://webcoon.de
Description: Custom Theme für Käse Betonsteinwerk — ACF-Pagebuilder, Design-System der statischen Vorlage
Version: 1.0.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: betonwerk
*/

/* ============================================================
   KÄSE BETONSTEINWERK — Design-System
   ------------------------------------------------------------
   Aufbau:
   01 Variablen        02 Basis & Typografie   03 Buttons & Links
   04 Navigation       05 Hero & Seitenkopf    06 Sektionen
   07 Produkt-Rows     08 Karten               09 Steps
   10 Serien & Specs   11 (entfallen)          12 FAQ
   13 CTA-Panel        14 Kontakt-Bausteine    15 Footer
   16 Animation & Responsive
   ============================================================ */

/* Schrift: DM Sans wird unter Theme-Einstellungen → Style → Fonts gepflegt;
   webcoon core schreibt die @font-face-Regeln in die options.css. */

/* ---------- 01 Variablen ---------- */
:root {
  /* Farben — gepflegt unter Theme-Einstellungen → Style → Farben (options.css).
     Die Werte dahinter greifen nur, falls das Plugin einmal nicht aktiv ist. */
  --blue: var(--main-color, #356895);       /* Primärfarbe */
  --blue-deep: var(--sub-color, #2a5477);   /* Hover / Verlauf */
  --blue-soft: var(--color-4, #9fc2de);     /* Highlight auf dunklen Flächen */
  --tint: var(--color-1, #edeff2);          /* Highlight-Hintergrund */
  --paper: var(--bg-color, #fbfcfd);        /* Grundfläche */
  --ink: var(--text-color, #1d222a);        /* Text / dunkle Flächen */
  --ink-2: var(--color-2, #58616c);         /* Sekundärtext */
  --line: var(--color-3, #d9dee4);          /* Linien auf hell */
  --white: var(--color-w, #ffffff);
  --on-dark: rgba(255, 255, 255, .68);
  --line-dark: rgba(255, 255, 255, .09);

  /* Typografie */
  --font: var(--font-family, "DM Sans"), "Helvetica Neue", Arial, sans-serif;   /* Style → Typografie */
  --fs-hero: clamp(2.5rem, 7.4vw, 6rem);
  --fs-display: clamp(2.05rem, 4.6vw, 3.55rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.2rem);

  /* Layout */
  --container: var(--maxwidth, 1280px);     /* Style → Layout */
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);
  --radius: var(--br, 2px);                 /* Style → Layout → Eckenradius */
  --speed: .45s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 02 Basis & Typografie ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--font-size, 1rem);
  line-height: 1.65;   /* bewusst ohne Einheit: --line-height der options.css ist in em und würde sich als fester Pixelwert an alle Elemente vererben */
  font-weight: var(--font-weight, 400);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

/* Pagebuilder-Grid: section > row > col — row übernimmt das Container-Modell */
.row { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); position: relative; }
.col { min-width: 0; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: inherit;
  font-size: revert;
  color: inherit;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.01em;
}

.display { font-size: var(--fs-display); }
.display strong, .hl { color: var(--blue); font-weight: inherit; }

.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 56ch; }
.lead--wide { max-width: none; }

.eyebrow {
  display: inline-block;
  font-size: .82rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.1rem;
}

::selection { background: var(--blue); color: var(--white); }

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

/* ---------- 03 Buttons & Links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.25rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--white);
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--speed), border-color var(--speed), color var(--speed), transform var(--speed);
}
.btn svg { width: 15px; height: 15px; transition: transform var(--speed); }
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn:hover svg { transform: translateX(4px); }

.btn--light { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--tint); border-color: var(--tint); }

.btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.btn--outline:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

.btn-group { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.btn-group--center { justify-content: center; }

/* Button-Element des Pagebuilders: Grundform wie .btn, Farben aus den Button-Vorlagen
   unter Theme-Einstellungen → Style → Buttons (Primär, Umriss, Hell). */
a.button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.25rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--white);
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  transition: background var(--speed), border-color var(--speed), color var(--speed);
}
a.button .btn-icon {
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--speed);
}
a.button:hover .btn-icon { transform: translateX(4px); }

/* Pfeil-Textlink */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  color: var(--blue);
}
.arrow-link svg { width: 15px; height: 15px; transition: transform var(--speed); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ---------- 04 Navigation ---------- */
.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 1.1rem;
  transition: background .25s ease, box-shadow .25s ease;
}
.is-scrolled .navbar, .nav-solid .navbar {
  background: var(--white);
  box-shadow: 0 1px 0 var(--line);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* .row bringt fuer den Pagebuilder position:relative mit. Im Header muss das weg,
     sonst haengt das Mega-Menue am inneren Container statt am Header: es waere nur
     so breit wie der Inhalt und saesse eine Header-Polsterung zu hoch. */
  position: static;
}
.navbar-brand { display: flex; align-items: center; }
.navbar-brand img { height: 64px; width: auto; }
.navbar-brand .logo-color { display: none; }
.is-scrolled .navbar-brand .logo-white, .nav-solid .navbar-brand .logo-white { display: none; }
.is-scrolled .navbar-brand .logo-color, .nav-solid .navbar-brand .logo-color { display: block; }

.navbar-menu { display: flex; align-items: center; gap: 1.7rem; }
.navbar-menu > a, .has-mega > a {
  display: inline-block;
  padding: .45rem 0;
  font-size: 1.02rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
  border-bottom: 2px solid transparent;
  transition: color var(--speed), border-color var(--speed);
}
.navbar-menu > a:hover, .has-mega > a:hover { color: var(--white); border-color: rgba(255, 255, 255, .45); }
.navbar-menu > a.active, .has-mega > a.active { color: var(--white); border-color: var(--white); }
.is-scrolled .navbar-menu > a, .nav-solid .navbar-menu > a,
.is-scrolled .has-mega > a, .nav-solid .has-mega > a { color: var(--ink-2); }
.is-scrolled .navbar-menu > a:hover, .nav-solid .navbar-menu > a:hover,
.is-scrolled .has-mega > a:hover, .nav-solid .has-mega > a:hover { color: var(--ink); border-color: var(--line); }
.is-scrolled .navbar-menu > a.active, .nav-solid .navbar-menu > a.active,
.is-scrolled .has-mega > a.active, .nav-solid .has-mega > a.active { color: var(--blue); border-color: var(--blue); }

/* Produkte-Dropdown: vollbreites Panel unter der Leiste */
.mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  padding-block: 1.5rem 2rem;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.mega-open .mega, .has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
}
.mega-head { margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.mega-head .eyebrow { margin-bottom: 0; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem 1.8rem; }
.mega-foot { margin-top: .9rem; }
.mega-foot .arrow-link { font-size: .92rem; }
.mega a {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .75rem .8rem;
  border-radius: var(--radius);
  transition: background var(--speed);
}
.mega a:hover { background: var(--tint); }
.mega img { flex: 0 0 150px; width: 150px; height: 100px; object-fit: cover; border-radius: var(--radius); }
.mega strong { display: block; font-size: 1.08rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.mega small { display: block; margin-top: .2rem; font-size: .87rem; color: var(--ink-2); line-height: 1.4; }

/* Burger — erst mobil sichtbar */
/* Bewusst ohne Flexbox: Safari/iOS legt button-Kinder sonst nicht
   zuverlässig aus (Striche kollabieren unsichtbar auf 0 Höhe) */
.navbar-burger {
  display: none;
  width: 46px;
  height: 46px;
  padding: 15px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.navbar-burger span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 5px auto 0;
  background: var(--white);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(20, 23, 27, .35);
  transition: transform var(--speed), opacity var(--speed), background var(--speed);
}
.navbar-burger span:first-child { margin-top: 0; }
.is-scrolled .navbar-burger span, .nav-solid .navbar-burger span { background: var(--ink); box-shadow: none; }
.nav-open .navbar-burger span { background: var(--white) !important; }
.nav-open .navbar-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .navbar-burger span:nth-child(2) { opacity: 0; }
.nav-open .navbar-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiles Overlay: vollflächig dunkel, Scrollbereich beginnt unterhalb der Kopfzeile */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding-top: 100px;
  background: #14171b;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--speed), visibility var(--speed);
}
.nav-open .nav-overlay { opacity: 1; visibility: visible; }
.nav-open .navbar { background: transparent; box-shadow: none; }
.nav-open .navbar-brand .logo-white { display: block !important; }
.nav-open .navbar-brand .logo-color { display: none !important; }
.nav-overlay-scroll {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: .4rem var(--pad) 2.4rem;
  overflow-y: auto;
}
.nav-overlay a {
  padding: .85rem 0;
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--white);
  border-bottom: 1px solid var(--line-dark);
}
.nav-overlay a.active { color: var(--blue-soft); }
.nav-overlay-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  padding: .3rem 0 1rem;
  border-bottom: 1px solid var(--line-dark);
}
.nav-overlay-products a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .4rem .5rem;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .06);
  border: 0;
  border-radius: var(--radius);
}
.nav-overlay-products a.active { color: var(--white); background: rgba(159, 194, 222, .18); }
.nav-overlay-products img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius);
}
.nav-overlay a.nav-overlay-cta {
  margin-top: 1.3rem;
  justify-content: center;
  font-size: .98rem;
  border-bottom: 0;
}
.nav-overlay-info { display: flex; flex-direction: column; margin-top: 1.3rem; }
.nav-overlay-info a { padding: .1rem 0; font-size: 1.05rem; border: 0; }
.nav-overlay-info a:first-child { font-size: 1.5rem; font-weight: 600; }
.nav-overlay-info p { margin-top: .55rem; font-size: .92rem; color: var(--on-dark); }

/* ---------- 05 Hero & Seitenkopf ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: 7rem;
  color: var(--white);
  background: var(--ink);
  overflow: hidden;
}
.bg-img { position: absolute; inset: 0; z-index: 0; }
.bg-img img, .bg-img video,
.hero-media, .hero-media video, .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media::after,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(20, 23, 27, .55) 0%, rgba(20, 23, 27, .22) 42%, rgba(20, 23, 27, .78) 100%);
  pointer-events: none;
}
.hero .row { position: relative; z-index: 1; }

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: -.015em;
}
.hero-title > span { display: block; white-space: nowrap; }
.type-word { will-change: transform, opacity; }
.hero-title strong { font-weight: 700; }
.hero-title .hl { color: var(--blue-soft); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.hero-grid .lead { color: rgba(255, 255, 255, .85); }
.hero-grid .eyebrow { color: var(--blue-soft); }

.hero-bar {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line-dark);
}
/* margin-inline: auto von .row muss hier weg: im Flex-Hero verhindert ein
   auto-Rand am Querrand das Strecken — die Leiste schrumpft sonst auf
   Inhaltsbreite und sitzt eingerueckt statt ueber die volle Breite. */
.row.hero-bar { max-width: none; padding-inline: 0; margin-inline: 0; }
.hero-bar .row,
.hero-bar-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: 1.1rem;
  font-size: .92rem;
  color: var(--on-dark);
}
.hero-bar strong { color: var(--white); font-weight: 500; }

/* Kompakter Kopf für Unterseiten */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vh, 640px);
  padding-top: 8rem;
  color: var(--white);
  overflow: hidden;
}
.page-hero .hero-media::after,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(20, 23, 27, .45) 0%, rgba(20, 23, 27, .85) 100%);
  pointer-events: none;
}
.page-hero--plain::after { display: none; }
.page-hero .row { position: relative; z-index: 1; width: 100%; padding-bottom: 3rem; }
.page-hero .eyebrow { color: var(--blue-soft); }
.page-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.9rem); font-weight: 300; text-transform: uppercase; letter-spacing: -.015em; }
.page-hero h1 strong { font-weight: 700; }
.page-hero .hl { color: var(--blue-soft); }
.page-hero .lead { color: rgba(255, 255, 255, .85); margin-top: 1.2rem; }


/* Schlichter Seitenkopf (Rechtstexte) */
.page-hero--plain {
  min-height: auto;
  padding-top: 9rem;
  color: var(--ink);
  background: var(--tint);
}
.page-hero--plain .row { padding-bottom: 2.5rem; }
.page-hero--plain h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.01em;
}
.page-hero--plain .eyebrow { margin-bottom: .6rem; }

/* Bild-Kachel */
.tile { overflow: hidden; border-radius: var(--radius); }
.tile > .image { height: 100%; }
.tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Abstände — Werte für die Pagebuilder-Einstellungen "m-t" / "m-b".
   Zahl = Wert in Zehntel-rem, "fluid" skaliert mit der Viewport-Breite. */
.m-t-12 { margin-top: 1.2rem; }
.m-t-14 { margin-top: 1.4rem; }
.m-t-15 { margin-top: 1.5rem; }
.m-t-18 { margin-top: 1.8rem; }
.m-t-20 { margin-top: 2rem; }
.m-b-24 { margin-bottom: 2.4rem; }
.m-t-fluid { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Ausführungen (Varianten eines Produkts) — Chips wie die Farbtöne, mit größerem Icon */
.variants { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.6rem; }
.variants-label { width: 100%; margin-bottom: .1rem; font-size: .76rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.variant {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem .45rem .6rem;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 99px;
}
.variant svg { width: 26px; height: 26px; flex: none; color: var(--blue); }
.variant.is-linked { cursor: pointer; transition: border-color var(--speed), color var(--speed); }
.variant.is-linked:hover { border-color: var(--blue); color: var(--blue); }
.series-tag i, .lightbox figcaption i { display: inline-block; width: 12px; height: 12px; margin-right: .45rem; border-radius: 50%; vertical-align: -1px; }
/* Video als Collage-Kachel (Über uns): gleiches 3:2-Format wie die Fotos, sonst gibt
   das Hochformat dem Raster seine ganze Höhe vor */
.collage .tile > .video { height: 100%; }
.collage .tile video { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Fließtext (Impressum, Datenschutz) */
.prose { max-width: 68ch; }
.prose h2 {
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
  font-weight: 500;
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 1.6rem; font-size: 1rem; font-weight: 500; }
.prose h4 { margin-top: 1.2rem; font-size: .95rem; font-weight: 500; }
.prose p { margin-top: .7rem; font-size: .97rem; line-height: 1.75; color: var(--ink-2); }
.prose ul { margin-top: .7rem; padding-left: 1.1rem; }
.prose ul li {
  list-style: disc;
  margin-top: .3rem;
  font-size: .97rem;
  line-height: 1.7;
  color: var(--ink-2);
}
.prose a { color: var(--blue); font-weight: 500; }
.prose .prose-note {
  margin-top: 2.6rem;
  padding: .9rem 1.1rem;
  font-size: .88rem;
  color: var(--ink-2);
  background: var(--tint);
  border-radius: var(--radius);
}
.prose .prose-note em { font-style: normal; }

/* ---------- 06 Sektionen ---------- */
.section { padding-block: var(--section); }
.section--tint { background: var(--tint); }
#content section + section { border-top: 1px solid var(--line); }
#content .section--tint, #content .section--tint + section { border-top: 0; }
#content .section--tint + .section--tint { border-top: 1px solid var(--line); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem 4rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head .lead { justify-self: start; }

/* Zweispalter (Über-uns-Teaser, Serien-Texte etc.) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.5rem 5rem;
  align-items: start;
}
.split p + p { margin-top: 1rem; }

/* ---------- 07 Produkt-Rows (Kernstück Startseite) ---------- */
.rows { border-top: 1px solid var(--line); }
.p-row {
  display: grid;
  grid-template-columns: 5.5rem 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
  transition: background var(--speed);
}
.p-row:hover { background: var(--white); }
.section--tint .p-row:hover { background: var(--paper); }

.row-num { font-size: .95rem; font-weight: 500; color: var(--ink-2); }
.row-pic { overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; }
.row-pic img { width: 100%; height: 100%; object-fit: cover; }

.row-body strong {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 500;
  transition: color var(--speed);
}
.p-row:hover .row-body strong { color: var(--blue); }
.row-body em { font-style: normal; font-size: .95rem; color: var(--ink-2); }

.row-arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background var(--speed), border-color var(--speed), color var(--speed), transform var(--speed);
}
.row-arrow svg { width: 18px; height: 18px; }
.p-row:hover .row-arrow { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ---------- 08 Karten (Angebote, Produkt-Übersicht) ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--speed);
}
.card:hover { border-color: var(--blue); }

.card-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card-pic img { width: 100%; height: 100%; object-fit: cover; }

.offer { position: relative; display: block; overflow: hidden; border-radius: var(--radius); }
.offer img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.offer:hover img { transform: scale(1.045); }
.offer-arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  transition: background var(--speed), color var(--speed), transform var(--speed);
}
.offer-arrow svg { width: 17px; height: 17px; }
.offer:hover .offer-arrow { background: var(--blue); color: var(--white); transform: rotate(-45deg); }
.offer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 23, 27, 0) 40%, rgba(20, 23, 27, .55) 68%, rgba(20, 23, 27, .92) 100%);
}
.offer-txt {
  position: absolute;
  inset-inline: 1.4rem;
  bottom: 1.3rem;
  z-index: 1;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(20, 23, 27, .55);
}
.offer-txt h3 { font-size: 1.35rem; }
.offer-txt span { display: block; margin-top: .35rem; font-size: .9rem; color: rgba(255, 255, 255, .88); }

.offer-list .offer-row:last-child { border-bottom: 1px solid var(--line); }
.offer-row { scroll-margin-top: 120px; }
.offer-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--line);
}
.offer-row .pic { position: relative; overflow: hidden; border-radius: var(--radius); }
.offer-row .pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.offer-row h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.offer-row p { margin-top: .6rem; max-width: 52ch; color: var(--ink-2); }
.offer-row .offer-meta { display: block; margin-top: .9rem; font-size: .88rem; color: var(--ink-2); }
.offer-row .btn-group { margin-top: 1.4rem; }

/* Angebots-Teaser: hohes, angeschnittenes Bild, Text darunter, Badge angeschnitten */
.offer-teaser { position: relative; display: block; }
.offer-teaser .pic { position: relative; }
.offer-teaser .clip { overflow: hidden; border-radius: var(--radius); }
.offer-teaser .clip img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.offer-teaser:hover .clip img { transform: scale(1.045); }
.offer-teaser .badge { top: -.85rem; left: 1.1rem; }
.offer-teaser .offer-arrow { top: 1rem; right: 1rem; }
.offer-teaser:hover .offer-arrow { background: var(--blue); color: var(--white); transform: rotate(-45deg); }
.offer-teaser h3 { margin-top: 1rem; font-size: 1.25rem; transition: color var(--speed); }
.offer-teaser:hover h3 { color: var(--blue); }
.offer-teaser .offer-meta { display: block; margin-top: .3rem; font-size: .9rem; color: var(--ink-2); }

/* Keine Angebote: Sektion des Teasers ausblenden (Markierung aus [kb_angebote_teaser]) */
.section:has(.kb-angebote-leer) { display: none; }
.kb-angebote-hinweis { padding: 1rem 1.25rem; border: 1px dashed var(--line); color: var(--ink-2); text-align: center; }

.badge {
  position: absolute;
  top: .9rem;
  left: .9rem;
  z-index: 1;
  padding: .3rem .7rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue);
  border-radius: var(--radius);
}

.card-body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 1.4rem; }
.card-body .eyebrow { margin-bottom: 0; }
.card-body h3 { font-size: 1.25rem; }
.card-body p { font-size: .95rem; color: var(--ink-2); }
.card-body .card-meta {
  margin-top: auto;
  padding-top: .9rem;
  font-size: .85rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}

/* ---------- 09 Steps ---------- */
.step { padding-top: 1.3rem; border-top: 1px solid var(--line); }
.step i {
  display: block;
  font-style: normal;
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  color: var(--blue);
}
.step h4 { margin-top: .9rem; font-size: 1.12rem; }
.step p { margin-top: .45rem; font-size: .95rem; color: var(--ink-2); }

/* ---------- 10 Serien & Specs (Produktseiten) ---------- */
.series {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem 4.5rem;
  padding-block: var(--section);
  border-top: 1px solid var(--line);
}
.series:first-of-type { border-top: 0; }
/* Serie ohne Bild (z. B. bis ein Foto vorliegt): Text nutzt die volle Breite */
.series:not(:has(.series-pic)) { grid-template-columns: minmax(0, 1fr); }
.series-pic { position: relative; }
.series-pic > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); cursor: zoom-in; }
.series-nav {
  position: absolute;
  right: .9rem;
  bottom: .9rem;
  z-index: 2;
  display: flex;
  gap: .45rem;
  opacity: 0;
  transition: opacity var(--speed);
}
.series-main-sw:hover .series-nav, .series-main-sw:focus-within .series-nav { opacity: 1; }
@media (hover: none) { .series-nav { opacity: 1; } }
.series-nav button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--speed), color var(--speed);
}
.series-nav button:hover { background: var(--blue); color: var(--white); }
.series-nav svg { width: 17px; height: 17px; }
.series-tag {
  position: absolute;
  top: .9rem;
  left: .9rem;
  z-index: 1;
  padding: .32rem .75rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  pointer-events: none;
}

.series-body h2 { font-size: var(--fs-display); }
.series-body > .lead { margin-top: 1rem; }

.swatches { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.swatches.collapsed { max-height: var(--row-h, 2.2rem); overflow: hidden; }
.swatches.collapsed::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 130px;
  background: linear-gradient(90deg, transparent, var(--paper) 72%);
}
.swatch-more {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  padding: .4rem .9rem;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 99px;
  cursor: pointer;
  transition: border-color var(--speed);
}
.swatch-more:hover { border-color: var(--blue); }
.swatch {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .9rem .4rem .5rem;
  font-size: .88rem;
  font-weight: 500;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 99px;
}
.swatch i { width: 17px; height: 17px; border-radius: 50%; }
.swatch.is-linked { cursor: pointer; transition: border-color var(--speed), color var(--speed); }
.swatch.is-linked:hover { border-color: var(--blue); color: var(--blue); }

/* Farbtöne des Sortiments */
.c-grau { background: #9a9ea3; }
.c-anthrazit { background: #43474c; }
.c-schwarz { background: #26292d; }
.c-herbstlaub { background: #96604a; }
.c-sandstein { background: #d3bd9b; }
.c-gelb { background: #d0b078; }
.c-muschelkalk { background: #cbc4b4; }
.c-rotbraun { background: #7d4a39; }
.c-rot { background: #9c4736; }
.c-basalt { background: #383b40; }
.c-diabasrot { background: #8b4a3f; }
.c-granit { background: #aab0b6; }
.c-porphyr { background: #85604f; }
.c-grau-anthrazit { background: linear-gradient(135deg, #9a9ea3 0 50%, #43474c 50% 100%); }
.c-grau-schwarz { background: linear-gradient(135deg, #9a9ea3 0 50%, #26292d 50% 100%); }
.c-gelb-anthrazit { background: linear-gradient(135deg, #d0b078 0 50%, #43474c 50% 100%); }

/* Verwendungs-Chips mit Icon */
.uses { display: flex; flex-wrap: wrap; gap: 1.2rem 0; margin-top: 1.9rem; }
.uses span + span { border-left: 1px solid var(--line); margin-left: 1.8rem; padding-left: 1.8rem; }
.uses span {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.uses svg { width: 26px; height: 26px; color: var(--ink); }

.specs { margin-top: 1.8rem; }
.specs div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.specs dt { color: var(--ink-2); }
.specs dd { font-weight: 500; text-align: right; }

/* Serien-Slider (Swiper) */
.series-main-sw { position: relative; overflow: hidden; border-radius: var(--radius); }
.series-main-sw .swiper-slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: zoom-in;
}
.series-thumbs { margin-top: .6rem; overflow: hidden; }
.series-thumbs .swiper-slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 2px solid transparent;
  opacity: .7;
  cursor: pointer;
  transition: opacity var(--speed), border-color var(--speed);
}
.series-thumbs .swiper-slide:hover img { opacity: 1; }
.series-thumbs .swiper-slide-thumb-active img { opacity: 1; border-color: var(--blue); }

/* Schichtaufbau als Querschnitt (Pflaster) */
.layers { width: 100%; }
.layer {
  display: grid;
  grid-template-columns: 150px 280px minmax(0, 1fr);
  gap: .6rem 2.5rem;
  align-items: center;
  padding-block: .7rem;
}
.layer + .layer { border-top: 1px dashed var(--line); }
.layer-bar { height: 22px; border-radius: 2px; background: var(--c, var(--line)); }
.layer strong { font-size: 1rem; }
.layer strong em { font-style: normal; color: var(--blue); font-weight: 300; margin-right: .5rem; }
.layer p { font-size: .92rem; color: var(--ink-2); }

/* Hinweise mit Icon (Fertigbeton) */
.hint {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  padding-block: 1.05rem;
}
.hint + .hint { border-top: 1px solid var(--line); }
.hint > svg { width: 1.7rem; height: 1.7rem; color: var(--blue); margin-top: .15rem; }
.hint h4 { font-size: 1.08rem; }
.hint p { margin-top: .3rem; font-size: .95rem; color: var(--ink-2); }
.hints + .specs { margin-top: 1.6rem; }
/* Builder legt jedes Element in einen eigenen Wrapper — Nachbarschaft dort nachbilden */
.text:has(> .hints) + .text > .specs { margin-top: 1.6rem; }

/* Vertikale Schrittliste */
.steps-list .stepline {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.1rem;
  padding-block: 1.05rem;
}
.steps-list .stepline + .stepline { border-top: 1px solid var(--line); }
.stepline i { font-style: normal; font-size: 1.55rem; font-weight: 300; color: var(--blue); line-height: 1.25; }
.stepline h4 { font-size: 1.08rem; }
.stepline p { margin-top: .3rem; font-size: .95rem; color: var(--ink-2); }



/* Medienspalte, die oben und unten übersteht */
.media-pull {
  align-self: stretch;
  margin-left: calc(-1 * (max((100vw - var(--container)) / 2, 0px) + var(--pad)));
}
/* Builder kapselt Bilder in <div class="image">; damit die Prozenthöhe
   unten greift, muss der Wrapper die Spaltenhöhe durchreichen. */
.media-pull > .image { height: 100%; }
.media-pull img {
  width: 100%;
  height: calc(100% + 4.5rem);
  min-height: 460px;
  object-fit: cover;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-block: -2.25rem;
}

/* Bild-Collage: ein großes, zwei kleine */
/* Feste Zeilenhöhe: WordPress liefert width/height an den Bildern — mit
   `grid-auto-rows: 1fr` + `height:100%` bläht sich das Raster sonst auf die
   Eigenhöhe der Bilder auf (statische Vorlage hatte keine Größenattribute). */
/* Die beiden rechten Kacheln geben über ihr Seitenverhältnis die Zeilenhöhe
   vor (Wert aus der statischen Vorlage), die große Kachel links füllt beide
   Zeilen. Damit ist die Höhe unabhängig von den Bilddateien definiert. */
.collage { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; gap: 1rem; }
.collage .tile:first-child { grid-row: span 2; }
/* Das bild-Element des Builders legt ein <div class="image"> um das Bild —
   die Kachelhoehe muss dadurch hindurchgreifen. */
.collage .tile > .image { height: 100%; }
.collage .tile img { height: 100%; aspect-ratio: auto; min-height: 220px; }

/* Timeline als Slider: Linie läuft rechts aus der Seite */
.timeline {
  --tl-bleed: calc(max((100vw - var(--container)) / 2, 0px) + var(--pad));
  position: relative;
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-inline: calc(-1 * var(--tl-bleed));
  padding-left: var(--tl-bleed);
}
.timeline .swiper-wrapper::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  left: 0;
  width: calc(100% + 100vw);
  height: 1px;
  background: var(--line);
}
.timeline .swiper-wrapper::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: calc(100% + 100vw);
  height: 9px;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 52px);
}
.timeline-nav {
  position: static;
  display: flex;
  justify-content: flex-end;
  gap: .45rem;
  margin-top: 1.4rem;
  opacity: 1;
}
.timeline-nav button { border: 1px solid var(--line); }

.tl-item { position: relative; z-index: 1; padding-top: 1.6rem; }
.tl-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
}
.tl-year { display: block; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 300; color: var(--blue); line-height: 1; }
.tl-item h4 { margin-top: .8rem; font-size: 1.12rem; }
.tl-item p { margin-top: .45rem; font-size: .95rem; color: var(--ink-2); padding-right: 1.5rem; }

/* Angebots-Slider auf der Startseite — greift erst, wenn mehr Angebote
   eingestellt sind als nebeneinander passen. Nutzt die Slider-Navigation
   der Serien-Galerien weiter. */
.offer-slider-wrap { position: relative; }
.offer-slider { overflow: hidden; }
.offer-nav {
  position: static;
  display: flex;
  justify-content: flex-end;
  gap: .45rem;
  margin-top: 1.4rem;
  opacity: 1;
}
.offer-nav button { border: 1px solid var(--line); }

/* Bildband: Bild liegt als Section-Background (.bg-img) */
.photo-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 74vh, 720px);
}
.photo-band > .row { position: relative; z-index: 1; width: 100%; }
.photo-band::after {
  z-index: 0;
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 23, 27, 0) 30%, rgba(20, 23, 27, .5) 62%, rgba(20, 23, 27, .88) 100%);
}
.photo-band p {
  position: relative;
  z-index: 1;
  padding-bottom: 1.5rem;
  color: var(--white);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.photo-band-content {
  padding-bottom: clamp(2.8rem, 7vw, 5rem);
  color: var(--white);
}
.photo-band-content { text-shadow: 0 1px 18px rgba(20, 23, 27, .6); }
.photo-band-content .eyebrow { color: rgba(255, 255, 255, .9); }
.photo-band-content .display { max-width: 20ch; }
.photo-band-content .display strong { color: var(--white); }
.photo-band-content .btn-group { margin-top: 1.4rem; }

/* Lightbox für Produktgalerien */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3.5rem);
  background: rgba(20, 23, 27, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox figure { position: relative; max-width: min(1100px, 100%); text-align: center; }
.lightbox img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius); }
.lightbox figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: 1rem;
  color: rgba(255, 255, 255, .8);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lightbox figcaption i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
}
.lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--white);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--speed), border-color var(--speed);
}
.lightbox button:hover { background: var(--blue); border-color: var(--blue); }
.lightbox button svg { width: 20px; height: 20px; }
.lightbox .lb-close { top: 1.2rem; right: 1.4rem; position: fixed; }
.lightbox .lb-prev { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); position: fixed; }
.lightbox .lb-next { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); position: fixed; }

/* ---------- 12 FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.25rem 0;
  font-family: inherit;
  font-size: 1.12rem;
  font-weight: 500;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.faq-q svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--blue); transition: transform var(--speed); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--speed); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: 1.25rem; color: var(--ink-2); max-width: 65ch; }
.faq-a a { color: var(--blue); font-weight: 500; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }

/* ---------- 13 CTA-Panel ---------- */
.cta-panel { text-align: left; }
.cta-panel .display { max-width: 20ch; }
.cta-panel .lead { margin-top: 1.2rem; }
.cta-phone {
  display: block;
  margin-top: .4rem;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--blue);
  transition: color var(--speed);
}
.cta-phone:hover { color: var(--blue-deep); }

/* ---------- 14 Kontakt-Bausteine ---------- */
/* Große Kontaktwerte auf der Kontaktseite */
.big-link {
  display: block;
  margin-top: .5rem;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: color var(--speed);
}
a.big-link:hover { color: var(--blue); }

.info-list { display: grid; gap: 0; }
.info-list > div {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--line);
  font-size: .97rem;
}
.info-list dt { color: var(--ink-2); }
.info-list dd { font-weight: 500; }
.info-list a:hover { color: var(--blue); }


.map-pull {
  align-self: stretch;
  margin-left: calc(-1 * (max((100vw - var(--container)) / 2, 0px) + var(--pad)));
  min-height: clamp(420px, 58vh, 620px);
  background: var(--tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  overflow: hidden;
}

/* Adresse als klickbarer Block mit rundem Pfeil */
.addr-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-block: 1px solid var(--line);
}
.addr-link strong { display: block; font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.35; }
.addr-link .circle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  color: var(--white);
  background: var(--blue);
  border-radius: 50%;
  transition: background var(--speed), transform var(--speed);
}
.addr-link .circle svg { width: 18px; height: 18px; }
.addr-link:hover .circle { background: var(--blue-deep); transform: rotate(-45deg); }

/* ---------- 15 Footer ---------- */
.footer { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); }
.footer::after {
  content: "";
  position: absolute;
  right: -3%;
  bottom: -12%;
  width: clamp(300px, 32vw, 520px);
  height: clamp(160px, 17vw, 270px);
  background: url("../assets/icons/logo-weiss.svg") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
.footer .row { padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand img { height: 74px; width: auto; }
.footer-brand p { margin-top: 1.2rem; font-size: .95rem; max-width: 38ch; }
.footer h4 { font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin-bottom: 1rem; }
.footer h4 .footer-chevron { display: none; }
.footer-grid li { padding-block: .28rem; font-size: .95rem; }
.footer-grid a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: .88rem;
}
.footer-bottom a:hover { color: var(--white); }
.to-top-fab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--white);
  background: var(--blue);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--speed), visibility var(--speed), transform var(--speed), background var(--speed);
}
.to-top-fab.show { opacity: 1; visibility: visible; transform: none; }
.to-top-fab:hover { background: var(--blue-deep); }
.to-top-fab svg { width: 18px; height: 18px; }

/* Runder Social-Button */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1.3rem;
  font-size: .95rem;
  transition: color var(--speed);
}
.footer-social .fs-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  transition: background var(--speed), border-color var(--speed), color var(--speed);
}
.footer-social svg { width: 17px; height: 17px; }
.footer-social:hover { color: var(--white); }
.footer-social:hover .fs-icon { background: var(--blue); border-color: var(--blue); color: var(--white); }


/* ---------- 16 Animation & Responsive ---------- */
[data-reveal],
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1); }
[data-reveal].is-in,
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal],
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0s !important; }
}

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .series { grid-template-columns: minmax(0, 1fr); }
  .series-pic > img { aspect-ratio: 16 / 9; }
}

@media (max-width: 980px) {
  .navbar-menu, .navbar-cta { display: none; }
  .navbar-burger { display: block; }
  /* Kopfzeile steht absolut oben und scrollt natürlich weg.
     scroll-up fährt sie fix ein, scroll-down (gewinnt bei beiden Klassen)
     fährt sie wieder raus — Logik siehe main.js */
  .navbar { position: absolute; padding-block: .85rem; }
  .navbar-brand img { height: 52px; }
  .navbar.scroll-up { position: fixed; transform: translateY(0); transition: transform .3s ease; }
  .navbar.scroll-down { position: fixed; transform: translateY(-100%); }
  .nav-open .navbar { position: fixed; transform: none; }

  /* Weiß wird die Leiste erst, wenn sie per Hochscrollen einfährt —
     nicht schon beim ersten Pixel Scrollen */
  body.is-scrolled:not(.nav-solid) .navbar:not(.scroll-up) { background: transparent; box-shadow: none; }
  body.is-scrolled:not(.nav-solid) .navbar:not(.scroll-up) .logo-white { display: block; }
  body.is-scrolled:not(.nav-solid) .navbar:not(.scroll-up) .logo-color { display: none; }
  body.is-scrolled:not(.nav-solid) .navbar:not(.scroll-up) .navbar-burger span { background: var(--white); }
  .nav-open .navbar, .nav-open .navbar.scroll-up { background: transparent; box-shadow: none; }

  .nav-overlay { padding-top: 86px; }
  .nav-overlay-scroll > a { font-size: 1.16rem; padding: .62rem 0; }
  .nav-overlay-scroll > a:has(+ .nav-overlay-products) { border-bottom: 0; }
  .section-head, .split, .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-row { grid-template-columns: 110px minmax(0, 1fr) auto; }
  .row-num { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .layer { grid-template-columns: 90px minmax(0, 1fr); }
  .layer p { grid-column: 1 / -1; }
  .collage { grid-template-columns: minmax(0, 1fr); }
  .collage .tile:first-child { grid-row: auto; }
  .offer-row { grid-template-columns: minmax(0, 1fr); }
  .media-pull, .map-pull { margin-left: 0; }
  .map-pull { border-radius: var(--radius); }
  .media-pull img { height: auto; min-height: 0; margin-block: 0; aspect-ratio: 4 / 3; border-radius: var(--radius); }
  .p-row { grid-template-columns: 92px minmax(0, 1fr); }
  .row-arrow { display: none; }
  .uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem .8rem; }
  .uses span + span { border-left: 0; margin-left: 0; padding-left: 0; }
  .info-list > div { grid-template-columns: 1fr; gap: .1rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-grid { padding-bottom: 1.8rem; }

  /* Angebots-Teaser: einspaltig nicht mehr hochkant, mit Luft dazwischen */
  .offer-teaser .clip img { aspect-ratio: 3 / 2; }
  .offer-teaser + .offer-teaser { margin-top: 2.2rem; }

  /* Produktkacheln der Startseite: ein Tick näher dran */
  .offer img { aspect-ratio: 7 / 6; }

  /* Produktübersicht: größere, höhere Bilder */
  .p-row { grid-template-columns: 122px minmax(0, 1fr); }
  .row-pic { aspect-ratio: 4 / 3; }

  /* Footer: Produkte & Werk einklappbar */
  .footer-fold h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding-block: .85rem;
    border-bottom: 1px solid var(--line-dark);
    cursor: pointer;
  }
  .footer-fold h4 .footer-chevron { display: block; width: 16px; height: 16px; transition: transform var(--speed); }
  .footer-fold.open h4 .footer-chevron { transform: rotate(180deg); }
  .footer-fold ul { display: none; padding-block: .5rem .9rem; }
  .footer-fold.open ul { display: block; }
  .footer-grid { gap: 0 1.5rem; }
  .footer-brand { margin-bottom: 1.6rem; }
  .footer-grid > div:last-child h4 { margin-top: 1.6rem; }
}

.row.full { max-width: none; padding-inline: 0; }

/* Der Builder vergibt jeder Sektion die Klasse `section` (padding-block).
   Diese Bausteine bringen ihr Maß selbst mit — wie in der Vorlage ohne Padding. */
.section.hero,
.section.page-hero,
.section.photo-band { padding-block: 0; }
/* Schlichter Rechtsseiten-Kopf hat kein min-height — hier trägt das Padding die Höhe */
.section.page-hero--plain { padding-top: 9rem; }

/* Serien-Sektionen: das Padding liefern die .series-Artikel selbst */
.section--series { padding-block: 0; }

/* ========================================
   Pagebuilder: Utilities (Settings-Klassen)
   ======================================== */
.t-c { text-align: center !important; }
.mw-860 { max-width: 860px; }

/* ========================================
   Produktgalerie ([kb_product_gallery], Produkt-Detailseite)
   ======================================== */
.kb-product-gallery-main { position: relative; overflow: hidden; border-radius: var(--radius); }
.kb-product-gallery-slide { display: none; }
.kb-product-gallery-slide.is-active { display: block; }
.kb-product-gallery-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kb-product-gallery-thumbs { display: flex; gap: .6rem; margin-top: .6rem; overflow-x: auto; }
.kb-product-gallery-thumb { flex: 0 0 23.5%; padding: 0; background: none; border: 0; cursor: pointer; }
.kb-product-gallery-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 2px solid transparent;
  opacity: .7;
  transition: opacity var(--speed), border-color var(--speed);
}
.kb-product-gallery-thumb:hover img { opacity: 1; }
.kb-product-gallery-thumb.is-active img { opacity: 1; border-color: var(--blue); }

/* ========================================
   Karte ([kb_map])
   ======================================== */
.kb-map-canvas { width: 100%; height: 100%; min-height: clamp(420px, 58vh, 620px); }