/* Variante 4: Zwischending. Ruhige Basis aus Variante 3 (Weiß, helles Grau, weiches Schwarz),
   dazu wieder kräftige Farbflächen an ausgewählten Stellen wie in Variante 2. */
.v4 h1, .v4 h2, .v4 h3, .v4 h4 { font-weight: 700; }

/* Farbflächen zurück */
.v4 .hero-block { background: var(--signal); }
.v4 .contact-block { background: var(--signal); }
.v4 .frame--signal { background: var(--signal); }
.v4 .offset-block { border: 2px solid var(--ink); }
.v4 .marquee { background: var(--signal); color: var(--white); border-block: 2px solid var(--ink); }
.v4 .marquee .sep { background: var(--ink); width: 0.55em; height: 0.55em; }

/* Leistungen wieder dunkel mit orangem Hover */
.v4 #leistungen { background: var(--ink); color: var(--white); --line-dark: rgba(255, 255, 255, 0.22); }
.v4 #leistungen .services { border-top: 2px solid var(--white); }
.v4 #leistungen .services li::after { background: var(--signal); }
.v4 #leistungen .services li:hover::before { color: var(--ink); }
.v4 #leistungen .services p { color: rgba(255, 255, 255, 0.78); }
.v4 #leistungen .services li:hover p { color: var(--white); }
.v4 #leistungen .svc-icon, .v4 #leistungen .services li:hover .svc-icon { stroke: var(--white); stroke-width: 2.6; }

/* Ablauf: dunkle Karten mit Akzentziffern */
.v4 .steps li { background: var(--ink); color: var(--white); }
.v4 .steps p { color: rgba(255, 255, 255, 0.84); }
.v4 .steps .n { color: var(--signal); }

/* Footer komplett schwarz, Menü und Logo hell */
.v4 .site-footer { background: var(--ink); color: var(--white); }
.v4 .site-footer a { color: var(--white); }
.v4 .site-footer a:hover { color: var(--signal); }
.v4 .site-footer .foot-logo img { width: 200px; }
.v4 .footer-bar { border-top: 1px solid rgba(255, 255, 255, 0.18); }

/* Das dunkle Grün (--signal) ist auf Schwarz zu schwach, dort kommt eine hellere Stufe zum Einsatz */
.v4 { --signal-hi: #9bbb9d; }
.v4 .dark .label::before { background: var(--signal-hi); }
.v4 #leistungen .services li::before { color: var(--signal-hi); }
.v4 #leistungen .services li:hover::before { color: var(--ink); }
.v4 .steps .n, .v4 .steps li.on .n { color: var(--signal-hi); }
.v4 #kundenstimmen .quote blockquote::before { background: var(--signal-hi); }
.v4 #kundenstimmen .slider-count b { color: var(--signal-hi); }
.v4 #kundenstimmen .slider-dots button::after { background: var(--signal-hi); }
.v4 #kundenstimmen .slider-dots button[aria-current="true"] { border-color: var(--signal-hi); }
.v4 .site-footer a:hover, .v4 .footer-bar a:hover { color: var(--signal-hi); }