/* ═══════════════════════════════════════════════════════════════════════════
   Anirova — Fundament für den verkaufspsychologischen Umbau (2026-09-27)

   Wird auf allen Seiten mit Kopf/Fuß ZULETZT geladen (nach styles.css und den
   district-*.css). Namensraum: --vk-* und .vk-*. Bestandsklassen bleiben
   unangetastet, außer Kopf (.nav) und Fuß (.footer), die hier ihre
   gemeinsame Optik bekommen.

   Formate (vier Zielbreiten, je eine Stufe):
     Handy          Basis        (390)
     Tablet         ≥ 600 px     (820)
     Tablet quer    ≥ 960 px     (1024)   — Kopf zeigt hier noch den Burger
     Desktop        ≥ 1280 px    (1440)   — Kopf als waagerechte Leiste

   Bausteine (Markup-Muster, Inhalte immer ECHT — keine erfundenen Zahlen):

   1) Abschnitt + Kopfzeile
      <section class="vk-abschnitt [vk-abschnitt--band]">
        <div class="vk-wrap">
          <header class="vk-kopf [vk-kopf--links]">
            <p class="vk-kicker">Kennst du das?</p>
            <h2 class="vk-titel">Nie wieder <em>vergessen</em>, wo du warst.</h2>
            <p class="vk-lead">Ein Satz Nutzen in Kundensprache.</p>
          </header> …

   2) Hero (ein klarer nächster Schritt: die Stores)
      <section class="vk-hero"><div class="vk-wrap vk-hero__raster">
        <div class="vk-hero__text">
          <p class="vk-kicker">…</p>
          <h1 class="vk-hero__titel">… <em>…</em></h1>
          <p class="vk-hero__lead">…</p>
          <div class="vk-hero__aktion">
            <div class="vk-stores"> 2× .vk-store (siehe 7) </div>
            <ul class="vk-hinweise"><li>Basis kostenlos</li>…</ul>
          </div>
        </div>
        <div class="vk-hero__bild">
          <figure class="vk-screen"><img src="/assets/app-screens/home.webp" width="621" height="1344" alt="…"></figure>
          <figure class="vk-screen"><img src="/assets/app-screens/matching.webp" …></figure>
        </div>
      </div></section>

   3) Nutzen-Karten
      <div class="vk-nutzen [vk-nutzen--vier]">
        <article class="vk-karte">
          <span class="vk-karte__icon"><svg …/></span>
          <p class="vk-karte__problem">Problem in einem Satz (optional)</p>
          <h3>Nutzen als Überschrift</h3>
          <p>Wie Anirova das löst.</p>
        </article> …

   4) Beweis (echte Screens aus assets/app-screens/)
      <div class="vk-beweis">
        <div class="vk-beweis__text"> .vk-kopf.vk-kopf--links + <ul class="vk-haken"> </div>
        <div class="vk-beweis__screens">
          <figure class="vk-screen"><img …><figcaption><strong>Titel</strong>Ein Satz</figcaption></figure> ×2–3
        </div>
      </div>

   5) Einwand-FAQ (native <details>, geht ohne JavaScript)
      <div class="vk-faq">
        <header class="vk-kopf vk-kopf--links">…</header>
        <div class="vk-faq__liste">
          <details class="vk-frage"><summary>Kostet das etwas?</summary>
            <div class="vk-frage__antwort"><p>…</p></div></details> …

   6) Abschluss-CTA
      <div class="vk-abschluss">
        <div class="vk-abschluss__text"><h2 class="vk-titel">…</h2><p class="vk-lead">…</p></div>
        <div class="vk-abschluss__aktion"><div class="vk-stores vk-stores--gross">…</div>
          <ul class="vk-hinweise">…</ul></div>
      </div>

   7) Store-Knöpfe (immer BEIDE, offizielle Texte, kein fremd gehostetes Bild;
      das fertige Markup mit Icons steht in index.html im Kopf unter .vk-laden)
      <a class="vk-store" href="https://play.google.com/store/apps/details?id=com.anirova"
         target="_blank" rel="noopener" data-play-android>…<span class="vk-store__text">
         <small>Jetzt bei</small><strong>Google Play</strong></span></a>
      <a class="vk-store" href="https://apps.apple.com/de/app/anirova/id6781657406"
         target="_blank" rel="noopener" data-appstore>…<span class="vk-store__text">
         <small>Laden im</small><strong>App Store</strong></span></a>

   Knöpfe: .vk-btn.vk-btn--primaer / .vk-btn--sekundaer, Textlink: .vk-textlink
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Farben — aus dem Bestand (styles.css / district-tokens.css) abgeleitet */
  --vk-bg: #050d1f;
  --vk-bg-2: #0a1426;
  --vk-flaeche: rgb(13 26 38 / .72);
  --vk-flaeche-hoch: #101d30;
  --vk-linie: rgb(0 179 255 / .24);
  --vk-linie-hell: rgb(0 230 255 / .5);
  --vk-linie-weich: rgb(255 255 255 / .09);
  --vk-text: #f5faff;        /* 18,6:1 auf --vk-bg */
  --vk-text-2: #c2d4e8;      /* 12,6:1 */
  --vk-text-3: #9bb4cc;      /*  8,6:1 — kleinste erlaubte Textfarbe */
  --vk-akzent: #00b3ff;
  --vk-akzent-hell: #00e6ff;
  --vk-magenta: #d27bff;
  --vk-gruen: #3ddc84;
  --vk-auf-akzent: #02101b;  /* Text auf Cyan: 8,9:1 */
  --vk-verlauf: linear-gradient(100deg, #00e6ff 0%, #7cc4ff 48%, #d27bff 100%);
  --vk-verlauf-knopf: linear-gradient(135deg, #00e6ff 0%, #00b3ff 100%);

  /* Tiefe */
  --vk-schatten: 0 28px 70px -28px rgb(0 0 0 / .75);
  --vk-glow: 0 0 0 1px rgb(0 230 255 / .22), 0 18px 50px -18px rgb(0 179 255 / .55);

  /* Radien */
  --vk-r-s: 10px;
  --vk-r-m: 16px;
  --vk-r-l: 22px;
  --vk-r-xl: 32px;

  /* Abstände — 4/8er-Skala */
  --vk-s-1: 4px;
  --vk-s-2: 8px;
  --vk-s-3: 12px;
  --vk-s-4: 16px;
  --vk-s-5: 24px;
  --vk-s-6: 32px;
  --vk-s-7: 48px;
  --vk-s-8: 64px;
  --vk-s-9: 96px;

  /* Layout je Format (unten pro Stufe überschrieben) */
  --vk-rand: 20px;
  --vk-breite: 1200px;
  --vk-abschnitt: 72px;
  --vk-kopf-hoehe: 76px;     /* Platz unter dem fixierten Kopf */

  /* Typografie */
  --vk-schrift: "Inter Tight", -apple-system, system-ui, sans-serif;
  --vk-serif: "Instrument Serif", Georgia, serif;
  --vk-mono: "JetBrains Mono", ui-monospace, monospace;
  --vk-fs-display: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);   /* 36 → 72 */
  --vk-fs-h2: clamp(1.75rem, 1.2rem + 2.1vw, 3.125rem);      /* 28 → 50 */
  --vk-fs-h3: clamp(1.125rem, 1.02rem + .35vw, 1.375rem);    /* 18 → 22 */
  --vk-fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);      /* 17 → 20 */
  --vk-fs-text: 1rem;
  --vk-fs-klein: .875rem;
  --vk-fs-kicker: .75rem;
}
@media (min-width: 600px) {
  :root { --vk-rand: 32px; --vk-abschnitt: 96px; --vk-kopf-hoehe: 84px; }
}
@media (min-width: 960px) {
  :root { --vk-rand: 40px; --vk-abschnitt: 112px; }
}
@media (min-width: 1280px) {
  :root { --vk-rand: 56px; --vk-abschnitt: 136px; --vk-kopf-hoehe: 96px; }
}

/* ─── Grundgerüst ────────────────────────────────────────────────────────── */
.vk-abschnitt {
  position: relative;
  padding-block: var(--vk-abschnitt);
}
.vk-abschnitt--eng { padding-block: calc(var(--vk-abschnitt) * .6); }
.vk-abschnitt--band {
  background:
    linear-gradient(180deg, transparent 0, rgb(10 20 38 / .72) 14%, rgb(10 20 38 / .72) 86%, transparent 100%);
}
.vk-wrap {
  width: min(100% - 2 * var(--vk-rand), var(--vk-breite));
  margin-inline: auto;
}

/* ─── Kopfzeile eines Abschnitts ─────────────────────────────────────────── */
.vk-kopf {
  max-width: 760px;
  margin: 0 auto var(--vk-s-7);
  text-align: center;
}
.vk-kopf--links { margin-left: 0; text-align: left; }
.vk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 700 var(--vk-fs-kicker)/1.4 var(--vk-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vk-akzent-hell);
}
.vk-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}
.vk-titel {
  margin: 14px 0 0;
  font: 800 var(--vk-fs-h2)/1.08 var(--vk-schrift);
  letter-spacing: -.03em;
  color: var(--vk-text);
  text-wrap: balance;
}
.vk-kopf > .vk-titel:first-child { margin-top: 0; }
.vk-titel em,
.vk-hero__titel em,
.vk-hervor {
  font-family: var(--vk-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  padding-right: .04em;
  background: var(--vk-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vk-lead {
  margin: 16px 0 0;
  font-size: var(--vk-fs-lead);
  line-height: 1.55;
  color: var(--vk-text-2);
  text-wrap: pretty;
}
.vk-kopf--links .vk-lead { max-width: 36em; }

/* ─── Knöpfe und Links ───────────────────────────────────────────────────── */
.vk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 700 1rem/1.2 var(--vk-schrift);
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s, background-color .2s, border-color .2s;
}
.vk-btn--primaer {
  background: var(--vk-verlauf-knopf);
  color: var(--vk-auf-akzent);
  box-shadow: var(--vk-glow);
}
.vk-btn--primaer:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(0 230 255 / .4), 0 22px 60px -18px rgb(0 179 255 / .75); }
.vk-btn--sekundaer {
  background: rgb(255 255 255 / .03);
  color: var(--vk-text);
  border-color: var(--vk-linie-hell);
}
.vk-btn--sekundaer:hover { background: rgb(0 179 255 / .1); }
.vk-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--vk-akzent-hell);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 0;
}
.vk-textlink::after { content: "→"; transition: transform .2s; }
.vk-textlink:hover::after { transform: translateX(3px); }

.vk-btn:focus-visible,
.vk-store:focus-visible,
.vk-textlink:focus-visible,
.vk-frage > summary:focus-visible,
.vk-laden__knopf:focus-visible,
.footer-col > summary:focus-visible {
  outline: 3px solid var(--vk-akzent-hell);
  outline-offset: 3px;
}

/* ─── Store-Knöpfe ───────────────────────────────────────────────────────── */
.vk-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 420px;
}
/* Handy: beide nebeneinander, wenn sie passen — sonst untereinander, nie abgeschnitten */
.vk-stores > .vk-store { flex: 1 1 auto; justify-content: center; }
.vk-store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 8px 18px 8px 14px;
  border-radius: 12px;
  background: #000;
  border: 1px solid rgb(255 255 255 / .34);
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .2s;
}
.vk-store:hover {
  transform: translateY(-2px);
  border-color: var(--vk-akzent-hell);
  box-shadow: 0 14px 34px -14px rgb(0 179 255 / .6);
}
.vk-store__icon { width: 24px; height: 24px; flex: none; }
.vk-store__text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.vk-store__text small { font-size: .6875rem; font-weight: 500; letter-spacing: .02em; color: #fff; }
.vk-store__text strong { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
@media (max-width: 599px) {
  .vk-store { padding: 8px 14px 8px 12px; gap: 10px; }
  .vk-store__text strong { font-size: 1.0625rem; }
}
.vk-stores--gross .vk-store { min-height: 60px; }
@media (min-width: 600px) {
  .vk-stores { max-width: none; }
  .vk-stores > .vk-store { flex: 0 0 auto; justify-content: flex-start; }
  .vk-stores--gross .vk-store__icon { width: 28px; height: 28px; }
  .vk-stores--gross .vk-store__text strong { font-size: 1.25rem; }
}

/* Kleine, belegbare Beruhigungen unter einem Aufruf („Basis kostenlos“) */
.vk-hinweise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--vk-fs-klein);
  color: var(--vk-text-3);
}
.vk-hinweise li { display: inline-flex; align-items: center; gap: 7px; }
.vk-hinweise li::before,
.vk-haken li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.6l4.5-5' fill='none' stroke='%2302101b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--vk-gruen);
}

/* Häkchen-Liste für Beweise */
.vk-haken {
  display: grid;
  gap: 12px;
  margin: var(--vk-s-5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--vk-text-2);
  line-height: 1.5;
}
.vk-haken li { display: flex; gap: 12px; align-items: flex-start; }
.vk-haken li::before { margin-top: 3px; }
.vk-haken strong { color: var(--vk-text); }

/* ─── Echte App-Screens ──────────────────────────────────────────────────── */
.vk-screen { margin: 0; position: relative; }
.vk-screen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 621 / 1344;
  object-fit: cover;
  border-radius: clamp(18px, 3.2vw, 30px);
  border: 1px solid var(--vk-linie-hell);
  background: #000;
  box-shadow: var(--vk-schatten), 0 0 60px -18px rgb(0 179 255 / .45);
}
.vk-screen figcaption {
  margin-top: 14px;
  font-size: var(--vk-fs-klein);
  line-height: 1.5;
  color: var(--vk-text-2);
  text-align: center;
}
.vk-screen figcaption strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1rem;
  color: var(--vk-text);
}

/* ─── 2) Hero ────────────────────────────────────────────────────────────── */
.vk-hero {
  position: relative;
  padding: calc(var(--vk-kopf-hoehe) + var(--vk-s-6)) 0 var(--vk-abschnitt);
  overflow-x: clip;
  isolation: isolate;
}
.vk-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% -10% auto auto;
  width: min(760px, 90vw);
  aspect-ratio: 1;
  background:
    radial-gradient(closest-side, rgb(0 179 255 / .22), transparent 70%),
    radial-gradient(closest-side at 70% 60%, rgb(210 123 255 / .16), transparent 70%);
  pointer-events: none;
}
.vk-hero__raster {
  display: grid;
  gap: var(--vk-s-7);
  align-items: center;
}
.vk-hero__titel {
  margin: 14px 0 0;
  font: 800 var(--vk-fs-display)/1.02 var(--vk-schrift);
  letter-spacing: -.035em;
  color: var(--vk-text);
  text-wrap: balance;
}
.vk-hero__text > .vk-hero__titel:first-child { margin-top: 0; }
.vk-hero__lead {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: var(--vk-fs-lead);
  line-height: 1.55;
  color: var(--vk-text-2);
  text-wrap: pretty;
}
.vk-hero__aktion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: var(--vk-s-6);
}
.vk-hero__bild {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 420px);
  margin-inline: auto;
}
.vk-hero__bild > .vk-screen:nth-child(2) { margin-top: 44px; }
.vk-hero__bild > .vk-screen:only-child { grid-column: 1 / -1; width: 72%; justify-self: center; }

@media (min-width: 600px) {
  .vk-hero__text { max-width: 640px; }
  .vk-hero__bild { width: min(100%, 480px); gap: 20px; }
  .vk-hero__bild > .vk-screen:nth-child(2) { margin-top: 64px; }
}
@media (min-width: 960px) {
  .vk-hero { min-height: min(100svh, 900px); display: flex; align-items: center; }
  .vk-hero > .vk-wrap { width: min(100% - 2 * var(--vk-rand), var(--vk-breite)); }
  .vk-hero__raster { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--vk-s-7); }
  .vk-hero__bild { width: 100%; }
}
@media (min-width: 1280px) {
  .vk-hero__raster { gap: 88px; }
  .vk-hero__bild { gap: 24px; }
  .vk-hero__bild > .vk-screen:nth-child(2) { margin-top: 88px; }
}

/* ─── 3) Nutzen-Karten ───────────────────────────────────────────────────── */
.vk-nutzen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.vk-karte {
  position: relative;
  padding: 24px;
  border-radius: var(--vk-r-l);
  background: linear-gradient(180deg, rgb(20 31 46 / .82), rgb(10 20 38 / .82));
  border: 1px solid var(--vk-linie-weich);
  overflow: hidden;
  transition: border-color .25s, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.vk-karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(0 230 255 / .55), transparent);
}
.vk-karte:hover { border-color: var(--vk-linie); transform: translateY(-3px); }
.vk-karte__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgb(0 179 255 / .12);
  border: 1px solid var(--vk-linie);
  color: var(--vk-akzent-hell);
}
.vk-karte__icon svg { width: 24px; height: 24px; }
.vk-karte__problem {
  margin: 18px 0 0;
  font-size: var(--vk-fs-klein);
  font-style: italic;
  color: var(--vk-text-3);
}
.vk-karte h3 {
  margin: 18px 0 8px;
  font: 700 var(--vk-fs-h3)/1.25 var(--vk-schrift);
  letter-spacing: -.015em;
  color: var(--vk-text);
}
.vk-karte__problem + h3 { margin-top: 6px; }
.vk-karte p:not(.vk-karte__problem) {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--vk-text-2);
}
.vk-karte--bild { display: flex; flex-direction: column; }
.vk-karte--bild .vk-screen { margin-top: 20px; width: 70%; align-self: center; }

@media (min-width: 600px) {
  .vk-nutzen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .vk-karte { padding: 28px; }
  /* ungerade Anzahl: letzte Karte über die volle Breite statt Waise */
  .vk-nutzen:not(.vk-nutzen--vier) > .vk-karte:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  /* 6er-Raster, je Karte 2 Spalten = drei pro Reihe. Rest-Reihen ohne Lücke:
     1 übrige Karte → volle Breite, 2 übrige → je halbe Breite. */
  .vk-nutzen:not(.vk-nutzen--vier) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vk-nutzen:not(.vk-nutzen--vier) > .vk-karte,
  .vk-nutzen:not(.vk-nutzen--vier) > .vk-karte:last-child:nth-child(odd) { grid-column: span 2; }
  .vk-nutzen:not(.vk-nutzen--vier) > .vk-karte:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .vk-nutzen:not(.vk-nutzen--vier) > .vk-karte:last-child:nth-child(3n+2),
  .vk-nutzen:not(.vk-nutzen--vier) > .vk-karte:nth-last-child(2):nth-child(3n+1) { grid-column: span 3; }
}
@media (min-width: 1280px) {
  .vk-nutzen { gap: 20px; }
  .vk-nutzen--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vk-karte { padding: 32px; }
}

/* ─── 4) Beweis ──────────────────────────────────────────────────────────── */
.vk-beweis {
  display: grid;
  gap: var(--vk-s-7);
  align-items: center;
}
.vk-beweis__text .vk-kopf { margin-bottom: 0; }
.vk-beweis__aktion { margin-top: var(--vk-s-5); }
.vk-beweis__screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
}
/* drei Screens auf dem Handy: der dritte mittig darunter statt Waise links */
.vk-beweis__screens > .vk-screen:nth-child(3):last-child {
  grid-column: 1 / -1;
  width: calc(50% - 7px);
  justify-self: center;
}
@media (min-width: 600px) {
  .vk-beweis__screens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .vk-beweis__screens > .vk-screen:nth-child(3):last-child { grid-column: auto; width: auto; }
  .vk-beweis__screens > .vk-screen:nth-child(3n+2) { transform: translateY(28px); }
  .vk-beweis__screens { padding-bottom: 28px; }
}
@media (min-width: 960px) {
  .vk-beweis { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--vk-s-7); }
  .vk-beweis--rechts .vk-beweis__text { order: 2; }
}
@media (min-width: 1280px) {
  .vk-beweis { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 80px; }
  .vk-beweis__screens { gap: 28px; }
}

/* ─── 5) Einwand-FAQ ─────────────────────────────────────────────────────── */
.vk-faq {
  display: grid;
  gap: var(--vk-s-6);
}
.vk-faq .vk-kopf { margin-bottom: 0; }
.vk-faq__liste { display: flex; flex-direction: column; gap: 10px; }
.vk-frage {
  border: 1px solid var(--vk-linie-weich);
  border-radius: var(--vk-r-m);
  background: rgb(13 26 38 / .62);
  transition: border-color .2s, background-color .2s;
}
.vk-frage[open] { border-color: var(--vk-linie); background: rgb(16 29 48 / .85); }
.vk-frage > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 18px 14px 20px;
  list-style: none;
  cursor: pointer;
  font: 700 1.0625rem/1.35 var(--vk-schrift);
  color: var(--vk-text);
  border-radius: inherit;
}
.vk-frage > summary::-webkit-details-marker { display: none; }
.vk-frage > summary::marker { content: ""; }
.vk-frage > summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--vk-linie);
  background:
    linear-gradient(var(--vk-akzent-hell), var(--vk-akzent-hell)) center / 11px 2px no-repeat,
    linear-gradient(var(--vk-akzent-hell), var(--vk-akzent-hell)) center / 2px 11px no-repeat;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.vk-frage[open] > summary::after { transform: rotate(45deg); }
.vk-frage__antwort {
  padding: 0 20px 20px;
  color: var(--vk-text-2);
  line-height: 1.65;
}
.vk-frage__antwort > :first-child { margin-top: 0; }
.vk-frage__antwort > :last-child { margin-bottom: 0; }
.vk-frage__antwort a { color: var(--vk-akzent-hell); }
@media (min-width: 960px) {
  .vk-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--vk-s-8); align-items: start; }
  .vk-faq > .vk-kopf { position: sticky; top: calc(var(--vk-kopf-hoehe) + 16px); }
}
@media (min-width: 1280px) {
  .vk-faq { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 96px; }
  .vk-frage > summary { padding: 18px 22px 18px 26px; }
  .vk-frage__antwort { padding: 0 26px 24px; }
}

/* ─── 6) Abschluss-CTA ───────────────────────────────────────────────────── */
.vk-abschluss {
  position: relative;
  display: grid;
  gap: var(--vk-s-5);
  padding: 40px 22px;
  border-radius: var(--vk-r-xl);
  text-align: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgb(0 179 255 / .2), transparent 60%),
    radial-gradient(80% 90% at 100% 100%, rgb(210 123 255 / .14), transparent 60%),
    linear-gradient(180deg, #0d1a2e, #081223);
  border: 1px solid var(--vk-linie);
  box-shadow: var(--vk-schatten);
  overflow: hidden;
  isolation: isolate;
}
.vk-abschluss .vk-titel { margin-top: 0; }
.vk-abschluss .vk-lead { margin-inline: auto; max-width: 34em; }
.vk-abschluss__aktion { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vk-abschluss .vk-stores { margin-inline: auto; width: 100%; }
.vk-abschluss .vk-hinweise { justify-content: center; }
@media (min-width: 600px) {
  .vk-abschluss { padding: 56px 48px; }
  .vk-abschluss .vk-stores { justify-content: center; width: auto; }
}
@media (min-width: 960px) {
  .vk-abschluss {
    grid-template-columns: minmax(0, 1.2fr) auto;
    align-items: center;
    gap: var(--vk-s-7);
    padding: 64px 56px;
    text-align: left;
  }
  .vk-abschluss .vk-lead { margin-inline: 0; }
  .vk-abschluss__aktion { align-items: flex-start; }
  .vk-abschluss .vk-stores { flex-direction: column; margin-inline: 0; }
  .vk-abschluss .vk-hinweise { justify-content: flex-start; flex-direction: column; }
}
@media (min-width: 1280px) {
  .vk-abschluss { padding: 80px 72px; gap: 80px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOPF — gemeinsame Navigation
   Burger bis 1279 px (styles.css + app.js haben dieselbe Grenze),
   waagerechte Leiste ab 1280 px. Rechts sitzt „App laden“ (details.vk-laden)
   mit beiden Stores.
   ═══════════════════════════════════════════════════════════════════════════ */
.vk-laden { position: static; order: 3; flex: none; }
.vk-laden__knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  background: var(--vk-verlauf-knopf);
  color: var(--vk-auf-akzent);
  font: 800 .875rem/1 var(--vk-schrift);
  letter-spacing: -.005em;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgb(0 179 255 / .8);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s;
}
.vk-laden__knopf::-webkit-details-marker { display: none; }
.vk-laden__knopf::marker { content: ""; }
.vk-laden__knopf:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgb(0 179 255 / .95); }
.vk-laden[open] > .vk-laden__knopf { box-shadow: 0 0 0 2px rgb(0 230 255 / .45); }
.vk-laden__panel {
  position: absolute;
  z-index: 3;
  top: calc(100% + 10px);
  left: 8px;
  right: 8px;
  padding: 18px;
  border-radius: 18px;
  background: #0a1426;
  border: 1px solid var(--vk-linie);
  box-shadow: 0 30px 80px rgb(0 0 0 / .6);
  text-align: left;
}
/* Geschlossen gar nicht erst layouten (Chrome legt Boxen im zugeklappten
   details sonst trotzdem an; sie ragten am Handy messbar über den Rand). */
.vk-laden:not([open]) > .vk-laden__panel { display: none; }
.vk-laden__titel {
  margin: 0 0 12px;
  font: 700 .9375rem/1.3 var(--vk-schrift);
  color: var(--vk-text);
}
.vk-laden__panel .vk-stores { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: none; }
.vk-laden__panel .vk-store { width: 100%; }
@media (min-width: 600px) {
  .vk-laden__panel { left: auto; width: 360px; }
}
@media (min-width: 1280px) {
  .vk-laden { margin-left: 6px; }
  .vk-laden__panel { right: 0; }
}

/* Merch — zweiter Schwerpunkt, darum eigener, immer sichtbarer Knopf neben
   „App laden“ (sekundär: Umriss statt Füllung, damit der Download führt).
   Reihenfolge rechts: [Korb] [Merch] [App laden] [Burger]. */
.vk-merch {
  order: 2;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  border: 1px solid rgb(210 123 255 / .6);
  background: rgb(210 123 255 / .1);
  color: var(--vk-text) !important;
  font: 700 .875rem/1 var(--vk-schrift);
  white-space: nowrap;
  text-decoration: none !important;
  transition: background-color .2s, border-color .2s, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.vk-merch__icon { color: var(--vk-magenta); flex: none; }
.vk-merch:hover { background: rgb(210 123 255 / .2); border-color: var(--vk-magenta); transform: translateY(-1px); }
.vk-merch[aria-current="page"] { background: rgb(210 123 255 / .24); border-color: var(--vk-magenta); }
.vk-merch:focus-visible { outline: 3px solid var(--vk-akzent-hell); outline-offset: 3px; }
.nav .nav-korb { order: 1; min-height: 44px; }
/* Handy: nur das Symbol (44 × 44), Text bleibt für Screenreader */
@media (max-width: 479px) {
  .vk-merch { width: 44px; padding: 0; }
  .vk-merch__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
/* Ab 480 px steht „Merch“ als Text im Knopf — der Menü-Link wäre doppelt
   (unter 480 zeigt der Knopf nur das Symbol, dann bleibt der Menü-Link). */
@media (min-width: 480px) {
  .nav .nav-links a[href="/merch"] { display: none; }
}

@media (max-width: 1279px) {
  .nav { min-height: 60px; }
  .nav .nav-menu { order: 4; }
  .nav .nav-burger { width: 44px; height: 44px; min-width: 44px; }
  /* Menü-Panel: Handy eine Spalte, Tablet zwei */
  .nav .nav-links {
    top: calc(100% + 10px);
    left: 8px;
    right: 8px;
    padding: 10px;
    border-radius: 18px;
    background: #0a1426;
    border-color: var(--vk-linie);
    box-shadow: 0 30px 80px rgb(0 0 0 / .6);
    max-height: calc(100svh - 110px);
  }
  .nav .nav-links a {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vk-text-2);
    border-radius: 12px;
  }
  .nav .nav-links a:hover,
  .nav .nav-links a.is-active { color: var(--vk-text); background: rgb(0 179 255 / .1); }
  .nav-menu[open] > .nav-burger { color: var(--vk-akzent-hell); }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .nav { left: 16px; right: 16px; top: 16px; padding: 8px 10px 8px 18px; }
  .nav .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
}
/* Logo als Tippfläche ≥ 44 px (war 22 px hoch) */
.nav .nav-brand { min-height: 44px; flex: none; }
@media (min-width: 1280px) {
  /* width: max-content — die zentrierte Leiste (left:50% + translateX) bekam
     sonst nur die halbe Viewport-Breite als Platz: „App laden“ ragte über den
     Rand und das Logo wurde gestaucht (gemessen bei 1440 px). */
  .nav { width: max-content; padding: 8px 8px 8px 22px; gap: 4px; }
  .nav .nav-brand { margin-right: 14px; }
  .nav .nav-links { gap: 2px; padding: 0 10px; }
  .nav .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: .875rem; color: var(--vk-text-2); }
  .nav .nav-links a:hover { color: var(--vk-text); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUSS — Rubriken auf ALLEN Formaten eingeklappt (Aufklapper je Rubrik)
   Das HTML liefert <details class="footer-col"> ohne open aus; app.js
   schließt ältere Seiten mit open einmalig. Ohne JavaScript klappt jede
   Rubrik trotzdem auf (natives details).
   ═══════════════════════════════════════════════════════════════════════════ */
.footer .footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}
.footer .footer-col {
  display: block;
  border-bottom: 1px solid var(--vk-linie-weich);
}
.footer .footer-col > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  padding: 0 4px;
  list-style: none;
  cursor: pointer;
  pointer-events: auto;
  font: 700 .75rem/1.2 var(--vk-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vk-text-2);
  transition: color .2s;
}
.footer .footer-col > summary::-webkit-details-marker { display: none; }
.footer .footer-col > summary::marker { content: ""; }
.footer .footer-col > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.footer .footer-col > summary:hover,
.footer .footer-col[open] > summary { color: var(--vk-akzent-hell); }
.footer .footer-col[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.footer .footer-col-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  padding: 0 4px 14px;
}
.footer .footer-col-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  width: auto;
  font-size: .875rem;
  color: var(--vk-text-2);
  border-bottom: 0;
}
.footer .footer-col-links a:hover { color: var(--vk-text); }
/* Fußzeilen-Links (Rechtliches, Use-Cases, Kontakt, Marke) als Tippflächen
   ≥ 44 px — vorher 14–19 px hoch. Nur Höhe/Ausrichtung, Texte unverändert. */
.footer .footer-brand,
.footer .footer-legal a,
.footer .footer-usecases a,
.footer .footer-copy a,
.footer .fk-wa,
.footer .fk-tel,
.footer .fm-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer .footer-legal { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
@media (min-width: 600px) {
  .footer .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .footer .footer-col-links { grid-template-columns: 1fr; }
}
@media (min-width: 960px) {
  .footer .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
}

/* ─── Bewegung reduzieren ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vk-btn, .vk-store, .vk-karte, .vk-laden__knopf, .vk-frage > summary::after,
  .footer .footer-col > summary::after, .vk-textlink::after { transition: none; }
  .vk-btn:hover, .vk-store:hover, .vk-karte:hover, .vk-laden__knopf:hover { transform: none; }
}

/* ─── Outro-Abschluss (gemeinsames Include 04-outro.html) ──────────────────
   2026-09-27 (Gesamtprüfung): statt „App holen“ direkt beide Stores. */
.outro .outro-stores { justify-content: center; margin: 0 auto; max-width: 440px; }
@media (min-width: 600px) {
  .outro .outro-stores { max-width: none; }
}

/* 2026-09-27 (Gesamtprüfung): Kennzahl-Beschriftungen (11 px, Versalien) lagen
   mit --color-text-lo bei 3,9–4,1 : 1. Mit --color-text-mid über 4,5 : 1. */
.bkz__label { color: var(--color-text-mid, #9bb4cc); }