/* =========================================================
   Nord Bau Hannover – Design System & Styles
   Modernes, cleanes Frontend (CSS Variables, Grid, Flexbox)
   ========================================================= */

/* ---------- Selbstgehostete Schrift: Inter (DSGVO-konform) ----------
   Quelle: @fontsource/inter (SIL Open Font License) – siehe
   assets/fonts/Inter-LICENSE.txt. Keine externe Google-Verbindung. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter-800.woff2") format("woff2");
}

/* Finding 8 – Metrisch an Inter angeglichener Fallback (Arial). Reduziert den
   Layout-Shift (CLS)/Reflow, wenn "Inter" nach dem Swap geladen wird, weil die
   Fallback-Schrift fast dieselbe Fläche einnimmt. */
@font-face {
  font-family: "Inter Fallback";
  /* Mehrere local()-Kandidaten, weil Arial nicht überall existiert. Helvetica
     (macOS) und Liberation Sans (Linux/Android-Builds) sind metrisch mit Arial
     identisch – die Overrides unten passen also für alle drei. Ohne einen
     Treffer greift die Regel gar nicht und der Browser fällt auf die sehr
     breite Standardschrift zurück, was den Reflow erst groß macht. */
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"),
       local("Liberation Sans"), local("Roboto");
  size-adjust: 107.4%;
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

:root {
  /* Farben – modern & handwerklich solide */
  --bg: #ffffff;
  --bg-alt: #F1F5F9;
  --surface: #ffffff;
  --ink: #15293A;          /* Überschriften ~13:1 */
  --text: #3D4E5C;         /* Fließtext ~8:1 */
  --muted: #647689;        /* Labels ~4,6:1 */
  --border: #DCE4EC;
  --on-dark: #ffffff;      /* Text auf dunklen Flächen */
  --on-dark-muted: #C7D5E2;
  --on-dark-faint: #9DB0C2;

  /* === Marken-Palette – aus dem Logo-Blau abgeleitet === */
  --primary: #245B8C;        /* Kern-Marke: CTAs, Links, Icons – Weiß-Text 7,1:1 */
  --primary-dark: #1B4770;   /* Hover/Active/Fokus */
  --primary-800: #15385C;
  --primary-soft: #E9F1F8;
  --primary-rgb: 36, 91, 140;

  --secondary: #557E9F;      /* große Flächen/UI (kein Kleintext, 4,3:1) */
  --secondary-ink: #3D6285;  /* Sekundär als Text auf Weiß (6,4:1) */

  --highlight: #3E82C0;      /* A2 Hellblau – dekorative Highlights/Dots/Haken */
  --highlight-soft: #E4EEF7;
  --accent-light: #8FBBE0;   /* Akzent-Text auf dunklem Grund (Hero), ~7:1 */
  --accent-2-rgb: 62, 130, 192;   /* = Highlight-RGB für Dots/Glows */

  /* Dunkle Marken-Flächen (Hero/Footer) – Logo-Blau */
  --brand-dark: #12324F;
  --brand-dark-2: #1B4A70;
  --brand-dark-rgb: 18, 50, 79;

  /* Statusfarben */
  --success: #1E7A46; --success-ink: #14532D; --success-soft: #DCFCE7; --success-border: #86EFAC;
  --warning: #B7791F; --warning-soft: #FBF1DD;
  --danger:  #C23B2E; --danger-ink: #7F1D1D; --danger-soft: #FEE2E2; --danger-border: #FCA5A5;

  /* === Legacy-Aliase: bestehende Regeln nutzen weiter dieselben Namen === */
  --accent-600: var(--primary-dark);
  --accent-700: var(--primary-dark);
  --accent-800: var(--primary-800);
  --accent: var(--primary);       /* pervasiver Marken-Akzent = Primär (Buttons/Icons/Links) */
  --accent-soft: var(--primary-soft);
  --accent-ink: var(--primary);   /* Akzent-Text auf Weiß (7,1:1) */
  --cta: var(--primary);
  --cta-hover: var(--primary-dark);
  --accent-2: var(--highlight);   /* dekorativ: Dots, Checklisten-Haken */
  --accent-2-soft: var(--highlight-soft);
  --bg-warm: var(--bg-alt);       /* warmes Off-White entfällt im Blau-Theme */

  /* Dunkle Flächen (Alias auf Marken-Dunkel) */
  --dark: var(--brand-dark);
  --dark-2: var(--brand-dark-2);

  /* Radien */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .14);
  --shadow-accent: 0 12px 26px rgba(var(--primary-rgb), .26);

  /* Layout */
  --header-h: clamp(80px, 9vw, 130px);  /* fluid: Mobile 80 → Desktop 130 (größeres Logo) */
  --max-w: 1160px;
  /* Wie weit die Schnell-Kontakt-Leiste in den Hero hineinragt. Der Hero
     rechnet denselben Wert auf sein padding-bottom auf – so bleibt der
     Abstand zur nächsten Sektion konstant, egal wie der Wert sich ändert. */
  --quickbar-lift: 46px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.18rem; font-weight: 700; }
p { margin: 0 0 1em; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.text-accent { color: var(--accent-light); }  /* Hero-Headline auf Dunkel */

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent-ink);
  margin-bottom: .8em;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 22px;
}
.chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(var(--accent-2-rgb), .30);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  --btn-bg: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .96rem;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn .icon { width: 1.05em; height: 1.05em; transition: transform .18s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }

/* Lichtreflex, der beim Hover einmal über den Button wandert.
   Rein dekorativ (::after, pointer-events aus), animiert nur transform.
   overflow:hidden beschneidet keine Outlines – der Fokusring bleibt sichtbar. */
.btn { overflow: hidden; isolation: isolate; }
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .30) 50%, transparent 62%);
  transform: translateX(-115%);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(115%); transition: transform .7s var(--ease-out); }
.btn-outline::after { background: linear-gradient(115deg, transparent 38%, rgba(var(--primary-rgb), .12) 50%, transparent 62%); }

.btn-primary { background: var(--cta); color: #fff; box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(var(--primary-rgb), .32); }

.btn-outline { border-color: var(--border); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }

.btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .22); }
.btn-ghost:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-sm { padding: 10px 24px; font-size: .9rem; }
.btn-lg { padding: 15px 28px; font-size: 1.02rem; }
.btn-block { display: flex; width: 100%; }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
/* Glassmorphism beim Scrollen */
.site-header.scrolled {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; color: var(--ink); }
/* Firmenlogo (Originaldatei) */
/* Logo fluid: prominent auf Desktop, kompakter auf Mobile – Seitenverhältnis bleibt.
   Bezugsgröße unter der Header-Höhe, damit oben/unten immer ~12px Luft bleibt. */
.site-logo { height: clamp(56px, 7.2vw, 104px); width: auto; flex: none; display: block; }
.logo-footer .site-logo { height: clamp(48px, 5vw, 62px); filter: brightness(0) invert(1); }  /* weiß auf dunklem Footer */

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav ul { list-style: none; display: flex; gap: 26px; }
.main-nav a:not(.btn) {   /* CTA-Button ausnehmen: sonst überschreibt dies Padding/Farbe */
  position: relative;
  font-weight: 600;
  font-size: .98rem;
  color: var(--ink);
  padding: 6px 0;
}
.main-nav a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  transition: right .25s var(--ease);
}
.main-nav a:not(.btn):hover::after,
.main-nav a.active::after { right: 0; }
.main-nav a.active { color: var(--accent-ink); }  /* Finding 1 – AA-Kontrast (5,3:1) */

/* Burger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px; height: 2.5px; border-radius: 2px; background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(120% 120% at 80% -10%, var(--brand-dark-2) 0%, var(--brand-dark) 55%);
  /* unten zusätzlich Platz für die überlappende Schnell-Kontakt-Leiste */
  padding: clamp(56px, 8vw, 104px) 0 calc(clamp(56px, 8vw, 104px) + var(--quickbar-lift));
}
.hero-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 50% at 85% 15%, rgba(var(--accent-2-rgb), .30) 0%, transparent 70%),
    radial-gradient(30% 40% at 10% 90%, rgba(var(--primary-rgb), .16) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
/* Sanfter Auftritt beim Laden – bewusst NUR transform, kein Fade: ein Element
   mit opacity:0 gilt dem Browser als „nicht gerendert" und verschiebt damit
   den LCP-Zeitpunkt. So bleibt die Ladezeit-Messung sauber.
   min-width:0 hebt zusätzlich die Grid-Voreinstellung min-width:auto auf –
   sonst kann die Spalte nie schmaler werden als das längste Wort der
   Überschrift, was auf 320-px-Geräten die Seite seitlich herausschob. */
.hero-content { min-width: 0; animation: hero-in .7s var(--ease) both; }
@keyframes hero-in { from { transform: translateY(16px); } }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero .lead { color: var(--on-dark-muted); font-size: 1.16rem; max-width: 38em; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.hero-badges {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 30px; color: var(--on-dark-muted); font-size: .92rem; font-weight: 500;
}
.hero-badges li { display: inline-flex; align-items: center; gap: 8px; }
.hero-badges .icon { color: var(--accent); width: 1.05em; height: 1.05em; }

/* ---------------------------------------------------------
   Hero-Bild-Mosaik
   Bewusst ein Mosaik und kein Auto-Slider: drei Fotos sind
   gleichzeitig sichtbar (statt nacheinander), es braucht kein
   JavaScript, keine Autoplay-Pausensteuerung – und nur EIN Bild
   ist LCP-Kandidat statt drei. Die feste aspect-ratio reserviert
   den Platz vor dem Laden -> kein Layout-Shift (CLS).
   --------------------------------------------------------- */
.hero-mosaic {
  --tile-gap: 14px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.3fr 1fr;
  gap: var(--tile-gap);
  aspect-ratio: 1 / 1;
}
.hero-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .07);   /* Platzhalterfläche vor dem Laden */
  box-shadow: 0 18px 44px rgba(0, 0, 0, .30);
  animation: tile-in .75s var(--ease) both;
  transition: opacity .35s var(--ease);
}
.hero-tile-lg { grid-column: 1 / -1; }   /* großes Bild oben über beide Spalten */
.hero-tile:nth-child(2) { animation-delay: .09s; }
.hero-tile:nth-child(3) { animation-delay: .18s; }
/* feine Innenkante – trennt helle Fotos sauber vom dunklen Hero */
.hero-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  pointer-events: none;
}
.hero-tile picture { display: block; width: 100%; height: 100%; }
.hero-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
@keyframes tile-in { from { transform: translateY(20px) scale(.97); } }

/* Galerie-Fokus: nur auf Geräten mit echtem Zeigegerät, damit auf
   Touch nichts „hängen bleibt". */
@media (hover: hover) and (pointer: fine) {
  .hero-mosaic:hover .hero-tile { opacity: .82; }
  .hero-mosaic .hero-tile:hover { opacity: 1; }
  .hero-tile:hover img { transform: scale(1.06); }
}

/* =========================================================
   Schnell-Kontakt-Leiste (überlappt die Hero-Unterkante)
   ========================================================= */
.quickbar { position: relative; z-index: 2; margin-top: calc(-1 * var(--quickbar-lift)); }
.quickbar-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 30px;
  padding: 20px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.quickbar-list { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.quickbar-list li { display: flex; align-items: center; gap: 13px; }
.quickbar-list .icon {
  width: 42px; height: 42px; padding: 10px; flex: none;
  border-radius: 12px; color: var(--accent); background: var(--accent-soft);
  transition: transform .25s var(--ease);
}
.quickbar-list li:hover .icon { transform: translateY(-2px) scale(1.06); }
.quickbar-list div { display: flex; flex-direction: column; min-width: 0; }
.quickbar-list span { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.quickbar-list strong { color: var(--ink); font-weight: 700; font-size: .97rem; overflow-wrap: anywhere; }
.quickbar-list a strong { transition: color .2s var(--ease); }
.quickbar-list a:hover strong { color: var(--accent-ink); }

/* =========================================================
   Value-Strip
   ========================================================= */
.value-strip {
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border);
  /* Luft zur überlappenden Schnell-Kontakt-Leiste darüber */
  margin-top: clamp(30px, 4vw, 52px);
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 44px 24px;
}
.value { display: flex; gap: 16px; align-items: flex-start; }
.value-icon {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--accent); background: var(--accent-soft);
}
.value-icon .icon { width: 24px; height: 24px; }
.value h3 { margin-bottom: 2px; font-size: 1.04rem; }
.value p { margin: 0; font-size: .92rem; }

/* =========================================================
   Sektionen
   ========================================================= */
.section { padding: clamp(60px, 9vw, 100px) 0; }
.section-alt { background: var(--bg-warm); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.section-sub { color: var(--text); font-size: 1.08rem; margin: 0; }
.section-cta { text-align: center; margin-top: 48px; }

/* Karten-Grid – Foto füllt die Karte, Titel/Text liegen mit Verlauf darauf
   (wie der Hero). Bild ist absolut positioniert -> beeinflusst den Layout-
   Fluss nicht; die Kartenhöhe steht bereits durch min-height fest, bevor
   das Bild lädt -> kein Layout-Shift. */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(280px, 30vw, 340px);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--brand-dark);   /* sichtbar, falls das Bild nicht lädt */
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.service-card:hover { box-shadow: var(--shadow-lg); }

.service-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.service-card:hover .service-bg { transform: scale(1.05); }

/* Verlauf: unten fast deckend (Textkontrast), oben transparent (Bildwirkung) */
.service-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(var(--brand-dark-rgb), .95) 0%,
    rgba(var(--brand-dark-rgb), .80) 48%,
    rgba(var(--brand-dark-rgb), .18) 100%);
}

/* Marken-Leiste oben, wie zuvor, nur über dem Bild statt unter der Karte */
.service-card::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 4px; width: 0; z-index: 2;
  background: linear-gradient(90deg, var(--accent), var(--accent-700));
  transition: width .3s var(--ease);
}
.service-card:hover::before { width: 100%; }

.service-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding: 22px 24px 24px;
  color: #fff;
}
.service-card h3 { color: #fff; margin-bottom: 8px; }
.service-card p { color: #D6E2ED; font-size: .95rem; margin-bottom: 16px; }
.card-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 7px;
  color: #A8CBE8; font-weight: 700; font-size: .92rem;
}
.card-link .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.service-card:hover .card-link .icon { transform: translateX(4px); }

/* Finding 2 – verwaiste letzte Leistungskarte (7 Karten) mittig statt links */
@media (min-width: 1025px) {
  .card-grid > .service-card:last-child:nth-child(3n+1) {
    grid-column: 1 / -1; justify-self: center;
    width: calc((100% - 2 * 26px) / 3);
  }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .card-grid > .service-card:last-child:nth-child(2n+1) {
    grid-column: 1 / -1; justify-self: center;
    width: calc((100% - 26px) / 2);
  }
}

/* Zwei-Spalten */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.check-list { list-style: none; display: grid; gap: 12px; margin: 6px 0 26px; }
.check-list.two { grid-template-columns: 1fr 1fr; }
.check-list li { position: relative; padding-left: 32px; color: var(--text); }
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-2-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233E82C0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Stats */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 28px 22px;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat strong { display: block; font-size: clamp(2rem, 4vw, 2.6rem); color: var(--accent); font-weight: 800; letter-spacing: -.03em; }
.stat span { color: var(--muted); font-size: .9rem; font-weight: 600; }

/* =========================================================
   Prozess-Schritte
   ========================================================= */
.steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 30px 26px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.step-num {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  font-weight: 800; font-size: 1.15rem;
  color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-700));
  box-shadow: var(--shadow-accent);
  margin-bottom: 16px;
}
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; font-size: .94rem; }

/* =========================================================
   Kontakt
   ========================================================= */
.contact-list { list-style: none; display: grid; gap: 18px; margin: 8px 0 0; }
.contact-list li { display: flex; gap: 15px; align-items: flex-start; }
.contact-list .icon {
  width: 44px; height: 44px; padding: 11px; flex: none;
  border-radius: 12px; color: var(--accent); background: var(--accent-soft);
}
.contact-list span { display: flex; flex-direction: column; }
.contact-list strong { color: var(--ink); }

/* Kontakt-Karte (ersetzt das frühere Kontaktformular – direkte Kontaktaufnahme
   per mailto:/tel:, dadurch kein Dritt-Dienst und keine Datenverarbeitung) */
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  display: grid;
  gap: 14px;
  align-content: start;
  box-shadow: var(--shadow);
}
.section-alt .contact-card { background: #fff; }
.contact-card h3 { margin-bottom: 2px; }
.contact-card > p { margin: 0 0 6px; font-size: .96rem; }
.contact-card-hint {
  margin: 6px 0 0;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.55;
}
.contact-card-hint a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }

/* =========================================================
   Leistungsseite
   ========================================================= */
.page-hero {
  position: relative; overflow: hidden;
  color: #fff;
  background: radial-gradient(120% 140% at 85% -20%, var(--brand-dark-2) 0%, var(--brand-dark) 60%);
  padding: clamp(46px, 7vw, 80px) 0 clamp(40px, 6vw, 64px);
}
.page-hero h1 { color: #fff; }
.page-hero .lead { color: var(--on-dark-muted); max-width: 42em; margin: 0; }
.breadcrumb { font-size: .88rem; color: var(--on-dark-faint); margin-bottom: 18px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span[aria-current] { color: var(--on-dark-muted); }

/* Anker-Subnavigation */
.sub-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 900;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.sub-nav-inner { display: flex; gap: 8px; overflow-x: auto; padding: 12px 24px; scrollbar-width: none; }
.sub-nav-inner::-webkit-scrollbar { display: none; }
.sub-nav a {
  white-space: nowrap;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: .9rem;
  color: var(--text);
  border: 1px solid transparent;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.sub-nav a:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--border); }
/* Finding 1 – aktiver Chip dunkler, damit Weiß darauf WCAG AA erfüllt (5,3:1) */
.sub-nav a.active { background: var(--accent-700); color: #fff; box-shadow: var(--shadow-accent); }

/* Leistungs-Sektionen */
.leistungen-wrap { padding: clamp(48px, 7vw, 84px) 24px; display: grid; gap: clamp(40px, 6vw, 72px); }
.leistung {
  /* Zusätzlicher Offset für die sticky Subnav (kommt oben auf das globale
     scroll-padding-top des Headers obendrauf). */
  scroll-margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.leistung-media {
  position: relative;
  margin: 0;
  aspect-ratio: 1024 / 469; /* native Proportion der Fotos – kein Beschnitt */
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--accent);
  background: radial-gradient(120% 120% at 30% 20%, #fff5ee 0%, var(--bg-alt) 70%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.leistung-media picture { display: block; width: 100%; height: 100%; }
.leistung-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s var(--ease);
}
.leistung:hover .leistung-img { transform: scale(1.04); }
/* Icon-Platzhalter – nur sichtbar, wenn (noch) kein Foto vorhanden ist */
.leistung-icon { display: none; }
.leistung-media.img-missing { display: grid; place-items: center; }
.leistung-media.img-missing .leistung-img { display: none; }
.leistung-media.img-missing .leistung-icon {
  display: grid; place-items: center;
  width: 100%; height: 100%;
}
.leistung-media.img-missing .leistung-icon .icon { width: 88px; height: 88px; }
.leistung:hover .leistung-media { box-shadow: var(--shadow); }
/* abwechselndes Layout */
.leistung:nth-child(even) .leistung-media { order: 2; }

.leistung-sub { font-weight: 700; color: var(--ink); margin: 6px 0 10px; }

.leistung-tag {
  display: inline-block;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 10px;
}
.leistung-body h2 { margin-bottom: .4em; }

/* CTA-Band */
.cta-band {
  position: relative; overflow: hidden;
  color: #fff; text-align: center;
  background: radial-gradient(120% 160% at 50% -40%, var(--accent) 0%, var(--accent-700) 70%);
  padding: clamp(56px, 8vw, 88px) 0;
}
.cta-inner { max-width: 640px; margin: 0 auto; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .9); font-size: 1.08rem; margin-bottom: 28px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--dark); color: var(--on-dark-muted); padding: clamp(48px, 7vw, 72px) 0 0; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h3 { color: #fff; margin-bottom: 16px; font-size: 1rem; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
/* Mindestgröße für Tastatur/Touch: WCAG 2.5.8 (AA) verlangt 24×24 px.
   Die Links waren nur 19–20 px hoch. inline-flex + min-height vergrößert
   die Trefferfläche, ohne den Zeilenabstand optisch zu verändern. */
.site-footer a {
  color: var(--on-dark-muted);
  transition: color .15s var(--ease);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.site-footer a:hover { color: var(--accent); }
.footer-desc { color: var(--on-dark-faint); margin-top: 14px; max-width: 26em; font-size: .95rem; }
.footer-contact li { color: var(--on-dark-faint); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 44px; padding: 20px 24px;
  font-size: .86rem; color: var(--on-dark-faint);
}

/* Back-to-top: Styles stehen gebündelt im Abschnitt "G) Back-to-Top
   Progress-Ring" weiter unten. */

/* =========================================================
   Weiche Seitenübergänge (View Transitions)
   Reines Progressive Enhancement ohne JavaScript: Browser ohne
   Unterstützung ignorieren den Block und navigieren wie bisher.
   Greift nur bei Navigationen innerhalb derselben Origin.
   Muss VOR dem Block "Bewegung reduzieren" stehen: Dort setzt
   animation:none mit gleicher Spezifität – steht diese Regel dahinter,
   laufen die Übergänge trotz Reduced-Motion weiter.
   ========================================================= */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .22s cubic-bezier(.22, .61, .36, 1) both; }
::view-transition-new(root) { animation: vt-in  .36s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vt-out { to   { opacity: 0; transform: translateY(-6px) scale(.99); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px) scale(1.01); } }

/* =========================================================
   Scroll-Reveal-Animationen
   ========================================================= */
/* Slide-up + Fade beim Hineinscrollen. Animiert werden ausschließlich
   opacity und transform – beides läuft im Compositor, löst also weder
   Layout noch Paint aus und kostet damit praktisch keine Framezeit. */
/* WICHTIG – zwei Absicherungen, damit Inhalt niemals dauerhaft unsichtbar ist:
   1. Der Startzustand (opacity:0) gilt NUR unter html.js. Diese Klasse setzt
      ein winziges Inline-Skript im <head>. Ist JavaScript aus, greift die
      Regel gar nicht erst und alles ist sofort sichtbar.
   2. Läuft JS zwar, scheitert aber main.js (Ladefehler, Blocker, Syntaxfehler
      in einem alten Browser), fehlt html.js-ready. Dann blendet nach 3 s eine
      Notfall-Animation alles ein. Sobald main.js läuft, greift der Selektor
      nicht mehr und die normale Scroll-Staffelung übernimmt. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  /* --i wird von main.js je Element innerhalb seiner Gruppe gesetzt
     (0,1,2,…) und bei 3 gedeckelt, damit nichts spürbar nachhinkt. */
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js:not(.js-ready) .reveal {
  animation: reveal-failsafe 0s linear 3s forwards;
}
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
.reveal.is-visible { opacity: 1; transform: none; }

/* Fokus-Sichtbarkeit (A11y) */
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; border-radius: 6px; }

/* Body-Scroll-Sperre bei offenem Mobil-Menü (statt Inline-Style) */
body.nav-open { overflow: hidden; }

/* Kleine Utilities (ersetzen ehemalige Inline-Styles auf der 404-Seite) */
.hero-actions.is-centered { justify-content: center; }
.footer-bottom.is-plain { border-top: none; margin-top: 0; }

/* =========================================================
   Skip-Link (A11y)
   ========================================================= */
.skip-link {
  position: absolute;
  left: 16px; top: -200px;
  z-index: 2000;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 10px;
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; outline: 3px solid var(--accent); }

/* =========================================================
   Footer-Rechts-Links
   ========================================================= */
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a {
  color: var(--on-dark-faint); font-weight: 600;
  display: inline-flex; align-items: center; min-height: 24px;
}
.footer-legal a:hover { color: var(--accent); }

/* =========================================================
   Rechtsseiten (Impressum / Datenschutz)
   ========================================================= */
.container-narrow { max-width: 820px; }
.legal { padding: clamp(40px, 7vw, 80px) 0; }
.legal h1 { margin-bottom: .6em; }
.legal h2 {
  font-size: 1.3rem; margin: 1.8em 0 .5em;
  padding-top: 1.2em; border-top: 1px solid var(--border);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; }
.legal p, .legal li { color: var(--text); }
.legal a { color: var(--accent-ink); text-decoration: underline; }
.legal-list { display: grid; gap: 8px; margin: 0 0 1em; padding-left: 22px; list-style: disc; }
.legal-list li { padding-left: 4px; }
.legal code {
  background: var(--accent-soft); color: var(--accent-ink);
  padding: 1px 6px; border-radius: 6px; font-size: .92em;
}
.legal-back { margin-top: 36px; }
.breadcrumb-light { color: var(--muted); margin-bottom: 16px; }
.breadcrumb-light a { color: var(--accent-ink); }

/* =========================================================
   404-Seite
   ========================================================= */
.error-page { text-align: center; padding: clamp(70px, 12vw, 140px) 0; }
.error-code {
  display: block;
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--accent), var(--accent-700));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.error-page p { max-width: 40ch; margin: 0 auto 28px; color: var(--text); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

/* Hero stapelt früher als der Rest: unterhalb von ~1000 px werden beide
   Spalten so schmal, dass die Überschrift zerfranst und das Mosaik schrumpft.
   Gestapelt bekommt jedes Element die volle Breite. */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: 34px; }
  /* Bilder zuerst: auf Tablet und Smartphone prägt das Mosaik den oberen
     Sichtbereich, der Text folgt darunter. Die Breite wird gedeckelt, sonst
     würde das quadratische Mosaik auf Tablets den Text komplett verdrängen.
     Anordnung und Seitenverhältnis bleiben gleich – dadurch bleibt auch der
     Bildausschnitt auf allen Geräten derselbe. */
  .hero-mosaic { order: -1; max-width: 520px; margin-inline: auto; width: 100%; }
  .hero-content { animation-delay: .08s; }
}

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .leistung { grid-template-columns: 1fr; gap: 22px; }
  .leistung-media { aspect-ratio: 1024 / 469; width: 100%; }
  .leistung:nth-child(even) .leistung-media { order: 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;  /* Finding 6 – volle Höhe statt nur oberer Streifen */
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 24px 24px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    /* visibility:hidden nimmt die Links aus der Tab-Reihenfolge. Mit reinem
       opacity:0 blieben sie fokussierbar – Tastaturnutzer liefen durch sechs
       unsichtbare Stopps im geschlossenen Menü. Die verzögerte Transition
       lässt das Ausblenden trotzdem sichtbar zu Ende laufen. */
    visibility: hidden;
    transition: transform .26s var(--ease), opacity .26s var(--ease),
                visibility 0s linear .26s;
  }
  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform .26s var(--ease), opacity .26s var(--ease),
                visibility 0s linear 0s;
  }

  /* WICHTIG: Bei offenem Menü darf der Header KEINEN backdrop-filter haben.
     Ein Element mit backdrop-filter (oder filter/transform) wird zum
     Containing Block für position:fixed-Nachkommen – das Menü-Panel würde
     sich dann am 80px hohen Header ausrichten statt am Viewport und auf
     Header-Höhe kollabieren (sichtbar war nur noch der erste Eintrag).
     Betrifft nur den gescrollten Zustand, weil erst dann .scrolled greift. */
  body.nav-open .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
    transition: none;
  }
  .main-nav ul { flex-direction: column; gap: 2px; }
  .main-nav li { width: 100%; }
  /* min-height 44px: bequeme Trefferfläche im mobilen Menü (vorher 39px) */
  .main-nav a { display: flex; align-items: center; min-height: 44px; padding: 11px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--border); }
  .main-nav a::after { display: none; }
  .main-nav .btn { margin-top: 14px; }

  .hero-mosaic { --tile-gap: 10px; }
  .quickbar-card { padding: 18px 20px; gap: 16px; }
  .quickbar-list { flex-direction: column; gap: 14px; width: 100%; }
  .quickbar-card .btn { width: 100%; }

  .check-list.two { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; gap: 20px; padding: 32px 24px; }
  .card-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* Sehr schmale Geräte (320 px, z. B. iPhone SE 1. Gen.): lange deutsche
   Komposita wie „Generalunternehmen" passen in keine Zeile. Nur hier
   Silbentrennung zulassen – auf normalen Breiten bleibt der Umbruch
   unverändert. hyphens braucht lang="de" am <html>, das ist gesetzt. */
/* Sehr schmale Geräte: lange deutsche Komposita passen in keine Zeile. */
@media (max-width: 440px) {
  /* „Generalunternehmen" ist bei 2,1rem breiter als die Spalte und wurde
     dadurch mitten im Wort umbrochen. Die Überschrift skaliert hier deshalb
     mit der Bildschirmbreite, damit das längste Wort in eine Zeile passt.
     hyphens/overflow-wrap bleiben als Netz für noch längere Wörter;
     hyphens braucht lang="de" am <html>, das ist gesetzt. */
  .hero h1, .page-hero h1 {
    font-size: clamp(1.6rem, 7.6vw, 2.1rem);
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

@media (max-width: 400px) {
  /* Zwei Kennzahlen nebeneinander passen hier nicht mehr: „Leistungsbereiche"
     ist als ein Wort breiter als die halbe Spalte und schob dadurch die ganze
     Seite seitlich heraus (horizontales Scrollen). */
  .stats { grid-template-columns: 1fr; }
  .two-col > * { min-width: 0; }
}

/* =========================================================
   P4 – Liveness: Sticky-Header-Erweiterungen
   - Scroll-Fortschrittsbalken am unteren Rand
   - Logo schrumpft leicht beim Scrollen
   - Aktiver Nav-Link bekommt einen pulsierenden Punkt
   Alle neuen Animationen sind transform/opacity – keine Layout-Kosten.
   ========================================================= */

/* Fortschrittsbalken – sitzt am unteren Rand des sticky Headers.
   Initial scaleX(0) wird in main.js per rAF auf 0..1 gesetzt.
   transform-origin: left sorgt dafür, dass der Balken von links wächst. */
.header-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--highlight));
  transform: scaleX(0);
  transform-origin: left center;
  /* Sanftes Glätten, damit einzelne rAF-Ticks nicht flackern.
     Bei prefers-reduced-motion (unten) wird transition komplett gekillt. */
  transition: transform .12s linear;
  pointer-events: none;
  z-index: 1;
  /* Sehr leichter Glow – gerade auf großen Bildschirmen sichtbar. */
  box-shadow: 0 0 8px rgba(var(--primary-rgb), .35);
}

/* Logo-Shrink: ab 100px Scroll-Tiefe verkleinert sich das Logo um 8%.
   Wird in main.js per Klasse .scrolled-header getoggelt, damit der
   Übergang butterweich läuft (kein JS-Resize pro Scroll-Tick). */
.site-header.scrolled-header .site-logo {
  transform: scale(0.92);
}
.site-logo {
  /* transform-Origin explizit, sonst springt das Logo beim Skalieren
     leicht nach unten/oben. */
  transform-origin: left center;
  transition: transform .25s var(--ease);
}

/* Aktiver Nav-Link bekommt zusätzlich zum bestehenden Strich einen
   pulsierenden Punkt – klein, aber sofort als „hier bist du" lesbar. */
.main-nav a:not(.btn).active {
  position: relative;
}
.main-nav a:not(.btn).active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
  animation: nav-dot-breath 2.2s ease-in-out infinite;
}
@keyframes nav-dot-breath {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), .08); }
}

/* =========================================================
   P1 – Liveness: Hero scroll-linked motion + Mouse-Parallax
   - Chip-Dot atmet langsamer (Premium-Feeling statt hektisch)
   - Hero-Inhalt fadet beim Scrollen leicht in Tiefe/Höhe
   - Mouse-Position-Parallax auf dem Mosaik (Desktop only, JS setzt
     CSS-Variablen --mx / --my, die CSS hier in transform übersetzt)
   ========================================================= */

/* Chip-Dot: langsamer, weicher Atem (2.6s statt vorher 0s statisch).
   Zwei verschachtelte Schatten simulieren eine weiche Aura. */
.chip-dot {
  animation: chip-breath 2.6s ease-in-out infinite;
}
@keyframes chip-breath {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(var(--accent-2-rgb), .22),
      0 0 0 0   rgba(var(--accent-2-rgb), .35);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(var(--accent-2-rgb), .32),
      0 0 0 7px rgba(var(--accent-2-rgb), 0);
  }
}

/* Container des Hero-Inhalts bekommt --hero-y (von JS per rAF
   aktualisiert: 0 → -1 während der Nutzer vom Hero wegsrollt).
   translate3d erzwingt GPU-Compositing – kein Repaint. */
.hero-content {
  will-change: transform, opacity;
  /* Fallback: keine Bewegung, bis JS die Variable gesetzt hat. */
  --hero-y: 0;
  --hero-opacity: 1;
  transform: translate3d(0, calc(var(--hero-y) * 18px), 0);
  opacity: var(--hero-opacity);
}

/* H1 wird beim Scrollen zusätzlich ganz leicht geschrumpft – erzeugt
   zusammen mit dem translate das Gefühl von Tiefe. */
.hero h1 {
  will-change: transform, opacity;
  --h-scale: 1;
  transform: scale(var(--h-scale));
  transform-origin: left center;
}

/* Hero-Mosaik: reagiert auf Maus-Position via CSS-Variablen.
   --mx, --my werden von main.js im Bereich -1..1 gesetzt.
   Nur auf Geräten mit echtem Zeigegerät (Hover + feiner Pointer) –
   siehe JS-Guard, der die Klassen-Variante setzt. */
.hero-mosaic {
  --mx: 0;
  --my: 0;
  will-change: transform;
  /* Sehr leichte, weiche Bewegung: 6px max. */
  transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 6px), 0);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.hero-mosaic .hero-tile {
  /* Jede Kachel bekommt eine eigene Mikroverschiebung – Parallax-Tiefe.
     Wird in main.js per data-depth gesetzt (0.3, 0.5, 0.8). */
  --depth: 0.5;
  will-change: transform;
  transform: translate3d(calc(var(--mx) * 8px * var(--depth)),
                          calc(var(--my) * 8px * var(--depth)),
                          0);
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

/* =========================================================
   P2 – Liveness: Service-Cards echtes Hover-Feedback
   - Conic-Highlight folgt dem Cursor (CSS-Vars --mx/--my in %)
   - "Mehr erfahren →" bekommt eine animierte Unterstreichung
   - Stärkerer Lift + längerer Stagger zwischen Karten
   ========================================================= */

.service-card {
  /* CSS-Variablen für den Cursor-Follow-Highlight.
     Initialwert (50% 50%) sitzt mittig; wird per mousemove überschrieben. */
  --mx: 50%;
  --my: 50%;
  /* Etwas längere Transition für den Lift, damit es sich „solid" anfühlt. */
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card:hover {
  box-shadow: 0 30px 60px rgba(15, 23, 42, .22);
}

/* Highlight-Layer: ein radial-gradient, das der Cursor-Position folgt.
   opacity 0 default, beim Hover 1 – so bleibt die Karte im Ruhezustand
   unverändert. */
.service-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx) var(--my),
    rgba(255, 255, 255, .18),
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.service-card:hover::after { opacity: 1; }

/* Bild im Karten-Hover: stärkerer Zoom + kürzere Easing – wirkt
   präziser. */
.service-bg {
  transition: transform .7s var(--ease-out);
}
.service-card:hover .service-bg {
  transform: scale(1.08);
}

/* "Mehr erfahren →" bekommt einen animierten Unterstrich, der beim
   Hover von links reinläuft. Das Pfeil-Icon rutscht zusätzlich 4px
   nach rechts – schon da, wird hier nur verfeinert. */
.card-link {
  position: relative;
  padding-bottom: 2px;
}
.card-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease-out);
}
.service-card:hover .card-link::after {
  transform: scaleX(1);
}

/* Stärkerer Reveal-Stagger zwischen den Karten: 100ms statt 70ms.
   Wird in main.js per --i Variable gesetzt. */
.reveal { transition-delay: calc(var(--i, 0) * 100ms); }

/* =========================================================
   P3 – Liveness: Per-Word Headline-Reveal + Eyebrow-Underline
   Headlines in .section-head bekommen ihre Wörter in <span class="word">
   gewrappt (JS in main.js). Jedes Wort slidet 100% nach unten + fadet
   ein, mit 50ms Versatz pro Wort → klassischer Premium-Reveal.
   Die bestehende .reveal-Logik triggert über .is-visible.
   ========================================================= */
.section-head h2 .word {
  display: inline-block;
  /* --word-i wird vom JS je Wort gesetzt (Index in 0..n).
     transition-delay rechnet den Versatz aus. */
  --word-i: 0;
  opacity: 0;
  transform: translateY(105%);
  transition:
    opacity .65s var(--ease-out),
    transform .65s var(--ease-out);
  transition-delay: calc(var(--word-i) * 55ms);
  /* Verhindert Zeilenumbruch zwischen den Wörtern eines Wraps. */
  white-space: pre;
}
/* Wenn das umgebende .section-head.reveal sichtbar wird, animieren die
   Wörter rein. Selektor statt JS-Toggle → kein zusätzlicher Roundtrip. */
.reveal.is-visible .section-head h2 .word,
.section-head.reveal.is-visible h2 .word {
  opacity: 1;
  transform: translateY(0);
}

/* Eyebrow bekommt eine animierte Linie darunter, die von links
   reinkriecht sobald die Section sichtbar wird. */
.eyebrow {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease-out) .15s;
}
.reveal.is-visible .eyebrow::after {
  transform: scaleX(1);
}

/* =========================================================
   P5 – Liveness: Section-Dividers
   Jede section.section bekommt eine 1px-Linie oben, die aus der Mitte
   rauswächst wenn die Section in den Viewport kommt. JS setzt
   .in-view (eigener Mini-Observer in main.js).
   Hero/Quickbar/Value-Strip haben keine .section-Klasse → keine Linie.
   ========================================================= */
.section {
  position: relative;
}
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 80px;
  height: 1px;
  background: var(--accent);
  opacity: .25;
  transform: translate(-50%, 0) scaleX(0);
  transform-origin: center;
  transition: transform .85s var(--ease-out);
}
.section.in-view::before {
  transform: translate(-50%, 0) scaleX(1);
}

/* =========================================================
   P8 – Visuelle Upgrades (zero network cost, pure CSS + GPU)
   - Hero Ken-Burns: LCP-Bild atmet langsam rein/raus (WOW-Faktor
     auf der Startseite, ohne ein einziges Byte extra zu laden)
   - 3D-Tilt auf Karten: Cards reagieren auf die Maus mit subtiler
     3D-Rotation (max 6deg). JS setzt nur 2 CSS-Variablen.
   - Mesh-Gradient auf CTA-Band: zwei radiale Gradienten wandern
     langsam ueber den Hintergrund – flüssiges „Atmen".
   - Page-Hero Glow: das vorhandene .hero-glow bekommt eine
     langsame Positions-Animation, statt statisch zu sein.
   - 404-Code: Bounce-In + zarter Schimmer drüber.
   Alle Effekte: nur transform/opacity, GPU-composited.
   Lazy-Loading bleibt unverändert (loading="lazy" auf den Bildern).
   ========================================================= */

/* --- Hero Ken-Burns (nur das große LCP-Bild, max 1 Element) ---
   scale 1.0 → 1.07 ueber 24s, alternierende Richtung (hin & her).
   Da das Bild eh schon loaded ist, kostet das 0 KB extra. */
@keyframes kenburns {
  0%   { transform: scale(1.0)  translate3d(0, 0, 0); }
  50%  { transform: scale(1.07) translate3d(-1.5%, -1%, 0); }
  100% { transform: scale(1.0)  translate3d(0, 0, 0); }
}
.hero-tile-lg img {
  animation: kenburns 24s var(--ease) infinite;
  will-change: transform;
}

/* --- 3D-Tilt: JS schreibt --rx/--ry in Grad, die Perspektive steckt
   direkt im transform – keine Hilfsklassen am Parent nötig. --- */
/* Hover auf Card: Glanz wandert (vorhandener ::after Highlight bleibt) */
.service-card,
.leistung-media {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;   /* zusätzlicher Lift, vom :hover gesetzt */
  transform:
    perspective(900px)
    rotateX(var(--rx))
    rotateY(var(--ry))
    translate3d(0, var(--lift), 0);
  transition: transform .35s var(--ease);
}
.service-card:hover,
.leistung:hover .leistung-media {
  --lift: -8px;
}
/* Während Mausbewegung: Transition kurz ausschalten, damit die
   Rotation 1:1 folgt (nicht nachschleppt). JS setzt .is-tilting
   per mousemove. */
.service-card.is-tilting,
.leistung-media.is-tilting {
  transition: none;
}

/* --- CTA-Band: animierter Mesh-Gradient als Hintergrund-Overlay.
   Zwei radiale Farbflecken wandern langsam (jeder 18s) ueber das
   Band. Vorhandenes background-Gradient bleibt als Basis. */
.cta-band::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(255, 255, 255, .12), transparent 70%),
    radial-gradient(35% 45% at 80% 70%, rgba(255, 255, 255, .10), transparent 70%);
  filter: blur(12px);
  animation: cta-mesh 18s var(--ease) infinite;
}
@keyframes cta-mesh {
  0%, 100% { transform: translate3d(0, 0, 0)         scale(1); }
  33%      { transform: translate3d(3%, -2%, 0)      scale(1.05); }
  66%      { transform: translate3d(-2%, 3%, 0)      scale(0.98); }
}
/* Inhalt über dem Overlay, damit der Text klickbar bleibt */
.cta-band > * { position: relative; z-index: 1; }

/* --- Page-Hero Glow (leistungen.html) atmet langsam.
   Bestehendes .hero-glow bekommt eine sanfte Skalierung. */
.page-hero .hero-glow {
  animation: hero-glow-breath 14s var(--ease) infinite;
}
@keyframes hero-glow-breath {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0); opacity: 1; }
  50%      { transform: scale(1.04) translate3d(0, -1%, 0); opacity: .85; }
}

/* --- 404-Seite: Bounce-In + schimmerndes Overlay auf dem 404-Code.
   Wird durch data-404-num getriggert, das JS beim Init setzt
   (einmaliger reveal, kein Scroll-Observer nötig). */
.error-code {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.error-code.is-revealed {
  animation: error-bounce .8s var(--ease-out);
}
/* Kein opacity:0 im Startbild: ein unsichtbares Element gilt dem Browser als
   "nicht gerendert" und verschob den LCP der 404-Seite auf 1,6–2,0 s. Die
   Bewegung allein reicht für den Effekt. */
@keyframes error-bounce {
  0%   { transform: translateY(28px) scale(.9); }
  60%  { transform: translateY(-6px) scale(1.02); }
  100% { transform: translateY(0)    scale(1); }
}
/* Schimmer: ein Glanzband wandert einmal über die Zahl */
.error-code::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, .35) 50%,
    transparent 100%);
  animation: error-shimmer 2.4s var(--ease) 1.2s 1 both;
  pointer-events: none;
}
@keyframes error-shimmer {
  0%   { left: -120%; }
  100% { left: 130%; }
}

/* --- Subtile schwebende Shapes hinter dem 404-Text (CSS-only, 0 KB) */
.error-page { position: relative; overflow: hidden; }
.error-page::before,
.error-page::after {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.error-page::before {
  top: 10%;  left: -8%;
  background: radial-gradient(circle, rgba(var(--primary-rgb), .45), transparent 70%);
  animation: error-orb-a 12s var(--ease) infinite;
}
.error-page::after {
  bottom: 5%; right: -10%;
  background: radial-gradient(circle, rgba(var(--accent-2-rgb), .45), transparent 70%);
  animation: error-orb-b 14s var(--ease) infinite;
}
@keyframes error-orb-a {
  0%, 100% { transform: translate3d(0, 0, 0)     scale(1); }
  50%      { transform: translate3d(40px, 30px, 0) scale(1.1); }
}
@keyframes error-orb-b {
  0%, 100% { transform: translate3d(0, 0, 0)      scale(1); }
  50%      { transform: translate3d(-30px, -40px, 0) scale(1.08); }
}
/* Inhalt über den Orbs */
.error-page > * { position: relative; z-index: 1; }

/* =========================================================
   P7 – Liveness: Live-Availability-Indikator
   Der Quickbar-Eintrag "Erreichbar" zeigt jetzt einen echten
   Live-Status: grüner pulsierender Punkt + Text "Jetzt erreichbar"
   bzw. grauer Punkt + "Aktuell nicht erreichbar". JS setzt die
   Klassen .is-open / .is-closed.
   ========================================================= */
.availability {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: .97rem;
  line-height: 1.2;
}
/* Punkt und Trennzeichen erscheinen erst, wenn JS den Status gesetzt hat
   (.is-open/.is-closed). Ohne JavaScript bleiben nur die Öffnungszeiten
   stehen – statt einer Statusaussage, die dann niemand aktualisiert. */
.availability-dot {
  display: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgba(100, 118, 137, .18);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
  flex: none;
}
.availability.is-open .availability-dot,
.availability.is-closed .availability-dot { display: block; }
.availability.is-open .availability-hours::before,
.availability.is-closed .availability-hours::before { content: "· "; }
.availability.is-open .availability-dot {
  background: var(--success);
  animation: avail-pulse 2.4s ease-in-out infinite;
}
.availability.is-closed .availability-dot {
  background: var(--muted);
}
.availability-hours {
  color: var(--muted);
  font-weight: 500;
  font-size: .9rem;
}
@keyframes avail-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(30, 122, 70, .22); }
  50%      { box-shadow: 0 0 0 7px rgba(30, 122, 70, 0); }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  /* Seitenübergänge ohne Bewegung: sofortiger Wechsel statt Slide */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  /* Lichtreflex und Bild-Zoom komplett aus */
  .btn::after { display: none; }
  .hero-tile:hover img { transform: none; }
  .hero-mosaic:hover .hero-tile { opacity: 1; }
  /* P3 – Headline-Wörter direkt sichtbar, kein Slide */
  .section-head h2 .word { opacity: 1 !important; transform: none !important; }
  /* P3 – Eyebrow-Linie direkt voll */
  .eyebrow::after { transform: scaleX(1) !important; }
  /* P5 – Section-Divider direkt sichtbar */
  .section::before { transform: translate(-50%, 0) scaleX(1) !important; }
  /* P7 – Live-Pulse aus, nur Farbe zählt */
  .availability.is-open .availability-dot { animation: none !important; }
  /* P8 – Visuelle Upgrades: alle Loop-Animationen + 3D-Tilt aus */
  .hero-tile-lg img,
  .cta-band::after,
  .page-hero .hero-glow,
  .error-page::before,
  .error-page::after,
  .error-code,
  .error-code::after { animation: none !important; }
  .error-code { opacity: 1 !important; transform: none !important; }
  .service-card,
  .leistung-media { transform: none !important; }
  /* P9 */
  .od-column { transition: none !important; transform: none !important; }
  .with-shapes::before, .with-shapes::after { animation: none !important; transform: none !important; }
  .to-top-ring-fill { transition: none !important; }
}

/* =========================================================
   P9 – Tier-1/Tier-2 Visuelle Upgrades
   C) Visual Odometer: rollende Ziffern-Spalten
   D) Floating Shapes: deko-Elemente auf Sections
   E) Service-Meta: "01 / 07" Number-Slide-In
   F) Quickbar-Icon: mehr Hover-Feedback
   G) Back-to-Top: Progress-Ring statt Chevron
   (A Marquee und B Sticky-Scroll wurden entfernt; die Seitenübergänge
   stehen im Abschnitt "Weiche Seitenübergänge" weiter oben.)
   Alle Effekte GPU-only, alle respektieren reduced-motion.
   ========================================================= */

/* --- C) Visual Odometer ---
   Aufbau: 1em-hoher Container (overflow:hidden) zeigt genau eine
   Ziffer. Innen eine Spalte mit 10 Spans (0-9), jedes 1em hoch.
   Translate der Spalte um -N * 1em zeigt Ziffer N. Robust gegen
   jede font-size, weil 1em immer = aktuelle Schriftgröße ist. */
.odometer {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}
.od-visual {
  display: inline-flex;
  align-items: baseline;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  vertical-align: baseline;
  /* Die Spalten enthalten alle Ziffern 0-9 übereinander; sichtbar ist per
     overflow nur eine. Ohne diese Sperre kopiert man beim Markieren
     "01234567890123456789" statt "15". Der echte Wert steht in .sr-only. */
  -webkit-user-select: none;
  user-select: none;
}

/* Nur für Screenreader – trägt den echten Zahlenwert, weil die
   Odometer-Spalten aria-hidden sind. Nicht display:none, das würde die
   Ausgabe ebenfalls unterdrücken. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.od-column {
  display: block;
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  line-height: 1;
}
.od-column > span {
  display: block;
  height: 1em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.od-suffix {
  color: var(--accent);
  margin-left: 2px;
  line-height: 1;
}

/* --- D) Floating Decorative Shapes --- */
.with-shapes {
  position: relative;
  overflow: hidden;
}
.with-shapes::before,
.with-shapes::after {
  content: "";
  position: absolute;
  width: clamp(180px, 25vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .18;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.with-shapes::before {
  top: 8%; left: -5%;
  background: var(--accent);
  animation: shape-drift-a 16s var(--ease) infinite;
}
.with-shapes::after {
  bottom: 10%; right: -8%;
  background: var(--accent-2);
  animation: shape-drift-b 20s var(--ease) infinite;
}
@keyframes shape-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(50px, 40px, 0) scale(1.1); }
}
@keyframes shape-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-40px, -50px, 0) scale(1.08); }
}
.with-shapes > * { position: relative; z-index: 1; }

/* --- E) Service-Meta --- */
.card-grid { counter-reset: svc-card; }
.service-card { counter-increment: svc-card; }
.service-meta {
  position: absolute;
  top: 18px; left: 18px; z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.service-card:hover .service-meta {
  opacity: 1;
  transform: translateY(0);
}
.service-meta-num {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.service-meta-num::before { content: counter(svc-card, decimal-leading-zero); }
.service-meta-total {
  font-size: .8rem;
  font-weight: 700;
  opacity: .65;
  margin-left: 2px;
}

/* --- F) Quickbar-Icon Hover --- */
.quickbar-list .icon {
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.quickbar-list li:hover .icon {
  transform: rotate(-8deg) scale(1.08);
  background: var(--accent);
  color: #fff;
}

/* --- G) Back-to-Top Progress-Ring ---
   position: fixed ist zugleich Bezugsrahmen für den absolut
   positionierten Ring. Ein position: relative an dieser Stelle hob bis
   version5 die feste Position auf – der Button hing dann halb
   abgeschnitten unter dem Footer. */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  color: var(--ink);
  z-index: 1100;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .18s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent); color: #fff; }
.to-top-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.to-top-ring circle {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.to-top-ring-bg { stroke: var(--border); }
.to-top-ring-fill {
  stroke: var(--accent);
  stroke-dasharray: 125.66;
  stroke-dashoffset: 125.66;
  transition: stroke-dashoffset .12s linear;
}
.to-top-icon {
  width: 1.1em; height: 1.1em;
  z-index: 1;
  transition: transform .18s var(--ease);
}
.to-top:hover .to-top-icon { transform: translateY(-2px); }

/* =========================================================
   Druck
   Ohne diesen Block war der Ausdruck der Startseite ab dem Value-Strip
   leer: die Scroll-Reveals bleiben beim Drucken auf opacity:0 stehen,
   weil der IntersectionObserver für nie gescrollte Bereiche nie feuert.
   ========================================================= */
@media print {
  /* Alles sichtbar machen, egal ob der Observer gelaufen ist */
  .reveal,
  .js .reveal,
  .js:not(.js-ready) .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* Die scroll-abhängigen Variablen setzt JS per Inline-Style. Sie überleben
     den Wechsel in den Druckmodus – wer nach dem Scrollen druckt, bekäme
     sonst einen halb ausgeblendeten, verschobenen Hero. */
  .hero-content, .hero-tile, .error-code, .hero h1 {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Sticky-Header überlagerte im Ausdruck den Inhalt */
  .site-header { position: static !important; box-shadow: none !important; }
  .header-progress, .to-top, .nav-toggle, .main-nav, .hero-glow,
  .with-shapes::before, .with-shapes::after { display: none !important; }

  /* Dunkle Vollflächen fressen Toner – auf Weiß umstellen */
  .hero, .page-hero, .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .hero h1, .page-hero h1, .hero .lead, .page-hero .lead,
  .site-footer, .site-footer a, .site-footer h3,
  .hero-badges, .chip { color: #000 !important; }
  /* Helles Akzentblau ist auf Weiß kaum lesbar – im Druck auf das dunkle
     Markenblau umstellen (statt es einfach schwarz zu machen). */
  .hero .text-accent, .page-hero .text-accent,
  .text-accent { color: #12324F !important; }
  .chip { border-color: #999 !important; background: none !important; }

  body { background: #fff; }
  a { text-decoration: underline; }
  /* Zielangabe bei externen Links, damit der Ausdruck nutzbar bleibt */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  main a[href^="mailto:"]::after,
  main a[href^="tel:"]::after { content: ""; }

  section, .leistung, .service-card { break-inside: avoid; }
}