/* =========================================================
   1) DESIGN TOKENS / VARIABLES
   ========================================================= */
:root{
  --bg-page: #F8FAFC;
  --bg-section: transparent;
  --bg-card: #FFFFFF;
  --border: #E3E7EF;

  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-placeholder: #94A3B8;
  --text-on-accent: #FFFFFF;

  --link: #134ECD;
  --link-hover: #0f3ea6;

  --api-primary: #134ECD;
  --api-hover: #0f3ea6;

  --radius-card: 15px;
  --radius-ctrl: 15px;
  --radius-btn: 15px;
  --content-max: 1600px;
  --header-h: 76px;
  --hero-base: #060A14;

  --font-family: "Arial", "Helvetica Neue", Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --h1-size: 48px; --h1-line: 56px; --h1-weight: 700;
  --h1-size-mobile: 34px; --h1-line-mobile: 42px;
  --lead-size: 20px; --lead-line: 30px; --lead-weight: 500;
  --body-size: 16px; --body-line: 26px; --body-weight: 400;

  --case-halo: rgba(19,78,205,0.18);
  --case-spot: rgba(19,78,205,0.10);
}

/* =========================================================
   2) BASE STYLES
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: var(--font-family);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height:1.55;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}

.page-bg{
  position:fixed;
  inset:0;
  z-index:-4;
  overflow:hidden;
  background: radial-gradient(140% 140% at 15% 10%, #ffffff 0%, #f4f8ff 38%, #eaf3ff 65%, #f8fbff 100%),
              linear-gradient(120deg, rgba(19,78,205,0.06), rgba(19,78,205,0.0));
}
/* keine Animationen mehr auf der page-bg */

/* Sections overlay (mask excludes Hero) */
.sections-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  mask-image: linear-gradient(180deg, transparent 0%, transparent 12vh, black 22vh, black 90vh, transparent 100%);
}
.sections-bg canvas{position:absolute; inset:0; width:100%; height:100%; opacity:0.55;}
@media (prefers-reduced-motion: reduce){.sections-bg canvas{display:none;}}

/* Spacing + focus */
.section{padding:75px 0 20px;}
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav__link:focus-visible{outline:2px solid var(--api-primary);outline-offset:3px;}

/* Buttons (base) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius: var(--radius-btn);
  padding:10px 14px;
  font-size:14px;font-weight:600;line-height:1.1;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  position:relative;overflow:hidden;isolation:isolate;box-shadow:none;border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px);}
.btn__icon{width:24px;height:24px;margin-left:8px;display:inline-flex;align-items:center;justify-content:center;}
.btn__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;}
.btn::after{
  content:"";position:absolute;inset:-140%;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  transform: translateX(-30%);transition: transform .35s ease, opacity .35s ease;opacity:0.85;pointer-events:none;
}
.btn:hover::after{transform: translateX(25%);}
.btn::before{
  content:"";position:absolute;top:0;left:-120%;width:120%;height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: skewX(-12deg);transition: transform 0.6s ease, left 0.6s ease, opacity 0.6s ease;opacity:0.9;pointer-events:none;
}
.btn:hover::before{left:100%;transform: skewX(-12deg);}
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn::after,.btn::before{transition:none;opacity:0}
}

/* Ghost Case Button */
.btn--ghostCase{
  margin-top:16px;
  border:1px solid rgba(19,78,205,0.22);
  color:#134ecd;
  background: linear-gradient(180deg, #f8fbff 0%, #f2f6ff 100%);
  font-weight:400;
  border-radius:15px;
  min-height:40px;
  min-width:170px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn--ghostCase:hover{
  background: linear-gradient(180deg, #e6efff 0%, #d8e7ff 100%);
  color:#0f3ea6;
  border-color:#134ecd;
}
.btn--ghostCase::before,.btn--ghostCase::after{opacity:0.7;}
@media (prefers-reduced-motion: reduce){
  .btn--ghostCase::before,.btn--ghostCase::after{display:none;}
}

/* Reduced motion global fallbacks */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .accentWord,.hero__bg,.hero__scanlines{animation:none;filter:none}
  .flowHero--anim .flowHero__panel,
  .flowHero--anim .flowHero__item,
  .flowHero--anim .flowHero__item,
  .flowHero--anim .flowDetail,
  .hero__inner{transform:none !important;}
  .badge--glint::after{animation:none !important;opacity:0.2;}
  .btn::after,.btn::before,.flowTab::after,.flowTab::before{display:none;}
  .cases-hub__glow{display:none;}
}

/* Mobile utility */
@media (max-width: 480px){
  .btn{width:100%;justify-content:center;}
  .hero__cta{width:100%;}
}

.accentWord{
  color: transparent;
  background: linear-gradient(120deg, var(--api-primary) 0%, #8b5cf6 25%, #ec4899 50%, #22d3ee 75%, #60a5fa 100%);
  -webkit-background-clip: text; background-clip: text;
  background-size: 250% 100%;
  filter: drop-shadow(0 14px 40px rgba(96,165,250,.14));
  white-space: nowrap;
}

/* =========================================================
   3) LAYOUT (HEADER / NAV)
   ========================================================= */
.header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  width:100%;
  background: #ffffff;
  border-bottom:1px solid rgba(226,232,240,.6);
  backdrop-filter: blur(14px);
  box-shadow:none;
  transition: all 0.25s ease;
}
.header__edge{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0));
  pointer-events:none;
}
.header__inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:14px;
  min-height: var(--header-h);
  transition: min-height 0.25s ease;
}
.brand{display:flex;align-items:center;height: var(--header-h);transition: transform 0.25s ease;}
.wordmark{
  display:flex;align-items:center;gap:8px;
  font-size:30px;font-weight:850;letter-spacing:-0.015em;
  color: var(--api-primary) !important;line-height:1;transition: transform 0.25s ease;
}
.wordmark .brace{font-family: var(--font-mono);font-weight:800;color: var(--api-primary) !important;}
.wordmark .name{color: var(--api-primary) !important;-webkit-text-fill-color: var(--api-primary) !important;}

/* NAVIGATION */
.nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
  font-size:16px;font-weight:500;color: var(--text-secondary);
  align-self:center;overflow-x:auto;padding:6px 0;
}
.nav__link{
  color: inherit;
  padding:12px 12px;
  border-radius:12px;
  transition: background .15s ease, color .15s ease;
  line-height:1; position: relative;
}
.nav__link.is-active::after{
  content:"";position:absolute;left:12px; right:12px; bottom:6px;
  height:2px; border-radius:999px;
  background: linear-gradient(90deg, var(--api-primary), #1b5ff0);opacity:0.9;
}
.nav__link:hover{color: var(--text-primary);background: rgba(0,0,0,.04);}

/* Header actions */
.header__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap;}

/* Shrink on scroll */
body.is-scrolled .header{background: rgba(255,255,255,0.82);box-shadow:none;}
body.is-scrolled .header__inner{min-height: 64px;}
body.is-scrolled .brand, body.is-scrolled .wordmark{transform: scale(1);}
body.is-scrolled .btn{padding:10px 14px;}

/* =========================================================
   4) HERO (Optimiert für LCP 100/100)
   ========================================================= */
main{scroll-snap-type: y mandatory;padding-top:0;}
.hero{
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  background: #0a1024; /* statisch, keine Animation */
  color: rgba(234, 240, 255, .92);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: calc(var(--header-h) + 32px) 0 48px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: var(--header-h);
}
/* =========================================================
   ANIMIERTER MESH-GRADIENT (Performance-Optimiert)
   ========================================================= */
.hero__bg {
position: absolute;
  inset: -10%; /* Verhindert sichtbare Ränder bei der Animation */
  z-index: 1;
  
  /* Kräftigere Farben basierend auf deinem Snippet */
  background: 
/* 1. Dein Branding-Blau (jetzt mit 50% Deckkraft für Präsenz) *
/ radial-gradient(circle at 20% 30%, rgb(19 78 205 / 13%), transparent 70%), /* 2. Das kräftige Violett (ca. 40% Deckkraft) */
radial-gradient(circle at 80% 20%, rgb(83 8 253 / 35%), transparent 70%), /* 3. Das Cyan (vorher 0%, jetzt 30% für den Frische-Kick unten) */
radial-gradient(circle at 50% 80%, rgb(14 165 233 / 6%), transparent 75%);
  animation: heroAurora 5s ease-in-out infinite alternate;
  /* Teilt dem Browser mit, die GPU für diese Animation zu reservieren */
  will-change: transform; 
  pointer-events: none;
}

@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.hero__canvas{display:none;} /* Canvas deaktiviert */
.hero__vignette{
  position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(0,0,0,0) 46%, rgba(0,0,0,.40) 100%);
  pointer-events:none; transition: opacity 0.6s ease; z-index:3;
}
.hero__inner{
  position:relative; z-index:4;
  width:100%; max-width: 1180px;
  margin:0 auto; padding: 0 28px 90px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height: calc(100vh - var(--header-h));
  opacity:1;
}
h1.hero__title{
  margin: 0 0 15px 0;
  font-size: clamp(36px, 5.6vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: rgba(245, 248, 255, 1);
}
.hero__lead{
  margin:0 auto 20px;
  max-width: 70ch;
  font-size: var(--lead-size);
  line-height: var(--lead-line);
  font-weight: var(--lead-weight);
}
.hero__cta{
  display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;margin:30px;
}
.hero__cta-secondary{border:1px solid rgba(255,255,255,0.35);background: transparent;color: #fff;}
@media (min-width: 640px){ .hero__cta{flex-direction:row} }
.hero__cta .btn{min-width: 170px;justify-content: center;}
.hero__note{
  margin:0px;
  color: rgba(234,240,255,0.82);
  font-size:18px;
  text-align:center;
}

/* Hero badges */
.hero-badges{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin:15px;
}
.hero-badge{
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.01em;
  color:#0f172a;
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  contain: paint;
}
.hero-badge--blue{background: rgba(19,78,205,0.14);border-color: rgba(19,78,205,0.28);color:#e8eeff;}
.hero-badge--green{background: rgba(34,197,94,0.16);border-color: rgba(34,197,94,0.32);color:#e5ffee;}
.hero-badge--outline{background: rgba(255,255,255,0.08);border-color: rgba(226,232,240,0.35);color:#eef2ff;}

/* Hero presenter grid */
.hero-presenter{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
  width:100%;
  max-width:1100px;
  margin:20px;
}
@media (max-width: 992px){ .hero-presenter{grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .hero-presenter{grid-template-columns: 1fr;} }
.hero-presenter__card{
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  min-height:120px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#eaf0ff;
  aspect-ratio: 16 / 10;
  height: auto;
  contain: paint;
}
.hero-presenter__card h2{
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:#ffffff;
}
.hero-presenter__card p{
  margin:6px 0 0;
  font-size:14px;
  color:#94a3b8;
  line-height:1.45;
}
.hero__leadWrap{margin:0 0 15px 0;max-width: 90ch;}
.hero__lead--secondary{color: rgba(234,240,255,.74);font-size: 14px;line-height: 28px;}

/* =========================================================
   5) SECTIONS (generic + services)
   ========================================================= */
.section{
  position: relative;
  overflow: visible;
  background: var(--bg-section);
  color: #E2E8F0;
  display: block;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: var(--header-h);
}
.section__bg{position:absolute; inset:0; background: transparent; pointer-events:none; z-index:0;}
.section__inner{max-width: 1600px; position: relative; z-index:1; width:100%;}
.section__head{margin-bottom: 20px; text-align: center;}
.section h2{font-size: clamp(30px, 3.6vw, 50px); margin: 2px 0 4px; color: #0f172a; letter-spacing: -0.01em; line-height:1.08;}
.section__lead{color: #475569; margin: 0 auto 10px; max-width: 980px;}
.section__trust{margin: 6px auto 10px; color: #5b6476; font-size: 14px; letter-spacing: 0.04em;}
.section__divider{width: 120px; height: 1px; margin: 12px auto 0; background: rgba(15,23,42,0.08); border-radius: 999px;}
.section--services{background: transparent; padding:75px 0 25px;}

/* Services grid */
.cards--services{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  align-items: stretch;
  position: relative;
  scroll-snap-align: start;
}
.cards--services::before{
  content:"";
  position:absolute; inset:0;
  top:10%; height:80%;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.18), transparent 45%);
  pointer-events:none; z-index:0;
}
@media (max-width: 1100px){ .cards--services{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .cards--services{ grid-template-columns: 1fr; } }

/* Card */
.card{
  background: #ffffff;
  border:1px solid #e5e8f0;
  border-radius: var(--radius-card);
  padding: 25px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
  min-height: 240px;
  display:grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: auto;
  gap:12px 14px;
  align-items:start;
  position: relative; z-index:1;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  overflow:hidden;
}
.card::after{content:""; position:absolute; inset:-1px; background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0)); opacity:0; transition: opacity 0.18s ease; pointer-events:none;}
.card--link{color:inherit;text-decoration:none;}
.card__accent{display:none;}
.card:hover{
  transform: translateY(-4px);
  background-color: #f2f6ff;
  box-shadow: 0 12px 32px rgba(15,23,42,0.10), 0 0 0 1px rgba(19,78,205,0.05);
}

/* Hover colors */
.cards--services > a:nth-child(1):hover{border-color: rgba(15,122,43,0.45); box-shadow: 0 12px 32px rgba(15,122,43,0.22), 0 0 0 1px rgba(15,122,43,0.30);}
.cards--services > a:nth-child(2):hover{border-color: rgba(107,33,168,0.45); box-shadow: 0 12px 32px rgba(107,33,168,0.22), 0 0 0 1px rgba(107,33,168,0.30);}
.cards--services > a:nth-child(3):hover{border-color: rgba(11,75,179,0.45); box-shadow: 0 12px 32px rgba(11,75,179,0.22), 0 0 0 1px rgba(11,75,179,0.30);}
.cards--services > a:nth-child(4):hover{border-color: rgba(11,138,161,0.45); box-shadow: 0 12px 32px rgba(11,138,161,0.22), 0 0 0 1px rgba(11,138,161,0.30);}
.cards--services > a:nth-child(5):hover{border-color: rgba(192,86,33,0.45); box-shadow: 0 12px 32px rgba(192,86,33,0.22), 0 0 0 1px rgba(192,86,33,0.30);}
.cards--services > a:nth-child(6):hover{border-color: rgba(177,22,87,0.45); box-shadow: 0 12px 32px rgba(177,22,87,0.22), 0 0 0 1px rgba(177,22,87,0.30);}

.card__icon{
  width:46px;height:46px;border-radius: var(--radius-card);
  background: #e9efff; display:grid;place-items:center;
  color: var(--api-primary); box-shadow:none;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  grid-row:1;
  grid-column:1;
}
.card__icon svg{width:24px;height:24px;stroke: currentColor;}
.card:hover .card__icon{transform: translateY(-2px); box-shadow: none;}
.card h3{
  margin: 0;
  color: #0f172a;
  font-size: 21px;
  line-height:1.1;
  transition: color 0.18s ease;
  grid-row:1;
  grid-column:2;
  align-self:center;
}
.card p{
  margin: 0;
  color: #334155;
  font-size: 16px;
  line-height: 26px;
  grid-column:1 / span 2;
}
.tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
  grid-column:1 / span 2;
}
.tags span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 11px;
  border-radius:15px;
  background:#f1f4f9;
  color:#475569;
  font-weight:600;
  font-size:13px;
  border:1px solid #e3e7ef;
  opacity:1;
}

/* =========================================================
   6) CASE STUDIES
   ========================================================= */
.section--cases{background: transparent; padding:75px 0 25px;}
.section--cases::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 55% 45%, rgba(19,78,205,0.12), transparent 45%);
  opacity:0.55; pointer-events:none;
}
.section--cases::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  mix-blend-mode: overlay; opacity:0.35; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .section--cases::before,.section--cases::after{animation:none;}
}
.cases-board{
  position:relative; border-radius:20px;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px 18px;
}
@media (max-width: 900px){
  .cases-board{grid-template-columns:1fr; padding:38px 18px 28px;}
}
.cases-hub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:250px; height:250px; border-radius:50%;
  background: rgba(255,255,255,0.82); border:1px solid rgba(19,78,205,0.18);
  box-shadow: 0 18px 48px rgba(15,23,42,0.12), 0 0 0 14px rgba(255,255,255,0.72), inset 0 1px 0 rgba(255,255,255,0.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  z-index:4; backdrop-filter: blur(10px); overflow:hidden;
}
.cases-hub__glow{
  position:absolute; inset:-25%;
  background: radial-gradient(circle at 50% 35%, rgba(19,78,205,0.16), transparent 60%);
  animation: hubGlow 14s ease-in-out infinite alternate;
}
@keyframes hubGlow{0% {transform: translate3d(-6px,-4px,0);}100%{transform: translate3d(6px,4px,0);}}
@media (prefers-reduced-motion: reduce){.cases-hub__glow{display:none;}}
.cases-hub__logo img{width:96px;height:96px; position:relative; z-index:1;}
.cases-hub__title{font-weight:800; color:#0f172a; font-size:36px; position:relative; z-index:1;}
.cases-hub__subtitle{font-size:14px; color:#475569; line-height:1.35; padding:0 18px; position:relative; z-index:1;}
@media (max-width: 900px){
  .cases-hub{position:relative; left:50%; top:0; transform:translate(-50%,0); margin-bottom:18px; width:240px; height:240px;}
}
.caseTile{
  position:relative;
  padding:50px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:15px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.10), 0 1px 0 rgba(255,255,255,0.7) inset;
  color:#0f172a;
  display:flex; flex-direction:column; gap:8px; z-index:1;
  justify-content: flex-start;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  overflow:hidden;
  align-items: center;
}
.caseTile::after{
  content:""; position:absolute; left:0;right:0;bottom:0; height:3px;
  background: linear-gradient(90deg, rgba(19,78,205,0.25), rgba(19,78,205,0));
  opacity:0.8;
}
.caseTile--divider{border-left:1px solid rgba(255,255,255,0);}
.caseTile__badge{
  position:absolute; top:12px; right:14px;
  font-size:12px; font-weight:700; color:#0f172a;
  padding:6px 10px; border-radius:15px;
  background:rgba(19,78,205,0.06); border:1px solid rgba(19,78,205,0.12);
  overflow:hidden;
}
.caseTile__badge::after{
  content:""; position:absolute; inset:-120% -60%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
  transform: translateX(-80%); animation: badgeSoftGlint 6s ease-in-out infinite; pointer-events:none; opacity:0.75;
}
@keyframes badgeSoftGlint{0%,70% { transform: translateX(-80%); } 80%,100% { transform: translateX(120%); }}
.caseTile__header h3{margin:4px 0 6px; font-size:21px; line-height:1.25; color:#0f172a; text-align: center; letter-spacing: -0.01em;}
.caseTile__sub{margin:18px 12px; font-size:14px; color:#475569; line-height:22px; text-align: center;}
.case__footer{
  margin-top:10px;
  background: linear-gradient(180deg, #f7f9ff 0%, #f2f5fb 100%);
  color:#0F172A;
  border-radius:15px;
  padding:12px 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  align-items:start;
  width: 100%;
  border:1px solid rgba(19,78,205,0.14);
}
.case__footer-item{display:flex; flex-direction:column; gap:4px; align-items: center; border-right: 1px solid rgba(15,23,42,0.08); padding-right:10px;}
.case__footer-item--last{border-right:none;}
.case__footer-label{font-size:14px; color:#0F172A; letter-spacing:0.01em;}
.case__footer-value{font-size:18px; font-weight:800; color:#0F172A; letter-spacing: 0.01em;}

/* Hub halo */
.cases-board::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(19,78,205,0.18), transparent 55%);
  opacity: 0; transition: opacity 0.32s ease; z-index: 0;
}

/* =========================================================
   7) ENGINEERING STANDARDS
   ========================================================= */
.section--eng-standards{background: transparent; padding:75px 0 25px;}
.section--eng-standards .section__head{text-align:center;}
.section--eng-standards .section__head h2{font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.015em;}
.section--eng-standards .section__lead{
  max-width: 820px; font-size: 18px; line-height: 28px; color: #52607a;
  margin-left: auto; margin-right: auto;
}
.pill-rows{position: relative; z-index: 1; margin-top: 32px; display: flex; flex-direction: column; gap: 16px; align-items: center;}
.pill-row{position: relative; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;}
.pill{
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding:16px 22px;
  min-height:68px;
  border-radius: 15px;
  font-size: 17px; font-weight: 600; color: #0f172a;
  background: linear-gradient(180deg, #f8fbff 0%, #f4f7ff 100%);
  border: 1px solid rgba(25,82,180,0.25);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(19,78,205,0.08),
              inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.04);
  cursor: default;
}
.pill__icon{color: #134ecd; width: 24px; height: 24px; display: inline-flex;}
.pill__text{white-space: nowrap;}
@media (max-width: 960px){.pill-rows{gap: 12px;}.pill-row{width: 100%; justify-content: center;}}
@media (max-width: 640px){.pill{width: 100%; justify-content: center; text-align: center;}.pill__text{white-space: normal;}}

/* =========================================================
   8) MODELS / CTA / FOOTER
   ========================================================= */
.section--models{background: transparent; padding:75px 0 25px;}
.models__head{margin-bottom:28px;}
.models__head h2{font-size: clamp(32px,3.6vw,46px); letter-spacing:-0.015em; margin:0 0 8px; color:#0f172a;}
.models__head .section__lead{max-width:900px; margin:0 auto; color:#4b5568; font-size:18px; line-length:28px;}
.models-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap:22px; align-items:stretch;}
.model-card{
  position:relative;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:22px;
  padding:32px 34px 30px;
  box-shadow:0 10px 28px rgba(15,23,42,0.06);
  display:flex; flex-direction:column; gap:16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.model-card--primary{border:2px solid #3b82f6; box-shadow:0 16px 38px rgba(59,130,246,0.22); transform: translateY(-8px);}
.model-card__badge{
  position:absolute; top:14px; right:14px;
  padding:8px 12px; border-radius:999px;
  background: #e0e7ff; color:#1d4ed8;
  font-weight:800; font-size:13px; letter-spacing:0.01em;
}
.model-card h3{margin:4px 0 4px; font-size:26px; line-height:1.2; color:#0f172a;}
.model-card__sub{margin:0; color:#5b6476; font-size:16px; line-length:26px;}
.model-price{display:flex; flex-direction:column; gap:4px; margin:4px 0 6px;}
.model-price__label{font-size:0.875rem; color:#64748b;}
.model-price__value{font-weight:700; color:#0f172a; font-size:2.5rem; line-height:1.1; letter-spacing:-0.01em;}
.model-list{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.model-list li{display:flex; align-items:flex-start; gap:10px; color:#0f172a; font-size:16px; line-length:24px;}
.model-list svg{width:22px; height:22px; color:#2E62D3; flex-shrink:0;}
.model-card__cta{margin-top:auto; padding-top:10px;}
.model-card__cta .btn{min-width: 190px;}
.btn--outline{border:1.5px solid #3b82f6; background: transparent; color:#1d4ed8; transition: all .2s ease;}
.btn--outline:hover{background: rgba(59,130,246,0.08); box-shadow:0 8px 20px rgba(59,130,246,0.18);}
.btn--primary{background:#2E62D3; border:1px solid #2E62D3; color:#fff; transition: all .2s ease;}
.btn--primary:hover{background:#2550b0; border-color:#2550b0; box-shadow:0 10px 24px rgba(37,80,176,0.25);}
@media (max-width: 720px){
  .model-card{padding:26px 24px;}
  .model-card--primary{transform: none;}
  .model-price__value{font-size:2.1rem;}
}
.trust-strip{
  margin:24px auto 0;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.trust-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:15px;
  background: linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
  border:1px solid rgba(19,78,205,0.16);
  color:#0f172a; font-weight:700;
  box-shadow:0 10px 24px rgba(15,23,42,0.08);
  cursor: default;
}

/* CTA */
.section--cta{background:#0b1220; color:#e5eaf4; padding:90px 0;}
.cta-grid{display:grid; grid-template-columns: 1.05fr 1fr; gap:36px; align-items:center;}
@media(max-width: 960px){.cta-grid{grid-template-columns:1fr;}}
.cta-copy h2{color:#f7f9ff; font-size: clamp(32px, 4vw, 52px); line-height:1.05; margin:0 0 18px;}
.cta-lead{margin:0 0 28px; color:#c4cbe0; font-size:18px; line-length:28px; max-width: 34ch;}
.cta-bullets{display:flex; flex-direction:column; gap:16px;}
.cta-bullet{display:flex; gap:12px; align-items:flex-start;}
.cta-bullet__icon{width:48px; height:48px; border-radius: var(--radius-card); background: rgba(255,255,255,0.08); color:#d9e5ff; display:grid; place-items:center; flex-shrink:0;}
.cta-bullet__title{font-weight:700; color:#f1f4fb; margin-bottom:4px;}
.cta-bullet__desc{color:#c4cbe0; line-length:1.5;}
.cta-card{
  background: linear-gradient(145deg, #f9fbff 0%, #f2f4f8 100%);
  border-radius: var(--radius-card);
  padding:28px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.22), 0 2px 0 rgba(255,255,255,0.8) inset;
  border:1px solid rgba(15,23,42,0.06);
}
.cta-form{display:flex; flex-direction:column; gap:14px;}
.form-row{display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:12px;}
.form-field{display:flex; flex-direction:column; gap:6px; color:#0f172a; font-weight:600; font-size:14px;}
.form-field span{color:#0f172a;}
.form-field input,.form-field textarea{
  border:1px solid #e2e8f0;
  background:#ffffff;
  color:#0f172a;
  border-radius: var(--radius-card);
  padding:12px 14px;
  font-size:14px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
.form-field textarea{resize:vertical; min-height:96px;}
.form-field input::placeholder,.form-field textarea::placeholder{color:#9aa8bc;}
.form-field input:focus,.form-field textarea:focus{border-color: rgba(19,78,205,0.45); box-shadow: 0 0 0 3px rgba(19,78,205,0.12); background:#fff;}
.form-check{display:flex; align-items:center; gap:10px; font-size:14px; color:#0f172a;}
.form-check input{width:18px; height:18px; accent-color: var(--api-primary); border-radius:4px;}
.form-check a{color: var(--api-primary); font-weight:700;}
.cta-form .btn{width:100%; justify-content:center; margin-top:6px; border-radius: 15px; border:1px solid transparent; background: var(--api-primary); color:#fff; padding:12px 16px;}
.cta-form .btn:hover{background: var(--api-hover); transform: translateY(-1px);}
.form-hint{margin:4px 0 0; text-align:center; color:#94a3b8; font-size:13px;}
.section--cta .cta-legal{margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:#94a3b8;}
.section--cta .cta-legal__links{display:flex; flex-wrap:wrap; gap:14px;}
.section--cta .cta-legal__links a{color:#cbd5e1; font-weight:600;}
.section--cta .cta-legal__copy{white-space:nowrap; color:#cbd5e1;}
@media(max-width:600px){
  .section--cta .cta-legal{flex-direction:column; align-items:flex-start;}
  .section--cta .cta-legal__copy{white-space:normal;}
}

/* Footer */
.site-footer{background:#0b1220; color:#cbd5e1; padding:18px 0 22px;}
.site-footer__inner{
  max-width: var(--content-max); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-footer__copy{white-space:nowrap; color:#e5eaf4; font-weight:600;}
.site-footer__links{display:flex; gap:16px; flex-wrap:wrap;}
.site-footer__links a{color:#cbd5e1; font-weight:600;}
.site-footer__links a:hover{color:#fff;}
@media(max-width:640px){
  .site-footer__inner{flex-direction:column; align-items:flex-start;}
  .site-footer__copy{white-space:normal;}
}

/* =========================================================
   10) FLOWMAP (CSS Only Version)
   ========================================================= */
:root {--hub: #1a2b4b; --line-color: rgba(99, 102, 241, 0.15);}
.section--flowmap{background: transparent; padding:75px 0 25px; overflow: hidden;}
.flowmap__head{text-align: center; margin: 0 auto 18px;}
.flowmap__head h2{margin: 0 0 6px; font-size: clamp(30px,3.6vw,50px); letter-spacing: -0.01em; color: #0f172a;}
.flowmap__head .section__lead{color: #475569; margin: 0 auto 10px; max-width: 980px;}
.flowmap{
  position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 280px 1fr; align-items: center; gap: 40px;
}
.flowmap__col{display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 2;}
.flowmap__col--left{ align-items: flex-end; } .flowmap__col--right{ align-items: flex-start; }
.flowcard{
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 16px 20px; min-height: 110px; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center;
  position: relative; box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04);
}
.flowcard h3{margin: 0; font-size: 17px; font-weight: 700; color: #0f172a;}
.flowcard p{margin: 0; font-size: 13px; color: #64748b; font-weight: 500;}
.flowcard__tags{display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px;}
.flowcard__tags span{
  padding: 4px 8px; border-radius: 6px;
  background: #f8fafc; color: #64748b;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  border: 1px solid #f1f5f9;
}
.flowcard::after,
.flowcard::before{
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: 120px;
  pointer-events: none;
  z-index: -1;
  transition: opacity 1s ease;
}
.flowcard[data-role="source"]::after{ right: -120px; background: linear-gradient(90deg, var(--line-color) 0%, transparent 100%);}
.flowcard[data-role="target"]::before{ left: -120px; background: linear-gradient(90deg, transparent 0%, var(--line-color) 100%);}
@keyframes subtlePulse{0%,100%{opacity:0.4; width:100px;}50%{opacity:1; width:140px;}}
.flowcard:nth-child(odd)::after, .flowcard:nth-child(odd)::before{animation: subtlePulse 4s ease-in-out infinite;}
.flowcard:nth-child(even)::after, .flowcard:nth-child(even)::before{animation: subtlePulse 5s ease-in-out infinite reverse;}

.flowmap__hub-wrap{ display: flex; align-items: center; justify-content: center; position: relative; height: 100%; min-height: 400px;}
.flowmap__hub-wrap::before{
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--line-color) 20%, var(--line-color) 80%, transparent 100%);
  z-index: 0;
}
.flowmap__hub{
  width: 200px; height: 200px; border-radius: 20px;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 20px 50px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 10; text-align: center; color: #fff; position: relative;
}
.flowmap__hub::after{
  content: ""; position: absolute; inset: -20px; z-index: -1;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
  border-radius: 50%;
}
.flowmap__hub-title{ font-weight: 800; font-size: 20px; margin-bottom: 4px; }
.flowmap__hub-sub{ font-size: 13px; color: #94a3b8; }
@media (max-width: 1024px){
  .flowmap{grid-template-columns:1fr; gap: 20px; max-width: 500px;}
  .flowmap__col{align-items: center;}
  .flowcard::after, .flowcard::before{display:none;}
  .flowmap__hub-wrap::before{display:none;}
  .flowmap__hub-wrap{min-height:auto; margin:20px 0;}
  .flowmap__hub{width:100%; height:auto; padding:30px;}
}

/* =========================================================
   11) FAQ
   ========================================================= */
.section--faq{background: transparent; color: var(--text-primary); padding: 75px 0 40px;}
.section--faq .section__lead{color: var(--text-secondary);}
.faq-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px 28px; margin-top:20px;}
.faq-col{display:flex; flex-direction:column; gap:12px;}
.faq-item{
  border:1px solid #e5e8f0;
  border-radius:15px;
  background:#ffffff;
  padding:14px 16px;
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.faq-item summary{
  cursor:pointer; list-style:none; position:relative;
  padding-right:28px; font-weight:700; color: var(--text-primary); line-height:1.5;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; position:absolute; right:4px; top:2px;
  font-weight:700; color: var(--text-secondary); transition:transform .2s ease, color .2s ease;
}
.faq-item[open] summary::after{content:"−"; color: var(--link);}
.faq-body{margin-top:10px; color: var(--text-secondary); line-height:1.6; font-weight:500;}
.faq-item:hover{border-color: rgba(19,78,205,0.25); box-shadow:0 12px 28px rgba(15,23,42,0.10); transform: translateY(-1px);}
@media (prefers-reduced-motion: reduce){.faq-item,.faq-item summary::after{transition:none;}}

/* =========================================================
   LCP MOBILE OPTIMIERUNG
   ========================================================= */
@media (max-width: 768px){
  main{scroll-snap-type:none;}
  .hero,.section{scroll-snap-align:none;scroll-snap-stop:normal;}
  .page-bg{animation:none;}
  .hero__canvas{display:none;}
  .header{backdrop-filter:none;}
  .hero-presenter__card{backdrop-filter:none;}
  .hero-badge{backdrop-filter:none;}
}

/* Renderarbeit unterhalb des Hero nach hinten schieben */
@supports (content-visibility: auto){
  .section{
    content-visibility:auto;
    contain-intrinsic-size: 900px;
  }
}