/* ============================================================
   IGS Relaunch — Design System
   ============================================================ */

/* Farben der bisherigen igs.de. Die Werte stammen aus der Elementor-Palette
   der alten Seite (#192D42, #2C4B5F, #446C7C, #618F99, #AAD4D3, #D5F1EE,
   #EBEFF4) und decken sich mit den SMART-/STOP-Grafiken. */
:root {
  /* Tempo-Regler fuer Animationen. 1 = schnell, groesser = ruhiger.
     Fest auf Variante E (Kundenwahl Oktober 2026). */
  --tempo: 1.4;
  --parallax: 0.45;
  --navy-900: #192d42;
  --navy-800: #2c4b5f;
  --navy-700: #446c7c;
  --navy-600: #618f99;
  --akzent-600: #2c4b5f;
  --akzent-500: #446c7c;
  --akzent-400: #aad4d3;
  --akzent-600-rgb: 44,75,95;
  --akzent-500-rgb: 68,108,124;
  --akzent-400-rgb: 170,212,211;
  --cream-50: #ebeff4;
  --cream-100: #d5f1ee;
  --white: #ffffff;
  --ink-900: #192d42;
  --ink-700: #34495c;
  --ink-500: #5a6e7f;
  --ink-300: #94a4b1;
  --border: #d3dce4;
  --shadow-sm: 0 2px 10px rgba(25, 45, 66, 0.07);
  --shadow-md: 0 10px 30px rgba(25, 45, 66, 0.11);
  --shadow-lg: 0 25px 60px rgba(25, 45, 66, 0.20);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --container: 1180px;
  --font-head: 'Manrope', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.16,.84,.32,1);
  /* ruhiger, langer Auslauf – fuer die Auftritte beim Scrollen und Laden */
  --ease-edel: cubic-bezier(.21,.6,.22,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-700);
  background: var(--white);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Umbruchschutz: deutsche Komposita brechen um, statt die Seite zu verbreitern.
     Ohne das laeuft jede Seite bei 200 % Schriftgroesse seitlich weg. */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
.list-check { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.1rem; }
.list-check li { position: relative; padding-left: 2rem; color: var(--ink-700); line-height: 1.55; }
.list-check li::before {
  content: ""; position: absolute; left: 0; top: 0.2em;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--akzent-500), var(--akzent-600));
  box-shadow: 0 4px 10px -4px rgba(var(--akzent-600-rgb),0.5);
}
.list-check li::after {
  content: ""; position: absolute; left: 6px; top: 0.52em;
  width: 8px; height: 4px;
  border-left: 2px solid var(--white); border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
}
button { font-family: inherit; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-900);
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

section { padding-block: clamp(3.5rem, 8vw, 7rem); }

.eyebrow {
  display: inline-flex;
  /* Bei grosser Schrift umbrechen statt die Seite zu verbreitern:
     ein inline-flex schrumpft sonst nie unter seine Inhaltsbreite. */
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent-600);
  margin-bottom: 0.9em;
}
/* Markenname wird nie in Grossbuchstaben gesetzt - Schreibweise bleibt ueberall gleich */
.eyebrow-marke { text-transform: none; letter-spacing: 0.03em; }
.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--akzent-500);
  border-radius: 2px;
}

.h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.h2 { font-size: clamp(1.55rem, 3.4vw, 2.5rem); }
.h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-500); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95em 1.7em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform calc(0.35s * var(--tempo)) var(--ease), filter calc(0.35s * var(--tempo)) var(--ease), background calc(0.35s * var(--tempo)) var(--ease), color calc(0.35s * var(--tempo)) var(--ease), border-color calc(0.35s * var(--tempo)) var(--ease);
  white-space: nowrap;
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 48%, transparent 66%);
  transform: translateX(-130%);
  transition: transform calc(0.65s * var(--tempo)) var(--ease);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }
.btn-primary { background: linear-gradient(135deg, var(--akzent-500), var(--akzent-600)); color: var(--white); }
.btn-primary:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.06); }
.btn-ghost { background: rgba(255,255,255,0.08); color: var(--white); border-color: rgba(255,255,255,0.35); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px) scale(1.02); }
.btn-outline { background: transparent; color: var(--navy-800); border-color: var(--border); }
.btn-outline:hover { border-color: var(--navy-700); background: var(--cream-50); transform: translateY(-2px) scale(1.02); }
.btn-sm { padding: 0.7em 1.3em; font-size: 1rem; }
@media (max-width: 600px) {
  .btn { padding: 0.75em 1.4em; font-size: 0.95rem; }
  .btn-sm { padding: 0.6em 1.15em; font-size: 0.92rem; }
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: background calc(0.4s * var(--tempo)) var(--ease), padding calc(0.4s * var(--tempo)) var(--ease), box-shadow calc(0.4s * var(--tempo)) var(--ease);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
/* Weicher Verlauf unter der Leiste: das weisse Logo bleibt auch ueber hellen
   Fotos lesbar, ohne dass die Leiste wie ein geschlossener Balken wirkt. */
.site-header::before {
  content: "";
  position: absolute; inset: 0 0 -48px 0;
  background: linear-gradient(to bottom, rgba(25,45,66,0.82) 0%, rgba(25,45,66,0.52) 55%, rgba(25,45,66,0) 100%);
  pointer-events: none;
  transition: opacity calc(0.4s * var(--tempo)) var(--ease);
}
.site-header.is-scrolled::before { opacity: 0; }
.site-header.is-scrolled {
  background: rgba(25,45,66, 0.94);
  backdrop-filter: blur(14px);
  padding-block: 0.7rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.site-header .container > * { position: relative; }
.brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.brand img { height: 38px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
/* Zwischenstufen, damit das Logo nie zwischen Navigation und Knopf zerdrueckt
   wird: erst enger setzen, dann den Knopf opfern, zuletzt auf Burger wechseln. */
@media (max-width: 1240px) { .main-nav { gap: 1.6rem; } .site-header .container { gap: 1.2rem; } }
@media (max-width: 1140px) { .main-nav { gap: 1.25rem; } .nav-actions .btn { display: none; } }
@media (max-width: 900px)  { .brand img { height: 40px; } .nav-actions .btn { display: inline-flex; } }
@media (max-width: 600px)  { .nav-actions .btn { display: none; } }
/* Handys: Logo (Wortmarke mit Zusatz) + Suche + Burger muessen in die Innenbreite
   passen, sonst ragt der Burger ueber den Rand (gemessen 23.10.2026: 375 px = 20 px drueber). */
@media (max-width: 440px)  { .brand img { height: 34px; } .site-header .container { gap: 0.75rem; } }
@media (max-width: 340px)  { .brand img { height: 29px; } .nav-actions { gap: 0.5rem; } .site-header .container { gap: 0.5rem; } }
.brand-name { font-family: var(--font-head); font-weight: 800; color: var(--white); font-size: 1.02rem; letter-spacing: 0.01em; }
.brand-name span { display: block; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.07em; color: var(--akzent-400); text-transform: uppercase; }

.main-nav { display: flex; align-items: center; gap: 2.1rem; }
@media (max-width: 900px) { .main-nav { display: none; } }
.main-nav a {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  padding-block: 0.3rem;
  transition: color calc(0.3s * var(--tempo)) var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--akzent-400);
  transition: right calc(0.35s * var(--tempo)) var(--ease);
  border-radius: 2px;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--white); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { right: 0; }

/* ---------- Mega-Menu (nur Desktop — main-nav ist unter 900px ohnehin ausgeblendet) ---------- */
.nav-has-mega { display: flex; align-items: center; gap: 0.3em; }
.nav-mega-toggle {
  color: rgba(255,255,255,0.55);
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  transition: transform calc(0.3s * var(--tempo)) var(--ease), color calc(0.3s * var(--tempo)) var(--ease);
}
.nav-mega-toggle svg { width: 14px; height: 14px; }
.nav-item:hover .nav-mega-toggle, .nav-item:focus-within .nav-mega-toggle { color: var(--akzent-400); transform: rotate(180deg); }

.nav-item { position: relative; }
/* Kein toter Zwischenraum zum Aufklappen: der Abstand liegt als Padding
   INNERHALB der hoverbaren Box, sonst schliesst das Menue beim Runterfahren
   der Maus, sobald sie die Luecke zwischen Link und Panel quert. */
.nav-mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  padding-top: 0.9rem;
  width: 380px;
  opacity: 0; pointer-events: none;
  transition: opacity calc(0.25s * var(--tempo)) var(--ease), transform calc(0.25s * var(--tempo)) var(--ease);
  z-index: 50;
}
.nav-item:hover .nav-mega, .nav-item:focus-within .nav-mega {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-mega-inner {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 0.7rem;
}
/* Hier sass der Zipfel des Mega-Menues: ein 14x14 px weisses Quadrat, um 45 Grad
   gedreht, das auf den Menuepunkt zeigen sollte. Auf dem dunklen Header stand es
   als helle Raute im Balken und stoerte mehr, als es half. Entfernt 06.08.2026.
   Das Panel bleibt ueber die Luecke von .nav-mega (padding-top) hoverbar — die
   haengt nicht an diesem Element. */
.nav-mega a {
  display: flex; align-items: center; gap: 0.85em;
  padding: 0.6rem 0.7rem; border-radius: 12px;
  color: var(--navy-800) !important;
  transition: background calc(0.2s * var(--tempo)) var(--ease);
}
.nav-mega a::after { display: none; }
.nav-mega a:hover { background: var(--cream-50); }
.nav-mega a:hover .nav-mega-title { color: var(--akzent-600); }
.nav-mega-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cream-100), var(--cream-50));
  color: var(--akzent-600);
  transition: background calc(0.2s * var(--tempo)) var(--ease), color calc(0.2s * var(--tempo)) var(--ease), transform calc(0.3s * var(--tempo)) var(--ease);
}
.nav-mega-icon svg { width: 20px; height: 20px; }
.nav-mega a:hover .nav-mega-icon { background: linear-gradient(135deg, var(--akzent-500), var(--akzent-600)); color: var(--white); transform: scale(1.06); }
.nav-mega-text { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.nav-mega-title { font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; color: var(--navy-900); transition: color calc(0.2s * var(--tempo)) var(--ease); }
.nav-mega-desc { font-size: 0.86rem; color: var(--ink-500); line-height: 1.3; }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform calc(0.3s * var(--tempo)) var(--ease), opacity calc(0.3s * var(--tempo)) var(--ease);
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 560px) {
  .nav-actions .btn-primary { display: none; }
}

/* ---------- Mobile Drawer (eigenstaendiges DOM am Ende von body, hoechster z-index der Seite) ---------- */
.mobile-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10, 16, 21, 0.6);
  backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0; pointer-events: none;
  transition: opacity calc(0.4s * var(--tempo)) var(--ease);
}
.mobile-backdrop.is-open { opacity: 1; pointer-events: auto; }

.mobile-drawer {
  display: none;
  position: fixed; top: 0; right: 0; bottom: auto;
  /* 100dvh statt top/bottom: auf dem Handy blendet der Browser seine Leiste ein
     und aus. Ohne dvh liegt der untere Rand des Menues dahinter und der
     Knopf "Projekt besprechen" ist nicht erreichbar. Die safe-area haelt
     zusaetzlich Abstand zur Homebar auf randlosen Geraeten. */
  height: 100dvh;
  width: min(340px, 82vw);
  flex-direction: column;
  align-items: flex-start;
  padding: 5.4rem 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--navy-900), var(--navy-700));
  box-shadow: -20px 0 50px rgba(0,0,0,0.4);
  transform: translateX(100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 9999;
  transition: transform calc(0.45s * var(--tempo)) var(--ease);
}
.mobile-drawer.is-open { transform: translateX(0); }

@media (max-width: 900px) {
  .mobile-backdrop, .mobile-drawer { display: flex; }
  .nav-toggle { display: inline-flex; }
}

.mobile-drawer-brand {
  display: flex; align-items: center; gap: 0.7rem;
  padding-bottom: 1.6rem; margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  width: 100%;
}
.mobile-drawer-brand img { height: 32px; width: auto; opacity: 0.95; }

.mobile-drawer > a {
  color: rgba(255,255,255,0.85); font-weight: 600; font-size: 1.1rem;
  width: 100%; padding-block: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-drawer > a[aria-current="page"] { color: var(--akzent-400); }
/* letzter Eintrag: Trennstrich ohne Folgeelement wirkt wie ein Rest */
.mobile-drawer > a:last-child { border-bottom: none; }
.mobile-drawer > a:has(+ .mobile-drawer-sub) { border-bottom: none; padding-bottom: 0.3rem; }

/* Statische Kurzuebersicht je Hauptpunkt: bewusst OHNE Toggle/Akkordeon-JS,
   das hatte zuvor einen echten Stacking-Bug im Mobilmenue verursacht. Einfach
   direkt sichtbar, kein weiterer Interaktionszustand der brechen kann. */
.mobile-drawer-sub {
  display: flex; flex-direction: column; width: 100%;
  padding: 0.3rem 0 0.7rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-drawer-sub a {
  width: 100%; padding-block: 0.4rem;
  font-size: 0.86rem; font-weight: 500; color: rgba(255,255,255,0.55);
}
.mobile-drawer-sub a:hover, .mobile-drawer-sub a:active { color: var(--akzent-400); }



/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--white);
  background: var(--navy-900);
  overflow: hidden;
  padding-top: 6rem;
}
.hero-bg {
  position: absolute; top: -14%; left: 0; right: 0; height: 128%;
  will-change: transform;
  background:
    radial-gradient(640px circle at 12% 18%, rgba(var(--akzent-400-rgb),0.14), transparent 62%),
    radial-gradient(560px circle at 88% 82%, rgba(var(--akzent-600-rgb),0.10), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 68px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 68px),
    linear-gradient(195deg, rgba(25,45,66,0.10) 0%, rgba(44,75,95,0.22) 45%, rgba(25,45,66,0.42) 100%),
    url('../img/hero-start.jpg');
  background-size: auto, auto, 68px 68px, 68px 68px, auto, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, center, center;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat;
  animation: heroDrift 26s ease-in-out infinite alternate;
}
.hero-bg::before {
  content: "";
  position: absolute; top: 10%; right: 8%;
  width: 300px; height: 300px;
  border: 1px solid rgba(var(--akzent-400-rgb),0.22);
  border-radius: 28px;
  animation: heroRotate 50s linear infinite;
}
.hero-bg::after {
  content: "";
  position: absolute; bottom: 6%; left: 4%;
  width: 180px; height: 180px;
  border: 1px solid rgba(var(--akzent-400-rgb),0.14);
  border-radius: 50%;
}
@keyframes heroDrift {
  from { background-position: 0% 0%, 100% 100%, 0 0, 0 0, center, center; }
  to   { background-position: 3% 2%, 97% 98%, 10px 10px, 10px 10px, center, center; }
}
@keyframes heroRotate {
  from { transform: rotate(8deg); }
  to   { transform: rotate(368deg); }
}
/* Das Foto blendet nach unten vollstaendig in den Seitenhintergrund aus
   und traegt links genug Deckung fuer die Typografie. */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(25,45,66,0.78) 0%, rgba(25,45,66,0.56) 34%, rgba(25,45,66,0.20) 66%, rgba(25,45,66,0.08) 100%),
    linear-gradient(to bottom, rgba(25,45,66,0.30) 0%, rgba(25,45,66,0.14) 34%, rgba(25,45,66,0.46) 78%, rgba(25,45,66,0.78) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero-content { max-width: 780px; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--akzent-400); margin-bottom: 1.4rem;
  padding: 0.5em 1em; border: 1px solid rgba(var(--akzent-400-rgb),0.4); border-radius: 999px;
  background: rgba(var(--akzent-400-rgb),0.08);
}
.hero h1 { color: var(--white); margin-bottom: 0.5em; }
.hero h1 em { font-style: normal; color: var(--akzent-400); }
.hero-lead { color: rgba(255,255,255,0.78); font-size: clamp(1.05rem, 1.7vw, 1.25rem); max-width: 620px; margin-bottom: 2.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { white-space: normal; text-align: center; }
}

.hero-stats {
  /* auto-fit statt fester 3 Spalten: bei 200 % Schrift sprengte "300+" die Reihe */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr));
  gap: 1.5rem; margin-top: clamp(2.5rem, 6vw, 4rem);
  max-width: 780px;
}
.stat { border-left: 2px solid rgba(var(--akzent-400-rgb),0.4); padding-left: 1.1rem; }
.stat-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--white); display: flex; align-items: baseline; gap: 0.15em; }
.stat-label { font-size: 1rem; color: rgba(255,255,255,0.72); margin-top: 0.2em; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding-block: clamp(7rem, 16vw, 10rem) clamp(4rem, 8vw, 6rem);
  background: linear-gradient(200deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: var(--white);
  overflow: hidden;
}
.page-hero-glow {
  position: absolute; top: -20%; right: 0; width: 60%; height: 140%;
  background: radial-gradient(circle at 85% 30%, rgba(var(--akzent-400-rgb),0.16), transparent 55%);
  will-change: transform;
}
/* Foto-Header wie auf der alten Seite: Bild gross im Hintergrund, Text darauf.
   Die Seite waehlt das Motiv ueber data-hero. Der Pfad steht bewusst hier und
   nicht als Variable im HTML: relative URLs in Custom Properties loest der
   Browser gegen das Stylesheet auf, nicht gegen die Seite. */
.page-hero.has-photo { background: var(--navy-900); }
.page-hero.has-photo::before {
  content: "";
  /* oben und unten Spielraum, damit sich das Foto bewegen kann, ohne dass
     eine Kante sichtbar wird. Die Sektion hat overflow:hidden. */
  position: absolute; inset: -14% 0;
  background-size: cover; background-position: center;
  transform: translate3d(0, var(--foto-y, 0px), 0);
  will-change: transform;
}
.page-hero[data-hero="start"]::before       { background-image: url('../img/hero-start.jpg'); }
.page-hero[data-hero="leistungen"]::before  { background-image: url('../img/hero-leistungen.jpg'); }
.page-hero[data-hero="unternehmen"]::before { background-image: url('../img/hero-unternehmen.jpg'); }
.page-hero[data-hero="kontakt"]::before     { background-image: url('../img/hero-kontakt.jpg'); }
.page-hero[data-hero="fassade"]::before     { background-image: url('../img/bg-fassade.jpg'); }
.page-hero.has-photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(25,45,66,0.80) 0%, rgba(25,45,66,0.56) 40%, rgba(25,45,66,0.18) 100%),
    linear-gradient(to bottom, rgba(25,45,66,0.46) 0%, rgba(25,45,66,0.12) 45%, rgba(25,45,66,0.42) 100%);
}
.page-hero.has-photo .page-hero-glow { opacity: 0.5; }
.page-hero.has-photo .page-hero-text { max-width: 720px; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); max-width: 640px; }
.page-hero .lead { color: rgba(255,255,255,0.72); max-width: 560px; }
.page-hero .eyebrow, .hero .eyebrow, .hero-kicker { color: var(--akzent-400) !important; }
.page-hero .eyebrow::before, .hero .eyebrow::before { background: var(--akzent-400) !important; }

.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; align-items: center; }
.page-hero-media { order: -1; }
/* Kein gerahmtes Kaertchen mehr: das Foto loest sich per Maske in den
   Hintergrund auf – ueber rund zwei Drittel der Flaeche. 3:2 entspricht dem
   Seitenverhaeltnis der Originaldateien, dadurch wird nichts hochskaliert. */
.page-hero-media-inner {
  position: relative;
  aspect-ratio: 3/2;
  max-width: 560px; max-height: 300px; margin-inline: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.92) 24%, rgba(0,0,0,0.55) 52%, rgba(0,0,0,0) 84%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.92) 24%, rgba(0,0,0,0.55) 52%, rgba(0,0,0,0) 84%);
}
.page-hero-media-inner img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(30%) contrast(1.03) brightness(0.82) saturate(0.9);
  opacity: 0.9;
}
/* Farbschleier, damit das Foto den Navy-Ton der Seite annimmt */
.page-hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(25,45,66,0.22) 0%, rgba(25,45,66,0.48) 48%, rgba(25,45,66,0.82) 100%);
}
@media (min-width: 1024px) {
  .page-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.2rem; }
  .page-hero-text { order: 1; }
  .page-hero-media { order: 2; }
  .page-hero-media-inner {
    max-width: none; max-height: none;
    border-radius: var(--radius-lg);
    /* Ein Verlauf, verankert oben rechts: blendet gleichzeitig nach links
       (zum Text hin) und nach unten aus – etwa zur Haelfte der Flaeche gut
       sichtbar, danach Ausblenden, ohne mask-composite. */
    -webkit-mask-image: radial-gradient(145% 125% at 100% 8%, #000 20%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 82%);
            mask-image: radial-gradient(145% 125% at 100% 8%, #000 20%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 82%);
  }
  .page-hero-fade {
    background:
      linear-gradient(to right, rgba(25,45,66,0.78) 0%, rgba(25,45,66,0.45) 32%, rgba(25,45,66,0.2) 62%, rgba(25,45,66,0.1) 100%),
      linear-gradient(to bottom, rgba(25,45,66,0.32) 0%, rgba(25,45,66,0.55) 100%);
  }
}
.breadcrumb { display: flex; gap: 0.5em; font-size: 1rem; color: rgba(255,255,255,0.6); margin-bottom: 1.4rem; }
.breadcrumb a:hover { color: var(--akzent-400); }

/* ---------- Reveal on scroll ---------- */
/* Zurueckhaltend: nur Deckkraft und ein kurzer Weg von 10 px. Kein
   Weichzeichner, kein Zoom – das wirkte zu stark und lenkte vom Inhalt ab.
   Der Auftritt soll auffallen, wenn man darauf achtet, sonst nicht. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity calc(0.5s * var(--tempo)) var(--ease-edel), transform calc(0.55s * var(--tempo)) var(--ease-edel);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Gestaffelt: die Verzoegerung kommt ueber --i aus dem Skript, damit auch
   Raster mit mehr als sechs Kacheln sauber nacheinander erscheinen. */
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity calc(0.45s * var(--tempo)) var(--ease-edel), transform calc(0.5s * var(--tempo)) var(--ease-edel);
}
.js .reveal-stagger.is-visible > * {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * calc(55ms * var(--tempo)));
}

/* Auftritt beim Laden: der Kopfbereich kommt als EIN Block, nicht Zeile fuer
   Zeile. Alle Auftritts-Regeln haengen an .js — das Flag setzt ein winziges
   Skript im <head>. Ohne Skript steht der Text sofort da, statt unsichtbar auf
   eine Animation zu warten, die nie startet. */
@keyframes edelAuf {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.js .hero-content, .js .page-hero-text { animation: edelAuf calc(0.6s * var(--tempo)) var(--ease-edel) calc(0.1s * var(--tempo)) both; }
.js .hero-stats { animation: edelAuf calc(0.6s * var(--tempo)) var(--ease-edel) calc(0.28s * var(--tempo)) both; }
/* Das Foto blendet nur auf. Auf der Startseite laeuft danach die bisherige
   Drift weiter – deshalb beide Animationen in einer Regel, sonst
   ueberschreibt die neue die alte. */
.js .hero-bg {
  animation: fotoAuf calc(0.8s * var(--tempo)) ease-out both,
             heroDrift 26s ease-in-out calc(0.8s * var(--tempo)) infinite alternate;
}
.js .page-hero.has-photo::before {
  animation: fotoAuf calc(0.8s * var(--tempo)) ease-out both;
}
@keyframes fotoAuf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: transform calc(0.4s * var(--tempo)) var(--ease), box-shadow calc(0.4s * var(--tempo)) var(--ease), border-color calc(0.4s * var(--tempo)) var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, var(--cream-100), var(--cream-50));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem;
}
.card-icon img, .card-icon svg { width: 30px; height: 30px; }
.card-badge {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--akzent-500), var(--akzent-600));
  color: var(--white); font-family: var(--font-head); font-weight: 800; font-size: 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 10px 22px -10px rgba(var(--akzent-600-rgb),0.55);
  transition: transform calc(0.4s * var(--tempo)) var(--ease);
}
.card-badge svg { width: 26px; height: 26px; }
.card:hover .card-badge { transform: scale(1.06) rotate(-3deg); }
.card-more {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-top: auto; padding-top: 1.2rem;
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  color: var(--akzent-600);
}
.card-more svg { width: 16px; height: 16px; transition: transform calc(0.3s * var(--tempo)) var(--ease); }
.card:hover .card-more svg { transform: translateX(4px); }

.home-services h3 { font-size: clamp(1.05rem, 2vw, 1.45rem); min-height: 2.7em; display: flex; align-items: center; overflow-wrap: break-word; word-break: break-word; hyphens: manual; }

.grid { display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.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)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Split section ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  /* Auf Mobil immer Bild vor Text, unabhaengig davon, welche Seite im
     Desktop-Layout links/rechts steht (das alternierte dort bewusst). */
  .split-media { order: -1; }
}
.split-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; max-height: 320px; }
@media (max-width: 640px) { .split-media { max-height: 260px; } }
.split-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform calc(0.7s * var(--tempo)) var(--ease); filter: grayscale(100%) contrast(1.05); }
.split-media:hover img { transform: scale(1.04); }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 2.5rem; }
@media (max-width: 780px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
.pillar { text-align: center; padding: 1.8rem 1.4rem; border-radius: var(--radius-md); background: var(--cream-50); border: 1px solid var(--border); }
.pillar-num { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; color: var(--akzent-600); margin-bottom: 0.3rem; }
/* svg ist global display:block, deshalb greift text-align:center der
   .pillar-Karte nicht - das Symbol wird per flex mittig gesetzt. */
.pillar-icon { color: var(--akzent-600); margin-bottom: 0.6rem; display: flex; justify-content: center; }
.pillar-icon svg { width: 38px; height: 38px; }

/* ---------- Quote block ---------- */
.quote-block {
  position: relative;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  overflow: hidden;
}
.quote-block::before {
  content: "\201C"; position: absolute; top: -0.3em; left: 0.3em;
  font-family: Georgia, serif; font-size: 8rem; color: rgba(var(--akzent-400-rgb),0.18); line-height: 1;
}
.quote-block::after {
  content: "";
  position: absolute; right: -4%; bottom: -22%;
  width: 640px; height: 109px;
  background: url('../img/logo-igs.svg') no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
}
.quote-text { position: relative; font-family: var(--font-head); font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; max-width: 760px; }
.quote-source { position: relative; color: var(--akzent-400); margin-top: 1rem; font-weight: 600; }

/* ---------- SMART / STOP method ---------- */
.method-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.6rem; }
@media (max-width: 720px) { .method-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; } }

.method-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.6rem; }
@media (max-width: 700px) { .method-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } }
@media (max-width: 420px) { .method-grid-4 { grid-template-columns: minmax(0, 1fr); } }

.method-item {
  --step-x: 0px;
  background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 2rem 1.3rem 1.6rem; text-align: center; position: relative;
  transition: border-color calc(0.4s * var(--tempo)) var(--ease), transform calc(0.4s * var(--tempo)) var(--ease), box-shadow calc(0.4s * var(--tempo)) var(--ease);
  overflow: visible;
}
.method-item::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-md);
  padding: 1px; background: linear-gradient(135deg, var(--akzent-500), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity calc(0.4s * var(--tempo)) var(--ease);
}
.method-item:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 20px 40px -16px rgba(var(--akzent-600-rgb),0.35);
}
.method-item:hover::before { opacity: 1; }

.method-grid .method-item:not(:last-child)::after,
.method-grid-4 .method-item:not(:last-child)::after {
  content: "\2192";
  position: absolute; top: 2.05rem; right: -1.5rem;
  width: 1.4rem; height: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--akzent-500); font-size: 1.1rem; font-weight: 700;
  z-index: 1;
}
@media (max-width: 720px) { .method-grid .method-item:not(:last-child)::after { display: none; } }
@media (max-width: 700px) { .method-grid-4 .method-item:not(:last-child)::after { display: none; } }

.method-letter {
  position: absolute;
  top: -1.55rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 3.1rem; height: 3.1rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--akzent-500), var(--akzent-600));
  font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--white);
  box-shadow: 0 8px 20px -6px rgba(var(--akzent-600-rgb),0.5), 0 0 0 5px var(--white), 0 0 0 6px var(--border);
  transition: transform calc(0.4s * var(--tempo)) var(--ease), box-shadow calc(0.4s * var(--tempo)) var(--ease);
  z-index: 2;
}
.method-item:hover .method-letter { transform: translateX(-50%) scale(1.08) rotate(-4deg); box-shadow: 0 12px 26px -8px rgba(var(--akzent-600-rgb),0.6), 0 0 0 5px var(--white), 0 0 0 6px var(--akzent-500); }
.method-title { font-weight: 700; color: var(--navy-900); margin: 0.4em 0 0.3em; font-size: 1.05rem; letter-spacing: 0.02em; }
.method-desc { font-size: 1rem; color: var(--ink-500); }

/* ---------- Team ---------- */
.ansprechpartner {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  max-width: 880px;
  margin-inline: auto;
}
.ansprechpartner-bild { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ansprechpartner-bild img {
  width: 100%; height: auto; aspect-ratio: 4/4.5;
  object-fit: cover; object-position: center 12%;
  border-radius: var(--radius-md);
  filter: grayscale(100%) contrast(1.05);
  transition: filter calc(0.6s * var(--tempo)) var(--ease);
}
.ansprechpartner:hover .ansprechpartner-bild img { filter: grayscale(0%) contrast(1.02); }
.ansprechpartner-mail {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.6em 1em;
  border: 1px solid rgba(var(--akzent-600-rgb), 0.28);
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 1rem; color: var(--akzent-600);
  min-width: 0; word-break: break-word;
  transition: background calc(0.3s * var(--tempo)) var(--ease), border-color calc(0.3s * var(--tempo)) var(--ease);
}
.ansprechpartner-mail:hover { background: rgba(var(--akzent-600-rgb), 0.07); border-color: rgba(var(--akzent-600-rgb), 0.5); }
.ansprechpartner-mail svg { width: 20px; height: 20px; flex: none; }
.ansprechpartner-text { min-width: 0; }
.ansprechpartner-name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.35rem;
  color: var(--navy-900); margin-top: 1.2rem;
}
.ansprechpartner-rolle { color: var(--ink-500); font-size: 1.05rem; margin-top: 0.25em; }
@media (max-width: 780px) {
  .ansprechpartner { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; max-width: 420px; }
  .ansprechpartner-text { text-align: center; }
  .ansprechpartner-text .eyebrow { justify-content: center; }
  .ansprechpartner-name { margin-top: 0.8rem; }
}

/* ---------- Timeline ---------- */
.timeline { position: relative; margin-top: 2.5rem; }
.timeline::before { content: ""; position: absolute; left: 100px; top: 0; bottom: 0; width: 2px; background: var(--border); }
@media (max-width: 700px) { .timeline::before { left: 20px; } }
.timeline-item { position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 2rem; padding-block: 1.6rem; }
@media (max-width: 700px) { .timeline-item { grid-template-columns: 20px minmax(0, 1fr); gap: 1.2rem; } }
.timeline-year { grid-column: 1; font-family: var(--font-head); font-weight: 800; color: var(--navy-800); text-align: right; padding-top: 0.15rem; padding-right: 0.7rem; }
@media (max-width: 700px) { .timeline-year { display: none; } }
.timeline-body { grid-column: 2; padding-left: 1.6rem; min-width: 0; }
@media (max-width: 700px) { .timeline-body { padding-left: 1.4rem; } }
.timeline-mobile-year { display: none; font-family: var(--font-head); font-weight: 800; color: var(--akzent-600); margin-bottom: 0.3em; }
@media (max-width: 700px) { .timeline-mobile-year { display: block; } }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700) 60%, var(--akzent-600));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(2.4rem, 6vw, 4rem);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; left: -6%; top: -30%;
  width: 520px; height: 88px;
  background: url('../img/logo-igs.svg') no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}
.cta-band > * { position: relative; }
@media (max-width: 640px) {
  .cta-band { flex-direction: column; align-items: stretch; text-align: center; }
}
.cta-band h2 { color: var(--white); margin-bottom: 0.3em; }
.cta-band p { color: rgba(255,255,255,0.75); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 1rem; color: var(--navy-800); }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 1rem; padding: 0.85em 1em;
  border: 1px solid var(--border); border-radius: 12px; background: var(--cream-50);
  transition: border-color calc(0.3s * var(--tempo)) var(--ease), background calc(0.3s * var(--tempo)) var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--akzent-500); background: var(--white); }
.field-checkbox { display: flex; align-items: flex-start; gap: 0.7em; font-size: 1rem; color: var(--ink-500); }
.field-checkbox input { margin-top: 0.3em; }

.contact-info-card {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color: var(--white); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3.5vw, 2.6rem);
}
.contact-info-card h3 { color: var(--white); }
.contact-row { display: flex; gap: 1rem; align-items: flex-start; padding-block: 0.9rem; border-top: 1px solid rgba(255,255,255,0.12); }
.contact-row:first-of-type { border-top: none; }
.contact-row .ico { width: 20px; margin-top: 0.15em; color: var(--akzent-400); flex-shrink: 0; }
.contact-row .ico svg { width: 20px; height: 20px; display: block; }
.contact-row a:hover { color: var(--akzent-400); }

/* ---------- Kontaktkarte: statischer "Anfahrt"-Block statt Google-Maps-Embed ---------- */
.map-card { background: var(--cream-50); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.map-card-visual {
  position: relative; aspect-ratio: 16 / 10;
  background:
    radial-gradient(420px circle at 50% 42%, rgba(var(--akzent-400-rgb),0.16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 34px),
    linear-gradient(160deg, var(--navy-800), var(--navy-900));
  display: flex; align-items: center; justify-content: center;
}
.map-card-pin-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.map-card-pin-ring {
  position: absolute; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(var(--akzent-400-rgb),0.18);
  animation: mapPingPulse 2.4s ease-out infinite;
}
@keyframes mapPingPulse {
  0% { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.map-card-pin {
  position: relative; width: 42px; height: 42px; color: var(--akzent-400);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.4));
}

/* Schematische Lageskizze (selbst gezeichnet, kein Kartendienst) */
.map-schema { display: block; width: 100%; height: 100%; }
.map-schema .road { stroke: rgba(255,255,255,0.22); stroke-width: 7; }
.map-schema .road-main { stroke: rgba(255,255,255,0.4); stroke-width: 13; }
.map-schema .road-thin { stroke: rgba(255,255,255,0.13); stroke-width: 4; }
.map-schema-labels text {
  fill: rgba(255,255,255,0.66); font-size: 17px; font-weight: 500;
  letter-spacing: 0.02em;
}
.map-schema-ubahn rect { fill: #0b4ea2; stroke: rgba(255,255,255,0.6); stroke-width: 1.5; }
.map-schema-u { fill: #fff; font-size: 17px; font-weight: 700; text-anchor: middle; }
.map-schema-ustop { fill: rgba(255,255,255,0.82); font-size: 17px; font-weight: 600; }
.map-schema-ring {
  fill: rgba(var(--akzent-400-rgb),0.2);
  transform-origin: center; transform-box: fill-box;
  animation: mapPingPulse 2.4s ease-out infinite;
}
.map-schema-dot { fill: rgba(var(--akzent-400-rgb),0.35); }
.map-schema-pin { fill: var(--akzent-400); }
.map-schema-pin-eye { fill: var(--navy-900); }
.map-schema-here-label {
  fill: var(--akzent-400); font-size: 20px; font-weight: 700; letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
  .map-card-pin-ring, .map-schema-ring { animation: none; }
}
@media (max-width: 560px) {
  .map-schema-labels text, .map-schema-ustop { font-size: 17px; }
  .map-schema-here-label { font-size: 19px; }
}

/* Anruf-Button: Kunden sollen zuerst zum Telefon greifen */
.hero-call-btn, .contact-call-btn { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero-call-btn { margin-top: 1.6rem; }
.contact-call-btn { margin-top: 1.4rem; align-self: flex-start; }
.map-card-body { padding: clamp(1.5rem, 3vw, 2.1rem); display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.map-card-body h3 { margin-bottom: 0; }
.map-card-body .btn { align-self: flex-start; }
.map-card-note { font-size: 0.82rem; color: var(--ink-500); line-height: 1.45; margin-top: auto; padding-top: 0.4rem; }

/* ---------- Methodik-Grafiken (SMART / STOP, aus der bisherigen Seite) ---------- */
.methodik-grafik {
  margin: 1.6rem 0 2rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: var(--cream-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.methodik-grafik img { width: 100%; height: auto; max-width: 720px; margin-inline: auto; }
.methodik-grafik figcaption {
  margin-top: 1rem; text-align: center;
  font-family: var(--font-head); font-weight: 700; color: var(--navy-800); font-size: 1rem;
}
.methodik-fussnote { font-size: 0.9rem; color: var(--ink-500); margin-top: 1.2rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.72); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; margin-bottom: 2.5rem; }
@media (max-width: 780px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
}
.footer-brand { display: flex; align-items: center; gap: 0.7em; margin-bottom: 1rem; }
.footer-brand img { height: 30px; }
.footer-col h4 { color: var(--white); font-size: 1.05rem; margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; font-size: 1rem; }
.footer-col a:hover { color: var(--akzent-400); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 1rem; }

/* ---------- Legal pages ---------- */
.legal-content { max-width: 820px; }
.legal-content h2 { font-size: 1.3rem; margin-top: 2.2rem; }
.legal-content h3 { font-size: 1.05rem; margin-top: 1.4rem; }
.legal-content p, .legal-content li { color: var(--ink-500); }
.legal-content a { color: var(--akzent-600); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.muted { color: var(--ink-500); }
.mt-lg { margin-top: clamp(2rem, 5vw, 3rem); }
.bg-cream { background: var(--cream-50); }
.tag {
  display: inline-flex; align-items: center; gap: 0.4em; font-size: 1rem; font-weight: 700;
  padding: 0.35em 0.9em; border-radius: 999px; background: var(--cream-100); color: var(--navy-800);
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--navy-900); color: var(--white);
  padding: 1em 1.5em; z-index: 200; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Fussleiste ---------- */
.footer-legal { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }

/* ============================================================
   Projekte & Referenzen — Uebersicht, Detailseiten, Galerie
   ============================================================ */

/* ---------- Filterleiste ---------- */
.proj-filter {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.proj-filter-btn {
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  padding: 0.6em 1.25em; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white); color: var(--ink-700);
  cursor: pointer;
  transition: background calc(0.3s * var(--tempo)) var(--ease), color calc(0.3s * var(--tempo)) var(--ease), border-color calc(0.3s * var(--tempo)) var(--ease), transform calc(0.3s * var(--tempo)) var(--ease);
}
.proj-filter-btn:hover { border-color: var(--akzent-500); color: var(--navy-900); transform: translateY(-2px); }
.proj-filter-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--akzent-500), var(--akzent-600));
  border-color: transparent; color: var(--white);
  box-shadow: 0 10px 22px -12px rgba(var(--akzent-600-rgb),0.7);
}
.proj-filter-btn:focus-visible { outline: 3px solid var(--akzent-500); outline-offset: 2px; }

/* ---------- Projektraster ---------- */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
}
.proj-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform calc(0.45s * var(--tempo)) var(--ease), box-shadow calc(0.45s * var(--tempo)) var(--ease), border-color calc(0.45s * var(--tempo)) var(--ease);
}
.proj-card:hover, .proj-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.proj-card.is-hidden { display: none; }

.proj-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-50); }
.proj-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform calc(0.8s * var(--tempo)) var(--ease);
}
.proj-card:hover .proj-card-media img { transform: scale(1.05); }
.proj-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(25,45,66,0.55), rgba(25,45,66,0) 55%);
  pointer-events: none;
}
.proj-card-kat {
  position: absolute; left: 1rem; top: 1rem; z-index: 1;
  font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.4em 0.85em; border-radius: 999px;
  background: rgba(255,255,255,0.94); color: var(--navy-900);
  box-shadow: 0 4px 14px -6px rgba(25,45,66,0.5);
}
.proj-card-anzahl {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.85rem; font-weight: 600; color: var(--white);
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.proj-card-anzahl svg { width: 15px; height: 15px; }

.proj-card-body { padding: clamp(1.3rem, 2.6vw, 1.7rem); display: flex; flex-direction: column; flex: 1; }
.proj-card-ort {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.9rem; font-weight: 600; color: var(--akzent-600);
  margin-bottom: 0.5rem;
}
.proj-card-ort svg { width: 15px; height: 15px; flex-shrink: 0; }
.proj-card-titel {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.25;
  color: var(--navy-900); margin: 0 0 0.5rem;
  overflow-wrap: break-word; hyphens: none;
}
/* Die ganze Kachel ist klickbar, ohne verschachtelte Links. */
.proj-card-titel a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.proj-card-art { font-size: 0.95rem; color: var(--ink-500); margin: 0; }
.proj-card-more {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-top: auto; padding-top: 1.1rem;
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem;
  color: var(--akzent-600);
}
.proj-card-more svg { width: 16px; height: 16px; transition: transform calc(0.3s * var(--tempo)) var(--ease); }
.proj-card:hover .proj-card-more svg { transform: translateX(4px); }

.proj-leer {
  display: none; text-align: center; color: var(--ink-500);
  padding: 2.5rem 1rem;
}
.proj-leer.is-visible { display: block; }

/* ---------- Detailseite: Eckdaten ---------- */
.proj-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.proj-fakt { background: var(--white); padding: 1.4rem 1.3rem; }
.proj-fakt dt {
  font-family: var(--font-head); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--akzent-600); margin-bottom: 0.4rem;
}
.proj-fakt dd {
  margin: 0; font-size: 1.02rem; color: var(--navy-900); font-weight: 600;
  overflow-wrap: break-word; hyphens: none;
}

/* ---------- Detailseite: Galerie ---------- */
.proj-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
.proj-galerie-item {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--cream-50); cursor: zoom-in;
  transition: transform calc(0.4s * var(--tempo)) var(--ease), box-shadow calc(0.4s * var(--tempo)) var(--ease);
}
.proj-galerie-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.proj-galerie-item:focus-visible { outline: 3px solid var(--akzent-500); outline-offset: 3px; }
.proj-galerie-item img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(0.7s * var(--tempo)) var(--ease); }
.proj-galerie-item:hover img { transform: scale(1.05); }
.proj-galerie-lupe {
  position: absolute; right: 0.8rem; bottom: 0.8rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity calc(0.3s * var(--tempo)) var(--ease), transform calc(0.3s * var(--tempo)) var(--ease);
  box-shadow: 0 4px 14px -6px rgba(25,45,66,0.6);
}
.proj-galerie-item:hover .proj-galerie-lupe,
.proj-galerie-item:focus-visible .proj-galerie-lupe { opacity: 1; transform: translateY(0); }
.proj-galerie-lupe svg { width: 17px; height: 17px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  background: rgba(12, 22, 33, 0.94);
  padding: clamp(0.75rem, 3vw, 2.5rem);
}
.lightbox.is-open { display: flex; }
.lightbox-figur {
  position: relative; margin: 0;
  max-width: min(1200px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.lightbox-figur img {
  max-width: 100%;
  /* Platz fuer Bildunterschrift und Bedienleiste lassen, damit auf kleinen
     Geraeten nie beides zugleich aus dem Bild laeuft. */
  max-height: calc(100vh - 11rem);
  width: auto; margin-inline: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  object-fit: contain;
}
.lightbox-text {
  color: rgba(255,255,255,0.88); font-size: 0.95rem; text-align: center;
  max-width: 70ch; margin-inline: auto;
}
.lightbox-zaehler { color: rgba(255,255,255,0.55); font-size: 0.85rem; margin-top: 0.3rem; }
.lightbox-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.1); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background calc(0.3s * var(--tempo)) var(--ease);
}
.lightbox-btn:hover { background: rgba(255,255,255,0.22); }
.lightbox-btn:focus-visible { outline: 3px solid var(--akzent-400); outline-offset: 2px; }
.lightbox-btn svg { width: 22px; height: 22px; }
.lightbox-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-next { right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-zu {
  position: absolute; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem);
  transform: none;
}
@media (max-width: 600px) {
  .lightbox-btn { width: 44px; height: 44px; }
  .lightbox-prev { left: 0.4rem; }
  .lightbox-next { right: 0.4rem; }
  .lightbox-figur img { max-height: calc(100vh - 12rem); }
}

/* ---------- Bildnachweis ---------- */
.proj-nachweis {
  font-size: 0.88rem; color: var(--ink-500);
  border-left: 3px solid var(--akzent-400);
  padding-left: 0.9rem; margin-top: 1.4rem;
  overflow-wrap: break-word;
}

/* ---------- Hinweis-Block (offene Angaben) ---------- */
.proj-hinweis {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--cream-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(1.3rem, 3vw, 1.8rem);
}
.proj-hinweis-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--akzent-500), var(--akzent-600));
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.proj-hinweis-icon svg { width: 21px; height: 21px; }
.proj-hinweis p { margin: 0; color: var(--ink-500); font-size: 0.98rem; }
.proj-hinweis strong { color: var(--navy-900); }

/* ---------- Nachbarnavigation ---------- */
.proj-nachbarn {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
@media (max-width: 620px) { .proj-nachbarn { grid-template-columns: minmax(0, 1fr); } }
.proj-nachbar {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color calc(0.35s * var(--tempo)) var(--ease), transform calc(0.35s * var(--tempo)) var(--ease), box-shadow calc(0.35s * var(--tempo)) var(--ease);
  min-width: 0;
}
.proj-nachbar:hover { border-color: var(--akzent-500); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.proj-nachbar-next { justify-content: flex-end; text-align: right; }
.proj-nachbar svg { width: 20px; height: 20px; color: var(--akzent-600); flex-shrink: 0; }
.proj-nachbar-label { display: block; font-size: 0.8rem; color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; }
.proj-nachbar-titel {
  display: block; font-family: var(--font-head); font-weight: 700;
  color: var(--navy-900); line-height: 1.3;
  overflow-wrap: break-word; hyphens: none; min-width: 0;
}

/* Hero-Bilder der Projektseiten */
.page-hero[data-hero="projekte"]::before   { background-image: url('../img/projekte/luebeck-bahnhofsbruecke-01-gross.jpg'); }
.page-hero[data-hero="p-koblenz"]::before  { background-image: url('../img/projekte/koblenz-rheinufer-01-gross.jpg'); }
.page-hero[data-hero="p-bahnhof"]::before  { background-image: url('../img/projekte/luebeck-bahnhofsbruecke-01-gross.jpg'); }
.page-hero[data-hero="p-possehl"]::before  { background-image: url('../img/projekte/luebeck-possehlbruecke-01-gross.jpg'); }
.page-hero[data-hero="p-aibling"]::before  { background-image: url('../img/projekte/bad-aibling-eue-01-gross.jpg'); }
.page-hero[data-hero="p-kruemmel"]::before { background-image: url('../img/projekte/kruemmel-zwischenlager-01-gross.jpg'); }
.page-hero[data-hero="p-dresden"]::before  { background-image: url('../img/projekte/dresden-prizeotel-01-gross.jpg'); }
.page-hero[data-hero="p-wave"]::before     { background-image: url('../img/projekte/wave-01-gross.jpg'); }

/* ---------- Kachel ohne Foto (Referenzen aus der Projektliste) ---------- */
.proj-card-ohne-foto .proj-card-media {
  display: flex; align-items: flex-end;
  aspect-ratio: 16 / 7;
  background: linear-gradient(140deg, var(--navy-800), var(--navy-900) 70%);
  padding: 1rem;
}
/* Dezentes Streifenmuster statt Foto — bleibt im Hintergrund und lenkt nicht ab. */
.proj-card-ohne-foto .proj-card-media::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 16px);
  pointer-events: none;
}
/* Das Zeichen "igs" liegt gross und sehr blass im Muster — als Wasserzeichen,
   nicht als Marke. Eigenes Pseudo-Element, damit die Deckkraft unabhaengig
   von den Streifen bleibt. Bewusst nur das Zeichen, ohne den Namenszusatz. */
.proj-card-ohne-foto .proj-card-media::after {
  content: ""; position: absolute;
  right: 1rem; bottom: 0.9rem;
  width: 32%; max-width: 96px; aspect-ratio: 96 / 68;
  background: url('../img/logo-igs-zeichen.svg') no-repeat right bottom / contain;
  opacity: 0.07;
  pointer-events: none;
  display: block;
}
.proj-card-ohne-foto .proj-card-kat {
  position: static; z-index: 1;
  background: rgba(255,255,255,0.14); color: var(--white);
  border: 1px solid rgba(255,255,255,0.22); box-shadow: none;
}

/* ---------- Auftraggeber und Leistungen auf der Kachel ---------- */
.proj-card-ag {
  font-size: 0.92rem; color: var(--ink-700); margin: 0 0 0.7rem;
  overflow-wrap: break-word; hyphens: none;
}
.proj-card-ag strong {
  display: block; font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--akzent-600); font-family: var(--font-head); margin-bottom: 0.15rem;
}
.proj-leistungen {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0; padding: 0; list-style: none;
}
.proj-leistungen li {
  font-size: 0.82rem; line-height: 1.45;
  padding: 0.5em 1em; border-radius: 14px;
  background: var(--cream-50); color: var(--ink-700);
  border: 1px solid var(--border);
  /* Keine Silbentrennung: getrennte Woerter in schmalen Pillen lesen sich
     unruhig. Lange Woerter brechen nur im Notfall, sonst waechst die Pille. */
  overflow-wrap: break-word; hyphens: none; max-width: 100%;
}
.proj-card-body .proj-leistungen { margin-top: auto; padding-top: 0.9rem; }

/* Kennzeichnung laufender Projekte */
.proj-laufend {
  position: absolute; right: 1rem; top: 1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35em 0.75em; border-radius: 999px;
  background: var(--akzent-400); color: var(--navy-900);
}
.proj-card-ohne-foto .proj-laufend { background: var(--akzent-400); color: var(--navy-900); }
.proj-laufend::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--navy-800);
}

/* ---------- Zähler über dem Raster ---------- */
.proj-zaehler {
  text-align: center; color: var(--ink-500); font-size: 0.95rem;
  margin: -0.6rem 0 1.6rem;
}

/* Auf der Detailseite: Leistungen als Liste unter den Eckdaten */
.proj-leistungen-gross { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.proj-leistungen-gross li {
  font-size: 0.95rem; line-height: 1.45;
  padding: 0.6em 1.15em; border-radius: 16px;
  background: var(--cream-100); color: var(--navy-800); border: 1px solid var(--border);
  overflow-wrap: break-word; hyphens: none; max-width: 100%;
}

/* Hero-Bild je Projektseite ueber eine Variable statt fester Klassennamen —
   so muss bei neuen Projekten keine CSS-Regel nachgepflegt werden. */
.page-hero.has-photo[style*='--hero-bild']::before { background-image: var(--hero-bild); }

/* Zahl je Filterknopf */
.proj-filter-zahl {
  display: inline-block; margin-left: 0.45em;
  font-size: 0.8em; font-weight: 700; opacity: 0.65;
}
.proj-filter-btn[aria-pressed="true"] .proj-filter-zahl { opacity: 0.85; }
@media (max-width: 480px) {
  .proj-filter-btn { font-size: 0.88rem; padding: 0.55em 1em; }
}
/* Umbruchschutz Teil 2: echte Silbentrennung nur dort, wo sie nicht stoert.
   Ueberschriften und Kacheltitel bleiben bewusst ohne Trennstrich. */
/* Keine automatische Silbentrennung im Fliesstext (Kundenwunsch 02.11.2026: "Projekt-entwickler"
   in schmalen Kacheln). pretty verhindert Einzelwoerter in der letzten Zeile. */
p, li, dd, blockquote { hyphens: manual; text-wrap: pretty; }
address, time, .tabular-nums, .ansprechpartner-mail { hyphens: manual; }

/* Umbruchschutz Teil 3: Elemente, die als inline-flex bzw. Flex-Kind nie unter
   ihre Inhaltsbreite schrumpfen. Faellt erst bei 200 % Schriftgroesse auf. */
.btn { max-width: 100%; flex-wrap: wrap; }
.proj-nachbar > span { min-width: 0; }
.proj-nachbar-titel, .proj-nachbar-label { overflow-wrap: break-word; }

/* Umbruchschutz Teil 4: Bereichs-Label und Kontaktzeilen. Gleiche Ursache wie
   oben - inline-flex bzw. Flex-Kind mit min-width:auto. */
/* anywhere statt break-word: nur anywhere senkt auch die Mindestbreite,
   sonst sprengt "Nachtragsmanagement" bei 200 % Schrift das Label. */
.tag { max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
/* KEIN flex-wrap hier: sonst rutscht das Symbol bei langen Adresszeilen ueber
   den Text statt daneben zu stehen. min-width:0 am Textkind genuegt, damit der
   Text umbricht, ohne die Zeile zu sprengen. */
.contact-row > *:not(.ico) { min-width: 0; }

/* Umbruchschutz Teil 5 (02.11.2026): ohne automatische Silbentrennung ist die
   Mindestbreite eines Flex-Kinds das laengste Wort. Bei 200 % Schrift sprengte das
   Kontakt-Box, Brotkrumen und Hero-Zeile. */
.cta-band > *, .proj-hinweis > * { min-width: 0; }
.breadcrumb { flex-wrap: wrap; }
.breadcrumb > * { min-width: 0; overflow-wrap: anywhere; }
.hero-kicker { max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }

/* Ueberschriften-Umbruch: Der Umbruchschutz am body (overflow-wrap:break-word)
   vererbt sich auch auf Ueberschriften und trennt dort mitten im Wort - ein
   einzelnes "g" in der naechsten Zeile ist das Erste, was ein Besucher sieht.
   Deshalb hier:
   - overflow-wrap: break-word -> bricht nur ein Wort, das allein nicht in die Zeile passt
   - hyphens: manual        -> keine Trennung; balance + auto bricht Komposita hart
                               (Umbruch-Regel Fall B, umgestellt 02.11.2026)
   - text-wrap: balance     -> verteilt die Zeilen gleichmaessig, damit nicht
                               "Berlin" oder "Main" allein in der letzten Zeile steht */
h1, h2, h3, h4, .h1, .h2, .h3, .hero-kicker {
  overflow-wrap: break-word;  /* nur Rueckfall, wenn ein Wort allein nicht passt (200 % Schrift) */
  hyphens: manual;
  text-wrap: balance;
}
/* Dreiklang "Persoenlich. Erfahren. Verbindlich.": ein Satz je Zeile statt eines
   einzelnen Worts in Zeile 2 (Umbruch-Regel R1/R4, 02.11.2026). */
.dreiklang { text-wrap: normal; }
.dreiklang .satzteil { display: block; }

/* Der Leitsatz hat gesetzte Zeilenumbrueche wie auf der alten Seite -
   balance wuerde sie ueberstimmen. */
.leitsatz { text-wrap: initial; hyphens: manual; }
.leitsatz em { font-style: italic; }

/* ---------- Tempo ----------
   Fest auf Variante E (Kundenwahl, Oktober 2026): ruhige Überblendungen,
   Hintergrundbild bleibt beim Scrollen deutlich zurück. Werte oben in :root. */

/* ---------- Volltextsuche ----------
   Ohne Datenbank: assets/suchindex.json wird erst geladen, wenn jemand die
   Suche oeffnet. Erzeugt von scripts/generate-suchindex.mjs. */
.suche-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  color: var(--white); cursor: pointer;
  transition: background calc(0.3s * var(--tempo)) var(--ease), border-color calc(0.3s * var(--tempo)) var(--ease);
}
.suche-btn svg { width: 20px; height: 20px; }
.suche-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.55); }
.suche-btn[aria-expanded="true"] { background: var(--akzent-500); border-color: var(--akzent-500); }

.suche-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 22px 44px -22px rgba(19,38,56,0.45);
  padding-block: 1.4rem 1.6rem;
  opacity: 0; transform: translateY(-10px);
  transition: opacity calc(0.26s * var(--tempo)) var(--ease), transform calc(0.26s * var(--tempo)) var(--ease);
}
.suche-panel.is-open { opacity: 1; transform: none; }
/* Das Panel liegt im Header - dessen .container ist flex und wuerde Feld und
   Meldung nebeneinander quetschen. */
.suche-panel .container { display: block; }
.suche-label {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 0.5rem;
}
.suche-eingabe {
  width: 100%; max-width: 100%;
  font-family: inherit; font-size: 1.15rem; color: var(--ink-900);
  padding: 0.75em 1em;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--cream-50);
  transition: border-color calc(0.25s * var(--tempo)) var(--ease), background calc(0.25s * var(--tempo)) var(--ease);
}
.suche-eingabe:focus { outline: none; border-color: var(--akzent-500); background: var(--white); }
.suche-status { color: var(--ink-500); font-size: 0.95rem; margin: 0.7rem 0 0; }
.suche-status:empty { display: none; }
.suche-treffer { margin-top: 0.6rem; max-height: min(58vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
.suche-treffer-eintrag {
  display: block; padding: 0.8rem 0.9rem; border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border); min-width: 0;
  transition: background calc(0.22s * var(--tempo)) var(--ease);
}
.suche-treffer-eintrag:hover { background: var(--cream-50); }
.suche-treffer-eintrag:last-child { border-bottom: none; }
.suche-treffer-seite {
  display: block; font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--akzent-600); font-weight: 700;
}
.suche-treffer-titel {
  display: block; font-family: var(--font-head); font-weight: 700;
  color: var(--navy-900); margin-top: 0.15em;
}
.suche-treffer-text { display: block; color: var(--ink-500); font-size: 0.95rem; margin-top: 0.2em; }
.suche-treffer-text mark { background: rgba(var(--akzent-400-rgb), 0.42); color: var(--navy-900); padding: 0 0.15em; border-radius: 3px; }
@media (max-width: 560px) {
  .suche-eingabe { font-size: 1.05rem; }
  .suche-treffer { max-height: 62vh; }
}

/* ---------- Zahlenband auf der Startseite ----------
   Wie auf der alten igs.de: Kunden, Projekte, Jahre nach dem Methodik-Text. */
.zahlen-band { background: var(--navy-900); padding-block: clamp(2.5rem, 6vw, 4rem); }
.zahlen-band .hero-stats { margin: 0 auto; max-width: 900px; }
.referenz-fragen { margin-top: 1.2rem; }
.referenz-fragen a { font-weight: 700; white-space: nowrap; }