:root{color-scheme:light}body{margin:0;padding:0}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Welt: Telefonnotiz-Block. Weißes Formularpapier auf hellgrauem Schreibtisch, Navy-Druck,
   blauer Kugelschreiber für Notizen, Lime als Textmarker und Stempelfarbe. DIN-artige
   Schmalschrift für Vordruck-Typo, Geist für Fließtext, Geist Mono für eingetragene Daten. */
:root{
  --desk:#E4E8ED; --paper:#FFFFFF; --ink:#0B1D35; --ink2:#41526A; --ink3:#5B6B80; --rule:#CCD4DE; --rule2:#9CA9B8;
  --pen:#2B4FA3; --lime:#2EE6A6; --lime-ink:#007A59; --mark:rgba(46,230,166,.62); --postit:#FFF1A6; --red:#B42318;
  --display:"Barlow Condensed","Arial Narrow",sans-serif; --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace; --hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  --ease:cubic-bezier(.2,.8,.2,1);
  --navy:#0B1D35; --blue:#007A59; --cyan:#2EE6A6;
  --bg:#E4E8ED; --fg:#0B1D35; --fg2:#41526A; --fg3:#5B6B80; --line:rgba(11,29,53,.12); --surface:#FFFFFF; --card:#FFFFFF;
  --signal:#007A59; --fg-rgb:11,29,53; --sig-rgb:0,147,107; --btn-bg:#0B1D35; --btn-fg:#FFFFFF; --btn-hover:#1A3355; --btn2:rgba(11,29,53,.22);
  color-scheme: light;
}
*{box-sizing:border-box}
body{background:var(--desk); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased}
::selection{background:var(--lime); color:var(--ink)}
html{scrollbar-color:var(--rule2) var(--desk); accent-color:var(--lime-ink)}
input,textarea{caret-color:var(--pen)}
:focus-visible{outline:2px solid var(--lime-ink); outline-offset:3px}
a{text-underline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ico{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
svg[data-logo]{display:block; flex:none; overflow:visible}
.vlogo{display:inline-flex; align-items:center; gap:9px; color:var(--ink); --vokalio-haken:#00936B}
.vlogo .bm{height:21px; width:auto}
.vlogo .wm{height:13px; width:auto}

/* Rahmen + Leiste */
.stage{padding-block:20px 110px; padding-inline:16px}
.frame{container:site / inline-size; width:100%; max-width:1440px; margin:0 auto; background:var(--desk); overflow:clip; border-radius:14px; box-shadow:0 40px 100px -50px rgba(11,29,53,.45)}
body.m .frame{max-width:390px; border:10px solid #0A1424; border-radius:42px}
.rb{position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:100; display:flex; align-items:center; gap:6px; max-width:calc(100vw - 24px); padding:6px; border-radius:999px; background:rgba(5,14,28,.92); box-shadow:0 24px 60px -18px rgba(0,0,0,.55); color:#fff}
.rb-badge{flex:none; padding:8px 12px; border-radius:999px; background:#FFB020; color:var(--ink); font:600 11px/1 var(--sans)}
.rb-seg{display:flex; gap:2px; padding:3px; border-radius:999px; background:rgba(255,255,255,.08)}
.rb-seg button{border:0; padding:8px 13px; border-radius:999px; background:none; color:rgba(255,255,255,.72); font:500 12.5px/1 var(--sans); cursor:pointer}
.rb-seg button[aria-pressed="true"]{background:#fff; color:var(--ink)}

/* Grundbausteine */
.wrap{max-width:1200px; margin:0 auto; padding:0 20px}
.blk{padding:72px 0}
.h2{margin:0; max-width:17ch; font:700 44px/.95 var(--display); letter-spacing:-.005em; color:var(--ink); text-wrap:balance}
.h2 .soft{display:block; color:var(--ink3)}
.lead{margin:18px 0 0; max-width:36rem; font-size:17px; line-height:1.6; color:var(--ink2)}
.head{display:grid; gap:4px; margin-bottom:40px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border:1.5px solid var(--ink); border-radius:6px; background:var(--ink); color:#fff; font:600 15px/1.2 var(--sans); text-decoration:none; cursor:pointer; transition:background-color .2s, color .2s}
.btn:hover{background:#1A3355}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:rgba(11,29,53,.06)}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btns{display:flex; flex-wrap:wrap; gap:12px}
.sheet{position:relative; background:var(--paper); border-radius:3px; box-shadow:0 1px 0 rgba(11,29,53,.06), 0 22px 44px -30px rgba(11,29,53,.45)}
.perf::before{content:""; position:absolute; left:0; right:0; top:-6px; height:12px; background:radial-gradient(circle at 7px 6px, var(--desk) 3.3px, transparent 3.8px) 0 0 / 14px 12px repeat-x}
.fhead{display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 28px; padding-bottom:10px; border-bottom:2px solid var(--ink)}
.ft{margin-right:auto; font:700 17px/1 var(--display); letter-spacing:.14em; text-transform:uppercase}
.fk{display:flex; align-items:baseline; gap:8px; font:600 12.5px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)}
.fk b{font:500 14px/1 var(--mono); letter-spacing:0; text-transform:none; color:var(--ink); font-variant-numeric:tabular-nums}
.hand{font-family:var(--hand); color:var(--pen); font-weight:500}
.mk{background:linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 94%, transparent 94%); padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.tk{width:22px; height:22px; fill:none; stroke:var(--pen); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

/* Header */
.site-h{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.96); border-bottom:1px solid var(--rule)}
.site-h .in{max-width:1200px; margin:0 auto; height:62px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo{display:flex; color:var(--ink); text-decoration:none}
.nav{display:none; gap:28px}
.nav a{color:var(--ink2); text-decoration:none; font:500 14px/1 var(--sans)}
.nav a:hover{color:var(--ink)}
.site-h .btn{padding:10px 16px; font-size:14px}

/* Hero: die Telefonnotiz */
.hero{padding:40px 0 56px}
.note{padding:26px 20px 30px; transition:transform .35s var(--ease), opacity .35s var(--ease)}
.note.tear{transform:translateY(-16px) rotate(-.6deg); opacity:0}
.note h1{margin:28px 0 0; font:800 56px/.88 var(--display); letter-spacing:-.005em; text-wrap:balance}
.note-grid{display:grid; gap:30px; margin-top:28px}
.ffs{position:relative}
.ff{display:grid; grid-template-columns:96px 1fr; align-items:end; gap:10px; padding:11px 0 9px; border-bottom:1px solid var(--rule)}
.lbl{font:600 12.5px/1.3 var(--display); letter-spacing:.09em; text-transform:uppercase; color:var(--ink3)}
.val{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; min-height:30px}
.scrib{position:relative; display:inline-block; font:500 27px/1 var(--hand); color:var(--pen); transform:rotate(-1.2deg); transition:opacity .3s}
.scrib::after{content:""; position:absolute; left:-3px; right:-3px; top:52%; height:2.2px; background:var(--pen); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease)}
.typed{font:500 15.5px/1.3 var(--mono); color:var(--ink); opacity:0; transform:translateY(5px); transition:opacity .3s, transform .3s var(--ease)}
.ff.done .scrib{opacity:.4}
.ff.done .scrib::after{transform:scaleX(1)}
.ff.done .typed{opacity:1; transform:none}
.cbx{display:flex; flex-wrap:wrap; gap:12px 22px; padding:14px 0 4px}
.cb{display:flex; align-items:center; gap:9px; font:600 13px/1.2 var(--display); letter-spacing:.07em; text-transform:uppercase; color:var(--ink2)}
.cb i{position:relative; display:block; width:19px; height:19px; border:1.6px solid var(--ink); flex:none}
.cb i svg{position:absolute; left:-3px; top:-6px; width:26px; height:26px; fill:none; stroke:var(--lime-ink); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:30; stroke-dashoffset:30; transition:stroke-dashoffset .3s var(--ease)}
.cb.on i svg{stroke-dashoffset:0}
.stamp{position:absolute; right:2%; top:38%; padding:8px 16px 7px; border:3.5px solid var(--lime-ink); border-radius:7px; color:var(--lime-ink); font:800 40px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; text-align:center; filter:url(#rough); mix-blend-mode:multiply; opacity:0; transform:rotate(-10deg) scale(1.35); pointer-events:none}
.stamp small{display:block; margin-top:4px; font:600 11px/1 var(--sans); letter-spacing:.04em; text-transform:none}
.note.done .stamp{opacity:.9; transform:rotate(-10deg) scale(1); transition:transform .28s cubic-bezier(.2,1.5,.4,1), opacity .12s}
.margin-note{display:none; position:absolute; right:-14px; top:-44px; white-space:nowrap; font:500 25px/1 var(--hand); letter-spacing:0; text-transform:none; color:var(--pen); transform:rotate(4deg)}
.margin-note svg{display:inline-block; width:40px; height:26px; margin-left:4px; vertical-align:-6px; fill:none; stroke:var(--pen); stroke-width:1.8; stroke-linecap:round}
.hero-copy p{margin:0; max-width:32rem; font-size:17px; line-height:1.6; color:var(--ink2)}
.hero-copy p strong{color:var(--ink); font-weight:600}
.hero-copy .btns{margin-top:24px}
.assure{display:flex; flex-wrap:wrap; gap:6px 18px; margin:18px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--ink2)}
.assure li::before{content:"✓"; margin-right:6px; color:var(--lime-ink); font-weight:700}
.note-ctrl{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; font-size:13.5px; color:var(--ink2)}
.note-ctrl button{border:0; background:none; color:var(--ink); font:600 14px/1 var(--sans); cursor:pointer; text-decoration:underline; text-underline-offset:4px}

/* Problem: Zettelwirtschaft */
.zettel{display:grid; gap:44px 28px}
.art{position:relative; height:230px; margin-bottom:26px}
.print{position:absolute; inset:6px 22px 30px 0; padding:9px 9px 26px; background:#fff; box-shadow:0 14px 30px -18px rgba(11,29,53,.5); transform:rotate(-2.2deg)}
.print img{display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.5) contrast(1.05)}
.print figcaption{position:absolute; left:10px; bottom:7px; font-size:10.5px; color:var(--ink3)}
.tape{position:absolute; top:-9px; left:38%; width:74px; height:22px; background:rgba(255,255,255,.62); border:1px solid rgba(11,29,53,.07); transform:rotate(-5deg)}
.postit{position:absolute; right:0; bottom:0; width:56%; padding:12px 12px 14px; background:var(--postit); color:var(--pen); font:500 22px/1.05 var(--hand); transform:rotate(3deg); box-shadow:0 12px 22px -14px rgba(11,29,53,.55)}
.mail{position:absolute; inset:10px 8px 10px 4px; padding:16px; background:#fff; border:1px solid var(--rule); transform:rotate(1.4deg); box-shadow:0 14px 30px -20px rgba(11,29,53,.45); font-size:13px}
.mail b{display:block; margin-bottom:12px; font-size:13.5px}
.mail .r{display:flex; gap:8px; padding:8px 0; border-bottom:1px dotted var(--rule2); color:var(--ink3)}
.mail .r span{flex:1; color:var(--rule2)}
.lock{position:absolute; inset:0 30px 6px 18px; padding:16px; border-radius:24px; background:#0B1D35; color:#fff; transform:rotate(-1.2deg); box-shadow:0 18px 34px -18px rgba(11,29,53,.7)}
.lock .lt{font:500 42px/1 var(--mono); letter-spacing:-.02em; text-align:center; font-variant-numeric:tabular-nums}
.lock .ld{margin:4px 0 14px; text-align:center; font-size:12px; color:rgba(255,255,255,.6)}
.lock .nt{margin-top:8px; padding:9px 11px; border-radius:12px; background:rgba(255,255,255,.12); font-size:12.5px; line-height:1.35}
.lock .nt b{display:block; font-size:11.5px; color:rgba(255,255,255,.6); font-weight:500}
.pile .p1, .pile .p2, .pile .p3{position:absolute; box-shadow:0 12px 26px -16px rgba(11,29,53,.5)}
.pile .p1{left:0; top:14px; width:74%; padding:10px 12px; border-radius:14px 14px 14px 4px; background:#DCF8C6; font-size:13.5px; transform:rotate(-3deg)}
.pile .p1 small{display:block; font-size:11px; color:#5B7A52}
.pile .p2{right:0; top:84px; width:78%; padding:12px; background:#fff; border:1px solid var(--rule); font-size:13px; transform:rotate(2deg)}
.pile .p2 small{display:block; font-size:11px; color:var(--ink3)}
.pile .p3{left:8%; bottom:0; width:62%; padding:12px; background:var(--postit); color:var(--pen); font:500 22px/1.05 var(--hand); transform:rotate(-1.5deg)}
.zt{font:500 30px/1 var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.zt.off{color:var(--lime-ink)}
.zw{margin-top:6px; font:600 12.5px/1 var(--display); letter-spacing:.09em; text-transform:uppercase; color:var(--ink3)}
.z h3{margin:14px 0 0; font-size:19px; line-height:1.3; letter-spacing:-.01em}
.z p{margin:8px 0 0; font-size:15px; line-height:1.6; color:var(--ink2)}

/* Vergleich als Formular */
.cmpwrap{overflow-x:auto; padding:6px 22px 22px; margin:0 -2px}
.cmp{width:100%; min-width:820px; border-collapse:collapse; font-size:14.5px}
.cmp th{padding:12px 10px; border-bottom:2px solid var(--ink); text-align:left; font:600 12.5px/1.2 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); vertical-align:bottom}
.cmp td{padding:14px 10px; border-bottom:1px solid var(--rule); vertical-align:middle; line-height:1.45}
.cmp td:first-child{font-weight:600; white-space:nowrap}
.cmp td.n{color:var(--rule2); font-size:20px}
.cmp td.p{font:500 21px/1 var(--hand); color:var(--pen)}
.cmp td.w{color:var(--ink2); font-size:14px; min-width:220px}
.cmp tr.vok td{background:rgba(46,230,166,.26); border-bottom-color:rgba(0,122,89,.3)}
.cmp tr.vok .tk{stroke:var(--lime-ink)}
.cmp tr.vok td:first-child{display:flex; align-items:center; gap:8px}
.cmp tr.vok .bm{height:18px; width:auto; --vokalio-haken:#007A59}
.cmpnote{margin:10px 0 0; font-size:12.5px; color:var(--ink3)}
.gains{display:grid; gap:24px; margin-top:44px}
.gain{display:grid; grid-template-columns:28px 1fr; gap:10px}
.gain h3{margin:0; font-size:18px; letter-spacing:-.01em}
.gain p{margin:6px 0 0; font-size:15px; line-height:1.6; color:var(--ink2)}
.strip{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:44px; padding-top:22px; border-top:2px solid var(--ink)}
.strip p{margin:0; max-width:34rem; font:700 26px/1.05 var(--display); letter-spacing:-.005em}

/* Leistungsverzeichnis */
.lv{padding:22px 20px 24px}
.lvh{display:none}
.pos{display:grid; gap:6px 24px; padding:18px 0; border-bottom:1px solid var(--rule)}
.pos .pn{font:500 14px/1 var(--mono); color:var(--ink3)}
.pos .pt{font:700 26px/1 var(--display); letter-spacing:-.005em}
.pos .pd p{margin:0; font-size:15px; line-height:1.6; color:var(--ink2)}
.pos .pd ul{display:flex; flex-wrap:wrap; gap:4px 18px; margin:10px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--ink)}
.pos .pd li::before{content:"✓"; margin-right:6px; color:var(--lime-ink); font-weight:700}
.pos .hint{margin-top:10px; font:500 21px/1.1 var(--hand); color:var(--pen)}
.lvf{margin:16px 0 0; font-size:14px; color:var(--ink2)}
.lvf b{color:var(--ink)}

/* Laufzettel */
.lauf{padding:22px 20px 26px}
.st{display:grid; gap:26px; margin-top:22px}
.station h3{display:flex; align-items:center; gap:12px; margin:0; font:700 26px/1 var(--display)}
.station h3 i{display:block; width:22px; height:22px; border:1.8px solid var(--ink)}
.station .no{font:500 14px/1 var(--mono); color:var(--ink3)}
.station p{margin:10px 0 0; font-size:15px; line-height:1.6; color:var(--ink2)}
.sig{display:flex; gap:8px; align-items:baseline; margin-top:16px; font:600 12px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)}
.sig span{flex:1; border-bottom:1px dotted var(--rule2); height:1px}

/* Kartei */
.ktabs{display:flex; gap:4px; overflow-x:auto; padding:0 2px; scrollbar-width:none}
.ktab{flex:none; padding:11px 16px 10px; border:1px solid var(--rule); border-bottom:0; border-radius:8px 8px 0 0; background:#EEF1F5; color:var(--ink2); font:600 15px/1 var(--display); letter-spacing:.05em; text-transform:uppercase; cursor:pointer}
.ktab[aria-selected="true"]{position:relative; top:1px; background:#fff; color:var(--ink)}
.kcard{display:grid; gap:26px; padding:26px 20px; border:1px solid var(--rule); border-radius:0 8px 8px 8px; background:#fff; box-shadow:0 22px 44px -32px rgba(11,29,53,.45)}
.kcard h3{margin:0; font:700 34px/1 var(--display)}
.kcard .kd{margin:12px 0 0; max-width:32rem; font-size:15.5px; line-height:1.6; color:var(--ink2)}
.ktopics{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.ktopics span{padding:6px 10px; border:1px solid var(--rule); border-radius:4px; font-size:13px; color:var(--ink2)}
.dlg{margin:0; padding:0; list-style:none}
.dlg li{display:grid; grid-template-columns:62px 1fr; gap:10px; padding:12px 0; border-bottom:1px dotted var(--rule2); font-size:15px; line-height:1.5}
.dlg li b{font:600 12.5px/1.6 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)}
.dlg li.a span{color:var(--ink); font-weight:500}
.kres{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:18px}
.kres .badge{padding:7px 12px; border:2.5px solid var(--lime-ink); border-radius:6px; color:var(--lime-ink); font:700 15px/1.1 var(--display); letter-spacing:.06em; text-transform:uppercase; transform:rotate(-2deg)}
.fade{animation:fadeup .35s var(--ease)}
@keyframes fadeup{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* Merkblatt */
.merk{padding:22px 20px 26px}
.paras{display:grid; gap:24px; margin-top:22px}
.para h3{margin:0; font:700 24px/1 var(--display)}
.para h3 span{font:500 14px/1 var(--mono); color:var(--ink3); margin-right:10px}
.para p{margin:10px 0 0; font-size:15px; line-height:1.6; color:var(--ink2)}
.proto{margin-top:26px; padding-top:16px; border-top:2px dashed var(--rule2); font:400 12.5px/1.75 var(--mono); color:var(--ink2)}
.proto b{display:block; margin-bottom:6px; font:600 12.5px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)}
.proto div span{color:var(--ink3); margin-right:12px}

/* Preisblatt */
.preis{padding:22px 20px 26px}
.ptabwrap{overflow-x:auto; margin-top:8px}
.ptab{width:100%; min-width:640px; border-collapse:collapse}
.ptab th{padding:12px 10px; border-bottom:2px solid var(--ink); text-align:left; font:600 12.5px/1.2 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)}
.ptab th:last-child, .ptab td:last-child{text-align:right}
.ptab td{padding:18px 10px; border-bottom:1px solid var(--rule); font-size:15px; color:var(--ink2); vertical-align:middle}
.ptab td.pk{font:700 26px/1 var(--display); color:var(--ink)}
.ptab td.pk em{display:inline-block; margin-left:10px; font:500 21px/1 var(--hand); font-style:normal; color:var(--pen); transform:rotate(-3deg)}
.ptab td.mn{font:500 16px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums}
.ptab td.pr{font:600 24px/1 var(--mono); color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.ptab td.pr small{font:400 13px/1 var(--sans); color:var(--ink3)}
.ptab tr.hl td{background:rgba(46,230,166,.26); border-bottom-color:rgba(0,122,89,.3)}
.pcols{display:grid; gap:28px; margin-top:28px}
.pcols h3{margin:0 0 10px; font:700 20px/1 var(--display); letter-spacing:.02em}
.inc{display:grid; gap:9px; margin:0; padding:0; list-style:none; font-size:15px}
.inc li::before{content:"✓"; margin-right:8px; color:var(--lime-ink); font-weight:700}
.adds{width:100%; border-collapse:collapse; font-size:15px}
.adds td{padding:10px 0; border-bottom:1px dotted var(--rule2)}
.adds td small{margin-left:6px; color:var(--ink3); font-size:12.5px}
.adds td:last-child{text-align:right; font:500 15px/1 var(--mono); white-space:nowrap}
.rab{margin:12px 0 0; font-size:14px; line-height:1.55; color:var(--ink2)}
.foot{margin-top:24px; padding-top:14px; border-top:1px solid var(--rule); font-size:13px; line-height:1.6; color:var(--ink3)}
.preis .btns{margin-top:22px}

/* Visitenkarten */
.cards{display:grid; gap:22px}
.vcard{display:flex; flex-direction:column; justify-content:space-between; gap:22px; aspect-ratio:85 / 55; padding:22px 24px; background:#fff; box-shadow:0 18px 34px -24px rgba(11,29,53,.5); transform:rotate(var(--r,0deg))}
.vcard .vlogo .bm{height:16px} .vcard .vlogo .wm{height:10px}
.vrow{display:flex; align-items:center; gap:16px}
.av{display:grid; place-items:center; flex:none; width:58px; height:58px; border-radius:50%; background:#0B1D35; color:var(--lime); font:600 18px/1 var(--mono)}
.vrow h3{margin:0; font:700 26px/1 var(--display)}
.vrow p{margin:5px 0 0; font-size:14px; color:var(--ink2)}

/* FAQ */
.faqg{display:grid; gap:34px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:400 22px/1 var(--mono); color:var(--ink3)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0; padding:0 0 18px; max-width:40rem; font-size:15.5px; line-height:1.6; color:var(--ink2)}
.more{margin:12px 0 0; font-size:14px; color:var(--ink3)}

/* Abschluss */
.closing{padding:34px 20px 40px; text-align:center}
.bigstamp{display:inline-block; margin:6px 0 0; padding:10px 26px 8px; border:5px solid var(--lime-ink); border-radius:10px; color:var(--lime-ink); font:800 64px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; filter:url(#rough); mix-blend-mode:multiply; transform:rotate(-6deg)}
.closing h2{margin:26px auto 0; max-width:16ch; font:800 46px/.95 var(--display); text-wrap:balance}
.closing .lead{margin-inline:auto}
.closing .btns{justify-content:center; margin-top:26px}
.closing .tel{margin-top:16px; font-size:14px; color:var(--ink2)}
.closing .tel b{font:500 15px/1 var(--mono); color:var(--ink)}
.site-f{padding:26px 0 40px}
.site-f .in{max-width:1200px; margin:0 auto; padding:16px 20px 0; display:grid; gap:10px; border-top:1px solid var(--rule2); font-size:12.5px; line-height:1.6; color:var(--ink3)}

@media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation:none!important; transition:none!important} }
/* ── Produkt-Bühne ────────────────────────────── */
.stage-sec.t-dark{background:radial-gradient(1000px 600px at 50% 100%, rgba(46,230,166,.10), transparent 65%), #0B1D35}
.stage-sec.t-mist{background:radial-gradient(1000px 600px at 50% 100%, rgba(0,147,107,.10), transparent 65%), #F3F6FA}
.steptabs{display:flex; gap:4px; width:max-content; max-width:100%; overflow-x:auto; margin-top:44px; padding:5px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.steptabs button{flex:none; display:flex; align-items:center; gap:8px; border:0; padding:9px 14px; border-radius:999px; background:none; color:var(--fg2); font:600 13px/1 var(--sans); cursor:pointer; transition:background-color .25s, color .25s}
.steptabs button b{font:600 11px/1 var(--mono); opacity:.6}
.steptabs button[aria-selected="true"]{background:var(--btn-bg); color:var(--btn-fg)}
.steptabs button[aria-selected="true"] b{opacity:1}
.app{margin-top:22px; overflow:hidden; border-radius:20px; background:#F5F7FA; color:#0B1D35; box-shadow:0 60px 120px -50px rgba(0,0,0,.6), 0 0 0 1px rgba(11,29,53,.08)}
.app-bar{display:flex; align-items:center; gap:7px; height:40px; padding:0 14px; background:#FFFFFF; border-bottom:1px solid #E7ECF2}
.app-bar i{display:block; width:10px; height:10px; border-radius:50%; background:#E2E8F0}
.app-url{margin:0 auto; padding:5px 14px; border-radius:8px; background:#F1F4F8; font:500 11px/1 var(--mono); color:#64748B; max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-in{display:grid}
.p-side{display:none; flex-direction:column; gap:2px; padding:18px 12px; background:#0B1D35; color:#fff}
.p-logo{display:flex; align-items:center; gap:9px; padding:4px 10px 18px; font:600 12px/1 var(--sans); letter-spacing:.2em}
.p-logo svg{width:19px; height:19px}
.p-nav{display:flex; justify-content:space-between; align-items:center; padding:9px 10px; border-radius:10px; font-size:13px; color:rgba(255,255,255,.64)}
.p-nav.on{background:rgba(255,255,255,.1); color:#fff}
.p-nav b{padding:3px 7px; border-radius:999px; background:var(--blue); color:#fff; font:600 10px/1 var(--sans)}
.p-grp{padding:16px 10px 6px; font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.38)}
.p-user{display:flex; align-items:center; gap:10px; margin-top:auto; padding:14px 8px 0; border-top:1px solid rgba(255,255,255,.1); font-size:12px; line-height:1.35}
.p-user small{color:rgba(255,255,255,.5)}
.av{display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--blue); color:#fff; font:600 11px/1 var(--sans)}
.p-main{min-width:0; padding:18px}
.p-top{display:flex; justify-content:space-between; align-items:center; gap:12px; font:500 10.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#64748B}
.p-search{display:none; padding:7px 12px; border:1px solid #E2E8F0; border-radius:9px; background:#fff; text-transform:none; letter-spacing:0}
.p-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:14px; margin-top:18px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:#E2F7EF; color:var(--blue); font:600 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.live{background:#E3F6EE; color:#047857}
.pill.done{background:#0B1D35; color:#fff}
.p-head h4{margin:10px 0 4px; font:600 22px/1.2 var(--sans); letter-spacing:-.02em}
.p-head p{margin:0; font-size:13px; color:#64748B}
.p-actions{display:flex; gap:8px}
.pa{padding:9px 13px; border:1px solid #E2E8F0; border-radius:10px; background:#fff; color:#0B1D35; font:600 12px/1 var(--sans)}
.pa.pri{background:var(--blue); border-color:var(--blue); color:#fff}
.p-prog{position:relative; height:4px; margin-top:20px; border-radius:4px; background:#E3E9F1; overflow:hidden}
.p-prog i{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--blue); transition:width .5s var(--ease)}
.p-body{display:grid; gap:14px; margin-top:16px}
.pcard{min-width:0; padding:18px; border:1px solid #E8EDF3; border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(11,29,53,.04)}
.pcard h5{display:flex; justify-content:space-between; gap:8px; margin:0 0 14px; font:600 10px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#64748B}
.panel-in{animation:rise .4s var(--ease)}
@keyframes rise{from{transform:translateY(6px)} to{transform:none}}
.tr{display:grid; gap:10px}
.msg{max-width:86%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.45}
.msg small{display:block; margin-bottom:4px; font:500 9.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; opacity:.6}
.msg.v{justify-self:start; background:#F1F4F8; border-bottom-left-radius:4px}
.msg.a{justify-self:end; background:#0B1D35; color:#fff; border-bottom-right-radius:4px}
.dl{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:0; font-size:13.5px}
.dl dt{color:#64748B}
.dl dd{margin:0; font-weight:500; min-width:0}
.sum{margin-top:14px; padding:12px 14px; border-radius:12px; background:#F5F8FC; font-size:13px; line-height:1.5; color:#334155}
.sum b{display:block; margin-bottom:4px; font:600 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#64748B}
.cal{display:grid; grid-template-columns:30px repeat(5,minmax(0,1fr)); gap:4px; font:500 10px/1 var(--mono); color:#64748B}
.cal .hd{padding:2px 0 6px; text-align:center}
.cal .t{padding-top:9px}
.cal .c{height:30px; border-radius:7px; background:#F5F8FC}
.cal .c.busy{background:repeating-linear-gradient(135deg,#EDF1F6 0 6px,#E5EBF2 6px 12px)}
.cal .c.book{padding:5px 6px; overflow:hidden; background:var(--blue); color:#fff; font:600 9.5px/1.15 var(--sans); box-shadow:0 8px 18px -8px rgba(0,122,89,.8)}
.capt{margin:12px 0 0; font-size:12.5px; line-height:1.45; color:#64748B}
.wa{padding:12px 14px; border-radius:14px; background:#E7F7EE; font-size:13.5px; line-height:1.5}
.wa + .wa{margin-top:10px}
.wa.out{background:#F1F4F8}
.wa small{display:block; margin-bottom:5px; font:600 9.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#64748B}
.res{display:grid; gap:12px}
.res div{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:12px; border-bottom:1px solid #EEF2F6; font-size:13px; color:#64748B}
.res div:last-child{padding-bottom:0; border-bottom:0}
.res strong{color:#0B1D35; font:600 14.5px/1.25 var(--sans); text-align:right}
.log{display:grid; gap:0; margin:0; padding:0; list-style:none}
.log li{position:relative; display:grid; grid-template-columns:42px 1fr; gap:8px; padding:0 0 12px; font-size:12.5px; line-height:1.4; color:#334155}
.log time{font:500 11px/1.4 var(--mono); color:#64748B}
.log li.fresh{animation:rise .35s var(--ease)}
.p-res{margin-top:6px; padding-top:14px; border-top:1px solid #EEF2F6}
.p-res small{display:block; font:600 9.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#64748B}
.p-res strong{display:block; margin-top:6px; font:600 26px/1.1 var(--mono); letter-spacing:-.03em; color:#0B1D35}
.p-res strong.open{font:500 15px/1.3 var(--sans); letter-spacing:0; color:#94A3B8}
.pfoot{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:16px}
.circ{display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--btn2); border-radius:50%; background:none; color:var(--fg); font:500 16px/1 var(--sans); cursor:pointer; transition:background-color .2s}
.circ:hover{background:rgba(var(--fg-rgb),.07)}
.circ:disabled{opacity:.35; cursor:default}
.pcap{font:500 10.5px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg3)}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.play{display:grid; gap:18px; margin-top:44px; align-items:start}
.play-r{min-width:0}
.ctrls{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.ctrls .steptabs{margin-top:0}
.modeseg{display:flex; gap:3px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.modeseg button{display:flex; align-items:center; gap:7px; border:0; padding:9px 14px; border-radius:999px; background:none; color:var(--fg2); font:600 13px/1 var(--sans); cursor:pointer; white-space:nowrap}
.modeseg button[aria-pressed="true"]{background:var(--signal); color:#fff}
.t-dark .modeseg button[aria-pressed="true"]{color:#0B1D35}
.ldot{display:none; width:7px; height:7px; border-radius:50%; background:#10B981; box-shadow:0 0 0 3px rgba(16,185,129,.25)}
.modeseg.has-live .ldot{display:block}
.steptabs button:disabled{opacity:.35; cursor:default}
.ctrls + .app{margin-top:14px}
.app .p-side{align-items:center; gap:4px; padding:16px 0}
.app .p-logo{padding:4px 0 14px}
.app .p-logo svg{width:20px; height:20px}
.app .p-nav{position:relative; display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:11px; color:rgba(255,255,255,.58)}
.app .p-nav.on{background:rgba(255,255,255,.12); color:#fff}
.app .p-nav .ico{width:18px; height:18px}
.app .p-nav b{position:absolute; top:2px; right:1px; min-width:16px; padding:2px 4px; border-radius:999px; background:var(--blue); color:#fff; font:600 9px/1.1 var(--sans); text-align:center}
.app .p-user{margin-top:auto; padding:12px 0 0; border-top:0}
.p-empty{display:grid; place-items:center; gap:6px; padding:40px 10px; text-align:center; font-size:13.5px; line-height:1.5; color:#64748B}
.p-empty b{color:#0B1D35; font-size:15px}
.tw{display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:22px; background:#fff; color:#0B1D35; box-shadow:0 40px 90px -40px rgba(0,0,0,.55), 0 0 0 1px rgba(11,29,53,.08)}
.tw-h{display:flex; align-items:center; gap:10px; padding:14px 14px 14px 16px; background:#0B1D35; color:#fff}
.tw-h .kb{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px; background:var(--cyan); color:#0B1D35}
.tw-h .kb svg{width:17px; height:17px}
.tw-h b{display:block; font-size:13.5px}
.tw-h small{display:flex; align-items:center; gap:6px; font-size:11.5px; color:rgba(255,255,255,.6)}
.tw-h small::before{content:""; width:6px; height:6px; border-radius:50%; background:#10B981}
.tw-reset{flex:none; margin-left:auto; padding:6px 10px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:none; color:rgba(255,255,255,.82); font:500 11.5px/1 var(--sans); cursor:pointer}
.tw-reset:hover{background:rgba(255,255,255,.08)}
.tw-body{display:flex; flex-direction:column; gap:8px; height:280px; overflow-y:auto; padding:16px; background:#F6F8FB}
.tw-m{max-width:86%; padding:9px 12px; border-radius:14px; font-size:13.5px; line-height:1.45; overflow-wrap:anywhere; animation:rise .3s var(--ease)}
.tw-m.a{align-self:flex-start; background:#fff; border:1px solid #E6EBF1; border-bottom-left-radius:4px}
.tw-m.v{align-self:flex-end; background:#0B1D35; color:#fff; border-bottom-right-radius:4px}
.tw-m.sys{align-self:stretch; max-width:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; background:#E3F6EE; color:#065F46; font-weight:600; border-radius:12px}
.tw-m.sys button{border:0; padding:7px 11px; border-radius:999px; background:#065F46; color:#fff; font:600 11.5px/1 var(--sans); cursor:pointer}
.tw-typing{align-self:flex-start; display:flex; gap:4px; padding:12px 14px; border:1px solid #E6EBF1; border-radius:14px; border-bottom-left-radius:4px; background:#fff}
.tw-typing i{width:6px; height:6px; border-radius:50%; background:#94A3B8; animation:twdot 1s infinite}
.tw-typing i:nth-child(2){animation-delay:.15s}
.tw-typing i:nth-child(3){animation-delay:.3s}
@keyframes twdot{0%,80%,100%{opacity:.3; transform:none} 40%{opacity:1; transform:translateY(-3px)}}
.tw-chips{display:flex; flex-wrap:wrap; gap:6px; background:#F6F8FB}
.tw-chips:not(:empty){padding:0 14px 12px}
.tw-chips button{padding:7px 11px; border:1px solid #D2E4B4; border-radius:999px; background:#fff; color:#007A59; font:600 12.5px/1 var(--sans); cursor:pointer}
.tw-chips button:hover{background:#F1F7E7}
.tw-in{display:flex; gap:8px; padding:12px; border-top:1px solid #E6EBF1; background:#fff}
.tw-in input{flex:1; min-width:0; padding:10px 14px; border:1px solid #DCE3EC; border-radius:999px; background:#fff; color:#0B1D35; font:400 14px/1.2 var(--sans); outline:none}
.tw-in input:focus{border-color:#007A59; box-shadow:0 0 0 3px rgba(0,122,89,.15)}
.tw-in button{flex:none; width:40px; height:40px; border:0; border-radius:50%; background:#0B1D35; color:#fff; font:600 16px/1 var(--sans); cursor:pointer}
.tw-note{margin:0; padding:0 14px 14px; background:#fff; font-size:11.5px; line-height:1.45; color:#64748B}
.tw.flash{animation:twflash 1.2s var(--ease)}
@keyframes twflash{0%{box-shadow:0 0 0 0 rgba(46,230,166,.0), 0 0 0 1px rgba(11,29,53,.08)} 30%{box-shadow:0 0 0 8px rgba(46,230,166,.35), 0 0 0 1px rgba(11,29,53,.08)} 100%{box-shadow:0 40px 90px -40px rgba(0,0,0,.55), 0 0 0 1px rgba(11,29,53,.08)}}

svg[data-logo]{display:block; flex:none; overflow:visible}
.app .p-logo{color:#fff; --vokalio-signal:#2EE6A6}
.app .p-logo .bm{height:20px; width:auto}
.tw-h .kb, .phone-h .kb, .dot.skalr .kb{background:#fff; color:#0B1D35; --vokalio-signal:#007A59}
.tw-h .kb .bm{height:17px; width:auto; max-width:26px}
.phone-h .kb .bm{height:18px; width:auto; max-width:27px}
.dot.skalr .kb{width:26px}
.dot.skalr .kb .bm{height:13px; width:auto; max-width:20px}

.vlogo{--vokalio-haken:#00936B}
.t-dark .vlogo{--vokalio-haken:#2EE6A6}
.app .p-logo{--vokalio-haken:#2EE6A6}
.tw-h .kb, .phone-h .kb, .dot.skalr .kb{--vokalio-haken:#00936B}


@container site (min-width: 760px){
  .wrap{padding:0 40px}
  .site-h .in{padding:0 40px}
  .nav{display:flex}
  .blk{padding:104px 0}
  .h2{font-size:62px}
  .head{grid-template-columns:1.2fr 1fr; align-items:end; gap:48px}
  .head .lead{margin:0 0 4px}
  .note{padding:34px 40px 40px}
  .note h1{font-size:84px}
  .zettel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gains{grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
  .lv, .lauf, .merk, .preis{padding:28px 36px 32px}
  .lvh{display:grid; grid-template-columns:64px 240px 1fr; gap:24px; padding:6px 0 10px; border-bottom:2px solid var(--ink); font:600 12.5px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)}
  .pos{grid-template-columns:64px 240px 1fr; align-items:baseline}
  .st{grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
  .kcard{grid-template-columns:1fr 1fr; padding:34px 36px}
  .paras{grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
  .pcols{grid-template-columns:1.1fr 1fr; gap:48px}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .closing{padding:52px 40px 56px}
  .closing h2{font-size:68px}
  .bigstamp{font-size:84px}
  .site-f .in{grid-template-columns:repeat(3,auto); justify-content:space-between; padding:16px 40px 0}
  .margin-note{display:block}
  .p-main{padding:24px 28px}
  .p-search{display:inline-block}
  .p-head h4{font-size:25px}
  .cap{flex-basis:auto; margin-left:auto}
  .stg span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}
@container site (min-width: 1080px){
  .wrap{padding:0 56px}
  .site-h .in{padding:0 56px}
  .h2{font-size:72px}
  .note h1{font-size:96px}
  .note-grid{grid-template-columns:1.25fr 1fr; gap:56px; align-items:end}
  .zettel{grid-template-columns:repeat(4,minmax(0,1fr))}
  .faqg{grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start}
  .app-in{grid-template-columns:60px 1fr}
  .p-side{display:flex}
  .p-body{grid-template-columns:1.55fr 1fr}
  .play{grid-template-columns:340px minmax(0,1fr); gap:24px}
  .tw-body{height:360px}
  .site-f .in{padding:16px 56px 0}
}

/* Portal-Seitenleiste: Zähler als runder Punkt an der Ecke */
.app .p-nav{justify-content:center}
.app .p-nav b{top:-5px; right:-5px; display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box; border-radius:999px; background:#2EE6A6; color:#0B1D35; font:700 10px/1 var(--sans); font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px #0B1D35}
/* Visitenkarten: Namen und Beschreibungen auf gleicher Höhe */
.vrow{align-items:flex-start}
.vrow p{line-height:1.45}
@container site (min-width: 760px){ .vrow p{min-height:2.9em} }
/* Hero: kein Hinweis unter der Notiz, kleinerer Abstand zum Problem-Abschnitt */
.hero{padding-bottom:32px}
#problem{padding-top:48px}
@container site (min-width: 760px){ #problem{padding-top:64px} }
/* Mobil-Feinschliff */
@container site (max-width: 759px){ .btns, .strip, .kres{justify-content:center} }
.note h1{font-size:min(56px, 14cqi)}
.bigstamp{font-size:min(64px, 13cqi)}
.pd li{position:relative; padding-left:16px}
.pd li::before{position:absolute; left:0; top:0}
.inc li{position:relative; padding-left:20px}
.inc li::before{position:absolute; left:0; top:0}
.cmp tr.vok td:first-child{display:table-cell}
.cmp tr.vok td:first-child .bm{display:inline-block; vertical-align:-3px; margin-right:8px}
@container site (max-width: 759px){
  /* Vergleich: je Lösung ein Block, Merkmale im Raster mit Beschriftung */
  .cmpwrap{overflow:visible; padding:4px 18px 10px}
  .cmp{min-width:0; display:block}
  .cmp thead{display:none}
  .cmp tbody{display:block}
  .cmp tr{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 8px; padding:18px 0; border-bottom:1px solid var(--rule)}
  .cmp tr.vok{margin:0 -10px; padding:18px 10px; border-radius:4px; background:rgba(46,230,166,.26); border-bottom:0}
  .cmp td, .cmp tr.vok td{display:flex; flex-direction:column; gap:4px; padding:0; border:0; background:none; line-height:1.3}
  .cmp td:first-child, .cmp tr.vok td:first-child{display:block; grid-column:1 / -1; font-size:17px}
  .cmp td.w{grid-column:1 / -1; min-width:0; font-size:14px}
  .cmp td.y::before, .cmp td.n::before, .cmp td.p::before{font:600 11px/1.2 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)}
  .cmp td:nth-child(2)::before{content:"Telefon"}
  .cmp td:nth-child(3)::before{content:"Website"}
  .cmp td:nth-child(4)::before{content:"Chat"}
  .cmp td:nth-child(5)::before{content:"Fachfragen"}
  .cmp td:nth-child(6)::before{content:"Bucht Termine"}
  .cmp td:nth-child(7)::before{content:"Rund um die Uhr"}
  .cmp td.n{font-size:18px; line-height:1}
  .cmp td.p{font-size:19px}
  /* Preisliste: Paket und Preis oben, Details darunter */
  .ptabwrap{overflow:visible}
  .ptab{min-width:0; display:block}
  .ptab thead{display:none}
  .ptab tbody{display:block}
  .ptab tr{display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:16px 0; border-bottom:1px solid var(--rule)}
  .ptab tr.hl{margin:0 -10px; padding:16px 10px; border-radius:4px; background:rgba(46,230,166,.26); border-bottom:0}
  .ptab td, .ptab tr.hl td{display:block; padding:0; border:0; background:none}
  .ptab td:nth-child(3), .ptab td:nth-child(4){font-size:14px}
  .ptab tr td.pk{grid-column:1; grid-row:1; font-size:24px}
  .ptab tr td.pr{grid-column:2; grid-row:1; font-size:21px; text-align:right}
  .ptab td.mn, .ptab td:nth-child(3), .ptab td:nth-child(4){grid-column:1 / -1; text-align:left}
  .ptab tr td.mn{font-size:14px}
  .ptab td.mn::after{content:" Minuten im Monat"; font-family:var(--sans); color:var(--ink2)}
  .ptab td:nth-child(4)::before{content:"Für Unternehmen mit "}
}
/* Produkt-Bühne: Chat so hoch wie Portal-Spalte, Kopfzeile einzeilig */
.steptabs{scrollbar-width:none}
.steptabs::-webkit-scrollbar{display:none}
.tw-h > div{min-width:0}
@container site (min-width: 760px){ .tw-h b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} }
@container site (min-width: 1080px){
  /* Chat exakt so hoch wie das Portal-Fenster: Steuerung und Fußzeile liegen in eigenen Zeilen */
  .play{align-items:stretch; row-gap:0}
  .play-r{display:contents}
  .play > .tw{grid-column:1; grid-row:2}
  .play-r > .ctrls{grid-column:2; grid-row:1}
  .play-r > .app{grid-column:2; grid-row:2; margin-top:0}
  .play-r > .ctrls{margin-bottom:14px}
  .play-r > .pfoot{grid-column:2; grid-row:3}
  .tw-body{height:auto; flex:1 1 0; min-height:160px}
}

/* ── Version 4: blauer Schreibtisch ───────────────────────────────────────── */
:root{ --desk:#0B1D35 }
body{ background:#07152A }
html{ scrollbar-color:#3A5170 #07152A }
.frame{ box-shadow:0 40px 100px -50px rgba(0,0,0,.75) }
/* Auf dem Schreibtisch: helle Schrift, helle Linien, Lime als Akzent */
.frame{
  --ink:#F2F6FB; --ink2:#BCC8D8; --ink3:#8899B0; --rule:rgba(255,255,255,.14); --rule2:rgba(255,255,255,.30);
  --pen:#A9C2FF; --lime-ink:#2EE6A6; --blue:#2EE6A6; --signal:#2EE6A6; --mark:rgba(46,230,166,.42);
  --vokalio-haken:#2EE6A6;
  --btn-text:#0B1D35; --btn-hover-bg:#D7E0EC; --ghost-hover:rgba(255,255,255,.08);
}
/* Papier: dunkle V3-Tokens zurück */
.sheet, .vcard, .print, .postit, .kcard, .mail, .pile .p2, .pile .p3, .pile .p1, .tw, .app, .modeseg, .steptabs, .ktab[aria-selected="true"], .rb-seg button[aria-pressed="true"]{
  --ink:#0B1D35; --ink2:#41526A; --ink3:#5B6B80; --rule:#CCD4DE; --rule2:#9CA9B8;
  --pen:#2B4FA3; --lime-ink:#007A59; --blue:#007A59; --signal:#007A59; --mark:rgba(46,230,166,.62);
  --vokalio-haken:#00936B;
  --btn-text:#FFFFFF; --btn-hover-bg:#1A3355; --ghost-hover:rgba(11,29,53,.06);
}
.btn{ color:var(--btn-text) }
.btn:hover{ background:var(--btn-hover-bg); border-color:var(--btn-hover-bg) }
.btn.ghost{ color:var(--ink) }
.btn.ghost:hover{ background:var(--ghost-hover); border-color:var(--ink) }
/* Fest dunkel gesetzte Texte direkt auf dem Schreibtisch */
.z h3, .zt, .gain h3, .strip p, details summary{ color:var(--ink) }
/* Claim + Logo-Lockup: Schriftzug genau so breit wie der Claim darunter */
.hclaim{ display:none }
.site-h a.logo, a.logo.lockup{ display:inline-grid; grid-template-columns:auto auto; column-gap:1em; row-gap:.3em; align-items:center; justify-content:start }
.site-h a.logo .vlogo, a.logo.lockup .vlogo{ display:contents }
/* Zeichen wie im Logo-Entwurf (gen6 lockup_G): 1,62 × Versalhöhe, mittig auf VOKALIO, Balken ragen oben und unten über den Schriftzug.
   Versalhöhe = 71/74,2 der Schriftzughöhe; Schriftzughöhe gemessen 2,640 em (Buchstabenabstand .06em) bzw. 2,600 em (.05em). */
.site-h a.logo .bm, a.logo.lockup .bm{ grid-column:1; grid-row:1; height:var(--mh); width:auto; max-width:none }
.site-h a.logo, a.logo.lockup{ font-size:10.5px; --ls:.06em; --mh:4.092em }
/* A beginnt 0,0196 em nach dem Kastenanfang, nach dem Schlusspunkt folgen 0,0416 em Luft + Buchstabenabstand */
.site-h a.logo .wm, a.logo.lockup .wm{ grid-column:2; grid-row:1; width:0; margin-left:.0196em; min-width:calc(100% - .0196em - .0416em - var(--ls)); height:auto; aspect-ratio:514.4 / 74.2 }
.site-h a.logo .hclaim, a.logo.lockup .hclaim{ grid-column:2; grid-row:2; display:block; margin:0; padding:0; border:0; white-space:nowrap;
  text-align:justify; text-align-last:justify; font:500 1em/1 var(--sans); letter-spacing:var(--ls); text-transform:uppercase }
.hclaim .c1{ color:#A9B4C3 } .hclaim .c2{ color:#FFFFFF } .hclaim b{ font-weight:500; color:var(--lime-ink) }
.claimline{ text-transform:uppercase }
@container site (max-width: 759px){
  .site-h a.logo{ font-size:9.5px; --ls:.05em; --mh:4.03em }
  .site-h .in{ padding:0 16px; gap:12px }
  .site-h .in > .btn{ flex-shrink:0; padding:8px 12px; font-size:13px; white-space:nowrap }
}
/* schmale Handys (360 px): Logo und Button etwas kleiner, damit beides in eine Zeile passt */
@container site (max-width: 379px){
  .site-h a.logo{ font-size:8.5px }
  .site-h .in > .btn{ padding:7px 10px; font-size:12px }
}
.claimline{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 20px; margin:6px 0 4px;
  font:800 min(56px, 10cqi)/1 var(--display); letter-spacing:.06em; text-transform:uppercase }
.claimline .c1{ color:var(--ink3) } .claimline .c2{ color:var(--ink) }
.claimline .bigstamp{ margin:0; font-size:1em; padding:.16em .42em .12em }
/* Leistungsverzeichnis: Gruppen Produkte / Plattform */
.lvg{ padding:26px 0 10px; border-bottom:1px solid var(--rule); font:700 13px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--lime-ink) }
.lvg.first{ padding-top:8px }
.lvt{ display:block; width:max-content; max-width:100%; margin:0 0 8px; padding:4px 8px 3px; border:1px solid var(--rule2); border-radius:4px; font:600 11px/1.2 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink2) }
/* Vergleichstabelle: sechs gleich breite Merkmal-Spalten, damit die Haken im gleichen Abstand stehen (Niklas 14.10.) */
@container site (min-width: 760px){
  .cmp{ table-layout:fixed }
  .cmp th:first-child{ width:20% }
  .cmp th:nth-child(n+2):nth-child(-n+7){ width:9% }
  .cmp th:last-child{ width:26% }
}
/* Preisliste: Rabatt-Beispiele und Mehrverbrauch */
.preis .pcols + .pcols{ margin-top:34px; padding-top:26px; border-top:1px solid var(--rule) }
.rabx{ margin-top:10px }
.mehrv{ margin-top:30px; padding-top:22px; border-top:1px solid var(--rule) }
.mehrv h3{ margin:0 0 10px; font:700 20px/1 var(--display); letter-spacing:.02em }
.mehrv p{ display:flex; flex-wrap:wrap; gap:8px 28px; margin:0; font-size:15px; color:var(--ink2) }
.mehrv b{ font:500 15px/1 var(--mono); color:var(--ink) }
@container site (max-width: 759px){ .adds td small{ display:block; margin:3px 0 0 } .adds td:last-child{ font-size:14px; padding-left:12px } .mehrv p{ display:grid; gap:6px } }
/* Kopfzeile auf Navy */
.site-h{ background:rgba(11,29,53,.94); border-bottom-color:rgba(255,255,255,.10) }

/* ── Version 5: Signalgrün ── */
.site-h .vlogo, .site-f .vlogo{ --vokalio-haken:#2EE6A6 }
.av-team{ background:transparent; border:1.5px solid var(--lime-ink); color:var(--lime-ink); font:500 18px/1 var(--sans) }
@container site (min-width: 760px) and (max-width: 1079px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@container site (min-width: 1080px){
  .cards{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px }
  .cards .vcard{ padding:20px 20px }
  .cards .vrow{ gap:12px }
  .cards .vrow h3{ font-size:22px }
  .cards .vrow p{ font-size:13px; min-height:4.35em }
}

/* ── Version 7: mehrseitig ─────────────────────────────────────────────────── */
.page[hidden]{ display:none !important }
/* Kopfzeile */
.site-h .in{ gap:20px }
.nav2{ display:none; align-items:center; gap:24px; margin-left:auto }
.nav2 .navl, .ddb{ border:0; background:none; padding:6px 0; color:#BCC8D8; font:500 14px/1 var(--sans); text-decoration:none; cursor:pointer }
.ddb::after{ content:""; display:inline-block; width:6px; height:6px; margin:0 0 3px 7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) }
.nav2 .navl:hover, .ddb:hover, .nav2 .on > .ddb, .nav2 .navl.on{ color:#FFFFFF }
.dd{ position:relative }
.ddm{ position:absolute; top:calc(100% + 14px); left:-16px; z-index:50; display:none; min-width:280px; padding:8px; border-radius:8px; background:#FFFFFF; box-shadow:0 24px 50px -20px rgba(0,0,0,.55) }
.ddm::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px }
.dd:hover .ddm, .dd:focus-within .ddm, .dd.open .ddm{ display:grid }
.ddm a{ display:grid; gap:3px; padding:10px 12px; border-radius:6px; text-decoration:none }
.ddm a:hover{ background:#F1F4F8 }
.ddm b{ color:#0B1D35; font:600 14px/1.2 var(--sans) }
.ddm span{ color:#5B6B80; font-size:12.5px; line-height:1.35 }
.hact{ display:flex; align-items:center; gap:10px; margin-left:auto }
.nav2 + .hact{ margin-left:0 }
/* Demo-Button auch auf dem Handy sichtbar, kompakt neben dem Burger (Niklas 13.10.) */
.site-h .hcta{ display:inline-flex; flex-shrink:0; white-space:nowrap; padding:7px 10px; font-size:12.5px }
.burger{ display:grid; place-content:center; gap:5px; width:42px; height:42px; border:1px solid rgba(255,255,255,.22); border-radius:6px; background:none; cursor:pointer }
.burger i{ display:block; width:18px; height:1.5px; background:#FFFFFF }
.mnav{ padding:4px 20px 22px; border-top:1px solid rgba(255,255,255,.1); background:#0B1D35; max-height:calc(100vh - 62px); overflow:auto }
.mnav[hidden]{ display:none }
/* Handy-Menü wie das Desktop-Menü: fünf Hauptpunkte, Gruppen zum Aufklappen */
.mg, .mtop{ display:block; border-bottom:1px solid rgba(255,255,255,.08) }
.mg summary, .mtop{ display:flex; align-items:center; justify-content:space-between; padding:16px 2px; list-style:none; cursor:pointer; color:#F2F6FB; font:600 17px/1.2 var(--sans); text-decoration:none }
.mg summary::-webkit-details-marker{ display:none }
.mg summary::after{ content:""; width:8px; height:8px; margin-right:4px; border-right:1.6px solid #8899B0; border-bottom:1.6px solid #8899B0; transform:translateY(-3px) rotate(45deg); transition:transform .2s var(--ease) }
.mg[open] summary::after{ transform:translateY(2px) rotate(-135deg) }
.mtop::after{ content:"→"; margin-right:2px; font-weight:400; color:#8899B0 }
.mgl{ display:grid; gap:0 16px; padding:0 0 12px }
.mg2 .mgl{ grid-template-columns:1fr 1fr }
.mgl a{ padding:10px 2px 10px 12px; border-left:2px solid rgba(255,255,255,.1); color:#BCC8D8; font:500 16px/1.2 var(--sans); text-decoration:none }
.mgl a:hover, .mgl a:focus-visible{ color:#FFFFFF; border-left-color:var(--lime-ink) }
.mcta{ width:100%; margin-top:16px }
@container site (min-width: 760px){ .site-h .hcta{ padding:10px 16px; font-size:14px } }
@container site (min-width: 1080px){ .nav2{ display:flex } .burger{ display:none } .mnav{ display:none !important } }
@container site (max-width: 759px){ .site-h .hact{ margin-left:auto; gap:8px } .burger{ width:36px; height:36px } }
@container site (max-width: 759px){ .site-h .in{ gap:12px } }
@container site (max-width: 379px){ .site-h .hcta{ padding:6px 9px; font-size:12px } .burger{ width:34px; height:34px } .site-h .hact{ gap:6px } }
@container site (max-width: 365px){ .site-h a.logo{ font-size:8px } }
/* Seitenkopf */
.phero{ padding-bottom:72px }
.crumb{ margin-bottom:18px; font:500 12.5px/1 var(--mono); color:var(--ink3) }
.crumb a{ color:var(--ink2); text-decoration:none }
.crumb a:hover{ color:var(--ink) }
.crumb span{ margin:0 2px }
.h1p{ margin:0; max-width:24ch; font:800 min(52px, 12cqi)/.94 var(--display); letter-spacing:-.005em; color:var(--ink); text-wrap:balance }
.h1p .soft{ display:block; color:var(--ink3) }
@container site (min-width: 760px){ .h1p{ font-size:72px } .phero{ padding-top:72px } }
.phero .lead{ margin-top:18px }
.phero .btns{ margin-top:26px }
.h3p{ margin:0 0 4px; font:700 28px/1 var(--display); color:var(--ink) }
.cols2{ display:grid; gap:28px }
.duo{ display:grid; gap:24px; align-items:start }
@container site (min-width: 1080px){ .duo{ grid-template-columns:1fr 1fr; gap:28px } }
.cols3{ display:grid; gap:28px }
.kanalr{ margin-top:28px }
/* Über Vokalio */
.uhero{ display:grid; gap:28px }
/* Fehler-Paket 14.10. */
.ktab:not([aria-selected="true"]){ color:#41526A }
/* Portal-Beispiel auf der Startseite: Pfeile und Bildunterschrift stehen auf Navy → helle Farben */
.pfoot .circ{ color:#F2F6FB; border-color:rgba(255,255,255,.35) }
.pfoot .circ:hover:not(:disabled){ background:rgba(255,255,255,.08); border-color:#F2F6FB }
.pcap{ color:#A9B4C3 }
.tlink{ color:inherit; text-decoration:none; white-space:nowrap }
.tlink:hover{ text-decoration:underline }
.einr{ margin-top:22px }
.margin-note{ top:-30px; z-index:5 }
@container site (max-width: 759px){
  .note-grid{ display:flex; flex-direction:column }
  .note-grid .hero-copy{ order:-1 }
  .btab, .btab tbody, .btab tr, .btab td{ display:block; width:auto }
  .btab tr{ padding:12px 0; border-bottom:1px solid var(--rule) }
  .btab tr td, .btab tr td:first-child{ width:auto; padding:0; border-bottom:0 }
  .btab tr td:first-child{ margin-bottom:4px }
}
/* Automationen nach Bereichen: 6 Felder, 3 × 2 auf Desktop, 2 × 3 auf Tablet */
.autob{ padding:26px 22px 26px }
@container site (min-width: 760px){ .autob{ padding:34px 40px 34px } }
.abgrid{ display:grid; gap:14px; margin-top:6px }
@container site (min-width: 760px){ .abgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:16px } }
@container site (min-width: 1080px){ .abgrid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.ab{ padding:18px 20px 16px; border:1px solid var(--rule); border-radius:8px }
.ab h3{ margin:0 0 10px; font:700 22px/1.1 var(--display); color:var(--ink) }
.ab ul{ margin:0; padding:0; list-style:none; display:grid; gap:6px }
.ab li{ font-size:14.5px; line-height:1.5; color:var(--ink2) }
.ab li::before{ content:"✓"; margin-right:7px; font-weight:700; color:var(--lime-ink) }
.abnote{ margin:18px 0 0; padding-top:14px; border-top:1px solid var(--rule); font-size:14px; color:var(--ink2) }
/* Leistungsbeschreibungen: Nummer, Titel und Text auf einer Höhe (Zeilen mit nur einem Beschreibungstext; Niklas 14.10.) */
@container site (min-width: 760px){ .pos:has(> .pd > p:only-child){ align-items:center } }
/* Grundsätze: vier Punkte als 2 × 2, damit das Blatt gleichmäßig gefüllt ist */
@container site (min-width: 760px){ .merk.grund .paras{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@container site (min-width: 1080px){ .uhero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:end } }
.zielkarte{ padding:26px 24px 28px }
@container site (min-width: 760px){ .zielkarte{ padding:34px 38px 38px } }
.zielkarte .vk{ display:block; margin-bottom:14px; font:600 12.5px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--lime-ink) }
.zielkarte p{ margin:0; font:800 min(40px, 8cqi)/1.06 var(--display); letter-spacing:-.005em; color:var(--ink) }
.saeulen{ padding:26px 22px 28px }
@container site (min-width: 760px){ .saeulen{ padding:34px 40px 38px } }
.sgrid{ display:grid; gap:16px; margin-top:6px }
@container site (min-width: 760px){ .sgrid{ grid-template-columns:1fr 1.15fr 1fr; gap:22px; align-items:stretch } }
.sc{ position:relative; padding:20px 20px 18px; border:1px solid var(--rule); border-radius:8px }
.sc.smid{ background:#E2F7EF; border-color:transparent }
.sc .sno{ display:block; margin-bottom:8px; font:600 11.5px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink3) }
.sc h3{ margin:0 0 8px; font:700 22px/1.1 var(--display); color:var(--ink) }
.sc p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink2) }
.slinks{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:14px 0 0; padding:0; list-style:none; font-size:14px }
.slinks a{ color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--rule2) }
.slinks a:hover{ border-bottom-color:var(--ink) }
@container site (min-width: 760px){ .sc:not(:last-child)::after{ content:"→"; position:absolute; right:-17px; top:50%; transform:translateY(-50%); font:500 16px/1 var(--sans); color:var(--ink3) } }
.grid4{ display:grid; gap:24px }
@container site (min-width: 760px){ .grid4{ grid-template-columns:1fr 1fr; gap:32px 48px } }
@container site (min-width: 1080px){ .grid4{ grid-template-columns:repeat(4,1fr); gap:32px } }
.grid4 + .strip{ margin-top:40px }
/* Vier Spalten: Überschriften gleich hoch, damit die Texte auf einer Linie beginnen (Niklas 14.10.: „Boxen auf eine Höhe") */
@container site (min-width: 1080px){ .grid4 .h3p{ min-height:2.2em } }
/* Preiskarten sauber füllen: zwei Karten = zwei Spalten, eine Karte = ein breiter Streifen */
@container site (min-width: 760px){
  .pkgs.addc:has(> .pkg:nth-child(2):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pkgs.addc:has(> .pkg:only-child){ grid-template-columns:1fr }
  .pkgs.addc > .pkg:only-child{ grid-auto-flow:column; grid-template-columns:none; justify-content:start; align-items:baseline; gap:8px 32px }
}
/* Rechtsseiten */
.legal{ max-width:880px; padding:26px 22px 30px; overflow-wrap:break-word }
@container site (min-width: 760px){ .legal{ padding:44px 56px 50px } }
.legal .lhint{ margin:0 0 24px; padding-bottom:14px; border-bottom:1px solid var(--rule); font-size:13px; color:var(--ink3) }
.legal h2{ margin:36px 0 10px; font:700 24px/1.15 var(--display); letter-spacing:.01em; color:var(--ink) }
.legal .lhint + h2{ margin-top:0 }
.legal h3{ margin:24px 0 6px; font:600 17px/1.3 var(--sans); color:var(--ink) }
.legal p, .legal li{ margin:0 0 10px; font-size:15px; line-height:1.65; color:var(--ink2) }
.legal ul{ margin:6px 0 14px; padding-left:20px }
.legal li{ margin-bottom:6px }
.legal strong{ color:var(--ink) }
.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere }
.legal code{ font:500 13px/1.4 var(--mono); background:rgba(11,29,53,.06); padding:1px 5px; border-radius:3px; overflow-wrap:anywhere }
.legal .lentw{ padding:10px 12px; border:1px solid #FDE68A; border-radius:8px; background:#FFFBEB; color:#92400E }
.legal mark.ph{ padding:0 3px; border-radius:3px; background:#FFF1A8; color:#4A3500 }
.h3p a{ color:inherit; text-decoration:none } .h3p a:hover{ text-decoration:underline }
@container site (min-width: 1080px){ .cols3{ grid-template-columns:1fr 1fr 1fr; gap:40px } }
@container site (min-width: 760px){ .cols2{ grid-template-columns:1fr 1fr; gap:48px } }
.cols2 + .pkgs, .cols2 + .strip{ margin-top:34px }
/* Leistungsverzeichnis-Links */
a.pt{ color:inherit; text-decoration:none }
a.pt .pta{ font:500 18px/1 var(--sans); color:var(--lime-ink); opacity:.8 }
a.pt:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px }
.klinks{ margin:18px 0 0; font-size:15px; color:var(--ink2) }
.klinks a{ color:var(--ink); font-weight:600 }
/* Pakete */
.pkgs{ display:grid; gap:14px }
@container site (min-width: 760px){ .pkgs{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px } }
.pkg{ display:grid; gap:8px; padding:22px 22px 20px; border-radius:4px; background:#FFFFFF; color:#0B1D35; text-decoration:none; box-shadow:0 18px 34px -24px rgba(0,0,0,.6); transition:transform .2s var(--ease) }
.pkg:hover{ transform:translateY(-2px) }
.pkg.hl{ box-shadow:inset 0 0 0 2px #00936B, 0 18px 34px -24px rgba(0,0,0,.6) }
.pkn{ font:700 26px/1 var(--display) }
.pkn em{ margin-left:8px; font:500 20px/1 var(--hand); font-style:normal; color:#2B4FA3 }
.pkp{ font:600 30px/1 var(--mono); letter-spacing:-.02em }
.pkp small{ font:400 13px/1 var(--sans); color:#5B6B80 }
.pkm{ font-size:14px; color:#41526A }
/* Vertrauens-Leiste */
.trust{ display:grid; gap:18px; padding:26px 24px }
@container site (min-width: 1080px){ .trust{ grid-template-columns:repeat(3,1fr) auto; align-items:center; gap:28px } }
.tri{ display:grid; gap:4px }
.tri b{ font:700 20px/1.05 var(--display) }
.tri span{ font-size:14px; color:var(--ink2) }
.trl{ color:var(--ink); font-weight:600; text-decoration:none; white-space:nowrap }
/* Gespräch */
.calls{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px }
.calls li{ display:grid; grid-template-columns:48px 92px 1fr; gap:4px 12px; align-items:baseline }
.calls .ct{ font:500 12.5px/1 var(--mono); color:var(--ink3) }
.calls b{ font:600 12.5px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--lime-ink) }
.calls li.k b{ color:var(--ink3) }
.calls p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--ink) }
@container site (max-width: 759px){ .calls li{ grid-template-columns:44px 1fr } .calls p{ grid-column:1 / -1 } }
.kstatic{ margin:0 }
/* Preis und Paket */
.pblock{ max-width:46rem; margin:0 0 26px }
.addc{ margin-top:14px }
.pkg.add{ background:#F4F7FA }
.pmore{ margin:22px 0 0 }
.pmore a{ color:var(--ink); font-weight:600; text-decoration:none }
.pmore a:hover{ text-decoration:underline; text-underline-offset:4px }
.btab{ width:100%; margin-top:14px; border-collapse:collapse; font-size:15px }
.btab td{ padding:12px 0; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink2) }
.btab td:first-child{ width:42%; padding-right:16px }
.btab a{ color:var(--ink); font-weight:600; text-decoration:none }
.btab a:hover{ text-decoration:underline }
@container site (max-width: 759px){ .btab td{ display:block; width:auto; padding:2px 0 } .btab td:first-child{ padding-top:12px; border-bottom:0 } }
/* Eingang-Beispiel */
.ibx{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px }
.ibx li{ display:grid; grid-template-columns:auto 1fr auto; gap:6px 14px; align-items:center; padding:12px 14px; border:1px solid var(--rule); border-radius:6px }
.ibx b{ font-size:15.5px; color:var(--ink) }
.ibx p{ margin:3px 0 0; font-size:13.5px; color:var(--ink2) }
.ich{ font:600 11.5px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3) }
.ist{ padding:5px 9px; border-radius:4px; background:#E2F7EF; color:var(--lime-ink); font:600 12.5px/1 var(--sans); white-space:nowrap }
.ist.hot{ background:#FDECEA; color:#B42318 }
.ist.open{ background:#EEF1F5; color:var(--ink3) }
@container site (max-width: 759px){ .ibx li{ grid-template-columns:1fr } }
/* Jobs */
.jobs{ display:grid; gap:14px }
.job{ border-radius:6px; background:#FFFFFF; color:#0B1D35; box-shadow:0 18px 34px -26px rgba(0,0,0,.6) }
.job summary{ display:grid; gap:12px; padding:22px 24px; cursor:pointer; list-style:none }
.job summary::-webkit-details-marker{ display:none }
@container site (min-width: 760px){ .job summary{ grid-template-columns:1fr auto; align-items:center; gap:24px } }
.jt h3{ margin:0; font:700 26px/1.05 var(--display); color:#0B1D35 }
.jt p{ margin:6px 0 0; font-size:15px; color:#41526A }
.jtags{ display:flex; flex-wrap:wrap; gap:6px }
.jtags span{ padding:6px 10px; border:1px solid #CCD4DE; border-radius:4px; font-size:12.5px; color:#41526A; white-space:nowrap }
.jd{ display:grid; gap:20px; padding:4px 24px 24px; border-top:1px solid #E3E8EE }
@container site (min-width: 760px){ .jd{ grid-template-columns:repeat(3,1fr); gap:28px } .jd .japply{ grid-column:1 / -1; justify-self:start } }
.jd h4{ margin:18px 0 8px; font:600 12px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:#5B6B80 }
.jd ul{ margin:0; padding-left:18px; font-size:14.5px; line-height:1.55; color:#0B1D35 }
.job .btn{ background:#0B1D35; border-color:#0B1D35; color:#FFFFFF }
/* Innenabstand der neuen Papierbögen */
.call, .vform, .cols2 > .sheet{ padding:26px 22px 28px }
@container site (min-width: 760px){ .call, .vform, .cols2 > .sheet{ padding:34px 40px 38px } }
.cols2 .inc li{ color:var(--ink2) } .cols2 .inc a{ color:var(--ink); font-weight:600 }
/* Formulare */
.fgrid{ display:grid; gap:14px; margin-top:16px }
@container site (min-width: 760px){ .fgrid{ grid-template-columns:1fr 1fr } .fgrid .wide{ grid-column:1 / -1 } }
.fgrid label{ display:grid; gap:6px; font:600 12.5px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--ink3) }
.fgrid label small{ font:400 12px/1 var(--sans); text-transform:none; letter-spacing:0 }
.fgrid input, .fgrid select, .fgrid textarea{ width:100%; padding:11px 12px; border:1px solid var(--rule); border-radius:4px; background:#FFFFFF; color:var(--ink); font:400 15px/1.4 var(--sans); text-transform:none; letter-spacing:0 }
.fgrid input:focus, .fgrid select:focus, .fgrid textarea:focus{ outline:2px solid var(--lime-ink); outline-offset:1px }
.fnote{ margin:0; font-size:12.5px; color:var(--ink3) }
.fok{ margin:0; font-weight:600; color:var(--lime-ink) }
.fgrid .btn{ justify-self:start }
.mono{ font-family:var(--mono) }
/* Fußzeile mit Sitemap */
.site-f2{ padding:40px 0 30px; border-top:1px solid rgba(255,255,255,.12) }
.site-f2 .in{ max-width:1200px; margin:0 auto; padding:0 20px; display:grid; gap:28px; grid-template-columns:1fr 1fr }
.fbrand{ grid-column:1 / -1 }
.fbrand p{ margin:6px 0 0; font-size:13px; color:#8899B0 }
.fbrand .logo{ margin-bottom:10px }
.fbrand .fclaim{ margin-top:10px; font:500 12.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase }
.fclaim .c1{ color:#A9B4C3 } .fclaim .c2{ color:#FFFFFF } .fclaim b{ font-weight:500; color:var(--lime-ink) }
.fcol{ display:grid; align-content:start; gap:8px }
.fcol h4{ margin:0 0 4px; font:600 11.5px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:#8899B0 }
.fcol a{ color:#D5DEE9; font-size:14px; text-decoration:none }
.fcol a:hover{ color:#FFFFFF }
.fbot{ max-width:1200px; margin:28px auto 0; padding:16px 20px 0; border-top:1px solid rgba(255,255,255,.1); font-size:12.5px; color:#8899B0 }
@container site (min-width: 760px){ .site-f2 .in, .fbot{ padding-left:40px; padding-right:40px } }
@container site (min-width: 1080px){
  .site-f2 .in{ grid-template-columns:1.4fr repeat(4,1fr); padding-left:56px; padding-right:56px }
  .fbrand{ grid-column:auto }
  .fbot{ padding-left:56px; padding-right:56px }
}
/* Vorschau: neue Texte markieren */
.show-neu [data-neu]{ outline:2px dashed #FFB020; outline-offset:5px }

/* Live-Demo mit Vokalio-Mitarbeiter (Niklas 20.10.): im Kopf kurz, solange der Platz fehlt */
.hcta .hl-l{ display:none }
@container site (min-width: 760px) and (max-width: 1079px){ .hcta .hl-l{ display:inline } .hcta .hl-s{ display:none } }
@container site (min-width: 1240px){ .hcta .hl-l{ display:inline } .hcta .hl-s{ display:none } }
@container site (max-width: 759px){ .btn .dur{ display:none } .mcta .dur{ display:inline } }

/* Version 7 (21.10.): Holgers Rückmeldung – Test ohne Risiko, Branchen als Beispiele, Rechenbeispiel */
.risiko{ margin-top:18px; padding:22px 22px 18px }
@container site (min-width: 760px){ .risiko{ padding:26px 32px 22px } }
.risiko .rh{ margin:0 0 12px; font:700 24px/1.1 var(--display); color:var(--ink) }
.risiko .inc{ gap:10px; font-size:15px; color:var(--ink2) }
@container site (min-width: 1080px){ .risiko .inc{ grid-template-columns:1fr 1fr 2fr; gap:10px 28px } }
.rkurz{ margin:16px 0 0; max-width:52rem; font-size:15px; line-height:1.6; color:var(--ink2) }
.rkurz b{ color:var(--ink) }
.rkurz a{ color:var(--ink); font-weight:600; text-decoration:none; white-space:nowrap }
.rechen{ margin-top:18px; padding:22px 22px 24px }
@container site (min-width: 760px){ .rechen{ padding:28px 36px 30px } }
.rgrid{ display:grid; gap:20px; margin-top:16px }
@container site (min-width: 900px){ .rgrid{ grid-template-columns:1.3fr 1fr; gap:36px; align-items:start } }
.rgrid p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--ink2) }
.rgrid p b{ color:var(--ink) }
.rgrid .rnote{ margin-top:10px; font-size:13px; color:var(--ink3) }
.rcalc{ display:grid; gap:12px; padding:18px 20px; border:1px solid var(--rule); border-radius:8px; background:#F7F9FB }
.rcalc label{ font:600 12.5px/1.2 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3) }
.rin{ display:flex; align-items:center; gap:10px }
.rin input{ width:110px; padding:10px 12px; border:1.5px solid var(--rule2); border-radius:6px; background:#fff; color:var(--ink); font:600 20px/1 var(--mono); font-variant-numeric:tabular-nums }
.rin input:focus{ outline:none; border-color:var(--lime-ink); box-shadow:0 0 0 3px rgba(0,122,89,.15) }
.rin span{ font-size:14px; color:var(--ink2) }
.rin input::placeholder{ font:400 15px/1 var(--sans, inherit); color:#7A8799 }
.stufen{ padding:24px 22px 26px }
@container site (min-width: 760px){ .stufen{ padding:30px 36px 32px } }
.stg{ list-style:none; margin:0; padding:0; display:grid; gap:28px }
@container site (min-width: 900px){ .stg{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px } }
.stf{ padding-top:18px; border-top:4px solid var(--lime-ink) }
.stf.s2{ border-top-color:rgba(0,122,89,.5) }
.stf.s3{ border-top-color:rgba(0,122,89,.22) }
.stf .sk{ display:block; font:600 12px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--lime-ink) }
.stf h3{ margin:10px 0 0; font:700 24px/1.1 var(--display); color:var(--ink) }
.stf p{ margin:10px 0 0; font-size:15px; line-height:1.6; color:var(--ink2) }
.pke{ margin-top:2px; padding-top:9px; border-top:1px dotted #C3CCD7; font-size:13px; line-height:1.3; color:#41526A }
.pkgs.addc > .pkg:only-child .pke{ margin-top:0; padding-top:0; border-top:0 }
.ptab td.ei{ font:500 16px/1 var(--mono); color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums }
.adds td small.ein{ display:block; margin:3px 0 0; color:#41526A }
.dhint{ margin:12px 0 0; font-size:13.5px; line-height:1.45; color:var(--ink2) }
@container site (max-width: 479px){ .btn .vk{ display:none } }
/* Agent-Vorschau: Nachbau des echten Widgets (Kombi-Pille, Sprach- und Chat-Fenster), nur Optik + Beispielantworten */
.vw-dock{ position:sticky; bottom:0; height:0; z-index:60; pointer-events:none }
.vw-wrap{ position:absolute; right:24px; bottom:84px; display:flex; flex-direction:column; align-items:flex-end; gap:12px; font-family:var(--sans); color:#0B1D35 }
.vw-wrap > *{ pointer-events:auto }
.vw-pill{ display:flex; align-items:stretch; border-radius:999px; background:radial-gradient(90% 60% at 50% -10%,rgba(255,255,255,.08),transparent 65%),linear-gradient(135deg,#0F2748,#060C18); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 44px -10px rgba(46,230,166,.28),0 12px 32px rgba(0,0,0,.45) }
.vw-half{ display:flex; align-items:center; gap:11px; padding:10px 18px 10px 11px; border:0; background:none; border-radius:999px; color:#fff; cursor:pointer; font:inherit; transition:background .15s }
.vw-half:hover{ background:rgba(255,255,255,.06) }
.vw-ic{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:#2EE6A6; background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.1),transparent 60%),linear-gradient(135deg,rgba(46,230,166,.2),rgba(46,230,166,.05)); border:1px solid rgba(46,230,166,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 12px rgba(46,230,166,.2) }
.vw-ic svg{ width:18px; height:18px }
.vw-st{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; line-height:1 }
.vw-st small{ font:500 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6) }
.vw-st b{ font-size:15px; font-weight:600 }
.vw-div{ width:1px; margin:12px 0; background:rgba(255,255,255,.12) }
.vw-bubble{ position:relative; max-width:270px; padding:12px 34px 12px 14px; border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 12px 32px rgba(11,29,53,.18),0 2px 6px rgba(0,0,0,.06); font-size:13.5px; line-height:1.4; animation:vw-up .3s ease }
.vw-bubble::after{ content:""; position:absolute; right:42px; bottom:-6px; width:12px; height:12px; background:#fff; transform:rotate(45deg); border-right:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06) }
.vw-bx{ position:absolute; top:7px; right:7px; display:flex; padding:4px; border:0; border-radius:6px; background:none; color:#6B7280; cursor:pointer }
.vw-bx svg{ width:14px; height:14px }
.vw-panel{ width:340px; max-width:calc(100cqw - 32px); border-radius:20px; background:#fff; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.28),0 4px 12px rgba(0,0,0,.08); animation:vw-up .24s cubic-bezier(.16,1,.3,1) }
.vw-panel[hidden], .vw-bubble[hidden], .vw-hint[hidden]{ display:none }
.vw-head{ position:relative; display:flex; align-items:center; gap:12px; padding:16px; color:#fff; background:radial-gradient(70% 80% at 100% 0%,rgba(46,230,166,.2),transparent 60%),radial-gradient(60% 50% at 0% 100%,rgba(46,230,166,.1),transparent 60%),linear-gradient(135deg,#0F2748,#060C18) }
.vw-ava{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border-radius:50%; color:#2EE6A6; background:linear-gradient(135deg,rgba(46,230,166,.2),rgba(46,230,166,.06)); border:1px solid rgba(46,230,166,.35) }
.vw-ava svg{ width:20px; height:20px }
.vw-tt{ flex:1; display:flex; flex-direction:column; gap:2px }
.vw-tt b{ font-size:15px; font-weight:600 }
.vw-tt small{ font-size:11px; color:rgba(255,255,255,.8) }
.vw-x{ display:flex; padding:6px; border:0; border-radius:6px; background:none; color:#fff; opacity:.8; cursor:pointer }
.vw-x:hover{ opacity:1; background:rgba(255,255,255,.12) }
.vw-x svg{ width:18px; height:18px }
.vw-body{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 20px 18px; text-align:center }
.vw-pulsew{ position:relative; display:flex; align-items:center; justify-content:center; width:120px; height:120px }
.vw-pulse{ position:absolute; inset:0; border-radius:50%; background:rgba(0,122,89,.12); opacity:0; transform:scale(.8); transition:opacity .3s, transform .3s }
.vw-pulse.on{ opacity:1; transform:scale(1); animation:vw-breath 1.6s ease-in-out infinite }
.vw-call{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); color:#fff; cursor:pointer; background:radial-gradient(70% 50% at 50% 110%,rgba(0,0,0,.3),transparent 60%),radial-gradient(80% 60% at 50% -10%,rgba(255,255,255,.35),transparent 60%),linear-gradient(135deg,#007A59,#007A59cc); box-shadow:0 16px 40px rgba(0,122,89,.45),0 4px 14px rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.4); transition:transform .15s }
.vw-call:hover{ transform:scale(1.04) }
.vw-call svg{ width:34px; height:34px }
.vw-status{ margin:0; min-height:20px; font-size:13px; font-weight:500; color:#374151 }
.vw-hint{ margin:-4px 0 0; max-width:280px; padding:8px 10px; border-radius:8px; border:1px solid #FDE68A; background:#FFFBEB; color:#92400E; font-size:12px; line-height:1.45 }
.vw-cta{ display:inline-flex; padding:9px 16px; border-radius:8px; background:#007A59; color:#fff; font-size:13px; font-weight:600; text-decoration:none }
.vw-cta:hover{ filter:brightness(1.08) }
.vw-consent{ margin:0; max-width:280px; font-size:10.5px; line-height:1.5; color:#6B7280 }
.vw-switch{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:0; border-radius:6px; background:none; color:#4B5563; font:inherit; font-size:12px; cursor:pointer }
.vw-switch:hover{ background:#F3F4F6; color:#007A59 }
.vw-switch svg{ width:14px; height:14px }
.vw-chat{ display:flex; flex-direction:column; width:360px; height:min(520px, calc(100vh - 200px)) }
.vw-chat[hidden]{ display:none }
.vw-msgs{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:16px; background:#F9FAFB }
.vw-msg{ display:flex; gap:8px; max-width:88% }
.vw-bot{ align-self:flex-start }
.vw-user{ align-self:flex-end; flex-direction:row-reverse }
.vw-mava{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; flex-shrink:0; margin-top:2px; border-radius:50%; background:rgba(0,122,89,.1); color:#007A59 }
.vw-mava svg{ width:14px; height:14px }
.vw-mb{ padding:8px 12px; border-radius:12px; font-size:13px; line-height:1.5; color:#1F2937 }
.vw-bot .vw-mb{ background:#fff; border:1px solid #E5E7EB; border-radius:12px 12px 12px 4px }
.vw-user .vw-mb{ background:#007A59; color:#fff; border-radius:12px 12px 4px 12px; box-shadow:0 4px 14px rgba(0,122,89,.25) }
.vw-mb a{ color:#007A59; font-weight:600 }
.vw-chips{ display:flex; flex-wrap:wrap; gap:6px; padding-left:32px }
.vw-chips button{ padding:6px 11px; border:1px solid rgba(0,122,89,.35); border-radius:999px; background:#fff; color:#00634A; font:inherit; font-size:12.5px; cursor:pointer }
.vw-chips button:hover{ background:rgba(0,122,89,.08) }
.vw-dots{ display:inline-flex; gap:4px }
.vw-dots i{ width:6px; height:6px; border-radius:50%; background:#9CA3AF; animation:vw-dot 1s infinite }
.vw-dots i:nth-child(2){ animation-delay:.15s } .vw-dots i:nth-child(3){ animation-delay:.3s }
.vw-in{ display:flex; gap:8px; padding:12px; border-top:1px solid #E5E7EB; background:#fff }
.vw-in input{ flex:1; min-width:0; padding:8px 12px; border:1px solid #E5E7EB; border-radius:8px; font:inherit; font-size:13px; color:#1F2937 }
.vw-in input:focus{ outline:2px solid rgba(0,122,89,.35); outline-offset:0 }
.vw-in button{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; border:0; border-radius:8px; background:#007A59; color:#fff; cursor:pointer }
.vw-in button svg{ width:16px; height:16px }
.vw-note{ margin:0; padding:6px 12px 9px; background:#fff; color:#6B7280; font-size:10.5px; text-align:center }
@keyframes vw-up{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes vw-breath{ 0%,100%{ transform:scale(1); opacity:.5 } 50%{ transform:scale(1.16); opacity:.9 } }
@keyframes vw-dot{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }
@container site (max-width: 479px){
  .vw-wrap{ left:12px; right:12px; bottom:76px; align-items:center }
  .vw-bubble::after{ right:auto; left:calc(50% - 6px) }
  .vw-half{ padding:8px 14px 8px 8px; gap:9px }
  .vw-ic{ width:34px; height:34px }
  .vw-st b{ font-size:14px }
  .vw-chat{ height:min(480px, calc(100vh - 190px)) }
}
@media (prefers-reduced-motion: reduce){ .vw-panel, .vw-bubble{ animation:none } .vw-pulse.on{ animation:none } }
@container site (max-width: 759px){
  .ptab td.ei{ grid-column:1 / -1; font-size:14px; text-align:left }
  .ptab td.ei::before{ content:"Einrichtung einmalig "; font-family:var(--sans); color:var(--ink2) }
}
.rrow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:10px; border-top:1px solid var(--rule); font-size:14px; color:var(--ink2) }
.rrow b{ font:600 22px/1 var(--mono); color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums }
.rrow.hl b{ color:var(--lime-ink) }
.bnote{ margin:10px 0 0; font-size:14px; color:var(--ink3) }
.ddm .dd-all{ border-top:1px solid var(--rule); margin-top:4px; padding-top:12px }
.mgl a.mg-all{ grid-column:1 / -1 }

/* Live-Website: kein Vorschau-Rahmen, keine Vorschau-Leiste */
.stage{padding:0}
.frame{max-width:none;border-radius:0;box-shadow:none}
.rb{display:none}
.fgrid .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ferr{margin:0;color:#B42318;font-size:14px}
.fgrid button[disabled]{opacity:.6;cursor:wait}