/** Shopify CDN: Minification failed Line 340:79 Unexpected "(" **/ /* assets/vh-h2.css — WP-P21 Startseite V2 Editorial: zusammengesetzt aus den Fragmenten der Teile A/B/C (Hauptmodell, 23.09.2026). Geladen aus sections/vh-h2-hero.liquid NACH vh-brand.css, vh-v2.css, vh-c2.css. Nur Klassen vh-h2-* (+ verankerte Verbund-Selektoren). */ /* ===== WP-P22b ===== */ /* WP-P22b — Teil A (Startseite „Story": Hero-Video, Intro, Kapitel 01 Zettel, Kapitel 02 Wege). Geladen aus sections/vh-h2-hero.liquid NACH vh-brand.css, vh-v2.css, vh-c2.css, vh-h.css (Brief §1 Ladestelle: brand -> v2 -> c2 -> vh-h.css -> vh-h2.css). Nur Klassen vh-h2-* (Ausnahme: Verbund- Selektor .vh-h-video__btn.vh-h2-hero__btn verankert unter der eigenen Klasse, WP-P20 §1 Fragment- Format). Keine Hex-Farben (nur var(--…) aus vh-brand.css; Ausnahme rgba(26,26,26,.x) für den Verlauf über den großen Wege-Panels, wie in vh-brand.css selbst dokumentiert). Kein !important außer der dokumentierten [hidden]-Falle (hier nicht benötigt). */ /* ---------- vh-h2-hero (Vollbild-Video + Textkarte mit Story-Zeile) ---------- */ .vh-h2-hero { margin: 0; border-top: 0; } .vh-h2-hero__stage { position: relative; overflow: hidden; height: 62vh; min-height: 420px; background: var(--color-ink); display: flex; flex-direction: column; justify-content: flex-end; } /* r1 (Render-Test 390x844): .vh-h2-hero__video ist position:absolute (voll-flaechig hinter der Karte) und liegt damit ausserhalb des normalen Flusses. Ohne den Flex-Regel oben war .vh-h2-hero__overlay (das einzige noch im Fluss stehende Kind) am OBEREN Rand der Stage verankert statt am unteren - auf 390 Breite lag die Karte dadurch ueber dem Video statt am Fold-Boden. justify-content:flex-end schiebt das Overlay an den unteren Rand der Stage, die negative margin-top zieht es zusaetzlich ins Video hinein (WP-P21 §2.1 Mobil-Verhalten). Auf Desktop wirkungslos, da das Overlay dort ohnehin position:absolute traegt (Flex-Items werden dann aus dem Fluss genommen). */ @media (min-width: 700px) { .vh-h2-hero__stage { height: min(74vh, 780px); } } /* r2-Messung: Karte lag bei 1360×900 9 px unter dem Fold (Theme-Kopf 225 px) */ .vh-h2-hero__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; margin: 0; } .vh-h2-hero__video--img { position: absolute; } .vh-h2-hero__btn { position: absolute; right: 12px; bottom: 12px; z-index: 3; } .vh-h2-hero__overlay { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: -56px 16px 0; } @media (min-width: 700px) { .vh-h2-hero__overlay { position: absolute; left: clamp(16px, 4vw, 64px); bottom: clamp(24px, 6vh, 72px); margin: 0; max-width: 640px; } } .vh-h2-hero__ki { align-self: flex-start; margin: 0; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--surface-card); box-shadow: var(--shadow-sm); color: var(--text-soft); font-size: 12px; line-height: 1.3; } .vh-h2-hero__card { background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 22px 22px 26px; max-width: none; } @media (min-width: 700px) { .vh-h2-hero__card { padding: 28px 32px; max-width: 640px; } } .vh-h2-hero__loox { margin: 0; font-family: var(--font-label); font-weight: var(--weight-bold); font-size: 13px; letter-spacing: .04em; color: var(--text-body); } .vh-h2-hero__story { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(26px, 5.6vw, 40px); line-height: 1.25; color: var(--text-body); } .vh-h2-hero__story-quelle { margin: 4px 0 0; font-size: 13px; color: var(--text-soft); } .vh-scope .vh-h2-hero__h1 { margin: 14px 0 0; font-size: clamp(20px, 4.4vw, 26px); line-height: 1.2; } .vh-h2-hero__sub { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-soft); } .vh-h2-hero__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } @media (min-width: 520px) { .vh-h2-hero__ctas { flex-direction: row; } } .vh-h2-hero__ctas .vh-btn { flex: 1 1 0; } .vh-h2-hero__trust { margin: 12px 0 0; font-size: 13px; color: var(--text-soft); } /* ---------- vh-h2-intro (schlanke Direktantwort, kein H2, keine Icons) ---------- */ .vh-h2-intro { text-align: center; } .vh-h2-intro__wrap { max-width: 760px; margin: 0 auto; } .vh-h2-intro__text { max-width: 68ch; margin: 10px auto 0; font-family: var(--font-body); font-size: 20px; line-height: 1.5; color: var(--text-body); } /* ---------- vh-h2-zettel (Kapitel 01: Papierkarte + Markentext) ---------- */ .vh-h2-zettel__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; margin-top: var(--space-4); } .vh-h2-zettel__grid > * { min-width: 0; } @media (min-width: 900px) { .vh-h2-zettel__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); } } .vh-h2-zettel__karte { position: relative; background: var(--color-paper); border-radius: 6px; box-shadow: var(--shadow-md); padding: var(--space-6) var(--space-6) var(--space-8); transform: rotate(0deg); } @media (min-width: 900px) { .vh-h2-zettel__karte { transform: rotate(-1.5deg); } } .vh-h2-zettel__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-h2-zettel__zitate { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); } .vh-h2-zettel__zitate li + li { border-top: var(--border-width) solid var(--border-default); padding-top: var(--space-5); } .vh-h2-zettel__zitat { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.4; color: var(--text-body); } .vh-h2-zettel__attribution { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); } .vh-h2-zettel__text .vh-h2-zettel__p { font-size: 16px; line-height: 1.6; color: var(--text-body); margin: 0; } .vh-h2-zettel__cta { display: inline-block; margin-top: var(--space-5); font-family: var(--font-label); font-weight: var(--weight-bold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-link); } .vh-h2-zettel__cta:hover { color: var(--text-link-hover); } /* ---------- vh-h2-wege (Kapitel 02: zwei große + drei kleine Panels) ---------- */ .vh-h2-wege__gross { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: var(--space-8); } .vh-h2-wege__gross > * { min-width: 0; } @media (min-width: 700px) { .vh-h2-wege__gross { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } } .vh-h2-wege__klein { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: var(--space-4); } .vh-h2-wege__klein > * { min-width: 0; } @media (min-width: 700px) { .vh-h2-wege__klein { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } } .vh-h2-panel { position: relative; display: block; text-decoration: none; color: var(--text-body); min-width: 0; } /* Groß: Bild als Vollbild-Hintergrund, Text unten links mit Verlauf (editorial, bedrop-Muster) */ .vh-h2-panel--gross { display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; color: var(--color-white); } @media (min-width: 700px) { .vh-h2-panel--gross { aspect-ratio: 5 / 4; } } .vh-h2-panel--gross .vh-h2-panel__img { position: absolute; inset: 0; margin: 0; background: var(--color-mint-shop); } .vh-h2-panel--gross .vh-h2-panel__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-base) var(--ease-out); } .vh-h2-panel--gross::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 26, 26, .62), rgba(26, 26, 26, 0) 62%); pointer-events: none; } .vh-h2-panel--gross .vh-h2-panel__body { position: relative; z-index: 1; padding: var(--space-6); } .vh-h2-panel--gross .vh-h2-panel__titel { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 26px; line-height: 1.15; margin: 0; color: var(--color-white); } .vh-h2-panel--gross .vh-h2-panel__sub { margin: 8px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.4; color: var(--color-white); opacity: .92; } .vh-h2-panel--gross .vh-h2-panel__arrow { position: absolute; z-index: 2; top: var(--space-4); right: var(--space-4); width: 36px; height: 36px; border-radius: 50%; background: var(--surface-card); color: var(--text-body); display: grid; place-items: center; } .vh-h2-panel--gross .vh-h2-panel__arrow svg { width: 18px; height: 18px; } /* Klein: Bild 1:1 links 96px, Titel + Kundenzeile rechts */ .vh-h2-panel--klein { display: flex; align-items: center; gap: 14px; background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-card); padding: 12px 14px; } .vh-h2-panel--klein .vh-h2-panel__img { flex: none; width: 96px; height: 96px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-mint-shop); margin: 0; } .vh-h2-panel--klein .vh-h2-panel__img img { width: 100%; height: 100%; object-fit: cover; } .vh-h2-panel--klein .vh-h2-panel__body { flex: 1; min-width: 0; } .vh-h2-panel--klein .vh-h2-panel__titel { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 20px; line-height: 1.2; margin: 0; color: var(--text-body); } /* Fixer 23.09.2026: Kundenzeile ist echter Fliesstext (ganzer Satz) - 14px/--text-muted unterschritt die 15px-Untergrenze und lag mit ~4,24:1 unter WCAG-AA 4,5:1. 15px + --text-soft (~9,8:1) behebt beides, analog zu .vh-h2-panel--gross .vh-h2-panel__sub (dort bereits 16px/--color-white). */ .vh-h2-panel--klein .vh-h2-panel__sub { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--text-soft); } .vh-h2-panel--klein .vh-h2-panel__arrow { flex: none; color: var(--text-muted); display: grid; place-items: center; } .vh-h2-panel--klein .vh-h2-panel__arrow svg { width: 18px; height: 18px; } @media (hover: hover) { .vh-h2-panel--gross:hover .vh-h2-panel__img img { transform: scale(1.04); } .vh-h2-panel--klein { transition: transform var(--duration-base) var(--ease-out); } .vh-h2-panel--klein:hover { transform: translateY(-3px); } } /* ===== WP-P22c ===== */ /* WP-P22c — Teil B (h2-auswahl, h2-tag, h2-jahre, h2-loox) der Startseite V2 "Story". Brief: neustart-2026/arbeitspakete/WP-P22-startseite-v2-story.md. Nur Klassen mit Präfix vh-h2- (Ausnahme: Verbund-Selektoren, die eine Familienklasse unter .vh-h2-* verankern, z. B. ".vh-h2-auswahl .vh-c2-karte__checks"). Keine !important (außer der dokumentierten [hidden]-Falle gibt es hier keinen Bedarf). Kein :root, keine neuen Tokens, keine Hex-Farben — nur var(--…) aus assets/vh-brand.css; "transparent" ist ein CSS-Schlüsselwort, kein Hex-Wert (Verlauf des Loox-Deckels). Wird vom Hauptmodell hinter WP-P22b-css.css in assets/vh-h2.css eingefügt (Reihenfolge A → B → C). */ /* ===================================================================== h2-auswahl — 4 Produktkarten (vh-c2-karte), entschlackt, mobil Scroll-Reihe ===================================================================== */ .vh-h2-auswahl__row { display: flex; gap: 16px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; min-width: 0; } .vh-h2-auswahl__row > * { flex: 0 0 78vw; scroll-snap-align: start; min-width: 0; } @media (min-width: 900px) { .vh-h2-auswahl__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); overflow: visible; padding-bottom: 0; } .vh-h2-auswahl__row > * { flex: initial; } } /* Brief §1: Karte hier schlanker als auf der Collection-Seite — Check-Zeilen blenden wir aus, der Rest der Karte (Titel, Loox, Preis, Kaufbutton, "Details und Abo") bleibt. */ .vh-h2-auswahl .vh-c2-karte__checks { display: none; } /* Fixer 23.09.2026: Größen-Chips NICHT mehr per display:none entfernen — bei allen vier hier verbauten Produkten (10/30 ml) blieb das versteckte Kaufformular-Feld sonst dauerhaft auf der 10-ml-Default-Variante stehen, unsichtbar für Maus, Tastatur und Screenreader (Fund WP-P22-Review). Kompaktere Variante statt Ausblenden: kleinerer Abstand + niedrigere Chips, damit die Karte trotzdem schlank bleibt. */ .vh-h2-auswahl .vh-c2-sizes { gap: 6px; } .vh-h2-auswahl .vh-c2-size { min-height: 34px; padding: 3px 4px; } .vh-h2-auswahl .vh-c2-size .num { font-size: 12px; } .vh-h2-auswahl .vh-c2-size small { font-size: 11px; } .vh-h2-auswahl__cta { text-align: center; margin-top: var(--space-8); } .vh-h2-auswahl__cta .vh-btn { width: auto; } /* ===================================================================== h2-tag — Tagesleiste, 4 Karten mit Bild + Kundenzitat, Zeitlinie via Subgrid (Desktop) ===================================================================== */ .vh-h2-tag__row { display: flex; gap: 16px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; min-width: 0; } .vh-h2-tag__row > * { flex: 0 0 82vw; scroll-snap-align: start; min-width: 0; } @media (min-width: 900px) { .vh-h2-tag__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto; gap: var(--grid-gap); overflow: visible; padding-bottom: 0; } .vh-h2-tag__row > * { flex: initial; } /* Subgrid: die 5 Kind-Elemente jeder Karte (Bild, Zeitzeile, Titel, Zitat, Attribution) sitzen auf denselben 5 Zeilen-Tracks wie die Nachbarkarten — dadurch beginnt "Zeitzeile" bei allen vier Karten exakt auf derselben Höhe, unabhängig von der (durch aspect-ratio ohnehin gleichen) Bildhöhe. Browser ohne Subgrid-Unterstützung: jede Karte behält ihre eigene, in sich stimmige Zeilenhöhe (kein Bruch, nur die Linien der vier Karten verlaufen dann nicht exakt collinear). */ .vh-h2-tag__karte { display: grid; grid-template-rows: subgrid; grid-row: span 5; } } .vh-h2-tag__media { margin: 0; min-width: 0; } .vh-h2-tag__media img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: var(--radius-card); } .vh-h2-tag__ki { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .vh-h2-tag__zeitrow { position: relative; margin-top: var(--space-4); padding-top: 10px; min-width: 0; } @media (min-width: 900px) { .vh-h2-tag__zeitrow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: var(--border-width) solid var(--border-default); } } .vh-h2-tag__zeit { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 32px; line-height: 1.05; color: var(--text-body); margin: 0; } .vh-h2-tag__titel { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 16px; color: var(--text-body); margin: 8px 0 0; } .vh-h2-tag__zitat { margin: 8px 0 0; } .vh-h2-tag__zitat p { font-family: var(--font-display); font-size: 18px; line-height: 1.4; color: var(--text-body); margin: 0; } .vh-h2-tag__attr { font-size: 13px; color: var(--text-muted); margin: 8px 0 0; } /* ===================================================================== h2-jahre — Mint-Band, ein großes Zitat, drei kleine, Loox-Zeile mit Count-up ===================================================================== */ .vh-h2-jahre { background: var(--color-mint); border-top: 0; } .vh-h2-jahre .vh-eyebrow { color: var(--color-mint-900); } /* Fixer 23.09.2026: der globale --focus-ring (--color-green) liegt gegen --color-mint bei nur ~1,95:1 Kontrast (WCAG 2.2 SC 2.4.11 verlangt 3:1). Betrifft hier den Loox-Link. Eigener, dunklerer Fokus-Ring statt des globalen (kein neues Token, --text-body ist bereits vh-brand.css). */ .vh-h2-jahre :focus-visible { outline-color: var(--text-body); } .vh-h2-jahre__gross { max-width: 60ch; margin: 0 auto; text-align: center; } .vh-h2-jahre__gross p { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.3; color: var(--text-body); margin: 0; } .vh-h2-jahre__gross footer { margin-top: var(--space-4); font-size: 14px; color: var(--text-body); } .vh-h2-jahre__klein-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-10); text-align: center; } .vh-h2-jahre__klein-row > * { min-width: 0; } /* Fix S6 (WP-P32, 30.09.2026): Spaltenzahl = Anzahl der "klein"-Zitate (--vh-h2j-klein-cols, per Inline-Style aus sections/vh-h2-jahre.liquid) statt fest 3 — bei zwei Zitaten (test-bewertungen, test-cbd-oel-oesterreich) blieb sonst eine Spalte rechts leer. Bei drei Zitaten (Startseite, Über uns) unverändert repeat(3, …). */ @media (min-width: 900px) { .vh-h2-jahre__klein-row { grid-template-columns: repeat(var(--vh-h2j-klein-cols, 3), minmax(0, 1fr)); } } .vh-h2-jahre__klein { border-top: var(--border-width) solid var(--border-default); padding-top: var(--space-4); margin: 0; } .vh-h2-jahre__klein p { font-family: var(--font-display); font-size: 18px; line-height: 1.4; color: var(--text-body); margin: 0; } .vh-h2-jahre__klein footer { margin-top: 10px; font-size: 13px; color: var(--text-body); } .vh-h2-jahre__loox { text-align: center; margin: var(--space-10) 0 0; font-size: 16px; color: var(--text-body); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; } .vh-h2-jahre__loox-stat { font-family: var(--font-label); font-weight: var(--weight-bold); } .vh-h2-jahre__loox-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-label); font-weight: var(--weight-bold); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-link); } .vh-h2-jahre__loox-link svg { width: 16px; height: 16px; } .vh-h2-jahre__loox-link:hover { color: var(--text-link-hover); } /* ===================================================================== h2-loox — Widget über alle Produkte, Deckel 900px mit Verlauf + Button ===================================================================== */ .vh-h2-loox__cap { position: relative; min-width: 0; } .vh-h2-loox__cap.is-capped { max-height: 900px; overflow: hidden; } .vh-h2-loox__widget { min-height: 320px; } .vh-h2-loox__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, transparent, var(--surface-page)); pointer-events: none; opacity: 0; transition: opacity var(--duration-base) var(--ease-out); } .vh-h2-loox__cap.is-capped .vh-h2-loox__fade { opacity: 1; } .vh-h2-loox__more { text-align: center; margin-top: var(--space-6); } .vh-h2-loox__more .vh-btn { width: auto; } /* ===== WP-P22d ===== */ /* WP-P22d — Teil C (Startseite V2 „Story"): Gründer, Herkunft, Wissen, Magazin, Schluss. Wird vom Hauptmodell hinter die Fragmente WP-P22b/WP-P22c in assets/vh-h2.css eingefügt (Reihenfolge A -> B -> C, Brief §1). Nur Klassen mit Präfix vh-h2- (Ausnahme: die dokumentierte Verankerung .template-page-vh-home-v2, kein neues Token, kein Hex außer der erlaubten rgba(26,26,26,.x)-Ausnahme, die hier nicht gebraucht wird). Kein !important außer der dokumentierten [hidden]-Falle (hier nicht gebraucht). Reveal (data-vh-reveal / html.vh-h-js / .is-in) braucht hier KEINE eigene Regel — die Gate-CSS liegt bereits in assets/vh-h.css (WP-P20d), und die Ladestelle lädt vh-h.css vor vh-h2.css (Brief §1 „Ladestelle wie WP-P21 §2.1"). Ebenso .vh-h-ki (KI-Bildunterschrift), .vh-h-video / .vh-h-video__btn (Play/Pause) und .vh-h-def/.vh-h-table*/.vh-h-wissen__ctas (GEO-Tabelle) sind bereits dort definiert und werden hier nur wiederverwendet, nicht neu geschrieben. */ /* ---------- vh-h2-gruender (Kapitel 05, id="geschichte") ---------- */ .vh-h2-gruender__grid { display: block; } @media (min-width: 900px) { .vh-h2-gruender__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; } } .vh-h2-gruender__media { position: relative; margin: 0 0 var(--space-6); } @media (min-width: 900px) { .vh-h2-gruender__media { margin: 0; } } .vh-h2-gruender__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); } .vh-h2-gruender__text { min-width: 0; } .vh-h2-gruender__zitate { margin-top: var(--space-5); display: flex; flex-direction: column; gap: 10px; } .vh-h2-gruender__zitat { font-family: var(--font-display); font-size: 20px; line-height: 1.5; color: var(--text-body); margin: 0; } .vh-h2-gruender__wer { font-size: 14px; color: var(--text-muted); margin: 4px 0 0; } .vh-h2-gruender__fakten { font-size: 15px; color: var(--text-soft); margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; align-items: center; } .vh-h2-gruender__sep { color: var(--text-muted); } .vh-h2-gruender .vh-btn { margin-top: var(--space-6); } /* ---------- vh-h2-herkunft ---------- */ .vh-h2-herkunft__grid { display: block; } @media (min-width: 900px) { .vh-h2-herkunft__grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-16); align-items: center; } } .vh-h2-herkunft__media { margin: 0 0 var(--space-6); min-width: 0; } @media (min-width: 900px) { .vh-h2-herkunft__media { margin: 0; } } .vh-h2-herkunft__text { min-width: 0; } .vh-h2-herkunft__text p { font-size: 16px; line-height: 1.6; color: var(--text-body); margin: 0 0 12px; } .vh-h2-herkunft .vh-btn { margin-top: var(--space-5); } /* ---------- vh-h2-magazin ---------- */ .vh-h2-magazin__layout { display: block; } @media (min-width: 900px) { .vh-h2-magazin__layout { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: start; } } .vh-h2-feature { display: flex; flex-direction: column; text-decoration: none; color: var(--text-body); min-width: 0; } .vh-h2-feature__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--color-mint-shop); } .vh-h2-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .vh-h2-feature__body { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-4); } .vh-h2-feature__titel { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 28px); line-height: 1.2; color: var(--text-body); } .vh-h2-feature__teaser { font-size: 15px; color: var(--text-soft); margin: 0; } .vh-h2-row { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--text-body); padding: var(--space-4) 0; border-top: var(--border-width) solid var(--border-default); min-width: 0; } .vh-h2-magazin__layout .vh-h2-row:first-of-type { border-top: 0; } @media (max-width: 899px) { .vh-h2-magazin__layout .vh-h2-row:first-of-type { border-top: var(--border-width) solid var(--border-default); margin-top: var(--space-6); } } .vh-h2-row__media { flex: 0 0 120px; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: var(--color-mint-shop); } .vh-h2-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .vh-h2-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .vh-h2-row__titel { font-family: var(--font-display); font-size: 20px; line-height: 1.25; color: var(--text-body); } .vh-h2-row__teaser { font-size: 14px; color: var(--text-soft); margin: 0; } .vh-h2-magazin__cta { text-align: center; margin-top: var(--space-8); } @media (hover: hover) { .vh-h2-feature__media img, .vh-h2-row__media img { transition: transform var(--duration-base) var(--ease-out); } .vh-h2-feature:hover .vh-h2-feature__media img, .vh-h2-row:hover .vh-h2-row__media img { transform: scale(1.03); } } /* ---------- vh-h2-schluss (Mint-Band) ---------- */ .vh-h2-schluss { background: var(--color-mint); border-top: 0; } /* Fixer 23.09.2026: gleicher Fund wie .vh-h2-jahre - Fokus-Ring gegen --color-mint sonst nur ~1,95:1. */ .vh-h2-schluss :focus-visible { outline-color: var(--text-body); } .vh-h2-schluss__inner { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .vh-scope .vh-h2-schluss h2 { font-size: clamp(30px, 6vw, 48px); } .vh-h2-schluss__sub { font-size: 15px; color: var(--text-soft); margin: 0; } .vh-h2-schluss .vh-btn { margin-top: var(--space-3); width: auto; } /* ---------- Breadcrumb-Ausblendung (Seitenrahmen, WP-P20 §2-Analogie für die V2-Vorlage) ---------- */ /* Vorsorglich hier ergänzt (Zuständigkeit zwischen den Teilen A/B/C nicht explizit zugewiesen, WP-P22-Brief nennt sie nicht erneut) — doppelt gesetzt ist harmlos (identischer Selektor). */ .template-page-vh-home-v2 .breadcrumb-main { display: none; } /* ===== Hauptmodell r2 (Live-Messung 23.09. 23:20, mobil 13.876 px): mobile Höhen-Trimms ===== */ @media (max-width: 699px) { .vh-h2-panel--gross { aspect-ratio: 16 / 10; } /* zwei große Wege-Panels: 4:3 → 16:10 (−100 px) */ } @media (max-width: 899px) { .vh-h2-gruender__media { max-width: 78%; } /* Gründerfoto 4:5 nicht vollbreit (−100 px) */ .vh-h2-herkunft__media .vh-h-video, .vh-h2-herkunft__media img { aspect-ratio: 4 / 3; } /* Loop 1:1 → 4:3 (−90 px) */ .vh-h2-row { padding: 12px 0; } .vh-h2-row__media { flex-basis: 96px; } /* Magazin-Zeilen kompakter */ .vh-h2-row__titel { font-size: 18px; } } /* ===== Hauptmodell r3 (Sichtung v2r1 mobil): Karte verdeckte 90 % des Videos — Video 50vh frei, Karte darunter, kompakt ===== */ @media (max-width: 699px) { .vh-h2-hero__stage { height: 50vh; min-height: 360px; overflow: visible; } .vh-h2-hero__overlay { margin: -40px 16px 0; } .vh-h2-hero__ki { position: absolute; top: 10px; left: 16px; } .vh-h2-hero__card { padding: 18px 18px 20px; } .vh-h2-hero__story { font-size: 24px; line-height: 1.22; } .vh-scope .vh-h2-hero__h1 { margin-top: 10px; font-size: 18px; } .vh-h2-hero__sub, .vh-h2-hero__trust { display: none; } /* Subline steht in der Direktantwort, Trust im Footer/FAQ */ .vh-h2-hero__ctas { margin-top: 12px; gap: 6px; } .vh-h2-hero__ctas .vh-btn--secondary { border: 0; background: transparent; box-shadow: none; padding: 6px 0; min-height: 0; text-decoration: underline; text-underline-offset: 3px; } } /* ===== r4 Teil A ===== */ /* WP-P23 r4 Teil A — Startseite V2 "Story": Hero-Karte als zentrierte Glas-Karte statt der deckenden Karte unten links, Produktkarten-Regel shopweit (siehe assets/vh-brand.css Z. 407-414 und assets/vh-c2.css "Karten-Höhen"/"Bestseller-Fond"), KI-Bildunterschriften aus Hero und Tagesleiste entfernt (Markup s. sections/vh-h2-hero.liquid, sections/vh-h2-tag.liquid). Brief: neustart-2026/arbeitspakete/WP-P23-startseite-v2-r4-komposition.md §1 Teil A. Anlass — Inhaber 24.09.2026, wörtlich sinngemäß: r3 zurückgewiesen mit "alles viel zu weit links … Container leicht transparent machen … [mobil] der erste Container im Video drinnen … schöner anordnen … hör auf mit 'KI-generiertes Bild' unter dem Bild". Ausschließlich Kaskaden-Overrides auf die bestehenden .vh-h2-hero__*-Selektoren (gleiche Spezifität, später im File = gewinnt) — keine neuen Selektoren, keine Strukturänderung außer der in der Liquid-Datei entfernten KI-Zeile. Farben nur Tokens aus vh-brand.css; EINZIGE Ausnahme (von WP-P23 §1 selbst so vorgegeben): die Glas-Karte — Hintergrund rgba(255,255,255,.80), Rand rgba(255,255,255,.6) und die @supports-Fallback-Deckfarbe rgba(255,255,255,.94) sind alle drei derselbe "durchscheinendes Weiß mit Blur"-Ton, kein Farb-Token bildet das ab. Kein !important. */ /* ---------- Stage: mobil höher, damit die Karte VOLLSTÄNDIG im Video Platz hat (§1) ---------- */ .vh-h2-hero__stage { overflow: hidden; } @media (max-width: 699px) { .vh-h2-hero__stage { height: 68vh; min-height: 520px; overflow: hidden; } } @media (min-width: 700px) { .vh-h2-hero__stage { height: min(78vh, 820px); } } /* ---------- Overlay: reiner Positionierungs-Layer für die (einzige verbliebene) Karte. Mobil-Wert ist jetzt die Basis (Karte fest im unteren Drittel des Videos, kein negativer Margin, kein Herausragen); Desktop überschreibt auf horizontal+vertikal zentriert (vorher zu weit links). ---------- */ .vh-h2-hero__overlay { position: absolute; left: 16px; right: 16px; top: auto; bottom: 20px; margin: 0; align-items: center; } @media (min-width: 700px) { .vh-h2-hero__overlay { left: 50%; right: auto; bottom: clamp(32px, 7vh, 80px); transform: translateX(-50%); margin: 0; max-width: none; width: min(760px, calc(100% - 64px)); } } /* ---------- Karte: Glas statt deckender Fläche, Text zentriert, Buttons auf Desktop als zentrierte Gruppe nebeneinander statt volle Breite ---------- */ .vh-h2-hero__card { background: rgba(255, 255, 255, .80); /* Ausnahme von der Token-Pflicht, s. Kopfkommentar */ -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(255, 255, 255, .6); /* dieselbe Ausnahme */ text-align: center; width: 100%; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vh-h2-hero__card { background: rgba(255, 255, 255, .94); } /* dieselbe Ausnahme, deckender Ersatzton */ } .vh-h2-hero__ctas { justify-content: center; } @media (min-width: 700px) { /* r0 (WP-P22b) setzte hier zusätzlich max-width:640px direkt auf die Karte — die Karte soll jetzt aber die volle Overlay-Breite (min(760px, calc(100% - 64px)), s. oben) ausfüllen. Override statt Entfernen der alten Regel (Kaskaden-Prinzip dieses Blocks, s. Kopfkommentar). */ .vh-h2-hero__card { max-width: none; } .vh-h2-hero__ctas .vh-btn { flex: 0 1 auto; width: auto; } } /* ---------- Typografie: eine clamp()-Formel je Element statt getrennter Mobil-/Desktop-Werte — deckt beide Breakpoints ab und überschreibt damit auch die älteren r1-r3-Mobil-Sonderregeln oben (gleiche Selektoren, aber dieser Block steht später im File). ---------- */ .vh-h2-hero__story { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.22; text-wrap: balance; } @media (min-width: 700px) { /* Sicherheitsnetz für "Story-Zeile ≤ 2 Zeilen Desktop" (WP-P23 §4) — bei sehr langen Zitaten schneidet der Line-Clamp statt die Karte zu sprengen; bei den kurzen Kandidaten aus WP-P22a bleibt es ohnehin bei 1 Zeile. */ .vh-h2-hero__story { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } } .vh-scope .vh-h2-hero__h1 { font-size: clamp(18px, 1.7vw, 22px); } .vh-h2-hero__sub { font-size: 15px; } /* ===== r4 Teil B ===== */ /* WP-P23 r4 Teil B — Startseite V2 "Story": Gründer/Herkunft/Magazin (Seiten switchen bzw. Herkunft- Montage), KI-Hinweis nur noch am Seitenende, Wegweiser-Tabelle mit Spalte "Passt, wenn …" + mobile Karten, Typografie-Vereinheitlichung. Brief: neustart-2026/arbeitspakete/WP-P23-startseite-v2-r4-komposition.md §1 Teil B. Anlass — Inhaber 24.09.2026, wörtlich sinngemäß: "Bild neben Text und darunter wieder — Seiten switchen … Herstellung nur ein Fläschchen, das gezoomt wird, lass dir mehr einfallen … Welches Produkt passt zu wem: geh hier noch besser rein … Ästhetik, Typografie und Anordnung … KI-Hinweis nicht unter dem Bild." Ausschließlich Kaskaden-Overrides + wenige neue, eigene Klassen (Karten-Variante der Wissen-Tabelle, Listen-Wrapper des Magazins) — keine Strukturänderung an Dateien, die nicht in §1 Teil B stehen (vh-h2-wege.liquid bleibt unangetastet, s. Typografie-Block unten). Farben nur Tokens aus vh-brand.css, kein Hex, kein !important. */ /* ---------- vh-h2-gruender: Desktop-Spalten tauschen (Text links, Foto rechts), Foto 4:5 gekappt --- */ /* WP-P22d hatte grid-template-columns: 5fr 7fr (Foto schmal links, Text breit rechts). Beim reinen order-Tausch ohne diese Zeile stünde der Text jetzt in der schmalen 5fr-Spalte und das Foto in der breiten 7fr-Spalte — falsch herum. Deshalb Spaltenbreiten mitgetauscht: 7fr (Text, jetzt links) 5fr (Foto, jetzt rechts, zusätzlich auf 420px gekappt). */ @media (min-width: 900px) { .vh-h2-gruender__grid { grid-template-columns: 7fr 5fr; } .vh-h2-gruender__text { order: 1; } .vh-h2-gruender__media { order: 2; max-width: 420px; } } .vh-h2-gruender__wer { color: var(--text-soft); } /* ---------- vh-h2-gruender: ohne Bild einspaltig + zentriert (Fix S4, WP-P32, 30.09.2026) ---------- Seiten wie test-autor lassen bild_url/bild bewusst leer (das Porträt steht schon im Seitenkopf) — ohne diesen Zweig reservierte das Zweispalten-Grid trotzdem die Bildspalte, der Text stand linksbündig neben freier Fläche. Zwei Klassen auf demselben Element (Spezifität 0,2,0) gewinnen unabhängig von der Reihenfolge gegen die einfachen .vh-h2-gruender__grid-Regeln oben, auch die Desktop-Spaltentausch-Regel (order/grid-template-columns) — bei display:block hat "order" ohnehin keine Wirkung mehr. Seiten mit Bild (Startseite) bleiben unverändert, da die Modifier-Klasse dort fehlt. */ .vh-h2-gruender__grid.vh-h2-gruender__grid--ohne-bild { display: block; } .vh-h2-gruender__grid--ohne-bild .vh-h2-gruender__text { max-width: 640px; margin: 0 auto; text-align: center; } .vh-h2-gruender__grid--ohne-bild .vh-h2-gruender__text .vh-rule { margin-left: auto; margin-right: auto; } .vh-h2-gruender__grid--ohne-bild .vh-h2-gruender__zitate { align-items: center; } .vh-h2-gruender__grid--ohne-bild .vh-h2-gruender__fakten { justify-content: center; } /* ---------- vh-h2-herkunft: Montage 16:9 statt Einzelflasche 1:1 (Video bleibt links, unverändert) - */ .vh-h2-herkunft__media { max-width: none; } @media (min-width: 900px) { .vh-h2-herkunft__media { max-width: none; margin: 0; } } .vh-h2-herkunft__media .vh-h-video, .vh-h2-herkunft__media img { aspect-ratio: 16 / 9; height: auto; } /* ---------- vh-h2-magazin: Feature rechts, Liste links (eigener Grid-Container statt loser .vh-h2-row-Geschwister, s. Liquid-Kommentar) ---------- */ .vh-h2-magazin__liste { display: flex; flex-direction: column; min-width: 0; } @media (min-width: 900px) { .vh-h2-magazin__layout { grid-template-columns: 5fr 7fr; } .vh-h2-magazin__liste { order: 1; } .vh-h2-feature { order: 2; } } /* ---------- vh-h2-schluss: eine 13px-Hinweiszeile unter dem Button (einziger KI-Hinweis der Seite) - */ .vh-h2-schluss__hinweis { margin: 0; font-size: 13px; color: var(--text-soft); max-width: 60ch; } /* ---------- vh-h2-wissen: 7. Spalte "Passt, wenn …" (Playfair-Zelle), CTA-Reihe primär/sekundär getauscht (Markup s. Liquid), mobile Karten statt Tabelle ---------- */ .vh-h2-wissen .vh-h-table { min-width: 1040px; } .vh-h-table td.vh-h2-wissen__passt { font-family: var(--font-display); font-size: 15px; line-height: 1.4; color: var(--text-body); white-space: normal; min-width: 220px; } .vh-h2-wissen__karten { display: none; } @media (max-width: 899px) { .vh-h-table-hint, .vh-h-table-scroll { display: none; } .vh-h2-wissen__karten { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2); } } .vh-h2-wissen__karte { border: var(--border-width) solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-card); padding: var(--space-5); } .vh-h2-wissen__karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--border-default); } .vh-h2-wissen__karte-titel { font-family: var(--font-display); font-size: 20px; line-height: 1.2; margin: 0; color: var(--text-body); } .vh-h2-wissen__karte-titel a { color: var(--text-body); } .vh-h2-wissen__karte-preis { flex: none; font-family: var(--font-label); font-weight: var(--weight-bold); font-size: 13px; letter-spacing: .04em; color: var(--text-soft); margin: 0; white-space: nowrap; } .vh-h2-wissen__karte-dl { display: grid; grid-template-columns: 1fr; gap: 6px; margin: var(--space-3) 0 0; } .vh-h2-wissen__karte-dl > div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; } .vh-h2-wissen__karte-dl dt { color: var(--text-soft); margin: 0; } .vh-h2-wissen__karte-dl dd { color: var(--text-body); margin: 0; text-align: right; } .vh-h2-wissen__karte-passt { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-default); font-family: var(--font-display); font-size: 18px; line-height: 1.4; color: var(--text-body); } .vh-h2-wissen__karte-passt-label { display: block; font-family: var(--font-label); font-weight: var(--weight-bold); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-link); margin-bottom: 4px; } /* ---------- Typografie global (verankert unter .vh-scope .vh-h2-…, WP-P23 §1 Teil B) -------------- */ /* H2 einheitlich clamp(30px, 4vw, 40px) statt der bisher uneinheitlichen Größen (Basis war .vh-scope h2 { clamp(28px, 3vw, 40px) } aus vh-brand.css, .vh-h2-schluss stach mit 48px heraus). text-wrap:balance ist bereits global auf .vh-scope h1/h2/h3 gesetzt (vh-brand.css Z. 191) — hier nicht erneut nötig. .vh-h2-hero (H1, kein H2) und .vh-h2-intro (kein H2) bleiben ausgenommen. */ .vh-scope .vh-h2-zettel h2, .vh-scope .vh-h2-wege h2, .vh-scope .vh-h2-auswahl h2, .vh-scope .vh-h2-tag h2, .vh-scope .vh-h2-jahre h2, .vh-scope .vh-h2-loox h2, .vh-scope .vh-h2-gruender h2, .vh-scope .vh-h2-herkunft h2, .vh-scope .vh-h2-wissen h2, .vh-scope .vh-h2-magazin h2, .vh-scope .vh-h2-schluss h2 { font-size: clamp(30px, 4vw, 40px); } /* Attributions-/Meta-Zeilen: --text-soft statt --text-muted (WP-P23 §1 Teil B, wörtlich "nicht --text-muted") — reine Farbwechsel, Größen (13/14px) waren bereits im Zielkorridor. */ .vh-h2-zettel__attribution, .vh-h2-tag__attr, .vh-h2-panel--klein .vh-h2-panel__attr { color: var(--text-soft); } /* Sektionsabstände einheitlich --space-10 mobil / --space-16 Desktop (Basis war die feste --section-space: 50px aus .vh-section). Absichtlich OHNE .vh-h2-hero (eigene Fold-Höhenlogik von Teil A, s. dortiger Block) und ohne die Bestand-Sektionen h2-faq/h2-newsletter (WP-P20 §1: nur lesen, unverändert). */ .vh-scope.vh-section.vh-h2-intro, .vh-scope.vh-section.vh-h2-zettel, .vh-scope.vh-section.vh-h2-wege, .vh-scope.vh-section.vh-h2-auswahl, .vh-scope.vh-section.vh-h2-tag, .vh-scope.vh-section.vh-h2-jahre, .vh-scope.vh-section.vh-h2-loox, .vh-scope.vh-section.vh-h2-gruender, .vh-scope.vh-section.vh-h2-herkunft, .vh-scope.vh-section.vh-h2-wissen, .vh-scope.vh-section.vh-h2-magazin, .vh-scope.vh-section.vh-h2-schluss { padding: var(--space-10) 0; } @media (min-width: 900px) { .vh-scope.vh-section.vh-h2-intro, .vh-scope.vh-section.vh-h2-zettel, .vh-scope.vh-section.vh-h2-wege, .vh-scope.vh-section.vh-h2-auswahl, .vh-scope.vh-section.vh-h2-tag, .vh-scope.vh-section.vh-h2-jahre, .vh-scope.vh-section.vh-h2-loox, .vh-scope.vh-section.vh-h2-gruender, .vh-scope.vh-section.vh-h2-herkunft, .vh-scope.vh-section.vh-h2-wissen, .vh-scope.vh-section.vh-h2-magazin, .vh-scope.vh-section.vh-h2-schluss { padding: var(--space-16) 0; } } /* .vh-h2-wege__klein bei nur zwei Einträgen (Hanftee derzeit ausverkauft, w-3 fällt automatisch weg, sections/vh-h2-wege.liquid §"nur_lieferbar") zentriert statt eine leere dritte Grid-Spalte zu zeigen — reiner CSS-Anhang, die Sektion vh-h2-wege selbst bleibt unangetastet (WP-P23 §1 Teil B). :has() erkennt "genau 2 Kinder" (2. Kind ist zugleich letztes Kind); ohne :has()-Unterstützung bleibt die bisherige 3-Spalten-Optik mit einer leeren Spalte (kein Bruch, nur weniger elegant). */ @media (min-width: 700px) { .vh-h2-wege__klein:has(> :nth-child(2):last-child) { display: flex; justify-content: center; gap: var(--grid-gap); } .vh-h2-wege__klein:has(> :nth-child(2):last-child) > * { flex: 0 1 380px; max-width: 380px; } } /* ===== r4 Hauptmodell (Live-Messung v2r4) ===== */ /* Mobil: Karten der Scroll-Reihe auf gleiche Hoehe (Kapseln-Button lag 71 px hoeher als die Nachbarn) */ .vh-h2-auswahl__row { align-items: stretch; } .vh-h2-auswahl__row > .vh-c2-karte { height: auto; align-self: stretch; } /* Wegweiser mobil: Eckdaten eingeklappt, Titel + Preis + "Passt, wenn ..." sichtbar (Sektion war 2.380 px hoch) */ .vh-h2-wissen__karte-details { margin-top: 10px; } .vh-h2-wissen__karte-summary { cursor: pointer; font-family: var(--font-label); font-weight: var(--weight-bold); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-link); list-style: none; display: flex; align-items: center; gap: 6px; padding: 6px 0; } .vh-h2-wissen__karte-summary::-webkit-details-marker { display: none; } .vh-h2-wissen__karte-summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--duration-base) var(--ease-out); } .vh-h2-wissen__karte-details[open] .vh-h2-wissen__karte-summary::after { transform: rotate(-135deg); } .vh-h2-wissen__karte-passt { margin-top: 8px; } /* ===== r5 Hauptmodell (Inhaber 24.09.: "Container weiter links und nach oben, die Fläschchen weiter rechts — der Container darf den Bildhauptbereich nicht überlagern") ===== */ @media (min-width: 700px) { .vh-h2-hero__overlay { left: clamp(24px, 5vw, 96px); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: min(560px, 44%); align-items: flex-start; } .vh-h2-hero__card { text-align: left; } .vh-h2-hero__ctas { justify-content: flex-start; } .vh-h2-hero__video { object-position: 68% 50%; } /* Motiv (Hand + Flasche) sitzt im rechten Bilddrittel; bei schmalen Desktops bleibt es rechts */ } @media (min-width: 1100px) { .vh-h2-hero__overlay { width: min(560px, 40%); } } /* ===== WP-P24 usp ===== */ /* WP-P24 (Inhaber 24.09.2026, Screenshot der bedrop-Sektion "Wirksame Produkte für Dich & die Bienen"): USP-Sektion vh-h2-usp — Kopf links (.vh-section-head reicht ohne den --center-Zusatz, die Basisklasse selbst ist linksbündig, s. vh-brand.css), mittig eine schräg liegende Papierkarte mit Mint-Pin über zwei Grid-Zeilen, vier USPs in den Ecken, auf Desktop vier handgezeichnet wirkende Pfeile, zwei sehr helle Hintergrundkreise. Nur Klassen vh-h2-usp* (keine Verbund- Selektor-Ausnahme nötig). Kein Hex (nur var(--…) aus vh-brand.css), kein !important. Markup: sections/vh-h2-usp.liquid — Figur .vh-h2-usp__zettel + SVG .vh-h2-usp__pfeile + vier .vh-h2-usp__item(--1..--4) sind direkte Kinder von .vh-h2-usp__grid; die Quelltext-Reihenfolge (Zettel zuerst, dann Item 1–4) ist zugleich die Mobil-Reihenfolge (kein CSS "order", WP-P20 §8 Verboten) — die Eckenzuordnung ab 900px kommt ausschließlich über grid-column/grid-row. */ .vh-h2-usp { position: relative; overflow: hidden; } .vh-h2-usp > .vh-container { position: relative; z-index: 1; } /* Zwei helle Hintergrundkreise (Brief: 420px, --color-mint-shop, opacity .45) — overflow:hidden an der Sektion selbst beschneidet sie am Rand, sie ragen nirgends über die Sektion hinaus. */ .vh-h2-usp::before, .vh-h2-usp::after { content: ""; position: absolute; z-index: 0; width: 420px; height: 420px; border-radius: var(--radius-pill); background: var(--color-mint-shop); opacity: .45; pointer-events: none; } .vh-h2-usp::before { top: -180px; left: -160px; } .vh-h2-usp::after { bottom: -180px; right: -160px; } .vh-h2-usp__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } @media (min-width: 480px) { .vh-h2-usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .vh-h2-usp__zettel { grid-column: 1 / -1; } } @media (min-width: 900px) { .vh-h2-usp__grid { grid-template-columns: 1fr minmax(300px, 380px) 1fr; grid-template-rows: auto auto; gap: var(--space-10) var(--space-8); align-items: center; } .vh-h2-usp__zettel { grid-column: 2; grid-row: 1 / span 2; } .vh-h2-usp__item--1 { grid-column: 1; grid-row: 1; } .vh-h2-usp__item--2 { grid-column: 1; grid-row: 2; } .vh-h2-usp__item--3 { grid-column: 3; grid-row: 1; } .vh-h2-usp__item--4 { grid-column: 3; grid-row: 2; } } /* Pfeile: nur Desktop (Brief), absolut über dem Grid, non-uniform Skalierung (preserveAspectRatio="none" im Markup) reicht bis an die vier Icon-Kreise heran. */ .vh-h2-usp__pfeile { display: none; } @media (min-width: 900px) { .vh-h2-usp__pfeile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } } .vh-h2-usp__pfeil, .vh-h2-usp__pfeil-spitze { fill: none; stroke: var(--color-green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Zeichnen-Animation: Grundzustand voll unsichtbar gezeichnet (dasharray = dashoffset), unter .is-in auf 0 -> die Linie "wächst". Der dasharray-Wert ist bewusst großzügig (länger als jeder einzelne Pfad) — ein zu langer Dash-Wert zeichnet trotzdem die volle, durchgehende Linie. */ .vh-h2-usp__pfeil { stroke-dasharray: 400; stroke-dashoffset: 400; } .vh-h2-usp__pfeil-spitze { stroke-dasharray: 60; stroke-dashoffset: 60; } @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .vh-h2-usp__pfeil { transition: stroke-dashoffset 700ms var(--ease-out) 500ms; } .vh-h2-usp__pfeil-spitze { transition: stroke-dashoffset 220ms var(--ease-out) 1150ms; } } html.vh-h-js .vh-h2-usp.is-in .vh-h2-usp__pfeil, html.vh-h-js .vh-h2-usp.is-in .vh-h2-usp__pfeil-spitze { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { .vh-h2-usp__pfeil, .vh-h2-usp__pfeil-spitze { stroke-dashoffset: 0; } } /* Zettel: Papierkarte mit Mint-Pin, schräg (Motiv Kapitel 01 .vh-h2-zettel__karte, hier ohne Zitate, mit Bild statt Text). */ .vh-h2-usp__zettel { position: relative; margin: 0 auto; max-width: 280px; padding: 12px; background: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-md); transform: rotate(-2deg); } @media (min-width: 480px) { .vh-h2-usp__zettel { max-width: 320px; } } @media (min-width: 900px) { .vh-h2-usp__zettel { max-width: none; } } @media (hover: hover) { .vh-h2-usp__zettel { transition: transform var(--duration-base) var(--ease-out); } .vh-h2-usp__zettel:hover { transform: rotate(0deg); } } .vh-h2-usp__zettel::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--color-mint-700); box-shadow: var(--shadow-sm); z-index: 1; } .vh-h2-usp__zettel img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); } /* USP-Kacheln */ .vh-h2-usp__item { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; } .vh-h2-usp__ic { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-mint-shop); color: var(--color-green-deep); display: grid; place-items: center; flex: none; } .vh-h2-usp__ic svg { width: 20px; height: 20px; } .vh-h2-usp__label { font-family: var(--font-label); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--text-body); margin: 0; } .vh-h2-usp__text { font-size: 15px; color: var(--text-soft); margin: 0; max-width: 34ch; } /* Sequenzielles Einblenden der vier USPs: eigene, je Kachel gestaffelte transition-delay zusätzlich zum globalen Sektions-Fade aus vh-h.css. Gleiches Gate-Muster wie dort — die Ausgangswerte (opacity 0 / translateY) gelten ungated, nur die Transition selbst (und damit die Verzögerung) ist an "no-preference" gebunden; unter "reduce" werden Ausgangswerte separat überschrieben, identisch zum globalen Vorbild in assets/vh-h.css. */ html.vh-h-js .vh-h2-usp__item { opacity: 0; transform: translateY(10px); } @media (prefers-reduced-motion: no-preference) { html.vh-h-js .vh-h2-usp__item { transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); } html.vh-h-js .vh-h2-usp.is-in .vh-h2-usp__item--1 { transition-delay: 0ms; } html.vh-h-js .vh-h2-usp.is-in .vh-h2-usp__item--2 { transition-delay: 100ms; } html.vh-h-js .vh-h2-usp.is-in .vh-h2-usp__item--3 { transition-delay: 200ms; } html.vh-h-js .vh-h2-usp.is-in .vh-h2-usp__item--4 { transition-delay: 300ms; } } html.vh-h-js .vh-h2-usp.is-in .vh-h2-usp__item { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.vh-h-js .vh-h2-usp__item { opacity: 1; transform: none; } } /* ===== r8 attr ===== */ /* WP-P25 r8 (Inhaber 24.09.2026, §1/§2/§4/§5) — Teil A: einheitliches Attributions-Markup

für jedes Kundenzitat (Hero-Story, Zettel, Wege-Panels, Tagesleiste, Jahre) statt der bisherigen fünf verschiedenen Klassen/Tags (.vh-h2-hero__story-quelle, .vh-h2-zettel__attribution, .vh-h2-panel__attr, .vh-h2-tag__attr,