/* ============================================================
   STEGER – gemeinsames Site-CSS
   Quelle: Mockup V10 (Juli 2026), bereinigt um Dev-Elemente.
   Regeln: bestehende Klassen verwenden, ähnliche Muster hier
   zusammenführen, kein Inline-CSS in den Seiten ergänzen.
   ============================================================ */

@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/roboto-variable-latin.woff2') format('woff2');
}

:root{
  --navy:#12365e;
  --navy-dark:#0c2745;
  --blue:#1f6db2;
  --blue-light:#e8f0f8;
  --ink:#2b3440;
  --gray:#5c6773;
  --line:#dde3e9;
  --bg-alt:#f4f6f9;
  --white:#ffffff;
  --radius:0;
  --shadow:0 2px 14px rgba(18,54,94,.08);
  --maxw:1180px;
  --btn-bg:#06345b;        /* Button-Farben von Live-Site uebernommen */
  --btn-bg-hover:#0b5ea8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Roboto',Arial,sans-serif;color:var(--ink);background:var(--white);font-size:16px;line-height:1.6}
img{max-width:100%}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media(max-width:900px){.wrap{padding:0 38px}}

/* ============ Header / Navigation ============ */
header.site{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:50}
header.site .wrap{display:flex;align-items:center;gap:34px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo img{height:44px;width:auto;display:block}
.logo .logo-text{font-weight:900;font-size:22px;letter-spacing:.04em;color:var(--navy);line-height:1.05}
.logo .logo-text small{display:block;font-weight:400;font-size:11px;letter-spacing:.08em;color:var(--gray);text-transform:lowercase}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main>div{position:relative}
nav.main a.top{display:block;position:relative;padding:10px 14px;color:#1c244b;font-weight:500;font-size:15px}
nav.main a.top::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;background:var(--btn-bg-hover);transform:scaleX(0);transform-origin:left;transition:transform .18s}
nav.main a.top:hover,nav.main a.top.here{color:var(--btn-bg-hover)}
nav.main a.top:hover::after,nav.main a.top.here::after{transform:scaleX(1)}
.dd{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:4px;min-width:290px;padding:6px 0;z-index:60}
nav.main>div:hover .dd,nav.main>div:focus-within .dd{display:block}
.dd a{display:block;padding:9px 18px;color:var(--ink);font-size:14.5px}
.dd a:hover{background:var(--blue-light);color:var(--blue)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.lang{font-size:13.5px;color:var(--gray);font-weight:500}
.btn{display:inline-block;background:var(--btn-bg);color:#fff;font-weight:700;padding:12px 26px;border-radius:0;font-size:15px;transition:background .15s;border:none;cursor:pointer;font-family:inherit}
.btn:hover,.btn:focus{background:var(--btn-bg-hover)}

/* Mobile Navigation */
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:4px;padding:8px 12px;cursor:pointer;font-size:20px;line-height:1;color:var(--navy)}
@media(max-width:960px){
  .nav-toggle{display:block;margin-left:auto}
  .hdr-right{margin-left:0}
  header.site .wrap{flex-wrap:wrap;gap:14px}
  nav.main{display:none;width:100%;flex-direction:column;order:10}
  body.nav-open nav.main{display:flex}
  nav.main a.top{border-bottom:1px solid var(--line)}
  .dd{display:block;position:static;border:none;box-shadow:none;padding-left:16px;min-width:0}
}

/* ============ Typo-Bausteine ============ */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
h1{font-size:clamp(30px,4.2vw,46px);line-height:1.15;font-weight:800;color:var(--navy)}
h2.sec{font-size:clamp(24px,3vw,34px);line-height:1.2;font-weight:800;color:var(--navy);margin-bottom:16px;max-width:820px}
.intro{color:var(--gray);max-width:780px;font-size:17px}
section{padding:78px 0}
section.alt{background:var(--bg-alt)}
.hero-eyebrow{color:#8fb8e0}

/* ============ Bilder ============ */
img.photo{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--radius)}
/* Build umschliesst Bilder mit <picture> (WebP + Fallback). display:contents nimmt
   die picture-Box aus dem Layout, damit das innere <img> Grid-/Flex-Kind bleibt.
   source MUSS unsichtbar sein: Chrome gibt ihm sonst display:block, und durch
   display:contents wuerde es als leeres Grid-Item eine Spalte stehlen.
   height:auto am img: die width/height-Attribute aus dem Build (gegen Layout-
   Springen) duerfen die CSS-aspect-ratio nicht uebersteuern. */
picture{display:contents}
picture source{display:none}
figure.framed{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 20px 10px;margin:36px 0 8px}
figure.framed svg{width:100%;height:auto;display:block}
figure.framed figcaption{font-size:12px;color:#8a97a5;padding:10px 6px 8px}

/* ============ Hero Startseite ============ */
.hero-home{background:var(--navy);color:#fff;padding:110px 0 120px;position:relative;overflow:hidden}
.hero-home h1{color:#fff;max-width:720px;position:relative;z-index:2}
.hero-home .sub{font-size:19px;font-weight:300;color:#d6e2ef;margin:22px 0 36px;max-width:640px;position:relative;z-index:2}
.hero-home .hero-fakten{font-size:13.5px;font-weight:400;letter-spacing:.02em;color:#c3d4e6;margin:-16px 0 34px;max-width:660px;position:relative;z-index:2}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;position:relative;z-index:2}
/* Hintergrund-Video wie Live-Site: volle Flaeche, Overlay links navy (Textkontrast),
   nach rechts aufklarend. Poster-Bild ist auf allen Breiten sichtbar (auch mobil);
   das Video selbst wird per JS nur ab 960px geladen und legt sich dann darueber. */
.hero-home .hero-media{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.hero-home .hero-media img,.hero-home .hero-media video{width:100%;height:100%;object-fit:cover}
.hero-home::before{content:"";position:absolute;inset:0;z-index:1;display:block;background:linear-gradient(100deg,var(--navy-dark) 0%,rgba(18,54,94,.82) 45%,rgba(230,238,246,.35) 100%)}
/* Ab Desktop: Hero als begrenzte Box wie auf der Live-Site (Breite = Inhaltsspalte,
   nicht viewportbreit), live-aehnliche Hoehe, Text vertikal zentriert.
   width:100% am .wrap noetig: sonst schrumpft er im Flex-Container auf Inhaltsbreite. */
@media(min-width:960px){
  .hero-home{max-width:var(--maxw);margin:0 auto;min-height:680px;padding:80px 0;display:flex;flex-direction:column;justify-content:center}
  .hero-home .wrap{width:100%}
}

/* ============ Karten-Raster ============ */
/* Zweispalter Bild/Text (Technologie-Block, Anfrage-CTA) */
.cols2{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
@media(max-width:900px){.cols2{grid-template-columns:1fr;gap:36px}}
.grid{display:grid;gap:26px;margin-top:44px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
/* Kartenbild mit Innenabstand (buendig mit dem Textabstand der Karte), unbeschnitten 4:3 */
.card img.photo{aspect-ratio:4/3;height:auto;width:calc(100% - 52px);margin:26px 26px 0;border-radius:var(--radius)}
.card .body{padding:26px 26px 24px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:18.5px;line-height:1.35;color:var(--navy);font-weight:700;margin-bottom:12px}
.card p{color:var(--gray);font-size:15px;flex:1}
.card .link{margin-top:18px;font-weight:700;font-size:15px;color:var(--btn-bg)}
.card .link:hover,.card .link:focus{color:var(--btn-bg-hover)}
.card .link::after{content:" →"}
/* Karte mit kleinem Bild rechts neben dem Text (statt grossem Bild oben) */
.card.side{flex-direction:row;align-items:center}
.card.side .body{flex:1;padding:24px 24px 24px 28px}
.card.side .body p{flex:0}
.card.side img.photo{flex:0 0 160px;width:160px;height:auto;aspect-ratio:4/3;margin:0 24px 0 0;align-self:center}
@media(max-width:560px){.card.side img.photo{flex-basis:130px;width:130px;margin-right:20px}}
/* Obenbuendiges Raster: Karteninhalt startet am Kartenkopf statt vertikal zentriert (fuer ungleich hohe Karten nebeneinander) */
.grid.top .card.side{align-items:flex-start}

/* ============ Loesungen-Block Startseite: Layout-Varianten ============ */
/* 5 Sektionen, Auswahl ueber die Dev-Toolbar (Varianten-Gruppe "loesungen") */
.grid.mid{max-width:1020px;margin-left:auto;margin-right:auto} /* Kachelbreite = Bildbreite der Standardkarte (2x497px + 26px Luecke) */
/* Bildkacheln 3:2 mit Text im Bild (Varianten "Kacheln …") */
.sol-tile{position:relative;display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.sol-tile img.photo{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:0}
.sol-tile .overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 26px;background:linear-gradient(180deg,rgba(10,30,54,0) 30%,rgba(10,30,54,.88) 100%)}
.sol-tile h3{color:#fff;font-size:17px;line-height:1.35;font-weight:700;margin-bottom:5px}
.sol-tile p{color:#d6e2ef;font-size:14.5px}
.sol-tile .link{color:#fff;font-weight:700;font-size:14.5px;margin-top:8px}
.sol-tile .link::after{content:" →"}
.sol-tile:hover .link,.sol-tile:focus .link{color:#8fb8e0}
/* "Kacheln abgedunkelt": Scrim - gleichmaessige Grundabdunklung + kraeftiger Verlauf,
   normalisiert helle und dunkle Fotos auf gleiche Text-Lesbarkeit */
.sol-tile.scrim .overlay{background:linear-gradient(180deg,rgba(10,30,54,.28) 0%,rgba(10,30,54,.34) 40%,rgba(10,30,54,.94) 100%)}
.sol-tile.scrim h3{text-shadow:0 1px 3px rgba(0,0,0,.35)}
/* "Kacheln Milchglas": Textleiste unten mit Blur, Bild bleibt unveraendert */
.sol-tile.band .overlay{inset:auto 0 0 0;padding:18px 24px 20px;background:rgba(9,32,58,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* "Karten randlos": Standardkarte, aber Bild ohne Rand und flach beschnitten (16:9) */
.card.flush img.photo{width:100%;margin:0;border-radius:0;aspect-ratio:16/9;object-fit:cover}

/* ============ Kennzahlen ============ */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:44px 0 36px}
@media(max-width:760px){.kpis{grid-template-columns:1fr}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 28px;text-align:center}
.kpi .num{font-size:34px;font-weight:800;color:var(--navy);line-height:1.15}
.kpi .num.smaller{font-size:27px}
.kpi .lbl{color:var(--gray);margin-top:8px;font-size:15px}
/* kompakte Variante fuer die schmale Spalte im Technologie-Block */
.kpis.compact{gap:14px;margin:30px 0 28px}
.kpis.compact .kpi{padding:18px 12px}
.kpis.compact .num{font-size:21px}
.kpis.compact .num.smaller{font-size:17px}
.kpis.compact .lbl{font-size:13.5px;margin-top:5px}
/* Silbentrennung fuer schmale Bausteine (lange Fachwoerter); limit-chars verhindert Kurz-Fragmente */
.kpis .lbl,.tile h3,.tile p,.step h3,.step p{-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4;hyphens:auto}
/* Umbruch-Steuerung: Zeile darunter pflegt build.ps1 aus scripts\typografie-config.ps1 - nicht von Hand aendern */
h1,h2,h3{text-wrap:balance}/* auto: typografie-config */

/* ============ Referenzen / Logos ============ */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:40px}
@media(max-width:760px){.logos{grid-template-columns:repeat(2,1fr)}}
.logos .logo-item{height:88px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.logos .logo-item img{max-height:52px;width:auto;max-width:80%;object-fit:contain}
.quote{margin-top:44px;background:var(--blue-light);border-left:5px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0;padding:26px 32px;font-size:19px;font-weight:700;color:var(--navy);max-width:880px}
.morelink{display:inline-block;margin-top:26px;font-weight:700}
.morelink::after{content:" →"}

/* ============ Prozess-Block ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
.steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.steps,.steps.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.steps,.steps.three{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 26px}
.step .n{font-size:40px;font-weight:800;color:var(--blue);line-height:1;margin-bottom:14px}
.step h3{font-size:17px;color:var(--navy);font-weight:700;margin-bottom:10px}
.step p{color:var(--gray);font-size:14.5px}
.steps.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){.steps.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.steps.five{grid-template-columns:1fr}}

/* ============ CTA ============ */
.cta{background:var(--navy);color:#fff;text-align:center}
.cta h2{color:#fff;font-size:clamp(24px,3vw,34px);font-weight:800;margin:0 auto 14px;max-width:760px}
.cta p{color:#d6e2ef;font-size:17px;max-width:640px;margin:0 auto 32px}
/* Teamfotos im Originalformat 2:3 (wie Live-Site), kein Zuschnitt; zu dritt nebeneinander
   (Startseiten-CTA und Anfrage-Seite) */
.team{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.team img{width:calc((100% - 36px)/3);max-width:200px;height:auto;border-radius:var(--radius)}
.team-cap{color:var(--gray);font-size:14px;margin-top:14px;text-align:center}
.cta .team{margin-top:48px}
.cta .team-cap{color:#b9cadd}
/* Helle CTA-Variante (Startseite): weisser Hintergrund, dunkle Schrift */
.cta.light{background:var(--white);color:var(--ink)}
.cta.light h2{color:var(--navy)}
.cta.light p{color:var(--gray)}
.cta.light .team-cap{color:var(--gray)}
/* Zweispaltiger Anfrage-CTA (Startseite): Text links, Teamfotos rechts – wie Live-Site */
.cta .cols2{text-align:left}
.cta .cols2 h2,.cta .cols2 p{margin-left:0;margin-right:0}
.cta .cols2 .team{margin-top:0}
@media(max-width:900px){.cta .cols2{text-align:center}.cta .cols2 .team{margin-top:10px}}

/* ============ Unterseiten-Hero ============ */
/* Einheitlicher Unterseiten-Hero: gleiches Padding, Text startet immer oben,
   Mindesthoehe = Referenz Leistungsuebertrager (mehr Text darf strecken) */
.hero-aero{background:var(--navy);color:#fff;padding:56px 0}
.hero-aero .cols{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
@media(max-width:900px){.hero-aero .cols{grid-template-columns:1fr}
  /* Bild beim Spalten-Umbruch begrenzen + zentrieren, statt voll aufzuziehen */
  .hero-aero img.photo{max-width:520px;margin:0 auto}}
@media(min-width:901px){.hero-aero .cols{min-height:256px}}
.hero-aero .eyebrow{color:#8fb8e0}
.hero-aero h1{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.hero-aero .sub{color:#d6e2ef;font-size:17.5px;font-weight:300;margin-top:22px;max-width:720px}
.hero-aero img.photo{max-height:256px;object-fit:cover}
/* Diagramm-Bild oben verankern: unten wird zugeschnitten, x-Achse sitzt weit unten */
.hero-aero img.photo.fit-top{aspect-ratio:19/10;max-height:none;object-position:top}

/* ============ Kachel (Text-Karte ohne Bild) ============ */
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 26px}
.tile h3{font-size:17.5px;color:var(--navy);font-weight:700;margin-bottom:10px}
.tile p{color:var(--gray);font-size:14.5px}
.tile .link{display:inline-block;margin-top:12px;font-weight:700;font-size:14.5px}
.tile .link::after{content:" →"}
.tile.highlight{border-color:var(--blue);border-width:2px}
.tile img.icon{height:56px;width:56px;object-fit:contain;margin-bottom:16px}
.tile img.icon.wide{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;margin-bottom:16px}
/* Layout-Auswahl der Kachel-Raster (Icon-Kacheln .tile UND Schritt-Kacheln .step
   samt .steps-Container - Geschwister-Bausteine, gleiche Layout-Schicht):
   Auswahl je Block in der Dev-Toolbar ("oben" = Standard ohne Klasse),
   gespeichert in projekt-config.json (bloecke -> icons: seitlich|titelzeile|ohne);
   build.ps1 setzt die Klasse am Raster der Live-Version. Raster mit icon.wide
   sind ausgenommen. tiles-compact = Icon/Zahl seitlich neben dem Text,
   tiles-strip = Icon/Zahl in der Titelzeile (Text volle Breite darunter),
   tiles-noicon = ohne Icon/Zahl. */
.tiles-compact .tile,.tiles-compact .step{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;padding:18px 20px}
.tiles-compact .tile img.icon{grid-row:1/span 2;width:44px;height:44px;margin:3px 0 0}
.tiles-compact .tile h3,.tiles-compact .step h3{font-size:16.5px;margin-bottom:6px}
.tiles-compact .tile p,.tiles-compact .step p{font-size:14px}
.tiles-strip .tile,.tiles-strip .step{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:start;padding:14px 18px}
.tiles-strip .tile img.icon{width:44px;height:44px;margin:0;align-self:center} /* Icon ~2 Textzeilen hoch, mittig zur Ueberschrift; Fliesstext bleibt oben */
.tiles-strip .tile h3,.tiles-strip .step h3{font-size:16px;margin-bottom:0;align-self:center}
.tiles-strip .tile p,.tiles-strip .step p{grid-column:1/-1;font-size:13.5px;margin-top:8px}
/* Schritt-Nummer in den kompakten Layouts: verkleinert in der Icon-Spalte */
.tiles-compact .step .n{grid-row:1/span 2;font-size:30px;margin:0;justify-self:center}
.tiles-strip .step .n{font-size:26px;margin:0;align-self:center;justify-self:center}
.tiles-noicon .tile img.icon,.tiles-noicon .step .n{display:none} /* Arbeitsversion; der Build entfernt sie ganz */
/* Titel und Fliesstext ueber alle Kacheln einer Reihe oben buendig: die Kacheln
   teilen sich per Subgrid die Zeilenhoehen (Titelzeile/Textzeile) der Reihe */
.tiles-compact .tile,.tiles-compact .step,.tiles-strip .tile,.tiles-strip .step{grid-row:span 2;grid-template-rows:subgrid;row-gap:0}

/* ============ Projektbeispiele ============ */
.proj{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);display:grid;grid-template-columns:320px 1fr;overflow:hidden;margin-top:30px}
@media(max-width:820px){.proj{grid-template-columns:1fr}}
/* Karte ohne Bild (Build entfernt .ph-Platzhalter): Text ueber volle Breite statt in der leeren Bildspalte */
.proj>.body:only-child{grid-column:1/-1}
.proj img.photo{border-radius:0;height:100%;min-height:260px;border-right:1px solid var(--line)}
@media(max-width:820px){.proj img.photo{border-right:none;border-bottom:1px solid var(--line);min-height:190px;max-height:260px}}
/* Bildformat "Original ohne Zoom" (Schalter in der Arbeitsversion, gespeichert in data/projekt-config.json) */
.proj.bild-original img.photo{object-fit:contain;background:#fff;padding:16px;border:none}
.proj.bild-original .media{border:none;align-self:center}
/* Im Original-Modus Bildbox auf echte Bildhoehe schrumpfen, damit das .img-tag-Etikett
   auf dem Foto sitzt statt unter dem leeren Letterbox-Bereich; 26px = 16px Bild-Padding + 10px */
.proj.bild-original .media img.photo{flex:0 0 auto;height:auto;min-height:0;max-height:none}
.proj.bild-original .media .img-tag{right:26px;bottom:26px}
.media{position:relative}
.proj .media{border-right:1px solid var(--line);display:flex;flex-direction:column}
.proj .media img.photo{border-right:none;min-height:150px;flex:1}
.proj .media .media-extra{padding:14px 18px 16px}
.proj .media .media-extra svg{width:100%;max-width:300px;display:block}
.proj .media .media-cap{font-size:12.5px;color:#7c8b9a;margin-top:8px}
/* Dezentes Etikett ueber dem Bild (z. B. "Symbolbild" bei KI-verfremdeten Motiven) */
.img-tag{position:absolute;right:10px;bottom:10px;background:rgba(26,38,52,.55);color:#fff;font-size:11.5px;letter-spacing:.03em;padding:3px 9px;border-radius:3px;pointer-events:none}
@media(max-width:820px){.proj .media{border-right:none;border-bottom:1px solid var(--line)}}
.proj .body{padding:30px 34px}
.proj h3{font-size:20px;color:var(--navy);font-weight:700;margin-bottom:12px}
.proj h3 .cat{color:var(--blue);font-size:13px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:6px}
.proj .desc{color:var(--gray);font-size:15px;margin-bottom:20px}
.proj .link{display:inline-block;margin-top:16px;font-weight:700;font-size:14.5px}
.proj .link::after{content:" →"}
.facts{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:18px}
.facts .row{display:grid;grid-template-columns:130px 1fr;gap:14px;font-size:14.5px}
.facts .k{font-weight:700;color:var(--navy)}
.facts .v{color:var(--gray)}
@media(max-width:560px){.facts .row{grid-template-columns:1fr}}
.facts .row.head{grid-template-columns:260px 1fr}
@media(max-width:560px){.facts .row.head{grid-template-columns:1fr}}
/* Breite Spezifikationstabelle: gerahmte Box, Zeilentrenner, getoenter Label-Spalte */
.facts.wide{margin-top:34px;max-width:920px;gap:0;padding-top:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.facts.wide .row.head{gap:0;border-bottom:1px solid var(--line)}
.facts.wide .row.head:last-child{border-bottom:none}
.facts.wide .row.head .k{display:flex;align-items:center;background:var(--bg-alt);border-right:1px solid var(--line);padding:13px 22px}
.facts.wide .row.head .v{display:flex;align-items:center;padding:13px 22px}
@media(max-width:560px){.facts.wide .row.head .k{border-right:none;border-bottom:1px solid var(--line)}}

/* ============ Fertigung & Prüfung / Liefer-Liste ============ */
.deliv{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;margin-top:44px;align-items:start}
@media(max-width:900px){.deliv{grid-template-columns:1fr}}
.deliv ul{list-style:none;display:grid;gap:18px}
.deliv li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;font-size:15px;color:var(--gray)}
.deliv li b{color:var(--navy)}
.deliv img.photo{height:100%;min-height:340px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
@media(max-width:900px){.trust{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.trust{grid-template-columns:1fr}}
.trust .kpi{padding:26px 18px}
.trust .num{font-size:24px}
.trust .lbl{font-size:13.5px}

/* ============ Referenzseite ============ */
.refs-cols{display:grid;grid-template-columns:1fr 300px;gap:40px;margin-top:36px;align-items:start}
@media(max-width:820px){.refs-cols{grid-template-columns:1fr}}
.refs-cols .facts{border-top:1px solid var(--line);padding-top:22px}
.refs-cols .media+.media{margin-top:14px}
.ref-status{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);padding:5px 0 5px 10px;border-left:3px solid var(--blue);margin:10px 0 4px}
.prose p{color:var(--gray);font-size:16px;margin-bottom:18px;max-width:860px}
.prose h2{font-size:22px;color:var(--navy);font-weight:700;margin:32px 0 12px}
.prose h3{font-size:18px;color:var(--navy);font-weight:700;margin:24px 0 10px}
.prose ul{color:var(--gray);margin:0 0 18px 22px}
.prose li{margin-bottom:6px}

/* ============ Technologie-Seite ============ */
.te-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;margin-top:36px}
@media(max-width:900px){.te-cols{grid-template-columns:1fr}}
.imgpair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.imgpair figure{margin:0}
.imgpair img.photo{height:190px}
.imgpair figcaption{font-size:12.5px;color:#7c8b9a;margin-top:8px;line-height:1.45}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery img.photo{height:200px}
.checklist{color:var(--gray);font-size:15px;list-style:none;display:grid;gap:9px;margin:0 0 14px;padding:0}
.checklist li{position:relative;padding-left:24px}
.checklist li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--blue)}
p+.checklist{margin-top:24px}
.proj .body .fine{color:var(--gray);font-size:14px;font-style:italic}
.callout{background:var(--blue-light);border-left:5px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0;padding:20px 26px;margin-top:30px;max-width:980px}
.callout .t{font-weight:700;color:var(--navy);margin-bottom:6px}
.callout p{color:var(--gray);font-size:15px}
.callout+.btn{margin-top:26px}

/* ============ SEO-Endblock ============ */
.seo h2{font-size:19px;color:var(--navy);font-weight:700;margin-bottom:14px}
.seo p{color:var(--gray);font-size:15px;max-width:900px}

/* ============ Historie-Zeitleiste ============ */
.tl{position:relative;margin-top:52px;max-width:1020px;margin-left:auto;margin-right:auto}
.tl::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,var(--blue) 0%,var(--line) 22%,var(--line) 100%);transform:translateX(-50%)}
.tl-item{display:grid;grid-template-columns:1fr 1fr;gap:0 84px;position:relative;padding-bottom:58px;align-items:center}
.tl-item:last-child{padding-bottom:8px}
.tl-item::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 2px var(--line);z-index:2}
.tl-item.plan::before{background:#a9b6c4}
.tl-body{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 30px}
.tl-body .yr{font-size:30px;font-weight:800;color:var(--blue);line-height:1;margin-bottom:12px}
.tl-body h3{font-size:18px;color:var(--navy);font-weight:700;margin-bottom:10px}
.tl-body p{color:var(--gray);font-size:15px}
.tl-item.plan .tl-body{border-style:dashed;background:#fbfcfd;box-shadow:none}
.tl-item.plan .tl-body .yr,.tl-item.plan .tl-body h3{color:#7c8b9a}
.tl-item.plan .tl-body p{font-style:italic;color:#7c8b9a}
.tl-media img{display:block;width:100%;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
.tl-item:nth-child(even) .tl-body{order:2}
.tl-item:nth-child(even) .tl-media{order:1}
@media(max-width:860px){
  .tl::before{left:11px;transform:none}
  .tl-item{grid-template-columns:1fr;gap:16px;padding-left:42px;padding-bottom:44px;align-items:start}
  .tl-item::before{left:11px;top:26px;transform:translate(-50%,0)}
  .tl-item:nth-child(even) .tl-body{order:1}
  .tl-item:nth-child(even) .tl-media{order:2}
}

/* ============ Standorte ============ */
.locations{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
@media(max-width:760px){.locations{grid-template-columns:1fr}}
.location{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 28px}
.location h3{font-size:18px;color:var(--navy);font-weight:700;margin-bottom:8px}
.location .role{color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.location p{color:var(--gray);font-size:15px}

/* ============ Download-Liste (PDF) ============ */
/* Dokument-Downloads als Zeilen: PDF-Symbol (Inline-SVG im CSS, kein Bild-Asset noetig),
   Titel mit Meta-Zeile (.m), Download-Pfeil rechts. Standard einspaltig (passt in
   .cols2-Spalten); Modifikator .g2 = zweispaltig ab 761px fuer Bloecke ueber die volle
   .wrap-Breite. Gleiche Box-Sprache wie .deliv li (Rahmen, kein Radius). */
ul.dl-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
ul.dl-list.g2{gap:10px 24px}
@media(min-width:761px){ul.dl-list.g2{grid-template-columns:1fr 1fr}}
.dl-list li{margin:0}
a.dl{display:flex;align-items:center;gap:14px;padding:11px 16px 11px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s}
a.dl::before{content:"";flex:0 0 26px;height:32px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cpath d='M3 1.5h17.5L29 10v28.5H3z' fill='%23fff' stroke='%2312365e' stroke-width='1.6'/%3E%3Cpath d='M20.5 1.5V10H29' fill='none' stroke='%2312365e' stroke-width='1.6'/%3E%3Crect x='1' y='19' width='24' height='12.5' fill='%23bf1e2e'/%3E%3Ctext x='13' y='28.5' font-family='Arial,Helvetica,sans-serif' font-size='9' font-weight='700' letter-spacing='.4' fill='%23fff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E") center/contain no-repeat}
a.dl .t{flex:1;min-width:0;color:var(--navy);font-weight:600;font-size:15px;line-height:1.35}
a.dl .m{display:block;color:var(--gray);font-weight:400;font-size:12.5px;margin-top:2px}
a.dl::after{content:"↓";flex:0 0 auto;color:var(--gray);font-size:17px;font-weight:700;transition:color .15s,transform .15s}
a.dl:hover,a.dl:focus{border-color:var(--blue);box-shadow:var(--shadow)}
a.dl:hover::after,a.dl:focus::after{color:var(--btn-bg-hover);transform:translateY(2px)}
h3.dl-head{font-size:17px;color:var(--navy);font-weight:700;margin:34px 0 0}
h3.dl-head:first-child{margin-top:0}
h3.dl-head+ul.dl-list{margin-top:14px}

/* ============ Anfrageformular ============ */
.form-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;margin-top:44px;align-items:start}
@media(max-width:900px){.form-cols{grid-template-columns:1fr}}
form.anfrage{display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 28px}
form.anfrage label{font-size:14px;font-weight:700;color:var(--navy);display:grid;gap:6px}
form.anfrage input,form.anfrage select,form.anfrage textarea{font:inherit;font-size:15px;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:11px 12px;background:#fbfcfd;width:100%}
form.anfrage input:focus,form.anfrage select:focus,form.anfrage textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;background:#fff}
form.anfrage textarea{min-height:140px;resize:vertical}
form.anfrage .consent{display:flex;gap:10px;align-items:start;font-weight:400;font-size:13.5px;color:var(--gray)}
form.anfrage .consent input{width:auto;margin-top:3px}
form.anfrage .hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
form.anfrage input[type=file]{padding:8px 10px;font-size:14px;cursor:pointer}
form.anfrage .field-hint{font-weight:400;font-size:13px;color:var(--gray)}
.form-note{color:var(--gray);font-size:13.5px}

/* ============ Footer ============ */
footer.site{background:var(--white);color:var(--gray);border-top:1px solid var(--line);padding:64px 0 0;font-size:14.5px}
footer.site .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{color:var(--navy);font-size:15px;font-weight:700;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
footer.site ul{list-style:none;display:grid;gap:8px}
footer.site a{color:var(--gray)}
footer.site a:hover{color:var(--blue)}
footer.site .flogo{margin-bottom:16px;font-weight:900;font-size:20px;letter-spacing:.04em;color:var(--navy)}
footer.site .flogo img{height:40px;width:auto;display:block}
footer.site .sub-item{padding-left:16px;font-size:13.5px;opacity:.9}
.copy{background:var(--navy-dark);margin-top:48px;font-size:13px;color:#8ca0b8}
.copy .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.copy a{color:#b9cadd}
.copy a:hover{color:#fff}
.copy .legal{display:flex;gap:22px}