/* =========================================================
   ZONING – Stylesheet
   Markenfarben (ca. 60 / 30 / 10):
     60 %  Weiß / helles Grau   (Flächen)
     30 %  Navy                 (Bänder, Headlines, Footer)
     10 %  Crimson-Rot          (CTA, Akzente, Hervorhebung)
   Typografie: Source Serif 4 (Headlines) + Source Sans 3 (Text)
   Struktur bewusst unverändert – nur Farben, Typo & Feinschliff.
   ========================================================= */

:root {
  /* ----- Marken-Palette ----- */
  --white:        #ffffff;   /* 60 % – Hauptflächen                 */
  --bg-soft:      #f5f7fb;   /* dezente graue Trennflächen          */

  --blue:         #1b2c50;   /* 30 % – Navy: Headlines, Bänder, CTA */
  --blue-dark:    #13203f;   /* tiefes Navy: Footer / Schluss-CTA   */
  --blue-light:   #eaeff7;   /* helle Navy-Tönung (Platzhalter)     */

  --red:          #b23f42;   /* 10 % – Crimson: CTA / Hervorhebung  */
  --red-dark:     #913235;   /* Hover-Rot                           */

  --ink:          #1a2438;   /* Fließtext                           */
  --muted:        #5b6678;   /* Sekundärtext                        */
  --border:       #e4e9f1;   /* feine Linien                        */

  /* ----- Schrift ----- */
  --font-sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* ----- Maße ----- */
  --maxw: 1140px;
  --radius: 10px;
  --radius-sm: 4px;

  /* ----- Schatten (matt: weich, diffus, niedriger Kontrast statt "Plastik-Schatten") ----- */
  --shadow-sm: 0 1px 2px rgba(19,32,63,.04), 0 2px 6px rgba(19,32,63,.04);
  --shadow-md: 0 8px 22px rgba(19,32,63,.07);
  --shadow-lg: 0 16px 38px rgba(19,32,63,.09);

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

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 1.0625rem;          /* 17px Grundgröße */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--blue);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.3vw, 3.5rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.45rem); font-weight: 600; }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.45rem); font-weight: 600; }

p  { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--red); }

img { max-width: 100%; display: block; }

strong { font-weight: 700; }

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

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

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

section { padding: clamp(64px, 7vw, 104px) 0; }
section[id] { scroll-margin-top: 84px; }

/* ---------- Eyebrow / Section-Köpfe ---------- */
.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 1em;
}

.section-title { text-align: center; margin-bottom: 14px; }
/* Roter Strich über Sektions-Überschriften (einheitlich) */
.section-title::before,
.faq2-title::before,
.svc-detail-head::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 0 auto 22px;
  background: var(--red);
  border-radius: 2px;
}
.svc-detail-head .section-title::before { display: none; }
.founders-intro .eyebrow::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 0 0 18px;
  background: var(--red);
  border-radius: 2px;
}
.section-intro {
  text-align: center;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 auto 52px;
  font-size: 1.075rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  line-height: 1.2;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-cta { background: var(--red); color: #fff; }
.btn-cta:hover { background: var(--red-dark); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-ghost { background: transparent; color: var(--blue); border-color: rgba(27,44,80,.25); }
.btn-ghost:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* dezenter Text-Link mit Pfeil (Hero-Sekundäraktion) */
.btn-link {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; color: var(--blue);
}
.btn-link::after { content: "\2192"; transition: transform .2s var(--ease); }
.btn-link:hover { color: var(--red); }
.btn-link:hover::after { transform: translateX(4px); }

/* =========================================================
   Header / Navigation  (per js/main.js eingefügt)
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 24px;
}

/* Wortmarke */
.brand {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--blue);
}
/* das "O" als Vektor-Ring im Schriftzug (Header + Footer) */
.brand-o {
  /* Ring exakt auf Versalhöhe: Kreis füllt die SVG-Box nur zu 87 %
     (r36 + Strich 7.5 = 43.5 von 50). Cap-Höhe Source Sans 3 Bold = 0.652em
     -> Box 0.652/0.87 = 0.749em. translateY visuell kalibriert (Vergleich
     mit Hilfslinien auf Cap-Oberkante/Baseline): 0.065em setzt den
     sichtbaren Ring bündig zwischen beide -> alles auf einer Höhe. */
  width: 0.749em; height: 0.749em;
  flex: 0 0 auto;
  margin: 0 .05em;
  align-self: baseline;
  transform: translateY(0.065em);
  color: #111111;                  /* 30 %-Anteil des Rings = Schwarz (Header) */
}
.footer-brand .brand-o { color: #ffffff; }   /* im dunklen Footer sichtbar */
.brand:hover { color: var(--blue); }
.brand-accent {
  width: 3px; height: 11px;
  margin: 1px 0 0 4px;
  background: var(--red);
  border-radius: 2px;
  transform: rotate(20deg);
  flex: 0 0 auto;
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  position: relative;
  color: var(--ink);
  font-weight: 500;
  font-size: .98rem;
}
.nav a:not(.btn):hover { color: var(--blue); }
.nav a.active:not(.btn) { color: var(--blue); }
.nav a.active:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; background: var(--red);
}
.nav .nav-cta { color: #fff; padding: 10px 20px; }
.nav .nav-cta:hover { color: #fff; }

.nav-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--blue);
  cursor: pointer;
  position: relative;
  z-index: 3;
}
/* drei gleich dünne Striche, morphen beim Öffnen zum X */
.nt-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nt-bar + .nt-bar { margin-top: 5px; }
body.nav-open .nav-toggle .nt-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle .nt-bar:nth-child(2) { opacity: 0; transform: scaleX(.4); }
body.nav-open .nav-toggle .nt-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nt-bar { transition: none; }
}

/* =========================================================
   Startseiten-Sektionen
   ========================================================= */

/* 2 · Hero */
.hero {
  text-align: center;
  padding: clamp(72px, 9vw, 132px) 0 clamp(64px, 8vw, 116px);
  background:
    radial-gradient(1100px 460px at 50% -8%, #eef3fb 0%, rgba(238,243,251,0) 62%),
    var(--white);
}
.hero h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.hero h1 .accent { color: var(--red); }
.hero .lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.25rem);
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto 34px;
}
.hero-actions { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* 3 · Kundenlogos */
.logos { padding: 44px 0; border-bottom: 1px solid var(--border); }
.logos-title {
  text-align: center; color: var(--muted);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .76rem; font-weight: 600; margin-bottom: 28px;
}
.logo-row { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: center; align-items: center; }
.logo-item {
  flex: 0 0 auto;
  height: 40px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  color: #9aa6b8;
  font-family: var(--font-serif);
  font-weight: 600; font-size: 1.15rem; letter-spacing: .02em;
  filter: grayscale(1);
  transition: color .2s var(--ease);
}
.logo-item:hover { color: var(--blue); }

/* 4 · Strategie – Navy-Band · "Unser Ansatz" (Redesign) */
.strategy {
  position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: center;
  padding-block: clamp(72px, 9vw, 130px);
  background:
    radial-gradient(120% 82% at 50% -8%, #243a64 0%, rgba(36,58,100,0) 58%),
    linear-gradient(180deg, #16284a 0%, #101d36 100%);
}

/* --- dekorativer Hintergrund: Glow, Lichtstrahl, Ghost-Glyphen O / A --- */
.strategy-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.strategy-glow {
  position: absolute; top: -16%; left: 50%; transform: translateX(-50%);
  width: min(920px, 86%); height: 64%;
  background: radial-gradient(closest-side, rgba(78,114,186,.32), rgba(78,114,186,0) 72%);
}
.strategy-beam {
  position: absolute; top: -8%; right: 13%; width: 2px; height: 60%;
  background: linear-gradient(180deg, rgba(150,185,255,0), rgba(150,185,255,.85) 32%, rgba(150,185,255,0));
  transform: rotate(17deg); transform-origin: top center;
}
.strategy-glyph { position: absolute; height: clamp(360px, 44vw, 660px); width: auto; }
.strategy-glyph--o { top: 3%; left: -8%; }
.strategy-glyph--a { top: -4%; right: -5%; }

.strategy-inner { position: relative; z-index: 1; max-width: 1000px; }

.strategy .strategy-eyebrow { position: relative; margin: 0 0 24px; padding-top: 28px; color: #9fb0cc; letter-spacing: .24em; }
.strategy .strategy-eyebrow::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 15px; background: var(--red);
}

.strategy-title {
  font-family: var(--font-serif); color: #fff; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.08;
  font-size: clamp(2.4rem, 1.25rem + 4.1vw, 5rem); margin: 0 auto;
}
.strategy-title .dot { color: var(--red); }

.strategy-lead {
  color: #b8c6e2; line-height: 1.7; max-width: 52ch; margin: clamp(22px, 2.6vw, 30px) auto 0;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem);
}

/* Säulen-Band mit randlosen Linien */
.strategy-band {
  position: relative; z-index: 1; margin-top: clamp(54px, 6.5vw, 92px);
  background: rgba(7,14,30,.30);
  border-top: 1px solid rgba(255,255,255,.13);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.strategy-principles { display: grid; grid-template-columns: repeat(3, 1fr); text-align: left; }
.strategy-principle {
  position: relative; overflow: hidden;
  padding: clamp(34px, 4vw, 56px) clamp(22px, 2.6vw, 46px);
}
.strategy-principle + .strategy-principle { border-left: 1px solid rgba(255,255,255,.13); }

.sp-ghost {
  position: absolute; left: 50%; top: 50%; transform: translate(-44%, -48%);
  font-family: var(--font-serif); font-weight: 600; line-height: 1;
  font-size: clamp(7rem, 4.4rem + 9vw, 13rem);
  color: rgba(150,180,238,.06); z-index: 0; pointer-events: none; user-select: none;
}
.sp-num, .strategy-principle h3, .strategy-principle p { position: relative; z-index: 1; }
.sp-num {
  display: block; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.7rem, 1.4rem + .9vw, 2.3rem); line-height: 1; color: var(--red);
}
.sp-num::after { content: ""; display: block; width: 38px; height: 2px; background: var(--red); margin-top: 16px; }
.strategy-principle h3 {
  font-family: var(--font-serif); color: #fff; font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.18rem, 1.05rem + .5vw, 1.5rem); margin: 20px 0 .5em;
}
.strategy-principle p { color: #93a3c2; font-size: .98rem; line-height: 1.6; margin: 0; max-width: 23ch; }

/* Abschluss-Satz mit roten Strichen */
.strategy-close {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 34px);
  font-family: var(--font-serif); color: #e3eaf6; line-height: 1.4; text-align: center;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.62rem); margin: clamp(40px, 5vw, 64px) auto 0;
}
.strategy-close::before, .strategy-close::after {
  content: ""; flex: 0 0 auto; width: clamp(26px, 4vw, 60px); height: 1.5px; background: var(--red);
}
.strategy-close em { font-style: normal; font-weight: 600; color: #e7757d; }

@media (max-width: 760px) {
  .strategy-principles { grid-template-columns: 1fr; }
  .strategy-principle { padding: 30px 2px; }
  .strategy-principle + .strategy-principle { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .strategy-glyph { opacity: .55; }
  .strategy-close { gap: 14px; }
  .strategy-close::before, .strategy-close::after { width: 18px; }
}

/* generische Grids */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Karten */
/* =========================================================
   Leistungen – Aktenreiter-/Ordner-Design
   ========================================================= */
.pillars { background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%); }
.pillars .container { max-width: none; padding-inline: 0.5cm; }

/* Kicker „ZONING" mit flankierenden Strichen */
.pillars-kicker {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  text-transform: uppercase; letter-spacing: .26em;
  font-size: .76rem; font-weight: 700; color: var(--red);
  margin: 0 0 14px;
}
.pillars-kicker::before, .pillars-kicker::after { content: ""; width: 34px; height: 2px; background: var(--red); }

/* Brett: durchgehende rote Leiste + 5 Reiter */
.folders {
  --gap: 24px;
  position: relative;
  display: grid;
  gap: var(--gap);
  margin-top: 66px;
  padding-top: 48px;
}
.folders::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 35px;
  height: 11px;
  background: var(--red-dark);
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(19,32,63,.10);
  z-index: 1;
}

/* Desktop: oben 5 große Reiter, unten 5 kleinere – beide über die volle Breite */
@media (min-width: 861px) {
  .folders--five { grid-template-columns: repeat(5, 1fr); }
  .folders--six  { grid-template-columns: repeat(5, 1fr); }
}

/* eine Karte (Ordner) */
.folder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 380px;
  padding: 74px 28px 42px;
  text-align: center;
  color: inherit;
  text-decoration: none;
  z-index: 2;
}
/* geneigter weißer Karten-Hintergrund – Inhalt bleibt aufrecht */
.folder::before {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px 3px 14px 14px;
  box-shadow: var(--shadow-md);
  z-index: -1;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.folder:hover::before { box-shadow: var(--shadow-lg); transform: translateY(-6px); }

/* Verbindungsknoten auf der Leiste zwischen den Reitern */
.folder:not(:last-child)::after {
  content: "";
  position: absolute; top: -15px; right: -19px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 4px solid var(--red);
  box-shadow: 0 1px 2px rgba(19,32,63,.16);
  z-index: 3;
}

/* Reiter mit Nummer (Trapez, sitzt auf der Leiste) */
.folder-num {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center;
  width: 82px; height: 40px;
  background: var(--red);
  color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .08em;
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  z-index: 4;
}

/* Karten-Inhalt */
.folder-ico { display: block; margin: 0 auto 22px; color: var(--red); transition: transform .25s var(--ease); }
.folder-ico svg { width: 56px; height: 56px; display: block; margin: 0 auto; }
.folder:hover .folder-ico { transform: scale(1.12); }
.folder h3 { font-size: 1.3rem; line-height: 1.3; color: var(--blue); margin: 0 0 14px; transition: color .2s var(--ease), transform .25s var(--ease); overflow-wrap: anywhere; hyphens: auto; }
.folder:hover h3 { color: var(--red); transform: scale(1.08); }
.folder-rule { display: block; width: 34px; height: 2px; background: var(--red); margin: 0 auto 18px; }
.folder-desc { display: block; color: var(--muted); font-size: 1.02rem; line-height: 1.6; margin: 0 auto 28px; max-width: 26ch; transition: transform .25s var(--ease); }
.folder:hover .folder-desc { transform: scale(1.05); }
.folder-go { display: block; position: relative; right: 14px; color: var(--red); font-size: 1.75rem; line-height: 1; margin-top: auto; transition: transform .2s var(--ease); }
.folder:hover .folder-go { transform: translateX(5px); }

/* Responsive: Umbruch -> Leiste/Knoten weg, Reiter bleibt je Karte */
@media (max-width: 860px) {
  .folders { grid-template-columns: repeat(2, 1fr); gap: 56px 22px; margin: 40px 0 0; width: auto; transform: none; padding-top: 0; }
  .folders::before { display: none; }
  .folder { min-height: 0; padding-top: 54px; }
  .folder-num { top: -22px; }
  .folder:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) {
  .folders { grid-template-columns: 1fr; }
}


/* Zweites Board: 5 kompaktere Buttons – bewusst kleiner als die oberen 5 */
.folders--six .folder { min-height: 300px; padding-left: 16px; padding-right: 16px; }
.folders--six .folder-ico svg { width: 46px; height: 46px; }
.folders--six .folder h3 { font-size: 1.02rem; line-height: 1.3; }
@media (max-width: 860px) {
  .folders--six { grid-template-columns: repeat(2, 1fr); }
  .folders--six .folder { min-height: 0; }
}
@media (max-width: 520px) {
  .folders--six { grid-template-columns: 1fr; }
}


/* Fuß: Z-Emblem mit flankierenden Strichen + Claim */
.pillars-foot { text-align: center; margin-top: 64px; }
.foot-emblem { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; }
.foot-emblem::before, .foot-emblem::after { content: ""; width: 64px; height: 2px; background: var(--red); opacity: .55; }
.z-emblem {
  display: grid; place-items: center;
  width: 50px; height: 56px;
  background: var(--red-dark);
  color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 1.7rem;
  clip-path: polygon(50% 0, 100% 16%, 100% 60%, 50% 100%, 0 60%, 0 16%);
  box-shadow: 0 4px 10px rgba(19,32,63,.14);
}
.foot-tag { font-family: var(--font-serif); color: var(--blue); font-size: 1.12rem; margin: 0; }


.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d4dde9; }
.card h3 { color: var(--blue); margin-bottom: .45em; }
.card p { color: var(--muted); margin: 0; }

/* 6 · Prozess */
.process { background: var(--white); }
.step {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.6rem; font-weight: 600; line-height: 1;
  color: var(--red);
  margin-bottom: 16px;
}
.step-num::before { content: "0"; }     /* 1 → 01 */
.step h3 { color: var(--blue); }
.step p { color: var(--muted); margin: 0; }

/* 7b · Phasen-Karten (Treppen-Layout im Bild-Stil – ersetzt die .step-Felder) */
.phases {
  --phase-gap: clamp(24px, 4vw, 80px);
  --phase-step: clamp(56px, 8vw, 130px);   /* deutliche Diagonale: 1 oben-links, 2 mittig, 3 unten-rechts */
  --phase-dot-y: 148px;
  position: relative;
  left: 50%;
  width: 100vw;                            /* aus dem Container ausbrechen -> Karten bis an die Ränder */
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 1 links, 2 mittig, 3 rechts -> alle auf einen Blick */
  gap: var(--phase-gap);
  align-items: start;
  padding: 0 clamp(20px, 4vw, 96px);       /* etwas Abstand zu den Viewport-Rändern */
  margin-top: 16px;
}
.phase {
  position: relative;
  background: #fff;
  border-radius: 18px;
  border-bottom: 5px solid var(--red);
  box-shadow: 0 10px 26px rgba(19,32,63,.07);
  padding: clamp(28px, 2.4vw, 44px) clamp(22px, 1.9vw, 34px) clamp(32px, 3vw, 48px);
}
/* Treppe: 1 links (oben) -> 2 mittig -> 3 rechts (tiefer) */
.phase:nth-child(2) { margin-top: var(--phase-step); }
.phase:nth-child(3) { margin-top: calc(var(--phase-step) * 2); }
.phase-num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600; line-height: 1;
  font-size: clamp(2.4rem, 1.9rem + 2vw, 3.4rem);
  color: var(--red);
}
.phase-num::after {
  content: ""; display: block;
  width: 48px; height: 3px;
  background: var(--red); border-radius: 2px;
  margin: 16px 0 22px;
}
.phase h3 {
  font-family: var(--font-serif);
  color: var(--blue);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  margin: 0 0 16px;
}
.phase-rule {
  display: block;
  width: 60px; height: 1px;
  background: var(--border);
  margin: 0 0 18px;
}
.phase p { color: var(--muted); margin: 0; }
/* verbindende rote Punkte + Stufenlinie zwischen den Karten */
.phase:not(:last-child)::after {
  content: ""; position: absolute;
  top: var(--phase-dot-y); right: 0;
  width: 13px; height: 13px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px #fff;
  z-index: 2;
}
.phase:not(:last-child)::before {
  content: ""; position: absolute;
  top: var(--phase-dot-y);
  right: calc(-1 * var(--phase-gap));
  width: var(--phase-gap);
  height: var(--phase-step);
  border-top: 2px solid var(--red);
  border-right: 2px solid var(--red);
  border-top-right-radius: 10px;
  z-index: 1;
}
@media (max-width: 760px) {
  .phases { grid-template-columns: 1fr; }
  .phase:nth-child(2), .phase:nth-child(3) { margin-top: 0; }
  .phase:not(:last-child)::before,
  .phase:not(:last-child)::after { display: none; }
}

/* 7 · Team – Portrait-Slider: dunkle Karten, Name/Rolle links, Portrait ragt oben aus der Karte */
.team { --ts-w: 440px; --ts-h: 300px; --ts-card-h: 220px; background: var(--bg-soft); }
.team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: clamp(28px, 3.6vw, 44px); }
.team-head .section-title { text-align: left; margin-bottom: 0; }
.team-head .section-title::before { margin: 0 0 20px; }
.team-head .section-intro { text-align: left; max-width: 52ch; margin: 10px 0 0; }
.ts-nav { display: flex; gap: 12px; flex: 0 0 auto; padding-bottom: 8px; }
.ts-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--blue);
  box-shadow: 0 6px 16px rgba(20,30,60,.07);
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.ts-btn:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(19,32,63,.14); }
.ts-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.ts-btn svg { width: 20px; height: 20px; }

/* Ohne JS: scrollbare Reihe. Mit JS (.ts-ready): Endlos-Slider mit absolut gesetzten Kacheln. */
.ts-track { position: relative; display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px; }
.ts-ready .ts-track { display: block; height: calc(var(--ts-h) + 44px); overflow: hidden; padding-bottom: 0; }
.ts-tile { position: relative; flex: 0 0 var(--ts-w); width: var(--ts-w); height: var(--ts-h); }
.ts-ready .ts-tile { position: absolute; left: 0; top: 0; transition: transform .8s var(--ease); }
.ts-card {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--ts-card-h);
  border-radius: 20px;
  background: linear-gradient(135deg, #16284a, #0d1a32);
  box-shadow: 0 24px 44px -22px rgba(8,16,36,.55);
}
.ts-info { position: absolute; z-index: 4; left: 24px; right: 55%; top: calc(var(--ts-h) - var(--ts-card-h) + 24px); }
.ts-name {
  margin: 0 0 8px; font-family: var(--font-sans); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: #fff; font-size: 1.18rem; line-height: 1.2;
}
.ts-role { margin: 0; color: rgba(255,255,255,.67); font-size: .88rem; font-weight: 600; line-height: 1.45; }
.ts-photo { position: absolute; right: 18px; bottom: 0; width: 56%; z-index: 3; }
.ts-photo svg, .ts-photo img { display: block; width: 100%; height: auto; }

@media (max-width: 1023px) { .team { --ts-w: 400px; } }
@media (max-width: 768px) {
  .team { --ts-w: min(88vw, 400px); }
  .team-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ts-nav { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-ready .ts-tile, .ts-btn { transition: none; }
}

/* 8 · Gründer-Story (Startseite-Teaser, zentriert) */
.founders { background: var(--white); }
.founders .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }

.founders-centered { max-width: 600px; margin: 0 auto; text-align: center; }
.founders-centered .eyebrow::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 0 auto 18px;
  background: var(--red);
  border-radius: 2px;
}
.founders-title { margin: 0 0 .45em; }
.founders-title .dot { color: var(--red); }
.founders-standfirst { color: var(--muted); font-size: 1.1rem; line-height: 1.65; margin: 0 auto 30px; max-width: 34ch; }

/* Startseite: nur Punkt 1 der Story, "..." leitet zur CTA über */
.story-lead {
  margin: 0 auto 6px;
  max-width: 54ch;
  color: var(--blue);
  font-size: clamp(1.12rem, 1.02rem + .4vw, 1.28rem);
  line-height: 1.6;
}
.story-more {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  color: var(--red);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .5em;
  line-height: 1;
}
/* .reveal.is-visible fixiert transform:none mit höherer Spezifität als
   .btn-cta:hover -> hier gezielt zurückgewinnen, damit der Button beim
   Hover genau wie die anderen CTAs leicht abhebt */
.story-more-cta.btn.btn-cta:hover { transform: translateY(-1px); }

.founder-img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--blue-light), #dde6f3);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
  box-shadow: var(--shadow-md);
}

/* 9 · Referenzen / Case Studies */
.cases { background: var(--bg-soft); }
.case { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.case-media { aspect-ratio: 16 / 9; background: var(--blue-light); display: flex; align-items: center; justify-content: center; color: var(--blue); }
.case-body { padding: 22px; }
.case-body h3 { color: var(--blue); font-size: 1.15rem; }

/* 10 · Bewertungen – tiefes Navy-Band */
.reviews { background: var(--blue-dark); color: #fff; text-align: center; }
.reviews h2 { color: #fff; }
.reviews .stars { color: var(--red); font-size: 1.7rem; letter-spacing: .2em; margin: 0 0 10px; }
.reviews p { color: #c2cfe4; max-width: 56ch; margin: 0 auto 28px; }

/* 11 · Videos */
.videos { background: var(--white); }
.video-card {
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, var(--blue-light), #dde6f3);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}

/* 12 · FAQ (Akkordeon – feine Unterstrich-Zeilen) */
.faq { background: var(--bg-soft); }
.accordion { max-width: 840px; margin: 0 auto; }
.faq-item {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
  overflow: hidden;
  background: transparent;
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 24px 6px; font-family: var(--font-sans);
  font-size: 1.075rem; font-weight: 600; color: var(--blue);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  transition: color .15s var(--ease);
}
.faq-q:hover { color: var(--red); }
.faq-q .icon { color: var(--red); font-size: 1.6rem; line-height: 1; flex: 0 0 auto; font-weight: 400; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.faq-a p { padding: 0 6px 24px; margin: 0; color: var(--muted); max-width: 70ch; }
.faq-item.open .faq-a { max-height: 420px; }

/* 13 · Kontakt / CTA */
.contact { background: var(--white); }
.contact-form { max-width: 620px; margin: 28px auto 0; display: grid; gap: 16px; }
.contact-form input,
.contact-form textarea {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: 1rem; background: #fff; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #8a94a5; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27,44,80,.13);
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form .btn { justify-content: center; }
.form-note { text-align: center; color: var(--blue); font-weight: 600; min-height: 1.2em; }

/* =========================================================
   Footer  (per js/main.js eingefügt) – tiefes Navy-Band
   ========================================================= */
.site-footer { background: #030c1c; color: #c3cfe2; }
.site-footer a { color: #c3cfe2; }
.site-footer a:hover { color: #fff; }

/* ----- Abschluss-CTA: Vektor-Grafik (flacher Button + scharfe Bahnen, matt) ----- */
.footer-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 34vw, 480px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #020817;          /* = einfarbiger Bildhintergrund -> nahtloser Uebergang */
}
.footer-cta-media {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-62%);
  height: clamp(340px, 34vw, 540px);
  z-index: 1;
  pointer-events: none;         /* nur der Hit-Link ist klickbar */
}
.footer-cta-img { height: 100%; width: auto; display: block; }
.footer-cta-hit {
  position: absolute;
  left: 5.5%; top: 56.4%;
  width: 30.8%; height: 11.4%;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 12px;
}
.footer-cta-hit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Hover/Klick: der Vektor-Button reagiert mit mattem Farbwechsel */
.fcta-btn { transition: fill .2s var(--ease); }
.footer-cta-media:has(.footer-cta-hit:hover) .fcta-btn { fill: #c04b52; }
.footer-cta-media:has(.footer-cta-hit:active) .fcta-btn { fill: #913235; }

/* ----- Farbpunkte: kleine matte Punkte wandern aus dem Button die Bahnen entlang
   (stroke-dasharray/-offset, kein Blend-Modus, kein Leuchten) ----- */
.cf-dot {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 0.6 24.4;    /* winzige Punkte (pathLength=100), Periode 25 -> nahtlos */
  animation: cfDots var(--d, 3.6s) linear infinite;
  animation-delay: var(--dl, 0s);
  will-change: stroke-dashoffset;
}
.cf-core .cf-dot { stroke-width: 2.6; opacity: .85; }  /* kleiner matter Punkt */
@keyframes cfDots { to { stroke-dashoffset: -100; } }  /* laufen aus dem Button heraus */
@media (max-width: 640px) {
  .cf-core .cf-dot { stroke-width: 3.4; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-core { display: none; }                          /* keine Bewegung -> statische Bahnen */
}

.footer-cta-inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(20px, 3vw, 36px);
  padding-bottom: clamp(20px, 3vw, 36px);
  pointer-events: none;          /* Container faengt KEINE Klicks ab -> Klicks erreichen den CTA-Button (footer-cta-hit) darunter */
}
.footer-cta-text { max-width: 50%; pointer-events: auto; }  /* nur der Text bleibt markierbar; er liegt links, der Button rechts -> keine Ueberschneidung */
.footer-cta-text h2 {
  font-family: var(--font-serif);
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.55vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.footer-cta-text .accent { color: #e55b5c; }
.footer-cta-text p {
  color: #9aa7be;
  font-size: clamp(1.05rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  margin: 0;
}

/* ----- Spalten (kompakt) ----- */
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
  gap: clamp(18px, 2.4vw, 36px);
  padding-top: clamp(18px, 2vw, 28px);
  padding-bottom: clamp(12px, 1.4vw, 18px);
}
.footer-col--brand { max-width: 34ch; }
.footer-brand {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-sans);
  font-weight: 700; font-size: 1.2rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin: 0 0 10px;
}
.footer-about { color: #93a2bb; font-size: .86rem; line-height: 1.5; margin: 0 0 14px; }
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  color: #cdd8ea; font-weight: 700; font-size: .85rem;
  font-family: var(--font-sans);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.footer-social:hover { background: #d24a44; border-color: #d24a44; color: #fff; transform: translateY(-2px); }
.footer-col h4 {
  position: relative;
  color: #e55b5c;
  margin: 0 0 12px;
  padding-bottom: 9px;
  font-family: var(--font-sans);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.footer-col h4::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 22px; height: 2px; background: rgba(255,255,255,.18);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 7px; }
.footer-col li a { font-size: .88rem; transition: color .15s var(--ease), padding-left .15s var(--ease); }
.footer-col li a:hover { color: #fff; padding-left: 3px; }

/* ----- Rechtliches (kompakt) ----- */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 14px;
  padding-bottom: 18px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: .8rem; color: #7e8fac;
}
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { color: #7e8fac; }
.footer-legal a:hover { color: #fff; }

/* ----- Footer responsive ----- */
@media (max-width: 1024px) {
  .footer-cta { display: flex; flex-direction: column; min-height: 0; padding: clamp(22px, 5vw, 40px) 0; }
  .footer-cta-media { order: 2; }
  .footer-cta-text { max-width: none; }
  .footer-cta-media {
    position: relative; transform: none;
    height: auto; width: 100%; max-width: 560px;
    margin: 20px auto 0;
  }
  .footer-cta-img { height: auto; width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; max-width: 56ch; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-cta-text br { display: none; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* =========================================================
   Unterseiten – Kopf
   ========================================================= */
.page-head { background: var(--blue); color: #fff; text-align: center; padding: clamp(72px, 8vw, 104px) 0; }
.page-head h1 { color: #fff; }
.page-head p { color: #c8d4e8; max-width: 56ch; margin: 0 auto; font-size: 1.1rem; }

/* Rechtstexte / einfache Inhaltsseiten */
main > section h3 { margin-top: 1.6em; }
main > section h3:first-child { margin-top: 0; }

/* =========================================================
   Kicker – kleines, zentriertes Abschnitts-Label
   ========================================================= */
.kicker {
  text-align: center;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .76rem; font-weight: 700;
  color: var(--muted);
  margin: 0 0 44px;
}
.kicker--light { color: #9fb0cc; }

/* =========================================================
   Hero – geteilt (Text links, Bild rechts)
   ========================================================= */
.hero--split { text-align: left; padding: clamp(48px, 6vw, 92px) 0; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero--split h1 { max-width: 18ch; margin: 0 0 .5em; }
.hero--split .lead { margin: 0 0 32px; max-width: 48ch; }
.hero--split .hero-actions { justify-content: flex-start; }
.hero-media { margin: 0; }
.hero-photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--blue-light), #dde6f3);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
  box-shadow: var(--shadow-lg);
}
.hero-media figcaption { margin-top: 12px; text-align: right; font-size: .85rem; color: var(--muted); }
.hero-media figcaption span { color: #8a94a5; }

/* =========================================================
   "Unser Ansatz" – dunkle Bildkomposition + Text-Overlay
   ========================================================= */
.approach-section { position: relative; width: 100%; padding: 0; background: #0a1730; }
.approach-photo { display: block; width: 100%; height: auto; }
.approach-render { display: none; }
.approach-section.no-photo .approach-render {
  display: block;
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 100px) 0 clamp(56px, 7vw, 88px);
  color: #eef2f9;
  background: linear-gradient(180deg, #16284a 0%, #0e1d38 56%, #0a1730 100%);
}

.approach-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.approach-bg .ap-o { position: absolute; top: -10%; left: -8%; width: clamp(360px, 36vw, 640px); height: auto; }
.approach-bg .ap-a { position: absolute; top: -12%; right: -7%; width: clamp(360px, 36vw, 650px); height: auto; }

.approach-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 44px);
}

.approach-header { max-width: 760px; margin: 0 auto; text-align: center; }
.approach-eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: 22px;
  padding-top: 30px;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #aebdd6;
}
.approach-eyebrow::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 3px; border-radius: 2px;
  background: var(--red);
}
.approach-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.approach-title .red-dot { color: var(--red); }
.approach-lead {
  margin: 1.5rem auto 0;
  max-width: 48ch;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.6;
  color: #c2cfe6;
}

.approach-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(44px, 5.5vw, 78px);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.approach-step {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 3.4vw, 54px) clamp(24px, 4.5vw, 88px);
}
.approach-step + .approach-step { border-left: 1px solid rgba(255,255,255,.12); }
/* Hover auf den 3 Feldern */
.approach-step { transition: background-color .35s var(--ease); }
.approach-step::before { transition: opacity .35s var(--ease); }
.approach-step-tick { transition: width .35s var(--ease); }
.approach-step:hover { background-color: rgba(122,166,236,.06); }
.approach-step:hover::before { opacity: .16; }
.approach-step:hover .approach-step-tick { width: 64px; }
.approach-step:hover .approach-step-ico { color: #9fb6e4; }
@media (prefers-reduced-motion: reduce) {
  .approach-step, .approach-step::before, .approach-step-tick, .approach-step-ico { transition: none; }
}
.approach-step::before {
  content: attr(data-num);
  position: absolute;
  right: 4%;
  bottom: -14%;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(120px, 13vw, 215px);
  line-height: 1;
  color: #96b4ee;
  opacity: .08;
  pointer-events: none;
  z-index: 0;
}
.approach-step > * { position: relative; z-index: 1; }
.approach-step-num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 3vw, 3.1rem);
  line-height: 1;
  color: var(--red);
}
.approach-step-head { display: flex; align-items: center; gap: 18px; }
.approach-step-rule { flex: 0 0 auto; width: 1px; height: 46px; background: rgba(255,255,255,.18); }
.approach-step-ico { flex: 0 0 auto; margin-left: auto; color: #6f86b4; line-height: 0; transition: color .35s var(--ease); }
.approach-step-ico svg { width: 44px; height: 44px; display: block; }
.approach-step-tick { display: block; width: 40px; height: 3px; margin-top: 18px; background: var(--red); }
.approach-step h3 {
  margin: 22px 0 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  color: #fff;
}
.approach-step p {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: #aab9d6;
}

.approach-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(34px, 4.4vw, 58px);
}
.approach-rule { flex: 0 0 auto; width: clamp(40px, 6vw, 76px); height: 1.5px; background: var(--red); }
.approach-bottom p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  color: #e3eaf6;
  text-align: center;
}
.approach-bottom strong { font-weight: 600; color: #e7757d; }

@media (max-width: 860px) {
  .approach-section.no-photo .approach-render { padding: clamp(48px, 12vw, 72px) 0; }
  .approach-bg { opacity: .6; }
  .approach-bg .ap-o, .approach-bg .ap-a { width: clamp(150px, 34vw, 300px); }
  .approach-steps { grid-template-columns: 1fr; }
  .approach-step { padding: 30px clamp(20px, 6vw, 40px); }
  .approach-step + .approach-step { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .approach-step::before { font-size: 150px; right: 0; bottom: -10%; }
  .approach-bottom { gap: 14px; }
  .approach-rule { width: 28px; }
}

/* =========================================================
   Kennzahlen-Band (Navy)
   ========================================================= */
.stats { background: var(--blue); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat { padding: 6px clamp(24px, 3vw, 44px); text-align: center; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.16); }
.stat-num {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem);
  font-weight: 600; line-height: 1; color: #fff; margin-bottom: 14px;
}
.stat-label { color: #dbe4f2; font-weight: 600; max-width: 26ch; margin: 0 auto 6px; }
.stat-sub { color: #9fb0cc; font-size: .9rem; }

/* =========================================================
   Team + Kundenstimme
   ========================================================= */
.team-layout { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-grid--full { max-width: 920px; margin: 8px auto 0; }
.quote-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 28px 30px;
  box-shadow: var(--shadow-sm);
}
.quote-card blockquote {
  margin: 0 0 18px; padding: 0;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.08rem; line-height: 1.6; color: var(--ink);
}
.quote-card blockquote::before {
  content: "\201C"; display: block;
  color: var(--red); font-family: var(--font-serif);
  font-size: 2.6rem; line-height: .6; margin-bottom: 6px;
}
.quote-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.quote-card figcaption strong { color: var(--blue); font-size: .95rem; }
.quote-card figcaption span { color: var(--muted); font-size: .85rem; }
.quote-logo { font-family: var(--font-serif); font-weight: 600; color: #9aa6b8; letter-spacing: .04em; margin-top: 6px; }

/* (entfernt: altes 3-spaltiges FAQ-Grid – ersetzt durch einheitliches .faq2) */

/* =========================================================
   Abschluss-CTA (tiefes Navy-Band)
   ========================================================= */
.closing { background: var(--blue-dark); color: #fff; }
.closing-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.closing h2 { color: #fff; margin: 0; max-width: 18ch; }
.closing-aside p { color: #c2cfe4; margin: 0 0 22px; }

/* =========================================================
   Footer – schlank (überschreibt das frühere 4-Spalten-Raster)
   ========================================================= */
/* (frueherer schlanker Footer entfernt - ersetzt durch Footer-Design oben) */

/* =========================================================
   Referenzen – Zickzack-Layout
   ========================================================= */
/* Kopf der Referenzen-Seite (linksbündig, hell – wie im Entwurf) */
.ref-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.ref-head h1 {
  font-size: clamp(2.2rem, 1.55rem + 2.7vw, 3.3rem);
  margin: 0 0 18px;
}
.ref-head p { color: var(--muted); font-size: 1.12rem; max-width: 52ch; margin: 0; }
.ref-head .eyebrow { color: var(--red); font-size: .78rem; margin-bottom: .9em; }

.ref-zigzag { position: relative; }

/* Bild-Karte und Text liegen nebeneinander; eine feine Linie verbindet sie (Zeitstrahl) */
.ref-row {
  --ref-gap: clamp(48px, 6vw, 92px);
  position: relative;
  scroll-margin-top: 140px; /* Deep-Link vom Marquee: Zeile unter dem Header mit Luft anlanden */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  margin-bottom: var(--ref-gap);
}
.ref-row:last-of-type { margin-bottom: 0; }

/* --- Bild als eigenständige, gerundete Karte mit weichem Schatten --- */
.ref-media {
  grid-row: 1;
  grid-column: 1 / 8;                   /* links */
  position: relative;
  z-index: 1;
}
.ref-media a { display: block; line-height: 0; border-radius: var(--radius); overflow: hidden; background: var(--blue-light); box-shadow: var(--shadow-md); }
.ref-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;                 /* feste Bildschirm-Proportion -> immer nur das erste Sichtfenster */
  height: auto;
  object-fit: cover;
  object-position: 50% 0%;              /* von oben beschnitten: nur der Hero-Bereich der Website */
  transition: object-position 1s var(--ease), transform .5s var(--ease);
}
/* Pro-Bild-Feinschnitt: zeigt die oberen N px der 1600px-breiten Aufnahme,
   abgestimmt auf den jeweiligen Hero (inkl. unterer Text-/Info-Zeile). */
.ref-media img[data-slug="btr-gebaeudeservice"] { aspect-ratio: 1600 / 1140 !important; }  /* weiter raus: Firmensitz/Niederlassung sichtbar */
.ref-media img[data-slug="neuclean"]            { aspect-ratio: 1600 / 850 !important; }
.ref-media img[data-slug="nicole-bleckede"]     { aspect-ratio: 1600 / 880 !important; }
.ref-media img[data-slug="doeneroase"]          { aspect-ratio: 1600 / 920 !important; }
/* Hover: Screenshot scrollt langsam nach unten (Desktop + Phone gemeinsam) */
.ref-media a:hover img,
.ref-phone:hover img { object-position: 50% 100%; transition: object-position var(--pan-dur, 12s) linear; }

/* Mobile-Ansicht: kleines Telefon-Mockup, ragt unten in die Karte */
.ref-phone {
  position: absolute; left: -16px; right: auto; bottom: -22px;
  width: clamp(80px, 22%, 124px); aspect-ratio: 124 / 258;
  padding: 5px; border-radius: 17px; background: #0f1a33;
  box-shadow: 0 16px 38px rgba(19,32,63,.30), 0 2px 6px rgba(19,32,63,.16);
  overflow: hidden; z-index: 3; pointer-events: auto;
}
.ref-phone img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 0%; border-radius: 12px; display: block; }
.ref-row:nth-child(even) .ref-phone { left: auto; right: -16px; }
@media (max-width: 560px) {
  /* Mobil: Telefon einheitlich rechts innen andocken statt über die Kante zu ragen */
  .ref-phone, .ref-row:nth-child(even) .ref-phone { left: auto; right: 8px; bottom: -14px; width: 84px; }
}

/* --- Text neben der Karte --- */
.ref-text {
  grid-row: 1;
  grid-column: 8 / 13;                  /* rechts */
  position: relative;
  z-index: 2;
  padding-left: clamp(22px, 3vw, 52px);
}

/* --- Zickzack: gerade Reihen gespiegelt, Text rechtsbündig --- */
.ref-row:nth-child(even) .ref-media { grid-column: 6 / 13; }   /* Bild rechts */
.ref-row:nth-child(even) .ref-text {
  grid-column: 1 / 6;                   /* Text links */
  padding-left: 0;
  padding-right: clamp(22px, 3vw, 52px);
  text-align: right;
}
.ref-row:nth-child(even) .ref-text h3 { justify-content: flex-end; }
.ref-row:nth-child(even) .ref-eyebrow,
.ref-row:nth-child(even) .ref-desc,
.ref-row:nth-child(even) .ref-divider { margin-left: auto; }
.ref-row:nth-child(even) .ref-checks { justify-content: flex-end; }

.ref-eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .76rem; font-weight: 700;
  color: var(--red); margin: 0 0 14px;
}
.ref-text h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.05vw, 1.95rem);
  font-weight: 600;
  color: var(--blue);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ref-desc { color: var(--muted); margin: 0 0 20px; max-width: 44ch; }

/* kurzer roter Trennstrich über den Ergebnissen */
.ref-divider {
  display: block; width: 36px; height: 2px;
  background: var(--red); border-radius: 2px;
  margin: 0 0 18px;
}

/* Ergebnis-Häkchen (aus den Tags) */
.ref-checks {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-wrap: wrap; gap: 11px 22px;
}
.ref-checks li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .9rem; color: var(--blue); font-weight: 600;
}
.ref-checks li::before {
  content: ""; flex: none; width: 19px; height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2c50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.3 12.4l2.6 2.6 4.8-5.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ref-badge {
  font-family: var(--font-sans);
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 4px 10px; border-radius: 999px;
}
.ref-badge--live { background: rgba(27,44,80,.10); color: var(--blue); }

.btn-live { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--blue); }
.btn-live:hover { color: var(--red); }

/* --- Zeitstrahl: roter Knoten neben der Bildkarte --- */
.ref-node {
  position: absolute;
  top: 50%; left: calc(58.333% + 12px);    /* im Spalt rechts neben der Bildkarte */
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 6px var(--white);
  z-index: 4;
}
.ref-row:nth-child(even) .ref-node { left: calc(41.667% - 12px); }   /* Spalt links neben der Bildkarte */

/* --- Zeitstrahl: weiche, geschwungene rote Linie (SVG-Pfad, von Punkt zu Punkt) ---
   Der Pfad wird in js/main.js aus den echten Punkt-Positionen berechnet und bei
   Größenänderung neu gezeichnet. Liegt VOR den Karten, hinter den Punkten (z 4). */
.ref-thread {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.ref-thread-path {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Faden + Punkte sind statisch – keine Bewegung. */

.section-cta { text-align: center; margin-top: 56px; }

/* =========================================================
   Scroll-Reveal  ("Aufkommen-Effekt")
   greift nur mit aktivem JS (.js-anim auf <html>)
   ========================================================= */
/* Seite sitzt fest im Viewport: kein seitliches Verschieben (weißer Rand),
   kein Gummiband-Overscroll, kein Pinch-/Doppeltipp-Zoom auf Touch-Geräten */
html, body { overflow-x: clip; overscroll-behavior: none; }
body { touch-action: pan-x pan-y; }

.js-anim .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js-anim .reveal.reveal--left  { transform: translate(-46px, 10px); }
.js-anim .reveal.reveal--right { transform: translate(46px, 10px); }
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
  /* Abdunkelung hinter dem Drawer */
  .nav-scrim {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 1;
    background: rgba(19, 32, 63, .45);
    opacity: 0;
    transition: opacity .3s var(--ease);
  }
  body.nav-open .nav-scrim { opacity: 1; }
  /* Drawer: fährt vom rechten Rand ein (X zum Schließen sitzt oben rechts) */
  .nav {
    position: fixed; top: 0; right: 0; height: 100dvh; z-index: 2;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    width: min(320px, 86vw);
    background: #fff;
    padding: 88px 24px 24px;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .34s var(--ease), visibility 0s linear .34s;
  }
  /* Wortmarke oben im Drawer */
  .nav::before {
    content: "ZONING";
    position: absolute; top: 26px; left: 24px;
    font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem;
    letter-spacing: .22em; color: var(--blue);
  }
  body.nav-open .nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform .34s var(--ease);
  }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .nav a.active:not(.btn)::after { display: none; }
  .nav .nav-cta { text-align: center; justify-content: center; margin-top: 16px; border-bottom: none; }
  body.nav-open { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) {
    .nav, .nav-scrim { transition: none; }
  }

  .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; }
  .founders .two-col { grid-template-columns: 1fr; }

  /* Zickzack stapeln: Bild oben (volle Breite), Text darunter */
  .ref-row { grid-template-columns: 1fr; }
  .ref-media,
  .ref-text,
  .ref-row:nth-child(even) .ref-media,
  .ref-row:nth-child(even) .ref-text {
    grid-column: 1 / -1;
    grid-row: auto;
    padding: 0;
    text-align: left;
  }
  .ref-media { margin-bottom: 20px; }
  .ref-media img,
  .ref-row:nth-child(even) .ref-media img {
    aspect-ratio: 16 / 9;       /* auch mobil nur den Hero zeigen */
    height: auto;
  }
  /* Text-Elemente auch in geraden Reihen links ausrichten */
  .ref-row:nth-child(even) .ref-text h3 { justify-content: flex-start; }
  .ref-row:nth-child(even) .ref-eyebrow,
  .ref-row:nth-child(even) .ref-desc,
  .ref-row:nth-child(even) .ref-divider { margin-left: 0; }
  .ref-row:nth-child(even) .ref-checks { justify-content: flex-start; }
  /* Zeitstrahl auf Mobil ausblenden */
  .ref-node,
  .ref-thread { display: none; }
  .js-anim .reveal.reveal--left,
  .js-anim .reveal.reveal--right { transform: translateY(28px); }
}
@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

/* ---- Responsive für die neuen Startseiten-Bauteile ---- */
@media (max-width: 860px) {
  /* Hero stapeln */
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero--split h1 { max-width: none; }
  .hero-media figcaption { text-align: left; }


  /* Kennzahlen -> untereinander */
  .stats-grid { grid-template-columns: 1fr; }
  .stat { padding: 26px 0; }
  .stat + .stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }

  /* Team + Zitat -> untereinander, Team 2 Spalten */
  .team-layout { grid-template-columns: 1fr; gap: 36px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* Abschluss-CTA -> untereinander */
  .closing-inner { grid-template-columns: 1fr; }
  .closing h2 { max-width: none; }
}

/* =========================================================
   Leistungen-Seite – Omnichannel-Layout (.lp-*)
   ========================================================= */
.lp-eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .74rem; font-weight: 700; color: #97a3b6;
  margin: 0 0 1.1em;
}
.lp-eyebrow.center { text-align: center; }
.lp-eyebrow.on-dark { color: #8ea0c0; }
.chev { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* Hero */
.lp-hero { background: var(--white); padding: clamp(44px,6vw,84px) 0 clamp(36px,5vw,64px); }
.lp-hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; }
.lp-hero-text h1 { margin-bottom: .4em; }
.lp-hero-text .lead { color: var(--muted); font-size: clamp(1.05rem,1rem+.4vw,1.2rem); max-width: 48ch; margin-bottom: 32px; }
.lp-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.lp-hero-media { width: 100%; }
.lp-hero-graphic { width: 100%; height: auto; display: block; }

/* Kanäle */
.lp-channels { background: var(--white); padding: clamp(34px,4vw,52px) 0; border-top: 1px solid var(--border); }
.lp-channel-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lp-channel-track {
  list-style: none; margin: 0; padding: 8px 0;
  display: flex; width: max-content;
  animation: lp-marquee 42s linear infinite;
}
.lp-channels:hover .lp-channel-track { animation-play-state: paused; }
.lp-channel-track li {
  flex: 0 0 auto; width: clamp(118px, 13vw, 164px);
}
.lp-channel-link {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; font-size: .9rem; font-weight: 600; color: var(--ink);
  text-decoration: none; cursor: pointer; border-radius: 14px;
  transition: color .2s var(--ease);
}
.lp-channel-link:hover { color: var(--red); }
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .lp-channel-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; row-gap: 28px; }
  .lp-channel-track li[aria-hidden="true"] { display: none; }
}
.lp-channel-ic { color: var(--blue); line-height: 0; display: inline-flex; padding: 13px; border-radius: 50%; background: transparent; transition: background .2s var(--ease), transform .2s var(--ease); }
.lp-channel-track li:hover .lp-channel-ic,
.lp-channel-link:focus-visible .lp-channel-ic { background: var(--blue-light); transform: translateY(-4px) scale(1.12); }
.lp-channel-ic svg { width: 30px; height: 30px; display: block; }

.lp-service-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(28px,3vw,40px); }
.lp-service-ic { display: block; color: var(--red); line-height: 0; margin-bottom: 18px; }
.lp-service-ic svg { width: 34px; height: 34px; }
.lp-service h3 { margin-bottom: .45em; }
.lp-service p { color: var(--muted); margin: 0; font-size: .98rem; }

/* Kundenstory + Stimme */
.lp-case { background: var(--white); }
.lp-case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.lp-story { background: var(--blue-dark); color: #fff; border-radius: var(--radius); padding: clamp(28px,3vw,40px); }
.lp-story h3 { color: #fff; font-size: clamp(1.3rem,1.1rem+.8vw,1.6rem); margin-bottom: .5em; }
.lp-story-text { color: #c2cfe4; font-size: .98rem; margin-bottom: 28px; max-width: 46ch; }
.lp-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 28px; }
.lp-stat-num { display: block; font-family: var(--font-serif); font-size: clamp(1.55rem,1.2rem+1vw,2rem); font-weight: 600; color: #fff; line-height: 1; }
.lp-stat-label { display: block; color: #97a6c0; font-size: .82rem; margin-top: 6px; line-height: 1.4; }
.lp-story-link { display: inline-flex; align-items: center; gap: .4em; color: #fff; font-weight: 600; }
.lp-story-link .chev { color: var(--red); }
.lp-quote { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.lp-quote-mark { font-family: var(--font-serif); color: var(--red); font-size: 3.6rem; line-height: .9; height: .5em; }
.lp-quote blockquote { font-family: var(--font-serif); font-size: clamp(1.15rem,1rem+.7vw,1.45rem); line-height: 1.5; color: var(--ink); margin: 10px 0 auto; padding: 0; border: 0; }
.lp-quote-author { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.lp-avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(160deg,var(--blue),#3a4d78); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.lp-quote-meta strong { display: block; color: var(--blue); font-weight: 700; }
.lp-quote-meta span { color: var(--muted); font-size: .9rem; }

/* (entfernt: altes 2-spaltiges Leistungen-FAQ – ersetzt durch einheitliches .faq2) */

/* Abschluss-CTA */
.lp-cta { background: var(--blue-dark); color: #fff; position: relative; overflow: hidden; }
.lp-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap; position: relative; z-index: 1; }
.lp-cta-text h2 { color: #fff; margin: 0 0 .35em; }
.lp-cta-text p { color: #c2cfe4; margin: 0; }
.lp-cta-btn { flex: 0 0 auto; }
.lp-cta::after { content: ""; position: absolute; right: 0; bottom: 0; width: clamp(120px,18vw,200px); height: clamp(90px,13vw,150px); background: var(--red); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: .92; }

/* Responsive – Leistungen */
@media (max-width: 1000px) {
  .lp-service-grid { grid-template-columns: repeat(2,1fr); gap: 34px 28px; }
}
@media (max-width: 860px) {
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-hero-media { max-width: 480px; margin: 4px auto 0; }
  .lp-case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .lp-service-grid { grid-template-columns: 1fr; }
  .lp-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  .lp-cta-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   Startseite – Laufband, Klick-Karten, Termin
   ========================================================= */

/* Laufendes Unternehmens-Band */
.marquee-section {
  padding: clamp(40px, 5vw, 68px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
  overflow: hidden;
}
.marquee-section .kicker { margin-bottom: 26px; }
.marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-scroll 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .85vw, 1.7rem);
  color: var(--blue);
  padding: 0 clamp(26px, 4vw, 58px);
  transition: color .18s var(--ease);
}
.marquee__item::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin-left: clamp(26px, 4vw, 58px);
  opacity: .55;
}
.marquee__item:hover { color: var(--red); }
.marquee-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
  font-size: .87rem;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
}
.marquee-hint svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--red); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
  }
}

/* Klickbare Leistungs-Karten */
a.card { color: inherit; }
.card--link { display: flex; flex-direction: column; }
.card--link p { margin-bottom: 18px; }
.card--link .card-arrow {
  margin-top: auto;
  align-self: flex-start;
  color: var(--red);
  font-size: 1.2rem; line-height: 1;
  transition: transform .2s var(--ease);
}
.card--link:hover .card-arrow { transform: translateX(5px); }

/* Termin-Streifen */
.cta-strip { padding: clamp(28px, 4vw, 48px) 0; text-align: center; }
.cta-strip .btn { font-size: 1.05rem; padding: 15px 32px; }
/* Termin-Button direkt unter dem Leistungen-Brett */
.pillars-cta { text-align: center; margin-top: clamp(30px, 3.5vw, 48px); }
.pillars-cta .btn { font-size: 1.05rem; padding: 15px 32px; }

/* bewusster Luft-Abstand */
.spacer { height: clamp(24px, 6vw, 80px); }

/* größere Initialen im Team-Platzhalter */
.member .avatar { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; letter-spacing: .02em; }

/* =========================================================
   Startseite – Bewertungen (Platzhalter), Terminkalender
   ========================================================= */

/* Kundenbewertungen – Struktur reserviert, noch ohne echte Inhalte */
.testimonials { background: var(--bg-soft); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.review-card {
  background: var(--white);
  border: 1px dashed #cdd8e8;
  border-radius: var(--radius);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.review-q { font-family: var(--font-serif); font-size: 2.6rem; line-height: .4; color: #c7d3e6; }
.review-card .sk { display: block; background: #e9eef5; border-radius: 6px; }
.sk--line { height: 12px; }
.sk--short { width: 58%; }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.sk--avatar { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; }
.sk--name { height: 12px; width: 92px; }

/* =========================================================
   FAQ – einheitliches Karten-Akkordeon mit Icon (Redesign)
   EINE Gestaltung für alle Seiten (Start, Referenzen, Leistungen).
   ========================================================= */
.faq2 { background: var(--white); }

.faq2-head { text-align: center; max-width: 760px; margin: 0 auto; }
.faq2-title {
  font-family: var(--font-serif); font-weight: 700; color: var(--blue);
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); line-height: 1.1;
  letter-spacing: -.015em; margin: 0;
}
.faq2-sub { color: var(--muted); font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); margin: .75rem 0 0; }

.faq2-list { max-width: 960px; margin: clamp(34px,4.5vw,54px) auto 0; display: flex; flex-direction: column; gap: 16px; }

.faq2 .faq-item {
  border: 1px solid var(--border); border-radius: 16px; background: #fff;
  overflow: hidden; box-shadow: 0 2px 8px rgba(19,32,63,.03);
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.faq2 .faq-item:first-child { border-top: 1px solid var(--border); }
.faq2 .faq-item:hover { border-color: #d3dceb; box-shadow: 0 6px 16px rgba(19,32,63,.05); }
.faq2 .faq-item.open { box-shadow: var(--shadow-md); border-color: transparent; }

.faq2 .faq-q {
  gap: 20px; align-items: center;
  padding: clamp(20px,2.2vw,26px) clamp(22px,2.6vw,30px);
  font-size: clamp(1.04rem,1rem+.25vw,1.18rem); font-weight: 600; color: var(--blue);
}
.faq2 .faq-q:hover { color: var(--red); }
.faq2 .faq-q:hover .faq2-ic { background: rgba(178,63,66,.14); }

.faq2-ic {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(178,63,66,.08); color: var(--red);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.faq2-ic svg { width: 23px; height: 23px; display: block; }
.faq2 .faq-item.open .faq2-ic { background: var(--red); color: #fff; }

.faq2 .faq-qt { flex: 1 1 auto; line-height: 1.4; }
.faq2 .faq-q .icon { flex: 0 0 auto; width: 22px; text-align: center; color: var(--red); font-size: 1.7rem; line-height: 1; font-weight: 300; }

.faq2 .faq-a p {
  margin: 0; color: var(--muted); max-width: none; font-size: 1.02rem; line-height: 1.7;
  padding: 0 clamp(22px,2.6vw,30px) clamp(20px,2.2vw,26px) 92px;
}
.faq2 .faq-item.open .faq-a { max-height: 560px; }

@media (max-width: 600px) {
  .faq2 .faq-q { gap: 14px; padding: 18px; }
  .faq2-ic { width: 40px; height: 40px; }
  .faq2-ic svg { width: 20px; height: 20px; }
  .faq2 .faq-a p { padding: 0 18px 18px; }
}

@media (max-width: 760px) {
  .review-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Referenzen-Seite – Kontakt
   ========================================================= */
.ref-contact { background: var(--bg-soft); }

/* =========================================================
   Startseite – Hero mit Bausteinen (Strategie/Positionierung/Vertrieb)
   ========================================================= */
.hero--home {
  text-align: left;
  padding: clamp(44px, 6vw, 100px) 0 clamp(52px, 7vw, 108px);
  background:
    radial-gradient(1200px 700px at 84% 16%, #f1f5fb 0%, rgba(241,245,251,0) 56%),
    linear-gradient(180deg, #fcfdfe 0%, var(--white) 58%);
  overflow: hidden;
}
.hero--home .hero-grid {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.2fr);
  gap: clamp(16px, 2.5vw, 56px);
  align-items: center;
  padding-left: max(24px, calc((100% - 1140px) / 2 + 24px));   /* linke Kante = Container */
  padding-right: clamp(16px, 2vw, 32px);                       /* Grafik fast bis zum rechten Rand */
}
.hero--home .hero-copy { max-width: 600px; }
.hero--home h1 {
  max-width: 14ch;
  margin: 0 0 .42em;
  font-size: clamp(2.9rem, 1.9rem + 4vw, 4.8rem);   /* größer = mehr Wirkung */
  line-height: 1.04;
  letter-spacing: -.022em;
}
.hero--home .eyebrow { margin-bottom: 1.15em; }
.hero--home .lead {
  color: var(--muted);
  font-size: clamp(1.08rem, 1rem + .5vw, 1.25rem);
  line-height: 1.65;
  max-width: 48ch;
  margin: 0 0 34px;
}
.hero--home .hero-actions { display: flex; gap: 14px 22px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }
/* primärer CTA klar dominant: größer + spürbarer Hover-Lift */
.hero--home .hero-actions .btn-cta { padding: 16px 34px; font-size: 1.05rem; border-radius: var(--radius); }
/* Vertrauens-Zeile direkt unter den CTAs (reduziert Reibung am Entscheidungspunkt) */
.hero-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 28px 0 0; }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--muted); }
.hero-proof li::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ic-arrow { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

.hero-trust { margin-top: clamp(34px, 5vw, 56px); }
.hero-trust-label { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: #9aa6b8; margin: 0 0 16px; }
.hero-logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 38px; padding: 0; margin: 0; }
.hero-logos li { font-family: var(--font-sans); font-weight: 800; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); letter-spacing: .04em; color: #9aa6b8; }

.hero-visual { position: relative; }
.hero-blocks { width: 100%; height: auto; display: block; overflow: visible; }
/* Echtes Render-Bild (sobald assets/hero-bausteine.png existiert; sonst greift das SVG oben) */
.hero-render { width: 100%; height: auto; display: block; }

/* Hero-Treppe: Glas-Bloecke (Bild) + Live-Beschriftung an den Verbindungspunkten */
.hero-stairs { position: relative; }
.hero-stairs-img { width: 70%; height: auto; display: block; }
.hero-annot { list-style: none; margin: 0; padding: 0; }
.hero-annot-item {
  position: absolute;
  top: var(--y);
  left: 70.5%;
  width: 28.5%;
  transform: translateY(-50%);
}
.hero-annot-item strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(.92rem, .82rem + .35vw, 1.06rem);
  line-height: 1.18;
  letter-spacing: -.005em;
}
.hero-annot-desc {
  display: block;
  color: var(--muted);
  font-size: clamp(.78rem, .72rem + .2vw, .9rem);
  line-height: 1.4;
  margin-top: 5px;
}
.hero-annot-dot { display: none; }
@media (max-width: 880px) {
  .hero-stairs-img { width: 100%; }
  .hero-annot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; margin-top: 22px; }
  .hero-annot-item { position: relative; top: auto; left: auto; width: auto; transform: none; padding-left: 17px; }
  .hero-annot-dot { display: block; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; }
  .hero-annot--vertrieb .hero-annot-dot { background: var(--red); }
  .hero-annot--positionierung .hero-annot-dot { background: var(--blue); }
  .hero-annot--strategie .hero-annot-dot { background: #9aa7bd; }
}
@media (max-width: 560px) {
  .hero-annot { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 880px) {
  .hero--home .hero-grid { grid-template-columns: 1fr; gap: 12px; padding-left: 24px; padding-right: 24px; max-width: 680px; margin: 0 auto; }
  .hero--home .hero-copy { max-width: none; }
  .hero--home h1 { max-width: 18ch; }
  .hero-visual { width: 100%; max-width: 620px; margin: 12px auto 0; }
  .hero--home .hero-actions { gap: 12px; }
  .hero--home .hero-actions .btn-cta { width: 100%; justify-content: center; }  /* daumenfreundlich */
  .hero-proof { gap: 8px 18px; }
}
@media (max-width: 560px) {
  .hero-blocks .blk-labels { display: none; }   /* Beschriftung auf kleinen Schirmen ausblenden */
}


/* =========================================================
   Leistungen im Detail – Zickzack (links/rechts) mit Text
   ========================================================= */
.svc-detail { background: var(--bg-soft); }
.svc-detail-head { text-align: center; max-width: 720px; margin: 0 auto clamp(34px,5vw,58px); }
.svc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px,1.6vw,24px); max-width: 1180px; margin: 0 auto; }
.svc-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid #eef1f6; border-radius: 20px; padding: clamp(24px,2vw,32px); box-shadow: 0 6px 18px rgba(20,30,60,.05); scroll-margin-top: 96px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.svc-tile:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(20,30,60,.09); border-color: #e0e6f0; }
.svc-tile-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--blue-light); color: var(--red); margin-bottom: 20px; transition: transform .3s var(--ease); }
.svc-tile-ico svg { width: 26px; height: 26px; }
.svc-tile:hover .svc-tile-ico { transform: scale(1.08); }
.svc-tile .svc-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.svc-card {
  position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(155deg, #28427a 0%, var(--blue) 46%, var(--blue-dark) 100%);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
}
.svc-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 44%; height: 44%; background: var(--red); opacity: .16; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.svc-bignum { position: absolute; top: 6px; left: 22px; font-family: var(--font-serif); font-weight: 700; font-size: clamp(5rem,11vw,8.5rem); line-height: 1; color: #fff; opacity: .10; }
.svc-ico { position: relative; color: #fff; line-height: 0; }
.svc-ico svg { width: clamp(64px,9vw,108px); height: clamp(64px,9vw,108px); display: block; }
.svc-kicker { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--red); margin: 0 0 .7em; }
.svc-body h3 { font-size: clamp(1.3rem,1.05rem+.6vw,1.55rem); color: var(--blue); margin: 0 0 .45em; overflow-wrap: anywhere; hyphens: auto; }
.svc-lead { color: var(--ink); font-size: 1.06rem; line-height: 1.6; margin: 0 0 1.1em; }
.svc-points { list-style: none; margin: 0 0 1.5em; padding: 0; display: grid; gap: .62em; }
.svc-points li { position: relative; padding-left: 28px; color: var(--muted); line-height: 1.55; }
.svc-points li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 6px; height: 11px; border: solid var(--red); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.svc-cta { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: var(--blue); margin-top: auto; }
.svc-cta span { color: var(--red); transition: transform .2s var(--ease); }
.svc-cta:hover span { transform: translateX(4px); }
/* Detail-Leistung mit echtem Bild (z. B. Leistung 10 – Facility Management) */
.svc-scene--photo { max-width: 520px; display: flex; align-items: center; justify-content: center; }
.svc-photo { display: block; width: 100%; height: auto; }
.svc-photo-fb { width: 100%; }
@media (max-width: 980px) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .svc-list { grid-template-columns: 1fr; max-width: 440px; } }
@media (max-width: 860px) {
  .svc-card { aspect-ratio: 16 / 9; width: 100%; max-width: 520px; }
}

/* ===== Social-Media-Cluster (Leistung 04 · Bento) ===== */
.sm-cluster {
  width: 100%; max-width: 440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(9px, 1.5vw, 14px); align-items: start;
  font-family: var(--font-sans);
}
.sm-card {
  background: #fff; border: 1px solid #edf1f7; border-radius: 16px;
  box-shadow: 0 16px 32px -18px rgba(22,40,74,.32), 0 3px 8px -4px rgba(22,40,74,.12);
  will-change: transform, opacity;
}
/* Pop-up-Einblendung, sobald das Cluster im Blick ist */
.sm-cluster.is-on .sm-card {
  animation: smPop .55s cubic-bezier(.2,.7,.3,1.4) both;
  animation-delay: calc(var(--i, 0) * .07s);
}
@keyframes smPop {
  0%   { opacity: 0; transform: scale(.5) translateY(10px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* SVGs im Cluster nicht von .svc-scene svg{width:100%} aufblaehen lassen */
.sm-cluster svg { width: auto; height: auto; display: block; }

/* Zeile 1 – Icon-Kacheln */
.sm-tile { aspect-ratio: 1 / 1; display: grid; place-items: center; position: relative; }
.sm-heart { background: var(--red); border-color: transparent; border-radius: 50%;
  box-shadow: 0 16px 32px -18px rgba(22,40,74,.32), 0 3px 8px -4px rgba(22,40,74,.12); }
.sm-cluster .sm-heart svg { width: 46%; fill: #fff; }
.sm-cluster .sm-bell svg { width: 44%; fill: var(--blue); }
.sm-send { border-radius: 50%; }
.sm-cluster .sm-send svg { width: 44%; fill: var(--blue); }
.sm-likes { display: flex; align-items: center; justify-content: center; gap: 7px; }
.sm-cluster .sm-likes svg { width: 24px; max-width: 26%; fill: var(--red); }
.sm-likes b { font-weight: 700; font-size: clamp(.95rem, 2.6vw, 1.15rem); color: var(--blue); }
.sm-badge { position: absolute; top: 7px; right: 7px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--red); color: #fff; border-radius: 9px; box-shadow: 0 0 0 3px #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

/* Zeile 2 – Follower-Pill + Chat-Bubble */
.sm-follow { grid-column: span 2; display: flex; align-items: center; gap: 11px; border-radius: 999px;
  padding: clamp(11px,2.2vw,15px) clamp(15px,2.6vw,20px); }
.sm-cluster .sm-follow svg { width: 24px; height: 24px; flex: none; fill: var(--red); }
.sm-follow b { display: block; font-weight: 700; font-size: clamp(1.05rem,3vw,1.3rem); color: var(--blue); line-height: 1.05; }
.sm-follow small { display: block; color: var(--muted); font-size: .8rem; }
.sm-chat { grid-column: span 2; position: relative; display: grid; gap: 8px; align-content: center;
  min-height: clamp(58px,12vw,74px); padding: 0 clamp(16px,3vw,22px); border-radius: 18px; }
.sm-chat .sm-line { height: 7px; border-radius: 4px; background: #cdd7e8; }
.sm-chat .sm-line:nth-child(1) { width: 88%; }
.sm-chat .sm-line:nth-child(2) { width: 66%; }
.sm-chat .sm-line--s { width: 40%; }
.sm-chat::after { content: ""; position: absolute; left: 22px; bottom: -7px; width: 16px; height: 13px;
  background: #fff; border-left: 1px solid #edf1f7; border-bottom: 1px solid #edf1f7;
  clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* Zeile 3 – Reichweite-Karte + Post-Karte */
.sm-reach { grid-column: span 2; align-self: stretch; display: flex; flex-direction: column; gap: 6px;
  padding: clamp(13px,2.6vw,17px); border-radius: 18px; }
.sm-reach-top { display: flex; align-items: center; justify-content: space-between; }
.sm-reach-top span { color: var(--ink); font-size: .82rem; font-weight: 600; }
.sm-up { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fbe7ea; }
.sm-cluster .sm-up svg { width: 14px; height: 14px; fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sm-reach strong { font-size: clamp(1.3rem,3.4vw,1.7rem); color: var(--blue); font-weight: 800; line-height: 1; }
.sm-bars { margin-top: auto; display: flex; align-items: flex-end; gap: clamp(5px,1.1vw,8px);
  height: clamp(46px,9vw,62px); padding-top: 8px; border-top: 1px solid #eef2f8; }
.sm-bars i { flex: 1; height: var(--h, 40%); border-radius: 4px 4px 0 0; background: #d7deea; }
.sm-bars i.is-peak { background: var(--red); }
.sm-post { grid-column: span 2; align-self: stretch; display: flex; flex-direction: column; overflow: visible; padding: 0; position: relative; }
.sm-post-head { display: flex; align-items: center; gap: 8px; padding: clamp(9px,1.8vw,12px); }
.sm-ava { width: 18px; height: 18px; border-radius: 50%; background: var(--blue); flex: none; }
.sm-nm { display: grid; gap: 4px; flex: 1; }
.sm-nm i { height: 5px; border-radius: 3px; background: #cdd7e8; }
.sm-nm i:nth-child(1) { width: 54%; }
.sm-nm i:nth-child(2) { width: 34%; background: #dde4ef; }
.sm-dots { color: #9aa6b8; font-weight: 700; line-height: 0; font-size: 1.15rem; }
.sm-post-img { aspect-ratio: 16 / 10; background: linear-gradient(135deg,#e6ecf6,#d3deef); display: grid; place-items: center; }
.sm-cluster .sm-post-img svg { width: 42%; fill: #b9c6dc; }
.sm-post-foot { display: flex; align-items: center; gap: 10px; padding: clamp(8px,1.6vw,11px) clamp(9px,1.8vw,12px); }
.sm-cluster .sm-fi { width: 19px; height: 19px; color: #5b6678; fill: #5b6678; }
.sm-cluster .sm-fi--red { fill: var(--red); color: var(--red); }
.sm-fi-sp { flex: 1; }
@media (max-width: 420px) {
  .sm-cluster { gap: 8px; }
  .sm-badge { box-shadow: 0 0 0 2px #fff; }
}
/* Post-Like-Button: zufaellig herumfliegende Herzen (per JS gespawnt) */
.sm-hearts { position: absolute; left: 9px; bottom: 13px; width: 14px; height: 14px; pointer-events: none; z-index: 3; }
.sm-cluster .sm-ph2 { position: absolute; left: 0; bottom: 0; width: 13px; height: 13px; will-change: transform, opacity; }
.sm-cluster .sm-ph2 svg { width: 100%; height: 100%; fill: var(--red); display: block; }
/* Herz-Button oben links: dauerhafter Herzschlag */
.sm-cluster.is-on .sm-heart svg { animation: smBeat 1.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes smBeat {
  0%, 30%, 72%, 100% { transform: scale(1); }
  14% { transform: scale(1.26); }
  44% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .sm-cluster.is-on .sm-card { animation: none; }
  .sm-cluster.is-on .sm-heart svg { animation: none; }
  .sm-hearts { display: none; }
}

.lp-hero-text h1 .accent { color: var(--red); }

/* Animierte Punkte: fliessen entlang der Linien in den Z-Knoten */
@keyframes lp-flow-dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -53; } }
.lp-hero-graphic .lp-flow { animation: lp-flow-dash 1.5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .lp-hero-graphic .lp-flow { animation: none; } }

/* O-Ring-Knoten: roter Bogen lädt sich langsam über den Navy-Ring auf
   (Umfang bei r=36 ≈ 226.2), hält kurz voll und beginnt von vorn. */
.lp-hero-graphic { overflow: visible; }
.z-charge { animation: z-charge 12s ease-in-out infinite; }
@keyframes z-charge {
  0%   { stroke-dashoffset: 226.2; }   /* leer – nur der Navy-Ring */
  78%  { stroke-dashoffset: 0; }       /* voll aufgeladen */
  100% { stroke-dashoffset: 0; }       /* kurz voll halten */
}
@media (prefers-reduced-motion: reduce) {
  /* statisch im Logo-Zustand (70 % rot) statt Animation */
  .z-charge { animation: none; stroke-dashoffset: 68.2; }
}

.hero-blocks-img { width: 100%; height: auto; display: block; }

.hero-visual { min-width: 0; }

/* Hero – Knoten-Diagramm (Flow) */
.hero--home .eyebrow { color: var(--red); }
.hero--home .eyebrow::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 14px; background: var(--red); border-radius: 2px; }
.hero-logos li { color: #34425e; font-weight: 700; letter-spacing: .08em; }
.hero-flow { width: 100%; height: auto; display: block; overflow: visible; }
/* Mobile Variante der Sequenz (vertikaler Fächer) – erst unter 760px sichtbar */
.hero-flow-m { display: none; width: 100%; height: auto; overflow: visible; }

/* Hero-Flow (Wachstums-Sequenz): baut sich einmal auf, danach dauerhafte
   Loop-Animation – fließende Punkte auf den Bahnen + Puls-Ringe an den Zielen.
   Zeitplan über --at (Start) / --du (Dauer) / --dl (Loop-Verzögerung) im Markup. */
.hf-draw { stroke-dashoffset: 100; animation: hfDraw var(--du, .6s) cubic-bezier(.4, 0, .2, 1) var(--at, 0s) forwards; }
.hf-pop { opacity: 0; transform-box: fill-box; transform-origin: center; animation: hfPop .45s cubic-bezier(.34, 1.4, .5, 1) var(--at, 0s) forwards; }
.hf-in { opacity: 0; animation: hfIn .5s var(--ease) var(--at, 0s) forwards; }
.hf-show { opacity: 0; animation: hfShow .5s linear var(--at, 0s) forwards; }
.hf-fade { stroke-dashoffset: 100; animation: hfDraw var(--du, .6s) cubic-bezier(.4, 0, .2, 1) var(--at, 0s) forwards, hfFade .45s linear calc(var(--at, 0s) + var(--du, .6s) + .2s) forwards; }
.hf-dot { opacity: 0; animation: hfShow .6s linear var(--dl, 5.3s) forwards, hfFlow var(--d, 3s) linear var(--dl, 5.3s) infinite; }
.hf-pulse { opacity: 0; transform-box: fill-box; transform-origin: center; animation: hfPulse 3.6s cubic-bezier(.25, .6, .4, 1) var(--dl, 6s) infinite; }
@keyframes hfDraw { to { stroke-dashoffset: 0; } }
@keyframes hfPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes hfIn { from { opacity: 0; transform: translateX(-9px); } to { opacity: 1; transform: none; } }
@keyframes hfShow { to { opacity: 1; } }
@keyframes hfFade { to { opacity: 0; } }
@keyframes hfFlow { to { stroke-dashoffset: -100; } }
@keyframes hfPulse {
  0% { opacity: 0; transform: scale(.72); }
  10% { opacity: .5; }
  55%, 100% { opacity: 0; transform: scale(1.42); }
}
@media (prefers-reduced-motion: reduce) {
  .hf-draw, .hf-pop, .hf-in, .hf-show, .hf-fade, .hf-dot, .hf-pulse { animation: none; }
  .hf-draw { stroke-dashoffset: 0; }
  .hf-pop, .hf-in, .hf-show { opacity: 1; transform: none; }
  .hf-fade, .hf-dot, .hf-pulse { opacity: 0; }
}
@media (max-width: 760px) {
  /* Mobil ersetzt der vertikale Fächer die Desktop-Grafik: gleiche
     Choreografie, kompakter aufgebaut, Beschriftung deutlich größer */
  .hero--home .hero-visual { max-width: 480px; margin: 18px auto 0; }
  .hero--home .hero-flow { display: none; }
  .hero--home .hero-flow-m { display: block; }
}

/* =========================================================
   Kontakt-Modal (Pop-up) – per js/main.js in <body> injiziert
   Navy Branding-Panel (links) + weißes Anfrage-Formular (rechts)
   ========================================================= */

/* Seite im Hintergrund nicht scrollen, solange das Modal offen ist */
body.cmodal-open { overflow: hidden; }
/* Hintergrund-Bewegung ruhen lassen, solange das Modal offen ist
   (ruhigere Optik + deutlich günstigeres backdrop-filter-Rendering) */
body.cmodal-open .marquee__track,
body.cmodal-open .cta-flow,
body.cmodal-open .cf-dot { animation-play-state: paused !important; }

.cmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 44px);
  background: rgba(9, 16, 33, .6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.cmodal[hidden] { display: none; }          /* schlägt .cmodal{display:flex} */
.cmodal.is-open { opacity: 1; }

.cmodal__dialog {
  position: relative;
  width: min(86vw, 1200px);
  max-height: min(92vh, 900px);
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(8, 14, 32, .24), 0 8px 20px rgba(8, 14, 32, .14);
  opacity: 0;
  transform: translateY(16px) scale(.965);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
  outline: none;
}
.cmodal.is-open .cmodal__dialog { opacity: 1; transform: none; }

.cmodal__body {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  max-height: min(92vh, 900px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #0d1a32;            /* zeigt sich in der diagonalen Kante des Formularteils */
}

/* Schließen-Button (immer sichtbar, oben rechts) */
.cmodal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .94);
  color: var(--blue);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(8, 14, 32, .14);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: transform .25s var(--ease), background .2s var(--ease),
              color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cmodal__close svg { width: 20px; height: 20px; }
.cmodal__close:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  transform: rotate(90deg);
  box-shadow: 0 6px 16px rgba(8, 14, 32, .18);
}

/* ---------- Linke Seite: Navy Branding-Panel ---------- */
.cmodal__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: clamp(30px, 3.2vw, 54px);
  color: #e9eefb;
  background:
    radial-gradient(120% 110% at -8% 112%, #0a1426 0%, transparent 54%),
    linear-gradient(150deg, #1a2c50 0%, #14233f 50%, #0d1a32 100%);
}
.cmodal__brand::after {           /* feine Körnung für Tiefe */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cmodal__orbit {
  position: absolute;
  left: -46px;
  bottom: -56px;
  z-index: 0;
  width: clamp(190px, 22vw, 290px);
  pointer-events: none;
}
.cmodal__orbit svg { width: 100%; height: auto; display: block; }
.cmodal__brand-top,
.cmodal__brand-foot { position: relative; z-index: 1; }
.cmodal__brand-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cmodal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .76rem;
  font-weight: 700;
  color: #dc6068;
  margin-bottom: 16px;
}
.cmodal__eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
}
.cmodal__title {
  margin: 0 0 14px;
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(1.8rem, 1.4rem + 1.7vw, 2.6rem);
  line-height: 1.07;
  letter-spacing: -.02em;
}
.cmodal__lead {
  margin: 0;
  max-width: 34ch;
  color: rgba(225, 232, 247, .82);
  font-size: 1.02rem;
  line-height: 1.6;
}

.cmodal__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cmodal__contact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  margin: -2px -12px;
  border-radius: 14px;
  color: #eaf0fb;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
a.cmodal__contact:hover {
  background: rgba(255, 255, 255, .07);
  transform: translateX(3px);
  color: #fff;
}
.cmodal__contact-ic {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .03);
  color: var(--red);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
a.cmodal__contact:hover .cmodal__contact-ic { background: var(--red); border-color: var(--red); color: #fff; }
.cmodal__contact-ic svg { width: 20px; height: 20px; }
.cmodal__contact-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cmodal__contact-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: rgba(225, 232, 247, .55);
}
.cmodal__contact-val { font-size: .98rem; font-weight: 500; color: #fff; word-break: break-word; }

.cmodal__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.cmodal__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: #dfe7f6;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .11);
  padding: 7px 13px;
  border-radius: 999px;
}
.cmodal__trust svg { width: 15px; height: 15px; color: #aebdd8; flex: 0 0 auto; }

/* ---------- Rechte Seite: weißes Anfrage-Formular ---------- */
.cmodal__panel {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
  padding: clamp(28px, 3vw, 52px) clamp(28px, 3vw, 52px) clamp(28px, 3vw, 52px) clamp(40px, 6vw, 82px);
  background: #fff;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%);
}
.cmodal__panel-head { display: flex; flex-direction: column; gap: 14px; }
.cmodal__form-title {
  margin: 0;
  color: var(--blue);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
}
.cmodal__form-sub { margin: 0; max-width: 46ch; color: var(--muted); font-size: 1rem; }
.cmodal__meta {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.cmodal__meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 7px 13px;
  border-radius: 999px;
}
.cmodal__meta svg { width: 16px; height: 16px; color: var(--red); flex: 0 0 auto; }

.cmodal-form { display: flex; flex-direction: column; gap: 16px; }
.cmodal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmodal-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cmodal-field label { font-size: .82rem; font-weight: 600; color: var(--blue); }
.cmodal-field .opt { color: var(--muted); font-weight: 500; }

.cmodal-input,
.cmodal-select,
.cmodal-textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fbfcfe;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.cmodal-input::placeholder,
.cmodal-textarea::placeholder { color: #9aa4b6; }
.cmodal-input:focus,
.cmodal-select:focus,
.cmodal-textarea:focus {
  outline: none;
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(178, 63, 66, .13);
}
.cmodal-textarea { min-height: 104px; resize: vertical; }

.cmodal-selectwrap { position: relative; }
.cmodal-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; cursor: pointer; }
.cmodal-select:invalid { color: #9aa4b6; }     /* Platzhalter-Option dezent */
.cmodal-caret {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-68%) rotate(45deg);
  pointer-events: none;
}

/* Icons in den Eingabefeldern */
.cmodal-inputwrap { position: relative; }
.cmodal-input-ic {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: #9aa6bb; pointer-events: none;
}
.cmodal-input-ic svg { width: 100%; height: 100%; display: block; }
.cmodal-input--ico { padding-left: 44px; }
.cmodal-inputwrap:focus-within .cmodal-input-ic { color: var(--red); }
.cmodal-area-ic { position: absolute; right: 13px; bottom: 12px; width: 16px; height: 16px; color: #b7bfcd; pointer-events: none; }
.cmodal-area-ic svg { width: 100%; height: 100%; display: block; }

/* ---------- Wunschtermin: Dropdown-Kalender + Uhrzeit-Auswahl ---------- */
.cmodal-datebtn { text-align: left; cursor: pointer; }
.cmodal-datebtn__txt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #9aa4b6; }
.cmodal-datebtn.has-value .cmodal-datebtn__txt { color: var(--ink); }
.cmodal-datewrap .cmodal-caret { transition: transform .2s var(--ease); }
.cmodal-datewrap.is-open .cmodal-caret { transform: translateY(-35%) rotate(225deg); }
.cmodal-select:has(option[value=""]:checked) { color: #9aa4b6; }   /* "Uhrzeit wählen" dezent wie Platzhalter */

/* Zeile mit offenem Kalender über die folgenden Formularzeilen heben:
   Die Einblend-Animation (cmodalRise) gibt jeder Zeile vorübergehend ein
   transform -> eigener Stacking-Context. Ohne Anhebung überdecken spätere
   Zeilen (Nachricht, Senden) den aufgeklappten Kalender trotz z-index. */
.cmodal-row.dp-above,
.cmodal-field.dp-above { position: relative; z-index: 5; }

.dp {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(312px, 88vw);
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.dp.is-open { opacity: 1; transform: none; }
.dp[hidden] { display: none; }
.dp__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dp__title { font-weight: 600; font-size: .92rem; color: var(--blue); }
.dp__nav {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 9px;
  background: #fff; color: var(--blue);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.dp__nav:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.dp__nav:disabled { opacity: .35; cursor: default; }
.dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp__weekdays { margin-bottom: 2px; }
.dp__weekdays span { text-align: center; padding: 3px 0; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dp__cell { height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: .86rem; font-weight: 600; }
.dp__cell--off { color: #c2cad7; }
.dp__day {
  border: 0; padding: 0; font: inherit; font-size: .86rem; font-weight: 600;
  background: transparent; color: var(--blue); cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.dp__day:hover { background: var(--bg-soft); }
.dp__day.is-selected { background: var(--red); color: #fff; }
.dp__day:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .dp { transition: none; transform: none; }
  .cmodal-datewrap .cmodal-caret { transition: none; }
}

.cmodal-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  padding: 15px 26px;
  font-size: 1.02rem;
  border-radius: 12px;
}
.cmodal-submit .ic-arrow { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.cmodal-submit:hover .ic-arrow { transform: translateX(4px); }
.cmodal-note { margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .86rem; color: var(--muted); }
.cmodal-note svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Erfolgs-Status (nach dem Absenden) */
.cmodal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  min-height: 320px;
  padding: 12px;
}
.cmodal__success-ic {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(178, 63, 66, .10);
  color: var(--red);
}
.cmodal__success-ic svg { width: 34px; height: 34px; }
.cmodal__success-title { margin: 0; color: var(--blue); outline: none; }
.cmodal__success-text { margin: 0; max-width: 40ch; color: var(--muted); }
.cmodal__success .btn { margin-top: 6px; }

/* [hidden] schlägt die display-Werte oben */
.cmodal-form[hidden],
.cmodal__success[hidden] { display: none; }

/* ---------- Inhalts-Stagger beim Öffnen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cmodal.is-open .cmodal__eyebrow,
  .cmodal.is-open .cmodal__title,
  .cmodal.is-open .cmodal__lead,
  .cmodal.is-open .cmodal__contacts,
  .cmodal.is-open .cmodal__trust,
  .cmodal.is-open .cmodal__form-title,
  .cmodal.is-open .cmodal__form-sub,
  .cmodal.is-open .cmodal__meta,
  .cmodal.is-open .cmodal-form > * {
    animation: cmodalRise .55s var(--ease) both;
  }
  .cmodal.is-open .cmodal__eyebrow    { animation-delay: .05s; }
  .cmodal.is-open .cmodal__title      { animation-delay: .11s; }
  .cmodal.is-open .cmodal__lead       { animation-delay: .17s; }
  .cmodal.is-open .cmodal__contacts   { animation-delay: .30s; }
  .cmodal.is-open .cmodal__trust      { animation-delay: .38s; }
  .cmodal.is-open .cmodal__form-title { animation-delay: .14s; }
  .cmodal.is-open .cmodal__form-sub   { animation-delay: .20s; }
  .cmodal.is-open .cmodal__meta       { animation-delay: .26s; }
  .cmodal.is-open .cmodal-form > *:nth-child(1) { animation-delay: .30s; }
  .cmodal.is-open .cmodal-form > *:nth-child(2) { animation-delay: .36s; }
  .cmodal.is-open .cmodal-form > *:nth-child(3) { animation-delay: .42s; }
  .cmodal.is-open .cmodal-form > *:nth-child(4) { animation-delay: .48s; }
  .cmodal.is-open .cmodal-form > *:nth-child(5) { animation-delay: .54s; }
  .cmodal.is-open .cmodal-form > *:nth-child(6) { animation-delay: .60s; }

  .cmodal__success:not([hidden]) { animation: cmodalRise .4s var(--ease) both; }
  .cmodal__success:not([hidden]) .cmodal__success-ic { animation: cmodalPop .5s var(--ease) both; }
}
@keyframes cmodalRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cmodalPop  { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .cmodal,
  .cmodal__dialog { transition: none; }
  .cmodal__dialog { transform: none; }
  .cmodal__close { transition: background .2s, color .2s; }
  .cmodal__close:hover { transform: none; }
}

/* ---------- Responsiv ---------- */
@media (min-width: 901px) {
  .cmodal__body { min-height: 648px; }
}
@media (max-width: 900px) {
  .cmodal__body { grid-template-columns: 1fr; }
  .cmodal__brand { gap: 24px; padding-top: clamp(30px, 6vw, 48px); }
  /* Im Overlay-Modal (nicht im Inline-Embed): Formular zuerst, Infos danach */
  .cmodal .cmodal__brand { order: 2; }
  .cmodal__orbit { width: 170px; left: -40px; bottom: -36px; right: auto; top: auto; }
  .cmodal__lead { max-width: none; }
  .cmodal__panel { clip-path: none; padding-left: clamp(28px, 3vw, 52px); }
}
@media (max-width: 600px) {
  .cmodal { padding: 0; }
  .cmodal__dialog {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .cmodal__body { max-height: 100vh; max-height: 100dvh; }
  .cmodal-row { grid-template-columns: 1fr; }
  .cmodal__brand { padding: 60px 22px 28px; }
  .cmodal__panel { padding: 26px 22px 32px; }
  .cmodal .cmodal__panel { padding-top: 56px; }
  .cmodal .cmodal__brand { padding-top: 28px; }
  .cmodal__close { top: 12px; right: 12px; }
}

/* ---------- Inline-Kontaktsektion (#kontakt) – identische Optik wie das Modal,
   nur als eingebettete Karte im Seitenfluss statt als Overlay-Dialog ---------- */
.contact--embed { background: var(--bg-soft); }
.contact-embed {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  background: #fff;
  border-radius: clamp(20px, 3vw, 28px);
  overflow: hidden;
  box-shadow: 0 18px 44px -20px rgba(8, 14, 32, .22), 0 6px 18px -10px rgba(8, 14, 32, .12);
}
/* Inline -> kein interner Scroll / keine Höhenbegrenzung wie im Modal */
.contact-embed .cmodal__body {
  max-height: none;
  overflow: visible;
  min-height: 0;
}
@media (max-width: 600px) {
  /* kein Schließen-X im Inline-Layout -> normales oberes Padding */
  .contact-embed .cmodal__brand { padding-top: 30px; }
}

/* =========================================================
   "Nach oben"-Button – fix rechts unten, auf jeder Seite
   (wird global per js/main.js -> initToTop() eingefügt)
   ========================================================= */
.to-top {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 40;                 /* über dem Inhalt, unter dem Sticky-Header (50) */
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(19, 32, 63, .10);
  /* versteckt, bis ein Stück gescrollt wurde */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s,
              background .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(19, 32, 63, .16);
}
.to-top:active { transform: translateY(0); }
.to-top svg { width: 22px; height: 22px; }

@media (max-width: 600px) {
  .to-top { width: 42px; height: 42px; }
  .to-top svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .28s, visibility .28s; transform: none; }
  .to-top.is-visible,
  .to-top:hover,
  .to-top:active { transform: none; }
}


/* =========================================================
   Intro / Brand-Loader  (Steuerung: initIntro in js/main.js)
   Spielt einmal pro Sitzung und bei jedem Reload. Der weiße
   Vorhang + html.intro-playing werden bereits vom Inline-Head-
   Script vor dem ersten Paint gesetzt -> kein Aufblitzen.
   ========================================================= */

/* Sofort-Weiß ab dem ersten Frame, bis das JS-Overlay übernimmt */
html.intro-armed body::before {
  content: "";
  position: fixed; inset: 0;
  background: #ffffff;
  z-index: 9998;
}
/* Inhalt während des Intros ausgeblendet (für sanftes Einblenden) */
html.intro-playing body > header,
html.intro-playing body > main,
html.intro-playing body > footer { opacity: 0; }

/* Phase 4: Website blendet weich ein (Header scharf für sauberen Übergang) */
html.intro-revealing body > main,
html.intro-revealing body > footer { animation: introSiteIn .9s cubic-bezier(.22,1,.36,1) both; }
html.intro-revealing body > header { animation: introHeaderIn .9s cubic-bezier(.22,1,.36,1) both; }
/* Header-Wortmarke bleibt während Intro + Übergang verborgen und erscheint erst beim Handoff */
html.intro-playing #site-header .brand,
html.intro-revealing #site-header .brand { opacity: 0; }
@keyframes introSiteIn   { from { opacity: 0; filter: blur(7px); } to { opacity: 1; filter: blur(0); } }
@keyframes introHeaderIn { from { opacity: 0; } to { opacity: 1; } }

/* Overlay */
.intro {
  position: fixed; inset: 0;
  z-index: 9999;
  display: grid; place-items: center;
  overflow: hidden;
  pointer-events: none;            /* blockiert die Seite nie */
}
.intro__bg {
  position: absolute; inset: 0;
  background: #ffffff;
  transition: opacity .85s cubic-bezier(.22,1,.36,1);
}
.intro.is-revealing .intro__bg { opacity: 0; }

.intro__logo {
  position: relative; z-index: 1;
  transform-origin: top left;
  transition: transform .86s cubic-bezier(.22,1,.36,1);   /* FLIP in den Header */
  will-change: transform;
}
.intro__inner {
  display: inline-block;
  opacity: 0;                      /* sichtbar, sobald das O zentriert ist (JS) */
  will-change: transform;
}
/* großer, zentrierter Schriftzug – erbt die .brand-Optik, nur größer.
   WICHTIG: bewusst um den Zoom-Faktor S=2.2 (siehe initIntro) ÜBERGROSS
   layoutet; JS skaliert nur noch RUNTER (scale 1 -> 1/2.2). Der Browser
   rastert Text + SVG dadurch bei voller Größe (Supersampling) statt eine
   kleine Rasterung hochzuziehen -> gestochen scharf, kein Pixelmatsch. */
.intro__brand { font-size: calc(clamp(56px, 12vw, 112px) * 2.2); cursor: default; }
.intro__pre, .intro__post { opacity: 0; }

/* das animierbare O */
.intro-o__base { opacity: .12; }
.intro-o__arc  { stroke-dashoffset: 158; }
.intro.run .intro-o__base { animation: introBaseIn .65s cubic-bezier(.22,1,.36,1) .25s forwards; }
.intro.run .intro-o__arc  { animation: introArcDraw .72s cubic-bezier(.22,1,.36,1) .30s forwards; }
.intro.run .intro__pre    { animation: introPre  .54s cubic-bezier(.22,1,.36,1) 1.04s forwards; }
.intro.run .intro__post   { animation: introPost .54s cubic-bezier(.22,1,.36,1) 1.10s forwards; }
@keyframes introBaseIn  { to { opacity: 1; } }
@keyframes introArcDraw { to { stroke-dashoffset: 0; } }
@keyframes introPre  { from { opacity: 0; transform: translateX(.16em);  } to { opacity: 1; transform: none; } }
@keyframes introPost { from { opacity: 0; transform: translateX(-.10em); } to { opacity: 1; transform: none; } }

/* Reduced Motion: niemals verstecken, kein Overlay */
@media (prefers-reduced-motion: reduce) {
  html.intro-armed body::before { display: none; }
  html.intro-playing body > header,
  html.intro-playing body > main,
  html.intro-playing body > footer { opacity: 1 !important; animation: none !important; }
  .intro { display: none !important; }
}

/* =========================================================
   Leistungen (Startseite) – kompakter Teaser
   Alle Leistungen auf einen Blick als Pill-Wolke; jede Pill
   verlinkt auf den Detail-Abschnitt der Leistungsseite,
   darunter der CTA-Button zur Leistungsseite.
   ========================================================= */
.lsg { background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%); }
.lsg-eyebrow { text-align: center; margin-bottom: 12px; }
.lsg-eyebrow::before { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--red); margin: 0 auto 16px; }
.lsg-title { text-align: center; margin-bottom: 0; }

/* Hinweis unter der Überschrift: Leistungen sind klickbar */
.lsg-note { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .95rem; margin: 14px 0 0; }
.lsg-note svg { width: 17px; height: 17px; color: var(--red); flex: 0 0 auto; }

/* Pill-Wolke: zentriert umbrechende Reihen */
.lsg-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  max-width: 920px;
  margin: clamp(22px, 3vw, 34px) auto 0;
}
.lsg-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 9px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--blue);
  font-weight: 600;
  font-size: .96rem;
  line-height: 1.25;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), color .2s var(--ease);
}
.lsg-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(178, 63, 66, .4); color: var(--red); }
.lsg-pill-ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(178, 63, 66, .08);
  color: var(--red);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.lsg-pill-ico svg { width: 17px; height: 17px; }
.lsg-pill:hover .lsg-pill-ico { background: var(--red); color: #fff; }

/* CTA zur Leistungsseite */
.lsg-more { text-align: center; margin-top: clamp(28px, 3.5vw, 42px); }
.lsg-more .btn { display: inline-flex; align-items: center; gap: .55em; font-size: 1.05rem; padding: 15px 32px; }

@media (max-width: 520px) {
  .lsg-pill { font-size: .9rem; padding: 7px 16px 7px 8px; }
  .lsg-pill-ico { width: 30px; height: 30px; }
  .lsg-pill-ico svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .lsg-pill, .lsg-pill-ico { transition: none; }
  .lsg-pill:hover { transform: none; }
}

/* =========================================================
   Team-Slider: Drag/Swipe + Klick-/Tipp-Hinweise (Touch)
   ========================================================= */
.ts-track { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ts-track.ts-dragging { cursor: grabbing; }

/* Hinweise: Desktop zeigt Maus-Cursor + "Klick", Touch/Mobil Fingertipp + "Tippe" */
.hint-touch, .hint-tap { display: none; }
@media (hover: none), (max-width: 720px) {
  .hint-mouse, .hint-click { display: none; }
  .hint-touch { display: block; }
  .hint-tap { display: inline; }
}