/* modvio · Startseite G (16.10.2026): Aufbau 1:1 nach der vom Inhaber gewählten Vorlage (Boostly-Layout), Inhalte und Zahlen von modvio.
   Akzent der Vorlage (Violett) durch modvio-Blau ersetzt. Keine Fremdlogos, keine erfundenen Preise oder Kennzahlen. */
*{box-sizing:border-box}
html,body{margin:0;background:#EEF1F4;color:#14161B;font-family:var(--fs);-webkit-font-smoothing:antialiased;overflow-x:clip}
body{container:pg/inline-size}
a{color:var(--blue-deep);text-decoration:none}a:hover{color:#163FB0}
h1,h2,h3,p{margin:0}
svg{flex:none;width:16px;height:16px}
.wd-h svg,.tp-h svg{width:12px;height:12px;margin-left:4px}.pj-h svg{width:14px;height:14px}
.wd-h span,.tp-h span{gap:2px}
.w{width:min(1200px,calc(100% - 48px));margin:0 auto}
.lg{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:700;letter-spacing:-.045em;color:#14161B}.lg:hover{color:#14161B}
.lg span{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:20px;height:20px}.lg i{background:currentColor;border-radius:30%}.lg i.hl{background:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border-radius:var(--r-btn);font-size:15px;font-weight:600;white-space:nowrap;letter-spacing:-.01em}
.btn.d{background:#14161B;color:#fff;box-shadow:none}.btn.d:hover{background:#2A2D34;color:#fff}
.btn.l{background:#fff;color:#14161B;box-shadow:inset 0 0 0 1px #E1E5EB}.btn.l:hover{background:#F5F7FA;color:#14161B;box-shadow:inset 0 0 0 1px #CDD2DA}
.h2{font-size:50px;line-height:1.1;font-weight:500;letter-spacing:-.045em;text-wrap:balance}
.lead{font-size:17px;line-height:1.55;color:#5A616D;text-wrap:pretty}
.ctr{text-align:center}
section{position:relative}

/* Navigation */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:104px;transition:height .25s ease}
.nav::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:rgba(238,241,244,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(20,22,27,.07);opacity:0;transition:opacity .25s ease}
.nav.stuck{height:72px}.nav.stuck::before{opacity:1}
.np{position:relative;display:flex;gap:4px;padding:5px;background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(11,14,20,.04)}
.np a{position:relative;z-index:1;display:flex;align-items:center;height:40px;padding:0 18px;white-space:nowrap;border-radius:9px;font-size:15px;font-weight:500;color:#5A616D;transition:color .2s}
.np a:hover{color:#14161B}.np a.on{background:#F2F4F7;color:#14161B;box-shadow:inset 0 0 0 1px #E4E7EC}
.np-pill{position:absolute;left:5px;top:5px;height:40px;border-radius:9px;background:#F2F4F7;box-shadow:inset 0 0 0 1px #E4E7EC;transition:transform .32s cubic-bezier(.3,1.3,.5,1),width .32s cubic-bezier(.3,1.3,.5,1),opacity .2s;pointer-events:none}
.np:has(.np-pill) a.on{background:none;box-shadow:none}
.np.hov a.on:not(:hover){color:#5A616D}

.nr{display:flex;gap:12px}
/* Anmelden fuer Bestandskunden (Userhinweis 16.10.2026): leiser Textlink vor den Knoepfen, im Handy-Menue als Eintrag. */
.nr-in{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 14px;border-radius:var(--r-btn);font-size:15px;font-weight:500;white-space:nowrap;color:#5A616D;transition:color .2s,background .2s}
.nr-in:hover{color:#14161B;background:#fff}
.gm-in-l{gap:10px}.gm-in-l svg{width:20px;height:20px;color:#5A616D}
.burger{display:none}

/* Hero */
.hero{padding-top:76px;text-align:center}
.hero h1{font-size:68px;line-height:1.08;font-weight:500;letter-spacing:-.05em;text-wrap:balance}
.hero .lead{max-width:540px;margin:22px auto 0;font-size:18px}
.hero-cta{display:flex;justify-content:center;gap:12px;margin-top:34px}
.shot{position:relative;width:min(1244px,calc(100% - 48px));height:560px;margin:72px auto 0;padding:14px 14px 0;border-radius:30px 30px 0 0;background:linear-gradient(180deg,#DCE1E8,#E7EAEF);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);overflow:hidden}
.shot::after{content:"";position:absolute;inset:auto 0 0;height:150px;background:linear-gradient(rgba(238,241,244,0),#EEF1F4 85%)}
.app-wrap{width:100%;height:100%}
.app{display:grid;grid-template-columns:232px minmax(0,1fr);height:100%;background:#fff;border-radius:18px 18px 0 0;overflow:hidden;font-size:13.5px;color:#14161B;text-align:left}
.sb{padding:20px 14px;border-right:1px solid #EEF0F3}
.sb-top{display:flex;align-items:center;justify-content:space-between;padding:0 6px}
.sb-top .lg{font-size:16px}.sb-top .lg span{width:16px;height:16px;gap:2px}
.sb-top svg{width:16px;height:16px;color:#A0A6B0}
.sb-s{display:flex;align-items:center;gap:8px;height:34px;margin:18px 0 10px;padding:0 10px;border-radius:9px;border:1px solid #EEF0F3;color:#A0A6B0;font-size:12.5px}
.sb-s svg{width:14px;height:14px}.sb-s kbd{margin-left:auto;font:inherit;font-size:11px;padding:1px 5px;border-radius:5px;background:#F2F4F7;color:#8A909A}
.sb-i{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px;color:#3D4350}
.sb-i svg{width:16px;height:16px;color:#7A808B}
.sb-i .bd{margin-left:2px;padding:0 6px;border-radius:999px;background:#FDE7E7;color:#C62828;font-size:11px;font-weight:600}
.sb-h{display:flex;justify-content:space-between;margin:22px 10px 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8A909A}
.sb-p{display:flex;align-items:center;gap:10px;height:31px;padding:0 10px;border-radius:8px;color:#3D4350}
.sb-p .o{width:9px;height:9px;border-radius:50%;border:1.5px solid #E26A6A}.sb-p .o.g{border-color:#2EA36B}.sb-p .o.b{border-color:var(--blue)}
.sb-p.sub{padding-left:29px}.sb-p.on{background:#EEF3FF;color:#14161B;font-weight:500}
.mn{padding:20px 26px;min-width:0}
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8A909A}.crumb .o{width:8px;height:8px;border-radius:50%;border:1.5px solid #E26A6A}.crumb b{font-weight:500;color:#14161B}
.mh{display:flex;align-items:center;gap:12px;margin-top:16px}.mh h3{margin-right:auto}
.mh h3{font-size:24px;font-weight:500;letter-spacing:-.03em}.mh .dots{color:#8A909A;letter-spacing:2px}
.av{display:flex;margin-left:auto}.av i{display:grid;place-items:center;width:28px;height:28px;margin-left:-7px;border-radius:50%;border:2px solid #fff;font-style:normal;font-size:10.5px;font-weight:600;color:#fff;background:#3D4350}
.av i:nth-child(2){background:var(--blue)}.av i:nth-child(3){background:#8A909A}
.mb{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid #E4E7EC;font-size:12.5px;font-weight:500;color:#3D4350}
.mb.p{border:0;background:var(--blue);color:#fff}
.mb svg{width:13px;height:13px}
.tabs{display:flex;align-items:center;gap:22px;height:48px;margin-top:14px;border-bottom:1px solid #EEF0F3;font-size:13px;color:#5A616D}
.tabs span{display:flex;align-items:center;gap:7px;height:100%;white-space:nowrap}.tabs .sp{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px}.tabs svg{width:14px;height:14px}
.tabs .on{color:#14161B;font-weight:500;box-shadow:inset 0 -2px 0 #14161B}
.tabs .sp{margin-left:auto;color:#A0A6B0}
.tabs .mo{height:30px;padding:0 10px;border-radius:8px;border:1px solid #E4E7EC;color:#14161B}
.days{display:grid;grid-template-columns:repeat(8,1fr);height:44px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:16px;color:#3D4350}
.days span{padding-left:12px}.days small{font-size:10px;color:#A0A6B0;margin-right:3px;letter-spacing:.04em}
.days .td{color:var(--blue);font-weight:600}
.tl{position:relative;height:320px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),#F3F4F6 calc(12.5% - 1px),#F3F4F6 12.5%)}
.tl .now{position:absolute;left:calc(25% + 18px);top:0;bottom:0;width:2px;background:var(--blue)}
.tc{position:absolute;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid #E8EBEF;box-shadow:0 6px 16px -10px rgba(11,14,20,.2)}
.tc b{display:block;font-size:13.5px;font-weight:600}
.tc .dt{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11.5px;color:#8A909A}
.tc .ft{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:500;background:#EEF3FF;color:var(--blue-deep)}
.chip.y{background:#FFF3DF;color:#9A5B00}.chip.g{background:var(--green-tint);color:var(--green)}
.tc .av i{width:22px;height:22px;font-size:9px}
.dd{position:absolute;padding:6px;border-radius:10px;background:#fff;border:1px solid #E8EBEF;box-shadow:0 16px 30px -16px rgba(11,14,20,.3);font-size:12px}
.dd .in{display:flex;justify-content:space-between;padding:6px 8px;border-bottom:1px solid #EEF0F3;color:#A0A6B0}
.dd .in kbd{font:inherit;font-size:10.5px;padding:0 5px;border-radius:4px;background:#F2F4F7}
.dd span{display:flex;align-items:center;gap:8px;padding:6px 8px;color:#3D4350}
.dd span::before{content:"";width:5px;height:5px;border-radius:50%;background:#A0A6B0}
.dd span.b{color:var(--blue-deep)}.dd span.b::before{background:var(--blue)}

/* Logozeile */
.logos{padding:64px 0 0;text-align:center}
.lo-hd{font-size:14px;font-weight:500;color:#6B717C}
.lo-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.lo{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;height:104px;padding:0 20px;border-radius:20px;background:linear-gradient(#fff,#F8F9FB);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #E8EBEF,0 18px 36px -30px rgba(11,14,20,.35);font-size:18px;font-weight:700;letter-spacing:-.03em;color:#6B717C;white-space:nowrap;transition:transform .35s cubic-bezier(.2,1.5,.4,1),box-shadow .25s,color .2s}
.lo img{flex:none;height:32px;width:auto;filter:brightness(0);opacity:.45;transition:filter .3s,opacity .3s,transform .35s cubic-bezier(.2,1.5,.4,1)}
.lo-g:has(.lo:hover) .lo:not(:hover){opacity:.55}
.lo:hover{transform:translateY(-6px);color:#14161B;box-shadow:inset 0 1px 0 #fff,0 0 0 1px #D6E0FA,0 0 0 7px rgba(47,107,255,.08),0 26px 40px -22px rgba(30,79,216,.45)}
.lo:hover img{filter:brightness(0);opacity:.9;transform:scale(1.08)}
.lo-g .lo{transition:transform .35s cubic-bezier(.2,1.5,.4,1),box-shadow .25s,color .2s,opacity .25s}

/* Leistungen */
.feat{padding-top:96px}
.feat .h2{max-width:560px;margin-top:18px}
.bx-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.bx-hd .lead{max-width:400px;font-size:16px;color:#6B717C}
.bx-eb{display:block;font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--blue-deep)}
.bx{display:grid;grid-template-columns:1.32fr 1fr 1fr .96fr;gap:14px;height:580px;margin-top:48px}
.bx-c{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:12px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #E8EBEF,0 18px 36px -30px rgba(11,14,20,.3);overflow:hidden}
.bx-v{position:relative;flex:1;min-height:0;border-radius:14px;overflow:hidden;background:radial-gradient(120% 80% at 80% 0%,#5B8CFF 0%,rgba(91,140,255,0) 60%),linear-gradient(165deg,#3A75FF 0%,#2F6BFF 40%,#1E4FD8 100%)}
.bx-v::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px) 0 0/14px 14px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.bx-t{padding:10px 10px 8px}
.bx-t h3{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.03em;color:#14161B}
.bx-t p{margin-top:8px;font-size:14px;line-height:1.5;color:#5A616D;text-wrap:pretty}
.bx-b{display:flex;width:max-content;align-items:center;height:36px;margin-top:16px;padding:0 16px;border-radius:var(--r-btn);background:var(--blue);color:#fff;font-size:13.5px;font-weight:600}.bx-b:hover{background:var(--blue-deep);color:#fff}
.bx-b.wh{background:#fff;color:#14161B}.bx-b.wh:hover{background:#EAF0FF;color:#14161B}
.bx-1{padding:0;background:linear-gradient(165deg,#3A75FF 0%,#2F6BFF 45%,#1A47C9 100%);box-shadow:0 30px 60px -36px rgba(30,79,216,.8)}
.bx-1 .bx-v{background:none;border-radius:0}
.bx-1 .bx-t{padding:0 28px 28px}.bx-1 .bx-t h3{font-size:26px;color:#fff}.bx-1 .bx-t p{color:rgba(255,255,255,.82);max-width:330px}
.bx .chip{flex:none}
.ic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;background:#EEF3FF;color:var(--blue-deep)}.ic svg{width:16px;height:16px}
.ic.o{background:#FFF0DD;color:#9A5B00}.ic.r{background:#FDE7E7;color:#B42318}.ic.b{background:#EEF3FF;color:var(--blue-deep)}

/* Werte */
.vals{padding-top:120px}
.vals .lead{max-width:600px;margin:18px auto 0}
.bento{display:grid;grid-template-columns:minmax(0,325fr) minmax(0,425fr);gap:18px;margin-top:64px}
.bc{padding:14px 14px 30px;border-radius:18px;background:#fff;text-align:center}
.bc.full{grid-column:1/-1}
.bp{position:relative;height:330px;border-radius:12px;background:#F5F7F9;border:1px solid #EEF0F3;overflow:hidden;text-align:left}
.bc h3{margin-top:30px;font-size:26px;font-weight:500;letter-spacing:-.035em}
.bc p{max-width:470px;margin:12px auto 0;font-size:15px;line-height:1.55;color:#5A616D}
.wd{position:absolute;left:6%;right:6%;top:22px;bottom:0;padding:22px 22px 0;border-radius:12px 12px 0 0;background:#fff;box-shadow:0 10px 30px -20px rgba(11,14,20,.3)}
.wd-h{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600}
.wd-h span{height:24px;padding:0 10px;border-radius:999px;background:#F2F4F7;font-size:11.5px;font-weight:500;color:#8A909A;display:flex;align-items:center}
.wd-k{display:flex;justify-content:space-between;align-items:flex-end;margin-top:22px}
.wd-k small{display:block;font-size:12.5px;color:#3D4350}
.wd-k b{display:block;margin-top:4px;font-size:30px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.wd-k .pc{font-size:15px;font-weight:600;padding-bottom:6px;white-space:nowrap}
.bars{position:absolute;left:22px;right:22px;bottom:0;height:120px;display:flex;align-items:flex-end;gap:18px;border-bottom:1px solid #EEF0F3}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%}
.bars i{display:block;width:100%;border-radius:8px 8px 0 0;background:linear-gradient(#D6DBE3,#E8EBEF)}
.bars div:last-child i{background:linear-gradient(var(--blue),#9DB9FF)}
.bars span{font-size:11.5px;color:#8A909A}
.bars em{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-style:normal;font-size:12px;font-weight:600;padding:4px 9px;border-radius:7px;background:#fff;border:1px solid #E4E7EC;box-shadow:0 6px 14px -8px rgba(11,14,20,.25)}
.pj{position:absolute;left:50%;top:22px;bottom:0;width:62%;transform:translateX(-50%);padding:18px 22px 0;border-radius:12px 12px 0 0;background:#fff;box-shadow:0 10px 30px -20px rgba(11,14,20,.3)}
.pj-h{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}.pj-h .pl{margin-left:auto;color:#8A909A;font-weight:400;font-size:18px}
.pj-a{display:flex;gap:6px;margin-top:16px}
.pj-a i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#EEF3FF;color:var(--blue-deep);font-style:normal;font-size:10.5px;font-weight:600}
.pj-a i.x{background:#F2F4F7;color:#8A909A}
.pj-r{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:15px;color:#14161B}
.pj-r::before{content:"";width:13px;height:13px;border-radius:3px;background:#8A909A}
.pj-r svg{width:15px;height:15px}.pj-r .st{color:#E8A23A}.pj-r .lk{color:#5A616D}
.pj-n{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--green-tint);color:var(--green)}
.tp{position:absolute;left:8%;right:8%;top:28px;bottom:40px;padding:20px 14px 0;border-radius:12px;background:#fff;box-shadow:0 10px 30px -20px rgba(11,14,20,.3)}
.tp-h{display:flex;align-items:center;padding:0 0 0 2px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.tp-h span{margin-left:22%;height:24px;padding:0 10px;border-radius:999px;background:#F2F4F7;font-size:11.5px;font-weight:500;color:#8A909A;display:flex;align-items:center}
.tp-w{display:grid;grid-template-columns:repeat(9,1fr);margin-top:20px;font-size:11.5px;color:#8A909A;text-align:center}
.tp-w i{font-style:normal}.tp-w .nw b{display:inline-block;padding:2px 9px;border-radius:999px;background:#14161B;color:#fff;font-weight:600}
.tp-g{position:absolute;left:14px;right:14px;top:84px;bottom:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(11.111% - 1px),#F1F2F5 calc(11.111% - 1px),#F1F2F5 11.111%)}
.tp-g .ln{position:absolute;left:61%;top:-14px;bottom:0;border-left:1.5px dashed #14161B}
.tb{position:absolute;display:flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 4px;border-radius:7px;font-size:12px;font-weight:600;white-space:nowrap}
.tb b{padding:2px 7px;border-radius:5px;font-weight:600}
.tb.p1{left:1%;top:20px;background:var(--blue);color:#fff}.tb.p1 b{background:rgba(255,255,255,.25)}
.tb.p2{left:23%;top:64px;background:#EEF3FF;color:var(--blue-deep);border:1px solid #DCE5FA}.tb.p2 b{background:#fff}
.tb.p3{left:62%;top:108px;background:#fff;color:#14161B;box-shadow:0 6px 14px -8px rgba(11,14,20,.3);border:1px solid #E4E7EC}.tb.p3 b{background:#14161B;color:#fff}

/* Kundenstimmen: drei vollständige Karten, Michael als Abschluss darunter */
.tst{padding-top:120px}
.tst .h2{max-width:600px;margin:0 auto;scroll-margin-top:120px}
.tg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.tq{overflow:hidden;isolation:isolate;position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:32px;border:1px solid #E0E4EA;border-radius:14px;background:#fff}
.tq-qm{position:absolute;right:28px;top:14px;font-size:64px;line-height:1;color:var(--blue-deep);font-weight:500;pointer-events:none}
.tq-k{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-right:36px;font-size:13px;line-height:1.45;color:#646B77}
.tq-k b{font-size:23px;line-height:1.2;font-weight:600;letter-spacing:-.03em;color:#14161B}
.tq-stars{display:block;position:relative;color:var(--blue-deep);line-height:0}.tq-stars svg{width:98px;height:18px;fill:currentColor}
.tq-watermark{position:absolute;z-index:-1;right:18px;bottom:18px;width:180px;height:140px;background:var(--blue);opacity:.09;mask:var(--tq-logo) center/contain no-repeat;-webkit-mask:var(--tq-logo) center/contain no-repeat;pointer-events:none}
.tq-fb-erdbau{--tq-logo:url('/images/logos/fb-erdbau.svg')}.tq-speed4you{--tq-logo:url('/images/logos/speed4you.svg')}.tq-ge-es{--tq-logo:url('/images/logos/ge-es.svg')}
.tg>.tq:not(.tq-feature)>.tq-watermark{position:relative;inset:auto;order:2;align-self:flex-end;width:120px;height:72px;flex:none;margin-top:auto;opacity:.12}
.tg>.tq:not(.tq-feature)>.tq-stars{order:0}
.tg>.tq:not(.tq-feature)>blockquote{order:1;margin-bottom:20px}
.tg>.tq:not(.tq-feature)>.tq-by{order:3;margin-top:22px;min-height:56px}
.tq blockquote{position:relative;margin:28px 0 48px}
.tq blockquote p{font-size:21px;line-height:1.5;letter-spacing:-.025em;color:#3D4350;text-wrap:pretty}
.tq-by{position:relative;display:flex;align-items:center;gap:14px;margin-top:auto}
.tq-av{flex:none;width:56px;height:56px;border-radius:10px;object-fit:cover;background:#E8EBEF}
.tq-av.lg2{display:grid;place-items:center;background:#F5F7F9}.tq-av.lg2 img{width:72%;height:72%;object-fit:contain;filter:brightness(0);opacity:.8}
.tq-n{min-width:0}
.tq-n b{display:block;font-size:15px;font-weight:600;color:#14161B}
.tq-n>span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:#646B77}
.tq-feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 43%;padding:0;overflow:hidden}
.tq-feature-copy{margin:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:44px 48px;min-width:0}
.tq-feature .tq-qm{right:40px;top:28px;font-size:88px}
.tq-feature blockquote{margin:28px 0 36px;max-width:680px}
.tq-feature blockquote p{font-size:30px;line-height:1.4;color:#14161B}
.tq-feature .tq-by{width:100%;justify-content:space-between}
.tq-feature .tq-n b{font-size:19px}
.tq-brand{width:30px;height:54px;object-fit:contain}
.tq-visual{position:relative;isolation:isolate;align-self:stretch;min-height:420px;display:flex;align-items:flex-end;justify-content:flex-end;background:#F4F7FF;overflow:hidden}
.tq-visual .tq-watermark{--tq-logo:url('/images/logos/gasthof-zur-linde-blatt.svg');z-index:0;left:0;right:auto;top:4%;bottom:auto;width:42%;height:84%;opacity:.35;transform:none}
.tq-portrait{position:relative;width:78%;height:auto;max-height:520px;object-fit:contain;object-position:bottom;align-self:flex-end}
@container pg (max-width:1100px){.tg{gap:16px}.tq{padding:24px}.tq blockquote p{font-size:19px}.tq-feature{padding:0}.tq-feature-copy{padding:36px}.tq-feature blockquote p{font-size:27px}.tq-by{gap:10px}.tq-av{width:48px;height:48px}}
@container pg (max-width:820px){.tg{grid-template-columns:1fr}.tq blockquote{margin:24px 0 28px}.tq-feature{grid-template-columns:minmax(0,1fr) 34%}.tq-feature blockquote p{font-size:25px}.tq-feature-copy{padding:32px}.tq-visual{min-height:340px}}

/* Drei Wege */
.plans{padding-top:120px}
.plans .h2{max-width:560px}
.pg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:56px}
.pc{padding:10px 10px 30px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px #E8EBEF,0 20px 40px -32px rgba(11,14,20,.25)}
.pt{position:relative;padding:22px 22px 22px;border-radius:14px;background:linear-gradient(180deg,#F9FAFB,#F3F5F8);border:1px solid #EEF0F3;overflow:hidden}
.pc.hl .pt{background:radial-gradient(120% 80% at 80% 0%,#5B8CFF 0%,rgba(91,140,255,0) 60%),linear-gradient(165deg,#3A75FF 0%,#2F6BFF 40%,#1E4FD8 100%);border-color:transparent;color:#fff}
.pc.hl .pt h3,.pc.hl .pt .pr b{color:#fff}.pc.hl .pt .pr span,.pc.hl .pt p{color:rgba(255,255,255,.82)}
.pc.hl .pt .btn{box-shadow:none}
.pc.hl .pt::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px) 0 0/14px 14px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%);pointer-events:none}
.pt h3{position:relative;font-size:19px;font-weight:500;letter-spacing:-.02em}
.pt .pr{position:relative;display:flex;align-items:baseline;gap:10px;margin-top:22px}
.pt .pr b{font-size:44px;font-weight:500;letter-spacing:-.045em;line-height:1}
.pt .pr span{font-size:13px;color:#5A616D}
.pt p{position:relative;margin-top:14px;font-size:15px;line-height:1.5;color:#5A616D}
.pt .btn{position:relative;width:100%;margin-top:22px;height:50px}
.pt .pk{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;margin-top:22px;min-height:60px;padding:8px 14px;border-radius:12px;background:linear-gradient(180deg,#FFF6F5,#FFEBE8);border:1px solid #FFD0CA;box-shadow:inset 0 1px 0 #fff,0 6px 16px -10px rgba(217,45,32,.35)}.pt .pk small{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;line-height:1.2;color:#B42318}.pt .pk small svg{width:14px;height:14px;flex:none}.pt .pk b{font-size:21px;font-weight:600;letter-spacing:-.035em;line-height:1.15;color:#C8261A;white-space:nowrap}.pc.hl .pt .btn{height:60px}
.pc ul{list-style:none;margin:28px 0 0;padding:0 14px;display:grid;gap:16px}
.pc ul b{display:block;margin-bottom:2px;font-size:15px;font-weight:500}
.pc li{display:flex;gap:12px;font-size:14.5px;line-height:1.45;color:#3D4350}
.pc li svg{width:20px;height:20px;padding:4px;border-radius:50%;background:#F2F4F7;color:#3D4350;margin-top:-1px}
.pc.hl li svg{background:var(--blue);color:#fff}
.pc li.no svg{color:#A0A6B0}

/* Programme */
.tools{margin-top:120px;height:600px}
.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(7,1fr);gap:10px;-webkit-mask-image:radial-gradient(70% 80% at 50% 55%,#000 40%,transparent 100%);mask-image:radial-gradient(70% 80% at 50% 55%,#000 40%,transparent 100%)}
.grid i{border-radius:4px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.tools-h{position:relative;z-index:2;width:fit-content;max-width:100%;margin:0 auto;padding:56px 72px 40px;text-align:center;pointer-events:none}
.tools-h::before{content:"";position:absolute;inset:10px -40px 10px;z-index:-1;background:radial-gradient(closest-side,#EEF1F4 70%,rgba(238,241,244,.8) 86%,rgba(238,241,244,0))}
.tools-h .h2{margin-top:0;font-size:64px;line-height:1.02;letter-spacing:-.05em}
.tools-h .lead{max-width:520px;margin:20px auto 0;font-size:18px;color:#3D4350}
.tile{position:absolute;z-index:1;left:calc((100% + 10px) / 14 * var(--c));top:calc((100% + 10px) / 7 * var(--r));display:grid;place-items:center;width:72px;height:72px;border-radius:6px;box-shadow:0 0 0 3px #fff,0 10px 22px -12px rgba(11,14,20,.45)}
.tile{background:#fff;transition:transform .35s cubic-bezier(.2,1.5,.4,1),box-shadow .25s,opacity .25s}
.tile img{width:40px;height:40px;object-fit:contain;transition:transform .35s cubic-bezier(.2,1.5,.4,1)}
.tools:has(.tile:hover) .tile:not(:hover){opacity:.4}
.tile:hover{z-index:4;transform:translateY(-8px) scale(1.16);box-shadow:0 0 0 2px var(--blue),0 0 0 9px rgba(47,107,255,.16),0 26px 40px -16px rgba(30,79,216,.75)}
.tile:hover img{transform:scale(1.1)}
.tn{position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,-4px);padding:6px 11px;border-radius:8px;background:var(--blue);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .25s;box-shadow:0 8px 18px -8px rgba(30,79,216,.8)}
.tn::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.tile:hover .tn{opacity:1;transform:translate(-50%,0)}
.tools::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(47,107,255,.55),rgba(47,107,255,0) 70%);pointer-events:none;-webkit-mask-image:radial-gradient(70% 80% at 50% 55%,#000 40%,transparent 100%);mask-image:radial-gradient(70% 80% at 50% 55%,#000 40%,transparent 100%)}
.tools.lit::before{opacity:1}
.grid{z-index:0}.grid i{background:rgba(255,255,255,.82)}

/* FAQ */
.faq{padding-top:110px}
.fq-h{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.fq-h .lead{max-width:420px;margin:0;font-size:15.5px}
.fq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;margin-top:48px;align-items:stretch}
.fq-l{position:relative;display:grid;grid-auto-rows:1fr;align-content:stretch;gap:2px;padding:8px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px #E8EBEF,0 20px 40px -32px rgba(11,14,20,.25)}
.fq-ind{position:absolute;left:8px;right:8px;top:0;height:0;border-radius:12px;background:#F2F4F7;transition:transform .55s cubic-bezier(.34,1.35,.64,1),height .45s cubic-bezier(.34,1.35,.64,1);pointer-events:none}
.fq-it{position:relative;display:grid;border-radius:12px}
.fq-q{display:grid;grid-template-columns:30px minmax(0,1fr) 32px;align-items:center;gap:12px;width:100%;min-height:78px;padding:14px 14px 14px 18px;border:0;background:none;border-radius:12px;text-align:left;font:inherit;font-size:16.5px;line-height:1.35;letter-spacing:-.015em;color:#5A616D;cursor:pointer;transition:color .2s}
.fq-q:hover,.fq-it.on .fq-q{color:#14161B}.fq-it.on .fq-q{font-weight:500}.fq-q:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fq-n{font-size:13px;font-weight:600;color:#A0A6B0;font-variant-numeric:tabular-nums;transition:color .2s}.fq-it.on .fq-n{color:var(--blue)}
.fq-q i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #E8EBEF;color:#14161B;transition:background .25s,color .25s,box-shadow .25s,transform .4s cubic-bezier(.34,1.35,.64,1)}.fq-q i svg{width:14px;height:14px}
.fq-q:hover i{transform:translateX(3px)}.fq-it.on .fq-q i{background:var(--blue);box-shadow:none;color:#fff;transform:translateX(4px)}
.fq-a{display:none}
.fq-p{position:relative;display:flex;flex-direction:column;min-height:460px;padding:34px 40px 30px;border-radius:18px;overflow:hidden;color:#fff;background:radial-gradient(120% 80% at 80% 0%,#5B8CFF 0%,rgba(91,140,255,0) 60%),linear-gradient(165deg,#3A75FF 0%,#2F6BFF 40%,#1E4FD8 100%);box-shadow:0 30px 60px -36px rgba(30,79,216,.6)}
.fq-p::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px) 0 0/14px 14px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}
.fq-controls{position:relative;display:flex;align-items:center;gap:14px}.fq-bar{position:relative;display:flex;flex:1;gap:6px}.fq-bar i{position:relative;flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}.fq-bar i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--progress,0))}
.fq-play{display:grid;place-items:center;width:44px;height:44px;flex:none;margin:-12px -10px -12px 0;padding:10px;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}.fq-play:hover{background:rgba(255,255,255,.15)}.fq-play:focus-visible{outline:2px solid #fff;outline-offset:1px}.fq-play svg{width:20px;height:20px}.fq-start-icon,.fq-play.is-paused .fq-pause-icon{display:none}.fq-play.is-paused .fq-start-icon{display:block}
.fq-pc{position:relative;margin:34px 0 36px}
.fq-pc small{font-size:13px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.85)}.fq-pc small b{font-weight:600;color:#fff}
.fq-pc h3{margin-top:14px;font-size:32px;font-weight:500;letter-spacing:-.035em;line-height:1.15;text-wrap:balance;color:#fff}
.fq-pc p{margin-top:18px;max-width:540px;font-size:18px;line-height:1.6;color:#fff;text-wrap:pretty}
.fq-w{display:inline-block}.fq-pc.go .fq-w{animation:fqIn .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0) * 14ms)}
@keyframes fqIn{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.fq-pf{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.22)}
.fq-pf>span{font-size:15px;font-weight:500;color:#fff}.fq-pf>div{display:flex;flex-wrap:wrap;gap:10px}
.fq-b{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;font-size:14px;font-weight:600;white-space:nowrap;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);text-decoration:none;transition:background .2s}.fq-b:hover{background:rgba(255,255,255,.12);color:#fff}.fq-b svg{width:16px;height:16px}
.fq-b.wh{background:#fff;color:#14161B;box-shadow:none}.fq-b.wh:hover{background:#EEF3FF;color:#14161B}.fq-sm{display:none}
@container pg (max-width:800px){.fq-h{flex-direction:column;align-items:flex-start;gap:16px}.fq{grid-template-columns:minmax(0,1fr);margin-top:32px}.fq-ind{display:none}.fq-l{grid-auto-rows:auto;align-content:start}.fq-it{transition:background .3s}.fq-it.on{background:#F2F4F7}.fq-q{min-height:68px;font-size:16px}.fq-q i,.fq-q:hover i{transform:rotate(90deg)}.fq-it.on .fq-q i{transform:rotate(-90deg)}.fq-a,.fq-it.on .fq-a{display:none}.fq-a>div{overflow:hidden}.fq-a p{margin:0;padding:0 18px 20px 60px;font-size:15px;line-height:1.6;color:#3D4350}.fq-p{min-height:0;padding:24px}.fq-p{min-height:390px}.fq-pc{margin:28px 0}.fq-pc h3{font-size:27px}.fq-pc p{font-size:16px}.fq-pf{margin-top:auto}.fq-pf{padding-top:20px;flex-direction:column;align-items:flex-start}}
@container pg (max-width:640px){.faq{padding-top:72px}.fq-a p{padding-left:18px}.fq-q{grid-template-columns:24px minmax(0,1fr) 32px;padding-left:14px}
/* Kundenwunsch 17.10.2026: WhatsApp und Anrufen nebeneinander, gleich breit; dafuer die kurzen Beschriftungen. */
.fq-pf>div{display:grid;grid-template-columns:1fr 1fr;align-self:stretch}.fq-b{justify-content:center;height:48px;padding:0 10px;font-size:15px}.fq-lg{display:none}.fq-sm{display:inline}}
@container pg (max-width:359px){.fq-pf>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.fq-b{gap:6px;padding:0 6px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.fq-pc.go .fq-w{animation:none}.fq-ind,.fq-a{transition:none}}

/* Abschluss */
.cta{margin-top:120px;padding:14px;border-radius:22px;background:#fff}
.cta-in{position:relative;display:grid;place-items:center;height:480px;border-radius:14px;background:#F7F9FB;border:1px solid #EAEDF1;overflow:hidden;text-align:center}
.cta-in::before{content:"";position:absolute;inset:0;background:linear-gradient(#E4E8EE 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,#E4E8EE 1px,transparent 1px) 0 0/80px 80px;-webkit-mask-image:radial-gradient(45% 70% at 72% 30%,#000,transparent);mask-image:radial-gradient(45% 70% at 72% 30%,#000,transparent)}
.cta-in::after{content:"";position:absolute;left:calc(50% + 400px);top:12%;width:80px;height:80px;background:var(--blue);box-shadow:-80px 160px 0 var(--blue-tint),-880px 240px 0 var(--blue-tint),80px 240px 0 var(--blue-tint)}
.cta-c{position:relative;z-index:1}
.cta h2{max-width:720px;margin:0 auto;font-size:52px;line-height:1.1;font-weight:500;letter-spacing:-.045em;text-wrap:balance}
.cta .lead{max-width:520px;margin:18px auto 0}
.cta .btn{margin-top:30px}
/* Abschluss mit Schnellstart (Produktseiten und Ratgeber-Artikel, Growth-Etappe 5): der feste Rahmen von .cta-in (480 px) wächst mit */
.cta-in:has(.cta-start){height:auto;min-height:480px;padding:72px 24px}
.cta-start{max-width:880px;margin:30px auto 0}
.cta-sq{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#646B77}
.cta-ch{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.cta .cta-ch .btn{margin-top:0}   /* .cta .btn setzt 30px; im Raster der Startpunkte waere das der Zeilenabstand */
.cta-start + .btn{margin-top:22px}

/* Fuß */
.ft{margin-top:72px;background:#fff}
.ft-g{display:grid;grid-template-columns:1.25fr .7fr .9fr 1fr;min-height:360px}
.ft-g>div{padding:80px 36px 48px;border-left:1px solid #EEF0F3}
.ft-g>div:first-child{border-left:0;padding-left:28px}
.ft p{margin-top:28px;max-width:320px;font-size:14px;line-height:1.6;color:#5A616D}
.ft p.ft-cl{margin-top:30px;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.035em;color:#14161B}.ft p.ft-cl+p{margin-top:12px}
.ft-k{display:inline-block;margin-top:22px;font-size:14.5px;font-weight:600;color:#14161B}.ft-k:hover{color:var(--blue-deep)}
.ft-so{display:flex;gap:10px;margin-top:24px}.ft-so a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1px #E4E7EC;color:#14161B}.ft-so a:hover{background:#14161B;color:#fff;box-shadow:none}.ft-so svg{width:17px;height:17px}
.ft h4{margin:0;font-size:17px;font-weight:600;letter-spacing:.04em}
.ft ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px;font-size:14px}
.ft ul a{color:#3D4350}.ft ul a:hover{color:#14161B}
.ft li{color:#3D4350}
.ft-in{display:flex;align-items:center;justify-content:space-between;gap:10px;height:48px;margin-top:22px;padding:0 6px 0 14px;border-radius:10px;border:1px solid #E4E7EC;box-shadow:0 2px 6px -3px rgba(11,14,20,.1);font-size:14px;color:#8A909A}
.ft-in:hover{color:#5A616D}
.ft-in span{display:grid;place-items:center;width:36px;height:36px;border-radius:7px;background:#14161B;color:#fff}.ft-in svg{width:16px;height:16px}
.ft-b{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;height:76px;padding:0 28px;border-top:1px solid #E4E7EC;font-size:13px;color:#8A909A}
.ft-b nav{display:flex;align-items:center;gap:24px}.ft-b a{color:#5A616D}

/* Handy */
@container pg (max-width:1100px){.np a{padding:0 12px}.nr .btn.l{display:none}}
@container pg (max-width:900px){.np{display:none}.burger{display:grid;place-items:center;width:44px;height:44px;margin-right:-11px;background:none}.burger span{display:grid;gap:6px;width:22px}.burger i{height:2px;border-radius:2px;background:#14161B}}
@container pg (max-width:640px){
.w{width:calc(100% - 40px)}
.h2{font-size:34px}
.nav{height:72px}.nav.stuck{height:64px}.np,.nr .btn.l,.nr-in{display:none}
.nr .btn{height:44px;padding:0 16px;font-size:14px}
.burger{display:grid;place-items:center;width:44px;height:44px;margin-right:-11px;background:none}
.burger span{display:grid;gap:6px;width:22px}.burger i{height:2px;border-radius:2px;background:#14161B}
/* Kundenwunsch 17.10.2026: der Hero fuellt genau den ersten Bildschirm (100svh = mit eingeblendeten
   Browserleisten, abzueglich der 72-px-Kopfzeile). Beide Knoepfe stehen darin, das App-Bild beginnt darunter. */
.hero{padding-top:0}
.hero>.w{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);padding:12px 0 40px}
.hero h1{font-size:42px;line-height:1.08}
.hero .lead{font-size:16.5px;margin-top:18px}
.hero-cta{flex-direction:column;gap:12px;margin-top:28px}
.hero-cta .btn{height:54px;font-size:16px}
.shot{width:calc(100% - 40px);height:290px;margin-top:0;padding:8px 8px 0;border-radius:20px 20px 0 0}
.shot::after{height:90px}
.app-wrap{width:1100px;height:900px;transform:scale(.3);transform-origin:0 0}
.app{border-radius:36px 36px 0 0}
.logos{padding:44px 0 0}.lo-hd{font-size:13px}
/* Kundenwunsch 17.10.2026: Logos schlicht nebeneinander statt Kacheln. Ohne Kartenflaeche steht der Name auf
   #EEF1F4, deshalb das Lesegrau #646B77 (4,7:1) statt #6B717C (4,4:1). */
.lo-g{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 24px;margin-top:12px}
.lo{height:44px;gap:8px;padding:0;border-radius:0;background:none;box-shadow:none;font-size:15px;color:#646B77}.lo img{height:22px}.lo:hover{transform:none;box-shadow:none}
.feat{padding-top:72px}
.bx-hd{flex-direction:column;align-items:flex-start;gap:16px}
.bx{grid-template-columns:1fr;height:auto;margin-top:32px}
.bx-v{flex:none;height:250px}.bx-1 .bx-v{height:300px}
.vals{padding-top:88px}.vals .lead{font-size:16px}
.bento{grid-template-columns:1fr;margin-top:40px;gap:14px}
.bp{height:280px}
.wd,.tp{left:5%;right:5%}.pj{width:84%}
.bc h3{font-size:22px;margin-top:24px}
.tp-h span{margin-left:auto;margin-right:6px}
.tp-w{font-size:11px}.tp-w i{display:none}.tb{font-size:11px}.tb.p2{left:10%}.tb.p3{left:30%}
.wd{padding:18px 16px 0}.wd-k{flex-direction:column;align-items:flex-start;gap:8px}.wd-k b{font-size:24px}.wd-k .pc{padding:0;font-size:13px}.bars{height:96px}
.tst{padding-top:88px}
.tg{gap:16px;margin-top:32px}
.tq{padding:24px}.tq blockquote p{font-size:19px}
.tq-feature{padding:0;grid-template-columns:1fr}.tq-feature-copy{padding:28px 24px}.tq-feature blockquote p{font-size:25px}.tq-feature .tq-qm{right:24px;top:20px;font-size:72px}.tq-visual{height:360px;min-height:0}.tq-portrait{height:100%;width:auto;max-width:100%;object-position:bottom}
.plans{padding-top:88px}
.pg{grid-template-columns:1fr;margin-top:36px}
.tools{margin-top:88px;height:820px}
.grid{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(14,1fr);gap:8px}
.grid i:nth-child(n+85){display:none}
.tools-h{padding:28px 8px 24px}.tools-h::before{inset:-20px -30px}.tools-h .h2{font-size:38px}.tools-h .lead{font-size:16px}
.tile{width:48px;height:48px;left:calc((100% + 8px) / 6 * var(--mc));top:calc((100% + 8px) / 14 * var(--mr))}.tile img{width:26px;height:26px}.tile.dm{display:none}.tile{left:calc((100% + 8px) / 6 * var(--mc) + 2px)}
.cta{margin-top:88px;padding:8px}
.cta-in{height:auto;padding:72px 22px}
.cta h2{font-size:34px}
.cta-in:has(.cta-start){padding:44px 18px}.cta-ch .btn{width:100%;height:auto;min-height:48px;padding:12px 18px;white-space:normal}
.ft-g{grid-template-columns:1fr}
.ft-g>div,.ft-g>div:first-child{padding:36px 24px;border-left:0;border-top:1px solid #EEF0F3}
.ft-g>div:first-child{border-top:0}
.ft-b{flex-direction:column;justify-content:center;gap:10px;height:auto;padding:22px}
}
/* Unter 360 px passen Wortmarke, Prozessanalyse-Knopf und Burger nicht in eine Zeile (320 px gemessen: Knopf
   ueber der Wortmarke, Burger 13 px abgeschnitten). Der Knopf steht direkt darunter im Hero und im Menue. */
@container pg (max-width:359px){.nr .btn.d{display:none}}
/* Kleine Handys (iPhone SE: 548 px sichtbar): Hero etwas dichter, damit beide Knoepfe im ersten Bildschirm bleiben. */
@media (max-height:600px){@container pg (max-width:640px){.hero h1{font-size:36px}.hero .lead{margin-top:14px;font-size:15.5px}.hero-cta{margin-top:22px;gap:10px}.hero-cta .btn{height:50px}.hero>.w{padding:8px 0 20px}}}
/* Handy quer (852 × 393, Touch): dieselbe Zusage. Hier gilt schon das breite Layout mit 104-px-Kopfzeile und
   68-px-Ueberschrift; ohne diesen Block lag „Fallbeispiele ansehen“ bei 516 px, also unter der Kante. */
@media (max-height:500px) and (pointer:coarse){@container pg (min-width:641px){.hero{padding-top:0}.hero>.w{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 104px);min-height:calc(100svh - 104px);padding:8px 0 16px}.hero h1{font-size:36px}.hero .lead{margin-top:12px;font-size:15px}.hero-cta{margin-top:18px}.hero-cta .btn{height:46px}.shot{margin-top:0}}}

/* ---- Handy-Menue (16.10.2026, Neufassung 17.10.2026) -------------------------------------------
   Im Handoff G ist der Burger nur gezeichnet (ein <span> ohne Menue). Ohne diesen Block gaebe es
   unter 900 px keine Navigation. Praefix gm-, nicht mn-: `.mn` ist im Handoff schon die Hauptflaeche
   der App-Ansicht im Hero.
   Neufassung nach Kundenmeldung („sehr schwaches Menue“): ganzer Bildschirm in Weiss, grosse Schrift mit
   Haarlinien statt grauer Kachel, Knoepfe unten am Rand, WhatsApp mit Zeichen. Burger und X ohne Rahmen,
   beide in derselben 44-px-Flaeche an derselben Stelle (-11 px: die Balken schliessen buendig mit dem
   Inhaltsrand ab). Der aktive Punkt traegt das blaue Quadrat aus dem Logo. Groessen per svh, damit das
   Menue von 568 px (pruefe.mjs, 320er) bis 932 px Hoehe den Bildschirm fuellt, ohne zu scrollen. */
button.burger{border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.gm{position:fixed;inset:0;z-index:100;background:#fff;overflow-y:auto;overscroll-behavior:contain}
.gm[hidden]{display:none}
/* Kein Fokusring nach einem Tipp: das Skript fokussiert dann den Dialog selbst, nur per Tastatur das X. */
.gm:focus,.burger:focus:not(:focus-visible),.gm-x:focus:not(:focus-visible){outline:none}
.gm-in{display:flex;flex-direction:column;min-height:100%;padding-bottom:max(20px,env(safe-area-inset-bottom))}
.gm-top{display:flex;align-items:center;justify-content:space-between;height:72px;flex:none}
.gm-top .lg{min-height:44px}
.gm-x{display:grid;place-items:center;width:44px;height:44px;margin-right:-11px;padding:0;border:0;background:none;color:#14161B;cursor:pointer}
.gm-x svg{width:28px;height:28px;stroke-width:1.75}
.gm-l{display:grid;margin-top:clamp(4px,2.5svh,28px)}
.gm-l a{display:flex;align-items:center;gap:12px;min-height:clamp(48px,7.6svh,64px);border-bottom:1px solid #EEF0F3;font-size:clamp(24px,4.2svh,34px);font-weight:500;letter-spacing:-.04em;color:#14161B;transition:color .2s}
.gm-l a:hover{color:var(--blue-deep)}
.gm-l a.on::after{content:"";flex:none;width:9px;height:9px;border-radius:30%;background:var(--blue)}
.gm-l a.gm-in-l{min-height:52px;border-bottom:0;font-size:16px;letter-spacing:-.01em;color:#5A616D}
.gm-l a.gm-in-l:hover{color:#14161B}
.gm-cta{display:grid;gap:10px;margin-top:auto;padding-top:20px}
.gm-cta .btn{width:100%;height:56px;font-size:16px}
.gm-cta svg{width:20px;height:20px}
body.gm-auf{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
.gm:not([hidden]) .gm-l a,.gm:not([hidden]) .gm-cta{animation:gmIn .5s cubic-bezier(.2,.7,.2,1) both}
.gm-l a:nth-child(2){animation-delay:35ms}.gm-l a:nth-child(3){animation-delay:70ms}.gm-l a:nth-child(4){animation-delay:105ms}
.gm-l a:nth-child(5){animation-delay:140ms}.gm-l a:nth-child(6){animation-delay:175ms}.gm-cta{animation-delay:210ms}
}
@keyframes gmIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Handy quer: zwei Spalten, damit das Menue in eine Bildschirmhoehe passt. */
@media (max-height:500px){
.gm-top{height:60px}
.gm-l{grid-template-columns:1fr 1fr;column-gap:28px;margin-top:0}
.gm-l a{min-height:44px;font-size:19px}
.gm-l a.gm-in-l{min-height:44px;font-size:15px}
.gm-cta{grid-template-columns:1fr 1fr;padding-top:12px}
.gm-cta .btn{height:48px;font-size:15px}
}

/* ---- Lesbarkeit (16.10.2026) — Ergaenzung zum Handoff G, gemessen mit tools/mobil-audit.mjs --------
   Das Beschriftungsgrau #8A909A / #A0A6B0 erreicht auf #EEF1F4 bzw. Weiss nur 2,8 bis 3,2:1. Fuer ECHTEN
   Text gilt deshalb eine eigene Rolle #646B77 (4,7:1 auf #EEF1F4, 5,4:1 auf Weiss); die nachgebauten
   App-Ansichten (aria-hidden, reine Illustration) behalten ihre Toene. Tippziele ab 44 px nur bei
   pointer:coarse, damit das Desktop-Bild unveraendert bleibt. */
.tq-k,.tq-n span,.ft-in,.ft-b,.fq-n,.lo-hd,.bx-hd .lead{color:#646B77}
@media (pointer:coarse){
.nav .lg,.ft .lg{min-height:44px}
.ft-k,.ft ul a,.ft-b nav a{display:inline-flex;align-items:center;min-height:44px}
.ft-so a{width:44px;height:44px}
.bx-b{height:44px}
/* Kurze Woerter („AGB", „FAQ", „Start") erreichen 44 px Breite nur mit Innenabstand; der negative Aussenabstand
   haelt sie an ihrer Stelle. */
.ft ul a,.ft-b nav a{padding-inline:9px;margin-inline:-9px}
.ft ul{gap:0}
.ft li{display:flex;align-items:center;min-height:44px}
}

/* MMS-Positionierung 18.10.2026: Zielgruppe vor dem Versprechen, ein Prozess als Angebot. */
.hero-fit{max-width:540px;margin:0 auto 18px;font-size:15px;font-weight:500;line-height:1.5;color:#3D4350;text-wrap:balance}
.mms-offer-lead{max-width:620px;margin-top:22px}
#angebot{scroll-margin-top:90px}
.mms-scope{max-width:820px;margin:24px 0 0;font-size:15px;line-height:1.65;color:#5A616D}
.mms-guarantee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:32px;margin-top:28px;padding:32px;border:1px solid #D6DBE3;border-radius:18px;background:#fff;scroll-margin-top:90px}
.mms-guarantee h3{font-size:26px;font-weight:500;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.mms-guarantee p{font-size:15px;line-height:1.65;color:#3D4350}
.plans .pc.hl .pt .pr span,.plans .pc.hl .pt p{color:#fff}
.bc .k-ct b{font-size:28px}
@container pg (max-width:640px){
.hero-fit{max-width:300px;margin-bottom:16px;font-size:14px}
.mms-offer-lead{font-size:16px;margin-top:16px}
.mms-scope{font-size:14px;line-height:1.6;margin-top:20px}
.mms-guarantee{grid-template-columns:1fr;gap:14px;padding:24px;margin-top:22px}
.mms-guarantee h3{font-size:25px}.mms-guarantee p{font-size:14px}
}
/* Handy-Menue mit „Produkte“ (19.10.2026): sieben Eintraege. Auf niedrigen Bildschirmen (iPhone SE, 568 px)
   lief es sonst 20 px ueber den Bildschirm; Tippziele bleiben bei 44 px. */
.gm-l a:nth-child(7){animation-delay:210ms}.gm-cta{animation-delay:245ms}
@media (max-height:620px) and (orientation:portrait){.gm-l{margin-top:0}.gm-l a{min-height:44px}.gm-l a.gm-in-l{min-height:44px}.gm-cta{padding-top:14px}.gm-cta .btn{height:50px}}