/* ============================================================
   kx-ui.css — gemeinsame Bedienelemente aller Seiten
   Wird von ui.py (Build-Stufe 4) in jede Seite eingebunden.
   Nutzt ausschliesslich die vorhandenen Design-Variablen
   (--ink, --bg, --brand, --line ...), damit Hell und Dunkel
   ohne eigene Farbtabelle funktionieren.
   ============================================================ */

/* ---------- 1. Skip-Link (nur wo er fehlte; Klasse wie bisher) ---------- */
.kxskip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#15171c;
  font-weight:700;padding:10px 16px;border-radius:0 0 10px 0;z-index:200;border-bottom:0}
.kxskip:focus{left:0}

/* ---------- 2. Scroll-Fortschritt ----------
   Sitzt an der Unterkante der klebenden Kopfzeile, nicht als eigene
   Leiste darueber. So verdeckt sie nichts und wandert nicht ueber Inhalte. */
.kxprog{position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:transparent;pointer-events:none;overflow:hidden}
.kxprog i{display:block;height:100%;width:100%;background:var(--brand);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}
@media print{.kxprog{display:none}}

/* ---------- 3a. Franzoesische Kopfzeile ----------
   Befund aus dem Breitentest: fr/index.html schiebt bei 1280 px elf Pixel
   ueber den Bildschirmrand hinaus, weil die franzoesischen Beschriftungen
   laenger sind als die deutschen ("Demander une offre" gegen "Angebot
   anfragen") und die Navigation dort noch waagerecht steht. Das gibt eine
   waagerechte Bildlaufleiste auf der franzoesischen Startseite.
   Bestand vor dieser Ergaenzung, nicht durch die neuen Bausteine erzeugt.
   Zwoelf Pixel weniger Innenabstand an der Angebots-Schaltflaeche reichen;
   sie bleibt sichtbar, nichts wird ausgeblendet. */
@media (min-width:1181px) and (max-width:1400px){
  :root[lang="fr"] .site-header .header-cta{padding-left:14px;padding-right:14px}
}

/* ---------- 3b. Farbschema-Wahl in der Fusszeile ----------
   Aufgebaut wie die Segmentschalter auf der Explorer-Seite (.seg): eine
   Pille mit drei gleich breiten Feldern, das gewaehlte in der Hausfarbe.
   Kein eigenes Aussehen erfinden, wo die Website schon eines hat.

   Zwei Punkte, die vorher nicht stimmten:
   - Die Felder waren unterschiedlich breit, weil "Hell" kuerzer ist als
     "System". Jetzt teilen sie sich die Breite zu gleichen Teilen.
   - Die Symbole standen in Textfarbe. Auf dieser Website sind Symbole
     goldbraun (var(--brand-d)) - so wie am Telefonhoerer in der Kopfzeile
     und an den Haken in den Listen. Im gewaehlten Feld kehrt sich das um:
     dort liegt die Hausfarbe hinten, Symbol und Wort stehen in Tinte. */
.kxthwrap{padding-top:0;padding-bottom:20px}
.kxth{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:22px 0 2px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--ff)}
.kxth__lb{font-size:.86rem;color:var(--muted)}
.kxth__seg{display:inline-flex;gap:5px;flex:none;
  background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:4px}
.kxth__seg button{flex:1 1 0;min-width:104px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--ff);font-size:.86rem;font-weight:700;
  background:transparent;color:var(--muted);
  transition:background-color .18s,color .18s}
.kxth__seg button svg{width:17px;height:17px;flex:none;
  stroke:var(--brand-d);fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .18s}
.kxth__seg button:hover{color:var(--ink);background:var(--bg-3)}
.kxth__seg button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,180,0,.55)}
.kxth__seg button[aria-pressed="true"]{background:var(--brand);color:#15171c}
.kxth__seg button[aria-pressed="true"] svg{stroke:#15171c}
.kxth__seg button[aria-pressed="true"]:hover{background:var(--brand)}
/* Sicherheitsnetz: haette eine Fusszeile weder .wrap noch .container,
   braechte die Zeile ihren Seitenrand selbst mit. Kommt derzeit nicht vor. */
footer > .kxth{max-width:var(--wide,64rem);margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;padding-bottom:18px}
/* Ohne JavaScript ist keine Wahl moeglich - dann gar nicht erst anzeigen. */
.kxth{display:none}
:root[data-theme-mode] .kxth{display:flex}
/* Auf schmalen Schirmen steht die Pille unter der Beschriftung. Rechts
   bleibt eine Spalte frei: dort liegen die schwebenden Schaltflaechen fest
   im Bild und wuerden sonst das letzte Feld verdecken - am Seitenende ist
   die Fusszeile genau die Stelle, an der sie sich treffen. */
@media (max-width:620px){
  .kxth{gap:10px}
  .kxth__lb{width:100%}
  .kxth__seg{width:auto;max-width:calc(100% - 74px)}
  .kxth__seg button{min-width:0;padding:0 9px;font-size:.82rem;gap:6px}
  .kxth__seg button svg{width:16px;height:16px}
  .kxthwrap{padding-bottom:26px}
}
@media print{.kxth{display:none!important}}

/* ---------- 4. Schwebende Schaltflaechen unten rechts ----------
   Kontakt unten, Nach-oben darueber. Beide ausserhalb der
   Systemgesten-Zone dank safe-area-inset. */
.kxfab{position:fixed;right:max(18px,env(safe-area-inset-right,0px));z-index:90;
  display:inline-flex;align-items:center;gap:9px;
  border-radius:999px;font-family:var(--ff);font-weight:700;font-size:.95rem;
  cursor:pointer;border:1px solid transparent;text-decoration:none;
  box-shadow:0 8px 24px rgba(21,23,28,.18);
  transition:transform .2s,box-shadow .2s,opacity .2s,visibility .2s}
.kxfab svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kxfab:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(21,23,28,.26)}
.kxfab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,180,0,.55),0 8px 24px rgba(21,23,28,.18)}

.kxfab--contact{bottom:calc(18px + env(safe-area-inset-bottom,0px));
  min-height:52px;padding:0 20px;background:var(--brand);color:#15171c;border-bottom:0}
.kxfab--contact:hover{background:var(--brand);}
.kxfab--search{bottom:calc(84px + env(safe-area-inset-bottom,0px));
  width:48px;height:48px;padding:0;justify-content:center;
  background:var(--bg);color:var(--ink);border-color:var(--line-2,rgba(128,136,148,.45))}
.kxfab--search:hover{background:var(--bg-2)}
.kxfab--top{bottom:calc(142px + env(safe-area-inset-bottom,0px));
  width:48px;height:48px;padding:0;justify-content:center;
  background:var(--bg);color:var(--ink);border-color:var(--line-2,rgba(128,136,148,.45));
  opacity:0;visibility:hidden}
.kxfab--top.on{opacity:1;visibility:visible}
.kxfab--top:hover{background:var(--bg-2)}
/* Unter 560 px nur das Symbol, damit die Schaltflaeche keine halbe
   Zeilenbreite frisst. */
@media (max-width:560px){
  .kxfab--contact{width:52px;padding:0;justify-content:center}
  .kxfab--contact span{display:none}
}
@media print{.kxfab{display:none}}

/* ---------- 5. Bild-Einblendung ----------
   Startwert ist sichtbar. Erst das Skript setzt .kxfade, damit ohne
   JavaScript kein Bild unsichtbar bleibt. */
img.kxfade{opacity:0;transition:opacity .45s ease-out}
img.kxfade.kxin{opacity:1}
.kxsk{position:relative;background:var(--bg-3)}
.kxsk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%);animation:kxsh 1.4s infinite}
:root[data-theme="dark"] .kxsk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
@keyframes kxsh{100%{transform:translateX(100%)}}
.kxsk.kxdone::after{display:none}

/* ---------- 6. Cookie-/Speicherhinweis ----------
   Kein Modal, keine Sperre: die Seite bleibt lesbar und bedienbar. */
.kxcb{position:fixed;left:max(14px,env(safe-area-inset-left,0px));
  right:max(14px,env(safe-area-inset-right,0px));
  bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:120;
  max-width:560px;margin-inline:auto;
  background:var(--bg);color:var(--ink-2);border:1px solid var(--line-2,rgba(128,136,148,.45));
  border-radius:14px;padding:16px 18px;
  box-shadow:0 18px 50px rgba(21,23,28,.22);
  font-family:var(--ff);font-size:.94rem;line-height:1.55}
.kxcb[hidden]{display:none!important}
.kxcb h2{margin:0 0 6px;font-size:1rem;font-weight:800;color:var(--ink);line-height:1.3}
.kxcb p{margin:0 0 12px}
.kxcb a{color:var(--ink);border-bottom:1px solid var(--brand)}
.kxcb__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.kxcb button{font-family:var(--ff);font-weight:700;font-size:.92rem;
  padding:10px 18px;min-height:44px;border-radius:10px;cursor:pointer;
  background:var(--brand);color:#15171c;border:1px solid transparent;
  transition:transform .18s,box-shadow .18s}
.kxcb button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(245,180,0,.35)}
.kxcb button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,180,0,.55)}
@media print{.kxcb{display:none}}

/* ---------- 7. Suche ---------- */
.kxsr{position:fixed;inset:0;z-index:300;display:none}
.kxsr.on{display:block}
.kxsr__bd{position:absolute;inset:0;background:rgba(10,11,13,.55);
  backdrop-filter:blur(3px)}
.kxsr__pn{position:relative;max-width:660px;
  margin:calc(8vh + env(safe-area-inset-top,0px)) auto 0;
  background:var(--bg);border:1px solid var(--line-2,rgba(128,136,148,.45));border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;
  max-height:80vh;display:flex;flex-direction:column}
@media (max-width:700px){.kxsr__pn{margin:0 auto;max-height:100vh;height:100dvh;border-radius:0;border:0}}
.kxsr__hd{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line);flex:none}
.kxsr__hd svg{width:20px;height:20px;flex:none;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}
.kxsr__in{flex:1;min-width:0;font-family:var(--ff);font-size:1.05rem;
  background:transparent;border:0;color:var(--ink);padding:10px 2px;min-height:44px}
.kxsr__in:focus{outline:none}
.kxsr__in::placeholder{color:var(--muted)}
.kxsr__x{flex:none;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  color:var(--muted);font:700 .78rem/1 var(--ff);padding:8px 10px;cursor:pointer;min-height:36px}
.kxsr__x:hover{background:var(--bg-3);color:var(--ink)}
.kxsr__x:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,180,0,.5)}
.kxsr__bd2{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.kxsr__note{padding:18px;color:var(--muted);font-size:.92rem;margin:0}
.kxsr__list{list-style:none;margin:0;padding:6px}
.kxsr__list a{display:block;padding:11px 12px;border-radius:10px;border-bottom:0;
  color:var(--ink);text-decoration:none}
.kxsr__list a:hover,.kxsr__list li.sel a{background:var(--bg-2)}
.kxsr__list a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,180,0,.5)}
.kxsr__t{display:block;font-weight:700;font-size:.99rem;line-height:1.35;margin-bottom:2px}
.kxsr__s{display:block;font-size:.86rem;color:var(--muted);line-height:1.45;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kxsr__s mark,.kxsr__t mark{background:var(--brand-soft);color:var(--ink);padding:0 1px;border-radius:2px}
.kxsr__k{display:block;padding:8px 14px;border-top:1px solid var(--line);flex:none;
  font-size:.79rem;color:var(--muted)}
.kxsr__k kbd{font:inherit;font-weight:700;background:var(--bg-2);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px}
body.kxlock{overflow:hidden}

/* ---------- 8. Aktualisierungsdatum ---------- */
.kxupd{display:block;font-size:.84rem;color:var(--muted);
  margin:0 0 4px;font-variant-numeric:tabular-nums}

/* ---------- 9. Newsletter: Erfolg und Fehler ---------- */
.kxnl__done,.kxnl__bad{display:flex;gap:10px;align-items:flex-start;
  border-radius:12px;padding:13px 15px;margin-top:12px;
  font-size:.93rem;line-height:1.5}
.kxnl__done{background:var(--ok-soft,rgba(29,107,69,.12));color:var(--ink-2);
  border:1px solid var(--ok,#1d6b45)}
.kxnl__done svg{stroke:var(--ok,#1d6b45)}
.kxnl__bad{background:var(--crit-soft,rgba(179,38,30,.12));color:var(--ink-2);
  border:1px solid var(--crit,#b3261e)}
.kxnl__bad svg{stroke:var(--crit,#b3261e)}
.kxnl__done svg,.kxnl__bad svg{width:19px;height:19px;flex:none;margin-top:2px;
  stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kxnl__done[hidden],.kxnl__bad[hidden]{display:none!important}
.kxspin{display:inline-block;width:15px;height:15px;flex:none;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:kxrot .7s linear infinite}
@keyframes kxrot{to{transform:rotate(360deg)}}

/* ---------- 9b. Dateianhang im Kontaktformular ----------
   Die Liste zeigt, was tatsaechlich angehaengt ist. Ohne sie sieht man im
   Browser nur "3 Dateien" und weiss nicht, welche - und ob die zu grosse
   dabei aussortiert wurde. */
.kxfl{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.kxfl[hidden]{display:none!important}
.kxfl li{display:flex;align-items:center;gap:10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:8px 8px 8px 12px;font-size:.88rem}
.kxfl__n{flex:1;min-width:0;color:var(--ink);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kxfl__s{flex:none;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.82rem}
.kxfl__x{flex:none;width:30px;height:30px;line-height:1;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  font:700 1.1rem/1 var(--ff);transition:border-color .18s,color .18s,background-color .18s}
.kxfl__x:hover{border-color:var(--crit,#b3261e);color:var(--crit,#b3261e);
  background:var(--crit-soft,rgba(179,38,30,.12))}
.kxfl__x:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,180,0,.5)}
.kxfe{margin:10px 0 0;padding:10px 13px;border-radius:10px;font-size:.88rem;line-height:1.5;
  background:var(--crit-soft,rgba(179,38,30,.12));color:var(--ink-2);
  border:1px solid var(--crit,#b3261e);border-left-width:3px}
.kxfe[hidden]{display:none!important}

/* ---------- 10. Aufklappbare Abschnitte: sichtbarer Zustand ---------- */
details>summary{cursor:pointer}
details>summary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,180,0,.5);border-radius:6px}

/* ---------- 11. Bewegung reduzieren ----------
   Fortschritt und Einblendung bleiben, verlieren aber die Animation:
   Beides transportiert Information, kein Dekor. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .kxsk::after{display:none}
  img.kxfade{opacity:1!important}
}

/* ============================================================
   12. Druckfassung
   Ziel: lesbares Dokument auf Papier. Bedienelemente verschwinden,
   Aufklappbares wird geoeffnet, Ziele externer Links werden genannt.
   ============================================================ */
@media print{
  @page{margin:16mm 14mm}
  :root{--ink:#000;--ink-2:#111;--muted:#444;--line:#bbb;--line-2:#999;
    --bg:#fff;--bg-2:#fff;--bg-3:#fff;--brand-soft:#fff;--code-bg:#f2f2f2}
  html,body{background:#fff!important;color:#000!important;font-size:10.5pt;line-height:1.45}
  .site-header,.kxlang,.burger,.nav-links,.nav-phone,.nav-back,
  .kxskip,.kxprog,.kxfab,.kxcb,.kxsr,.site-footer nav,
  video,iframe,.kxnl,form{display:none!important}
  a{color:#000!important;text-decoration:none!important;
    border-bottom:0!important;background:none!important}
  /* Ziel nur bei echten externen Verweisen nennen, nicht bei Ankern
     und nicht bei tel:/mailto:. */
  a[href^="http"]:not([href*="keg-exchange.com"])::after{
    content:" (" attr(href) ")";font-size:8.5pt;color:#444;word-break:break-all}
  details{display:block!important}
  details>summary{list-style:none;font-weight:700}
  details>summary::-webkit-details-marker{display:none}
  details:not([open])>*{display:revert!important}
  h1,h2,h3,h4{break-after:avoid-page;page-break-after:avoid;color:#000!important}
  p,li,figure,table,pre,blockquote{orphans:3;widows:3}
  figure,table,pre,blockquote,.notebox,.warnbox{break-inside:avoid-page;page-break-inside:avoid}
  thead{display:table-header-group}
  tr{break-inside:avoid;page-break-inside:avoid}
  img,svg{max-width:100%!important;break-inside:avoid}
  .wrap,.container{max-width:none!important;padding:0!important}
  *{box-shadow:none!important;text-shadow:none!important;filter:none!important}
  .kxupd{color:#444!important}
}

/* ---------- Dateifelder im Raster ----------
   Ein input[type=file] bringt eine eigene Mindestbreite mit: die
   Beschriftung des Knopfes plus "Keine Datei ausgewaehlt". Auf der
   Aobaosi-Seite waren das 393 px. Weil ein Rasterfeld standardmaessig
   min-width:auto hat, zieht diese Mindestbreite die ganze Spalte auf -
   dort auf 345 px bei 360 px Fensterbreite, und die Seite lief um neun
   Pixel ueber. min-width:0 gibt die Spalte wieder frei; das Feld selbst
   darf dann schrumpfen und schneidet seine Beschriftung ab. */
input[type="file"]{min-width:0;max-width:100%;box-sizing:border-box}
/* Nur die Formularspalten freigeben, nicht jedes Rasterfeld: sonst
   fallen zweispaltige Abschnitte, die bei 360 px nicht umbrechen,
   auf eine Breite zusammen, in der der Text nicht mehr passt. */
.form-grid>*,.form2>*,.form-wrap>*{min-width:0}

/* ---------- Kein Querbalken durch Zierrat ----------
   Der Schimmer hinter dem kleinen Fass in der Mietkarte
   (.kegminiw.kegfx::after) ist 210 % breit und absichtlich ueber den
   Rand hinaus gemalt. Er hat auf der Startseite ueber den ganzen
   mittleren Breitenbereich genau ein Pixel Querlauf erzeugt.
   overflow-x:clip schneidet nur waagerecht ab und macht - anders als
   hidden - keinen Scrollbereich auf; die klebende Kopfzeile liegt
   ausserhalb von main und bleibt davon unberuehrt. */
main{overflow-x:clip}

/* Kurzmarken (.chip) stehen im Deutschen in einer Zeile. Franzoesisch und
   Spanisch brauchen dafuer mehr Platz - auf schmalen Schirmen duerfen sie
   deshalb umbrechen, sonst schiebt sich die Seite auf. */
@media(max-width:760px){.chip{white-space:normal!important;max-width:100%}}

/* Spanische und franzoesische Ueberschriften enthalten laengere Woerter als
   die deutschen. Ohne Trennung schiebt ein Wort wie "reacondicionamiento"
   die Seite auf schmalen Schirmen auf. */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto}

/* ---------- 9. Bildkoepfe: Seitenkopf mit Film oder Standbild ----------
   Die meisten Unterseiten begannen mit einer reinen Textzeile auf grauem
   Grund. Jetzt liegt dahinter Material aus der eigenen Werkstatt und aus
   den CAD-Animationen, entsaettigt und abgedunkelt, damit die Hausfarbe
   die einzige Farbe im Kopf bleibt. Das Standbild steht sofort; den Film
   haengt kx-ui.js nur auf breiten Bildschirmen an und laesst ihn weg,
   wenn jemand weniger Bewegung eingestellt hat oder im Sparmodus surft.
   Zwei Kopfvarianten gibt es auf der Website: header.masthead auf Blog-,
   Rechner- und Werkzeugseiten, header.top auf den drei Musterseiten.
   Beide bekommen dieselbe Behandlung. */
header.masthead.mh-media,
header.top.mh-media{position:relative;overflow:hidden;isolation:isolate;
  background:#0f1014;border-bottom:0;padding:0}
header.masthead.mh-media .mh-bg,
header.top.mh-media .mh-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
header.masthead.mh-media .mh-bg img,header.masthead.mh-media .mh-bg video,
header.top.mh-media .mh-bg img,header.top.mh-media .mh-bg video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.08) brightness(.66)}
header.masthead.mh-media .mh-bg video,
header.top.mh-media .mh-bg video{opacity:0;transition:opacity 1.2s ease}
header.masthead.mh-media .mh-bg video.on,
header.top.mh-media .mh-bg video.on{opacity:1}
header.masthead.mh-media .mh-scrim,
header.top.mh-media .mh-scrim{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(15,16,20,.94) 0%,rgba(15,16,20,.80) 44%,rgba(15,16,20,.42) 100%),
    linear-gradient(0deg,rgba(15,16,20,.80) 0%,rgba(15,16,20,0) 58%)}
header.masthead.mh-media .mh-line,
header.top.mh-media .mh-line{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--brand)}
header.masthead.mh-media .wrap,
header.top.mh-media .wrap{position:relative;z-index:1;
  padding-top:clamp(64px,9vw,108px);padding-bottom:clamp(48px,6vw,78px)}
header.masthead.mh-media h1,
header.top.mh-media h1{color:#fff}
header.masthead.mh-media .kicker,header.masthead.mh-media .eyebrow,
header.top.mh-media .kicker,header.top.mh-media .eyebrow{color:var(--brand)}
header.masthead.mh-media .standfirst,header.masthead.mh-media .wrap > p,
header.top.mh-media .standfirst,header.top.mh-media .wrap > p{color:rgba(255,255,255,.86)}
header.masthead.mh-media .byline,header.masthead.mh-media .metaline,
header.top.mh-media .byline,header.top.mh-media .metaline{color:rgba(255,255,255,.74)}
header.masthead.mh-media .byline b,header.masthead.mh-media .metaline b,
header.top.mh-media .byline b,header.top.mh-media .metaline b{color:#fff}
header.masthead.mh-media .wrap a,
header.top.mh-media .wrap a{color:#fff;text-decoration-color:var(--brand)}
@media (max-width:720px){
  header.masthead.mh-media .mh-bg video,
  header.top.mh-media .mh-bg video{display:none}
  header.masthead.mh-media .mh-scrim,
  header.top.mh-media .mh-scrim{background:
    linear-gradient(180deg,rgba(15,16,20,.70) 0%,rgba(15,16,20,.90) 70%,rgba(15,16,20,.95) 100%)}
}
@media (prefers-reduced-motion:reduce){
  header.masthead.mh-media .mh-bg video,
  header.top.mh-media .mh-bg video{display:none}
}
@media print{
  header.masthead.mh-media,header.top.mh-media{background:none}
  header.masthead.mh-media .mh-bg,header.top.mh-media .mh-bg{display:none}
  header.masthead.mh-media h1,header.top.mh-media h1,
  header.masthead.mh-media .standfirst,header.top.mh-media .standfirst,
  header.masthead.mh-media .wrap > p,header.top.mh-media .wrap > p,
  header.masthead.mh-media .byline,header.top.mh-media .byline,
  header.masthead.mh-media .metaline,header.top.mh-media .metaline{color:#000}
}

/* Die Steigrohr-Animation nutzt header.hd statt masthead oder top.
   Dieselben Regeln, nur der Selektor ist ein anderer. */
header.hd.mh-media{position:relative;overflow:hidden;isolation:isolate;background:#0f1014;border-bottom:0;padding:0}
header.hd.mh-media .mh-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
header.hd.mh-media .mh-bg img,header.hd.mh-media .mh-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08) brightness(.66)}
header.hd.mh-media .mh-bg video{opacity:0;transition:opacity 1.2s ease}
header.hd.mh-media .mh-bg video.on{opacity:1}
header.hd.mh-media .mh-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,16,20,.94) 0%,rgba(15,16,20,.80) 44%,rgba(15,16,20,.42) 100%),linear-gradient(0deg,rgba(15,16,20,.80) 0%,rgba(15,16,20,0) 58%)}
header.hd.mh-media .mh-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand)}
header.hd.mh-media .wrap{position:relative;z-index:1;padding-top:clamp(64px,9vw,108px);padding-bottom:clamp(48px,6vw,78px)}
header.hd.mh-media h1{color:#fff}
header.hd.mh-media .kicker,header.hd.mh-media .eyebrow{color:var(--brand)}
header.hd.mh-media .dek,header.hd.mh-media .standfirst,header.hd.mh-media .wrap > p{color:rgba(255,255,255,.86)}
header.hd.mh-media .wrap a{color:#fff;text-decoration-color:var(--brand)}
@media (max-width:720px){header.hd.mh-media .mh-bg video{display:none}
  header.hd.mh-media .mh-scrim{background:linear-gradient(180deg,rgba(15,16,20,.70) 0%,rgba(15,16,20,.90) 70%,rgba(15,16,20,.95) 100%)}}
@media (prefers-reduced-motion:reduce){header.hd.mh-media .mh-bg video{display:none}}
@media print{header.hd.mh-media{background:none}header.hd.mh-media .mh-bg{display:none}
  header.hd.mh-media h1,header.hd.mh-media .dek,header.hd.mh-media .wrap > p{color:#000}}

/* Dunkle Quellen: die CAD-Animationen stehen auf schwarzem Grund und
   verschwinden unter der normalen Abdunklung. mh-lift hebt sie an und
   nimmt den Schleier zurueck, damit das Bauteil noch zu sehen ist. */
header.mh-media.mh-lift .mh-bg img,
header.mh-media.mh-lift .mh-bg video{filter:grayscale(1) contrast(1.02) brightness(1.25)}
header.mh-media.mh-lift .mh-scrim{background:
  linear-gradient(100deg,rgba(15,16,20,.92) 0%,rgba(15,16,20,.68) 46%,rgba(15,16,20,.18) 100%),
  linear-gradient(0deg,rgba(15,16,20,.62) 0%,rgba(15,16,20,0) 62%)}
@media (max-width:720px){
  header.mh-media.mh-lift .mh-scrim{background:
    linear-gradient(180deg,rgba(15,16,20,.62) 0%,rgba(15,16,20,.88) 70%,rgba(15,16,20,.94) 100%)}
}

/* Die beiden AOBAOSI-Seiten haben schon einen eigenen Kopf in Herstellerblau.
   Dort kommt der Werksfilm nur hinter den vorhandenen Verlauf, entsaettigt;
   die Farbe der Seite bleibt, es kommt nur Bewegung dazu. */
.hero .hero-vid{position:absolute;inset:0;z-index:-4;overflow:hidden}
.hero .hero-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;filter:grayscale(1) contrast(1.06) brightness(.8);opacity:0;transition:opacity 1.2s ease}
.hero .hero-vid video.on{opacity:1}
@media (max-width:720px){.hero .hero-vid{display:none}}
@media (prefers-reduced-motion:reduce){.hero .hero-vid{display:none}}

/* Die Vorzeile ist auf mehreren Seiten ein <p>. Die allgemeine Regel fuer
   Absaetze im Bildkopf hat sie sonst mit eingefaerbt; hier bekommt sie die
   Hausfarbe zurueck. */
header.masthead.mh-media .wrap > p.kicker,
header.masthead.mh-media .wrap > p.eyebrow,
header.top.mh-media .wrap > p.kicker,
header.top.mh-media .wrap > p.eyebrow,
header.hd.mh-media .wrap > p.kicker,
header.hd.mh-media .wrap > p.eyebrow{color:var(--brand)}