/* === Fonts (self-hosted, latin + latin-ext) === */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/antonio-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/antonio-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/barlow-condensed-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/source-sans-3-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/source-sans-3-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Reset & Variables === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --charcoal: #1C1C1E;
  --steel: #171D23;
  --night: #04070B; /* Grundflaeche des Karriere-Bandes: gemessener Mittelwert des linken Bildstreifens von karriere-welding.jpg, damit Flaeche und Motiv ohne Kante ineinander laufen */
  --steel-light: #33363B;
  --accent: #1666AC;
  --accent-light: #1E7FD4;
  --cream: #F5F3F0;
  --cream-dark: #E8E6E3;
  --cream-muted: #9B9894;
  --ink-muted: #5A5754; /* muted text on light ground — --cream-muted is for dark ground only */
  --line-light: #D9D6D2; /* hairline on cream grounds */
  --accent-bright: #4FA3EA; /* text links on dark grounds — accent-light misses 4.5:1 there */
  --accent-mid: #3489D0; /* eyebrows on dark grounds: 4,56:1 auf --steel, accent-bright waere dort zu laut */
  --white: #FFFFFF;
  --header-h: 124px;
  --logo-h: 68px; /* Hoehe der Wortmarke; Breite folgt dem 299:96 des SVG */
  --container: 1440px;
  --container-wide: 1720px;
}

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  color: var(--cream);
  background: var(--charcoal);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
  width: 100%;
}

/* overflow allein sperrt nichts: html hat mit overflow-x eigenen Overflow, damit
   propagiert body nicht mehr zum Viewport. position:fixed nimmt dem Dokument die
   scrollbare Höhe und deckt zugleich iOS ab (_docs/GOTCHAS.md). */
body.nav-open { overflow: hidden; }
@media (max-width: 900px) {
  body.nav-open { position: fixed; width: 100%; }
  :root { --header-h: 76px; --logo-h: 44px; }
}
@media (max-width: 600px) {
  :root { --header-h: 72px; --logo-h: 40px; }
}

main { flex: 1; }

h1, h2, h3, h4 {
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

a { color: var(--accent); text-decoration: none; transition: color 0.25s; }
a:hover { color: var(--accent-light); }

/* Zweifarbiger Fokusring: der weisse Kern traegt auf den dunklen Baendern, der
   dunkle Saum auf --cream und ueber den Hero-Fotos. Kein border-radius hier -
   der wuerde die Geometrie des fokussierten Elements aendern, nicht die des Rings. */
:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.75);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1200;
  background: var(--accent);
  color: var(--white);
  padding: 14px 22px;
  font-weight: 700;
}

.skip-link:focus { left: 0; }

/* Der Header ist fixiert, das Sprungziel laege sonst darunter. */
#main { scroll-margin-top: var(--header-h); }

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

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }


/* === Header === */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  transition: height 0.3s, box-shadow 0.3s;
}

.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 30, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.header.scrolled::before { opacity: 1; }
.header.scrolled {
  box-shadow: 0 1px 20px rgba(0,0,0,0.4);
  background: var(--charcoal);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Nur oberhalb des Burger-Umbruchs: mobil ist die Leiste mit 76/72px schon knapp.
   Die Neudefinition steht am Header, nicht an :root - die Hero-Paddings und
   scroll-margin-top der Seiten behalten damit die volle Hoehe. */
@media (min-width: 901px) {
  .header.scrolled { --header-h: 88px; --logo-h: 52px; }
}
@media (min-width: 901px) and (max-width: 1360px) {
  .header.scrolled { --header-h: 80px; --logo-h: 40px; }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 clamp(24px, 3.5vw, 60px);
}

.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 101;
  flex-shrink: 0; /* sonst quetscht der Flex-Container die Wortmarke schmal */
}

/* Traegt die Marke allein - im Hero steht bewusst kein zweites Logo (CR-001-01).
   Seit 2026-08-25 die Wortmarke statt der Bildmarke: der Firmenname stand sonst
   erst 2.700 px unterhalb der Falz. */
.header__logo img {
  height: var(--logo-h);
  width: auto;
  transition: height 0.3s, opacity 0.25s;
}

.header__logo:hover img { opacity: 0.8; }

/* Nav */
.nav__list {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
}

.nav__link {
  color: var(--cream);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 0.25s;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.nav__link:hover,
.nav__link.active { color: var(--accent); }
.nav__link:hover::after,
.nav__link.active::after { width: 100%; }


/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 24px;
  position: relative;
  z-index: 101;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  position: absolute;
  left: 0;
  transition: transform 0.3s, opacity 0.3s, background 0.3s;
}

.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { top: 22px; }

.nav-toggle.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }



/* === Hero - Werkstatt === */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--charcoal);
}

.hero__media {
  position: absolute;
  inset: 0;
}

/* Der Y-Wert holt das Funkenzentrum aus dem unteren Beschnitt zurueck: der Hero ist
   flacher als das 16:9-Motiv, mittig zentriert schneidet der Glow ab. */
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 80%;
}

/* Scrim traegt zwei Lasten: Nav-Kontrast oben, Textkontrast in der linken Spalte.
   Deshalb zwei Verlaeufe statt einer Flaeche - das Funkenzentrum rechts bleibt frei. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,12,16,0.72) 0%, rgba(10,12,16,0.22) 20%, transparent 36%),
    linear-gradient(100deg, rgba(10,12,16,0.84) 0%, rgba(10,12,16,0.70) 34%, rgba(10,12,16,0.30) 58%, transparent 76%),
    linear-gradient(to top, rgba(10,12,16,0.66) 0%, transparent 28%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: calc(var(--header-h) + 40px) clamp(24px, 3.5vw, 60px) 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 44px;
}

.hero__content { max-width: 980px; }

/* Hebt die globale Versalien-Regel fuer h1-h4 gezielt auf: die Hero-H1 traegt
   einen Satz, keinen Titel - in Versalien liest er sich als Plakat. */
.hero__title {
  font-size: clamp(2.2rem, 5.9vw, 5.6rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--white);
  letter-spacing: -0.025em;
  text-transform: none;
  margin-bottom: 24px;
  text-wrap: balance;
}

.hero__title::after {
  content: '';
  display: block;
  width: 112px;
  height: 5px;
  background: var(--accent-light);
  margin-top: 26px;
}

.hero__eyebrow {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3186D2;
  margin-bottom: 18px;
}

.hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: var(--cream-dark);
  max-width: 33em;
  margin-bottom: 32px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero__actions .btn--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(3px);
}

.hero__actions .btn--ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: var(--white);
  color: var(--white);
}

/* Trust: Zahl oben, Erlaeuterung darunter - eine Zeile pro Zelle liest sich als
   Aufzaehlung, zweizeilig als Beleg. */
.hero__trust {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  gap: 0 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.18);
}

.hero__trust li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  position: relative;
}

.hero__trust .hero__trust-icon {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  color: var(--accent-bright);
}

.hero__trust-icon svg { width: 100%; height: 100%; display: block; }

.hero__trust li + li { padding-left: 36px; }

.hero__trust li + li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(255,255,255,0.18);
}

.hero__trust b {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--white);
  line-height: 1.1;
}

.hero__trust span {
  font-size: 0.84rem;
  color: var(--cream-dark);
  line-height: 1.35;
}

.hero__trust-meta { display: flex; align-items: center; gap: 10px; }
.hero__stars { flex: none; }

/* Ab hier steht der Text nicht mehr neben dem Motiv, sondern darauf - der
   Diagonal-Scrim traegt das nicht mehr, es braucht den vertikalen. */
@media (max-width: 900px) {
  .hero__media img { transform: none; object-position: 58% 50%; }
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(10,12,16,0.90) 0%, rgba(10,12,16,0.80) 34%, rgba(10,12,16,0.62) 62%, rgba(10,12,16,0.88) 100%);
  }
  .hero__trust { gap: 0 28px; }
  .hero__trust li + li { padding-left: 28px; }
}

@media (max-width: 700px) {
  .hero__media img { object-position: 42% 50%; transform: none; }
  /* Das Funkenzentrum liegt im unteren Drittel des Hochformats - dort bleibt der
     Scrim leicht, die dichten Textzeilen stehen im dunklen oberen Teil. */
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(14,14,16,0.94) 0%, rgba(14,14,16,0.90) 30%, rgba(14,14,16,0.72) 52%, rgba(14,14,16,0.52) 70%, rgba(14,14,16,0.86) 100%);
  }
  .hero__inner {
    padding: calc(var(--header-h) + 32px) 20px 24px;
    gap: 24px;
  }
  .hero__title br { display: none; }
  .hero__title { font-size: 2.5rem; margin-bottom: 16px; }
  .hero__title::after { margin-top: 18px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { justify-content: center; }
  /* Der Funkenfleck des Hochformats liegt genau hinter dieser Leiste - ohne eigene
     Platte faellt "bei Google" auf 4,05 und damit unter AA. */
  .hero__trust {
    grid-template-columns: 1fr;
    gap: 16px;
    background: rgba(10,12,16,0.62);
    backdrop-filter: blur(3px);
    padding: 14px 14px;
    border: 1px solid rgba(255,255,255,0.14);
  }
  .hero__trust li + li { padding-left: 0; padding-top: 16px; }
  .hero__trust li + li::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}


/* === Buttons === */
.btn {
  display: inline-block;
  padding: var(--btn-pad, 14px 32px);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid transparent;
  border-radius: var(--btn-radius, 2px);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
}

.btn--accent {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

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

.btn--outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream-muted);
}

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

.btn--outline-dark {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--steel-light);
}

.btn--outline-dark:hover {
  border-color: var(--accent);
  color: var(--accent);
}


/* === Icon-Sprite === */
.icon-sprite { display: none; }

.kennzahl__icon svg,
.hero__trust-icon svg,
.projekt-cta__tel-icon svg,
.btn__pfeil {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sprite-Referenzen der Unterseiten. Die Strichfarbe und -staerke standen frueher
   als Attribut am Inline-SVG; beim Umzug ins Sprite reisen Attribute nicht mit. */
.benefit-card__icon,
.file-drop__icon,
.download-card__icon svg,
.kontakt-bar__icon,
.unt-team__pfeil,
.unt-team__pfeil svg,
.unt-ausstattung__icon,
.unt-ausstattung__icon svg,
.unt-nachweis__icon svg,
.file-drop__list .file-name svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit-card__icon { stroke: var(--accent); }

.download-card__icon svg,
.kontakt-bar__icon,
.unt-ausstattung__icon svg,
.unt-nachweis__icon svg,
.file-drop__list .file-name svg { stroke-width: 2; }

/* WhatsApp ist eine Flaechen-, keine Strichmarke */
.kontakt-bar__icon--solid { fill: currentColor; stroke: none; }


/* === Sections === */
.section {
  padding: 100px 0;
}

.section--dark { background: var(--steel); }
.section--light { background: var(--cream); color: var(--charcoal); }

.section__title {
  font-size: clamp(1.7rem, 3.4vw, 2.55rem);
  font-weight: 700;
  margin-bottom: 16px;
}

.section--light .section__title { color: var(--charcoal); }
.section__desc {
  max-width: 680px;
  color: var(--cream-muted);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 48px;
}

.section--light .section__desc { color: #555; }

/* Eyebrow steht IM Heading (eigene Zeile), damit die Zeile Ueberschriftengewicht traegt */
.section__eyebrow {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin-bottom: 12px;
}

.section--light .section__eyebrow,
.fallstudien .section__eyebrow,
.projekt-cta .section__eyebrow,
.lp-uebersicht .section__eyebrow,
.lp-prozess .section__eyebrow { color: var(--accent); }

.btn--pfeil,
.btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn__pfeil {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.25s ease;
}

.btn--pfeil:hover .btn__pfeil,
.link-pfeil:hover .btn__pfeil { transform: translateX(4px); }

.btn__pfeil--akzent { color: var(--accent-bright); }

.link-pfeil {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--charcoal);
  border: 2px solid var(--line-light);
  border-radius: 2px;
  padding: 12px 24px;
  white-space: nowrap;
}

.link-pfeil:hover { color: var(--accent); border-color: var(--accent); }


/* === Über Uns === */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
}

.about-text p {
  margin-bottom: 16px;
  color: #555;
  line-height: 1.8;
}

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

.about-image {
  border-radius: 4px;
  overflow: hidden;
}

/* Am rechten Bildrand steht ein Baugeruest - die Skalierung schiebt es aus dem
   Ausschnitt, object-position allein kann das nicht (Motiv ist breiter als hoch). */
.about-image img {
  width: 100%;
  aspect-ratio: 16 / 7;
  height: auto;
  object-fit: cover;
  transform: scale(1.28);
  transform-origin: 38% 58%;
}


/* === Projekte / Gallery === */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.gallery-item--tall { aspect-ratio: 3/4; grid-row: span 2; }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img { transform: scale(1.06); }

.gallery-item__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(28,28,30,0.92) 0%, rgba(28,28,30,0.7) 70%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: padding 0.3s ease;
}

.gallery-item:hover .gallery-item__info { padding-bottom: 18px; }

.gallery-item__label {
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.gallery-item__desc {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--cream-dark);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
  margin-top: 0;
}

.gallery-item:hover .gallery-item__desc {
  max-height: 60px;
  opacity: 1;
  margin-top: 4px;
}


/* === Partner Strip === */
.partner-strip {
  padding: 36px 0 40px;
  border-top: 1px solid var(--steel-light);
}

.partner-strip__title {
  text-align: center;
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--cream-muted);
  opacity: 0.8;
  margin-bottom: 28px;
}

.partner-strip__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 32px;
  margin: 0;
  padding: 0 32px;
}

.partner-strip__item {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
}

.partner-logo {
  height: 28px;
  width: auto;
  max-width: 110px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: opacity 0.3s;
}

.partner-strip__item:hover .partner-logo {
  opacity: 0.9;
}

.partner-strip__sep { display: none; }


/* === Referenzen (Startseite) — drei gleiche Karten === */
.fallstudien {
  background: var(--cream);
  color: var(--charcoal);
  padding: 88px 0 96px;
}

.fallstudien__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.fallstudien .section__title { color: var(--charcoal); margin-bottom: 0; }

.ref-karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ref-karte__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ref-karte__bild {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

.ref-karte__pic { display: block; }

.ref-karte__pic img {
  width: 100%;
  height: clamp(280px, 26vw, 360px);
  object-fit: cover;
  transition: transform 0.6s ease;
}

.ref-karte__link:hover .ref-karte__pic img { transform: scale(1.05); }

.ref-karte__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(16,17,20,0.94) 0%, rgba(16,17,20,0.74) 48%, rgba(16,17,20,0.12) 100%);
}

.ref-karte__nr {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  background: var(--accent);
  color: var(--white);
  padding: 2px 9px;
  border-radius: 2px;
  margin-bottom: 10px;
}

.ref-karte__titel {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--white);
  margin-bottom: 2px;
}

.ref-karte__ort {
  font-size: 0.92rem;
  color: var(--cream-dark);
}

/* Dauerhaft sichtbar - keine Angabe haengt am Hover (Touch-Regel) */
.ref-karte__fakten {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--charcoal);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--charcoal);
}


/* === Leistungen — asymmetrische Huelle + Icon-Kacheln === */
/* Der Kachelblock sitzt in Spalte 2 unter den Panels, nicht containerbreit
   (Screenlayout Band 05: Blockkante deckt sich mit den Panelkanten). */
.leistungen__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3.48fr);
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: 40px;
  align-items: stretch;
}

.leistungen__weitere { grid-column: 2; }

.leistungen__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.leistungen__text .section__desc { margin-bottom: 28px; }

.leistungen__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin-bottom: 20px;
}

/* Auf dem Sektionsgrund #171D23 ist ein Schlagschatten unsichtbar: Tiefe traegt
   allein die Flaeche (Verlauf) plus Licht- und Schattenkante im inset. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.service-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  align-content: center;
  min-height: 116px;
  padding: 20px 12px 20px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), inset 0 -1px 0 rgba(0,0,0,0.35);
  text-decoration: none;
  color: inherit;
  transition: background 0.25s, box-shadow 0.25s, opacity 0.5s ease;
  opacity: 0;
}

.service-tile.visible { opacity: 1; }

.service-tile:hover,
.service-tile:focus-visible {
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.085));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.35);
}

.service-tile__icon {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  color: var(--accent-bright);
}

/* Vektorisierte Zeichnungen (B-03) sind Flaechen, keine Striche: fill: none waere
   unsichtbar. Der Strich dickt sie auf, 4 gilt im 278er-Raum der Symbol-viewBox. */
.service-tile__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linejoin: round;
}

.service-tile__titel {
  font-size: 1.3rem;
  color: var(--white);
  margin-bottom: 4px;
  text-transform: none;
}

.service-tile__fach {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--cream-dark);
}


/* === Kennzahlreihe — Haarlinien statt Rahmenkaesten === */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 64px;
  border-top: 1px solid var(--line-light);
  padding-top: 36px;
}

.kennzahl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
  padding: 0 28px;
  position: relative;
}

.kennzahl:first-child { padding-left: 0; }

.kennzahl + .kennzahl::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--line-light);
}

.kennzahl__icon {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  color: var(--accent);
}

.kennzahl__icon svg { width: 100%; height: 100%; display: block; }

.kennzahl__wert {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.1;
}

/* --cream-muted ist fuer dunklen Grund; auf Creme faellt es auf 2,31 : 1 (U5) */
.kennzahl__label {
  font-size: 0.84rem;
  color: var(--ink-muted);
  line-height: 1.35;
}


/* === Kundenstimme — ein Band statt zweier Bloecke === */
.stimme {
  background: var(--steel);
  padding: 72px 0;
}

.stimme__band {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.6fr) minmax(0, 0.72fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.stimme .section__title { color: var(--white); margin-bottom: 0; }

.stimme__zitat blockquote {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--cream);
}

.stimme .section__title::after {
  content: '\201C';
  display: block;
  margin-top: 10px;
  font-size: 4.6rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  font-family: 'Source Sans 3', sans-serif;
}

.stimme__zitat figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--cream-muted);
}

.stimme__zitat figcaption b {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.12rem;
  color: var(--white);
}

.stimme__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 18px;
  border: 1px solid var(--steel-light);
  border-radius: 3px;
  text-align: center;
}

.stimme__rating .sterne {
  width: 140px;
  height: 28px;
}

.stimme__wert {
  margin-top: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.stimme__rating a {
  font-size: 0.82rem;
  color: var(--cream-dark);
}

.stimme__rating a:hover { color: var(--accent-light); }


/* === Projekt-CTA — Abschlussband der Startseite und der Unterseiten === */
.projekt-cta {
  background: var(--cream);
  color: var(--charcoal);
  padding: 80px 0;
}

/* Heller Vorgaenger: ohne Kante liest sich das Paar als ein Block. Der dunkle
   Grund von .rf-case--dark liegt auf dem Panel, nicht auf der Sektion. */
.lt-downloads + .projekt-cta,
.lm-einsatz + .projekt-cta,
.rf-case + .projekt-cta { border-top: 1px solid var(--line-light); }

.projekt-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

/* Ohne Zeichnung sind Text und Aktionsstapel die zwei Rasterspalten, mit
   Zeichnung stapeln sie zusammen in Spalte 1 - eine Zelle, sonst verteilte die
   Zeichnung ihre Hoehe auf zwei Zeilen und triebe die zwei Haelften auseinander. */
.projekt-cta__spalte { display: contents; }

.projekt-cta--zeichnung .projekt-cta__spalte { display: block; }

.projekt-cta--zeichnung .projekt-cta__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.projekt-cta .section__title { color: var(--charcoal); margin-bottom: 18px; }

.projekt-cta__text > p {
  color: #555;
  line-height: 1.75;
  max-width: 42ch;
  margin-bottom: 30px;
}

/* Die Haarlinie sass hier, solange sie unter dem ganzen Stapel lag. Sie steht
   jetzt an der Schrittzeile selbst und ist damit so breit wie die Kette, nicht
   wie diese Spalte - `align-items: flex-start` gibt jedem Kind Inhaltsbreite. */
.projekt-cta__aktionen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.projekt-cta__buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.projekt-cta__tel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--charcoal);
  text-decoration: none;
}

.projekt-cta__tel-icon { width: 26px; height: 26px; color: var(--accent); flex: none; }
.projekt-cta__tel-icon svg { width: 100%; height: 100%; display: block; }

.projekt-cta__tel b {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.projekt-cta__tel small { font-size: 0.84rem; color: var(--ink-muted); }
.projekt-cta__tel:hover b { color: var(--accent); }

/* Der Ablauf der Prozess-Sektion in kleiner Fassung, im Aktionsstapel unter
   Schaltflaechen und Rufnummer. Sechs Punkte passen dort nicht nebeneinander,
   deshalb zwei Reihen zu drei. Inhaltsbreite Spalten wie .hero__trust: bei
   1fr standen 89-115px Leere hinter jedem Wort, der Winkel zeigte ins Nichts
   statt zum naechsten Schritt. Die Spaltenluecke ist damit sein Weg. */
.projekt-cta__schritte {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 18px 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line-light);
}

.projekt-cta__schritte li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--charcoal);
}

/* 26px ist die Untergrenze: darunter laufen Massband-Spule und Kran-Fachwerk zu
   (Groessenreihe 18-64px abgenommen). */
.projekt-cta__schritt-icon { width: 26px; height: 26px; color: var(--accent); flex: none; }

/* Wie .lp-schritt__icon: die vektorisierten Zeichnungen (B-04) sind Flaechen,
   die Strich-Regel der Lucide-Icons machte sie unsichtbar. */
.projekt-cta__schritt-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 4;
}

/* Der Winkel laeuft im Fluss direkt hinter seinem Wort. Mittig in der
   Spaltenluecke (wie .lp-schritt__chevron) stuende er bei diesen kurzen Woertern
   dichter am naechsten Punkt als am eigenen und laese sich als dessen Auftakt. */
.projekt-cta__schritt-pfeil {
  width: 8px;
  height: 15px;
  flex: none;
  margin-left: 2px;
  color: var(--accent);
}

/* Wow: die Zeichnung entsteht beim Scrollen. pathLength=1 macht jede Laenge
   normiert, der Versatz laeuft also ohne JS-Messung. */
.bp {
  width: 100%;
  height: auto;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bp path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.45s ease-out;
  transition-delay: calc(var(--d) * 1ms);
}

.projekt-cta__zeichnung.visible .bp path { stroke-dashoffset: 0; }

/* Tiefe liegt in der Helligkeit, nicht in der Strichstaerke - so bleibt das
   Blatt ruhig. Blau traegt ausschliesslich die Bemassung. --bp-k skaliert alle
   Striche und die Massziffern gegen die Renderbreite: bei 327 px waeren sie
   sonst nur 0,23 px breit und die Ziffern 5 px hoch. */
.bp { --bp-k: 1; }

.bp__rahmen      { stroke: #DAD6D1; stroke-width: calc(0.7 * var(--bp-k)); }
.bp__wange       { stroke: #4A4744; stroke-width: calc(1.1 * var(--bp-k)); }
.bp__nosing      { stroke: #3A3735; stroke-width: calc(1.2 * var(--bp-k)); }
.bp__stufe       { stroke: #5C5955; stroke-width: calc(0.9 * var(--bp-k)); }
.bp__stufe--fern { stroke: #9A9793; stroke-width: calc(0.7 * var(--bp-k)); }
.bp__rost        { stroke: #B0ADA9; stroke-width: calc(0.5 * var(--bp-k)); }
.bp__detail      { stroke: #7E7B77; stroke-width: calc(0.7 * var(--bp-k)); }
.bp__verband     { stroke: #6B6864; stroke-width: calc(0.9 * var(--bp-k)); }
.bp__podest      { stroke: #4A4744; stroke-width: calc(1.1 * var(--bp-k)); }
.bp__stuetze     { stroke: #4A4744; stroke-width: calc(1.1 * var(--bp-k)); }
.bp__pfosten     { stroke: #6B6864; stroke-width: calc(0.9 * var(--bp-k)); }
.bp__handlauf    { stroke: #4A4744; stroke-width: calc(1 * var(--bp-k)); }
.bp__seil        { stroke: #A5A29E; stroke-width: calc(0.55 * var(--bp-k)); }
.bp__mass        { stroke: var(--accent); stroke-width: calc(0.7 * var(--bp-k)); }
.bp__grund       { stroke: #C3BFBA; stroke-width: calc(0.8 * var(--bp-k));
                   stroke-dasharray: calc(7 * var(--bp-k)) calc(6 * var(--bp-k)); }

/* Gemessene Renderbreite der Zeichnung je Viewport; --bp-k haelt die
   Strichbreite auf dem Bildschirm konstant bei rund 0,95 viewBox-Einheiten. */
@media (max-width: 1399px) { .bp { --bp-k: 1.15; } }
@media (max-width: 1199px) { .bp { --bp-k: 1.22; } }
@media (max-width: 599px)  { .bp { --bp-k: 1.55; } }
@media (max-width: 459px)  { .bp { --bp-k: 2.1; } }

/* Die gestrichelte Grundlinie traegt ihr Muster im dasharray und die Massziffern
   sind Text - beide koennen nicht ueber den Versatz einlaufen, sie blenden auf. */
.bp__grund,
.bp__masszahl {
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.45s ease-out;
}

.bp__masszahl {
  fill: var(--accent);
  stroke: none;
  font: 600 calc(9px * var(--bp-k)) var(--font-body, system-ui);
  letter-spacing: 0.04em;
  transition-delay: calc(var(--d) * 1ms);
}

.projekt-cta__zeichnung.visible .bp__grund,
.projekt-cta__zeichnung.visible .bp__masszahl { opacity: 1; }


/* === Kontakt Page === */

.kontakt-bar__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}

.kontakt-bar__label {
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cream-muted);
  margin-bottom: 4px;
}

.kontakt-bar__value {
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--charcoal);
}

/* Layout: info + form panel */
.kontakt-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  align-items: start;
}

/* Kontaktkarte (linke Spalte) */
.kontakt-karte {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  margin-top: 36px;
}

.kontakt-karte__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  color: var(--charcoal);
  text-decoration: none;
}

.kontakt-karte__row + .kontakt-karte__row { border-top: 1px solid var(--line-light); }

a.kontakt-karte__row:hover .kontakt-bar__value { color: var(--accent); }

/* Wert steht in der Karte ueber dem Label, nicht darunter */
.kontakt-karte .kontakt-bar__label { margin-bottom: 0; margin-top: 4px; }

/* Form panel */
.kontakt-form-panel {
  background: var(--white);
  border-radius: 8px;
  padding: 40px;
  border-top: 3px solid var(--accent);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.kontakt-form-panel h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--charcoal);
}

.kontakt-form-panel__desc {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.6;
}

.kontakt-form-panel__desc::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--accent);
  margin-top: 20px;
}

.kontakt-form-panel .form-group {
  margin-bottom: 24px;
}

.kontakt-form-panel .form-group label,
.kontakt-form-panel .form-group .form-group__label {
  color: var(--charcoal);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  transition: color 0.25s;
}

.kontakt-form-panel .form-group:focus-within label {
  color: var(--accent);
}

.form-group__pflicht {
  color: var(--accent);
}

/* Helles Panel: die Statusfarben des dunklen Formulars traegt der weisse
   Grund nicht. */
.kontakt-form-panel .form-status.success { color: #15803d; }
.kontakt-form-panel .form-status.error   { color: #b91c1c; }

.form-fussnote {
  margin-top: 4px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.form-fussnote a {
  color: var(--accent);
  text-decoration: underline;
}

.kontakt-form-panel .form-group input,
.kontakt-form-panel .form-group textarea,
.kontakt-form-panel .form-group select {
  background: var(--white);
  color: var(--charcoal);
  border: 1.5px solid var(--cream-dark);
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.kontakt-form-panel .form-group input::placeholder,
.kontakt-form-panel .form-group textarea::placeholder {
  color: #767676;
  opacity: 1;
}

.kontakt-form-panel .form-group input:focus,
.kontakt-form-panel .form-group textarea:focus,
.kontakt-form-panel .form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,99,43,0.1);
}

/* Weisse Felder auf hellem Panel: der weisse Ringkern waere dort unsichtbar,
   und der eigene :focus-Schatten des Panels ersetzt ohnehin den dunklen Saum. */
.kontakt-form-panel .form-group input:focus-visible,
.kontakt-form-panel .form-group textarea:focus-visible,
.kontakt-form-panel .form-group select:focus-visible {
  outline-color: var(--accent);
}

.kontakt-form-panel .form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B9894' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

.kontakt-form-panel .form-submit {
  margin-top: 12px;
}

/* radius follows the form fields beside it */
.kontakt-form-panel .form-submit .btn { --btn-pad: 16px 32px; --btn-radius: 6px; }

/* Honeypot + form status */
.hp { position: absolute; left: -9999px; }
.form-status { margin-top: 1rem; font-size: 0.95rem; }
.form-status.success { color: #4ade80; }
.form-status.error   { color: #f87171; }

/* Form elements (shared) */
.form-group {
  margin-bottom: 20px;
}

.form-group label,
.form-group__label {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cream-muted);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  color: var(--cream);
  background: var(--steel-light);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  transition: border-color 0.3s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--cream-muted);
  opacity: 0.6;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-submit {
  margin-top: 8px;
}

.form-submit .btn {
  width: 100%;
}


/* === Footer === */
.footer {
  background: #131315;
  border-top: 3px solid var(--accent);
  padding: 44px 0 0;
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  align-items: start;
  gap: 32px 64px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 32px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  margin-bottom: 14px;
}

.footer__logo img {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  transition: opacity 0.25s;
}

.footer__logo:hover img { opacity: 0.8; }

.footer__name {
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--white);
}

.footer__brand p {
  color: var(--cream-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 470px;
}

.footer__kontakt {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.footer__kontakt li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--cream-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.footer__kontakt-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: none;
  stroke: var(--cream);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer__kontakt a {
  color: var(--cream-muted);
  text-decoration: none;
  transition: color 0.25s;
}

.footer__kontakt a:hover { color: var(--accent-bright); }

.footer__social {
  --social-size: 36px;
  margin-top: 18px;
}

.footer__spalten {
  display: grid;
  gap: 30px;
  justify-items: start;
}

.footer__label {
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cream-muted);
  margin-bottom: 16px;
}

.footer__nav ul { list-style: none; }

.footer__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.footer__nav a {
  color: var(--cream-muted);
  font-size: 0.9rem;
  transition: color 0.25s;
  text-decoration: none;
  text-transform: none;
}

.footer__nav a:hover { color: var(--accent-bright); }
.footer__nav a.active { color: var(--accent-bright); font-weight: 700; }

.footer__bottom {
  border-top: 1px solid var(--steel-light);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--cream-muted);
  max-width: var(--container);
  margin: 0 auto;
}

.footer__bottom a {
  color: var(--cream-muted);
  text-decoration: none;
}

.footer__bottom a:hover { color: var(--accent-bright); }

.footer__bottom .powered-by {
  font-weight: 600;
  opacity: 0.8;
}

.footer__bottom .powered-by:hover { opacity: 1; }


/* === Impressum Page === */
.page-header {
  padding: calc(var(--header-h) + 68px) 0 60px;
  background: var(--steel);
  text-align: center;
}

.page-header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
}

.page-content {
  padding: 60px 0;
  background: var(--cream);
  color: var(--charcoal);
}

.page-content .container {
  max-width: 800px;
}

.page-content h2 {
  font-size: 1.3rem;
  color: var(--charcoal);
  margin: 32px 0 12px;
  text-transform: none;
  letter-spacing: 0;
}

.page-content h2:first-child { margin-top: 0; }

.page-content p {
  margin-bottom: 12px;
  line-height: 1.8;
  color: #444;
}

.page-content a { color: #115694; }

.page-content .page-content__stand {
  margin-top: 40px;
  font-size: 0.9rem;
  color: var(--ink-muted);
}


/* === Subpage Banner === */
.subpage-banner {
  position: relative;
  padding: calc(var(--header-h) + 88px) 0 80px;
  background: var(--steel);
  overflow: hidden;
}

.subpage-banner__bg {
  position: absolute;
  inset: 0;
  opacity: 0.15;
}

.subpage-banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subpage-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--steel) 0%, rgba(23,29,35,0.7) 50%, var(--steel) 100%);
}

/* Die Bannerzone ist das Pendant zum Start-Hero und fluchtet deshalb mit dem
   Header, nicht mit den Inhaltssektionen darunter. */
.subpage-banner__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-wide);
  padding: 0 clamp(24px, 3.5vw, 60px);
}

.subpage-banner h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: var(--white);
  margin-bottom: 12px;
}

.subpage-banner__desc {
  font-size: 1.1rem;
  color: var(--cream-muted);
  max-width: 600px;
  line-height: 1.7;
}

/* Kontakt banner: Bild traegt das Band, Links-Scrim sichert den Textkontrast.
   Zwei Lasten wie in den Heroes: oben Nav-Kontrast unter der transparenten
   Kopfzeile, links Textkontrast — die Stahlstuetze rechts bleibt offen. */
.subpage-banner--kontakt .subpage-banner__bg { opacity: 1; }

.subpage-banner--kontakt .subpage-banner__overlay {
  background:
    linear-gradient(to bottom, rgba(23,29,35,0.88) 0%, rgba(23,29,35,0.55) 18%, transparent 34%),
    linear-gradient(90deg, var(--steel) 0%, rgba(23,29,35,0.82) 38%, rgba(23,29,35,0.35) 68%, rgba(23,29,35,0.08) 100%);
}

.subpage-banner--kontakt .subpage-banner__desc { max-width: 520px; }
.subpage-banner--kontakt .hero__eyebrow { color: var(--accent-bright); }

.banner-kontakte {
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.banner-kontakte__item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--white);
  text-decoration: none;
}

.banner-kontakte__item + .banner-kontakte__item {
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 40px;
}

.banner-kontakte__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-mid);
  flex-shrink: 0;
  transition: border-color 0.2s;
}

.banner-kontakte__item:hover .banner-kontakte__icon { border-color: var(--accent-mid); }

.banner-kontakte__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.banner-kontakte__icon--solid svg { fill: currentColor; stroke: none; }

.banner-kontakte__text { display: flex; flex-direction: column; }

.banner-kontakte__value {
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--white);
}

.banner-kontakte__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cream-muted);
  margin-top: 2px;
}

/* Active nav page — color only, no underline (avoids pixel-sampled contrast false positive).
   --accent auf dem Kopfzeilen-Anthrazit misst 2,86 : 1 am gerenderten Bild; --accent-bright
   ist genau dafuer definiert. */
.nav .nav__link--active { color: var(--accent-bright); }
.nav .nav__link--active::after { display: none; }


/* === Leistungen Bausteine === */
.lp-pic { display: block; width: 100%; height: 100%; }

.lp-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--op, 50% 50%);
}

.lp-collage img { cursor: zoom-in; }

/* Collagen-Bilder sind Lightbox-Ausloeser (script.js); ihre Zellen schneiden mit
   overflow:hidden den aeusseren Fokusring ab, deshalb nach innen: dunkler Saum am
   Rand ueber das <picture>, weisser Kern ueber das <img>. */
:is(.lp-collage, .lt-galerie, .lm-collage) img:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -6px;
  box-shadow: none;
}
:is(.lp-collage, .lt-galerie, .lm-collage) picture:has(> img:focus-visible) {
  outline: 4px solid rgba(0, 0, 0, 0.75);
  outline-offset: -4px;
}

.lp-titel {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  color: var(--charcoal);
  margin-bottom: 18px;
}

.lp-titel--hell { color: var(--white); }

.lp-titel::after {
  content: '';
  display: block;
  width: 52px;
  height: 4px;
  background: var(--accent);
  margin-top: 20px;
}

.lp-titel--hell::after { background: var(--accent-light); }

.lp-nr {
  display: block;
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 12px;
}

.lp-leistung__text--hell .lp-nr,
.lp-karte--gross .lp-nr { color: var(--accent-bright); }

.lp-leistung__titel {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  color: var(--charcoal);
}

.lp-leistung__titel::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin: 16px 0 20px;
}

.lp-leistung__text--hell .lp-leistung__titel,
.lp-karte--gross .lp-leistung__titel { color: var(--white); }

.lp-leistung__text--hell .lp-leistung__titel::after,
.lp-karte--gross .lp-leistung__titel::after { background: var(--accent-light); }

.lp-leistung__intro { color: var(--ink-muted); margin-bottom: 22px; }

.lp-leistung__text--hell .lp-leistung__intro,
.lp-karte--gross .lp-leistung__intro { color: var(--cream-dark); }

.lp-bullets { list-style: none; margin-bottom: 26px; }

.lp-bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--ink-muted);
  line-height: 1.6;
}

.lp-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 2px;
  background: var(--accent);
}

.lp-bullets--zweispaltig { columns: 2; column-gap: 40px; }
.lp-bullets--zweispaltig li { break-inside: avoid; }

.lp-leistung__text--hell .lp-bullets li,
.lp-karte--gross .lp-bullets li { color: var(--cream-dark); }

.lp-leistung__text--hell .lp-bullets li::before,
.lp-karte--gross .lp-bullets li::before { background: var(--accent-bright); }

/* Merkmalzeilen: Haarlinie statt Kasten */
.lp-zeilen { margin-bottom: 26px; }

.lp-zeilen--zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 40px;
}

.lp-zeilen__zeile { padding: 12px 0; border-top: 1px solid var(--line-light); }

.lp-zeilen dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

.lp-zeilen dd { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.55; }

.lp-zeilen--zweispaltig dt {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.lp-leistung__text--hell .lp-zeilen__zeile { border-top-color: rgba(255, 255, 255, 0.16); }
.lp-leistung__text--hell .lp-zeilen dt { color: var(--white); }
.lp-leistung__text--hell .lp-zeilen dd { color: var(--cream-muted); }

.lp-textlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.lp-textlink .btn__pfeil { width: 17px; height: 17px; }
/* Auf hellem Grund traegt der Pfeil den Hover: --accent-light liegt dort unter
   dem Ruhekontrast von --accent (gotchas/css-visual.md). */
.lp-textlink:hover .btn__pfeil { transform: translateX(4px); }

.lp-textlink--hell { color: var(--accent-bright); }
.lp-textlink--hell:hover { color: var(--white); }

/* Sprungziele liegen sonst unter dem fixierten Kopf */
#stahltreppen, #balkone, #gelaender, #brandschutz, #ueberdachungen,
#tueren-tore, #fassaden, #biegearbeiten, #service { scroll-margin-top: var(--header-h); }


/* === Leistungen Hero === */
.lp-hero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--steel);
  padding-bottom: 110px; /* Platz fuer die ueberlappende Uebersichtskarte */
}

.lp-hero__media { position: absolute; inset: 0; }

/* 1672x941 in einem flacheren Kasten: nur die Y-Achse hat Spiel (gotchas/css-visual.md) */
.lp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.lp-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,12,16,0.78) 0%, rgba(10,12,16,0.25) 22%, transparent 42%),
    linear-gradient(100deg, rgba(10,12,16,0.90) 0%, rgba(10,12,16,0.74) 34%, rgba(10,12,16,0.28) 62%, transparent 80%);
  pointer-events: none;
}

.lp-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--header-h) + 56px);
}

/* Breite statt <br>: der Umbruch soll den drei Zeilen des Entwurfs folgen und
   mobil trotzdem nicht auf eine Wortbreite zusammenfallen. */
.lp-hero__titel {
  font-size: clamp(2.4rem, 6vw, 5rem);
  color: var(--white);
  max-width: max(300px, min(410px, 27.5vw));
}

.lp-hero__titel::after {
  content: '';
  display: block;
  width: 84px;
  height: 5px;
  background: var(--accent-light);
  margin: 30px 0 26px;
}

.lp-hero__eyebrow {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* accent-mid faellt auf den hellsten Hero-Partien unter 3:1 */
  color: var(--accent-bright);
  margin-bottom: 18px;
}

.lp-hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--cream-dark);
  max-width: 34em;
  margin-bottom: 30px;
}


/* === Leistungen Uebersicht === */
.lp-uebersicht {
  background: var(--cream-dark);
  color: var(--charcoal);
  padding: 0 0 90px;
}

.lp-uebersicht__karte {
  position: relative;
  z-index: 3;
  margin-top: -90px;
  background: var(--cream);
  padding: clamp(24px, 3.4vw, 56px);
}

.lp-uebersicht__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 56px;
  align-items: start;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line-light);
}

.lp-uebersicht__kopf .lp-titel { margin-bottom: 0; }
.lp-uebersicht__kopf .lp-titel::after { display: none; }
.lp-uebersicht__intro { color: var(--ink-muted); padding-top: 6px; }

.lp-uebersicht__body {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
  gap: 34px;
  margin-top: 30px;
}

.lp-liste { list-style: none; }

.lp-liste__eintrag {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 12px;
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-light);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}

.lp-liste li:first-child .lp-liste__eintrag { border-top: 1px solid var(--line-light); }

.lp-liste__nr {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--ink-muted);
  transition: color 0.25s;
}

.lp-liste__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.lp-liste__eintrag:hover,
.lp-liste__eintrag.is-active {
  background: var(--cream-dark);
  border-left-color: var(--accent);
}

.lp-liste__eintrag:hover .lp-liste__nr,
.lp-liste__eintrag.is-active .lp-liste__nr { color: var(--accent); }

.lp-vorschau__panel { display: none; }
.lp-vorschau__panel.is-active { display: block; }

.lp-vorschau__gross {
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--cream-dark);
}

.lp-vorschau__unten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.lp-vorschau__klein {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-dark);
}

/* Pixelstops statt Prozent: die Karte waechst mit dem Satz, der Verlauf nicht
   (gotchas/css-visual.md). */
.lp-vorschau__karte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding: 20px;
  background: linear-gradient(to top,
    rgba(6,9,12,0.93) 0,
    rgba(6,9,12,0.93) calc(100% - 46px),
    rgba(6,9,12,0.25) 100%);
}

.lp-vorschau__nr {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-bright);
}

.lp-vorschau__titel {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white);
}

.lp-vorschau__satz { font-size: 0.88rem; line-height: 1.5; color: var(--cream-dark); }
.lp-vorschau__karte .lp-textlink { font-size: 0.85rem; margin-top: 4px; }


/* === Leistungen Spezialleistungen === */
.lp-spezial {
  background: var(--cream-dark);
  color: var(--charcoal);
  padding: 90px 0;
  border-top: 1px solid var(--line-light);
}

.lp-spezial__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.58fr);
  gap: 34px;
  align-items: stretch;
  margin-top: 40px;
}

.lp-loft {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--steel);
}

.lp-loft__collage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  /* feste Hoehe: auto-Zeilen wuerden der Hochformatquelle folgen.
     min-height greift erst, wenn die Karte von der Nachbarspalte gestreckt wurde. */
  height: clamp(400px, 34vw, 520px);
  min-height: 100%;
}

.lp-loft__bild { overflow: hidden; }
.lp-loft__bild--gross { grid-row: 1 / 3; }
.lp-loft__bild img { transition: transform 0.6s ease; }
.lp-loft:hover .lp-loft__bild img { transform: scale(1.04); }

.lp-loft__inhalt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.6vw, 40px);
  background: linear-gradient(100deg,
    rgba(9,12,16,0.95) 0%, rgba(9,12,16,0.86) 40%, rgba(9,12,16,0.30) 76%, rgba(9,12,16,0.10) 100%);
}

.lp-loft__titel { font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: var(--white); margin-bottom: 14px; }
.lp-loft__inhalt p { color: var(--cream-dark); max-width: 30em; }
.lp-loft__inhalt .lp-textlink { margin-top: auto; padding-top: 24px; }

.lp-laser {
  background: #E4EAF1;
  border-top: 3px solid var(--accent);
  padding: clamp(22px, 2.4vw, 36px);
}

.lp-laser__titel { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--charcoal); margin-bottom: 14px; }
.lp-laser__intro { color: var(--ink-muted); margin-bottom: 22px; }
.lp-laser .lp-zeilen__zeile { border-top-color: #C6D3E1; }

.lp-laser__thumbs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 26px;
}

.lp-laser__thumb { aspect-ratio: 5 / 3; overflow: hidden; background: var(--cream-dark); }


/* === Leistungen Detailbaender === */
.lp-detail {
  background: var(--cream-dark);
  color: var(--charcoal);
  padding: 90px 0;
  border-top: 1px solid var(--line-light);
}

.lp-detail__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 56px;
  align-items: start;
  margin-bottom: 56px;
}

.lp-detail__intro { color: var(--ink-muted); padding-top: 6px; }

.lp-treppen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.lp-treppen__collage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  background: var(--white);
  padding: 6px;
}

.lp-treppen__gross { grid-column: 1 / -1; aspect-ratio: 2 / 1; overflow: hidden; }
.lp-treppen__klein { aspect-ratio: 7 / 4; overflow: hidden; }

.lp-balkone { background: var(--steel); padding: 90px 0; }

.lp-balkone__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

/* Asymmetrischer Rand + Versatz: die Bildkarte liegt versetzt ueber dem Band */
.lp-balkone__gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  background: #10161C;
  padding: 32px 18px 48px 14px;
  margin: -28px -18px 0 0;
}

.lp-balkone__zelle { aspect-ratio: 5 / 4; overflow: hidden; }

.lp-gelaender {
  background: var(--cream-dark);
  color: var(--charcoal);
  padding: 90px 0;
}

.lp-gelaender__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.lp-masonry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-rows: auto auto;
  gap: 6px;
}

.lp-masonry > :nth-child(1) { grid-column: 1; grid-row: 1; }
.lp-masonry > :nth-child(2) { grid-column: 2; grid-row: 1; }
.lp-masonry > :nth-child(3) { grid-column: 1; grid-row: 2; }
.lp-masonry > :nth-child(4) { grid-column: 2; grid-row: 2; }
.lp-masonry__m { aspect-ratio: 4 / 3; overflow: hidden; }

.lp-masonry__spalte {
  grid-column: 3;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

/* Beide Achsen festnageln: mit definierter Hoehe UND Breite bleibt aspect-ratio wirkungslos und
   die Kachel fuellt ihre Zelle. Wo die Spalte keine feste Hoehe hat (mobil), greift wieder das Verhaeltnis. */
.lp-masonry__s { aspect-ratio: 5 / 6; width: 100%; height: 100%; overflow: hidden; }

.lp-sammel { background: var(--steel); padding: 90px 0; }
.lp-sammel__kopf { max-width: 740px; margin-bottom: 48px; }
.lp-sammel__intro { color: var(--cream-muted); }

.lp-sammel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.56fr);
  gap: 26px;
  align-items: stretch;
}

.lp-sammel__spalte { display: grid; gap: 26px; align-content: start; }

.lp-karte--gross { background: #10161C; display: grid; grid-template-rows: auto 1fr; }
/* Grid statt Fluss: die Karte ist so hoch wie die Nachbarspalte, der Ueberschuss verteilt sich um den Text. */
.lp-karte--gross .lp-karte__text { display: grid; align-content: center; padding: clamp(22px, 2.4vw, 40px); }

.lp-brand__medien {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
}

/* Hochformatquelle im 2,34:1-Slot: nur Y hat Spiel, der Tuersturz bleibt drin */
.lp-brand__gross { grid-column: 1 / -1; aspect-ratio: 2.34 / 1; overflow: hidden; }
.lp-brand__klein { aspect-ratio: 2.6 / 1; overflow: hidden; }

.lp-karte--creme { background: var(--cream); color: var(--charcoal); }
.lp-karte--blau { background: #DDE4EC; color: var(--charcoal); }

.lp-karte--creme .lp-karte__text,
.lp-karte--blau .lp-karte__text { padding: clamp(20px, 2vw, 30px); }

.lp-karte .lp-leistung__titel { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }

.lp-karte--creme .lp-leistung__titel::after,
.lp-karte--blau .lp-leistung__titel::after { display: none; }

.lp-karte--creme .lp-leistung__titel,
.lp-karte--blau .lp-leistung__titel { margin-bottom: 12px; }

.lp-karte__thumbs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  padding: 22px 22px 0;
}

.lp-karte__thumb { aspect-ratio: 3 / 2; overflow: hidden; }

.lp-karte__gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  padding: 0 22px 22px;
}

.lp-karte__zelle { aspect-ratio: 1 / 1; overflow: hidden; }

/* Die Collage zieht das Band nach oben ueber den dunklen Sammelband */
.lp-fassaden {
  background: var(--cream-dark);
  color: var(--charcoal);
  padding: 0 0 90px;
}

.lp-fassaden__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: stretch;
  margin-top: -90px;
}

.lp-fassaden__collage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  background: var(--white);
  padding: 14px;
}

.lp-fassaden__zelle { aspect-ratio: 10 / 7; overflow: hidden; }
.lp-fassaden__text { background: var(--steel); padding: clamp(24px, 3vw, 48px); display: grid; align-content: center; }

.lp-biege {
  background: var(--cream-dark);
  color: var(--charcoal);
  padding: 90px 0;
  border-top: 1px solid var(--line-light);
}

.lp-biege__karte { background: var(--cream); padding: clamp(24px, 3vw, 52px); }

.lp-biege__oben {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}

.lp-biege__collage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
}

.lp-biege__gross { grid-column: 1 / -1; aspect-ratio: 2.5 / 1; overflow: hidden; }
.lp-biege__klein { aspect-ratio: 3.6 / 1; overflow: hidden; }

.lp-biege__spalten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-top: 44px;
}

.lp-biege__spalte { border-top: 2px solid var(--accent); padding-top: 16px; }

.lp-biege__spalte dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.lp-biege__spalte dd { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.55; }


/* === Leistungen Prozess === */
.lp-prozess {
  background: var(--cream-dark);
  color: var(--charcoal);
  padding: 90px 0 100px;
  border-top: 1px solid var(--line-light);
}

.lp-prozess__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}

.lp-prozess__kopf .lp-titel { margin-bottom: 0; }
.lp-prozess__kopf .lp-titel::after { display: none; }

.lp-prozess .section__eyebrow::after {
  content: '';
  display: block;
  width: 46px;
  height: 2px;
  background: var(--accent);
  margin: 10px 0 14px;
}

.lp-prozess__note {
  border-left: 1px solid var(--accent);
  padding-left: 26px;
  font-size: 1.02rem;
  line-height: 1.75;
}

.lp-schritte {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 96px;
  /* Raster ist am Blatt gegenueber dem Kopf eingerueckt */
  margin: 64px 84px 0;
}

.lp-schritt { position: relative; }

.lp-schritt__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-right: 28px;
  margin-bottom: 14px;
}

.lp-schritt__nr {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--accent);
}

/* Schraeger Slash hinter der Nummer wie am Blatt */
.lp-schritt__nr::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.6em;
  margin-left: 16px;
  background: var(--accent);
  transform: skewX(-24deg);
}

.lp-schritt__icon { width: 64px; height: 64px; color: var(--accent); }

/* Vektorisierte Zeichnungen (B-04) sind Flaechen, keine Striche: fill: none waere
   unsichtbar. Der Strich dickt sie auf, 4 gilt im 278er-Raum der Symbol-viewBox. */
.lp-schritt__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linejoin: round;
}

.lp-schritt__titel {
  display: block;
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 10px;
}

.lp-schritt p { color: var(--ink-muted); font-size: 0.96rem; line-height: 1.6; }

/* Zellhohe Pfeilspitze im Spaltenzwischenraum (non-scaling-stroke: bleibt haarfein) */
.lp-schritt__chevron {
  position: absolute;
  top: 0;
  right: -72px;
  width: 42px;
  height: 100%;
  color: var(--accent);
}

.lp-prozess__cta { display: flex; justify-content: center; margin-top: 64px; }


/* === Product Detail Sections === */
.product-section[id] {
  scroll-margin-top: calc(var(--header-h) + 52px);
}

.product-section {
  padding: 80px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.product-section:last-child { border-bottom: none; }

.product-section--light {
  background: var(--cream);
  color: var(--charcoal);
  border-bottom-color: rgba(0,0,0,0.06);
}

.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.product-layout--reverse .product-images { order: 1; }
.product-layout--reverse .product-text { order: 2; }

.product-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 8px;
}

.product-section--light .product-text h2 { color: var(--charcoal); }

.product-text__accent {
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 20px;
}

.product-text p {
  margin-bottom: 16px;
  line-height: 1.8;
  color: var(--cream-muted);
}

.product-section--light .product-text p { color: #555; }

.product-text ul {
  list-style: none;
  margin: 16px 0;
}

.product-text ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: var(--cream-muted);
  line-height: 1.6;
}

.product-section--light .product-text ul li { color: #555; }

.product-text ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

.product-text .btn { margin-top: 20px; }

/* Product image grids */
.product-images {
  display: grid;
  gap: 12px;
}

.product-images--2 { grid-template-columns: 1fr 1fr; align-self: center; }
.product-images--3 { grid-template-columns: 1fr 1fr; }
.product-images--3 > :first-child { grid-column: 1 / -1; }
.product-images--4 { grid-template-columns: 1fr 1fr; }

.product-img {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.product-img--tall { aspect-ratio: 3/4; }
.product-img--wide { aspect-ratio: 16/9; grid-column: 1 / -1; }

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-img:hover img { transform: scale(1.05); }


/* === Standort band === */
.standort {
  display: grid;
  grid-template-columns: 62fr 38fr;
  background: var(--steel);
}

.standort__map iframe {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  display: block;
}

.standort__panel {
  padding: clamp(48px, 5vw, 80px) clamp(32px, 4vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.standort__panel .section__title { color: var(--white); }

.standort__adresse {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0 32px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--white);
  text-decoration: none;
}

.standort__adresse:hover { color: var(--accent-bright); }

.standort__pin {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.standort__pin svg,
.standort__route svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.standort__route svg { width: 20px; height: 20px; }


/* === Karriere CTA === */
/* Karriere-Teaser: Motiv ueber die rechten 70 % des Bandes, Text darueber.
   Der Verlauf laeuft von --night nach transparent, weil die Grundflaeche exakt
   den dunklen linken Bildrand trifft — nur so bleibt der Uebergang kantenlos. */
.karriere-cta {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--white);
}
.karriere-cta__grid {
  position: relative;
  display: grid;
}
.karriere-cta__content {
  position: relative;
  z-index: 1; /* das absolut gesetzte Motiv ist ein Geschwister und wuerde den Text sonst ueberdecken */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 24px;
}
.karriere-cta__content h2,
.karriere-cta__content h3 {
  font-family: 'Antonio', sans-serif;
  font-size: clamp(1.7rem, 3.4vw, 2.55rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-bottom: 6px;
  max-width: min(520px, 38vw);
}
.karriere-cta__content p {
  color: var(--cream-dark);
  font-size: 1.05rem;
  margin-bottom: 20px;
  max-width: min(520px, 38vw);
}
.karriere-cta__media {
  position: absolute;
  inset: 0 0 0 30%;
  z-index: 0;
}
.karriere-cta__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, var(--night) 0%, rgba(4,7,11,0.55) 9%, transparent 22%);
}
.karriere-cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}
.karriere-cta .btn { white-space: nowrap; }
@media (max-width: 800px) {
  .karriere-cta__media {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 240px;
    order: -1;
  }
  .karriere-cta__media::before {
    background: linear-gradient(to bottom, transparent 45%, rgba(4,7,11,0.55) 80%, var(--night) 100%);
  }
  .karriere-cta__content {
    align-items: center;
    text-align: center;
    padding: 40px 24px;
  }
  .karriere-cta__content h2,
  .karriere-cta__content h3,
  .karriere-cta__content p {
    max-width: none;
  }
}


/* === Download Cards === */
.download-group {
  margin-bottom: 48px;
}

.download-group:last-child { margin-bottom: 0; }

.download-group h2 {
  font-size: 1.3rem;
  color: var(--charcoal);
  margin-bottom: 16px;
  text-transform: none;
  letter-spacing: 0;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.download-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border-radius: 4px;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  text-decoration: none;
  color: var(--charcoal);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.download-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  color: var(--charcoal);
}

.download-card__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.download-card__text h3 {
  font-size: 0.95rem;
  color: var(--charcoal);
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.download-card__text p {
  font-size: 0.82rem;
  color: var(--ink-muted);
  line-height: 1.4;
}


/* === Benefit Cards === */
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

.benefit-card {
  background: var(--white);
  border-radius: 4px;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  position: relative;
}

.benefit-card__icon-wrap {
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-card__icon-wrap svg {
  width: 16px;
  height: 16px;
  stroke: var(--white);
}

.benefit-card h4 {
  font-size: 0.9rem;
  color: var(--charcoal);
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.benefit-card p {
  font-size: 0.82rem;
  color: #555;
  line-height: 1.4;
}


/* === Karriere: Hero === */
.kar-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72svh;
  overflow: hidden;
  background: var(--night);
}

.kar-hero__media { position: absolute; inset: 0; }

/* Ab Desktopbreite ist das Motiv breitenbegrenzt, dort wirkt nur der Y-Wert.
   Der X-Wert greift erst im schmalen Rahmen (siehe Umbruch 900px). */
.kar-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 76% 50%;
  filter: saturate(1.2) contrast(1.08) brightness(1.14);
}

/* Wie im Start-Hero gerichtet statt flaechig: oben fuer die transparente
   Kopfzeile, links fuer die Textspalte, rechts bleibt das Lichtbogenmotiv offen. */
.kar-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(6,9,13,0.86) 0%, rgba(6,9,13,0.34) 15%, transparent 28%),
    linear-gradient(100deg, rgba(6,9,13,0.93) 0%, rgba(6,9,13,0.82) 26%, rgba(6,9,13,0.52) 44%, rgba(6,9,13,0.18) 60%, transparent 72%),
    linear-gradient(to top, rgba(6,9,13,0.42) 0%, transparent 22%);
}

.kar-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: calc(var(--header-h) + 76px) clamp(24px, 3.5vw, 60px) 92px;
}

/* Ueber dem Foto traegt das hellere --accent-bright; das #3186D2 des Start-Heros
   liegt auf dem schmaleren Mobil-Scrim unter 4,5:1 (README, Farbrollen). */
.kar-hero .hero__eyebrow { color: var(--accent-bright); }

.kar-hero__title {
  font-size: clamp(2.1rem, 3.9vw, 3.6rem);
  color: var(--white);
  max-width: 15ch;
  margin-bottom: 26px;
}

.kar-hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--cream-dark);
  max-width: 26em;
  margin-bottom: 34px;
}

@media (max-width: 900px) {
  .kar-hero { min-height: 62svh; }
  .kar-hero__media img { object-position: 45% 50%; }
  .kar-hero__scrim {
    background: linear-gradient(to bottom, rgba(6,9,13,0.92) 0%, rgba(6,9,13,0.84) 40%, rgba(6,9,13,0.68) 70%, rgba(6,9,13,0.90) 100%);
  }
  .kar-hero__inner { padding: calc(var(--header-h) + 48px) 24px 56px; }
  .kar-hero__title { max-width: none; }
}

@media (max-width: 600px) {
  .kar-hero__inner { padding: calc(var(--header-h) + 36px) 20px 44px; }
  .kar-hero .btn { display: flex; justify-content: center; }
}


/* === Karriere: Stelle === */
.kar-stelle__intro { margin-bottom: 0; }

.kar-stelle__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 64px;
  margin-top: 48px;
}

.kar-stelle__spalte h3 {
  font-size: 1.15rem;
  color: var(--charcoal);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-light);
}

.kar-stelle__punkte { list-style: none; }

.kar-stelle__punkte li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 9px 0;
  color: var(--ink-muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

.kar-stelle__punkte svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kar-stelle__weg { margin-top: 52px; }

.kar-stelle__weg-text {
  color: var(--ink-muted);
  font-size: 0.98rem;
}

.kar-stelle__adresse {
  margin: 12px 0 28px;
  color: var(--charcoal);
  font-size: 1.02rem;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .kar-stelle__grid { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
}


/* === Karriere: Vorteile === */
/* Haarlinie: zwei helle Baender in Folge duerfen nicht zu einem verschmelzen */
.kar-vorteile { border-top: 1px solid var(--line-light); }

.kar-vorteile__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 56px;
  margin-top: 56px;
}

.kar-vorteil { border-top: 1px solid var(--line-light); padding-top: 26px; }

.kar-vorteil__icon {
  width: 34px;
  height: 34px;
  color: var(--accent);
  margin-bottom: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kar-vorteil h3 {
  font-size: 1.02rem;
  color: var(--charcoal);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.kar-vorteil p {
  font-size: 0.96rem;
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 32ch;
}

@media (max-width: 1000px) {
  .kar-vorteile__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 40px; }
}
@media (max-width: 560px) {
  .kar-vorteile__grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
}


/* === Karriere: Team === */
.kar-team__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}

.kar-team__text .section__desc { margin-bottom: 32px; }

.kar-team__punkte {
  list-style: none;
  margin-bottom: 36px;
}

.kar-team__punkte li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  color: var(--cream-dark);
  font-size: 1.02rem;
}

.kar-team__punkte svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent-bright);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Die Hoehe steht am Verbund, nicht am grossen Bild: nur so teilen sich die drei
   kleinen Bilder genau die Hoehe des grossen. */
.kar-team__collage {
  display: grid;
  grid-template-columns: 2.05fr 1fr;
  gap: 16px;
  aspect-ratio: 1.45;
}

.kar-team__spalte {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  min-height: 0;
}

/* Ohne min-height:0 zieht die Eigenhoehe der drei Bilder den Verbund auf und das
   aspect-ratio darueber greift nicht mehr. */
.kar-team__gross,
.kar-team__klein { overflow: hidden; min-height: 0; }

.kar-team__gross img,
.kar-team__klein img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}

/* Die Koepfe sitzen in den kleinen Motiven weit oben - ohne den Versatz
   schneidet der 4:3-Ausschnitt sie an. */
.kar-team__klein img { object-position: 50% 24%; }

@media (max-width: 1000px) {
  .kar-team__grid { grid-template-columns: 1fr; gap: 44px; }
  .kar-team__collage { grid-template-columns: 1fr; aspect-ratio: auto; }
  .kar-team__gross { aspect-ratio: 3 / 2; }
  .kar-team__spalte { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
  .kar-team__klein { aspect-ratio: 4 / 3; }
}


/* === Karriere: Bewerbung === */
.kar-bewerbung { scroll-margin-top: var(--header-h); }

.kar-bewerbung__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: stretch;
  margin-top: 56px;
}

/* Schritte oben, "Noch Fragen?" am Fuss der Spalte — sonst bleibt darunter Leerflaeche */
.kar-bewerbung__links {
  display: flex;
  flex-direction: column;
}

.kar-schritte { list-style: none; margin-bottom: 58px; }

.kar-schritt {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 24px;
  padding-bottom: 54px;
}

.kar-schritt:last-child { padding-bottom: 0; }

/* Verbindungslinie zwischen den Kreisen, nicht darunter durch */
.kar-schritt:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 31px;
  top: 70px;
  bottom: 8px;
  width: 2px;
  background: var(--line-light);
}

.kar-schritt__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--white);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kar-schritt__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kar-schritt__body { padding-top: 13px; }

.kar-schritt__body h3 {
  font-size: 1.15rem;
  color: var(--charcoal);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.kar-schritt__body p {
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.kar-fragen {
  background: var(--steel);
  color: var(--cream);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  padding: 38px 38px;
  margin-top: auto;   /* Mindestabstand steht als margin-bottom an .kar-schritte */
}

.kar-fragen h3 {
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 6px;
}

.kar-fragen > p {
  color: var(--cream-muted);
  font-size: 0.98rem;
  margin-bottom: 20px;
}

.kar-fragen__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  color: var(--cream);
  font-size: 1.02rem;
}

.kar-fragen__row + .kar-fragen__row { border-top: 1px solid rgba(255,255,255,0.09); }

.kar-fragen__row:hover { color: var(--accent-bright); }

.kar-fragen__row .kontakt-bar__icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent-bright);
}

.form-group__optional {
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 1000px) {
  .kar-bewerbung__grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 600px) {
  .kar-schritt { grid-template-columns: 50px 1fr; gap: 16px; }
  .kar-schritt:not(:last-child)::before { left: 25px; top: 58px; }
  .kar-schritt__icon { width: 50px; height: 50px; }
  .kar-schritt__icon svg { width: 22px; height: 22px; }
  .kar-schritt__body { padding-top: 8px; }
  .kar-fragen { padding: 26px 22px; }
  .kontakt-form-panel { padding: 28px 20px; }
}

/* === File Drop Zone === */
.file-drop {
  border: 2px dashed var(--cream-dark);
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.file-drop:hover,
.file-drop:focus-within,
.file-drop--active {
  border-color: var(--accent);
  background: rgba(232,99,43,0.04);
}

/* Visually hidden, NOT hidden: a `hidden` file input leaves the field unlabelled
   for a screen reader, and the drop zone is only its skin. Two classes, because
   .form-group input (width 100%) would otherwise win and stretch the 1px box
   back to full width — off-screen, as a mobile overflow. */
.file-drop .file-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.file-drop:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.file-drop__icon {
  color: var(--accent);
  margin-bottom: 8px;
}

.file-drop__prompt p {
  font-size: 0.95rem;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.file-drop__prompt span {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.file-drop__prompt strong {
  color: var(--accent);
  cursor: pointer;
}

.file-drop__hint {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem !important;
  color: #6E6A66 !important;
}

.file-drop__list {
  list-style: none;
  margin-top: 16px;
  text-align: left;
}

.file-drop__list:empty { margin-top: 0; }

.file-drop__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--cream);
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 0.88rem;
  color: var(--charcoal);
}

.file-drop__list li:last-child { margin-bottom: 0; }

.file-drop__list .file-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.file-drop__list .file-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-drop__list .file-size {
  color: #999;
  font-size: 0.8rem;
  white-space: nowrap;
  margin-left: 12px;
}

/* Class-count matches .file-drop__list li, so it has to sit after it to win. */
.file-drop__list .file-drop__item--rejected {
  background: rgba(160,48,40,0.08);
  color: #932A22;
}

.file-drop__list .file-drop__item--rejected .file-size { color: #932A22; }

.file-drop__remove {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 1.1rem;
  line-height: 1;
  margin-left: 8px;
}

.file-drop__remove:hover { color: var(--accent); }

/* === Page Content Extended (lists, h3) === */
.page-content h3 {
  font-size: 1.1rem;
  color: var(--charcoal);
  margin: 24px 0 8px;
  text-transform: none;
  letter-spacing: 0;
}

.page-content ul,
.page-content ol {
  margin: 12px 0;
  padding-left: 24px;
  color: #444;
  line-height: 1.8;
}

.page-content li { margin-bottom: 4px; }


/* === Spotlight Section === */
.spotlight__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.spotlight__panel {
  position: relative;
  /* traegt nur zwischen 1101 und 1439 px: darueber streckt die Textspalte die
     Zeile auf 344 px, darunter greift die 600er-Regel */
  min-height: 340px;
  border: 1px solid rgba(22,102,172,0.5);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: var(--white);
  transition: border-color 0.3s ease;
}

.spotlight__panel:hover { border-color: var(--accent-light); }

.spotlight__img {
  position: absolute;
  inset: 0;
}

.spotlight__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.spotlight__panel:hover .spotlight__img img {
  transform: scale(1.06);
}

.spotlight__img--laser img { object-position: 50% 60%; }

/* Der Text laeuft ueber die volle Panelhoehe, deshalb verdunkelt der Verlauf
   die linke Spalte statt des Fusses (Screenlayout Band 05). */
.spotlight__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(20,21,24,0.95) 0%, rgba(20,21,24,0.9) 34%, rgba(20,21,24,0.66) 62%, rgba(20,21,24,0.4) 100%);
  transition: background 0.4s ease;
}

.spotlight__panel:hover .spotlight__overlay {
  background: linear-gradient(to right, rgba(20,21,24,0.92) 0%, rgba(20,21,24,0.86) 34%, rgba(20,21,24,0.56) 62%, rgba(20,21,24,0.3) 100%);
}

.spotlight__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 32px;
}

.spotlight__eyebrow {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 8px;
}

.spotlight__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5);
}

.spotlight__desc {
  font-size: 0.9rem;
  color: var(--cream);
  line-height: 1.6;
  max-width: 340px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.spotlight__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--accent-bright);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 2px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.spotlight__panel:hover .spotlight__cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}


/* === Animations / Utilities === */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in,
  .service-tile { opacity: 1; transform: none; transition: none; }
  .bp path { stroke-dashoffset: 0; transition: none; }
  .bp__grund, .bp__masszahl { opacity: 1; transition: none; }
  .header, .header__logo img { transition: none; }
}


/* === Media Queries === */

/* Zweispaltig nur auf der Entwurfsbreite: die Kachelspalte braucht 258 px, die
   Panelspalte liefert sie erst ab 1435 px Viewport. */
@media (max-width: 1439px) {
  .leistungen__split { grid-template-columns: 1fr; column-gap: 36px; row-gap: 36px; }
  .leistungen__weitere { grid-column: 1; }
}

/* 4 → 2 → 1, nie 3: acht Kacheln liessen sonst eine angebrochene Zeile stehen (L3) */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .ref-karten { grid-template-columns: 1fr; }
  .ref-karte__pic img { height: clamp(240px, 34vw, 320px); }
  .stimme__band { grid-template-columns: 1fr 1fr; }
  .stimme .section__title { grid-column: 1 / -1; }
  /* Drei Spalten brauchen 404px und passen ab hier in keine Bandspalte mehr;
     mit 271px traegt das Band seine zwei Spalten bis hinunter zu 701px. */
  .projekt-cta__schritte { grid-template-columns: repeat(2, minmax(0, max-content)); }

  /* Einspaltig braucht das Band eine gemeinsame Messgroesse. Ohne sie stehen
     Text (355px), Schaltflaechen (486px), Rufnummer (183px) und Schrittzeile
     (271px) mit vier rechten Kanten in einer bis 976px breiten Spalte, und nur
     die H2 laeuft voll durch. 520px ist die Buttonzeile plus Luft; der Rest der
     Spalte wird damit zur Marge statt zu Restflaeche. Zweispaltig greift die
     Grenze nicht, dort ist die Spalte ohnehin schmaler. */
  .projekt-cta__text,
  .projekt-cta__aktionen,
  .projekt-cta__zeichnung { max-width: 520px; }
  .projekt-cta__text > p { max-width: none; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item--tall { grid-row: span 1; aspect-ratio: 4/3; }
  .footer__inner { gap: 32px 40px; }
  .product-layout { grid-template-columns: 1fr; gap: 32px; }
  .product-layout--reverse .product-text { order: 0; }
  .product-layout--reverse .product-images { order: 0; }
  .spotlight__inner { grid-template-columns: 1fr; }

  /* Leistungen: alle Zweispalter der Seite stapeln auf einer Achse */
  .lp-uebersicht__kopf,
  .lp-uebersicht__body,
  .lp-spezial__grid,
  .lp-detail__kopf,
  .lp-treppen,
  .lp-balkone__inner,
  .lp-gelaender__inner,
  .lp-sammel__grid,
  .lp-fassaden__inner,
  .lp-biege__oben { grid-template-columns: minmax(0, 1fr); }
  .lp-spezial__grid,
  .lp-treppen,
  .lp-balkone__inner,
  .lp-gelaender__inner,
  .lp-biege__oben { gap: 32px; }
  .lp-uebersicht__body { gap: 26px; }
  .lp-balkone__gitter { margin: 0; padding: 14px; }
  .lp-loft__collage { min-height: 380px; }
  .lp-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px; margin-left: 0; margin-right: 0; }
  .lp-prozess__kopf { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Im 2-/1-spaltigen Raster stimmen die Spaltengassen des Blatts nicht mehr */
  .lp-schritt__chevron { display: none; }
}

/* Untergrenze der zwei Spalten: bei 701px misst die Aktionsspalte 311px und
   fasst die Schrittzeile (271px) gerade noch, darunter laeuft sie ueber. */
@media (max-width: 700px) {
  .projekt-cta__grid,
  .projekt-cta--zeichnung .projekt-cta__grid { grid-template-columns: 1fr; }
  /* Einspaltig fuehrt die Zeichnung das Band an: als Untergrund oder Fusszeile
     kollidierte die blaue Masskette mit Rufnummer und Schrittzeile. */
  .projekt-cta__zeichnung { order: -1; }
}

@media (max-width: 900px) {
  /* Mobile nav */
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 30, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
    z-index: 99;
  }

  .nav.open {
    opacity: 1;
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .nav__link {
    font-size: 1.5rem;
    letter-spacing: 0.12em;
  }

  /* Startseiten-Baender: der Sektions-CTA steht mobil am Bandende. Die
     Reihenfolge entsteht ueber display:contents, damit Kopf und Band eine
     einzige Markup-Fassung behalten. */
  .fallstudien > .container { display: flex; flex-direction: column; }
  .fallstudien__head { display: contents; }
  .fallstudien .section__title { margin-bottom: 28px; }
  .fallstudien .link-pfeil { order: 1; align-self: flex-start; margin-top: 32px; }

  .leistungen__split { row-gap: 0; }
  .leistungen__text { display: contents; }
  .leistungen__weitere { margin-top: 36px; }
  .leistungen__text .btn { order: 1; justify-self: start; margin-top: 36px; }

  .spotlight__inner { gap: 12px; }
  .kennzahlen { grid-template-columns: repeat(2, 1fr); row-gap: 28px; margin-top: 32px; }
  .kennzahl { padding: 0 20px; }
  .kennzahl:nth-child(odd) { padding-left: 0; }
  .kennzahl:nth-child(odd)::before { display: none; }
  .stimme__band { grid-template-columns: 1fr; gap: 20px; }
  /* Die Zeilenbox des Anfuehrungszeichens traegt unter der Glyphe nur
     Leerraum; mobil steht es direkt ueber dem Zitat. */
  .stimme .section__title::after { margin-bottom: -36px; }
  .stimme__rating { align-self: flex-start; }

  /* About: Bild zwischen Ueberschrift und Text, Button unter die Kennzahlen.
     Nur das Startseitenband (.about-band) stapelt so um - unternehmen.php
     teilt sich .about-grid und behaelt Bild vor Text. */
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-image { order: -1; }
  .about-image img { height: 280px; }

  .about-band { display: flex; flex-direction: column; }
  .about-band .about-grid,
  .about-band .about-text { display: contents; }
  .about-band .section__title { order: 1; margin-bottom: 24px; }
  .about-band .about-image { order: 2; margin-bottom: 28px; }
  .about-band .about-text p { order: 3; }
  .about-band .kennzahlen { order: 4; }
  .about-band .about-text .btn { order: 5; align-self: flex-start; margin-top: 32px; }

  /* Kontakt */
  .kontakt-layout { grid-template-columns: 1fr; gap: 40px; }
  .kontakt-form-panel { padding: 28px 20px; }
  .standort { grid-template-columns: 1fr; }
  .standort__map iframe { min-height: 320px; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }

  /* Leistungen */
  .lp-hero { min-height: 0; padding-bottom: 90px; }
  .lp-hero__inner { padding-top: calc(var(--header-h) + 44px); }
  .lp-hero__scrim { background: linear-gradient(to bottom, rgba(10,12,16,0.78) 0%, rgba(10,12,16,0.3) 30%, rgba(10,12,16,0.4) 100%), linear-gradient(100deg, rgba(10,12,16,0.4) 0%, rgba(10,12,16,0.15) 100%); }
  .lp-biege__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .section { padding: 64px 0; }
  .kontakt-form-panel { margin-inline: -20px; }

  .banner-kontakte { flex-direction: column; gap: 20px; }
  .banner-kontakte__item + .banner-kontakte__item {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 20px;
  }

  .fallstudien { padding: 64px 0 72px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-tile { min-height: 0; padding: 18px; }
  .spotlight__inner { grid-template-columns: 1fr; }
  .kennzahlen { grid-template-columns: 1fr; row-gap: 0; }
  .kennzahl { padding: 16px 0; }
  .kennzahl + .kennzahl::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .kennzahl:nth-child(odd) { padding-left: 0; }
  .kennzahl:nth-child(odd)::before { display: block; }
  .kennzahl:first-child::before { display: none; }
  .projekt-cta { padding: 64px 0; }
  .projekt-cta__buttons { width: 100%; }
  .projekt-cta__tel b { font-size: 1.35rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .link-pfeil { width: 100%; justify-content: center; }

  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  .form-row { grid-template-columns: 1fr; }

  .spotlight__panel { min-height: 280px; }
  .spotlight__content { padding: 24px; }

  .btn { width: 100%; }
  .btn--pfeil,
  .btn--icon { justify-content: center; }

  /* Leistungen */
  .lp-uebersicht { padding-bottom: 64px; }
  .lp-uebersicht__karte { margin-top: -60px; padding: 22px 18px; }
  .lp-spezial,
  .lp-detail,
  .lp-balkone,
  .lp-gelaender,
  .lp-sammel,
  .lp-biege { padding: 64px 0; }
  .lp-fassaden { padding-bottom: 64px; }
  /* Bandpolster ist hier nur 64px: -90px zoege die Collage in die Tueren-Karte */
  .lp-fassaden__inner { margin-top: -40px; }
  .lp-prozess { padding: 64px 0 72px; }
  .lp-vorschau__unten { grid-template-columns: minmax(0, 1fr); }
  .lp-vorschau__karte { padding: 16px; }
  .lp-vorschau__titel { font-size: 1.15rem; }
  .lp-liste__eintrag { grid-template-columns: 38px minmax(0, 1fr); padding: 12px 10px; }
  .lp-loft__inhalt {
    background: linear-gradient(to top,
      rgba(9,12,16,0.95) 0%, rgba(9,12,16,0.86) 46%, rgba(9,12,16,0.42) 100%);
  }
  .lp-bullets--zweispaltig { columns: 1; }
  .lp-zeilen--zweispaltig { grid-template-columns: minmax(0, 1fr); }
  .lp-masonry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-masonry__spalte { grid-column: 1 / -1; grid-row: 3; }
  .lp-brand__gross { aspect-ratio: 3 / 2; }
  .lp-brand__klein { aspect-ratio: 3 / 2; }
  .lp-biege__spalten { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp-schritte { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .partner-strip__list { gap: 8px 20px; }
  .partner-strip__item { font-size: 0.85rem; }
}

/* === Social-Kreise (Kopf- und Fusszeile) === */
.social {
  display: flex;
  align-items: center;
  gap: 12px;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--social-size, 34px);
  height: var(--social-size, 34px);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.34);
  color: var(--cream);
  border-radius: 50%;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.15s;
  flex-shrink: 0;
}
.social a:hover { background: var(--accent-light); border-color: var(--accent-light); color: var(--white); transform: scale(1.1); }
.social svg { display: block; }

.nav__social { --social-size: 54px; margin-left: 26px; }
.nav__social svg { width: 26px; height: 26px; }

/* Zwischenbreiten: die vergroesserte Nav braucht ab hier mehr Platz, als Logo und
   Rand uebrig lassen - unterhalb 901px uebernimmt das Burger-Menue. */
@media (min-width: 901px) and (max-width: 1360px) {
  :root { --header-h: 104px; --logo-h: 48px; }
  .nav__list { gap: 16px; }
  .nav__link { font-size: 1.06rem; letter-spacing: 0.04em; }
  .nav__social { --social-size: 34px; margin-left: 12px; }
  .nav__social svg { width: 17px; height: 17px; }
}

@media (max-width: 900px) {
  .nav__social { --social-size: 48px; margin-left: 0; }
  .nav__social svg { width: 26px; height: 26px; }
}

/* === Lightbox === */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
  box-shadow: 0 8px 60px rgba(0, 0, 0, 0.7);
}
.lightbox__close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.lightbox__close:hover { background: rgba(255,255,255,0.2); color: #fff; }

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 2.8rem;
  line-height: 1;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  user-select: none;
}
.lightbox__prev { left: 12px; }
.lightbox__next { right: 12px; }
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255,255,255,0.2); color: #fff; }
.lightbox__prev:disabled,
.lightbox__next:disabled { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
  .lightbox__prev,
  .lightbox__next { font-size: 2rem; padding: 8px 10px; }
}

.gallery-item img { cursor: zoom-in; }
.product-img img { cursor: zoom-in; }


/* === Unternehmen === */
.unt-hero {
  position: relative;
  background: var(--steel);
  padding: calc(var(--header-h) + 88px) 0 80px;
  overflow: hidden;
}

.unt-hero__media {
  position: absolute;
  inset: 0;
}

.unt-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}

.unt-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(23,29,35,0.96) 0%, rgba(23,29,35,0.8) 42%, rgba(23,29,35,0.35) 100%);
}

.unt-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 clamp(24px, 3.5vw, 60px);
}

.unt-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 48px clamp(40px, 5vw, 88px);
  align-items: start;
}

.unt-hero .section__eyebrow { color: var(--accent-bright); }

.unt-hero__titel {
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  color: var(--white);
  margin-bottom: 0;
}

.unt-hero__titel::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  background: var(--accent-mid);
  margin-top: 28px;
}

.unt-hero__intro {
  color: var(--cream-muted);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 54ch;
  margin: 28px 0 34px;
}

.unt-hero__zitat {
  border-left: 2px solid var(--accent-mid);
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
  align-self: center;
  background: rgba(23, 29, 35, 0.82); /* Das Zitat liegt auf der Lichtkante des Motivs — ohne Panel faellt der Kontrast unter 4.5:1 */
}

.unt-hero__zitat blockquote,
.unt-hero__zitat-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.9vw, 2.6rem);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
}

@media (max-width: 1000px) {
  .unt-hero__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
  .unt-hero { padding: calc(var(--header-h) + 44px) 0 56px; }
  .unt-hero__intro { font-size: 1rem; }
  .unt-hero__scrim { background: linear-gradient(100deg, rgba(23,29,35,0.96) 0%, rgba(23,29,35,0.86) 60%, rgba(23,29,35,0.72) 100%); }
  .unt-hero .btn { display: flex; justify-content: center; }
}

.unt-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.unt-link svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.unt-link:hover svg { transform: translateX(4px); }

.unt-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px clamp(40px, 5vw, 88px);
  align-items: start;
}

.unt-about__text p {
  color: var(--ink-muted);
  line-height: 1.8;
  margin-bottom: 18px;
}

.unt-about__media { position: relative; }

.unt-about__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 45%;
}

.unt-about__karte {
  position: absolute;
  left: -28px;
  bottom: -34px;
  max-width: 300px;
  background: var(--steel);
  color: var(--cream);
  padding: 22px 26px;
}

.unt-about__karte h3 {
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: var(--white);
  margin-bottom: 8px;
}

.unt-about__karte p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--cream-muted);
}

@media (max-width: 900px) {
  .unt-about__grid { grid-template-columns: 1fr; gap: 34px; }
  .unt-about__media { order: -1; }
  .unt-about__karte { position: static; max-width: none; }
}

.unt-familie { border-top: 1px solid var(--line-light); }

.unt-familie__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px clamp(40px, 5vw, 80px);
  align-items: start;
}

.unt-familie__kopf .section__title { margin-bottom: 0; }

.unt-familie__intro {
  color: var(--ink-muted);
  line-height: 1.8;
  padding-top: 6px;
}

.unt-familie__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(40px, 4.4vw, 64px);
}

.unt-team__karte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(20px, 2.2vw, 30px);
  align-content: start;
  background: var(--white);
  border: 1px solid var(--line-light);
  padding: clamp(24px, 2.6vw, 34px);
  height: 100%;
}

.unt-team__body { min-width: 0; }

.unt-team__portrait {
  align-self: start;
  width: clamp(76px, 7vw, 96px);
  height: clamp(76px, 7vw, 96px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--accent);
}

.unt-team__portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
}

.unt-team__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.unt-team__karte h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.unt-team__rolle {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}

.unt-team__karte ul { list-style: none; }

.unt-team__karte ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

.unt-team__karte ul li:last-child { margin-bottom: 0; }

.unt-team__karte ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

.unt-team__pfeil {
  width: 34px;
  height: 34px;
  color: var(--accent);
  justify-self: center;
}

.unt-team__pfeil svg { width: 100%; height: 100%; display: block; }

@media (max-width: 900px) {
  .unt-familie__kopf { grid-template-columns: 1fr; gap: 16px; }
  .unt-familie__grid { grid-template-columns: 1fr; gap: 20px; }
  .unt-team__pfeil { display: none; }
}

@media (max-width: 520px) {
  .unt-team__karte { grid-template-columns: 1fr; row-gap: 18px; }
}

.unt-geschichte { border-top: 1px solid var(--line-light); }

.unt-geschichte__panel,
.unt-werkshallen__panel {
  background: var(--steel);
  color: var(--cream);
  border-radius: 8px;
  padding: clamp(28px, 4vw, 64px);
}

.unt-geschichte__panel .section__eyebrow,
.unt-werkshallen__panel .section__eyebrow { color: var(--accent-mid); }

.unt-geschichte__panel .section__title,
.unt-werkshallen__panel .section__title,
.unt-geschichte__panel h2,
.unt-werkshallen__panel h2,
.unt-geschichte__panel h3,
.unt-werkshallen__panel h3 { color: var(--white); }

.unt-geschichte__panel .section__desc,
.unt-werkshallen__panel .section__desc,
.unt-geschichte__panel p,
.unt-werkshallen__panel p { color: var(--cream-muted); }

.unt-geschichte__kopf,
.unt-werkshallen__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px clamp(40px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(32px, 3.6vw, 52px);
}

.unt-geschichte__kopf .section__title,
.unt-geschichte__kopf .section__desc,
.unt-werkshallen__kopf .section__title { margin-bottom: 0; }

/* Zeitachse als durchlaufende Schiene: ein Strang von 1976 bis heute, Knoten je Station.
   Die frühere Kachelvariante brach die Achse in jeder Rasterreihe neu auf. */
.unt-meilensteine {
  --schiene: clamp(26px, 3vw, 44px);
  position: relative;
  display: grid;
  gap: clamp(20px, 2.2vw, 30px);
  padding-left: var(--schiene);
}

.unt-meilensteine::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.24) 12%, rgba(255,255,255,0.24) 88%, rgba(255,255,255,0.05));
}

.unt-meilenstein {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 112px) minmax(0, 232px) minmax(0, 1fr);
  column-gap: clamp(20px, 2.4vw, 40px);
  align-items: baseline;
}

.unt-meilenstein::before {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(1px - var(--schiene));
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-mid);
  box-shadow: 0 0 0 4px rgba(52,137,208,0.22);
}

.unt-meilenstein__jahr {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent-bright);
}

.unt-meilensteine h3 {
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
}

.unt-meilensteine p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--cream-muted);
}

@media (max-width: 1000px) {
  .unt-geschichte__kopf,
  .unt-werkshallen__kopf { grid-template-columns: 1fr; }
  /* Titel und Text stapeln, das Jahr bleibt in seiner Spalte */
  .unt-meilenstein { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); row-gap: 6px; }
  .unt-meilenstein__jahr { grid-row: span 2; }
}

@media (max-width: 560px) {
  .unt-meilenstein { grid-template-columns: 1fr; }
  .unt-meilenstein__jahr { grid-row: auto; font-size: 1.6rem; }
}

.unt-zertifikate {
  border-top: 1px solid var(--line-light);
  scroll-margin-top: var(--header-h);
}

.unt-zertifikate__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 40px clamp(40px, 5vw, 80px);
  align-items: start;
}

.unt-zertifikate__text .section__desc { margin-bottom: 32px; }

.unt-din-karte {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--accent);
  padding: 26px 30px;
}

.unt-din-karte h3 {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 8px;
}

.unt-din-karte p {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

.unt-nachweise {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.unt-nachweise > * {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line-light);
  padding: 20px 22px;
}

.unt-nachweis__icon {
  grid-row: span 2;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--accent);
}

.unt-nachweis__icon svg { width: 100%; height: 100%; display: block; }

.unt-nachweise h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.unt-nachweise p {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .unt-zertifikate__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .unt-nachweise { grid-template-columns: 1fr; }
  .unt-din-karte { padding: 22px 22px; }
}

.unt-werkshallen { border-top: 1px solid var(--line-light); }

.unt-werkshallen__intro {
  line-height: 1.8;
  margin-bottom: 0;
}

/* Spezifikationsliste statt Icon-Kacheln: die Ausstattung ist eine Datenliste, kein Leistungsraster.
   Der Zweispalter laesst rechts Platz fuer ein Werkstatt-Motiv (CR-015-16), sobald es vorliegt. */
.unt-ausstattung {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  border-top: 1px solid rgba(255,255,255,0.16);
}

.unt-ausstattung dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bright);
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}

.unt-ausstattung dd {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--cream-muted);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}

@media (max-width: 560px) {
  .unt-ausstattung { grid-template-columns: 1fr; }
  .unt-ausstattung dt { padding: 16px 0 0; border-bottom: 0; }
  .unt-ausstattung dd { padding: 6px 0 16px; }
}

.unt-firmendaten { border-top: 1px solid var(--line-light); }

.unt-firmendaten__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px clamp(40px, 5vw, 80px);
  align-items: start;
}

.unt-firmendaten__text .section__desc { margin-bottom: 0; }

.unt-daten {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  border-top: 1px solid var(--line-light);
}

.unt-daten dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--line-light);
}

.unt-daten dd {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--charcoal);
  padding: 16px 0;
  border-bottom: 1px solid var(--line-light);
}

@media (max-width: 900px) {
  .unt-firmendaten__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .unt-daten { grid-template-columns: 1fr; }
  .unt-daten dt { padding: 14px 0 0; border-bottom: 0; }
  .unt-daten dd { padding: 4px 0 14px; }
}


/* === Referenzen: Hero / Intro / Fallstudien / Mosaike / CTA === */
/* === Referenzen: Hero === */
/* --night ist die Farbe, die durch die 4px-Fugen der Bildtafeln scheint */
.rf-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 70svh;
  overflow: hidden;
  background: var(--night);
}

.rf-hero__media {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19.2% 16%;
  gap: 4px;
}

.rf-hero__bild { display: block; overflow: hidden; min-width: 0; }

/* Die Fotos tragen die Grundabdunklung, der Scrim nur noch die Textrichtung */
.rf-hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.58) saturate(0.85);
}

.rf-hero__bild--haupt img { object-position: 52% 54%; }
.rf-hero__bild--a img { object-position: 46% 46%; }
.rf-hero__bild--b img { object-position: 50% 44%; }

/* Zwei Lasten wie im Start-Hero: oben Nav-Kontrast unter der transparenten
   Kopfzeile, links Textkontrast — die Bildtafeln rechts bleiben offen. */
.rf-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(6,9,13,0.88) 0%, rgba(6,9,13,0.40) 16%, transparent 30%),
    linear-gradient(100deg, rgba(6,9,13,0.92) 0%, rgba(6,9,13,0.84) 30%, rgba(6,9,13,0.56) 48%, rgba(6,9,13,0.20) 62%, transparent 74%),
    linear-gradient(to top, rgba(6,9,13,0.48) 0%, transparent 24%);
}

/* Geometrie von .container statt der breiteren Hero-Huelle: Hero, Intro,
   Fallstudien und CTA teilen sich im Entwurf eine linke Kante. */
.rf-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--header-h) + 44px) 24px 64px;
}

/* Ueber dem Foto traegt --accent-bright; --accent-mid liegt auf dem schmaleren
   Mobil-Scrim unter 4,5:1 (wie .kar-hero) */
.rf-hero .hero__eyebrow { color: var(--accent-bright); margin-bottom: 5px; }

.rf-hero__title {
  font-size: clamp(2.3rem, 4.4vw, 4rem);
  color: var(--white);
  letter-spacing: -0.015em;
  max-width: 12ch;
  overflow-wrap: break-word;
}

.rf-hero__title::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--accent-light);
  margin-top: 26px;
}

.rf-hero__sub {
  margin-top: 24px;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--cream-dark);
  max-width: 31em;
  hyphens: auto;
}

.rf-hero__actions {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.rf-hero__stats {
  margin-top: 34px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 34px;
}

.rf-hero__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--cream-dark);
  hyphens: auto;
}

.rf-hero__stat-nr {
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--white);
}


@media (max-width: 1100px) {
  .rf-hero__media { grid-template-columns: minmax(0, 1fr) 22%; }
  .rf-hero__bild--b { display: none; }
}

@media (max-width: 900px) {
  .rf-hero { min-height: 62svh; }
  .rf-hero__media { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rf-hero__bild--panel { display: none; }
  .rf-hero__bild--haupt img { object-position: 56% 54%; }
  .rf-hero__scrim {
    background: linear-gradient(to bottom, rgba(6,9,13,0.92) 0%, rgba(6,9,13,0.84) 40%, rgba(6,9,13,0.68) 70%, rgba(6,9,13,0.90) 100%);
  }
  .rf-hero__inner { padding: calc(var(--header-h) + 36px) 24px 52px; }
  .rf-hero__title { max-width: none; }
}

@media (max-width: 600px) {
  .rf-hero__inner { padding: calc(var(--header-h) + 28px) 24px 44px; }
  .rf-hero__title { font-size: 2.3rem; }
  .rf-hero__title::after { margin-top: 20px; }
  .rf-hero__actions { flex-direction: column; }
  .rf-hero__actions .btn { display: flex; justify-content: center; }
  .rf-hero__stats { gap: 12px 24px; }
}


/* === Referenzen: Intro === */
/* Kein Abstand nach unten: Intro und Fallstudie 01 sind eine Cremezone */
.rf-intro { padding-bottom: 0; }

.rf-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px 96px;
  align-items: start;
}

/* Sektionslabel, kein Projektlabel: grau haelt die blauen Fallstudien-Eyebrows
   als eigene Ebene frei. Gleiche Spezifitaet wie .section--light — gewinnt nur,
   weil dieser Block ans Dateiende gehaengt ist. */
.rf-intro .section__eyebrow { color: var(--ink-muted); }

.rf-intro__title {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  max-width: 21ch;
  margin-bottom: 0;
  overflow-wrap: break-word;
}

.rf-intro__text {
  color: var(--ink-muted);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 30em;
  hyphens: auto;
}

@media (max-width: 900px) {
  .rf-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rf-intro__title { max-width: none; }
}

@media (max-width: 600px) {
  .rf-intro { padding-top: 64px; }
}



/* === Referenzen Fallgrammatik === */
/* Ein Bauplan, sechsmal benutzt: --m1..--m7 setzen nur Raster und Bandflaeche,
   --c1..--c7 nur die Mosaikflaechen.
   Bandfolge (Reihenfolge der Faelle): m1 creme -> m4 cremedunkel -> m6 creme ->
   m7 creme+Haarlinie -> m3 creme+Haarlinie -> m2 cremedunkel -> CTA. Jedes Paar
   wechselt entweder die Flaeche oder traegt eine Linie; wer hier umsortiert,
   prueft die ganze Folge neu. */
.rf-case {
  --rf-overlap: clamp(56px, 13.5vw, 195px);
  background: var(--cream);
  color: var(--charcoal);
  scroll-margin-top: var(--header-h);
}

.rf-case--m1 { padding: 110px 0 0; }

/* Intro und erster Fall stehen beide auf Creme — an den Fall gebunden, nicht an
   sein Layout, damit die Kante beim Umsortieren beim Bandanfang bleibt */
.rf-intro + .rf-case { border-top: 1px solid var(--line-light); }

/* m2 und m4 fangen je einen Mosaikueberhang auf: Polster in Ueberhanghoehe und
   bewusst keine border-top, sonst laeuft die Linie hinter dem Bild durch. */
.rf-case--m2 {
  background: var(--cream-dark);
  padding: calc(var(--rf-overlap) + 52px) 0 0;
}

.rf-case--m2 > .container { padding-bottom: 92px; }

/* Doppelhaarlinie mit Cremestreifen dazwischen schliesst die dunklere Zone */
.rf-case--m2::after {
  content: '';
  display: block;
  height: 42px;
  background: var(--cream);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

/* Die eigene Abschlusskante genuegt — die generische CTA-Linie waere die dritte */
.rf-case--m2 + .projekt-cta { border-top: 0; }

.rf-case--m3 {
  padding: 96px 0 0;
  border-top: 1px solid var(--line-light);
}

.rf-case--m4 {
  background: var(--cream-dark);
  padding: calc(var(--rf-overlap) + 52px) 0 96px;
}

.rf-case--m6 { padding: 96px 0 100px; }

.rf-case--m7 {
  padding: 88px 0 100px;
  border-top: 1px solid var(--line-light);
}

/* Kopfmarke */
.rf-case__head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.rf-case__nr {
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  line-height: 1;
  color: var(--accent);
}

.rf-case__kat {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Textspalte */
.rf-case__text { grid-area: text; min-width: 0; }

.rf-case__title {
  /* Groesser als der Intro-Titel (2.75rem) — die Fallstudien tragen die Hierarchie */
  font-size: clamp(1.7rem, 3.4vw, 3.05rem);
  color: var(--charcoal);
  hyphens: manual;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.rf-case__title::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 22px;
  background: var(--accent);
}

.rf-case .section__eyebrow { color: var(--accent); }

.rf-case__body {
  margin-top: 24px;
  color: var(--ink-muted);
  font-size: 1.02rem;
  line-height: 1.75;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Aufgabe/Ausfuehrung — Label ist Fliesstext, kein Heading (keine Ebenensprünge) */
.rf-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  margin-top: 38px;
}

.rf-duo__col {
  min-width: 0;
  border-top: 1px solid var(--line-light);
  padding-top: 18px;
}

.rf-duo__col p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-muted);
  hyphens: manual;
  overflow-wrap: break-word;
}

.rf-duo__col .rf-duo__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 8px;
}

/* Eckdaten */
.rf-meta {
  display: grid;
  margin-top: 36px;
  border: 1px solid var(--line-light);
  background: var(--white);
}

.rf-meta--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rf-meta--row .rf-meta__row + .rf-meta__row { border-left: 1px solid var(--line-light); }

.rf-meta--stack {
  grid-template-columns: minmax(0, 1fr);
  background: #F8F7F4;
}

.rf-meta--stack .rf-meta__row + .rf-meta__row { border-top: 1px solid var(--line-light); }

.rf-meta__row { min-width: 0; padding: 14px 18px; }

.rf-meta__key {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Die Projektzeile traegt deutsche Komposita in einer schmalen Spalte — ohne
   Trennung bricht break-word sie mitten im Wort ("Natursteingebäud|e") */
.rf-meta__val {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--charcoal);
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Leitbild */
.rf-case__lead {
  grid-area: media;
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.rf-case__lead picture,
.rf-mosaik__tile picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.rf-case__lead img,
.rf-mosaik__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, scale 0.5s ease;
}

.rf-case__lead:hover img,
.rf-mosaik__tile:hover img { transform: scale(1.04); }

/* Ueberlappende Karte (Fall 03) */
.rf-case__card {
  min-width: 0;
  background: var(--white);
  border-left: 3px solid var(--accent);
  box-shadow: 0 18px 46px rgba(23, 29, 35, 0.16);
  padding: clamp(26px, 2.6vw, 40px);
}

/* Mosaik */
.rf-mosaik {
  grid-area: mosaik;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.rf-mosaik__tile {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.rf-mosaik__tile--a { grid-area: a; }
.rf-mosaik__tile--b { grid-area: b; }
.rf-mosaik__tile--c { grid-area: c; }
.rf-mosaik__tile--d { grid-area: d; }
.rf-mosaik__tile--e { grid-area: e; }


/* === Referenzen Fall 01 === */
.rf-case__grid--m1 {
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr);
  grid-template-areas:
    "head   head"
    "text   media"
    "mosaik mosaik";
  gap: 40px 52px;
  align-items: start;
}

.rf-case__grid--m1 .rf-case__lead { aspect-ratio: 4 / 3; }

/* Blaue Marke links neben dem Leitbild */
.rf-case__grid--m1 .rf-case__lead::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 9%;
  bottom: 7%;
  width: 3px;
  background: var(--accent);
}

/* Die Mosaikreihe greift in die dunklere Zone von Fall 02 */
.rf-case__grid--m1 .rf-mosaik {
  position: relative;
  z-index: 2;
  margin-bottom: calc(var(--rf-overlap) * -1);
}

.rf-mosaik--c1 {
  grid-template-columns: minmax(0, 1.63fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "a b c d";
  aspect-ratio: 1120 / 457;
}

/* Schwerpunkt auf Lauf und Podest; der Lieferwagen am linken Bildrand bleibt im
   Ausschnitt, weil die Kachel breiter als die Quelle ist und nur in der Hoehe schneidet */
.rf-mosaik--c1 .rf-mosaik__tile--a img { object-position: 66% 52%; }
.rf-mosaik--c1 .rf-mosaik__tile--d img { object-position: 50% 40%; }


/* === Referenzen Fall 02 === */
.rf-case__grid--m2 {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  grid-template-areas:
    ".      head"
    "mosaik text";
  gap: 30px 48px;
  align-items: start;
}

.rf-mosaik--c2 {
  grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a b"
    "a c";
  aspect-ratio: 678 / 517;
}

.rf-mosaik--c2 .rf-mosaik__tile--a img { object-position: 50% 45%; }
.rf-mosaik--c2 .rf-mosaik__tile--b img { object-position: 50% 50%; }
.rf-mosaik--c2 .rf-mosaik__tile--c img { object-position: 50% 45%; }


/* === Referenzen Fall 03 === */
.rf-case__grid--m3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "media"
    "mosaik";
  gap: 34px;
}

/* aspect-ratio setzt die Zeilenhoehe, min-height holt das Bild wieder auf die
   Zeilenunterkante, sobald die Karte die Zeile ueberragt — sonst reisst der
   Kantenbund weiter unten auf */
.rf-case__grid--m3 .rf-case__lead {
  aspect-ratio: 1.47;
  min-height: 100%;
  margin-left: 17%;
}

/* Karte und Bild teilen sich dieselbe Flaeche; das Leitbild ist positioniert,
   die Karte braucht deshalb eigenen Stapelwert statt blosser DOM-Reihenfolge */
/* Kantenbund wie im Master: Kartenunterkante == Mosaikoberkante == Bildunterkante + 10px */
.rf-case__grid--m3 .rf-case__card {
  grid-area: media;
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: start;
  width: min(608px, 46%);
  margin-bottom: -10px;
  padding: clamp(28px, 3.1vw, 48px);
}

.rf-case__grid--m3 .rf-case__title { font-size: clamp(1.7rem, 3.1vw, 2.75rem); }
.rf-case__grid--m3 .rf-case__body { font-size: 1.09rem; line-height: 1.77; }

/* Die Mosaikreihe greift ueber die Haarlinie zu Fall 04 */
.rf-case__grid--m3 .rf-mosaik {
  position: relative;
  z-index: 2;
  margin-top: -24px;
  margin-bottom: calc(var(--rf-overlap) * -1);
}

.rf-mosaik--c3 {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "a b";
  aspect-ratio: 1120 / 558;
}

.rf-mosaik--c3 .rf-mosaik__tile--a img { object-position: 50% 45%; }
.rf-mosaik--c3 .rf-mosaik__tile--b img { object-position: 55% 50%; }


/* === Referenzen Fall 04 === */
.rf-case__grid--m4 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "head   head   head"
    "text   text   ."
    "mosaik mosaik mosaik"
    "hair   hair   hair"
    "meta   duo    duo";
  gap: 34px 44px;
  align-items: start;
}

/* Durchgehende Haarlinie ueber dem Datenstreifen */
.rf-case__grid--m4::before {
  content: '';
  grid-area: hair;
  border-top: 1px solid var(--line-light);
}

/* Zeilenmass wie in den uebrigen Faellen — die volle Rasterbreite liest sich als Fremdkoerper */
.rf-case__grid--m4 .rf-case__body { max-width: 62ch; }

.rf-case__grid--m4 > .rf-meta {
  grid-area: meta;
  align-self: start;
  margin-top: 0;
}

.rf-case__grid--m4 > .rf-duo {
  grid-area: duo;
  margin-top: 0;
  border-left: 1px solid var(--line-light);
  padding-left: 22px;
}

.rf-case__grid--m4 .rf-duo__col {
  border-top: 0;
  padding-top: 0;
}

.rf-case__grid--m4 .rf-duo__col + .rf-duo__col {
  border-left: 1px solid var(--line-light);
  padding-left: 22px;
}

.rf-mosaik--c4 {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a b c"
    "a d e";
  aspect-ratio: 1120 / 470;
}

.rf-mosaik--c4 .rf-mosaik__tile--a img { object-position: 50% 45%; }
.rf-mosaik--c4 .rf-mosaik__tile--b img,
.rf-mosaik--c4 .rf-mosaik__tile--c img,
.rf-mosaik--c4 .rf-mosaik__tile--d img,
.rf-mosaik--c4 .rf-mosaik__tile--e img { object-position: 50% 40%; }


/* === Referenzen Fall 03 === */
/* Bildbanderole oben, Filmstreifen unten, der Text sitzt eingerueckt dazwischen */
.rf-case__grid--m6 {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  grid-template-areas:
    "head   head"
    "media  media"
    ".      text"
    "mosaik mosaik";
  gap: 36px 48px;
  align-items: start;
}

.rf-case__grid--m6 .rf-case__lead { aspect-ratio: 21 / 9; }

/* Der Streifen liegt auf der Glaswand, nicht auf dem leeren Bodenanteil darunter */
.rf-case__grid--m6 .rf-case__lead img { object-position: 50% 40%; }

.rf-mosaik--c6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "a b c";
  aspect-ratio: 1120 / 420;
}


/* === Referenzen Fall 04 === */
/* Hochformatiges Leitbild traegt die volle Panelhoehe, rechts Text ueber Viererfeld */
.rf-case__grid--m7 {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  grid-template-areas:
    "media head"
    "media text"
    "media mosaik";
  gap: 26px 44px;
  align-items: start;
}

.rf-case__grid--m7 .rf-case__lead {
  grid-row: 1 / -1;
  align-self: stretch;
  min-height: 100%;
}

.rf-mosaik--c7 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a b"
    "c d";
  aspect-ratio: 1 / 1;
}

/* Eingesetztes dunkles Panel auf Creme */
.rf-case--dark .rf-case__grid--m7 {
  position: relative;
  background: var(--steel);
  padding: clamp(38px, 4.4vw, 64px) clamp(24px, 3.6vw, 52px);
}

/* Ein Blau fuer alle Zierkanten (Kartenkante, Panelbalken, CTA-Oberkante) */
.rf-case--dark .rf-case__grid--m7::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 120px;
  background: var(--accent);
}

.rf-case--dark .rf-case__nr { color: var(--accent-mid); }
.rf-case--dark .rf-case__kat { color: var(--cream-muted); }
.rf-case--dark .rf-case__title { color: var(--white); }
.rf-case--dark .rf-case__title::after { background: var(--accent-mid); }
.rf-case--dark .section__eyebrow { color: var(--accent-mid); }
.rf-case--dark .rf-case__body { color: var(--cream-dark); }
.rf-case--dark .rf-duo__col { border-top-color: rgba(255, 255, 255, 0.16); }
.rf-case--dark .rf-duo__col p { color: var(--cream-dark); }
.rf-case--dark .rf-duo__col .rf-duo__label { color: var(--cream); }

.rf-case--dark .rf-meta {
  background: #20262D;
  border-color: rgba(255, 255, 255, 0.14);
}

.rf-case--dark .rf-meta--row .rf-meta__row + .rf-meta__row { border-left-color: rgba(255, 255, 255, 0.14); }
/* --accent-mid misst 4,09:1 auf #20262D — die Kartenflaeche ist heller als --steel */
.rf-case--dark .rf-meta__key { color: var(--accent-bright); }
.rf-case--dark .rf-meta__val { color: var(--cream); }


/* === Referenzen Faelle: Media Queries === */
@media (max-width: 1000px) {
  .rf-case--m1 { padding: 44px 0 72px; }
  .rf-case--m2 { padding: 72px 0 0; }
  .rf-case--m2 > .container { padding-bottom: 72px; }
  .rf-case--m3 { padding: 76px 0 72px; }
  .rf-case--m4 { padding: 72px 0 76px; }
  .rf-case--m6 { padding: 72px 0 76px; }
  .rf-case--m7 { padding: 72px 0 80px; }

  .rf-case__grid--m1 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "text"
      "media"
      "mosaik";
    gap: 34px;
  }

  .rf-case__grid--m1 .rf-mosaik { margin-bottom: 0; }

  .rf-case__grid--m2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "mosaik"
      "text";
    gap: 34px;
  }

  .rf-case__grid--m3 {
    grid-template-areas:
      "head"
      "media"
      "card"
      "mosaik";
    gap: 0 0;
  }

  .rf-case__grid--m3 .rf-case__lead { margin-left: 0; margin-bottom: 34px; }

  .rf-case__grid--m3 .rf-case__card {
    grid-area: card;
    justify-self: stretch;
    width: 100%;
    margin-top: 0;
    margin-bottom: 34px;
  }

  .rf-case__grid--m3 .rf-case__head { margin-bottom: 34px; }
  .rf-case__grid--m3 .rf-mosaik { margin-bottom: 0; }

  .rf-case__grid--m4 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "text"
      "mosaik"
      "hair"
      "meta"
      "duo";
    gap: 30px;
  }

  .rf-case__grid--m4 > .rf-duo {
    border-left: 0;
    padding-left: 0;
  }

  .rf-case__grid--m4 .rf-duo__col {
    border-top: 1px solid var(--line-light);
    padding-top: 18px;
  }

  .rf-case__grid--m4 .rf-duo__col + .rf-duo__col {
    border-left: 0;
    padding-left: 0;
  }

  .rf-case__grid--m6 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "media"
      "text"
      "mosaik";
    gap: 32px;
  }

  .rf-case__grid--m7 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "media"
      "text"
      "mosaik";
    gap: 32px;
  }

  /* Einspaltig endet die Zeilenspanne des Leitbilds — sonst zieht sie das
     Hochformat ueber die ganze Restspalte */
  .rf-case__grid--m7 .rf-case__lead {
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  /* 21:9 waeren auf Telefonbreite 140px hoher Streifen */
  .rf-case__grid--m6 .rf-case__lead { aspect-ratio: 3 / 2; }
}

@media (max-width: 700px) {
  .rf-case__grid--m1 .rf-case__lead::before { display: none; }

  /* Erst in schmalen Spalten trennt die Trennung deutsche Komposita sauber */
  .rf-case__title,
  .rf-case__body,
  .rf-duo__col p { hyphens: auto; }

  .rf-duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .rf-meta--row { grid-template-columns: minmax(0, 1fr); }

  .rf-meta--row .rf-meta__row + .rf-meta__row {
    border-left: 0;
    border-top: 1px solid var(--line-light);
  }

  .rf-case--dark .rf-meta--row .rf-meta__row + .rf-meta__row {
    border-left-color: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* Mosaike fallen auf zwei Spalten; benannte Flaechen wuerden sonst leere
     implizite Spuren erzeugen */
  .rf-mosaik--c1,
  .rf-mosaik--c2,
  .rf-mosaik--c3,
  .rf-mosaik--c4,
  .rf-mosaik--c6,
  .rf-mosaik--c7 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas: none;
    aspect-ratio: auto;
  }

  .rf-mosaik__tile--a,
  .rf-mosaik__tile--b,
  .rf-mosaik__tile--c,
  .rf-mosaik__tile--d,
  .rf-mosaik__tile--e { grid-area: auto; }

  /* Zwei Kacheln fuellen zwei Spalten nicht auf — eine bliebe als halbe Waise stehen */
  .rf-mosaik--c3 { grid-template-columns: minmax(0, 1fr); }

  .rf-mosaik--c1 .rf-mosaik__tile { aspect-ratio: 3 / 4; }

  .rf-mosaik--c2 .rf-mosaik__tile,
  .rf-mosaik--c4 .rf-mosaik__tile { aspect-ratio: 4 / 3; }

  .rf-mosaik--c3 .rf-mosaik__tile--a { aspect-ratio: 3 / 2; }

  .rf-mosaik--c3 .rf-mosaik__tile--b { aspect-ratio: 4 / 5; }

  .rf-mosaik--c2 .rf-mosaik__tile--a { grid-column: span 2; aspect-ratio: 3 / 2; }

  .rf-mosaik--c4 .rf-mosaik__tile--a { grid-column: span 2; aspect-ratio: 4 / 3; }

  /* Drei Kacheln auf zwei Spalten: die erste nimmt die volle Breite, damit unten
     keine halbe Waise steht */
  .rf-mosaik--c6 .rf-mosaik__tile { aspect-ratio: 4 / 3; }
  .rf-mosaik--c6 .rf-mosaik__tile--a { grid-column: span 2; aspect-ratio: 3 / 2; }

  .rf-mosaik--c7 .rf-mosaik__tile { aspect-ratio: 3 / 4; }
}

@media (max-width: 560px) {
  .rf-case--m1 { padding: 32px 0 56px; }
  .rf-case--m2 { padding: 56px 0 0; }
  .rf-case--m2 > .container { padding-bottom: 56px; }
  .rf-case--m3 { padding: 56px 0 56px; }
  .rf-case--m4 { padding: 56px 0 60px; }
  .rf-case--m6 { padding: 56px 0 60px; }
  .rf-case--m7 { padding: 56px 0 62px; }

  .rf-case__grid--m1,
  .rf-case__grid--m2 { gap: 26px; }
  .rf-case__grid--m4 { gap: 24px; }
  .rf-case__grid--m6,
  .rf-case__grid--m7 { gap: 26px; }

  .rf-case__grid--m3 .rf-case__lead,
  .rf-case__grid--m3 .rf-case__card,
  .rf-case__grid--m3 .rf-case__head { margin-bottom: 26px; }

  .rf-case__card { padding: 22px 20px; }
  .rf-mosaik { gap: 8px; }
  .rf-meta__row { padding: 12px 15px; }
}


/* === Referenzen Lightbox-Mechanik === */
/* overflow sperrt hier nichts, weil html eigenen Overflow hat (_docs/GOTCHAS.md) */
body.modal-open { position: fixed; width: 100%; overflow-y: scroll; }

.rf-trigger:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 2px;
}


/* === Lasermessungen: Hero / Intro / Ablauf / Nutzen / Einsatzbereiche / CTA === */
/* === Lasermessungen: Bildslots === */
.lm-pic { display: block; width: 100%; height: 100%; }

.lm-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--op, 50% 50%);
}

.lm-collage img { cursor: zoom-in; }


/* === Lasermessungen: Hero === */
.lm-hero {
  position: relative;
  background: var(--steel);
  overflow: hidden;
}

.lm-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  padding-top: calc(var(--header-h) + 72px);
  padding-bottom: 104px;
}

/* Ueber dem Foto traegt --accent-bright; das #3186D2 des Start-Heros faellt auf
   dem dunklen Band unter 4,5:1 (README, Farbrollen). */
.lm-hero .hero__eyebrow { color: var(--accent-bright); }

.lm-hero__titel {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  color: var(--white);
  margin-bottom: 22px;
}

.lm-hero__titel::after {
  content: '';
  display: block;
  width: 84px;
  height: 5px;
  background: var(--accent-light);
  margin-top: 22px;
}

.lm-hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--cream-dark);
  max-width: 30em;
  margin-bottom: 34px;
}

.lm-hero__aktionen { display: flex; flex-wrap: wrap; gap: 14px; }

.lm-hero__medien { position: relative; }

/* Hochformatquelle (1035x1600) in einem liegenden Slot: die Hoehe steht fest,
   der Ausschnitt haelt den Scanner links unten im Bild (gotchas/css-visual.md) */
.lm-hero__medien .lm-pic {
  height: clamp(340px, 54svh, 600px);
  overflow: hidden;
}

/* Die Karte greift ueber die linke untere Bildkante ins Textfeld, wie im Entwurf */
.lm-hero__karte {
  position: absolute;
  left: clamp(-76px, -5vw, -28px);
  bottom: -30px;
  max-width: 330px;
  background: var(--white);
  color: var(--charcoal);
  border-top: 4px solid var(--accent-light);
  padding: 18px 22px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.lm-hero__karte-titel {
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1.2;
  margin-bottom: 6px;
}

.lm-hero__karte-text {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-muted);
}


/* === Lasermessungen: Bandtitel === */
.lm-titel {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  color: var(--charcoal);
  margin-bottom: 24px;
}

.lm-titel--hell { color: var(--white); }

.lm-intro .section__eyebrow,
.lm-nutzen .section__eyebrow,
.lm-einsatz .section__eyebrow { color: var(--accent); }


/* === Lasermessungen: Intro === */
.lm-intro {
  background: var(--cream);
  color: var(--charcoal);
  padding: clamp(64px, 7vw, 104px) 0;
}

.lm-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.lm-intro__text .lm-titel { max-width: 26ch; }

.lm-intro__text .lm-titel::after {
  content: '';
  display: block;
  width: 76px;
  height: 4px;
  background: var(--accent);
  margin-top: 24px;
}

.lm-intro__text p { margin-bottom: 18px; line-height: 1.8; }

.lm-check {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.lm-check li {
  position: relative;
  padding-left: 26px;
  font-size: 0.98rem;
}

.lm-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 14px;
  height: 2px;
  background: var(--accent);
}

.lm-intro__collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lm-intro__klein { aspect-ratio: 4 / 3; overflow: hidden; }

/* Versatz der zweiten Kachel wie im Entwurf; das breite Motiv schliesst darunter ab */
.lm-intro__klein:nth-child(2) { margin-top: 30px; }

.lm-intro__breit {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}


/* === Lasermessungen: Ablauf === */
.lm-ablauf {
  background: var(--cream-dark);
  color: var(--charcoal);
  padding: clamp(56px, 6vw, 92px) 0;
  scroll-margin-top: var(--header-h);
}

.lm-ablauf__karte {
  position: relative;
  background: var(--steel);
  color: var(--cream);
  padding: clamp(28px, 3.4vw, 56px);
}

.lm-ablauf__karte::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 104px;
  background: var(--accent-light);
}

.lm-ablauf__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 20px 56px;
  align-items: start;
  margin-bottom: 40px;
}

.lm-ablauf__kopf .lm-titel { margin-bottom: 0; max-width: 25ch; }

.lm-ablauf__intro {
  color: var(--cream-dark);
  font-size: 0.98rem;
  line-height: 1.8;
}

.lm-ablauf__medien {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.lm-figur { position: relative; }

.lm-figur .lm-pic {
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

.lm-figur__label {
  position: absolute;
  left: 0;
  bottom: 20px;
  max-width: 86%;
  padding: 12px 20px;
  border-left: 4px solid var(--accent-light);
  background: rgba(4, 7, 11, 0.88);
}

.lm-figur__nr {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}

.lm-figur__text {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cream-dark);
}

/* Durchgehende Linie ueber allen Spalten; die Item-Linien decken sie deckungs-
   gleich ab und tragen die Trennung, sobald das Grid einspaltig wird */
.lm-schritte {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 44px;
  margin-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.lm-schritt { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 20px; }

.lm-schritt__nr {
  display: block;
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--accent-bright);
  margin-bottom: 12px;
}

.lm-schritt__titel { font-size: 1.05rem; color: var(--white); margin-bottom: 8px; }

.lm-schritt p { font-size: 0.94rem; line-height: 1.7; color: var(--cream-muted); }


/* === Lasermessungen: Nutzen === */
.lm-nutzen {
  background: var(--cream);
  color: var(--charcoal);
  padding: clamp(64px, 7vw, 104px) 0;
}

.lm-nutzen .lm-titel { max-width: 18ch; margin-bottom: 44px; }

.lm-zeilen { list-style: none; }

.lm-zeile {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 16px 40px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--line-light);
}

.lm-zeile:last-child { border-bottom: 1px solid var(--line-light); }

.lm-zeile__nr {
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent);
}

.lm-zeile__titel { font-size: 1.15rem; }

.lm-zeile__text { font-size: 0.98rem; line-height: 1.7; color: var(--ink-muted); }


/* === Lasermessungen: Einsatzbereiche === */
.lm-einsatz {
  background: var(--cream-dark);
  color: var(--charcoal);
  padding: clamp(64px, 7vw, 104px) 0;
}

.lm-einsatz .lm-titel { margin-bottom: 40px; }

.lm-einsatz__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.lm-karte {
  background: var(--white);
  border: 1px solid var(--line-light);
  padding: 28px 24px 30px;
}

.lm-karte__nr {
  display: block;
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 14px;
}

.lm-karte__titel { font-size: 1.1rem; margin-bottom: 10px; }

.lm-karte p { font-size: 0.93rem; line-height: 1.7; color: var(--ink-muted); }


@media (max-width: 1100px) {
  .lm-einsatz__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ab hier tragen die zwei Hero-Buttons nicht mehr nebeneinander; umgebrochen
   haetten sie ungleiche Breiten, deshalb ab der Umbruchgrenze volle Breite */
@media (max-width: 1000px) {
  .lm-hero__aktionen { flex-direction: column; align-items: stretch; }
  .lm-hero__aktionen .btn { display: flex; justify-content: center; }
}

@media (max-width: 900px) {
  .lm-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-top: calc(var(--header-h) + 44px);
    padding-bottom: 72px;
  }
  .lm-hero__karte { position: static; max-width: none; margin-top: 16px; }
  .lm-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lm-ablauf__kopf { grid-template-columns: minmax(0, 1fr); }
  .lm-ablauf__kopf .lm-titel { max-width: none; }
  .lm-ablauf__medien { grid-template-columns: minmax(0, 1fr); }
  .lm-schritte { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 32px; }
  .lm-nutzen .lm-titel { max-width: none; }
  .lm-zeile { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 24px; }
  .lm-zeile__text { grid-column: 2; }
}

@media (max-width: 600px) {
  .lm-intro__klein:nth-child(2) { margin-top: 0; }
  .lm-einsatz__grid { grid-template-columns: minmax(0, 1fr); }
}


/* === Lofttueren === */
.lt-eyebrow {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* Auf den dunklen Baendern liegt --accent unter 4,5:1 */
.lt-eyebrow--dunkel { color: var(--accent-mid); }

.lt-titel {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  color: var(--charcoal);
  margin-bottom: 18px;
  text-wrap: balance;
}

.lt-titel--hell { color: var(--white); }
.lt-titel--klein { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }

.lt-strich::after {
  content: '';
  display: block;
  width: 52px;
  height: 5px;
  background: var(--accent-light);
  margin-top: 22px;
}

.lt-galerie img { cursor: zoom-in; }

/* Sprungziel liegt sonst unter dem fixierten Kopf */
#praxis { scroll-margin-top: var(--header-h); }


/* Lofttueren: Hero */
.lt-hero {
  background: var(--steel);
  padding: calc(var(--header-h) + 54px) 0 54px;
}

.lt-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.lt-hero__titel {
  font-size: clamp(2.1rem, 5vw, 4.5rem);
  color: var(--white);
  margin-bottom: 0;
  text-wrap: balance;
}

.lt-hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--cream-dark);
  max-width: 32em;
  margin: 26px 0 34px;
}

.lt-hero__aktionen { display: flex; flex-wrap: wrap; gap: 14px; }

/* Die blaue Haarlinie sitzt an der Kante der Collage, nicht am Rasterrand */
.lt-hero__collage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows: 1.05fr 1fr;
  gap: 4px;
  aspect-ratio: 564 / 512;
  border-left: 5px solid var(--accent-light);
  padding-left: 5px;
}

.lt-hero__zelle { overflow: hidden; min-height: 0; }

.lt-hero__karte {
  position: absolute;
  left: -12%;
  bottom: -2%;
  width: 37%;
  aspect-ratio: 210 / 190;
  background: var(--white);
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.lt-hero__caption {
  margin-top: 14px;
  text-align: right;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-muted);
}


/* Lofttueren: Jansen Art'15 */
.lt-jansen { background: var(--cream); padding: 96px 0; }

.lt-jansen__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.lt-jansen__absatz { color: var(--ink-muted); margin-bottom: 18px; max-width: 34em; }

.lt-punkte { list-style: none; margin-top: 26px; }

.lt-punkte li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--ink-muted);
  line-height: 1.6;
}

.lt-punkte li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 11px;
  height: 2px;
  background: var(--accent);
}

.lt-jansen__collage {
  display: grid;
  grid-template-columns: minmax(0, 1.33fr) minmax(0, 1fr);
  gap: 12px;
  aspect-ratio: 590 / 506;
}

.lt-jansen__spalte { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 0; }
.lt-jansen__gross, .lt-jansen__klein { overflow: hidden; min-height: 0; }


/* Lofttueren: Fakten */
.lt-fakten {
  background: var(--cream);
  border-top: 1px solid var(--line-light);
  padding: 44px 0 56px;
}

.lt-fakten__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}

.lt-fakten__inner .lt-fakt + .lt-fakt {
  border-left: 1px solid var(--line-light);
  padding-left: 36px;
}

/* Not a heading - the band carries none, so these repeat the global h1..h4
   declarations; the two-class selector is needed to outweigh .lt-fakt p. */
.lt-fakt .lt-fakt__titel {
  font-family: 'Antonio', 'Arial Narrow', sans-serif;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 1.3rem;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.lt-fakt p { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.55; }


/* Lofttueren: Warum Herrmann */
.lt-warum {
  background: var(--cream);
  border-top: 1px solid var(--line-light);
  padding: 52px 0;
}

.lt-warum__panel {
  position: relative;
  background: var(--steel);
  padding: 50px 60px;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: 60px;
}

.lt-warum__panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 104px;
  background: var(--accent-light);
}

.lt-warum__stuetze { color: var(--cream-muted); font-size: 0.98rem; }

.lt-warum__beleg {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  color: var(--cream-muted);
}

.lt-warum__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 50px;
  row-gap: 0;
  align-content: start;
}

.lt-vorteil {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.lt-vorteil:nth-child(n+3) {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 26px;
  padding-top: 26px;
}

.lt-vorteil__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--accent-light);
  border-radius: 2px;
}

.lt-vorteil__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--accent-bright);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lt-vorteil h3 { font-size: 1.08rem; color: var(--white); margin-bottom: 6px; }
.lt-vorteil p { color: var(--cream-muted); font-size: 0.9rem; line-height: 1.55; }


/* Lofttueren: Aus der Praxis */
.lt-praxis { background: var(--cream-dark); padding: 88px 0 92px; }

.lt-praxis__kopf {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  margin-bottom: 54px;
}

.lt-praxis__kopf .lt-titel { margin-bottom: 0; }
.lt-praxis__intro { color: var(--ink-muted); }

/* Die Zeilenhoehe steht am Raster, nicht an den Bildern: eine aspect-ratio am
   gestreckten Rasterkind wuerde sonst mit der Hoehe der Nachbarspalte ringen. */
.lt-praxis__medien {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  aspect-ratio: 1120 / 395;
}

.lt-praxis__gross { position: relative; overflow: hidden; min-height: 0; }

/* The lightbox listener sits on the sibling <img>, so the caption must not
   swallow clicks in the lower left of the photo. */
.lt-praxis__bildzeile {
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 20px;
  max-width: 86%;
  padding: 10px 18px;
  border-left: 4px solid var(--accent-light);
  background: rgba(4, 7, 11, 0.88);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--cream);
}

.lt-praxis__spalte {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 19px;
  min-height: 0;
}

.lt-praxis__karte {
  background: var(--white);
  border-top: 5px solid var(--accent-light);
  padding: 26px 28px 28px;
}

.lt-praxis__karte-titel {
  font-size: 1.35rem;
  color: var(--charcoal);
  margin-bottom: 12px;
}

.lt-praxis__karte p { color: var(--ink-muted); font-size: 0.92rem; line-height: 1.55; }
.lt-praxis__hoch { overflow: hidden; min-height: 0; }
.lt-praxis__aktion { margin-top: 34px; }


/* Lofttueren: Downloads */
.lt-downloads {
  background: var(--cream-dark);
  border-top: 1px solid var(--line-light);
  padding: 0 0 70px;
}

.lt-downloads__inset {
  background: var(--white);
  padding: 30px 40px 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px;
  align-items: center;
}

.lt-downloads__inset .lt-titel { margin-bottom: 0; }

.lt-downloads__kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.lt-download {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  background: var(--cream);
  border-left: 4px solid var(--accent);
  padding: 20px 22px;
  color: var(--charcoal);
}

.lt-download:hover { background: var(--cream-dark); color: var(--charcoal); }

.lt-download__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--white);
  border: 1px solid var(--line-light);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.lt-download__text { display: block; min-width: 0; }

.lt-download__text strong {
  display: block;
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.lt-download__text span {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.lt-download__pfeil {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
  transform: rotate(90deg);
}

.lt-download:hover .lt-download__pfeil { transform: rotate(90deg) translateX(4px); }


/* Lofttueren: Media Queries */
@media (max-width: 1100px) {
  .lt-warum__panel { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 40px 34px; }
}

@media (max-width: 1000px) {
  .lt-hero__inner,
  .lt-jansen__inner,
  .lt-praxis__kopf,
  .lt-praxis__medien,
  .lt-downloads__inset { grid-template-columns: minmax(0, 1fr); }
  .lt-hero__inner { gap: 64px; }
  .lt-jansen__inner { gap: 40px; }
  .lt-praxis__kopf { gap: 24px; margin-bottom: 36px; }
  .lt-praxis__medien { gap: 20px; aspect-ratio: auto; }
  .lt-praxis__gross { aspect-ratio: 3 / 2; }
  .lt-praxis__hoch { aspect-ratio: 4 / 3; }
  .lt-downloads__inset { gap: 26px; }
  .lt-hero__karte { left: auto; right: 5%; bottom: 5%; width: 30%; }
}

@media (max-width: 700px) {
  .lt-fakten__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lt-fakten__inner .lt-fakt + .lt-fakt {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-light);
    margin-top: 20px;
    padding-top: 20px;
  }
  .lt-warum__raster { grid-template-columns: minmax(0, 1fr); }
  .lt-vorteil:nth-child(n+2) {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    margin-top: 24px;
    padding-top: 24px;
  }
  .lt-downloads__kacheln { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 600px) {
  .lt-hero { padding: calc(var(--header-h) + 40px) 0 40px; }
  .lt-jansen { padding: 64px 0; }
  .lt-praxis { padding: 64px 0; }
  .lt-downloads { padding-bottom: 56px; }
  .lt-hero__aktionen { flex-direction: column; align-items: stretch; }
  .lt-hero__aktionen .btn { display: flex; justify-content: center; }
  .lt-hero__karte { right: 4%; bottom: 4%; width: 36%; padding: 4px; }
  .lt-hero__caption { text-align: left; }
  .lt-downloads__inset { padding: 26px 20px 28px; }
  .lt-warum__panel { padding: 32px 22px; }
  .lt-warum__panel::before { height: 72px; }
}