/*
 * vennetv_bausteine.css — gemeinsame Bausteine der Kundenseiten im Stil „News & Updates“ (A-1779, Venne 20296, 25.10.2026, Session einheitliches-design-shop).
 * Quelle: ~/whm-dev-mirror/templates/lagom2-pages/kb-seiten/vennetv_bausteine.css — nie auf dem Server editieren.
 * Ziel:   templates/lagom2/vennetv_bausteine.css. Heute eingebunden per includes/hooks/venne_kb_seiten.php (nur KB-Seiten mit unserer Seitenwahl);
 *         gedacht als EINE Quelle für alle Seiten (News, Startseite, Kundenbereich) — Umzug je Seite als eigener Schritt, Werte = vennetv_news.css (live F-301).
 * Regeln: vault 03-resources/whm/shop-kaufstrecke-gestaltungsregeln.md §1 (Größenleiter 13 · 14,5 · 17 · 22/26, Akzente nur als Punkt, Kartenabstand 12 / 16 px)
 *         und Rundungs-Tokens (--vtv-r-karte/-bild/-chip aus Hook venne_design_tokens.php). Flächen, Schatten, Linien aus Lagom (--ui-block-*).
 * Alle Klassen beginnen mit vtvb- und wirken nur innerhalb einer Hülle .vtvb (oder auf .vtvb selbst).
 *
 * Bausteine: .vtvb-h (Abschnittstitel) · .vtvb-meta + .vtvb-chip + .vtvb-punkt (Kennzeichen) · .vtvb-lead (Teaser) · .vtvb-link (ganze Karte klickbar)
 *            · .vtvb-auf (Aufmacher: großes Bild + Text) · .vtvb-liste/.vtvb-zeile (ruhige Zeilen mit kleinem 3:2-Bild + Pfeil)
 *            · .vtvb-kacheln/.vtvb-kachel (2er-Raster gleich hoher Bildkarten; Handy: Zeile mit kleinem Bild; --kompakt: Bild klein links)
 *            · .vtvb-symbol (Lagom-Symbol im getönten Feld, mit .vtvb-zeile--symbol/.vtvb-kachel--symbol statt Bild) · .vtvb-band (Kopfband 4:1)
 * Farben je Kennzeichen: .vtvb--gruen (neu/aktiv) · --blau (Info, Standard) · --amber (Warnung/Regel) · --rot (Fehler) · --grau (neutral)
 */

.vtvb {
    --vtvb-gruen: 54, 192, 85;
    --vtvb-blau: 91, 147, 255;
    --vtvb-amber: 245, 165, 36;
    --vtvb-rot: 229, 72, 77;
    --vtvb-grau: 160, 172, 196;
    --vtvb-text: var(--text-body-color, hsla(220, 100%, 96%, .92));
    --vtvb-mute: var(--text-lighter-color, hsla(220, 100%, 94%, .8));
    --vtvb-head: var(--text-heading-color, #fff);
    --vtvb-line: var(--ui-block-divider-color, rgba(178, 204, 255, .12));
    --vtvb-r: var(--vtv-r-karte, var(--ui-block-border-radius, 8px));
    --vtvb-r-bild: var(--vtv-r-bild, 12px);
    --vtvb-abstand: 12px;
    --vtvb-bildgrund: #141b2d;
}
@media (min-width: 768px) {
    .vtvb { --vtvb-abstand: 16px; }
}
.vtvb--gruen { --vtvb-akzent: var(--vtvb-gruen); }
.vtvb--blau  { --vtvb-akzent: var(--vtvb-blau); }
.vtvb--amber { --vtvb-akzent: var(--vtvb-amber); }
.vtvb--rot   { --vtvb-akzent: var(--vtvb-rot); }
.vtvb--grau  { --vtvb-akzent: var(--vtvb-grau); }

/* ---------- Abschnittstitel ---------- */
.vtvb-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 16px !important;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 300;
    color: var(--vtvb-head);
}
@media (min-width: 768px) {
    .vtvb-h { font-size: 26px; }
}
* + .vtvb-abschnitt, .vtvb-abschnitt + .vtvb-abschnitt { margin-top: 40px; }

/* ---------- Kennzeichen, Datum/Nebenangaben ---------- */
.vtvb-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 20px;
    color: var(--vtvb-mute);
}
.vtvb-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 9px 2px 8px;
    border-radius: var(--vtv-r-chip, 4px);
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px var(--vtvb-line);
    color: var(--vtvb-head);
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    white-space: nowrap;
}
.vtvb-chip--leise { color: var(--vtvb-mute); font-weight: 400; }
.vtvb-chip .ls, .vtvb-chip .lm { font-size: 12px; }
.vtvb-punkt {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(var(--vtvb-akzent, var(--vtvb-blau)));
    box-shadow: 0 0 0 3px rgba(var(--vtvb-akzent, var(--vtvb-blau)), .18);
}

/* ---------- Titel-Link: ganze Karte/Zeile klickbar, Fokus als Kante ---------- */
.vtvb h2, .vtvb h3 { margin: 0; }
.vtvb-link, .vtvb-link:hover, .vtvb-link:focus { color: var(--vtvb-head); text-decoration: none; }
.vtvb-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.vtvb-link:focus-visible { outline: none; }
.vtvb-auf:has(.vtvb-link:focus-visible),
.vtvb-kachel:has(.vtvb-link:focus-visible),
.vtvb-zeile:has(.vtvb-link:focus-visible) { box-shadow: inset 0 0 0 2px hsla(220, 100%, 94%, .55); }
@supports not selector(:has(a)) { .vtvb-link:focus-visible { outline: 2px solid hsla(220, 100%, 94%, .55); outline-offset: 2px; } }
.vtvb-edit { position: relative; z-index: 2; }

.vtvb-lead {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--vtvb-mute);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.vtvb-weiter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--vtvb-head);
}
.vtvb-weiter .ls { font-size: 12px; transition: transform .15s ease; }

/* ---------- Flächen (Lagom-Block) + Hover nur als hellere Kante ---------- */
.vtvb-auf, .vtvb-liste, .vtvb-kachel {
    position: relative;
    background: var(--ui-block-bg, rgba(93, 105, 128, .16));
    box-shadow: var(--ui-block-shadow, none);
    border-radius: var(--vtvb-r);
    overflow: hidden;
}
.vtvb-auf, .vtvb-kachel, .vtvb-zeile { transition: box-shadow .15s ease, background-color .15s ease; }
.vtvb-auf:hover, .vtvb-auf:focus-within, .vtvb-kachel:hover, .vtvb-kachel:focus-within {
    box-shadow: var(--ui-block-shadow, none), inset 0 0 0 1px hsla(220, 100%, 94%, .22);
}
.vtvb-auf:hover .vtvb-weiter .ls { transform: translateX(3px); }
.vtvb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Aufmacher ---------- */
.vtvb-auf { display: flex; flex-direction: column; margin-bottom: var(--vtvb-abstand); }
.vtvb-auf-bild { aspect-ratio: 2 / 1; background: var(--vtvb-bildgrund); }
.vtvb-auf-text { display: flex; flex-direction: column; padding: 16px 16px 18px; }
.vtvb-auf-titel { font-size: 22px; line-height: 1.3; font-weight: 400; }
.vtvb-auf .vtvb-lead { -webkit-line-clamp: 4; }
@media (min-width: 768px) {
    .vtvb-auf { flex-direction: row; min-height: 240px; }
    .vtvb-auf-bild { flex: 0 0 50%; aspect-ratio: auto; min-height: 240px; }
    .vtvb-auf-text { flex: 1 1 auto; justify-content: center; padding: 24px 28px; }
    .vtvb-auf-titel { font-size: 26px; }
}

/* ---------- Zeilen ---------- */
.vtvb-zeile {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px;
}
.vtvb-zeile + .vtvb-zeile { border-top: 1px solid var(--vtvb-line); }
.vtvb-zeile:hover, .vtvb-zeile:focus-within { background-color: rgba(255, 255, 255, .03); }
.vtvb-zeile-bild { aspect-ratio: 3 / 2; border-radius: var(--vtvb-r-bild); overflow: hidden; background: var(--vtvb-bildgrund); }
.vtvb-zeile-titel { font-size: 17px; line-height: 1.35; font-weight: 500; }
.vtvb-zeile .vtvb-meta { margin-bottom: 4px; }
.vtvb-zeile .vtvb-lead { -webkit-line-clamp: 2; margin-top: 6px; }
.vtvb-pfeil { display: none; }
.vtvb-zeile--ohnebild { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 575.98px) {
    .vtvb-zeile .vtvb-lead { display: none; }
    .vtvb-zeile--ohnebild .vtvb-lead { display: -webkit-box; }
    .vtvb-zeile-titel { font-size: 14.5px; line-height: 1.4; }
}
@media (min-width: 768px) {
    .vtvb-zeile { grid-template-columns: 168px minmax(0, 1fr) 20px; gap: 20px; align-items: center; padding: 20px 24px; }
    .vtvb-zeile--ohnebild { grid-template-columns: minmax(0, 1fr) 20px; }
    .vtvb-pfeil { display: block; font-size: 13px; color: var(--vtvb-mute); transition: transform .15s ease, color .15s ease; }
    .vtvb-zeile:hover .vtvb-pfeil { transform: translateX(3px); color: var(--vtvb-head); }
}

/* ---------- Kacheln: ab 576 px 2er-Raster gleich hoher Bildkarten, darunter Zeilen mit kleinem Bild ---------- */
.vtvb-kacheln { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vtvb-abstand); }
.vtvb-kachel { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; }
.vtvb-kachel-bild { aspect-ratio: 3 / 2; border-radius: var(--vtvb-r-bild); overflow: hidden; background: var(--vtvb-bildgrund); }
.vtvb-kachel-titel { font-size: 17px; line-height: 1.35; font-weight: 500; }
.vtvb-kachel .vtvb-meta { margin: 6px 0 0; }
.vtvb-kachel .vtvb-lead { display: none; }
@media (min-width: 576px) {
    .vtvb-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vtvb-kachel { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
    .vtvb-kachel-bild { aspect-ratio: 2 / 1; border-radius: 0; }
    .vtvb-kachel-text { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
    .vtvb-kachel .vtvb-meta { margin: 0 0 8px; order: -1; }
    .vtvb-kachel .vtvb-lead { display: -webkit-box; -webkit-line-clamp: 2; }
}

/* Kompakt: auch ab 576 px Bild klein links (3:2), Titel + Kennzeichen rechts — ruhiges 2er-Raster ohne große Szenen */
@media (min-width: 576px) {
    .vtvb-kacheln--kompakt .vtvb-kachel { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px; }
    .vtvb-kacheln--kompakt .vtvb-kachel-bild { aspect-ratio: 3 / 2; border-radius: var(--vtvb-r-bild); }
    .vtvb-kacheln--kompakt .vtvb-kachel-text { padding: 0; }
    .vtvb-kacheln--kompakt .vtvb-kachel .vtvb-meta { order: 0; margin: 6px 0 0; }
    .vtvb-kacheln--kompakt .vtvb-kachel .vtvb-lead { display: none; }
}

/* ---------- Symbol-Feld (Lagom-Schrift lm/ls) statt Bild — für Zeilen und kompakte Kacheln ohne Maskottchen ---------- */
.vtvb-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--vtvb-r);
    background: rgba(var(--vtvb-akzent, var(--vtvb-blau)), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--vtvb-akzent, var(--vtvb-blau)), .22);
    color: rgb(var(--vtvb-akzent, var(--vtvb-blau)));
    font-size: 20px;
    line-height: 1;
}
.vtvb-zeile--symbol { grid-template-columns: 44px minmax(0, 1fr); align-items: center; }
.vtvb-kachel--symbol { grid-template-columns: 44px minmax(0, 1fr); }
@media (min-width: 576px) {
    .vtvb-kacheln--kompakt .vtvb-kachel--symbol { grid-template-columns: 44px minmax(0, 1fr); }
}
@media (min-width: 768px) {
    .vtvb-zeile--symbol { grid-template-columns: 44px minmax(0, 1fr) 20px; }
}

/* ---------- Kopfband (Bild 4:1 über einer Karte) ---------- */
.vtvb-band { aspect-ratio: 4 / 1; background: var(--vtvb-bildgrund); overflow: hidden; }
.vtvb-band img { object-position: 50% 28%; }
@media (max-width: 575.98px) {
    .vtvb-band { aspect-ratio: 5 / 2; }
}

@media (prefers-reduced-motion: reduce) {
    .vtvb *, .vtvb { transition: none !important; }
}