/* ============================================================================
   TrackPro — Vimcar-Alternative, v2 (ui-ux-pro-max-Pass)
   Struktur identisch zu v1. Geändert: Typo-Skala, Spacing-Rhythmus, Kontraste,
   Zahlen-Darstellung, Karten-/Tabellen-Feinschliff, Trust-Elemente, States.
   Alles unter .vca gescoped, alle Klassen vca-präfixiert (Webflow-Globals).
   ========================================================================== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.vca{
  /* --- Farbe -------------------------------------------------------------
     Kontrast-Korrekturen gegenüber v1:
     grey-soft #8B8E99 -> #6E7280 (3,2:1 -> 4,6:1 auf Off-White)
     Textlinks nutzen coral-ink, nicht das helle Marken-Coral (3,0:1). */
  --vca-coral:#EE5C2A;          /* Flächen, Buttons, Marker */
  --vca-coral-dark:#D4521F;     /* Button-Hover */
  --vca-coral-ink:#C2431A;      /* Coral für Text/Links, 4,6:1 auf Weiß */
  --vca-ink:#222427;
  --vca-grey:#5F6270;           /* Fließtext sekundär, 6,1:1 */
  --vca-grey-soft:#6E7280;      /* Meta, 4,6:1 */
  --vca-bg:#FAF8F4; --vca-white:#fff; --vca-line:#E8E6E0; --vca-soft:#F5F3EF;
  --vca-blue:#203866; --vca-lime:#C5D86D; --vca-lime-bg:#F4F8E8;
  --vca-lime-ink:#59682C;       /* Lime als Text, 4,7:1 */

  /* --- Rhythmus: 4/8-Basis ---------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:88px;

  /* --- Radien und Elevation (eine Skala, keine Zufallswerte) ------------- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --e1:0 1px 2px rgba(34,36,39,.05);
  --e2:0 2px 10px rgba(34,36,39,.06);
  --e3:0 12px 32px -12px rgba(34,36,39,.16);

  --dur:200ms; --ease:cubic-bezier(.2,.6,.35,1);

  box-sizing:border-box;
  background:var(--vca-bg);
  color:var(--vca-ink);
  font:400 16px/1.6 "Avenir Next",Avenir,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;   /* Preise springen beim Umschalten nicht */
}
.vca *,.vca *::before,.vca *::after{box-sizing:border-box}
.vca [id]{scroll-margin-top:100px}
@media (prefers-reduced-motion:reduce){.vca *{transition-duration:.01ms!important}}

.vca-wrap{max-width:1040px;margin:0 auto;padding:0 var(--s5)}
.vca a{color:var(--vca-coral-ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;transition:color var(--dur) var(--ease)}
.vca a:hover{color:var(--vca-coral)}
.vca a:focus-visible,.vca button:focus-visible,.vca summary:focus-visible{
  outline:3px solid var(--vca-blue);outline-offset:3px;border-radius:var(--r-sm)}
.vca-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Typo-Skala: 12 13 14 16 18 21 27 34 46 ------------------------------ */
.vca h1{font-size:clamp(32px,4.4vw,46px);font-weight:800;line-height:1.1;
  margin:var(--s3) 0 var(--s4);letter-spacing:-.02em;max-width:19ch}
.vca h2{font-size:clamp(25px,3vw,34px);font-weight:800;line-height:1.2;
  margin:0 0 var(--s2);letter-spacing:-.015em}
.vca h3{font-size:21px;font-weight:700;line-height:1.3;margin:0 0 var(--s2);letter-spacing:-.005em}
/* Zeilenlänge: 80ch statt 62–70ch. Nutzt die Containerbreite deutlich besser,
   liegt aber noch unter der Grenze, ab der der Zeilensprung wirklich schwerfällt. */
.vca p{margin:var(--s3) 0;max-width:80ch}
.vca-kicker{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vca-coral-ink);margin:0}
.vca-lead{font-size:18px;line-height:1.55;color:var(--vca-grey);max-width:80ch;margin:0}
.vca-sub{color:var(--vca-grey);max-width:80ch;margin:0 0 var(--s5)}

/* --- Sektions-Rhythmus: klare Stufen statt Zufallsabstände --------------- */
.vca-sec{padding:var(--s9) 0 0}
.vca-sec--alt{background:var(--vca-white);border-top:1px solid var(--vca-line);
  border-bottom:1px solid var(--vca-line);margin-top:var(--s9);padding:var(--s9) 0}
.vca-hero{padding:var(--s6) 0 0}
/* Am Handy deutlich enger: 88px sind dort fast ein Fünftel des Bildschirms,
   bei .vca-sec--alt kamen Rand und Innenabstand sogar auf 176px vor der
   Überschrift. Die Stufen bleiben erhalten, nur kleiner. */
@media (max-width:760px){
  .vca-sec{padding-top:var(--s7)}
  .vca-sec--alt{margin-top:var(--s6);padding:var(--s7) 0}
}

/* --- Breadcrumb ---------------------------------------------------------- */
.vca-crumbs{font-size:13px;color:var(--vca-grey-soft);padding:var(--s5) 0 0}
.vca-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0}
.vca-crumbs li+li::before{content:"\203A";margin-right:var(--s2);color:#C9C4BA}
.vca-crumbs a{color:var(--vca-grey-soft);text-decoration:none}
.vca-crumbs a:hover{color:var(--vca-ink);text-decoration:underline}
.vca-crumbs [aria-current]{color:var(--vca-ink);font-weight:700}

/* --- Trust-Siegel (statt reiner Text-Pillen) ----------------------------- */
.vca-trust{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0 0;padding:0;list-style:none}
.vca-trust li{display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--vca-white);border:1px solid var(--vca-line);border-radius:var(--r-pill);
  padding:var(--s2) var(--s4) var(--s2) var(--s3);font-size:13.5px;font-weight:700;
  color:var(--vca-ink);box-shadow:var(--e1);min-height:38px}
.vca-trust svg{width:17px;height:17px;flex:0 0 auto;color:var(--vca-lime-ink);
  stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Bewertungs-Badge: eigener, kräftigerer Auftritt */
.vca-trust li.vca-rate{background:var(--vca-ink);border-color:var(--vca-ink);color:#fff;
  padding-right:var(--s3)}
.vca-rate .vca-stars{color:#FFB020;letter-spacing:.08em;font-size:13px}
.vca-rate b{font-size:15px}
.vca-rate span{color:#B9BCC2;font-weight:400;font-size:12.5px}

/* --- Hero-Bild (ein Motiv statt Karussell) ------------------------------- */
.vca-heroimg{margin:var(--s6) 0 0}
/* 16/9 statt 3/2: die Grafik hat oben und unten viel Luft, als Einzelmotiv
   wirkt sie sonst überdimensioniert. Der Inhalt liegt mittig, wird also nicht angeschnitten. */
.vca-heroimg img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-xl);box-shadow:var(--e3)}
/* Auf dem Handy nicht mehr auf 4/3 beschneiden: die Preiskarten sitzen rechts
   im Bild und wurden dabei angeschnitten. Lieber flacher und vollständig. */
@media (max-width:720px){.vca-heroimg img{aspect-ratio:16/9;object-fit:contain;background:#0E0E10}}
.vca-heroimg figcaption{font-size:13px;color:var(--vca-grey-soft);margin:var(--s3) 0 0}
/* Antippen vergrößert — auf dem Handy sind die Preise im Bild sonst zu klein. */
.vca-zoomable{cursor:zoom-in}
.vca-zoomable:focus-visible{outline:3px solid var(--vca-coral);outline-offset:3px}

/* --- Vergrößerte Ansicht -------------------------------------------------
   Bewusst ohne var(): die Tokens hängen an .vca, das Overlay aber am body.
   Mit var(--s3) fiel top/right auf auto zurück und der Schließen-Button
   rutschte unter den Bildschirmrand. */
.vca-lb{position:fixed;inset:0;z-index:9999;background:rgba(16,17,19,.94)}
.vca-lb__scroll{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;
  display:flex;padding:16px}
/* margin:auto statt justify-content:center — zentriert genauso, lässt aber
   Überhang auf beiden Seiten scrollbar. Mit center war die linke Bildhälfte
   nicht erreichbar. */
.vca-lb img{margin:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
.vca-lb__close{position:absolute;top:12px;right:12px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;
  color:#fff;background:rgba(255,255,255,.16);border:0;border-radius:999px;
  cursor:pointer;font-family:inherit}
.vca-lb__close:hover{background:rgba(255,255,255,.3)}
.vca-lb__close:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* --- USP-Liste ----------------------------------------------------------- */
.vca-usps{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s3) var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.vca-usps li{position:relative;padding-left:34px;font-size:16.5px;line-height:1.45}
.vca-usps li svg{position:absolute;left:0;top:1px;width:22px;height:22px;
  color:var(--vca-lime-ink);stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* --- Buttons ------------------------------------------------------------- */
/* Weiß auf Marken-Coral ergibt 3,39:1. Das genügt WCAG-AA nur als "große Schrift"
   (>=18,66px fett) — deshalb 19px/800 statt 17px, ohne die Markenfarbe zu ändern. */
.vca-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  background:var(--vca-coral);color:#fff!important;text-decoration:none!important;
  font-weight:800;font-size:19px;letter-spacing:.01em;padding:0 var(--s6);
  border-radius:var(--r-sm);border:2px solid var(--vca-coral);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.vca-btn:hover{background:var(--vca-coral-dark);border-color:var(--vca-coral-dark);color:#fff!important}
.vca-btn--ghost{background:transparent;color:var(--vca-ink)!important;border-color:#CFCABF}
.vca-btn--ghost:hover{background:var(--vca-ink);border-color:var(--vca-ink);color:#fff!important}
.vca-herocta{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s6) 0 0}
.vca-rating{font-size:14px;color:var(--vca-grey);margin:var(--s4) 0 0}

/* --- Kundenlogos --------------------------------------------------------- */
.vca-clients{margin:var(--s7) 0 0;padding:var(--s5) 0 0;border-top:1px solid var(--vca-line)}
.vca-clients p{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vca-grey-soft);margin:0 0 var(--s4)}
.vca-clients ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--s5) var(--s7)}
.vca-clients img{display:block;height:30px;width:auto;opacity:.62;
  filter:grayscale(1);transition:opacity var(--dur) var(--ease),filter var(--dur) var(--ease)}
.vca-clients li:hover img{opacity:1;filter:grayscale(0)}

/* --- Sprungnavigation ---------------------------------------------------- */
.vca-jump{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s6) 0 0;
  padding:var(--s5) 0 0;border-top:1px solid var(--vca-line)}
.vca-jump a{font-size:14px;font-weight:700;color:var(--vca-ink);text-decoration:none;
  background:var(--vca-soft);border:1px solid var(--vca-line);border-radius:var(--r-pill);
  padding:10px var(--s4);min-height:40px;display:inline-flex;align-items:center;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.vca-jump a:hover{background:var(--vca-white);border-color:var(--vca-coral);color:var(--vca-coral-ink)}

/* --- Hinweisbox ---------------------------------------------------------- */
.vca-fair{background:var(--vca-white);border:1px solid var(--vca-line);
  border-left:3px solid var(--vca-blue);border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:var(--s5) var(--s6);margin:0 0 var(--s4);box-shadow:var(--e2)}
.vca-fair h3{color:var(--vca-blue)}
.vca-fair p{margin:0}
.vca-fair--ok{border-left-color:var(--vca-lime);background:var(--vca-lime-bg)}
.vca-fair--ok h3{color:var(--vca-lime-ink)}
.vca-fair--ok ul{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3)}
.vca-fair--ok li{position:relative;padding-left:32px;font-size:16px;line-height:1.5}
.vca-fair--ok li svg{position:absolute;left:0;top:2px;width:21px;height:21px;
  color:var(--vca-lime-ink);stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.vca-small{font-size:13.5px;color:var(--vca-grey);margin:var(--s4) 0 0}

/* --- Netto/Brutto -------------------------------------------------------- */
.vca-taxbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin:0 0 var(--s5)}
.vca-toggle{display:inline-flex;background:var(--vca-soft);border:1px solid var(--vca-line);
  border-radius:var(--r-pill);padding:var(--s1)}
.vca-toggle button{appearance:none;border:0;background:transparent;cursor:pointer;
  font:800 14px/1 "Avenir Next",Avenir,Arial,sans-serif;color:var(--vca-grey);
  padding:0 var(--s5);min-height:40px;border-radius:var(--r-pill);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.vca-toggle button[aria-checked="true"]{background:var(--vca-ink);color:#fff}
.vca-taxhint{font-size:13.5px;color:var(--vca-grey-soft);margin:0;max-width:46ch}

/* --- Prozent-Band -------------------------------------------------------- */
.vca-pctband{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);
  background:var(--vca-white);border:2px solid var(--vca-coral);border-radius:var(--r-lg);
  padding:var(--s5) var(--s6);margin:0 0 var(--s5);box-shadow:var(--e2)}
.vca-pctnum{font-size:clamp(42px,5.6vw,58px);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--vca-coral-ink);white-space:nowrap}
.vca-pctband p{margin:0;font-size:17px;line-height:1.45;max-width:44ch}
.vca-pctband small{display:block;font-size:13px;color:var(--vca-grey);margin-top:var(--s1)}

/* --- Preisboxen ---------------------------------------------------------- */
.vca-prices{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  margin:0 0 var(--s5)}
.vca-pbox{position:relative;background:var(--vca-white);border:1px solid var(--vca-line);
  border-radius:var(--r-lg);box-shadow:var(--e2);padding:var(--s6)}
.vca-pbox--hi{border:2px solid var(--vca-coral);box-shadow:var(--e3)}
/* Kleine weiße Schrift braucht 4,5:1 — daher coral-ink (5,11:1) statt Marken-Coral. */
.vca-flag{position:absolute;top:-13px;left:var(--s6);background:var(--vca-coral-ink);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:6px var(--s3);border-radius:var(--r-sm)}
.vca-who{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vca-grey-soft);margin:0}
.vca-big{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1.05;
  margin:var(--s3) 0 var(--s1)}
.vca-per{font-size:14px;color:var(--vca-grey);margin:0;min-height:2.6em}
.vca-plist{list-style:none;margin:var(--s5) 0 0;padding:var(--s5) 0 0;
  border-top:1px solid var(--vca-line);font-size:15px;color:var(--vca-grey);
  display:grid;gap:var(--s3)}
.vca-plist li{position:relative;padding-left:20px}
.vca-plist li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:#D6D1C7}
.vca-pbox--hi .vca-plist li::before{background:var(--vca-lime)}

/* --- Ersparnis ----------------------------------------------------------- */
.vca-save{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  background:var(--vca-line);border:1px solid var(--vca-line);border-radius:var(--r-lg);
  overflow:hidden;margin:0 0 var(--s3)}
.vca-save>div{background:var(--vca-white);padding:var(--s5)}
.vca-save dt{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vca-grey-soft);margin:0 0 var(--s2)}
.vca-save dd{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.vca-save small{display:block;font-size:13.5px;font-weight:400;color:var(--vca-grey);
  margin-top:var(--s2);letter-spacing:0;line-height:1.45}
@media (max-width:720px){
  .vca-save{display:block;gap:0;background:var(--vca-white);border-radius:var(--r-lg);overflow:hidden}
  .vca-save>div{padding:var(--s3) var(--s5);border-bottom:1px solid var(--vca-line)}
  .vca-save>div:last-child{border-bottom:0}
  .vca-save dt{margin:0 0 var(--s1);font-size:11.5px}
  .vca-save dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;font-size:20px;line-height:1.25}
  .vca-save small{flex:1 0 100%;margin-top:var(--s1);font-size:12.5px}
}

/* --- Tabelle ------------------------------------------------------------- */
.vca-legend{display:flex;flex-wrap:wrap;gap:var(--s5);font-size:13.5px;color:var(--vca-grey);
  margin:0 0 var(--s4);max-width:none;list-style:none;padding:0}
.vca-legend li{display:inline-flex;align-items:center;gap:var(--s2)}
.vca-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.vca-dot--tp{background:var(--vca-lime)}
.vca-dot--vc{background:var(--vca-blue)}
.vca-tblwrap{border:1px solid var(--vca-line);border-radius:var(--r-lg);background:var(--vca-white);
  overflow:hidden;box-shadow:var(--e2)}
.vca-tbl{border-collapse:collapse;width:100%;font-size:15.5px}
.vca-tbl th,.vca-tbl td{text-align:left;padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--vca-line);vertical-align:top}
.vca-tbl thead th{background:var(--vca-soft);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--vca-grey-soft);font-weight:800;vertical-align:middle;
  position:sticky;top:0;z-index:1}
.vca-tbl tbody th{font-weight:800;width:25%}
.vca-tbl tbody tr{transition:background var(--dur) var(--ease)}
.vca-tbl tbody tr:hover{background:#FCFBF8}
.vca-tbl tr:last-child th,.vca-tbl tr:last-child td{border-bottom:0}
.vca-tbl td.vca-w-tp{background:var(--vca-lime-bg)}
.vca-tbl td.vca-w-vc{background:#F2F5FA}
.vca-tbl tbody tr:hover td.vca-w-tp{background:#EFF5E0}
.vca-tbl tbody tr:hover td.vca-w-vc{background:#EAEFF7}
.vca-brand{display:flex;align-items:center;gap:var(--s2);text-transform:none;letter-spacing:0}
.vca-brand img{display:block;height:22px;width:auto;max-width:120px}
.vca-brand--vc img{height:17px;opacity:.85}
.vca-rowh{display:flex;align-items:flex-start;gap:var(--s3)}
.vca-ico{flex:0 0 auto;width:19px;height:19px;margin-top:1px;color:var(--vca-grey-soft);
  stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vca-mark{position:relative;padding-left:22px;display:block}
.vca-mark::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%}
.vca-w-tp .vca-mark::before{background:var(--vca-lime)}
.vca-w-vc .vca-mark::before{background:var(--vca-blue)}

@media (max-width:720px){
  .vca-tblwrap{border:0;background:transparent;box-shadow:none;overflow:visible}
  .vca-tbl,.vca-tbl tbody,.vca-tbl tr,.vca-tbl th,.vca-tbl td{display:block;width:auto}
  .vca-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vca-tbl tr{background:var(--vca-white);border:1px solid var(--vca-line);border-radius:var(--r-md);
    margin:0 0 var(--s3);overflow:hidden;box-shadow:var(--e2)}
  .vca-tbl tbody th{width:auto;background:var(--vca-soft);font-size:13px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--vca-ink);padding:var(--s3) var(--s4);
    border-bottom:1px solid var(--vca-line)}
  .vca-tbl td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--vca-line)}
  .vca-tbl td::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:800;
    letter-spacing:.07em;text-transform:uppercase;color:var(--vca-grey-soft);margin:0 0 var(--s1)}
  .vca-tbl tr td:last-child{border-bottom:0}
  .vca-ico{width:17px;height:17px;color:var(--vca-grey)}
}

/* --- Prüffragen ---------------------------------------------------------- */
.vca-card{background:var(--vca-white);border:1px solid var(--vca-line);border-radius:var(--r-lg);
  padding:var(--s6);margin:0 0 var(--s4);box-shadow:var(--e2)}
.vca-card h3{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s3)}
.vca-card p{margin:0}
.vca-num{flex:0 0 auto;display:inline-grid;place-items:center;width:28px;height:28px;
  border-radius:var(--r-sm);background:var(--vca-coral);color:#fff;font-size:14px;font-weight:800}

/* --- Gutschein-Coupon ----------------------------------------------------
   Das Foto trägt den Betrag und das Wort "Gutschein" — deshalb steht beides
   nirgends sonst im Text. Vorher stand die 10 € doppelt da (Zahl + H2). */
.vca-voucher{background:var(--vca-white);border:1px solid var(--vca-line);
  border-radius:var(--r-lg);overflow:hidden;margin:var(--s8) 0 0;
  display:grid;grid-template-columns:1fr;box-shadow:var(--e2)}
/* Breakpoint bei 760px statt 900px: dazwischen wird das liegende Bildband
   sonst über 500px hoch und schiebt das Formular aus dem Bild. */
@media (min-width:760px){.vca-voucher{grid-template-columns:320px minmax(0,1fr)}}
/* Der Abstand steht hier statt beim Sektions-Rhythmus: die margin-Kurzschrift
   oben in dieser Regel steht später im Stylesheet und würde einen früheren
   Media-Query überschreiben. */
@media (max-width:760px){.vca-voucher{margin-top:var(--s7)}}
/* Die Hülle trägt den Grauton des Fotos. Nötig, weil das Bild sonst auf die
   Kartenhöhe gedehnt und seitlich beschnitten würde — bei 820px fiel damit
   das "n" von "Gutschein" weg. Jetzt bleibt das Bild quadratisch, unten
   bündig, und die Hülle füllt den Rest in derselben Farbe. */
.vca-vpic{background:#EDEFF2;display:flex;align-items:center;overflow:hidden}
/* Als Band von oben beschnitten: Zahl und Gesicht bleiben im Bild, die Beine
   fallen weg. max-height deckelt den Rest zwischen Handy und Breakpoint. */
.vca-vfoto{display:block;width:100%;height:auto;max-height:300px;object-fit:cover;
  object-position:50% 0;aspect-ratio:4/3}
@media (min-width:760px){.vca-vfoto{aspect-ratio:1/1;max-height:none;object-position:50% 50%}}
/* Perforation wie bei einem Gutschein: mobil quer, ab 900px längs. */
.vca-vbody{padding:var(--s5) var(--s6);position:relative}
.vca-vbody::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:repeating-linear-gradient(90deg,var(--vca-line) 0 8px,transparent 8px 16px)}
@media (min-width:760px){
  .vca-vbody{padding:var(--s6) var(--s7)}
  .vca-vbody::before{inset:0 auto 0 0;width:1px;height:auto;
    background:repeating-linear-gradient(180deg,var(--vca-line) 0 8px,transparent 8px 16px)}
}
.vca-voucher h2{color:var(--vca-ink);margin:0;font-size:clamp(20px,2.2vw,24px);
  line-height:1.25;letter-spacing:-.01em}
.vca-voucher p{color:var(--vca-grey);margin:var(--s2) 0 var(--s4);max-width:48ch;
  font-size:14.5px;line-height:1.5}
.vca-vform{display:grid;gap:var(--s2)}
/* display:grid schlägt sonst das hidden-Attribut aus dem HTML: nach dem
   Absenden blieben Eingabefeld und Button neben dem Code stehen. */
.vca-vform[hidden],.vca-vok[hidden]{display:none}
.vca-vrow{display:flex;flex-wrap:wrap;gap:var(--s3)}
.vca-vform label{font-size:14px;font-weight:700;color:var(--vca-ink)}
/* min-width:0 nötig — sonst erzwingt die Standardbreite des input-Elements
   (~20 Zeichen) einen Umbruch, obwohl rechnerisch Platz wäre. */
.vca-vform input[type=email]{flex:1 1 170px;min-width:0;min-height:52px;border-radius:var(--r-sm);
  border:2px solid var(--vca-line);background:var(--vca-soft);color:var(--vca-ink);padding:0 var(--s4);
  font:400 16px/1 "Avenir Next",Avenir,Arial,sans-serif;
  transition:border-color var(--dur) var(--ease)}
.vca-vform input[type=email]::placeholder{color:var(--vca-grey-soft)}
.vca-vform input[type=email]:focus{outline:none;border-color:var(--vca-coral)}
.vca-vform input[type=email]:focus-visible{outline:3px solid var(--vca-ink);outline-offset:2px}
.vca-vform input[type=email][aria-invalid="true"]{border-color:var(--vca-coral-ink)}
.vca-vhint{font-size:13px;color:var(--vca-grey-soft);margin:0}
.vca-vhint a{color:var(--vca-coral-ink)}
/* Höhere Spezifität nötig: .vca-vform label setzt sonst 700 durch. */
.vca-vform label.vca-vconsent{display:flex;gap:var(--s3);align-items:flex-start;font-size:13.5px;
  color:var(--vca-grey-soft);line-height:1.5;font-weight:400;cursor:pointer;margin-top:var(--s2)}
.vca-vconsent input{flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--vca-coral);cursor:pointer}
.vca-vconsent a{color:var(--vca-coral-ink)}
.vca-verror{font-size:13.5px;color:var(--vca-coral-ink);margin:0;min-height:0}
/* Erfolgszustand im Textfluss statt als eigener Kasten: der Code steht da,
   wo eben der Button war. Die Karte wächst dadurch nicht mehr — vorher zog
   der zentrierte Kasten sie um 195px auf und riss neben dem Bild eine
   graue Fläche auf. */
.vca-vok{background:transparent;border:0;padding:0;text-align:left}
.vca-vok p{color:var(--vca-grey);margin:0;max-width:46ch;font-size:14px;line-height:1.5}
.vca-vokline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:0 0 var(--s2)}
/* p-Selektoren nötig: .vca-vok p ist spezifischer und hat den Code sonst in
   Grau und 14px gerendert — auf dem Coral praktisch unlesbar. */
.vca-vok p.vca-voklbl{color:var(--vca-ink);font-weight:700;font-size:14.5px;max-width:none}
.vca-vok p.vca-vcode{display:inline-block;font-size:22px;font-weight:800;letter-spacing:.14em;
  color:#fff;background:var(--vca-coral);padding:var(--s2) var(--s4);border-radius:var(--r-sm);
  max-width:none;margin:0}

/* --- Mid-CTA und Final-CTA ---------------------------------------------- */
.vca-midcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s5);background:var(--vca-white);border:1px solid var(--vca-line);
  border-radius:var(--r-lg);padding:var(--s5) var(--s6);margin:var(--s6) 0 0;box-shadow:var(--e2)}
.vca-midcta p{margin:0;font-size:17px;font-weight:700;max-width:46ch}
.vca-midcta small{display:block;font-size:14px;font-weight:400;color:var(--vca-grey);margin-top:var(--s1)}
.vca-cta{background:var(--vca-ink);color:#fff;border-radius:var(--r-xl);
  padding:var(--s8) var(--s7);margin:var(--s9) 0 0;text-align:center}
.vca-cta h2{color:#fff;margin:0 auto var(--s3);max-width:20ch}
.vca-cta p{color:#C6C9CE;max-width:54ch;margin:0 auto var(--s6)}
.vca-cta .vca-btn--ghost{color:#fff!important;border-color:rgba(255,255,255,.4)}
.vca-cta .vca-btn--ghost:hover{background:#fff;border-color:#fff;color:var(--vca-ink)!important}
.vca-ctarow{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}
.vca-ctanote{font-size:13.5px;color:#9B9FA6;margin:var(--s5) auto 0}

/* --- FAQ ----------------------------------------------------------------- */
.vca-faq-item{background:var(--vca-white);border:1px solid var(--vca-line);
  border-radius:var(--r-md);margin:0 0 var(--s2);overflow:hidden;
  transition:border-color var(--dur) var(--ease)}
.vca-faq-item:hover{border-color:#D8D3C8}
.vca-faq-item summary{cursor:pointer;padding:var(--s4) 56px var(--s4) var(--s5);
  font-weight:700;font-size:17px;list-style:none;position:relative;min-height:56px;
  display:flex;align-items:center}
.vca-faq-item summary::-webkit-details-marker{display:none}
.vca-faq-item summary::after{content:"";position:absolute;right:var(--s5);top:50%;
  width:13px;height:2px;background:var(--vca-coral);transform:translateY(-50%)}
.vca-faq-item summary::before{content:"";position:absolute;right:calc(var(--s5) + 5px);top:50%;
  width:2px;height:13px;background:var(--vca-coral);transform:translateY(-50%);
  transition:transform var(--dur) var(--ease)}
.vca-faq-item[open] summary::before{transform:translateY(-50%) scaleY(0)}
.vca-faq-body{padding:0 var(--s5) var(--s5);color:var(--vca-grey);max-width:80ch}
.vca-faq-body p{margin:0}

/* --- Footer -------------------------------------------------------------- */
.vca-foot{color:var(--vca-grey);font-size:13.5px;line-height:1.65;
  padding:var(--s6) 0 var(--s8);border-top:1px solid var(--vca-line);margin-top:var(--s7)}
.vca-foot p{max-width:82ch}
.vca-foot a{color:var(--vca-grey)}

/* --- Sticky-Leiste mobil ------------------------------------------------- */
.vca-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;justify-content:space-between;gap:var(--s3);
  background:rgba(34,36,39,.97);backdrop-filter:blur(8px);
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform 250ms var(--ease)}
.vca-sticky.is-on{transform:translateY(0)}
.vca-sticky>div{min-width:0}
.vca-sticky b{color:#fff;font-size:15px;display:block;line-height:1.2;white-space:nowrap}
.vca-sticky>div>span{display:block;color:#B9BCC2;font-size:12.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vca-sticky .vca-btn{flex:0 0 auto;min-height:46px;padding:0 var(--s5);font-size:15px;white-space:nowrap}
@media (max-width:720px){
  .vca-sticky{display:flex}
  .vca-cta{padding:var(--s7) var(--s5);border-radius:var(--r-lg)}
  .vca-midcta{flex-direction:column;align-items:flex-start}
  .vca-foot{padding-bottom:110px}
  .vca-clients ul{gap:var(--s5)}
  .vca-clients img{height:24px}
}