/* Snapjam · gemeinsame Bausteine der Infoseiten */
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
section{padding-block:clamp(80px,10vw,140px) 0;scroll-margin-top:90px}
.h1{font-size:clamp(48px,8vw,112px);line-height:.9;letter-spacing:-.065em;font-weight:600}
.h2{font-size:clamp(36px,5.6vw,72px);line-height:.96;letter-spacing:-.055em;font-weight:600}
.h3{font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:-.04em}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink2);max-width:48ch;letter-spacing:-.015em}
.acc{color:var(--accent)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .tag{margin-bottom:20px}
@supports (animation-timeline:view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
  .sec-head .h2{animation:h2in linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
  .par img{animation:par linear both;animation-timeline:view()}
}
@keyframes rv{from{translate:0 48px;scale:.98}}
@keyframes h2in{from{translate:0 .45em;opacity:.15}}
@keyframes par{from{transform:translateY(-6%) scale(1.14)}to{transform:translateY(6%) scale(1.14)}}

/* Insel-Navigation */
.nav{position:fixed;z-index:80;top:calc(14px + env(safe-area-inset-top,0px));left:50%;translate:-50% 0;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 18px;border-radius:999px;background:rgba(255,255,255,.74);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);box-shadow:inset 0 0 0 1px rgba(13,14,18,.06),0 18px 40px -24px rgba(13,14,18,.35);transition:transform .5s var(--e-drawer)}
.nav.top{transform:none}.nav.hide{transform:translateY(-140%)}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:18px;letter-spacing:-.05em;margin-right:12px}
.logo .mk{width:26px;height:26px;border-radius:8px;background:var(--ink);display:grid;place-items:center;position:relative}
.logo .mk::after{content:"";position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.nav ul{list-style:none;display:flex;gap:2px;margin:0;padding:0}
.nav ul a{display:block;text-decoration:none;font-size:14px;padding:9px 12px;border-radius:999px;color:var(--ink2);transition:color .2s,background .2s;white-space:nowrap}
.nav ul a:hover{color:var(--ink);background:rgba(13,14,18,.05)}
.nav ul a[aria-current="page"]{color:var(--ink);background:rgba(13,14,18,.06);font-weight:500}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--bg);cursor:pointer;position:relative}
.burger i{position:absolute;left:13px;width:16px;height:1.6px;border-radius:2px;background:var(--ink);transition:transform .45s var(--e-drawer),top .45s var(--e-drawer)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:24px}
.burger[aria-expanded="true"] i:nth-child(1){top:20.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){top:20.5px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:70;background:rgba(242,243,245,.88);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);display:flex;flex-direction:column;justify-content:center;padding:100px 28px 40px;gap:4px;opacity:0;pointer-events:none;transition:opacity .35s var(--e-out)}
.menu.open{opacity:1;pointer-events:auto}
.menu a{font-size:clamp(32px,9vw,50px);font-weight:600;letter-spacing:-.05em;text-decoration:none;transform:translateY(40px);opacity:0;transition:transform .6s var(--e-drawer),opacity .4s var(--e-out)}
.menu.open a{transform:none;opacity:1}
.menu.open a:nth-child(2){transition-delay:.04s}.menu.open a:nth-child(3){transition-delay:.08s}.menu.open a:nth-child(4){transition-delay:.12s}.menu.open a:nth-child(5){transition-delay:.16s}.menu.open a:nth-child(6){transition-delay:.2s}.menu.open a:nth-child(7){transition-delay:.24s}

/* Seitenkopf */
.phero{padding-top:calc(150px + env(safe-area-inset-top,0px));display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.phero .h1 .w{display:inline-block;animation:wIn .9s var(--e-out) both}
.phero .h1 .w:nth-child(2){animation-delay:.08s}.phero .h1 .w:nth-child(3){animation-delay:.16s}.phero .h1 .w:nth-child(4){animation-delay:.24s}
@keyframes wIn{from{transform:translateY(.35em);filter:blur(8px);opacity:0}}
.phero .h1{margin:22px 0 22px}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.pvis{position:relative;animation:visIn 1.2s .2s var(--e-drawer) both}
@keyframes visIn{from{translate:0 60px;scale:.94;opacity:0}}
.pvis .core{aspect-ratio:5/4.4}
.pvis .core>img,.pvis .core>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pvis .chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;animation:bob 6s var(--e-io) infinite}
.pvis .chip .dot{width:32px;height:32px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
@keyframes bob{50%{translate:0 -10px}}
.crumbs{display:flex;gap:8px;font-size:13px;color:var(--ink3)}
.crumbs a{text-decoration:none;color:var(--ink2)}
.crumbs a:hover{color:var(--ink)}

/* Zeitleiste mit Fortschritt */
.tl{position:relative;display:grid;gap:18px;padding-left:64px}
.tl::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:var(--hair);border-radius:2px}
.tl .fill{position:absolute;left:23px;top:8px;width:2px;height:calc((100% - 16px) * var(--p,0));background:var(--accent);border-radius:2px}
.tli{position:relative}
.tli .n{position:absolute;left:-64px;top:6px;width:48px;height:48px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--hair);display:grid;place-items:center;font-family:var(--mono);font-size:13px;transition:background .4s var(--e-out),color .4s,box-shadow .4s}
.tli.on .n{background:var(--ink);color:#fff;box-shadow:0 0 0 6px var(--bg)}
.tli .core{padding:clamp(20px,3vw,30px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.tli h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.045em}
.tli p{color:var(--ink2);margin-top:8px;max-width:56ch}
.tli .when{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:block}
.tli .ic{width:64px;height:64px;border-radius:20px;background:var(--bg);display:grid;place-items:center}

/* Karten-Raster */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card .core{padding:24px;display:flex;flex-direction:column;gap:10px;height:100%}
.card.shell{display:flex}.card.shell .core{flex:1}
.card h3{font-size:21px;letter-spacing:-.035em}
.card p{color:var(--ink2);font-size:15px}
.b-ic{width:46px;height:46px;border-radius:14px;background:var(--bg);display:grid;place-items:center;flex-shrink:0}
.card .b-ic{margin-bottom:auto}
.card .city{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.card .boxes{display:flex;gap:4px;margin-top:6px}
.card .boxes i{width:18px;height:22px;border-radius:5px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair);position:relative}
.card .boxes i::after{content:"";position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--ink)}
.card.dark .core{background:var(--ink);color:#fff}.card.dark p{color:#A7ABB6}.card.dark .b-ic{background:#1C1E25}

/* Lieferumfang */
.kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.kit .shot .core{background:linear-gradient(180deg,#fff,#F3F4F6);display:grid;place-items:center;min-height:440px}
.kit .shot img{width:78%;transition:transform 1s var(--e-drawer)}
@media (hover:hover) and (pointer:fine){.kit .shot:hover img{transform:translateY(-8px) scale(1.02)}}
.kitl .core{padding:12px}
.kitl ul{list-style:none;margin:0;padding:0;display:grid}
.kitl li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:16px;transition:background .2s}
.kitl li:hover{background:var(--bg)}
.kitl li .b-ic{width:44px;height:44px}
.kitl li b{display:block;font-weight:500;font-size:15.5px}
.kitl li small{color:var(--ink2);font-size:13.5px}

/* Planer */
.planner .core{padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:center}
.planner .res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.planner .rc{padding:18px;border-radius:20px;background:var(--bg);display:flex;flex-direction:column;gap:6px;min-height:150px;transition:transform .5s var(--e-drawer)}
.planner .rc.hl{background:var(--ink);color:#fff}
.planner .rc small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.planner .rc.hl small{color:#A7ABB6}
.planner .rc b{font-size:clamp(28px,3vw,40px);letter-spacing:-.05em;line-height:1;margin-top:auto}
.planner .rc span{font-size:14px;color:var(--ink2)}.planner .rc.hl span{color:#C9CCD3}
.planner .rc.pop{animation:rcPop .5s var(--e-drawer)}
@keyframes rcPop{from{transform:translateY(10px) scale(.97);opacity:.4}}
.planner input[type=date]{font-size:18px}

/* Vergleich */
.cmp{width:100%;border-collapse:separate;border-spacing:0}
.cmp th,.cmp td{padding:16px 18px;text-align:left;font-size:15px;box-shadow:inset 0 -1px 0 var(--hair)}
.cmp thead th{font-size:13px;font-family:var(--mono);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.cmp td:first-child{color:var(--ink2)}
.cmp .hl{background:var(--bg)}
.cmp thead .hl{border-radius:16px 16px 0 0}
.cmp tr:last-child .hl{border-radius:0 0 16px 16px}
.cmp b{font-weight:600}
.cmp-wrap{overflow-x:auto}

/* FAQ */
.faq details{box-shadow:inset 0 -1px 0 var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-size:clamp(17px,1.8vw,21px);font-weight:500;letter-spacing:-.03em}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{width:34px;height:34px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair);display:grid;place-items:center;flex-shrink:0;transition:transform .45s var(--e-drawer),background .3s}
.faq details[open] .pm{transform:rotate(45deg);background:var(--ink);color:#fff}
.faq .ans{overflow:hidden;transition:height .35s var(--e-drawer)}
.faq .ans p{padding:0 56px 24px 0;color:var(--ink2);max-width:70ch}

/* Abschluss & Fußzeile */
.final{margin-top:clamp(90px,11vw,150px)}
.final .core{padding:clamp(32px,6vw,80px);background:var(--ink);color:#fff;display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:28px;align-items:end;overflow:hidden}
.final .core::after{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,74,43,.55),transparent 65%);pointer-events:none}
.final .lead{color:#A7ABB6}
.final .tag{background:#1C1E25;color:#A7ABB6;box-shadow:none}
footer{padding-block:64px 110px;font-size:13px;color:var(--ink2)}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px}
footer h4{font-size:12px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:400;margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
.fine{margin-top:40px;padding-top:20px;box-shadow:inset 0 1px 0 var(--hair);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink3)}

/* Querverweise */
.xlinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.xl{text-decoration:none;display:flex}
.xl .core{flex:1;padding:22px;display:flex;flex-direction:column;gap:8px;min-height:200px;transition:transform .5s var(--e-drawer)}
@media (hover:hover) and (pointer:fine){.xl:hover .core{transform:translateY(-4px)}}
.xl h3{font-size:20px;margin-top:auto;letter-spacing:-.035em}
.xl p{font-size:14px;color:var(--ink2)}
.xl .go{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.xl[aria-current="page"]{display:none}

/* Icons zeichnen */
.drawable :is(path,circle,rect,line,polyline,polygon){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--e-out)}
.drawable.drawn :is(path,circle,rect,line,polyline,polygon){stroke-dashoffset:0}

@media (max-width:1060px){
  .nav ul{display:none}.burger{display:block}
  .phero{grid-template-columns:minmax(0,1fr);padding-top:130px}
  .sec-head,.kit,.planner .core{grid-template-columns:minmax(0,1fr)}
  .grid4,.xlinks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .final .core{grid-template-columns:minmax(0,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid4,.grid3,.grid2,.xlinks{grid-template-columns:minmax(0,1fr)}
  .tl{padding-left:52px}.tl::before,.tl .fill{left:17px}.tli .n{left:-52px;width:36px;height:36px;font-size:11px}
  .tli .core{grid-template-columns:minmax(0,1fr)}.tli .ic{display:none}
  .planner .res{grid-template-columns:minmax(0,1fr)}.planner .rc{min-height:0}
  .faq .ans p{padding-right:0}
  footer .cols{grid-template-columns:1fr}
  .kit .shot .core{min-height:300px}
  .nav{padding-left:14px}
}
@media (prefers-reduced-motion:reduce){.phero .h1 .w,.pvis,.pvis .chip,.par img,.sec-head .h2{animation:none}}