/* ---------- 1. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden}
img,picture,video,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
table{border-collapse:collapse;width:100%}

/* ---------- 2. tokens ---------- */
:root{
  --grund:#F2F4F7;
  --feld:#FFFFFF;
  --tinte:#111318;
  --tinte-leise:#5B6070;
  --tinte-invers:#F7F8FA;
  --bau:#B5179E;
  --enge:#2BB673;
  --kaelte:#00A8E8;
  --buehne:#123C69;
  --linie:rgba(17,19,24,.16);
  --linie-stark:#111318;
  --t-riesig:clamp(2.4rem,6.2vw,5.2rem);
  --t-gross:clamp(1.7rem,3.1vw,2.7rem);
  --t-mittel:clamp(1.12rem,1.7vw,1.42rem);
  --t-lead:clamp(1.05rem,1.35vw,1.24rem);
  --t-text:1.0625rem;
  --t-mikro:.7rem;
  --abstand:clamp(64px,7vw,112px);
  --rand:clamp(18px,4vw,52px);
  --breit:1340px;
  --lesen:62ch;
  --kurve:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 3. base ---------- */
body{
  background:var(--grund);
  color:var(--tinte);
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:var(--t-text);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Lexend","Helvetica Neue",Arial,sans-serif;font-weight:700;line-height:1.06}
h1{font-size:var(--t-riesig);letter-spacing:-.03em}
h2{font-size:var(--t-gross);letter-spacing:-.02em}
h3{font-size:var(--t-mittel);letter-spacing:-.01em}
p{max-width:var(--lesen)}
p + p{margin-top:.9em}

/* ---------- 4. layout ---------- */
.vm-bahn{width:100%;max-width:var(--breit);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.vm-block{padding-top:var(--abstand);padding-bottom:var(--abstand)}
.vm-block-hell{background:var(--feld)}
.vm-block-dunkel{background:var(--tinte);color:var(--tinte-invers)}
.vm-reihe{display:grid;gap:clamp(20px,2.4vw,34px);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .vm-reihe-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vm-reihe-57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .vm-haftend{position:sticky;top:88px}
}

/* ---------- 5. компоненты ---------- */
.vm-sprung{position:absolute;left:-9999px}
.vm-sprung:focus{left:var(--rand);top:12px;z-index:60;background:var(--feld);padding:10px 14px}
.vm-kopf{background:var(--feld);border-bottom:1px solid var(--linie)}
.vm-kopf-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-top:15px;padding-bottom:15px}
.vm-marke{font-family:"Lexend",Arial,sans-serif;font-weight:700;font-size:1.18rem;letter-spacing:-.03em;text-decoration:none;margin-right:auto}
.vm-kopf a{text-decoration:none;font-size:.93rem;font-weight:500}
.vm-mikro{font-size:var(--t-mikro);letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--tinte-leise)}
.vm-lead{font-size:var(--t-lead);color:var(--tinte-leise);max-width:52ch}
.vm-nummer{font-family:"Lexend",Arial,sans-serif;font-weight:700;font-size:clamp(1.9rem,4vw,3rem);line-height:.92}
.vm-karte{background:var(--feld);border:1px solid var(--linie);border-radius:6px;overflow:hidden}
.vm-karte-innen{padding:clamp(18px,2.2vw,28px)}
.vm-bild{overflow:hidden;background:var(--grund);aspect-ratio:4/3}
.vm-bild img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--kurve)}
.vm-bild-hoch{aspect-ratio:3/4}
.vm-bild-breit{aspect-ratio:21/9}
.vm-bild-quadrat{aspect-ratio:1/1}
.vm-bildtext{font-size:var(--t-mikro);color:var(--tinte-leise);margin-top:8px}
.vm-antwort{display:inline-block;border-radius:4px;padding:4px 10px;font-size:var(--t-mikro);letter-spacing:.1em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.vm-a-bau{background:var(--bau);color:#fff}
.vm-a-enge{background:var(--enge);color:#0B2B1B}
.vm-a-kaelte{background:var(--kaelte);color:#062430}
.vm-a-buehne{background:var(--buehne);color:#fff}
.vm-a-neutral{background:var(--grund);color:var(--tinte);border:1px solid var(--linie)}
.vm-verweis{display:inline-block;text-decoration:none;font-weight:600;border-bottom:2px solid currentColor;padding-bottom:2px}
.vm-fein{height:1px;background:var(--linie);border:0;margin:0}
.vm-tabelle-huelle{overflow-x:auto;background:var(--feld);border:1px solid var(--linie);border-radius:6px}
.vm-tabelle{min-width:840px}
.vm-tabelle th,.vm-tabelle td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
.vm-tabelle thead th{position:sticky;top:0;background:var(--feld);font-size:var(--t-mikro);letter-spacing:.14em;text-transform:uppercase;font-weight:700;border-bottom:2px solid var(--linie-stark)}
.vm-tabelle tbody tr:hover{background:var(--grund)}
.vm-sortknopf{background:transparent;border:0;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;font-weight:700}
.vm-filterzeile{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.vm-filter{background:var(--feld);border:1px solid var(--linie);border-radius:999px;padding:7px 14px;cursor:pointer;font-size:var(--t-mikro);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.vm-filter[aria-pressed="true"]{background:var(--tinte);color:var(--tinte-invers);border-color:var(--tinte)}
.vm-detail{border-top:1px solid var(--linie);padding:12px 0}
.vm-detail summary{cursor:pointer;list-style:none;font-weight:600}
.vm-detail summary::-webkit-details-marker{display:none}
.vm-fuss{background:var(--tinte);color:var(--tinte-invers)}
.vm-fuss a{text-decoration:none}
.vm-fuss a:hover{text-decoration:underline;text-underline-offset:4px}
.ist-aus{display:none}
:focus-visible{outline:3px solid var(--tinte);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- 6. eigene regeln ---------- */
.vm-menuknopf{background:var(--feld);border:1px solid var(--linie);border-radius:4px;padding:7px 13px;cursor:pointer;font-size:var(--t-mikro);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.vm-nav{display:flex;flex-wrap:wrap;gap:10px 18px;width:100%;padding-bottom:10px}
.vm-nav-zu{display:none}
@media (min-width:900px){
  .vm-menuknopf{display:none}
  .vm-nav{width:auto;padding-bottom:0}
  .vm-nav-zu{display:flex}
}

/* Farbflaeche statt Foto */
.vm-platte{display:flex;align-items:flex-end;aspect-ratio:4/3;padding:clamp(16px,2vw,26px)}
.vm-platte-hoch{aspect-ratio:3/4}
.vm-platte-breit{aspect-ratio:21/9}
.vm-plattentext{font-family:"Lexend",Arial,sans-serif;font-weight:700;font-size:clamp(1.2rem,2.4vw,2rem);line-height:1.02;letter-spacing:-.02em;max-width:22ch}
.vm-p-bau{background:var(--bau);color:#fff}
.vm-p-enge{background:var(--enge);color:#0B2B1B}
.vm-p-kaelte{background:var(--kaelte);color:#062430}
.vm-p-buehne{background:var(--buehne);color:#fff}

/* Karten und Listen */
.vm-antwortzeile{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;margin-bottom:18px}
.vm-kopfzeile{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.vm-kurz{font-size:var(--t-lead);font-weight:600;margin-top:16px;margin-bottom:16px;max-width:52ch}
.vm-grenze{margin-top:16px;font-size:.95rem;color:var(--tinte-leise);max-width:var(--lesen)}
.vm-grenze-titel{font-size:var(--t-mikro);letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--tinte);display:block}
.vm-detailbox{margin-top:20px}
.vm-kartenfuss{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.vm-liste{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:minmax(0,1fr);margin-top:clamp(28px,4vw,52px)}
.vm-stand{font-size:.9rem;color:var(--tinte-leise);max-width:78ch;margin-top:clamp(28px,4vw,48px)}
.vm-block-dunkel .vm-stand,.vm-block-dunkel .vm-lead{color:var(--tinte-invers)}
.vm-titelzeile{margin-bottom:clamp(20px,3vw,36px)}
.vm-titelzeile h2{margin-bottom:12px}
.vm-satz{font-family:"Lexend",Arial,sans-serif;font-weight:700;font-size:var(--t-gross);letter-spacing:-.02em;line-height:1.14;max-width:24ch}
.vm-riesensatz{font-family:"Lexend",Arial,sans-serif;font-weight:700;font-size:clamp(1.9rem,4.4vw,3.4rem);letter-spacing:-.03em;line-height:1.08;max-width:20ch}
.vm-punkte{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin-top:18px}
.vm-punkt{border-top:1px solid var(--linie);padding-top:12px}
.vm-block-dunkel .vm-punkt{border-top-color:rgba(247,248,250,.24)}
.vm-zaehler{font-size:.95rem;color:var(--tinte-leise);margin-top:8px}
.vm-breitblock{border-top:1px solid var(--linie);padding-top:20px;padding-bottom:20px}
.vm-feld{display:block;margin-bottom:14px;max-width:34rem}
.vm-feld span{display:block;font-size:var(--t-mikro);letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.vm-feld input,.vm-feld select,.vm-feld textarea{width:100%;background:var(--feld);border:1px solid var(--linie);border-radius:4px;padding:11px 13px}
.vm-feld textarea{min-height:150px}
.vm-haken{display:flex;gap:10px;align-items:flex-start;max-width:34rem;margin-bottom:18px}
.vm-knopf{background:var(--tinte);color:var(--tinte-invers);border:0;border-radius:4px;padding:12px 22px;cursor:pointer;font-size:var(--t-mikro);letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.vm-fuss-oben{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:baseline;padding-bottom:clamp(28px,4vw,48px)}
.vm-fuss-spalten{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);padding-top:clamp(28px,4vw,44px);border-top:1px solid rgba(247,248,250,.22)}
.vm-fuss-spalten li{margin-bottom:7px;font-size:.95rem}
.vm-fuss-unten{display:flex;flex-wrap:wrap;gap:8px 32px;padding-top:24px;padding-bottom:clamp(28px,4vw,44px);border-top:1px solid rgba(247,248,250,.22);font-size:.88rem}
.vm-fuss .vm-mikro{color:rgba(247,248,250,.7)}
.vm-notiz{border-top:1px solid var(--linie);padding-top:18px}
.vm-recht p{max-width:78ch}
.vm-recht h2{margin-top:clamp(30px,4vw,48px);margin-bottom:12px}
.vm-recht h3{margin-top:24px;margin-bottom:8px}
.vm-recht li{max-width:78ch;margin-bottom:7px;padding-left:16px;border-left:2px solid var(--linie)}
@media (min-width:640px){
  .vm-punkte-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vm-fuss-spalten{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (min-width:900px){
  .vm-liste-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vm-punkte-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vm-fuss-spalten{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vm-karte-breit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
@media (min-width:1200px){
  .vm-liste-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- 7. korrekturen ---------- */
h1,h2,h3,.vm-satz,.vm-riesensatz,.vm-plattentext{overflow-wrap:break-word}
.vm-h1-start{font-size:clamp(2rem,4.2vw,3.5rem)}
@media (min-width:900px){
  .vm-reihe-75{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
}
h1{margin-bottom:clamp(14px,1.8vw,24px)}
.vm-recht h2{margin-bottom:14px}
.vm-karte h3{margin-bottom:2px}
@media (min-width:900px){
  .vm-karte-breit .vm-bild{height:100%;aspect-ratio:auto;min-height:340px}
  .vm-karte-breit .vm-bild img{height:100%}
}