/* ==========================================================================
   MEN Markewitsch Engineering Nürnberg GmbH — Website Redesign 2026
   Modern Industrial B2B Design System
   ========================================================================== */

/* Schriften lokal eingebunden (kein Aufruf von fonts.googleapis.com/fonts.gstatic.com) —
   DSGVO: dadurch wird beim Seitenaufruf keine IP-Adresse an Google übertragen.
   Dateien: SIL Open Font License 1.1, unter assets/fonts/ abgelegt. */
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts/archivo-latin-900-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Roboto Slab"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/roboto-slab-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Roboto Slab"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/roboto-slab-latin-800-normal.woff2") format("woff2"); }

:root{
  /* Brand colors — derived from the current Markewitsch corporate identity */
  --red: #D51130;
  --red-dark: #A50E26;
  --red-light: #F4394F;
  --ink: #14171A;          /* near-black anthracite */
  --anthracite: #1E2226;
  --anthracite-2: #2A2F35;
  --steel: #4A5157;
  --steel-light: #6B7278;
  --line: #DDE1E4;
  --line-dark: #363C42;
  --gray-100: #F5F6F7;
  --gray-200: #ECEEF0;
  --gray-warm: #D6D4D2;    /* logo gray */
  --white: #FFFFFF;
  --ok: #1F8A4C;

  --font-head: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-slab: "Roboto Slab", Georgia, serif;

  --container: 1240px;
  --radius: 2px;
  --shadow-sm: 0 1px 3px rgba(20,23,26,.08);
  --shadow-md: 0 8px 24px rgba(20,23,26,.12);
  --shadow-lg: 0 24px 60px rgba(20,23,26,.18);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  overflow-x:clip; /* Sicherheitsnetz: verhindert horizontales Scrollen/Layout-Verbreiterung durch
    randnahe, absolut positionierte Elemente (z.B. Balken-Tooltips am Chart-Rand), auch wenn diese
    unsichtbar (opacity:0) sind — unsichtbare position:absolute-Elemente zählen sonst trotzdem zum
    Scroll-Overflow der Seite. WICHTIG: hier bewusst `clip` statt `hidden` — `overflow-x:hidden` auf
    html/body erzwingt laut CSS-Spezifikation einen impliziten `overflow-y:auto`-Scrollcontainer auf
    genau diesen Elementen, was den `position:sticky`-Header (mobil besonders sichtbar) zerstört, weil
    der Header dann nicht mehr gegen das Viewport scrollt, sondern gegen diesen künstlichen
    Scrollcontainer. `clip` unterdrückt denselben horizontalen Overflow, ohne einen Scrollcontainer
    zu erzeugen. */
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family:var(--font-head); margin:0 0 .5em; font-weight:800; line-height:1.12; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
section{ position:relative; }

/* ---------- Utility ---------- */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.h-sub{ font-size:1.17em; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red);
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--red); display:inline-block; }
.eyebrow.on-dark{ color:var(--red-light); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-head); font-weight:700; font-size:.92rem; letter-spacing:.01em;
  padding:15px 28px; border-radius:var(--radius); border:2px solid transparent;
  cursor:pointer; transition:all .18s ease; white-space:nowrap; max-width:100%;
}
@media (max-width:420px){ .btn{ white-space:normal; text-align:center; } }
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-dark); transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:#fff; }
.btn-outline.on-dark{ color:#fff; border-color:rgba(255,255,255,.5); }
.btn-outline.on-dark:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-ghost-red{ background:transparent; color:var(--red); border-color:var(--red); }
.btn-ghost-red:hover{ background:var(--red); color:#fff; }
.btn-sm{ padding:10px 18px; font-size:.82rem; }
.btn-block{ width:100%; }

.section{ padding:96px 0; }
.section-sm{ padding:64px 0; }
.section-dark{ background:var(--anthracite); color:#fff; }
.section-dark .eyebrow{ color:var(--red-light); }
.section-alt{ background:var(--gray-100); }
.section-head{ max-width:720px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem,3.2vw,2.6rem); }
.section-head p{ color:var(--steel); font-size:1.08rem; }
.section-dark .section-head p{ color:#C4C9CE; }

.tag-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:100px;
  background:var(--gray-200); color:var(--steel); font-family:var(--font-head);
}

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid > *{ min-width:0; }

.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--red); color:#fff;
  padding:12px 20px; z-index:9999; font-weight:700;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Topbar ---------- */
.topbar{
  background:var(--ink); color:#B7BDC3; font-size:.82rem;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:40px; }
.topbar-left{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.topbar a{ color:#B7BDC3; }
.topbar a:hover{ color:#fff; }
.topbar-left span{ display:inline-flex; align-items:center; gap:6px; }
.topbar-right{ display:flex; gap:16px; align-items:center; }
.topbar-right a{ display:flex; align-items:center; gap:6px; }
.icon{ width:14px; height:14px; flex:none; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:1000; background:#fff;
  border-bottom:1px solid var(--line);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; height:88px; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
/* Offizielle Logo-Datei (Runde 41) statt der zuvor nachgebauten Icon+Schriftzug-Marke.
   width:auto + feste height hält das Original-Seitenverhältnis (2.5:1), object-fit:contain
   zusätzlich abgesichert gegen die width/height-HTML-Attribute (dienen nur CLS-Vermeidung). */
.brand-logo{ display:block; flex:none; height:3.75rem; width:auto; object-fit:contain; }
/* Header-Logo (Runde 87): Die PNG-Datei hat ringsum transparenten Rand (sichtbares Logo = ca. 81 % der
   Breite, 53 % der Höhe). Das Bild wird deshalb deutlich größer als die Kopfzeile gerendert und der
   leere Rand per negativem Margin ausgeglichen -- das sichtbare Logo wird größer und sitzt links
   bündig mit dem Seitenraster; der transparente Überstand ist unsichtbar (Schutzzone ergibt sich aus dem Design). */
.site-header .brand-logo{ --logo-h:5.1rem; height:var(--logo-h); max-width:none; margin-left:calc(var(--logo-h) * -0.231); margin-right:calc(var(--logo-h) * -0.231); }
@media (max-width:1200px){ .site-header .brand-logo{ --logo-h:4.4rem; } } /* schmale Desktop-Breiten: Navigation hat sonst zu wenig Platz */

.main-nav{ display:flex; align-items:stretch; height:100%; }
.main-nav > ul{ display:flex; align-items:stretch; height:100%; gap:2px; }
.main-nav > ul > li{ display:flex; align-items:stretch; position:relative; }
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:6px; padding:0 16px; height:100%;
  font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--ink);
  border-bottom:3px solid transparent; transition:all .15s ease;
}
.main-nav > ul > li > a:hover, .main-nav > ul > li.active > a{ color:var(--red); border-bottom-color:var(--red); }
.main-nav > ul > li > a .caret{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; opacity:.6; }

.dropdown{
  position:absolute; top:100%; left:0; min-width:260px; background:#fff;
  box-shadow:var(--shadow-lg); border-top:3px solid var(--red);
  padding:14px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all .16s ease; z-index:50;
}
.main-nav > ul > li:hover .dropdown,
.main-nav > ul > li.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:var(--radius);
}
.dropdown a:hover{ background:var(--gray-100); }
.dropdown a .dt{ font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--ink); }
.dropdown a:hover .dt{ color:var(--red); }
.dropdown .view-all{ margin-top:6px; padding-top:12px; border-top:1px solid var(--line); }
.dropdown .view-all .dt{ color:var(--red); }
/* Extern verlinkter Dropdown-Eintrag (z.B. Markewitsch Gruppe, öffnet in neuem Tab) */
.dropdown a[target="_blank"] .dt::after{ content:"↗"; margin-left:5px; font-size:.85em; opacity:.6; }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; }
.mobile-nav-cta{ display:none; }

/* Kontakt-Link in der Navigation hervorgehoben (mailto, kein eigener Menüpunkt-Look) */
.main-nav > ul > li > a.nav-link-cta{
  background:var(--red); color:#fff; border-radius:999px; padding:0 22px; margin:auto 0;
  height:auto; line-height:2.4; border-bottom:0;
}
.main-nav > ul > li > a.nav-link-cta:hover{ background:var(--red-dark); color:#fff; }

/* ---------- Mobile nav ---------- */
@media (max-width:1080px){
  .main-nav{ display:none; position:fixed; top:var(--nav-top,88px); left:0; right:0; bottom:0; background:#fff; overflow-y:auto;
    overscroll-behavior:contain; flex-direction:column; padding:12px 0 40px; }
  html.nav-locked{ overflow:hidden; }
  .main-nav.open{ display:flex; }
  .main-nav > ul{ flex-direction:column; height:auto; gap:0; }
  .main-nav > ul > li{ flex-direction:column; border-bottom:1px solid var(--line); }
  .main-nav > ul > li > a{ height:auto; padding:18px 24px; border-bottom:0; justify-content:space-between; }
  .dropdown{ position:static; box-shadow:none; border-top:1px solid var(--line); display:none;
    opacity:1; visibility:visible; transform:none; background:var(--gray-100); }
  .main-nav > ul > li.open .dropdown{ display:block; }
  .nav-cta .btn-outline{ display:none; }
  .mobile-nav-cta{ display:block; padding:20px 24px 32px; margin-top:auto; }
  .main-nav > ul > li:has(a.nav-link-cta){ display:none; } /* ersetzt durch .mobile-nav-cta unten */
  .burger{
    display:flex; align-items:center; justify-content:center; width:44px; height:44px;
    background:none; border:1px solid var(--line); cursor:pointer; flex-direction:column; gap:5px;
  }
  .burger span{ display:block; width:20px; height:2px; background:var(--ink); }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  padding:88px 0 110px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(115deg, rgba(20,23,26,.97) 38%, rgba(213,17,48,.16) 38.4%, rgba(213,17,48,.05) 60%, transparent 60.4%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 44px);
  pointer-events:none;
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero h1{ font-size:clamp(2.3rem,4.6vw,3.6rem); color:#fff; margin-bottom:22px; }
.hero h1 .hl{ color:var(--red-light); }
.hero p.lead{ font-size:1.18rem; color:#D4D8DC; max-width:560px; margin-bottom:34px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:48px; }
.hero-stats{ display:flex; gap:0; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.16); padding-top:28px; }
.hero-stats .stat{ flex:1; min-width:120px; padding-right:20px; }
.hero-stats .stat b{ display:block; font-family:var(--font-head); font-size:1.9rem; color:#fff; font-weight:800; }
.hero-stats .stat span{ font-size:.8rem; color:#AEB4B9; }
.hero-visual{
  position:relative; aspect-ratio:4/5; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(155deg,var(--anthracite-2),var(--ink));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-visual img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;
}
.hero-visual::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,23,26,.05) 0%, rgba(20,23,26,0) 30%, rgba(20,23,26,.55) 100%);
}
.hero-visual .frame-tag{
  position:absolute; top:18px; left:18px; z-index:1; font-family:var(--font-head); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--red-light); border:1px solid rgba(213,17,48,.5);
  background:rgba(20,23,26,.72); backdrop-filter:blur(3px);
  padding:6px 10px;
}
.hero-visual .corner{ position:absolute; width:34px; height:34px; border:2px solid var(--red); z-index:1; }
.hero-visual .corner.br{ bottom:14px; right:14px; border-left:0; border-top:0; }
.hero-visual svg{ width:62%; height:62%; }

/* ---------- Hero: großes, ganzflächiges Foto mit kurzem Claim (Stork-Referenz) ---------- */
.hero.hero-photo{
  position:relative; min-height:60vh; display:flex; align-items:flex-end;
  padding:0; overflow:hidden; background:var(--ink);
}
.hero.hero-photo::before{ content:none; }
.hero.hero-photo .hero-visual{
  position:absolute; inset:0; aspect-ratio:auto; border:0; background:none;
}
.hero.hero-photo .hero-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.hero.hero-photo .hero-visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,23,26,.94) 0%, rgba(20,23,26,.62) 34%, rgba(20,23,26,.3) 62%, rgba(20,23,26,.42) 100%);
}
.hero-content{ position:relative; z-index:1; padding-block:72px 44px; max-width:860px; }
.hero.hero-photo h1{ font-size:clamp(2.3rem,4.6vw,3.5rem); }
.hero.hero-photo .hero-ctas{ margin-bottom:0; }
/* Text-Fläche: das Hero-Foto ist an dieser Stelle mal hell/kontrastreich, mal ruhig/dunkel —
   je nachdem, was gerade im Bildausschnitt liegt (aktuell interimsweise ein Symbolfoto, siehe
   "Offene Punkte"). Damit Überschrift und Fließtext unabhängig vom jeweiligen Fotoausschnitt
   IMMER gut lesbar bleiben, liegt dahinter eine ruhige, leicht transparente Anthrazit-Fläche —
   randlos zum Rest des Fotos hin (kein hartes Kastengefühl), mit demselben roten
   Akzentstreifen links, der im übrigen Design für hervorgehobene Inhaltsblöcke steht
   (`.result-box`, `.spec-list .spec`), plus dem sitetypischen dezenten Eckenradius. */
.hero-textbox{
  display:inline-block; background:rgba(20,23,26,.6); backdrop-filter:blur(6px);
  border-left:4px solid var(--red); border-radius:var(--radius);
  padding:26px 32px; margin-bottom:28px; max-width:100%;
}
.hero-textbox p.lead{ margin-bottom:0; }

/* generic page hero (subpages) */
.page-hero{ background:var(--ink); color:#fff; padding:64px 0 56px; position:relative; overflow:hidden; }
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(213,17,48,.22), transparent 55%);
}
.breadcrumb{ position:relative; display:flex; gap:8px; align-items:center; font-size:.82rem; color:#AEB4B9; margin-bottom:18px; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:.5; }
.page-hero h1{ position:relative; color:#fff; font-size:clamp(1.9rem,3.6vw,2.9rem); max-width:820px; }
.page-hero p{ position:relative; color:#D4D8DC; font-size:1.08rem; max-width:680px; margin-bottom:0; }

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); padding:32px; transition:all .18s ease;
  display:flex; flex-direction:column; height:100%;
}
.card:hover{ box-shadow:var(--shadow-md); border-color:transparent; transform:translateY(-3px); }
/* Zertifikats-Karte (Runde 90): Zertifikatsbild verkleinert links in der Box, Text rechts; Klick öffnet
   das Zertifikat in der Lightbox. Das Bild hat feste Breite, die Karte wird dadurch nicht höher/breiter. */
.card.cert-card{ flex-direction:row; align-items:flex-start; gap:24px; cursor:zoom-in; }
.cert-thumb{ flex:none; width:clamp(96px,24%,132px); border:1px solid var(--line); box-shadow:var(--shadow-sm,0 1px 4px rgba(0,0,0,.12)); background:#fff; }
.cert-thumb img{ display:block; width:100%; height:auto; }
.cert-body{ min-width:0; flex:1; }
.cert-body h3{ margin-top:0; }
.cert-body p:last-child{ margin-bottom:0; }
.cert-body h3{ overflow-wrap:anywhere; hyphens:auto; }
/* Schmale Karten: Zertifikat oberhalb des Textes statt daneben, damit lange Überschriften nicht gequetscht werden */
@media (max-width:1100px){
  .card.cert-card{ flex-direction:column; gap:18px; }
  .cert-thumb{ width:128px; }
}
.card .ic{ width:46px; height:46px; margin-bottom:20px; color:var(--red); }
.card h3{ font-size:1.18rem; margin-bottom:10px; overflow-wrap:break-word; hyphens:auto; }
.card p{ color:var(--steel); font-size:.95rem; margin-bottom:16px; }
.card .more{ margin-top:auto; font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--red); display:flex; align-items:center; gap:6px; }

.card-dark{ background:var(--anthracite-2); border:1px solid var(--line-dark); color:#fff; }
.card-dark p{ color:#B9BFC5; }
.card-dark h3{ color:#fff; }

.icon-tile{
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:rgba(213,17,48,.08); color:var(--red); margin-bottom:20px;
}
.icon-tile svg{ width:26px; height:26px; }

/* ---------- Leistungsradar (dark "Radar-Screen" widget, wiederkehrendes Element) ---------- */
.target-widget{
  display:grid; grid-template-columns:1fr 340px; gap:52px; align-items:center; margin-top:8px;
}
.target-ring-wrap{
  position:relative; width:100%; max-width:560px; aspect-ratio:1/1; margin:0 auto; justify-self:center;
  /* Bewusst KEIN overflow:hidden hier: Hub und Punkte (samt Labels) sind Kinder dieses
     Containers und dürfen über den sichtbaren Kreis hinausragen (z.B. lange Labels auf
     schmalen Screens), ohne am Rand abgeschnitten zu werden. Der Kreis-Clip sitzt stattdessen
     nur auf der inneren .radar-disc (Sweep + Ringe), die das rein dekorative Radarbild ist. */
}
.radar-disc{
  position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 50% 46%, #23282e 0%, #181c20 46%, #0e1113 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 18px 60px rgba(0,0,0,.35), 0 0 70px rgba(213,17,48,.12);
}
/* dezenter, langsamer Radar-Sweep — rein dekorativ, respektiert prefers-reduced-motion */
.radar-sweep{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:0;
  /* Die helle Spitze liegt bei 0°/360° (= Bewegungsrichtung, siehe rotate() unten); das
     Nachleuchten liegt VOR diesem Punkt in der Gradzahl, also HINTER der Spitze in der
     tatsächlichen Drehrichtung (im Uhrzeigersinn) — wie beim Original-Radar üblich. */
  background:conic-gradient(from 0deg,
    transparent 0deg, transparent 310deg,
    rgba(213,17,48,.05) 334deg, rgba(213,17,48,.22) 350deg,
    rgba(213,17,48,.55) 360deg);
  animation:radar-spin 11s linear infinite;
  mix-blend-mode:screen;
}
@keyframes radar-spin{ to{ transform:rotate(360deg); } }
.target-rings{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
.target-rings circle{
  fill:none; stroke:rgba(213,17,48,.4); stroke-width:.3;
  filter:drop-shadow(0 0 1.5px rgba(213,17,48,.5));
}
.target-rings circle:first-of-type{ stroke:rgba(213,17,48,.55); }
.target-hub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(74px,15%,100px); height:clamp(74px,15%,100px); border-radius:50%;
  background:var(--red); border:3px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 6px rgba(213,17,48,.14), 0 0 26px rgba(213,17,48,.65), var(--shadow-md);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3;
  font:inherit; transition:transform .18s ease, box-shadow .18s ease;
}
.target-hub:hover, .target-hub:focus-visible{ transform:translate(-50%,-50%) scale(1.06); box-shadow:0 0 0 8px rgba(213,17,48,.18), 0 0 34px rgba(213,17,48,.8), var(--shadow-lg); }
.target-hub .hub-mark{ font-family:var(--font-slab); font-weight:800; font-size:clamp(1.4rem,3vw,1.9rem); color:#fff; }
.target-hub .hub-logo{ display:block; height:clamp(1.05rem,2.6vw,1.55rem); width:auto; color:#fff; }
.target-node{
  /* Der Button enthält Punkt + Tick + Label übereinander (unterschiedlich hoch je nach
     Label-Zeilenumbruch). Würde man den GESAMTEN Button per translate(-50%,-50%) auf der
     Kreislinie zentrieren, läge der PUNKT (das erste, oberste Element) je nach Gesamthöhe des
     Stapels unterschiedlich weit über/unter der eigentlich gewünschten Position — der Punkt saß
     dadurch nicht exakt auf der Kreislinie, sondern (je nach Winkel des Punkts am Kreis)
     unterschiedlich stark daneben, was den Eindruck erweckte, der Abtaststrahl ziele knapp neben
     die Punkte. Fix: nur horizontal zentrieren, vertikal um exakt den halben Punkt-Durchmesser
     (5.5px von 11px) verschieben — so liegt der PUNKT selbst (unabhängig von Label-Länge/
     Zeilenumbruch/Viewport) immer exakt auf der berechneten Kreislinie. transform-origin liegt
     aus demselben Grund auf der Punktmitte, damit auch die Hover-/Aktiv-Vergrößerung um den
     Punkt herum skaliert statt um die (falsche) Boxmitte. */
  position:absolute; transform:translateX(-50%) translateY(-5.5px); transform-origin:50% 5.5px;
  width:clamp(120px,22%,170px); border-radius:0; background:none; border:0; box-shadow:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:0; text-align:center;
  padding:0; font:inherit; z-index:2; transition:transform .18s ease;
}
.target-node .node-dot{
  width:11px; height:11px; border-radius:50%; background:var(--red); flex:none;
  box-shadow:0 0 0 4px rgba(213,17,48,.2), 0 0 10px rgba(213,17,48,.85);
  transition:all .18s ease;
}
.target-node .node-tick{ width:1px; height:14px; background:rgba(213,17,48,.55); margin:2px 0; transition:all .18s ease; }
.target-node .node-label{
  font-family:var(--font-head); font-weight:700; font-size:1.1rem; line-height:1.2; color:#fff;
  /* Dünne Outline in der Radar-Hintergrundfarbe: hält das Label lesbar, auch wenn ein Wort auf
     kleinen Screens über den dunklen Radar-Kreis hinaus auf den hellen Seitenhintergrund ragt. */
  text-shadow:
    -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink),
    0 1px 4px rgba(0,0,0,.6);
  transition:color .18s ease, transform .18s ease; transform-origin:50% 0;
}
.target-node:hover .node-label, .target-node:focus-visible .node-label, .target-node.is-active .node-label{ transform:scale(1.22); }
.target-node:hover, .target-node:focus-visible, .target-node.is-active{
  transform:translateX(-50%) translateY(-5.5px) scale(1.08); z-index:4;
}
.target-node:hover .node-dot, .target-node:focus-visible .node-dot, .target-node.is-active .node-dot{
  background:#fff; box-shadow:0 0 0 6px rgba(213,17,48,.3), 0 0 16px rgba(213,17,48,1);
}
.target-node:hover .node-tick, .target-node:focus-visible .node-tick, .target-node.is-active .node-tick{ background:#fff; }
.target-node:hover .node-label, .target-node:focus-visible .node-label, .target-node.is-active .node-label{ color:var(--red-light); }
.target-node.is-new .node-dot{ background:var(--anthracite-2); box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 0 10px rgba(255,255,255,.3); }
.node-badge{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff;
  font-family:var(--font-head); font-weight:800; font-size:.6rem; letter-spacing:.06em; padding:2px 7px; border-radius:20px;
  box-shadow:0 1px 4px rgba(0,0,0,.4); white-space:nowrap; z-index:1;
}
.node-badge-new{ background:#fff; color:var(--ink); }
.target-panel{
  background:var(--gray-100); border:1px solid var(--line); border-left:4px solid var(--red);
  padding:28px 30px; align-self:center; min-height:220px; display:flex; flex-direction:column; justify-content:center;
}
.target-panel .eyebrow{ margin-bottom:10px; }
.target-panel h3{ font-size:1.25rem; margin-bottom:10px; }
.target-panel p{ color:var(--steel); font-size:.95rem; margin-bottom:18px; }
.target-list{ display:none; }
.target-list li{ margin-bottom:10px; }
.target-list li a{
  display:flex; align-items:center; gap:16px; padding:16px 18px; background:#fff; border:1px solid var(--line);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.target-list li a:hover{ border-color:var(--red); box-shadow:var(--shadow-sm); }
.target-list li .icon-tile{ margin-bottom:0; flex:none; }
.target-list li b{ font-family:var(--font-head); font-size:.98rem; display:block; margin-bottom:3px; }
.target-list li a > span + span > span{ color:var(--steel); font-size:.86rem; display:block; font-weight:400; }

/* Radar-Infopopup — für Geräte ohne Hover (Smartphone/Tablet): Tap auf einen Punkt
   blendet den Infotext als Overlay über dem Radar ein, mit Option zum Schließen. */
.radar-modal-overlay{
  position:fixed; inset:0; background:rgba(10,12,14,.72); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.radar-modal-overlay.show{ opacity:1; visibility:visible; }
.radar-modal-box{
  background:#fff; max-width:380px; width:100%; padding:32px 28px; position:relative;
  border-left:4px solid var(--red); box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.radar-modal-box .eyebrow{ margin-bottom:10px; }
.radar-modal-box h3{ font-size:1.15rem; margin-bottom:10px; }
.radar-modal-box p{ color:var(--steel); font-size:.95rem; margin-bottom:20px; }
.radar-modal-close{
  position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%;
  background:var(--gray-100); border:1px solid var(--line); font-size:1.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
  font:inherit; padding:0;
}
.radar-modal-close:hover{ background:var(--red); color:#fff; border-color:var(--red); }

/* Service / leistung big row */
.feature-row{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.feature-row.rev{ direction:rtl; } .feature-row.rev > *{ direction:ltr; }
/* Variante mit gleich breiten Spalten (z.B. für hochformatige Fotos, die eine 50/50-Aufteilung statt
   der sonst üblichen .9fr/1.1fr-Gewichtung brauchen) -- als eigene Klasse statt Inline-Style, damit
   die Mobile-Media-Query weiter unten (@media max-width:980px) sie wie jede andere .feature-row auf
   eine Spalte zusammenfallen lassen kann. Ein Inline-Style hätte diese Media Query unwirksam gemacht
   (Inline-Styles haben stets Vorrang vor Media-Query-Regeln aus dem Stylesheet) -- das war genau die
   Ursache für das Mobile-Layout-Problem auf "Unternehmen", siehe Technischer Merksatz 11. */
.feature-row.even{ grid-template-columns:1fr 1fr; }
.feature-row.text-wide{ grid-template-columns:1.1fr .9fr; } /* Text breiter, Bild rechts in Standardgröße (.9fr) */
/* Desktop: Text und Bild oben ausrichten (statt mittig). Hat die Textspalte eine Eyebrow über der
   Überschrift, rutscht das Bild um deren Höhe nach unten, sodass seine Oberkante bündig mit der
   Überschrift abschließt (nicht mit der Eyebrow). Mobil siehe Media Query unten (Bild oben, ohne Versatz). */
.feature-row:has(> .feature-visual), .feature-row:has(> .feature-visual-pair){ align-items:start; }
.feature-row:has(> div > .eyebrow:first-child) > .feature-visual,
.feature-row:has(> div > .eyebrow:first-child) > .feature-visual-pair{ margin-top:41px; }
/* Zwei quadratische Fotos nebeneinander (Transport & Logistik, Industriemontagen) -- jedes für sich per Klick in der Lightbox. */
.feature-visual-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.feature-visual{
  aspect-ratio:1/1; background:var(--gray-100); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.feature-visual svg{ width:52%; height:52%; color:var(--red); opacity:.92; }
.feature-visual .corner{ position:absolute; width:34px; height:34px; border:2px solid var(--red); }
.feature-visual .corner.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.feature-visual .corner.br{ bottom:14px; right:14px; border-left:0; border-top:0; }
/* Variante für .feature-visual auf .section-dark: der Standard-Hellgrau-Kasten (var(--gray-100))
   würde auf dunklem Grund als heller Fleck wirken -- stattdessen ein dezenter, halbtransparenter
   weißer Kasten, der zur restlichen dunklen Sektion passt (Icon/Ecken bleiben unverändert rot). */
.feature-visual.on-dark{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
.feature-visual.is-photo{ background:var(--ink); cursor:zoom-in; }
.feature-visual.is-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Automatischer Bild-Slider (Industriemontagen): alle Bilder liegen übereinander in derselben quadratischen
   Box und werden per Überblendung gewechselt (main.js setzt .is-active). Ohne JS bleibt das erste Bild
   sichtbar. Die Punkte unten sind per Klick/Tap bedienbar. */
.feature-visual.is-slider .slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.feature-visual.is-slider .slide.is-active{ opacity:1; }
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:rgba(20,23,26,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:.85; transition:background .2s ease, opacity .2s ease;
}
.feature-visual .slider-arrow svg{ width:22px; height:22px; color:#fff; opacity:1; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.slider-arrow.prev{ left:10px; }
.slider-arrow.next{ right:10px; }
.slider-arrow:hover, .slider-arrow:focus-visible{ background:var(--red); opacity:1; }
.slider-arrow:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.slider-dots{ position:absolute; left:0; right:0; bottom:6px; display:flex; justify-content:center; gap:0; z-index:2; pointer-events:none; }
.slider-dots button{
  pointer-events:auto; width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer; position:relative;
}
.slider-dots button::before{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(0,0,0,.35); transition:background .2s ease, transform .2s ease;
}
.slider-dots button.is-active::before{ background:#fff; transform:scale(1.25); }
.slider-dots button:focus-visible{ outline:2px solid var(--red); outline-offset:-4px; }
@media (prefers-reduced-motion: reduce){ .feature-visual.is-slider .slide{ transition:none; } }
/* Fallback, wenn ein (teils per Hotlink eingebundenes) Foto nicht lädt: statt eines leeren
   Kastens im hohen Original-Fotoseitenverhältnis erscheint ein kompakter Platzhalter im
   bestehenden Icon-Stil (wie der generische .feature-visual ohne Foto) -- siehe main.js. */
.feature-visual.is-photo.img-failed{ aspect-ratio:4/3 !important; cursor:default; }
.feature-visual.is-photo.img-failed img{ display:none; }
.feature-visual.is-photo.img-failed::after{
  content:""; width:42%; height:42%; opacity:.85;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23D51130' stroke-width='2'%3E%3Crect x='4' y='8' width='40' height='32' rx='2'/%3E%3Ccircle cx='16' cy='18' r='4'/%3E%3Cpath d='M4 34l10-10 8 8 8-10 10 12'/%3E%3C/svg%3E");
}
/* Bilder in den Contentbereichen füllen ihre Box immer vollständig (object-fit:cover, keine Balken);
   die Box-Proportion folgt dem Bild nur dort, wo es inline gesetzt ist (z.B. Zertifikate). Die
   vollständige Ansicht in Originalgröße zeigt die Lightbox (Klick). */
/* Foto-Galerie (Runde 35): ersetzt an mehreren Stellen (u.a. Industriemontagen-Praxisabschnitte)
   das einzelne .feature-visual-Foto durch mehrere gleichgroße, einzeln vergrößerbare Bilder.
   Bewusst als CSS-Grid mit auto-fill/minmax statt fester Spaltenzahl, damit ein viertes, fünftes
   etc. Bild einfach als weiteres <img> in der Python-Bildliste ergänzt werden kann, ohne Markup
   oder CSS anzufassen ("leicht erweiterbar", Kundenwunsch) -- bei 3 Bildern ergibt sich so
   automatisch eine 3er-Reihe, bei z.B. 4 Bildern zwei Reihen zu 2, je nach verfügbarer Breite. */
.photo-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.photo-gallery-item{ aspect-ratio:4/3; background:var(--ink); cursor:zoom-in; position:relative; overflow:hidden; border:1px solid var(--line); }
.photo-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Startseite "Präzision"-Sektion (Runde 36/37, Kundenwunsch): anklickbare Flächen, die auf zentrale
   Leistungsseiten verlinken (Industriemontagen/Industrieservice/Engineering/Retrofit). Sie stehen
   UNTER dem zentrierten Text statt daneben -- eigenständige Button-Kacheln nach dem Absatz, nicht
   mehr in einer seitlichen .feature-visual-Box. Zwei feste Spalten -- bei 4 Kacheln ergeben sich
   automatisch 2 Reihen zu je 2, ohne dass die CSS-Regel angepasst werden muss. */
.split-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
.split-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:var(--anthracite-2); border:1px solid var(--line-dark); border-radius:var(--radius);
  color:#fff; text-decoration:none; text-align:center; padding:22px 12px;
  transition:background .15s ease,border-color .15s ease;
}
.split-tile:hover,.split-tile:focus-visible{ background:var(--red); border-color:var(--red); }
.split-tile svg{ width:36px; height:36px; color:var(--red-light); opacity:.95; }
.split-tile:hover svg,.split-tile:focus-visible svg{ color:#fff; }
.split-tile span{ font-family:var(--font-head); font-weight:700; font-size:.98rem; }
.spec-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0; }
.spec-list .spec{ border-left:3px solid var(--red); padding:6px 0 6px 14px; }
.spec-list .spec b{ display:block; font-family:var(--font-head); font-size:1.05rem; }
.spec-list .spec span{ font-size:.8rem; color:var(--steel); }
.check-list li{ display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.96rem; }
.check-list li:last-child{ border-bottom:0; }
.check-list svg{ width:18px; height:18px; color:var(--red); flex:none; margin-top:2px; }
/* Runde 51: Listen stehen oben, der Fließtext folgt -- etwas Abstand zwischen Liste und nachfolgendem Text */
.check-list + p, .check-list + h3{ margin-top:22px; }
/* Einfache Stichpunktliste mit rotem Aufzählungspunkt (Runde 39) -- schlanker als .check-list
   (keine Icons/Trennlinien), für Folien-/Prozess-Inhalte mit vielen kurzen Punkten je Karte. */
.dot-list{ list-style:disc; padding-left:20px; margin:0; }
.dot-list li{ color:var(--steel); font-size:.95rem; margin-bottom:10px; }
.dot-list li:last-child{ margin-bottom:0; }
.dot-list li::marker{ color:var(--red); }

/* Stat band */
.stat-band{ background:var(--anthracite); color:#fff; }
.stat-band .grid-4{ text-align:center; }
.stat-band .stat b{ display:block; font-family:var(--font-head); font-size:2.5rem; font-weight:800; color:#fff; }
.stat-band .stat span{ font-size:.85rem; color:#AEB4B9; }

/* Certification strip */
.cert-strip{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.cert-chip{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:10px 16px;
  font-family:var(--font-head); font-weight:700; font-size:.85rem; background:#fff;
}
.cert-chip svg{ width:20px; height:20px; color:var(--red); }

/* Timeline (Über uns) */
.timeline{ position:relative; padding-left:28px; border-left:2px solid var(--line); }
.timeline .tl-item{ position:relative; padding-bottom:36px; }
.timeline .tl-item:last-child{ padding-bottom:0; }
.timeline .tl-item::before{
  content:""; position:absolute; left:-34px; top:2px; width:12px; height:12px; background:var(--red); border-radius:50%;
}
.timeline .yr{ font-family:var(--font-head); font-weight:800; color:var(--red); font-size:1.05rem; }

/* Case study / project card */
.proj-card{ border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; height:100%; }
.proj-media{ aspect-ratio:16/10; background:linear-gradient(150deg,var(--anthracite-2),var(--ink)); position:relative; display:flex; align-items:flex-end; padding:18px; }
.proj-media.is-photo{ background:var(--ink); padding:0; cursor:zoom-in; }
.proj-media.is-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.proj-media svg{ position:absolute; top:18px; right:18px; width:34px; height:34px; color:rgba(255,255,255,.35); }
.proj-media .country{ font-family:var(--font-head); font-weight:800; color:#fff; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; background:rgba(213,17,48,.92); padding:5px 10px; }
.proj-body{ padding:26px; display:flex; flex-direction:column; flex:1; }
.proj-body h3{ font-size:1.1rem; margin-bottom:8px; }
.proj-body p{ color:var(--steel); font-size:.92rem; }
.proj-facts{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0; font-size:.78rem; color:var(--steel); }
.proj-facts b{ color:var(--ink); font-family:var(--font-head); }
.proj-body .more{ margin-top:auto; font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--red); }

.kpi-row{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.kpi{ background:var(--gray-100); padding:14px 18px; min-width:140px; }
.kpi b{ display:block; font-family:var(--font-head); font-weight:800; font-size:1.3rem; }
.kpi span{ font-size:.76rem; color:var(--steel); }

/* Quote / testimonial-ish result box */
.result-box{ background:var(--gray-100); border-left:4px solid var(--red); padding:24px 28px; font-size:1.02rem; }

/* CTA band */
.cta-band{ background:var(--red); color:#fff; }
.cta-band h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); }
.cta-flex{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.cta-band .btn-outline{ border-color:#fff; color:#fff; }
.cta-band .btn-outline:hover{ background:#fff; color:var(--red); }

/* Forms */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--font-head); font-weight:700; font-size:.82rem; }
.field label .opt{ color:var(--steel); font-weight:400; }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:.95rem; padding:13px 14px; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--red); outline-offset:1px; border-color:var(--red); }
.field-check{ display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--steel); }
.form-note{ font-size:.78rem; color:var(--steel); margin-top:10px; }
.form-success{
  display:none; background:#EAF6EE; border:1px solid var(--ok); color:#175C33; padding:16px 18px; margin-bottom:20px; font-size:.92rem; font-weight:600;
}
.form-success.show{ display:block; }

/* Contact info cards */
.contact-info-card{ display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.contact-info-card:last-child{ border-bottom:0; }
.contact-info-card .ic{ width:22px; height:22px; color:var(--red); flex:none; margin-top:3px; }
.contact-info-card b{ display:block; font-family:var(--font-head); font-size:.98rem; margin-bottom:2px; }
.contact-info-card span, .contact-info-card a{ font-size:.92rem; color:var(--steel); }

/* Footer */
.site-footer{ background:var(--ink); color:#B7BDC3; padding-top:72px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:32px; padding-bottom:56px; }
/* Logo im Footer (Runde 41): die Original-Logodatei hat schwarzen Schriftzug, der auf dem
   dunklen Footer-Hintergrund (var(--ink)) unleserlich wäre -- deshalb auf einer kleinen weißen
   Fläche platziert (gleiche sehr dezente Eckenrundung wie der Rest der Seite, var(--radius)). */
.footer-logo-chip{
  display:inline-flex; align-items:center; background:#fff; padding:14px 18px;
  border-radius:var(--radius); margin-bottom:10px;
}
.footer-logo-chip .brand-logo{ height:3.2rem; }
.footer-brand p{ color:#9BA2A8; font-size:.9rem; margin:18px 0 20px; max-width:280px; }
.footer-col .footer-h{ font-family:var(--font-head); color:#fff; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col a{ font-size:.9rem; color:#B7BDC3; }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ border-color:var(--red); background:var(--red); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.82rem; color:#8B9198; }
.footer-bottom ul{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-bottom a{ color:#8B9198; }
.footer-bottom a:hover{ color:#fff; }

/* Back to top */
.to-top{
  position:fixed; right:24px; bottom:24px; width:46px; height:46px; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all .2s ease; z-index:900;
}
.to-top.show{ opacity:1; visibility:visible; }
.to-top svg{ width:18px; height:18px; }

/* Anchor offset for sticky header */
[id]{ scroll-margin-top:100px; }

/* ---------- Motion: Hero-Tiefeneffekt, Count-up, Scroll-Reveal ---------- */
.hero-visual img{ will-change:transform; transition:transform .05s linear; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
/* Karten in einem Grid leicht versetzt einblenden lassen */
.grid .reveal:nth-child(2){ transition-delay:.08s; }
.grid .reveal:nth-child(3){ transition-delay:.16s; }
.grid .reveal:nth-child(4){ transition-delay:.24s; }

/* ---------- Generalunternehmer-Vorteil: Vergleichstabelle (CSS/JS, kein Bild) ----------
   .advantage-row wird wie .card/.result-box etc. über die allgemeine Scroll-Reveal-Liste
   (main.js) animiert und faded/slided beim Scrollen leicht versetzt ein (nth-child-Kaskade,
   analog zu .grid .reveal oben). Der Pfeil je Zeile zieht zusätzlich, mit kurzer Verzögerung,
   einmalig nach -- kein Dauerloop, siehe Merksatz 22 ("Glanzeffekt nur noch einmal"). */
.advantage-table{ max-width:920px; margin:0 auto; }
.advantage-head, .advantage-row{
  display:grid; grid-template-columns:200px 1fr 40px 1fr; align-items:center; gap:4px 20px;
}
.advantage-head{ padding-bottom:14px; border-bottom:2px solid var(--ink); margin-bottom:6px; }
.advantage-head-label{
  font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel);
}
.advantage-head-label--men{ color:var(--red); }
.advantage-row{ padding:20px 0; border-bottom:1px solid var(--line); }
.advantage-row:last-child{ border-bottom:none; }
.advantage-cat{ font-family:var(--font-head); font-weight:700; font-size:.98rem; }
.advantage-old{ color:var(--steel); font-size:.95rem; }
.advantage-new{
  border-left:3px solid var(--red); padding:4px 0 4px 14px; font-family:var(--font-head);
  font-weight:700; font-size:.95rem; color:var(--ink);
}
.advantage-tag{ display:none; }
.advantage-arrow{
  display:flex; align-items:center; justify-content:center; color:var(--red);
  opacity:0; transform:scaleX(.4); transform-origin:left;
  transition:opacity .6s ease .15s, transform .6s ease .15s;
}
.advantage-arrow-ic{ width:22px; height:22px; flex:none; }
.advantage-row.is-visible .advantage-arrow{ opacity:1; transform:scaleX(1); }
/* Zeilen leicht versetzt einblenden (advantage-head ist Geschwister Nr.1, Zeilen ab Nr.2) */
.advantage-table .advantage-row:nth-child(3){ transition-delay:.08s; }
.advantage-table .advantage-row:nth-child(4){ transition-delay:.16s; }
.advantage-table .advantage-row:nth-child(5){ transition-delay:.24s; }
.advantage-table .advantage-row:nth-child(6){ transition-delay:.32s; }
@media (max-width:980px){
  .advantage-head{ display:none; }
  .advantage-row{ grid-template-columns:1fr; justify-items:start; gap:8px; }
  .advantage-arrow{ transform:rotate(90deg) scaleX(.4); transform-origin:center; justify-self:center; }
  .advantage-row.is-visible .advantage-arrow{ transform:rotate(90deg) scaleX(1); }
  .advantage-tag{
    display:block; font-family:var(--font-head); font-weight:700; font-size:.7rem;
    letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin-bottom:4px;
  }
  .advantage-new .advantage-tag{ color:var(--red); }
}
@media (prefers-reduced-motion: reduce){
  .advantage-arrow{ opacity:1; transform:none !important; transition:none; }
}

/* ---------- Auftragsverteilung: animierter Balkenchart (CSS/JS, kein Bild) ---------- */
.order-chart{ max-width:920px; margin:0 auto; }
.order-chart-bars{
  display:flex; align-items:flex-end; gap:14px; height:260px;
  padding:0 4px; border-bottom:2px solid var(--line);
}
.order-chart-bar{
  flex:1; height:100%; display:flex; align-items:flex-end; min-width:0; position:relative;
}
.order-chart-bar:focus-visible{ outline:2px solid var(--red); outline-offset:4px; border-radius:4px; }
.order-chart-fill{
  width:100%; height:0; border-radius:8px 8px 3px 3px; background:var(--bar-color);
  position:relative; overflow:hidden; cursor:pointer;
  box-shadow:0 8px 16px -8px rgba(20,23,26,.35);
  transition:height 1s cubic-bezier(.16,1,.3,1), transform .25s ease, filter .25s ease;
}
.order-chart.is-visible .order-chart-fill{ height:calc(var(--pct) * 1%); }
.order-chart-bar:hover .order-chart-fill{ transform:translateY(-4px); filter:brightness(1.08); }
.order-chart-fill::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.4) 45%, transparent 65%);
  background-size:240% 100%; background-position:160% 0; background-repeat:no-repeat; opacity:0;
}
/* Glanzeffekt läuft beim Einblenden einmal durch und blendet danach vollständig aus (nicht dauerhaft).
   Runde 93: background-repeat:no-repeat -- das wiederholte Verlaufs-Tile erzeugte sonst an der Tile-Grenze
   eine harte senkrechte Kante im Balken (v. a. links); der Glanz bleibt am Ende nicht mehr stehen. */
.order-chart.is-visible .order-chart-fill::before{ animation:order-chart-shimmer 1.6s ease-in-out .3s 1 both; }
@keyframes order-chart-shimmer{
  0%{ background-position:160% 0; opacity:0; }
  15%{ opacity:1; }
  55%{ background-position:-60% 0; opacity:1; }
  100%{ background-position:-60% 0; opacity:0; }
}
/* Balkenbezeichnung: per Mouseover UND per Klick/Tap (auch mobile) sichtbar.
   --tip-shift wird per JS gesetzt, um ein Überstehen über den Viewportrand bei
   Balken am linken/rechten Rand oder bei langen Bezeichnungen zu verhindern;
   der Sprechblasen-Pfeil (::after) gleicht die Verschiebung gegenläufig aus,
   damit er weiterhin genau auf den Balken zeigt. */
.order-chart-tip{
  position:absolute; left:50%; bottom:calc(var(--pct) * 1% + 12px);
  transform:translate(calc(-50% + var(--tip-shift, 0px)), 4px) scale(.94);
  max-width:min(46vw, 190px);
  background:var(--anthracite-2); color:#fff; font-size:.8rem; font-weight:600; line-height:1.3;
  white-space:normal; text-align:center; padding:6px 11px; border-radius:6px; z-index:5;
  box-shadow:0 8px 20px -8px rgba(20,23,26,.5);
  opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}
.order-chart-tip::after{
  content:''; position:absolute; top:100%; left:calc(50% - var(--tip-shift, 0px)); transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--anthracite-2);
}
.order-chart-bar:hover .order-chart-tip,
.order-chart-bar:focus-visible .order-chart-tip,
.order-chart-bar.is-active .order-chart-tip{
  opacity:1; transform:translate(calc(-50% + var(--tip-shift, 0px)), 0) scale(1);
}
.order-chart-legend{
  display:flex; flex-wrap:wrap; gap:9px 22px; justify-content:center;
  margin:26px 0 0; padding:0; list-style:none;
}
.order-chart-legend li{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--steel); }
.order-chart-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; flex:none; }
@media (max-width:600px){
  .order-chart-bars{ height:170px; gap:7px; }
  .order-chart-fill{ border-radius:5px 5px 2px 2px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-visual img{ transition:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .radar-sweep{ animation:none; opacity:.4; }
  .order-chart-fill{ transition:none !important; height:calc(var(--pct) * 1%) !important; }
  .order-chart-fill::before{ display:none; }
}

/* ---------- Responsive ---------- */
/* Karten mit langen Fachbegriffen (Dienstleistungen-Übersicht): bis 1240 px zweispaltig */
@media (max-width:1240px){ .grid-4.grid-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.card p{ overflow-wrap:break-word; hyphens:auto; }
@media (max-width:980px){
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-grid .hero-visual{ aspect-ratio:16/10; margin-top:8px; }
  .hero.hero-photo{ min-height:52vh; }
  .hero-content{ padding-block:72px 44px; }
  /* .feature-row.even explizit mitaufführen: die "even"-Variante (gleich breite Spalten für
     Hochformat-Fotos) hat dieselbe Selektor-Spezifität wie diese Mobile-Regel für die reine
     .feature-row-Basisklasse -- ohne sie hier separat zu nennen, würde .even auf Mobilgeräten
     NICHT auf eine Spalte zusammenfallen (das war der eigentliche Auslöser des "Unternehmen"-
     Mobile-Bugs, siehe Technischer Merksatz 11). */
  .feature-row, .feature-row.rev, .feature-row.even, .feature-row.text-wide{ grid-template-columns:1fr; direction:ltr; }
  .feature-visual, .feature-visual-pair{ order:-1; }
  .feature-row:has(> div > .eyebrow:first-child) > .feature-visual,
  .feature-row:has(> div > .eyebrow:first-child) > .feature-visual-pair{ margin-top:0; }
  .target-widget{ grid-template-columns:1fr; justify-items:center; gap:36px; }
  .target-ring-wrap{ max-width:460px; }
  .target-panel{ width:100%; max-width:560px; }
}
@media (max-width:760px){
  /* Radar bleibt sichtbar & tappbar; das Infopanel weicht dem Popup (kein Hover verfügbar) */
  .target-ring-wrap{ max-width:340px; }
  .target-node{ width:clamp(92px,28%,116px); }
  .target-node .node-label{ font-size:.86rem; }
  .target-panel{ display:none; }
}
@media (max-width:680px){
  .section{ padding:64px 0; }
  .hero-grid .hero-visual{ aspect-ratio:4/3; }
  .hero.hero-photo{ min-height:48vh; }
  .hero-content{ padding-block:56px 32px; }
  .hero-textbox{ padding:20px 22px; margin-bottom:26px; }
  .hero.hero-photo h1{ font-size:2.05rem; }
  .hero.hero-photo .hero-textbox p.lead{ font-size:1rem; line-height:1.55; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 20px; }
  .form-grid{ grid-template-columns:1fr; }
  .topbar{ font-size:.86rem; }
  .topbar .container{ height:auto; padding-top:10px; padding-bottom:10px; flex-direction:column; align-items:flex-start; gap:7px; }
  .topbar-left{ gap:14px; }
  .topbar-left span{ white-space:normal; line-height:1.4; }
  /* Telefon & E-Mail nebeneinander, wenn Platz ist -- sonst (schmale Screens) je eigene Zeile,
     statt wie bisher in einer Zeile über den Bildschirmrand hinauszulaufen und dort abgeschnitten
     zu werden (sichtbar z.B. bei der E-Mail-Adresse auf schmalen Android-Breiten). */
  .topbar-right{ flex-wrap:wrap; row-gap:6px; width:100%; }
  .nav-wrap{ height:76px; }
  /* Topbar (3 Zeilen auf Mobil) scrollt weg, nur die Navigationszeile bleibt sticky --
     --topbar-h wird in main.js gesetzt; ohne JS bleibt alles wie zuvor sichtbar. */
  .site-header{ top:calc(-1 * var(--topbar-h, 0px)); }
  .main-nav{ top:var(--nav-top,76px); }
  .brand-logo{ height:2.9rem; }
  .site-header .brand-logo{ --logo-h:3.9rem; }
  .nav-cta .btn-primary{ display:none; }
  .cta-flex{ flex-direction:column; align-items:flex-start; }
  .hero-stats .stat{ min-width:45%; margin-bottom:14px; }
}
@media (max-width:420px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- Lightbox: alle Bilder/Grafiken (außer Hero) sind vergrößerbar, kein Download ---------- */
[data-lightbox]{ cursor:zoom-in; position:relative; }
[data-lightbox]::after{
  content:"⤢"; position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  background:rgba(20,23,26,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.95rem; opacity:0; transition:opacity .15s ease; pointer-events:none; z-index:2;
}
[data-lightbox]:hover::after, [data-lightbox]:focus-within::after{ opacity:1; }
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(15,17,19,.94); z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:32px;
  opacity:0; visibility:hidden; transition:opacity .18s ease;
}
.lightbox-overlay.show{ opacity:1; visibility:visible; }
.lightbox-box{
  background:#fff; max-width:min(640px,92vw); max-height:88vh; overflow:auto;
  padding:44px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative;
}
.lightbox-box svg{ width:96px; height:96px; color:var(--red); }
.lightbox-caption{ margin-top:20px; font-family:var(--font-head); font-weight:700; color:var(--ink); }
.lightbox-hint{ margin-top:8px; font-size:.82rem; color:var(--steel); }
.lightbox-close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border:1px solid var(--line);
  background:#fff; cursor:pointer; font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ border-color:var(--red); color:var(--red); }

/* Print */
@media print{ .site-header, .site-footer, .to-top{ display:none; } }

/* Runde 65: größere Tippflächen auf dem Smartphone (Kontaktzeile oben, Breadcrumb, "Case Study lesen"-Links) */
@media (max-width:680px){
  .topbar a{ display:inline-flex; align-items:center; min-height:30px; }
  .breadcrumb{ gap:4px; margin-bottom:12px; }
  .breadcrumb a{ display:inline-flex; align-items:center; min-height:30px; padding:0 4px; }
  .card .more, .proj-body .more{ display:inline-flex; align-items:center; min-height:30px; }
}

/* Lightbox für Fotos: Originalgröße (keine Skalierung nach oben), nur bei Bedarf auf das Fenster begrenzt */
.lightbox-overlay.is-image .lightbox-box{ max-width:96vw; max-height:94vh; padding:20px; }
.lightbox-overlay.is-image .lightbox-media img{ display:block; width:auto; height:auto; max-width:calc(96vw - 40px); max-height:calc(94vh - 110px); }
@media (max-width:680px){
  .lightbox-overlay{ padding:12px; }
  .lightbox-overlay.is-image .lightbox-box{ padding:14px; }
  .lightbox-overlay.is-image .lightbox-media img{ max-width:calc(96vw - 28px); }
}

/* Karriere: Stellen-Karten + Stellenausschreibung */
.job-card{ display:flex; flex-direction:column; }
.job-card h3 a{ color:inherit; text-decoration:none; }
.job-card h3 a:hover{ color:var(--accent, inherit); text-decoration:underline; }
.job-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:16px; }
.job-actions .btn{ flex:0 1 auto; }
@media (max-width:420px){ .job-actions .btn{ flex:1 1 100%; } }

/* Datenschutz: Listen */
.dp-list{ list-style:disc; padding-left:1.3em; margin:0 0 1em; }
.dp-list li{ margin:0 0 .4em; color:var(--steel); }

/* Datenschutz (lange Rechtstexte) */
.legal h2.h-sub{ margin-top:2.2em; scroll-margin-top:110px; }
.legal h3{ font-size:1.05rem; margin:1.5em 0 .5em; color:var(--ink); }
.legal p{ margin:0 0 1em; }
.legal ul.dp-list{ margin:0 0 1.1em; }
.dp-toc{ background:#F3F4F6; border-left:3px solid var(--red); padding:18px 22px; margin:0 0 1.5em; }
.dp-toc-h{ font-weight:700; color:var(--ink); margin:0 0 8px; }
.dp-toc ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:28px; }
.dp-toc li{ break-inside:avoid; margin:0 0 5px; font-size:.9rem; line-height:1.4; }
.dp-toc a{ color:var(--steel); }
.dp-toc a:hover{ color:var(--red); text-decoration:underline; }
@media (max-width:700px){ .dp-toc ul{ columns:1; } }