/* ==========================================================================
   DATAFINANCE — Designsystem
   Schriften lokal eingebunden (kein externes CDN, DSGVO-konform).
   Auf Apple-Geräten wird die System-Schrift genutzt, sonst Inter.
   ========================================================================== */

@font-face{font-family:"Inter";src:url("fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url("fonts/InterDisplay-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url("fonts/InterDisplay-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --- Tokens: Hell --- */
:root{
  --navy:#0B1B33;
  --navy-2:#16294A;
  --gold:#9C7226;
  --gold-bright:#C8973F;

  --ground:#FFFFFF;
  --ground-2:#F5F5F7;
  --surface:#FFFFFF;
  --surface-2:#FAFAFC;

  --text:#1D1D1F;
  --text-2:#3A3B3F;
  --muted:#6E6E76;
  --rule:rgba(0,0,0,.09);
  --rule-2:rgba(0,0,0,.05);

  --on-dark:#F5F5F7;
  --on-dark-muted:#A4AAB8;

  --glass:rgba(255,255,255,.72);
  --shadow-s:0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
  --shadow-m:0 2px 6px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.07);
  --shadow-l:0 4px 12px rgba(0,0,0,.06), 0 28px 70px rgba(0,0,0,.10);

  --display:"Inter Display",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;

  --r-s:12px; --r-m:18px; --r-l:26px; --r-pill:980px;

  --wrap:1120px;
  --measure:64ch;
  --gap:clamp(20px,2.2vw,28px);
  --sp-section:clamp(72px,9vw,132px);
  --sp-block:clamp(28px,3.4vw,44px);
}

/* --- Tokens: Dunkel --- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#E8ECF5;
    --navy-2:#D2D9E8;
    --gold:#D8AE60;
    --gold-bright:#E0B96E;

    --ground:#000000;
    --ground-2:#0B0B0D;
    --surface:#141416;
    --surface-2:#1B1B1E;

    --text:#F5F5F7;
    --text-2:#D6D7DC;
    --muted:#9A9AA2;
    --rule:rgba(255,255,255,.12);
    --rule-2:rgba(255,255,255,.07);

    --glass:rgba(18,18,20,.72);
    --shadow-s:0 1px 2px rgba(0,0,0,.5);
    --shadow-m:0 2px 8px rgba(0,0,0,.55);
    --shadow-l:0 8px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --navy:#E8ECF5; --navy-2:#D2D9E8; --gold:#D8AE60; --gold-bright:#E0B96E;
  --ground:#000000; --ground-2:#0B0B0D; --surface:#141416; --surface-2:#1B1B1E;
  --text:#F5F5F7; --text-2:#D6D7DC; --muted:#9A9AA2;
  --rule:rgba(255,255,255,.12); --rule-2:rgba(255,255,255,.07);
  --glass:rgba(18,18,20,.72);
  --shadow-s:0 1px 2px rgba(0,0,0,.5);
  --shadow-m:0 2px 8px rgba(0,0,0,.55);
  --shadow-l:0 8px 40px rgba(0,0,0,.6);
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.55;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--gold-bright);outline-offset:4px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* --- Layout --- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:760px}
section{padding:var(--sp-section) 0}
section.tight{padding:calc(var(--sp-section) * .62) 0}
/* Farbstimmung der bisherigen Website: weiche Wolken in Rosé, Lila und Blau
   über dem hellen Grund, darüber ein feines Korn. Die Wolken liegen je Band an
   einer anderen Stelle, damit die Seite nicht überall gleich aussieht. */
.band{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
    radial-gradient(55% 75% at 8% 18%, rgba(228,170,174,.58), transparent 62%),
    radial-gradient(45% 65% at 52% 55%, rgba(186,170,224,.48), transparent 64%),
    radial-gradient(60% 85% at 94% 30%, rgba(136,172,228,.60), transparent 62%),
    radial-gradient(120% 60% at 50% 0%, rgba(200,151,63,.05), transparent 62%),
    var(--ground-2);
  background-size:200px 200px,auto,auto,auto,auto,auto;
}
.band.band--b{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
    radial-gradient(55% 80% at 90% 82%, rgba(228,170,174,.54), transparent 62%),
    radial-gradient(48% 65% at 44% 24%, rgba(186,170,224,.46), transparent 64%),
    radial-gradient(60% 85% at 6% 60%, rgba(136,172,228,.58), transparent 62%),
    var(--ground-2);
  background-size:200px 200px,auto,auto,auto,auto;
}
/* In der Dunkeldarstellung werden aus den Wolken leise Lichter auf Schwarz */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .band{
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
      radial-gradient(55% 75% at 8% 18%, rgba(214,120,136,.22), transparent 62%),
      radial-gradient(45% 65% at 52% 55%, rgba(150,130,210,.19), transparent 64%),
      radial-gradient(60% 85% at 94% 30%, rgba(80,130,220,.25), transparent 62%),
      var(--ground-2);
    background-size:200px 200px,auto,auto,auto,auto;
  }
  :root:not([data-theme="light"]) .band.band--b{
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
      radial-gradient(55% 80% at 90% 82%, rgba(214,120,136,.21), transparent 62%),
      radial-gradient(48% 65% at 44% 24%, rgba(150,130,210,.18), transparent 64%),
      radial-gradient(60% 85% at 6% 60%, rgba(80,130,220,.24), transparent 62%),
      var(--ground-2);
    background-size:200px 200px,auto,auto,auto,auto;
  }
}
:root[data-theme="dark"] .band{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
    radial-gradient(55% 75% at 8% 18%, rgba(214,120,136,.22), transparent 62%),
    radial-gradient(45% 65% at 52% 55%, rgba(150,130,210,.19), transparent 64%),
    radial-gradient(60% 85% at 94% 30%, rgba(80,130,220,.25), transparent 62%),
    var(--ground-2);
  background-size:200px 200px,auto,auto,auto,auto;
}
:root[data-theme="dark"] .band.band--b{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
    radial-gradient(55% 80% at 90% 82%, rgba(214,120,136,.21), transparent 62%),
    radial-gradient(48% 65% at 44% 24%, rgba(150,130,210,.18), transparent 64%),
    radial-gradient(60% 85% at 6% 60%, rgba(80,130,220,.24), transparent 62%),
    var(--ground-2);
  background-size:200px 200px,auto,auto,auto,auto;
}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.center{text-align:center}
.center p,.center .lead{margin-left:auto;margin-right:auto}
.center .card,.center .step,.center .role,.center .todo,
.center .tablewrap,.center ul.list,.center .formcard{text-align:left}
.center ul.list{margin-left:auto;margin-right:auto}
/* Kurzer goldener Strich als Auftakt zentrierter Abschnitte */
.stack.center > h2::before{
  content:"";display:block;width:46px;height:3px;border-radius:2px;margin:0 auto 22px;
  background:linear-gradient(90deg,var(--gold-bright),rgba(200,151,63,.35));
}
.cta-band .stack.center > h2::before{background:linear-gradient(90deg,var(--gold-bright),rgba(200,151,63,.45))}

/* --- Typografie --- */
h1,h2,h3{
  font-family:var(--display);color:var(--text);margin:0;font-weight:600;
  letter-spacing:-.025em;line-height:1.06;text-wrap:balance;
  /* Sehr lange Komposita duerfen umbrechen, statt die Seite breiter zu machen */
  overflow-wrap:break-word;hyphens:auto;
}
h1{font-size:clamp(40px,6.2vw,80px);font-weight:700;letter-spacing:-.032em}
h2{font-size:clamp(30px,4.4vw,52px)}
h3{font-size:clamp(20px,2.1vw,25px);letter-spacing:-.018em;line-height:1.2}
h4{font-family:var(--sans);font-size:18px;font-weight:600;margin:0;letter-spacing:-.012em}
p{margin:0;max-width:var(--measure)}
.lead{
  font-size:clamp(19px,2.1vw,25px);line-height:1.42;color:var(--muted);
  font-weight:400;letter-spacing:-.019em;max-width:34ch;
}
.lead-wide{max-width:52ch}
.body-lg{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--text-2)}
.small{font-size:15px;color:var(--muted);line-height:1.55}
.eyebrow{
  font-family:var(--display);font-size:clamp(21px,2.5vw,30px);font-weight:600;
  letter-spacing:-.018em;line-height:1.15;color:var(--gold);margin:0;max-width:none;
}
strong{font-weight:600;color:var(--text)}
.muted{color:var(--muted)}

ul.list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:18px;max-width:var(--measure)}
ul.list li{padding-left:30px;position:relative;color:var(--text-2);font-size:17px;line-height:1.55}
ul.list li::before{
  content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;
  background:var(--gold-bright);
}
ul.list li strong{color:var(--text)}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:17px;font-weight:500;line-height:1;letter-spacing:-.012em;
  padding:15px 26px;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--navy);color:var(--ground);text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:transform .2s cubic-bezier(.32,.72,0,1),background .2s ease,opacity .2s ease;
}
.btn:hover{background:var(--navy-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--rule)}
.btn--ghost:hover{background:var(--ground-2);border-color:rgba(200,151,63,.5)}
.btn--gold{background:var(--gold-bright);color:#0B1B33}
.btn--gold:hover{background:#D5A54F}
.btn--onnavy{background:var(--on-dark);color:#0B1B33}
.btn--onnavy:hover{background:#fff}
.btn--onnavy-ghost{background:rgba(255,255,255,.10);color:var(--on-dark);border-color:rgba(255,255,255,.22)}
.btn--onnavy-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(200,151,63,.65)}
.btn--sm{font-size:15px;padding:11px 20px}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:520px){
  .hero .btnrow{flex-direction:column;align-self:stretch;width:100%}
  .hero .btnrow .btn{width:100%}
}
.center .btnrow{justify-content:center}
.textlink{color:var(--gold);text-decoration:none;font-weight:500}
.textlink:hover{text-decoration:underline;text-underline-offset:3px}

/* --- Header (durchscheinend, wie in iOS/macOS) --- */
.site-header{
  position:sticky;top:0;z-index:80;background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--rule-2);
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,151,63,.45) 30%,rgba(200,151,63,.7) 50%,rgba(200,151,63,.45) 70%,transparent);
}
.site-header .wrap{max-width:1280px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:34px;width:auto}
.logo-dark{display:none}
.logo-light{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}

.nav{display:flex;align-items:center;gap:2px}
.nav a{
  font-size:14.5px;font-weight:400;text-decoration:none;color:var(--text-2);
  padding:8px 9px;border-radius:var(--r-pill);white-space:nowrap;transition:color .18s ease,background .18s ease;
}
.nav a:hover{color:var(--text);background:var(--rule-2)}
.nav a[aria-current="page"]{color:var(--text);font-weight:500}
.nav a.btn{margin-left:8px;color:var(--ground);font-weight:500;padding:10px 18px;font-size:14.5px}
.nav a.btn:hover{color:var(--ground);background:var(--navy-2)}

.has-sub{position:relative}
.has-sub > button{
  font:inherit;font-size:14.5px;color:var(--text-2);background:none;border:0;cursor:pointer;
  padding:8px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;
  transition:color .18s ease,background .18s ease;
}
.has-sub > button:hover{color:var(--text);background:var(--rule-2)}
.has-sub > button::after{
  content:"";width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.has-sub[data-open="true"] > button::after{transform:rotate(-135deg) translateY(-2px)}
/* Das Untermenü hängt an der linken Kante von „Leistungen" und wächst nach
   rechts — so bleibt es bei jeder Fensterbreite vollständig im Bild. */
.submenu{
  position:absolute;top:calc(100% + 10px);left:0;transform:translateY(-6px);
  width:min(780px,calc(100vw - 44px));max-height:calc(100vh - 100px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-l);padding:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 14px;
  box-shadow:var(--shadow-l);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .25s cubic-bezier(.32,.72,0,1),visibility .2s;
}
.has-sub[data-open="true"] .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{padding:11px 14px;border-radius:var(--r-s);font-size:15px;display:flex;flex-direction:column;gap:2px;font-weight:500;white-space:normal;min-width:0}
.submenu a span{font-size:13.5px;color:var(--muted);font-weight:400;line-height:1.4}
.submenu .sep{
  grid-column:1/-1;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:12px 14px 4px;
}
.submenu .sep:first-child{padding-top:4px}

.burger{
  display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;position:relative;
  border-radius:50%;
}
.burger span,.burger span::before,.burger span::after{
  content:"";position:absolute;left:11px;width:18px;height:1.6px;background:var(--text);border-radius:2px;
  transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .2s;
}
.burger span{top:19.2px}
.burger span::before{top:-6px;left:0}
.burger span::after{top:6px;left:0}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1279px){
  .burger{display:block}
  .nav{
    position:fixed;inset:74px 0 auto;background:var(--glass);
    -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    padding:12px 22px 26px;gap:0;max-height:calc(100dvh - 74px);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease,transform .3s cubic-bezier(.32,.72,0,1),visibility .22s;
  }
  .nav[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
  .nav a,.has-sub > button{padding:14px 4px;border-radius:0;width:100%;text-align:left;font-size:17px;border-bottom:1px solid var(--rule-2)}
  .nav a.btn{margin:18px 0 0;justify-content:center;border-radius:var(--r-pill);border-bottom:0;font-size:17px;padding:15px 26px}
  .submenu{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;
    border-radius:0;padding:2px 0 10px 12px;min-width:0;grid-template-columns:1fr;display:none;
  }
  .has-sub[data-open="true"] .submenu{display:grid;transform:none}
  .submenu a{border-bottom:0;padding:11px 8px}
  .submenu .sep{padding:12px 8px 2px}
}

/* --- Hero --- */
.hero{
  padding:clamp(80px,11vw,150px) 0 clamp(60px,8vw,104px);
  background:var(--ground-2);position:relative;overflow:hidden;
}
.hero-inner{display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.hero .lead{max-width:46ch}
/* Unterseiten: kürzere Fallhöhe als auf der Startseite, damit die
   goldene Bereichsbezeichnung nicht erdrückt wird */
.hero--sub h1{font-size:clamp(32px,4.3vw,54px);letter-spacing:-.026em}
.hero--sub .lead{font-size:clamp(18px,1.9vw,22px);max-width:50ch}
.hero-note{font-size:14px;color:var(--muted);letter-spacing:-.008em}
.hero-mark{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(560px,52vw);opacity:.045;pointer-events:none;
}
.hero--dark{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
    radial-gradient(70% 110% at 84% 6%, rgba(200,151,63,.14), transparent 56%),
    radial-gradient(48% 80% at 14% 88%, rgba(222,110,128,.38), transparent 60%),
    radial-gradient(42% 70% at 50% 30%, rgba(150,120,215,.32), transparent 62%),
    radial-gradient(55% 90% at 92% 62%, rgba(70,135,230,.42), transparent 60%),
    linear-gradient(158deg, #081426 0%, #0F1F3C 42%, #1D3A66 100%);
  background-size:200px 200px,auto,auto,auto,auto,auto;
}
/* Feine goldene Kante als Abschluss zur hellen Fläche darunter */
.hero--dark::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(200,151,63,.55) 22%,rgba(200,151,63,.85) 50%,rgba(200,151,63,.55) 78%,transparent);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero--dark{
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
      radial-gradient(70% 110% at 84% 6%, rgba(216,174,96,.11), transparent 56%),
      radial-gradient(48% 80% at 14% 88%, rgba(222,110,128,.30), transparent 60%),
      radial-gradient(42% 70% at 50% 30%, rgba(150,120,215,.26), transparent 62%),
      radial-gradient(55% 90% at 92% 62%, rgba(70,135,230,.34), transparent 60%),
      linear-gradient(158deg, #05080F 0%, #0A1526 45%, #14294A 100%);
    background-size:200px 200px,auto,auto,auto,auto,auto;
  }
}
:root[data-theme="dark"] .hero--dark{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
    radial-gradient(70% 110% at 84% 6%, rgba(216,174,96,.11), transparent 56%),
    radial-gradient(48% 80% at 14% 88%, rgba(222,110,128,.30), transparent 60%),
    radial-gradient(42% 70% at 50% 30%, rgba(150,120,215,.26), transparent 62%),
    radial-gradient(55% 90% at 92% 62%, rgba(70,135,230,.34), transparent 60%),
    linear-gradient(158deg, #05080F 0%, #0A1526 45%, #14294A 100%);
  background-size:200px 200px,auto,auto,auto,auto,auto;
}
.hero--dark h1,.hero--dark h2{color:var(--on-dark)}
.hero--dark .lead,.hero--dark .hero-note{color:var(--on-dark-muted)}
.hero--dark .eyebrow{color:var(--gold-bright)}
.pill{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;
  padding:7px 15px;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--rule);color:var(--muted);box-shadow:var(--shadow-s);
}
.pill b{color:var(--gold);font-weight:600}
.hero--dark .pill{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);color:var(--on-dark)}
/* Rollenkennzeichnung auf den Leistungsseiten — gleiche Wirkung wie die
   goldenen Bereichstitel der übrigen Seiten, nur als Kapsel */
.eyebrow .pill{font-size:clamp(17px,1.9vw,21px);font-weight:600;padding:10px 22px;letter-spacing:-.012em}
.hero--dark .pill b{color:var(--gold-bright)}

/* --- Preispakete --- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:start}
@media (max-width:980px){.plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.plan{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:34px 30px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--shadow-s);
  text-align:left;
}
.plan--featured{
  box-shadow:var(--shadow-l);border-color:rgba(200,151,63,.45);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(200,151,63,.10), transparent 60%),
    radial-gradient(120% 80% at 0% 100%, rgba(11,27,51,.06), transparent 60%),
    var(--surface);
}
@media (min-width:981px){.plan--featured{margin-top:-18px;padding-block:44px}}
:root[data-theme="dark"] .plan--featured,
:root:not([data-theme="light"]) .plan--featured{
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(216,174,96,.14), transparent 60%),
    var(--surface);
}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plan-name{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.022em;color:var(--text)}
.plan-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:6px 13px;border-radius:var(--r-pill);background:var(--gold-bright);color:#0B1B33;
  white-space:nowrap;
}
.plan-for{font-size:16px;color:var(--muted);line-height:1.5;margin:0;max-width:none}
.plan .btn{width:100%}
.plan-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:15px}
.plan-list li{
  position:relative;padding-left:30px;font-size:16px;line-height:1.5;color:var(--text-2);
}
.plan-list li::before{
  content:"";position:absolute;left:4px;top:5px;width:11px;height:6px;
  border-left:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);
  transform:rotate(-45deg);
}
.plan-list li strong{color:var(--text);font-weight:600}
.plan-note{font-size:14.5px;color:var(--muted);text-align:center;margin:0 auto;max-width:56ch}

/* --- Profil --- */
.profile{
  display:grid;grid-template-columns:240px 1fr;gap:clamp(26px,3.4vw,40px);
  align-items:start;
}
.profile-photo{
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-m);
  border:1px solid rgba(200,151,63,.4);background:var(--ground-2);
}
.profile-photo img{width:100%;height:auto;display:block}
.profile-body{display:flex;flex-direction:column;gap:18px;min-width:0}
.profile-role{font-size:17px;color:var(--gold);font-weight:600;letter-spacing:-.012em}
.profile-body p{max-width:58ch}
@media (max-width:760px){
  .profile{grid-template-columns:1fr;gap:26px}
  .profile-photo{max-width:280px}
}
.cv{display:flex;flex-direction:column;max-width:var(--measure)}
.cv-row{
  display:grid;grid-template-columns:132px 1fr;gap:4px 22px;
  padding:16px 0;border-bottom:1px solid var(--rule-2);
}
.cv-row:first-child{border-top:1px solid var(--rule-2)}
.cv-when{font-size:15px;color:var(--gold);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.cv-what b{display:block;font-size:16.5px;color:var(--text);font-weight:600;letter-spacing:-.012em}
.cv-what span{font-size:15.5px;color:var(--muted)}
@media (max-width:560px){.cv-row{grid-template-columns:1fr;gap:3px}}

/* --- Video --- */
.videoblock{display:flex;flex-direction:column;gap:14px}
.videoframe{
  position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--ground-2);
  box-shadow:var(--shadow-l);border:1px solid var(--rule);line-height:0;
}
.videoframe video{width:100%;height:auto;display:block}
.videoframe[hidden]{display:none}
.soundtoggle{
  position:absolute;right:16px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:500;line-height:1;letter-spacing:-.01em;
  padding:11px 18px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28);
  background:rgba(12,14,20,.55);color:#fff;
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  transition:background .2s ease,transform .2s cubic-bezier(.32,.72,0,1);
}
.soundtoggle:hover{background:rgba(12,14,20,.75);transform:translateY(-1px)}
.replay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:500;line-height:1;letter-spacing:-.012em;
  padding:15px 26px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.3);
  background:rgba(12,14,20,.6);color:#fff;
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  transition:background .2s ease;
}
.replay:hover{background:rgba(12,14,20,.8)}
.replay[hidden]{display:none}
.videocaption{font-size:15px;color:var(--muted);text-align:center;margin:0 auto;max-width:52ch}

/* --- Kennzahlen --- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--gap)}
.stat{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:30px 26px;text-align:center;box-shadow:var(--shadow-s);
}
/* Goldene Oberkante — gibt der Kennzahlenreihe Halt */
.stat::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(200,151,63,.75) 30%,var(--gold-bright) 50%,rgba(200,151,63,.75) 70%,transparent);
}
.stat b{
  display:block;font-family:var(--display);font-size:clamp(27px,2.7vw,36px);font-weight:700;
  color:var(--gold);line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  text-wrap:balance;
}
.stat span{display:block;margin-top:12px;font-size:15px;color:var(--muted);line-height:1.45}

/* --- Karten --- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--gap)}
.cards--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
/* Vier Elemente als 2x2 statt 3+1 — kein einzelner Rest in der letzten Zeile */
@media (min-width:920px){.cards.g-4,.steps.g-4{grid-template-columns:repeat(2,1fr)}}
/* Fünf Karten: die letzte füllt die Restzeile, statt allein zu stehen. */
@media (min-width:560px){.cards.g-5 > :last-child{grid-column:1/-1}}
.card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:32px 30px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-s);
  transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s ease,border-color .3s ease;
}
/* Goldene Oberkante: dezent vorhanden, beim Überfahren voll sichtbar */
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;opacity:.4;
  background:linear-gradient(90deg,var(--gold-bright),rgba(200,151,63,.25));
  transition:opacity .3s ease;
}
.card h3{font-size:20px;letter-spacing:-.018em}
.card p{font-size:16px;color:var(--muted);line-height:1.55;max-width:none}
.card .num{
  font-size:13px;font-weight:600;color:var(--gold);letter-spacing:-.005em;
}
a.card{text-decoration:none}
a.card .more{margin-top:auto;padding-top:12px;font-size:15px;color:var(--gold);font-weight:500}
a.card:hover .more{text-decoration:underline;text-underline-offset:3px}

/* --- „Wer macht was": kompakter Kasten, links DATAFINANCE, rechts Partner --- */
.role{
  border:1px solid var(--rule);border-radius:var(--r-m);background:var(--surface);
  padding:16px 22px 15px;display:flex;flex-direction:column;gap:12px;max-width:var(--measure);
  box-shadow:var(--shadow-s);
}
/* Goldene Oberkante wie bei den Karten — dezent, beim Überfahren voll */
.role::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;opacity:.4;
  background:linear-gradient(90deg,var(--gold-bright),rgba(200,151,63,.25));
  transition:opacity .3s ease;
}
.role > b{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gold)}
.role-spalten{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.role-spalte{display:flex;flex-direction:column;gap:7px;min-width:0}
.role-spalte + .role-spalte{border-left:1px solid var(--rule);padding-left:22px}
.role-wer{
  display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.012em;color:var(--text);
}
.role-wer i{
  flex:none;width:9px;height:9px;border-radius:50%;background:var(--navy);
  box-shadow:0 0 0 3px rgba(11,27,51,.10);
}
.role-spalte--partner .role-wer i{background:var(--gold-bright);box-shadow:0 0 0 3px rgba(200,151,63,.20)}
:root[data-theme="dark"] .role-wer i,
:root:not([data-theme="light"]) .role-wer i{box-shadow:0 0 0 3px rgba(232,236,245,.14)}
.role ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.role li{position:relative;padding-left:17px;font-size:14.5px;line-height:1.42;color:var(--muted);max-width:none}
/* Kleines Häkchen vor jeder Zeile */
.role li::before{
  content:"";position:absolute;left:1px;top:.47em;width:8px;height:4px;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg);
}
.role-note{
  font-size:13px;line-height:1.45;color:var(--muted);max-width:none;
  border-top:1px solid var(--rule-2);padding-top:10px;margin:0;
}
@media (max-width:560px){
  .role{padding:15px 18px 14px}
  .role-spalten{grid-template-columns:1fr;gap:12px}
  .role-spalte + .role-spalte{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:12px}
}
.role-tag{
  display:inline-flex;align-items:center;font-size:13px;font-weight:500;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);color:var(--on-dark);padding:6px 14px;
}
.todo{
  border:1px dashed rgba(176,86,63,.5);border-radius:var(--r-m);
  background:rgba(176,86,63,.055);color:#8C3A2E;
  padding:22px 26px;display:flex;flex-direction:column;gap:8px;max-width:var(--measure);
}
:root[data-theme="dark"] .todo,
:root:not([data-theme="light"]) .todo{color:#EFA595;border-color:rgba(239,165,149,.35);background:rgba(140,58,46,.14)}
.todo b{font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.todo p{font-size:15.5px;max-width:none;color:inherit;line-height:1.55}

/* --- Tabellen --- */
.tablewrap{
  overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-m);
  background:var(--surface);box-shadow:var(--shadow-s);-webkit-overflow-scrolling:touch;
}
table{border-collapse:collapse;width:100%;font-size:16px;min-width:620px}
th,td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--rule-2);vertical-align:top;color:var(--text-2)}
thead th{
  font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;background:var(--surface-2);
  border-bottom-color:rgba(200,151,63,.35);
}
tbody tr:last-child td{border-bottom:none}
td strong,th strong{color:var(--text)}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Tabellen ohne Kopfzeile (Impressum, Über uns) sind Beschriftung/Wert-Paare.
   Auf dem Handy steht die Beschriftung über dem Wert, statt seitlich wegzulaufen. */
@media (max-width:640px){
  .tablewrap:not(.tablewrap--stack) table{min-width:0}
  .tablewrap:not(.tablewrap--stack) tbody tr{display:block;border-bottom:1px solid var(--rule-2)}
  .tablewrap:not(.tablewrap--stack) tbody tr:last-child{border-bottom:0}
  .tablewrap:not(.tablewrap--stack) td{display:block;border-bottom:0;padding:14px 20px 0}
  .tablewrap:not(.tablewrap--stack) td:first-child{font-size:13px;letter-spacing:.02em;color:var(--muted)}
  .tablewrap:not(.tablewrap--stack) td:last-child{padding:2px 20px 14px;color:var(--text)}
}

/* Auf schmalen Bildschirmen wird aus der Tabelle eine Kartenliste — sonst
   steht die wichtigste Spalte ausserhalb des Bildschirms. */
@media (max-width:700px){
  .tablewrap--stack{overflow-x:visible;background:transparent;border:0;box-shadow:none}
  .tablewrap--stack table{min-width:0;width:100%;display:block}
  .tablewrap--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tablewrap--stack tbody{display:block}
  .tablewrap--stack tbody tr{
    display:block;background:var(--surface);border:1px solid var(--rule);
    border-radius:var(--r-m);box-shadow:var(--shadow-s);padding:6px 20px 14px;margin-bottom:14px;
  }
  .tablewrap--stack tbody tr:last-child{margin-bottom:0}
  .tablewrap--stack td{display:block;padding:10px 0 0;border-bottom:0}
  .tablewrap--stack td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:3px;
    font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--gold);
  }
}

/* --- FAQ --- */
.faq{display:flex;flex-direction:column;max-width:var(--measure);gap:0}
.faq details{border-bottom:1px solid var(--rule);}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 40px 24px 0;position:relative;
  font-weight:500;color:var(--text);font-size:18px;letter-spacing:-.014em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:29px;width:11px;height:2px;border-radius:2px;background:var(--gold-bright);
}
.faq summary::before{
  content:"";position:absolute;right:12.5px;top:24.5px;width:2px;height:11px;border-radius:2px;background:var(--gold-bright);
  transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .2s;
}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq summary:hover{color:var(--gold)}
.faq details[open] summary{color:var(--gold)}
.faq details p{padding:0 0 26px;color:var(--muted);font-size:17px;line-height:1.6}

/* --- Prozess --- */
.steps{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
/* In der schmalen Spalte untereinander statt 2+1 */
.wrap-narrow .steps{grid-template-columns:1fr}
.step{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:30px 28px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-s);
}
.step-n{
  align-self:flex-start;font-family:var(--display);font-size:14px;font-weight:700;
  color:#0B1B33;letter-spacing:.01em;line-height:1;
  padding:7px 13px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--gold-bright),#D9B36B);
  font-variant-numeric:tabular-nums;
}
:root[data-theme="dark"] .step-n,
:root:not([data-theme="light"]) .step-n{color:#0B1B33}
.step h3{font-size:19px}
.step p{color:var(--muted);font-size:16px;line-height:1.55;max-width:none}

/* --- CTA-Band --- */
.cta-band{
  padding:var(--sp-section) 0;color:var(--on-dark);position:relative;overflow:hidden;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
    radial-gradient(70% 110% at 18% 100%, rgba(200,151,63,.14), transparent 60%),
    radial-gradient(48% 80% at 88% 14%, rgba(222,110,128,.34), transparent 60%),
    radial-gradient(42% 70% at 50% 70%, rgba(150,120,215,.30), transparent 62%),
    radial-gradient(55% 90% at 8% 40%, rgba(70,135,230,.40), transparent 60%),
    linear-gradient(200deg, #081426 0%, #0F1F3C 44%, #1D3A66 100%);
  background-size:200px 200px,auto,auto,auto,auto,auto;
}
.cta-band::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(200,151,63,.55) 22%,rgba(200,151,63,.85) 50%,rgba(200,151,63,.55) 78%,transparent);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cta-band{
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
      radial-gradient(70% 110% at 18% 100%, rgba(216,174,96,.11), transparent 60%),
      radial-gradient(48% 80% at 88% 14%, rgba(222,110,128,.28), transparent 60%),
      radial-gradient(42% 70% at 50% 70%, rgba(150,120,215,.24), transparent 62%),
      radial-gradient(55% 90% at 8% 40%, rgba(70,135,230,.32), transparent 60%),
      linear-gradient(200deg, #05080F 0%, #0A1526 45%, #14294A 100%);
    background-size:200px 200px,auto,auto,auto,auto,auto;
  }
}
:root[data-theme="dark"] .cta-band{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>"),
    radial-gradient(70% 110% at 18% 100%, rgba(216,174,96,.11), transparent 60%),
    radial-gradient(48% 80% at 88% 14%, rgba(222,110,128,.28), transparent 60%),
    radial-gradient(42% 70% at 50% 70%, rgba(150,120,215,.24), transparent 62%),
    radial-gradient(55% 90% at 8% 40%, rgba(70,135,230,.32), transparent 60%),
    linear-gradient(200deg, #05080F 0%, #0A1526 45%, #14294A 100%);
  background-size:200px 200px,auto,auto,auto,auto,auto;
}
.cta-band h2{color:var(--on-dark)}
.cta-band p{color:var(--on-dark-muted)}

/* --- Formular --- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:100%}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
label{font-size:15px;font-weight:500;color:var(--text-2)}
input,select,textarea{
  font:inherit;font-size:17px;padding:15px 16px;border:1px solid var(--rule);
  background:var(--surface);color:var(--text);width:100%;border-radius:var(--r-s);
  transition:border-color .2s ease,box-shadow .2s ease;-webkit-appearance:none;appearance:none;
}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
input:focus,select:focus,textarea:focus{border-color:var(--gold-bright);outline:none;box-shadow:0 0 0 4px rgba(200,151,63,.15)}
textarea{min-height:140px;resize:vertical;line-height:1.55}
.check{display:flex;gap:12px;align-items:flex-start;grid-column:1/-1}
.check input{width:20px;height:20px;flex:none;margin-top:2px;border-radius:6px}
.check input:checked{background:var(--gold-bright);border-color:var(--gold-bright)}
.check label{font-weight:400;font-size:15px;color:var(--muted);line-height:1.5}
.formcard{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:clamp(26px,3.4vw,40px);box-shadow:var(--shadow-m);
}

/* --- Illustration „Nachtschicht" (Seite KI-Automatisierung) ---
   Bewusst als Text und CSS gebaut: skaliert verlustfrei, ist durchsuchbar,
   funktioniert mit Vorlesesoftware und lädt nichts nach. */
.nachtschicht{
  position:relative;overflow:hidden;
  border-radius:var(--r-l);padding:clamp(30px,4vw,48px) clamp(22px,3.4vw,52px);
  box-shadow:var(--shadow-l);color:var(--on-dark);
  background:
    radial-gradient(70% 100% at 88% 0%, rgba(200,151,63,.15), transparent 58%),
    linear-gradient(162deg,#070E1B 0%,#0D1C34 46%,#17325A 100%);
}
.nachtschicht::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(200,151,63,.6) 24%,var(--gold-bright) 50%,rgba(200,151,63,.6) 76%,transparent);
}
.nachtschicht-kopf{
  margin:0 auto 30px;max-width:720px;text-align:center;
  font-size:15px;color:var(--on-dark-muted);letter-spacing:-.008em;
}
.nachtschicht-kopf span{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(21px,2.4vw,27px);color:var(--gold-bright);
  letter-spacing:-.018em;margin-bottom:4px;
}
.schicht{
  list-style:none;margin:0 auto;padding:0;max-width:720px;
  position:relative;display:flex;flex-direction:column;gap:26px;
}
/* Die Zeitschiene */
.schicht::before{
  content:"";position:absolute;left:83px;top:10px;bottom:14px;width:1px;
  background:linear-gradient(180deg,rgba(200,151,63,.15),rgba(200,151,63,.55) 22%,rgba(200,151,63,.55) 78%,rgba(200,151,63,.15));
}
.schicht li{position:relative;display:grid;grid-template-columns:68px 1fr;gap:0 30px;align-items:start}
.schicht time{
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.01em;
  color:var(--on-dark-muted);font-variant-numeric:tabular-nums;line-height:1.5;
  text-align:right;padding-top:1px;
}
/* Der Punkt auf der Schiene */
.schicht li::before{
  content:"";position:absolute;left:79px;top:8px;width:9px;height:9px;border-radius:50%;
  background:#0D1C34;border:1.5px solid rgba(200,151,63,.75);
}
.schicht b{
  display:block;font-family:var(--display);font-weight:600;font-size:17.5px;
  letter-spacing:-.012em;color:var(--on-dark);margin-bottom:5px;
}
.schicht p{margin:0;font-size:15.5px;line-height:1.55;color:var(--on-dark-muted);max-width:52ch}

/* Der Morgen: hier übernimmt wieder ein Mensch */
.schicht .schicht-mensch{padding-top:6px}
.schicht .schicht-mensch::before{
  background:var(--gold-bright);border-color:var(--gold-bright);
  width:11px;height:11px;left:78px;top:12px;
}
.schicht .schicht-mensch time{color:var(--gold-bright)}
.schicht .schicht-mensch > div{
  border-left:2px solid var(--gold-bright);padding:2px 0 2px 18px;margin-left:-18px;
}
.nachtschicht-fuss{
  margin:32px auto 0;max-width:720px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13.5px;line-height:1.55;color:var(--on-dark-muted);
}
@media (max-width:620px){
  .schicht::before{left:0}
  .schicht li{grid-template-columns:1fr;gap:4px;padding-left:22px}
  .schicht li::before{left:-4px;top:7px}
  .schicht .schicht-mensch::before{left:-5px;top:9px}
  .schicht time{text-align:left}
  .schicht .schicht-mensch > div{margin-left:0;padding-left:14px}
}

/* --- Terminbuchung (Zwei-Klick) --- */
.booking{scroll-margin-top:96px}
.booking-gate{max-width:760px;margin:0 auto}
.booking-gate{
  position:relative;overflow:hidden;text-align:center;
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(200,151,63,.10), transparent 62%),
    var(--surface);
  border:1px solid rgba(200,151,63,.4);border-radius:var(--r-l);
  padding:clamp(32px,4vw,52px) clamp(24px,3.4vw,44px);box-shadow:var(--shadow-m);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.booking-gate::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(200,151,63,.75) 28%,var(--gold-bright) 50%,rgba(200,151,63,.75) 72%,transparent);
}
.booking-eyebrow{
  font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);
}
.booking-gate h3{font-size:clamp(24px,2.6vw,32px)}
.booking-gate > p{color:var(--muted);font-size:17px;line-height:1.55;max-width:46ch}
.booking-gate .btn{margin-top:6px}
.booking-note{max-width:62ch;font-size:13.5px}
.booking-note a{color:var(--gold);text-decoration:none}
.booking-note a:hover{text-decoration:underline;text-underline-offset:3px}
.booking-frame{
  border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-m);min-height:620px;
}
.booking-frame iframe{display:block;width:100%;border:0}
.booking-fallback{margin-top:14px;text-align:center}
.booking-fallback a{color:var(--gold);text-decoration:none}
.booking-fallback a:hover{text-decoration:underline;text-underline-offset:3px}
.booking-fallback[hidden]{display:none}
.booking-frame[hidden]{display:none}
.booking-gate[hidden]{display:none}

/* Hinweis unter den Termin-Buttons */
.booking-hint{font-size:13.5px;opacity:.85;max-width:68ch;margin-inline:auto;text-wrap:balance}
.hero--dark .booking-hint{color:var(--on-dark-muted)}
.booking-hint a{color:var(--gold-bright);text-decoration:none}
.hero--dark .booking-hint a,.cta-band .booking-hint a{color:var(--gold-bright)}
.booking-hint a:hover{text-decoration:underline;text-underline-offset:3px}
.cta-band .booking-hint{color:var(--on-dark-muted)}
.center .booking-hint{text-align:center}

/* Kurze Rückmeldung zwischen Klick und geöffnetem Kalender */
.cal-warten{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(8,12,20,.42);
  -webkit-backdrop-filter:saturate(140%) blur(3px);backdrop-filter:saturate(140%) blur(3px);
}
.cal-warten[hidden]{display:none}
.cal-warten-box{
  display:flex;align-items:center;gap:12px;background:var(--surface);color:var(--text);
  font-family:var(--sans);font-size:15px;padding:16px 24px;border-radius:var(--r-pill);
  box-shadow:var(--shadow-l);
}
.cal-spinner{
  width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid rgba(200,151,63,.3);border-top-color:var(--gold-bright);
  animation:cal-dreh .7s linear infinite;
}
@keyframes cal-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cal-spinner{animation:none}}
.booking-frame iframe{display:block;width:100%;border:0}
.booking-busy{
  display:flex;align-items:center;justify-content:center;min-height:620px;
  font-size:15px;color:var(--muted);
}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* --- Landingpage --- */
.lp-header{
  position:sticky;top:0;z-index:80;background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--rule-2);
}
.lp-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* --- Footer --- */
.site-footer{
  background:var(--ground-2);padding:clamp(56px,6vw,84px) 0 34px;font-size:15px;
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(200,151,63,.5) 30%,rgba(200,151,63,.75) 50%,rgba(200,151,63,.5) 70%,transparent) 1;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--gap)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:32px}}
.footer-grid h4{font-size:14px;font-weight:600;color:var(--gold);margin:0 0 16px;letter-spacing:-.005em}
.footer-grid ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-grid a{font-size:15px;text-decoration:none;color:var(--text-2)}
.footer-grid a:hover{color:var(--gold)}
.footer-brand img{height:34px;width:auto;margin-bottom:20px}
.footer-brand p{font-size:15px;color:var(--muted);max-width:34ch}
.footer-bottom{
  margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--rule-2);
  display:flex;flex-wrap:wrap;gap:10px 28px;font-size:13.5px;color:var(--muted);align-items:center;
}
.footer-bottom a{text-decoration:none}
.footer-bottom a:hover{color:var(--gold)}
.disclaimer{margin-top:26px;font-size:13.5px;color:var(--muted);max-width:86ch;line-height:1.6}

/* --- Marktübersicht: Vergleich und Selbstcheck --- */
.vgl{width:100%;text-align:left}
.vgl-wrap{box-shadow:var(--shadow-m);border-color:rgba(200,151,63,.35)}
.vgl table{min-width:820px;font-size:15.5px}
.vgl thead th{
  background:linear-gradient(120deg,#0B1B33 0%,#16294A 55%,#1D3A66 100%);
  color:#F5F5F7;text-transform:none;letter-spacing:-.01em;font-size:14.5px;font-weight:600;
  padding:18px 16px;text-align:center;white-space:normal;border-bottom:0;
}
.vgl thead th:first-child{text-align:left;padding-left:24px}
.vgl thead th:nth-child(2){color:var(--gold-bright)}
.vgl thead th.vgl-selbst{background:linear-gradient(120deg,#1D3A66,#2F5A96);color:#fff}
.vgl tbody th{
  text-align:left;font-weight:500;color:var(--text);padding:16px 16px 16px 24px;
  border-bottom:1px solid var(--rule-2);vertical-align:middle;line-height:1.45;
}
.vgl tbody td{text-align:center;vertical-align:middle;padding:12px 10px}
.vgl tbody tr:nth-child(even){background:var(--surface-2)}
.vgl tbody tr:last-child th,.vgl tbody tr:last-child td{border-bottom:0}
.vgl td:nth-child(2){background:rgba(200,151,63,.06)}
.vgl-ja,.vgl-teil,.vgl-nein{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
.vgl-ja svg,.vgl-teil svg{width:26px;height:26px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vgl-ja svg{stroke:#2A9D5C}
.vgl-ja svg path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .55s cubic-bezier(.16,1,.3,1) .25s}
.vgl-ja svg circle{stroke-dasharray:66;stroke-dashoffset:66;transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1)}
.vgl tr.is-in .vgl-ja svg path,.vgl tr.is-in .vgl-ja svg circle,
html:not(.js-anim) .vgl-ja svg path,html:not(.js-anim) .vgl-ja svg circle{stroke-dashoffset:0}
.vgl-teil svg{stroke:var(--gold)}
.vgl-teil svg .halb{fill:var(--gold);stroke:none;opacity:.55}
.vgl-nein{color:var(--muted);font-size:20px;font-weight:500}
.vgl-nein--leise{opacity:.45}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Selbstcheck-Spalte */
.vgl-selbst{background:rgba(29,58,102,.05)}
.vgl-knopf{
  width:36px;height:36px;border-radius:50%;border:1.5px solid var(--rule);background:var(--surface);
  cursor:pointer;font:inherit;font-size:17px;font-weight:600;color:var(--muted);display:inline-grid;
  place-items:center;transition:transform .2s cubic-bezier(.32,.72,0,1),border-color .2s,background .2s,color .2s;
}
.vgl-knopf > span{grid-area:1/1;transition:opacity .2s,transform .25s cubic-bezier(.32,.72,0,1)}
.vgl-knopf .vgl-hab,.vgl-knopf .vgl-fehlt{opacity:0;transform:scale(.6)}
.vgl-knopf[data-stand="hab"]{border-color:#2A9D5C;background:rgba(42,157,92,.12);color:#2A9D5C}
.vgl-knopf[data-stand="hab"] .vgl-frage,.vgl-knopf[data-stand="fehlt"] .vgl-frage{opacity:0;transform:scale(.6)}
.vgl-knopf[data-stand="hab"] .vgl-hab{opacity:1;transform:scale(1)}
.vgl-knopf[data-stand="fehlt"]{border-color:#B0563F;background:rgba(176,86,63,.12);color:#B0563F}
.vgl-knopf[data-stand="fehlt"] .vgl-fehlt{opacity:1;transform:scale(1)}
.vgl-knopf:hover{transform:scale(1.08);border-color:var(--gold-bright)}
.vgl-knopf:active{transform:scale(.96)}
.vgl-fuss{margin-top:22px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.vgl-stand{font-size:16px;color:var(--text-2);max-width:60ch;margin:0 auto}
.vgl-stand b{color:var(--gold);font-weight:600}
.vgl-stand a{color:var(--gold);font-weight:500}
.vgl-fuss .small{max-width:76ch}
/* Zeilen erscheinen nacheinander — ohne Verschiebung, nur mit Deckkraft */
.js-anim .vgl tr.reveal{transform:none}
/* Auf dem Handy: jede Zeile eine Karte, das Kriterium als Überschrift */
@media (max-width:700px){
  .vgl table{min-width:0}
  .vgl tbody tr{padding:8px 18px 12px}
  .vgl tbody tr:nth-child(even){background:var(--surface)}
  .vgl tbody th{display:block;padding:10px 0 6px;font-size:16px;border-bottom:1px solid var(--rule-2)}
  .vgl tbody td{display:flex;align-items:center;justify-content:space-between;padding:8px 0;text-align:left;background:transparent}
  .vgl tbody td[data-label]::before{margin:0;font-size:13px;text-transform:none;letter-spacing:0;color:var(--muted);font-weight:500}
  .vgl td:nth-child(2)[data-label]::before{color:var(--gold);font-weight:600}
  .vgl-selbst{background:transparent}
}

/* --- Kästchen beim Überfahren hervorheben ---------------------------------
   Gilt für alle Kästchen der Website: Leistungskarten, Anlässe, Kennzahlen,
   Prozessschritte, Pakete, Rollenhinweise, Formular- und Terminkarte.
   Das Kästchen hebt sich an, Schatten und Rand ziehen an, die goldene
   Oberkante leuchtet auf, und ein weicher Lichtfleck folgt dem Zeiger.
   Nur auf Geräten mit Zeiger — auf dem Handy bleibt alles ruhig.           */
.card,.step,.stat,.plan,.role,.formcard,.booking-gate{position:relative}
.step,.plan,.role,.formcard{overflow:hidden}
/* Goldene Oberkante auch für Schritte, Pakete, Rollenhinweis und Formular —
   unsichtbar, bis der Zeiger darüber liegt */
.step::before,.plan::before,.formcard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;opacity:0;
  background:linear-gradient(90deg,var(--gold-bright),rgba(200,151,63,.25));
  transition:opacity .3s ease;
}
.plan--featured::before{opacity:.55}
/* Der Lichtfleck */
.card::after,.step::after,.stat::after,.plan::after,.role::after,.formcard::after,.booking-gate::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(200,151,63,.16), transparent 62%);
  transition:opacity .35s ease;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card::after,:root:not([data-theme="light"]) .step::after,:root:not([data-theme="light"]) .stat::after,
  :root:not([data-theme="light"]) .plan::after,:root:not([data-theme="light"]) .role::after,:root:not([data-theme="light"]) .formcard::after,
  :root:not([data-theme="light"]) .booking-gate::after{
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(216,174,96,.13), transparent 62%);
  }
}
:root[data-theme="dark"] .card::after,:root[data-theme="dark"] .step::after,:root[data-theme="dark"] .stat::after,
:root[data-theme="dark"] .plan::after,:root[data-theme="dark"] .role::after,:root[data-theme="dark"] .formcard::after,
:root[data-theme="dark"] .booking-gate::after{
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(216,174,96,.13), transparent 62%);
}
/* Inhalt liegt über dem Lichtfleck */
.card > *,.step > *,.stat > *,.plan > *,.role > *,.formcard > *,.booking-gate > *{position:relative;z-index:1}

@media (hover:hover) and (pointer:fine){
  .card,.step,.stat,.plan,.role,.formcard,.booking-gate{
    transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s ease,border-color .3s ease;
  }
  .card:hover,.step:hover,.stat:hover,.plan:hover,.role:hover,.formcard:hover,.booking-gate:hover,
  .js-anim .reveal.is-in:is(.card,.step,.stat,.plan,.role,.formcard,.booking-gate):hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-l),0 0 0 1px rgba(200,151,63,.28);
    border-color:rgba(200,151,63,.65);
  }
  .card:hover::before,.step:hover::before,.plan:hover::before,.role:hover::before,.formcard:hover::before{opacity:1}
  .card:hover::after,.step:hover::after,.stat:hover::after,.plan:hover::after,.role:hover::after,
  .formcard:hover::after,.booking-gate:hover::after{opacity:1}
  /* Kleine Details ziehen mit */
  .card:hover h3,.step:hover h3{color:var(--gold)}
  .step:hover .step-n{transform:scale(1.06)}
  .step-n{transition:transform .3s cubic-bezier(.32,.72,0,1)}
  .stat:hover b{transform:scale(1.04)}
  .stat b{transition:transform .3s cubic-bezier(.32,.72,0,1)}
  .card h3,.step h3{transition:color .25s ease}
}
/* Nach dem Hereingleiten gilt die kurze Kurve, sonst reagiert das Kästchen
   auf den Zeiger erst nach einer Sekunde */
.js-anim .reveal.is-in.is-done{
  transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s ease,border-color .3s ease;
}
@media (prefers-reduced-motion:reduce){
  .card:hover,.step:hover,.stat:hover,.plan:hover,.role:hover,.formcard:hover,.booking-gate:hover,
  .js-anim .reveal.is-in:is(.card,.step,.stat,.plan,.role,.formcard,.booking-gate):hover{transform:none}
}

/* --- Mandanten-Laufband (Startseite) --- */
.mandanten{padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px);overflow:hidden}
.mandanten-titel{
  font-family:var(--display);font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;
  text-align:center;margin:0 0 clamp(26px,3.4vw,40px);color:var(--text);
}
.laufband{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
/* Die Spur trägt beide Reihen und wandert um genau ihre halbe Breite */
.laufband-spur{display:flex;width:max-content;animation:laufband 48s linear infinite;will-change:transform}
.laufband:hover .laufband-spur{animation-play-state:paused}
@keyframes laufband{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.laufband-reihe{
  list-style:none;margin:0;padding:0 11px;display:flex;gap:22px;flex:none;
}
.mandant{
  flex:none;display:flex;align-items:center;justify-content:center;
  height:112px;padding:14px 26px;background:#FFFFFF;border:1px solid var(--rule);border-radius:var(--r-m);
  box-shadow:var(--shadow-s);transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s ease,border-color .3s ease;
}
.mandant img{height:80px;width:auto;max-width:240px;object-fit:contain;border-radius:8px;display:block}
.mandant:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(200,151,63,.55)}
@media (max-width:700px){
  .mandant{height:92px;padding:12px 20px}
  .mandant img{height:64px;max-width:190px}
  .laufband-spur{animation-duration:36s}
}
/* Bewegung reduzieren: Reihe steht, bricht um, zweite Reihe verschwindet */
@media (prefers-reduced-motion:reduce){
  .laufband{mask-image:none;-webkit-mask-image:none}
  .laufband-spur{width:auto;animation:none;justify-content:center}
  .laufband-reihe{flex-wrap:wrap;justify-content:center;padding:0 22px}
  .laufband-reihe[aria-hidden="true"]{display:none}
}

/* --- Sanftes Einblenden beim Scrollen ---
   Der versteckte Zustand gilt nur, wenn JavaScript läuft (Klasse js-anim).
   Ohne JavaScript ist der Inhalt normal sichtbar. --- */
.js-anim .reveal{
  opacity:0;transform:translate3d(0,46px,0);will-change:opacity,transform;
}
.js-anim .reveal.is-in{
  opacity:1;transform:translate3d(0,0,0);will-change:auto;
  /* Die Deckkraft zieht schneller an als die Bewegung: Das Element ist schon
     sichtbar, während es noch nach oben gleitet — es wirkt gewischt, nicht
     eingeblendet. Die Kurve bremst lange aus, deshalb kein Aufploppen. */
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
             transform 1.05s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion:reduce){.js-anim .reveal{opacity:1;transform:none}}

/* --- Utilities --- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:22px;top:12px;z-index:100;background:var(--navy);color:var(--ground);padding:12px 20px;border-radius:var(--r-pill)}