/* ============================================================
   Jurace – Landingpage
   Farbwelt, Radien und Bewegungskurven bewusst identisch zur App,
   damit der Übergang von der Seite in das Produkt nahtlos wirkt.
   ============================================================ */

:root{
  --brand:#17b7a6; --brand-2:#0e9384; --brand-soft:rgba(23,183,166,.15); --brand-ink:#6ff0e0;
  /* Serifenschrift der Marke. Times New Roman ist auf Windows/Mac/iOS da;
     danach echte Ersatzschriften, damit es nirgends auf eine Zufallsschrift faellt. */
  --serif:"Times New Roman",Times,"Liberation Serif","Nimbus Roman",Georgia,serif;
  /* --faint trägt hier echten Fließtext (Quellen, Hinweise), nicht nur Mini-Labels.
     Deshalb heller als in der App, damit es AA (4.5:1) erreicht. */
  --bg:#07090b; --surface:#111619; --surface-2:#182025; --ink:#f2f6f6; --muted:#94a3a3; --faint:#7b8d91;
  --line:rgba(140,225,215,.10); --line2:rgba(140,225,215,.20);
  --kante:inset 0 1px 0 rgba(255,255,255,.055);
  --glass:rgba(9,13,15,.72);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 34px -12px rgba(0,0,0,.5);
  --shadow-lift:0 6px 16px rgba(0,0,0,.4),0 26px 52px -14px rgba(0,0,0,.6);
  --ring:rgba(23,183,166,.4);
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --zivil:#4f9cf9; --straf:#f2708f; --straf-soft:rgba(242,112,143,.16); --straf-ink:#ffb3c4;
  --oeff:#a583f5; --grund:#f0b354;
  --ok:#2ec78f; --ok-soft:rgba(46,199,143,.14); --ok-ink:#7fe5c0;
  --no:#ff5a57; --no-soft:rgba(255,90,87,.14); --no-ink:#ff9b99;
  --amber-soft:rgba(240,194,112,.15); --amber-ink:#f1c476;
  --max:1180px;
}
:root.light{
  --brand:#0d9488; --brand-2:#0b7d73; --brand-soft:rgba(13,148,136,.10); --brand-ink:#0b6e64;
  --bg:#eef2f0; --surface:#ffffff; --surface-2:#f4f8f7; --ink:#101a19; --muted:#5d6a68; --faint:#5f6d69;
  --line:rgba(12,60,55,.10); --line2:rgba(12,60,55,.17);
  --kante:inset 0 1px 0 rgba(255,255,255,.9);
  --glass:rgba(238,242,240,.78);
  --shadow:0 1px 2px rgba(15,60,55,.05),0 12px 30px -14px rgba(15,60,55,.16);
  --shadow-lift:0 8px 20px rgba(15,60,55,.1),0 28px 52px -16px rgba(15,60,55,.22);
  --ring:rgba(13,148,136,.32);
  --zivil:#2b6fd4; --straf:#d2456a; --straf-soft:rgba(210,69,106,.10); --straf-ink:#a32f50;
  --oeff:#7c53d8; --grund:#b57a16;
  --ok:#10a06f; --ok-soft:rgba(16,160,111,.12); --ok-ink:#0c6b52;
  --no:#e0413f; --no-soft:rgba(224,65,63,.10); --no-ink:#a32d2d;
  --amber-soft:rgba(180,120,20,.12); --amber-ink:#7a4a08;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);letter-spacing:-.011em;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease)}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;letter-spacing:-.035em;line-height:1.08;font-weight:800}
h1{font-size:clamp(38px,6.2vw,70px)}
h2{font-size:clamp(28px,4.1vw,45px)}
/* Grosse Ueberschriften in der Markenschrift. Gewicht 700 statt 800, weil Times
   kein 800 hat und der Browser sonst einen unsauberen Fettschnitt errechnet. */
h1,h2{font-family:var(--serif);font-weight:700;letter-spacing:-.005em;line-height:1.14}
h3{font-size:19px;letter-spacing:-.022em;line-height:1.3}
p{margin:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 26px;position:relative;z-index:2}
.wrap-nar{max-width:820px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--brand);color:#fff;
  padding:10px 18px;border-radius:999px;font-weight:600}
.skip:focus{left:14px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

/* ---------- Eule ---------- */
.owl-svg{width:100%;height:100%;overflow:visible}
.owl-lid{transform-origin:center;transform:scaleY(0)}

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--brand);color:#fff;border:none;border-radius:999px;
  padding:14px 28px;font-size:15px;font-weight:650;font-family:inherit;cursor:pointer;
  text-decoration:none;position:relative;overflow:hidden;
  box-shadow:0 8px 22px -8px var(--ring);
  transition:transform .32s var(--spring),box-shadow .32s var(--ease-out),background .2s var(--ease)}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.26) 50%,transparent 75%);
  transform:translateX(-130%)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px var(--ring)}
/* Hervorgehobene Knoepfe: Verlauf, Innenkante, weicher Lichtsaum */
.btn.shine{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 55%,var(--brand) 100%);
  background-size:200% 100%;
  box-shadow:0 10px 26px -8px var(--ring),inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 -1px 0 rgba(0,0,0,.12)}
.btn.shine:hover{background-position:100% 0;
  box-shadow:0 18px 38px -10px var(--ring),inset 0 1px 0 rgba(255,255,255,.34)}
@media (prefers-reduced-motion: no-preference){
  .btn.shine{transition:transform .32s var(--spring),box-shadow .32s var(--ease-out),
             background-position .7s var(--ease-out)}
  .btn.shine::before{content:"";position:absolute;inset:-2px;border-radius:inherit;
    background:conic-gradient(from 180deg,transparent,color-mix(in srgb,var(--brand) 60%,transparent),transparent 40%);
    opacity:0;transition:opacity .35s var(--ease);z-index:-1;filter:blur(7px)}
  .btn.shine:hover::before{opacity:.9}
}
.btn:hover::after{animation:sheen .85s var(--ease-out)}
.btn:active{transform:translateY(0) scale(.985)}
@keyframes sheen{to{transform:translateX(130%)}}
.btn-lg{padding:17px 34px;font-size:16.5px}
.btn-sm{padding:10px 20px;font-size:14px}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{border-color:var(--brand);background:var(--brand-soft);box-shadow:none}
.btn-arrow{display:inline-block;transition:transform .32s var(--spring)}
.btn:hover .btn-arrow{transform:translateX(4px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover{transform:none}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .35s var(--ease),background .35s var(--ease)}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:15px 26px;display:flex;align-items:center;gap:26px;
  transition:padding .35s var(--ease)}
.nav.stuck .nav-in{padding:10px 26px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-owl{width:32px;height:32px;flex:none}
.brand-tx{font-family:var(--serif);font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.brand-tx span{color:var(--brand)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:550;
  padding:8px 14px;border-radius:999px;position:relative;transition:color .2s var(--ease),background .2s var(--ease)}
.nav-links a:hover{color:var(--ink);background:var(--surface-2)}
.nav-links a.act{color:var(--brand)}
.nav-side{display:flex;align-items:center;gap:12px}
.tt{background:none;border:none;cursor:pointer;padding:0}
.tt-ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--surface-2);border:1px solid var(--line2);
  font-size:15px;line-height:1;flex-shrink:0;
  transition:transform .45s var(--spring),background .25s var(--ease),border-color .25s var(--ease)}
.tt:hover .tt-ic{transform:rotate(-18deg) scale(1.08);border-color:var(--brand);background:var(--brand-soft)}
.tt:active .tt-ic{transform:rotate(-180deg) scale(.94)}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mob{display:none;flex-direction:column;gap:4px;padding:0 26px;overflow:hidden;max-height:0;
  transition:max-height .4s var(--ease-out),padding .4s var(--ease-out)}
.nav-mob.on{max-height:340px;padding:6px 26px 20px}
.nav-mob a{text-decoration:none;color:var(--ink);padding:13px 4px;border-bottom:1px solid var(--line);font-weight:600}
.nav-mob a.btn{border:none;margin-top:12px;justify-content:center;color:#fff}

/* ---------- Abschnitte ---------- */
.sec{padding:112px 0;position:relative}
/* Weicher Uebergang statt harter Kante: die Flaeche laeuft oben und unten aus */
.sec-alt{position:relative;background:transparent}
.sec-alt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--surface-2);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
:root:not(.light) .sec-alt::before{background:rgba(255,255,255,.026)}
.sec-head{max-width:720px;margin-bottom:56px}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand);margin-bottom:16px}
.sec-lead{font-size:17.5px;color:var(--muted);margin-top:20px;line-height:1.65}
.sec-head h2 em{font-style:normal;color:var(--brand)}

/* ---------- Hero ---------- */
/* KEIN overflow:hidden – sonst werden die Farbschleier an der Sektionskante
   hart abgeschnitten und es entsteht eine sichtbare Bruchkante. */
.hero{position:relative;padding:70px 0 110px}
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px);z-index:0}
.linien .glow{position:fixed}
.glow-a{width:60rem;height:38rem;top:-22rem;right:-16rem;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 34%,transparent),transparent 68%)}
.glow-b{width:48rem;height:34rem;bottom:-20rem;left:-18rem;
  background:radial-gradient(circle,color-mix(in srgb,var(--oeff) 26%,transparent),transparent 68%)}
/* Bleibt innerhalb der Seitenbreite – sonst entsteht waagerechtes Scrollen,
   seit der Abschnitt nicht mehr hart beschneidet. */
.glow-c{width:min(52rem,100%);height:32rem;top:-14rem;left:0;right:0;margin:0 auto;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 26%,transparent),transparent 70%)}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--line2);
  padding:7px 15px;border-radius:999px;margin-bottom:26px}
:root.light .tag{color:var(--brand-ink)}
.hl{position:relative;display:inline-block;color:var(--brand)}
.ul{position:absolute;left:0;right:0;bottom:.02em;height:.13em;border-radius:999px;
  background:var(--brand);opacity:.28;transform:scaleX(0);transform-origin:left}
.rv.in .ul{animation:drawUl .8s .55s var(--ease-out) forwards}
@keyframes drawUl{to{transform:scaleX(1)}}
.lead{font-size:18.5px;color:var(--muted);margin-top:26px;max-width:540px;line-height:1.68}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:38px}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:34px 0 0;
  font-size:13.5px;color:var(--faint)}
.hero-facts li{display:flex;align-items:center;gap:8px}
.hero-facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand)}
.hero-facts strong{color:var(--muted);font-weight:650}

/* ---------- Telefon ---------- */
.hero-app{position:relative;display:flex;justify-content:center}
.phone{
  width:100%;max-width:320px;aspect-ratio:9/15.6;background:var(--surface);
  border:1px solid var(--line2);border-radius:42px;padding:11px;position:relative;z-index:2;
  box-shadow:var(--kante),var(--shadow-lift);animation:float 7s var(--ease) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.phone-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:96px;height:22px;background:var(--bg);border-radius:0 0 14px 14px;z-index:3}
.phone-screen{background:var(--bg);border-radius:32px;height:100%;padding:34px 17px 17px;overflow:hidden;
  display:flex;flex-direction:column;gap:11px}
.phone-shadow{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
  width:62%;height:26px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(22px);z-index:1}
:root.light .phone-shadow{background:rgba(15,60,55,.22)}
.ph-top{display:flex;align-items:center;gap:8px}
.ph-owl{width:22px;height:22px;flex:none}
.ph-brand{font-family:var(--serif);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ph-brand span{color:var(--brand)}
.ph-streak{margin-left:auto;font-size:12px;background:var(--surface-2);border:1px solid var(--line);
  padding:3px 10px;border-radius:999px}
.ph-greet{font-size:19px;font-weight:800;letter-spacing:-.03em;margin-top:4px}
.ph-motto{font-size:10.5px;color:var(--brand);font-weight:600;margin-top:-4px}
.ph-session{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-radius:var(--r-md);padding:14px 15px;color:#fff;margin-top:6px;
  box-shadow:0 10px 24px -12px var(--ring)}
.ph-session-ic{font-size:20px}
.ph-lbl{display:block;font-size:9.5px;opacity:.85}
.ph-ttl{display:block;font-size:14.5px;font-weight:750;letter-spacing:-.02em;margin:1px 0}
.ph-sub{display:block;font-size:10px;opacity:.85}
.ph-lbl2{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.ph-week{display:flex;gap:5px}
.ph-week i{flex:1;height:26px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line)}
.ph-week i.on{background:linear-gradient(180deg,var(--brand),var(--brand-2));border-color:transparent}
.ph-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.ph-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 12px;box-shadow:var(--kante)}
.ph-card b{display:block;font-size:20px;font-weight:800;letter-spacing:-.04em}
.ph-card span{font-size:9.5px;color:var(--faint)}

/* ---------- Zahlen ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;box-shadow:var(--kante),var(--shadow)}
.stat b{display:block;font-size:clamp(38px,5vw,52px);font-weight:800;letter-spacing:-.05em;
  color:var(--brand);line-height:1}
.stat-l{display:block;font-size:14.5px;margin-top:14px;line-height:1.55}
.stat-l em{font-style:normal;color:var(--no-ink);font-weight:650}
.stat-q{display:block;font-size:11.5px;color:var(--faint);margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
sup a{color:var(--brand);text-decoration:none;font-weight:700;padding:0 1px}
sup a:hover{text-decoration:underline}

.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain{padding:30px 26px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--kante),var(--shadow);
  transition:transform .4s var(--ease-out),border-color .3s var(--ease)}
.pain:hover{transform:translateY(-4px);border-color:var(--line2)}
.pain-ic{font-size:28px;display:block;margin-bottom:15px}
.pain h3{margin-bottom:10px}
.pain p{font-size:14.5px;color:var(--muted)}

/* ---------- Demo ---------- */
.demo{display:grid;grid-template-columns:1.35fr .65fr;gap:26px;align-items:start}
.demo-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:32px;box-shadow:var(--kante),var(--shadow-lift)}
.demo-head{display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap}
.pill{font-size:12px;font-weight:650;padding:5px 13px;border-radius:999px;
  background:var(--straf-soft);color:var(--straf-ink)}
.pill.ghost{background:transparent;border:1px solid var(--line2);color:var(--muted)}
.demo-sv{font-size:16px;line-height:1.7}
.demo-q{font-size:16px;font-weight:700;margin-top:16px;letter-spacing:-.02em}
.demo-opts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.opt{text-align:left;background:var(--surface-2);border:1px solid var(--line2);color:inherit;
  font-family:inherit;font-size:15px;padding:16px 18px;border-radius:var(--r-md);cursor:pointer;
  position:relative;transition:transform .28s var(--ease-out),border-color .2s var(--ease),background .2s var(--ease)}
.opt:hover:not(:disabled){border-color:var(--brand);transform:translateX(4px)}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok-ink);font-weight:650;
  animation:pop .45s var(--spring)}
.opt.wrong{border-color:var(--no);background:var(--no-soft);color:var(--no-ink)}
.opt.dim{opacity:.45}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.022)}100%{transform:scale(1)}}
.demo-reveal{margin-top:22px;padding-top:22px;border-top:1px dashed var(--line2);
  animation:riseIn .5s var(--ease-out)}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.verdict{font-size:17px;font-weight:750;margin-bottom:12px;letter-spacing:-.02em}
.verdict.ok{color:var(--ok-ink)}
.verdict.no{color:var(--no-ink)}
.loesung{font-size:14.8px;color:var(--muted);line-height:1.7}
.warum{margin-top:16px;background:var(--surface-2);border-radius:var(--r-md);padding:15px 17px;
  font-size:13.8px;color:var(--muted);line-height:1.65;border-left:3px solid var(--brand)}
.warum b{color:var(--ink)}
.demo-again{margin-top:18px}
.demo-side{display:flex;flex-direction:column;gap:12px}
.dside{display:flex;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:17px 18px;box-shadow:var(--kante)}
.dside-ic{font-size:19px;flex:none}
.dside b{display:block;font-size:14px;letter-spacing:-.015em}
.dside span{display:block;font-size:12.8px;color:var(--muted);margin-top:3px;line-height:1.55}

/* ---------- Funktionen ---------- */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.f{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 27px;
  box-shadow:var(--kante),var(--shadow);position:relative;overflow:hidden;
  transition:transform .4s var(--ease-out),border-color .3s var(--ease),box-shadow .4s var(--ease-out)}
.f::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--brand),transparent 80%);opacity:0;transition:opacity .35s var(--ease)}
.f:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--kante),var(--shadow-lift)}
.f:hover::before{opacity:1}
.f.big{grid-column:span 2}
.f-top{display:flex;align-items:center;gap:12px;margin-bottom:17px}
.f-ic{font-size:24px}
.f-num{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand-ink);background:var(--brand-soft);padding:5px 12px;border-radius:999px}
.f h3{margin-bottom:11px}
.f p{font-size:14.8px;color:var(--muted);line-height:1.68}
.f-note{font-size:12.5px !important;color:var(--faint) !important;margin-top:14px !important;
  padding-top:13px;border-top:1px solid var(--line)}
.ivl{display:flex;align-items:flex-end;gap:10px;height:132px;margin:26px 0 6px}
/* min-height: der erste Balken (14 % von 132px = 18px) war zu niedrig fuer
   seine eigene Beschriftung – die "1" rutschte unten heraus und stand auf
   dem dunklen Hintergrund statt auf dem Balken. */
.ivl-b{flex:1;height:var(--h);min-height:24px;background:linear-gradient(180deg,var(--brand),var(--brand-2));
  border-radius:10px 10px 5px 5px;position:relative;transform-origin:bottom;transform:scaleY(0);
  display:flex;align-items:flex-start;justify-content:center}
.rv.in .ivl-b{animation:growB .7s var(--ease-out) forwards}
.rv.in .ivl-b:nth-child(1){animation-delay:.05s}
.rv.in .ivl-b:nth-child(2){animation-delay:.13s}
.rv.in .ivl-b:nth-child(3){animation-delay:.21s}
.rv.in .ivl-b:nth-child(4){animation-delay:.29s}
.rv.in .ivl-b:nth-child(5){animation-delay:.37s}
.rv.in .ivl-b:nth-child(6){animation-delay:.45s}
@keyframes growB{to{transform:scaleY(1)}}
.ivl-b i{font-style:normal;font-size:11.5px;line-height:1.2;font-weight:700;color:#fff;margin-top:5px}

/* ---------- Balance ---------- */
.balance{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.balance-tx p{font-size:16.5px;color:var(--muted);margin-top:20px;line-height:1.7}
.blist{display:flex;flex-direction:column;gap:16px;margin-top:32px}
.bi{display:flex;gap:15px;align-items:flex-start}
.bi span{font-size:21px;flex:none;width:42px;height:42px;display:flex;align-items:center;
  justify-content:center;background:var(--surface);border:1px solid var(--line2);border-radius:13px}
.bi div{font-size:14.2px;color:var(--muted);line-height:1.6}
.bi b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px;letter-spacing:-.015em}
.bcard{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:38px 34px;text-align:center;box-shadow:var(--kante),var(--shadow-lift);position:relative}
.bcard-owl{width:74px;height:74px;margin:0 auto 20px;animation:sway 5s var(--ease) infinite}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.bcard-t{font-size:22px;font-weight:800;letter-spacing:-.03em}
.bcard-s{font-size:14.5px;color:var(--muted);margin-top:11px;line-height:1.6}
.bcard-bar{height:8px;border-radius:999px;background:var(--surface-2);margin:24px 0 10px;overflow:hidden}
.bcard-bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand))}
.rv.in .bcard-bar i{animation:fillB 1.1s .3s var(--ease-out) forwards}
@keyframes fillB{to{width:var(--w)}}
.bcard-f{font-size:12.5px;color:var(--faint)}

/* ---------- Methode ---------- */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.m{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;
  box-shadow:var(--kante),var(--shadow);transition:transform .4s var(--ease-out),border-color .3s var(--ease)}
.m:hover{transform:translateY(-4px);border-color:var(--line2)}
.m-n{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--brand);display:block;margin-bottom:14px}
.m h3{margin-bottom:12px}
.m p{font-size:14.6px;color:var(--muted);line-height:1.68}
.m-app{margin-top:15px !important;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px !important;color:var(--faint) !important}
.m-app b{color:var(--brand)}
.disclaimer{margin-top:34px;font-size:13.5px;color:var(--faint);background:var(--surface);
  border:1px dashed var(--line2);border-radius:var(--r-md);padding:18px 22px;line-height:1.65;max-width:840px}

/* ---------- Ehrlich ---------- */
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.h{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;
  box-shadow:var(--kante),var(--shadow);transition:transform .4s var(--ease-out)}
.h:hover{transform:translateY(-4px)}
.h-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:15px}
.h-badge.wip{background:var(--amber-soft);color:var(--amber-ink)}
.h-badge.sm{background:var(--brand-soft);color:var(--brand-ink)}
.h-badge.ok{background:var(--ok-soft);color:var(--ok-ink)}
.h h3{margin-bottom:11px}
.h p{font-size:14.4px;color:var(--muted);line-height:1.68}

/* ---------- Preise ---------- */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:840px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 30px;
  box-shadow:var(--kante),var(--shadow);position:relative}
.plan.featured{border-color:var(--brand);box-shadow:var(--kante),0 0 0 1px var(--brand),var(--shadow-lift)}
.plan-flag{position:absolute;top:-12px;left:30px;background:var(--brand);color:#fff;font-size:11.5px;
  font-weight:700;padding:5px 14px;border-radius:999px;letter-spacing:.02em}
.plan-n{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.plan-p{display:flex;align-items:baseline;gap:9px;margin:14px 0 6px;flex-wrap:wrap}
.plan-p b{font-size:38px;font-weight:800;letter-spacing:-.045em}
.plan-p span{font-size:13px;color:var(--faint)}
.plan-s{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:22px}
.ticks{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:11px}
.ticks li{font-size:14.3px;padding-left:29px;position:relative;color:var(--muted);line-height:1.5}
.ticks li::before{content:"✓";position:absolute;left:0;top:-1px;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--ok-soft);color:var(--ok-ink);font-size:11px;font-weight:800}
.ticks li.soon{color:var(--faint)}
.ticks li.soon::before{content:"◷";background:var(--amber-soft);color:var(--amber-ink)}
.plan-note{display:block;font-size:12px;color:var(--faint);text-align:center;margin-top:13px}

/* ---------- Warteliste ---------- */
.cta{text-align:center;position:relative}
.cta-in{max-width:660px}
.cta-owl{width:82px;height:82px;display:block;margin:0 auto 26px;animation:sway 5s var(--ease) infinite}
.cta p{font-size:17px;color:var(--muted);margin-top:18px;line-height:1.7}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:11px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:0 22px;box-shadow:var(--kante);transition:border-color .25s var(--ease)}
.faq details[open]{border-color:var(--line2)}
.faq summary{cursor:pointer;list-style:none;padding:19px 0;font-size:15.5px;font-weight:650;
  letter-spacing:-.018em;display:flex;align-items:center;gap:14px;transition:color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .34s var(--spring),border-color .2s var(--ease)}
.faq summary:hover{color:var(--brand)}
.faq summary:hover::after{border-color:var(--brand)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{font-size:14.6px;color:var(--muted);line-height:1.72;padding:0 0 21px;
  animation:riseIn .38s var(--ease-out)}

/* ---------- Quellen ---------- */
.src{padding-left:22px;display:flex;flex-direction:column;gap:22px;margin:0}
.src li{font-size:14.2px;color:var(--muted);line-height:1.65;padding-left:8px}
.src li::marker{color:var(--brand);font-weight:800}
.src b{color:var(--ink);font-size:14.8px}
.src a{color:var(--brand);text-decoration:none;font-size:13.5px;word-break:break-word}
.src a:hover{text-decoration:underline}
.src-note{margin-top:30px;font-size:13.2px;color:var(--faint);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:17px 20px;line-height:1.65}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line);padding:56px 0 30px;background:var(--surface-2)}
:root:not(.light) .foot{background:rgba(255,255,255,.018)}
.foot-in{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap}
.foot-brand{display:flex;gap:14px;align-items:flex-start;max-width:320px}
.foot-brand .brand-owl{width:38px;height:38px}
.foot-motto{font-size:13.2px;color:var(--muted);margin-top:5px;line-height:1.55}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-cols div{display:flex;flex-direction:column;gap:9px}
.foot-cols b{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:3px}
.foot-cols a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.foot-cols a:hover{color:var(--brand)}
.fs{font-size:14px;color:var(--muted)}
.foot-bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint)}

/* ---------- Einblenden beim Scrollen ---------- */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .72s var(--ease-out),transform .72s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv[data-rv-d="1"]{transition-delay:.07s}
.rv[data-rv-d="2"]{transition-delay:.14s}
.rv[data-rv-d="3"]{transition-delay:.21s}
.rv[data-rv-d="4"]{transition-delay:.28s}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:52px}
  .hero-app{order:-1;max-width:270px;margin:0 auto}
  .balance{grid-template-columns:1fr;gap:40px}
  .demo{grid-template-columns:1fr}
  .stats,.pains,.fgrid,.mgrid,.hgrid{grid-template-columns:1fr 1fr}
  .f.big{grid-column:span 2}
}
@media (max-width:820px){
  .nav-links{display:none}
  .nav-side .btn{display:none}
  .burger{display:flex;margin-left:auto}
  .nav-mob{display:flex}
  .sec{padding:78px 0}
  .stats,.pains,.fgrid,.mgrid,.hgrid,.plans{grid-template-columns:1fr}
  .f.big{grid-column:span 1}
      .foot-in{flex-direction:column;gap:34px}
  .foot-cols{gap:34px}
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .ivl-b{transform:scaleY(1)}
  .bcard-bar i{width:var(--w)}
  .ul{transform:scaleX(1)}
  .phone{animation:none}
}

/* ---------- Drucken ---------- */
@media print{
  .nav,.hero-app,.glow,.cta,.burger,.tt{display:none !important}
  .sec{padding:24px 0;break-inside:avoid}
  .rv{opacity:1;transform:none}
  body{background:#fff;color:#000}
}

/* ============================================================
   Ergänzungen: Hintergrundlinien, Warnleiste, Schritte,
   dreiteilige Preise, gesperrter Demo-Fall, Registrierung
   ============================================================ */

/* ---------- Dezente Strichgrafik über die ganze Seite ---------- */
.linien{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  color:var(--brand);opacity:.9}
.linien svg{width:100%;height:100%}
.lg-a{opacity:.16}
.lg-b{opacity:.10}
:root.light .lg-a{opacity:.13}
:root.light .lg-b{opacity:.08}
@media (prefers-reduced-motion: no-preference){
  /* pathLength="1" im SVG normiert jede Kurve auf die Länge 1 –
     dadurch zeichnen sich alle gleichmäßig, egal wie lang sie wirklich sind. */
  .lg-a path,.lg-b path{stroke-dasharray:1;stroke-dashoffset:1;
    animation:zeichnen 2.6s var(--ease-out) forwards}
  .lg-a path:nth-child(2){animation-delay:.12s}
  .lg-a path:nth-child(3){animation-delay:.24s}
  .lg-a path:nth-child(4){animation-delay:.36s}
  .lg-a path:nth-child(5){animation-delay:.48s}
  .lg-a path:nth-child(n+6){animation-delay:.6s}
  .lg-b path{animation-duration:3.4s}
}
@keyframes zeichnen{to{stroke-dashoffset:0}}
/* Inhalt liegt darüber */
.hero,.sec,.foot{position:relative;z-index:1}

/* ---------- Warnleiste unter den Zahlen ---------- */
.warnbar{display:flex;align-items:flex-start;gap:15px;margin:24px 0 44px;
  background:var(--no-soft);border:1px solid color-mix(in srgb,var(--no) 30%,transparent);
  border-radius:var(--r-md);padding:18px 22px}
.warnbar-ic{font-size:21px;flex:none;line-height:1.3}
.warnbar p{font-size:15px;line-height:1.65;color:var(--ink)}
.warnbar strong{color:var(--no-ink)}

/* ---------- So startest du ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;box-shadow:var(--kante),var(--shadow);position:relative;
  transition:transform .4s var(--ease-out),border-color .3s var(--ease)}
.step:hover{transform:translateY(-4px);border-color:var(--line2)}
.step-n{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);
  font-size:17px;font-weight:800;margin-bottom:16px}
.step h3{margin-bottom:10px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.65}
.startcta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:26px 30px;box-shadow:var(--kante),var(--shadow-lift)}
.startcta-owl{width:52px;height:52px;flex:none}
.startcta-t{font-size:19px;font-weight:800;letter-spacing:-.03em}
.startcta-s{font-size:14.5px;color:var(--muted);margin-top:3px}
.startcta .btn{margin-left:auto}
@media (max-width:820px){
  .steps{grid-template-columns:1fr}
  .startcta{flex-direction:column;align-items:flex-start}
  .startcta .btn{margin-left:0;width:100%}
}

/* ---------- Preise: drei Karten ---------- */
/* Drei Karten gleicher Höhe, Knopf immer unten bündig */
.plans.drei{grid-template-columns:repeat(3,1fr);max-width:none;align-items:stretch}
.plans.drei .plan{display:flex;flex-direction:column}
.plans.drei .ticks{flex:1}
.plan-spar{font-size:12.5px;font-weight:700;color:var(--ok-ink);background:var(--ok-soft);
  border-radius:999px;padding:5px 13px;display:inline-block;margin-bottom:14px}
.plan-spar.leer{background:var(--surface-2);color:var(--faint);font-weight:600}
.ticks li.aus{color:var(--faint)}
.ticks li.aus::before{content:"–";background:var(--surface-2);color:var(--faint);font-weight:700}
.plan.featured{transform:translateY(-12px)}
.plan.featured .plan-p b{color:var(--brand)}

/* Lebenslang: eigene Leiste unter den drei Karten, nicht in einer davon */
.lifetime{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:26px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:26px 32px;box-shadow:var(--kante),var(--shadow)}
.lifetime-tx{flex:1;min-width:240px}
.lifetime-t{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.lifetime-h{font-size:21px;font-weight:800;letter-spacing:-.03em;margin-top:5px}
.lifetime-s{font-size:14px;color:var(--muted);line-height:1.6;margin-top:7px}
.lifetime-preis{text-align:right;flex:none}
.lifetime-p{font-size:31px;font-weight:800;letter-spacing:-.04em;line-height:1}
.lifetime-preis span{font-size:12.5px;color:var(--faint)}
@media (max-width:980px){
  .plans.drei{grid-template-columns:1fr}
  .plan.featured{transform:none}
}
@media (max-width:720px){
  .lifetime{flex-direction:column;align-items:flex-start;gap:18px}
  .lifetime-preis{text-align:left}
  .lifetime .btn{width:100%}
}

/* ---------- Demo: zweiter Fall gesperrt ---------- */
.demo-zaehler{margin-left:auto;font-size:12px;font-weight:650;color:var(--faint);
  font-variant-numeric:tabular-nums}
.opt.gewaehlt{border-color:var(--brand);background:var(--brand-soft)}
.demo-card.gesperrt .demo-opts{opacity:.9}
.sperre{text-align:center;padding:6px 0 2px;animation:riseIn .45s var(--ease-out)}
.sperre-ic{font-size:30px;display:block;margin-bottom:12px}
.sperre-t{font-size:19px;font-weight:800;letter-spacing:-.03em}
.sperre-s{font-size:14.5px;color:var(--muted);line-height:1.65;margin:9px auto 20px;max-width:420px}
.sperre .btn{margin:0 6px 9px}

/* ---------- Registrierung ---------- */
/* Das hidden-Attribut muss staerker sein als ein display aus dem Stylesheet.
   Sonst ueberstimmt eine Regel wie display:flex das hidden und der Kasten
   steht sichtbar da, obwohl er zu sein soll – genau das ist hier schon einmal
   passiert. Betrifft jetzt den Konto-Dialog und die Meldungen darin.
   Gilt bewusst fuer die ganze Seite. */
[hidden]{display:none !important}
/* Honigtopf gegen Bots – fuer Menschen unsichtbar, aber nicht display:none,
   weil manche Bots genau darauf pruefen. */
.wl-topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-fein{font-size:12.8px !important;color:var(--faint) !important;
  margin:14px auto 0 !important;max-width:470px;line-height:1.6 !important}

@media (prefers-reduced-motion: reduce){
  .lg-a path,.lg-b path{stroke-dashoffset:0;animation:none}
}

/* ---------- Social-Links im Fuß ---------- */
.foot-social a{display:flex;align-items:center;gap:10px}
.foot-social svg{width:17px;height:17px;flex:none;opacity:.75;transition:opacity .2s var(--ease)}
.foot-social a:hover svg{opacity:1}

/* ===== Konto: Kopfzeile ===== */
.nav-konto{background:none;border:1px solid var(--line2);color:var(--ink);font:inherit;
  font-size:13.5px;font-weight:600;padding:8px 15px;border-radius:999px;cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.nav-konto:hover{border-color:var(--brand);color:var(--brand-ink)}
.nav-ich{display:flex;align-items:center;gap:10px}
.nav-ich-mail{font-size:13px;color:var(--muted);max-width:170px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.nav-ich-tarif{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:3px 9px}
.nav-ich-tarif.paid{color:var(--brand-ink);border-color:var(--brand)}
@media (max-width:900px){ .nav-ich-mail{display:none} }

/* ===== Konto: Dialog ===== */
.ko-hg{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);
  animation:koAuf .22s var(--ease-out) both}
@keyframes koAuf{from{opacity:0}to{opacity:1}}
.ko{position:relative;width:100%;max-width:430px;max-height:92vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:30px 28px 24px;box-shadow:var(--kante),0 30px 70px rgba(0,0,0,.42);
  animation:koRein .3s var(--ease-out) both}
@keyframes koRein{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.ko-zu{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  background:none;border:1px solid transparent;color:var(--faint);font-size:15px;cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.ko-zu:hover{border-color:var(--line2);color:var(--ink)}

/* Der Schliessen-Knopf sass auf gleicher Hoehe wie die Reiter und lag ueber
   der Beschriftung "Anmelden". Die Reiter ruecken deshalb nach unten und
   lassen ihm eine eigene Zeile. */
.ko-reiter{display:flex;gap:6px;background:var(--surface-2);border-radius:999px;padding:4px;
  margin:26px 0 22px}
.ko-r{flex:1;background:none;border:none;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--muted);padding:9px 10px;border-radius:999px;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease)}
.ko-r.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

.ko-t{font-size:23px;letter-spacing:-.025em;margin:0}
.ko-s{font-size:14px;color:var(--muted);line-height:1.6;margin:7px 0 20px}

.ko-f{display:flex;flex-direction:column;gap:5px}
.ko-l{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:11px}
.ko-f input{background:var(--surface-2);border:1px solid var(--line2);border-radius:var(--r-sm);
  color:var(--ink);font:inherit;font-size:15px;padding:13px 15px;width:100%}
.ko-f input::placeholder{color:var(--faint)}
.ko-f input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.ko-f input:disabled{opacity:.6}
.ko-f .btn{margin-top:19px}

.ko-meldung,.ko-ok{margin-top:15px;border-radius:var(--r-sm);padding:12px 15px;
  font-size:13.5px;line-height:1.55;text-align:left}
.ko-meldung{border:1px solid color-mix(in srgb,var(--no) 45%,transparent);color:var(--ink)}
.ko-ok{border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ink)}

.ko-link{display:block;margin:15px auto 0;background:none;border:none;font:inherit;
  font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ko-link:hover{color:var(--brand-ink)}
.ko-fein{font-size:11.5px !important;color:var(--faint) !important;line-height:1.6 !important;
  margin:18px 0 0 !important;border-top:1px solid var(--line);padding-top:14px}

/* ===== Handlungsaufruf: zwei Knoepfe statt Wartelisten-Formular ===== */
.cta-knoepfe{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:34px}
@media (max-width:560px){
  .cta-knoepfe{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}
}

/* ===== Konto: Google ===== */
.ko-google{display:flex;align-items:center;justify-content:center;gap:11px;
  background:var(--surface-2);border:1px solid var(--line2);border-radius:999px;
  padding:13px 20px;font-size:14.5px;font-weight:600;color:var(--ink);
  text-decoration:none;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.ko-google:hover{border-color:var(--brand);background:var(--brand-soft)}
.ko-google svg{flex:none}
.ko-oder{display:flex;align-items:center;gap:13px;margin:19px 0 4px;
  font-size:12px;color:var(--faint)}
.ko-oder::before,.ko-oder::after{content:"";flex:1;height:1px;background:var(--line)}

/* ============================================================
   PROFILMENUE IM KOPF (24.08.2026)
   Vorher stand die volle E-Mail-Adresse in der Kopfzeile: auf schmalen
   Bildschirmen abgeschnitten, und daneben liest jeder mit. Jetzt ein
   rundes Zeichen mit dem Anfangsbuchstaben, dahinter ein Menue.
   ============================================================ */
.profil{position:relative}
.profil-knopf{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);
  background:var(--brand-soft);color:var(--brand-ink);font:inherit;font-weight:700;font-size:15px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .2s var(--ease),transform .15s var(--ease-out)}
.profil-knopf:hover{border-color:var(--brand)}
.profil-knopf:active{transform:scale(.94)}
.profil-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:70;min-width:238px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);
  box-shadow:var(--shadow-lift);padding:7px;display:grid;gap:2px}
.profil-kopf{padding:10px 12px 11px;border-bottom:1px solid var(--line);margin-bottom:5px;
  display:grid;gap:6px;justify-items:start}
.profil-mail{font-size:13px;color:var(--ink);font-weight:600;word-break:break-all;line-height:1.4}
.profil-eintrag{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;font:inherit;font-size:13.5px;color:var(--ink);text-decoration:none;
  padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;
  transition:background .15s var(--ease)}
.profil-eintrag:hover{background:var(--brand-soft);color:var(--brand-ink)}
.profil-eintrag-ic{width:18px;text-align:center;opacity:.75;flex:none}

/* ============================================================
   UNTERSEITEN: Planauswahl und Profil
   ============================================================ */
.konto-seite{padding:54px 0 90px;position:relative;z-index:1}
.wrap.schmal{max-width:760px;margin:0 auto;padding:0 26px}
.seite-kopf{margin-bottom:28px}
.seite-kopf.mitte{text-align:center}
.seite-kopf h1{font-size:clamp(26px,4vw,38px);letter-spacing:-.03em;margin:10px 0 12px;line-height:1.15}
.seite-lead{color:var(--muted);font-size:15px;line-height:1.65;max-width:60ch}
.seite-kopf.mitte .seite-lead{margin:0 auto}
.zurueck{font-size:13.5px;color:var(--muted);text-decoration:none}
.zurueck:hover{color:var(--brand-ink)}

.karte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow)}
.karte + .karte{margin-top:18px}
.karte-t{font-size:19px;letter-spacing:-.02em;margin:0 0 8px}
.karte.hinweis{border-color:var(--line2)}

/* Formularfelder: bewusst KEIN Glas - auf einem Eingabefeld macht die
   Unschaerfe den Text schwer lesbar. */
.feld{display:grid;gap:6px;margin-bottom:16px}
.feld-l{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.feld-h{font-size:12px;color:var(--faint);line-height:1.5}
.eingabe{width:100%;background:var(--surface-2);border:1px solid var(--line2);
  border-radius:var(--r-sm);padding:12px 14px;color:var(--ink);font:inherit;font-size:14.5px}
.eingabe:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.eingabe:disabled{opacity:.6;cursor:not-allowed}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){ .feld-paar{grid-template-columns:1fr} }

.profil-meld{margin:4px 0 16px;font-size:13.5px;line-height:1.55;
  border-radius:var(--r-sm);padding:10px 13px}
.profil-meld.ok{background:var(--ok-soft);color:var(--ok-ink)}
.profil-meld.no{background:var(--no-soft);color:var(--no-ink)}

/* Planauswahl */
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}
@media (max-width:720px){ .wahl{grid-template-columns:1fr} }
.wahl-karte{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:26px 24px;cursor:pointer;font:inherit;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .2s var(--ease)}
.wahl-karte:hover{transform:translateY(-3px);border-color:var(--brand)}
.wahl-karte.voll{border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.wahl-flag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-ink);background:var(--brand-soft);border-radius:999px;padding:4px 11px}
.wahl-n{font-size:21px;font-weight:750;letter-spacing:-.02em;margin-top:12px}
.wahl-p{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:6px 0 14px}
.wahl-p b{font-size:27px;letter-spacing:-.03em}
.wahl-p span{font-size:13px;color:var(--muted)}
.wahl-karte .ticks{margin:0 0 18px}
.wahl-los{margin-top:auto;font-size:14.5px;font-weight:650;color:var(--brand-ink)}
.wahl-fein{text-align:center;font-size:13px;color:var(--muted);line-height:1.6}
.wahl-fein a{color:var(--brand-ink)}

/* ==== LIQUID GLASS (24.08.2026) ============================
   Dieselbe Oberflaeche wie in der App: Milchglas statt Vollton.
   Drei Zutaten, immer zusammen:
     1. eine halbdurchsichtige Fuellung - der Untergrund scheint durch
     2. backdrop-filter - ohne Unschaerfe ist es kein Glas, nur blass
     3. ein heller Saum auf der Oberkante plus weicher Schlagschatten

   Dunkles Glas ist ein HELLER Schleier ueber Farbe, keine schwarze Platte.
   Ohne Farbe dahinter waere es nur grau - deshalb die Tapete auf body.

   --surface / --surface-2 bleiben als Vollton stehen: Rueckfall fuer
   Browser ohne backdrop-filter. Erzeugt von bauen/glas-seite.py.
   =========================================================== */
:root{
  --glas-fill:rgba(255,255,255,.085);
  --glas-fill-2:rgba(255,255,255,.055);
  --glas-tief:rgba(10,15,18,.55);
  --glas-dicht:rgba(13,19,23,.94);
  --glas-kante:rgba(255,255,255,.14);
  --glas-kante-hell:rgba(255,255,255,.34);
  --glas-lack:linear-gradient(157deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 44%,rgba(255,255,255,0) 72%);
  --glas-rim:inset 0 1px 0 var(--glas-kante-hell),inset 0 -1px 0 rgba(255,255,255,.07);
  --glas-schatten:0 1px 2px rgba(0,0,0,.28),0 18px 40px -16px rgba(0,0,0,.6);
  --glas-schatten-hoch:0 8px 20px rgba(0,0,0,.34),0 34px 62px -18px rgba(0,0,0,.68);
  --unschaerfe:saturate(175%) blur(20px);
}
:root.light{
  --glas-fill:rgba(255,255,255,.62);
  --glas-fill-2:rgba(255,255,255,.45);
  --glas-tief:rgba(255,255,255,.72);
  --glas-dicht:rgba(252,254,253,.95);
  --glas-kante:rgba(255,255,255,.8);
  --glas-kante-hell:rgba(255,255,255,.95);
  --glas-lack:linear-gradient(157deg,rgba(255,255,255,.6),rgba(255,255,255,.14) 46%,rgba(255,255,255,0) 74%);
  --glas-rim:inset 0 1px 0 var(--glas-kante-hell),inset 0 0 0 1px rgba(255,255,255,.4);
  --glas-schatten:0 1px 2px rgba(15,60,55,.06),0 16px 36px -16px rgba(15,60,55,.2);
  --glas-schatten-hoch:0 10px 24px rgba(15,60,55,.12),0 32px 58px -20px rgba(15,60,55,.26);
}

/* Squircle statt Karteikasten - dieselben Werte wie in der App */
:root{--r-sm:14px;--r-md:20px;--r-lg:28px;--r-xl:34px}

/* Die Tapete. Fest verankert, damit sie beim Scrollen steht und das Glas
   sich darueber bewegt - genau das macht den Eindruck von Scheiben aus. */
body{
  background:
    radial-gradient(62rem 46rem at 6% -18%, rgba(23,183,166,.34), transparent 60%),
    radial-gradient(54rem 42rem at 102% -10%, rgba(133,92,230,.32), transparent 62%),
    radial-gradient(60rem 44rem at 84% 110%, rgba(48,120,224,.28), transparent 60%),
    radial-gradient(70rem 50rem at 50% 42%, rgba(34,86,120,.30), transparent 68%),
    linear-gradient(168deg,#0b141a,#080c11 50%,#0a0d16);
  background-attachment:fixed}
:root.light body{
  background:
    radial-gradient(62rem 46rem at 6% -18%, rgba(13,148,136,.20), transparent 60%),
    radial-gradient(54rem 42rem at 102% -10%, rgba(124,83,216,.17), transparent 62%),
    radial-gradient(60rem 44rem at 84% 110%, rgba(43,111,212,.16), transparent 60%),
    linear-gradient(168deg,#f2f6f4,#eef2f0 55%,#e9eef1);
  background-attachment:fixed}

/* Die vorhandenen Farbschleier duerfen leiser werden - die Tapete traegt
   jetzt die Farbe, und zweimal dasselbe uebereinander wird Matsch. */
.glow{opacity:.55}

/* ---- Traeger: die grossen Flaechen ---------------------------------- */
.bcard,.demo-card,.disclaimer,.dside,
.f,.faq details,.h,.karte,
.ko,.lifetime,.m,.pain,
.ph-card,.phone,.plan,.profil-menu,
.src-note,.startcta,.stat,.step,
.wahl-karte{
  background:var(--glas-lack),var(--glas-fill);
  -webkit-backdrop-filter:var(--unschaerfe);
  backdrop-filter:var(--unschaerfe);
  border:1px solid var(--glas-kante);
  box-shadow:var(--glas-rim),var(--glas-schatten)}

/* ---- Einlagen: was INNERHALB einer Scheibe liegt, bleibt duenn und
   bekommt KEINE eigene Unschaerfe - zwei uebereinander ergeben Milch. -- */
.opt,.warum{
  background:var(--glas-fill-2);
  border:1px solid var(--glas-kante);
  box-shadow:var(--glas-rim)}

/* ---- Was ueber fremdem Text liegt, wird dicht -----------------------
   Die Kopfleiste klebt oben, waehrend der Inhalt darunter durchscrollt.
   Duennes Glas laesst dort zwei Texte gleichzeitig stehen. */
.nav{background:var(--glas-lack),var(--glas-dicht);
  -webkit-backdrop-filter:saturate(180%) blur(26px);
  backdrop-filter:saturate(180%) blur(26px)}
.profil-menu,.ko-box{
  background:var(--glas-lack),var(--glas-dicht);
  -webkit-backdrop-filter:saturate(180%) blur(26px);
  backdrop-filter:saturate(180%) blur(26px);
  border:1px solid var(--glas-kante);
  box-shadow:var(--glas-rim),var(--glas-schatten-hoch)}

/* ---- Knoepfe: Kapselform wie in der App ---------------------------- */
.btn{border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.18),0 10px 22px -12px rgba(0,0,0,.5)}
.btn.ghost{
  background:var(--glas-lack),var(--glas-fill-2);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--glas-kante);
  box-shadow:var(--glas-rim),var(--glas-schatten)}
.btn:active{transform:scale(.976)}
.nav-konto{border-radius:999px}

/* ---- Anfassen hebt die Scheibe an ---------------------------------- */
.bcard:hover,.demo-card:hover,.disclaimer:hover,.dside:hover,
.f:hover,.h:hover,.karte:hover,.ko:hover,
.lifetime:hover,.m:hover,.pain:hover,.ph-card:hover,
.phone:hover,.plan:hover{
  box-shadow:var(--glas-rim),var(--glas-schatten-hoch);
  border-color:var(--glas-kante-hell)}

/* ---- Rueckfall ------------------------------------------------------
   Ohne backdrop-filter stuende Text auf Text. Das ist kein
   Schoenheitsfehler, das ist unlesbar - also Vollton. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .bcard,.demo-card,.disclaimer,.dside,
.f,.faq details,.h,.karte,
.ko,.lifetime,.m,.pain,
.ph-card,.phone,.plan,.profil-menu,
.src-note,.startcta,.stat,.step,
.wahl-karte,
  .btn.ghost{background:var(--surface)}
  .opt,.warum{background:var(--surface-2)}
  .nav,.profil-menu,.ko-box{background:var(--bg)}
}

/* ============================================================
   HOVER-EFFEKTE
   ------------------------------------------------------------
   Vier Effekte, nachgebaut in unserer eigenen Formsprache und in
   den Farben der Marke - Teal als Grundton, Violett als zweiter
   Ton aus der Rechtsgebiets-Palette.
   ============================================================ */

/* ---- 1. Karten auf gleicher Hoehe, die beim Ueberfahren aufgehen ----
   Die Karten fuellen jetzt die Zeilenhoehe komplett aus (align-items:
   stretch plus Flex-Spalte), dadurch stehen sie in einer Reihe gleich
   hoch - unabhaengig davon, wie lang ihr Text ist. Beim Ueberfahren
   heben sie sich leicht an, skalieren minimal und bekommen einen
   weichen Lichtschein von oben. */
.fgrid{align-items:stretch}
.f{display:flex;flex-direction:column;height:100%;isolation:isolate}
.f > *{position:relative;z-index:1}
.f::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(130% 84% at 50% 0%,color-mix(in srgb,var(--brand) 11%,transparent),transparent 72%);
  transition:opacity .42s var(--ease)}
.f:hover{transform:translateY(-6px) scale(1.014)}
.f:hover::after{opacity:1}

/* ---- 2. Verlaufs-Symbol und Beschriftung ----
   Das Symbol sitzt in einer Flaeche, die aus dem Nichts aufskaliert
   (scale 0 -> 1) und einen Verlauf traegt. Die Beschriftung daneben
   wechselt mit. z-index:-1 haelt den Verlauf hinter dem Emoji, aber
   vor dem Kartenhintergrund. */
/* Feste Breite war ein Fehler: die Karte "Gutachten" traegt "123" als
   Symbol und ist damit deutlich breiter als ein Emoji - der Inhalt lief
   aus dem Kasten heraus und ueber die Beschriftung daneben. min-width
   plus Innenabstand laesst den Kasten mitwachsen. */
.f-ic{position:relative;z-index:0;display:grid;place-items:center;
  min-width:48px;height:48px;padding:0 11px;white-space:nowrap;
  border-radius:15px;flex:none;
  transition:transform .42s var(--spring)}
.f-ic::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 38%,transparent),
                                    color-mix(in srgb,var(--oeff) 30%,transparent));
  transform:scale(0);opacity:0;
  transition:transform .44s var(--ease-out),opacity .3s var(--ease)}
.f:hover .f-ic::before{transform:scale(1);opacity:1}
.f:hover .f-ic{transform:translateY(-2px) scale(1.06)}
.f-num{transition:color .3s var(--ease),background .3s var(--ease),letter-spacing .3s var(--ease)}
.f:hover .f-num{color:var(--ink);letter-spacing:.055em;
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 30%,transparent),
                                   color-mix(in srgb,var(--oeff) 22%,transparent))}

/* ---- 3. Symbole der sozialen Netzwerke ----
   Die Farbflaeche schiebt sich von unten in den Kreis, das Symbol
   dreht sich einmal um die eigene Achse. */
.foot-social a{text-decoration:none;transition:color .25s var(--ease)}
.soc-ic{position:relative;display:grid;place-items:center;flex:none;overflow:hidden;
  width:34px;height:34px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line2)}
.soc-ic::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  transform:translateY(101%);transition:transform .44s var(--ease-out)}
.foot-social svg{position:relative;z-index:1;width:17px;height:17px;opacity:1;
  transition:transform .62s var(--ease-out),color .3s var(--ease)}
.foot-social a:hover{color:var(--ink)}
.foot-social a:hover .soc-ic::before{transform:translateY(0)}
.foot-social a:hover svg{transform:rotateY(360deg);color:#fff}
.foot-social a:hover .soc-ic{border-color:transparent}

/* ---- 4. Der Weiter-Pfeil im Hauptknopf ----
   Der Pfeil startet leicht eingezogen und faehrt beim Ueberfahren
   heraus, waehrend der Lichtsaum unter dem Knopf waechst. In der
   Vorlage blitzt der Pfeil dauerhaft gelb - das ist hier bewusst
   weggelassen, ein dauerpulsender Knopf passt nicht zu einer App,
   die zur Ruhe einlaedt. */
.btn .btn-arrow{transform:translateX(-3px);opacity:.8;
  transition:transform .4s var(--spring),opacity .3s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(5px);opacity:1}
.btn:hover{transform:translateY(-3px);
  box-shadow:0 18px 40px -12px var(--ring),
             0 0 0 1px color-mix(in srgb,var(--brand) 38%,transparent)}

/* ---- Kopfnavigation der Seite: derselbe Unterstrich wie in der App ---- */
.nav-links a{position:relative}
.nav-links a:hover{background:none;color:var(--ink)}
/* Gleiche Mechanik wie in der App: mittige Grundlinie, beim Ueberfahren
   ein Stueck laenger. */
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:3px;margin:0 auto;
  width:60%;height:2px;border-radius:999px;background:var(--brand);
  transform:scaleX(0);transform-origin:50% 50%;opacity:0;
  transition:transform .32s var(--ease-out),opacity .22s var(--ease)}
.nav-links a.act::after{transform:scaleX(1);opacity:1}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1.25);opacity:1}

@media (prefers-reduced-motion: reduce){
  .f,.f-ic,.f-ic::before,.f::after,.soc-ic::before,.foot-social svg,
  .btn .btn-arrow,.nav-links a::after{transition-duration:.01ms}
  .f:hover{transform:none}
}

/* ---- Antwortknoepfe im Demo-Fall sichtbar machen (Light) ----
   Im hellen Modus zieht die Glas-Regel eine fast weisse Kante auf hellem
   Grund - die Knoepfe sahen dadurch aus wie Fliesstext und niemand kam auf
   die Idee, dass man sie anklicken soll. Beantwortete Optionen sind
   ausgenommen, damit richtig/falsch weiter ihre eigenen Farben behalten. */
:root.light .opt:not(.right):not(.wrong):not(.gewaehlt){
  background:#fff;
  border:1.5px solid rgba(12,60,55,.26);
  box-shadow:0 1px 2px rgba(15,60,55,.07)}
:root.light .opt:not(:disabled):not(.right):not(.wrong):not(.gewaehlt):hover{
  border-color:var(--brand);
  background:var(--brand-soft);
  box-shadow:0 2px 10px -3px var(--ring)}

/* Vor- und Nachname nebeneinander; auf schmalen Schirmen untereinander. */
.ko-zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ko-zwei[hidden]{display:none}
@media (max-width:480px){.ko-zwei{grid-template-columns:1fr;gap:0}}

/* ---- Zahlfenster nach der Planwahl ----
   Die Felder sind abgeschaltet, solange kein Anbieter haengt. Ein Formular,
   das Kartendaten annimmt und nichts damit tut, waere schlimmer als keins. */
.zahlkarte{background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--shadow-lift);
  max-width:520px;margin:0 auto;text-align:left}
.zahlkarte-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.zahlkarte-preis{text-align:right}
.zahlkarte-preis b{display:block;font-family:var(--serif);font-size:26px;color:var(--brand)}
.zahlkarte-preis span{font-size:12px;color:var(--faint)}
.zahlkarte-liste{margin-bottom:24px}
.zahlfeld{margin-bottom:14px}
.zahlfeld input{width:100%;box-sizing:border-box;padding:13px 15px;
  border:1px solid var(--line2);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:15px}
.zahlfeld input:disabled{opacity:.55;cursor:not-allowed}
.zahlkarte .btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.zahlkarte-hinweis{font-size:12.5px;line-height:1.6;color:var(--faint);margin:14px 0 20px}