/* ═══════════════════════════════════════════════════════════════════
   Archivo (variable) — lokal eingebunden, kein CDN nötig
   ═══════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../vendor/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../vendor/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════
   Basis
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#201e1d; --bg:#f3f2f2; --surface:#eae9e9;
  --muted:#444141; --muted-2:#605d5d; --muted-3:#7d7979; --on-dark:#bab6b6;
  --line:rgba(32,30,29,.25); --line-soft:rgba(32,30,29,.2);
  /* Struktur- und Rasterlinien (Abschnittstrenner, Raster, Blockrahmen).
     Zwei Stellschrauben für den ganzen Auftritt: Stärke und Deckung.
     Die Rahmen der Bedienelemente bleiben bewusst bei 2px Tinte — sie sind
     Bedienhinweis, nicht Dekoration, und brauchen den Kontrast. */
  --rule-w:1px; --rule-c:rgba(32,30,29,.72);
  /* Markenfarben werden von app.js auf #app gesetzt */
  --brand:#931916; --brand-on:#fff; --brand-d:#931916; --brand-p:#6d1512; --brand-l:#e0574f; --brand-t:#f9f0ef;
}
*{box-sizing:border-box}
/* Die Marke ist bewusst auf eine helle Welt festgelegt (Warmweiß #f3f2f2 auf
   Tinte #201e1d). Kein Dark-Mode-Gegenstück: das wäre Markendesign, das der
   Kunde nie freigegeben hat. Deshalb hier explizit verankert, damit auch
   eingebettete Vorschauen und Systemeinstellungen die Seite hell rendern. */
html{scroll-behavior:smooth;background:var(--bg);color-scheme:light}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-bottom:60px; /* Platz für die Sticky-Bar */
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand-d)}
input,textarea,select,button{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand-d);outline-offset:2px}
::selection{background:var(--brand);color:var(--brand-on)}
h1,h2,h3{margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
svg.i{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.125em;flex:none}

.wrap{max-width:1360px;margin:0 auto;padding:0 40px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-d)}
.h2{font-size:clamp(32px,3.6vw,52px);font-weight:800;line-height:1.02;letter-spacing:-.035em}
.rule{border-bottom:var(--rule-w) solid var(--rule-c)}

/* ═══════════════════════════════════════════════════════════════════
   Navigation
   ═══════════════════════════════════════════════════════════════════ */
/* Nav auf Tinte, wie die Kacheln. Trennlinien darin müssen hell sein. */
.nav{position:sticky;top:0;z-index:60;background:var(--ink);color:var(--bg);border-bottom:var(--rule-w) solid var(--rule-c)}
.nav-in{display:flex;align-items:stretch;gap:32px;height:76px}
.nav-brand{display:flex;align-items:center;gap:14px;flex:none}
.nav-brand .mark{height:40px;width:40px;flex:none;display:block;background-position:center;background-size:contain;background-repeat:no-repeat}
.nav-brand .name{font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.05;max-width:130px}
.nav-links{flex:1;min-width:0;display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.nav-links a{padding:4px 0;border-bottom:2px solid transparent;transition:color .3s ease,border-color .3s ease}
.nav-links a:hover{border-bottom-color:var(--brand-l);color:var(--brand-l)}
.nav-actions{display:flex;align-items:center;flex:none;margin-left:auto}
.btn-outline{height:44px;display:flex;align-items:center;gap:10px;padding:0 16px;background:transparent;border:2px solid rgba(243,242,242,.45);color:var(--bg);font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease}
.btn-outline:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.btn-outline .dot{width:10px;height:10px;background:var(--brand-l);display:block}
.nav-more{display:none;margin-right:12px;padding:0 14px}
.nav-phone{height:44px;display:flex;align-items:center;padding:0 20px;background:var(--brand);color:var(--brand-on);font-size:13px;font-weight:600;letter-spacing:.02em;margin-left:12px;gap:9px}
.nav-phone:hover{background:var(--brand-p);color:var(--brand-on)}

.switcher{border-top:1px solid rgba(243,242,242,.22);background:#171514}
.switcher-in{display:grid;grid-template-columns:repeat(5,1fr)}
.switcher button,.switcher-in>a{text-align:left;background:transparent;border:0;border-right:1px solid rgba(243,242,242,.18);padding:22px 20px;cursor:pointer;display:flex;flex-direction:column;gap:10px;color:var(--bg);transition:background .3s ease}
.switcher button:hover,.switcher-in>a:hover{background:var(--ink)}
.switcher .mark{height:34px;width:34px;display:block;background-position:center;background-size:contain;background-repeat:no-repeat}
.switcher .s{font-size:13px;font-weight:700;letter-spacing:-.01em}
.switcher .t{font-size:12px;color:var(--on-dark);line-height:1.35}
.switcher button[aria-current="true"]{background:var(--ink)}
/* Noch nicht fertige Marken: erkennbar vorhanden, aber sichtbar zurückgenommen. */
.switcher button.soon{cursor:default;opacity:.38}
.switcher button.soon:hover{background:transparent}
.switcher button.soon .mark{filter:grayscale(1)}
.switcher button.soon .t{font-style:italic}

.drawer{border-top:1px solid rgba(243,242,242,.22);background:#171514;color:var(--bg);padding:8px 40px 20px;display:flex;flex-direction:column}
.drawer a{padding:14px 0;border-bottom:1px solid rgba(243,242,242,.18);font-size:17px;font-weight:700;letter-spacing:-.02em}
.drawer a:last-of-type{border-bottom:0}
.drawer .call{margin-top:14px;background:var(--brand);color:var(--brand-on);padding:14px 18px;font-size:15px;font-weight:600;border-bottom:0}
.drawer .call:hover{background:var(--brand-p);color:var(--brand-on)}
[hidden]{display:none !important}

/* ═══════════════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;border-bottom:var(--rule-w) solid var(--rule-c)}
.hero-grid{position:relative;display:grid;grid-template-columns:7fr 5fr;gap:0;align-items:stretch;min-height:640px}
.hero-text{padding:88px 56px 72px 0;display:flex;flex-direction:column;justify-content:center}
.hero-kick{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.hero-kick .bar{width:40px;height:2px;background:var(--brand);display:block}
.hero h1{font-size:clamp(48px,6.4vw,92px);font-weight:800;line-height:.94;letter-spacing:-.04em;text-wrap:balance}
.hero h1 .b{color:var(--brand-d)}
.hero-lead{margin-top:28px;max-width:56ch;font-size:17px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.callback{margin-top:40px;border:2px solid var(--ink);background:#fff;display:flex;flex-wrap:wrap;align-items:stretch;max-width:560px}
.callback input{flex:1;min-width:200px;border:0;padding:16px 18px;font-size:15px;background:transparent}
.callback button{border:0;border-left:2px solid var(--ink);background:var(--brand);color:var(--brand-on);padding:16px 22px;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.callback button:hover{background:var(--brand-p)}
.form-done{margin-top:12px;font-size:13px;font-weight:600;color:var(--brand-d)}
/* Schlaegt der Versand fehl, sagt dieselbe Zeile das auch - in Tinte statt
   Markenfarbe, damit es sich nicht wie eine Bestaetigung liest. */
.form-done.fehler{color:var(--ink);border-left:2px solid var(--ink);padding-left:10px}
/* Honigtopf gegen Bots: fuer Menschen unsichtbar, fuer Skripte ausfuellbar. */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}
.hero-alt{margin-top:16px;font-size:13px;color:var(--muted-2)}
.hero-alt a{font-weight:600;border-bottom:1px solid currentColor}
.hero-img{position:relative;border-left:var(--rule-w) solid var(--rule-c);margin-right:-40vw;padding-right:40vw;background:var(--surface);overflow:hidden}
.hero-img .pic{position:absolute;inset:-8% 0;will-change:transform}
.hero-img .pic span{display:block;width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat;filter:grayscale(1) contrast(1.08)}
.hero-stat{position:absolute;left:0;height:fit-content;background:var(--brand);color:var(--brand-on);padding:20px 24px;max-width:300px}
.hero-stat .n{font-size:38px;font-weight:800;line-height:1;letter-spacing:-.03em}
.hero-stat .l{font-size:13px;line-height:1.4;margin-top:6px;opacity:.92}

/* ═══════════════════════════════════════════════════════════════════
   Fakten
   ═══════════════════════════════════════════════════════════════════ */
/* Auf Tinte wie die Leistungs-Kacheln: der Hero endet damit an einer klaren
   dunklen Kante statt in einer durchgehenden hellen Fläche. */
.facts-sec{border-bottom:var(--rule-w) solid var(--rule-c);background:var(--ink);color:var(--bg)}
.facts{display:grid;grid-template-columns:repeat(4,1fr)}
/* Trennlinien hell, dunkle wären auf der Tinte unsichtbar. Die letzte Zelle
   bekommt keine — die Linie stand sonst frei am rechten Rand. */
.facts>div{padding:34px 28px 34px 0;border-right:1px solid rgba(243,242,242,.22)}
.facts>div:last-child{border-right:0}
/* Zellen mit einer Trennlinie links brauchen dort Luft. Die erste Zelle nicht,
   die fluchtet mit dem Seitenrand. */
.facts>div+div{padding-left:28px}
.facts .n{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--brand-l)}
.facts .l{font-size:14px;line-height:1.45;margin-top:8px;color:var(--on-dark)}

/* ═══════════════════════════════════════════════════════════════════
   Referenzen
   ═══════════════════════════════════════════════════════════════════ */
.refs-sec{background:var(--bg);border-bottom:var(--rule-w) solid var(--rule-c)}
.refs-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;margin-bottom:30px}
.refs-head p{font-size:15px;line-height:1.6;color:var(--muted);max-width:58ch}
/* auto-fit statt fester Spaltenzahl: 3 Spalten auf dem Desktop, 2 ab ~1000px,
   1 ab ~680px — ohne eigene Breakpoints. Die Kacheln müssen breit bleiben,
   sonst begrenzt die Breite die Logos und die Größenangleichung kippt. */
.refs{--s:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--rule-w);background:var(--rule-c);padding:var(--rule-w)}
.ref{background:var(--surface);min-height:152px;display:flex;align-items:center;justify-content:center;padding:26px 24px}
/* multiply statt einfacher Deckkraft: das Buschjost-Logo hat einen deckend
   weißen Hintergrund, der auf der hellgrauen Kachel sonst als Kasten stünde.
   Multipliziert verschwindet Weiß in der Fläche, Dunkles bleibt dunkel.
   Nachgeschärft wird mit contrast, nicht mit brightness — brightness würde auch
   das Weiß abdunkeln, und dann kann multiply es nicht mehr auslöschen. */
.ref img,.members img{display:block;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply;transition:filter .3s}
.ref img{max-height:calc(var(--h) * var(--s));max-width:94%}
.ref:hover img,.members li:hover img{filter:none}

/* ═══════════════════════════════════════════════════════════════════
   Mitgliedschaften
   ═══════════════════════════════════════════════════════════════════ */
.member-sec{background:var(--surface);border-bottom:var(--rule-w) solid var(--rule-c)}
.members{display:flex;flex-wrap:wrap;align-items:center;gap:34px 56px}
/* Eigener Hintergrund, obwohl er dem der Sektion entspricht: beim Einblenden
   setzt GSAP kurz opacity < 1, das erzeugt einen eigenen Stacking-Kontext —
   ohne deckenden Hintergrund darunter hätte multiply nichts zum Verrechnen und
   die weißen Flächen in IHK-, VBG- und AVPQ-Logo blitzten als Kästen auf. */
.members li{background:var(--surface);display:flex;align-items:center}
.members img{max-height:var(--h);max-width:100%}

/* ═══════════════════════════════════════════════════════════════════
   Leistungen
   ═══════════════════════════════════════════════════════════════════ */
.svc-head{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:end;margin-bottom:56px}
.svc-head h2{margin-top:14px;font-size:clamp(34px,4vw,58px);font-weight:800;line-height:1;letter-spacing:-.035em}
.svc-head p{margin-bottom:6px;font-size:16px;line-height:1.65;color:var(--muted);max-width:52ch}
/* Rahmen als Innenabstand auf dem Hintergrund, nicht als border: Chrome rundet
   border-width auf ganze Gerätepixel ab (1px wird bei 125 % Skalierung zu 0,8px)
   und der Strich kann dann zwischen zwei Pixelzeilen verwaschen — die Unterkante
   verschwand je nach Fensterbreite. Padding wird nicht gerundet und rendert
   deshalb genauso zuverlässig wie die Rasterfugen daneben. */
/* Das Raster steht komplett auf Tinte. Die Fugen müssen dafür HELL sein —
   die dunklen Linien von vorher wären im dunklen Block unsichtbar. */
.svc{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--rule-w);background:rgba(243,242,242,.2);padding:var(--rule-w)}
.svc article{background:var(--ink);color:var(--bg);padding:32px 28px 36px;display:flex;flex-direction:column;gap:14px;transition:background .4s ease}
.svc article:hover{background:#171514}
.svc .top{display:flex;align-items:baseline;gap:14px}
.svc .top .n{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--brand-l);transition:letter-spacing .45s cubic-bezier(.22,1,.36,1)}
.svc .top .line{flex:1;height:2px;background:rgba(243,242,242,.22);display:block;transition:background .4s ease}
.svc .top svg{font-size:24px;color:var(--brand-l);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.svc h3{font-weight:800;letter-spacing:-.025em;line-height:1.05;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.svc p{font-size:15px;line-height:1.6;color:var(--on-dark);max-width:44ch}
.svc ul{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:18px}
.svc li{font-size:12px;font-weight:600;letter-spacing:.02em;border:1px solid rgba(243,242,242,.35);padding:5px 10px;color:var(--on-dark);
        transition:border-color .4s ease,color .4s ease,transform .45s cubic-bezier(.22,1,.36,1)}

/* ── Kachel-Effekte, geteilt ─────────────────────────────────────────
   Gilt für jede Fläche mit .tile (Leistungen, ISO-Kacheln). Ausschließlich
   additiv: der Ruhezustand ist die volle Lesbarkeit. Nichts hier versteckt
   Inhalt, deshalb kann keine hängende Animation eine Kachel leer zurücklassen. */
.tile{position:relative;isolation:isolate;overflow:hidden}
/* Lichtschein folgt dem Zeiger (--mx/--my setzt app.js). */
.tile::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),var(--brand),transparent 68%);
  transition:opacity .5s ease;
}
.tile:hover::before{opacity:.22}
/* Markenfarbener Balken wächst von links über die Oberkante. */
.tile::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--brand-l);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.tile:hover::after{transform:scaleX(1)}
.svc article:hover .top .line{background:var(--brand-l)}
.svc article:hover .top .n{letter-spacing:.3em}
.svc article:hover .top svg{transform:translateY(-4px) scale(1.18)}
.svc article:hover h3{transform:translateX(7px)}
.svc article:hover li{border-color:var(--brand-l);color:var(--bg);transform:translateY(-3px)}
/* Die Schlagworte laufen gestaffelt nach, nicht alle gleichzeitig. */
.svc article:hover li:nth-child(2){transition-delay:.06s}
.svc article:hover li:nth-child(3){transition-delay:.12s}
.svc article:hover li:nth-child(4){transition-delay:.18s}

@media(prefers-reduced-motion:reduce){
  .tile *,.tile::before,.tile::after{transition-duration:.01ms}
  .svc article:hover h3,.svc article:hover .top svg,.svc article:hover li,
  .iso>div:hover .n,.faq button:hover .q,.faq button:hover .chev,
  .joblist>div:hover .t,.joblist>div:hover .t svg,.cities span.c:hover i,
  .cfg-opts button:hover{transform:none}
  .svc article:hover .top .n{letter-spacing:.1em}
  .faq button:hover .n{letter-spacing:0}
}

/* ═══════════════════════════════════════════════════════════════════
   Konfigurator
   ═══════════════════════════════════════════════════════════════════ */
.cfg-sec{background:var(--surface);border-bottom:var(--rule-w) solid var(--rule-c)}
.cfg-grid{display:grid;gap:64px;align-items:start}
.cfg-main h2{margin:14px 0 40px;font-size:clamp(32px,3.6vw,52px);font-weight:800;line-height:1.02;letter-spacing:-.035em}
.cfg-steps{display:flex;flex-direction:column;gap:36px}
.cfg-q{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;border-bottom:var(--rule-w) solid var(--rule-c);padding-bottom:10px}
.cfg-q .n{font-size:12px;font-weight:700;color:var(--brand-d)}
.cfg-q .q{font-size:15px;font-weight:700;letter-spacing:-.01em}
.cfg-opts{display:flex;flex-wrap:wrap;gap:10px}
.cfg-opts button{border:2px solid var(--ink);background:transparent;color:var(--ink);padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;text-align:left;transition:border-color .3s ease,color .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.cfg-opts button:hover{border-color:var(--brand);color:var(--brand-d);transform:translateY(-3px)}
.cfg-opts button[aria-pressed="true"]:hover{color:var(--brand-on)}
.cfg-opts button[aria-pressed="true"]{border-color:var(--brand);background:var(--brand);color:var(--brand-on)}
.cfg-aside{position:sticky;top:100px;border:var(--rule-w) solid var(--rule-c);background:var(--bg)}
.cfg-aside .head{background:var(--brand);color:var(--brand-on);padding:20px 24px}
.cfg-aside .head .k{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.cfg-aside .head .v{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:6px;line-height:1.1}
.cfg-aside .body{padding:24px}
.cfg-aside dl>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.cfg-aside dt{font-size:13px;color:var(--muted-2)}
.cfg-aside dd{font-size:13px;font-weight:700;text-align:right;max-width:60%}
.cfg-aside .advice{margin-top:18px;font-size:14px;line-height:1.6;color:var(--muted)}
.cfg-cta{display:flex;flex-direction:column;gap:2px;margin-top:22px}
.cfg-cta .primary{background:var(--brand);color:var(--brand-on);padding:14px 18px;font-size:14px;font-weight:600;display:block}
.cfg-cta .primary:hover{background:var(--brand-p);color:var(--brand-on)}
.cfg-cta .ghost{border:2px solid var(--ink);padding:12px 18px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px}
.cfg-cta .ghost:hover{background:var(--ink);color:var(--bg)}

/* ═══════════════════════════════════════════════════════════════════
   Poster
   ═══════════════════════════════════════════════════════════════════ */
.poster-sec{background:var(--brand);color:var(--brand-on);border-bottom:var(--rule-w) solid var(--rule-c)}
.poster{font-size:clamp(34px,5.2vw,76px);font-weight:800;line-height:1;letter-spacing:-.04em;max-width:18ch}
.poster-sub{margin-top:28px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}

/* ═══════════════════════════════════════════════════════════════════
   Über uns
   ═══════════════════════════════════════════════════════════════════ */
.about{display:grid;grid-template-columns:6fr 6fr;gap:72px;align-items:start}
.about h2{margin:14px 0 26px}
.about p{margin-bottom:18px;font-size:16px;line-height:1.7;color:var(--muted)}
.about .quals-head{border-top:var(--rule-w) solid var(--rule-c);padding-top:24px;margin-top:32px}
.about .quals-head .t{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.quals{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.quals li{font-size:14px;line-height:1.4;padding-left:18px;border-left:2px solid var(--brand);display:flex;gap:9px;align-items:baseline}
.quals svg{font-size:11px;color:var(--brand-d)}
/* figure bringt einen Browser-Standardrand von 15px 40px mit — der stand dem
   bündigen Stapel Foto → ISO → Badges im Weg (die beiden unteren haben deshalb
   border-top:0). border-bottom entfällt, die Trennlinie liefert .iso oben. */
.still{margin:0;border:var(--rule-w) solid var(--rule-c);border-bottom:0;background:var(--surface);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.still .ph{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-3)}
.still figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--bg);font-size:11px;letter-spacing:.08em;padding:7px 12px;z-index:2}
/* Gleiche Sprache wie die Leistungs-Kacheln: Tinte, helle Fugen, .tile-Effekte.
   Foto, ISO-Kacheln und Badges lesen sich damit als ein zusammenhängender Block. */
/* Zertifikate als Liste statt als drei schmale Kacheln: nebeneinander blieb für
   Norm, Bezeichnung und Urkunden-Hinweis zu wenig Platz. Untereinander trägt
   jede Zeile die Normnummer groß und den Link deutlich sichtbar. */
.iso{display:grid;grid-template-columns:1fr;gap:var(--rule-w);background:rgba(243,242,242,.2);padding:var(--rule-w)}
.iso>*{background:var(--ink);color:var(--bg);padding:20px 22px;display:flex;align-items:center;justify-content:space-between;
       gap:18px;color:inherit;text-decoration:none;transition:background .4s ease}
.iso>*{color:var(--bg)}
.iso>*:hover{background:#171514}
.iso .n{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1;display:block;
        transition:transform .45s cubic-bezier(.22,1,.36,1)}
.iso>*:hover .n{transform:translateX(6px)}
.iso .l{font-size:12px;color:var(--on-dark);margin-top:6px;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;
        transition:transform .45s cubic-bezier(.22,1,.36,1)}
.iso>*:hover .l{transform:translateX(6px)}
/* Urkunden-Hinweis dauerhaft sichtbar, nicht erst beim Überfahren. */
.iso .cert{flex:none;display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.1em;
           text-transform:uppercase;color:var(--brand-l);white-space:nowrap}
.iso .cert svg{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.iso a:hover .cert svg{transform:translateX(6px)}
/* Der Akzentbalken läuft hier senkrecht an der Kante mit, nicht waagerecht oben. */
.iso .tile::after{top:0;left:0;width:3px;height:100%;transform:scaleY(0);transform-origin:top}
.iso .tile:hover::after{transform:scaleY(1)}
.badges{background:var(--ink);color:var(--bg);padding:22px 18px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.badges span.t{font-size:13px;font-weight:700}
.badges span.d{width:6px;height:6px;background:var(--brand-l);display:block}

/* ═══════════════════════════════════════════════════════════════════
   Einsatzgebiet
   ═══════════════════════════════════════════════════════════════════ */
/* Bildband über volle Fensterbreite — bricht die Folge aus Textrastern auf. */
/* background-attachment:fixed erzeugt beim Vorbeiscrollen echte Tiefe, ganz
   ohne Skript — das Bild steht, der Rahmen wandert darüber. Auf Mobilgeräten
   abgeschaltet, dort ruckelt es und der Ausschnitt springt. */
.area-band{height:clamp(200px,24vw,360px);background-size:cover;background-position:center 58%;background-attachment:fixed;filter:grayscale(1) contrast(1.06);border-bottom:var(--rule-w) solid var(--rule-c)}
@media(max-width:1000px){.area-band{background-attachment:scroll}}
/* Einsatzgebiet auf Tinte: der dunkle Block gibt dem Seitenrhythmus einen
   zweiten Ankerpunkt neben dem Jobs-Abschnitt. */
.area-sec{border-bottom:var(--rule-w) solid var(--rule-c);background:var(--ink);color:var(--bg)}
.area-sec .eyebrow{color:var(--brand-l)}
.area-sec .km{color:var(--brand-l)}
.area-sec p{color:var(--on-dark)}
.area-sec .cities{border-top-color:rgba(243,242,242,.3)}
.area-sec .cities span.c i{color:var(--brand-l)}
.area{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
.km{font-size:clamp(64px,9vw,132px);font-weight:800;line-height:.85;letter-spacing:-.05em;margin-top:16px;color:var(--brand-d)}
.km span{font-size:.32em;letter-spacing:-.01em}
.area p{margin-top:20px;font-size:16px;line-height:1.65;color:var(--muted)}
.cities{display:flex;flex-wrap:wrap;gap:10px 0;align-items:baseline;border-top:var(--rule-w) solid var(--rule-c);padding-top:28px}
.cities span.c{font-size:clamp(22px,2.6vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.1;padding-right:22px;transition:color .35s ease}
.cities span.c:hover{color:var(--brand-l)}
.cities span.c i{color:var(--brand);font-style:normal;display:inline-block;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cities span.c:hover i{transform:translateY(-6px) scale(1.6)}
.cities .note{width:100%;margin-top:26px;font-size:14px;color:var(--muted-2)}

/* ═══════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════ */
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.faq-grid>div:first-child h2{margin-top:14px}
.faq-grid>div:first-child p{margin-top:20px;font-size:15px;line-height:1.65;color:var(--muted)}
.faq{border-top:var(--rule-w) solid var(--rule-c)}
.faq>div{border-bottom:var(--rule-w) solid var(--rule-c)}
.faq button{width:100%;background:transparent;border:0;padding:24px 0;display:flex;gap:20px;align-items:baseline;cursor:pointer;text-align:left;transition:color .35s ease}
.faq button:hover{color:var(--brand-d)}
.faq .n{font-size:12px;font-weight:700;color:var(--brand-d);flex:none;width:28px;transition:letter-spacing .45s cubic-bezier(.22,1,.36,1)}
.faq button:hover .n{letter-spacing:.3em}
.faq .q{flex:1;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.faq button:hover .q{transform:translateX(7px)}
.faq button:hover .chev{transform:translateY(3px)}
.faq button[aria-expanded="true"]:hover .chev{transform:rotate(180deg) translateY(3px)}
.faq .chev{flex:none;font-size:15px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.faq button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq .a{margin:0 0 26px 48px;font-size:15px;line-height:1.7;color:var(--muted);max-width:62ch}

/* ═══════════════════════════════════════════════════════════════════
   Jobs
   ═══════════════════════════════════════════════════════════════════ */
.jobs-sec{background:var(--ink);color:var(--bg);border-bottom:var(--rule-w) solid var(--rule-c)}
.jobs-grid{display:grid;grid-template-columns:6fr 6fr;gap:72px;align-items:start}
.jobs-sec .eyebrow{color:var(--brand-l)}
.jobs-sec h2{margin:14px 0 24px}
.jobs-sec .lead{margin-bottom:36px;font-size:16px;line-height:1.7;color:var(--on-dark);max-width:50ch}
.joblist{border-top:1px solid var(--muted-2)}
.joblist>div{border-bottom:1px solid var(--muted-2);padding:18px 0;display:flex;justify-content:space-between;gap:20px;align-items:baseline;transition:border-color .35s ease}
.joblist>div:hover{border-bottom-color:var(--brand-l)}
.joblist .t{font-size:18px;font-weight:700;letter-spacing:-.02em;display:flex;gap:12px;align-items:baseline;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.joblist>div:hover .t{transform:translateX(7px)}
.joblist .t svg{font-size:13px;color:var(--brand-l);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.joblist>div:hover .t svg{transform:translateX(4px)}
.joblist .k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark);flex:none}
.jobform{background:var(--bg);color:var(--ink);padding:36px;display:flex;flex-direction:column;gap:2px}
.jobform .t{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.jobform .two{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.jobform label.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted)}
.jobform label.consent input{margin-top:2px;accent-color:var(--brand-d)}

.field{border:2px solid var(--ink);padding:14px 16px;font-size:15px;background:#fff;border-radius:0;min-width:0;width:100%}
textarea.field{resize:vertical}
.submit{background:var(--brand);color:var(--brand-on);border:0;padding:16px 20px;font-size:15px;font-weight:600;cursor:pointer;text-align:left}
.submit:hover{background:var(--brand-p)}
.jobform .submit{margin-top:18px}

/* ═══════════════════════════════════════════════════════════════════
   Kontakt
   ═══════════════════════════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.contact-grid h2{margin:14px 0 32px}
.cinfo{border-top:var(--rule-w) solid var(--rule-c);padding-top:22px;display:flex;flex-direction:column;gap:22px}
.cinfo .k{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;display:flex;align-items:center;gap:7px}
.cinfo p{font-size:16px;line-height:1.6}
.cinfo a.tel{font-weight:700;border-bottom:2px solid var(--brand)}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-content:start}
.cform .span2{grid-column:span 2}
.cform .actions{grid-column:span 2;display:flex;flex-wrap:wrap;gap:2px;margin-top:16px}
.cform .actions .submit{padding:16px 24px}
.cform .ghost{border:2px solid var(--ink);padding:14px 24px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px}
.cform .ghost:hover{background:var(--ink);color:var(--bg)}

/* ═══════════════════════════════════════════════════════════════════
   Footer + Sticky-Bar
   ═══════════════════════════════════════════════════════════════════ */
.footer{background:var(--bg);padding-bottom:96px}
.footer-in{padding-top:56px}
.footer-grid{display:grid;grid-template-columns:4fr 2fr 2fr 4fr;gap:40px;border-bottom:var(--rule-w) solid var(--rule-c);padding-bottom:48px}
.footer .mark{height:52px;width:52px;display:block;margin-bottom:18px;background-position:center;background-size:contain;background-repeat:no-repeat}
/* Zwei Standorte nebeneinander. auto-fit statt fester Spaltenzahl: auf sehr
   schmalen Geräten rutschen sie ohne eigenen Breakpoint untereinander. */
.footer .addr{font-size:14px;line-height:1.6;color:var(--muted-2)}
.footer .addr .co{font-weight:700;color:var(--ink);margin-bottom:14px}
.footer .addr .std{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 28px}
.footer .addr .o{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
                 color:var(--muted-3);margin-bottom:4px}
.footer .k{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.footer .col{display:flex;flex-direction:column;gap:9px;font-size:14px}
.footer .brands{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;font-size:14px}
.footer .brands a,.footer .brands .soon{display:flex;align-items:center;gap:8px}
.footer .brands .soon{opacity:.42;cursor:default}
.footer .brands .d{width:8px;height:8px;flex:none;display:block}
.footer .copy{margin-top:24px;font-size:13px;color:var(--muted-3)}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);color:var(--bg);border-top:var(--rule-w) solid var(--rule-c)}
.sticky-in{max-width:1360px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:24px;height:60px}
.sticky .line{font-size:13px;font-weight:600;letter-spacing:.02em;flex:1}
.sticky .ghost{display:flex;align-items:center;padding:9px 18px;border:2px solid var(--bg);font-size:13px;font-weight:600;gap:8px}
.sticky .ghost:hover{background:var(--bg);color:var(--ink)}
.sticky .primary{display:flex;align-items:center;padding:11px 18px;background:var(--brand);color:var(--brand-on);font-size:13px;font-weight:600}
.sticky .primary:hover{background:var(--brand-p);color:var(--brand-on)}

/* ═══════════════════════════════════════════════════════════════════
   Responsiv
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:1180px){
  .nav-links{display:none}
  .nav-more{display:flex}
}
@media(max-width:1000px){
  .wrap{padding-left:24px;padding-right:24px}
  .drawer{padding-left:24px;padding-right:24px}
  .svc-head,.about,.area,.faq-grid,.jobs-grid,.contact-grid,.cfg-grid{grid-template-columns:1fr !important;gap:44px}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-text{padding:64px 0 52px}
  .hero-img{margin-right:0;padding-right:0;border-left:0;border-top:var(--rule-w) solid var(--rule-c);min-height:360px}
  .svc{grid-template-columns:1fr 1fr}
  .svc article{grid-column:span 1 !important;min-height:0 !important}
  .cfg-aside{position:static}
  .switcher-in{grid-template-columns:1fr 1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cfg-main,.cfg-aside,.about>div,.faq-grid>div{order:0 !important}
}
@media(max-width:680px){
  .wrap{padding-left:18px;padding-right:18px}
  .drawer{padding-left:18px;padding-right:18px}
  .facts{grid-template-columns:1fr 1fr}
  /* Zweispaltig steht die 3. Zelle wieder links am Rand, ohne Linie davor */
  .facts>div:nth-child(odd){padding-left:0}
  /* Alle Logos gemeinsam herunterskalieren, damit die Angleichung erhalten
     bleibt — würde nur die Breite begrenzen, schrumpften die Wortmarken allein. */
  .refs{--s:.7}
  .ref{min-height:0;padding:20px 16px}
  .svc{grid-template-columns:1fr}
  .quals{grid-template-columns:1fr}
  .switcher-in{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .iso{grid-template-columns:1fr}
  .cform{grid-template-columns:1fr}
  .cform .span2,.cform .actions{grid-column:span 1}
  .jobform .two{grid-template-columns:1fr}
  .sticky .line{display:none}
  .sticky-in{gap:8px}
  .sticky a{padding-left:12px;padding-right:12px;font-size:12px}
  .nav-phone{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════════════
   Rechtstexte (impressum.html, datenschutz.html)
   Eigene Seiten ohne #app und ohne app.js. Deshalb hier ein schlanker
   eigener Satz Klassen auf denselben Variablen — kein zweites Design.
   ═══════════════════════════════════════════════════════════════════ */
.legal-top{border-bottom:var(--rule-w) solid var(--rule-c)}
.legal-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}
.legal-mark{font-weight:800;letter-spacing:-.03em;font-size:20px}
.legal-back{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:2px}
.legal-back:hover{color:var(--brand-d);border-color:var(--brand-d)}
.legal-head{padding:64px 0 36px}
.legal-head h1{font-size:clamp(38px,5vw,68px);font-weight:800;line-height:1.02;letter-spacing:-.035em}
.legal-head p{margin-top:14px;max-width:62ch;color:var(--muted)}
.legal-body{padding-bottom:96px}
.legal-body .col{max-width:74ch}
.legal-body section{padding-top:26px;margin-top:26px;border-top:var(--rule-w) solid var(--line-soft)}
.legal-body section:first-of-type{border-top:0;margin-top:0;padding-top:0}
.legal-body h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.legal-body h3{font-size:15px;font-weight:700;margin:18px 0 6px}
.legal-body p{color:var(--muted);margin-bottom:10px}
.legal-body address{font-style:normal;color:var(--muted);margin-bottom:10px}
.legal-body a{border-bottom:1px solid var(--line)}
.legal-body a:hover{border-color:var(--brand-d)}
.legal-foot{border-top:var(--rule-w) solid var(--rule-c);padding:26px 0;font-size:13px;color:var(--muted-2)}
.legal-foot .wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}
.legal-foot a{border-bottom:1px solid var(--line)}
@media(max-width:700px){
  .wrap{padding:0 20px}
  .legal-head{padding:40px 0 28px}
}

/* ---- Cookie-Hinweis ---------------------------------------------------
   Aussage, kein Einwilligungsdialog: die Seite legt nichts auf dem Geraet
   ab. Sitzt fix ueber der Sticky-Leiste, die genau um seine gemessene
   Hoehe nach oben ausweicht (--hinweis-h, gesetzt von js/hinweis.js). */
.hinweis{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--bg);color:var(--ink);border-top:var(--rule-w) solid var(--rule-c)}
.hinweis-in{max-width:1360px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:20px}
.hinweis p{margin:0;flex:1;font-size:13px;line-height:1.55}
.hinweis strong{font-weight:800}
.hinweis a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.hinweis a:hover{color:var(--brand)}
.hinweis-zu{flex:none;width:34px;height:34px;padding:0;background:none;color:var(--ink);border:2px solid var(--ink);font:inherit;font-size:17px;line-height:1;cursor:pointer}
.hinweis-zu:hover{background:var(--ink);color:var(--bg)}
body.hat-hinweis .sticky{bottom:var(--hinweis-h,58px)}
@media (max-width:640px){
  .hinweis-in{padding:11px 14px;gap:12px}
  .hinweis p{font-size:12px;line-height:1.45}
  .hinweis-zu{width:30px;height:30px;font-size:15px}
}