/* =========================================================================
   BY WORKWEAR — Design System
   Eine zentrale Datei für Farben, Schrift, Abstände und alle Bausteine.
   Farben ändern? -> Abschnitt ":root" unten.
   ========================================================================= */

/* ----- 0. Schriften (selbst gehostet, kein Google-Fonts-Request) ------- */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ----- 1. Design-Tokens (hier zentral anpassen) ------------------------- */
:root {
  /* Markenfarben */
  --navy:        #1f2844;   /* dunkles Blau – Text, Footer, dunkle Flächen */
  --navy-900:    #141a30;
  --navy-950:    #0f1424;
  --blue:        #2e3ba6;   /* Hauptakzent – Buttons, Links, Hervorhebungen */
  --blue-600:    #3b49c9;
  --blue-700:    #26318a;
  --blue-bright: #4f5fe6;   /* leuchtender Blauton für Verläufe/Glow       */
  --red:         #d3243a;   /* Signal-Akzent (aus dem Logo)               */
  --red-bright:  #ff3b52;

  /* Neutrale Töne – dunkles, edles Grundthema */
  --ink:         #dfe3f0;   /* Fließtext auf dunklem Grund                  */
  --muted:       #98a1ba;   /* Sekundärtext                                 */
  --line:        rgba(255,255,255,.10);  /* feine Trennlinien / Rahmen     */
  --bg:          #0c1020;   /* fast schwarzer Grundton                      */
  --bg-soft:     #121728;   /* etwas hellere Sektion                        */
  --bg-tint:     #1a2138;   /* Panel mit leichtem Blaustich                 */
  --card:        #141a2e;   /* Kartenfläche                                 */
  --heading:     #ffffff;   /* Überschriften                               */

  /* Verläufe & Effekte */
  --grad-brand:  linear-gradient(120deg, var(--blue) 0%, var(--blue-bright) 55%, var(--red) 130%);
  --grad-tricolor: linear-gradient(90deg, var(--blue) 0%, var(--blue) 42%, #fff 50%, var(--red) 58%, var(--red) 100%);
  --grad-blue:   linear-gradient(135deg, var(--blue-600) 0%, var(--blue) 60%, var(--navy) 100%);
  --grad-blue-soft: linear-gradient(180deg, var(--navy-950) 0%, var(--blue-600) 30%, var(--blue) 62%, var(--navy-950) 100%);
  --grad-dark:   radial-gradient(120% 120% at 15% 0%, #26306e 0%, var(--navy) 45%, var(--navy-950) 100%);
  --glow-blue:   0 20px 60px -12px rgba(79,95,230,.55);
  --glow-red:    0 20px 55px -14px rgba(211,36,58,.45);

  /* Typografie */
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Maße */
  --maxw: 1280px;
  --header-h: 106px;   /* Höhe der Kopfzeile – für Vollbild-Hero unter dem Header */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-md: 0 8px 24px rgba(16,24,40,.10);
  --shadow-lg: 0 24px 60px rgba(16,24,40,.16);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ----- 2. Reset / Grundlagen ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }

body {
  font-family: var(--font);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* Grundfläche + feines Korn (statisch, günstig). */
body {
  background:
    radial-gradient(60vw 50vw at 78% -5%, rgba(46,59,166,.20), transparent 60%),
    radial-gradient(55vw 45vw at 0% 105%, rgba(211,36,58,.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
/* Ein langsam driftender Farbnebel – GPU-freundlich per transform. */
body::before {
  content: "";
  position: fixed; left: -25%; top: -25%; width: 150%; height: 150%;
  z-index: -2; pointer-events: none; will-change: transform;
  background:
    radial-gradient(28% 28% at 30% 30%, rgba(79,95,230,.22), transparent 70%),
    radial-gradient(26% 26% at 72% 55%, rgba(46,59,166,.20), transparent 70%),
    radial-gradient(30% 24% at 55% 85%, rgba(211,36,58,.12), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: bgdrift 40s ease-in-out infinite alternate; }
}
@keyframes bgdrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--heading);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.35rem); }
h2 { font-size: clamp(1.9rem, 1.15rem + 3vw, 3rem); }
h3 { font-size: 1.32rem; letter-spacing: -0.015em; line-height: 1.25; }
p  { color: var(--muted); text-wrap: pretty; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----- 3. Layout-Hilfen ---------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.section { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); }
.section--navy, .section--navy p { color: #d9deea; }
.section--navy h2, .section--navy h3 { color: #fff; }

/* Weiche Übergänge: getönte Sektionen blenden oben und unten in den
   Grundton aus, statt mit einer harten Kante zu beginnen. */
.section--soft, .section--navy { position: relative; isolation: isolate; }
.section--soft::before, .section--soft::after,
.section--navy::before, .section--navy::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: clamp(40px, 6vw, 96px); z-index: -1; pointer-events: none;
}
.section--soft::before, .section--navy::before {
  top: 0; background: linear-gradient(to bottom, var(--bg), transparent);
}
.section--soft::after, .section--navy::after {
  bottom: 0; background: linear-gradient(to top, var(--bg), transparent);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
.section--navy .eyebrow { color: #8ea2ff; }
.eyebrow::before {
  content: "";
  width: 28px; height: 3px; border-radius: 3px;
  background: var(--grad-brand);
  display: inline-block;
}

.section-head { max-width: 640px; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.lead { font-size: 1.15rem; color: var(--muted); }

/* Abstand zwischen Überschrift und folgendem Absatz */
.section-head h2 + p,
.split h2 + p { margin-top: 1rem; }

/* ----- 4. Buttons -------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  border: 1.5px solid transparent;
  transition: transform .2s var(--spring), box-shadow .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--spring); }
.btn:hover svg { transform: translateX(4px); }

/* Primär: Marken-Verlauf + Glow, mit sanftem Farb-Shift beim Hover */
.btn--primary { color: #fff; background: var(--blue); box-shadow: 0 10px 24px -10px rgba(46,59,166,.7); }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-brand); background-size: 180% 180%;
  opacity: 0; transition: opacity .3s var(--ease); background-position: 0% 50%;
}
.btn--primary:hover { box-shadow: var(--glow-blue); }
.btn--primary:hover::before { opacity: 1; animation: btnShift 3s var(--ease) infinite alternate; }
@keyframes btnShift { to { background-position: 100% 50%; } }

.btn--ghost { border-color: var(--line); color: var(--navy); background: #fff; }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow-md); }
.btn--light { background: #fff; color: var(--navy); box-shadow: var(--shadow-md); }
.btn--light:hover { box-shadow: var(--glow-blue); }
.btn--onnavy { border-color: rgba(255,255,255,.30); color: #fff; }
.btn--onnavy:hover { border-color: #fff; background: rgba(255,255,255,.10); }

/* ----- 5. Kopfzeile / Navigation -------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; gap: 1.1rem;
  min-height: 106px;
}
.brand { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; }
.brand img { height: 84px; width: auto; transition: height .25s var(--ease); }
.site-header.is-stuck .brand img { height: 64px; }
.brand span {
  font-weight: 800; letter-spacing: .04em; color: #fff;
  font-size: 1.15rem; line-height: 1; white-space: nowrap;
}
.site-header.is-stuck .brand span { font-size: 1.05rem; }
@media (max-width: 1240px) { .brand span { display: none; } }
@media (max-width: 480px) { .brand img { height: 58px; } }

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav a {
  padding: .5rem .7rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .94rem;
  color: var(--navy);
  white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav a:hover { background: var(--bg-tint); color: var(--blue); }
.nav a[aria-current="page"] { color: var(--blue); }
.nav .btn { margin-left: .6rem; }

/* Sprachumschalter DE | EN */
.lang-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; margin-left: .5rem; flex-shrink: 0;
}
.lang-switch a {
  padding: .4rem .7rem; font-size: .82rem; font-weight: 700;
  color: var(--muted); border-radius: 0;
}
.lang-switch a:hover { background: var(--bg-tint); color: var(--blue); }
.lang-switch a[aria-current="true"] { background: var(--navy); color: #fff; }

.nav-toggle { display: none; }

/* Mobile Navigation */
@media (max-width: 940px) {
  .site-header .container { gap: 1rem; }
  .nav {
    position: fixed; inset: 100px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .25rem;
    background: #0c1020;
    padding: 1rem clamp(1.25rem, 5vw, 2.5rem) 1.75rem;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-130%);
    transition: transform .28s var(--ease);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding: .85rem .75rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a:last-of-type { border-bottom: 0; }
  .nav .btn { margin: .75rem 0 0; width: 100%; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px;
    margin-left: auto; padding: 10px; border: 0; background: transparent;
  }
  .nav-toggle span { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ----- 6. Hero -------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--bg); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(46,59,166,.10), transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(46,59,166,.07), transparent 60%);
  pointer-events: none;
}
.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
}
.hero__copy h1 { margin-bottom: 1.25rem; }
.hero__copy p { font-size: 1.2rem; max-width: 46ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background: var(--bg-soft);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__badge {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(255,255,255,.95);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  box-shadow: var(--shadow-md);
  font-size: .9rem; font-weight: 700; color: var(--navy);
  display: flex; align-items: center; gap: .6rem;
}
.hero__badge b { color: var(--blue); }

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 16 / 12; order: -1; }
}

/* Gestapelte Hero-Variante (Startseite): Text oben, breites 16:9-Bild darunter */
.hero--stacked .container {
  display: flex; flex-direction: column; align-items: stretch;
  padding-block: clamp(2.5rem, 2rem + 4vw, 4.5rem);
}
/* Text mittig und breiter ausgerichtet – bezieht sich auf das breite Bild darunter */
.hero--stacked .hero__copy {
  max-width: 1040px; margin-inline: auto; text-align: center;
}
.hero--stacked .hero__copy p { max-width: 68ch; margin-inline: auto; }
.hero--stacked .hero__actions { justify-content: center; }
.hero--stacked .hero__mini { justify-content: center; }
.hero--stacked .eyebrow { justify-content: center; }
/* Bild randlos über die volle Breite – bündig wie die Fokus-Bänder darunter */
.hero--stacked .hero__media {
  order: 0;
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  aspect-ratio: 16 / 9; max-height: min(72vh, 680px);
  border-radius: 0;
  margin-top: clamp(2rem, 1rem + 3.5vw, 3.75rem);
}
@media (max-width: 860px) {
  .hero--stacked .hero__media { aspect-ratio: 16 / 10; max-height: 60vh; }
}


/* ----- 7. Logo-/Vertrauensleiste ------------------------------------- */
.trust { border-block: 1px solid var(--line); background: #fff; }
.trust .container { padding-block: 2rem; }
.trust p {
  text-align: center; font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.25rem;
}
.trust__logos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.25rem, 1rem + 3vw, 3.25rem);
}
.trust__logos span {
  font-weight: 800; font-size: 1.15rem; color: #98a2b3;
  letter-spacing: .02em;
}

/* ----- 8. Karten-Raster (Leistungen) -------------------------------- */
.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.15rem 2rem;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card__icon {
  width: 58px; height: 58px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--bg-tint); color: var(--blue);
  margin-bottom: 1.35rem;
}
.card__icon svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: .55rem; font-size: 1.3rem; }
.card p { font-size: 1.02rem; }
.card__link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 1rem; font-weight: 700; font-size: .92rem; color: var(--blue);
}
.card__link svg { width: 15px; height: 15px; transition: transform .15s var(--ease); }
.card:hover .card__link svg { transform: translateX(3px); }

/* ----- 9. Split-Abschnitt (Text + Bild) ---------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 5 / 4;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.split li { position: relative; padding-left: 1.9rem; color: var(--ink); }
.split li::before {
  content: ""; position: absolute; left: 0; top: .45rem;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-tint) 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='%232e3ba6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* ----- 10. Prozess-Schritte --------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: rgba(255,255,255,.03);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-weight: 800; font-size: 1.05rem; color: #8ea2ff;
  display: block; margin-bottom: .9rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.step p { font-size: .95rem; }
.step__time {
  display: inline-block; margin-top: 1rem;
  font-size: .8rem; font-weight: 700; line-height: 1.4; color: #d7deff;
  background: rgba(142,162,255,.14); border: 1px solid rgba(142,162,255,.32);
  border-radius: 12px; padding: .45rem .8rem;
}
.steps-note {
  margin-top: 1.75rem; font-size: .92rem; color: #c4cbe0;
  border-left: 3px solid var(--blue-bright); padding-left: 1rem; max-width: 60ch;
}

/* ----- 11. Standorte -------------------------------------------------- */
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 700px) { .offices { grid-template-columns: 1fr; } }
.office {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; background: #fff;
}
.office h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.office h3 svg { width: 20px; height: 20px; color: var(--blue); }
.office address { font-style: normal; color: var(--muted); line-height: 1.9; }
.office a { color: var(--navy); font-weight: 600; }
.office a:hover { color: var(--blue); }

/* ----- 12. CTA-Band ------------------------------------------------- */
.cta-band { background: linear-gradient(120deg, var(--blue) 0%, var(--navy) 100%); }
.cta-band .container { text-align: center; padding-block: clamp(3rem, 2rem + 5vw, 5rem); }
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band p { color: rgba(255,255,255,.85); font-size: 1.15rem; max-width: 52ch; margin: 0 auto 2rem; }
.cta-band .btn--light { padding-inline: 2rem; }

/* ----- 13. Footer -------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #aeb6c6; padding-block: 3.5rem 2rem; }
.site-footer a { color: #aeb6c6; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr .9fr 1fr 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 1040px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 76px; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .95; }
.footer-brand p { color: #8b93a5; font-size: .95rem; max-width: 34ch; }
.site-footer h4 {
  color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .88rem; color: #78808f;
}
.footer-bottom nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ----- 14. Kontaktformular --------------------------------------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; font-size: .9rem; color: var(--navy); margin-bottom: .4rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .8rem .9rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); background: #fff;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,59,166,.15);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: .82rem; color: var(--muted); margin-top: .5rem; }

/* ----- 15. Utilities ------------------------------------------------ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 1rem; }
.hide { display: none !important; }

/* =========================================================================
   16. EFFEKTE & ERWEITERTE BAUSTEINE (v2)
   Mehr Marken-Farbe, Bewegung und Tiefe. Alles per CSS/kleinem JS,
   ohne externe Bibliotheken. Bewegung respektiert "reduzierte Bewegung".
   ========================================================================= */

/* ----- Einblenden beim Scrollen (mit Richtung + Staffelung) ----------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal[data-reveal="left"]  { transform: translateX(-40px); }
  .reveal[data-reveal="right"] { transform: translateX(40px); }
  .reveal[data-reveal="scale"] { transform: scale(.92); }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ----- Kopfzeile: transparent über dem Hero, fest beim Scrollen ------- */
.site-header {
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* Wiedererkehrendes Marken-Band in Rot-Weiß-Blau (aus dem Logo) auf jeder Seite */
.site-header::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-tricolor); z-index: 1;
}
body[data-hero-dark] .site-header:not(.is-stuck) {
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
}
body[data-hero-dark] .site-header:not(.is-stuck) .nav a { color: #fff; }
body[data-hero-dark] .site-header:not(.is-stuck) .nav a:hover { background: rgba(255,255,255,.12); color:#fff; }
body[data-hero-dark] .site-header:not(.is-stuck) .brand img { filter: brightness(0) invert(1); }
body[data-hero-dark] .site-header:not(.is-stuck) .lang-switch { border-color: rgba(255,255,255,.35); }
body[data-hero-dark] .site-header:not(.is-stuck) .lang-switch a { color: rgba(255,255,255,.8); }
body[data-hero-dark] .site-header:not(.is-stuck) .lang-switch a[aria-current="true"] { background:#fff; color: var(--navy); }
body[data-hero-dark] .site-header:not(.is-stuck) .nav-toggle span { background:#fff; }
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 8px 30px -12px rgba(16,24,40,.18); }

/* ----- Eyebrow mit pulsierendem Punkt -------------------------------- */
.eyebrow.dot::before {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .eyebrow.dot::before { animation: ping 2.4s var(--ease) infinite; }
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(79,95,230,.5); }
  70%,100% { box-shadow: 0 0 0 12px rgba(79,95,230,0); }
}

/* Verlaufs-Text für einzelne Wörter in Überschriften */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ----- HERO (dunkle Marken-Variante) -------------------------------- */
.hero--dark { background: var(--grad-dark); color: #eaecf5; isolation: isolate; }
.hero--dark .container { min-height: min(88vh, 860px); }
.hero--dark.hero--inner .container { min-height: min(72vh, 720px); }
.hero--dark.hero--stacked .container { min-height: 0; }
.hero--dark h1 { color: #fff; font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4rem); }
.hero--dark .hero__copy p { color: #c3cae0; font-size: clamp(1.08rem, 1rem + .4vw, 1.22rem); max-width: 46ch; }
.hero--dark .eyebrow { color: #9fb0ff; }
.hero--dark h1 .grad-text { display: inline-block; margin-top: .4rem; }

/* Riesiges, gedämpftes Wortzeichen im Hintergrund des Hero */
.hero__word {
  position: absolute; left: -2vw; bottom: -3vw; z-index: 0; pointer-events: none;
  font-size: clamp(6rem, 4rem + 16vw, 20rem); font-weight: 800; letter-spacing: -.04em;
  line-height: .8; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.06);
  white-space: nowrap; user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__word { animation: wordslide 40s linear infinite alternate; }
}
@keyframes wordslide { from { transform: translateX(0); } to { transform: translateX(-8%); } }

/* Mini-Kennzahlen direkt im Hero */
.hero__mini {
  display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2.25rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
}
.hero__mini div b {
  display: block; font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1;
}
.hero__mini div span { font-size: .82rem; color: #8e98b5; font-weight: 600; }

/* „Showreel"-Play auf dem Hero-Bild */
.hero__reel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .7rem .7rem .7rem .7rem; border-radius: 999px;
  background: rgba(12,16,32,.55); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px); color: #fff; font-weight: 700; font-size: .9rem;
  padding-right: 1.15rem;
  transition: background-color .2s var(--ease), transform .2s var(--spring);
}
.hero__reel:hover { background: rgba(46,59,166,.75); transform: translate(-50%,-50%) scale(1.04); }
.hero__reel i {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%; background: var(--grad-brand);
  display: grid; place-items: center; flex-shrink: 0;
}
.hero__reel i svg { width: 15px; height: 15px; fill: #fff; margin-left: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .hero__reel i::after {
    content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.5); animation: ping 2.2s ease-out infinite;
  }
}

/* animierte Farb-Auren im Hintergrund */
.hero--dark .aurora { position: absolute; inset: 0; overflow: hidden; z-index: -2; pointer-events: none; }
.hero--dark .aurora::before,
.hero--dark .aurora::after {
  content: ""; position: absolute; width: 40vw; height: 40vw; border-radius: 50%;
  filter: blur(48px); opacity: .5;
}
.hero--dark .aurora::before { background: radial-gradient(circle, var(--blue-bright), transparent 65%); top: -12%; right: -6%; }
.hero--dark .aurora::after  { background: radial-gradient(circle, var(--red), transparent 60%); bottom: -18%; left: -10%; opacity: .38; }
@media (prefers-reduced-motion: no-preference) {
  .hero--dark .aurora::before { animation: float1 16s ease-in-out infinite alternate; }
  .hero--dark .aurora::after  { animation: float2 20s ease-in-out infinite alternate; }
}
@keyframes float1 { to { transform: translate3d(-6%, 8%, 0) scale(1.12); } }
@keyframes float2 { to { transform: translate3d(8%, -6%, 0) scale(1.15); } }

/* feines Punktraster über dem Hero */
.hero--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

.hero--dark .hero__media { box-shadow: var(--glow-blue); }
.hero--dark .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15,20,36,.55));
  mix-blend-mode: multiply;
}
.hero--dark .hero__badge { background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.hero--dark .hero__badge b { color: #9fb0ff; }

/* kleine schwebende Akzentform */
.hero__accent {
  position: absolute; z-index: 2; right: -14px; top: -14px;
  width: 84px; height: 84px; border-radius: 22px;
  background: var(--grad-brand); box-shadow: var(--glow-red);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__accent { animation: bob 5s ease-in-out infinite alternate; }
}
@keyframes bob { to { transform: translateY(14px) rotate(8deg); } }

/* ----- HERO – Variante „Über uns" (Foto-Bühne mit Säulen) ---------- */
.hero--about { isolation: isolate; }
.hero--dark.hero--about .container {
  display: block;
  min-height: min(90vh, 900px);
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
}
.hero--about .hero__bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
.hero--about .hero__scrim {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,11,22,.34) 0%, rgba(8,11,22,.12) 42%, rgba(8,11,22,.50) 100%),
    linear-gradient(90deg, rgba(8,11,22,.50) 0%, rgba(8,11,22,.12) 60%, rgba(8,11,22,0) 100%);
}
.hero--dark.hero--about::after { display: none; }   /* Punktraster aus */
.hero--about .aurora { display: none; }

/* vertikaler Text am rechten Rand */
.hero--about .hero__vert {
  position: absolute; right: 16px; top: 50%; translate: 0 -50%; z-index: 1;
  writing-mode: vertical-rl; text-orientation: mixed;
  display: flex; align-items: center; gap: 1.1rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: #808bab; pointer-events: none; white-space: nowrap;
}
.hero--about .hero__vert::after {
  content: ""; width: 2px; height: 52px; border-radius: 2px; background: var(--grad-brand);
}

.hero--about .hero__copy { max-width: 760px; }
.hero--dark.hero--about h1 {
  font-size: clamp(2.4rem, 1.5rem + 4.4vw, 4.1rem); line-height: 1.05; letter-spacing: -.03em;
}
.hero--about .hero__copy > p:last-child { color: #c9cfe4; max-width: 52ch; }

/* die drei Säulen (Glas-Karten) */
.hero--about .pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, .5rem + 1.4vw, 1.75rem);
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
}
.hero--about .pillar {
  display: flex; flex-direction: column; gap: .55rem;
  padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(21,27,48,.72), rgba(13,18,34,.74));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.hero--about .pillar:hover { border-color: rgba(159,176,255,.38); transform: translateY(-4px); }
.hero--about .pillar__top { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.hero--about .pillar__n {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--about .pillar__ico {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.hero--about .pillar__ico svg { width: 24px; height: 24px; stroke: #c7d0ff; }
.hero--about .pillar h3 { color: #fff; font-size: 1.15rem; margin: 0; }
.hero--about .pillar p { color: #a9b1cb; font-size: .96rem; margin: 0; flex: 1; }
.hero--about .pillar__more {
  margin-top: .5rem; display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .88rem; color: #9fb0ff;
}
.hero--about .pillar__more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.hero--about .pillar:hover .pillar__more svg { transform: translateX(4px); }

/* USP-Leiste + Signatur */
.hero--about .hero-usps {
  margin-top: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem; flex-wrap: wrap;
}
.hero--about .hero-usps ul {
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
  margin: 0; padding: 0; list-style: none;
}
.hero--about .hero-usps li {
  position: relative; display: flex; align-items: center; gap: .55rem;
  font-size: .85rem; font-weight: 600; color: #c2c9de;
}
.hero--about .hero-usps__sig { margin-left: auto; }
.hero--about .hero-usps li svg { width: 20px; height: 20px; stroke: #9fb0ff; flex-shrink: 0; }
.hero--about .hero-usps li:not(:first-child)::before {
  content: ""; position: absolute; left: -.95rem; top: 50%; translate: 0 -50%;
  width: 1px; height: 20px; background: rgba(255,255,255,.14);
}
.hero--about .hero-usps__sig {
  font-family: "Caveat", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 700; line-height: 1;
  color: #fff; white-space: nowrap; position: relative; padding-bottom: .25rem;
}
.hero--about .hero-usps__sig::after {
  content: ""; position: absolute; left: 14%; right: 0; bottom: 0;
  height: 3px; border-radius: 3px; background: var(--grad-brand);
}

@media (prefers-reduced-motion: no-preference) {
  .hero--about .hero__bg { animation: kbdrift 32s ease-in-out infinite alternate; transform-origin: 65% 45%; }
}
@media (max-width: 1180px) { .hero--about .hero__vert { display: none; } }
@media (max-width: 900px) {
  .hero--dark.hero--about .container { min-height: 0; }
  .hero--about .pillars { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero--about .hero-usps { justify-content: flex-start; }
  .hero--about .hero-usps li:not(:first-child)::before { display: none; }
}

/* ----- HERO – cinematische Vollbild-Variante (Startseite) --------- */
.hero--cinematic {
  min-height: 100svh;
  display: flex; align-items: center;
  isolation: isolate;
  /* Bild läuft randlos bis unter die transparente Kopfzeile */
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}
.hero--dark.hero--cinematic::before,
.hero--dark.hero--cinematic::after { display: none; }   /* Basis-Radial + Punktraster aus */

.hero--cinematic .hero__stage {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: var(--grad-dark);
}
.hero--cinematic .hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  /* Foto klar sichtbar; Lesbarkeit der Typo sichert der Verlauf links unten */
  opacity: .92;
}
.hero--cinematic .hero__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,9,18,.28) 0%, rgba(6,9,18,.06) 44%, rgba(6,9,18,.46) 100%),
    linear-gradient(90deg, rgba(6,9,18,.44) 0%, rgba(6,9,18,.08) 58%, rgba(6,9,18,0) 100%),
    radial-gradient(130% 90% at 18% 28%, rgba(46,59,166,.07), transparent 62%);
}
.hero--cinematic .hero__grade::after {         /* dezenter Marken-Farbstich */
  content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light;
  background: linear-gradient(120deg, var(--blue) 0%, transparent 46%, var(--red) 100%);
  opacity: .18;
}

.hero--cinematic .container {
  position: relative; z-index: 1; display: block;
  min-height: 0;
  padding-block: clamp(2.75rem, 1.75rem + 4vw, 4.75rem);
}
.hero--cinematic .hero__copy { max-width: 860px; }
.hero--dark.hero--cinematic h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.1rem); line-height: 1.04; letter-spacing: -.03em;
  text-shadow: 0 2px 34px rgba(0,0,0,.5);
}
.hero--cinematic .hero__copy > p { max-width: 58ch; }
.hero--cinematic .hero__actions { margin-top: 1.75rem; }
.hero--cinematic .hero__mini { margin-top: 1.5rem; padding-top: 1.15rem; }
.hero--cinematic .hero__copy > p { color: #d6dcef; text-shadow: 0 1px 18px rgba(0,0,0,.45); }
.hero--cinematic .eyebrow { color: #b7c3ff; }

/* Scroll-Hinweis */
.hero--cinematic .hero__scroll {
  position: absolute; left: 50%; bottom: clamp(.7rem, .3rem + 1vw, 1.3rem); translate: -50% 0; z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #aeb8d6;
}
.hero--cinematic .hero__scroll svg { width: 20px; height: 20px; }
.hero--cinematic .hero__scroll:hover { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .hero--cinematic .hero__bg { animation: heroZoom 26s ease-in-out infinite alternate; transform-origin: 58% 45%; }
  @keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.16); } }
  .hero--cinematic .hero__scroll svg { animation: scrollNudge 1.9s ease-in-out infinite; }
  @keyframes scrollNudge {
    0%, 100% { transform: translateY(0); opacity: .55; }
    50% { transform: translateY(5px); opacity: 1; }
  }
}
@media (max-width: 700px) {
  .hero--cinematic { min-height: 92svh; }
  .hero--cinematic .hero__scroll { display: none; }
}

/* ----- Bereich „Unsere Kollektion" (Bento-Kacheln aus dem Entwurf) -- */
.section--kollektion { position: relative; overflow: hidden; }
.kollektion__head { position: relative; max-width: 760px; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.kollektion__head .eyebrow,
.kollektion__head h2,
.kollektion__head > p { position: relative; z-index: 1; }
.kollektion__head h2 { font-size: clamp(1.9rem, 1.15rem + 3vw, 3.1rem); line-height: 1.05; letter-spacing: -.02em; }
.kollektion__head > p { color: var(--muted); font-size: 1.08rem; max-width: 52ch; }
.kollektion__ghost {
  position: absolute; right: -1%; top: -.35em; z-index: 0;
  font-size: clamp(4rem, 1rem + 12vw, 11rem); font-weight: 800; letter-spacing: -.04em; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px rgba(159,176,255,.13);
  white-space: nowrap; user-select: none; pointer-events: none;
}
.kollektion__id {
  position: absolute; right: 0; top: 52%; z-index: 1;
  font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.55; color: #9aa4c4; text-align: right; pointer-events: none;
}
.kollektion__id::after {
  content: ""; display: block; margin: .55rem 0 0 auto; width: 62px; height: 3px;
  border-radius: 3px; background: var(--grad-brand);
}

.kollektion-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr 1fr;
  gap: clamp(.7rem, .35rem + 1vw, 1.1rem);
}
.kat-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #0e1322;
}
.kat-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s var(--ease);
}
.kat-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: box-shadow .25s var(--ease);
}
.kat-card:hover img { transform: scale(1.045); }
.kat-card:hover::after { box-shadow: inset 0 0 0 2px rgba(159,176,255,.45); }
.kat-card:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }

/* Bento wie im Entwurf: 01 hoch links; 02/03 oben; 04/05/06 in einer Unterreihe */
.kat-card--01 { grid-column: 1; grid-row: 1 / span 2; }
.kat-card--02 { grid-column: 2; grid-row: 1; aspect-ratio: 460 / 268; }
.kat-card--03 { grid-column: 3; grid-row: 1; aspect-ratio: 460 / 268; }
.kollektion-grid__row2 {
  grid-column: 2 / 4; grid-row: 2;
  display: grid; grid-template-columns: 282fr 292fr 344fr;
  gap: clamp(.7rem, .35rem + 1vw, 1.1rem);
}
.kat-card--04 { aspect-ratio: 282 / 282; }
.kat-card--05 { aspect-ratio: 292 / 282; }
.kat-card--06 { aspect-ratio: 344 / 282; }
.kat-card img { object-position: center; }
/* 01 ist etwas schmaler als das Bild – nur rechts beschneiden, damit der Text links komplett bleibt */
.kat-card--01 img { object-position: left center; }

@media (max-width: 900px) {
  .kollektion-grid { grid-template-columns: 1fr 1fr; }
  .kat-card--01 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .kat-card--02, .kat-card--03 { grid-column: auto; grid-row: auto; }
  .kollektion-grid__row2 { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
  .kollektion-grid { grid-template-columns: 1fr; }
  .kat-card--02, .kat-card--03 { aspect-ratio: 16 / 10; }
  .kollektion-grid__row2 { grid-template-columns: 1fr; }
  .kat-card--04, .kat-card--05, .kat-card--06 { aspect-ratio: 16 / 10; }
}

/* USP-Leiste + Signatur unter dem Raster */
.kollektion-usps {
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.6rem; flex-wrap: wrap;
  list-style: none; padding-inline: 0;
}
.kollektion-usps li {
  position: relative; display: flex; align-items: center; gap: .55rem;
  font-size: .86rem; font-weight: 600; color: var(--ink);
}
.kollektion-usps li svg { width: 20px; height: 20px; stroke: #9fb0ff; flex-shrink: 0; }
.kollektion-usps li:not(:first-child):not(.kollektion-usps__sig)::before {
  content: ""; position: absolute; left: -.85rem; top: 50%; translate: 0 -50%;
  width: 1px; height: 20px; background: var(--line);
}
.kollektion-usps__sig {
  margin-left: auto;
  font-family: "Caveat", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem); font-weight: 700; line-height: 1;
  color: #fff; position: relative; padding-bottom: .22rem; white-space: nowrap;
}
.kollektion-usps__sig::after {
  content: ""; position: absolute; left: 16%; right: 0; bottom: 0;
  height: 3px; border-radius: 3px; background: var(--grad-brand);
}
@media (max-width: 900px) { .kollektion__ghost, .kollektion__id { display: none; } }
@media (max-width: 680px) {
  .kollektion-usps { justify-content: flex-start; }
  .kollektion-usps li:not(:first-child):not(.kollektion-usps__sig)::before { display: none; }
  .kollektion-usps__sig { margin-left: 0; }
}

/* ===== Bereich „Alles rund um Textil" – Prozess-Story ===================
   Dunkles Navy, grosse Typo, horizontale Prozess-Navigation + Bild-Stage.
   Kein 6-Karten-Grid mehr. JS-Modul: „Prozess-Story" in main.js.        */
.leistung {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #050B16 0%, #071426 46%, #0A1830 100%);
  color: #eef1f8;
}
.leistung__bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 40% at 10% 6%, rgba(37,99,255,.11), transparent 70%),
    radial-gradient(42% 46% at 94% 26%, rgba(255,46,122,.07), transparent 72%),
    radial-gradient(52% 42% at 62% 104%, rgba(124,58,237,.09), transparent 72%);
}
.leistung__ghost {
  position: absolute; left: 50%; top: 44%; translate: -50% -50%; z-index: -1;
  font-size: clamp(4rem, 1rem + 15vw, 17rem); font-weight: 800; letter-spacing: -.045em;
  line-height: .9; white-space: nowrap; color: #fff; opacity: .04;
  pointer-events: none; user-select: none;
}
.leistung > .container { position: relative; z-index: 1; }

/* --- 1. Intro --- */
.leistung__intro { max-width: 900px; margin-bottom: clamp(2.25rem, 1.25rem + 4vw, 4rem); }
.leistung__intro .eyebrow { color: #9fb4ff; letter-spacing: .12em; }
.leistung__headline {
  color: #fff; font-weight: 800;
  font-size: clamp(2rem, 1rem + 4.6vw, 4rem);
  line-height: 1.0; letter-spacing: -.03em; text-wrap: balance;
  margin: 0 0 1.35rem;
}
.leistung .grad-text {
  background-image: linear-gradient(100deg, #2563FF 0%, #7C3AED 52%, #FF2E7A 100%);
}
.leistung__lead {
  color: #fff; font-weight: 600;
  font-size: clamp(1.12rem, 1rem + .7vw, 1.5rem);
  max-width: 32ch; margin: 0 0 .85rem;
}
.leistung__sub {
  color: #a9b2ca; max-width: 62ch;
  font-size: clamp(.98rem, .95rem + .2vw, 1.08rem); margin: 0;
}

/* --- 2. Prozess-Navigation --- */
.proc { position: relative; margin-bottom: clamp(1.25rem, .75rem + 2vw, 2.25rem); }
.proc__track {
  position: absolute; left: 0; right: 0; top: 18px; height: 1px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.proc__fill {
  display: block; height: 100%; width: 3%;
  background: linear-gradient(90deg, #2563FF, #7C3AED, #FF2E7A);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.proc__list {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem;
  counter-reset: none;
}
.proc__step {
  position: relative; display: flex; flex-direction: column; gap: .45rem;
  align-items: flex-start; text-align: left;
  background: none; border: 0; padding: 32px 0 0; color: inherit;
  transition: opacity .3s var(--ease);
}
.proc__step::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #0A1830; border: 1px solid rgba(255,255,255,.28);
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.proc__step.is-active::before {
  background: linear-gradient(135deg, #2563FF, #FF2E7A);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .16), 0 0 14px rgba(124, 58, 237, .5);
}
.proc__num {
  font-size: .95rem; font-weight: 800; letter-spacing: .02em;
  color: rgba(255,255,255,.4); transition: color .3s var(--ease);
}
.proc__label {
  font-size: .8rem; font-weight: 600; line-height: 1.25;
  color: rgba(255,255,255,.32); transition: color .3s var(--ease);
}
.proc__step:hover .proc__num,
.proc__step:hover .proc__label { color: rgba(255,255,255,.72); }
.proc__step.is-active .proc__num,
.proc__step.is-active .proc__label { color: #fff; }
.proc__step:focus-visible { outline: 2px solid #4f5fe6; outline-offset: 4px; border-radius: 6px; }

/* --- 3. Bild-Stage --- */
.stage {
  position: relative; border-radius: 24px; overflow: hidden;
  aspect-ratio: 16 / 7; background: #060d1a;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255,255,255,.06);
}
.stage__media { position: absolute; inset: 0; }
.stage__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transform: scale(1.02);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.stage__img.is-active { opacity: 1; transform: scale(1); }
.stage__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,9,18,.78) 0%, rgba(4,9,18,.32) 40%, rgba(4,9,18,.02) 76%, rgba(4,9,18,.08) 100%),
    linear-gradient(0deg, rgba(4,9,18,.5) 0%, rgba(4,9,18,0) 46%);
}
.stage__panel {
  position: absolute;
  left: clamp(1.4rem, 1rem + 3vw, 3.5rem);
  right: clamp(1.4rem, 1rem + 3vw, 3.5rem);
  bottom: clamp(1.4rem, 1rem + 3vw, 3.25rem);
  max-width: 640px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.stage__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.stage__panel[hidden] { display: none; }
.stage__num {
  display: block; line-height: 1; margin-bottom: .5rem;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); font-weight: 800;
  color: transparent; background: linear-gradient(120deg, #2563FF, #FF2E7A);
  -webkit-background-clip: text; background-clip: text;
}
.stage__panel h3 {
  color: #fff; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(1.12rem, .9rem + 1.1vw, 1.65rem); margin: 0 0 .55rem;
}
.stage__panel p {
  color: #d6dbec; max-width: 46ch; margin: 0 0 1rem;
  font-size: clamp(.95rem, .9rem + .3vw, 1.08rem); line-height: 1.55;
}
.stage__link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .92rem; color: #fff;
}
.stage__link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.stage__link:hover svg { transform: translateX(4px); }

/* --- 5. Trust-Zeile --- */
.leistung__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,.1);
}
.leistung__trust ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 0;
  list-style: none; margin: 0; padding: 0;
}
.leistung__trust li {
  display: flex; align-items: baseline; gap: .4rem;
  font-size: .88rem; font-weight: 600; color: #b7bfd6;
}
.leistung__trust li b { color: #fff; font-weight: 800; }
.leistung__trust li + li { margin-left: 1.1rem; }
.leistung__trust li + li::before {
  content: "•"; margin-right: 1.1rem; color: rgba(255,255,255,.28); font-weight: 400;
}
.leistung__sig {
  margin-left: auto;
  font-family: "Caveat", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2rem); font-weight: 700; color: #fff;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .leistung__ghost { opacity: .03; }
  .proc__list { gap: .35rem; }
  .proc__label { font-size: .72rem; }
}
@media (max-width: 720px) {
  .proc { overflow: visible; }
  .proc__track { top: 16px; }
  .proc__list {
    display: flex; gap: 0; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(1.25rem, 5vw, 2.5rem));
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    scrollbar-width: none;
  }
  .proc__list::-webkit-scrollbar { display: none; }
  .proc__step {
    flex: 0 0 auto; min-width: 44vw; padding-top: 30px; padding-right: 1.25rem;
    scroll-snap-align: start;
  }
  .stage {
    aspect-ratio: auto; display: flex; flex-direction: column;
    border-radius: 18px;
  }
  .stage__media { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .stage__shade {
    background: linear-gradient(0deg, rgba(4,9,18,.55) 0%, rgba(4,9,18,0) 55%);
  }
  .stage__panel {
    position: static; left: auto; right: auto; bottom: auto; max-width: none;
    padding: 1.4rem 1.25rem 1.6rem;
    opacity: 1; transform: none;
  }
  .stage__panel:not(.is-active) { display: none; }
  .leistung__trust { gap: .5rem 1rem; }
  .leistung__sig { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__img { transition: opacity .01s linear; transform: none; }
  .stage__img.is-active { transform: none; }
  .stage__panel { transition: opacity .01s linear; transform: none; }
  .proc__fill { transition: none; }
}

/* ===== „Wofür wir stehen" – Grundsätze (Foto-Bühne + Glass-Cards) =======
   Über-uns-Seite. Ersetzt das alte 3-Karten-Grid.                        */
.section.values {
  position: relative; isolation: isolate; overflow: hidden;
  background: #050e1d; color: #eef1f8;
  padding-block: clamp(4.5rem, 3rem + 7vw, 9.25rem);   /* ~120–150px Desktop */
}
.values > .container { position: relative; z-index: 2; max-width: 1360px; }
.values__bg {
  position: absolute; inset: 0; z-index: 0;
  /* Motiv siehe HTML-Kommentar; Fallback = Sektionsfarbe, falls Datei fehlt */
  background-image: url("/assets/img/home/naeherei-hand.jpg");
  background-size: cover; background-position: right center; background-repeat: no-repeat;
}
.values__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(3,10,22,.66) 0%,
      rgba(5,14,29,.42) 40%,
      rgba(5,14,29,.14) 75%,
      rgba(5,14,29,.04) 100%),
    linear-gradient(180deg, rgba(5,14,29,.16) 0%, rgba(5,14,29,0) 32%, rgba(5,14,29,.26) 100%);
}
.values__ghost {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%; z-index: 1;
  font-size: clamp(4rem, 1rem + 16vw, 18rem); font-weight: 800; letter-spacing: -.05em;
  line-height: .8; white-space: nowrap; color: #fff; opacity: .04;
  pointer-events: none; user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .values__ghost { animation: valuesDrift 34s ease-in-out infinite alternate; }
}
@keyframes valuesDrift { from { translate: -53% -50%; } to { translate: -47% -50%; } }

/* Headline */
.values__head { max-width: 760px; margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.values__head .eyebrow { color: #9fb4ff; letter-spacing: .12em; }
.values__headline {
  color: #fff; font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 4vw, 3.6rem);
  line-height: 1.03; letter-spacing: -.03em; text-wrap: balance;
  margin: 0 0 1.25rem;
}
.values .grad-text {
  background-image: linear-gradient(100deg, #2563FF 0%, #7C3AED 52%, #FF2E7A 100%);
}
.values__lead {
  color: #c4ccdf; max-width: 62ch; margin: 0;
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem); line-height: 1.6;
}

/* Cards */
.values__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, .5rem + 1.5vw, 1.75rem);
}
.value-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(21,29,50,.5), rgba(10,16,32,.58));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 44px rgba(120,140,255,.05);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.value-card__n {
  font-size: clamp(2.2rem, 1.5rem + 2vw, 3.1rem); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: rgba(255,255,255,.14); margin-bottom: 1rem;
}
.value-card__ico {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.value-card__ico svg { width: 22px; height: 22px; stroke: #c7d0ff; fill: none; stroke-width: 2; }
.value-card h3 { color: #fff; font-size: 1.2rem; margin: 0 0 .6rem; letter-spacing: -.01em; }
.value-card > p { color: #b7c0d8; font-size: .98rem; line-height: 1.6; margin: 0; }
.value-card p.value-card__trust {
  margin: 1.1rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; line-height: 1.5;
  color: #9fb0ff;
}
.value-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #2563FF, #7C3AED, #FF2E7A);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
@media (hover: hover) {
  .value-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -32px rgba(0,0,0,.65);
  }
  .value-card:hover::after { transform: scaleX(1); }
  .value-card:hover .value-card__ico {
    background: rgba(124,58,237,.16);
    box-shadow: 0 0 18px rgba(124,58,237,.32);
  }
}

/* Trust-Strip */
.values__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem;
  margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
}
.values__trust ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 0;
  list-style: none; margin: 0; padding: 0;
}
.values__trust li {
  position: relative; display: flex; align-items: center; gap: .55rem;
  padding: 0 1.35rem; font-size: .86rem; font-weight: 600; color: #c2c9de;
}
.values__trust li:first-child { padding-left: 0; }
.values__trust li:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  width: 1px; height: 20px; background: rgba(255,255,255,.16);
}
.values__trust li svg { width: 19px; height: 19px; stroke: #9fb0ff; fill: none; stroke-width: 1.8; flex-shrink: 0; }
.values__sig {
  margin-left: auto; position: relative; padding-bottom: .3rem; white-space: nowrap;
  font-family: "Caveat", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 700; color: #fff;
}
.values__sig::after {
  content: ""; position: absolute; left: 12%; right: 0; bottom: 0;
  height: 3px; border-radius: 3px; background: linear-gradient(90deg, #2563FF, #FF2E7A);
}

/* Tablet: 2 + 1 */
@media (max-width: 1000px) {
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .value-card:nth-child(3) { grid-column: 1 / -1; }
}
/* Mobile: untereinander, Trust 2-spaltig */
@media (max-width: 640px) {
  .values__grid { grid-template-columns: 1fr; }
  .value-card:nth-child(3) { grid-column: auto; }
  .values__ghost { opacity: .03; }
  .values__trust { gap: .75rem 0; }
  .values__trust ul { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; width: 100%; }
  .values__trust li { padding: 0; }
  .values__trust li:not(:last-child)::after { display: none; }
  .values__sig { margin: .5rem 0 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .value-card, .value-card::after, .value-card__ico { transition: none; }
  .value-card:hover { transform: none; }
}

/* ===== Branchen – „Für wen wir produzieren" (asymmetrisches Bento) ==== */
.section.branchen-flow {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #050B16 0%, #071426 48%, #0A1830 100%);
  color: #eef1f8;
  padding-block: clamp(4rem, 2.5rem + 7vw, 8.5rem);
}
.branchen-flow__bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(44% 40% at 8% 4%, rgba(37,99,255,.10), transparent 70%),
    radial-gradient(40% 44% at 96% 24%, rgba(255,46,122,.06), transparent 72%),
    radial-gradient(50% 42% at 60% 104%, rgba(124,58,237,.08), transparent 72%);
}
.branchen-flow__ghost {
  position: absolute; left: 50%; top: 40%; translate: -50% -50%; z-index: -1;
  font-size: clamp(3.5rem, 1rem + 14vw, 16rem); font-weight: 800; letter-spacing: -.045em;
  line-height: .85; white-space: nowrap; color: #fff; opacity: .04;
  pointer-events: none; user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .branchen-flow__ghost { animation: valuesDrift 36s ease-in-out infinite alternate; }
}
.branchen-flow > .container { position: relative; z-index: 1; max-width: 1360px; }

.branchen-flow__head { max-width: 760px; margin-bottom: clamp(2.25rem, 1.25rem + 4vw, 4rem); }
.branchen-flow__head .eyebrow { color: #9fb4ff; letter-spacing: .12em; }
.branchen-flow__headline {
  color: #fff; font-weight: 800; letter-spacing: -.03em; text-wrap: balance;
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 3.4rem); line-height: 1.04;
  margin: 0 0 1.15rem;
}
.branchen-flow .grad-text {
  background-image: linear-gradient(100deg, #2563FF 0%, #7C3AED 52%, #FF2E7A 100%);
}
.branchen-flow__lead {
  color: #b7c0d8; max-width: 720px; margin: 0;
  font-size: clamp(1rem, .95rem + .35vw, 1.12rem); line-height: 1.6;
}

/* Bento-Raster */
.branchen-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, clamp(190px, 19vw, 268px)) clamp(120px, 12vw, 172px);
  gap: clamp(.75rem, .4rem + 1.1vw, 1.35rem);
}
.branchen-card--01 { grid-column: 1; grid-row: 1 / span 2; }
.branchen-card--02 { grid-column: 2; grid-row: 1; }
.branchen-card--03 { grid-column: 3; grid-row: 1; }
.branchen-card--04 { grid-column: 2; grid-row: 2; }
.branchen-card--05 { grid-column: 3; grid-row: 2; }
.branchen-card--06 { grid-column: 1 / span 2; grid-row: 3; }
.branchen-card--07 { grid-column: 3; grid-row: 3; }
.branchen-card--08 { grid-column: 1 / -1; grid-row: 4; }

.branchen-card {
  position: relative; display: block; overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0a1424;
  color: inherit;
}
.branchen-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .45s var(--ease);
}
.branchen-card__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(5,11,22,.80) 0%, rgba(5,11,22,.22) 46%, rgba(5,11,22,0) 74%, rgba(5,11,22,.06) 100%),
    linear-gradient(to right, rgba(5,11,22,.30) 0%, rgba(5,11,22,0) 58%);
  transition: opacity .4s var(--ease);
}
.branchen-card__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.1rem, .8rem + 1vw, 1.75rem);
  z-index: 2;
}
.branchen-card__n {
  display: block; font-size: 1rem; font-weight: 800; letter-spacing: .04em;
  color: transparent; background: linear-gradient(120deg, #6f97ff, #ff6ba6);
  -webkit-background-clip: text; background-clip: text;
  margin-bottom: .35rem;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.6));
}
.branchen-card h3 {
  color: #fff; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  margin: 0 0 .4rem; letter-spacing: -.01em;
}
.branchen-card p {
  color: #ccd3e6; font-size: .92rem; line-height: 1.5; margin: 0 0 .7rem;
  max-width: 42ch;
}
.branchen-card__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .85rem; color: #fff;
}
.branchen-card__cta svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.branchen-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, #2563FF, #7C3AED, #FF2E7A);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.branchen-card:focus-visible { outline: 2px solid #4f5fe6; outline-offset: 3px; }
/* die flache Band-Karte 08 zeigt am Desktop nur Nummer + Titel + CTA */
.branchen-card--08 p { display: none; }

@media (hover: hover) {
  .branchen-card:hover .branchen-card__img { transform: scale(1.04); }
  .branchen-card:hover .branchen-card__shade { opacity: .82; }
  .branchen-card:hover { transform: translateY(-5px); transition: transform .35s var(--ease); }
  .branchen-card:hover::after { transform: scaleX(1); }
  .branchen-card:hover .branchen-card__cta svg { transform: translateX(4px); }
}

/* Abschluss / CTA */
.branchen-flow__foot {
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
}
.branchen-flow__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: .95rem; color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position: relative; isolation: isolate;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.branchen-flow__btn svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.branchen-flow__btn::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  padding: 1px;
  background: linear-gradient(100deg, #2563FF, #7C3AED, #FF2E7A);
  -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 .3s var(--ease);
}
@media (hover: hover) {
  .branchen-flow__btn:hover { background: rgba(255,255,255,.09); border-color: transparent; }
  .branchen-flow__btn:hover::before { opacity: 1; }
  .branchen-flow__btn:hover svg { transform: translateX(4px); }
}
.branchen-flow__foot p { color: #8f9ab8; font-size: .88rem; margin: 0; max-width: 46ch; }

/* Tablet */
@media (max-width: 1024px) {
  .branchen-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: clamp(200px, 33vw, 300px);
  }
  .branchen-card--01, .branchen-card--02, .branchen-card--03,
  .branchen-card--04, .branchen-card--05, .branchen-card--06,
  .branchen-card--07, .branchen-card--08 { grid-column: auto; grid-row: auto; }
  .branchen-card--01 { grid-column: 1; grid-row: 1 / span 2; }
  .branchen-card--02 { grid-column: 2; grid-row: 1; }
  .branchen-card--03 { grid-column: 2; grid-row: 2; }
  .branchen-card--06 { grid-column: 1 / -1; }
  .branchen-card--08 { grid-column: 1 / -1; }
  .branchen-card--08 { min-height: clamp(150px, 24vw, 210px); }
  .branchen-card--08 p { display: block; }
}
/* Mobile */
@media (max-width: 620px) {
  .branchen-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .branchen-card { aspect-ratio: 4 / 3; }
  .branchen-card--01, .branchen-card--02, .branchen-card--03,
  .branchen-card--04, .branchen-card--05, .branchen-card--06,
  .branchen-card--07, .branchen-card--08 { grid-column: 1 / -1; grid-row: auto; }
  .branchen-card--08 { aspect-ratio: 16 / 10; }
  .branchen-card p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .branchen-card__img, .branchen-card__shade, .branchen-card,
  .branchen-card::after, .branchen-card__cta svg,
  .branchen-flow__btn, .branchen-flow__btn svg, .branchen-flow__btn::before { transition: none; }
  .branchen-card:hover, .branchen-card:hover .branchen-card__img { transform: none; }
}

/* ===== Qualität & Verantwortung – Material-Passport ================== */
.section.quali {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #050B16 0%, #071426 46%, #0A1830 100%);
  color: #eef1f8;
  padding-block: clamp(4rem, 2.5rem + 7vw, 8.5rem);
}
.quali__bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 38% at 6% 4%, rgba(37,99,255,.09), transparent 70%),
    radial-gradient(40% 44% at 98% 40%, rgba(124,58,237,.07), transparent 72%);
}
.quali__ghost {
  position: absolute; left: 50%; top: 43%; translate: -50% -50%; z-index: -1;
  font-size: clamp(3.5rem, 1rem + 14vw, 16rem); font-weight: 800; letter-spacing: -.045em;
  line-height: .85; white-space: nowrap; color: #fff; opacity: .035;
  pointer-events: none; user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .quali__ghost { animation: valuesDrift 38s ease-in-out infinite alternate; }
}
.quali > .container { position: relative; z-index: 1; max-width: 1360px; }

/* Hero in der Sektion: 55 % Text / 45 % Bild */
.quali__hero {
  display: grid; grid-template-columns: 55fr 45fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center;
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.quali__intro .eyebrow { color: #9fb4ff; letter-spacing: .12em; }
.quali__headline {
  color: #fff; font-weight: 800; letter-spacing: -.03em; text-wrap: balance;
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.3rem); line-height: 1.04;
  margin: 0 0 1.15rem;
}
.quali .grad-text {
  background-image: linear-gradient(100deg, #2563FF 0%, #7C3AED 52%, #FF2E7A 100%);
}
.quali__lead {
  color: #c4ccdf; max-width: 54ch; margin: 0 0 .7rem;
  font-size: clamp(1rem, .95rem + .35vw, 1.14rem); line-height: 1.6;
}
.quali__note { color: #8f9ab8; font-size: .9rem; line-height: 1.55; margin: 0; max-width: 52ch; }

.quali__media {
  position: relative; margin: 0;
  border-radius: 26px; overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 40px 80px -44px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06);
}
.quali__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quali__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(5,11,22,.22) 0%, rgba(5,11,22,.02) 45%, rgba(5,11,22,.12) 100%);
}
.quali__media-tag {
  position: absolute; left: 1.1rem; bottom: 1rem; z-index: 1;
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}

/* 2x2 Material-Cards */
.quali__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, .5rem + 1.5vw, 1.6rem);
}
.mat-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(260px, 22vw, 340px);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(19,27,47,.5), rgba(9,15,30,.58));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* sehr subtile Stoff-/Rasterstruktur */
.mat-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 72%);
          mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 72%);
  opacity: .7; transition: opacity .35s var(--ease);
}
.mat-card > * { position: relative; z-index: 1; }
.mat-card__n {
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: rgba(255,255,255,.16); margin-bottom: .9rem;
}
.mat-card__ico {
  width: 34px; height: 34px; margin-bottom: 1rem;
  display: grid; place-items: center;
}
.mat-card__ico svg { width: 22px; height: 22px; stroke: #9fb0ff; fill: none; stroke-width: 1.7; }
/* echtes, offizielles Zertifizierungslogo auf hellem Chip (dezent, ergänzend) */
.mat-card__logo {
  display: inline-flex; align-self: flex-start; align-items: center; justify-content: center;
  height: clamp(66px, 5vw, 82px); min-width: 150px;
  padding: 12px 20px; margin-bottom: 1.2rem;
  background: #fff; border-radius: 14px;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.06);
}
.mat-card__logo img {
  height: 100%; width: auto; max-width: 220px; object-fit: contain; display: block;
}
@media (max-width: 640px) {
  .mat-card__logo { height: 64px; min-width: 140px; }
}
.mat-card h3 {
  color: #fff; font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
  font-size: clamp(1.15rem, .95rem + 1vw, 1.6rem); margin: 0 0 .35rem;
  text-transform: uppercase;
}
.mat-card > p {
  color: #b7c0d8; font-size: .96rem; line-height: 1.6; margin: .5rem 0 0;
}
.mat-card p.mat-card__sub {
  color: #9fb0ff; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  line-height: 1.3; text-transform: uppercase; margin: -.1rem 0 .55rem;
}
.mat-card__meta {
  margin-top: 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #97a1bd;
}
.mat-card__cta {
  margin-top: auto; padding-top: 1.15rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .86rem; color: #fff;
}
.mat-card__cta svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.mat-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, #2563FF, #7C3AED, #FF2E7A);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.mat-card { transition: transform .35s var(--ease), border-color .35s var(--ease); }
@media (hover: hover) {
  .mat-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.26); }
  .mat-card:hover::before { opacity: 1; }
  .mat-card:hover::after { transform: scaleX(1); }
  .mat-card:hover .mat-card__cta svg { transform: translateX(4px); }
}

/* Card 04 – „Ein anderer Standard?" bewusst anders */
.mat-card--ask {
  background:
    linear-gradient(150deg, rgba(37,99,255,.16) 0%, rgba(124,58,237,.12) 55%, rgba(9,15,30,.5) 100%);
  border-color: rgba(159,176,255,.24);
}
.mat-card--ask::before { display: none; }
.mat-card--ask > p { color: #cbd3e8; }
.mat-card p.mat-card__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; line-height: 1.3;
  text-transform: uppercase; color: #b7c3ff; margin: 0 0 .8rem;
}
.mat-card--ask h3 { text-transform: none; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem); margin-bottom: .6rem; }
.mat-card__btn {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 999px;
  font-weight: 700; font-size: .9rem; color: #fff;
  background: linear-gradient(100deg, #2563FF, #7C3AED, #FF2E7A);
  box-shadow: 0 16px 34px -16px rgba(124,58,237,.6);
  transition: filter .3s var(--ease), transform .3s var(--ease);
}
.mat-card__btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
@media (hover: hover) {
  .mat-card__btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
  .mat-card__btn:hover svg { transform: translateX(4px); }
}

/* Trust-Zeile */
.quali__trust {
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
}
.quali__trust ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 0;
  list-style: none; margin: 0 0 .9rem; padding: 0;
}
.quali__trust li {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #b7c0d8; padding: 0 1.15rem; position: relative;
}
.quali__trust li:first-child { padding-left: 0; }
.quali__trust li:not(:last-child)::after {
  content: "•"; position: absolute; right: -.15rem; top: 50%; translate: 0 -50%;
  color: rgba(255,255,255,.28); font-weight: 400;
}
.quali__disclaimer { color: #7f8aa8; font-size: .82rem; line-height: 1.55; margin: 0; max-width: 66ch; }

/* Responsive */
@media (max-width: 900px) {
  .quali__hero { grid-template-columns: 1fr; }
  .quali__media { order: 2; aspect-ratio: 16 / 10; }
  .quali__ghost { opacity: .028; }
}
@media (max-width: 640px) {
  .quali__grid { grid-template-columns: 1fr; }
  .mat-card { min-height: 0; }
  .quali__trust li { padding: 0 .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mat-card, .mat-card::before, .mat-card::after, .mat-card__cta svg,
  .mat-card__btn, .mat-card__btn svg { transition: none; }
  .mat-card:hover, .mat-card__btn:hover { transform: none; }
}

/* ===== HERO – Leistungen (asymmetrisch: Text + KPIs + Bild-Stage) ===== */
.hero--services {
  isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #050B16 0%, #071426 48%, #0A1830 100%);
  color: #eef1f8;
  display: flex; align-items: center;
  min-height: 100svh;
  /* Bild/Fläche läuft randlos bis unter die transparente Kopfzeile */
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}
.hero--dark.hero--services::before,
.hero--dark.hero--services::after { display: none; }   /* Basis-Radial + Punktraster aus */
.hero--services .aurora, .hero--services .hero__word { display: none; }

.svc-hero__bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 46% at 4% 100%, rgba(255,46,122,.10), transparent 70%),
    radial-gradient(46% 42% at 100% 2%, rgba(37,99,255,.14), transparent 72%);
}
.svc-hero__ghost {
  position: absolute; right: -2%; bottom: 4%; z-index: -1;
  font-size: clamp(4rem, 1rem + 17vw, 19rem); font-weight: 800; letter-spacing: -.05em;
  line-height: .8; white-space: nowrap; color: #fff; opacity: .03;
  pointer-events: none; user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .svc-hero__ghost { animation: valuesDrift 40s ease-in-out infinite alternate; }
}

.hero--dark.hero--services .container { position: relative; z-index: 1; display: block; min-height: 0; padding-block: 0; }
.svc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas: "copy stage" "kpis stage";
  column-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  row-gap: clamp(1.25rem, .75rem + 1.5vw, 2rem);
  align-content: center; align-items: start;
  padding-block: clamp(1rem, .5rem + 1.5vw, 2.25rem);
}
.hero--services .grad-text {
  background-image: linear-gradient(100deg, #2563FF 0%, #7C3AED 52%, #FF2E7A 100%);
}
.svc-hero__copy { grid-area: copy; }
.svc-hero__kpis { grid-area: kpis; }
.svc-hero__stage { grid-area: stage; align-self: center; }

.hero--services .crumbs {
  font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: 1.1rem;
}
.hero--services .crumbs a:hover { color: #fff; }
.hero--services .eyebrow { color: #9fb4ff; letter-spacing: .12em; }
.hero--dark.hero--services h1 {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.3rem);
  line-height: 1.02; letter-spacing: -.03em; font-weight: 800;
  max-width: 720px; margin: .2rem 0 1.15rem;
}
.svc-hero__lead {
  color: #c9cfe4; max-width: 40ch; margin: 0 0 .7rem;
  font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); line-height: 1.6;
}
.svc-hero__note { color: #8f9ab8; font-size: .9rem; line-height: 1.55; margin: 0; }
.svc-hero__actions {
  display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem;
}
.hero--services .btn--primary { padding-block: .8rem; }
.hero--services .btn--onnavy { padding-block: .8rem; }

/* KPI-Reihe */
.svc-hero__kpis {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  margin-top: clamp(.75rem, .25rem + 1.5vw, 1.75rem);
  padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12);
}
.svc-hero__kpis > div {
  position: relative; padding: 0 clamp(.9rem, .4rem + 1.4vw, 1.75rem);
}
.svc-hero__kpis > div:first-child { padding-left: 0; }
.svc-hero__kpis > div + div::before {
  content: ""; position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 1px; background: rgba(255,255,255,.14);
}
.svc-hero__kpis b {
  display: block; line-height: 1; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.55rem); font-weight: 800; color: #fff;
}
.svc-hero__kpis span {
  display: block; margin-top: .4rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* Bild-Stage rechts */
.svc-hero__stage {
  position: relative; margin: 0;
  width: 100%; aspect-ratio: 4 / 5;
  max-height: min(70vh, 620px);
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 44px 100px -55px rgba(0,0,0,.85);
}
.svc-hero__stage img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.svc-hero__stage-grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,8,18,.04) 0%, rgba(2,8,18,.10) 45%, rgba(2,8,18,.62) 100%);
}
.svc-hero__stage::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  transition: box-shadow .6s var(--ease);
}
.svc-hero__badge {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.svc-hero__stage-trust {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; z-index: 1; margin: 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.9);
}
.svc-hero__stage-trust b { color: #9fb0ff; font-weight: 800; }

@media (hover: hover) {
  .svc-hero__stage:hover img { transform: scale(1.025); }
  .svc-hero__stage:hover::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
}

/* Einblend-Animation der Stage: sanft, leicht verkleinern auf 1.0 */
@media (prefers-reduced-motion: no-preference) {
  .svc-hero__stage.reveal {
    opacity: 0; transform: scale(1.03) translateY(20px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .svc-hero__stage.reveal.is-visible { opacity: 1; transform: none; }
}

/* Tablet */
@media (max-width: 1040px) {
  .svc-hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "stage" "kpis";
    row-gap: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  }
  .svc-hero__stage { aspect-ratio: 3 / 2; max-width: 640px; }
  .hero--dark.hero--services h1 { max-width: 18ch; }
  .svc-hero__lead { max-width: 56ch; }
}
/* Mobile */
@media (max-width: 620px) {
  .hero--services { min-height: 0; }
  .svc-hero__stage { aspect-ratio: 4 / 3; max-width: none; }
  .svc-hero__kpis { grid-template-columns: 1fr 1fr; gap: 1.1rem 0; justify-content: stretch; }
  .svc-hero__kpis > div { padding: 0 1rem; }
  .svc-hero__kpis > div:nth-child(odd) { padding-left: 0; }
  .svc-hero__kpis > div:nth-child(3)::before,
  .svc-hero__kpis > div:nth-child(odd)::before { display: none; }
  .svc-hero__stage-trust { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero__stage img { transition: none; }
  .svc-hero__stage:hover img { transform: none; }
  .svc-hero__stage.reveal { transform: none; }
}

/* ----- Kennzahlen-Band -------------------------------------------- */
.stats { background: var(--grad-blue-soft); color: #fff; position: relative; overflow: hidden; }
.stats::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 120% at 100% 0%, rgba(255,255,255,.18), transparent 60%);
}
.stats .container { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: clamp(2.5rem, 2rem + 3vw, 3.5rem); }
@media (max-width: 780px) { .stats .container { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; }
.stat b { display: block; font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat span { display: block; margin-top: .5rem; font-size: .92rem; color: rgba(255,255,255,.82); font-weight: 600; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.16); }
@media (max-width: 780px) { .stat:nth-child(3) { border-left: 0; } }

/* ----- Logo-Laufband (Marquee) ---------------------------------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: #fff; padding-block: 1.75rem; }
.marquee p {
  text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem;
}
.marquee__track { display: flex; gap: 3.5rem; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: scrollx 32s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes scrollx { to { transform: translateX(-50%); } }
.marquee__track span {
  font-weight: 800; font-size: 1.2rem; color: #aeb4c2;
  white-space: nowrap; transition: color .2s var(--ease);
}
.marquee__track span:hover { color: var(--navy); }

/* ----- Verfahren / Veredelung – Video-Galerie ------------------ */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .media-grid { grid-template-columns: 1fr; } }

.media-tile {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--navy); isolation: isolate;
  border: 1px solid var(--line);
}
.media-grid .media-tile { aspect-ratio: 1; }
.media-tile img, .media-tile video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease); filter: saturate(.85);
}
.media-tile:hover img, .media-tile:hover video { transform: scale(1.06); filter: saturate(1); }
.media-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,20,36,.15) 0%, rgba(15,20,36,.85) 100%);
}
.media-tile__label {
  position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: 1rem; color: #fff;
}
.media-tile__label b { display: block; font-size: 1.05rem; }
.media-tile__label span { font-size: .85rem; color: rgba(255,255,255,.78); }
.media-tile__play {
  position: absolute; z-index: 2; top: 1rem; left: 1rem;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  transition: background-color .2s var(--ease), transform .2s var(--spring);
}
.media-tile__play svg { width: 16px; height: 16px; color: #fff; margin-left: 2px; }
.media-tile:hover .media-tile__play { background: var(--red); transform: scale(1.08); border-color: transparent; }
.media-tile[data-yt] { cursor: pointer; }
.media-tile iframe {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0;
}
.media-tile.is-playing::before, .media-tile.is-playing .media-tile__play, .media-tile.is-playing .media-tile__label { opacity: 0; pointer-events: none; }
.media-tile__src { position: absolute; right: .85rem; top: .85rem; z-index: 2; font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.65); background: rgba(0,0,0,.35); border-radius: 999px; padding: .2rem .6rem; }
.media-tile.is-playing .media-tile__src { display: none; }

/* ----- Video-Lightbox ------------------------------------------ */
.video-lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(5,7,14,.92); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 5vh 4vw;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.video-lightbox.is-open { opacity: 1; visibility: visible; }
.video-lightbox__frame {
  position: relative; width: min(1100px, 100%); aspect-ratio: 16/9;
  border-radius: 16px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9);
  background: #000;
  transform: scale(.96); transition: transform .3s var(--ease);
}
.video-lightbox.is-open .video-lightbox__frame { transform: scale(1); }
.video-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-lightbox__close {
  position: absolute; top: -3rem; right: 0; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center;
  cursor: pointer; transition: background-color .2s var(--ease);
}
.video-lightbox__close:hover { background: rgba(255,255,255,.18); }
.video-lightbox__close svg { width: 18px; height: 18px; }

/* ----- Zertifizierungen / Siegel ------------------------------ */
.cert-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .cert-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cert-row { grid-template-columns: 1fr; } }
.cert {
  display: flex; align-items: center; gap: 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.25rem 1.4rem;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.cert:hover { transform: translateY(-4px); border-color: rgba(159,176,255,.4); }
.cert__ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; background: rgba(255,255,255,.06); color: #9fb0ff;
}
.cert__ico svg { width: 24px; height: 24px; }
/* Echtes Siegel-Logo statt Icon */
.cert__ico--logo { background: #fff; padding: .5rem; }
.cert__ico--logo img { width: 100%; height: 100%; object-fit: contain; }
.cert b { display: block; color: #fff; font-size: .98rem; }
.cert span { display: block; font-size: .84rem; color: var(--muted); margin-top: .15rem; }

/* ----- Karten mit Verlaufs-Rahmen beim Hover ------------------- */
.card { position: relative; overflow: hidden; }
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.card:hover::after { transform: scaleX(1); }
.card:hover .card__icon { background: var(--grad-brand); color: #fff; }
.card__icon { transition: background .3s var(--ease), color .3s var(--ease); }

/* ----- Split-Bild: Marken-Duoton, der beim Hover weicht ------- */
.split__media { position: relative; isolation: isolate; }
.split__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(46,59,166,.42), rgba(211,36,58,.18));
  mix-blend-mode: multiply; opacity: 1; transition: opacity .4s var(--ease);
}
.split__media:hover::after { opacity: 0; }
.split__media img { transition: transform .6s var(--ease); }
.split__media:hover img { transform: scale(1.05); }

/* großer transparenter Zähl-Wasserzeichen-Text */
.watermark { font-size: clamp(3.5rem, 2rem + 8vw, 7rem); font-weight: 800; letter-spacing: -.04em; line-height: .9;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .18; }

/* ----- Prozess-Schritte: verbindende Linie + Glow -------------- */
.step { position: relative; transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }
.step:hover { transform: translateY(-4px); background: rgba(255,255,255,.06); border-color: rgba(159,176,255,.5); }
.step::after {
  content: ""; position: absolute; top: 2.5rem; right: -0.75rem; width: 1.5rem; height: 2px;
  background: linear-gradient(90deg, rgba(159,176,255,.6), transparent);
}
.steps .step:last-child::after { display: none; }
@media (max-width: 900px) { .step::after { display: none; } }

/* ----- Abschnitts-Wellenkante ---------------------------------- */
.divider-wave { display: block; width: 100%; height: 60px; }
.divider-wave path { fill: currentColor; }

/* ----- CTA-Band: laufender Glanz ------------------------------ */
.cta-band { position: relative; overflow: hidden; background: var(--grad-blue-soft); }
.cta-band::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-18deg);
}
@media (prefers-reduced-motion: no-preference) {
  .cta-band::before { animation: sheen 6s ease-in-out infinite; }
}
@keyframes sheen { 0%,60% { left: -60%; } 100% { left: 130%; } }

/* ----- Produkt-Schaufenster: große Bildkacheln ---------------- */
.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .showcase { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .showcase { grid-template-columns: 1fr; } }

.show-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 3 / 4;
  background: var(--navy); isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.show-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.show-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.show-tile:hover img { transform: scale(1.07); }
.show-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,20,36,0) 30%, rgba(15,20,36,.35) 55%, rgba(15,20,36,.92) 100%);
}
.show-tile--brand { background: var(--grad-blue); }
.show-tile--brand::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(80% 60% at 20% 15%, rgba(255,255,255,.22), transparent 60%);
}
.show-tile__body { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.15rem; color: #fff; }
.show-tile__body h3 { color: #fff; font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.show-tile__body p { color: rgba(255,255,255,.82); font-size: .9rem; margin-top: .25rem; }
.show-tile__body .arrow {
  display: inline-flex; margin-top: .6rem; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.16); align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.3);
  transition: background-color .2s var(--ease), transform .2s var(--spring);
}
.show-tile__body .arrow svg { width: 14px; height: 14px; color: #fff; }
.show-tile:hover .arrow { background: var(--red); border-color: transparent; transform: translateX(4px); }
.show-tile__icon { width: 54px; height: 54px; color: #fff; opacity: .95; margin-bottom: auto; }
/* Kacheln ohne Foto: kompakter, mit Icon oben und Verlauf-Hintergrund */
.showcase .show-tile:not(:has(img)) {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(90% 80% at 15% 10%, rgba(79,95,230,.28), transparent 60%),
    linear-gradient(160deg, #182047 0%, #10152c 100%);
}
.showcase .show-tile:not(:has(img)) .show-tile__icon {
  position: absolute; left: 1.25rem; top: 1.15rem;
}
.showcase .show-tile:not(:has(img))::before { opacity: .4; }
.show-tile--brand .show-tile__body { top: 1.25rem; display: flex; flex-direction: column; }

/* ----- Referenzen: große Logo-Wand --------------------------- */
.logo-wall {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
}
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }
.logo-wall__cell {
  display: grid; place-items: center;
  aspect-ratio: 5 / 3;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.logo-wall__cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
/* Echte Logos: <img> hier einsetzen, wird automatisch entfärbt und bei Hover farbig */
.logo-wall__cell img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s var(--ease), opacity .2s var(--ease); }
.logo-wall__cell:hover img { filter: none; opacity: 1; }
/* Platzhalter als Text, bis echte Logo-Dateien vorliegen */
.logo-wall__cell b { font-size: 1.35rem; font-weight: 800; color: #9aa1b0; letter-spacing: -.01em; text-align: center; transition: color .2s var(--ease); }
.logo-wall__cell:hover b { color: var(--navy); }

/* ----- Parallax-Helfer (per JS gesteuert) -------------------- */
[data-parallax] { will-change: transform; }

/* ----- Kompakter Seitenkopf für Unterseiten ----------------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-dark); color: #d9deea;
  padding-block: clamp(3.5rem, 2rem + 7vw, 6rem);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 60% at 88% 0%, rgba(79,95,230,.35), transparent 60%),
              radial-gradient(40% 60% at 0% 100%, rgba(211,36,58,.22), transparent 60%);
}
/* Großer, transparenter Marken-Schriftzug im Hintergrund jeder Unterseite */
.page-hero::before {
  content: "BY WORKWEAR";
  position: absolute; right: -1vw; bottom: -2.5vw; z-index: -1; pointer-events: none;
  font-size: clamp(4rem, 2rem + 12vw, 15rem); font-weight: 800; letter-spacing: -.04em;
  line-height: .8; color: transparent; white-space: nowrap; user-select: none;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.055);
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero::before { animation: wordslide 44s linear infinite alternate; }
}

/* Dezenter Marken-Schriftzug als wiederkehrendes Wasserzeichen in allen Sektionen */
.section { position: relative; overflow: hidden; }
.section > .container { position: relative; z-index: 1; }
.section:not(.section--navy)::before {
  content: "BY WORKWEAR"; position: absolute; left: -4%; top: 50%;
  transform: translateY(-50%) rotate(-3deg);
  font-size: clamp(3rem, 1rem + 13vw, 13rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.035);
  white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
}
.section:nth-of-type(even):not(.section--navy)::before {
  left: auto; right: -4%; transform: translateY(-50%) rotate(3deg);
}
.section--soft::before { -webkit-text-stroke-color: rgba(255,255,255,.05); }
.page-hero .eyebrow { color: #9fb0ff; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero p { color: #b9c0d6; font-size: 1.15rem; max-width: 60ch; margin-top: 1rem; }
.page-hero .crumbs { font-size: .85rem; color: #8a93ad; margin-bottom: 1.25rem; }
.page-hero .crumbs a:hover { color: #fff; }

/* ----- Lesbarer Textblock (Impressum, Datenschutz) --------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.4rem; margin-top: 2.5rem; }
.prose h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.prose p, .prose li { color: var(--ink); }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0 1rem 1.25rem; display: grid; gap: .4rem; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--navy); }
.prose .muted { color: var(--muted); font-size: .95rem; }

/* ----- Kontakt-Layout --------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-aside .office { margin-bottom: 1rem; }
.contact-aside .office + .office { margin-top: 0; }
.map-embed {
  border: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius);
  filter: grayscale(1) contrast(1.05); box-shadow: var(--shadow-sm);
}

/* ----- Partner-Schieber: ein Logo nach dem anderen, groß, ---------------
   wischt wie der Hero von rechts nach links --------------------------- */
.partner-slider {
  position: relative; width: 100%; overflow: hidden; isolation: isolate;
  height: clamp(280px, 34vw, 460px);
  background: radial-gradient(90% 140% at 85% 0%, rgba(79,95,230,.22), transparent 55%),
              radial-gradient(70% 120% at 10% 100%, rgba(211,36,58,.14), transparent 55%),
              linear-gradient(160deg, #141a2e 0%, #0a0d18 100%);
  border-radius: 26px; border: 1px solid var(--line);
  box-shadow: 0 40px 90px -36px rgba(0,0,0,.85);
}
.partner-slider::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.04) 0 1px, transparent 1px 6.66%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 12.5%);
  -webkit-mask-image: radial-gradient(80% 90% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(80% 90% at 50% 50%, #000 40%, transparent 100%);
}
.partner-slide {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  transform: translateX(100%); will-change: transform;
}
.partner-slide:first-child { transform: translateX(0%); }
.partner-slide__card {
  background: #fdfdfd; border-radius: 22px;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(3rem, 6vw, 5.5rem);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 34px 70px -26px rgba(0,0,0,.65);
  max-width: min(84%, 640px);
}
.partner-slide img { max-width: 100%; max-height: clamp(90px, 14vw, 160px); width: auto; height: auto; object-fit: contain; }
.partner-slide b {
  font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); font-weight: 800; color: var(--navy); text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .partner-slide { animation: partnerSlide var(--partner-dur, 50s) ease-in-out infinite; }
}
@keyframes partnerSlide {
  0%   { transform: translateX(100%); }
  2%   { transform: translateX(0%); }
  10%  { transform: translateX(0%); }
  12%  { transform: translateX(-100%); }
  100% { transform: translateX(-100%); }
}

/* Mehrere Textilien als echter Schieber (rechts nach links) statt Überblendung,
   z.B. im Sortiment-Block der Leistungen-Seite. Nutzt dieselbe Zeit-Mathematik
   wie .partner-slider (main.js setzt --item-dur je nach Anzahl der Slides). */
.item-slider { position: absolute; inset: 0; overflow: hidden; }
.item-slide { position: absolute; inset: 0; transform: translateX(100%); will-change: transform; }
.item-slide:first-child { transform: translateX(0%); }
.item-slide img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .item-slide { animation: partnerSlide var(--item-dur, 21s) ease-in-out infinite; }
}
.partner-slider__dots {
  display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem;
}
.partner-slider__dots span {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18);
}

/* ----- Weltkarte mit Standort-Nadeln ---------------------- */
.section--map { overflow: hidden; }
.section--map > .container:first-child { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.section--map > .container:last-child { margin-top: 1.25rem; }
.geo-map {
  position: relative;
  width: 100%;
  height: clamp(520px, 82vh, 940px);
  overflow: hidden;
  background: #0a0d18; border-block: 1px solid var(--line);
  box-shadow: inset 0 0 160px rgba(0,0,0,.7);
  --zx: 50%; --zy: 50%; --zoom: 1;
  cursor: default;
}
.geo-map__scene {
  position: absolute; inset: 0;
  transform: scale(var(--zoom));
  transform-origin: var(--zx) var(--zy);
  transition: transform 1.15s cubic-bezier(.22, 1, .36, 1);
}
/* Feines Karten-Gitter (Längen-/Breitengrade) hinter den Kontinenten */
.geo-map__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(to right, rgba(120,140,220,.06) 0 1px, transparent 1px 5.55%),
    repeating-linear-gradient(to bottom, rgba(120,140,220,.06) 0 1px, transparent 1px 8.33%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 45%, #000 55%, transparent 100%);
          mask-image: radial-gradient(80% 80% at 50% 45%, #000 55%, transparent 100%);
}
.geo-map__world {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.geo-map__world svg { display: block; width: 100%; height: 100%; overflow: visible; }
.geo-map__world svg .pulse-dot {
  fill: #fff; filter: drop-shadow(0 0 6px rgba(120,150,255,.95));
}
.geo-map__world svg path {
  fill: #2c3766; stroke: #0a0d18; stroke-width: .4;
  transition: fill .4s var(--ease);
}
.geo-map__world svg path.is-home { fill: #3c4a94; }
.geo-map.is-zoomed .geo-map__world svg path { fill: #38468a; }
.geo-map.is-zoomed .geo-map__world svg path.is-home { fill: #5a68d8; }
.geo-map__world svg path.arc {
  fill: none; stroke: url(#arcgrad); stroke-width: 1.6;
  stroke-linecap: round; stroke-dasharray: 5 7; transition: none;
}
@media (prefers-reduced-motion: no-preference) {
  .geo-map__world svg path.arc { animation: dashmove 2.4s linear infinite; }
}
.geo-map::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(75% 75% at 50% 45%, transparent 45%, rgba(8,11,20,.55) 100%);
}
/* Info-Karte, die beim Klick auf eine Nadel einfliegt */
.geo-card {
  position: absolute; left: clamp(1rem, 4vw, 3rem); top: 50%; z-index: 6;
  width: min(320px, 78vw); transform: translateY(-50%) translateX(-14px);
  background: rgba(10,13,26,.82); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.8);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.geo-map.is-zoomed .geo-card:not([hidden]) { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.geo-card__role {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #9fb0ff; border: 1px solid rgba(159,176,255,.4);
  border-radius: 999px; padding: .25rem .65rem; margin-bottom: .9rem;
}
.geo-card__name { display: block; font-size: 1.4rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.geo-card__city { display: block; margin-top: .35rem; color: #cbd2e6; font-weight: 600; }
.geo-card__addr { display: block; margin-top: .5rem; color: var(--muted); font-size: .92rem; }
.geo-card__mail { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-weight: 700; color: #9fb0ff; font-size: .92rem; }
.geo-card__mail::before { content: "✉"; }

.geo-map__hint {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 4;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--muted);
  background: rgba(10,13,26,.7); border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .8rem; transition: opacity .3s var(--ease);
}
.geo-map.is-zoomed .geo-map__hint { opacity: 0; }
.geo-map__arcs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.geo-map__arcs path {
  fill: none; stroke: url(#arcgrad); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 6 8;
}
@media (prefers-reduced-motion: no-preference) {
  .geo-map__arcs path { animation: dashmove 2.4s linear infinite; }
}
@keyframes dashmove { to { stroke-dashoffset: -28; } }

.pin {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
/* Nadeln beim Zoom optisch klein halten (Gegen-Skalierung) */
.geo-map.is-zoomed .pin i { transform: scale(calc(1 / var(--zoom))); }
.geo-map.is-zoomed .pin::before { animation: none; opacity: 0; }
.geo-map.is-zoomed .pin b { transform: translate(-50%, -100%) scale(calc(1 / var(--zoom))); transform-origin: bottom center; }
.geo-map .pin b { transition: transform .3s var(--ease); }
.geo-map .pin i { transition: transform .3s var(--ease); }
.geo-map.is-zoomed .pin:not(.is-focus) { opacity: .25; transition: opacity .4s var(--ease); }
.pin i {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--blue-bright); box-shadow: 0 0 0 4px rgba(79,95,230,.25), 0 0 18px rgba(79,95,230,.8);
}
/* feiner Lichtstrahl über der Nadel */
.pin i::after {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 26px;
  transform: translateX(-50%);
  background: linear-gradient(to top, var(--blue-bright), transparent);
  opacity: .7;
}
.pin--hq i::after { background: linear-gradient(to top, var(--red-bright), transparent); }
.pin::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--blue-bright);
}
@media (prefers-reduced-motion: no-preference) {
  .pin::before { animation: pinpulse 2.6s ease-out infinite; }
}
@keyframes pinpulse {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}
.pin--hq i { background: var(--red-bright); box-shadow: 0 0 0 5px rgba(255,59,82,.25), 0 0 22px rgba(255,59,82,.9); }
.pin--hq::before { border-color: var(--red-bright); }
.pin--hq { width: 18px; height: 18px; }

.pin b {
  position: absolute; left: 50%; top: -10px; transform: translate(-50%, -100%);
  background: rgba(10,13,26,.94); border: 1px solid var(--line); border-radius: 9px;
  padding: .35rem .7rem; font-size: .74rem; font-weight: 800; color: #fff;
  white-space: nowrap; letter-spacing: .01em; box-shadow: 0 8px 22px -8px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease), transform .3s var(--ease);
}
.pin:hover b, .pin:focus-visible b, .pin.is-focus b { opacity: 1; visibility: visible; }
.pin:hover, .pin:focus-visible { z-index: 6; }
.pin b span { display: block; font-weight: 600; font-size: .6rem; color: #9fb0ff; letter-spacing: .06em; text-transform: uppercase; margin-top: 1px; }
.pin--hq b { border-color: rgba(255,139,152,.5); }
.pin--hq b span { color: #ff8b98; }

/* Etiketten fächern aus, damit sie sich im Europa-Cluster nicht überlappen */
.pin--lbl-right b { left: auto; right: -12px; top: 50%; transform: translate(100%, -50%); }
.pin--lbl-up b    { top: -12px; transform: translate(-50%, -100%); }
.pin--lbl-down b  { top: auto; bottom: -12px; transform: translate(-50%, 100%); }
.geo-map.is-zoomed .pin--lbl-right b { transform: translate(100%, -50%) scale(calc(1 / var(--zoom))); transform-origin: left center; }
.geo-map.is-zoomed .pin--lbl-up b    { transform: translate(-50%, -100%) scale(calc(1 / var(--zoom))); transform-origin: bottom center; }
.geo-map.is-zoomed .pin--lbl-down b  { transform: translate(-50%, 100%) scale(calc(1 / var(--zoom))); transform-origin: top center; }
.pin.is-focus b { z-index: 5; }
.geo-map.is-zoomed .pin:not(.is-focus) b { opacity: 0; }

/* Legende unter der Karte */
.geo-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.1rem; font-size: .85rem; color: var(--muted); }
.geo-legend span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.geo-legend i { width: 10px; height: 10px; border-radius: 50%; }
.geo-legend .hq i { background: var(--red-bright); }
.geo-legend .br i { background: var(--blue-bright); }

/* ----- Team-Raster (Über uns) ----------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { text-align: center; }
.team-card .avatar {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius); object-fit: cover;
  background: var(--bg-tint); margin-bottom: .9rem;
}
.team-card .avatar-fallback {
  display: grid; place-items: center; font-size: 2rem; font-weight: 800;
  color: #fff; background: var(--grad-blue);
}
.team-card b { display: block; color: var(--navy); }
.team-card span { font-size: .9rem; color: var(--muted); }

/* ----- Leistungen: klebende Sprung-Navigation --------------- */
.svc-nav {
  position: sticky; top: 106px; z-index: 40;
  background: rgba(10,13,26,.85); backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
}
.svc-nav .container { display: flex; gap: .5rem; overflow-x: auto; padding-block: .85rem; scrollbar-width: none; }
.svc-nav .container::-webkit-scrollbar { display: none; }
.svc-nav a {
  flex-shrink: 0; padding: .5rem 1rem; border-radius: 999px;
  font-size: .88rem; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); white-space: nowrap;
  transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
.svc-nav a:hover, .svc-nav a.is-active { color: #fff; border-color: transparent; background: var(--blue); }
@media (max-width: 940px) { .svc-nav { top: 0; } }

/* ----- Nummerierte Leistungs-Blöcke ---------------------- */
.svc-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,1rem+4vw,4.5rem); align-items: center;
  padding-block: clamp(3rem,2rem+4vw,5rem); scroll-margin-top: 170px;
}
.svc-block + .svc-block { border-top: 1px solid var(--line); }
.svc-block:nth-child(even) .svc-block__media { order: 2; }
.svc-block__media {
  position: relative; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); aspect-ratio: 4/3;
}
.svc-block__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-block__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 55%, rgba(8,11,20,.5));
}
.svc-block__badge {
  display: inline-grid; place-items: center; width: 54px; height: 54px;
  border-radius: 15px; background: var(--grad-brand); color: #fff;
  font-weight: 800; font-size: 1.15rem; margin-bottom: 1.1rem;
  box-shadow: var(--glow-blue);
}
.svc-block__stat {
  position: absolute; z-index: 2; left: 1.1rem; bottom: 1.1rem;
  display: inline-flex; align-items: baseline; gap: .45rem;
  background: rgba(10,13,26,.72); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px;
  padding: .55rem 1rem; box-shadow: 0 14px 30px -12px rgba(0,0,0,.7);
}
.svc-block__stat b { font-size: 1.3rem; font-weight: 800; color: #9fb0ff; line-height: 1; }
.svc-block__stat span { font-size: .8rem; font-weight: 700; color: #eaecf5; }
.svc-block h2 { margin: 0 0 .8rem; }
.svc-block > div > p { font-size: 1.05rem; }

.feat-list { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .7rem; }
.feat-list li {
  display: flex; gap: 1rem; align-items: center; color: #fff;
  font-size: 1.05rem; font-weight: 600; line-height: 1.35;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.05rem 1.25rem;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.feat-list li:hover { transform: translateX(4px); border-color: transparent; background: rgba(255,255,255,.07); }
.feat-list li svg {
  flex-shrink: 0; width: 34px; height: 34px; padding: 7px; box-sizing: border-box;
  border-radius: 9px; background: var(--grad-brand); color: #fff;
}

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chip-row .lbl {
  width: 100%; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .15rem;
  background: none; border: 0; padding: 0;
}
.chip-row span {
  font-size: .82rem; font-weight: 700; color: #cbd2e6;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 999px; padding: .35rem .8rem;
}
@media (max-width: 820px) {
  .svc-block { grid-template-columns: 1fr; }
  .svc-block:nth-child(even) .svc-block__media { order: 0; }
}

/* =========================================================================
   17. DUNKLES, EDLES THEMA — Anpassung aller hellen Bausteine
   ========================================================================= */

/* Kopfzeile: dunkel & transparent, beim Scrollen leicht getönt */
.site-header {
  background: rgba(10,13,26,.72);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { background: rgba(10,13,26,.9); box-shadow: 0 1px 0 var(--line), 0 10px 34px -14px rgba(0,0,0,.6); }
.brand span { color: #fff; }
.nav a { color: #e7e9f5; }
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a[aria-current="page"] { color: #9fb0ff; }
.lang-switch { border-color: rgba(255,255,255,.20); }
.lang-switch a { color: rgba(255,255,255,.72); }
.lang-switch a:hover { background: rgba(255,255,255,.08); color: #fff; }
.lang-switch a[aria-current="true"] { background: #fff; color: #0c1020; }
@media (max-width: 940px) {
  .nav { background: #0c1020; border-bottom: 1px solid var(--line); }
  .nav a { border-bottom-color: var(--line); }
  .nav-toggle span { background: #fff; }
}

/* Eyebrow etwas heller, damit es auf Schwarz leuchtet */
.eyebrow { color: #8ea2ff; }

/* Karten dunkel & erhaben */
.card { background: var(--card); border-color: var(--line); }
.card:hover {
  box-shadow: 0 30px 70px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(79,95,230,.35);
  background: linear-gradient(180deg, rgba(79,95,230,.08), transparent 60%), var(--card);
}
.card__icon { background: rgba(255,255,255,.06); color: #9fb0ff; }
.card__link { color: #9fb0ff; }

/* Buttons */
.btn--ghost { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--ghost:hover { border-color: #9fb0ff; color: #fff; background: rgba(255,255,255,.08); }

/* Laufband */
.marquee { background: transparent; border-color: var(--line); }
.marquee__track span { color: #7f8aa6; }
.marquee__track span:hover { color: #fff; }

/* Formular */
.form-card { background: var(--card); border-color: var(--line); box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); }
.field label { color: #fff; }
.field input, .field textarea, .field select {
  background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.16);
}
.field input::placeholder, .field textarea::placeholder { color: #6b748e; }
.field select option { color: #111; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: #6b78e6; box-shadow: 0 0 0 3px rgba(79,95,230,.25);
}

/* Standort-Karten */
.office { background: var(--card); border-color: var(--line); }
.office a { color: #fff; }
.office a:hover { color: #9fb0ff; }

/* Team */
.team-card b { color: #fff; }

/* Fließtext-Seiten */
.prose strong { color: #fff; }
.prose a { color: #9fb0ff; }
.svc-block__n { color: #9fb0ff; }

/* Referenz-Logos: helle Kachel als Träger, Logo in Originalfarbe */
.logo-wall__cell { background: #fbfbfd; border-color: rgba(255,255,255,.08); }
.logo-wall__cell img { filter: none; opacity: 1; max-height: 60px; }
.logo-wall__cell:hover { box-shadow: 0 18px 50px -16px rgba(0,0,0,.7); }
.logo-wall__cell b { color: #6b7488; }
.logo-wall__cell:hover b { color: #0c1020; }

/* Fußzeile noch etwas tiefer */
.site-footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: #080b14;
}
/* Wiederkehrendes Marken-Band, wie im Header, als Bogen für die Seite */
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-tricolor); z-index: 2;
}
/* Sanft driftender Farbschein hinter dem Footer-Logo, macht es "lebendig" */
.footer-brand { position: relative; }
.footer-brand::before {
  content: ""; position: absolute; left: -40px; top: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(79,95,230,.35), transparent 70%);
  z-index: 0; pointer-events: none; filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  .footer-brand::before { animation: footerGlow 9s ease-in-out infinite alternate; }
}
@keyframes footerGlow {
  from { transform: translate(0,0) scale(1); opacity: .8; }
  to   { transform: translate(24px,16px) scale(1.15); opacity: 1; }
}
.footer-brand__logo { position: relative; z-index: 1; display: inline-block; overflow: hidden; }
.footer-brand__logo img { transition: transform .3s var(--ease); }
.footer-brand__logo:hover img { transform: scale(1.06); }
/* Lichtschimmer, der regelmäßig über das Logo läuft */
.footer-brand__logo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 150% 0;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  .footer-brand__logo::after { animation: logoSheen 6s ease-in-out infinite; }
}
@keyframes logoSheen {
  0%, 55% { background-position: 150% 0; }
  85%, 100% { background-position: -50% 0; }
}

/* "Nach oben"-Button in der Fußleiste */
.to-top {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 700; color: #aeb6c6;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: .5rem 1rem; background: rgba(255,255,255,.03);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.to-top:hover { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); transform: translateY(-3px); }
.to-top svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.to-top:hover svg { transform: translateY(-2px); }

/* Karte im Dark-Look */
.map-embed { filter: grayscale(1) invert(.92) contrast(.9) brightness(.95); }

/* Prozess-/Navy-Sektion als klar abgesetztes Panel */
.section--navy { background: linear-gradient(180deg, var(--bg) 0%, #141b36 18%, #141b36 82%, var(--bg) 100%); }

/* =========================================================================
   18. MEHR LEBEN — zusätzliche Effekte
   ========================================================================= */

/* Scroll-Fortschritt oben */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--grad-brand); z-index: 200;
  box-shadow: 0 0 12px rgba(79,95,230,.6);
  transition: width .1s linear;
}

/* Licht, das der Maus im Hero folgt */
.hero--dark .cursor-glow {
  position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,95,230,.22), transparent 70%);
  transform: translate(-50%, -50%); left: 50%; top: 40%;
  pointer-events: none; z-index: 0; transition: left .25s ease, top .25s ease;
  mix-blend-mode: screen;
}

/* Verlaufs-Text leicht schimmernd */
@media (prefers-reduced-motion: no-preference) {
  .grad-text {
    background-size: 220% 100%;
    animation: shimmer 7s ease-in-out infinite alternate;
  }
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Langsamer Ken-Burns-Zoom auf Bildkacheln */
@media (prefers-reduced-motion: no-preference) {
  .show-tile img { animation: kenburns 18s ease-in-out infinite alternate; }
  .show-tile:hover img { animation-play-state: paused; }
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Diaschau-Baustein: mehrere Fotos, langsame Überblendung + Ken-Burns (wirkt wie
   Video). Wiederverwendbar überall, wo ein Bild durch mehrere ersetzt werden
   soll (Leistungs-/Branchen-Kacheln, …). Anzahl Bilder beliebig; Timing passt
   sich an. Für ein echtes Video: die <img> durch <video autoplay muted loop
   playsinline> ersetzen. */
.hero__slides, .media-xfade { position: absolute; inset: 0; overflow: hidden; }
.media-xfade img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; will-change: opacity, transform;
}
@media (prefers-reduced-motion: no-preference) {
  .media-xfade img { animation: heroShow 28s infinite; }
  .media-xfade img:nth-child(1) { animation-delay: 0s; }
  .media-xfade img:nth-child(2) { animation-delay: 7s; }
  .media-xfade img:nth-child(3) { animation-delay: 14s; }
  .media-xfade img:nth-child(4) { animation-delay: 21s; }
  /* zwei Bilder: gleichmäßig auf die Laufzeit verteilt */
  .media-xfade.count-2 img { animation-duration: 14s; }
  .media-xfade.count-2 img:nth-child(1) { animation-delay: 0s; }
  .media-xfade.count-2 img:nth-child(2) { animation-delay: 7s; }
}
.media-xfade img:first-child { opacity: 1; }
@keyframes heroShow {
  0%   { opacity: 0; transform: scale(1.03); }
  3%   { opacity: 1; }
  25%  { opacity: 1; transform: scale(1.12); }
  28%  { opacity: 0; transform: scale(1.13); }
  100% { opacity: 0; transform: scale(1.03); }
}

/* Hero-Diaschau: echter Schieber, Bilder wechseln weich von rechts nach links */
.hero__slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: translateX(100%); will-change: transform;
}
.hero__slides img:first-child { transform: translateX(0%); }
@media (prefers-reduced-motion: no-preference) {
  .hero__slides img { animation: heroSlide 28s ease-in-out infinite; }
  .hero__slides img:nth-child(1) { animation-delay: 0s; }
  .hero__slides img:nth-child(2) { animation-delay: 7s; }
  .hero__slides img:nth-child(3) { animation-delay: 14s; }
  .hero__slides img:nth-child(4) { animation-delay: 21s; }
  .hero__slides.count-3 img {
    animation-name: heroSlide3; animation-duration: 21s;
  }
  .hero__slides.count-3 img:nth-child(1) { animation-delay: 0s; }
  .hero__slides.count-3 img:nth-child(2) { animation-delay: 7s; }
  .hero__slides.count-3 img:nth-child(3) { animation-delay: 14s; }
}
@keyframes heroSlide {
  0%   { transform: translateX(100%); }
  4%   { transform: translateX(0%); }
  25%  { transform: translateX(0%); }
  29%  { transform: translateX(-100%); }
  100% { transform: translateX(-100%); }
}
/* 3 Slides, lückenlos: nächstes Bild schiebt ein, sobald das aktuelle rausläuft.
   Zusätzlich langsamer Ken-Burns-Zoom, solange das Bild steht. */
@keyframes heroSlide3 {
  0%   { transform: translateX(100%) scale(1.06); }
  3%   { transform: translateX(0%)   scale(1.06); }
  33%  { transform: translateX(0%)   scale(1.14); }
  37%  { transform: translateX(-100%) scale(1.15); }
  100% { transform: translateX(-100%) scale(1.06); }
}

/* Animierte Linie unter zentrierten Überschriften */
.section-head.center h2 { position: relative; display: inline-block; }
.section-head.center h2::after {
  content: ""; position: absolute; left: 50%; bottom: -.6rem; height: 3px; width: 0;
  background: var(--grad-brand); border-radius: 3px; transform: translateX(-50%);
  transition: width .6s var(--ease);
}
.section-head.center.is-visible h2::after,
.section-head.center h2.is-visible::after { width: 72px; }

/* Gleicher Akzent für linksbündige Abschnitts-Überschriften */
.section-head:not(.center) h2 { position: relative; }
.section-head:not(.center) h2::after {
  content: ""; display: block; height: 3px; width: 0; margin-top: 1.15rem;
  background: var(--grad-brand); border-radius: 3px;
  transition: width .7s var(--ease);
}
.section-head:not(.center).is-visible h2::after { width: 60px; }

/* Rettungsdienst-/Fokus-Band mit großem Bild */
.feature-band {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 460px; display: grid; align-items: center;
}
.feature-band > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
/* Dunkler Verlauf fürs Lesen + weiche Kanten oben/unten, damit der Übergang
   zu den Nachbarsektionen fließend statt hart wirkt */
.feature-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8,11,20,.54) 0%, rgba(8,11,20,.24) 45%, rgba(8,11,20,.02) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%);
}
.feature-band .container { padding-block: clamp(3rem, 2rem + 5vw, 5rem); }
.feature-band h2 { color: #fff; max-width: 16ch; }
.feature-band p { color: #cdd3e4; max-width: 46ch; margin-top: 1rem; }
.feature-band .badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.feature-band .badges span {
  font-size: .82rem; font-weight: 700; color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .4rem .9rem;
  background: rgba(255,255,255,.06);
}

/* ======================================================================
   BOMBASTISCH: mehr Bewegung & Wow auf der Startseite (GPU-freundlich)
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Langsamer Ken-Burns-Zoom auf allen Fokus-Band-Bildern */
  .feature-band > img {
    animation: kbdrift 26s ease-in-out infinite alternate;
    transform-origin: 60% 40%;
  }
  @keyframes kbdrift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.18) translate3d(-1.5%, -1.5%, 0); }
  }

  /* Diagonaler Licht-Sweep über jedes Fokus-Band (über dem Bild, unter dem Text) */
  .feature-band::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.12) 49%, rgba(255,255,255,.03) 54%, transparent 62%);
    transform: translateX(-120%);
    animation: sheen 8s ease-in-out infinite;
  }
  .feature-band:nth-of-type(even)::before { animation-delay: 3s; }
  @keyframes sheen {
    0%, 60% { transform: translateX(-120%); }
    80%     { transform: translateX(120%); }
    100%    { transform: translateX(120%); }
  }

  /* Primär-Button: sanft pulsierender Aufmerksamkeits-Glow */
  .hero__actions .btn--primary,
  .cta-band .btn--light {
    animation: ctaGlow 3.2s ease-in-out infinite;
  }
  @keyframes ctaGlow {
    0%, 100% { box-shadow: 0 10px 24px -10px rgba(46,59,166,.7), 0 0 0 0 rgba(79,95,230,.45); }
    50%      { box-shadow: 0 14px 34px -10px rgba(46,59,166,.85), 0 0 0 10px rgba(79,95,230,0); }
  }

  /* Kennzahlen: leuchtende Ziffern */
  .stats .stat b, .hero__mini div b { text-shadow: 0 0 26px rgba(120,140,255,.55); }

  /* Karten heben sich beim Reinscrollen leicht gestaffelt */
  .grid .card.reveal { transition-duration: .8s; }
}

/* Größerer, wuchtigerer Hero-Titel */
.hero--dark.hero--stacked h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 4.6rem); line-height: 1.02; }

/* Große Branchen-Karten */
.industry-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 980px) { .industry-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .industry-list { grid-template-columns: 1fr; } }
.industry {
  position: relative; overflow: hidden; scroll-margin-top: 180px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.industry:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 60px -22px rgba(0,0,0,.75); }
.industry__media { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.industry__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.industry:hover .industry__media img { transform: scale(1.07); }
.industry__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,13,26,.88) 100%);
}
.industry__ico {
  position: absolute; z-index: 2; left: 1.25rem; bottom: -22px;
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--grad-brand); color: #fff; box-shadow: var(--glow-blue);
  display: grid; place-items: center;
}
.industry__ico svg { width: 26px; height: 26px; }
.industry__n {
  position: absolute; z-index: 2; right: 1rem; top: .6rem;
  font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em;
  color: rgba(255,255,255,.55); text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.industry__body { padding: 2rem 1.6rem 1.75rem; }
.industry h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.industry p { font-size: .98rem; }
.industry .tags { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.industry .tags span { font-size: .78rem; font-weight: 700; color: var(--muted); background: rgba(255,255,255,.05); border-radius: 999px; padding: .3rem .7rem; }

/* Branchen: große, abwechselnde Feature-Reihen statt kleinem 3er-Raster */
.ind-rows { display: grid; gap: clamp(3.5rem, 2rem + 8vw, 8.5rem); }
.ind-row {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 5vw, 5.5rem); align-items: center;
  scroll-margin-top: 170px;
}
.ind-row:nth-child(even) .ind-row__media { order: 2; }
.ind-row__media {
  position: relative; border-radius: 26px; overflow: hidden;
  aspect-ratio: 4 / 3; border: 1px solid var(--line);
  box-shadow: 0 44px 100px -44px rgba(0,0,0,.9);
}
.ind-row__media .media-xfade img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.ind-row:hover .ind-row__media .media-xfade img { transform: scale(1.05); }
.ind-row__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(205deg, transparent 55%, rgba(8,11,20,.55));
}
.ind-row__head { display: flex; align-items: flex-end; gap: 1.1rem; margin-bottom: 1.2rem; }
.ind-row__n {
  font-size: clamp(3.4rem, 2rem + 9vw, 7.5rem); font-weight: 800; line-height: .72;
  letter-spacing: -.05em; color: transparent;
  -webkit-text-stroke: 2px rgba(159,176,255,.4);
}
.ind-row__ico {
  flex-shrink: 0; width: 58px; height: 58px; border-radius: 16px;
  display: grid; place-items: center; color: #fff; margin-bottom: .3rem;
  background: var(--grad-brand); box-shadow: var(--glow-blue);
}
.ind-row__ico svg { width: 28px; height: 28px; }
.ind-row h3 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.5rem); margin-bottom: .8rem; }
.ind-row__body > p { font-size: 1.08rem; max-width: 48ch; }
.ind-row .tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.ind-row .tags span {
  font-size: .82rem; font-weight: 700; color: #cbd2e6;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 999px; padding: .4rem .9rem;
}
@media (max-width: 900px) {
  .ind-row { grid-template-columns: 1fr; gap: 1.75rem; }
  .ind-row:nth-child(even) .ind-row__media { order: 0; }
  .ind-row__media { aspect-ratio: 16 / 10; }
}

/* Standorte mit Foto (Über uns): grosse Karten statt reinem Text */
.loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1180px) { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .loc-grid { grid-template-columns: 1fr; } }
.loc-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.loc-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 60px -22px rgba(0,0,0,.75); }
.loc-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.loc-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.loc-card:hover .loc-card__media img { transform: scale(1.08); }
.loc-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,13,26,.92) 100%);
}
.loc-card__badge {
  position: absolute; z-index: 2; left: 1.1rem; top: 1.1rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--grad-tricolor); border-radius: 999px;
  padding: .4rem .9rem; box-shadow: 0 10px 24px -8px rgba(0,0,0,.65);
}
.loc-card__badge--alt { background: var(--grad-brand); }
.loc-card__flag {
  position: absolute; z-index: 2; right: 1.1rem; bottom: -21px;
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--grad-brand); color: #fff; box-shadow: var(--glow-blue);
  display: grid; place-items: center; font-size: 1.3rem;
}
.loc-card__body { padding: 2rem 1.5rem 1.6rem; }
.loc-card__body h3 { font-size: 1.22rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.loc-card__body h3 svg { width: 19px; height: 19px; color: var(--blue); flex-shrink: 0; }
.loc-card__body p { font-size: .95rem; color: var(--muted); margin-bottom: 1rem; }
.loc-card__body address { font-style: normal; color: var(--muted); line-height: 1.85; font-size: .92rem; }
.loc-card__body address a { color: #eaecf5; font-weight: 700; }
.loc-card__body address a:hover { color: var(--blue-bright); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track, body::before, .grad-text, .show-tile img, .hero__media img { animation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}