:root{
  --ground:#F6F8F6; --surface:#FFFFFF; --quiet:#E7F0EC; --quiet-2:#D8E7E1;
  --line:#DDE6E1; --line-2:#C9D9D2; --forest:#0A3A33; --forest-2:#072B26;
  --petrol:#0F5C54; --ink:#0C1F1B; --body:#4A605A; --dim:#7B8F88; --amber:#B4601A;
  --on-dark:#EAF4F0; --on-dark-dim:#9BB8B0; --mint:#6FC7B5;
  --display:"Outfit",system-ui,sans-serif;
  --text:"Plus Jakarta Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--body);font-family:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:73rem;margin:0 auto;padding:0 1.5rem}
@media(max-width:640px){.wrap{padding:0 1.1rem}}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);letter-spacing:-.02em;text-wrap:balance;margin:0;font-weight:600}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
.eyebrow{font-family:var(--text);font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--petrol);margin:0}

/* nav */
.nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(246,248,246,.94);backdrop-filter:blur(10px);z-index:50}
.nav .wrap{display:flex;align-items:center;gap:1.25rem;height:4.25rem}
.logo{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);display:flex;align-items:center;gap:.55rem}
.logo .dot{width:.66rem;height:.66rem;border-radius:50%;background:var(--petrol);box-shadow:0 0 0 3px rgba(15,92,84,.15);flex:none}
.nav ul{display:flex;gap:1.05rem;list-style:none;margin:0 0 0 auto;padding:0;font-size:.9rem;font-weight:500}
.nav ul a:hover{color:var(--petrol)}
.nav ul a[aria-current="page"]{color:var(--petrol);font-weight:600}
@media(max-width:1040px){.nav ul{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--text);font-size:.92rem;font-weight:600;padding:.72rem 1.3rem;border-radius:6px;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn-primary{background:var(--forest);color:var(--on-dark);border-color:var(--forest)}
.btn-primary:hover{background:var(--forest-2)}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--petrol);color:var(--petrol)}
.btn:disabled{opacity:.55;cursor:default}
.row-cta{display:flex;gap:.7rem;flex-wrap:wrap}

/* page head */
.phead{padding:3.25rem 0 2.5rem;border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:700;line-height:1.06;margin:.7rem 0 .9rem}
.phead p{margin:0;font-size:1.04rem;max-width:44rem}
.crumb{font-family:var(--mono);font-size:.75rem;color:var(--dim);margin-bottom:1.5rem}
.crumb a:hover{color:var(--petrol)}

/* hero (start) */
.hero{padding:4.5rem 0 4rem;border-bottom:1px solid var(--line)}
@media(max-width:900px){.hero{padding:2.75rem 0 2.5rem}}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2.25rem}}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.05rem);font-weight:700;line-height:1.04;margin:1rem 0 1.15rem}
.hero h1 em{font-style:normal;color:var(--petrol)}
.hero .lead{font-size:1.1rem;max-width:33rem;margin:0 0 2rem}
.card-dark{background:var(--forest);border-radius:10px;padding:1.9rem;color:var(--on-dark)}
.card-dark .kicker{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);margin:0 0 1.4rem}
.pricebig{font-family:var(--display);font-weight:700;font-size:3.3rem;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.pricebig span{font-size:1.05rem;font-weight:500;color:var(--on-dark-dim);display:block;margin-top:.45rem;font-family:var(--text)}
.dl{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;margin-top:1.6rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14)}
.dl b{display:block;font-family:var(--display);font-weight:600;font-size:1.35rem;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.dl span{display:block;font-size:.79rem;color:var(--on-dark-dim);margin-top:.15rem}

.strip{border-bottom:1px solid var(--line);padding:1.15rem 0;background:var(--surface)}
.strip .wrap{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:center;font-size:.86rem;font-weight:500;color:var(--dim)}
.strip b{font-family:var(--display);font-weight:600;color:var(--petrol);font-size:1rem}
.sep{color:var(--line-2)}
/* Sprachwahl */
.sprachwahl{position:relative;display:inline-flex;align-items:center}
@media(min-width:1041px){.sprachwahl{margin-left:1rem}}
@media(max-width:1040px){.sprachwahl{margin-left:auto;margin-right:.7rem;order:2}}
.sw-knopf{display:flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;
  padding:0;border:0;background:transparent;cursor:pointer;border-radius:3px;opacity:.72;transition:opacity .12s}
.sw-knopf:hover,.sw-knopf[aria-expanded="true"]{opacity:1}
.sw-knopf svg{width:1.25rem;height:auto;display:block;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.nav .sw-liste,.sw-liste{position:absolute;top:calc(100% + .45rem);right:0;z-index:60;margin:0;padding:.3rem;
  list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:7px;
  box-shadow:0 8px 24px rgba(10,30,26,.13);display:flex;flex-direction:column;gap:.1rem}
.nav .sw-liste[hidden],.sw-liste[hidden]{display:none}
.sw-liste button{display:flex;align-items:center;padding:.35rem .45rem;border:0;background:transparent;
  cursor:pointer;border-radius:4px}
.sw-liste button:hover{background:var(--quiet)}
.sw-liste button[aria-current="true"]{background:var(--quiet-2)}
.sw-liste svg{width:1.25rem;height:auto;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.sprachhinweis{background:var(--quiet);color:var(--ink);font-size:.84rem;line-height:1.5;
  padding:.7rem 1.5rem;text-align:center;border-bottom:1px solid var(--line)}

.marken{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}
.marken img{height:1.3rem;width:auto;display:block}
.marken img[data-m="redtiger"],.marken img[data-m="blackvue"]{height:1.55rem}
.marken b{font-family:var(--display);font-weight:600;color:var(--petrol);font-size:1rem}
@media(max-width:700px){.marken{gap:1.4rem}.marken img{height:1.05rem}
  .marken img[data-m="redtiger"],.marken img[data-m="blackvue"]{height:1.25rem}}

section{padding:4.25rem 0;border-bottom:1px solid var(--line)}
@media(max-width:640px){section{padding:2.75rem 0}}
.head{max-width:42rem;margin-bottom:2.4rem}
.head h2{font-size:clamp(1.75rem,3.7vw,2.5rem);font-weight:700;margin:.65rem 0 .7rem;line-height:1.12}
.head p{margin:0;font-size:1.02rem}

.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem}
.why div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.55rem 1.4rem}
.why h3{font-size:1.06rem;margin-bottom:.5rem}
.why p{margin:0;font-size:.92rem}
.why.zwei{grid-template-columns:repeat(2,1fr)}
@media(max-width:720px){.why.zwei{grid-template-columns:1fr}}
.why .n{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:6px;background:var(--quiet);color:var(--petrol);font-family:var(--mono);font-size:.8rem;font-weight:600;margin-bottom:.9rem}

.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;position:relative}
.flow::before{content:"";position:absolute;top:1.35rem;left:1.35rem;right:1.35rem;height:2px;background:repeating-linear-gradient(90deg,var(--quiet-2) 0 8px,transparent 8px 14px)}
.step{position:relative;display:flex;flex-direction:column}
.step .dot{width:2.7rem;height:2.7rem;border-radius:50%;background:var(--forest);color:#fff;font-family:var(--display);font-weight:600;font-size:1.05rem;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;box-shadow:0 0 0 6px var(--ground);flex:none}
.step .box{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.15rem 1.2rem 1.2rem;margin-top:1rem;flex:1;transition:.16s}
.step:hover .box{border-color:var(--line-2);transform:translateY(-2px)}
.step .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;color:var(--dim);text-transform:uppercase}
.step h3{font-size:1.1rem;margin:.3rem 0 .45rem}
.step p{margin:0;font-size:.91rem}
.step .t{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;font-family:var(--mono);font-size:.74rem;color:var(--petrol);background:var(--quiet);padding:.22rem .6rem;border-radius:20px}
.step .t::before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:var(--petrol)}
@media(max-width:860px){
  .flow{grid-template-columns:1fr;gap:0}
  .flow::before{top:1.35rem;bottom:2.5rem;left:1.34rem;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--quiet-2) 0 8px,transparent 8px 14px)}
  .step{flex-direction:row;gap:1.1rem;align-items:flex-start;padding-bottom:1.1rem}
  .step .box{margin-top:0}
}

/* shop hero */
.shero{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;margin-bottom:2.5rem}
@media(max-width:900px){.shero{grid-template-columns:1fr;gap:2rem}}
.dev{background:var(--forest);border-radius:12px;padding:1.3rem;color:var(--on-dark);font-family:var(--mono);font-size:.78rem}
.dev .top{display:flex;justify-content:space-between;align-items:center;font-size:.65rem;letter-spacing:.14em;color:var(--mint);border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:.7rem;margin-bottom:.9rem}
.dev .live{display:inline-flex;align-items:center;gap:.35rem}
.dev .live::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--mint)}
.dev dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;margin:0}
.dev dt{color:var(--on-dark-dim);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase}
.dev dd{margin:0;color:#fff;text-align:right}
.sstats{display:flex;flex-wrap:wrap;gap:2.25rem 3rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.sstats div{min-width:6rem}
.sstats b{display:block;font-family:var(--display);font-weight:700;font-size:2.3rem;color:var(--petrol);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sstats span{display:block;font-size:.82rem;color:var(--body);margin-top:.4rem;line-height:1.35}
.sstats span em{font-style:normal;display:block;font-size:.74rem;color:var(--dim)}
@media(max-width:640px){.sstats{gap:1.5rem 2rem}.sstats b{font-size:1.85rem}}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:1.5rem}
.trust div{background:var(--surface);padding:1rem 1.1rem}
.trust b{display:block;font-size:.94rem;color:var(--ink);font-weight:600}
.trust span{display:block;font-size:.8rem;color:var(--dim);margin-top:.1rem}
.flowbox{background:var(--quiet);border-radius:10px;padding:1.5rem;margin-bottom:1.5rem;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
@media(max-width:760px){.flowbox{grid-template-columns:1fr}}
.flowbox h3{font-size:1.15rem;margin:0 0 .45rem}
.flowbox p{margin:0;font-size:.92rem;max-width:52ch}
.flowbox .pill{font-family:var(--mono);font-size:.76rem;color:var(--petrol);background:var(--surface);border:1px solid var(--quiet-2);padding:.5rem .9rem;border-radius:20px;white-space:nowrap}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem;margin-bottom:2rem}
.lg{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:.95rem 1rem}
.lg b{display:block;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink)}
.lg span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);margin-top:.2rem}
.lg p{margin:.5rem 0 0;font-size:.82rem;color:var(--dim);line-height:1.45}

/* shop listing */
.shopbar{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-bottom:2.25rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.shopbar .cnt{margin-left:auto;font-family:var(--mono);font-size:.78rem;color:var(--dim)}
.bf{font-family:var(--text);font-size:.81rem;font-weight:600;padding:.34rem .8rem;border:1.5px solid var(--line);background:var(--surface);color:var(--body);border-radius:20px;cursor:pointer}
.bf:hover{border-color:var(--line-2)}
.bf[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}
.bgrp{margin-bottom:4rem}
.bgrp:last-child{margin-bottom:0}
.bhead{display:grid;grid-template-columns:15rem 1fr;gap:1.75rem;align-items:center;
  background:var(--forest);color:var(--on-dark);border-radius:12px;padding:1.6rem 1.8rem;margin-bottom:1.5rem}
@media(max-width:760px){.bhead{grid-template-columns:1fr;gap:.9rem;padding:1.3rem 1.4rem}}
.bhead .bn{font-family:var(--display);font-weight:700;font-size:2.15rem;color:#fff;line-height:1;letter-spacing:-.02em;display:block}
.bhead .bn img{height:1.85rem;width:auto;max-width:100%;display:block;filter:brightness(0) invert(1)}
.bhead .bn img[data-m="redtiger"],.bhead .bn img[data-m="blackvue"]{height:2.2rem}
.bhead .bl{display:block;font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin-bottom:.5rem}
.bhead .bd{margin:0;font-size:.93rem;max-width:56ch;color:var(--on-dark)}
.bhead .bc{display:inline-block;font-family:var(--mono);font-size:.74rem;color:var(--mint);margin:.7rem 0 0;
  border:1px solid rgba(111,199,181,.35);border-radius:20px;padding:.2rem .7rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1.1rem}
.pc{display:flex;flex-direction:column;background:var(--ground);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.pc-img{aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center}
.pc-img img{width:100%;height:100%;object-fit:contain}
.pc-img svg{width:42%;opacity:.45}
.pc-badges{position:absolute;top:.6rem;left:.6rem;display:flex;gap:.3rem;flex-wrap:wrap}
.bdg{font-family:var(--mono);font-size:.63rem;background:var(--forest);color:#fff;padding:.14rem .42rem;border-radius:3px}
.bdg.alt{background:var(--quiet-2);color:var(--petrol)}
.pc-best{position:absolute;top:.6rem;right:.6rem;font-family:var(--mono);font-size:.63rem;background:var(--amber);color:#fff;padding:.14rem .42rem;border-radius:3px}
.pc-body{padding:1.05rem 1.15rem 0;flex:1}
.pc-body h3{font-size:1.08rem;margin:0 0 .3rem}
.pc-t{margin:0 0 .85rem;font-size:.89rem}
.pc-price{display:flex;align-items:baseline;gap:.45rem;margin-bottom:.9rem;flex-wrap:wrap}
.pc-price b{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums}
.pc-price span{font-size:.78rem;color:var(--dim)}
.feats{display:flex;flex-wrap:wrap;gap:.28rem;margin-bottom:1rem}
.feats i{font-style:normal;font-size:.72rem;background:var(--quiet);color:var(--petrol);padding:.16rem .5rem;border-radius:4px}
.addons{border-top:1px dashed var(--line-2);padding-top:.8rem}
.addons .at{font-size:.63rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:0 0 .55rem}
.arow{display:flex;justify-content:space-between;gap:.75rem;font-size:.82rem;padding:.28rem 0;align-items:baseline}
.arow .an em{font-style:normal;font-size:.68rem;color:var(--dim);letter-spacing:.04em;text-transform:uppercase;margin-left:.3rem}
.arow .av{font-family:var(--mono);font-size:.78rem;color:var(--petrol);text-align:right}
.arow .av.off{color:var(--dim)}
.pc-desc{display:none;font-size:.87rem;margin:0 0 .95rem;border-top:1px solid var(--line);padding-top:.8rem}
.pc.open .pc-desc{display:block}
.pc-foot{padding:1rem 1.15rem 1.15rem;display:flex;gap:.5rem}
.pc-foot .btn{flex:1;font-size:.86rem;padding:.6rem 1rem}
.pc-foot .btn-ghost{flex:0 0 auto}
.dft{display:inline-block;font-family:var(--mono);font-size:.58rem;color:var(--amber);border:1px dashed var(--amber);padding:0 .28rem;border-radius:3px;margin-left:.35rem;vertical-align:.12em}
.draftnote{margin:.55rem 0 0;font-size:.74rem;color:var(--amber);background:#FBF2E8;border-radius:6px;padding:.45rem .6rem;line-height:1.45}

/* configurator */
.cfg{display:grid;grid-template-columns:1fr 21.5rem;gap:1.75rem;align-items:start}
@media(max-width:1000px){.cfg{grid-template-columns:1fr}}
.block{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.block + .block{margin-top:1rem}
.bh{padding:1rem 1.3rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.8rem}
.bh .num{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--forest);color:#fff;font-family:var(--mono);font-size:.8rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.bh h3{font-size:1.02rem;font-weight:600;flex:1}
.bh .hint{font-size:.79rem;color:var(--dim);font-weight:500}
.bb{padding:1rem 1.3rem 1.25rem}
.chs{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem}
.ch{text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:9px;padding:1.05rem;cursor:pointer;font-family:inherit;color:inherit;transition:.14s}
.ch:hover{border-color:var(--line-2)}
.ch[aria-pressed="true"]{border-color:var(--petrol);background:var(--quiet)}
.ch .big{font-family:var(--display);font-weight:700;font-size:1.28rem;color:var(--ink);line-height:1.15}
.ch .sub{font-size:.85rem;margin:.3rem 0 .7rem;line-height:1.45;display:block}
.ch .meta{font-family:var(--mono);font-size:.73rem;color:var(--petrol);display:flex;justify-content:space-between;gap:.5rem;border-top:1px solid var(--line);padding-top:.55rem}
.mwrap{display:grid;grid-template-columns:16.5rem 1fr;gap:1.35rem;align-items:start}
@media(max-width:900px){.mwrap{grid-template-columns:1fr}}
.gal{position:sticky;top:5.5rem}
@media(max-width:900px){.gal{position:static}}
.gmain{aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gmain svg{width:58%;height:58%;opacity:.5}
.gmain img{width:100%;height:100%;object-fit:contain;display:block}
.gthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:.4rem}
.gth{aspect-ratio:1;background:#fff;border:1.5px solid var(--line);border-radius:6px;cursor:pointer;overflow:hidden;padding:0}
.gth img{width:100%;height:100%;object-fit:contain;display:block}
.gth[aria-pressed="true"]{border-color:var(--petrol)}
.gcap{margin:.65rem 0 0;font-size:.82rem;color:var(--dim);line-height:1.45}
.gcap b{display:block;color:var(--ink);font-size:.95rem;font-family:var(--display);font-weight:600;margin-bottom:.15rem}
.gnote{margin:.5rem 0 0;font-size:.74rem;color:var(--dim);background:var(--quiet);border-radius:6px;padding:.45rem .6rem}
.cams{display:grid;grid-template-columns:1fr;gap:.55rem}
.camx{background:var(--quiet);border:1px solid var(--quiet-2);border-left:3px solid var(--petrol);
  border-radius:0 8px 8px 0;padding:.95rem 1.1rem;margin:-.2rem 0 .35rem}
.camx p{margin:0 0 .6rem;font-size:.88rem;line-height:1.55}
.camx p:last-of-type{margin-bottom:0}
.camx p span{display:block;font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--petrol);margin-bottom:.15rem}
.camx .cfgfeats{margin-top:.8rem}
.cam{display:flex;align-items:center;gap:.85rem;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:.85rem .95rem;cursor:pointer;font-family:inherit;color:inherit}
.cam:hover{border-color:var(--line-2)}
.cam[aria-pressed="true"]{border-color:var(--petrol);background:var(--quiet)}
.cam .mark,.opt .mark{width:1.05rem;height:1.05rem;border:1.5px solid var(--line-2);border-radius:50%;flex:none;position:relative}
.cam[aria-pressed="true"] .mark,.opt[aria-pressed="true"] .mark{border-color:var(--petrol)}
.cam[aria-pressed="true"] .mark::after,.opt[aria-pressed="true"] .mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--petrol)}
.cam .mid{flex:1;min-width:0}
.cam .n{display:block;font-size:.94rem;font-weight:600;color:var(--ink)}
.cam .b{display:block;font-size:.78rem;color:var(--dim);margin-top:.05rem}
.cam .p{font-family:var(--mono);font-size:.92rem;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cam[aria-pressed="true"] .p{color:var(--petrol)}
.tag{display:inline-block;font-family:var(--mono);font-size:.62rem;color:var(--amber);border:1px solid var(--amber);padding:0 .3rem;border-radius:3px;margin-left:.4rem;vertical-align:.1em}
.bfil{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.95rem}
.opts{display:flex;flex-direction:column;gap:.5rem}
.opt{display:flex;align-items:center;gap:.85rem;background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:.8rem .95rem;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.opt:hover{border-color:var(--line-2)}
.opt[aria-pressed="true"]{border-color:var(--petrol);background:var(--quiet)}
.opt .mid{flex:1}
.opt .lab{display:block;font-size:.94rem;font-weight:600;color:var(--ink)}
.opt .exp{display:block;font-size:.8rem;color:var(--dim);margin-top:.05rem}
.opt .add{font-family:var(--mono);font-size:.88rem;color:var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.opt[aria-pressed="true"] .add{color:var(--petrol);font-weight:500}
.rec{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--petrol);background:var(--quiet-2);padding:.08rem .38rem;border-radius:3px;margin-left:.4rem}
.na{font-size:.9rem;color:var(--dim);background:var(--quiet);border-radius:8px;padding:.9rem 1rem;margin:0}
.selhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin:1rem 0 .6rem}
.selhead h4{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink);margin:0}
.selhead .sp{font-family:var(--mono);font-size:.88rem;color:var(--petrol)}
.cfgfeats{display:flex;flex-wrap:wrap;gap:.3rem}
.cfgfeats i{font-style:normal;font-size:.73rem;background:var(--quiet);color:var(--petrol);padding:.18rem .55rem;border-radius:4px}
.recbox{background:var(--quiet);border:1px solid var(--quiet-2);border-radius:10px;padding:1.15rem 1.25rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;margin-top:1rem}
@media(max-width:640px){.recbox{grid-template-columns:1fr}}
.recbox h4{font-size:1.02rem;margin:0 0 .3rem}
.recbox p{margin:0;font-size:.88rem}
.recbox .btn{white-space:nowrap}

/* kurze Auswahlübersicht */
.pick{margin-top:1rem;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.9rem 1.15rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;font-size:.86rem}
.pick .pl{font-size:.63rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);width:100%}
.pick i{font-style:normal;background:var(--quiet);color:var(--petrol);padding:.22rem .6rem;border-radius:20px;font-weight:600}
.pick i.off{background:transparent;color:var(--dim);border:1px dashed var(--line-2);font-weight:400}

/* summary */
.sum{position:sticky;top:5.25rem;background:var(--forest);border-radius:10px;color:var(--on-dark);overflow:hidden}
.sum .sh{padding:1rem 1.25rem;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);border-bottom:1px solid rgba(255,255,255,.12)}
.rows{padding:.35rem 1.25rem}
.srow{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.88rem;align-items:baseline}
.srow:last-child{border-bottom:0}
.srow .k{color:var(--on-dark-dim)}
.srow .k b{display:block;color:var(--on-dark);font-weight:600}
.srow .v{font-family:var(--mono);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.srow .v.none{color:var(--on-dark-dim)}
.srow.inc .v{color:var(--mint)}
.srow.vorteil .v{color:var(--mint)}
.srow.vorteil .k b{color:var(--mint)}
.pick i.gut{color:var(--petrol);border-color:var(--petrol)}
.auswahl .z.gut .v{color:var(--petrol)}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.15rem 1.25rem;background:var(--forest-2)}
.total .k{font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-dim)}
.total .v{font-family:var(--display);font-weight:700;font-size:1.95rem;color:#fff;font-variant-numeric:tabular-nums}
.sum .lohnt{margin:1.1rem 1.25rem 0;padding:.9rem 1rem;border-radius:8px;
  background:rgba(111,199,181,.09);border-left:2px solid var(--mint)}
.sum .lohnt b{display:block;font-family:var(--display);font-size:.9rem;color:var(--mint);
  font-weight:600;margin-bottom:.25rem}
.sum .lohnt span{display:block;font-size:.82rem;line-height:1.55;color:var(--on-dark-dim)}
.sum .fine{padding:.9rem 1.25rem 0;font-size:.76rem;color:var(--on-dark-dim);line-height:1.5;margin:0}
.sum .foot{padding:.9rem 1.25rem 1.25rem}
.sum .foot .btn{width:100%;background:#fff;color:var(--forest);border-color:#fff}
.sum .foot .btn:hover{background:var(--quiet)}
.stick{position:fixed;left:0;right:0;bottom:0;background:var(--forest);color:#fff;z-index:60;padding:.7rem 1.1rem;display:none;align-items:center;gap:1rem;box-shadow:0 -4px 18px rgba(10,58,51,.22)}
.stick .l{flex:1;min-width:0}
.stick .k{display:block;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mint)}
.stick .v{font-family:var(--display);font-weight:700;font-size:1.3rem;font-variant-numeric:tabular-nums}
.stick .btn{background:#fff;color:var(--forest);border-color:#fff;padding:.55rem 1rem;font-size:.86rem}
@media(max-width:1000px){
  .stick.on{display:flex}
  body.hasstick{padding-bottom:4.5rem}
  /* Der schwebende WhatsApp-Knopf sitzt sonst mitten auf der Preisleiste und
     verdeckt dort den Anfrage-Knopf. Sobald die Leiste erscheint, rückt er
     darüber. */
  body.hasstick .wa-fix{bottom:calc(4.5rem + .7rem)}
}

/* recht / faq / about / kontakt */
.two{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:1.75rem}}
.legal{background:var(--forest);color:var(--on-dark);border-radius:10px;padding:1.7rem 1.55rem}
.legal h3{color:#fff;font-size:1.1rem;margin-bottom:.7rem}
.legal p{font-size:.92rem;margin:0 0 .8rem}
.legal .cite{font-family:var(--mono);font-size:.78rem;color:var(--mint)}
.legal .small{color:var(--on-dark-dim);font-size:.83rem;margin:.85rem 0 0}
.qa details{background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:.6rem}
.qa summary{cursor:pointer;padding:.95rem 1.15rem;font-size:.98rem;color:var(--ink);font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);color:var(--petrol);font-size:1.1rem;flex:none}
.qa details[open] summary::after{content:"–"}
.qa p{margin:0 1.15rem 1.1rem;font-size:.92rem;max-width:60ch}
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
@media(max-width:860px){.about{grid-template-columns:1fr;gap:1.75rem}}
.about p{font-size:1rem;margin:0 0 1.05rem}
.about p:last-child{margin:0}
.facts{background:var(--quiet);border-radius:10px;padding:1.5rem}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:.75rem 1.25rem;margin:0}
.facts dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);font-weight:700;padding-top:.15rem}
.facts dd{margin:0;font-size:.94rem;color:var(--ink)}
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:860px){.kontakt{grid-template-columns:1fr;gap:1.75rem}}
.form{display:flex;flex-direction:column;gap:.85rem}
.fld{display:flex;flex-direction:column;gap:.3rem}
.fld label{font-size:.8rem;font-weight:600;color:var(--ink)}
.fld input,.fld textarea,.fld select{font-family:var(--text);font-size:.94rem;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);width:100%}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--petrol)}
.fld textarea{min-height:6.5rem;resize:vertical}
.hint{font-size:.78rem;color:var(--dim)}
.krow{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media(max-width:520px){.krow{grid-template-columns:1fr}}
.kbox{background:var(--forest);color:var(--on-dark);border-radius:10px;padding:1.6rem}
.kbox h3{color:#fff;font-size:1.15rem;margin-bottom:1rem}
.kbox dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.1rem;margin:0 0 1.3rem}
.kbox dt{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);padding-top:.15rem}
.kbox dd{margin:0;color:#fff;font-size:.95rem}
.kbox dd a:hover{color:var(--mint)}
.kbox .hint{color:var(--on-dark-dim);margin:0;line-height:1.55;font-size:.85rem}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin-bottom:2.75rem}
.way{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:1.5rem 1.4rem 1.4rem;transition:.16s}
.way:hover{border-color:var(--petrol);transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,58,51,.07)}
.way .ic{width:2.75rem;height:2.75rem;border-radius:10px;background:var(--quiet);color:var(--petrol);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.05rem;flex:none}
.way .ic svg{width:1.4rem;height:1.4rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.way b{display:block;font-family:var(--display);font-weight:600;font-size:1.12rem;color:var(--ink);margin-bottom:.35rem}
.way p{margin:0 0 1.15rem;font-size:.88rem;flex:1}
.way .v{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--text);font-size:.92rem;
  font-weight:600;color:var(--forest);background:var(--quiet);padding:.6rem .9rem;border-radius:7px;
  align-self:flex-start;transition:.15s}
.way:hover .v{background:var(--forest);color:#fff}
.way .v::after{content:"→";font-family:var(--mono);opacity:.7}
.way .meta{display:block;font-size:.74rem;color:var(--dim);margin-top:.6rem}
.legalcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.5rem}
.lcol h3{font-size:1rem;margin-bottom:.6rem}
.lcol p,.lcol address{margin:0 0 .5rem;font-size:.89rem;font-style:normal;line-height:1.6}
.gap{background:#FBF2E8;color:var(--amber);border:1px dashed var(--amber);border-radius:5px;padding:.1rem .4rem;font-family:var(--mono);font-size:.78rem}

.cta{background:var(--forest);border:0;text-align:center}
.cta h2{color:#fff;font-size:clamp(1.85rem,4vw,2.7rem);font-weight:700;margin-bottom:.85rem}
.cta p{max-width:34rem;margin:0 auto 1.9rem;color:var(--on-dark-dim)}
.cta .row-cta{justify-content:center}
.cta .btn-primary{background:#fff;color:var(--forest);border-color:#fff}
.cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.cta .btn-ghost:hover{border-color:#fff;color:#fff}
footer{padding:3rem 0;font-size:.88rem;background:var(--ground)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem}
@media(max-width:720px){.fgrid{grid-template-columns:1fr;gap:1.5rem}}
footer h4{font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 .8rem;font-family:var(--text);font-weight:700}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
footer a:hover{color:var(--petrol)}
.fbot{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--dim);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════
   AUSBAUSTUFE 2 — Fotos, Stimmen, WhatsApp, Terminplaner
   ══════════════════════════════════════════════════════════════ */

/* ── dunkle Sektionen: Tokens lokal umdefinieren ───────────── */
.dunkel{
  --ground:#0E1618; --surface:#17221F; --quiet:#1C2A26; --quiet-2:#243430;
  --line:#22322E; --line-2:#334741;
  --ink:#EAF4F0; --body:#A0BAB2; --dim:#7B968E;
  --petrol:#35B29C; --forest:#35B29C; --forest-2:#2A9A86;
  --on-dark:#0B1513; --amber:#E3944D;
  background:var(--ground); color:var(--body);
  border-bottom:1px solid var(--line);
}
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4{color:var(--ink)}
.dunkel .btn-primary{background:var(--petrol);color:#07110F;border-color:var(--petrol)}
.dunkel .btn-primary:hover{background:#4BC7B1;border-color:#4BC7B1}
.dunkel .btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.dunkel .btn-ghost:hover{border-color:var(--petrol);color:var(--petrol)}
.dunkel .card-dark{background:var(--quiet);border:1px solid var(--line)}

/* ── Entwurfshinweis ───────────────────────────────────────── */
.entwurfbar{background:#3A2A0C;color:#F0D9A8;font-family:var(--mono);font-size:.76rem;
  padding:.62rem 0;border-bottom:1px solid #5A421A}
.entwurfbar .wrap{display:flex;gap:.55rem;align-items:baseline;flex-wrap:wrap}
.entwurfbar b{color:#FFD98A;font-weight:700;letter-spacing:.05em}

/* ── Bilder allgemein ──────────────────────────────────────── */
.fig{margin:0;position:relative;overflow:hidden;border-radius:8px;background:var(--quiet)}
.fig img{display:block;width:100%;height:100%;object-fit:cover;max-width:100%}
.fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .95rem .8rem;
  font-size:.78rem;line-height:1.4;color:#EAF4F0;
  background:linear-gradient(to top,rgba(6,16,14,.88),rgba(6,16,14,0))}

/* Hero der Startseite mit Foto */
.hero-foto{display:grid;grid-template-columns:1.02fr .98fr;gap:3rem;align-items:center}
@media(max-width:900px){.hero-foto{grid-template-columns:1fr;gap:2rem}}
.hero-foto .fig{aspect-ratio:4/5;box-shadow:0 24px 50px -28px rgba(0,0,0,.7)}
.hero-stack{display:grid;gap:1rem}

/* Preiskarte im Hero (auf Foto-Seite) */
.preiskarte{background:var(--quiet);border:1px solid var(--line);border-radius:8px;padding:1.4rem 1.5rem;
  display:flex;flex-direction:column;gap:.45rem}
.preiskarte .kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--petrol);margin:0}
.preiskarte .zahl{font-family:var(--display);font-weight:700;font-size:2.9rem;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.preiskarte .zahl small{font-family:var(--text);font-size:.86rem;font-weight:500;color:var(--dim)}
.preiskarte .weil{font-size:.88rem;margin:.35rem 0 0;padding-top:.75rem;border-top:1px solid var(--line)}
.preiskarte .weil b{color:var(--ink);font-family:var(--display)}

/* Bildband: mehrere Fotos nebeneinander */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
@media(max-width:860px){.band{grid-template-columns:repeat(2,1fr)}}
.band .fig{aspect-ratio:3/4}
.band .fig:first-child{aspect-ratio:3/4}

/* Foto + Text nebeneinander */
.fotoblock{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.6rem;align-items:center}
.fotoblock.rechts{grid-template-columns:1.15fr .85fr}
.fotoblock.rechts .fig{order:2}
@media(max-width:820px){
  .fotoblock,.fotoblock.rechts{grid-template-columns:1fr;gap:1.6rem}
  .fotoblock.rechts .fig{order:0}
}
.fotoblock .fig{aspect-ratio:3/4}
.fotoblock h3{font-size:clamp(1.3rem,2.8vw,1.75rem);margin-bottom:.8rem}
.fotoblock p{margin:0 0 .8rem;font-size:.99rem}
.fotoblock p:last-child{margin-bottom:0}

/* Beleg-Reihe: kleines Foto + Behauptung */
.belege{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:840px){.belege{grid-template-columns:1fr}}
.beleg .fig{aspect-ratio:5/4;margin-bottom:.95rem}
.beleg h3{font-size:1.04rem;margin-bottom:.35rem}
.beleg p{margin:0;font-size:.92rem}

/* ── Sterne und Bewertung ──────────────────────────────────── */
.sterne{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.8rem;color:var(--dim)}
.sterne i{font-style:normal;color:#E0A32B;letter-spacing:.08em;font-size:.95rem}
.bewertbadge{display:inline-flex;align-items:center;gap:.6rem;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:.42rem .95rem;font-size:.84rem}
.bewertbadge b{font-family:var(--display);color:var(--ink);font-weight:700}

/* ── Kundenstimmen ─────────────────────────────────────────── */
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.stimmen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.stimmen{grid-template-columns:1fr}}
.stimme{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1.35rem 1.4rem;
  display:flex;flex-direction:column;gap:.85rem}
.stimme .oben{display:flex;justify-content:space-between;align-items:center;gap:.7rem}
.stimme .oben i{font-style:normal;color:#E0A32B;font-size:.9rem;letter-spacing:.1em}
.stimme .oben time{font-family:var(--mono);font-size:.7rem;color:var(--dim)}
.stimme blockquote{margin:0;font-size:.95rem;line-height:1.58;color:var(--body)}
.stimme .wer{display:flex;flex-direction:column;gap:.16rem;padding-top:.85rem;border-top:1px solid var(--line);margin-top:auto}
.stimme .wer b{font-family:var(--display);font-size:.93rem;color:var(--ink);font-weight:600}
.stimme .wer span{font-family:var(--mono);font-size:.71rem;color:var(--dim)}

/* ── WhatsApp ──────────────────────────────────────────────── */
.btn-wa{background:#1FA855;border-color:#1FA855;color:#fff}
.btn-wa:hover{background:#178A45;border-color:#178A45}
.dunkel .btn-wa{background:#25C265;border-color:#25C265;color:#06210F}
.dunkel .btn-wa:hover{background:#37D176;border-color:#37D176}
.btn-wa svg{width:1.05em;height:1.05em;fill:currentColor;flex:none}

.wa-blitz{background:var(--surface);border:1px solid var(--line);border-left:3px solid #1FA855;
  border-radius:8px;padding:1.4rem 1.5rem;display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:center}
@media(max-width:720px){.wa-blitz{grid-template-columns:1fr}}
.wa-blitz h3{font-size:1.1rem;margin-bottom:.32rem}
.wa-blitz p{margin:0;font-size:.92rem}

/* schwebender WhatsApp-Knopf */
.wa-fix{position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;display:inline-flex;align-items:center;gap:.55rem;
  background:#1FA855;color:#fff;font-family:var(--text);font-weight:600;font-size:.9rem;
  padding:.8rem 1.15rem;border-radius:999px;box-shadow:0 10px 28px -8px rgba(10,60,30,.55);
  border:1px solid rgba(255,255,255,.18)}
.wa-fix:hover{background:#178A45}
.wa-fix svg{width:1.25rem;height:1.25rem;fill:currentColor;flex:none}
@media(max-width:560px){.wa-fix span{display:none}.wa-fix{padding:.9rem;border-radius:50%}}

/* ── Zusagen ───────────────────────────────────────────────── */
.zusagen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
@media(max-width:900px){.zusagen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.zusagen{grid-template-columns:1fr}}
.zusagen > div{background:var(--surface);padding:1.25rem 1.3rem;display:flex;flex-direction:column;gap:.35rem}
.zusagen b{font-family:var(--display);font-size:.95rem;color:var(--ink);font-weight:600}
.zusagen span{font-size:.87rem;line-height:1.5}
/* eigener Abschnitt auf der Startseite: groessere Kacheln, 2x2 */
.zusagen.gross{grid-template-columns:repeat(2,1fr);border-radius:10px}
.zusagen.gross > div{padding:1.75rem 1.85rem;gap:.45rem}
.zusagen.gross b{font-size:1.06rem;display:flex;align-items:center;gap:.6rem}
.zusagen.gross b::before{content:"";width:.4rem;height:.4rem;border-radius:50%;
  background:var(--petrol);flex:none}
.zusagen.gross span{font-size:.94rem;line-height:1.62;padding-left:1rem}
@media(max-width:560px){
  .zusagen.gross{grid-template-columns:1fr}
  .zusagen.gross > div{padding:1.35rem 1.3rem}
  .zusagen.gross span{padding-left:0}
}


/* ── Preisvergleich Markt ──────────────────────────────────── */
.marktvgl{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.marktvgl .zeile{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;
  padding:.85rem 1.2rem;border-bottom:1px solid var(--line);font-size:.92rem}
.marktvgl .zeile:last-child{border-bottom:0}
.marktvgl .zeile.wir{background:var(--quiet)}
.marktvgl .zeile.wir b{color:var(--petrol)}
.marktvgl b{font-family:var(--display);color:var(--ink);font-weight:600;display:block}
.marktvgl small{display:block;font-size:.78rem;color:var(--dim);margin-top:.1rem}
.marktvgl .wo{font-family:var(--mono);font-size:.73rem;color:var(--dim);text-align:right}
.marktvgl .pr{font-family:var(--mono);font-size:.93rem;color:var(--ink);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;min-width:6.5rem}
.marktvgl .pr.kein{color:var(--dim);font-size:.8rem}
@media(max-width:640px){
  .marktvgl .zeile{grid-template-columns:1fr auto}
  .marktvgl .wo{display:none}
}

/* ── Terminplaner ──────────────────────────────────────────── */
.planer{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.planer .kopf{padding:1.3rem 1.5rem;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.planer .kopf h3{font-size:1.12rem}
.planer .kopf span{font-family:var(--mono);font-size:.74rem;color:var(--dim)}
.planer .teil{padding:1.4rem 1.5rem;border-bottom:1px solid var(--line)}
.planer .teil:last-of-type{border-bottom:0}
.planer .teil > .lab{display:block;font-family:var(--mono);font-size:.69rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.85rem}

.tage{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
@media(max-width:600px){.tage{grid-template-columns:repeat(4,1fr)}}
.tag{background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:.6rem .3rem;
  text-align:center;cursor:pointer;transition:.12s;font-family:var(--text)}
.tag:hover:not(:disabled){border-color:var(--line-2)}
.tag.an{background:var(--forest);border-color:var(--forest);color:var(--on-dark)}
.dunkel .tag.an{color:#07110F}
.tag:disabled{opacity:.32;cursor:default}
.tag em{display:block;font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.16rem}
.tag.an em{color:rgba(255,255,255,.72)}
.dunkel .tag.an em{color:rgba(7,17,15,.62)}
.tag b{font-family:var(--display);font-size:1.08rem;font-weight:600;color:var(--ink);display:block;line-height:1.1}
.tag.an b{color:inherit}
.tag small{display:block;font-size:.66rem;color:var(--dim);margin-top:.1rem}
.tag.an small{color:rgba(255,255,255,.72)}
.dunkel .tag.an small{color:rgba(7,17,15,.62)}

.optionen{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
@media(max-width:640px){.optionen{grid-template-columns:1fr}}
.optionen.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.optionen.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.optionen.vier{grid-template-columns:1fr}}
.optionen.zwei{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.optionen.zwei{grid-template-columns:1fr}}
.planer .feld.eigen{margin-top:.85rem}
.planer .feld.eigen[hidden]{display:none}
.popt{color:inherit;background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:.85rem .95rem;
  cursor:pointer;text-align:left;transition:.12s;display:flex;flex-direction:column;gap:.18rem;font-family:var(--text)}
.popt:hover{border-color:var(--line-2)}
.popt.an{border-color:var(--forest);background:var(--quiet);box-shadow:inset 0 0 0 1px var(--forest)}
.popt b{font-family:var(--display);font-size:.94rem;color:var(--ink);font-weight:600}
.popt span{font-size:.79rem;color:var(--dim);line-height:1.42}
.popt.an b,.popt.an b{color:var(--petrol)}

.planer .fuss{padding:1.3rem 1.5rem;background:var(--quiet);display:flex;justify-content:space-between;
  align-items:center;gap:1.1rem;flex-wrap:wrap}
.planer .fuss .zus{font-size:.9rem}
.planer .fuss .zus b{font-family:var(--display);color:var(--ink);display:block;font-size:1rem;margin-bottom:.12rem}
.planer .fuss .zus span{color:var(--dim);font-family:var(--mono);font-size:.76rem}

.feld{display:flex;flex-direction:column;gap:.4rem}
.feld label{font-family:var(--mono);font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.feld input,.feld textarea,.feld select{font-family:var(--text);font-size:.95rem;color:var(--ink);
  background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:.68rem .85rem;width:100%}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--dim)}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:560px){.feldpaar{grid-template-columns:1fr}}

/* ── Einsatzgebiet ─────────────────────────────────────────── */
.gebiet{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:760px){.gebiet{grid-template-columns:1fr;gap:1.5rem}}
.gebiet h3{font-size:1rem;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.gebiet h3 em{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--dim);font-weight:400}
.ortliste{display:flex;flex-wrap:wrap;gap:.4rem}
.ortliste span{font-size:.83rem;background:var(--surface);border:1px solid var(--line);
  border-radius:4px;padding:.3rem .6rem;color:var(--body)}

/* ── Modellvergleich ───────────────────────────────────────── */
.vglbox{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.vglwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;padding:1.3rem 1.4rem;
  border-bottom:1px solid var(--line);background:var(--quiet)}
@media(max-width:720px){.vglwahl{grid-template-columns:1fr}}
.vgltab{overflow-x:auto}
/* table-layout:fixed — ohne das verteilt der Browser die Spaltenbreiten nach
   Inhalt, und die drei Modellspalten wandern bei jeder Auswahl seitlich.
   Fest aufgeteilt bleiben sie gleich breit; längere Angaben brechen in eine
   weitere Zeile um, statt die Spalte zu dehnen. */
.vgltab table{border-collapse:collapse;width:100%;min-width:36rem;font-size:.9rem;table-layout:fixed}
.vgltab td:not(:first-child){overflow-wrap:anywhere}
.vgltab th,.vgltab td{padding:.72rem .9rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.vgltab thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-weight:500;background:var(--quiet)}
.vgltab td:first-child,.vgltab th:first-child{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);width:11rem;white-space:nowrap}
.vgltab tbody tr:last-child td{border-bottom:0}
.vgltab .mod{font-family:var(--display);font-weight:600;color:var(--ink);font-size:.97rem}
.vgltab .pr{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.vgltab .ja{color:var(--petrol);font-weight:600}
.vgltab .nein{color:var(--dim)}
.vgltab .bild{width:100%;max-width:5.5rem;aspect-ratio:1;object-fit:contain;border-radius:4px;background:var(--quiet);display:block}   /* Höhe reservieren, sonst rutscht die Tabelle beim Nachladen */

/* ── FAQ kompakt (für Unterseiten) ─────────────────────────── */
.faqmini{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:760px){.faqmini{grid-template-columns:1fr}}
.faqmini details{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.9rem 1.1rem}
.faqmini summary{font-family:var(--display);font-weight:600;color:var(--ink);font-size:.94rem;cursor:pointer;list-style:none}
.faqmini summary::-webkit-details-marker{display:none}
.faqmini summary::after{content:"+";float:right;color:var(--dim);font-weight:400}
.faqmini details[open] summary::after{content:"–"}
.faqmini p{margin:.65rem 0 0;font-size:.89rem}

/* ── Eigene Kamera mitbringen ──────────────────────────────── */
.mitbringen{display:grid;grid-template-columns:1fr auto;gap:1.6rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.7rem 1.8rem}
@media(max-width:760px){.mitbringen{grid-template-columns:1fr;gap:1.2rem}}
.mitbringen h3{font-size:1.25rem;margin-bottom:.5rem}
.mitbringen p{margin:0 0 .7rem;font-size:.95rem}
.mitbringen .pv{font-family:var(--mono);font-size:.8rem;color:var(--dim)}
.mitbringen .pv b{color:var(--petrol);font-size:1.5rem;font-family:var(--display);display:block;margin-bottom:.1rem}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Bildlegenden minimalistisch */
.fig figcaption{
  padding:1.1rem .85rem .7rem;
  font-family:var(--mono);font-size:.68rem;font-weight:400;
  letter-spacing:.06em;color:rgba(234,244,240,.82);
  background:linear-gradient(to top,rgba(6,16,14,.72),rgba(6,16,14,0));
}

/* Sprungziele nicht unter die klebende Navigation schieben */
/* Abstand der Sprungziele zur Kopfzeile.
   Gemessen: Ein Klick auf der Seite landet punktgenau, ein Aufruf mit
   Sprungmarke von einer anderen Seite dagegen 19 px tiefer — der Browser
   springt dort, bevor die Seite fertig aufgebaut ist. Der Wert liegt deshalb
   19 px unter der Leistenhöhe: Beim Klick verschwindet der Abschnittsanfang
   hinter der Leiste, beim Aufruf sitzt er genau darunter. In beiden Fällen
   bleibt kein heller Streifen sichtbar. Ohne diesen Versatz war es:
   also 88 px bei einer nur 69 px hohen Leiste — dazwischen blitzte der helle
   Seitenhintergrund als weißer Streifen durch, sichtbar bei den dunklen
   Abschnitten Ablauf, Termin und Vergleich. */
section[id], header[id], div[id="formular"], .block[id]{scroll-margin-top:calc(4.25rem - 18px)}
/* Kein weiches Scrollen. Eine laufende Animation und ein fester Zielpunkt
   vertragen sich nicht: Wächst die Seite währenddessen, hält der Browser
   daneben an. Ein übergangsloser Sprung sitzt dagegen sofort und endgültig. */
html{scroll-behavior:auto}


/* ── Einwilligung für externe Schriften ────────────────────── */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#0E1618;color:#A0BAB2;
  border-top:1px solid #22322E;box-shadow:0 -12px 40px -20px rgba(0,0,0,.6)}
.consent .wrap{display:grid;grid-template-columns:1fr auto;gap:1.4rem;align-items:center;
  padding-block:1.15rem}
@media(max-width:800px){.consent .wrap{grid-template-columns:1fr;gap:.95rem}}
.consent h3{font-family:var(--display);font-size:.98rem;font-weight:600;color:#EAF4F0;margin:0 0 .3rem}
.consent p{margin:0;font-size:.86rem;line-height:1.55;max-width:46rem}
.consent a{color:#35B29C;text-decoration:underline;text-underline-offset:.15em}
.consent .row-cta{flex-wrap:nowrap}
@media(max-width:480px){.consent .row-cta{flex-wrap:wrap}.consent .btn{flex:1}}
.consent .btn-ja{background:#35B29C;border-color:#35B29C;color:#07110F}
.consent .btn-ja:hover{background:#4BC7B1;border-color:#4BC7B1}
.consent .btn-nein{background:transparent;border-color:#334741;color:#EAF4F0}
.consent .btn-nein:hover{border-color:#35B29C;color:#35B29C}

/* Platzhalter auf dunklem Grund lesbar halten */
.dunkel .gap{background:rgba(227,148,77,.12);color:#E3944D;border-color:#8A5A28}

/* ── Menü für kleine Bildschirme ───────────────────────────── */
.navknopf{display:none;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;
  margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:6px;cursor:pointer;color:var(--ink)}
.navknopf svg{width:1.2rem;height:1.2rem;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.navknopf .zu{display:none}
.navknopf[aria-expanded="true"] .auf{display:none}
.navknopf[aria-expanded="true"] .zu{display:block}
@media(max-width:1040px){
  .navknopf{display:inline-flex;order:3}
  .nav .wrap{flex-wrap:wrap;gap:.8rem;height:auto;padding-block:.8rem}
  .nav .btn:not(.mobil-cta){display:none}
  .nav ul[data-offen]{display:flex;flex-direction:column;gap:0;width:100%;
    order:3;border-top:1px solid var(--line);margin:0;padding:.4rem 0 .2rem}
  .nav ul[data-offen] li{width:100%}
  .nav ul[data-offen] a{display:block;padding:.75rem .2rem;font-size:1rem;border-bottom:1px solid var(--line)}
  .nav ul[data-offen] li:last-child a{border-bottom:0}
  .nav .mobil-cta{display:block;width:100%;order:4;margin:.6rem 0 .2rem;text-align:center}
}
/* Dieselben Regeln als Klasse: greift, wenn das Menü in der gewählten
   Sprache breiter wird als der Platz — unabhängig von der Fenstergröße. */
.nav.kompakt ul{display:none}
.nav.kompakt .navknopf{display:inline-flex;order:3}
.nav.kompakt .wrap{flex-wrap:wrap;gap:.8rem;height:auto;padding-block:.8rem}
.nav.kompakt .btn:not(.mobil-cta){display:none}
.nav.kompakt .sprachwahl{margin-left:auto;margin-right:.7rem;order:2}
.nav.kompakt ul[data-offen]{display:flex;flex-direction:column;gap:0;width:100%;
  order:3;border-top:1px solid var(--line);margin:0;padding:.4rem 0 .2rem}
.nav.kompakt ul[data-offen] li{width:100%}
.nav.kompakt ul[data-offen] a{display:block;padding:.75rem .2rem;font-size:1rem;border-bottom:1px solid var(--line)}
.nav.kompakt ul[data-offen] li:last-child a{border-bottom:0}
.nav.kompakt .mobil-cta{display:block;width:100%;order:4;margin:.6rem 0 .2rem;text-align:center}
.nav.kompakt .sw-liste[hidden]{display:none}
.nav .mobil-cta{display:none}

/* Einwilligung auf kleinen Bildschirmen kompakter */
@media(max-width:560px){
  .consent .wrap{padding-block:.9rem}
  .consent h3{font-size:.92rem}
  .consent p{font-size:.8rem;line-height:1.45}
  .consent .lang{display:none}
}

/* ── Marke: dunkle Kopfzeile mit Bildzeichen ───────────────── */
.nav{
  background:#010A09;
  border-bottom:1px solid #16231F;
}
.nav .logo{color:#EAF4F0;gap:.6rem}
.nav .logo img{height:1.85rem;width:auto;display:block;flex:none}
.nav ul a{color:#A7C1B9}
.nav ul a:hover{color:#35B29C}
.nav ul a[aria-current="page"]{color:#35B29C}
.nav .btn-primary{background:#35B29C;border-color:#35B29C;color:#07110F}
.nav .btn-primary:hover{background:#4BC7B1;border-color:#4BC7B1}
.nav .btn-ghost{background:transparent;border-color:#334741;color:#EAF4F0}
.nav .btn-ghost:hover{border-color:#35B29C;color:#35B29C}
.navknopf{border-color:#334741;color:#EAF4F0}
@media(max-width:1040px){
  .nav ul[data-offen]{border-top-color:#1B2A28}
  .nav ul[data-offen] a{border-bottom-color:#1B2A28}
}

/* volles Logo im Fußbereich */
footer .logo img{height:3.4rem;width:auto;display:block}
footer .logo{gap:0}
footer .logo img{border-radius:8px;box-shadow:0 2px 14px -6px rgba(7,18,17,.45)}

/* Kopfzeile: Bildzeichen und Wortmarke nebeneinander */
.nav .logo{gap:.55rem;font-size:0}
.nav .logo .zeichen{height:1.95rem;width:auto}
.nav .logo .wortmarke{height:1.05rem;width:auto;display:block}
@media(max-width:420px){
  .nav .logo .zeichen{height:1.7rem}
  .nav .logo .wortmarke{height:.9rem}
}

/* ── Rechtstexte ───────────────────────────────────────────── */
.rechtstext{max-width:46rem}
.rechtstext h2{font-size:clamp(1.3rem,2.8vw,1.7rem);margin:2.6rem 0 .9rem}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:1.05rem;margin:1.8rem 0 .5rem}
.rechtstext p{margin:0 0 .85rem;font-size:.97rem;line-height:1.68}
.rechtstext ul,.rechtstext ol{margin:0 0 .95rem;padding-left:1.3rem;font-size:.97rem;line-height:1.68}
.rechtstext li{margin-bottom:.4rem}
.rechtstext address{font-style:normal;margin:0 0 .85rem;font-size:.97rem;line-height:1.7}
.rechtstext dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.4rem;margin:0 0 1.2rem;font-size:.97rem}
.rechtstext dt{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding-top:.2rem}
.rechtstext dd{margin:0;color:var(--ink)}
@media(max-width:560px){.rechtstext dl{grid-template-columns:1fr;gap:.15rem}.rechtstext dd{margin-bottom:.7rem}}
.rechtstext a{color:var(--petrol);text-decoration:underline;text-underline-offset:.15em}
.rechtsbox{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1.4rem 1.5rem;margin:0 0 1.4rem}
.rechtsbox.warn{border-left:3px solid var(--amber);background:#FBF6EF}
.dunkel .rechtsbox.warn{background:#2A2013;border-left-color:#E3944D}
.rechtsbox p:last-child{margin-bottom:0}
.rechtsbox h3{margin-top:0}
.formularkasten{border:1px solid var(--line-2);border-radius:6px;padding:1.3rem 1.5rem;background:var(--quiet);
  font-size:.92rem;line-height:1.75}
.formularkasten p{margin:0 0 .7rem}
.rechtsnav{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.2rem}
.rechtsnav a{font-family:var(--text);font-size:.88rem;font-weight:500;padding:.45rem .9rem;border-radius:5px;
  border:1px solid var(--line-2);color:var(--body);text-decoration:none}
.rechtsnav a:hover{border-color:var(--petrol);color:var(--petrol)}
.rechtsnav a[aria-current="page"]{background:var(--forest);border-color:var(--forest);color:var(--on-dark)}

/* ── Mitgebrachte Konfiguration auf der Kontaktseite ───────── */
.auswahl{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:1.2rem}
.auswahl:empty{display:none}
.auswahl .kopf{padding:1.2rem 1.5rem;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.auswahl .kopf h3{font-size:1.08rem}
.auswahl .kopf a{font-family:var(--text);font-size:.84rem;font-weight:500;color:var(--petrol);
  text-decoration:underline;text-underline-offset:.2em}
.auswahl .zeilen{padding:.4rem 1.5rem}
.auswahl .z{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.auswahl .z:last-child{border-bottom:0}
.auswahl .z .k b{display:block;font-family:var(--display);font-weight:600;color:var(--ink);font-size:.95rem}
.auswahl .z .k span{display:block;font-size:.8rem;color:var(--dim);margin-top:.05rem}
.auswahl .z .v{font-family:var(--mono);font-size:.9rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.auswahl .z .v.aus{color:var(--dim)}
.auswahl .summe{background:var(--quiet);padding:1.1rem 1.5rem;display:flex;
  justify-content:space-between;align-items:baseline;gap:1rem}
.auswahl .summe .k{font-family:var(--display);font-weight:600;color:var(--ink);font-size:1rem}
.auswahl .summe .v{font-family:var(--display);font-weight:700;color:var(--petrol);font-size:1.5rem;
  font-variant-numeric:tabular-nums}
@media(max-width:480px){
  .auswahl .zeilen,.auswahl .kopf,.auswahl .summe{padding-left:1.1rem;padding-right:1.1rem}
}

/* ── Rückmeldung zum Fahrzeug im Konfigurator ──────────────── */
.kfzcheck{margin-top:.95rem}
.kfzcheck:empty{display:none}
.kfzcheck .ok{background:var(--quiet);border:1px solid var(--line);border-left:3px solid var(--petrol);
  border-radius:8px;padding:1rem 1.2rem;display:grid;grid-template-columns:auto 1fr;gap:0 .8rem;align-items:start}
.kfzcheck .haken{width:1.3rem;height:1.3rem;border-radius:50%;background:var(--petrol);flex:none;
  display:flex;align-items:center;justify-content:center;margin-top:.1rem}
.kfzcheck .haken svg{width:.8rem;height:.8rem;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kfzcheck b{font-family:var(--display);font-size:.96rem;color:var(--ink);font-weight:600;display:block;margin-bottom:.2rem}
.kfzcheck p{margin:0;font-size:.89rem;line-height:1.55;grid-column:2}
.kfzcheck .extra{grid-column:2;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line-2);
  font-size:.88rem;line-height:1.55;color:var(--body)}
.kfzcheck .extra b{font-size:.82rem;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--petrol);font-weight:500;margin-bottom:.25rem}

/* Formularversand: Honigtopf gegen Bots und die Rückmeldung */
.honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fstatus{margin:0;padding:.75rem .9rem;border-radius:8px;font-size:.89rem;line-height:1.55;font-weight:500;border:1.5px solid}
.fstatus.ok{background:var(--quiet);border-color:var(--petrol);color:var(--forest)}
.fstatus.fehler{background:#FDF1E7;border-color:var(--amber);color:#7A3D0E}
.fstatus:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}

/* ── Startbild auf Fensterhöhe ──────────────────────────────────
   Das Startbild soll mit seiner feinen Unterkante am unteren
   Fensterrand enden, damit die Preiskarte vollständig sichtbar ist.
   Statt fester Höhen bekommt das Foto die Fläche, die nach Kopfzeile,
   Abständen und Preiskarte übrig bleibt — und wird per object-fit
   beschnitten statt gestaucht. */
@media(min-width:901px){
  /* Das Startbild füllt genau eine Bildschirmhöhe und schließt dunkel ab.
     Die Markenleiste beginnt erst darunter, also erst beim Scrollen.
     4.25rem ist die Höhe der Kopfzeile. */
  .hero{min-height:calc(100vh - 4.25rem);display:flex;align-items:center;
        padding:2rem 0;border-bottom:0}
  .hero > .wrap{width:100%}
  .hero .hero-stack{max-height:calc(100vh - 10rem);grid-template-rows:minmax(12rem,1fr) auto}
  .hero .hero-foto .fig{aspect-ratio:auto;min-height:0}   /* nur im Startbild, nicht auf der Dashcams-Seite */
}

/* ── Knopf in der Kopfzeile ─────────────────────────────────────
   Er war 49 px hoch in einer 69 px hohen Leiste und wirkte dadurch
   wie ein Werbebanner statt wie ein Bedienelement. Kleiner gesetzt
   fügt er sich ein, bleibt durch die Farbe aber der klare Blickfang.
   Die Kopie im aufgeklappten Handy-Menü behält ihre volle Größe. */
.nav .btn:not(.mobil-cta){font-size:.86rem;padding:.55rem 1.05rem}

/* ── Kopfbereich der Dashcams-Seite ─────────────────────────────
   Dieser eine Abschnitt trägt die allgemeine Abschnitts-Polsterung von
   4.25rem und stand dadurch mit 80 px Leerraum unter der Kopfzeile —
   auf dem iPad im Querformat ein deutlich sichtbarer Balken. Er bekommt
   hier dasselbe Maß wie der Kopfbereich der übrigen Unterseiten, damit
   die Seiten zueinander passen. Die Regel gilt nur für diesen Abschnitt;
   alle anderen behalten ihre Polsterung. */
.seitenkopf{padding-top:2rem}
.seitenkopf > .wrap > .crumb{margin-top:0}
@media(max-width:900px){ .seitenkopf{padding-top:1.5rem} }

/* ── Rabattcode im Konfigurator ─────────────────────────────────
   Bewusst zurückhaltend gesetzt: Wer keinen Code hat, soll nicht das
   Gefühl bekommen, er zahle zu viel. */
.codefeld{padding:.9rem 1.2rem 1.1rem;border-top:1px solid var(--line)}
.codefeld > label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.45rem}
.codezeile{display:flex;gap:.5rem}
.codezeile input{flex:1;min-width:0;font-family:var(--mono);font-size:.88rem;letter-spacing:.05em;
  text-transform:uppercase;padding:.55rem .7rem;border:1.5px solid var(--line);border-radius:7px;
  background:var(--surface);color:var(--ink)}
.codezeile input::placeholder{text-transform:none;letter-spacing:0;color:var(--dim)}
.codezeile input:focus{outline:none;border-color:var(--petrol)}
.codezeile .btn{flex:none;padding:.55rem .9rem;font-size:.84rem}
.codeinfo{margin:.55rem 0 0;font-size:.82rem;line-height:1.5}
.codeinfo.gut{color:var(--petrol);font-weight:600}
.codeinfo.schlecht{color:var(--amber)}