/* ==========================================================================
   Pace Process – Landingpage
   Farben und Schriften laut Übergabe. Schriften selbst gehostet (DSGVO).
   ========================================================================== */

/* ---------- Schriften ---------- */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --down: #B0402F;
  --bg: #F7F7F4;
  --surface: #FFFFFF;
  --line: #E2E3DE;
  --line-strong: #C9CCC5;
  --ink: #14181F;
  --body: #3E444D;
  --muted: #5A616B;
  --muted-2: #6B717A;
  --navy: #14305A;
  --navy-hover: #0D2140;
  --navy-soft: #E9EEF5;
  --navy-soft-2: #E3EAF4;
  --deep: #0B1C33;
  --deep-line: #23344F;
  --on-deep: #F2F2EE;
  --on-deep-muted: #A9AEB5;
  --on-deep-body: #D5D8DC;
  --on-deep-accent: #A9C1E0;
  --on-deep-accent-2: #C9D8EC;

  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.8) inset, 0 40px 80px -48px rgba(11,28,51,.45), 0 12px 24px -18px rgba(11,28,51,.18);
  color-scheme: light;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga";
}
img, svg { display: block; max-width: 100%; }
a { color: var(--navy); }
a:hover { color: var(--navy-hover); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.on-deep :focus-visible, .cta :focus-visible { outline-color: #FFFFFF; }
::selection { background: var(--navy); color: #FFFFFF; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--navy); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }

/* Eyebrow mit feiner Linie – Beratungs-Anmutung */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--navy);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow .num { font-family: var(--serif); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: italic; }
.on-deep .eyebrow { color: var(--on-deep-accent); }

.h2 { font-size: clamp(36px, 4.3vw, 56px); line-height: 1.06; }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--body); }

/* ---------- Buttons ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 28px; border-radius: 999px;
  font: 500 16px/1 var(--sans); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn .arrow { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--navy); color: #FFFFFF; box-shadow: 0 10px 24px -14px rgba(20,48,90,.8); }
.btn-primary:hover { background: var(--navy-hover); color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 16px 30px -16px rgba(20,48,90,.9); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: #FFFFFF; }
.btn-dark { --h: 44px; padding: 0 20px; background: var(--ink); color: #FFFFFF; font-size: 15px; }
.btn-dark:hover { background: var(--navy); color: #FFFFFF; }
.btn-light { --h: 58px; padding: 0 34px; background: #FFFFFF; color: var(--navy); font-weight: 600; font-size: 17px; }
.btn-light:hover { background: var(--navy-soft); color: var(--navy-hover); transform: translateY(-1px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,247,244,.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(247,247,244,.92); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.brand { display: inline-flex; align-items: baseline; gap: 9px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-logo { height: 36px; width: auto; }
.footer-logo { height: 122px; width: auto; }
.brand-word { font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -0.01em; }
.brand-sub { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.nav-links a:not(.btn) { color: var(--ink); text-decoration: none; position: relative; padding: 6px 0; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--navy);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav { min-height: 66px; }
  .brand-logo { height: 30px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--ink); font: 500 15px/1 var(--sans); cursor: pointer;
  }
  .nav-toggle .bars { position: relative; width: 16px; height: 10px; }
  .nav-toggle .bars::before, .nav-toggle .bars::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease);
  }
  .nav-toggle .bars::before { top: 1px; } .nav-toggle .bars::after { top: 7.5px; }
  .nav-toggle[aria-expanded="true"] .bars::before { top: 4.5px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { top: 4.5px; transform: rotate(-45deg); }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px; background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -30px rgba(11,28,51,.35);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links .btn { margin-top: 18px; --h: 52px; }
  .no-js .nav-toggle { display: none; }
  .no-js .nav-links { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 20px; padding: 0; border: 0; box-shadow: none; background: none; }
  .no-js .nav-links a:not(.btn) { border: 0; padding: 4px 0; font-size: 15px; }
}

/* ---------- Sprachumschalter ---------- */
.nav-links { margin-left: auto; }
.lang-switch { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); margin-left: 14px; flex: none; }
.lang-switch a { min-width: 36px; min-height: 30px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-decoration: none; transition: background-color .25s var(--ease), color .25s var(--ease); }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { background: var(--ink); color: #FFFFFF; }
@media (max-width: 900px) {
  .nav { gap: 10px; }
  .brand { margin-right: auto; }
  .lang-switch { margin-left: 0; order: 1; }
  .nav-toggle { order: 2; }
  .lang-switch a { min-height: 34px; }
}

@media (max-width: 400px) {
  .nav-toggle { padding: 0 14px; }
  .nav-toggle span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .brand-logo { height: 28px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  /* feines Raster, nach außen ausgeblendet – ruhig, monochrom */
  content: ""; position: absolute; inset: -1px 0 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(20,48,90,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,48,90,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 75%);
}
.hero-inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
  padding-top: clamp(48px, 6.5vw, 96px); padding-bottom: clamp(64px, 8vw, 112px);
}
.hero-copy { display: flex; flex-direction: column; gap: 30px; }
.hero .eyebrow { letter-spacing: .15em; }
.hero h1 { font-size: clamp(42px, 6vw, 80px); line-height: .99; letter-spacing: -0.02em; }
.hero h1 em { padding-right: .04em; }
.hero .lead { max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: 10px 0; margin: 4px 0 0; padding: 22px 0 0; list-style: none;
  border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted);
}
.hero-proof li { display: inline-flex; align-items: center; gap: 7px; padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--line); }
.hero-proof li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-proof svg { width: 15px; height: 15px; color: var(--navy); flex: none; }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero::before { -webkit-mask-image: radial-gradient(ellipse 90% 50% at 50% 70%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 90% 50% at 50% 70%, #000 0%, transparent 75%); }
}
@media (max-width: 520px) {
  .hero-proof { flex-direction: column; }
  .hero-proof li { border-right: 0; margin-right: 0; padding-right: 0; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- Workflow-Karte ---------- */
.flow-stage { position: relative; }
.flow-stage::before {
  /* zarter Lichtschein hinter der Karte */
  content: ""; position: absolute; inset: 8% -6% -6% 6%; border-radius: 32px;
  background: radial-gradient(closest-side, rgba(20,48,90,.14), transparent);
  filter: blur(20px); pointer-events: none;
}
.flow {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 26px; box-shadow: var(--shadow-lg);
}
.flow-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.flow-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.flow-title { font-family: var(--serif); font-size: 24px; line-height: 1.15; margin-top: 4px; }
.flow-file {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-size: 12.5px; color: var(--body); background: var(--bg); border: 1px solid var(--line);
  padding: 7px 11px; border-radius: 10px;
}
.flow-file svg { width: 14px; height: 14px; color: var(--navy); }
.flow-progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 16px; }
.flow-progress span { display: block; height: 100%; width: 0; background: var(--navy); transition: width .9s var(--ease); }
.flow-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flow-step {
  display: flex; align-items: center; gap: 14px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  font-size: 15px; color: var(--muted);
  transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.flow-step .tick {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.flow-step .tick svg { width: 12px; height: 12px; color: #FFFFFF; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .7s .2s var(--ease); }
.flow-step .label { flex: 1; min-width: 0; }
.flow-step .chip {
  flex: none; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--navy);
  background: var(--navy-soft-2); padding: 5px 10px; border-radius: 999px;
}
.flow-step.is-active { border-color: var(--navy); color: var(--ink); background: linear-gradient(90deg, var(--navy-soft), var(--surface)); }
.flow-step.is-active .tick { border-color: var(--navy); }
.flow-step.is-active .tick::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--navy); opacity: 0; animation: ping 1.2s var(--ease) infinite; }
.flow-step.is-done { color: var(--ink); background: var(--navy-soft); border-color: rgba(20,48,90,.28); }
.flow-step.is-done .tick { background: var(--navy); border-color: var(--navy); }
.flow-step.is-done .tick svg { stroke-dashoffset: 0; }
.flow-step.is-click.is-active .chip { background: var(--navy); color: #FFFFFF; }
@keyframes ping { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

.flow-done {
  margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: var(--deep); color: #FFFFFF;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  /* weicher Auftritt: Leiste öffnet sich von links, danach blenden Termin und „fertig“ nacheinander ein */
  opacity: 0; transform: translateY(10px) scale(.98);
  clip-path: inset(0 100% 0 0 round 14px);
  transition: clip-path 1s cubic-bezier(.65,0,.35,1), opacity .5s var(--ease), transform .9s var(--ease);
}
.flow-done .when, .flow-done .fin { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.flow-done.is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); }
.flow-done.is-in .when { opacity: 1; transform: none; transition-delay: .55s; }
.flow-done.is-in .fin { opacity: 1; transform: none; transition-delay: .9s; }
.flow-done.is-in::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; animation: donePulse 1.6s 1.1s var(--ease) both; }
.flow-done { position: relative; }
@keyframes donePulse { 0% { box-shadow: 0 0 0 0 rgba(20,48,90,.45); } 100% { box-shadow: 0 0 0 14px rgba(20,48,90,0); } }
.flow-done .when { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
.flow-done .when svg { width: 16px; height: 16px; color: var(--on-deep-accent); }
.flow-done .fin { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--on-deep-accent-2); }

/* Ohne JS bzw. bei "Bewegung reduzieren": Endzustand statisch zeigen */
.no-js .flow-step, .flow.is-static .flow-step { color: var(--ink); background: var(--navy-soft); border-color: rgba(20,48,90,.28); }
.no-js .flow-step .tick, .flow.is-static .flow-step .tick { background: var(--navy); border-color: var(--navy); }
.no-js .flow-step .tick svg, .flow.is-static .flow-step .tick svg { stroke-dashoffset: 0; }
.no-js .flow-done, .flow.is-static .flow-done { opacity: 1; transform: none; clip-path: none; }
.no-js .flow-done .when, .no-js .flow-done .fin, .flow.is-static .flow-done .when, .flow.is-static .flow-done .fin { opacity: 1; transform: none; }
.no-js .flow-progress span, .flow.is-static .flow-progress span { width: 100%; }

@media (max-width: 420px) {
  .flow { padding: 20px 16px; }
  .flow-head { flex-direction: column; }
  .flow-step { font-size: 14px; padding: 12px; gap: 12px; }
}

/* ---------- Kennzahlen ---------- */
.stats { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-top: 40px; }
.stats-head p { font-size: 13px; color: var(--muted-2); }
.stats-grid { list-style: none; margin: 0; padding: 32px 0 52px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat { display: flex; flex-direction: column; gap: 12px; padding: 4px 28px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-num { font-family: var(--serif); font-size: clamp(48px, 5vw, 66px); line-height: .95; color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.stat-num small { font-size: .5em; margin-left: .08em; letter-spacing: 0; }
.stat-text { font-size: 15px; line-height: 1.55; color: var(--body); }
.stat-src { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--muted-2); display: flex; gap: 6px; }
.stat-src::before { content: "Quelle"; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted); padding-top: 1px; }
@media (max-width: 980px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 36px; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr; row-gap: 0; padding-bottom: 24px; }
  .stat { border-left: 0; padding: 24px 0; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
}

/* ---------- Sektionen allgemein ---------- */
.section { padding-top: clamp(80px, 10vw, 136px); padding-bottom: clamp(56px, 7vw, 88px); }

/* Problem */
.problem { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); }
.problem-title { display: flex; flex-direction: column; gap: 24px; }
.problem-body { display: flex; flex-direction: column; gap: 32px; }
.problem-body > p { font-size: 18px; line-height: 1.7; color: var(--body); }
.pains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.pain {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pain:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 24px 40px -32px rgba(11,28,51,.45); }
.pain-n { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--navy); line-height: 1; }
.pain strong { font-weight: 600; font-size: 16px; line-height: 1.35; }
.pain span { font-size: 15px; line-height: 1.55; color: var(--body); }
@media (max-width: 960px) { .problem { grid-template-columns: 1fr; } }
@media (max-width: 960px) { #ausgangslage .pains { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) { .pains { grid-template-columns: 1fr; gap: 10px; } .pain { padding: 18px; gap: 6px; } .pain .pain-d, .pain .pain-fix { font-size: 13.5px; } .pains-head { margin-top: 56px; margin-bottom: 18px; } }

/* Ansatz */
.approach-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 56px; max-width: 780px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); counter-reset: s; }
.step { position: relative; padding: 34px 28px 8px 0; display: flex; flex-direction: column; gap: 12px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.step::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease);
}
.steps.is-in .step::after { transform: scaleX(1); }
.steps.is-in .step:nth-child(2)::after { transition-delay: .25s; }
.steps.is-in .step:nth-child(3)::after { transition-delay: .5s; }
.steps.is-in .step:nth-child(4)::after { transition-delay: .75s; }
.no-js .step::after { transform: scaleX(1); }
.step-n { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--navy); }
.step h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: 0; }
.step p { font-size: 15px; line-height: 1.65; color: var(--body); }
.step-tag { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--navy); background: var(--navy-soft-2); padding: 4px 10px; border-radius: 999px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 28px; row-gap: 16px; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step { padding-right: 0; padding-bottom: 20px; } }

/* ---------- Leistungen (dunkel) ---------- */
.on-deep { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; isolation: isolate; }
.on-deep::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(169,193,224,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(169,193,224,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 0%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 70% at 85% 0%, #000, transparent 70%);
}
.on-deep::after {
  content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -300px; top: -420px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(52,92,150,.35), transparent);
}
.services { padding-top: clamp(88px, 10vw, 136px); padding-bottom: clamp(88px, 10vw, 136px); }
.services-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 56px; max-width: 860px; }
.flows { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.svc {
  position: relative; border: 1px solid var(--deep-line); border-radius: 22px; padding: clamp(28px, 3.4vw, 40px);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%);
  display: flex; flex-direction: column; gap: 22px;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.svc:hover { border-color: #33496B; transform: translateY(-3px); }
.svc-top { display: flex; justify-content: space-between; align-items: center; }
.svc-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-deep-muted); }
.svc-index { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--on-deep-accent); }
.svc h3 { font-size: clamp(32px, 3.2vw, 42px); line-height: 1.05; }
.svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.svc-list li {
  position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start;
  padding: 13px 0; font-size: 16px; line-height: 1.5; color: var(--on-deep-body);
  border-top: 1px solid rgba(35,52,79,.9);
}
.svc-list li:last-child { border-bottom: 1px solid rgba(35,52,79,.9); }
.svc-list .n { font-family: var(--serif); font-size: 18px; color: var(--on-deep-muted); line-height: 1.4; }
.svc-list li.click {
  margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 12px; border-top-color: transparent;
  background: rgba(169,193,224,.1); box-shadow: inset 0 0 0 1px rgba(169,193,224,.28); color: #FFFFFF;
}
.svc-list li.click + li { border-top-color: transparent; }
.svc-list li.click .n { color: var(--on-deep-accent-2); }
.svc-list li.click b { color: var(--on-deep-accent-2); font-weight: 600; }
.svc-foot { font-size: 15px; color: var(--on-deep-muted); font-style: normal; }
.svc-foot em { font-family: var(--serif); font-size: 19px; color: var(--on-deep); }
.tools { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; }
.tools p { font-size: 15px; color: var(--on-deep-muted); margin-right: 8px; max-width: 520px; }
.tools ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tools li { font-size: 13px; color: var(--on-deep-body); border: 1px solid var(--deep-line); border-radius: 999px; padding: 6px 13px; }
.services-lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--on-deep-body); max-width: 720px; }
.more { margin-top: 20px; border: 1px solid var(--deep-line); border-radius: 22px; padding: clamp(28px, 3.4vw, 40px); background: rgba(255,255,255,.025); }
.more-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 26px; }
.more-head h3 { font-size: clamp(30px, 3vw, 40px); line-height: 1.05; }
.more-head p { font-size: 15px; color: var(--on-deep-muted); max-width: 440px; }
.more-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.more-grid li { min-width: 0; overflow-wrap: break-word; display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; border: 1px solid var(--deep-line); border-radius: 14px; background: rgba(255,255,255,.03); }
.more-grid li.feat { grid-column: span 2; background: rgba(169,193,224,.08); border-color: #2E4569; }
.more-grid b { hyphens: manual; -webkit-hyphens: manual; font-weight: 600; font-size: 15px; line-height: 1.3; color: #FFFFFF; }
.more-grid span { font-size: 13.5px; line-height: 1.45; color: var(--on-deep-muted); }
.more-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 26px; }
.more-foot p { font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); color: var(--on-deep); }
.btn-sm { --h: 48px; padding: 0 24px; font-size: 15px; }
@media (max-width: 900px) {
  .flows { grid-template-columns: 1fr; }
  .more { padding: 20px 16px; }
  .more-head { margin-bottom: 16px; }
  .more-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .more-grid li { padding: 12px 14px; }
  .more-grid b { font-size: 14px; }
  .more-grid span { font-size: 12.5px; }
  .more-foot { margin-top: 18px; }
}
@media (max-width: 520px) { .svc { padding: 24px 20px; } .svc-list li { grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; } }

/* ---------- Wertrechner ---------- */
.calc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.calc-intro { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 120px; }
.calc-intro .lead { font-size: 17px; }
.calc-basis { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.calc-basis li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.calc-basis b { color: var(--ink); font-weight: 500; }
.calc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); overflow: hidden; }
.calc-inputs { padding: clamp(24px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 34px; }
.field { display: flex; flex-direction: column; gap: 14px; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.field label { font-size: 16px; font-weight: 500; }
.field output { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.field-hint { font-size: 13px; line-height: 1.5; color: var(--muted-2); }
.range-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-2); margin-top: -6px; }

input[type=range] {
  --p: 14%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--navy) 0 var(--p), var(--line) var(--p) 100%);
}
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--navy); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%;
  background: #FFFFFF; border: 1.5px solid var(--navy); box-shadow: 0 4px 12px -2px rgba(20,48,90,.35);
  transition: transform .2s var(--ease);
}
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; border: 1.5px solid var(--navy); box-shadow: 0 4px 12px -2px rgba(20,48,90,.35);
}
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(20,48,90,.18), 0 4px 12px -2px rgba(20,48,90,.35); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(20,48,90,.18); }

.money { display: inline-flex; align-items: stretch; width: 100%; max-width: 300px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.money:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(20,48,90,.12); }
.money input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 0; outline: 0; background: transparent;
  font: 500 20px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.money input::-webkit-outer-spin-button, .money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.money .unit { display: grid; place-items: center; padding: 0 12px; white-space: nowrap; color: var(--muted); background: var(--bg); border-left: 1px solid var(--line); font-size: 15px; }
.money button { width: 44px; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--navy); font-size: 20px; cursor: pointer; }
.money button:hover { background: var(--navy-soft); }

.calc-result { background: var(--deep); color: var(--on-deep); padding: clamp(24px, 3.4vw, 40px); position: relative; overflow: hidden; isolation: isolate; }
.calc-result::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -200px; top: -260px; background: radial-gradient(closest-side, rgba(52,92,150,.4), transparent); }
.res-main { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--deep-line); }
.res-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-deep-accent); font-weight: 500; }
.res-euro { font-family: var(--serif); font-size: clamp(40px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.015em; font-variant-numeric: lining-nums tabular-nums; }
.res-euro .dash { color: var(--on-deep-accent); padding: 0 .12em; }
.res-sub { font-size: 14px; color: var(--on-deep-muted); }
.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; padding-top: 22px; }
.res-grid div { display: flex; flex-direction: column; gap: 4px; }
.res-grid > div > span:first-child { font-size: 13px; color: var(--on-deep-muted); }
.res-grid strong { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.res-bar { margin-top: 26px; }
.res-bar-track { position: relative; height: 6px; border-radius: 6px; background: rgba(169,193,224,.14); }
.res-bar-fill { position: absolute; top: 0; bottom: 0; left: 60%; right: 0; border-radius: 6px; background: linear-gradient(90deg, rgba(169,193,224,.55), var(--on-deep-accent-2)); }
.res-bar-legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--on-deep-muted); }
.calc-foot { padding: 22px clamp(24px, 3.4vw, 40px) clamp(24px, 3.4vw, 36px); display: flex; flex-direction: column; gap: 20px; }
.calc-note { font-size: 13px; line-height: 1.6; color: var(--muted-2); }
.calc-foot .btn { align-self: flex-start; }
@media (max-width: 960px) { .calc { grid-template-columns: 1fr; } .calc-intro { position: static; } }
@media (max-width: 460px) { .res-grid { grid-template-columns: 1fr; } .calc-foot .btn { align-self: stretch; } }

/* ---------- Garantie ---------- */
.guarantee {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-soft); border-radius: 30px; padding: clamp(32px, 5.5vw, 72px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  border: 1px solid #D7E0EC;
}
.guarantee::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(ellipse 50% 80% at 0% 50%, rgba(255,255,255,.7), transparent 70%);
}
.seal { width: clamp(132px, 13vw, 168px); aspect-ratio: 1; position: relative; color: var(--navy); }
.seal svg { width: 100%; height: 100%; }
.seal .ring-text { transform-origin: 50% 50%; animation: spin 40s linear infinite; }
.seal-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.seal-center img { width: 46%; height: auto; }
.seal-center b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 3.6vw, 46px); line-height: .9; }
.seal-center span { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; margin-top: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.guarantee-title { display: flex; flex-direction: column; gap: 18px; }
.guarantee-title h2 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.02; }
.guarantee-body { display: flex; flex-direction: column; gap: 16px; }
.guarantee-body p:first-child { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--ink); }
.guarantee-body .small { font-size: 13px; color: var(--body); padding-top: 14px; border-top: 1px solid #CBD6E5; }
@media (max-width: 1060px) { .guarantee { grid-template-columns: auto minmax(0,1fr); } .guarantee-body { grid-column: 1 / -1; } }
@media (max-width: 600px) { .guarantee { grid-template-columns: 1fr; } .seal { justify-self: center; } }

/* ---------- AI Act ---------- */
.principles-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principles { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); padding-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(80px, 9vw, 120px); }
.principles-head { display: flex; flex-direction: column; gap: 20px; }
.principles-head h2 { font-size: clamp(34px, 3.8vw, 50px); line-height: 1.08; }
.principles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
.principles li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 26px 0; border-top: 1px solid var(--line); }
.principles li:nth-child(-n+2) { border-top-color: var(--ink); }
.p-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy); }
.p-icon svg { width: 18px; height: 18px; }
.principles strong { display: block; font-weight: 600; margin-bottom: 4px; }
.principles li span { font-size: 15px; line-height: 1.6; color: var(--body); }
@media (max-width: 960px) { .principles { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .principles ul { grid-template-columns: 1fr; } .principles li:nth-child(2) { border-top-color: var(--line); } }

/* ---------- Ansprechpartner ---------- */
.person { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.portrait { position: relative; }
.portrait-frame {
  aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; position: relative;
  background: linear-gradient(160deg, #EDEDE8, #E2E3DE); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait-mono { font-family: var(--serif); font-size: 120px; line-height: 1; color: rgba(20,48,90,.18); letter-spacing: -0.04em; }
.portrait-ph { position: absolute; bottom: 16px; left: 16px; right: 16px; text-align: center; font-size: 12px; color: var(--muted); }
.portrait-card {
  position: absolute; right: -20px; bottom: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; box-shadow: 0 24px 40px -28px rgba(11,28,51,.5);
}
.portrait-card b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.1; }
.portrait-card span { font-size: 13px; color: var(--muted); }
.person-copy { display: flex; flex-direction: column; gap: 22px; }
.person-copy h2 { font-size: clamp(34px, 3.8vw, 50px); line-height: 1.08; }
.person-copy p:not(.eyebrow) { font-size: 18px; line-height: 1.7; color: var(--body); }
.ph { background: #FFF4D6; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 4px; border-radius: 3px; }
@media (max-width: 860px) { .person { grid-template-columns: 1fr; } .portrait { max-width: 360px; } .portrait-card { right: -8px; } }

/* ---------- FAQ ---------- */
.faq { max-width: 920px; }
.faq h2 { margin: 18px 0 36px; }
.faq-list { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: clamp(17px, 1.5vw, 19px); font-weight: 500; transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--navy); }
.faq .pm { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease); }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--navy); transform: translate(-50%, -50%); transition: background-color .3s; }
.faq .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .pm { transform: rotate(45deg); background: var(--navy); border-color: var(--navy); }
.faq details[open] .pm::before, .faq details[open] .pm::after { background: #FFFFFF; }
.faq .answer { padding: 0 56px 26px 0; font-size: 16px; line-height: 1.7; color: var(--body); }
.faq details[open] .answer { animation: fadeDown .45s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .faq .answer { padding-right: 0; } }

/* ---------- Abschluss ---------- */
.cta { background: var(--navy); color: #FFFFFF; position: relative; overflow: hidden; isolation: isolate; }
.cta-arcs { position: absolute; z-index: -1; right: -180px; top: 50%; width: 760px; height: 760px; transform: translateY(-50%); color: rgba(255,255,255,.09); pointer-events: none; }
.cta-inner { padding-top: clamp(96px, 11vw, 152px); padding-bottom: clamp(96px, 11vw, 152px); display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.cta .eyebrow { color: var(--on-deep-accent-2); }
.cta h2 { font-size: clamp(42px, 6vw, 84px); line-height: .99; letter-spacing: -0.02em; max-width: 940px; }
.cta h2 em { color: var(--on-deep-accent-2); }
.cta p:not(.eyebrow) { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: #D6E0EE; max-width: 640px; }
.cta-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: #BFD0E6; list-style: none; margin: 0; padding: 0; }
.cta-meta li { display: inline-flex; align-items: center; gap: 8px; }
.cta-meta li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--on-deep-accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); color: var(--on-deep-muted); font-size: 14px; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; padding-top: 56px; padding-bottom: 40px; align-items: end; }
.site-footer .brand { color: var(--on-deep); }
.site-footer .brand-sub { color: var(--on-deep-muted); }
.footer-tag { margin-top: 12px; max-width: 360px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer-links a { color: var(--on-deep-body); text-decoration: none; }
.footer-links a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { border-top: 1px solid var(--deep-line); padding-top: 22px; padding-bottom: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; }
@media (max-width: 640px) { .footer-inner { grid-template-columns: 1fr; } }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 760px; padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(72px, 9vw, 120px); }
.legal h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1; margin: 18px 0 40px; }
.legal h2 { font-size: 28px; margin: 44px 0 12px; }
.legal p, .legal li { color: var(--body); margin-bottom: 12px; }
.legal address { font-style: normal; color: var(--body); line-height: 1.7; }

/* ---------- Interaktion ---------- */
/* Computer: Boxen heben sich an und werden etwas größer */
@media (hover: hover) and (pointer: fine) {
  .pain, .svc, .more-grid li, .principles li, .stat, .step { transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease); }
  .pain:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 30px 50px -34px rgba(11,28,51,.5); border-color: var(--navy); }
  .svc:hover { transform: translateY(-4px) scale(1.015); border-color: #3D5A85; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
  .more-grid li:hover { transform: scale(1.04); }
  .more-grid li:hover b { color: var(--on-deep-accent-2); }
  .principles li:hover { transform: translateX(4px); }
  .principles li:hover .p-icon { background: var(--navy); color: #FFFFFF; }
  .p-icon { transition: background-color .35s var(--ease), color .35s var(--ease); }
  .stat:hover .stat-num { transform: scale(1.06); }
  .stat-num { display: inline-block; transform-origin: left bottom; transition: transform .45s var(--ease); }
  .step:hover .step-n { transform: translateX(6px); }
  .step-n { transition: transform .45s var(--ease); }
  .calc-card { transition: box-shadow .45s var(--ease); }
}
/* Handy: Feedback beim Antippen */
@media (hover: none) {
  .pain, .svc, .more-grid li, .principles li, .btn { transition: transform .2s var(--ease); -webkit-tap-highlight-color: transparent; }
  .pain:active, .svc:active, .more-grid li:active, .principles li:active { transform: scale(.98); }
  .btn:active { transform: scale(.97); }
}

/* Beispiele zum Wischen (Handy/Tablet) */
.flows-dots { display: none; }
@media (max-width: 900px) {
  .flows {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none;
  }
  .flows::-webkit-scrollbar { display: none; }
  .flows .svc { flex: 0 0 min(88%, 520px); scroll-snap-align: center; }
  .svc-top { gap: 12px; }
  .svc-kicker { white-space: nowrap; }
  .svc-index { font-size: 16px; text-align: right; }
  .flows-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .flows-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--deep-line); transition: width .35s var(--ease), background-color .35s var(--ease); }
  .flows-dots span.is-active { width: 22px; background: var(--on-deep-accent); }
}

/* Ansatz als Zeitleiste (Handy) */
@media (max-width: 560px) {
  .steps { position: relative; padding-left: 34px; }
  .steps::before, .steps::after { content: ""; position: absolute; left: 8px; top: 10px; width: 1.5px; }
  .steps::before { bottom: 30px; background: var(--line-strong); }
  .steps::after { height: calc(var(--prog, 0) * (100% - 40px)); background: var(--navy); transition: height .15s linear; }
  .step { padding-top: 0; padding-bottom: 30px; }
  .step::after { display: none; }
  .step::before {
    left: -34px; right: auto; top: 6px; width: 17px; height: 17px; border-radius: 50%; z-index: 1;
    background: var(--bg); border: 1.5px solid var(--line-strong); transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  }
  .step.is-passed::before { background: var(--navy); border-color: var(--navy); transform: scale(1.1); }
}

/* ---------- Einblenden beim Scrollen ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(.18s + var(--d, 0s)); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Handy: kompakter, Rechner weiter oben, FAQ zum Wischen ---------- */
.swipe-dots { display: none; }
@media (max-width: 720px) {

  /* Hero: Einstieg weiter oben */
  .hero-inner { padding-top: 20px; gap: 40px; }
  .hero-copy { gap: 22px; }
  .hero .lead { font-size: 16.5px; }

  /* weniger Fließtext */
  .stats-head p, .calc-basis, .more-head p, .tools p, .svc-foot, .res-sub, .field-hint, .range-scale { display: none; }
  .section { padding-top: 64px; padding-bottom: 48px; }
  .problem { gap: 24px; }
  .problem-body { gap: 20px; }
  .problem-body > p { font-size: 16px; }

  /* Kennzahlen 2 x 2 */
  .stats-head { padding-top: 28px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 16px; padding: 20px 0 28px; }
  .stat, .stat:first-child, .stat:nth-child(3) { padding: 0; border: 0; gap: 6px; }
  .stat-num { font-size: 40px; }
  .stat-text { font-size: 13.5px; line-height: 1.45; }
  .stat-src { font-size: 10.5px; padding-top: 4px; }
  .stat-src::before { display: none; }

  /* Rechner kompakter */
  .calc { gap: 24px; }
  .calc-intro .lead { font-size: 16px; }
  .calc-inputs { gap: 22px; }

  /* FAQ: Karten zum Wischen, Antwort immer sichtbar */
  .faq h2 { margin-bottom: 20px; }
  .faq-list {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; border-top: 0; scrollbar-width: none;
  }
  .faq-list::-webkit-scrollbar { display: none; }
  .faq-list details {
    flex: 0 0 84%; scroll-snap-align: center; border: 1px solid var(--line); border-radius: 18px;
    background: var(--surface); padding: 20px 20px 22px;
  }
  .faq summary { padding: 0 0 10px; font-size: 17px; cursor: default; pointer-events: none; }
  .faq .pm { display: none; }
  .faq .answer { padding: 0; font-size: 15px; animation: none !important; }
  .swipe-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .swipe-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--line-strong); transition: width .35s var(--ease), background-color .35s var(--ease); }
  .swipe-dots span.is-active { width: 22px; background: var(--navy); }
}

/* ---------- Rechner: Ergebnis oben, kompakt (alle Größen) ---------- */
.calc-card { display: flex; flex-direction: column; }
.calc-card .calc-result { order: -1; padding: 28px 36px 26px; }
.calc-card .res-main { gap: 4px; padding-bottom: 18px; }
.calc-card .res-euro { font-size: clamp(38px, 4vw, 54px); }
.calc-card .res-grid { padding-top: 18px; }
.calc-card .res-grid strong { font-size: clamp(22px, 2.2vw, 28px); }
.calc-card .calc-inputs { padding: 28px 36px 8px; gap: 22px; }
.calc-card .field { gap: 10px; }
.calc-card .field output { font-size: 34px; }
.calc-card .field-rate { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.calc-card .field-rate .field-hint { flex-basis: 100%; }
.calc-card .money { width: 230px; }
.calc-card .money input { min-height: 48px; }
.calc-card .calc-foot { padding: 18px 36px 28px; gap: 16px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.calc-card .calc-note { flex: 1 1 300px; font-size: 12.5px; }
.calc-card .calc-foot .btn { align-self: auto; }

/* Rechner am Computer: kompakter und schmaler */
@media (min-width: 721px) {
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .calc-card { max-width: 540px; justify-self: end; width: 100%; border-radius: 22px; }
  .calc-card .calc-result { padding: 22px 28px 20px; }
  .calc-card .res-main { padding-bottom: 14px; gap: 2px; }
  .calc-card .res-label { font-size: 11.5px; }
  .calc-card .res-euro { font-size: clamp(32px, 3vw, 42px); }
  .calc-card .res-grid { padding-top: 14px; gap: 16px; }
  .calc-card .res-grid > div > span:first-child { font-size: 12px; }
  .calc-card .res-grid strong { font-size: clamp(19px, 1.7vw, 23px); }
  .calc-card .calc-inputs { padding: 22px 28px 4px; gap: 18px; }
  .calc-card .field { gap: 8px; }
  .calc-card .field label { font-size: 15px; }
  .calc-card .field output { font-size: 28px; }
  .calc-card .range-scale { display: none; }
  .calc-card .money { width: 200px; }
  .calc-card .money input { min-height: 42px; font-size: 17px; text-align: center; padding: 0 4px; min-width: 48px; }
  .calc-card .money .unit { padding: 0 10px; font-size: 13px; }
  .calc-card .money button { width: 40px; }
  .calc-card .field-hint { font-size: 12px; }
  .calc-card .calc-foot { padding: 14px 28px 22px; gap: 12px; }
  .calc-card .calc-note { font-size: 11.5px; flex-basis: 100%; }
  .calc-card .calc-foot .btn { --h: 46px; padding: 0 22px; font-size: 15px; }
  /* noch kompakter, damit alles in den Bildschirm passt */
  .calc-card { max-width: 500px; }
  .calc-card .calc-result { padding: 18px 24px 16px; }
  .calc-card .res-main { padding-bottom: 10px; }
  .calc-card .res-euro { font-size: clamp(28px, 2.5vw, 36px); }
  .calc-card .res-sub { font-size: 12px; }
  .calc-card .res-grid { padding-top: 10px; }
  .calc-card .res-grid strong { font-size: clamp(17px, 1.4vw, 20px); }
  .calc-card .calc-inputs { padding: 16px 24px 2px; gap: 12px; }
  .calc-card .field { gap: 4px; }
  .calc-card .field label { font-size: 14px; }
  .calc-card .field output, .calc-card .field-duo .field output { font-size: 24px; }
  .field-duo { gap: 12px 24px; }
  .field-duo .field-unit { display: none; }
  .field-duo output::after { content: " " attr(data-unit); font-family: var(--sans); font-size: 12px; color: var(--muted-2); }
  .calc-card .money input { min-height: 38px; font-size: 16px; }
  .calc-card .money button { width: 36px; }
  .calc-card .calc-foot { padding: 12px 24px 18px; gap: 10px; }
  .calc-card .calc-foot .btn { --h: 42px; font-size: 14.5px; }
  .calc-hook { font-size: 12px; padding-top: 10px; }
}

/* ---------- Scroll-Fortschritt ---------- */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--navy); transform-origin: left; transform: scaleX(var(--sp, 0)); }
.flow-hint { display: block; text-align: center; font-size: 12.5px; color: var(--muted-2); margin-top: 16px; transition: opacity .4s var(--ease); }
.flow-hint.is-hidden { opacity: 0; }
.flow-hint::after { content: " ↓"; }
.flow-step.is-active .tick::after { animation-duration: .9s; }

@media (max-width: 720px) {
  /* Rechner: Ergebnis oben, alles auf einem Bildschirm */
  .calc-intro .lead { display: none; }
  .calc-intro { gap: 14px; }
  .calc-card { display: flex; flex-direction: column; border-radius: 22px; }
  .calc-card .calc-result { order: -1; padding: 20px 20px 18px; }
  .calc-card .res-main { gap: 2px; padding-bottom: 14px; }
  .calc-card .res-label { font-size: 11.5px; }
  .calc-card .res-euro { font-size: 38px; }
  .calc-card .res-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; }
  .calc-card .res-grid > div > span:first-child { font-size: 12px; }
  .calc-card .res-grid strong { font-size: 22px; }
  .calc-card .calc-inputs { padding: 20px; gap: 18px; }
  .calc-card .field { gap: 6px; }
  .calc-card .field label { font-size: 15px; }
  .calc-card .field output { font-size: 32px; }
  .calc-card .field-rate { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .calc-card .field-rate label { flex: 1; line-height: 1.35; }
  .calc-card .money { width: 150px; flex: none; }
  .calc-card .money .unit { display: none; }
  .calc-card .money input { min-height: 46px; text-align: center; padding: 0 4px; font-size: 18px; }
  .calc-card .money button { width: 42px; }
  .calc-card .calc-foot { padding: 0 20px 20px; gap: 14px; }
  .calc-card .calc-note { font-size: 12px; line-height: 1.5; }
  .calc-card .calc-foot .btn { align-self: stretch; }
  .res-euro.bump { animation: bump .35s var(--ease); }

  /* Workflow-Karte: Hinweis zum Antippen */

  /* Problem-Karten und AI-Act-Punkte zum Wischen */
  .pains, .principles ul {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; scrollbar-width: none;
  }
  .pains::-webkit-scrollbar, .principles ul::-webkit-scrollbar { display: none; }
  .problem > *, .principles > *, .faq > * { min-width: 0; }
  .pain { flex: 0 0 78%; scroll-snap-align: center; }
  .principles ul { grid-template-columns: none; }
  .principles li, .principles li:nth-child(-n+2) {
    flex: 0 0 80%; scroll-snap-align: center; border: 1px solid var(--line); border-radius: 18px;
    padding: 20px; background: var(--bg); grid-template-columns: 36px 1fr; gap: 12px;
  }
  .principles { gap: 24px; }
  /* Siegel dreht sich mit dem Scrollen */
  .seal .ring-text { animation: none; transform: rotate(var(--rot, 0deg)); }
}
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---------- Handy: Feinschliff, kürzer und luftiger ---------- */
@media (max-width: 720px) {
  /* Workflow-Karte kompakt */
  .hero-inner { padding-bottom: 48px; }
  .flow { padding: 18px 16px; border-radius: 18px; }
  .flow-head { padding-bottom: 12px; margin-bottom: 12px; flex-direction: row; align-items: center; }
  .flow-title { font-size: 20px; }
  .flow-file { font-size: 11px; padding: 5px 8px; }
  .flow-steps { gap: 6px; }
  .flow-step { padding: 9px 12px; font-size: 13.5px; gap: 10px; border-radius: 10px; }
  .flow-step .tick { width: 19px; height: 19px; }
  .flow-step .chip { font-size: 10.5px; padding: 4px 8px; }
  .flow-done { margin-top: 10px; padding: 12px 14px; }
  .flow-done .when { font-size: 13.5px; }
  .flow-done .fin { font-size: 20px; }
  .hero-proof { padding-top: 16px; font-size: 13px; gap: 6px 0; }

  /* Ansatz-Zeitleiste kompakt */
  .approach-head { margin-bottom: 28px; gap: 14px; }
  .step { gap: 6px; padding-bottom: 22px; }
  .step-n { font-size: 30px; }
  .step h3 { font-size: 16.5px; }
  .step p { font-size: 14.5px; line-height: 1.55; }

  /* Leistungen */
  .services { padding-top: 64px; padding-bottom: 64px; }
  .services-head { margin-bottom: 28px; gap: 14px; }
  .services-lead { font-size: 15.5px; }
  .tools { margin-top: 24px; }

  /* Garantie */
  #garantie { padding-bottom: 56px; }
  .guarantee { padding: 28px 22px; gap: 18px; border-radius: 24px; }
  .seal { width: 116px; }
  .guarantee-title { gap: 12px; }
  .guarantee-body p:first-child { font-size: 15.5px; line-height: 1.6; }

  /* AI Act */
  .principles { padding-top: 64px; padding-bottom: 56px; }
  .principles-head h2 { font-size: 32px; }

  /* Ansprechpartner: Porträt im Querformat statt bildschirmfüllend */
  .person { gap: 28px; }
  .portrait { max-width: none; }
  /* Porträt wie am Computer: Hochformat mit Namenskarte */
  .portrait { max-width: 420px; margin: 0 auto; width: 100%; }
  .portrait-frame { aspect-ratio: 4 / 5; border-radius: 20px; }
  .portrait-card { right: 14px; bottom: 14px; padding: 12px 16px; }
  .portrait-card b { font-size: 20px; }
  .person-copy { gap: 16px; }
  .person-copy h2 { font-size: 32px; }
  .person-copy p:not(.eyebrow) { font-size: 15.5px; line-height: 1.65; }

  /* FAQ & Abschluss */
  .faq { padding-bottom: 64px !important; }
  .cta-inner { padding-top: 72px; padding-bottom: 72px; gap: 22px; }
  .cta .btn-light { width: 100%; }
  .cta-arcs { width: 520px; height: 520px; right: -260px; }
  .footer-inner { padding-top: 40px; }
}

/* ---------- Börsen-Laufband ---------- */
.ticker { background: var(--deep); color: var(--on-deep); border-top: 1px solid var(--deep-line); border-bottom: 1px solid var(--deep-line); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: tick 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { list-style: none; margin: 0; padding: 0; display: flex; }
.ticker-list li { display: inline-flex; align-items: baseline; gap: 10px; padding: 15px 34px; border-right: 1px solid var(--deep-line); white-space: nowrap; font-size: 14px; }
.t-name { color: var(--on-deep-muted); }
.t-val { font-family: var(--serif); font-size: 21px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.t-val.down { color: #F08C7A; }
.t-src { font-size: 11px; letter-spacing: .06em; color: #7F8B9C; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Ausgangslage: Kurs-Chart & Wochenbalken ---------- */
.problem { align-items: center; }
.problem-text { font-size: 18px; line-height: 1.7; color: var(--body); }
.problem-visual { display: flex; flex-direction: column; gap: 14px; }
.market-card { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 16px; box-shadow: var(--shadow-lg); }
.mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.mc-id { display: flex; flex-direction: column; gap: 3px; }
.mc-sym { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--ink); }
.mc-name { font-size: 12.5px; color: var(--muted-2); }
.mc-quote { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mc-now { font-family: var(--serif); font-size: 44px; line-height: .9; font-variant-numeric: tabular-nums; }
.mc-now small { font-size: .42em; margin-left: .12em; letter-spacing: 0; }
.mc-chg { font-size: 13px; font-weight: 600; color: var(--down); background: rgba(176,64,47,.09); padding: 3px 9px; border-radius: 999px; }
.mc-plot { position: relative; }
.mc-chart { display: block; width: 100%; height: 150px; overflow: visible; clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(.4,0,.2,1) .2s; }
.market-card.is-in .mc-chart { clip-path: inset(-10px -10px -10px -10px); }
.mc-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.mc-line { fill: none; stroke: var(--down); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mc-area { fill: rgba(176,64,47,.08); }
.mc-dot { position: absolute; left: calc(310 / 320 * 100% - 5px); top: calc(96 / 130 * 100% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--down); opacity: 0; transition: opacity .3s ease 1.9s; }
.mc-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--down); animation: ping 1.6s ease-out infinite; }
.market-card.is-in .mc-dot { opacity: 1; }
.mc-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--body); padding: 8px 0 0; font-variant-numeric: tabular-nums; }
.mc-axis span { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 44px; }
.mc-axis span:first-child { align-items: flex-start; } .mc-axis span:last-child { align-items: flex-end; }
.mc-axis b { font-weight: 400; font-size: 11px; color: var(--muted-2); }
.mc-axis span:last-child { color: var(--down); font-weight: 600; }
.mc-src { font-size: 11px; color: var(--muted-2); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.week-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.wk-head { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--body); }
.wk-head b { font-weight: 600; color: var(--ink); }
.wk-row { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px; }
.wk-lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wk-bar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; background: var(--line); gap: 2px; }
.wk-bar .seg { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; height: 100%; transition: width .9s cubic-bezier(.4,0,.2,1); }
.wk-bar .seg i { font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seg.manual { background: var(--down); color: #FFFFFF; }
.seg.search { background: #8FA6C4; color: #0B1C33; }
.seg.quality { background: var(--navy); color: #FFFFFF; }
.wk-bar.after .seg.quality { background: #2E7D5B; }
.week-card:not(.is-in) .wk-bar .seg { width: 0 !important; }
.wk-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--body); }
.wk-key { display: inline-flex; align-items: center; gap: 6px; }
.wk-key em { font-style: normal; color: var(--muted-2); }
.wk-key i { width: 10px; height: 10px; border-radius: 3px; }
.wk-key.manual i { background: var(--down); } .wk-key.search i { background: #8FA6C4; } .wk-key.quality i { background: linear-gradient(90deg, var(--navy) 50%, #2E7D5B 50%); }
.wk-mode { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.wk-mode button { border: 0; background: none; font: 600 12.5px/1 var(--sans); color: var(--muted); padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.wk-mode button.is-on { background: var(--ink); color: #FFFFFF; }
.wk-kpi-rng { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.45; color: var(--muted-2); margin-top: 4px; }
.wk-kpi-rng b { color: var(--ink); font-weight: 600; }
.wk-kpi-big { font-family: var(--serif); font-size: clamp(32px, 3.2vw, 42px); line-height: 1; color: #2E7D5B; font-variant-numeric: tabular-nums; }
.wk-kpi-big small { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-left: 4px; }
.wk-hook { font-size: 13px; line-height: 1.5; color: var(--body); padding-top: 8px; border-top: 1px dashed var(--line-strong); margin-top: 4px; }
.wk-hook b { color: var(--ink); font-weight: 600; }
.wk-kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; background: rgba(46,125,91,.07); border: 1px solid rgba(46,125,91,.2); }
.wk-kpi-lbl { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.wk-kpi-val { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-kpi-val strong { font-weight: 400; color: #2E7D5B; }
.wk-kpi-chg { font-size: 13px; font-weight: 700; color: #2E7D5B; background: rgba(46,125,91,.1); padding: 4px 10px; border-radius: 999px; }
.wk-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.wk-s { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--body); }
.wk-s output { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-s input[type=range] { height: 32px; }
.wk-src { font-size: 11px; color: var(--muted-2); line-height: 1.5; }
@media (max-width: 720px) {
  .wk-row { grid-template-columns: 1fr; gap: 4px; }
  .wk-key em { display: none; }
  .wk-sliders { grid-template-columns: 1fr; gap: 6px; }
  .wk-kpi-val { font-size: 22px; }
  .wk-bar .seg i { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .week-card:not(.is-in) .wk-bar .seg { width: auto !important; } }
.pains-head { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(64px, 8vw, 104px); margin-bottom: 28px; max-width: 760px; }
.pains-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
#ausgangslage .pains { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.pain .pain-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy); margin-bottom: 4px; transition: background-color .35s var(--ease), color .35s var(--ease); }
.pain .pain-ic svg { width: 20px; height: 20px; }
.pain:hover .pain-ic { background: var(--navy); color: #FFFFFF; }
.pain .pain-d { font-size: 14.5px; line-height: 1.55; color: var(--body); }
.pain .pain-fix { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: 14px; line-height: 1.5; color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.pain .pain-fix b { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #2E7D5B; }
.pain { gap: 8px; }

.admin-card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px; align-items: center; background: var(--deep); color: var(--on-deep); border-radius: 16px; padding: 16px 20px; }
.ad-num { grid-row: span 2; font-family: var(--serif); font-size: 40px; line-height: 1; color: #F08C7A; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-num small { font-size: .5em; margin-left: .06em; }
.ad-text { font-size: 14px; line-height: 1.45; color: var(--on-deep); }
.ad-src { font-size: 11px; color: var(--on-deep-muted); }
@media (max-width: 720px) { .ad-num { font-size: 32px; } .ad-text { font-size: 13px; } }

/* ---------- Ablauf: Phasen, Icons, Badges ---------- */
#ansatz .approach-head .lead { max-width: 680px; }
.phase-bar { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; margin: 0 0 30px; }
.phase-bar .phase { position: relative; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding-bottom: 12px; }
.phase-bar .phase::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 8px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; }
.phase-bar .free { grid-column: span 3; color: #2E7D5B; }
.phase-bar .guar { color: var(--navy); }
.phase-bar .own { color: var(--muted); }
.steps-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.steps-5 .step { padding-top: 0; padding-right: 22px; }
.step-icon {
  position: relative; z-index: 1; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg); border: 1.5px solid var(--line-strong); color: var(--navy);
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.step-icon svg { width: 21px; height: 21px; }
.steps.is-in .step-icon { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.steps.is-in .step:nth-child(2) .step-icon { transition-delay: .25s; }
.steps.is-in .step:nth-child(3) .step-icon { transition-delay: .5s; }
.steps.is-in .step:nth-child(4) .step-icon { transition-delay: .75s; }
.steps.is-in .step:nth-child(5) .step-icon { transition-delay: 1s; }
.steps-5 .step:nth-child(5)::after { transition-delay: 1s; }
.step:hover .step-icon { transform: scale(1.08); }
.steps-5 .step-n { font-size: 15px; font-family: var(--sans); font-weight: 600; letter-spacing: .12em; color: var(--muted-2); margin-top: 6px; }
.step-badge { display: none; align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.step-badge.free { background: rgba(46,125,91,.1); color: #2E7D5B; }
.step-badge.guar { background: var(--navy-soft-2); color: var(--navy); }
.step-badge.own { background: var(--line); color: var(--body); }
.no-js .step-icon { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }

@media (max-width: 960px) {
  .phase-bar { display: none; }
  .step-badge { display: inline-block; }
  .steps-5 { grid-template-columns: 1fr; position: relative; padding-left: 58px; }
  .steps-5::before, .steps-5::after { content: ""; position: absolute; left: 22px; top: 24px; width: 1.5px; }
  .steps-5::before { bottom: 40px; background: var(--line-strong); }
  .steps-5::after { height: calc(var(--prog, 0) * (100% - 64px)); background: var(--navy); }
  .steps-5 .step { padding: 0 0 28px; gap: 8px; }
  .steps-5 .step::before, .steps-5 .step::after { display: none; }
  .steps-5 .step-icon { position: absolute; left: -58px; top: 0; margin: 0; width: 44px; height: 44px; }
  .steps.steps-5.is-in .step-icon { background: var(--bg); border-color: var(--line-strong); color: var(--navy); }
  .steps.steps-5 .step.is-passed .step-icon { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
  .steps-5 .step-n { margin-top: 0; }
}

/* Ablauf: jeder Schritt wird einzeln angetippt */
.steps-5 .step { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.steps-5 .step:focus-visible { outline: 2px solid var(--navy); outline-offset: 6px; border-radius: 8px; }
.steps-5 .step h3, .steps-5 .step p { transition: color .4s var(--ease); }
.js .steps.steps-5 .step-icon, .js .steps.steps-5.is-in .step-icon { background: var(--bg); border-color: var(--line-strong); color: var(--navy); transition-delay: 0s; }
.js .steps.steps-5 .step.is-on .step-icon { background: var(--navy); border-color: var(--navy); color: #FFFFFF; transform: scale(1.1); }
.steps-5 .step:hover:not(.is-on) .step-icon { border-color: var(--navy); transform: scale(1.1); }
.steps-5 .step.is-next .step-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--navy); animation: stepPulse 1.8s var(--ease) infinite; pointer-events: none; }
@keyframes stepPulse { 0% { opacity: .7; transform: scale(.85); } 70% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1.35); } }
.js .steps-5 .step:not(.is-on) .step-badge { visibility: hidden; }
.steps-5 .step.is-on .step-badge { display: inline-block; }
.steps-hint { margin: 0 0 22px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--navy); display: flex; align-items: center; gap: 8px; transition: opacity .4s var(--ease); }
.steps-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); animation: stepPulse 1.8s var(--ease) infinite; box-shadow: 0 0 0 0 var(--navy); }
.js .steps-hint.is-gone, .js .steps-hint.is-gone.is-in { opacity: 0; }
.phase-bar .phase { transition: opacity .35s var(--ease); }
.phase-bar.has-pick .phase:not(.is-hot) { opacity: .35; }
@media (min-width: 961px) {
  .js .steps.steps-5 .step::after, .js .steps.steps-5.is-in .step::after { transform: scaleX(0); transition-delay: 0s; }
  .js .steps.steps-5 .step.is-on::after { transform: scaleX(1); }
}
@media (max-width: 960px) {
  .js .steps-5::after { height: var(--fill, 0px); transition: height .6s var(--ease); }
  .js .steps-5::before { bottom: auto; height: var(--track, calc(100% - 64px)); }
}
@keyframes badgeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Abschluss: Fahrplan als Zeitstrahl ---------- */
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: center; padding-top: clamp(96px, 11vw, 152px); padding-bottom: clamp(96px, 11vw, 152px); }
.cta-grid .cta-inner { padding: 0; }
.roadmap { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 26px 26px 22px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rd-title { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--on-deep-accent-2); margin-bottom: 18px; }
.rd-list { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: flex; flex-direction: column; gap: 16px; }
.rd-list::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1.5px; background: rgba(255,255,255,.22); }
.rd { position: relative; display: grid; grid-template-columns: 62px 1fr; column-gap: 12px; }
.rd::before { content: ""; position: absolute; left: -25px; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--navy); border: 2px solid rgba(255,255,255,.55); }
.rd.free::before { border-color: #7FD1A8; }
.rd.guar::before { background: #FFFFFF; border-color: #FFFFFF; }
.rd:first-child::before { background: #7FD1A8; border-color: #7FD1A8; box-shadow: 0 0 0 5px rgba(127,209,168,.2); }
.rd-when { grid-row: span 2; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-deep-accent); padding-top: 3px; }
.rd-what { font-family: var(--serif); font-size: 20px; line-height: 1.2; color: #FFFFFF; }
.rd-note { font-size: 13px; color: #BFD0E6; }
.rd-sep { position: relative; display: flex; align-items: center; gap: 10px; margin: -2px 0 -2px -26px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7FD1A8; }
.rd-sep::before { content: ""; width: 14px; height: 1.5px; background: currentColor; }
.rd-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(127,209,168,.6), transparent); }
.js .roadmap .rd { opacity: 0; transform: translateX(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .roadmap.is-in .rd { opacity: 1; transform: none; }
.js .roadmap.is-in .rd:nth-child(2) { transition-delay: .15s; }
.js .roadmap.is-in .rd:nth-child(3) { transition-delay: .3s; }
.js .roadmap.is-in .rd:nth-child(5) { transition-delay: .45s; }
.js .roadmap.is-in .rd:nth-child(6) { transition-delay: .6s; }
@media (max-width: 900px) {
  .cta-grid { grid-template-columns: 1fr; padding-top: 72px; padding-bottom: 72px; gap: 36px; }
  .rd-what { font-size: 18px; }
}
@media (max-width: 720px) {
  .problem-text { font-size: 16px; }
  .mc-now { font-size: 36px; }
  .mc-chart { height: 120px; }
  .ticker-list li { padding: 12px 22px; font-size: 13px; }
  .t-val { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .mc-chart { clip-path: none; } .mc-dot { opacity: 1; } .wk-fill { width: 31.75%; }
  .js .roadmap .rd { opacity: 1; transform: none; }
}

/* ---------- Warum jetzt ---------- */
.why { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; isolation: isolate; }
.why::after { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; left: -380px; bottom: -520px; background: radial-gradient(closest-side, rgba(176,64,47,.28), transparent); pointer-events: none; }
.why-inner { padding-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(80px, 9vw, 120px); }
.why-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-bottom: 44px; }
.why .eyebrow { color: #F08C7A; }
.why .swipe-dots span { background: var(--deep-line); }
.why .swipe-dots span.is-active { background: #F08C7A; }
.why h2 em { color: #F08C7A; }
.why .lead { color: var(--on-deep-body); }
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.why-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--deep-line); border-radius: 18px; background: rgba(255,255,255,.03); }
.why-num { font-family: var(--serif); font-size: clamp(38px, 3.6vw, 50px); line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.why-card strong { font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--on-deep); }
.why-text { font-size: 14px; line-height: 1.55; color: var(--on-deep-muted); }
.why-src { margin-top: auto; padding-top: 10px; font-size: 11px; color: #7F8B9C; border-top: 1px solid var(--deep-line); }
.why-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 36px; }
.why-cta span { font-size: 14px; color: #7FD1A8; }
@media (hover: hover) and (pointer: fine) { .why-card { transition: transform .4s var(--ease), border-color .4s var(--ease); } .why-card:hover { transform: translateY(-4px); border-color: #F08C7A; } }
@media (max-width: 1060px) { .why-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) {
  .why-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; scrollbar-width: none; }
  .why-grid::-webkit-scrollbar { display: none; }
  .why-card { flex: 0 0 80%; scroll-snap-align: center; }
  .why-cta .btn { width: 100%; }
}

/* Wertrechner: Kosten pro Woche Warten */
.res-hook { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--deep-line); font-size: 12.5px; line-height: 1.5; color: var(--on-deep-muted); }
.res-hook b { color: #7FD1A8; font-weight: 600; }

/* ---------- AI Act ---------- */
.ai { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px); padding-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(80px, 9vw, 120px); }
.ai-head { display: flex; flex-direction: column; gap: 18px; max-width: 800px; }
.ai-head strong { color: var(--ink); font-weight: 600; }
.ai h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; margin-bottom: 18px; }
.ai-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); position: relative; }
.ai-tl::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: linear-gradient(90deg, var(--navy) 0 62%, var(--down) 62% 100%); opacity: .35; }
.tl { position: relative; padding: 32px 20px 0 0; display: flex; flex-direction: column; gap: 6px; }
.tl::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 5px var(--surface); }
.tl.next::before { background: var(--down); box-shadow: 0 0 0 5px var(--surface), 0 0 0 9px rgba(176,64,47,.18); }
.tl-when { font-family: var(--serif); font-size: 30px; line-height: 1; }
.tl.next .tl-when { color: var(--down); }
.tl-what { font-weight: 600; font-size: 15.5px; }
.tl-state { font-size: 13px; color: var(--muted); }
.ai-cls ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.cl { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); }
.cl-what { font-weight: 600; font-size: 15px; }
.cl-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; }
.cl.ok .cl-tag { background: rgba(46,125,91,.1); color: #2E7D5B; }
.cl.hr .cl-tag { background: rgba(176,64,47,.1); color: var(--down); }
.cl.hr { border-color: rgba(176,64,47,.35); }
.cl-why { font-size: 14px; line-height: 1.55; color: var(--body); }
.ai-small { margin-top: 12px; font-size: 13px; color: var(--muted); }
.ai-principles { display: block; padding: 0; }
.ai-principles ul { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ai-principles li:nth-child(-n+3) { border-top-color: var(--ink); }
.ai-principles li:nth-child(n+4) { border-top-color: var(--line); }
.ai-docs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ai-docs li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); font-size: 13.5px; font-weight: 500; }
.ai-docs li svg { width: 13px; height: 13px; }
.js .ai-docs li { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.js .ai-docs.is-in li { opacity: 1; transform: none; }
.js .ai-docs.is-in li:nth-child(2) { transition-delay: 0.06s; }
.js .ai-docs.is-in li:nth-child(3) { transition-delay: 0.12s; }
.js .ai-docs.is-in li:nth-child(4) { transition-delay: 0.18s; }
.js .ai-docs.is-in li:nth-child(5) { transition-delay: 0.24s; }
.js .ai-docs.is-in li:nth-child(6) { transition-delay: 0.30s; }
.js .ai-docs.is-in li:nth-child(7) { transition-delay: 0.36s; }
.js .ai-docs.is-in li:nth-child(8) { transition-delay: 0.42s; }
.js .ai-docs.is-in li:nth-child(9) { transition-delay: 0.48s; }
.js .ai-docs.is-in li:nth-child(10) { transition-delay: 0.54s; }
.js .ai-docs.is-in li:nth-child(11) { transition-delay: 0.60s; }
@media (max-width: 960px) {
  .ai-tl, .ai-cls ul { grid-template-columns: 1fr; gap: 14px; }
  .ai-tl::before { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--navy) 0 62%, var(--down) 62% 100%); }
  .tl { padding: 0 0 0 38px; }
  .ai-principles ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .ai-principles ul { display: flex; }
  .tl-when { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .js .ai-docs li { opacity: 1; transform: none; } }

/* AI Act, kurz */
.ai { gap: clamp(32px, 3.6vw, 48px); }
.ai-req { border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 2.6vw, 32px); background: var(--bg); }
.ai-req-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.ai-req-head h3 { margin: 0; }
.ai-req-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #2E7D5B; background: rgba(46,125,91,.1); padding: 6px 12px; border-radius: 999px; }
.ai-req-tag svg { width: 14px; height: 14px; }
.ai-req ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 28px; }
.ai-req li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.rq-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #2E7D5B; color: #FFFFFF; }
.rq-ic svg { width: 14px; height: 14px; }
.ai-req li strong { display: block; font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.ai-req li > span:last-child { font-size: 14px; line-height: 1.5; color: var(--body); }
.js .ai-req li { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .ai-req.is-in li { opacity: 1; transform: none; }
.js .ai-req.is-in li:nth-child(2) { transition-delay: .08s; } .js .ai-req.is-in li:nth-child(3) { transition-delay: .16s; }
.js .ai-req.is-in li:nth-child(4) { transition-delay: .24s; } .js .ai-req.is-in li:nth-child(5) { transition-delay: .32s; } .js .ai-req.is-in li:nth-child(6) { transition-delay: .4s; }
@media (max-width: 960px) { .ai-req ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ai-req ul { grid-template-columns: 1fr; gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .js .ai-req li { opacity: 1; transform: none; } }

/* AI-Act-Detailseite */
.ai-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; font-size: 15px; color: var(--navy); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ai-more span { transition: transform .3s var(--ease); }
.ai-more:hover span { transform: translateX(4px); }
.ai > * { min-width: 0; max-width: 100%; }
.aipage .ai-top { padding-top: clamp(48px, 6vw, 88px); }
.aipage h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -0.015em; }
.ai-back { font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 8px; }
.ai-back:hover { color: var(--navy); }
.ai-h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; margin-bottom: 16px; }
.ai-p { max-width: 720px; font-size: 16px; line-height: 1.65; color: var(--body); margin-bottom: 20px; }
.ai-tl-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.ai-tl-4::before { background: linear-gradient(90deg, var(--navy) 0 72%, var(--down) 72% 100%); }
.roles-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.role { border-radius: 18px; padding: 22px 24px; border: 1px solid var(--line); background: var(--surface); }
.role.we { border-color: rgba(46,125,91,.35); background: rgba(46,125,91,.05); }
.role h3 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.role.we h3 { color: #2E7D5B; } .role.you h3 { color: var(--navy); }
.role ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.role li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 1.5; }
.role li svg { width: 16px; height: 16px; margin-top: 3px; }
.role.we li svg { color: #2E7D5B; } .role.you li svg { color: var(--navy); }
.aipage .ai-docs li { opacity: 1; transform: none; }
@media (max-width: 960px) { .ai-tl-4 { grid-template-columns: 1fr; } .ai-tl-4::before { background: linear-gradient(180deg, var(--navy) 0 72%, var(--down) 72% 100%); } .roles-grid { grid-template-columns: 1fr; } }

/* Wochen-Kennzahlen */
.wk-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.wk-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.wk-stat-lbl { font-size: 12px; color: var(--muted); }
.wk-stat-val { font-family: var(--serif); font-size: clamp(28px, 2.8vw, 36px); line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.wk-stat-val small { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.wk-stat.after .wk-stat-val { color: #2E7D5B; }
.wk-stat.saved { background: #2E7D5B; border-color: #2E7D5B; }
.wk-stat.saved .wk-stat-lbl, .wk-stat.saved .wk-stat-val, .wk-stat.saved small { color: #FFFFFF; }
.wk-hook { border-top: 0; padding-top: 0; margin-top: 0; font-size: 12.5px; }

/* Zeitfresser: Icon-Raster mit Detailfeld */
.drains { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; align-items: stretch; }
.drain-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.drain { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 13.5px/1.3 var(--sans); text-align: center; cursor: pointer; transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
.drain-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy); transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.drain-ic svg { width: 24px; height: 24px; }
.drain:hover .drain-ic { transform: scale(1.15); }
.drain.is-on { border-color: var(--navy); box-shadow: 0 18px 30px -24px rgba(11,28,51,.6); }
.drain.is-on .drain-ic { background: var(--navy); color: #FFFFFF; transform: scale(1.12); }
.drain-panel { border-radius: 20px; padding: clamp(22px, 2.6vw, 32px); background: var(--deep); color: var(--on-deep); display: flex; flex-direction: column; gap: 18px; }
.dp-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.dp-cols { display: flex; flex-direction: column; gap: 16px; }
.dp-cols p { display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; line-height: 1.55; }
.dp-cols b { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dp-pain b { color: #F08C7A; } .dp-fix b { color: #7FD1A8; }
.dp-pain span { color: var(--on-deep-body); }
.dp-fix { padding-top: 14px; border-top: 1px solid var(--deep-line); }
.drain-panel.swap .dp-title, .drain-panel.swap .dp-cols { animation: fadeDown .4s var(--ease); }
@media (max-width: 960px) { .drains { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .drain { padding: 12px 6px; gap: 8px; font-size: 11.5px; border-radius: 12px; }
  .drain-ic { width: 40px; height: 40px; border-radius: 12px; }
  .drain-ic svg { width: 20px; height: 20px; }
  .wk-stat { padding: 10px; } .wk-stat-val { font-size: 26px; }
}

/* Leistungen: Beispiel-Boxen kompakter */
.flows { gap: 14px; }
.svc { padding: clamp(26px, 2.8vw, 34px); gap: 16px; border-radius: 20px; }
.svc h3 { font-size: clamp(26px, 2.5vw, 34px); }
.svc-list li { padding: 11px 0; font-size: 15px; line-height: 1.5; grid-template-columns: 24px 1fr; gap: 10px; }
@media (max-width: 720px) { .flows .svc { flex-basis: 90%; padding: 24px 20px 28px; } .svc-list li { padding: 12px 0; } }
.svc-list .n { font-size: 15px; }
.svc-list li.click { margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.svc-foot { display: none; }
.svc-kicker { font-size: 11px; } .svc-index { font-size: 16px; }

/* Schwebender Termin-Button */
.fab {
  position: fixed; z-index: 45; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--navy); color: #FFFFFF; text-decoration: none; font: 600 14.5px/1 var(--sans);
  box-shadow: 0 14px 30px -12px rgba(11,28,51,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .25s var(--ease);
}
.fab svg { width: 20px; height: 20px; }
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { background: var(--navy-hover); color: #FFFFFF; }
.fab:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (max-width: 720px) {
  .fab { width: 56px; height: 56px; padding: 0; justify-content: center; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .fab svg { width: 24px; height: 24px; }
}
@media (max-width: 1080px) and (min-width: 901px) { .nav-links { gap: 20px; font-size: 14.5px; } }

/* Wochen-Kennzahlen: zwei Kacheln */
.wk-stats.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dp-cta, .dp-cta:hover, .dp-cta:visited { color: #FFFFFF; }
.dp-cta { display: none; align-self: flex-start; font-weight: 600; font-size: 15px; color: #FFFFFF; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.drain-panel.is-more .dp-cta { display: inline-flex; gap: 6px; }
.drain.drain-more .drain-ic { background: rgba(46,125,91,.12); color: #2E7D5B; }
.drain.drain-more.is-on .drain-ic { background: #2E7D5B; color: #FFFFFF; }

/* Workflow-Karte: Leiste "Interview gebucht" reserviert keinen Platz, bevor sie kommt */
.flow-done { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
  transition: clip-path 1s cubic-bezier(.65,0,.35,1), opacity .5s var(--ease), transform .9s var(--ease), max-height .5s var(--ease), margin-top .5s var(--ease), padding .5s var(--ease); }
.flow-done.is-in { max-height: 90px; margin-top: 14px; padding-top: 16px; padding-bottom: 16px; }
.no-js .flow-done, .flow.is-static .flow-done { max-height: none; margin-top: 14px; padding: 16px 18px; }

/* Wischreihen: kein vertikales Ziehen, eine Karte pro Wisch */
.flows, .faq-list, .pains, .principles ul, .why-grid { overflow-y: hidden; overscroll-behavior-x: contain; }
.flows > *, .faq-list > *, .pains > *, .principles ul > *, .why-grid > * { scroll-snap-stop: always; }

/* Regler: Daumen wächst nicht, Seite springt nicht */
input[type=range] { touch-action: pan-y; }
.wk-stat-val, .field output { font-variant-numeric: tabular-nums; }
.wk-stat-lbl em { font-style: normal; opacity: .8; }

/* Rechner: Bullhorn-Hinweis ganz unten */
.calc-hook { font-size: 13px; line-height: 1.55; color: var(--body); padding-top: 14px; border-top: 1px dashed var(--line-strong); flex-basis: 100%; }
.calc-hook b { color: #2E7D5B; }

/* Zeitfresser: Feld behält seine Höhe, nichts verschiebt sich */
@media (max-width: 960px) { .drain-panel { min-height: 300px; } }

/* AI Act: Aussage in eigener Zeile, Zeitstrahl animiert */
.ai-claim { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); color: #2E7D5B; }
.ai-claim::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: #2E7D5B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ai-tl-anim { position: relative; }
.ai-tl-anim::before { background: var(--line) !important; opacity: 1 !important; }
.ai-tl-anim::after { content: ""; position: absolute; left: 0; top: 9px; height: 2px; width: 0; background: linear-gradient(90deg, var(--navy) 0 66%, var(--down) 66% 100%); transition: width 1.6s cubic-bezier(.4,0,.2,1) .2s; }
.ai-tl-anim.is-in::after { width: 100%; }
.ai-tl-anim .tl::before { transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.ai-tl-anim .tl > span { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ai-tl-anim.is-in .tl::before, .ai-tl-anim.is-in .tl > span { transform: none; opacity: 1; }
.ai-tl-anim.is-in .tl:nth-child(1)::before, .ai-tl-anim.is-in .tl:nth-child(1) > span { transition-delay: .3s; }
.ai-tl-anim.is-in .tl:nth-child(2)::before, .ai-tl-anim.is-in .tl:nth-child(2) > span { transition-delay: .9s; }
.ai-tl-anim.is-in .tl:nth-child(3)::before, .ai-tl-anim.is-in .tl:nth-child(3) > span { transition-delay: 1.6s; }
.tl-today { position: absolute; top: -26px; left: calc(50% + 50% / 3 * 2 / 16 * 2); list-style: none; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; transition: opacity .5s var(--ease) 1.3s; }
.tl-today span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: var(--navy-soft); padding: 3px 8px; border-radius: 999px; }
.tl-today::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px var(--surface); animation: ping-soft 1.8s ease-out infinite; margin-top: 3px; }
@keyframes ping-soft { 0% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 4px rgba(20,48,90,.35); } 100% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 12px rgba(20,48,90,0); } }
.ai-tl-anim.is-in .tl-today { opacity: 1; }
.ai-tl-anim .tl { padding-top: 34px; }
@media (max-width: 960px) {
  .ai-tl-anim::after { top: 0; left: 9px; width: 2px; height: 0; background: linear-gradient(180deg, var(--navy) 0 66%, var(--down) 66% 100%); transition: height 1.6s cubic-bezier(.4,0,.2,1) .2s; }
  .ai-tl-anim.is-in::after { width: 2px; height: 100%; }
  .ai-tl-anim .tl { padding-top: 0; }
  .tl-today { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-tl-anim::after { width: 100%; } .ai-tl-anim .tl::before, .ai-tl-anim .tl > span, .tl-today { opacity: 1; transform: none; }
}

/* Regler-Beschriftungen hervorheben, Farbe wie im Balken */
.wk-s > span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.wk-s > span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.wk-s:first-child > span::before { background: var(--down); }
.wk-s:last-child > span::before { background: #8FA6C4; }
.wk-s output { font-family: var(--serif); font-weight: 400; font-size: 20px; }

/* Wertrechner: manuelle Arbeit und Kandidatensuche nebeneinander */
.field-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; }
.field-duo .field { gap: 8px; }
.calc-card .field-duo .field output { font-size: 28px; }
.field-duo .field-row { align-items: center; gap: 8px; }
.field-duo .field-unit { font-size: 12px; color: var(--muted-2); }
@media (max-width: 720px) {
  .field-duo { gap: 16px; }
  .calc-card .field-duo .field label { font-size: 14px; }
  .calc-card .field-duo .field output { font-size: 26px; }
  .field-duo .field-unit { font-size: 11px; line-height: 1.3; }
}

/* Boxen in Wisch-Reihen: greifen früh, ohne Grundverzögerung, nacheinander */
.js .reveal[data-reveal-with] { transition-delay: var(--d, 0s); }
.js .flows > .svc:nth-child(2) { --d: .1s; }
.js .why-grid > :nth-child(2) { --d: .08s; } .js .why-grid > :nth-child(3) { --d: .16s; } .js .why-grid > :nth-child(4) { --d: .24s; }
.js .why-cta[data-reveal-with] { --d: .3s; }
@media (max-width: 900px) {
  /* Handy: Beispiele erscheinen nach dem Text */
  .js .flows > .svc { --d: .25s; }
  .js .flows > .svc:nth-child(2) { --d: .35s; }
}

/* Ablauf: Text erst nach dem Antippen, vorher nur die Icons */
.js .steps-5 .step:not(.is-on) > :not(.step-icon) { opacity: 0; transform: translateY(8px); pointer-events: none; }
.js .steps-5 .step > :not(.step-icon) { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .steps-5 .step.is-on > h3 { transition-delay: .05s; }
.js .steps-5 .step.is-on > p { transition-delay: .12s; }
.js .steps-5 .step.is-on > .step-badge { transition-delay: .2s; }
.steps-5 .step:focus { outline: none; }
.steps-5 .step:focus-visible { outline: none; }
.steps-5 .step:focus-visible .step-icon { box-shadow: 0 0 0 4px var(--navy-soft-2); }
@media (max-width: 960px) {
  /* Handy: geschlossene Schritte nehmen nur Platz für das Icon ein */
  .js .steps-5 .step:not(.is-on) { min-height: 72px; padding-bottom: 0; }
  .js .steps-5 .step:not(.is-on) > :not(.step-icon) { display: none; }
  .js .steps-5 .step.is-on > :not(.step-icon) { animation: stepTextIn .5s var(--ease) both; }
  .js .steps-5 .step.is-on > p { animation-delay: .08s; }
  .js .steps-5 .step.is-on > .step-badge { animation-delay: .15s; }
}
@keyframes stepTextIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Wertrechner noch etwas kleiner */
@media (min-width: 721px) {
  .calc-card { max-width: 460px; }
  .calc-card .calc-result { padding: 16px 22px 14px; }
  .calc-card .res-euro { font-size: clamp(26px, 2.3vw, 32px); }
  .calc-card .res-grid strong { font-size: clamp(16px, 1.3vw, 18px); }
  .calc-card .calc-inputs { padding: 14px 22px 0; gap: 10px; }
  .calc-card .field label { font-size: 13.5px; }
  .calc-card .field output, .calc-card .field-duo .field output { font-size: 22px; }
  .calc-card .money input { min-height: 36px; }
  .calc-card .calc-foot { padding: 10px 22px 16px; }
  .calc-card .calc-foot .btn { --h: 40px; font-size: 14px; }
}
@media (max-width: 720px) {
  .calc-card .calc-result { padding: 16px 18px 14px; }
  .calc-card .res-euro { font-size: 32px; }
  .calc-card .res-grid { padding-top: 10px; gap: 10px; }
  .calc-card .res-grid strong { font-size: 18px; }
  .calc-card .calc-inputs { padding: 16px 18px 4px; gap: 12px; }
  .calc-card .field output { font-size: 26px; }
  .calc-card .field-duo .field output { font-size: 22px; }
  .calc-card .money input { min-height: 40px; }
  .calc-card .calc-foot { padding: 12px 18px 16px; gap: 10px; }
  .calc-card .calc-foot .btn { --h: 46px; }
  .calc-hook { font-size: 12px; padding-top: 10px; }
  .calc-card .field-duo .field { gap: 4px; }
}

/* ---------- Text Wort für Wort ---------- */
.w { display: inline-block; }
/* Überschriften: Container selbst nicht ausblenden, nur die Wörter */
.js .split-head.reveal, .js .split-pop.reveal { opacity: 1; transform: none; }
.split-head .w {
  opacity: 0; transform: translateY(.45em);
  transition: opacity .6s var(--ease), transform .7s var(--ease);
  transition-delay: calc(.18s + var(--d, 0s) + var(--wi) * 55ms);
}
.split-head.is-in .w { opacity: 1; transform: none; }
/* Computer: Absätze ploppen Wort für Wort auf */
.split-pop .w {
  opacity: 0; transform: translateY(.3em);
  transition: opacity .45s var(--ease), transform .5s var(--ease);
  transition-delay: calc(.18s + var(--d, 0s) + .15s + var(--wi) * 14ms);
}
.split-pop.is-in .w { opacity: 1; transform: none; }
/* Handy: Mitlesen – Wörter werden beim Scrollen dunkel */
.split-read .w { opacity: .2; transition: opacity .35s ease-out; }
.split-read .w.lit { opacity: 1; }
/* Listeneinträge leicht von unten */
.js .reveal-item { transform: translateY(10px); }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .seal .ring-text { animation: none; }
}