/* ============================================================
videte.css — Single Source of Truth for Brand Tokens
Stand: 2026-05-09 / Brand-Konsistenz P0
============================================================ */
/* ============================================================
Language Switcher (DE | FR) — Topbar i18n
Erweiterung 2026-05-09 für /fr/-Subdirectory
============================================================ */
.unav-lang { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-size: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.unav-lang-link { color: rgba(245,241,232,0.6); text-decoration: none; padding: 4px 6px; border-radius: 4px; transition: color 0.15s; }
.unav-lang-link:hover { color: #F5F1E8; text-decoration: none; }
.unav-lang-link.active, .unav-lang-link[aria-current="page"] { color: #5EEAD4; font-weight: 600; }
.unav-lang-sep { color: rgba(245,241,232,0.3); }
@media (max-width: 640px) {
.unav-lang { margin-right: 4px; font-size: 11px; }
.unav-lang-link { padding: 4px; }
}
:root {
/* ---------- Color Palette ---------- */
--vd-teal: #0FA38F; /* Primary Teal — alle CTAs, alle Akzente */
--vd-teal-light: #5EEAD4; /* Light-Akzent für Highlights, Stats */
--vd-teal-hover: #0B8576; /* Hover-Zustand für interaktive Elemente */
--vd-teal-bg: #F0FDFA; /* Light-Background für Cards/Hover */
--vd-cream: #F5F1E8; /* Cream — Logo + Light-Backgrounds Dark-Themes */
--vd-cream-light: #FAF7EE;
--vd-bg: #F8FAFC; /* Light-Page-Background */
--vd-bg-alt: #FFFFFF;
--vd-bg-dark: #0A1628; /* Dark-Page-Background (Dark-Theme + Topbar) */
--vd-bg-dark-alt: #0F1E33;
--vd-text: #0A1628; /* Primary text auf Light */
--vd-text-muted: #64748B;
--vd-text-faint: #94A3B8;
--vd-text-on-dark: rgba(245, 241, 232, 0.92); /* Cream auf Dark */
--vd-text-on-dark-muted: rgba(245, 241, 232, 0.62);
--vd-border: #E2E8F0;
--vd-border-dark: rgba(245, 241, 232, 0.12);
--vd-success: #10B981;
--vd-warning: #F59E0B;
--vd-error: #EF4444;
/* ---------- Typography ---------- */
--vd-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--vd-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
--vd-fs-xs: 12px;
--vd-fs-sm: 13px;
--vd-fs-base: 15px;
--vd-fs-md: 16px;
--vd-fs-lg: 18px;
--vd-fs-xl: 24px;
--vd-fs-2xl: 32px;
--vd-fs-3xl: 48px;
--vd-fs-4xl: 64px;
/* ---------- Spacing ---------- */
--vd-sp-1: 4px;
--vd-sp-2: 8px;
--vd-sp-3: 12px;
--vd-sp-4: 16px;
--vd-sp-5: 24px;
--vd-sp-6: 32px;
--vd-sp-7: 48px;
--vd-sp-8: 64px;
--vd-sp-9: 96px;
/* ---------- Radius ---------- */
--vd-radius-sm: 6px;
--vd-radius: 8px;
--vd-radius-md: 12px;
--vd-radius-lg: 16px;
--vd-radius-xl: 24px;
--vd-radius-pill: 999px;
/* ---------- Shadows ---------- */
--vd-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06);
--vd-shadow: 0 4px 12px rgba(10, 22, 40, 0.08);
--vd-shadow-lg: 0 12px 32px rgba(10, 22, 40, 0.12);
/* ---------- Transitions ---------- */
--vd-transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
--vd-transition-fast: 0.12s ease-out;
/* ---------- Backwards-compat aliases (legacy code uses --accent) ---------- */
--accent: var(--vd-teal);
--accent-light: var(--vd-teal-light);
--accent-dark: var(--vd-teal-hover);
--accent-bg: var(--vd-teal-bg);
}
/* ============================================================
Logo / Brand-Mark System
============================================================ */
.brand,
.vd-brand {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--vd-font-sans);
font-weight: 700;
letter-spacing: -0.02em;
text-decoration: none;
color: inherit;
line-height: 1;
}
.vd-brand-mark {
font-size: 22px;
font-weight: 800;
color: var(--vd-cream);
letter-spacing: -0.025em;
}
.vd-brand-mark--light {
color: var(--vd-cream);
}
.vd-brand-mark--dark {
color: var(--vd-bg-dark);
}
/* Allowed brand-tag variants — KEINE anderen */
.vd-brand-tag {
font-size: 13px;
font-weight: 500;
color: var(--vd-teal-light);
letter-spacing: 0;
margin-left: 2px;
opacity: 0.95;
}
.vd-brand-tag::before { content: '/ '; opacity: 0.6; margin-right: 1px; }
.vd-brand-tag--business { color: var(--vd-teal-light); }
.vd-brand-tag--admin { color: var(--vd-warning); }
/* ============================================================
Button-System
============================================================ */
.vd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
font-family: var(--vd-font-sans);
font-size: var(--vd-fs-sm);
font-weight: 600;
letter-spacing: 0;
border: 1px solid transparent;
border-radius: var(--vd-radius);
cursor: pointer;
text-decoration: none;
transition: all var(--vd-transition);
line-height: 1;
white-space: nowrap;
}
.vd-btn-primary {
background: var(--vd-teal);
color: var(--vd-cream);
border-color: var(--vd-teal);
}
.vd-btn-primary:hover {
background: var(--vd-teal-hover);
border-color: var(--vd-teal-hover);
transform: translateY(-1px);
box-shadow: var(--vd-shadow);
}
.vd-btn-secondary {
background: transparent;
color: var(--vd-teal);
border-color: var(--vd-teal);
}
.vd-btn-secondary:hover {
background: var(--vd-teal);
color: var(--vd-cream);
}
.vd-btn-ghost {
background: transparent;
color: var(--vd-text-muted);
border-color: transparent;
}
.vd-btn-ghost:hover {
color: var(--vd-text);
background: rgba(15, 163, 143, 0.05);
}
.vd-btn-lg { padding: 16px 28px; font-size: var(--vd-fs-md); }
.vd-btn-sm { padding: 8px 14px; font-size: var(--vd-fs-xs); }
/* ============================================================
Topbar — Dark-Theme Standard
============================================================ */
.vd-topbar {
background: var(--vd-bg-dark);
color: var(--vd-text-on-dark);
border-bottom: 1px solid var(--vd-border-dark);
padding: 14px 0;
position: sticky;
top: 0;
z-index: 100;
}
.vd-topbar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.vd-topbar a { color: var(--vd-text-on-dark); text-decoration: none; }
.vd-topbar a:hover { color: var(--vd-cream); }
/* ============================================================
Trust-Strip
============================================================ */
.vd-trust-strip {
background: var(--vd-bg-dark);
color: var(--vd-text-on-dark-muted);
padding: 18px 0;
border-top: 1px solid var(--vd-border-dark);
border-bottom: 1px solid var(--vd-border-dark);
font-size: var(--vd-fs-sm);
}
.vd-trust-strip-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-wrap: wrap;
gap: 14px 32px;
justify-content: center;
align-items: center;
}
.vd-trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.vd-trust-item strong { color: var(--vd-text-on-dark); font-weight: 600; }
@media (max-width: 640px) {
.vd-trust-strip-inner { gap: 10px 18px; font-size: 12px; }
}
/* ============================================================
Founder-Photo — einheitliches System (Welcome / index / ueber-uns)
Default 200px. Modifier --sm / --md / --lg.
Verwendung als Container (Initials-Fallback) ODER als ![]()
.
============================================================ */
.vd-founder-photo {
width: 240px;
height: 240px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(15, 163, 143, 0.15), rgba(94, 234, 212, 0.10));
border: 3px solid var(--vd-teal);
box-shadow: 0 8px 28px rgba(15, 163, 143, 0.18), inset 0 0 0 4px var(--vd-cream);
display: flex;
align-items: center;
justify-content: center;
color: var(--vd-teal);
font-family: var(--vd-font-mono);
font-size: 22px;
font-weight: 700;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0 auto 24px;
position: relative;
overflow: hidden;
object-fit: cover;
object-position: center 22%;
background-size: cover;
background-position: center 22%;
flex-shrink: 0;
}
.vd-founder-photo--sm { width: 160px; height: 160px; font-size: 16px; }
.vd-founder-photo--md { width: 220px; height: 220px; font-size: 20px; }
.vd-founder-photo--lg { width: 280px; height: 280px; font-size: 24px; }
/* Bei ![]()
-Tag oder bei has-img: kein Gradient unter dem Bild */
img.vd-founder-photo,
.vd-founder-photo--has-img {
background: transparent;
border-color: var(--vd-teal);
}
@media (max-width: 720px) {
.vd-founder-photo,
.vd-founder-photo--md { width: 220px; height: 220px; }
.vd-founder-photo--sm { width: 180px; height: 180px; }
.vd-founder-photo--lg { width: 240px; height: 240px; }
}
/* ============================================================
Form-Inputs
============================================================ */
.vd-input,
.vd-select,
.vd-textarea {
width: 100%;
padding: 12px 14px;
font-family: var(--vd-font-sans);
font-size: var(--vd-fs-base);
color: var(--vd-text);
background: var(--vd-bg-alt);
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius);
transition: border-color var(--vd-transition-fast), box-shadow var(--vd-transition-fast);
}
.vd-input:focus,
.vd-select:focus,
.vd-textarea:focus {
outline: none;
border-color: var(--vd-teal);
box-shadow: 0 0 0 3px rgba(15, 163, 143, 0.12);
}
/* ============================================================
Utility classes
============================================================ */
.vd-text-muted { color: var(--vd-text-muted); }
.vd-text-faint { color: var(--vd-text-faint); }
.vd-text-teal { color: var(--vd-teal); }
.vd-text-cream { color: var(--vd-cream); }
.vd-bg-dark { background: var(--vd-bg-dark); color: var(--vd-text-on-dark); }
.vd-bg-cream { background: var(--vd-cream); }
.vd-bg-teal { background: var(--vd-teal); color: var(--vd-cream); }
/* ============================================================
Cream-Section — warmer Brand-Akzent auf Light-Pages
Verwendung:
============================================================ */
.vd-section-cream {
background: var(--vd-cream-light, #FAF7EE);
border-top: 1px solid var(--vd-border);
border-bottom: 1px solid var(--vd-border);
}
/* ============================================================
Icon-System — professionelle Inline-SVG-Icons
Stil: Lucide / Feather (klar, minimal, 24px-Grid, 2px stroke)
Verwendung:
oder direkt inline:
============================================================ */
.vd-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
/* Size-Modifier */
.vd-icon-sm { width: 14px; height: 14px; }
.vd-icon-md { width: 18px; height: 18px; }
.vd-icon-lg { width: 24px; height: 24px; }
.vd-icon-xl { width: 32px; height: 32px; }
/* Span-basierte Icons (mask-image — funktionieren ohne Inline-SVG) */
.vd-icon[class*="vd-icon-"]:not(svg) {
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Icon-Definitionen (alle 24x24 viewBox, Lucide-Style) */
.vd-icon-bolt {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-check {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-cross {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-shield {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-shield-check {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-target {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-arrow-right {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-arrow-up-right {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-arrow-down {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-eye {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-lock {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-clock {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-star {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-zap {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-trending {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-chart {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-users {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-flag {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-printer {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-play {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-mail {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-globe {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-grid {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-layers {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-sliders {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Color helpers für Icons */
.vd-icon-success { color: var(--vd-success); }
.vd-icon-error { color: var(--vd-error); }
.vd-icon-teal { color: var(--vd-teal); }
.vd-icon-cream { color: var(--vd-cream); }
/* ============================================================
Focus-State (a11y)
============================================================ */
.vd-btn:focus-visible,
.vd-input:focus-visible,
.vd-select:focus-visible,
.vd-textarea:focus-visible {
outline: 2px solid var(--vd-teal);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.vd-btn,
.vd-input,
.vd-select,
.vd-textarea {
transition: none;
}
.vd-btn:hover { transform: none; }
}
/* ============================================================
/ueber-uns Components (Brand-Guardian-Spec 2026-05-09)
============================================================ */
/* ---------- Hero-Split (Dark, Text+Foto) ---------- */
.vd-about-hero {
background: var(--vd-bg-dark);
color: var(--vd-text-on-dark);
padding: 96px 0 0;
position: relative;
overflow: hidden;
}
.vd-about-hero::before {
content: '';
position: absolute;
top: -100px; right: -200px;
width: 800px; height: 800px;
background: radial-gradient(circle, rgba(15,163,143,0.18) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.vd-about-hero-inner {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 320px;
gap: 56px;
align-items: center;
}
.vd-about-hero-text { padding-bottom: 96px; }
.vd-about-hero-eyebrow {
display: inline-block;
font-family: var(--vd-font-mono);
font-size: 11px;
font-weight: 600;
color: var(--vd-text-on-dark-muted);
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 20px;
}
.vd-about-hero h1 {
font-family: var(--vd-font-sans);
font-size: 56px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -1.5px;
color: var(--vd-cream);
margin: 0 0 20px;
max-width: 720px;
}
.vd-about-hero-subtitle {
font-size: 19px;
line-height: 1.6;
color: var(--vd-text-on-dark-muted);
font-weight: 400;
max-width: 560px;
margin: 0;
}
.vd-about-hero-photo {
width: 320px;
height: 320px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--vd-teal-light);
box-shadow: 0 0 0 8px rgba(15,163,143,0.08), 0 24px 48px rgba(0,0,0,0.4);
background-size: cover;
background-position: center 22%;
background-repeat: no-repeat;
justify-self: end;
margin-bottom: 56px;
}
@media (max-width: 820px) {
.vd-about-hero { padding: 56px 0 0; }
.vd-about-hero-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
.vd-about-hero-text { padding-bottom: 0; }
.vd-about-hero h1 { font-size: 36px; letter-spacing: -0.8px; max-width: 100%; }
.vd-about-hero-subtitle { font-size: 16px; margin: 0 auto; }
.vd-about-hero-photo { width: 200px; height: 200px; justify-self: center; margin: 0 auto 32px; }
}
/* Text-only Hero-Variante: Foto nicht im Hero, sondern erst in Section 5.
Das verstärkt H1 (text-only Hero-Pattern) und macht Founder-Foto zur "Belohnung beim Scrollen". */
.vd-about-hero--text-only { padding: 96px 0 96px; }
.vd-about-hero-inner--centered {
grid-template-columns: 1fr;
gap: 0;
text-align: center;
max-width: 820px;
}
.vd-about-hero-inner--centered .vd-about-hero-text { padding-bottom: 0; }
.vd-about-hero-inner--centered h1 { margin-left: auto; margin-right: auto; }
.vd-about-hero-inner--centered .vd-about-hero-subtitle { margin: 0 auto; }
@media (max-width: 820px) {
.vd-about-hero--text-only { padding: 56px 0 64px; }
}
/* ---------- Pillar-Card ---------- */
.vd-pillar-card {
background: var(--vd-bg-alt);
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius-lg);
padding: 32px;
display: flex;
flex-direction: column;
transition: border-color var(--vd-transition), transform var(--vd-transition), box-shadow var(--vd-transition);
}
.vd-pillar-card:hover {
border-color: var(--vd-teal);
transform: translateY(-2px);
box-shadow: var(--vd-shadow);
}
.vd-pillar-card-icon {
width: 56px;
height: 56px;
background: var(--vd-teal-bg);
border-radius: var(--vd-radius);
display: flex;
align-items: center;
justify-content: center;
color: var(--vd-teal);
margin-bottom: 20px;
}
.vd-pillar-card-icon .vd-icon { width: 24px; height: 24px; }
.vd-pillar-card h3 {
font-family: var(--vd-font-sans);
font-size: 20px;
font-weight: 700;
color: var(--vd-text);
letter-spacing: -0.2px;
line-height: 1.3;
margin: 0 0 12px;
}
.vd-pillar-card-body {
font-size: 15px;
line-height: 1.65;
color: var(--vd-text-muted);
margin: 0 0 16px;
}
.vd-pillar-card-proof {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--vd-border);
font-family: var(--vd-font-mono);
font-size: 12px;
line-height: 1.55;
color: var(--vd-text-faint);
letter-spacing: 0.01em;
}
.vd-pillar-card-proof strong {
color: var(--vd-teal);
font-weight: 600;
display: block;
margin-bottom: 4px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 10px;
}
.vd-pillar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 920px) {
.vd-pillar-grid { grid-template-columns: 1fr; gap: 16px; }
.vd-pillar-card { padding: 24px; }
}
/* ---------- Value-Row (Werte mit Icon links) ---------- */
.vd-value-row {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 4px 0;
}
.vd-value-row-icon {
width: 40px;
height: 40px;
background: var(--vd-teal-bg);
border-radius: var(--vd-radius);
display: flex;
align-items: center;
justify-content: center;
color: var(--vd-teal);
flex-shrink: 0;
}
.vd-value-row-icon .vd-icon { width: 18px; height: 18px; }
.vd-value-row-text { flex: 1; }
.vd-value-row-text h4 {
font-family: var(--vd-font-sans);
font-size: 16px;
font-weight: 700;
color: var(--vd-text);
letter-spacing: -0.1px;
margin: 0 0 4px;
line-height: 1.35;
}
.vd-value-row-text p {
font-size: 14px;
line-height: 1.6;
color: var(--vd-text-muted);
margin: 0;
}
.vd-value-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 32px;
}
@media (max-width: 720px) {
.vd-value-grid { grid-template-columns: 1fr; gap: 24px; }
}
/* ---------- Ghost-Button auf Dark-BG ---------- */
.vd-btn-ghost-light {
background: transparent;
color: var(--vd-cream);
border-color: rgba(245, 241, 232, 0.22);
}
.vd-btn-ghost-light:hover {
background: rgba(245, 241, 232, 0.08);
border-color: rgba(245, 241, 232, 0.45);
color: var(--vd-cream);
transform: translateY(-1px);
}
/* ============================================================
Blog-Komponenten (Stand 2026-05-09 / Foundation P0)
Mobile-first, max-width 760px Article-Body, 1180px Hub-Wrap
============================================================ */
/* ---------- Blog-Wraps ---------- */
.vd-blog-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 48px 24px 80px;
}
.vd-article-wrap {
max-width: 760px;
margin: 0 auto;
padding: 40px 20px 80px;
}
@media (max-width: 640px) {
.vd-blog-wrap { padding: 32px 16px 56px; }
.vd-article-wrap { padding: 24px 16px 60px; }
}
/* ---------- Blog-Hero (Hub-Page) ---------- */
.vd-blog-hero {
text-align: center;
padding: 24px 0 56px;
border-bottom: 1px solid var(--vd-border);
margin-bottom: 64px;
}
.vd-blog-hero h1 {
font-family: var(--vd-font-sans);
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
color: var(--vd-text);
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 16px;
}
.vd-blog-hero p {
font-size: clamp(15px, 1.6vw, 18px);
color: var(--vd-text-muted);
max-width: 680px;
margin: 0 auto;
line-height: 1.6;
}
.vd-blog-hero-meta {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 24px;
margin-top: 24px;
font-size: var(--vd-fs-sm);
color: var(--vd-text-muted);
font-weight: 600;
}
.vd-blog-hero-meta span::before {
content: "\2022";
margin-right: 8px;
color: var(--vd-teal);
}
.vd-blog-hero-meta span:first-child::before { content: ""; margin: 0; }
/* ---------- Blog-Pillar-Grid (Hub-Page Cluster-Cards) ---------- */
.vd-blog-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 72px;
}
@media (max-width: 980px) { .vd-blog-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vd-blog-pillars { grid-template-columns: 1fr; } }
.vd-blog-pillar {
display: block;
background: var(--vd-bg-alt);
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius-md);
padding: 24px;
text-decoration: none;
color: inherit;
min-height: 170px;
position: relative;
overflow: hidden;
transition: transform var(--vd-transition), box-shadow var(--vd-transition), border-color var(--vd-transition);
}
.vd-blog-pillar::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--vd-pillar-accent, var(--vd-teal));
}
.vd-blog-pillar:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px -10px rgba(15, 23, 42, 0.18);
border-color: var(--vd-text-faint);
text-decoration: none;
}
.vd-blog-pillar-icon { font-size: 28px; margin-bottom: 10px; display: block; line-height: 1; }
.vd-blog-pillar-label {
font-size: var(--vd-fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vd-pillar-accent, var(--vd-teal));
font-weight: 700;
margin-bottom: 6px;
display: block;
}
.vd-blog-pillar-title {
font-size: var(--vd-fs-lg);
font-weight: 700;
color: var(--vd-text);
line-height: 1.3;
margin-bottom: 6px;
display: block;
}
.vd-blog-pillar-desc {
font-size: var(--vd-fs-sm);
color: var(--vd-text-muted);
line-height: 1.5;
display: block;
}
.vd-blog-pillar-count {
position: absolute;
top: 18px;
right: 20px;
font-size: 11px;
font-weight: 700;
color: var(--vd-text-faint);
background: #F1F5F9;
padding: 3px 8px;
border-radius: var(--vd-radius-pill);
}
/* ---------- Blog-Cluster (Themengruppen) ---------- */
.vd-blog-cluster {
margin-bottom: 64px;
scroll-margin-top: 24px;
}
.vd-blog-cluster-header {
display: flex;
align-items: flex-end;
gap: 14px;
flex-wrap: wrap;
border-bottom: 1px solid var(--vd-border);
padding-bottom: 14px;
margin-bottom: 24px;
}
.vd-blog-cluster-icon { font-size: 26px; line-height: 1; }
.vd-blog-cluster-headtext { flex: 1; min-width: 200px; }
.vd-blog-cluster-headtext h2 {
font-family: var(--vd-font-sans);
font-size: var(--vd-fs-xl);
font-weight: 700;
color: var(--vd-text);
letter-spacing: -0.01em;
margin: 0 0 4px;
}
.vd-blog-cluster-headtext p {
font-size: var(--vd-fs-sm);
color: var(--vd-text-muted);
margin: 0;
}
.vd-blog-cluster-count {
font-size: var(--vd-fs-xs);
color: var(--vd-text-faint);
font-weight: 600;
letter-spacing: 0.04em;
}
/* ---------- Blog-Card-Grid (in Cluster) ---------- */
.vd-blog-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (max-width: 760px) { .vd-blog-cards { grid-template-columns: 1fr; } }
.vd-blog-card {
display: block;
background: var(--vd-bg-alt);
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius);
padding: 18px 20px;
text-decoration: none;
color: inherit;
position: relative;
transition: transform var(--vd-transition-fast), box-shadow var(--vd-transition-fast), border-color var(--vd-transition-fast);
}
.vd-blog-card:hover {
border-color: var(--vd-teal-light);
box-shadow: 0 4px 16px -8px rgba(15, 163, 143, 0.25);
transform: translateY(-1px);
text-decoration: none;
}
.vd-blog-card h3 {
font-family: var(--vd-font-sans);
font-size: var(--vd-fs-base);
font-weight: 700;
color: var(--vd-text);
line-height: 1.35;
margin: 0 0 6px;
}
.vd-blog-card p {
font-size: var(--vd-fs-sm);
color: var(--vd-text-muted);
line-height: 1.5;
margin: 0;
}
.vd-blog-card--pillar {
background: linear-gradient(180deg, var(--vd-teal-bg) 0%, var(--vd-bg-alt) 60%);
border-color: var(--vd-teal-light);
}
.vd-blog-card--pillar::before {
content: "Pillar";
position: absolute;
top: -9px;
left: 16px;
background: var(--vd-teal);
color: var(--vd-cream);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 8px;
border-radius: 4px;
}
/* ---------- Article-Page Komponenten ---------- */
/* Eyebrow / Tag */
.vd-blog-tag {
display: inline-block;
background: var(--vd-teal-bg);
color: var(--vd-teal);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 10px;
border-radius: var(--vd-radius-sm);
margin-bottom: 14px;
}
/* Breadcrumb */
.vd-blog-breadcrumb {
font-size: var(--vd-fs-xs);
color: var(--vd-text-faint);
margin-bottom: 18px;
}
.vd-blog-breadcrumb a {
color: var(--vd-text-muted);
text-decoration: none;
}
.vd-blog-breadcrumb a:hover { color: var(--vd-teal); }
/* Article-Title (H1) — bewusst oberhalb der globalen H1-Defaults */
.vd-article-title {
font-family: var(--vd-font-sans);
font-size: 32px;
font-weight: 700;
line-height: 1.3;
color: var(--vd-text);
letter-spacing: -0.01em;
margin: 0 0 12px;
}
@media (max-width: 640px) {
.vd-article-title { font-size: 25px; }
}
/* Article-Meta-Zeile (Datum, Autor, Lesedauer) */
.vd-article-meta {
font-size: var(--vd-fs-sm);
color: var(--vd-text-muted);
margin-bottom: 24px;
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
align-items: center;
}
.vd-article-meta-sep { color: var(--vd-text-faint); }
/* Article-Body — Typo-Hierarchie für Long-Form Content */
.vd-article-body {
font-family: var(--vd-font-sans);
color: var(--vd-text);
line-height: 1.75;
}
.vd-article-body p {
margin: 0 0 16px;
color: #334155; /* Slightly softer than --vd-text for body-copy comfort */
font-size: var(--vd-fs-md);
}
.vd-article-body h2 {
font-family: var(--vd-font-sans);
font-size: var(--vd-fs-xl);
font-weight: 700;
color: var(--vd-text);
margin: 40px 0 14px;
padding-top: 14px;
border-top: 1px solid var(--vd-border);
letter-spacing: -0.01em;
line-height: 1.3;
}
.vd-article-body h2:first-of-type {
border-top: none;
padding-top: 0;
margin-top: 0;
}
.vd-article-body h3 {
font-family: var(--vd-font-sans);
font-size: var(--vd-fs-lg);
font-weight: 700;
color: var(--vd-text);
margin: 24px 0 10px;
line-height: 1.35;
}
.vd-article-body ul,
.vd-article-body ol {
margin: 12px 0 18px 22px;
color: #334155;
font-size: var(--vd-fs-md);
}
.vd-article-body li { margin-bottom: 6px; line-height: 1.7; }
.vd-article-body a { color: var(--vd-teal); text-decoration: underline; text-underline-offset: 2px; }
.vd-article-body a:hover { color: var(--vd-teal-hover); }
.vd-article-body strong { color: var(--vd-text); font-weight: 600; }
@media (max-width: 640px) {
.vd-article-body h2 { font-size: 20px; margin: 32px 0 12px; }
.vd-article-body h3 { font-size: 17px; }
}
/* Lead / Intro-Paragraph */
.vd-article-intro {
font-size: 17px;
color: #334155;
line-height: 1.8;
margin: 0 0 24px;
border-left: 3px solid var(--vd-teal);
padding-left: 16px;
}
/* Disclaimer-Box (Hinweis, Erinnerung) */
.vd-article-disclaimer {
background: #FFFBEB;
border: 1px solid #FDE68A;
border-radius: var(--vd-radius);
padding: 16px 20px;
margin: 24px 0;
font-size: var(--vd-fs-sm);
color: #78350F;
line-height: 1.65;
}
.vd-article-disclaimer strong {
color: #92400E;
display: block;
margin-bottom: 4px;
}
/* Callout (positiv, Faustregel, Tipp — Teal-Akzent) */
.vd-article-callout {
background: var(--vd-teal-bg);
border-left: 3px solid var(--vd-teal);
padding: 16px 20px;
border-radius: 0 var(--vd-radius) var(--vd-radius) 0;
margin: 20px 0;
font-size: var(--vd-fs-base);
color: #134E4A;
line-height: 1.65;
}
.vd-article-callout strong { color: var(--vd-teal-hover); }
/* Warn (Achtung, rote Flagge) */
.vd-article-warn {
background: #FEF2F2;
border-left: 3px solid #DC2626;
padding: 16px 20px;
border-radius: 0 var(--vd-radius) var(--vd-radius) 0;
margin: 20px 0;
font-size: var(--vd-fs-base);
color: #7F1D1D;
line-height: 1.65;
}
.vd-article-warn strong { color: #B91C1C; }
/* Example-Box (Praxis-Vergleich, Rechen-Beispiel) */
.vd-article-example {
background: var(--vd-bg-alt);
border: 1px solid var(--vd-teal);
border-radius: var(--vd-radius-md);
padding: 22px;
margin: 24px 0;
}
.vd-article-example-title {
font-size: var(--vd-fs-sm);
font-weight: 700;
color: var(--vd-teal);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.vd-article-example h3 { margin-top: 14px; }
/* Tables (Daten-Vergleiche) */
.vd-article-body table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 18px 0;
background: var(--vd-bg-alt);
border-radius: var(--vd-radius);
overflow: hidden;
border: 1px solid var(--vd-border);
}
.vd-article-body thead tr { background: #F1F5F9; text-align: left; }
.vd-article-body th,
.vd-article-body td {
padding: 10px 12px;
border-bottom: 1px solid var(--vd-border);
vertical-align: top;
}
.vd-article-body th { font-weight: 700; color: var(--vd-text); }
.vd-article-body tbody tr:last-child td { border-bottom: none; }
.vd-article-body tbody tr:nth-child(even) { background: var(--vd-bg); }
.vd-article-scroll-wrap { overflow-x: auto; margin: 18px 0; }
.vd-article-scroll-wrap table { min-width: 560px; }
/* Quellen-Verweis */
.vd-article-source {
font-size: var(--vd-fs-xs);
color: var(--vd-text-muted);
font-style: italic;
line-height: 1.55;
}
.vd-article-source a { color: var(--vd-teal); }
/* Table of Contents (Long-Form Articles) */
.vd-article-toc {
background: var(--vd-bg-alt);
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius-md);
padding: 20px 24px;
margin: 24px 0 36px;
}
.vd-article-toc-title {
font-size: var(--vd-fs-sm);
font-weight: 700;
color: var(--vd-text);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.vd-article-toc ol {
margin: 0 0 0 20px;
font-size: var(--vd-fs-base);
}
.vd-article-toc a {
color: #334155;
text-decoration: none;
}
.vd-article-toc a:hover {
color: var(--vd-teal);
text-decoration: underline;
}
/* CTA-Box (Article-Ende, "zur Plattform") */
.vd-article-cta {
background: linear-gradient(135deg, var(--vd-teal) 0%, var(--vd-teal-hover) 100%);
color: var(--vd-cream);
border-radius: var(--vd-radius-lg);
padding: 28px 24px;
margin: 32px 0;
text-align: center;
}
.vd-article-cta h3 {
color: var(--vd-cream);
font-family: var(--vd-font-sans);
font-size: var(--vd-fs-lg);
font-weight: 700;
margin: 0 0 8px;
line-height: 1.3;
}
.vd-article-cta p {
color: rgba(245, 241, 232, 0.88);
font-size: var(--vd-fs-sm);
margin: 0 0 16px;
line-height: 1.55;
}
.vd-article-cta .vd-btn {
background: var(--vd-cream);
color: var(--vd-teal);
border-color: var(--vd-cream);
}
.vd-article-cta .vd-btn:hover {
background: var(--vd-bg-alt);
color: var(--vd-teal-hover);
border-color: var(--vd-bg-alt);
}
/* Related Articles (Article-Ende) */
.vd-article-related {
background: var(--vd-bg-alt);
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius-md);
padding: 24px;
margin: 32px 0;
}
.vd-article-related-title {
font-size: var(--vd-fs-sm);
font-weight: 700;
color: var(--vd-text);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 14px;
}
.vd-article-related-list {
list-style: none;
margin: 0;
padding: 0;
}
.vd-article-related-list li {
padding: 10px 0;
border-bottom: 1px solid #F1F5F9;
margin: 0;
}
.vd-article-related-list li:last-child { border-bottom: none; }
.vd-article-related-list a {
font-weight: 600;
text-decoration: none;
color: var(--vd-teal);
font-size: var(--vd-fs-base);
}
.vd-article-related-list a:hover { text-decoration: underline; }
.vd-article-related-list .vd-article-related-desc {
display: block;
font-size: 13px;
color: var(--vd-text-muted);
font-weight: 400;
margin-top: 2px;
}
/* Author-Block (Article-Footer) */
.vd-article-author {
background: var(--vd-bg);
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius-md);
padding: 20px 24px;
margin: 32px 0 24px;
font-size: var(--vd-fs-sm);
color: var(--vd-text-muted);
line-height: 1.7;
}
.vd-article-author strong {
color: var(--vd-text);
display: block;
margin-bottom: 6px;
}
/* Back-Link ("Zurück zu …") */
.vd-article-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--vd-fs-sm);
color: var(--vd-teal);
text-decoration: none;
font-weight: 600;
margin-bottom: 24px;
transition: opacity var(--vd-transition-fast);
}
.vd-article-back:hover { opacity: 0.7; text-decoration: none; }
/* Blog-Footer (Bottom of Article + Hub) */
.vd-blog-footer {
text-align: center;
margin-top: 36px;
font-size: var(--vd-fs-xs);
color: var(--vd-text-faint);
padding-top: 24px;
border-top: 1px solid var(--vd-border);
}
.vd-blog-footer a {
color: var(--vd-text-muted);
text-decoration: none;
font-weight: 600;
}
.vd-blog-footer a:hover { color: var(--vd-teal); }
.vd-blog-footer p { margin: 4px 0; }
/* ============================================================
Blog-Polish (Stand 2026-05-09 / UI-Designer P0)
Visual layer on top of foundation — reading-progress, hero-eyebrow,
key-fact panel, hub-intro, mobile spacing.
============================================================ */
/* ---------- Reading-Progress-Bar (top of viewport) ---------- */
.vd-read-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--vd-teal), var(--vd-teal-light));
z-index: 200;
transition: width 0.05s linear;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.vd-read-progress { transition: none; }
}
/* ---------- Article Hero (Eyebrow + H1 + Meta) ---------- */
.vd-article-hero {
margin: 8px 0 32px;
padding: 0 0 24px;
border-bottom: 1px solid var(--vd-border);
}
.vd-article-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--vd-font-mono);
font-size: 11px;
font-weight: 600;
color: var(--vd-teal);
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 14px;
}
.vd-article-eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: var(--vd-teal);
}
.vd-article-hero .vd-article-title {
font-size: clamp(28px, 4vw, 38px);
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 16px;
max-width: 660px;
}
.vd-article-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
align-items: center;
font-size: var(--vd-fs-sm);
color: var(--vd-text-muted);
}
.vd-article-hero-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.vd-article-hero-meta-item .vd-icon { width: 14px; height: 14px; opacity: 0.7; }
.vd-article-hero-meta-sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--vd-text-faint);
display: inline-block;
}
@media (max-width: 640px) {
.vd-article-hero { margin: 0 0 24px; padding-bottom: 20px; }
.vd-article-hero .vd-article-title { font-size: 26px; }
.vd-article-hero-meta { gap: 6px 12px; font-size: 13px; }
.vd-article-hero-meta-sep { display: none; }
}
/* ---------- Article Lead-Paragraph (replaces .intro) ---------- */
.vd-article-lead {
font-size: 18px;
line-height: 1.7;
color: var(--vd-text);
font-weight: 400;
margin: 0 0 28px;
padding: 0;
border: none;
letter-spacing: -0.005em;
}
.vd-article-lead strong { color: var(--vd-text); font-weight: 600; }
@media (max-width: 640px) {
.vd-article-lead { font-size: 16px; }
}
/* ---------- Key-Fact-Panel (eye-catcher early in article) ---------- */
.vd-article-keyfact {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: center;
background: linear-gradient(135deg, var(--vd-teal-bg) 0%, var(--vd-bg-alt) 100%);
border: 1px solid var(--vd-teal-light);
border-radius: var(--vd-radius-md);
padding: 20px 24px;
margin: 24px 0 32px;
}
.vd-article-keyfact-icon {
width: 44px;
height: 44px;
background: var(--vd-bg-alt);
border: 1px solid var(--vd-teal-light);
border-radius: var(--vd-radius);
display: flex;
align-items: center;
justify-content: center;
color: var(--vd-teal);
flex-shrink: 0;
}
.vd-article-keyfact-icon .vd-icon { width: 22px; height: 22px; }
.vd-article-keyfact-text {
font-size: 15px;
line-height: 1.55;
color: #134E4A;
}
.vd-article-keyfact-text strong { color: var(--vd-teal-hover); font-weight: 700; }
@media (max-width: 640px) {
.vd-article-keyfact { padding: 16px 18px; gap: 14px; }
.vd-article-keyfact-text { font-size: 14px; }
}
/* ---------- Hub-Intro-Card (above pillar grid) ---------- */
.vd-blog-hub-intro {
text-align: center;
margin-bottom: 56px;
}
.vd-blog-hub-eyebrow {
display: inline-block;
font-family: var(--vd-font-mono);
font-size: 11px;
font-weight: 600;
color: var(--vd-teal);
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 16px;
}
/* ---------- Pillar-Card Icon-Slot (replace emoji with vd-icon) ---------- */
.vd-blog-pillar-iconslot {
width: 40px;
height: 40px;
border-radius: var(--vd-radius);
background: rgba(15, 163, 143, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vd-pillar-accent, var(--vd-teal));
margin-bottom: 12px;
}
.vd-blog-pillar-iconslot .vd-icon { width: 20px; height: 20px; }
/* Cluster-Header — Icon-Slot (Lucide-Style instead of emoji) */
.vd-blog-cluster-iconslot {
width: 36px;
height: 36px;
border-radius: var(--vd-radius);
background: var(--vd-teal-bg);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vd-teal);
flex-shrink: 0;
}
.vd-blog-cluster-iconslot .vd-icon { width: 18px; height: 18px; }
/* ---------- Universal Top-Nav (legacy compat — used by blog hub) ---------- */
/* The .unav stack already exists in legacy pages — we add brand-tag fixes only. */
.vd-unav-brand-tag {
margin-left: 8px;
font-family: var(--vd-font-mono);
font-size: 13px;
font-weight: 500;
color: var(--vd-teal-light);
letter-spacing: 0;
opacity: 0.92;
}
/* ---------- Footer-Strip (consistent across all pages) ---------- */
.vd-footer-strip {
text-align: center;
font-size: var(--vd-fs-xs);
color: var(--vd-text-faint);
padding: 28px 0 0;
border-top: 1px solid var(--vd-border);
margin-top: 48px;
}
.vd-footer-strip p { margin: 4px 0; }
.vd-footer-strip a {
color: var(--vd-text-muted);
text-decoration: none;
font-weight: 600;
}
.vd-footer-strip a:hover { color: var(--vd-teal); }
.vd-footer-strip-links {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 16px;
margin-top: 8px;
}
/* ---------- Additional Lucide-Style Icons (Blog-needed) ---------- */
.vd-icon-calendar {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-bookopen {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-tag {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-coins {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-receipt {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-megaphone {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-cookie {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-mountain {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-info {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-arrow-left {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ---------- Brand-Page Icons (Formats / Brand-Safety / Tables) ---------- */
.vd-icon-film {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-message {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-mic {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-clipboard {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-user-check {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-search {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-shield-tick {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-alert-triangle {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-scale {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-file-text {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-pin {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vd-icon-building {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ---------- Universal-Nav Icon-Slot (Header-Dropdown Menu Items) ---------- */
.unav-menu-item .ico .vd-icon {
width: 18px;
height: 18px;
color: var(--vd-teal);
}
/* ============================================================
Article Legacy Components — answer-card, audit-step, highlight-box
Pattern aus den Steuern/AHV-Articles + KMU-Audit-Article
============================================================ */
.vd-article-answer {
background: linear-gradient(180deg, rgba(15, 163, 143, 0.06) 0%, rgba(15, 163, 143, 0.03) 100%);
border: 1px solid rgba(15, 163, 143, 0.18);
border-left: 4px solid var(--vd-teal);
border-radius: 12px;
padding: 20px 24px;
margin: 28px 0;
}
.vd-article-answer .label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--vd-teal);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.vd-article-answer .label::before {
content: "";
width: 14px;
height: 14px;
background: var(--vd-teal);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.vd-article-answer .text {
font-size: 17px;
line-height: 1.55;
color: var(--vd-ink);
font-weight: 500;
}
.vd-article-step {
display: flex;
gap: 16px;
align-items: flex-start;
background: #ffffff;
border: 1px solid var(--vd-border);
border-radius: 12px;
padding: 18px 22px;
margin: 14px 0;
flex-wrap: wrap;
}
.vd-article-step .step-num {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--vd-teal);
color: #ffffff;
font-weight: 700;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.vd-article-step .step-text {
font-weight: 600;
font-size: 16px;
color: var(--vd-ink);
align-self: center;
}
.vd-article-step .step-explain {
flex-basis: 100%;
margin-left: 52px;
margin-top: 6px;
font-size: 15px;
color: var(--vd-ink-soft);
line-height: 1.6;
}
.vd-article-step .step-explain a {
color: var(--vd-teal);
text-decoration: underline;
text-underline-offset: 3px;
}
.vd-article-highlight {
background: linear-gradient(135deg, var(--vd-teal) 0%, #0d8e7c 100%);
color: #ffffff;
border-radius: 14px;
padding: 28px 32px;
margin: 36px 0;
text-align: center;
box-shadow: 0 8px 24px rgba(15, 163, 143, 0.18);
}
.vd-article-highlight h3 {
color: #ffffff;
font-size: 22px;
font-weight: 700;
margin: 0 0 10px;
}
.vd-article-highlight p {
color: rgba(255, 255, 255, 0.92);
font-size: 16px;
line-height: 1.6;
margin: 0 0 18px;
}
.vd-article-highlight .cta,
.vd-article-highlight a.cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffffff;
color: var(--vd-teal);
padding: 12px 24px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vd-article-highlight .cta:hover,
.vd-article-highlight a.cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
/* ============================================================
Orphan-Klassen-Heilung (Stand 2026-05-09)
Bringt unprefixed Inline-Klassen aus 45 migrierten Articles
in Brand-Konsistenz. Scoped auf .vd-article-wrap damit es
keine globalen Side-Effects gibt.
============================================================ */
/* Error-Box / Warning-Box — rote Akzent-Box, identisch zu vd-article-warn */
.vd-article-wrap .error-box,
.vd-article-wrap .warning-box {
background: #FEF2F2;
border: 1px solid #FECACA;
border-left: 3px solid #DC2626;
border-radius: var(--vd-radius);
padding: 14px 18px;
margin: 14px 0;
font-size: var(--vd-fs-sm);
color: #7F1D1D;
line-height: 1.6;
}
.vd-article-wrap .error-box strong,
.vd-article-wrap .warning-box strong {
color: #B91C1C;
display: block;
margin-bottom: 4px;
font-weight: 700;
}
/* Step-List (numbered list with brand styling) */
.vd-article-wrap ol.step-list,
.vd-article-wrap ul.step-list {
list-style: none;
margin: 18px 0;
padding: 0;
counter-reset: step;
}
.vd-article-wrap ol.step-list > li,
.vd-article-wrap ul.step-list > li {
position: relative;
padding: 12px 16px 12px 52px;
margin: 0 0 10px;
background: var(--vd-bg-alt);
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius);
font-size: var(--vd-fs-md);
line-height: 1.6;
color: #334155;
counter-increment: step;
}
.vd-article-wrap ol.step-list > li::before,
.vd-article-wrap ul.step-list > li::before {
content: counter(step);
position: absolute;
left: 14px;
top: 12px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--vd-teal);
color: #ffffff;
font-family: var(--vd-font-mono);
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.vd-article-wrap ol.step-list strong,
.vd-article-wrap ul.step-list strong {
display: block;
color: var(--vd-text);
font-weight: 700;
margin-bottom: 2px;
}
/* Method-Row / Provider-Row / Stage-Row / Diff-Row — Vergleichs-Karten */
.vd-article-wrap .method-row,
.vd-article-wrap .provider-row,
.vd-article-wrap .stage-row {
display: grid;
gap: 14px;
margin: 18px 0;
}
.vd-article-wrap .method-card,
.vd-article-wrap .provider-card,
.vd-article-wrap .stage-card,
.vd-article-wrap .diff-card,
.vd-article-wrap .question-box {
background: var(--vd-bg-alt);
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius-md);
padding: 16px 20px;
margin: 12px 0;
}
.vd-article-wrap .method-head,
.vd-article-wrap .provider-head,
.vd-article-wrap .stage-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.vd-article-wrap .method-name,
.vd-article-wrap .provider-name,
.vd-article-wrap .stage-name {
font-weight: 700;
font-size: 15px;
color: var(--vd-text);
}
.vd-article-wrap .method-label {
font-family: var(--vd-font-mono);
font-size: 11px;
color: var(--vd-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.vd-article-wrap .method-val {
font-weight: 600;
color: var(--vd-teal);
font-size: 14px;
}
/* Verdict / Tag chips (gut, mittel, top, crit, warn) */
.vd-article-wrap .method-verdict,
.vd-article-wrap .provider-tag,
.vd-article-wrap .stage-tag {
display: inline-block;
font-family: var(--vd-font-mono);
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.vd-article-wrap .verdict-top,
.vd-article-wrap .provider-tag.gut,
.vd-article-wrap .verdict-gut {
background: #DCFCE7;
color: #14532D;
}
.vd-article-wrap .verdict-mittel,
.vd-article-wrap .provider-tag.mittel,
.vd-article-wrap .stage-tag.warn {
background: #FEF3C7;
color: #78350F;
}
.vd-article-wrap .stage-tag.crit {
background: #FEE2E2;
color: #7F1D1D;
}
.vd-article-wrap .stage-tag {
background: var(--vd-teal-bg);
color: var(--vd-teal);
}
/* Myth-Box (Mythen-Aufklärung) */
.vd-article-wrap .myth-box {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: start;
background: #FEF3C7;
border: 1px solid #FDE68A;
border-radius: var(--vd-radius-md);
padding: 16px 20px;
margin: 16px 0;
}
.vd-article-wrap .myth-label {
font-family: var(--vd-font-mono);
font-size: 11px;
font-weight: 700;
color: #92400E;
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(146, 64, 14, 0.1);
padding: 4px 10px;
border-radius: 4px;
white-space: nowrap;
}
.vd-article-wrap .myth-text {
font-size: 14px;
color: #78350F;
line-height: 1.55;
}
.vd-article-wrap .myth-text strong { color: #92400E; }
/* Code-Box / Code-Block — monospace snippet */
.vd-article-wrap .code-box,
.vd-article-wrap .code-block {
background: #0F172A;
color: #E2E8F0;
border-radius: var(--vd-radius);
padding: 14px 18px;
margin: 14px 0;
font-family: var(--vd-font-mono);
font-size: 13px;
line-height: 1.6;
overflow-x: auto;
border: 1px solid #1E293B;
}
.vd-article-wrap .code-box code,
.vd-article-wrap .code-block code {
font-family: inherit;
background: transparent;
color: inherit;
padding: 0;
}
/* Math-Box — Berechnungs-/Formel-Block */
.vd-article-wrap .math-box {
background: var(--vd-teal-bg);
border: 1px solid rgba(15, 163, 143, 0.18);
border-left: 3px solid var(--vd-teal);
border-radius: 0 var(--vd-radius) var(--vd-radius) 0;
padding: 14px 18px;
margin: 16px 0;
font-family: var(--vd-font-mono);
font-size: 13.5px;
color: #134E4A;
line-height: 1.7;
}
.vd-article-wrap .math-box strong { color: var(--vd-teal-hover); font-weight: 700; }
/* FAQ-Item / FAQ-Q / FAQ-A */
.vd-article-wrap .faq,
.vd-article-wrap .faq-item {
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius);
padding: 14px 18px;
margin: 10px 0;
background: #ffffff;
}
.vd-article-wrap .faq-q {
font-weight: 700;
color: var(--vd-text);
font-size: 15px;
margin-bottom: 6px;
}
.vd-article-wrap .faq-a {
font-size: 14.5px;
color: #334155;
line-height: 1.65;
}
/* Question-Box (12-Fragen-Persona-Pattern) */
.vd-article-wrap .q-num {
display: inline-block;
font-family: var(--vd-font-mono);
font-size: 11px;
font-weight: 700;
color: var(--vd-teal);
background: var(--vd-teal-bg);
padding: 2px 8px;
border-radius: 4px;
margin-right: 8px;
}
.vd-article-wrap .q-text {
font-weight: 700;
color: var(--vd-text);
font-size: 15px;
display: inline;
}
.vd-article-wrap .q-explain {
display: block;
margin-top: 6px;
font-size: 14px;
color: var(--vd-text-muted);
line-height: 1.6;
}
/* Reality / Conclusion / Checklist — Akzent-Boxen */
.vd-article-wrap .reality,
.vd-article-wrap .conclusion {
background: var(--vd-bg-alt);
border-left: 3px solid var(--vd-teal);
border-radius: 0 var(--vd-radius) var(--vd-radius) 0;
padding: 14px 18px;
margin: 18px 0;
font-size: var(--vd-fs-md);
color: #334155;
line-height: 1.65;
}
.vd-article-wrap .reality strong,
.vd-article-wrap .conclusion strong { color: var(--vd-teal-hover); }
.vd-article-wrap .checklist {
list-style: none;
margin: 14px 0;
padding: 0;
}
.vd-article-wrap .checklist > li {
position: relative;
padding-left: 28px;
margin-bottom: 8px;
line-height: 1.6;
font-size: var(--vd-fs-md);
color: #334155;
}
.vd-article-wrap .checklist > li::before {
content: "";
position: absolute;
left: 4px;
top: 6px;
width: 14px;
height: 14px;
background: var(--vd-teal);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* CTA standalone (outside vd-article-highlight) — wird nur als Fallback gebraucht */
.vd-article-wrap > .cta,
.vd-article-wrap p > a.cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--vd-teal);
color: #ffffff;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: background 0.15s;
}
.vd-article-wrap > .cta:hover,
.vd-article-wrap p > a.cta:hover {
background: var(--vd-teal-hover);
color: #ffffff;
text-decoration: none;
}
/* Generic helpers used in some legacy Articles */
.vd-article-wrap .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin: 16px 0;
}
.vd-article-wrap .col {
background: var(--vd-bg-alt);
border: 1px solid var(--vd-border);
border-radius: var(--vd-radius);
padding: 14px 16px;
font-size: 14px;
line-height: 1.6;
color: #334155;
}
.vd-article-wrap .col strong { display: block; margin-bottom: 4px; color: var(--vd-text); }
.vd-article-wrap .num {
font-family: var(--vd-font-mono);
font-weight: 700;
color: var(--vd-teal);
font-size: 18px;
display: block;
margin-bottom: 4px;
}
/* ============================================================
Hub-Page Foundation (replaces inline .hub-wrap, .cluster, etc.)
Lets blog/index.html drop its local rules in favour of these.
============================================================ */
.vd-blog-hub-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 56px 24px 80px;
}
@media (max-width: 640px) {
.vd-blog-hub-wrap { padding: 32px 16px 56px; }
}
.vd-blog-pillars-section { margin-bottom: 72px; }
.vd-blog-pillars-section-label {
font-family: var(--vd-font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--vd-teal);
text-align: center;
margin-bottom: 18px;
}
.vd-blog-cluster {
margin-bottom: 72px;
scroll-margin-top: 80px;
}
/* ============================================================
User-Avatar + Dropdown (Header) — assets/header-auth.js
Wird bei eingeloggtem User in `.unav-right` (oder `.topnav`)
per JS injiziert. Light-Variante (Topbar-on-dark) und Dark-Variante
(Konto-Page-on-dark) — Avatar funktioniert auf beiden Hintergründen.
============================================================ */
.vd-user-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.vd-user-avatar {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
background: var(--vd-teal);
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
font-family: var(--vd-font-sans);
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
/* Touch-target: visuelles 36px, klickbares >=44px durch :before */
position: relative;
}
.vd-user-avatar::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
}
.vd-user-avatar:hover,
.vd-user-avatar:focus-visible {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(15, 163, 143, 0.35);
background: var(--vd-teal-hover);
outline: none;
}
.vd-user-avatar[aria-expanded="true"] {
background: var(--vd-teal-hover);
box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.35);
}
.vd-user-avatar-initial {
line-height: 1;
letter-spacing: 0;
pointer-events: none;
}
.vd-user-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
background: #FFFFFF;
color: var(--vd-text);
border: 1px solid var(--vd-border);
border-radius: 12px;
min-width: 260px;
padding: 6px;
box-shadow: 0 12px 32px rgba(10, 22, 40, 0.18);
z-index: 1000;
font-family: var(--vd-font-sans);
}
.vd-user-menu[hidden] { display: none; }
.vd-user-menu-head {
padding: 12px 14px 10px;
display: flex;
flex-direction: column;
gap: 2px;
}
.vd-user-menu-name {
font-family: var(--vd-font-mono);
font-size: 13px;
font-weight: 600;
color: var(--vd-text);
letter-spacing: -0.01em;
word-break: break-all;
}
.vd-user-menu-mail {
font-family: var(--vd-font-mono);
font-size: 11px;
color: var(--vd-text-faint);
letter-spacing: 0.01em;
word-break: break-all;
}
.vd-user-menu-divider {
height: 1px;
background: var(--vd-border);
margin: 4px 0;
}
.vd-user-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
border: 0;
background: none;
color: var(--vd-text);
font-size: 14px;
font-weight: 500;
font-family: inherit;
text-decoration: none;
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: background 0.12s, color 0.12s;
/* min touch-target 44px */
min-height: 40px;
}
.vd-user-menu-item:hover,
.vd-user-menu-item:focus-visible {
background: var(--vd-teal-bg);
color: var(--vd-teal-hover);
text-decoration: none;
outline: none;
}
.vd-user-menu-ico {
flex-shrink: 0;
color: var(--vd-text-muted);
}
.vd-user-menu-item:hover .vd-user-menu-ico,
.vd-user-menu-item:focus-visible .vd-user-menu-ico {
color: var(--vd-teal);
}
.vd-user-menu-logout {
color: var(--vd-text-muted);
}
.vd-user-menu-logout:hover,
.vd-user-menu-logout:focus-visible {
background: rgba(239, 68, 68, 0.08);
color: var(--vd-error);
}
.vd-user-menu-logout:hover .vd-user-menu-ico,
.vd-user-menu-logout:focus-visible .vd-user-menu-ico {
color: var(--vd-error);
}
@media (max-width: 480px) {
.vd-user-menu {
min-width: 240px;
/* Auf sehr engen Screens nicht aus dem Viewport rausfliegen */
max-width: calc(100vw - 24px);
right: 0;
}
.vd-user-avatar { width: 38px; height: 38px; min-width: 38px; }
}
/* ============================================================
A11y P0 (2026-05-09)
Skip-Link + globaler Focus-Visible-Indicator
============================================================ */
:root {
--vd-teal-text: #0B8576; /* WCAG-AA-konforme Variante fuer Body-Text auf Light-BG */
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--vd-teal);
color: var(--vd-cream, #fff);
padding: 10px 14px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
z-index: 9999;
}
.skip-link:focus {
left: 8px;
top: 8px;
outline: 2px solid var(--vd-cream, #fff);
}
main:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--vd-teal);
outline-offset: 2px;
border-radius: 4px;
}
/* P0 Contrast-Fix (2026-05-09)
Buttons mit weisser Schrift auf Teal: dunklerer Teal-Ton sorgt fuer
WCAG-AA-konformes Kontrast-Verhaeltnis (ca. 4.5:1 statt 3.0:1).
Wir nutzen :where() fuer Specificity-Boost ohne Override-Krieg,
und :not([style]) damit existing inline-styles unberuehrt bleiben.
--vd-teal bleibt fuer Akzent-Farben/Borders/Backgrounds wie gehabt. */
body .btn-primary:not([style*="background"]) {
background: var(--vd-teal-text, #0B8576);
}
body .btn-primary:not([style*="background"]):hover {
background: var(--vd-teal-hover, #0A6F65);
}
/* ============================================================
P1 Pack (2026-05-09) — Brand-Score 7.5 -> 8.5
============================================================ */
/* ---- Item 11: Tap-Targets >= 44px (Apple HIG / WCAG 2.5.5) ----
Inline-Stylesheets in Legacy-Pages setzen .unav-link Padding auf 8px 14px,
was bei 13px Schrift nur ~32px Hoehe ergibt. Der videte.css-Override
wird nach den inline-Styles geladen und greift dank Body-Specificity.
Ziel: 44x44px ohne Layout-Shift, Mobile mind. 40px. */
body .unav .unav-link,
body .unav .unav-drop-btn {
padding: 12px 16px;
min-height: 44px;
line-height: 1.2;
}
@media (max-width: 780px) {
body .unav .unav-link,
body .unav .unav-drop-btn {
padding: 10px 12px;
min-height: 40px;
font-size: 13px; /* Override gegen alte 12px-Mobile-Verkleinerung */
}
}
/* ---- Item 17: aria-current="page" Visual-Hint im Universal-Nav ----
Subtile Teal-Underline + Teal-Light-Color, damit Screen-Reader-User
und sehende User die aktuelle Seite sofort erkennen. */
.unav .unav-link[aria-current="page"],
.audience-switch a[aria-current="page"] {
color: var(--vd-teal-light, #5EEAD4);
border-bottom: 2px solid var(--vd-teal, #0FA38F);
border-radius: 0;
}
/* ---- Item 14: B2B Trust-Strip-Mini (kompakter Hero-Strip) ---- */
.vd-trust-strip-mini {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
align-items: center;
justify-content: center;
margin: 24px auto 0;
padding: 14px 16px;
max-width: 760px;
background: rgba(245, 241, 232, 0.04);
border: 1px solid rgba(245, 241, 232, 0.10);
border-radius: var(--vd-radius-md, 12px);
font-size: 13px;
color: var(--vd-text-on-dark-muted, rgba(245, 241, 232, 0.62));
font-family: var(--vd-font-sans);
line-height: 1.4;
}
.vd-trust-strip-mini > span {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.vd-trust-strip-mini strong {
color: var(--vd-text-on-dark, rgba(245, 241, 232, 0.92));
font-weight: 600;
}
.vd-trust-strip-mini .vd-icon {
width: 14px;
height: 14px;
color: var(--vd-teal-light, #5EEAD4);
flex-shrink: 0;
}
@media (max-width: 640px) {
.vd-trust-strip-mini {
gap: 8px 12px;
font-size: 12px;
padding: 12px 14px;
}
.vd-trust-strip-mini > span { white-space: normal; }
}