/* ==========================================================
   KUPERA — Landingpage
   Einfach. Durchdacht. Nützlich.
   ========================================================== */

:root{
  color-scheme: light;

  --ink:      #0A1920;
  --ink-2:    #16323D;
  --body:     #53646B;
  --muted:    #7C8D93;
  --teal:     #0C7C6B;
  --teal-2:   #0F9581;
  --teal-bg:  #E7F3EF;
  --teal-br:  #CFE6DF;
  --lime:     #A8D62B;
  --cyan:     #00B2C6;
  --deep:     #063B55;

  --paper:    #F5F7F4;
  --paper-2:  #EDF1EA;
  --surface:  #FFFFFF;
  --line:     #E2E7E0;
  --line-2:   #EFF2EC;

  --grad: linear-gradient(90deg, var(--lime), var(--teal) 42%, var(--cyan) 74%, var(--deep));

  --font-display: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1200px;
  --pad: clamp(60px, 6.6vw, 92px);
  --r: 16px;
  --r-lg: 20px;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--font-text); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
a{ color:inherit; }
p{ margin:0; text-wrap:pretty; }

h1,h2,h3,h4{
  font-family:var(--font-display); color:var(--ink); margin:0; font-weight:700;
  letter-spacing:-.028em; line-height:1.08; text-wrap:balance;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
section{ scroll-margin-top:82px; }
.band{ padding-block:var(--pad); }
.band-tint{ background:var(--paper-2); }
.band-white{ background:var(--surface); border-block:1px solid var(--line); }
.cv{ content-visibility:auto; contain-intrinsic-size:auto 700px; }

/* Badge-Label */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.005em; color:var(--teal);
  background:var(--teal-bg); border:1px solid var(--teal-br);
  padding:6px 14px 6px 11px; border-radius:100px;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none; }
.on-dark .badge{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.15); color:#7FDCC3; }
.on-dark .badge::before{ background:var(--lime); }

.h-sec{ font-size:clamp(27px,3.1vw,40px); margin-top:18px; }
.lead{ font-size:17px; line-height:1.6; margin-top:16px; }
.sec-head{ max-width:640px; }
.sec-head.center{ margin-inline:auto; text-align:center; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:14.5px; letter-spacing:-.004em;
  padding:13px 22px; border-radius:11px; text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn svg{ flex:none; transition:transform .16s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:#0A6A5C; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#132E38; }
.btn-lime{ background:var(--lime); color:#16220A; }
.btn-lime:hover{ background:#B5E03A; }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:#C4D0C4; }
.btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.btn-outline:hover{ border-color:#fff; }
.btn-sm{ padding:10px 17px; font-size:13.5px; border-radius:10px; }

:where(a,button,summary):focus-visible{ outline:2.5px solid var(--teal); outline-offset:3px; border-radius:10px; }

/* ---------------- Logo / Header ---------------- */
.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.logo .mark{ width:34px; height:34px; flex:none; }
.logo .word{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.055em; color:var(--ink); line-height:1; }
.logo .claim{ display:block; font-family:var(--font-text); font-weight:400; font-size:7.6px; letter-spacing:.13em; color:var(--muted); margin-top:4px; }

.site-header{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:80; background:var(--paper); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.site-header.stuck{ border-bottom-color:var(--line); }
.nav{ display:flex; align-items:center; gap:22px; height:70px; }
.nav-links{ display:flex; gap:2px; margin-left:auto; }
.nav-links a{ font-size:14px; font-weight:500; color:var(--ink-2); text-decoration:none; padding:8px 12px; border-radius:9px; transition:background-color .16s ease; }
.nav-links a:hover{ background:var(--paper-2); }
.nav-toggle{ display:none; margin-left:auto; background:var(--surface); border:1px solid var(--line); width:44px; height:44px; border-radius:11px; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); }
.burger{ position:relative; display:block; width:20px; height:14px; }
.burger i{
  position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor;
  transition:top .26s cubic-bezier(.3,.9,.3,1), transform .26s cubic-bezier(.3,.9,.3,1), opacity .16s ease;
}
.burger i:nth-child(1){ top:0; }
.burger i:nth-child(2){ top:6px; }
.burger i:nth-child(3){ top:12px; }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(1){ top:6px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(2){ opacity:0; transform:scaleX(.2); }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(3){ top:6px; transform:rotate(-45deg); }
#mobile-menu{ border-top:1px solid var(--line); background:var(--surface); padding:12px 24px 24px; }
#mobile-menu a:not(.btn){ display:block; padding:13px 2px; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:17px; border-bottom:1px solid var(--line-2); }
#mobile-menu .btn{ width:100%; margin-top:18px; }

/* ================= HERO ================= */
.hero{ position:relative; overflow:hidden; padding-block:58px 0; }
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(118% 76% at 46% 16%, rgba(245,247,244,0) 16%, var(--paper) 70%),
    radial-gradient(48% 50% at 88% 2%, rgba(0,178,198,.13), rgba(168,214,43,.10) 48%, rgba(168,214,43,0) 100%),
    linear-gradient(to right, rgba(10,25,32,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,25,32,.045) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 64px 64px, 64px 64px;
}
.hero .wrap{ position:relative; z-index:2; }
.hero h1{ font-size:clamp(35px,4.8vw,60px); line-height:1.04; letter-spacing:-.036em; margin-top:20px; max-width:16ch; }
.hero h1 .gr{ color:var(--teal); }
.hero-main{ display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); gap:50px; align-items:start; margin-top:32px; }
.hero-sub{ font-size:17.5px; color:var(--ink-2); max-width:25em; line-height:1.55; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:11px; margin-top:24px; }
.hero-hand{ display:inline-block; margin-top:20px; font-family:"Caveat",cursive; font-weight:700; font-size:19px; color:var(--teal); transform:rotate(-2.5deg); }
.hero-trust{ list-style:none; margin:32px 0 0; padding:24px 0 0; border-top:1px solid var(--line); display:grid; gap:13px; }
.hero-trust li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); font-weight:500; }
.hero-trust svg{ color:var(--teal); flex:none; }

.chips{ display:flex; justify-content:center; gap:10px; margin-bottom:-16px; position:relative; z-index:3; }
.chip{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:9px 13px 9px 10px; display:flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:11.5px; color:var(--ink); line-height:1.25; max-width:180px;
}
.ft{
  width:28px; height:34px; border-radius:5px; flex:none; position:relative;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px;
  font-family:var(--font-display); font-size:7px; font-weight:700; color:#fff; letter-spacing:.03em;
}
.ft::before{ content:""; position:absolute; top:0; right:0; border-width:0 8px 8px 0; border-style:solid; border-color:rgba(255,255,255,.6) transparent; }
.ft-x{ background:#1D7044; } .ft-p{ background:#C8342B; } .ft-w{ background:#1B5EBE; } .ft-k{ background:#0C7C6B; }

.browser{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 24px 48px -28px rgba(10,25,32,.32); }
.browser-bar{ display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line-2); background:#FBFCFA; }
.dot{ width:8px; height:8px; border-radius:50%; background:#DEE5DE; flex:none; }
.url{ margin-left:8px; flex:1; background:var(--paper); border-radius:8px; padding:5px 12px; font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.url svg{ color:var(--teal); flex:none; }
.browser-body{ padding:20px 20px 22px; }
.bb-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.bb-title{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); }
.bb-tag{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--teal); background:var(--teal-bg); padding:5px 9px; border-radius:7px; }
.kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.kpi{ background:var(--paper); border:1px solid var(--line-2); border-radius:12px; padding:12px 13px; min-width:0; }
.kpi span{ display:block; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.kpi strong{ display:block; font-family:var(--font-display); font-size:17px; color:var(--ink); font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; }
.kpi.pos strong{ color:var(--teal); }
.bb-cols{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; margin-top:16px; }
.chart{ display:flex; align-items:stretch; gap:6px; height:104px; }
.bar{ flex:1 1 0; min-width:0; border-radius:5px; background:var(--paper-2); position:relative; }
.bar i{ position:absolute; inset:auto 0 0 0; border-radius:5px; background:var(--teal-2); }
.bar.hi i{ background:var(--lime); }
.chart-axis{ display:flex; gap:6px; margin-top:8px; }
.chart-axis span{ flex:1 1 0; min-width:0; text-align:center; font-size:9.5px; color:var(--muted); }
.goals{ background:var(--paper); border:1px solid var(--line-2); border-radius:12px; padding:13px; }
.goals h4{ font-size:12px; line-height:1.25; letter-spacing:-.02em; }
.goals ul{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.goals li{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-2); }
.tick{ width:14px; height:14px; border-radius:4px; background:var(--teal); display:grid; place-items:center; flex:none; }

/* ================= LAUFBAND ================= */
.ticker{ background:var(--ink); color:#fff; overflow:hidden; position:relative; padding-block:15px; margin-top:52px; }
.ticker-track{ display:flex; width:max-content; will-change:transform; }
@media (prefers-reduced-motion:no-preference){ .ticker-track{ animation:slide 64s linear infinite; } }
@keyframes slide{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.ticker-track > div{ display:flex; align-items:center; flex:none; }
.ticker span{ font-family:var(--font-display); font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; padding-inline:22px; white-space:nowrap; }
.ticker b{ width:5px; height:5px; border-radius:50%; background:var(--lime); flex:none; }
.ticker b:nth-of-type(2n){ background:var(--cyan); }

/* ================= FEATURE-KARTEN ================= */
.features{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:44px; }
.grad-br{
  border:1px solid transparent;
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(150deg, rgba(168,214,43,.5), rgba(0,178,198,.4) 48%, var(--line) 80%) border-box;
}
.feat{ border-radius:var(--r-lg); padding:20px 20px 24px; display:flex; flex-direction:column; }
.demo{ background:var(--paper); border:1px solid var(--line-2); border-radius:12px; padding:15px; height:164px; display:flex; flex-direction:column; justify-content:center; gap:9px; }
.d-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border:1px solid var(--line-2); border-radius:9px; padding:9px 11px; font-size:12px; color:var(--ink-2); }
.d-row .v{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.d-row.focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(12,124,107,.1); }
.d-row.sum{ background:var(--teal-bg); border-color:var(--teal-br); color:var(--teal); }
.d-row.sum .v{ color:var(--teal); }
.d-eq{ width:17px; height:17px; border-radius:5px; background:var(--teal); color:#fff; display:grid; place-items:center; font-size:10px; font-weight:700; font-family:var(--font-display); flex:none; }
.d-chip{ display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:8px 11px; font-size:11.5px; color:var(--ink-2); }
.d-chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.d-arrow{ display:flex; justify-content:center; color:#BCC8BD; }
.d-bars{ display:flex; align-items:flex-end; gap:6px; height:58px; }
.d-bars i{ flex:1; border-radius:4px; background:var(--paper-2); align-self:stretch; position:relative; }
.d-bars i::after{ content:""; position:absolute; inset:auto 0 0 0; border-radius:4px; background:var(--teal-2); height:var(--h); transition:height .35s cubic-bezier(.3,.9,.3,1); }
.feat:hover .d-bars i::after{ height:var(--h2, var(--h)); }
.d-bars i.hi::after{ background:var(--lime); }
.d-cap{ display:flex; align-items:center; justify-content:space-between; font-size:10.5px; color:var(--muted); }
.feat h3{ font-size:19px; margin-top:20px; letter-spacing:-.026em; }
.feat p{ margin-top:8px; font-size:14.8px; line-height:1.55; }

/* ================= MISSION ================= */
.mission{ background:var(--ink); color:#A9BFC4; position:relative; overflow:hidden; text-align:center; }
.mission::before{ content:""; position:absolute; inset:0; background:radial-gradient(44% 58% at 50% 42%, rgba(0,178,198,.18), rgba(0,178,198,0) 100%); pointer-events:none; }
.mission .wrap{ position:relative; z-index:2; }
.mission h2{ color:#fff; font-size:clamp(25px,3.2vw,40px); margin-top:20px; max-width:20ch; margin-inline:auto; line-height:1.14; }
.mission h2 em{ font-style:normal; color:var(--lime); }
.mission p{ margin-top:18px; font-size:16.5px; max-width:46ch; margin-inline:auto; }
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:46px; }
.stat{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:22px 20px; }
.stat strong{ display:block; font-family:var(--font-display); font-weight:700; color:#fff; font-size:20px; letter-spacing:-.024em; }
.stat span{ display:block; margin-top:6px; font-size:13.5px; color:#8FA8AE; }

/* ================= ANGEBOT / SHOWCASE ================= */
[hidden]{ display:none !important; }

.showcase{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:50px; align-items:start; margin-top:44px; }

.tabs{ display:grid; gap:8px; }
.tab{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:13px 15px; cursor:pointer; color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:14.5px; letter-spacing:-.016em;
  transition:border-color .16s ease, background-color .16s ease;
}
.tab small{ display:block; font-family:var(--font-text); font-weight:400; font-size:12.5px; color:var(--muted); margin-top:2px; letter-spacing:0; }
.tab:hover{ border-color:#C4D0C4; }
.tab.is-on{ border-color:var(--teal); background:var(--teal-bg); }
.tab.is-on small{ color:var(--teal); }
.tab .ft{ width:26px; height:32px; font-size:6.5px; }

.panels{ position:relative; min-height:352px; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px 22px; }
.pn-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line-2); }
.pn-title{ font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--ink); letter-spacing:-.024em; }
.pn-tag{ font-size:9px; font-weight:700; letter-spacing:.09em; padding:4px 8px; border-radius:6px; flex:none; }
.pn-tag.xls{ background:#E7F3EB; color:#1D7044; }
.pn-tag.pdf{ background:#FBEAE8; color:#B4322A; }
.pn-tag.doc{ background:#E9EFFB; color:#1B4FA8; }
.pn-tag.pln{ background:var(--teal-bg); color:var(--teal); }

/* --- Rechner mit Schiebereglern --- */
.calc{ display:grid; gap:16px; margin-top:18px; }
.cfield label{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13px; color:var(--body); }
.cfield output{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; margin-top:11px;
  border-radius:100px; cursor:pointer; outline-offset:6px;
  background:linear-gradient(90deg, var(--teal) 0 var(--p,50%), var(--paper-2) var(--p,50%) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--teal); box-shadow:0 1px 4px rgba(10,25,32,.22); cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--teal);
  box-shadow:0 1px 4px rgba(10,25,32,.22); cursor:grab;
}
.calc-static{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted); padding-top:2px; }
.calc-static b{ font-family:var(--font-display); font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.calc-res{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--teal-bg); border:1px solid var(--teal-br); border-radius:13px; padding:15px 18px;
}
.calc-res span{ font-size:13.5px; color:var(--teal); font-weight:500; }
.calc-res strong{ font-family:var(--font-display); font-weight:700; font-size:clamp(23px,2.5vw,30px); color:var(--teal); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.formula{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); }
.formula b{ width:18px; height:18px; border-radius:5px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-size:10px; flex:none; }
.try{ display:inline-flex; align-items:center; gap:7px; margin-top:2px; font-size:12.5px; color:var(--teal); font-weight:500; }
.try svg{ flex:none; }

/* --- Checkliste --- */
.p-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:11px; }
.p-list li{ display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--ink-2); }
.p-list li.off{ color:var(--muted); }
.cbox{ width:17px; height:17px; border-radius:5px; border:1.5px solid #D2DAD1; flex:none; }
.cbox.on{ background:var(--teal); border-color:var(--teal); display:grid; place-items:center; }
.p-foot{ margin-top:18px; padding-top:13px; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); }
.p-prog{ width:110px; height:6px; border-radius:100px; background:var(--paper-2); overflow:hidden; }
.p-prog i{ display:block; height:100%; width:44%; border-radius:100px; background:var(--teal); }

/* --- Word-Dokument --- */
.doc{ margin-top:18px; }
.doc h5{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); margin:0 0 14px; letter-spacing:-.02em; }
.doc .ln{ height:9px; border-radius:100px; background:var(--paper-2); margin-bottom:10px; }
.doc .ln.s{ width:62%; }
.doc .ln.m{ width:88%; }
.doc .fld{
  display:inline-flex; align-items:center; gap:8px; background:#EBF2FB; border:1px dashed #A9C2EB;
  border-radius:8px; padding:7px 11px; font-size:12.5px; color:#1B4FA8; margin-bottom:12px;
}
.doc .sig{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line-2); display:flex; align-items:flex-end; justify-content:space-between; }
.doc .sig .line{ width:140px; height:1px; background:#C6D0C6; }
.doc .sig span{ font-size:11px; color:var(--muted); }

/* --- Wochenplaner --- */
.week{ margin-top:18px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.week .wd{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:center; font-weight:600; padding-bottom:4px; }
.week .cell{ background:var(--paper); border:1px solid var(--line-2); border-radius:9px; min-height:74px; padding:6px; display:grid; gap:4px; align-content:start; }
.week .ev{ height:15px; border-radius:4px; font-size:8.5px; color:#fff; display:flex; align-items:center; padding-inline:5px; overflow:hidden; white-space:nowrap; }
.ev-a{ background:var(--teal); } .ev-b{ background:#5FA92E; } .ev-c{ background:var(--cyan); } .ev-d{ background:var(--deep); }
.week-foot{ margin-top:14px; display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--muted); }
.week-foot i{ width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px; }


/* ================= THEMENWELTEN (Slider) ================= */
.sl-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px; }
.sl-nav{ display:flex; gap:9px; }
.sl-btn{
  width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--surface);
  display:grid; place-items:center; cursor:pointer; color:var(--ink);
  transition:border-color .16s ease, color .16s ease, opacity .16s ease;
}
.sl-btn:hover{ border-color:var(--teal); color:var(--teal); }
.sl-btn:disabled{ opacity:.32; cursor:default; border-color:var(--line); color:var(--ink); }
@media (max-width:640px){ .sl-btn{ width:40px; height:40px; border-radius:11px; } .sl-nav{ margin-top:4px; } }

.wrail{
  display:flex; gap:16px; margin-top:34px; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:4px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.wrail::-webkit-scrollbar{ display:none; }
.wcard{
  flex:0 0 clamp(268px, 29%, 324px); scroll-snap-align:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; text-decoration:none; display:flex; flex-direction:column;
  transition:border-color .16s ease;
}
.wcard:hover{ border-color:#C0D0C1; }
.wprev{
  height:146px; background:var(--paper); border-bottom:1px solid var(--line-2);
  padding:16px 17px; display:flex; flex-direction:column; justify-content:center;
}
.wbody{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.wbody .t-ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--teal-bg); color:var(--teal); transition:background-color .16s ease, color .16s ease; }
.wcard:hover .t-ic{ background:var(--teal); color:#fff; }
.wcard h3{ font-size:17px; margin-top:14px; letter-spacing:-.024em; line-height:1.2; }
.wcard p{ margin-top:7px; font-size:13.8px; line-height:1.5; color:var(--body); }
.wlink{
  margin-top:auto; padding-top:16px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--teal);
}
.wlink svg{ transition:transform .16s ease; }
.wcard:hover .wlink svg{ transform:translateX(3px); }

.sl-foot{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.sl-prog{ flex:1 1 180px; max-width:280px; height:4px; border-radius:100px; background:var(--line); overflow:hidden; }
.sl-prog i{ display:block; height:100%; border-radius:100px; background:var(--teal); width:33%; }

/* --- einheitliches Vorschau-Raster: Label / Grafik / Wert --- */
.viz{ display:flex; flex-direction:column; gap:10px; }
.vz-top{ font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.vz-mid{ height:44px; display:flex; align-items:center; }
.vz-mid > *{ width:100%; }
.vz-bot{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--body); }
.vz-bot b{ font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }

.vz-bars{ display:flex; align-items:stretch; gap:5px; height:44px; }
.vz-bars i{ flex:1 1 0; min-width:0; border-radius:4px; background:var(--paper-2); position:relative; }
.vz-bars i::after{ content:""; position:absolute; inset:auto 0 0 0; height:var(--h); border-radius:4px; background:var(--teal); }
.vz-bars i.hi::after{ background:var(--lime); }
.vz-chips{ display:flex; gap:5px; }
.vz-chip{ flex:1 1 0; min-width:0; font-size:9px; font-weight:600; text-align:center; padding:7px 3px; border-radius:7px; background:var(--surface); border:1px solid var(--line); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vz-chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.vz-chip.mid{ background:var(--teal-bg); border-color:var(--teal-br); color:var(--teal); }
.vz-dots{ display:flex; gap:5px; }
.vz-dots i{ flex:1 1 0; min-width:0; height:30px; border-radius:6px; background:var(--paper-2); }
.vz-dots i.on{ background:var(--teal); }
.vz-dots i.on2{ background:var(--lime); }
.vz-lines{ display:grid; gap:7px; }
.vz-lines i{ height:6px; border-radius:100px; background:var(--paper-2); }
.vz-lines i.k{ background:var(--teal-br); }
.vz-bar{ height:7px; border-radius:100px; background:var(--paper-2); overflow:hidden; }
.vz-bar i{ display:block; height:100%; border-radius:100px; background:var(--teal); }
.vz-gauge{ position:relative; height:7px; border-radius:100px; background:linear-gradient(90deg,#7FBF2C,#D9C23C 55%,#D9603A); }
.vz-gauge b{ position:absolute; top:-5px; width:3px; height:17px; border-radius:2px; background:var(--ink); }
.vz-week{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.vz-week i{ height:30px; border-radius:6px; background:var(--paper-2); }
.vz-week i.a{ background:var(--teal); } .vz-week i.b{ background:var(--lime); } .vz-week i.c{ background:var(--cyan); }
.vz-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
.vz-grid i{ height:30px; border-radius:6px; background:var(--paper-2); }
.vz-grid i.on{ background:var(--teal); }
.vz-grid i.on2{ background:var(--lime); }

/* ================= ABLAUF ================= */
.steps{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:44px; }
.steps::before{ content:""; position:absolute; top:52px; left:10%; right:10%; height:1px; background:var(--line); z-index:0; }
.step{ position:relative; z-index:1; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 22px 24px; }
.band-white .step{ background:var(--paper); }
.s-num{
  width:34px; height:34px; border-radius:10px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:14px;
  font-variant-numeric:tabular-nums;
}
.step h3{ font-size:18px; margin-top:18px; letter-spacing:-.024em; }
.step p{ margin-top:8px; font-size:14.8px; }

/* ================= INDIVIDUELL / ANFRAGE ================= */
.custom{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(32px,4vw,52px); align-items:center;
}
.cu-opts{ display:grid; gap:12px; margin-top:30px; }
.cu-opt{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; transition:border-color .16s ease;
}
.cu-opt:hover{ border-color:#C0D0C1; }
.cu-ic{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:grid; place-items:center; background:var(--teal-bg); color:var(--teal);
}
.cu-opt:nth-child(2) .cu-ic{ background:#EEF6DC; color:#4E8A18; }
.cu-tx{ min-width:0; }
.cu-tx b{
  display:block; font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--ink); letter-spacing:-.02em; line-height:1.25;
}
.cu-tx span{ display:block; margin-top:4px; font-size:13.6px; line-height:1.5; color:var(--body); }

.cu-card{ border-radius:var(--r-lg); padding:22px 24px 24px; }
.cu-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:14px; border-bottom:1px solid var(--line-2);
}
.cu-title{ font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--ink); letter-spacing:-.024em; }
.cu-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:11px; }
.cu-list li{ display:flex; align-items:center; gap:11px; font-size:13.8px; color:var(--ink-2); }
.cu-btn{ width:100%; margin-top:22px; }
.cu-btn:hover svg{ transform:none; }
.cu-note{ display:block; margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--muted); }

/* ================= VERTRAUEN (Benefit-Konstellation) ================= */
.trust-band{
  background-color:var(--surface);
  background-image:radial-gradient(rgba(10,25,32,.055) 1px, transparent 1px);
  background-size:22px 22px;
  border-block:1px solid var(--line);
}
.trust-band .sec-head{ margin-inline:auto; text-align:center; }

.bmap{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:16px 46px; align-items:center; margin-top:clamp(40px,4.6vw,58px);
}
.bm-core{
  grid-column:2; grid-row:1 / span 3;
  width:186px; height:186px; border-radius:50%; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  position:relative; flex:none;
}
.bm-core::before{ content:""; position:absolute; inset:-16px; border-radius:50%; border:1px dashed rgba(12,124,107,.4); }
.bm-core::after{ content:""; position:absolute; inset:-36px; border-radius:50%; border:1px solid var(--line); }
.bm-core .k{ width:58px; height:58px; }
.bm-core b{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.1em; color:#fff; }


.bm{
  position:relative; display:flex; align-items:center; gap:13px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; transition:border-color .16s ease;
}
.bm:hover{ border-color:#C0D0C1; }
.bm-ic{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:none; }
.bm-tx b{ display:block; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink); letter-spacing:-.02em; line-height:1.25; }
.bm-tx{ min-width:0; }
.bm-tx span{ display:block; margin-top:3px; font-size:13px; color:var(--muted); line-height:1.4; }
.bm-l{ grid-column:1; }
.bm-r{ grid-column:3; }
.bm-1,.bm-4{ grid-row:1; }
.bm-2,.bm-5{ grid-row:2; }
.bm-3,.bm-6{ grid-row:3; }
.bm-l::after{ content:""; position:absolute; left:100%; top:50%; width:46px; height:1px; background:linear-gradient(90deg, var(--line), rgba(224,231,224,0)); }
.bm-r::before{ content:""; position:absolute; right:100%; top:50%; width:46px; height:1px; background:linear-gradient(270deg, var(--line), rgba(224,231,224,0)); }
.bm-l::before{ content:""; position:absolute; left:calc(100% + 42px); top:50%; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:var(--line); }
.bm-r::after{ content:""; position:absolute; right:calc(100% + 42px); top:50%; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:var(--line); }

.bm-1 .bm-ic{ background:#EEF6DC; color:#4E8A18; }
.bm-2 .bm-ic{ background:var(--teal-bg); color:var(--teal); }
.bm-3 .bm-ic{ background:#E3F2EE; color:#0F9581; }
.bm-4 .bm-ic{ background:#E0F4F7; color:#0490A1; }
.bm-5 .bm-ic{ background:#E4EDF3; color:#0A4F70; }
.bm-6 .bm-ic{ background:#F1F7E2; color:#5E9E1E; }

/* ================= CTA / KONTAKT ================= */
.cta{ background:var(--ink); color:#A9BFC4; position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 90% at 78% 50%, rgba(0,178,198,.16), rgba(0,178,198,0) 100%); pointer-events:none; }
.cta .wrap{ position:relative; z-index:2; }
.cta-inner{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center; }
.cta h2{ color:#fff; font-size:clamp(26px,3.1vw,40px); margin-top:18px; }
.cta p{ margin-top:16px; font-size:16.5px; max-width:36ch; }
.cta-card{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg); padding:26px 26px 24px; }
.cta-card .lbl{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#8FA8AE; font-weight:600; }
.cta-card a.mail{ display:block; margin-top:10px; font-family:var(--font-display); font-weight:700; font-size:clamp(19px,2.1vw,25px); color:#fff; text-decoration:none; letter-spacing:-.026em; word-break:break-word; }
.cta-card a.mail:hover{ color:var(--lime); }
.cta-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.cta-actions .btn{ flex:1 1 auto; }
.cta-card small{ display:block; margin-top:16px; font-size:13px; color:#8FA8AE; }

/* ================= FOOTER ================= */
.site-footer{ background:var(--paper); padding-block:50px 26px; }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:42px; }
.foot-grid p{ margin-top:15px; font-size:14px; color:var(--muted); max-width:28em; }
.foot-col h4{ font-family:var(--font-text); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.foot-col ul{ list-style:none; margin:15px 0 0; padding:0; display:grid; gap:10px; }
.foot-col a{ text-decoration:none; font-size:14px; color:var(--ink-2); }
.foot-col a:hover{ color:var(--teal); }
.foot-bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted); }
.foot-bottom a{ text-decoration:none; }
.foot-bottom a:hover{ color:var(--teal); }

/* ================= RESPONSIVE ================= */
@media (max-width:1060px){
  .hero h1{ max-width:none; }
  .hero-main{ grid-template-columns:minmax(0,1fr); gap:42px; }
  .hero-stage{ max-width:580px; width:100%; margin-inline:auto; }
  .hero-trust{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .showcase,.cta-inner,.custom{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .tabs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panels{ min-height:0; }
  .features{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .demo{ height:150px; }
  .index{ grid-template-columns:minmax(0,1fr); gap:0; }
  .foot-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:900px){
  .nav-links,.nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .bmap{ grid-template-columns:minmax(0,1fr); gap:12px; justify-items:stretch; }
  .bm-core{ grid-column:1; grid-row:1; margin:0 auto 26px; }
  .bm-l,.bm-r{ grid-column:1; }
  .bm-1,.bm-2,.bm-3,.bm-4,.bm-5,.bm-6{ grid-row:auto; }
  .bm-l::after,.bm-r::before,.bm-l::before,.bm-r::after{ display:none; }
  .steps{ grid-template-columns:minmax(0,1fr); }
  .steps::before{ display:none; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding-inline:18px; }
  .hero{ padding-block:40px 0; }
  .hero h1{ font-size:clamp(30px,8.2vw,42px); }
  .hero-cta .btn{ flex:1 1 100%; }
  .hero-trust{ grid-template-columns:minmax(0,1fr); }
  .chips{ gap:8px; }
  .chip{ font-size:11px; padding:8px 10px 8px 8px; gap:8px; max-width:none; }
  .chip .ft{ width:24px; height:29px; font-size:6.5px; }
  .chip span:last-child{ display:none; }
  .bb-cols{ grid-template-columns:minmax(0,1fr); }
  .goals{ display:none; }
  .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .kpi{ padding:10px 9px; }
  .kpi strong{ font-size:15px; }
  .tabs{ grid-template-columns:minmax(0,1fr); }
  .tab small{ display:none; }
  .week{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
  .week .cell{ min-height:58px; padding:4px; }
  .week .ev{ font-size:0; height:11px; }
  .wcard{ flex:0 0 80%; }
  .foot-grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
}


/* ================= RECHTSSEITEN ================= */
.page-head{ background:var(--paper); border-bottom:1px solid var(--line); }
.page-nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:70px; }
.back{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink-2);
  border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:9px 15px;
  transition:border-color .16s ease, color .16s ease;
}
.back:hover{ border-color:var(--teal); color:var(--teal); }
.back svg{ transition:transform .16s ease; }
.back:hover svg{ transform:translateX(-3px); }

.legal{ padding-block:clamp(44px,5vw,74px); }
.legal-wrap{ max-width:760px; margin-inline:auto; }
.legal h1{ font-size:clamp(28px,3.4vw,42px); margin-top:18px; }
.legal .stand{ margin-top:14px; font-size:14px; color:var(--muted); }
.legal h2{ font-size:20px; margin-top:44px; letter-spacing:-.024em; }
.legal h3{ font-size:16px; margin-top:26px; letter-spacing:-.02em; }
.legal p{ margin-top:12px; font-size:16px; line-height:1.68; }
.legal ul{ margin:12px 0 0; padding-left:20px; }
.legal li{ margin-top:7px; font-size:16px; line-height:1.6; }
.legal a{ color:var(--teal); }
.legal section{ padding-top:2px; }
.legal hr{ border:0; border-top:1px solid var(--line); margin:44px 0 0; }
.todo{
  background:#FFF8E6; border:1px solid #F0DFA8; border-radius:12px;
  padding:16px 18px; margin-top:26px; font-size:14.5px; line-height:1.6; color:#6B531A;
}
.todo b{ font-family:var(--font-display); font-weight:600; display:block; margin-bottom:4px; color:#54400F; }
.fill{ background:#FFF1C9; border-radius:4px; padding:1px 7px; font-family:var(--font-text); color:#6B531A; }