/* Variante 3: ruhige Farbwelt. Weiß und helles Grau als Basis, weiches Schwarz für Schrift,
   der Akzentton nur als gezielter Kontrast. Baut auf Variante 2 auf. */
.v3 {
  --white: #ffffff;
  --grey: #f3f3f3;
  --grey-2: #e8e8e8;
  --ink: #2b2b2b;
  --line: rgba(43, 43, 43, 0.14);
  --line-dark: rgba(43, 43, 43, 0.14);
  color: var(--ink);
}
.v3 h1, .v3 h2, .v3 h3, .v3 h4 { font-weight: 600; }

/* Abschnitte: hell, grau im Wechsel */
.v3 .dark { background: var(--grey); color: var(--ink); }
.v3 .facts { background: var(--white); border-bottom: 1px solid var(--line); }
.v3 .contact { border-top: 1px solid var(--line); }

/* Hero */
.v3 .hero-block { background: var(--grey-2); }
.v3 .marquee { background: var(--white); color: var(--ink); border-block: 1px solid var(--line); }
.v3 .marquee span { font-weight: 600; }
.v3 .marquee .sep { background: var(--signal); width: 0.4em; height: 0.4em; }

/* Über mich */
.v3 .frame--signal { background: var(--grey-2); }
.v3 .offset-block { border: 1px solid rgba(43, 43, 43, 0.35); }
.v3 .btn:hover, .v3 .dark .btn:hover { background: var(--ink); color: var(--white); }
.v3 .btn:hover::after { background: var(--white); }

/* Leistungen */
.v3 .services { border-top: 1px solid var(--ink); }
.v3 .services li::after { background: var(--white); }
.v3 .services li:hover::before { color: var(--signal); }
.v3 .services p { color: rgba(43, 43, 43, 0.72); }
.v3 .services li:hover p { color: var(--ink); }
.v3 .svc-icon, .v3 .services li:hover .svc-icon { stroke: var(--ink); stroke-width: 2; }
.v3 .services li:hover .svc-icon { stroke: var(--signal); }

/* Ablauf */
.v3 .steps li { background: var(--grey); color: var(--ink); }
.v3 .steps p { color: rgba(43, 43, 43, 0.8); }
.v3 .steps .n { color: var(--ink); transition: color .5s; }
.v3 .steps li.on .n { color: var(--signal); }

/* Kundenstimmen */
.v3 .slider-viewport { border-top: 1px solid var(--ink); }
.v3 .quote figcaption span { color: rgba(43, 43, 43, 0.65); }
.v3 .slider-btn { border: 1.5px solid var(--ink); color: var(--ink); }
.v3 .slider-btn:hover { background: var(--signal); border-color: var(--signal); color: var(--white); }
.v3 .slider-dots button { border: 1.5px solid var(--ink); }
.v3 .slider-dots button[aria-current="true"] { border-color: var(--signal); }
.v3 .rings { stroke: var(--ink); stroke-opacity: 0.1; }

/* Footer */
.v3 .site-footer { background: #e2e2e2; color: var(--ink); }
.v3 .site-footer .foot-logo { width: auto; }
.v3 .site-footer .foot-logo img { width: 180px; height: auto; }
.v3 .site-footer a:hover { color: var(--signal); }
.v3 .site-footer .legal { border-top-color: var(--line); }

/* Kontakt: Block hellgrau wie im Hero (für einen kräftigen Farbblock hier var(--signal) setzen) */
.v3 .contact-block { background: #eeeeee; }

/* Hero: Textabzeichen näher zur Mitte und 20 % größer */
.v3 { --blk: min(33vw, calc(var(--max) * 0.364)); }
.v3 .badge { width: clamp(115px, 13.2vw, 240px); right: calc(var(--blk) + 1vw); bottom: clamp(28px, 4.5vw, 80px); }
@media (max-width: 860px) { .v3 .badge { right: auto; left: 5vw; width: 110px; } }

/* Kundenstimmen: dunkler Hintergrund */
.v3 #kundenstimmen { background: var(--ink); color: var(--white); }
.v3 #kundenstimmen .slider-viewport { border-top-color: rgba(255, 255, 255, 0.85); }
.v3 #kundenstimmen .quote figcaption span { color: rgba(255, 255, 255, 0.68); }
.v3 #kundenstimmen .slider-bar { border-top-color: rgba(255, 255, 255, 0.2); }
.v3 #kundenstimmen .slider-btn { border-color: var(--white); color: var(--white); }
.v3 #kundenstimmen .slider-btn:hover { background: var(--signal); border-color: var(--signal); }
.v3 #kundenstimmen .slider-dots button { border-color: var(--white); }
.v3 #kundenstimmen .slider-dots button[aria-current="true"] { border-color: var(--signal); }
.v3 #kundenstimmen .rings { stroke: var(--white); stroke-opacity: 0.12; }

/* Footerzeile (Impressum, Datenschutz) als schwarzer Balken über die ganze Breite */
.v3 .site-footer { padding-bottom: 0; }
.v3 .site-footer .top { padding-bottom: clamp(32px, 4vw, 56px); }
.v3 .footer-bar { background: var(--ink); color: var(--white); }
.v3 .footer-bar .legal { margin: 0 auto; padding-block: 18px; border-top: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.v3 .footer-bar a { color: var(--white); text-decoration: none; font-family: var(--head); font-weight: 500; font-size: 0.95rem; }
.v3 .footer-bar a:hover { color: var(--signal); }