:root{
    --black:#1D1D1F; --white:#FFFFFF; --bg-soft:#F5F5F7; --border:#D2D2D7; --muted:#6E6E73;
    --teal:#2B8A9E; --teal-logo:#417782; --teal-deep:#1A6A7A; --teal-100:#E1EFF2; --teal-300:#CADFE3; --teal-900:#1A6A7A;
    --radius:14px; --maxw:1060px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;font-family:var(--font);color:var(--black);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  h1,h2,h3{letter-spacing:-0.02em;line-height:1.1;font-weight:700;}
  h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 18px;}
  h3{font-size:20px;margin:0 0 8px;font-weight:600;}
  p{margin:0 0 16px;}
  a{color:var(--teal-deep);text-decoration:none;}
  .muted{color:var(--muted);}
  .hl{color:var(--teal-deep);font-weight:700;}

  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--border);}
  .nav{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;min-height:64px;padding:9px 24px;}
  .nav .logo{flex:0 0 auto;order:1;}
  .nav img{height:22px;display:block;}
  .nav-links{display:flex;align-items:center;gap:22px;margin-left:auto;order:2;}
  .nav-links a{color:var(--black);font-size:15px;}
  .nav-links a:hover{color:var(--teal);}
  .cta{order:3;white-space:nowrap;}
  .lang{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;overflow:hidden;font-size:13px;font-weight:600;letter-spacing:0.03em;}
  .lang .cur,.lang a{display:flex;align-items:center;justify-content:center;padding:6px 11px;line-height:1;}
  .lang .cur{background:var(--teal-100);color:var(--teal-logo);}

  .btn{display:inline-block;font-size:16px;font-weight:600;line-height:1;padding:15px 24px;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease;}
  .btn-primary{background:var(--teal);color:#fff;}
  .btn-primary:hover{background:var(--teal-deep);}
  .btn-ghost{background:transparent;color:var(--black);border-color:var(--border);}
  .btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
  .btn-sm{padding:11px 18px;font-size:15px;}

  section{padding:84px 0;}
  .soft{background:var(--bg-soft);}
  .kicker{display:inline-block;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal-logo);margin-bottom:18px;}
  .lead{font-size:19px;color:var(--muted);max-width:62ch;}

  .hero{padding:96px 0 76px;}
  .hero h1{font-size:clamp(36px,5.4vw,62px);margin:0 0 22px;max-width:none;}
  .hero .sub{font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:54ch;margin-bottom:34px;}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

  .sail{background:var(--black);color:#fff;}
  .sail h2{color:#fff;max-width:none;}
  .sail .lead{color:#C9C9CE;font-size:21px;}
  .sail .agnostic{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.16);color:#C9C9CE;font-size:17px;max-width:64ch;}
  .sail .agnostic strong{color:#fff;font-weight:600;}

  .layers{counter-reset:layer;margin-top:8px;max-width:760px;}
  .layer{display:flex;gap:20px;padding:22px 0;border-top:1px solid var(--border);}
  .layer:first-child{border-top:none;}
  .layer .num{counter-increment:layer;flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--teal-100);color:var(--teal-logo);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px;}
  .layer .num::before{content:counter(layer);}
  .layer h3{margin-bottom:4px;}
  .layer p{margin:0;color:var(--muted);}

  /* dashboard mock */
  .dash-frame{margin-top:36px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(29,29,31,0.08);}
  .dash-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;background:var(--bg-soft);border-bottom:1px solid var(--border);}
  .dot{width:11px;height:11px;border-radius:50%;background:#D2D2D7;}
  .dash-url{margin-left:14px;font-size:13px;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:7px;padding:4px 12px;}
  .dash-body{padding:30px 32px 34px;}
  .dash-hello{font-size:22px;font-weight:700;margin:0 0 2px;letter-spacing:-0.02em;}
  .dash-date{color:var(--muted);font-size:14px;margin-bottom:24px;}
  .dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;}
  .panel{background:var(--bg-soft);border-radius:var(--radius);padding:20px 22px;}
  .panel h4{margin:0 0 14px;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .brief-item{display:flex;gap:11px;padding:9px 0;font-size:15px;border-top:1px solid var(--border);}
  .brief-item:first-of-type{border-top:none;padding-top:0;}
  .brief-item .ic{color:var(--teal);flex:0 0 auto;font-weight:700;}
  .task{display:flex;align-items:center;gap:11px;padding:10px 0;font-size:15px;border-top:1px solid var(--border);}
  .task:first-of-type{border-top:none;padding-top:0;}
  .check{width:18px;height:18px;border-radius:6px;border:1.6px solid var(--border);flex:0 0 auto;}
  .check.done{background:var(--teal);border-color:var(--teal);position:relative;}
  .check.done::after{content:"✓";color:#fff;font-size:12px;position:absolute;top:-1px;left:3px;}
  .task.done span{color:var(--muted);text-decoration:line-through;}
  .badges{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
  .badge{font-size:13px;background:var(--teal-100);color:var(--teal-logo);padding:6px 12px;border-radius:999px;font-weight:600;}

  /* example cards */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:14px;}
  .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;}
  .card .tag{font-size:13px;font-weight:600;color:var(--teal-logo);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px;display:block;}
  .card p{margin:0;color:var(--muted);font-size:15.5px;}

  /* lock-in native diagram */
  .lockin-stack{margin-top:32px;}
  .li-swap{position:relative;border:1.6px dashed var(--teal-300);border-radius:20px;padding:32px 22px 22px;display:flex;flex-direction:column;gap:13px;}
  .li-tag{position:absolute;top:-11px;left:26px;background:var(--white);padding:2px 14px;font-size:11.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal-deep);}
  .li-layer{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:18px;}
  .li-ico{width:46px;height:46px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--black);}
  .li-ico svg{width:24px;height:24px;}
  .li-body{flex:1;min-width:0;}
  .li-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
  .li-eyebrow.light{color:rgba(255,255,255,0.82);}
  .li-body h3{font-size:18px;margin:0;font-weight:600;}
  .li-status{flex:none;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;background:var(--teal-100);color:var(--teal-deep);white-space:nowrap;}
  .li-status.soft{background:#FBF6E6;color:#8A6B10;}
  .li-models{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
  .m-chip{border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:500;color:#515156;background:#fff;}
  .m-chip.now{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:650;}
  .li-stands{display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 0;}
  .li-arrow{color:var(--teal);font-size:24px;font-weight:700;line-height:1;}
  .li-pill{border-radius:999px;padding:5px 15px;font-size:12.5px;font-weight:600;background:#fff;border:1px solid var(--teal-300);color:var(--teal-deep);}
  .li-foundation{background:var(--teal);border-radius:18px;padding:24px 28px;display:flex;gap:22px;align-items:center;}
  .li-emark{width:54px;height:54px;flex:none;padding:11px;background:rgba(255,255,255,0.16);border-radius:14px;}
  .li-emark svg{width:100%;height:100%;display:block;}
  .li-fbody{flex:1;}
  .li-fbody h3{color:#fff;font-size:23px;font-weight:700;margin:2px 0 0;letter-spacing:-0.01em;}
  .li-promises{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;}
  .li-promises span{background:rgba(255,255,255,0.16);border-radius:999px;padding:5px 13px;color:#fff;font-size:12.5px;font-weight:500;}
  .li-owns{flex:none;align-self:center;background:#fff;color:var(--teal-deep);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:700;}
  .li-closer{text-align:center;font-size:18px;font-weight:600;margin:26px auto 0;max-width:56ch;}
  .footnote{margin-top:24px;font-size:14px;color:var(--muted);background:var(--bg-soft);border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:10px;padding:16px 18px;max-width:none;}

  /* offer: audit bar + ways */
  .audit-bar{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:8px;}
  .audit-step{background:#fff;padding:26px 28px;}
  .audit-step.highlight{background:var(--teal-100);}
  .audit-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
  .audit-head h3{margin:0;font-size:20px;}
  .audit-price{font-size:14px;font-weight:700;color:var(--teal-deep);background:#fff;border:1px solid var(--teal-300);border-radius:999px;padding:3px 13px;white-space:nowrap;}
  .audit-step p{margin:0;color:var(--muted);font-size:15px;}
  .ways-intro{margin:34px 0 14px;font-size:17px;font-weight:600;}
  .ways{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .way{border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;background:#fff;display:flex;flex-direction:column;}
  .way .name{font-size:21px;font-weight:700;letter-spacing:-0.01em;margin-bottom:4px;}
  .way .role{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;}
  .way p{margin:0;color:var(--muted);font-size:15.5px;}
  .way-price{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);font-size:18px;font-weight:700;color:var(--black);}
  .way-price .mo{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:3px;}

  /* person */
  .person{display:flex;gap:32px;align-items:center;max-width:820px;}
  .person .photo{flex:0 0 auto;width:152px;height:152px;border-radius:50%;overflow:hidden;border:1px solid var(--border);}
  .person .photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .person .bio p{margin:0 0 14px;font-size:17px;}
  .person .bio p:last-child{margin-bottom:0;}

  /* final cta */
  .final{text-align:center;}
  .final h2{max-width:20ch;margin:0 auto 16px;}
  .final .lead{margin:0 auto 30px;}

  /* footer */
  footer{background:var(--black);color:#C9C9CE;padding:54px 0 40px;}
  .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;}
  .foot-logo{height:56px;margin-bottom:14px;display:block;}
  .foot a{color:#fff;}
  .foot .col{font-size:15px;line-height:1.9;}
  .foot .meta{font-size:13px;color:#8A8A8F;margin-top:6px;}

  @media (max-width:820px){
    section{padding:60px 0;}
    .dash-grid{grid-template-columns:1fr;}
    .cards{grid-template-columns:1fr;}
    .audit-bar{grid-template-columns:1fr;}
    .ways{grid-template-columns:1fr;}
    .li-layer{flex-wrap:wrap;}
    .li-foundation{flex-direction:column;text-align:center;align-items:center;}
    .person{flex-direction:column;text-align:center;align-items:center;}
    .nav{gap:10px 18px;padding:11px 24px;}
    .cta{order:2;margin-left:auto;}
    .nav-links{order:3;flex-basis:100%;margin-left:0;justify-content:flex-start;gap:20px;}
    .nav-links .lang{margin-left:auto;}
  }

.lang a{color:var(--muted);text-decoration:none;}
.lang a:hover{color:var(--teal);}

.lang a{color:var(--muted);text-decoration:none;}
.lang a:hover{color:var(--teal);}

/* Angebot: dezente Farb-Akzente je Stufe (Kategorie-Palette laut Brand Guide) */
.ways .way:nth-child(1){border-top:4px solid #52BE80;}
.ways .way:nth-child(1) .role{color:#2E8A52;}
.ways .way:nth-child(2){border-top:4px solid #2B8A9E;}
.ways .way:nth-child(2) .role{color:#1A6A7A;}
.ways .way:nth-child(3){border-top:4px solid #E8B838;}
.ways .way:nth-child(3) .role{color:#A87D10;}

.hero h1 .hl{color:var(--teal);}

/* ===== Dark Mode (folgt der System-Einstellung) ===== */
/* ---------- Dark Mode (.theme-dark, vom Theme-Script gesetzt; etwas hellere Grautöne) ---------- */
.theme-dark{
  --white:#1E1E22;
  --bg-soft:#27272C;
  --border:#3A3A42;
  --muted:#A6A6AC;
  --teal-100:#1D434D;
  --teal-300:#2F5C68;
  --teal-logo:#85CFDC;
  --teal-deep:#74BBC9;
}
.theme-dark body{color:#ECECEE;}
.theme-dark h1,.theme-dark h2,.theme-dark h3,.theme-dark h4,.theme-dark .dash-hello,.theme-dark .li-fbody h3,.theme-dark .way .name,.theme-dark .audit-head h3,.theme-dark .nav-links a{color:#ECECEE;}
.theme-dark .brief-item span,.theme-dark .task span{color:#CFCFD4;}
.theme-dark .btn-ghost{border-color:#43434C;color:#ECECEE;}
.theme-dark .sail{background:#161619;}
.theme-dark footer{background:#161619;}
.theme-dark header{background:rgba(30,30,34,0.88);}
.theme-dark .card,.theme-dark .way,.theme-dark .dash-frame,.theme-dark .panel,.theme-dark .li-layer,.theme-dark .audit-step,.theme-dark .m-chip,.theme-dark .li-pill{background:#2C2C33;}
.theme-dark .dash-bar{background:#3A3A42;}
.theme-dark .dot{background:#56565E;}
.theme-dark .dash-url{background:#1E1E22;}
.theme-dark .li-ico{background:#35353D;color:#ECECEE;}
.theme-dark .li-tag{background:#1E1E22;}
.theme-dark .audit-price{background:#1D434D;}
.theme-dark .li-foundation{background:#2B8A9E;}
.theme-dark .li-status.soft{background:#3D3826;color:#D8B86A;}
.theme-dark .hero h1 .hl{color:#4FC2D6;}
.theme-dark .way-price{color:#ECECEE;}
.theme-dark .check{border-color:#56565E;}

/* ---------- Theme-Umschalter (Hell / Auto / Dunkel) ---------- */
.theme-toggle{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;overflow:hidden;}
.theme-toggle button{display:flex;align-items:center;justify-content:center;width:32px;height:27px;border:none;background:transparent;cursor:pointer;color:var(--muted);padding:0;}
.theme-toggle button svg{width:15px;height:15px;display:block;}
.theme-toggle button:hover{color:var(--teal);}
.theme-toggle button.active{background:var(--teal-100);color:var(--teal-logo);}

/* ---------- Logo je nach Theme ---------- */
.logo .logo-dark{display:none;}
.theme-dark .logo .logo-light{display:none;}
.theme-dark .logo .logo-dark{display:block;}