/** Shopify CDN: Minification failed

Line 339:54 Unexpected bad string token
Line 339:99 Unterminated string token

**/
/* assets/vh-a2.css — WP-P26 Über uns V2 (Story): zusammengesetzt aus den Fragmenten der Teile A/B (Hauptmodell, 24.09.2026).
   Geladen aus sections/vh-a2-hero.liquid NACH vh-brand.css, vh-v2.css, vh-c2.css, vh-h.css, vh-h2.css. Nur Klassen vh-a2-*
   plus verankerte Overrides body.template-page-vh-about-v2 … (Brief WP-P26 §1). Kein Hex, kein !important. */

/* ===== WP-P26b ===== */
/* WP-P26b — Über-uns-Seite V2 "Story" (test-ueber-uns), Teil A: vh-a2-hero (Override), vh-a2-anfang,
   vh-a2-zeit. Wird vom Hauptmodell hinter WP-P26c-css.css (Teil B) zu assets/vh-a2.css zusammengesetzt
   und aus sections/vh-a2-hero.liquid geladen (Ladestelle brand -> v2 -> c2 -> vh-h.css -> vh-h2.css ->
   vh-a2.css). Nur Klassen vh-a2-* plus die im Brief genannten verankerten Overrides
   "body.template-page-vh-about-v2 …". Farben nur Tokens aus assets/vh-brand.css (kein Hex), kein
   !important, kein neues JS. */

/* ---------- Verankerter Hero-Override (WP-P26 §1 Zeile a2-hero) ----------
   Die Hero-Sektion teilt die Klasse .vh-h2-hero__video mit der Startseite. Ohne diesen Override
   würde die dortige r5-Regel ".vh-h2-hero__video { object-position: 68% 50%; }" (Startseite-
   spezifisch, Motiv "Hand + Flasche" im rechten Bilddrittel) auch auf dieser Seite gelten. Die
   Wachau-Goldlicht-Landschaft dieser Seite braucht dagegen 50% 55% (Flusslauf/Sonne bleiben rechts
   sichtbar), deshalb verankert auf die Template-Body-Klasse statt die geteilte Klasse selbst zu
   ändern (das würde die Startseite mit beeinflussen). */

/* =====================================================================
   vh-a2-anfang — Kapitel 01, id="geschichte": Pull-Quote + Markentext + zwei Gründer-Zitate +
   Faktenzeile links, Foto 4:5 rechts (Grid 7fr/5fr ab 900px, DOM-Reihenfolge = Spaltenreihenfolge,
   kein CSS "order" nötig).
   ===================================================================== */
.vh-a2-anfang__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-8);
}
.vh-a2-anfang__grid > * { min-width: 0; }
@media (min-width: 900px) {
  .vh-a2-anfang__grid { grid-template-columns: 7fr 5fr; gap: var(--space-16); }
}

.vh-a2-anfang__text { min-width: 0; }

.vh-a2-anfang__pull {
  margin: 0 0 var(--space-6);
  padding: 0 0 var(--space-5);
  border-bottom: var(--border-width) solid var(--border-default);
}
.vh-a2-anfang__pull p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.32;
  color: var(--text-body);
  text-wrap: balance;
}
.vh-a2-anfang__pull-quelle { margin: 8px 0 0; font-size: 14px; color: var(--text-soft); }

.vh-a2-anfang__prose { max-width: 62ch; }
.vh-a2-anfang__prose p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: var(--text-body); }
.vh-a2-anfang__prose p:last-child { margin-bottom: 0; }

.vh-a2-anfang__zitate {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vh-a2-anfang__zitat { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.45; color: var(--text-body); }
.vh-a2-anfang__attribution { margin: 4px 0 0; font-size: 14px; color: var(--text-soft); }

.vh-a2-anfang__fakten { margin: var(--space-5) 0 0; font-size: 14px; color: var(--text-soft); display: flex; flex-wrap: wrap; align-items: center; }
.vh-a2-anfang__sep { color: var(--text-muted);; margin: 0 6px; }

.vh-a2-anfang .vh-btn { margin-top: var(--space-6); }

.vh-a2-anfang__media { margin: 0; }
.vh-a2-anfang__media img {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px) { .vh-a2-anfang__media img { max-width: none; } }

/* =====================================================================
   vh-a2-zeit — Kapitel 02: Meilenstein-Leiste, drei Stops. Mobil vertikale Linie links, Desktop
   horizontale Linie über der Jahreszeile, Mint-Punkte auf der Linie. Gestaffeltes Reveal per
   :nth-child unter dem bestehenden html.vh-h-js/.is-in-Gate aus assets/vh-h.css — kein neues JS.
   ===================================================================== */
.vh-a2-zeit__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-8);
  margin-top: var(--space-8);
  padding-left: 28px;
}
.vh-a2-zeit__row > * { min-width: 0; }
.vh-a2-zeit__row::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  border-left: var(--border-width) solid var(--border-default);
}
@media (min-width: 900px) {
  .vh-a2-zeit__row {
    /* Fix S3 (WP-P32, 30.09.2026): Spaltenzahl = Anzahl der "stop"-Blocks (--vh-a2z-cols, per
       Inline-Style aus sections/vh-a2-zeit.liquid) statt fest 4 — bei drei Stops (test-autor)
       blieb sonst eine Spalte rechts leer und die Reihe wirkte nicht zentriert. Bei vier Stops
       (Über uns) unverändert repeat(4, …). */
    grid-template-columns: repeat(var(--vh-a2z-cols, 4), minmax(0, 1fr));
    column-gap: var(--space-10);
    row-gap: 0;
    padding-left: 0;
    padding-top: 34px;
  }
  .vh-a2-zeit__row::before {
    left: 0;
    right: 0;
    top: 12px;
    bottom: auto;
    border-left: 0;
    border-top: var(--border-width) solid var(--border-default);
  }
}

.vh-a2-zeit__stop { position: relative; }
@media (min-width: 900px) { .vh-a2-zeit__stop { text-align: center; } }

.vh-a2-zeit__dot {
  position: absolute;
  left: -20px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-mint-700);
}
@media (min-width: 900px) {
  /* .vh-a2-zeit__stop startet erst NACH dem row padding-top:34px (Reservefläche für Linie+Punkt);
     top ist relativ zum Stop, nicht zur Row — deshalb hier ein negativer Wert, damit der Punkt
     wieder auf Höhe der Linie (row::before top:12px) zurückrutscht: 34 (Row-Padding) + top = 12
     (Linie) - 6 (halbe Punktgröße, damit der Punkt auf der Linie zentriert sitzt) -> top:-28px. */
  .vh-a2-zeit__dot { left: 50%; top: -28px; transform: translateX(-50%); }
}

.vh-a2-zeit__jahr { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(34px, 5vw, 48px); line-height: 1.05; color: var(--text-body); }
.vh-a2-zeit__titel { margin: 6px 0 0; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 16px; color: var(--text-body); }
.vh-a2-zeit__text { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-soft); max-width: 34ch; }
@media (min-width: 900px) { .vh-a2-zeit__text { margin-left: auto; margin-right: auto; } }
.vh-a2-zeit__loox { margin: 8px 0 0; font-family: var(--font-label); font-weight: var(--weight-bold); font-size: 14px; color: var(--text-body); }

/* Gestaffeltes Reveal: reine CSS-Erweiterung des bestehenden Gates aus assets/vh-h.css
   (html.vh-h-js [data-vh-reveal] { opacity:0; … } -> .is-in { opacity:1; … }). Die Sektion selbst
   trägt data-vh-reveal; hier zusätzlich dieselbe Start-/Endregel auf die drei Stops, mit
   transition-delay 0/.1/.2s je :nth-child, ausgelöst durch .vh-a2-zeit.is-in (die Klasse landet auf
   der Sektion selbst, s. sections/vh-a2-zeit.liquid — die Sektion trägt sowohl vh-section als auch
   vh-a2-zeit). */
html.vh-h-js .vh-a2-zeit__stop {
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: no-preference) {
  html.vh-h-js .vh-a2-zeit__stop {
    transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
  }
  html.vh-h-js .vh-a2-zeit__row > .vh-a2-zeit__stop:nth-child(2) { transition-delay: .1s; }
  html.vh-h-js .vh-a2-zeit__row > .vh-a2-zeit__stop:nth-child(3) { transition-delay: .2s; }
}
html.vh-h-js .vh-a2-zeit.is-in .vh-a2-zeit__stop { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.vh-h-js .vh-a2-zeit__stop { opacity: 1; transform: none; }
}

/* ===== WP-P26c ===== */
/* WP-P26c — Über uns V2 „Story", Teil B (a2-flasche … a2-newsletter)
   Neue Regeln ausschließlich unter Klassen vh-a2-* bzw. verankert unter body.template-page-vh-about-v2
   (Vorlagenwechsel-Override für die wiederverwendete Zettel-Sektion, siehe unten). Keine Hex-Farben
   (nur var(--…) aus assets/vh-brand.css), kein !important. Wird vom Hauptmodell ans Ende von
   assets/vh-a2.css gehängt (Kopfkommentar + Teil A + Teil B). */

/* ================================================================================================
   vh-a2-werte — Kapitel 04 "Wofür wir stehen": Pull-Quote + drei Papierkarten (Zettel-Motiv,
   Vorbild .vh-h2-zettel__karte in assets/vh-h2.css). Rotation und Reveal laufen bewusst auf
   getrennten CSS-Eigenschaften (Rotation = transform, unbedingt; Reveal = opacity, gated) — sonst
   konkurrieren Hover-Reset (@media (hover:hover)) und die is-in-Transition auf derselben
   transform-Eigenschaft um Spezifität.
   ================================================================================================ */
.vh-a2-werte { padding: var(--space-10) 0; }
@media (min-width: 900px) { .vh-a2-werte { padding: var(--space-16) 0; } }
.vh-scope .vh-a2-werte h2 { font-size: clamp(30px, 4vw, 40px); }

.vh-a2-werte__pull { max-width: 60ch; margin: var(--space-2) auto 0; text-align: center; }
.vh-a2-werte__pull p { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: var(--text-body); margin: 0; }
.vh-a2-werte__attr { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-soft); }
.vh-a2-werte__pull .vh-a2-werte__attr { text-align: center; }

.vh-a2-werte__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-10); }
.vh-a2-werte__row > * { min-width: 0; }
@media (min-width: 900px) { .vh-a2-werte__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } }

.vh-a2-werte__karte {
  position: relative;
  background: var(--color-paper);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
@media (min-width: 900px) {
  .vh-a2-werte__row > .vh-a2-werte__karte:nth-child(1) { transform: rotate(-1.5deg); }
  .vh-a2-werte__row > .vh-a2-werte__karte:nth-child(2) { transform: rotate(1deg); }
  .vh-a2-werte__row > .vh-a2-werte__karte:nth-child(3) { transform: rotate(-0.8deg); }
}
@media (hover: hover) {
  .vh-a2-werte__karte { transition: transform var(--duration-base) var(--ease-out); }
  .vh-a2-werte__row > .vh-a2-werte__karte:hover { transform: rotate(0deg); }
}

.vh-a2-werte__pin {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-mint-700);
  box-shadow: var(--shadow-sm);
}

.vh-a2-werte__wort { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 30px; line-height: 1.2; color: var(--text-body); margin: var(--space-2) 0 0; }
.vh-a2-werte__satz { margin: var(--space-3) 0 0; }
.vh-a2-werte__satz p { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--text-body); margin: 0; }
.vh-a2-werte__satz .vh-a2-werte__attr { font-size: 14px; }
.vh-a2-werte__linie { border: 0; border-top: var(--border-width) solid var(--border-default); margin: var(--space-4) 0; }

/* Gestaffeltes Reveal (nur opacity — Rotation bleibt unabhängig, s. o.) */
html.vh-h-js .vh-a2-werte__karte { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.vh-h-js .vh-a2-werte__karte { transition: opacity 360ms var(--ease-out); }
  html.vh-h-js .vh-a2-werte.is-in .vh-a2-werte__row > .vh-a2-werte__karte:nth-child(1) { transition-delay: 0ms; }
  html.vh-h-js .vh-a2-werte.is-in .vh-a2-werte__row > .vh-a2-werte__karte:nth-child(2) { transition-delay: 100ms; }
  html.vh-h-js .vh-a2-werte.is-in .vh-a2-werte__row > .vh-a2-werte__karte:nth-child(3) { transition-delay: 200ms; }
}
html.vh-h-js .vh-a2-werte.is-in .vh-a2-werte__karte { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.vh-h-js .vh-a2-werte__karte { opacity: 1; }
}

/* ================================================================================================
   vh-a2-kontakt — "Sie erreichen uns": Firmenkarte (<address>) + Linkkarte, Desktop 2 Spalten.
   ================================================================================================ */
.vh-a2-kontakt { padding: var(--space-10) 0; }
@media (min-width: 900px) { .vh-a2-kontakt { padding: var(--space-16) 0; } }
.vh-scope .vh-a2-kontakt h2 { font-size: clamp(30px, 4vw, 40px); }

.vh-a2-kontakt__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.vh-a2-kontakt__grid > * { min-width: 0; }
@media (min-width: 900px) { .vh-a2-kontakt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }

.vh-a2-kontakt__karte { background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-6); }
.vh-a2-kontakt__firma { font-style: normal; }
.vh-a2-kontakt__name { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 22px; line-height: 1.3; color: var(--text-body); margin: 0; }
.vh-a2-kontakt__marke { font-size: 15px; color: var(--text-soft); margin: 4px 0 0; }
.vh-a2-kontakt__gruppe { margin-top: var(--space-5); }
.vh-a2-kontakt__gruppe p { font-size: 16px; line-height: 1.5; color: var(--text-body); margin: 4px 0 0; }
.vh-a2-kontakt__zeiten { font-size: 14px; color: var(--text-soft); }
.vh-a2-kontakt__link-inline { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-link); font-weight: var(--weight-bold); text-decoration: none; }
.vh-a2-kontakt__link-inline:hover { color: var(--text-link-hover); }

.vh-a2-kontakt__links h3 { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 20px; margin: 0 0 var(--space-4); }
.vh-a2-kontakt__linkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vh-a2-kontakt__linkliste li + li { border-top: var(--border-width) solid var(--border-default); }
.vh-a2-kontakt__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 12px 2px; font-size: 16px; color: var(--text-body); text-decoration: none; }
.vh-a2-kontakt__link:hover { color: var(--text-link); }
.vh-a2-kontakt__link svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }

/* ================================================================================================
   vh-a2-faq — Häufige Fragen (flache Liste, keine Gruppen-H3) + FAQPage-JSON-LD (kein CSS nötig).
   Die Fragen-Klassen (.vh-faq, .vh-faq__frage, .vh-faq__chevron, .vh-faq__antwort) sind Bestand,
   aber ihr Styling lebt als <style> INNERHALB sections/vh-faq.liquid — auf dieser Seite wird jene
   Sektion nicht eingebunden, das Bestand-<style> lädt also nicht mit. Deshalb hier dieselben Regeln
   erneut, verankert unter .vh-a2-faq (Familienklasse, WP-P20 §1 "Verbund-Selektoren … Familienklasse
   verankern"), byte-gleich aus sections/vh-faq.liquid übernommen — kein neuer Stil erfunden.
   ================================================================================================ */
.vh-a2-faq { padding: var(--space-10) 0; }
@media (min-width: 900px) { .vh-a2-faq { padding: var(--space-16) 0; } }
.vh-scope .vh-a2-faq h2 { font-size: clamp(30px, 4vw, 40px); }

.vh-a2-faq .vh-faq { border-top: var(--border-width) solid var(--border-default); }
.vh-a2-faq .vh-faq-list .vh-faq:last-child { border-bottom: var(--border-width) solid var(--border-default); }
.vh-a2-faq .vh-faq__frage { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 2px; min-height: 44px; font-weight: var(--weight-regular); font-size: 18px; color: var(--text-body); cursor: pointer; }
.vh-a2-faq .vh-faq__frage::-webkit-details-marker { display: none; }
.vh-a2-faq .vh-faq__chevron { width: 28px; height: 28px; border-radius: var(--radius-pill); border: var(--border-width-strong) solid var(--color-green); color: var(--text-link); display: grid; place-items: center; flex: 0 0 28px; transition: transform var(--duration-base) var(--ease-out); }
.vh-a2-faq .vh-faq__chevron::after { content: "+"; font-size: 18px; line-height: 1; }
.vh-a2-faq .vh-faq[open] .vh-faq__chevron { transform: rotate(45deg); }
.vh-a2-faq .vh-faq__antwort { padding: 0 2px 20px; color: var(--text-soft); font-size: 16px; line-height: 1.6; max-width: 720px; }
.vh-a2-faq .vh-section-head a { font-weight: var(--weight-bold); }
.vh-a2-faq .vh-section-head a[href^="tel:"],
.vh-a2-faq .vh-section-head a[href^="mailto:"] { white-space: nowrap; }
.vh-a2-faq .vh-section-head { margin-bottom: var(--space-10); }

/* ================================================================================================
   Verankerter Override (WP-P26-Brief §1): a2-zettel wiederverwendet sections/vh-h2-zettel.liquid
   unverändert (nur gelesen) — auf der Über-uns-Seite soll die Papierkarte ab 900 px aber RECHTS
   stehen (Komposition "Seiten wechseln", WP-P23/N-H11), während DOM-Reihenfolge und Mobil-Ansicht
   unangetastet bleiben. .vh-h2-zettel__grid ist bereits ein zweispaltiges CSS-Grid mit impliziter
   Kind-Platzierung (kein grid-column an den Kindern) — "order" auf der Karte reicht deshalb, ohne
   .vh-h2-zettel selbst zu ändern. Nur diese eine, im Brief ausdrücklich genannte Ausnahme von der
   vh-a2-*-Regel, verankert am Seitentemplate (templateSuffix vh-about-v2).
   ================================================================================================ */
@media (min-width: 900px) {
  body.template-page-vh-about-v2 .vh-h2-zettel__karte { order: 2; }
}


/* ===== WP-P26d (r3) ===== */
/* _out/WP-P26d-css.css — WP-P26 (r3), CSS-Fragment für die Struktur-Änderungen aus dem r3-
   Inhaber-Feedback (24.09.2026 nachmittags): Werte-Karten bekommen eine Faktenliste statt einer
   Kundenzeile, die Zeit-Leiste wächst auf vier Meilensteine, und a2-zettel wird durch die neue
   Sektion a2-prinzipien (vier Marken-Prinzipien-Karten) ersetzt.

   Nur additive Regeln — Korrekturen an bereits bestehenden, widersprechenden Regeln (Zeit
   grid-template-columns 3→4, die Entfernung der alten Werte-Kundenzeile-CSS und der Loox-Link-CSS)
   sind DIREKT an ihrer bisherigen Stelle in assets/vh-a2.css geändert, nicht hier dupliziert (WP-P26
   Brief, Aufgabe 5). Dieses Fragment wird vom Hauptmodell unverändert ans Ende von assets/vh-a2.css
   gehängt, Abschnitt "/* ===== WP-P26d (r3) ===== */". Nur Klassen vh-a2-*, Farben nur Tokens aus
   assets/vh-brand.css (kein Hex), kein !important, kein neues JS. */

/* ================================================================================================
   vh-a2-werte — Faktenliste je Karte (ersetzt die frühere Kundenzeile, r3 §6.1/§6.2). Kleiner
   Mint-Punkt als reiner CSS-Marker (::before), kein Icon.
   ================================================================================================ */
.vh-a2-werte__fakten {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vh-a2-werte__fakten li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
}
.vh-a2-werte__fakten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-mint-700);
}

/* ================================================================================================
   vh-a2-zeit — vierter Meilenstein-Stop: Reveal-Staffelung um transition-delay .3s erweitern
   (bisher nur :nth-child(2)/(3) aus WP-P26b, jetzt bis zu vier Stops, r3 §6.2).
   ================================================================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.vh-h-js .vh-a2-zeit__row > .vh-a2-zeit__stop:nth-child(4) { transition-delay: .3s; }
}

/* ===== WP-P26e (r4) Grundsatz-Leiste ===== */
/* vh-a2-prinzipien — "Was VITALHemp ausmacht" (ersetzt die r3-Papierkarten vollständig). Inhaber-
   Rüge 24.09. abends: die r3-Fassung kopierte stumpf das Zettel-Motiv von vh-a2-werte. r4 ist eine
   typografische Grundsatz-Leiste — kein Karten-/Zettel-Motiv, keine Icons in Kreisen (das ist die
   Bauart von vh-h2-usp in assets/vh-h2.css, davon ebenfalls bewusst abgesetzt).

   Desktop ≥900px: vier Spalten nebeneinander, getrennt durch vertikale Hairlines (border-left,
   erstes Element ohne). Mobil: gestapelt, jedes Element als zweispaltiges Mini-Raster (56px 1fr,
   Ordnungszahl links), getrennt durch horizontale Hairlines (border-top, erstes Element ohne) —
   die beiden Trennlinien-Richtungen schließen sich media-gebunden gegenseitig aus, nie beide
   gleichzeitig. Ordnungszahl groß in Playfair (clamp deckt die geforderten 40px mobil/56px desktop
   bereits selbsttätig ab, da 5vw erst ab ~800px Viewportbreite über 40px hinauswächst). Hover/Focus
   (nur @media (hover:hover) bzw. :focus-within, die Elemente sind keine Links): Ordnungszahl und
   linke Hairline auf --color-green-deep, Unterstreichungslinie unter der Zahl wächst 32→56px;
   padding-left kompensiert den 1→2px-Hairline-Sprung, damit der Text nicht springt. Reveal wie
   vh-a2-zeit/vh-a2-werte (html.vh-h-js [data-vh-reveal] aus assets/vh-h.css liefert die Basis),
   zusätzlich gestaffelte transition-delay je Element UND ein 8px-Einfahren der Ordnungszahl.
   Nur Klassen vh-a2-*, Farben nur Tokens aus assets/vh-brand.css, kein !important, kein neues JS. */

.vh-a2-prinzipien {
  padding: var(--space-10) 0;
  background: var(--color-mint-100);
}
@media (min-width: 900px) { .vh-a2-prinzipien { padding: var(--space-16) 0; } }
.vh-scope .vh-a2-prinzipien h2 { font-size: clamp(30px, 4vw, 40px); }

.vh-a2-prinzipien__liste {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.vh-a2-prinzipien__liste > * { min-width: 0; }
@media (min-width: 900px) {
  .vh-a2-prinzipien__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
}

/* Mobil: zweispaltiges Mini-Raster, Trennung per horizontaler Hairline zwischen den Elementen.
   Ohne explizite Spaltenzuweisung würde das dritte Kind (__text) von der Grid-Autoplatzierung in
   die schmale 56px-Zahlenspalte fallen (Row 2, Col 1) statt unter den Titel — deshalb __titel/__text
   fest auf Spalte 2. */
.vh-a2-prinzipien__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-default);
}
.vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:first-child { border-top: 0; }
.vh-a2-prinzipien__item > .vh-a2-prinzipien__nr { grid-column: 1; }
.vh-a2-prinzipien__item > .vh-a2-prinzipien__titel,
.vh-a2-prinzipien__item > .vh-a2-prinzipien__text { grid-column: 2; }

/* Desktop: eine Reihe, Trennung per vertikaler Hairline links jedes Elements außer dem ersten. */
@media (min-width: 900px) {
  .vh-a2-prinzipien__item {
    display: block;
    padding: 0 0 0 var(--space-5);
    border-top: 0;
    border-left: 1px solid var(--border-default);
  }
  .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:first-child { border-left: 0; padding-left: 0; }
}

.vh-a2-prinzipien__nr {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--color-mint-700);
  font-variant-numeric: tabular-nums;
}
.vh-a2-prinzipien__nr::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 8px;
  background: var(--color-mint-700);
}

.vh-a2-prinzipien .vh-a2-prinzipien__titel {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--text-body);
  margin: var(--space-3) 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (min-width: 900px) { .vh-a2-prinzipien .vh-a2-prinzipien__titel { margin-top: var(--space-4); } }

.vh-a2-prinzipien__ic { width: 18px; height: 18px; flex: none; color: var(--color-mint-700); display: inline-flex; }
.vh-a2-prinzipien__ic svg { width: 18px; height: 18px; }

.vh-a2-prinzipien__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 30ch;
  margin: 6px 0 0;
}

/* Hover-/Fokus-Akzent (reines Hover-Detail, kein Link) — nur mit echtem Zeigegerät. */
@media (prefers-reduced-motion: no-preference) {
  .vh-a2-prinzipien__nr,
  .vh-a2-prinzipien__nr::after,
  .vh-a2-prinzipien__item {
    transition: color var(--duration-base) var(--ease-out), width var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out), border-left-width var(--duration-base) var(--ease-out),
      padding-left var(--duration-base) var(--ease-out);
  }
}
@media (hover: hover) {
  .vh-a2-prinzipien__item:hover .vh-a2-prinzipien__nr,
  .vh-a2-prinzipien__item:focus-within .vh-a2-prinzipien__nr {
    color: var(--color-green-deep);
  }
  .vh-a2-prinzipien__item:hover .vh-a2-prinzipien__nr::after,
  .vh-a2-prinzipien__item:focus-within .vh-a2-prinzipien__nr::after {
    width: 56px;
  }
}
@media (min-width: 900px) and (hover: hover) {
  .vh-a2-prinzipien__item:hover,
  .vh-a2-prinzipien__item:focus-within {
    border-left-width: 2px;
    border-left-color: var(--color-green-deep);
    padding-left: calc(var(--space-5) - 1px);
  }
  .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:first-child:hover,
  .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:first-child:focus-within {
    border-left-width: 0;
    padding-left: 0;
  }
}

/* Gestaffeltes Reveal (Basis-Opacity/Transform kommt aus html.vh-h-js [data-vh-reveal] in
   assets/vh-h.css). Zusätzlich fährt die Ordnungszahl 8px nach oben ein. */
html.vh-h-js .vh-a2-prinzipien:not(.is-in) .vh-a2-prinzipien__item { opacity: 0; }
html.vh-h-js .vh-a2-prinzipien:not(.is-in) .vh-a2-prinzipien__nr { transform: translateY(8px); }
@media (prefers-reduced-motion: no-preference) {
  html.vh-h-js .vh-a2-prinzipien__item { transition: opacity 360ms var(--ease-out); }
  html.vh-h-js .vh-a2-prinzipien__nr { transition: transform 360ms var(--ease-out); }
  html.vh-h-js .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:nth-child(1),
  html.vh-h-js .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:nth-child(1) .vh-a2-prinzipien__nr { transition-delay: 0ms; }
  html.vh-h-js .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:nth-child(2),
  html.vh-h-js .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:nth-child(2) .vh-a2-prinzipien__nr { transition-delay: 100ms; }
  html.vh-h-js .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:nth-child(3),
  html.vh-h-js .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:nth-child(3) .vh-a2-prinzipien__nr { transition-delay: 200ms; }
  html.vh-h-js .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:nth-child(4),
  html.vh-h-js .vh-a2-prinzipien__liste > .vh-a2-prinzipien__item:nth-child(4) .vh-a2-prinzipien__nr { transition-delay: 300ms; }
}
html.vh-h-js .vh-a2-prinzipien.is-in .vh-a2-prinzipien__item { opacity: 1; }
html.vh-h-js .vh-a2-prinzipien.is-in .vh-a2-prinzipien__nr { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.vh-h-js .vh-a2-prinzipien__item { opacity: 1; }
  html.vh-h-js .vh-a2-prinzipien__nr { transform: none; }
}