/* ============================================================
   ACUREA V5 — Gestaltungsebene der Kampagnen-/Neuseiten
   Referenz: website/DESIGN.md · Plan: website/18_REDESIGN_PLAN.md
   Wird NUR auf Seiten mit der Vorlage „ACUREA V5" geladen, damit die
   Dossier-Fassung bis zum Rollout unberührt bleibt (Plan §6).
   ============================================================ */
.acurea-v5{
  --acc:#0E5F53; --acc-tief:#0A4A41; --acc-wash:#E8F1EF; --acc-hell:#4DB6A0;
  --ink:#18181B; --text:#52525B; --muted:#6E6E78;
  --hair:#E4E4E7; --hair-zart:#F4F4F5;
  --canvas:#FAFAFA; --surface:#FFFFFF;
  --st-kunde:#059669; --st-potenzial:#0284C7; --st-aktiv:#4F46E5;
  --st-signal:#D97706; --st-unbesucht:#7C3AED; --st-ueberfaellig:#E11D48;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-karte:12px; --r-knopf:8px;
  --sh-knopf:0 1px 2px rgba(24,24,27,.06);
  --sh-karte:0 4px 16px rgba(24,24,27,.06);
  --sh-gross:0 8px 32px rgba(24,24,27,.07);
  --breite:1200px; --breite-weit:1440px;
  --rand:clamp(20px,4vw,48px); --sektion:clamp(56px,7vw,88px);
  --modul:var(--acc);
}

/* ---------- Grundlagen (überschreibt die Dossier-Basis) ---------- */
.acurea-v5,.acurea-v5 body{background:var(--canvas)}
body.acurea-v5{color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;counter-reset:none}
.acurea-v5 h1,.acurea-v5 h2,.acurea-v5 h3{font-family:var(--sans);color:var(--ink);font-weight:600;
  letter-spacing:-.022em;margin:0 0 16px;text-wrap:balance}
.acurea-v5 h1{font-size:clamp(38px,4.6vw,58px);line-height:1.06;letter-spacing:-.028em}
.acurea-v5 h2{font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:-.024em}
.acurea-v5 h3{font-size:20px;line-height:1.3;letter-spacing:-.014em;margin-bottom:6px}
.acurea-v5 p{margin:0 0 16px;max-width:64ch}
.acurea-v5 a{color:var(--acc);text-underline-offset:.2em}
.acurea-v5 img{max-width:100%;height:auto;display:block}
.acurea-v5 strong{font-weight:600;color:var(--ink)}
.acurea-v5 :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.acurea-v5 .muted{color:var(--muted)}

/* ---------- Bausteine ---------- */
.acurea-v5 .beleg{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.04em;
  color:var(--muted);margin:10px 0 0;max-width:none}
.acurea-v5 .punkt{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.acurea-v5 .eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;max-width:none}
.acurea-v5 .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--modul);flex:none}

.acurea-v5 .knopf{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;
  border-radius:var(--r-knopf);font-family:var(--sans);font-size:15px;font-weight:500;text-decoration:none;
  cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
.acurea-v5 .knopf-voll{background:var(--acc);color:#fff;box-shadow:var(--sh-knopf)}
.acurea-v5 .knopf-voll:hover{background:var(--acc-tief);color:#fff}
.acurea-v5 .knopf-geist{background:transparent;color:var(--ink);border-color:var(--ink)}
.acurea-v5 .knopf-geist:hover{background:var(--ink);color:var(--canvas)}
.acurea-v5 .knopf-reihe{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}

.acurea-v5 .karte{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-karte);padding:24px}
.acurea-v5 .schuss{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-karte);
  box-shadow:var(--sh-gross);overflow:hidden;margin:0}
.acurea-v5 .schuss img{border-radius:calc(var(--r-karte) - 1px)}

/* ---------- Kopf- und Fußzeile ---------- */
.acurea-v5 .v5kopf{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--hair)}
.acurea-v5 .v5kopf-innen{max-width:var(--breite-weit);margin:0 auto;padding:13px var(--rand);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.acurea-v5 .v5marke{font-weight:700;font-size:17px;letter-spacing:.16em;color:var(--ink);text-decoration:none}
.acurea-v5 .v5menue{display:flex;align-items:center;gap:26px;margin:0}
.acurea-v5 .v5menue a{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.acurea-v5 .v5menue a:hover{color:var(--acc)}
.acurea-v5 .v5aktionen{display:flex;align-items:center;gap:14px}
.acurea-v5 .v5aktionen .knopf{height:40px;padding:0 18px}
@media (max-width:900px){.acurea-v5 .v5menue{display:none}}
.acurea-v5 .v5fuss{background:var(--ink);color:#A1A1AA;padding:32px var(--rand);font-size:13px}
.acurea-v5 .v5fuss-innen{max-width:var(--breite-weit);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:12px 28px;justify-content:space-between;align-items:center}
.acurea-v5 .v5fuss a{color:#D4D4D8;text-decoration:none}
.acurea-v5 .v5fuss a:hover{color:#fff}
.acurea-v5 .v5fuss .mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#A1A1AA}

/* ---------- Sektionen ---------- */
.acurea-v5 .sek{padding:var(--sektion) var(--rand)}
.acurea-v5 .innen{max-width:var(--breite);margin:0 auto}
.acurea-v5 .innen-weit{max-width:var(--breite-weit);margin:0 auto}
.acurea-v5 .zwei{display:grid;gap:clamp(32px,4.5vw,64px);align-items:center}
@media (min-width:1000px){
  .acurea-v5 .zwei{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .acurea-v5 .hero .zwei{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .acurea-v5 .zwei.text-rechts > .spalte-text{order:2}
}
.acurea-v5 .zwei > *{min-width:0}
.acurea-v5 .spalte-text > p{max-width:52ch}
.acurea-v5 .lede{font-size:20px;line-height:1.5;max-width:48ch}
.acurea-v5 .weiss{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}

/* ---------- Hero mit lebender Karte ---------- */
.acurea-v5 .hero{padding-top:clamp(40px,5vw,72px)}
.acurea-v5 .marke-pille{display:inline-flex;align-items:center;gap:9px;background:var(--acc-wash);color:var(--acc);
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;margin:0 0 22px}
.acurea-v5 .kartenfeld{max-width:480px;margin-left:auto;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-karte);box-shadow:var(--sh-gross);padding:18px 18px 14px}
.acurea-v5 .kartenfeld canvas{display:block;width:100%;height:auto}
.acurea-v5 .legende{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin:12px 0 0;
  padding-top:12px;border-top:1px solid var(--hair-zart);font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;color:var(--muted);max-width:none}
.acurea-v5 .legende span{display:inline-flex;align-items:center;gap:8px}
.acurea-v5 .kartenfeld .beleg{margin-top:8px}

/* ---------- Kennzahlen ---------- */
.acurea-v5 .zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:24px clamp(24px,3vw,48px)}
.acurea-v5 .zahl{font-size:clamp(26px,2.6vw,32px);font-weight:600;color:var(--ink);line-height:1.1;
  font-variant-numeric:tabular-nums;display:block;letter-spacing:-.02em}
.acurea-v5 .zahl-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:6px}

/* ---------- Merkmalsliste ---------- */
.acurea-v5 .merkmale{list-style:none;padding:0;margin:26px 0 0;max-width:52ch}
.acurea-v5 .merkmale li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:14px;margin:0 0 18px;align-items:start}
.acurea-v5 .merkmale li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--modul);margin-top:9px}
.acurea-v5 .merkmale b,.acurea-v5 .merkmale span{grid-column:2}
.acurea-v5 .merkmale b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.acurea-v5 .merkmale span{font-size:15px;color:var(--text)}

/* ---------- Modulraster: der Funktionsüberblick ---------- */
.acurea-v5 .modulraster{display:grid;gap:16px;margin-top:34px}
@media (min-width:760px){.acurea-v5 .modulraster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.acurea-v5 .modulraster{grid-template-columns:repeat(4,1fr)}}
.acurea-v5 .modul{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-karte);
  padding:20px;display:flex;flex-direction:column}
.acurea-v5 .modul .eyebrow{margin-bottom:10px}
.acurea-v5 .modul h3{font-size:18px;margin-bottom:8px}
.acurea-v5 .modul > p{font-size:15px;color:var(--text);margin:0 0 14px;max-width:none}
.acurea-v5 .modul ul{list-style:none;padding:0;margin:auto 0 0;border-top:1px solid var(--hair-zart)}
.acurea-v5 .modul li{font-size:14.5px;color:var(--text);padding:9px 0;border-bottom:1px solid var(--hair-zart)}
.acurea-v5 .modul li:last-child{border-bottom:0}
.acurea-v5 .modul .lizenz{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:12px 0 0;max-width:none}

/* ---------- Funktionsraster der Produktseite ---------- */
.acurea-v5 .funktionen{display:grid;gap:clamp(22px,2.6vw,38px);margin-top:34px}
@media (min-width:860px){.acurea-v5 .funktionen{grid-template-columns:repeat(2,1fr)}}
.acurea-v5 .funktion{border-top:1px solid var(--hair);padding-top:16px}
.acurea-v5 .funktion h3{font-size:17px;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.acurea-v5 .funktion h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--modul);flex:none}
.acurea-v5 .funktion p{font-size:15px;margin:0;max-width:42ch}

/* ---------- Dunkles Band ---------- */
.acurea-v5 .band{background:var(--ink);color:#D4D4D8}
.acurea-v5 .band h2{color:#FAFAFA;max-width:20ch}
.acurea-v5 .band h3{color:#FAFAFA;font-size:17px}
.acurea-v5 .band p{color:#A1A1AA}
.acurea-v5 .band .eyebrow{color:#A1A1AA}
.acurea-v5 .band .eyebrow::before{background:var(--acc-hell)}
.acurea-v5 .band a{color:var(--acc-hell)}
.acurea-v5 .drei{display:grid;gap:clamp(24px,3vw,44px);margin-top:40px}
@media (min-width:820px){.acurea-v5 .drei{grid-template-columns:repeat(3,1fr)}}
.acurea-v5 .drei > div{border-top:1px solid #3F3F46;padding-top:16px}
.acurea-v5 .drei p{margin:0;font-size:15px;max-width:34ch}

/* ---------- Rückfragen ---------- */
.acurea-v5 .fragen{max-width:820px;margin-top:24px}
.acurea-v5 .fragen details{border-top:1px solid var(--hair);padding:15px 0}
.acurea-v5 .fragen details:last-of-type{border-bottom:1px solid var(--hair)}
.acurea-v5 .fragen summary{font-weight:600;color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.acurea-v5 .fragen summary::-webkit-details-marker{display:none}
.acurea-v5 .fragen summary::after{content:"+";font-family:var(--mono);color:var(--modul);flex:none}
.acurea-v5 .fragen details[open] summary::after{content:"–"}
.acurea-v5 .fragen p{margin:10px 0 0}

/* ---------- Abschluss ---------- */
.acurea-v5 .abschluss{text-align:center;background:var(--surface);border-top:1px solid var(--hair)}
.acurea-v5 .abschluss p{margin-left:auto;margin-right:auto}
.acurea-v5 .abschluss .knopf-reihe{justify-content:center}

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

/* ============================================================
   V5 — Nebenseiten: Formular, Danke, Rechtstexte
   Ab der Umschaltung tragen auch /demo/, /markt-check/, die
   Danke-Seiten und die Rechtstexte die V5-Vorlage. Die Dossier-
   Klassen in ihrem Inhalt werden hier neutralisiert, damit kein
   halber Satzspiegel aus der alten Fassung durchschlägt.
   ============================================================ */
.acurea-v5 .acurea-section{padding:var(--sektion) var(--rand);max-width:none}
.acurea-v5 .acurea-section > *{max-width:var(--breite);margin-left:auto;margin-right:auto}
.acurea-v5 .acurea-lesen{display:block}
.acurea-v5 .acurea-lesen > *{grid-column:auto;max-width:var(--breite) !important;margin-left:auto !important;margin-right:auto !important}
.acurea-v5 .acurea-rand{display:none}
.acurea-v5 .acurea-lede{font-size:20px;line-height:1.5;max-width:48ch}
.acurea-v5 ul.acurea-feat{list-style:none;padding:0;margin:24px 0}
.acurea-v5 ul.acurea-feat li{border-top:1px solid var(--hair);padding:13px 0 13px 30px;position:relative}
.acurea-v5 ul.acurea-feat li:last-child{border-bottom:1px solid var(--hair)}
.acurea-v5 ul.acurea-feat li::before{content:"";position:absolute;left:2px;top:22px;width:8px;height:8px;
  border-radius:50%;background:var(--modul)}

/* Formblatt in der V5-Sprache — dieselbe Form wie auf den Kampagnenseiten,
   nur mit den zinc-Tokens und den V5-Radien. */
.acurea-v5 .formblatt{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-karte);
  box-shadow:var(--sh-gross);max-width:520px}
.acurea-v5 .fb-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;
  padding:14px 22px 13px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);max-width:none}
.acurea-v5 .fb-kopf b{color:var(--ink);font-weight:500}
.acurea-v5 .fb-koerper{padding:22px}
.acurea-v5 .fb-fuss{margin:0;padding:13px 22px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;
  gap:6px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--muted);max-width:none}
.acurea-v5 .acurea-form,.acurea-v5 .acurea-form-formblatt{max-width:none}
.acurea-v5 .acurea-form label{color:var(--muted);font-family:var(--mono)}
.acurea-v5 .acurea-form input[type=text],.acurea-v5 .acurea-form input[type=email],
.acurea-v5 .acurea-form select,.acurea-v5 .acurea-form textarea{
  border-bottom:1px solid var(--hair);color:var(--ink);background:transparent}
.acurea-v5 .acurea-form input:focus,.acurea-v5 .acurea-form select:focus,.acurea-v5 .acurea-form textarea:focus{
  border-bottom:1.6px solid var(--acc);box-shadow:none;background:color-mix(in srgb,var(--acc) 4%,transparent)}
.acurea-v5 .acurea-form button[type=submit]{background:var(--acc);color:#fff;border:0;border-radius:var(--r-knopf);
  height:52px;width:100%;font-family:var(--sans);font-size:16px;font-weight:500;cursor:pointer;margin-top:22px}
.acurea-v5 .acurea-form button[type=submit]:hover{background:var(--acc-tief)}
.acurea-v5 .acurea-form-hinweis{font-size:12.5px;color:var(--muted);margin-top:14px;max-width:none}
/* Fehler- und Hinweiskasten: feste Werte statt color-mix — der berechnete
   Wert kommt sonst als color(srgb …) heraus, was jedes Kontrast-Werkzeug
   (und meine eigene Prüfung) falsch liest. 7,4:1 auf dem hellen Grund. */
.acurea-v5 .acurea-form-fehler{background:#FEF2F4;border:1px solid #F6C9D2;color:#9F1239;
  border-radius:var(--r-knopf);padding:12px 15px;font-size:15px;margin:0 0 8px;max-width:none}
.acurea-v5 .acurea-form-fehler strong{color:#9F1239}
.acurea-v5 .acurea-form .pflicht{color:var(--modul)}
.acurea-v5 .acurea-fieldset legend{font-family:var(--mono);color:var(--muted)}
.acurea-v5 .acurea-check{color:var(--ink)}
.acurea-v5 .acurea-check input{accent-color:var(--acc)}