/*
  home.css — Enterprise-Redesign der Startseite (Briefing v4, neues
  Inhalts-/Design-Konzept). Nur für index.html. Wird NACH base.css
  geladen, damit neue Regeln alte bei Bedarf überschreiben können,
  ohne !important. base.css selbst bleibt unangetastet.

  Design-System (Farben, Fonts, Nav-Kapsel, Hero-Türkis-Fade,
  Türkis-Perlmutt-Akzentfläche) bleibt erhalten. Die Perlmutt-Fläche
  (.accent-surface) wird jetzt AUSSCHLIESSLICH für die Saatio-Cockpit-
  Sektion verwendet — alle anderen Karten sind schlichtes Weiß.
*/

/* ============================================
   FONTS — self-hosted, DSGVO-konform (kein Google-CDN-Import)
   ============================================ */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/urbanist-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/urbanist-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/urbanist-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-400.woff2') format('woff2');
}

/* ============================================
   VARIABLEN
   ============================================ */
:root {
  --ink:            #0b0f19;
  --ink-soft:       #3a4256;
  --ink-mute:       #6b7280;
  --line:           #e7e9ee;
  --bg:             #fbfbfc;
  --bg-warm:        #f5f4f1;
  --white:          #ffffff;

  --brand:          #6366f1;
  --brand-2:        #a855f7;
  --brand-deep:     #1e1b4b;
  --brand-grad:     linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);

  --accent:         #4d97a0;
  --accent-deep:    #0f3a3f;
  --accent-soft:    #c8e2e2;

  --radius-lg: 20px;
  --radius-md: 14px;

  /* Einheitlicher Sektions-Rhythmus: JEDE Sektion hat --sec-pad
     oben und unten → konstant 2×--sec-pad Abstand zwischen den
     Inhalten aller Sektionen. Keine Sonderwerte pro Sektion. */
  --sec-pad: 70px;
  --radius-sm: 10px;
}

/* ============================================
   BASIS-OVERRIDES für index.html
   ============================================ */
body {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--bg);
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* ============================================
   AKZENT-OBERFLÄCHE — AUSSCHLIESSLICH Sektion 6 (Saatio Cockpit).
   1:1 aus dem v5-Mockup: fünf überlappende Radial-Gradients in
   Türkis, präsentes Rauschen via SVG-Filter, kein farbiger Stroke.
   ============================================ */
.accent-surface {
  position: relative;
  background:
    radial-gradient(45% 40% at 25% 20%,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(232, 244, 244, 0.5) 40%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(50% 45% at 65% 35%,
      rgba(220, 238, 238, 0.7) 0%,
      rgba(180, 215, 215, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(55% 50% at 15% 75%,
      rgba(120, 175, 180, 0.55) 0%,
      rgba(140, 195, 200, 0.3) 45%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(60% 55% at 85% 85%,
      rgba(90, 155, 165, 0.6) 0%,
      rgba(120, 180, 185, 0.35) 45%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(70% 65% at 50% 60%,
      rgba(170, 210, 213, 0.4) 0%,
      rgba(200, 225, 227, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(155deg, #edf6f6 0%, #c4dedf 100%);
  border: none;
  color: var(--ink);
  box-shadow: 0 25px 50px -28px rgba(30, 80, 90, 0.28);
  overflow: hidden;
}
.accent-surface::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.accent-surface > * { position: relative; z-index: 1; }

/* #site-header bleibt transparent: Ein eigener (flacher) Hintergrund
   hier erzeugte an der Header-Unterkante eine sichtbare Naht, weil der
   halbtransparente .hhero-Verlauf oben über diesem Türkiston, darunter
   aber über dem body-Off-White (var(--bg)) liegt — der Wechsel der
   Hinterlegung ergab eine harte Linie. Transparent = der Hero-Verlauf
   liegt überall über demselben --bg und läuft nahtlos durch. Den oberen
   Bereich deckt .hhero via margin-top:-100px ohnehin voll ab; die weiße
   Nav-Kapsel (.hnav) hat ihren eigenen Hintergrund und bleibt weiß. */
#site-header {
  background: transparent;
}

/* ============================================
   HERO — textzentriert
   ============================================ */
.hhero {
  /* Negativer margin-top zieht den Verlauf unter die Nav (die als
     eigenständiges, sticky-positioniertes Element über die GESAMTE
     Seite scrollt, nicht nur über den Hero). So bleibt die Nav beim
     Scrollen durchgängig sichtbar, während der Verlauf optisch schon
     ab Seitenanfang beginnt und nahtlos hinter der Nav durchläuft. */
  margin-top: -100px;
  padding: 200px 0 var(--sec-pad);
  text-align: center;
  background: linear-gradient(180deg, rgba(200, 226, 226, 0.35) 0%, var(--bg) 100%);
}
.hhero-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.heyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: 12px; font-weight: 500; color: var(--ink-soft);
  letter-spacing: 0.02em; text-transform: uppercase;
  margin-bottom: 36px;
}
.heyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
}
.hhero h1 {
  font-weight: 600;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.12; letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 820px; margin: 0 auto 26px;
}
.hhero-sub {
  font-size: 20px; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px; margin: 0 auto 40px;
}
.hhero-actions {
  display: flex; gap: 16px; justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   BUTTONS
   ============================================ */
.hbtn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.hbtn-primary {
  background: var(--brand-grad);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.28);
}
.hbtn-primary:hover {
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}
.hbtn-primary.hbtn-glow {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
}
.hbtn-primary.hbtn-glow:hover {
  box-shadow: 0 0 42px rgba(99, 102, 241, 0.55);
  transform: translateY(-1px);
}
.hbtn-secondary { background: transparent; color: var(--ink); border-color: var(--accent); }
.hbtn-secondary:hover { background: rgba(77, 151, 160, 0.08); border-color: #3f7c84; }
.hbtn-arrow { transition: transform .2s; }
.hbtn:hover .hbtn-arrow { transform: translateX(3px); }

/* Hinweis: .hnav-cta-mobile (Nav-Kapsel-CTA "Erstgespräch") lebt
   jetzt in assets/css/site-header.css — Header/Footer sind seit
   der Header/Footer-Vereinheitlichung ausgelagert (partials/). */

/* ============================================
   SECTION-GRUNDGERÜST
   ============================================ */
.hsection { max-width: 1200px; margin: 0 auto; padding: var(--sec-pad) 32px; }
/* Für Sektionen, die inhaltlich an die vorherige anschließen
   (z. B. Kampagnen → Saatio Cockpit): kein eigener oberer Abstand,
   es bleibt nur das Bottom-Padding des Vorgängers (1×--sec-pad). */
.hsection-joined { padding-top: 0; }
.hsection-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.hsection-eyebrow {
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--ink-mute);
  font-weight: 600; margin-bottom: 14px;
}
.hsection h2 {
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
.hsection-sub { font-size: 20px; line-height: 1.6; color: var(--ink-soft); }

/* ============================================
   POSITIONIERUNG — ein zentrierter Manifest-Absatz
   ============================================ */
.hmanifest-wrap {
  background:
    linear-gradient(to bottom, var(--bg) 0, transparent 60px),
    linear-gradient(to top, var(--bg) 0, transparent 60px),
    linear-gradient(160deg, #f4fafa 0%, #dcecec 100%);
}
.hmanifest {
  max-width: 740px; margin: 0 auto;
  text-align: center;
  font-size: 20px; line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 400;
}

/* ============================================
   KI-ASSISTENT — animiertes Cockpit-Mockup als Platzhalter fürs
   Produktvideo. Off-White, kein Perlmutt/Türkis-Fade (ruhige
   Umgebung). Zeigt das echte Produkt-UI → Indigo/Violet, analog
   zum Hero-Cockpit-Mockup auf cockpit.html (dort .cpm-*, hier
   eigene .hassist-*-Klassen, weil index.html cockpit-theme.css
   nicht lädt).
   ============================================ */
.hassist-section { text-align: center; }

.hassist-frame {
  width: 84%;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(11, 15, 25, 0.25), 0 0 0 1px rgba(11, 15, 25, 0.06);
  text-align: left;
  /* Durchgehend sichtbar — kein Scroll-Reveal. */
}

/* Safari-Frame — helle Chrome-Leiste passend zum weißen Frame */
.hassist-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  background: #f1f2f6;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.hassist-chrome-dot { width: 10px; height: 10px; border-radius: 50%; }
.hassist-chrome-dot:nth-child(1) { background: #FF5F57; }
.hassist-chrome-dot:nth-child(2) { background: #FFBD2E; }
.hassist-chrome-dot:nth-child(3) { background: #28C840; }
.hassist-chrome-bar {
  flex: 1; height: 20px;
  background: rgba(11, 15, 25, 0.05);
  border-radius: 4px; margin: 0 16px;
  display: flex; align-items: center; justify-content: center;
}
.hassist-chrome-url { font-size: 0.6rem; color: rgba(11, 15, 25, 0.4); letter-spacing: 0.02em; }

.hassist-body { display: flex; flex: 1; min-height: 0; }

/* Sidebar — gleiche Struktur/Werte wie .cpm-sidebar im Hero-Mockup */
.hassist-sidebar {
  width: 212px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
}
.hassist-sidebar-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px; margin-bottom: 12px; }
.hassist-brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--brand-grad); flex-shrink: 0; }
.hassist-brand-name { font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; }
.hassist-nav-group { display: flex; flex-direction: column; gap: 1px; }
.hassist-nav-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-mute); padding: 11px 10px 4px;
}
.hassist-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  font-weight: 500; font-size: 13px; color: var(--ink-soft);
  white-space: nowrap;
}
.hassist-nav-item svg { flex-shrink: 0; }
.hassist-nav-item-active { background: #E6E4FB; color: #6366f1; }

/* Rechts: weißer Screen mit Mikrofon-Kreis + Wellen + Chat */
.hassist-screen {
  flex: 1; min-width: 0;
  background: var(--white);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
}

.hassist-mic-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 320px; height: 320px;
  margin: 0 auto 44px;
}
.hassist-wave {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(99, 102, 241, 0.3);
  animation: hassist-ripple 4s ease-out infinite;
}
.hassist-wave:nth-child(1) { width: 115px; height: 115px; animation-delay: 0s; }
.hassist-wave:nth-child(2) { width: 185px; height: 185px; animation-delay: 1s; }
.hassist-wave:nth-child(3) { width: 255px; height: 255px; animation-delay: 2s; }
.hassist-wave:nth-child(4) { width: 320px; height: 320px; animation-delay: 3s; }
@keyframes hassist-ripple {
  0%   { transform: scale(1);    opacity: 0.5; }
  100% { transform: scale(1.25); opacity: 0; }
}
.hassist-mic-circle {
  position: relative;
  z-index: 1;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 14px 36px -8px rgba(99, 102, 241, 0.45);
}

.hassist-chat { display: flex; justify-content: center; width: 100%; }
.hassist-chat-bubble {
  position: relative;
  background: var(--bg-warm);
  border-radius: 16px 16px 16px 4px;
  padding: 16px 22px;
  max-width: 360px;
  min-height: 1.4em;
  box-shadow: 0 4px 16px -4px rgba(11, 15, 25, 0.08);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink);
}
.hassist-chat-cursor {
  display: inline-block;
  width: 2px; height: 1em;
  vertical-align: -0.15em;
  background: var(--ink-mute);
  margin-left: 2px;
  animation: hassist-blink 0.9s steps(1) infinite;
}
@keyframes hassist-blink { 50% { opacity: 0; } }
.hassist-chat-dots { display: none; align-items: center; gap: 4px; }
.hassist-chat-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-mute);
  display: inline-block;
  animation: hassist-dot-bounce 1.1s ease-in-out infinite;
}
.hassist-chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.hassist-chat-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hassist-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hassist-wave { animation: none; opacity: 0.25; }
  .hassist-chat-cursor { animation: none; opacity: 0; }
  .hassist-chat-dots i { animation: none; }
  .hassist-frame { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  .hassist-frame { width: 96%; aspect-ratio: auto; }
  .hassist-sidebar { display: none; }
}
@media (max-width: 480px) {
  .hassist-mic-wrap { width: 220px; height: 220px; margin-bottom: 26px; }
  .hassist-wave:nth-child(1) { width: 80px;  height: 80px; }
  .hassist-wave:nth-child(2) { width: 125px; height: 125px; }
  .hassist-wave:nth-child(3) { width: 170px; height: 170px; }
  .hassist-wave:nth-child(4) { width: 220px; height: 220px; }
  .hassist-mic-circle { width: 70px; height: 70px; }
  .hassist-chat-bubble { max-width: 260px; font-size: 14px; padding: 13px 18px; }
}

/* ============================================
   GRIDS + KACHELN (Anwendungsfälle, schlichtes Weiß)
   ============================================ */
.hgrid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .hgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hgrid { grid-template-columns: 1fr; } }

.hgrid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .hgrid-3 { grid-template-columns: 1fr; } }

.hcard {
  position: relative; overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px 28px;
  min-height: 280px;
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.hcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(30, 27, 75, 0.15);
}
.hcard-icon-box {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  color: var(--ink);
}
.hcard-icon-box svg { width: 40px; height: 40px; }

/* ============================================
   KNOTEN-GRAFIK (Variante E: Förderband) — ersetzt die 3 Kacheln
   in Sektion 3 (Anwendungsfall 1). Horizontale Linie mit Saatio-
   Kern in der Mitte; links und rechts je ein "Förderband" aus
   Icon-Cards, das kontinuierlich Richtung Zentrum läuft.

   Funktionsprinzip (klassischer nahtloser CSS-Loop):
   - Jede Seite hat einen .hnode-track (overflow:hidden, Breite bis
     zur Kante des Logo-Kreises) und darin ein .hnode-belt: ein
     durchgehender Flex-Streifen mit dem 3er-Icon-Zyklus 4× hinter-
     einander (12 Karten). Jede Karte trägt ihren Abstand als
     eigenes margin-right (NICHT flex-gap) — dadurch hat jede der 4
     Wiederholungen exakt dieselbe Breite, inklusive der letzten.
   - Die Animation verschiebt den Streifen linear von 0% auf -25%
     seiner EIGENEN Breite = exakt eine Wiederholungs-Einheit.
     Bei -25% sieht das Band identisch aus wie bei 0% (weil sich
     das Muster exakt alle 25% wiederholt) — der Sprung zurück auf
     0% ist dadurch unsichtbar: nahtloser Loop, keine Lücke, keine
     Geschwindigkeitsänderung, denn es ist eine EINZIGE durchgehende
     linear-Animation statt 6 einzelner mit delays.
   - Rechtes Band läuft normal (0%→-25% = nach links = Richtung
     Zentrum). Linkes Band nutzt animation-direction:reverse auf
     GENAU DASSELBE Keyframe (also faktisch -25%→0% = nach rechts =
     Richtung Zentrum) — dadurch ist die Geschwindigkeit auf beiden
     Seiten garantiert identisch (dieselbe Dauer, dasselbe Timing).
   - Verdecken am Zentrum: .hnode-track endet exakt an der Kante
     des Logo-Kreises (Breite = 50% − center-size/2). Icons werden
     dort durch overflow:hidden hart abgeschnitten — kein Aufblitzen
     über dem Logo möglich, unabhängig von Tempo/Timing. Der Halo
     (höherer z-index als das Band) tönt die Icons schon vorher
     dezent an, bevor sie an der Logo-Kante verschwinden.
   Farblogik: Indigo/Violet wie das echte Produkt-UI, Icons in Ink.
   ============================================ */
/* Weniger Weißraum zur nächsten Sektion — nur diese Section-Kante,
   .hsection selbst (110px) bleibt für alle anderen Sektionen unangetastet. */
#anwendungsfall-1 { padding-bottom: 64px; }

.hnode-diagram {
  --icon-size: 72px;
  --icon-gap: 40px;
  --center-size: 110px;
  --halo-size: 220px;
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: calc(var(--halo-size) + 40px);
  margin: 48px auto 0;
  /* Fade-Maske: linker/rechter Rand blendet weich aus, Mitte
     (inkl. Logo-Kreis bei 50%) bleibt voll deckend. 14% ≈ etwas
     mehr als eine Icon-Breite + Abstand bei 1000px Container, damit
     ein Icon vollständig durch den Verlauf ein-/ausblendet. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}

.hnode-axis-line {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  background: rgba(99, 102, 241, 0.25);
  transform: translateY(-50%);
  z-index: 0;
}

.hnode-track {
  position: absolute;
  top: 0;
  width: calc(50% - (var(--center-size) / 2));
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.hnode-track-left { left: 0; }
.hnode-track-right { right: 0; }

.hnode-belt {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  /* ~40% langsamer als zuvor (6.1s), weiterhin linear + nahtlos */
  animation: hnode-belt-scroll 8.5s linear infinite;
}
.hnode-track-left .hnode-belt { animation-direction: reverse; }

@keyframes hnode-belt-scroll {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-25%); }
}

.hnode-icon-card {
  flex-shrink: 0;
  margin-right: var(--icon-gap);
  width: var(--icon-size); height: var(--icon-size);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 10px 28px -8px rgba(11, 15, 25, 0.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}

.hnode-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--halo-size); height: var(--halo-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.08);
  z-index: 2;
}

.hnode-center {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--center-size); height: var(--center-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  box-shadow: 0 14px 36px -8px rgba(99, 102, 241, 0.45);
  z-index: 4;
}
.hnode-center img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
  .hnode-belt { animation: none; }
}

@media (max-width: 860px) {
  .hnode-diagram { --icon-size: 56px; --icon-gap: 32px; --center-size: 90px; --halo-size: 168px; }
}
@media (max-width: 480px) {
  .hnode-diagram { --icon-size: 44px; --icon-gap: 24px; --center-size: 72px; --halo-size: 136px; margin-top: 32px; }
  .hnode-icon-card svg { width: 20px; height: 20px; }
}

/* ============================================
   GLASSMORPHISM-KACHELN — nur Sektion 4 (Anwendungsfall 2).
   Sektion 3 bleibt unverändert bei .hcard + .hcard-icon-box.
   Kräftig leuchtende Perlmutt-Türkis-Bühne + echter Glass-Look
   (starke Transparenz, spürbarer Blur, Inset-Highlight).
   ============================================ */
.hcard.hcard-glass { padding: 0; min-height: 460px; }

.hcard-stage {
  position: relative;
  overflow: hidden;
  height: 280px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(to bottom, transparent 88%, var(--white) 100%),
    radial-gradient(45% 40% at 20% 15%, rgba(255, 255, 255, 0.9) 0%, transparent 70%),
    radial-gradient(50% 45% at 80% 40%, rgba(180, 218, 220, 0.7) 0%, transparent 70%),
    radial-gradient(55% 50% at 45% 85%, rgba(90, 155, 165, 0.5) 0%, transparent 70%),
    linear-gradient(160deg, #edf6f6 0%, #a8d4d7 100%);
}
/* Erste Kachel ("Maßgeschneiderte Architektur") — gleiche Bühne,
   nur Türkis-Farbwerte gegen die Brand-Farben (--brand / --brand-2)
   getauscht. Positionen/Größen der Radial-Gradients unverändert. */
.hcard-stage.hcard-stage-violet {
  background:
    linear-gradient(to bottom, transparent 88%, var(--white) 100%),
    radial-gradient(45% 40% at 20% 15%, rgba(255, 255, 255, 0.9) 0%, transparent 70%),
    radial-gradient(50% 45% at 80% 40%, rgba(99, 102, 241, 0.7) 0%, transparent 70%),
    radial-gradient(55% 50% at 45% 85%, rgba(168, 85, 247, 0.5) 0%, transparent 70%),
    linear-gradient(160deg, #eef0fd 0%, #d6c2f7 100%);
}
.hcard-stage::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hcard-body { padding: 20px 28px 28px; display: flex; flex-direction: column; flex: 1; }

/* Echter Glass-Look: deutlich transparent, spürbarer Blur, Innen-Highlight */
.hui-glass {
  position: relative; z-index: 1;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow:
    0 8px 32px -8px rgba(30, 80, 90, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
  color: var(--ink);
}

/* Das eine UI-Fragment je Kachel: zentrierte Glass-Card */
.hui-card { width: 75%; padding: 18px 20px; }

/* --- 4a: 2x2-Modul-Raster --- */
.hui-grid2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}
.hui-subcard {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  box-shadow: 0 4px 10px -4px rgba(30, 80, 90, 0.15);
}
.hui-subcard svg { width: 20px; height: 20px; color: var(--ink); }
.hui-subcard span { font-size: 11px; font-weight: 500; color: var(--ink); text-align: center; }

/* --- 4b: zentrales Element (Server- + Schild-Icon + Standort) --- */
.hui-central { display: flex; flex-direction: column; align-items: center; }
.hui-central-icons { display: flex; gap: 16px; justify-content: center; margin-bottom: 16px; }
.hui-central-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(77, 151, 160, 0.15);
  border: 1px solid rgba(77, 151, 160, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: #4d97a0;
}
.hui-central-icon svg { width: 28px; height: 28px; }
.hui-central-title { font-size: 14px; font-weight: 500; color: var(--ink); text-align: center; }
.hui-central-sub { font-size: 11px; color: var(--ink-mute); text-align: center; margin-top: 4px; }

/* --- 4c: System-Erweiterungs-Diagramm (Wurzel + andockende Module) --- */
.hui-card.hui-flow { padding: 18px; }
.hui-flow { position: relative; display: flex; align-items: center; gap: 12px; }
.hui-flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.hui-flow-root {
  position: relative; z-index: 1; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 78px;
  padding: 18px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  box-shadow: 0 4px 10px -4px rgba(30, 80, 90, 0.15);
}
.hui-flow-root svg { width: 24px; height: 24px; color: var(--ink); }
.hui-flow-root span { font-size: 12px; font-weight: 500; color: var(--ink); text-align: center; }
.hui-flow-modules { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.hui-flow-module {
  flex-direction: row; align-items: center; gap: 6px;
  padding: 7px 10px;
}
.hui-flow-module svg { width: 15px; height: 15px; flex-shrink: 0; }
.hui-flow-module span { font-size: 10.5px; line-height: 1.25; }
.hui-flow-module-ghost {
  opacity: 0.6;
  border-style: dashed;
  border-color: rgba(15, 58, 63, 0.4);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

@media (max-width: 480px) {
  .hui-card { width: 84%; padding: 15px 16px; }
  .hui-subcard { padding: 10px; }
  .hui-subcard svg { width: 18px; height: 18px; }
  .hui-subcard span { font-size: 10px; }
  .hui-central-icon { width: 48px; height: 48px; }
  .hui-central-icon svg { width: 24px; height: 24px; }
  .hui-central-title { font-size: 13px; }
  .hui-card.hui-flow { padding: 16px; }
  .hui-flow { gap: 14px; }
  .hui-flow-root { min-width: 72px; padding: 14px 10px; }
  .hui-flow-root svg { width: 20px; height: 20px; }
  .hui-flow-root span { font-size: 10.5px; }
  .hui-flow-module { padding: 7px 9px; }
  .hui-flow-module span { font-size: 10px; }
}

@media (max-width: 360px) {
  .hui-grid2x2 { grid-template-columns: 1fr; }
}

.hcard-title {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 19px; line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--ink);
}
.hcard-desc {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px; line-height: 1.55; color: var(--ink-mute); margin-top: auto;
}

/* ============================================
   SICHERHEIT & COMPLIANCE — zwischen Sektion 4 und 5.
   Eigene, dezente Perlmutt-Türkis-Bühne, deutlich zurückhaltender
   als die Cockpit-Fläche (Sektion 6).
   ============================================ */
.hsecurity-wrap {
  background: linear-gradient(160deg, #f7f7f9 0%, #edeef1 100%);
  overflow: hidden;
}
.hsecurity-inner { max-width: 1200px; margin: 0 auto; padding: var(--sec-pad) 32px; }

.hsecurity-top {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 60px;
  align-items: start;
  /* padding statt margin: dadurch zählt der Abstand zur nächsten
     Sektion ZUR Box dazu — overflow:hidden kann die Kreise also
     exakt an dieser Kante abschneiden, ohne den sichtbaren Abstand
     (weiterhin 72px) zu verändern. */
  padding-bottom: 72px;
  overflow: hidden;
  /* Containing Block für .hsecurity-visual (siehe dort) */
  position: relative;
}

.hsecurity-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}
.hsecurity-copy h2 {
  font-size: 40px; line-height: 1.22; letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.hsecurity-sub {
  font-size: 20px; line-height: 1.6; color: var(--ink-soft);
  max-width: 440px; margin-bottom: 32px;
}

.hsecurity-visual {
  /* Absolut statt in der Grid-Zeile: sonst bestimmt die 480px hohe
     Kreisfläche die Zeilenhöhe und der Text (viel kürzer) hängt
     mit riesigem Leerraum darüber — genau das war der Grund für
     den "zu weiten Abstand". Jetzt zählt nur noch .hsecurity-copy
     für die Zeilenhöhe, die Kreise legen sich als Overlay drüber. */
  position: absolute;
  top: 0; right: 0;
  width: 55%;
  display: flex; align-items: center; justify-content: center;
  /* Größte Welle ist 460px (+Puls bis ×1.15 ≈529px) — Container
     etwas größer als die Welle, damit nichts in den Text darunter
     überlappt, aber ohne die Zeile unnötig aufzublähen. */
  min-height: 480px;
}
.hsecurity-waves { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hsecurity-wave {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(77, 151, 160, 0.25);
  animation: hsecurity-pulse 5s ease-out infinite;
}
@keyframes hsecurity-pulse {
  0%   { transform: scale(1);    opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 0; }
}
.hsecurity-shield {
  position: relative; z-index: 1;
  filter: drop-shadow(0 20px 40px rgba(30, 80, 90, 0.35));
}

@media (prefers-reduced-motion: reduce) {
  .hsecurity-wave { animation: none; opacity: 0.35; }
}

.hsecurity-cards-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -20px rgba(30, 27, 75, 0.15);
  padding: 40px;
}
.hsecurity-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.hsecurity-card-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
}
.hsecurity-card-head svg { color: var(--accent); flex-shrink: 0; }
/* Typo (Titel/Text) zentral am Dateiende: KARTEN-TYPO-HIERARCHIE. */

@media (max-width: 960px) {
  .hsecurity-top { grid-template-columns: 1fr; gap: 40px; }
  /* Unterhalb von 960px stapelt die Sektion einspaltig — dort soll
     der Kreis-Block ganz normal (in Flow) unter dem Text stehen,
     nicht als Overlay darüber. */
  .hsecurity-visual { position: relative; top: auto; right: auto; width: 100%; }
  .hsecurity-cards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .hsecurity-inner { padding: var(--sec-pad) 24px; }
  .hsecurity-copy h2 { font-size: 30px; }
  .hsecurity-visual { min-height: 420px; }
  .hsecurity-shield svg { width: 152px; height: 152px; }
  .hsecurity-cards-wrap { padding: 28px 20px; }
  .hsecurity-cards { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================
   KAMPAGNEN & CONTENT — kompakt, nur Text + optionale Mini-Icons
   ============================================ */
.hcampaign-icons {
  display: flex; justify-content: center; align-items: center;
  gap: 40px; margin-top: 36px;
  color: var(--ink-soft); opacity: 0.7;
}
.hcampaign-icons svg { width: 24px; height: 24px; }

/* ============================================
   SAATIO COCKPIT — die eine große Türkis-Perlmutt-Fläche
   ============================================ */
.hproof {
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hproof-eyebrow {
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.15em; color: #2a5560;
  font-weight: 600; margin-bottom: 14px;
}
.hproof h2 {
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2; letter-spacing: -0.02em;
  color: #0f3a3f;
  margin-bottom: 18px;
}
.hproof p.hproof-lead { font-size: 20px; line-height: 1.6; color: #2a5560; margin-bottom: 28px; }
/* Auf der Türkis-Perlmutt-Fläche: weißer Button mit Deep-Teal-Text
   statt Marken-Verlauf — heller Kontrast zur Akzentfläche */
.hproof .hbtn-primary {
  background: var(--white);
  color: var(--accent-deep);
  box-shadow: 0 6px 20px rgba(15, 58, 63, 0.18);
}
.hproof .hbtn-primary:hover {
  box-shadow: 0 10px 28px rgba(15, 58, 63, 0.26);
  transform: translateY(-1px);
}

.hproof-visual {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 58, 63, 0.22);
  backdrop-filter: blur(4px);
  box-shadow: 0 20px 40px -20px rgba(15, 58, 63, 0.35);
}
.hproof-mockup-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(15, 58, 63, 0.15);
}
.hproof-mockup-bar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(15, 58, 63, 0.28);
}
.hproof-mockup-body {
  min-height: 240px;
  display: flex;
  padding: 0;
  text-align: left;
}

@media (max-width: 900px) {
  .hproof { grid-template-columns: 1fr; padding: 40px 28px; }
  .hproof-mockup-body { min-height: 200px; }
}

/* ============================================
   COCKPIT-UI-MOCKUP (Sektion "Saatio Cockpit") — reduzierte, leere
   Pipeline-Ansicht in HTML/CSS. Struktur (Sidebar-Nav, Kanban-Spalten)
   ist die echte aus cockpit.html + 03-cockpit-pipeline.sql. Reine
   Produkt-UI (Indigo/Violet); Farben aus den home.css-Variablen, da
   index.html die Cockpit-CSS nicht lädt. Präfix: hproof-ui-.
   ============================================ */
.hproof-ui {
  flex: 1;
  min-width: 0;
  display: flex;
  background: var(--white);
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* — Sidebar — */
.hproof-ui-sidebar {
  width: 128px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hproof-ui-brand {
  display: flex; align-items: center; gap: 7px;
  padding: 0 6px; margin-bottom: 8px;
}
.hproof-ui-brand-mark {
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--brand-grad); flex-shrink: 0;
}
.hproof-ui-brand-name {
  font-weight: 600; font-size: 12px; color: var(--ink);
  letter-spacing: -0.01em;
}
.hproof-ui-nav-group { display: flex; flex-direction: column; gap: 1px; }
.hproof-ui-nav-label {
  font-size: 8.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-mute);
  padding: 9px 8px 3px;
}
.hproof-ui-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 7px;
  font-weight: 500; font-size: 11px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden;
}
.hproof-ui-nav-item svg { flex-shrink: 0; color: currentColor; }
.hproof-ui-nav-item-active { background: #e6e4fb; color: #6366f1; }

/* — Hauptbereich — */
.hproof-ui-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--white);
}
.hproof-ui-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.hproof-ui-title {
  font-weight: 600; font-size: 14px; color: var(--ink);
  letter-spacing: -0.01em;
}

/* — Kanban-Board (leer): echte Spalten + Reihenfolge — */
/* Board NICHT an die Body-Höhe koppeln (kein flex:1) — es sitzt oben,
   darunter bleibt Weißraum. */
.hproof-ui-board {
  display: flex; gap: 7px;
  padding: 14px 16px;
  align-self: flex-start;
  width: 100%;
}
.hproof-ui-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.hproof-ui-col-head {
  font-size: 9.5px; font-weight: 600; color: var(--ink-soft);
  padding: 0 2px 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Feste, kompakte Spaltenhöhe statt volle Frame-Höhe. */
.hproof-ui-col-body {
  height: 118px;
  background: #f4f4f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px;
  display: flex; flex-direction: column; gap: 6px;
}
/* dezente leere "Ghost"-Balken als Strukturandeutung (ohne Text) */
.hproof-ui-ghost {
  display: block; height: 18px;
  background: #e7e7ec;
  border-radius: 5px;
}

/* ============================================
   REFERENZ / CASE-CARD — schlichte weiße Card, Türkis nur als Badge
   ============================================ */
.hcase {
  margin-top: 40px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  overflow: hidden;
}
.hcase-copy { padding: 44px; }
.hcase-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--accent-soft); color: var(--accent-deep);
  border-radius: 999px; padding: 5px 12px;
  margin-bottom: 16px;
}
.hcase-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hcase-copy h3 { font-weight: 500; font-size: 22px; margin-bottom: 12px; color: var(--ink); }
.hcase-copy p { color: var(--ink-soft); font-size: 20px; line-height: 1.6; }
.hcase-visual {
  background: var(--bg-warm);
  border-left: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 28px; min-height: 220px;
  color: var(--ink-mute); font-size: 13px; text-align: center;
}

@media (max-width: 900px) {
  .hcase { grid-template-columns: 1fr; }
  .hcase-visual { order: -1; min-height: 160px; }
}

/* ============================================
   ZUSAMMENARBEIT — Prozess-Timeline: nummerierte
   Marker auf animierter Fortschrittslinie, darunter
   Karten mit gestaffeltem Scroll-Reveal.
   Aktivierung via .is-visible (IntersectionObserver,
   Inline-Script in index.html); --i = Step-Index für
   die Stagger-Delays.
   ============================================ */
.hsteps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* — Fortschrittslinie zwischen erstem und letztem Marker-Zentrum
     (Spaltenmitte i = (i+0.5)/4 → 12.5% bzw. 87.5%) — */
.hsteps-line {
  position: absolute;
  top: 21px;                    /* Mitte der 44px-Marker minus 1px Linienhälfte */
  left: 12.5%; right: 12.5%;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  z-index: 0;
}
.hsteps-line span {
  display: block; height: 100%; width: 100%;
  background: #c4c9d2;                 /* Grau statt Indigo/Violet-Verlauf */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.25s;
}
.hsteps.is-visible .hsteps-line span { transform: scaleX(1); }

/* — Step-Spalte: Reveal (Fade + Slide-up, gestaffelt) — */
.hstep {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   .6s ease calc(0.1s + var(--i) * 0.3s),
    transform .6s ease calc(0.1s + var(--i) * 0.3s);
}
.hsteps.is-visible .hstep { opacity: 1; transform: none; }

/* — Marker: Kreis mit Nummer; "aktiviert" sich, wenn die
     Fortschrittslinie ihn erreicht (gestaffeltes Delay) — */
.hstep-marker {
  width: 44px; height: 44px;
  border-radius: 50%;
  align-self: center;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 13.5px; font-weight: 600;
  margin-bottom: 22px;
  transition:
    background   .45s ease calc(0.3s + var(--i) * 0.38s),
    color        .45s ease calc(0.3s + var(--i) * 0.38s),
    border-color .45s ease calc(0.3s + var(--i) * 0.38s),
    box-shadow   .45s ease calc(0.3s + var(--i) * 0.38s);
}
.hsteps.is-visible .hstep-marker {
  background: #eceef2;                 /* leichtes Grau statt Gradient */
  border-color: var(--line);
  color: var(--ink-soft);
  box-shadow: 0 0 0 5px rgba(11, 15, 25, 0.04), 0 6px 16px rgba(11, 15, 25, 0.08);
}

/* — Karte — */
.hstep-card {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hstep-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 18px 44px rgba(11, 15, 25, 0.09);
}

/* Gefüllte, farbige Icon-Kachel (Indigo/Violet im Wechsel, Icon weiß) —
   analog zum Leistungs-Grid [4]. Färbung per nth-child auf .hstep:
   1+3 Indigo, 2+4 Violet. */
.hstep-icon {
  width: 56px; height: 56px; border-radius: 16px;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.hstep-icon svg { display: block; width: 26px; height: 26px; }
.hstep:nth-child(odd) .hstep-icon {
  background: #5b52e0;
  box-shadow: 0 10px 22px -10px rgba(91, 82, 224, 0.7);
}
.hstep:nth-child(even) .hstep-icon {
  background: #7c3aed;
  box-shadow: 0 10px 22px -10px rgba(124, 58, 237, 0.7);
}

/* Nur Nicht-Typo-Props hier; Schriftgröße/-gewicht kommen zentral aus
   der KARTEN-TYPO-HIERARCHIE am Dateiende. */
.hstep-card h3 { margin-bottom: 8px; }

/* — Responsive: 2-spaltig / 1-spaltig, Linie ausblenden — */
@media (max-width: 960px) {
  .hsteps { grid-template-columns: repeat(2, 1fr); }
  .hsteps-line { display: none; }
}
@media (max-width: 560px) {
  .hsteps { grid-template-columns: 1fr; }
}

/* — Reduced Motion: alles sofort sichtbar, keine Animationen — */
@media (prefers-reduced-motion: reduce) {
  .hstep, .hstep-marker, .hsteps-line span { transition: none; }
  .hstep { opacity: 1; transform: none; }
}

/* ============================================
   ÜBER UNS — ruhige Cards, runde Fotoplatzhalter
   ============================================ */
.hteam-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .hteam-grid { grid-template-columns: 1fr; } }

.hteam-card {
  display: flex; gap: 20px; align-items: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px;
}
.hphoto-placeholder {
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px dashed var(--line); background: var(--bg-warm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--ink-mute);
}
.hphoto-placeholder svg { width: 22px; height: 22px; stroke-width: 1.5; }
.hphoto-placeholder span { font-size: 8px; font-weight: 600; letter-spacing: .02em; text-align: center; line-height: 1.3; }
.hteam-card h3 { font-size: 16px; margin-bottom: 4px; font-weight: 500; }
.hteam-card .hrole { color: var(--brand); font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.hteam-card p.hbio { color: var(--ink-soft); font-size: 20px; }

/* ============================================
   ABSCHLUSS-CTA — helle Indigo-Violett-Fläche mit
   sanftem Marken-Glow in den Ecken
   ============================================ */
/* Full-width dunkle Band-Sektion, farblich an den Footer (#1c1f26)
   angelehnt, aber etwas heller (#262a33) — leitet visuell zum Footer
   über. Sanfte Indigo/Violet-Glows als dezenter Marken-Akzent. */
.hcta-wrap {
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(168, 85, 247, 0.16) 0%, rgba(168, 85, 247, 0) 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 55%),
    #262a33;
}
.hcta-final {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 32px;
  text-align: center;
}
.hcta-final h2 {
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.15; letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.hcta-final h2 em { color: #a5b4fc; }
.hcta-final p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 20px; max-width: 480px; margin: 14px auto 0;
}
.hcta-final .hbtn-primary { margin-top: 30px; }

/* Hinweis: .hfooter-* lebt jetzt in assets/css/site-header.css —
   Header/Footer sind seit der Vereinheitlichung ausgelagert
   (partials/), siehe assets/js/layout.js. */

/* ============================================
   PLATZHALTER-Hinweis (auffällig, nicht produktiv)
   ============================================ */
.hplaceholder-note {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border-radius: 6px;
  padding: 6px 10px;
  width: fit-content;
}
.hplaceholder-inline {
  background: #fef3c7; color: #92400e;
  border-radius: 6px; padding: 1px 6px;
  font-weight: 700; font-size: .92em;
}

/* ============================================
   LEISTUNGEN — "Was wir für Ihren Betrieb entwickeln" (Sektion 4).
   Bewusst anders als die hochkant-Glass-Cards von Sektion 5:
   liegende 2×2-Karten mit dezent-hellem Hintergrund und flächig
   eingefärbter Icon-Kachel (Indigo/Violet im Wechsel, Icon weiß).
   ============================================ */
.hbuild-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.hbuild-card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: #f6f6fb;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 30px 32px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.hbuild-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(30, 27, 75, 0.15);
}

/* Scroll-Reveal: Karten erscheinen gestaffelt von unten nach oben,
   sobald das Grid in den Viewport scrollt (JS setzt .is-visible).
   Timing/Distanz/Staffelung identisch zur Zusammenarbeit-Sektion
   (.hstep): 20px, .6s ease, Delay 0.1s + i·0.3s. Bewusst als
   @keyframes-Animation (nicht Transition), damit der Hover-Transform
   der Karte nicht mit der Slide-Bewegung kollidiert. */
.hbuild-card { opacity: 0; }
.hbuild-grid.is-visible .hbuild-card {
  animation: hbuild-rise .6s ease both;
}
.hbuild-grid.is-visible .hbuild-card:nth-child(1) { animation-delay: .1s; }
.hbuild-grid.is-visible .hbuild-card:nth-child(2) { animation-delay: .4s; }
.hbuild-grid.is-visible .hbuild-card:nth-child(3) { animation-delay: .7s; }
.hbuild-grid.is-visible .hbuild-card:nth-child(4) { animation-delay: 1s; }
@keyframes hbuild-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hbuild-card { opacity: 1; }
  .hbuild-grid.is-visible .hbuild-card { animation: none; }
}

.hbuild-icon {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff;
}
.hbuild-icon svg { width: 34px; height: 34px; }
.hbuild-icon--indigo {
  background: #5b52e0;
  box-shadow: 0 10px 22px -10px rgba(91, 82, 224, 0.7);
}
.hbuild-icon--violet {
  background: #7c3aed;
  box-shadow: 0 10px 22px -10px rgba(124, 58, 237, 0.7);
}
.hbuild-body { flex: 1; min-width: 0; }
/* Schriftgröße/-gewicht/-farbe zentral (KARTEN-TYPO-HIERARCHIE am
   Dateiende); hier nur Abstand + Laufweite. */
.hbuild-title {
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.hbuild-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.hbuild-list { list-style: none; margin: 0; padding: 0; }
.hbuild-list li {
  position: relative;
  padding-left: 20px;
}
.hbuild-list li + li { margin-top: 7px; }
.hbuild-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

@media (max-width: 860px) {
  .hbuild-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hbuild-card { padding: 24px 22px 26px; gap: 18px; }
  .hbuild-icon { width: 60px; height: 60px; border-radius: 14px; }
  .hbuild-icon svg { width: 28px; height: 28px; }
}

/* ============================================
   WAS UNS UNTERSCHEIDET — Foto-Split mit Glasmorphism (Sektion 9).
   Vollflächiges Foto, rechts ein Glaspanel mit rotierenden Claims.
   Mobil (<820px): Foto (Hochformat) oben, Panel gestapelt darunter.
   ============================================ */
/* Normaler Content-Container wie der Rest der Seite (nicht full-bleed). */
.hwhy-section { max-width: 1200px; margin: 0 auto; padding: calc(var(--sec-pad) + 56px) 32px var(--sec-pad); }
.hwhy {
  position: relative;
  display: flex;
  height: 600px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hwhy-media {
  position: absolute; inset: 0;
  background-image: url("../img/eugen-und-leon-zwei.jpg");
  background-size: cover;
  /* CENTER TOP: verankert oben, damit im Querformat beide Köpfe (Eugen
     sitzt oben) im Bild bleiben; beschnitten wird unten. */
  background-position: center top;
}
/* Dezenter Scrim: links transparent → rechts leicht hell, damit das
   Glaspanel satt sitzt. */
.hwhy-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,0.28) 100%);
  pointer-events: none;
}
.hwhy-panel {
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: 44%;
  display: flex;
  align-items: center;
  padding: 56px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.62) 0%,
    rgba(255,255,255,0.42) 100%);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border-left: 1px solid rgba(255,255,255,0.7);
}
.hwhy-panel-inner { width: 100%; max-width: 460px; }

/* Headline: "Was uns unterscheidet" — Urbanist, das em-Wort erbt global
   Playfair Display (italic) wie die übrigen H2 der Seite. */
.hwhy-title {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 38px; line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 60px;
}

.hwhy-claims { list-style: none; margin: 0 0 24px; padding: 0; }
.hwhy-claim {
  position: relative;
  padding-left: 22px;
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 21px; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.01em;
  color: rgba(11, 15, 25, 0.32);          /* ausgegraut (inaktiv) */
  transition: color .4s ease;
}
.hwhy-claim + .hwhy-claim { margin-top: 8px; }
.hwhy-claim::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .4s ease, transform .4s ease;
}
.hwhy-claim.is-active { color: var(--ink); }
.hwhy-claim.is-active::before { opacity: 1; transform: scale(1); }

.hwhy-divider {
  height: 1px;
  background: rgba(11, 15, 25, 0.12);
  margin: 0 0 24px;
}
.hwhy-text {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px; font-weight: 400; line-height: 1.6;
  color: var(--ink-mute);
  margin: 0 0 18px;
}
/* Erster Satz des Absatzes kräftig (--ink), Rest gedämpft. */
.hwhy-text strong { font-weight: 600; color: var(--ink); }
.hwhy-caption {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--brand);
  margin: 0;
}

@media (max-width: 820px) {
  .hwhy-section { padding: var(--sec-pad) 24px; }
  .hwhy { flex-direction: column; height: auto; }
  .hwhy-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 380px;
    background-image: url("../img/eugen-und-leon.png");
    background-position: center top;
  }
  .hwhy-panel {
    width: 100%;
    margin-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.7);
    padding: 40px 24px;
  }
  .hwhy-panel-inner { max-width: none; }
  .hwhy-claim { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hwhy-claim, .hwhy-claim::before { transition: none; }
}

/* ============================================
   KARTEN-TYPO-HIERARCHIE — zentral für alle Karten-Typen.
   Überschrift größer + kräftiger als der Beschreibungstext. Steht
   bewusst am Ende der Basis-Regeln, damit sie die Einzel-Definitionen
   von .hstep-card, .hsecurity-card und .hbuild [4] per Kaskade sicher
   überschreibt (gleiche Spezifität, spätere Position gewinnt). Ein Ort
   statt drei Einzel-Flicken.
   ============================================ */
.hstep-card h3,
.hsecurity-card-head span,
.hbuild-title {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.hstep-card p,
.hsecurity-card p,
.hbuild-list li {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-mute);
}

/* Whitespace: die gesamte Zusammenarbeit-Sektion bekommt oben und unten
   deutlich mehr Luft, um sich von Sicherheit [7] und Foto-Split
   abzusetzen. ID-Selektor (0,1,0,0) schlägt .hsection; nur top/bottom
   als Longhand, damit die seitlichen Gutter von .hsection bleiben. */
#zusammenarbeit { padding-top: 120px; padding-bottom: 120px; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 860px) {
  :root { --sec-pad: 52px; }
  .hgrid { grid-template-columns: 1fr; }
  .hsection { padding: var(--sec-pad) 24px; }
  .hcta-final { padding: 64px 24px; }
  #zusammenarbeit { padding-top: 80px; padding-bottom: 80px; }
  .hmanifest { font-size: 18px; }
  .hhero { padding: 176px 0 var(--sec-pad); }
  .hhero-inner { padding: 0 24px; }
}