@import url("../fonts/fonts.css");

/* =========================================================
   FPM Fördertechnik — Designsystem
   Erft Digital · Vorschau 2026
   ========================================================= */

:root {
  /* Farben */
  --ink:        #0D1013;
  --bg:         #14171C;
  --surface:    #1B2026;
  --surface-2:  #232A32;
  --surface-3:  #2C343E;
  --line:       rgba(255, 255, 255, .10);
  --line-soft:  rgba(255, 255, 255, .06);
  --text:       #E9ECF0;
  --muted:      #9AA4B0;
  --muted-2:    #8B94A0;   /* trägt auch auf der hellsten Kartenfläche #232A32 */

  /* Kupfer in zwei Stufen: satt für Flächen mit weißer Schrift,
     hell für Text und feine Grafik auf dunklem Grund. Beide erfüllen AA. */
  --kupfer:      #99652F;
  --kupfer-600:  #85562A;
  --kupfer-700:  #6E4622;
  --kupfer-text: #CE8149;   /* trägt auch auf der hellsten Kartenfläche #232A32 */
  --kupfer-tint: rgba(206, 129, 73, .13);
  --kupfer-line: rgba(206, 129, 73, .32);

  --paper:      #F4F6F8;
  --paper-2:    #E8ECF0;
  --paper-ink:  #14171C;
  --paper-muted:#5A6572;
  --paper-line: rgba(13, 16, 19, .12);

  --ok:   #2FBF71;
  --warn: #F2B01E;
  --crit: #E5484D;

  /* Typo */
  --display: "Barlow Condensed", "Haettenschweiler", "Arial Narrow", sans-serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Maße */
  --wrap: 1280px;
  --wrap-narrow: 880px;
  --gut: clamp(20px, 5vw, 48px);
  --sec: clamp(72px, 9vw, 132px);
  --r: 3px;
  --r-lg: 5px;

  --shadow: 0 18px 50px -12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 32px 80px -20px rgba(0, 0, 0, .7);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--kupfer-text);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--kupfer); color: #fff; }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--kupfer); color: #fff; padding: 12px 20px;
  font-weight: 700; transition: top .2s;
}
.skip:focus { top: 12px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typo ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .96;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 6.2vw, 5.1rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.12rem; letter-spacing: .02em; }
p { text-wrap: pretty; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--kupfer-text);
  margin-bottom: 20px;
}
/* Strich vor und hinter dem Text (Kundenwunsch), nur .kicker--plain bleibt ohne */
.kicker::before, .kicker::after {
  content: ""; width: 26px; height: 2px; background: var(--kupfer-text); flex: none;
}
.kicker--plain::before, .kicker--plain::after { display: none; }
@media (max-width: 560px) {
  .kicker { font-size: .71rem; letter-spacing: .13em; line-height: 1.5; gap: 8px; }
  .kicker::before, .kicker::after { width: 18px; }
}

.lead {
  font-size: clamp(1.08rem, 1.55vw, 1.3rem);
  line-height: 1.6;
  color: var(--muted);
}
.lead strong { color: var(--text); font-weight: 600; }

.muted { color: var(--muted); }
.small { font-size: .9rem; }
.mono-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(52px, 6vw, 80px); }
.sec--paper {
  background: var(--paper); color: var(--paper-ink);
  /* Auf hellem Grund trägt die helle Stufe nicht — hier eine dunklere Kupferstufe. */
  --kupfer-text: #8A5A2A;
  --kupfer-tint: rgba(153, 101, 47, .10);
  --kupfer-line: rgba(153, 101, 47, .30);
  /* Die hellen Grautöne des dunklen Auftritts tragen auf Papier nicht. */
  --muted: var(--paper-muted);
  --muted-2: var(--paper-muted);
  --line: var(--paper-line);
  --line-soft: rgba(13, 16, 19, .07);
}
.sec--paper .lead, .sec--paper .muted { color: var(--paper-muted); }
.sec--surface { background: var(--surface); }
.sec--ink { background: var(--ink); }

.grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.sec-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 68px); }
.sec-head--split {
  max-width: none; display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: end;
}
@media (max-width: 800px) { .sec-head--split { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--kupfer);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 16px 28px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: .93rem;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--r);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  overflow: hidden;
}
.btn:hover { background: var(--kupfer-600); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(153, 101, 47, .8); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text);
  border: 1px solid var(--line);
}
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); box-shadow: none; }
.sec--paper .btn--ghost { --btn-fg: var(--paper-ink); border-color: var(--paper-line); }
.sec--paper .btn--ghost:hover { --btn-bg: rgba(13,16,19,.05); }

.btn--dark { --btn-bg: #14171C; --btn-fg: #fff; }  /* bewusst fest: liegt auf dem Kupferband */
.btn--dark:hover { --btn-bg: #000; box-shadow: none; }
.btn--sm { padding: 11px 18px; font-size: .8rem; }
.btn--wide { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .87rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--kupfer-text);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--kupfer-line);
  transition: gap .22s var(--ease), border-color .22s;
}
.link-arrow:hover { gap: 15px; border-color: var(--kupfer-text); }
.link-arrow svg { width: 15px; height: 15px; }

/* =========================================================
   Header
   ========================================================= */
.topbar {
  background: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  font-size: .82rem;
  color: var(--muted);
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 42px;
}
.topbar__list { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; }
.topbar__item svg { width: 14px; height: 14px; color: var(--kupfer-text); flex: none; }
.topbar a:hover { color: var(--text); }
@media (max-width: 860px) { .topbar__list--sec { display: none; } }

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s, border-color .3s;
}
.hdr.is-stuck { background: color-mix(in srgb, var(--ink) 95%, transparent); border-color: var(--line); }
.hdr__in { display: flex; align-items: center; gap: 30px; min-height: 82px; transition: min-height .3s var(--ease); }
.hdr.is-stuck .hdr__in { min-height: 68px; }

.brand { flex: none; display: block; }
/* Vollständiges Logo (Rasterfassung logo-fpm-*.webp, Verhältnis 1,59): 64 px, damit die Unterzeile lesbar bleibt */
.brand img { height: 64px; width: auto; display: block; transition: height .3s var(--ease); }
.hdr.is-stuck .brand img { height: 48px; }
@media (max-width: 520px) { .brand img, .hdr.is-stuck .brand img { height: 44px; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* Sprachumschalter — bewusst schlicht, er soll die Navigation nicht stören. */
.sprache {
  margin-left: 18px; padding: 7px 11px; border: 1px solid var(--line);
  border-radius: var(--r); font-family: var(--sans); font-size: .74rem;
  font-weight: 700; letter-spacing: .1em; color: var(--muted);
  transition: color .2s, border-color .2s;
}
.sprache:hover, .sprache:focus-visible { color: var(--kupfer-text); border-color: var(--kupfer-text); }
@media (max-width: 1180px) { .sprache { margin-left: auto; } }
@media (max-width: 1180px) { .nav { display: none; } }
/* Das Mega-Menü gehört zur Desktop-Navigation. Unsichtbar lag es auf dem Handy weiter im Layout
   und machte das Dokument breiter als den Bildschirm. */
@media (max-width: 1180px) { .mega { display: none; } }

.nav__link {
  position: relative; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 15px;
  font-size: .86rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  border-radius: var(--r);
  transition: color .2s;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--text); }
.nav__link::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px;
  height: 2px; background: var(--kupfer-text);
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after, .nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--text); }
.nav__link .chev { width: 11px; height: 11px; transition: transform .25s; }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.hdr__cta { margin-left: 8px; flex: none; }
@media (max-width: 1180px) { .hdr__cta { display: none; } }
/* Zwischen Burger-Grenze und großer Breite: Navigation kompakter, damit neben dem
   vollständigen Logo nichts umbricht (Kundenrückmeldung 03.09.2026). */
@media (max-width: 1320px) {
  .hdr__in { gap: 18px; }
  .nav__link { padding: 10px 11px; letter-spacing: .06em; font-size: .82rem; }
  .hdr__cta { margin-left: 4px; }
  .hdr__cta .btn { padding-inline: 16px; }
}


/* Mega-Menü */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__in { display: grid; grid-template-columns: repeat(3, 1fr) .95fr; gap: 34px; padding-block: 40px; }
@media (max-width: 1200px) { .mega__in { grid-template-columns: repeat(3, 1fr); } .mega__aside { display: none; } }

.mega__col h3 {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; color: var(--kupfer-text);
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.mega__col a {
  display: block; padding: 7px 0;
  font-size: .93rem; color: var(--muted);
  transition: color .18s, transform .18s var(--ease);
}
.mega__col a:hover { color: var(--kupfer-text); transform: translateX(4px); }
.mega__col a strong { display: block; color: var(--text); font-weight: 600; font-size: .97rem; }
.mega__col a:hover strong { color: var(--kupfer-text); }

.mega__aside {
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 26px; border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 14px;
}
.mega__aside p { font-size: .9rem; color: var(--muted); }

/* Mobile Nav */
.burger {
  display: none; margin-left: auto;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r);
}
@media (max-width: 1180px) { .burger { display: inline-flex; } }
.burger span { display: block; width: 20px; height: 2px; background: var(--text); position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--text);
  transition: transform .28s var(--ease), top .2s;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  overflow-y: auto;
  padding: 90px var(--gut) 60px;
}
.drawer.is-open { transform: translateX(0); }
.drawer__group + .drawer__group { border-top: 1px solid var(--line-soft); }
.drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 20px 0;
  font-family: var(--display); font-size: 1.6rem; text-transform: uppercase;
  letter-spacing: .01em; text-align: left;
}
.drawer__top svg { width: 18px; height: 18px; color: var(--kupfer-text); transition: transform .25s; }
.drawer__top[aria-expanded="true"] svg { transform: rotate(45deg); }
.drawer__sub { display: none; padding-bottom: 20px; }
.drawer__sub.is-open { display: block; }
.drawer__sub a { display: block; padding: 9px 0 9px 18px; color: var(--muted); border-left: 1px solid var(--line); }
.drawer__sub a:hover { color: var(--kupfer-text); border-color: var(--kupfer-text); }
.drawer__foot { margin-top: 36px; display: grid; gap: 12px; }

/* =========================================================
   Hero
   ========================================================= */
.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; opacity: .68; filter: grayscale(.15) contrast(1.03); }
.hero__media video { opacity: .82; filter: grayscale(.06) contrast(1.02); }
/* Die Abdunklung liegt als eigene Ebene über der Aufnahme, nicht im Bild selbst.
   Links bleibt sie dichter, damit die Überschrift trägt; nach rechts gibt sie
   die Halle frei. Die Werte sind gegen den Kontrast der Überschrift gemessen. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(13,16,19,.94) 8%, rgba(13,16,19,.74) 42%, rgba(13,16,19,.20) 78%),
    linear-gradient(to top, var(--ink), transparent 52%);
}
.hero__grid-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  opacity: .8;
}
.hero__in { position: relative; padding-block: clamp(76px, 9.5vw, 128px) clamp(56px, 6.5vw, 88px); }
.hero__content { max-width: 950px; }
.hero h1 { margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--kupfer-text); }
.hero__lead { max-width: 600px; margin-bottom: 40px; }
/* «Wir fertigen nach Bedarf des Kunden …» steht allein unter dem Lead (A5) */
.hero__claim { margin-top: -26px; color: var(--text); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__stats {
  position: relative;
  margin-top: clamp(56px, 7vw, 92px);
  padding-top: 34px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
@media (max-width: 860px) { .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
.stat__num {
  font-family: var(--display); font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  line-height: 1; color: var(--text); margin-bottom: 6px;
}
.stat__num span { color: var(--kupfer-text); }
/* Kennzahl als Wort («Bundesweit», N3): etwas kleiner, damit sie in der
   Vier-Spalten-Reihe nicht umbricht; Zahlen behalten die volle Größe. */
.stat__num--wort { font-size: clamp(1.9rem, 2.9vw, 2.5rem); overflow-wrap: anywhere; }
.stat__lbl { font-size: .82rem; color: var(--muted); letter-spacing: .04em; }

.scroll-hint {
  position: absolute; right: var(--gut); bottom: 34px;
  display: flex; align-items: center; gap: 12px;
  font-size: .72rem; letter-spacing: .19em; text-transform: uppercase; color: var(--muted-2);
}
@media (max-width: 1180px) { .scroll-hint { display: none; } }
.scroll-hint::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--kupfer-text), transparent);
  animation: scrollpulse 2.4s var(--ease) infinite;
}
@keyframes scrollpulse { 0%,100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* Seiten-Hero (Unterseiten) */
.phero { position: relative; background: var(--ink); overflow: hidden; }
.phero__media { position: absolute; inset: 0; }
.phero__media img,
.phero__media video { width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: grayscale(.4); }
.phero__media video { opacity: .58; filter: grayscale(.15); }
.phero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ink) 12%, rgba(13,16,19,.86) 55%, rgba(13,16,19,.5));
}
.phero__in { position: relative; padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 76px); }
.phero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); margin-bottom: 20px; }
.phero .lead { max-width: 640px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: .8rem; color: var(--muted-2); margin-bottom: 26px; }
.crumbs a:hover { color: var(--kupfer-text); }
.crumbs svg { width: 11px; height: 11px; opacity: .55; }
.crumbs [aria-current] { color: var(--muted); }

/* =========================================================
   Trust-Leiste
   ========================================================= */
.trust { background: var(--surface); border-block: 1px solid var(--line-soft); }
/* Zwei Vorgaben des Kunden bestimmen das Raster: «Fertigung nach Zeichnung»
   steht in einer Zeile (A9), und der Fuhrpark-Text bricht erst vor «für» (A11,
   festes <br>). Beides braucht Platz: die erste Fuhrpark-Zeile ist rund
   260 px breit, die nowrap-Überschrift rund 190 px. Vier gleich breite Spalten
   (Rahmen max. 1280 px, dazu Symbol und Innenabstand) lassen dem Text nur
   ~170 px. Deshalb: vier Spalten erst ab 1260 px, die vierte etwas breiter;
   darunter zwei mal zwei, auf schmalen Geräten eine Spalte. */
.trust__in { display: grid; grid-template-columns: repeat(2, 1fr); }
/* Spalte 2 trägt die längste Zeile («bei größeren Prüfaufkommen») und bekommt dafür Luft von Spalte 1. */
@media (min-width: 1260px) { .trust__in { grid-template-columns: .9fr 1.05fr 1.05fr 1.4fr; } }
@media (max-width: 600px) { .trust__in { grid-template-columns: 1fr; } }
.trust__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 30px 16px;
  border-right: 1px solid var(--line-soft);
}
/* Zwei mal zwei: rechte Spalte ohne Strich, obere Reihe mit Unterstrich. */
.trust__item:nth-child(2n) { border-right: 0; }
.trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
@media (min-width: 1260px) {
  .trust__item:nth-child(n) { border-right: 1px solid var(--line-soft); border-bottom: 0; }
  .trust__item:last-child { border-right: 0; }
}
@media (max-width: 600px) {
  .trust__item { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .trust__item:last-child { border-bottom: 0; }
}
.trust__ico {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--kupfer-tint); border: 1px solid var(--kupfer-line); border-radius: var(--r);
}
.trust__ico svg { width: 19px; height: 19px; color: var(--kupfer-text); }
.trust__t { font-weight: 700; font-size: .97rem; margin-bottom: 2px; }
.trust__t--einzeilig { white-space: nowrap; }
.trust__d { font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* =========================================================
   Leistungskarten
   ========================================================= */
.svc {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .28s, transform .28s var(--ease), box-shadow .28s var(--ease);
}
.svc:hover { border-color: var(--kupfer-line); transform: translateY(-5px); box-shadow: var(--shadow); }
.svc__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .4s; opacity: .82; }
.svc:hover .svc__media img { transform: scale(1.06); opacity: 1; }
.svc__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--surface) 2%, rgba(27,32,38,.35) 42%, transparent);
}
.svc__no {
  position: absolute; left: 20px; top: 18px; z-index: 2;
  font-family: var(--display); font-size: 1rem; letter-spacing: .1em;
  /* Liegt auf dem Foto, nicht auf einer Themenfläche — Farbe deshalb fest,
     mit leichtem Schatten für dunkle wie helle Bildstellen. */
  color: #CE8149; text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.svc__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.svc h3 { margin-bottom: 12px; }
.svc__link { transition: color .2s; }
.svc__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--r-lg); }
.svc:hover .svc__link { color: var(--kupfer-text); }
.svc .link-arrow { pointer-events: none; }
.svc p { font-size: .95rem; color: var(--muted); margin-bottom: 20px; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.tag {
  font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted);
}
.svc .link-arrow { margin-top: auto; align-self: flex-start; }

/* =========================================================
   Split / Feature
   ========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 80px); align-items: center; }
.split--wide-media { grid-template-columns: 1.15fr 1fr; }
.split--text-wide { grid-template-columns: 1fr 1.3fr; }
@media (max-width: 900px) { .split, .split--wide-media, .split--text-wide { grid-template-columns: 1fr; } .split__media { order: -1; } }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); background: #000; }
/* CAD-Ansicht im Querformat (1376×470) auf schwarzem Grund, sitzt nahtlos im Rahmen */
.split__media--cad {
  background: #000; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; align-items: center;
}
.split__media--cad img { width: 100%; height: auto; display: block; border: 0; border-radius: 0; }
.split__media--frame::before {
  content: ""; position: absolute; inset: -14px -14px auto auto;
  width: 120px; height: 120px;
  border-top: 2px solid var(--kupfer-text); border-right: 2px solid var(--kupfer-text);
  border-radius: 0 var(--r-lg) 0 0;
  pointer-events: none;
}

.checks { display: grid; gap: 14px; margin: 30px 0 34px; }
.checks li { display: flex; gap: 13px; align-items: flex-start; font-size: .98rem; }
.checks svg { flex: none; width: 20px; height: 20px; color: var(--kupfer-text); margin-top: 2px; }
.checks strong { display: block; font-weight: 600; }
.checks span { color: var(--muted); font-size: .92rem; }
.sec--paper .checks span { color: var(--paper-muted); }

/* =========================================================
   Prozess
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 34px clamp(12px, 1.2vw, 18px) 34px 0; }
.step::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--line);
}
.step::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--kupfer-text); transition: width .9s var(--ease) .1s;
}
.step.is-in::after { width: 42px; }
.step__no {
  font-family: var(--display); font-size: 3.1rem; line-height: 1;
  color: var(--surface-3); margin-bottom: 14px;
}
.sec--paper .step__no { color: #C3CCD6; }
.sec--paper .step::before { background: var(--paper-line); }
.step h3 { font-size: 1.25rem; margin-bottom: 10px; }
.step p { font-size: .875rem; color: var(--muted); }
.sec--paper .step p { color: var(--paper-muted); }

/* =========================================================
   Ersatzteil-Assistent
   ========================================================= */
.wiz {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.wiz__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px clamp(20px, 3vw, 34px);
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.wiz__title { display: inline-flex; align-items: center; gap: 11px; font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; }
.wiz__title svg { width: 20px; height: 20px; color: var(--kupfer-text); flex: none; }
.wiz__prog { display: flex; align-items: center; gap: 8px; }
.wiz__dot {
  width: 30px; height: 4px; border-radius: 2px; background: var(--surface-3);
  transition: background .3s;
}
.wiz__dot.is-done { background: var(--kupfer-text); }
.wiz__count { font-size: .8rem; color: var(--muted); margin-left: 8px; letter-spacing: .06em; }

.wiz__body { padding: clamp(24px, 3.4vw, 42px); min-height: 340px; }
.wiz__step { display: none; animation: fadein .35s var(--ease); }
.wiz__step.is-active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wiz__q { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 8px; }
.wiz__hint { font-size: .92rem; color: var(--muted); margin-bottom: 26px; }

.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .opts { grid-template-columns: repeat(2, 1fr); } }
/* Bauteil-Knöpfe tragen lange Untertitel: auf breiten Bildschirmen zwei Spalten. */
@media (min-width: 1180px) { .opts--bauteil { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .opts { grid-template-columns: 1fr; } }
.opt {
  position: relative; text-align: left;
  padding: 18px 18px 18px 52px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); font-size: .95rem; font-weight: 500;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.opt:hover { border-color: var(--kupfer-line); transform: translateY(-2px); }
.opt::before {
  content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border: 2px solid var(--surface-3); border-radius: 50%;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.opt.is-sel { border-color: var(--kupfer-text); background: var(--kupfer-tint); }
.opt.is-sel::before { border-color: var(--kupfer-text); background: var(--kupfer-text); box-shadow: inset 0 0 0 3px var(--surface-2); }
.opt small { display: block; color: var(--muted); font-weight: 400; font-size: .82rem; margin-top: 3px; }

.wiz__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .wiz__fields { grid-template-columns: 1fr; } }
.field--full { grid-column: 1 / -1; }

.wiz__summary {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px; margin-bottom: 24px;
}
.wiz__summary dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: .93rem; }
.wiz__summary dt { color: var(--muted); }
.wiz__summary dd { margin: 0; font-weight: 600; }

.wiz__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.wiz__done { text-align: center; padding: 30px 0; }
.wiz__done svg { width: 56px; height: 56px; color: var(--ok); margin: 0 auto 20px; }

/* =========================================================
   Formularfelder
   ========================================================= */
.field label,
.f-label {
  display: block; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.field input, .field select, .field textarea, .inp {
  width: 100%; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); font-size: .97rem;
  transition: border-color .2s, background .2s;
}
.sec--paper .field input, .sec--paper .field select, .sec--paper .field textarea {
  background: #fff; border-color: var(--paper-line);
}
.field input:focus, .field select:focus, .field textarea:focus, .inp:focus {
  border-color: var(--kupfer-text); outline: none;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA4B0' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 42px; }
.field .req { color: var(--kupfer-text); }
.field__err { display: none; font-size: .82rem; color: var(--crit); margin-top: 6px; }
.field.has-err input, .field.has-err textarea, .field.has-err select { border-color: var(--crit); }
.field.has-err .field__err { display: block; }

.check-row { display: flex; gap: 12px; align-items: flex-start; font-size: .89rem; color: var(--muted); }
.check-row input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--kupfer); }
.check-row a { color: var(--kupfer-text); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   UVV-Rechner
   ========================================================= */
.uvv {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
@media (max-width: 900px) { .uvv { grid-template-columns: 1fr; } }
.uvv__form { padding: clamp(26px, 3.4vw, 44px); }
.uvv__out {
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--surface-2); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 900px) { .uvv__out { border-left: 0; border-top: 1px solid var(--line); } }

.uvv__result { display: none; }
.uvv__result.is-on { display: block; animation: fadein .3s var(--ease); }
.uvv__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 20px;
}
.uvv__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.uvv__badge[data-state="ok"]   { color: var(--ok);   background: rgba(47,191,113,.13); }
.uvv__badge[data-state="soon"] { color: var(--warn); background: rgba(242,176,30,.13); }
.uvv__badge[data-state="due"]  { color: var(--crit); background: rgba(229,72,77,.13); }
.uvv__date { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1; margin-bottom: 10px; }
.uvv__note { font-size: .93rem; color: var(--muted); margin-bottom: 26px; }
.uvv__empty { color: var(--muted-2); font-size: .95rem; }
.uvv__legal { font-size: .78rem; color: var(--muted-2); margin-top: 22px; line-height: 1.55; }

/* =========================================================
   Galerie
   ========================================================= */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.filter {
  padding: 9px 17px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); transition: all .2s;
}
.filter:hover { border-color: var(--kupfer-line); color: var(--text); }
.filter.is-on { background: var(--kupfer); border-color: var(--kupfer); color: #fff; }

.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1020px) { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .gal { grid-template-columns: repeat(2, 1fr); } }
.gal__item {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: #000; border: 1px solid var(--line); border-radius: var(--r);
  cursor: zoom-in;
}
.gal__item.is-hidden { display: none; }
.gal__item[data-bg="light"] { background: #FFFFFF; }
.gal__item[data-bg="mid"] { background: var(--surface); }
.gal__btn {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
}
.gal__btn:focus-visible { outline: 3px solid var(--kupfer-text); outline-offset: -3px; }
.gal__item img { width: 100%; height: 100%; object-fit: contain; transition: transform .55s var(--ease); }
.gal__item[data-bg="mid"] img { object-fit: cover; }
.gal__item:hover img,
.gal__item:focus-within img { transform: scale(1.07); }
.gal__cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  opacity: 0; transform: translateY(8px); transition: all .28s var(--ease);
}
.gal__item:hover .gal__cap,
.gal__item:focus-within .gal__cap { opacity: 1; transform: none; }
/* Startseite, Galerie-Stil (22.09.2026): eine große Aufmacher-Kachel über zwei Spalten und
   zwei Reihen, ihre Unterschrift immer sichtbar; der Rest wie gehabt. */
.gal--auswahl .gal__item.is-gross { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
.gal--auswahl .gal__item.is-gross img { object-fit: cover; }
.gal--auswahl .gal__item.is-gross .gal__cap { opacity: 1; transform: none; font-size: .92rem; padding: 40px 18px 16px; }

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(8,10,12,.96);
  display: none; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 70px);
}
.lightbox.is-open { display: flex; animation: fadein .22s; }
/* Ohne Skript gilt weiter die reine Begrenzung; mit Skript setzt fpm.js
   («einpassen») eine ausgerechnete Breite/Höhe, damit auch sehr kleine
   Aufnahmen die Fläche nutzen — höchstens zweifach vergrößert. */
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lightbox img.is-hell { background: #FFFFFF; }
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: .9rem; color: var(--muted); }
.lightbox__x, .lightbox__nav {
  position: absolute; width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.05);
  transition: background .2s, border-color .2s;
}
.lightbox__x:hover, .lightbox__nav:hover { background: var(--kupfer); border-color: var(--kupfer); }
.lightbox__x { top: 24px; right: 24px; }
.lightbox__nav svg, .lightbox__x svg { width: 20px; height: 20px; }
.lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }

/* =========================================================
   Video
   ========================================================= */
.filmband { position: relative; background: var(--ink); overflow: hidden; }
.filmband__media { position: absolute; inset: 0; }
.filmband__media video,
.filmband__media img { width: 100%; height: 100%; object-fit: cover; }
.filmband__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(13,16,19,.94) 6%, rgba(13,16,19,.74) 46%, rgba(13,16,19,.42)),
    linear-gradient(to top, rgba(13,16,19,.95), transparent 55%);
}
.filmband__in { position: relative; padding-block: clamp(84px, 11vw, 168px); }
.filmband__content { max-width: 640px; }
.filmband__marke {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; margin-bottom: 22px;
  border: 1px solid var(--kupfer-line); background: var(--kupfer-tint);
  border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kupfer-text);
}
.filmband__marke::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kupfer-text);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

.filmband__daten {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 54px);
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 30px; border-top: 1px solid var(--line);
}
.filmband__daten div { min-width: 128px; }
.filmband__daten dt { font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.filmband__daten dd {
  margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem);
  text-transform: uppercase; line-height: 1; color: #fff;
}

/* Abspielbarer Film mit Steuerung */
.film {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: #000; aspect-ratio: 16 / 9;
}
.film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__start {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(13,16,19,.7), rgba(13,16,19,.15));
  transition: opacity .3s var(--ease);
}
.film__start[hidden] { display: none; }
.film__knopf {
  display: grid; place-items: center;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--kupfer); color: #fff;
  box-shadow: 0 12px 40px -8px rgba(206,129,73,.55);
  transition: transform .25s var(--ease), background .2s;
}
.film:hover .film__knopf { transform: scale(1.08); background: var(--kupfer-600); }
.film__knopf svg { width: 26px; height: 26px; margin-left: 4px; }
.film__label {
  position: absolute; left: 22px; bottom: 20px;
  font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  color: var(--text); text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

/* =========================================================
   Tabellen / Spezifikationen
   ========================================================= */
.spec { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.spec table { font-size: .94rem; }
.spec th, .spec td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.spec thead th {
  background: var(--surface-2); font-family: var(--sans); font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--kupfer-text); font-weight: 700;
}
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody tr { transition: background .2s; }
.spec tbody tr:hover { background: rgba(255,255,255,.025); }
.spec td:first-child { font-weight: 600; }
/* Rechtsgrundlagen laufen schmaler und ruhiger als der Prüfgegenstand. */
.spec td.grundlage {
  font-weight: 400; color: var(--muted); font-size: .88rem;
  font-variant-numeric: tabular-nums; white-space: normal;
}
.sec--paper .spec td.grundlage { color: var(--paper-muted); }

/* Hinweiskasten für Angaben, die man nicht überlesen darf. */
.hinweis-box {
  display: flex; gap: 18px; align-items: flex-start;
  margin-bottom: 30px; padding: 22px 24px;
  border: 1px solid var(--kupfer-line); background: rgba(206, 129, 73, .10);
  border-radius: var(--r-lg);
  /* Die getönte Fläche hebt den Untergrund an — der Verweis darin braucht
     deshalb eine Stufe mehr, sonst fällt er unter 4,5:1. */
  --kupfer-text: #D4884F;
}
.hinweis-box__ico { flex: none; width: 26px; height: 26px; color: var(--kupfer-text); }
.hinweis-box__ico svg { width: 100%; height: 100%; }
.hinweis-box strong { display: block; margin-bottom: 5px; color: var(--text); }
.hinweis-box p { color: var(--muted); font-size: .95rem; }
.hinweis-box a { color: var(--kupfer-text); text-decoration: underline; text-underline-offset: 3px; }
.sec--paper .hinweis-box strong { color: var(--paper-ink); }
.sec--paper .hinweis-box p { color: var(--paper-muted); }
@media (max-width: 560px) { .hinweis-box { flex-direction: column; gap: 12px; } }

/* Fehlende Einwilligung: nicht allein über die Farbe, sondern mit Text und
   Umrandung — sonst bemerkt sie niemand, der Farben nicht unterscheiden kann. */
.field--check.has-err .check-row { color: var(--crit); }
.field--check.has-err input { box-shadow: 0 0 0 2px var(--crit); }

/* Ansprechpartner. Grundform ist gestapelt — Bild oben, Text darunter.
   Nebeneinander erst ab 1080 px: darunter blieben von der Textspalte in der
   zweispaltigen Anordnung nur rund 150 px übrig, das liest sich nicht. */
.person {
  display: grid; gap: 20px; align-items: start;
  padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.person__bild {
  width: 100%; max-width: 220px; height: auto; aspect-ratio: 2/3;
  object-fit: cover; object-position: center 18%; border-radius: var(--r);
}
.person__text h3 { font-size: 1.35rem; margin-bottom: 4px; }
.person__rolle {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--kupfer-text); margin-bottom: 12px;
}
.person .muted { font-size: .95rem; }
@media (min-width: 1080px) {
  .person { grid-template-columns: 168px 1fr; gap: 26px; }
  .person__bild { max-width: none; }
}
.sec--paper .spec { border-color: var(--paper-line); }
.sec--paper .spec th, .sec--paper .spec td { border-color: var(--paper-line); }
.sec--paper .spec thead th { background: var(--paper-2); }
.spec-wrap { overflow-x: auto; }

/* =========================================================
   Akkordeon / FAQ
   ========================================================= */
.acc { border-top: 1px solid var(--line); }
.sec--paper .acc, .sec--paper .acc__item { border-color: var(--paper-line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 24px 0; text-align: left;
  font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  text-transform: uppercase; letter-spacing: .01em;
  transition: color .2s;
}
.acc__btn:hover, .acc__btn[aria-expanded="true"] { color: var(--kupfer-text); }
.acc__ico { flex: none; width: 22px; height: 22px; position: relative; }
.acc__ico::before, .acc__ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .3s;
}
.acc__ico::before { width: 16px; height: 2px; }
.acc__ico::after { width: 2px; height: 16px; }
.acc__btn[aria-expanded="true"] .acc__ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.acc__panel.is-open { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 26px; max-width: 780px; color: var(--muted); }
.sec--paper .acc__panel p { color: var(--paper-muted); }

/* =========================================================
   CTA-Band / Notdienst
   ========================================================= */
.cta-band { position: relative; background: var(--kupfer); color: #fff; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.055) 0 22px, transparent 22px 44px);
}
.cta-band__in {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap;
  padding-block: clamp(44px, 5.5vw, 72px);
}
.cta-band h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 10px; }
.cta-band p { max-width: 560px; opacity: .93; }
.cta-band .btn { --btn-bg: var(--ink); --btn-fg: #fff; }
.cta-band .btn:hover { --btn-bg: #000; box-shadow: none; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.phone-big {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: .01em; line-height: 1;
}
.phone-big svg { width: 26px; height: 26px; flex: none; }

/* =========================================================
   Kontakt
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 4.5vw, 72px); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); }
.contact-list { display: grid; gap: 22px; }
.contact-list li { display: flex; gap: 15px; }
.contact-list svg { flex: none; width: 20px; height: 20px; color: var(--kupfer-text); margin-top: 3px; }
.contact-list dt, .contact-list .c-lbl { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.contact-list .c-val { font-weight: 600; font-size: 1.02rem; }
.contact-list a.c-val:hover { color: var(--kupfer-text); }

/* Karte mit Einwilligung */
.karte {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 14px, transparent 14px 28px),
    var(--surface-2);
}
.karte--hell {
  border-color: var(--paper-line);
  background:
    repeating-linear-gradient(45deg, rgba(13,16,19,.03) 0 14px, transparent 14px 28px),
    var(--paper-2);
}
.karte iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.18); }
.karte__gate {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  text-align: center; padding: 30px; gap: 4px;
}
.karte__ico { display: block; width: 34px; height: 34px; color: var(--kupfer-text); margin-bottom: 12px; }
.karte__titel { font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; letter-spacing: .01em; }
.karte__text { max-width: 420px; font-size: .9rem; color: var(--muted); margin: 8px 0 20px; }
.karte--hell .karte__text { color: var(--paper-muted); }
.karte__text a { color: var(--kupfer-text); text-decoration: underline; text-underline-offset: 3px; }
.karte__merken {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: .82rem; color: var(--muted-2); cursor: pointer;
}
.karte__merken input { width: 16px; height: 16px; accent-color: var(--kupfer); }

/* Rückmeldung des Formulars */
.form-note {
  border-radius: var(--r); padding: 18px 20px;
  font-size: .94rem; color: var(--text);
  border: 1px solid var(--line); background: var(--surface-2);
}
.form-note a { color: var(--kupfer-text); text-decoration: underline; text-underline-offset: 3px; }
.form-note[data-art="info"] { background: rgba(47,191,113,.10); border-color: rgba(47,191,113,.35); }
.form-note[data-art="gut"] { background: rgba(47,191,113,.13); border-color: rgba(47,191,113,.45); }
.form-note[data-art="schlecht"] { background: rgba(229,72,77,.12); border-color: rgba(229,72,77,.45); }

/* Rechenaufgabe als Spam-Schutz */
.rechen__frage {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums; color: var(--kupfer-text); font-weight: 700;
}
.honigtopf {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* =========================================================
   Footer
   ========================================================= */
.foot { background: var(--ink); border-top: 1px solid var(--line); }
.foot__main { padding-block: clamp(52px, 6vw, 84px); display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(30px, 4vw, 60px); }
@media (max-width: 1000px) { .foot__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .foot__main { grid-template-columns: 1fr; } }
.foot__brand img { height: auto; width: 200px; max-width: 100%; }
.foot__brand p { font-size: .93rem; color: var(--muted); max-width: 330px; }
.foot h3 {
  font-family: var(--sans); font-size: .76rem; font-weight: 700;
  letter-spacing: .15em; color: var(--kupfer-text); margin-bottom: 18px;
}
.foot__nav { display: grid; gap: 10px; }
.foot__nav a { font-size: .93rem; color: var(--muted); transition: color .18s, padding-left .2s var(--ease); }
.foot__nav a:hover { color: var(--kupfer-text); padding-left: 5px; }
.foot__bottom {
  border-top: 1px solid var(--line-soft); padding-block: 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  font-size: .83rem; color: var(--muted-2);
}
.foot__bottom a:hover { color: var(--kupfer-text); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 22px; }

.made {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--muted-2);
}
.made b { color: var(--muted); font-weight: 600; }

/* =========================================================
   Notdienst-Sticky (mobil)
   ========================================================= */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; grid-template-columns: 1fr 1fr;
  background: var(--ink); border-top: 1px solid var(--line);
}
@media (max-width: 700px) { .callbar { display: grid; } body { padding-bottom: 58px; } }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 10px; font-size: .84rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.callbar a + a { background: var(--kupfer); color: #fff; }
.callbar svg { width: 16px; height: 16px; }

.totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--kupfer); color: #fff; border-radius: var(--r);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .3s var(--ease);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--kupfer-600); }
.totop svg { width: 19px; height: 19px; }
@media (max-width: 700px) { .totop { bottom: 74px; } }

/* =========================================================
   Reveal-Animationen
   ========================================================= */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; }
.rv-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: 46px; }
.mb-m { margin-bottom: 28px; }
.center { text-align: center; }
.center .kicker, .center .sec-head, .sec-head.center { margin-inline: auto; }
.flex-gap { display: flex; flex-wrap: wrap; gap: 14px; }
.hr { height: 1px; background: var(--line); border: 0; margin-block: clamp(40px, 5vw, 68px); }
.sec--paper .hr { background: var(--paper-line); }

/* Prose (Rechtstexte) */
.prose { max-width: 800px; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 48px 0 16px; }
.prose h3 { font-size: 1.15rem; margin: 32px 0 12px; }
/* Nur die allererste Überschrift im Textblock steht ohne Abstand nach oben. Ohne das
   Kindzeichen galt die Regel auch für Überschriften in verschachtelten Abschnitten —
   in den AGB klebten dadurch alle vierzehn Paragrafen am vorigen Absatz. */
.prose > h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-bottom: 16px; color: var(--muted); font-size: .97rem; }
.prose ul { list-style: none; display: grid; gap: 8px; }
.prose ul li { padding-left: 20px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .68em; width: 7px; height: 1px; background: var(--kupfer-text); }
.prose a { color: var(--kupfer-text); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }

/* Druck */
@media print {
  .hdr, .topbar, .callbar, .totop, .drawer, .cta-band, .scroll-hint { display: none !important; }
  body { background: #fff; color: #000; }
  .sec { padding-block: 20px; }
}

/* Einfache Sprache: größere Schrift, mehr Luft, kurze Zeilen. */
.prose--gross { font-size: 1.18rem; line-height: 1.85; }
.prose--gross h2 { margin-top: 2.2em; }
.prose--gross ul li { margin-bottom: .6em; }
.prose--gross .prose__tel a { font-size: 1.7rem; color: var(--kupfer-text); text-decoration: none; }

/* =========================================================
   Helles Design
   Der dunkle Auftritt bleibt die Vorgabe — die Marke ist dunkel angelegt.
   Wer hell möchte, schaltet um; die Wahl bleibt im Browser gespeichert.
   Alle Werte sind gegen die Kontrastgrenze 4,5:1 gerechnet.
   ========================================================= */
html[data-theme="light"] {
  --ink:        #E8ECF1;
  --bg:         #F4F6F8;
  --surface:    #FFFFFF;
  --surface-2:  #E9EDF2;
  --surface-3:  #DDE3EA;
  --line:       rgba(13, 16, 19, .14);
  --line-soft:  rgba(13, 16, 19, .07);
  --text:       #14171C;
  --muted:      #5A6572;
  --muted-2:    #5A6572;
  --kupfer-text: #8A5A2A;
  --kupfer-tint: rgba(153, 101, 47, .10);
  --kupfer-line: rgba(153, 101, 47, .30);
  --shadow: 0 18px 50px -12px rgba(13, 16, 19, .18);
  --shadow-lg: 0 32px 80px -20px rgba(13, 16, 19, .25);
}

/* Bildflächen bleiben auch im hellen Design dunkel — ein heller Schleier
   würde die Drohnenaufnahmen auswaschen. Die Abschnitte behalten deshalb
   ihre dunklen Werte und wirken wie ein dunkles Band auf heller Seite. */
html[data-theme="light"] .hero,
html[data-theme="light"] .phero,
html[data-theme="light"] .filmband {
  --ink:        #0D1013;
  --bg:         #14171C;
  --surface:    #1B2026;
  --surface-2:  #232A32;
  --line:       rgba(255, 255, 255, .10);
  --line-soft:  rgba(255, 255, 255, .06);
  --text:       #E9ECF0;
  --muted:      #9AA4B0;
  --muted-2:    #8B94A0;
  --kupfer-text: #CE8149;
  --kupfer-tint: rgba(206, 129, 73, .13);
  --kupfer-line: rgba(206, 129, 73, .32);
  /* color neu setzen — der vererbte Wert vom hellen body zählt sonst weiter */
  color: var(--text);
}

/* Feine Stellen, an denen Weiß fest verdrahtet war. */
html[data-theme="light"] .btn--ghost:hover { --btn-bg: rgba(13,16,19,.05); border-color: rgba(13,16,19,.3); }
html[data-theme="light"] .spec tbody tr:hover { background: rgba(13,16,19,.03); }
html[data-theme="light"] .gal__item[data-bg="mid"] { background: var(--surface-2); }

/* Logo-Tausch: auf hellem Grund die farbige Fassung. */
.nur-hell { display: none; }
html[data-theme="light"] .nur-hell { display: block; }
html[data-theme="light"] .nur-dunkel { display: none; }

/* Der Umschalter selbst. */
.thema {
  margin-left: 10px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: var(--r); color: var(--muted); line-height: 0;
  transition: color .2s, border-color .2s;
}
.thema:hover, .thema:focus-visible { color: var(--kupfer-text); border-color: var(--kupfer-text); }
.thema svg { width: 16px; height: 16px; }
.thema .mond { display: none; }
html[data-theme="light"] .thema .sonne { display: none; }
html[data-theme="light"] .thema .mond { display: block; }
@media (max-width: 1180px) { .thema { margin-left: 8px; } }

/* =========================================================
   Zeilenfall (Rückmeldungen 2 und 3, September 2026)
   Der Kunde gibt die Satzaufteilung vor. Vier Sorten Umbruch:
     br.zs     Satzgrenze — gilt IMMER, auf jeder Breite: ein neuer Satz beginnt
               auf einer neuen Zeile.
     br.zb-m   Sinngrenze im Satz, ab 900 px  (breite, einspaltige Textblöcke)
     br.zb     Sinngrenze im Satz, ab 1180 px (mehrspaltige Bereiche, Desktop)
     br.zb-xl  Sinngrenze im Satz, ab 1260 px (vierspaltige Vertrauensleiste)
   Wo eine Sinngrenze nicht greift, bricht der Text natürlich um; die letzten
   beiden Wörter eines Satzes sind im Text mit &nbsp; gebunden, damit nie ein
   einzelnes Wort allein in der letzten Zeile steht (auch in Browsern ohne
   text-wrap: pretty/balance, z. B. Firefox).
   Vor jedem <br> steht im HTML ein Leerzeichen — ausgeblendet trennt es die Wörter.
   ========================================================= */
br.zb, br.zb-m, br.zb-xl { display: none; }
@media (min-width: 900px)  { br.zb-m  { display: inline; } }
@media (min-width: 1180px) { br.zb    { display: inline; } }
@media (min-width: 1260px) { br.zb-xl { display: inline; } }
/* Kurze Textblöcke gleichmäßig umbrechen, wo der Browser es kann. */
.trust__t:not(.trust__t--einzeilig), .trust__d, .svc p, .step p, .cta-band p, .opt small, .sec-head .lead, .split .lead, .filmband .lead { text-wrap: balance; }
sup { font-size: .6em; line-height: 0; vertical-align: baseline; position: relative; top: -.6em; }
.svc__tags--branchen { max-width: 540px; }

/* UVV-Kasten der Startseite: nebeneinander auf dem Desktop, gestapelt auf Tablet und Handy
   (vorher blieb dem Text auf dem Handy nur eine 130 px schmale Spalte). */
.uvvkasten {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: var(--r-lg); padding: 28px 32px;
}
@media (max-width: 900px) {
  .uvvkasten { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 22px; align-items: start; }
  .uvvkasten .btn { justify-self: start; }
}

/* Lange deutsche Komposita («Siloaustragseinrichtungen», «Buchsenkettenförderer») sprengten auf dem
   Handy die Spalte und machten die Seite breiter als den Bildschirm. Auf schmalen Bildschirmen dürfen
   Überschriften deshalb trennen; Rasterspalten dürfen unter ihre Mindestbreite schrumpfen. */
@media (max-width: 700px) {
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  .split > *, .grid > * { min-width: 0; }
  .checks li > div { min-width: 0; overflow-wrap: break-word; }
}

/* Fördertechnik von A bis Z (anlagen.html, Stichwörter des Kunden, 22.09.2026) */
.az { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 44px; }
@media (max-width: 800px) { .az { grid-template-columns: minmax(0, 1fr); } }
.az__gruppe { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0 10px; border-top: 1px solid var(--line-soft); }
.sec--paper .az__gruppe { border-top-color: var(--paper-line); }
.az__buchstabe { font-family: var(--display); font-size: 1.45rem; font-weight: 700; line-height: 1; color: var(--kupfer-text); }
.az__gruppe p { font-size: .95rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.sec--paper .az__gruppe p { color: var(--paper-muted); }
.az__wort + .az__wort::before { content: "·"; margin: 0 .55em; color: var(--kupfer-line); }

/* =========================================================
   Intro «Schnecke» — Förderstrecke, nur Startseite (22.09.2026)
   ---------------------------------------------------------
   Das Logo ist NICHT nachgezeichnet. Gezeigt wird die echte
   Rasterfassung logo-fpm-*.webp — dieselbe Datei, die der
   Seitenkopf ohnehin lädt — nur in vier waagerechte Bänder
   zerlegt (Wortmarke · Wendel+Welle · FÖRDERTECHNIK ·
   Firmierung), damit sie nacheinander auftreten können.
   Trog, Schüttgut, Lichtkegel und Abwurf sind freie Deko.

   ACHTUNG — die Anteile weiter unten (.il--*, --trog-y,
   --trog-h) sind am Alphakanal des Logos (bis 26.09. logo-fpm-640.webp, seit 27.09. logo-fpm.svg)
   gemessen und gehören zu GENAU dieser Logodatei. Wird das
   Kopflogo getauscht (z. B. gegen die Vektorfassung aus
   «Logo/Vektor 2026-09-22/Nachbau/»), zuerst neu messen:
   python3 messe_baender.py  (liegt beim Entwurf im Ordner
   «intro/einbau», Aufruf mit dem Pfad der neuen Datei).
   Messung 22.09.2026, 640 × 402, Seitenverhältnis 1,5920:
     Wortmarke        0      … 0,4726   (Ink 0     … 0,4453)
     Wendel + Welle   0,4726 … 0,7425   (Ink 0,5000… 0,7189)
     FÖRDERTECHNIK    0,7425 … 0,9167   (Ink 0,7662… 0,8756)
     GMBH & CO. KG    0,9167 … 1        (Ink 0,9577… 1)
     Wellenmitte      0,5995
   Bewegt werden ausschließlich transform und opacity.
   ========================================================= */

/* Ohne data-intro existiert das Overlay optisch nicht — es kann
   also weder bei reduzierter Bewegung noch beim zweiten Aufruf
   aufblitzen. Gesetzt wird das Attribut vom Inline-Skript im Kopf. */
.intro { display: none; }

html[data-intro="1"] .intro {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 9999;
  background: #0D1013;
  contain: strict;

  /* Das Intro bleibt IMMER dunkel — genau wie .hero/.phero/.filmband.
     Im hellen Design wäre --ink sonst #E8ECF1 und FÖRDERTECHNIK
     (Stahlgrau) verschwände darin. */
  --ink:         #0D1013;
  --bg:          #14171C;
  --text:        #E9ECF0;
  --muted:       #9AA4B0;
  --line:        rgba(255, 255, 255, .10);
  --kupfer-text: #CE8149;
  --kupfer-line: rgba(206, 129, 73, .32);
  color: var(--text);

  --lw: min(520px, 62vw);
  --lh: calc(var(--lw) / 1.5633);   /* viewBox der SVG mit Schutzabstand: 577.693 × 369.542 */

  /* Der Trog überdeckt die Wendel vollständig (nur dann kann die
     Materialfront sie sauber freigeben), hält aber Abstand zur
     Grundlinie von FPM: Oberkante 0,4853 der Bildhöhe, Grundlinie
     0,4428 — das sind 0,0425 · Logohöhe, auf 390 px rund 8 px,
     auf 1440 px rund 14 px. (Vorher waren es nur 4 px, die
     Kupfer-Haarlinie klebte am F.) */
  --trog-h: calc(var(--lh) * .2687);
  --trog-y: calc(50% - var(--lh) * .0147);

  /* Pfad relativ zum Stylesheet — damit ist auch en/index.html versorgt.
     Ein url() in einem <style>-Block würde sprache.py NICHT umschreiben
     und wäre auf der englischen Seite tot. */
  --logo-bild: url("../img/logo/logo-fpm.svg");

  /* Trog und Deckel müssen denselben Anstrich tragen — sonst sähe man
     eine Kante durchs Bild wandern. Eine Stufe kräftiger als im Entwurf,
     damit die Strecke auch auf großen, nicht kalibrierten Schirmen als
     Trog zu erkennen ist und nicht als leerer Streifen. */
  --trog-farbe: linear-gradient(180deg, #171D24 0, #232B35 44%, #12171D 94%, rgba(18, 23, 29, 0) 100%);
}

/* Seit 27.09.2026 ist das Logo eine SVG-Datei — eine Fassung für jede Bildschirmdichte,
   keine Stufen mehr. Die Medienabfrage, die früher die größere WebP-Stufe nachlud,
   ist damit hinfällig. */

/* Rückfall, falls das Kopf-Skript einmal nicht durchläuft. */
@media (prefers-reduced-motion: reduce) {
  html[data-intro="1"] .intro { display: none; }
}

/* NOTAUS: sollte assets/js/fpm.js einmal nicht laden (Cache-Buster,
   Deploy-Panne), bliebe das Overlay sonst für immer stehen und die
   Startseite wäre tot. Diese reine CSS-Animation blendet es nach 3,2 s
   ab. Sie kostet nichts und darf beim Aufräumen nicht wegfallen. */
html[data-intro="1"] .intro { animation: intro-notaus .28s linear 3.2s both; }
@keyframes intro-notaus { to { opacity: 0; visibility: hidden; } }

/* ---------- Trog (Deko) ---------- */
.intro__trog {
  position: absolute; left: 0; right: 0;
  top: var(--trog-y); height: var(--trog-h);
  background: var(--trog-farbe);
  opacity: 0;
}
/* Eine einzige Kupfer-Haarlinie als Trogkante — Deckel und Trog tragen sie
   an derselben Stelle, sonst liefe beim Aufbau ein Strich durchs Bild. */
.intro__trog::before,
.intro__deckel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(206, 129, 73, .42);
}

/* ---------- Schüttgut (Deko) ---------- */
.intro__gut {
  position: absolute; left: 0; right: 0;
  top: var(--trog-y); height: var(--trog-h);
  overflow: hidden;
}
.korn {
  position: absolute; border-radius: 45%;
  opacity: 0; will-change: transform, opacity;
}

/* ---------- Logo: vier Bänder EINER Bilddatei ---------- */
.intro__logo { position: relative; width: var(--lw); height: var(--lh); }
.il {
  position: absolute; left: 0; width: 100%;
  background-image: var(--logo-bild);
  background-repeat: no-repeat;
  background-size: var(--lw) var(--lh);
  will-change: transform, opacity;
}
.il--wort    { top: 0;                        height: calc(var(--lh) * .4763); background-position: 0 0; }
.il--wendel  { top: calc(var(--lh) * .4763);  height: calc(var(--lh) * .2622); background-position: 0 calc(var(--lh) * -.4763); }
.il--foerder { top: calc(var(--lh) * .7385);  height: calc(var(--lh) * .1672); background-position: 0 calc(var(--lh) * -.7385); transform-origin: 50% 50%; }
.il--firma   { top: calc(var(--lh) * .9057);  height: calc(var(--lh) * .0943); background-position: 0 calc(var(--lh) * -.9057); transform-origin: 50% 50%; }
.il--wort, .il--foerder, .il--firma { opacity: 0; }

/* ZAHNRAD — bewusste Abweichung: das Zahnrad im P sitzt fest in der
   Rasterfassung, einzeln drehen ginge nur, wenn man es nachzeichnet, und
   genau das ist ausgeschlossen. (Die Vektorfassung logo-fpm.svg hat gar
   kein Zahnrad und eine andere Wendel — sie käme als Quelle also ohnehin
   nicht in Frage, ohne am Ende ein anderes Logo zu zeigen als der Kopf.)
   Statt einer Drehung zieht ein Lichtreflex über das Metall und lässt das
   Zahnrad aufblitzen. Die Maske ist dieselbe Bilddatei — der Reflex liegt
   also nur auf dem Logo und nie auf dem Hintergrund. */
.il__glanz {
  position: absolute; left: 0; top: 0; width: 100%;
  height: calc(var(--lh) * .4763);
  overflow: hidden; opacity: 0; pointer-events: none;
  -webkit-mask-image: var(--logo-bild);          mask-image: var(--logo-bild);
  -webkit-mask-size: var(--lw) var(--lh);        mask-size: var(--lw) var(--lh);
  -webkit-mask-position: 0 0;                    mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;                mask-repeat: no-repeat;
}
.il__glanz i {
  position: absolute; top: -25%; left: 0; width: 100%; height: 150%;
  background: linear-gradient(104deg,
    rgba(255, 238, 218, 0) 41%, rgba(255, 238, 218, .50) 50%, rgba(255, 238, 218, 0) 59%);
  will-change: transform;
}

/* Abwurf am rechten Ende der Strecke */
.intro__abwurf {
  position: absolute; left: 100%; top: calc(var(--lh) * .56);
  width: calc(var(--lh) * .5); height: calc(var(--lh) * .5);
}

/* ---------- Deckel = Materialfront ----------
   Er trägt denselben Anstrich wie der Trog. Er verdeckt also nicht die
   Strecke, sondern zeigt den noch leeren Trog: die Wendel entsteht hinter
   der Front. Bewegt wird ausschließlich translateX. Die weiche Vorderkante
   kommt aus einer Maske, NICHT aus einer zweiten Farbschicht — sonst wäre
   der Deckel dunkler als der Trog. */
.intro__deckel {
  position: absolute; left: -30%; width: 130%;
  top: var(--trog-y); height: var(--trog-h);
  background: var(--trog-farbe);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 clamp(44px, 6vw, 120px));
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 clamp(44px, 6vw, 120px));
  will-change: transform;
}

/* ---------- Licht und Vignette ---------- */
.intro__licht {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(120% 68% at 50% 44%, rgba(206, 129, 73, .10), rgba(206, 129, 73, 0) 56%),
    radial-gradient( 86% 56% at 50% 52%, rgba(255, 255, 255, .042), rgba(255, 255, 255, 0) 62%);
}
.intro__licht::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(118% 92% at 50% 50%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .58) 100%);
}

/* ---------- Überspringen ----------
   Sichtbar ab der ersten Millisekunde (nur 120 ms Einblendung) — für den
   Eiligen ist der Knopf der einzige sichtbare Ausweg. Er sitzt in einem
   aria-hidden-Bereich und ist deshalb tabindex="-1"; der Tastaturweg läuft
   über «jede Taste beendet». Kupfer statt Grau, damit er auf dem dunklen
   Overlay nicht untergeht (beides vorhandene Tokens). */
.intro__skip {
  position: absolute; right: clamp(16px, 4vw, 40px); bottom: clamp(16px, 4vw, 40px);
  z-index: 5;
  font: 600 .8rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--kupfer-text); background: transparent;
  border: 1px solid var(--kupfer-line); border-radius: var(--r);
  padding: 11px 16px; cursor: pointer; opacity: 0;
}
.intro__skip:hover { color: var(--text); border-color: var(--kupfer-text); }

/* Stapelung: Trog · Schüttgut · Logo · Deckel · Licht · Knopf */
.intro__trog   { z-index: 0; }
.intro__gut    { z-index: 1; }
.intro__logo   { z-index: 2; }
.intro__deckel { z-index: 3; }
.intro__licht  { z-index: 4; }

/* Auf dem Handy wird das Logo schmaler — sonst stößt die Wortmarke an die
   Kopfzeile des Hero. */
@media (max-width: 480px) {
  html[data-intro="1"] .intro { --lw: min(300px, 78vw); }
}

/* ---------- AGB: vollständiger Rechtstext (seit 28.09.2026) ----------
   Vorher stand auf der Seite nur eine Übersicht und das PDF. Vierzehn Paragrafen
   mit zusammen 84 Punkten brauchen eine ruhige, gut greifbare Gliederung. */
.agb__inhalt { list-style: none; padding: 0; margin: 18px 0 0; columns: 2; column-gap: 34px; }
.agb__inhalt li { break-inside: avoid; margin: 0 0 7px; font-size: .95rem; }
/* Nummer und Titel stehen nebeneinander in zwei Spalten. Bricht ein Titel um — in der
   Praxis nur § 12 —, läuft die zweite Zeile unter dem Titel weiter und nicht unter der
   Nummer. Die Unterstreichung beim Überfahren sitzt am Titel, nicht an der ganzen Zeile. */
.agb__inhalt a { display: flex; gap: 10px; align-items: baseline; text-decoration: none; }
.agb__inhalt .muted { flex: none; min-width: 34px; }
.agb__inhalt .agb__titel { border-bottom: 1px solid transparent; }
.agb__inhalt a:hover .agb__titel { border-bottom-color: var(--kupfer-line); }
.agb__p { scroll-margin-top: 96px; }
/* Lange Paragrafentitel auf gleich lange Zeilen verteilen statt eine volle und
   einen Rest. Browser ohne text-wrap: balance brechen wie bisher. */
/* Hängender Einzug: Bricht ein Paragrafentitel um, beginnt die zweite Zeile unter dem
   Titel und nicht unter der Nummer. 1,8 em ist die gemessene Breite von «§ 14 » plus
   dem geschützten Leerzeichen dahinter — die breiteste Nummer, damit alle passen. */
.agb__p h2 { margin-top: 42px; padding-left: 1.795em; text-indent: -1.795em; }
.agb__liste { margin: 14px 0 0; padding-left: 20px; }
.agb__liste li { margin: 0 0 12px; line-height: 1.62; }
.agb__liste strong { color: var(--text); }
@media (max-width: 640px) { .agb__inhalt { columns: 1; } }