/* design.css: Komponenten. Farben und Schrift kommen aus theme.css. */
*{ box-sizing:border-box; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  margin:0; font-family:var(--font);
  background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ font-weight:400; letter-spacing:-0.035em; line-height:1.04; text-wrap:balance; }
::selection{ background:var(--mint); color:var(--ink); }
:focus-visible{ outline:2px solid var(--mint-text); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
section{ position:relative; }
.sec{ padding:120px 0; }
.sec-white{ background:var(--white); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:16px;
  padding:6px 6px 6px 24px; border-radius:100px;
  font:500 15px/1 var(--font); letter-spacing:-0.01em;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
  cursor:pointer; border:0; white-space:nowrap;
}
.btn .chip{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none;
  transition:transform .4s var(--ease);
}
.btn .chip svg{ width:16px; height:16px; transition:transform .4s var(--ease); }
.btn:hover .chip svg{ transform:translate(2px,-2px); }
.btn-primary{ background:var(--primary); color:var(--ink); box-shadow:0 0 0 5px rgb(var(--primary-rgb) / 0.22); }
.btn-primary .chip{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--primary-d); box-shadow:0 0 0 7px rgb(var(--primary-rgb) / 0.28); }
.btn-light{ background:#fff; color:var(--ink); box-shadow:0 0 0 5px rgba(255,255,255,0.55), 0 0 0 6px var(--line); }
.btn-light .chip{ background:var(--bg); color:var(--ink); }
.btn-light:hover{ box-shadow:0 0 0 7px rgba(255,255,255,0.7), 0 0 0 8px var(--line); }
.btn-mint{ background:var(--mint); color:var(--ink); box-shadow:0 0 0 5px rgb(var(--primary-rgb) / 0.22); }
.btn-mint .chip{ background:var(--ink); color:#fff; }
.btn-mint:hover{ background:var(--mint-l); }
.btn-sm{ padding:4px 4px 4px 18px; font-size:14px; gap:12px; }
.btn-sm .chip{ width:34px; height:34px; }

/* ---------- Navbar ---------- */
.nav{ position:fixed; top:14px; left:0; right:0; z-index:60; padding:0 16px; }
.nav-inner{
  max-width:var(--max); margin:0 auto; height:64px; padding:0 9px 0 24px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:22px; box-shadow:0 10px 34px -16px rgb(var(--shadow-rgb) / 0.28), 0 0 0 1px rgb(var(--shadow-rgb) / 0.05);
  transition:box-shadow .4s var(--ease), background .4s var(--ease);
}
.nav.is-scrolled .nav-inner{ background:rgba(255,255,255,0.96); box-shadow:0 14px 40px -14px rgb(var(--shadow-rgb) / 0.35), 0 0 0 1px rgb(var(--shadow-rgb) / 0.06); }
.logo img{ height:22px; width:auto; }
.nav-links{ display:flex; gap:4px; position:absolute; left:50%; transform:translateX(-50%); }
.nav-links a{ padding:10px 16px; border-radius:100px; font-size:15px; color:var(--muted); transition:color .25s var(--ease), background .25s var(--ease); }
.nav-links a:hover{ color:var(--ink); background:var(--bg); }
@media (max-width:880px){ .nav-links{ display:none; } .nav-inner{ padding-left:20px; } }

/* ---------- Hero ---------- */
.hero{ padding:150px 0 0; overflow:hidden; }
.hero-top{ display:grid; grid-template-columns:1.35fr 0.65fr; gap:56px; align-items:start; }
.hero h1{ font-size:clamp(2.9rem, 6.4vw, 5.7rem); max-width:12.5ch; }
.hero h1 .word{ display:inline-block; vertical-align:top; padding-bottom:0.1em; margin-bottom:-0.1em; }
.hero h1 .word-inner{ display:inline-block; will-change:transform; }
.hero-sub{ margin-top:30px; max-width:46ch; font-size:18px; line-height:1.55; color:var(--muted); }
.hero-actions{ display:flex; gap:22px; flex-wrap:wrap; margin-top:38px; align-items:center; }
.hero-aside{ padding-top:14px; }
.status{
  display:inline-flex; align-items:center; gap:12px; padding:8px 18px 8px 8px; border-radius:100px;
  background:#fff; box-shadow:0 0 0 1px var(--line); font-size:14px; line-height:1.3;
}
.status .pulse{ width:34px; height:34px; border-radius:50%; background:var(--mint-xl); display:grid; place-items:center; }
.status .pulse i{ width:10px; height:10px; border-radius:50%; background:var(--mint-text); box-shadow:0 0 0 0 rgb(var(--primary-rgb) / 0.5); animation:ping 2.2s infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgb(var(--primary-rgb) / 0.5); } 80%,100%{ box-shadow:0 0 0 12px rgb(var(--primary-rgb) / 0); } }
.hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:28px; padding-top:26px; border-top:1px solid var(--line); }
.stat-num{ font-size:46px; letter-spacing:-0.04em; line-height:1; }
.stat-label{ margin-top:10px; font-size:14px; color:var(--muted); line-height:1.35; }

.marquee{ margin-top:72px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee-label{ text-align:center; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.marquee-track{ display:flex; gap:64px; width:max-content; animation:marquee 34s linear infinite; }
.marquee-track span{ display:inline-flex; align-items:center; gap:12px; font-size:24px; font-weight:500; letter-spacing:-0.03em; color:var(--soft); white-space:nowrap; }
.marquee-track svg{ width:22px; height:22px; color:var(--soft-2); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* fan of tilted cards */
.fan{ position:relative; height:470px; margin-top:44px; }
.fan-track{ position:absolute; left:50%; top:0; transform:translateX(-50%); display:flex; }
.fan-card{
  width:290px; margin:0 -30px; flex:none; transform-origin:50% 120%;
  transform:translateY(var(--y,0)) rotate(var(--r,0deg));
}
.fan-card:nth-child(1){ --r:-15deg; --y:96px; }
.fan-card:nth-child(2){ --r:-7.5deg; --y:30px; }
.fan-card:nth-child(3){ --r:0deg; --y:0px; z-index:2; }
.fan-card:nth-child(4){ --r:7.5deg; --y:30px; }
.fan-card:nth-child(5){ --r:15deg; --y:96px; }
.fan-inner{ background:#fff; border-radius:22px; padding:18px; box-shadow:0 30px 60px -28px rgb(var(--shadow-rgb) / 0.35), 0 0 0 1px rgb(var(--shadow-rgb) / 0.05); }
.fan-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.fan-title{ font-size:22px; line-height:1.1; letter-spacing:-0.03em; font-weight:500; }
.ico{ width:36px; height:36px; border-radius:12px; background:var(--bg); display:grid; place-items:center; flex:none; color:var(--mint-text); }
.ico svg{ width:19px; height:19px; }
.art{ position:relative; border-radius:14px; overflow:hidden; isolation:isolate; }
.art svg{ width:100%; height:100%; display:block; animation:floaty 7s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.fan .art{ height:270px; }
.t-software{ background:linear-gradient(160deg,var(--tint-a),var(--tint-b)); }
.t-ki{ background:linear-gradient(160deg,#e7f4fb,#cfe7f4); }
.t-dsgvo{ background:linear-gradient(160deg,var(--tint-a),#d3eef2); }
.t-automation{ background:linear-gradient(160deg,#fff1e8,#ffdfcf); }
.t-workshop{ background:linear-gradient(160deg,#fcf8dc,#f3eec0); }
.t-talk{ background:linear-gradient(160deg,var(--tint-a),var(--tint-b)); }
.t-offer{ background:linear-gradient(160deg,#e7f4fb,#cfe7f4); }
.t-launch{ background:linear-gradient(170deg,#173f38,#0b211d); }
.fan-card:nth-child(2) .art svg{ animation-delay:-1.5s; } .fan-card:nth-child(3) .art svg{ animation-delay:-3s; }
.fan-card:nth-child(4) .art svg{ animation-delay:-4.5s; } .fan-card:nth-child(5) .art svg{ animation-delay:-6s; }

.badge-wrap{ position:relative; z-index:5; display:flex; justify-content:center; margin-top:-66px; }
.badge{ width:132px; height:132px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 20px 50px -20px rgb(var(--shadow-rgb) / 0.4), 0 0 0 8px var(--bg); position:relative; }
.badge svg.ring{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); animation:spin 24s linear infinite; }
.badge text{ font:500 11.5px var(--font); letter-spacing:0.19em; fill:var(--ink); text-transform:uppercase; }
.badge .core{ width:54px; height:54px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; position:relative; }
.badge .core svg{ width:18px; height:18px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Section headers ---------- */
.eyebrow{ display:flex; align-items:center; justify-content:center; gap:16px; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); margin-bottom:28px; }
.eyebrow i{ height:1px; width:min(90px,14vw); background:linear-gradient(90deg,transparent,var(--line-strong)); }
.eyebrow i:last-child{ transform:scaleX(-1); }
.eyebrow svg{ width:13px; height:13px; color:var(--mint-text); }
.h2{ font-size:clamp(2.4rem, 5.2vw, 4.4rem); }
.lead{ font-size:18px; line-height:1.55; color:var(--muted); }

/* ---------- About ---------- */
.about-head{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:64px; align-items:end; margin-bottom:56px; }
.about-head .h2{ max-width:15ch; }
.about-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:stretch; }
.about-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.about-tiles .tile:last-child:nth-child(odd){ grid-column:1 / -1; }
.tile{ background:var(--card); border-radius:22px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; gap:28px; min-height:210px; box-shadow:0 0 0 1px rgb(var(--shadow-rgb) / 0.04); }
.tile .num{ font-size:58px; letter-spacing:-0.045em; line-height:1; display:flex; align-items:baseline; gap:6px; }
.tile .num small{ font-size:30px; color:var(--mint-text); letter-spacing:-0.02em; }
.tile p{ color:var(--muted); font-size:15px; line-height:1.4; max-width:44ch; }

/* Profil-Cards: beliebig oft verwendbar, ab zwei Karten wandern sie in eine eigene Reihe */
.profiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.about-grid:has(.profile:nth-child(2)){ grid-template-columns:1fr; }
.profile{ position:relative; overflow:hidden; min-height:440px; border-radius:22px; background:var(--dark); color:#fff; }
.profile > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; mix-blend-mode:lighten; }
@media (min-width:1101px){ .profile > img{ object-position:50% 42%; } }
.profile-info{ position:absolute; left:0; right:0; bottom:0; padding:90px 24px 24px; background:linear-gradient(to top, rgba(7,8,11,0.94) 30%, rgba(7,8,11,0)); }
.profile-name{ display:block; font-size:22px; font-weight:500; letter-spacing:-0.03em; line-height:1.15; }
.profile-role{ display:block; margin-top:4px; font-size:14px; color:var(--mint-l); }
.profile-bio{ margin-top:10px; font-size:14.5px; line-height:1.45; color:#c5d3d1; }

/* ---------- Services ---------- */
.center-head{ text-align:center; max-width:760px; margin:0 auto 64px; }
.center-head .lead{ margin:22px auto 0; max-width:52ch; }
.center-head .btn{ margin-top:34px; }
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.svc{ background:var(--card); border-radius:22px; padding:22px; box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.svc:hover{ transform:translateY(-6px); box-shadow:0 0 0 1px var(--line-hover), 0 30px 50px -30px rgb(var(--shadow-rgb) / 0.35); }
.svc-num{ font-size:14px; color:var(--muted); letter-spacing:0.02em; }
.svc h3{ font-size:27px; margin:8px 0 12px; letter-spacing:-0.035em; }
.svc p{ font-size:15px; line-height:1.5; color:var(--muted); min-height:68px; }
.svc .art{ height:210px; margin:22px 0 20px; transition:transform .6s var(--ease); }
.svc:hover .art{ transform:scale(1.02); }
.svc ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; font-size:14.5px; }
.svc li{ display:flex; gap:10px; align-items:flex-start; line-height:1.35; }
.svc li svg{ width:17px; height:17px; flex:none; margin-top:1px; color:var(--mint-text); }

/* ---------- Process ---------- */
.proc-head{ display:grid; grid-template-columns:1fr 0.7fr; gap:64px; align-items:end; margin-bottom:64px; }
.proc-head .eyebrow{ justify-content:flex-start; }
.proc-head .eyebrow i:first-child{ display:none; }
.proc-head .h2{ max-width:12ch; }
.proc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step{ background:var(--card); border-radius:22px; padding:26px; box-shadow:0 0 0 1px rgb(var(--shadow-rgb) / 0.04); display:flex; flex-direction:column; }
.step-top{ display:flex; justify-content:space-between; align-items:baseline; }
.step-n{ font-size:84px; letter-spacing:-0.05em; line-height:0.9; color:transparent; -webkit-text-stroke:1.5px var(--step-stroke); }
.step-time{ font-size:13px; color:var(--mint-text-d); background:var(--mint-xl); padding:6px 12px; border-radius:100px; }
.step h3{ font-size:30px; margin:26px 0 12px; }
.step p{ color:var(--muted); font-size:16px; line-height:1.5; }
.step .art{ height:190px; margin-top:28px; }

/* ---------- FAQ ---------- */
.faq-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:72px; align-items:start; }
.faq-side{ position:sticky; top:130px; }
.faq-side .eyebrow{ justify-content:flex-start; }
.faq-side .eyebrow i:first-child{ display:none; }
.faq-side .lead{ margin:22px 0 34px; max-width:40ch; }
.faq-list{ display:grid; gap:12px; }
details.q{ background:var(--bg); border-radius:20px; padding:0 26px; transition:background .3s var(--ease); }
details.q[open]{ background:var(--mint-xl); }
details.q summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; font-size:21px; font-weight:500; letter-spacing:-0.025em; line-height:1.25; }
details.q summary::-webkit-details-marker{ display:none; }
details.q .plus{ width:36px; height:36px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:none; transition:transform .4s var(--ease), background .3s; }
details.q .plus svg{ width:14px; height:14px; }
details.q[open] .plus{ transform:rotate(45deg); background:var(--primary); color:var(--ink); }
details.q .ans{ padding:0 0 26px; max-width:60ch; color:var(--muted); font-size:16.5px; line-height:1.6; }

/* ---------- CTA ---------- */
.cta-panel{ position:relative; overflow:hidden; border-radius:36px; background:var(--dark); color:#fff; padding:110px 40px; text-align:center; isolation:isolate; }
.cta-panel::before{ content:""; position:absolute; z-index:-1; width:620px; height:620px; border-radius:50%; left:-160px; bottom:-340px; background:radial-gradient(circle,rgb(var(--primary-rgb) / 0.55),transparent 66%); animation:drift-a 16s cubic-bezier(.45,0,.55,1) infinite alternate; }
.cta-panel::after{ content:""; position:absolute; z-index:-1; width:520px; height:520px; border-radius:50%; right:-140px; top:-300px; background:radial-gradient(circle,rgba(159,227,245,0.38),transparent 66%); animation:drift-b 19s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes drift-a{ to{ transform:translate(60px,-40px); } }
@keyframes drift-b{ to{ transform:translate(-50px,50px); } }
.cta-panel .eyebrow{ color:#fff; }
.cta-panel .eyebrow i{ background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4)); }
.cta-panel .eyebrow svg{ color:var(--mint); }
.cta-panel h2{ font-size:clamp(2.5rem, 6vw, 5rem); max-width:16ch; margin:0 auto; }
.cta-panel h2 em{ font-style:normal; color:var(--mint); }
.cta-panel p{ margin:26px auto 0; max-width:46ch; color:#b5c4c2; font-size:18px; }
.cta-row{ display:flex; gap:28px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:42px; }
.cta-mail{ font-size:22px; letter-spacing:-0.02em; border-bottom:1px solid rgba(255,255,255,0.35); padding-bottom:3px; transition:border-color .3s; }
.cta-mail:hover{ border-color:var(--mint); }

/* ---------- Footer ---------- */
footer{ padding:90px 0 36px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 0.6fr 0.6fr 0.8fr; gap:48px; }
.foot-brand img{ height:26px; width:auto; }
.foot-brand p{ margin-top:22px; max-width:34ch; color:var(--muted); font-size:15.5px; }
.foot-col h4{ margin:0 0 18px; font-size:13px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.foot-col a{ display:block; padding:5px 0; font-size:16px; color:var(--ink); transition:color .25s; }
.foot-col a:hover{ color:var(--mint-text); }
.foot-bottom{ margin-top:72px; padding-top:26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1fr; }
  .profiles{ grid-template-columns:repeat(auto-fit, minmax(240px, 360px)); justify-content:center; }
  .profile{ min-height:460px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:880px){
  .sec{ padding:84px 0; }
  .hero{ padding-top:116px; }
  .hero-top{ grid-template-columns:1fr; gap:34px; }
  .hero-aside{ padding-top:0; }
  .about-head, .proc-head, .faq-grid{ grid-template-columns:1fr; gap:26px; }
  .proc-grid{ grid-template-columns:1fr; }
  .faq-side{ position:static; }
  .fan{ height:380px; }
  .fan-card{ width:230px; margin:0 -34px; }
  .fan .art{ height:210px; }
  .fan-title{ font-size:19px; }
  .cta-panel{ padding:80px 22px; border-radius:28px; }
}
@media (max-width:640px){
  .wrap{ padding:0 18px; }
  .svc-grid{ grid-template-columns:1fr; }
  .about-tiles{ grid-template-columns:1fr; }
  .about-tiles .tile:last-child:nth-child(odd){ grid-column:auto; }
  .profile{ min-height:400px; }
  .fan-card:nth-child(1), .fan-card:nth-child(5){ display:none; }
  .fan-card{ width:215px; margin:0 -26px; }
  .fan-card:nth-child(2){ --r:-9deg; --y:26px; }
  .fan-card:nth-child(4){ --r:9deg; --y:26px; }
  .hero-actions{ gap:14px; }
  .btn{ padding-left:20px; }
  .marquee-track span{ font-size:20px; }
  .foot-grid{ grid-template-columns:1fr; gap:34px; }
  .step-n{ font-size:68px; }
  details.q summary{ font-size:18px; }
}

/* ---------- Icons ---------- */
.i{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Produkt: Hero mit Visual ---------- */
.hero-top.hero-split{ grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.hero-split h1{ font-size:clamp(2.7rem, 5.3vw, 4.9rem); max-width:13ch; }
.hero-badges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.pill{ display:inline-flex; align-items:center; gap:10px; padding:8px 18px 8px 8px; border-radius:100px; background:#fff; box-shadow:0 0 0 1px var(--line); font-size:15px; font-weight:500; }
.pill .ico{ width:32px; height:32px; border-radius:50%; background:var(--mint-xl); }
.pill .ico svg{ width:16px; height:16px; }
.hero-visual{
  position:relative; height:540px; border-radius:36px; overflow:hidden; isolation:isolate;
  background:radial-gradient(circle at 50% 42%, rgb(var(--primary-rgb) / 0.2), transparent 68%), var(--card);
  box-shadow:0 0 0 1px var(--line), 0 40px 80px -50px rgb(var(--shadow-rgb) / 0.4);
}
.hero-visual canvas{ display:block; width:100% !important; height:100% !important; }

/* ---------- Produkt: Feature-Karten ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feat{ background:var(--card); border-radius:22px; padding:28px; box-shadow:0 0 0 1px var(--line); transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.feat:hover{ transform:translateY(-6px); box-shadow:0 0 0 1px var(--line-hover), 0 30px 50px -30px rgb(var(--shadow-rgb) / 0.35); }
.sec-white .feat{ background:var(--bg); box-shadow:none; }
.sec-white .feat:hover{ box-shadow:0 30px 50px -30px rgb(var(--shadow-rgb) / 0.3); }
.feat .ico{ width:50px; height:50px; border-radius:16px; background:var(--mint-xl); }
.feat .ico svg{ width:25px; height:25px; }
.feat h3{ font-size:24px; margin:24px 0 10px; letter-spacing:-0.03em; }
.feat p{ font-size:15.5px; line-height:1.5; color:var(--muted); }
.feat.is-warn, .sec-white .feat.is-warn{ background:rgb(var(--warn-rgb) / 0.05); box-shadow:0 0 0 1px rgb(var(--warn-rgb) / 0.22); }
.feat.is-warn .ico{ background:rgb(var(--warn-rgb) / 0.1); color:var(--warn); }
.note{ text-align:center; margin:40px auto 0; max-width:60ch; font-size:18px; font-weight:500; color:var(--warn); }

/* ---------- Produkt: Betriebsmodi ---------- */
.mode-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:980px; margin:0 auto; }
.mode{ background:var(--card); border-radius:28px; padding:38px; box-shadow:0 0 0 1px var(--line); }
.mode.is-featured{ background:var(--dark); color:#fff; box-shadow:none; }
.tag{ display:inline-block; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mint-text-d); background:var(--mint-xl); padding:7px 14px; border-radius:100px; }
.is-featured .tag{ color:var(--mint-l); background:rgb(var(--primary-rgb) / 0.18); }
.mode h3{ font-size:36px; margin:24px 0 14px; }
.mode p{ color:var(--muted); font-size:16.5px; line-height:1.55; }
.is-featured p{ color:#b5c4c2; }
.checks{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:13px; font-size:16px; }
.checks li{ display:flex; gap:11px; align-items:flex-start; line-height:1.35; }
.checks svg{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--mint-text); stroke-width:2.2; }
.is-featured .checks svg{ color:var(--mint); }

/* ---------- Produkt: Vergleich ---------- */
.cmp{ max-width:980px; margin:0 auto; background:var(--card); border-radius:28px; box-shadow:0 0 0 1px var(--line); overflow:hidden; }
.cmp-row{ display:grid; grid-template-columns:0.9fr 1.2fr 1.2fr; border-top:1px solid var(--line); }
.cmp-row:first-child{ border-top:0; }
.cmp-row > div{ display:flex; align-items:center; gap:10px; padding:22px 28px; font-size:16.5px; }
.cmp-row > div:first-child{ font-weight:500; }
.cmp-head{ background:var(--bg-2); }
.cmp-head > div{ font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.cmp-us{ background:rgb(var(--primary-rgb) / 0.09); font-weight:500; }
.cmp-head .cmp-us{ color:var(--mint-text-d); }
.cmp-row svg{ width:20px; height:20px; flex:none; stroke-width:2.2; }
.cmp-no svg{ color:var(--warn); }
.cmp-us svg{ color:var(--mint-text); }

/* ---------- Produkt: Preis ---------- */
.price{ max-width:540px; margin:0 auto; background:#fff; border-radius:32px; padding:44px; box-shadow:0 0 0 1px var(--primary), 0 0 0 7px rgb(var(--primary-rgb) / 0.2); }
.price-num{ margin-top:22px; font-size:80px; letter-spacing:-0.05em; line-height:1; }
.price-num small{ font-size:20px; letter-spacing:0; color:var(--muted); margin-left:6px; }
.price > p{ margin-top:12px; color:var(--muted); font-size:16.5px; }
.price .btn{ margin-top:34px; }
.fineprint{ text-align:center; margin-top:28px; color:var(--muted); font-size:14.5px; }

/* ---------- Formular (im dunklen CTA-Panel) ---------- */
.form{ max-width:560px; margin:46px auto 0; text-align:left; display:grid; gap:18px; }
.field label{ display:block; margin-bottom:8px; font-size:14px; color:#d7e3e1; }
.field input, .field textarea{
  width:100%; font:inherit; font-size:16px; color:#fff; border-radius:16px; padding:15px 18px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,0.4); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--mint); background:rgba(255,255,255,0.11); }
.form .btn{ justify-self:center; margin-top:10px; }

@media (max-width:1100px){
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .hero-top.hero-split{ grid-template-columns:1fr; gap:34px; }
  .hero-visual{ height:360px; border-radius:28px; }
  .mode-grid{ grid-template-columns:1fr; }
  .mode{ padding:30px; }
  .price{ padding:34px 28px; }
}
@media (max-width:640px){
  .feat-grid{ grid-template-columns:1fr; }
  .cmp-row{ grid-template-columns:1fr 1fr; }
  .cmp-row > div:first-child{ grid-column:1 / -1; padding-bottom:0; }
  .cmp-row > div{ padding:16px 20px; font-size:15.5px; }
  .cmp-head > div:first-child{ display:none; }
  .price-num{ font-size:64px; }
  .mode h3{ font-size:30px; }
}

/* ---------- Seitenkopf und Rechtstexte ---------- */
.hero-page{ text-align:center; padding-bottom:30px; }
.hero-page h1{ max-width:17ch; margin:0 auto; font-size:clamp(2.6rem, 5.4vw, 4.6rem); }
.hero-page .hero-sub{ margin-left:auto; margin-right:auto; max-width:56ch; }
.legal-section{ padding:150px 0 90px; }
.hero-page + .legal-section{ padding-top:50px; }
.legal-title{ font-size:clamp(2.6rem, 5vw, 4rem); margin-bottom:48px; }
.legal-content{ max-width:800px; }
.hero-page + .legal-section .legal-content{ margin:0 auto; }
.legal-heading{ font-size:1.7rem; font-weight:500; letter-spacing:-0.03em; margin:52px 0 20px; line-height:1.15; }
.legal-subheading{ font-size:1.2rem; font-weight:500; color:var(--mint-text); margin:30px 0 14px; letter-spacing:-0.015em; }
.legal-text{ color:var(--muted); line-height:1.75; margin-bottom:16px; }
.legal-text p{ margin:0 0 16px; }
.legal-list{ color:var(--muted); line-height:1.75; margin:16px 0; padding-left:24px; }
.legal-list li{ margin-bottom:8px; }
.legal-link, .legal-text a{ color:var(--mint-text); text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.legal-link:hover, .legal-text a:hover{ color:var(--mint-text-d); }
.legal-text a.btn{ color:var(--ink); text-decoration:none; }
@media (max-width:880px){ .legal-section{ padding:116px 0 70px; } }