/* =========================================================
   Pumpentechnik Erkrath — Neubau
   Leitmotiv: technische Zeichnung. Die Substanz nach vorn.

   Gliederung
   1  Grundlagen (Farben, Schrift, Reset)
   2  Bausteine (Knöpfe, Labels, Listen)
   3  Kopf und Navigation
   4  Startseite
   5  Nachweise, Fabrikate, Bauarten, Anlagen
   6  Fertigung, Geschichte, Ansprechpartner
   7  Tabellen, Bildstrecken, Produktraster
   8  Kontakt und Fuß
   9  Unterseiten und Rechtstext
   10 Ex-Service
   11 Bewegung und Barrierefreiheit
   ========================================================= */

/* =========================================================
   1  Grundlagen
   ========================================================= */

:root {
  /* Petrol: Grund für Kopf, Bänder und Fuß */
  --petrol-900: #042025;
  --petrol-850: #072d34;
  --petrol-800: #0a373f;
  --petrol-700: #0f4c55;

  /* Akzente aus dem Logo — gesetzt */
  --tuerkis:      #12808c;
  --tuerkis-hell: #2fb0bf;
  --tuerkis-blass:#e4f1f2;
  --orange:       #f2600c;
  --orange-hell:  #ff7a2f;
  --orange-blass: #fdeee6;

  /* Flächen und Schrift */
  --papier:     #f4f3ef;
  --papier-tief:#eceae4;
  --weiss:      #ffffff;
  --tinte:      #14191a;
  --tinte-grau: #566364;
  --linie:      rgba(255,255,255,.15);
  --linie-stark:rgba(255,255,255,.28);
  --linie-hell: #dedcd5;
  --linie-fein: #ebe9e3;

  --wrap: 1280px;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Vertikaler Rhythmus */
  --band: clamp(64px, 8vw, 112px);

  /* Hoehe des klebenden Kopfbereichs: Topbar + Kopf.
     Wird von scroll-padding-top und der Hoehe des mobilen Menues gebraucht. */
  --kopfhoehe: 118px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Ohne diesen Abstand landet jede Sprungmarke (#kontakt, #leistungen)
     hinter dem klebenden Kopfbereich. */
  scroll-padding-top: var(--kopfhoehe);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--tuerkis); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  margin: 0 0 20px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance;
}
p { margin: 0 0 20px; }
p, li { text-wrap: pretty; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.wrap--schmal { max-width: 860px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--orange); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* Millimeterraster — der Grund, auf dem gezeichnet wird.
   Wird als Hintergrund auf dunkle Bänder gelegt. */
.raster { position: relative; overflow: hidden; }
.raster::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
}
.raster > * { position: relative; }
.raster--verlauf::before {
  -webkit-mask-image: radial-gradient(75% 75% at 72% 38%, #000 0%, transparent 78%);
          mask-image: radial-gradient(75% 75% at 72% 38%, #000 0%, transparent 78%);
}

/* =========================================================
   2  Bausteine
   ========================================================= */

/* Monospace-Label: trägt Kennzahlen und technische Auszeichnungen */
.mono {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--tuerkis); margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.eyebrow--hell { color: var(--tuerkis-hell); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 26px;
  background: var(--orange); color: #fff; border: 1px solid var(--orange);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.knopf:hover, .knopf:focus {
  background: var(--orange-hell); border-color: var(--orange-hell);
  color: #fff; text-decoration: none;
}
.knopf__pfeil { transition: transform .2s ease; }
.knopf:hover .knopf__pfeil { transform: translateX(4px); }

.knopf--geist { background: transparent; color: var(--weiss); border-color: var(--linie-stark); }
.knopf--geist:hover, .knopf--geist:focus { background: rgba(255,255,255,.08); border-color: var(--weiss); }

.knopf--rand { background: transparent; color: var(--tinte); border-color: var(--linie-hell); }
.knopf--rand:hover, .knopf--rand:focus { background: var(--papier); border-color: var(--tinte); color: var(--tinte); }

.knopf--text {
  padding: 0; background: none; border: 0; color: var(--orange);
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.knopf--text:hover, .knopf--text:focus {
  background: none; border-bottom-color: var(--orange);
  color: var(--orange); text-decoration: none;
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 40px; }

/* Merkmalsliste */
.merkmale { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.merkmale li { position: relative; padding-left: 26px; color: var(--tinte-grau); }
.merkmale li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; background: var(--orange);
}

/* Abschnittskopf */
.abschnittskopf { max-width: 660px; margin-bottom: 56px; }
.abschnittskopf h2 { font-size: clamp(30px, 3.6vw, 44px); }
.abschnittskopf p { color: var(--tinte-grau); margin: 0; font-size: 18px; }
.abschnittskopf--hell h2 { color: var(--weiss); }
.abschnittskopf--hell p { color: rgba(255,255,255,.68); }
.abschnittskopf--mitte { margin-left: auto; margin-right: auto; text-align: center; }
.abschnittskopf--mitte .eyebrow { justify-content: center; }

/* Bänder */
.band { padding: var(--band) 0; }
.band--papier { background: var(--papier); }
.band--dunkel { background: var(--petrol-900); color: rgba(255,255,255,.72); }
.band--dunkel h2, .band--dunkel h3 { color: var(--weiss); }
.band--petrol { background: var(--petrol-800); color: rgba(255,255,255,.74); }
.band--petrol h2, .band--petrol h3 { color: var(--weiss); }

/* =========================================================
   3  Kopf und Navigation
   ========================================================= */

/* Topbar und Kopf kleben gemeinsam. Frueher blieb nur die Navigation stehen;
   der Claim soll aber dauerhaft sichtbar bleiben. Die Hoehe steckt in
   --kopfhoehe, weil auch scroll-padding und das mobile Menue sie brauchen. */
.kopfbereich { position: sticky; top: 0; z-index: 100; }

.topbar { background: var(--petrol-900); color: rgba(255,255,255,.7); }
.topbar__inner {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 12px 26px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap;
}
.topbar__link {
  display: inline-flex; align-items: center; gap: 8px; color: inherit;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
}
.topbar__link:hover { color: var(--tuerkis-hell); text-decoration: none; }
.topbar__link svg { width: 13px; height: 13px; fill: currentColor; flex: 0 0 auto; }
/* Der Claim traegt die Signalfarbe — er ist das Erste, was gelesen wird,
   und bleibt beim Scrollen stehen. */
.topbar__claim {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange-hell); margin: 0 auto 0 0;
}
/* Notdienstnummer in der Topbar hervorheben */
.topbar__link--dringend { color: var(--orange-hell); }
.topbar__link--dringend:hover { color: #fff; }

/* position: relative bleibt noetig — das mobile Menue positioniert sich mit
   top: 100% daran. Das Kleben uebernimmt jetzt .kopfbereich. */
.kopf {
  background: var(--weiss); position: relative;
  border-bottom: 1px solid var(--linie-hell);
}
.kopf__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 80px;
}

.nav__liste { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav__punkt { position: relative; }
/* line-height muss hier ausgeschrieben stehen: Die Punkte mit Untermenue sind
   <button>, die uebrigen <a>. Buttons erben die Zeilenhoehe nicht vom body,
   sondern rechnen mit "normal" — ihr Kasten war dadurch rund 5 px flacher, und
   der orangene Strich sass sichtbar hoeher als bei den Nachbarpunkten. */
.nav__link {
  display: inline-flex; align-items: center; gap: 7px; padding: 30px 12px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  line-height: 1.65;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinte);
  background: none; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s ease, border-color .18s ease;
}
.nav__link:hover, .nav__link.ist-aktiv {
  color: var(--orange); border-bottom-color: var(--orange); text-decoration: none;
}
.nav__pfeil { width: 8px; height: 5px; fill: currentColor; transition: transform .18s ease; }
.nav__link[aria-expanded="true"] .nav__pfeil { transform: rotate(180deg); }

/* Rechtsbuendig zum eigenen Aufklapper statt linksbuendig: Die Navigation
   sitzt am rechten Rand, ein linksbuendiges Untermenue ragte zwischen etwa
   960 und 1200 px darueber hinaus und erzeugte waagerechtes Scrollen —
   auch im zugeklappten Zustand, weil versteckte Elemente die Scrollbreite
   weiterhin aufspannen. */
.nav__unter {
  position: absolute; top: 100%; left: auto; right: 0; min-width: 260px;
  list-style: none; margin: 0; padding: 6px 0;
  background: var(--petrol-900); box-shadow: 0 22px 44px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__punkt:hover .nav__unter,
.nav__punkt:focus-within .nav__unter,
.nav__unter.ist-offen { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__unter a {
  display: block; padding: 11px 20px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.8);
}
.nav__unter a:hover { background: var(--petrol-700); color: var(--weiss); text-decoration: none; }
.nav__unter li + li .nav__trenner { border-top: 1px solid var(--linie); margin: 6px 0; }

.nav-schalter {
  display: none; width: 46px; height: 46px; padding: 0;
  background: none; border: 0; cursor: pointer; position: relative;
}
.nav-schalter__balken,
.nav-schalter__balken::before,
.nav-schalter__balken::after {
  position: absolute; left: 11px; width: 24px; height: 2px; background: var(--tinte);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-schalter__balken { top: 22px; }
.nav-schalter__balken::before { content: ''; top: -8px; }
.nav-schalter__balken::after  { content: ''; top: 8px; }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken { background: transparent; }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken::before { transform: translateY(8px) rotate(45deg); }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken::after  { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   4  Startseite
   ========================================================= */

.hero { background: var(--petrol-900); color: var(--weiss); }
.hero__raster {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px;
  align-items: center; padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 92px);
}
.hero__titel {
  font-size: clamp(40px, 5.8vw, 72px); font-weight: 700;
  color: var(--weiss); margin-bottom: 26px; letter-spacing: -.03em;
}
.hero__titel span { display: block; color: var(--tuerkis-hell); }
.hero__text { font-size: 19px; color: rgba(255,255,255,.74); max-width: 46ch; margin-bottom: 34px; }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }

/* Doppelrolle: Hersteller UND Dienstleister — der härteste Unterschied im Markt.
   Zwei Felder direkt unter dem Hero-Text, bevor irgendetwas anderes kommt. */
.rolle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--linie); border: 1px solid var(--linie);
  margin-bottom: 34px; max-width: 560px;
}
.rolle__feld { background: var(--petrol-900); padding: 20px 22px; }
.rolle__marke {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tuerkis-hell); margin: 0 0 8px;
}
.rolle__text { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.72); margin: 0; }
.rolle__text strong { color: var(--weiss); font-weight: 600; }

/* Signature: Kreiselpumpe im Schnitt */
.zeichnung { width: 100%; max-width: 560px; margin-left: auto; color: var(--tuerkis-hell); }
/* Der Aufstellungsplan ist Querformat und vertraegt die volle Spaltenbreite. */
.zeichnung--plan { max-width: 100%; }
.zeichnung .wand { fill: url(#pte-schraffur); stroke: currentColor; stroke-width: 1.6; }
.zeichnung .fein { fill: none; stroke: currentColor; stroke-width: .7; opacity: .45; }
.zeichnung .gestrichelt { stroke-dasharray: 6 4; }
.zeichnung .achse {
  fill: none; stroke: currentColor; stroke-width: .7; opacity: .3;
  stroke-dasharray: 16 4 3 4;
}
.zeichnung .rad { fill: var(--petrol-900); stroke: currentColor; stroke-width: 1.5; }
.zeichnung .beschriftung path { fill: none; stroke: currentColor; stroke-width: .8; opacity: .5; }
.zeichnung .beschriftung text {
  font-family: var(--mono); font-size: 13px; letter-spacing: 1.2px;
  fill: currentColor; opacity: .62; stroke: none;
}
/* Nur das Laufrad dreht sich. transform-box: fill-box hält den Drehpunkt
   in der Mitte, unabhängig vom viewBox-Ursprung. */
.zeichnung .laufrad {
  transform-box: fill-box; transform-origin: center;
  animation: dreht 26s linear infinite;
}
@keyframes dreht { to { transform: rotate(360deg); } }

/* Kennzahlen */
.kennzahlen { background: var(--petrol-800); }
.kennzahlen__raster { display: grid; grid-template-columns: repeat(4, 1fr); }
.kennzahl { padding: 34px 28px; border-left: 1px solid var(--linie); }
.kennzahl:first-child { border-left: 0; padding-left: 0; }
.kennzahl__wert {
  font-family: var(--mono); font-size: clamp(26px, 2.6vw, 32px); font-weight: 500;
  color: var(--weiss); line-height: 1.1; margin-bottom: 6px;
}
.kennzahl__text {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0;
}

/* Leistungsraster: vier Felder, das Kerngeschäft groß */
.leistungen__raster { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; }
.spalte-klein { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }

.karte { position: relative; background: var(--papier); overflow: hidden; display: flex; flex-direction: column; }
.karte__bild { overflow: hidden; }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.karte:hover .karte__bild img { transform: scale(1.05); }
.karte__inhalt { padding: 32px; display: flex; flex-direction: column; flex: 1; }
.karte__titel { font-size: 27px; margin-bottom: 12px; }
.karte__text { color: var(--tinte-grau); font-size: 16px; }
.karte__link { margin-top: auto; }
.karte__marke {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tuerkis); margin-bottom: 14px;
}
.karte--gross .karte__bild { height: 320px; }
.karte--gross .karte__inhalt { padding: 38px; }
.karte--gross .karte__titel { font-size: 34px; }
.karte--quer { flex-direction: row; align-items: stretch; }
.karte--quer .karte__bild { flex: 0 0 40%; }
.karte--quer .karte__inhalt { padding: 28px; }
.karte--quer .karte__titel { font-size: 22px; }

/* Branchen: randlose Split-Screens */
.branche { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.branche__bild { position: relative; min-height: 520px; overflow: hidden; }
.branche__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.branche__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 7vw, 96px) 8vw clamp(56px, 7vw, 96px) 72px;
}
.branche__titel { font-size: clamp(28px, 3.2vw, 42px); }
.branche__text p { color: var(--tinte-grau); }
.branche--gedreht .branche__bild { order: -1; }
.branche--gedreht .branche__text { padding: clamp(56px, 7vw, 96px) 72px clamp(56px, 7vw, 96px) 8vw; }
.branche--dunkel { background: var(--petrol-900); color: rgba(255,255,255,.72); }
.branche--dunkel .branche__titel { color: var(--weiss); }
.branche--dunkel p { color: rgba(255,255,255,.68); }
.branche--hell { background: var(--papier); }

/* =========================================================
   5  Nachweise, Fabrikate, Bauarten, Anlagen
   ========================================================= */

/* Nachweisleiste — schließt die größte Lücke der Analyse.
   Kein Fließtextsatz mehr, sondern eine Karte mit Downloadknopf. */
/* minmax(min(Xpx, 100%), 1fr) statt minmax(Xpx, 1fr): Die feste Mindestbreite
   waere sonst auf sehr schmalen Geraeten breiter als der Bildschirm und wuerde
   die Seite waagerecht aufziehen. */
.zertifikate { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.zertifikat {
  background: var(--weiss); border: 1px solid var(--linie-hell);
  display: flex; flex-direction: column; border-top: 3px solid var(--tuerkis);
}

/* Die Urkunde selbst ist der Beleg — deshalb steht sie oben und nicht als
   Fussnote. object-fit: contain statt cover: Ein Dokument darf nicht
   angeschnitten werden, sonst sieht man Bruchstuecke von Logos statt einer
   erkennbaren Urkunde. Vollstaendig, klein, auf hellem Grund — wie ein
   Blatt auf dem Tisch. Der Klick oeffnet sie in voller Groesse. */
.zertifikat__bild {
  position: relative; display: block; overflow: hidden;
  height: 270px; padding: 20px;
  background: var(--papier-tief);
  border-bottom: 1px solid var(--linie-hell);
}
/* width: auto bei voller Hoehe — dadurch bekommt das Bildelement genau das
   Hochformat der Urkunde. Mit width: 100% waere die weisse Flaeche und der
   Schatten breiter als das Dokument gewesen: Die Urkunde haette verloren in
   einem weissen Kasten gestanden. */
.zertifikat__bild img {
  width: auto; height: 100%; max-width: 100%; margin: 0 auto;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
  box-shadow: 0 3px 14px rgba(4,32,37,.18);
  background: var(--weiss);
}
.zertifikat__bild:hover img { transform: scale(1.03); }
.zertifikat__lupe {
  position: absolute; right: 12px; bottom: 12px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--petrol-900); color: #fff; padding: 7px 12px;
  opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease;
}
.zertifikat__bild:hover .zertifikat__lupe,
.zertifikat__bild:focus-visible .zertifikat__lupe { opacity: 1; transform: none; }

.zertifikat__inhalt { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.zertifikat__siegel {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tuerkis); border: 1.5px solid var(--tuerkis);
  padding: 5px 11px; margin-bottom: 18px; align-self: flex-start;
}
.zertifikat__titel { font-size: 20px; margin-bottom: 6px; }
.zertifikat__aussteller {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--tinte-grau); margin: 0 0 16px;
}
.zertifikat__text { color: var(--tinte-grau); font-size: 15.5px; margin-bottom: 20px; }

/* Geltungsbereich und Laufzeit stehen woertlich auf der Urkunde. Sie als
   Datenliste zu setzen macht nachpruefbar, was genau zertifiziert ist. */
.zertifikat__daten { margin: 0 0 22px; font-size: 14.5px; }
.zertifikat__daten dt {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tuerkis); margin-bottom: 4px;
}
.zertifikat__daten dd { margin: 0 0 14px; color: var(--tinte); line-height: 1.5; }
.zertifikat__daten dd:last-child { margin-bottom: 0; }
.zertifikat__seit { color: var(--tinte-grau); font-size: 13.5px; }
.zertifikat__fuss { margin-top: auto; }
.zertifikat__fehlt {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-grau);
}

/* ---------- Knopf mit Symbol (Urkunde ansehen, Datei laden) ---------- */
.download {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte); border: 1px solid var(--linie-hell);
  padding: 11px 16px; transition: border-color .2s ease, background .2s ease;
}
.download:hover, .download:focus-visible {
  border-color: var(--tinte); background: var(--papier);
  color: var(--tinte); text-decoration: none;
}
/* Ohne feste Groesse skaliert das Symbol auf die Breite seines Behaelters —
   aus dem 14-px-Auge wird sonst ein bildschirmfuellendes. */
.download svg { width: 14px; height: 14px; fill: var(--orange); flex: 0 0 auto; }

/* ---------- Kachelraster (Bauarten) ---------- */
/* Linien liegen auf den Zellen, nicht als Fugenfarbe unter dem Raster.
   Sonst bliebe die letzte, nur teilweise gefuellte Zeile als grauer Block
   stehen — bei einer Liste, deren Laenge sich aendert, ein sicherer Fehler. */
/* 210 px Mindestbreite, nicht 160: Die Begriffe sind deutsche Komposita wie
   „Exzenterschneckenpumpen" — in schmalen Spalten liefen sie aus der Kachel
   heraus. hyphens: auto trennt sie sauber (das lang="de" am html-Element
   liefert dem Browser die Trennregeln). */
.kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  border-top: 1px solid var(--linie-hell); border-left: 1px solid var(--linie-hell);
}
.kachel {
  padding: 20px 16px; text-align: center;
  background: var(--weiss);
  border-right: 1px solid var(--linie-hell); border-bottom: 1px solid var(--linie-hell);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; line-height: 1.45;
  color: var(--tinte); display: flex; align-items: center; justify-content: center;
  min-height: 78px; transition: background .2s ease;
  hyphens: auto; overflow-wrap: break-word;
}
.kachel:hover { background: var(--tuerkis-blass); }

/* Auf dem dunklen Band brauchen die Kacheln einen eigenen Grund. Ohne ihn
   standen die Namen direkt auf dem Petrolton und waren schwer zu lesen —
   das Raster wirkte wie eine Linienzeichnung statt wie eine Liste. */
.kacheln--dunkel { border-top-color: var(--linie-stark); border-left-color: var(--linie-stark); }
.kacheln--dunkel .kachel {
  background: var(--petrol-700); color: #fff;
  border-right-color: rgba(255,255,255,.22); border-bottom-color: rgba(255,255,255,.22);
}
.kacheln--dunkel .kachel:hover { background: var(--tuerkis); }
.kacheln__fuss {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--tinte-grau); margin-top: 18px;
}
.band--dunkel .kacheln__fuss, .band--petrol .kacheln__fuss { color: rgba(255,255,255,.5); }

/* ---------- Bauarten, Anlagen, Merkmale als zweispaltige Liste ---------- */
.spezifikation {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 40px; margin: 32px 0 0;
}
.spezifikation__punkt { border-top: 1px solid var(--linie-hell); padding: 20px 0; }
.spezifikation__titel {
  font-size: 17px; font-weight: 600; color: var(--tinte);
  margin: 0 0 5px; letter-spacing: -.01em;
}
.spezifikation__text { font-size: 15.5px; color: var(--tinte-grau); margin: 0; }
.band--dunkel .spezifikation__punkt,
.band--petrol .spezifikation__punkt { border-top-color: var(--linie); }
.band--dunkel .spezifikation__titel,
.band--petrol .spezifikation__titel { color: var(--weiss); }
.band--dunkel .spezifikation__text,
.band--petrol .spezifikation__text { color: rgba(255,255,255,.66); }

/* ---------- Erreichbarkeit ---------- */
.erreichbar {
  background: var(--petrol-850); color: var(--weiss);
  border-left: 4px solid var(--orange);
}
.erreichbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; padding: 34px 0; flex-wrap: wrap;
}
.erreichbar__marke {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange-hell); margin: 0 0 10px;
}
.erreichbar__titel { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 8px; color: var(--weiss); }
.erreichbar__text { margin: 0; color: rgba(255,255,255,.68); font-size: 16px; max-width: 62ch; }
.erreichbar__nummer {
  font-family: var(--mono); font-size: clamp(22px, 2.6vw, 30px);
  color: var(--weiss); letter-spacing: .02em; white-space: nowrap;
}
.erreichbar__nummer:hover { color: var(--orange-hell); text-decoration: none; }

/* ---------- Prozessschritte ---------- */
.ablauf { counter-reset: schritt; display: grid; gap: 0; margin: 36px 0 0; }
.ablauf__schritt {
  counter-increment: schritt; position: relative;
  padding: 24px 0 24px 70px; border-top: 1px solid var(--linie-hell);
}
.ablauf__schritt::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .1em; color: var(--tuerkis);
  border: 1px solid var(--linie-hell); padding: 5px 10px;
}
.ablauf__titel { font-size: 19px; margin: 0 0 6px; }
.ablauf__text { margin: 0; color: var(--tinte-grau); font-size: 16px; }

/* =========================================================
   6  Fertigung, Geschichte, Ansprechpartner
   ========================================================= */

/* Werkstattzahlen — nur die Kacheln, für die ein Wert hinterlegt ist */
.werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 1px; background: var(--linie); }
.wert { background: var(--petrol-800); padding: 30px 26px; }
.wert__zahl {
  font-family: var(--mono); font-size: 38px; font-weight: 500;
  color: var(--weiss); line-height: 1; margin: 0 0 10px;
}
.wert__zahl span { font-size: 20px; color: var(--tuerkis-hell); margin-left: 3px; }
.wert__text {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0;
}

/* Zeitstrahl der Unternehmensgeschichte */
.zeitstrahl { margin: 44px 0 0; position: relative; }
.zeitstrahl::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px;
  background: var(--linie-hell);
}
.marke-jahr { position: relative; padding: 0 0 40px 42px; }
.marke-jahr:last-child { padding-bottom: 0; }
.marke-jahr::before {
  content: ''; position: absolute; left: -4px; top: 9px;
  width: 9px; height: 9px; background: var(--orange);
}
.marke-jahr__jahr {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .14em; color: var(--tuerkis); margin: 0 0 6px;
}
.marke-jahr__titel { font-size: 20px; margin: 0 0 8px; }
.marke-jahr__text { margin: 0; color: var(--tinte-grau); }
/* Noch nicht recherchierte Jahreszahl sichtbar, aber nicht schreiend */
.marke-jahr__jahr--offen { color: var(--tinte-grau); opacity: .7; }

/* Ansprechpartner — derzeit auf keiner Seite eingesetzt.
   Bleibt vorbereitet: Sobald Fotos und Durchwahlen vorliegen, lohnt der
   Abschnitt auf /uber-uns wieder (Analyse-Lücke „Niemand hat ein Gesicht"). */
.personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; margin-top: 40px; }
.person { background: var(--weiss); border: 1px solid var(--linie-hell); }
.person__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-tief); }
.person__bild img { width: 100%; height: 100%; object-fit: cover; }
.person__platzhalter {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 34px; letter-spacing: .08em;
  color: var(--tuerkis); background: var(--tuerkis-blass);
}
.person__inhalt { padding: 26px; }
.person__name { font-size: 21px; margin: 0 0 4px; }
.person__rolle {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tuerkis); margin: 0 0 14px;
}
.person__bereich { font-size: 15.5px; color: var(--tinte-grau); margin: 0 0 16px; }
.person__kontakt { font-size: 15px; margin: 0; line-height: 1.8; }

/* Meldungen */
.meldung { border-top: 1px solid var(--linie-hell); padding: 30px 0; }
.meldung__datum {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tuerkis); margin: 0 0 8px;
}
.meldung__titel { font-size: 23px; margin: 0 0 10px; }
.meldung__text { margin: 0; color: var(--tinte-grau); }

/* =========================================================
   7  Tabellen, Bildstrecken, Produktraster
   ========================================================= */

/* position: relative ist kein Schmuck: Die sr-only-Texte in der Werkstoff-
   matrix sind absolut positioniert. Ohne positionierten Vorfahren beziehen sie
   sich auf das Wurzelelement, entkommen damit dem scrollbaren Rahmen und
   spannen auf schmalen Schirmen die Seite um rund 50 px auf. */
.tabelle-rahmen {
  position: relative; overflow-x: auto;
  margin: 28px 0 8px; -webkit-overflow-scrolling: touch;
}
.tabelle {
  width: 100%; border-collapse: collapse; font-size: 15px;
  min-width: 520px; background: var(--weiss);
}
.tabelle caption {
  caption-side: top; text-align: left; font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tuerkis); padding-bottom: 12px;
}
.tabelle th, .tabelle td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--linie-hell); }
.tabelle thead th {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--weiss); background: var(--petrol-800);
  border-bottom: 0; white-space: nowrap;
}
.tabelle tbody th { font-weight: 600; color: var(--tinte); white-space: nowrap; }
.tabelle tbody tr:nth-child(even) { background: var(--papier); }
.tabelle tbody tr:hover { background: rgba(18,128,140,.07); }
.tabelle td { color: var(--tinte-grau); }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle__fussnote { font-size: 13px; color: var(--tinte-grau); margin: 10px 0 0; font-style: italic; }

/* Werkstoff-Matrix: Punkte statt Kreuze */
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tuerkis); }
.punkt--leer { background: transparent; border: 1px solid var(--linie-hell); }

/* Bildstrecken */
.bildstrecke { display: grid; gap: 20px; margin: 36px 0; }
.bildstrecke--2 { grid-template-columns: repeat(2, 1fr); }
.bildstrecke--3 { grid-template-columns: repeat(3, 1fr); }
/* Zeichnungen haben sehr unterschiedliche Seitenverhaeltnisse. Ohne die
   Flex-Spalte stuenden die Bildunterschriften nebeneinander auf drei
   verschiedenen Hoehen. */
.bildstrecke figure {
  margin: 0; background: var(--weiss); border: 1px solid var(--linie-hell);
  display: flex; flex-direction: column;
}
.bildstrecke img { width: 100%; height: auto; display: block; }
.bildstrecke figcaption { margin-top: auto; }
.bildstrecke figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinte-grau); padding: 12px 14px; border-top: 1px solid var(--linie-hell);
}
.bild-voll { margin: 36px 0; }
.bild-voll img { width: 100%; height: auto; display: block; background: var(--weiss); }
.bild-voll figcaption { font-size: 14px; color: var(--tinte-grau); margin-top: 10px; }

/* Produktraster */
.produkte__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.produkt {
  background: var(--weiss); display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .3s ease, box-shadow .3s ease;
}
.produkt:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(4,32,37,.13); text-decoration: none; }
.produkt__bild { height: 210px; overflow: hidden; background: var(--papier); }
.produkt__bild img { width: 100%; height: 100%; object-fit: cover; }
.produkt__inhalt { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.produkt__marke {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tuerkis); margin-bottom: 10px;
}
.produkt__titel { font-size: 20px; margin: 0 0 10px; line-height: 1.3; }
.produkt__text { color: var(--tinte-grau); font-size: 15px; margin: 0 0 18px; }
.produkt__mehr {
  margin-top: auto; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tuerkis);
}

/* Stellenanzeige */
.stelle { background: var(--weiss); border: 1px solid var(--linie-hell); padding: 38px; margin: 32px 0; }
.stelle__titel { font-size: 26px; margin: 0 0 6px; }
.stelle__art {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tuerkis); margin-bottom: 22px;
}
.stelle h4 {
  font-size: 15px; margin: 26px 0 8px; letter-spacing: 0;
  font-family: var(--mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--tuerkis);
}
.stelle .merkmale { margin: 12px 0 0; }

/* =========================================================
   8  Kontakt und Fuß
   ========================================================= */

.kontakt { background: var(--petrol-900); padding: var(--band) 0; }
.kontakt__raster {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 0;
  align-items: stretch; max-width: 1040px;
}
/* Rasterfelder haben von Haus aus min-width: auto und koennen deshalb nicht
   unter die min-content-Breite ihres Inhalts schrumpfen. Das feste
   reCAPTCHA-Widget zog die Spalte dadurch auf schmalen Geraeten ueber den
   Bildschirmrand hinaus. min-width: 0 gibt die Spalte frei; gekappt wird das
   Widget vom .captcha-rahmen. */
.kontakt__raster > * { min-width: 0; }
.karte-form { background: var(--weiss); padding: 48px; }
.karte-form h2 { font-size: 32px; margin-bottom: 8px; }
.karte-form__hinweis { color: var(--tinte-grau); font-size: 15px; margin-bottom: 32px; }

.feld { margin-bottom: 20px; }
.feld label {
  display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-grau); margin-bottom: 8px;
}
.feld input, .feld textarea, .feld select {
  width: 100%; padding: 13px 0; font-family: inherit; font-size: 16px; color: var(--tinte);
  background: transparent; border: 0; border-bottom: 1px solid var(--linie-hell); border-radius: 0;
  transition: border-color .18s ease;
}
.feld select { padding: 13px 0; cursor: pointer; }
.feld textarea { resize: vertical; min-height: 110px; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none; border-bottom-color: var(--orange); border-bottom-width: 2px; padding-bottom: 12px;
}
.feld [aria-invalid="true"] { border-bottom-color: #c0392b; }
.feld__fehler { display: block; margin-top: 6px; font-size: 13px; color: #c0392b; }
.honigtopf { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.formular__datenschutz { font-size: 12.5px; color: var(--tinte-grau); line-height: 1.6; margin: 26px 0; }

.hinweis { padding: 15px 18px; margin-bottom: 26px; font-size: 15px; border-left: 3px solid; }
.hinweis--ok { background: #eef7f4; border-color: var(--tuerkis); color: #0d4f4a; }
.hinweis--fehler { background: var(--orange-blass); border-color: var(--orange); color: #8c3005; }

.kontaktdaten {
  background: var(--petrol-800); padding: 48px; color: var(--weiss);
  display: flex; flex-direction: column; gap: 30px;
}
.kontaktdaten__block h3 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tuerkis-hell); margin-bottom: 10px;
}
.kontaktdaten__block p { font-size: 17px; margin: 0; color: var(--weiss); }
.kontaktdaten a { color: var(--weiss); }
.kontaktdaten a:hover { color: var(--tuerkis-hell); }
.kontaktdaten__fuss {
  margin-top: auto; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4);
}

.fuss {
  background: var(--petrol-900); color: rgba(255,255,255,.6);
  padding: 76px 0 0; border-top: 1px solid var(--linie);
}
.fuss__raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.fuss__marke p {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  line-height: 1.9; color: rgba(255,255,255,.45); margin: 0 0 18px;
}
.fuss__nachweis {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tuerkis-hell);
  border: 1px solid var(--linie-stark); padding: 6px 10px; margin-right: 8px;
}
.fuss__titel {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tuerkis-hell); margin-bottom: 20px;
}
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: 11px; }
.fuss__liste a { font-size: 15px; color: rgba(255,255,255,.62); }
.fuss__liste a:hover { color: var(--orange-hell); }
.fuss__zeile {
  border-top: 1px solid var(--linie); margin-top: 60px;
  padding-top: 24px; padding-bottom: 28px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.fuss__zeile p {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: rgba(255,255,255,.35); margin: 0;
}

/* =========================================================
   9  Unterseiten und Rechtstext
   ========================================================= */

.seitenkopf { background: var(--petrol-900); color: var(--weiss); padding: clamp(64px, 7vw, 92px) 0 clamp(52px, 6vw, 76px); }
.seitenkopf h1 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 700; letter-spacing: -.03em; }
.seitenkopf p { font-size: 19px; color: rgba(255,255,255,.72); max-width: 56ch; margin: 0; }

/* Brotkrumen */
.krumen { padding: 16px 0; border-bottom: 1px solid var(--linie-fein); background: var(--weiss); }
.krumen ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.krumen li::after { content: '/'; margin-left: 8px; color: var(--linie-hell); }
.krumen li:last-child::after { content: none; }
.krumen a { color: var(--tinte-grau); }
.krumen a:hover { color: var(--orange); }
.krumen [aria-current] { color: var(--tinte); }

.inhalt { padding: var(--band) 0; }

/* Lesespalte.
   .inhalt__spalte sitzt auf demselben Element wie .wrap. Wuerde hier eine
   kleinere max-width stehen, zoege das margin:0 auto der .wrap die ganze
   Spalte in die Mitte — der Fliesstext begaenne dann rund 300 px rechts von
   der Ueberschrift im Seitenkopf. Stattdessen behaelt die Spalte die volle
   Wrap-Breite, und die Zeilenlaenge wird an den Kindern begrenzt.
   Tabellen, Zeichnungen und Bildstrecken duerfen breiter laufen: Kennlinien
   und Masstabellen sind der Grund, warum jemand diese Seiten aufruft. */
.inhalt__spalte { max-width: var(--wrap); }
.inhalt__spalte > * { max-width: 760px; }
.inhalt__spalte > .tabelle-rahmen,
.inhalt__spalte > .bildstrecke,
.inhalt__spalte > .bild-voll,
.inhalt__spalte > .ablauf,
.inhalt__spalte > .zeitstrahl,
.inhalt__spalte > .spezifikation { max-width: 1000px; }
.inhalt__spalte h2 { font-size: clamp(25px, 2.8vw, 30px); margin-top: 52px; }
.inhalt__spalte h2:first-child { margin-top: 0; }
.inhalt__spalte h3 { font-size: 19px; margin-top: 34px; }
.inhalt__spalte p, .inhalt__spalte li { color: var(--tinte-grau); }
.inhalt__spalte > p:first-of-type { font-size: 18.5px; color: var(--tinte); }

/* Merksatz / Haltung — hebt das Verkaufsargument aus dem Fließtext */
.merksatz {
  border-left: 3px solid var(--orange); padding: 4px 0 4px 26px;
  margin: 36px 0; font-size: 20px; line-height: 1.5; color: var(--tinte);
}
.merksatz p { color: var(--tinte); margin: 0; }
.band--dunkel .merksatz p, .band--petrol .merksatz p { color: var(--weiss); }

.rechtstext h2 { font-size: 22px; margin-top: 42px; }
.rechtstext h3 { font-size: 17px; margin-top: 28px; }
.rechtstext p, .rechtstext li { font-size: 15.5px; line-height: 1.75; }
.rechtstext > p:first-of-type { font-size: 15.5px; color: var(--tinte-grau); }

/* Logo-Lockup (Pfade aus der Original-EPS) */
.marke {
  display: inline-flex; align-items: center; gap: 16px;
  color: var(--tuerkis); text-decoration: none; flex: 0 0 auto;
}
.marke:hover { text-decoration: none; }
.marke__zeichen { width: auto; height: 44px; flex: 0 0 auto; }
.marke__text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.marke__wortmarke { width: auto; height: 18px; color: var(--tinte); }
.marke__name { font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1; color: var(--tinte); }
.marke__zusatz {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .17em;
  text-transform: uppercase; line-height: 1; color: var(--tinte-grau);
}
.marke--negativ { color: var(--tuerkis-hell); }
.marke--negativ .marke__wortmarke, .marke--negativ .marke__name { color: #fff; }
.marke--negativ .marke__zusatz { color: rgba(255,255,255,.45); }

/* =========================================================
   10  Ex-Service
   ========================================================= */

.zeichnung--ex { max-width: 620px; }
/* .wand füllt fest mit #pte-schraffur; diese Zeichnung hat ihre eigene Schraffur */
.zeichnung--ex .wand { fill: url(#ex-schraffur); }
/* Drehachse exakt auf die Nabe legen.
   Die Grundregel dreht um die Mitte des Umrisses (transform-box: fill-box).
   Bei drei Schaufeln liegt diese Mitte gemessen bei 443/235 statt 450/230 --
   das Laufrad würde um 10 Einheiten eiern. view-box rechnet stattdessen im
   Koordinatensystem der Zeichnung, 450/230 ist damit exakt die Nabe.
   Browser ohne view-box-Unterstützung (vor Safari 15.4) fallen auf die
   Umrissmitte zurück: leichtes Eiern, aber nichts bricht. */
.zeichnung--ex .laufrad { transform-box: view-box; transform-origin: 450px 230px; }
.zeichnung .laser rect { fill: var(--petrol-900); }
.zeichnung .strahl {
  stroke: var(--orange-hell); stroke-width: 1.6; stroke-dasharray: 4 3;
  animation: strahl-laeuft 1.4s linear infinite;
}
.zeichnung .ziel { fill: var(--orange-hell); stroke: none; }
/* Die Ex-Kennzeichnung in der Zeichnung ist jetzt die echte Bildmarke:
   Flaechen statt Konturen, deshalb fill statt stroke. */
.zeichnung .ex-marke path { fill: currentColor; stroke: none; }
@keyframes strahl-laeuft { to { stroke-dashoffset: -14; } }

.ex-band { background: var(--petrol-800); color: rgba(255,255,255,.74); padding: var(--band) 0; }
.ex-band__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ex-band h2 { color: var(--weiss); font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 18px; }
.ex-band p { color: rgba(255,255,255,.72); }
.ex-band .merkmale li { color: rgba(255,255,255,.72); }
.ex-band .merkmale li::before { background: var(--orange-hell); }

.ex-marker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange-hell); margin-bottom: 16px;
}
/* Das Ex-Zeichen (Epsilon-x im Sechseck) stand hier frueher als nachgebauter
   Text-Kasten. Jetzt kommt die echte Bildmarke aus inc/ex-zeichen.php. */
.ex-zeichen { fill: currentColor; flex: 0 0 auto; display: inline-block; vertical-align: -.16em; }
.nav__link .ex-zeichen { margin-right: 2px; }
.nav__link.ist-ex, .nav__link.ist-ex.ist-aktiv { color: var(--orange); }

/* =========================================================
   11  Bewegung und Barrierefreiheit
   ========================================================= */

/* Nur verstecken, wenn JavaScript laeuft (html.js wird im Kopf gesetzt).
   Ohne Skript bleibt jeder Abschnitt sichtbar — ein ausgefallenes Skript
   darf keine Inhalte verschlucken. */
.js .zeigt {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1);
}
.js .zeigt.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .zeigt { opacity: 1; transform: none; }
}

@media print {
  .topbar, .nav, .nav-schalter, .kontakt, .skip-link, .krumen { display: none; }
  body { font-size: 12pt; color: #000; }
  .seitenkopf, .band--dunkel, .band--petrol, .fuss { background: #fff !important; color: #000 !important; }
  .seitenkopf h1, .band--dunkel h2, .band--petrol h2 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px) {
  .nav__link { padding: 30px 8px; font-size: 11px; letter-spacing: .1em; }
  .branche__text, .branche--gedreht .branche__text { padding: 72px 48px; }
}

@media (max-width: 960px) {
  .nav-schalter { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--weiss);
    border-top: 1px solid var(--linie-hell); box-shadow: 0 18px 34px rgba(0,0,0,.12);
    display: none; max-height: calc(100vh - var(--kopfhoehe)); overflow-y: auto;
  }
  .nav.ist-offen { display: block; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0; }
  .nav__liste > li { border-bottom: 1px solid var(--linie-hell); }
  .nav__liste > li:last-child { border-bottom: 0; }
  .nav__link {
    width: 100%; justify-content: space-between; padding: 16px 32px;
    border-bottom: 0; margin-bottom: 0;
  }
  .nav__unter {
    position: static; display: none; opacity: 0; visibility: hidden; transform: none;
    box-shadow: none; background: var(--papier); min-width: 0;
  }
  .nav__punkt:hover .nav__unter { display: none; }
  .nav__punkt .nav__unter.ist-offen { display: block; opacity: 1; visibility: visible; }
  .nav__unter a { color: var(--tinte); padding: 12px 44px; }
  .nav__unter a:hover { background: var(--linie-hell); color: var(--tinte); }

  /* Ab hier greift das Klappmenue — und ab hier passt die E-Mail-Adresse nicht
     mehr neben Claim und Telefonnummer. Nur noch das Symbol, sonst waechst der
     klebende Kopf um eine ganze Zeile. Die Adresse steht im aria-label. */
  .topbar__link--mail .topbar__adresse { display: none; }
  .topbar__link--mail svg { width: 15px; height: 15px; }

  .hero__raster { grid-template-columns: 1fr; gap: 44px; }
  .zeichnung { max-width: 420px; margin: 0 auto; }
  .rolle { max-width: none; }

  .kennzahlen__raster { grid-template-columns: 1fr 1fr; }
  .kennzahl { padding: 26px 22px; border-top: 1px solid var(--linie); }
  .kennzahl:first-child, .kennzahl:nth-child(2) { border-top: 0; }
  .kennzahl:nth-child(odd) { border-left: 0; padding-left: 0; }

  .leistungen__raster { grid-template-columns: 1fr; }
  .karte--quer { flex-direction: column; }
  .karte--quer .karte__bild { flex: none; height: 200px; }

  .branche { grid-template-columns: 1fr; }
  .branche__bild { min-height: 280px; }
  .branche--gedreht .branche__bild { order: -1; }
  .branche__text, .branche--gedreht .branche__text { padding: 56px 32px; }

  .produkte__raster { grid-template-columns: repeat(2, 1fr); }
  .bildstrecke--3 { grid-template-columns: repeat(2, 1fr); }

  .kontakt__raster { grid-template-columns: 1fr; }
  .karte-form, .kontaktdaten { padding: 34px 26px; }

  .ex-band__raster { grid-template-columns: 1fr; gap: 40px; }
  .ex-band .zeichnung { margin: 0 auto; }

  .fuss__raster { grid-template-columns: 1fr 1fr; }
  .erreichbar__inner { gap: 22px; }
}

/* Das reCAPTCHA-Widget bringt eine feste Breite von 304 px mit, die sich von
   aussen nicht aendern laesst. Auf schmalen Geraeten schiebt es sonst die
   gesamte Seite waagerecht auf.
   Wichtig: transform allein genuegt nicht — es veraendert nur die Darstellung,
   nicht die Layoutgroesse. Deshalb kappt zusaetzlich der Rahmen. */
.captcha-rahmen { max-width: 100%; }
@media (max-width: 420px) {
  .captcha-rahmen { overflow: hidden; height: 70px; }
  .captcha-rahmen .g-recaptcha { transform: scale(.86); transform-origin: left top; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 22px; }

  /* Der klebende Kopf darf auf dem Telefon nicht den halben Schirm fressen.
     Claim in eigener Zeile, darunter Telefon und E-Mail nebeneinander — die
     E-Mail nur als Symbol, weil die Adresse dort nicht danebenpasst. */
  :root { --kopfhoehe: 120px; }
  .topbar__inner {
    justify-content: flex-start; gap: 3px 22px;
    padding-top: 7px; padding-bottom: 7px;
  }
  .topbar__claim {
    flex: 1 0 100%; margin: 0;
    font-size: 9.5px; letter-spacing: .08em; line-height: 1.45;
  }
  .topbar__link { font-size: 11px; }
  .kopf__inner { min-height: 62px; }
  .marke__zeichen { height: 32px; }
  .kennzahlen__raster { grid-template-columns: 1fr; }
  .kennzahl { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); }
  .kennzahl:first-child { border-top: 0; }
  .rolle { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr; }
  .hero__knoepfe .knopf { width: 100%; justify-content: center; }
  .produkte__raster, .bildstrecke--2, .bildstrecke--3 { grid-template-columns: 1fr; }
  .stelle { padding: 26px; }
  .karte-form { padding: 28px 22px; }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .marke { gap: 12px; }
  .marke__zeichen { height: 36px; }
  .marke__wortmarke { height: 15px; }
  .marke__zusatz { display: none; }
  .ablauf__schritt { padding-left: 0; padding-top: 52px; }
  .ablauf__schritt::before { top: 22px; }
}