/* ================================================================
   T & B GmbH - styles.css
   Logistics and more · Düsseldorf
   Anthrazit + Navy Blue
   ================================================================ */

/* ── CSS VARIABLES ── */
:root {
  --bg-primary:   #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary:  #F1F5F9;
  --bg-card:      #FFFFFF;
  --bg-dark:      #1A1A1A;
  --bg-darker:    #111111;

  --text-primary:   #1A1A1A;
  --text-secondary: #475569;
  --text-tertiary:  #94A3B8;
  --text-on-dark:   #F8FAFC;
  --text-muted:     #CBD5E1;

  --accent:       #1E3A8A;
  --accent-hover: #1E40AF;
  --accent-dark:  #152B66;
  --accent-light: #3B5BC9;
  --accent-soft:  rgba(30, 58, 138, 0.10);

  --secondary:      #06B6D4;
  --secondary-hover:#0891B2;
  --secondary-soft: rgba(6, 182, 212, 0.10);

  --success: #10B981;
  --warning: #F59E0B;

  --border:        #E2E8F0;
  --border-strong: #94A3B8;

  --shadow-sm:   0 2px 4px rgba(15,23,42,0.04);
  --shadow-md:   0 6px 16px rgba(15,23,42,0.08);
  --shadow-lg:   0 20px 50px rgba(15,23,42,0.12);
  --shadow-blue: 0 10px 30px rgba(30,58,138,0.20);

  --font-display: 'Manrope', sans-serif;
  --font-body:    'Inter', sans-serif;

  --z-header:      100;
  --z-mobile-menu: 200;
  --z-modal:       300;

  /* Wird von script.js auf die tatsaechliche Hoehe des Headers
     gesetzt, auch beim Resize. Der Wert hier ist die Rueckfallebene,
     falls kein JavaScript laeuft. */
  --header-height: 80px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { max-width: 100vw; -webkit-text-size-adjust: 100%; }
body {
  /* Versalziffern erzwingen. Sonst kann eine Schrift Mediaevalziffern
     liefern, bei denen 4 und 0 unter die Grundlinie rutschen. */
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "onum" 0, "sups" 0, "subs" 0,
                         "smcp" 0, "c2sc" 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  padding-top: 72px;
}
img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul   { list-style: none; }
address { font-style: normal; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-size: clamp(36px, 5.5vw, 72px); }
h2 { font-size: clamp(28px, 4vw, 48px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.accent-highlight { color: var(--accent); }

/* ── LAYOUT ── */
.container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px); }
.section    { padding: clamp(60px, 8vw, 100px) 0; }

/* ── BUTTONS ── */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 8px;
  border: 2px solid;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.btn-secondary:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

.btn-arrow { font-size: 16px; transition: transform 0.3s ease; }
.btn-primary:hover .btn-arrow,
.btn-secondary:hover .btn-arrow { transform: translateX(4px); }

@media (hover: none) {
  .btn-primary:hover, .btn-secondary:hover { transform: none; box-shadow: none; }
}

/* ── HEADER ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-wrapper {
  width: 44px; height: 44px;
  background: var(--accent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: white;
}
/* ── LOGO ──
   Die Wortbildmarke liegt in 640x357 vor, Verhaeltnis 1,79:1.
   Gesteuert wird ausschliesslich ueber die Hoehe, die Breite folgt
   aus width:auto. 44px ist genau die Hoehe des bisherigen runden
   Logos, der Header wird dadurch nicht hoeher. */
.site-logo {
  height: 44px;
  width: auto;
  display: block;
}

/* Footer und CTA-Banner liegen auf dunklem Grund, dort die weisse
   Variante. Die Klasse heisst bewusst nicht .footer-logo: das ist
   in diesem Projekt bereits der umgebende Flex-Container. */
.footer-logo-img {
  height: 40px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .site-logo { height: 34px; }
}

/* Die Wortbildmarke ist breiter als das runde Vorgaengerlogo. Damit
   der Header auf sehr schmalen Geraeten einzeilig bleibt, weicht dort
   die Tagline. Der Firmenname bleibt stehen. */
@media (max-width: 380px) {
  .brand-tagline { display: none; }
}
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.brand-tagline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  font-size: 15px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover { color: var(--accent); background: var(--bg-secondary); }
.nav-link.active { color: var(--accent); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.tel-icon-btn {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-dark);
  color: white;
  transition: all 0.2s ease;
}
.tel-icon-btn:hover { background: var(--accent); }

.btn-header-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.btn-header-primary:hover { background: var(--accent-hover); }

.hamburger-btn {
  display: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s ease;
}

/* Tablet header (601-1179px)
   Ab hier uebernimmt das Hamburger-Menue: darunter passen fuenf
   Eintraege nicht mehr neben Marke und Aufruf in eine Zeile. */
@media (max-width: 1179px) and (min-width: 601px) {
  .nav-desktop { display: none; }
  .btn-header-primary { display: none; }
  .hamburger-btn { display: flex; }
  .brand-tagline { display: none; }
  .header-container { padding: 14px 32px; }
}

/* Mobile header (<=600px) */
@media (max-width: 600px) {
  .nav-desktop { display: none; }
  .btn-header-primary { display: none; }
  .hamburger-btn { display: flex; }
  .brand-tagline { display: none; }
  .header-container { padding: 12px 24px; }
}

/* ── MOBILE MENU ── */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-mobile-menu);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu-overlay.open {
  opacity: 1;
  pointer-events: all;
  right: min(340px, 90vw);
}

.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 90vw);
  z-index: calc(var(--z-mobile-menu) + 1);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  padding: 0;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
}
.mobile-menu.open { transform: translateX(0); }

/* ── CLOSE-STATE FIX ──
   The touch hover-killer injected by script.js
   (.touch-device *:hover { transform: none !important }) also matches .mobile-menu
   when you tap the X inside it: on touch, the menu (ancestor of the tapped button)
   gets a sticky :hover state, and that rule's !important was overriding the closed
   transform: translateX(100%) — pinning the menu on-screen even though .open was
   already removed. ID + !important makes the menu's own transform always win, so
   removing .open reliably slides it off-screen. */
#mobileMenu { transform: translateX(100%) !important; }
#mobileMenu.open { transform: translateX(0) !important; }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu-close {
  width: 44px; height: 44px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  flex: 1;
}
.mobile-nav-link {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 800;
  color: var(--text-primary);
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s ease;
}
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link:hover, .mobile-nav-link.active { color: var(--accent); }
.mobile-nav-link::after { content: '›'; font-size: 22px; color: var(--accent); }

.mobile-menu-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── HERO STAT-FOCUS ── */
.hero-stat-focus {
  position: relative;
  min-height: calc(100vh - 80px);
  padding: 24px 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hero-background img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
}
.hero-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.78) 0%,
    rgba(255,255,255,0.60) 50%,
    rgba(255,255,255,0.75) 100%);
}
.hero-container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  width: fit-content;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.trust-dot {
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-primary);
  animation: slideUpFade 0.8s ease-out 0.1s both;
}
.hero-headline .accent-highlight { color: var(--accent); display: block; }

.hero-divider {
  width: 70px; height: 3px;
  background: var(--accent);
  margin: 4px 0;
}

.hero-subtext {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 520px;
}

.hero-phone-block {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
  background: var(--bg-card);
  border: 2px solid var(--accent);
  border-radius: 12px;
  width: fit-content;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}
.hero-phone-block:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}
.hero-phone-icon { color: var(--accent); flex-shrink: 0; }
.hero-phone-block:hover .hero-phone-icon { color: white; }
.hero-phone-content { display: flex; flex-direction: column; gap: 2px; }
.hero-phone-label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
}
.hero-phone-block:hover .hero-phone-label { color: rgba(255,255,255,0.85); }
.hero-phone-number {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.hero-phone-block:hover .hero-phone-number { color: white; }
.hero-phone-hint { font-size: 11px; color: var(--text-tertiary); }
.hero-phone-block:hover .hero-phone-hint { color: rgba(255,255,255,0.7); }

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.hero-promises {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.promise-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
}
.promise-check { color: var(--accent); font-weight: 700; font-size: 14px; }

/* STAT-SIDEBAR */
.hero-stat-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.hero-stat-sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
}
.stat-item {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.3s ease;
  cursor: default;
}
.stat-item:last-child { border-bottom: none; }
.stat-item:hover { background: var(--accent-soft); }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-secondary);
}

/* HERO ANIMATIONS - PFLICHT 24 */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-trust-badge  { animation: slideUpFade 0.5s ease-out both; }
.hero-headline     { animation: slideUpFade 0.8s ease-out 0.1s both; }
.hero-divider      { animation: slideUpFade 0.6s ease-out 0.15s both; }
.hero-subtext      { animation: slideUpFade 0.8s ease-out 0.2s both; }
.hero-phone-block  { animation: slideUpFade 0.8s ease-out 0.3s both; }
.hero-buttons      { animation: slideUpFade 0.8s ease-out 0.4s both; }
.hero-promises     { animation: slideUpFade 0.8s ease-out 0.5s both; }
.hero-stat-sidebar { animation: slideUpFade 1s   ease-out 0.3s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-headline, .hero-trust-badge, .hero-subtext,
  .hero-phone-block, .hero-buttons, .hero-promises,
  .hero-stat-sidebar, .hero-divider { animation: none; }
}

/* HERO RESPONSIVE */
@media (max-width: 1023px) {
  .hero-stat-focus { min-height: auto; padding: 40px 32px; }
  .hero-container { grid-template-columns: 1fr; gap: 32px; }
  .hero-stat-sidebar { order: 2; }
}
@media (max-width: 600px) {
  .hero-stat-focus { padding: 24px; min-height: auto; }
  .hero-container { gap: 24px; }
  .hero-phone-block { width: 100%; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary { width: 100%; justify-content: center; }
}

/* ── TRUST BAR ── */
.trust-bar {
  background: var(--bg-dark);
  color: white;
  padding: 32px 40px;
  border-top: 4px solid var(--accent);
}
.trust-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item-icon { color: var(--accent); font-size: 14px; }
.trust-item-text { display: flex; flex-direction: column; }
.trust-item-text strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}
.trust-item-text strong + span {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 768px) { .trust-container { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .trust-container { grid-template-columns: 1fr; } }

/* ── SERVICE CARDS ── */
/* Hell, seit die Referenz-Section dazwischen entfallen ist: sonst
   stossen Leistungen und Bewertungen als zwei getoente Flaechen
   aneinander. */
.services-cards { padding: clamp(56px, 7vw, 96px) 40px; background: var(--bg-primary); }
.services-cards-container { max-width: 1400px; margin: 0 auto; }

.services-cards-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
}
.services-cards-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin-bottom: 16px;
}
.services-cards-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.services-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.service-card-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
}
.service-card-item:hover {
  border-color: var(--accent);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.service-card-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-tertiary);
}
.service-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.service-card-item:hover .service-card-image img { transform: scale(1.05); }

.service-card-num-badge {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--text-primary);
  color: var(--accent);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  z-index: 5;
}

.service-card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}
.service-card-price {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: 6px;
  width: fit-content;
}
.service-card-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0;
}
.service-card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  flex: 1;
}
.service-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 8px;
}
.service-card-arrow-icon { font-size: 16px; transition: transform 0.3s ease; }
.service-card-item:hover .service-card-arrow-icon { transform: translateX(6px); }

/* HIGHLIGHT BOX */
.services-highlight-box {
  background: var(--bg-dark);
  color: white;
  border-radius: 20px;
  padding: 48px;
  border-left: 6px solid var(--accent);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
  /* Dieselbe Breite wie das Kartenraster darueber: beide sind direkte
     Kinder von .services-cards-container (max-width 1400px, ohne
     eigene Polsterung), die Kanten fluchten damit exakt. */
  max-width: none;
  /* Abstand zu den Karten. Genau eine Stelle im Projekt setzt ihn,
     .bereich-grid bleibt bewusst ohne margin-bottom. */
  margin: clamp(56px, 7vw, 96px) 0 0;
  position: relative;
  overflow: hidden;
}
.services-highlight-box::before {
  content: '';
  position: absolute;
  top: 50%; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  transform: translateY(-50%);
}
.highlight-content { position: relative; z-index: 2; }
.highlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: var(--accent-soft);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.highlight-badge-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse-blue 2s ease-in-out infinite;
}
@keyframes pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(37,99,235,0); }
}
.highlight-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: white;
}
.highlight-desc { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.8); margin-bottom: 20px; }
.highlight-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.highlight-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: rgba(255,255,255,0.85);
}
.highlight-features li::before { content: '✓'; color: var(--accent); font-weight: 700; font-size: 16px; }
.btn-highlight {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: var(--accent);
  color: white;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-highlight:hover { background: white; color: var(--accent); transform: translateY(-2px); }
.highlight-visual {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  position: relative; z-index: 2;
}
.highlight-visual-stat {
  text-align: center;
  padding: 20px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
}
.highlight-visual-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1; margin-bottom: 6px;
}
.highlight-visual-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.services-all-cta { text-align: center; margin-top: 60px; }
.btn-all-services {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  background: var(--text-primary);
  color: var(--bg-primary);
  border: 2px solid var(--text-primary);
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-all-services:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-2px);
}

@media (max-width: 1023px) {
  .services-cards { padding-inline: 32px; }
  .services-cards-grid { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .services-highlight-box { grid-template-columns: 1fr; padding: 32px; gap: 32px; }
}
@media (max-width: 600px) {
  .services-cards { padding-inline: 24px; }
  .services-cards-grid { grid-template-columns: 1fr; gap: 16px; }
  .services-highlight-box { padding: 28px 24px; border-left-width: 4px; gap: 24px; }
  .highlight-title { font-size: 28px; }
  .highlight-visual { gap: 12px; }
  .highlight-visual-stat { padding: 16px 12px; }
  .highlight-visual-num { font-size: clamp(20px, 5vw, 28px); }
  .btn-all-services { width: 100%; justify-content: center; padding: 18px 24px; }
}

/* ── VORHER UND NACHHER ──

   Dunkle Flaeche. Davor liegt die getoente Bewertungsflaeche, dahinter
   die weisse FAQ; eine helle oder getoente Flaeche wuerde hier an eine
   gleiche stossen. */

.ba-section {
  padding: clamp(56px, 7vw, 96px) 20px;
  background: var(--bg-dark);
  text-align: center;
}

/* .eyebrow steht sonst in --accent (#1E3A8A). Auf #1A1A1A waeren das
   1,4:1. Derselbe Ton wie die Kleinschrift in der Vertrauensleiste. */
.ba-section .eyebrow { color: rgba(255, 255, 255, .7); }

.ba-section h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: #FFFFFF;
  margin: 0 0 18px;
}

/* --accent erreicht auf der dunklen Flaeche nur 1,4:1, --accent-light
   2,9:1. --secondary stammt aus derselben Palette und kommt auf 7,2:1. */
.ba-section .accent-highlight { color: var(--secondary); }

.ba-section .accent-bar {
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto 32px;
  border-radius: 2px;
  background: var(--secondary);
}

/* Einleitung unter der Ueberschrift. Die Section steht auf #1A1A1A,
   deshalb helle Schrift statt --text-secondary: der Ton kaeme dort auf
   1,5:1. Weiss bei 78 Prozent ergibt 11,2:1. */
.ba-lead {
  max-width: 62ch;
  margin: 0 auto 36px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
}

/* Aeusseres Raster: die zwei Paare nebeneinander. */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  /* Das Projekt hat keine Variable --container-width. Die breiten
     Abschnitte laufen auf 1400px, FAQ auf 900px, Kontaktband auf
     800px; eine einheitliche Bezugsbreite gibt es also nicht. */
  max-width: 1200px;
  margin-inline: auto;
  align-items: start;
}

.ba-pair { margin: 0; }

/* Inneres Raster: die zwei Kacheln eines Paares, fast buendig. Die
   Rundung sitzt aussen am Paar, die Innenkanten bleiben gerade. */
.ba-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border-radius: var(--radius, 14px);
  overflow: hidden;
}

.ba-shot { position: relative; }

/* Alle vier Kacheln liegen in 1fr-Spalten und teilen ein festes
   Seitenverhaeltnis. Sie sind damit gleich breit und gleich hoch,
   unabhaengig davon, was das Bild selbst mitbringt. */
/* height: auto ist hier nicht schmueckend, sondern noetig. Die
   Attribute width und height am img-Tag wirken als Praesentationshinweis
   und setzen die CSS-Eigenschaften width und height. Die Breite
   ueberschreibt diese Regel, die Hoehe nicht: ohne height: auto galt
   height: 1000px aus dem Attribut. Sind Breite und Hoehe beide gesetzt,
   wird aspect-ratio ignoriert. Die Kachel war damit 241 x 1000px statt
   241 x 230px, und object-fit: cover zeigte einen schmalen senkrechten
   Streifen in voller Aufloesung.
   Der globale Reset des Projekts setzt nur max-width: 100%, kein
   height: auto. Alle anderen Bildregeln setzen eine eigene Hoehe,
   diese war die einzige ohne. */
.ba-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 20;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ba-pair figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: .85rem;
  color: rgba(255, 255, 255, .72);   /* 9,5:1 auf #1A1A1A */
}

.ba-tag {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 1;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #FFF;
  padding: 4px 9px;
  border-radius: 3px;
}

.ba-tag--before { background: rgba(30, 32, 36, .82); }
.ba-tag--after  { background: rgba(28, 110, 60, .88); }   /* Weiss darauf 7,0:1 */

/* Kennzeichnung nach Art. 50 EU-KI-VO, kleiner als auf den grossen
   Bildern der Detailseiten. Die Grundregel setzt white-space: nowrap
   und einen Deckel von 100% minus 20px; auf der schmalsten Kachel
   (138px bei 320px Fensterbreite) wuerde die Zeile dann am Rand des
   Paares abgeschnitten. Deshalb hier umbruchfaehig. */
.ba-shot .ai-label {
  position: absolute;
  right: 8px; bottom: 8px;
  z-index: 1;
  font-size: .68rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .55);
  color: #FFF;
  /* Die Grundregel .ai-label setzt white-space: nowrap und einen
     Deckel von 100% minus 20px. Auf der schmalsten Kachel (138px bei
     320px Fensterbreite) wuerde die Zeile am Rand des Paares
     abgeschnitten, weil .ba-duo auf overflow: hidden steht. */
  white-space: normal;
  text-align: right;
  max-width: calc(100% - 16px);
}

/* Die zwei Paare untereinander. Die zwei Kacheln eines Paares bleiben
   nebeneinander, sonst stuenden hier vier Bilder untereinander. */
@media (max-width: 860px) {
  .ba-grid { grid-template-columns: 1fr; gap: 24px; }
  .ba-shot .ai-label { font-size: .62rem; padding: 3px 6px; line-height: 1.2; }
}

/* Ab 1024px laufen die Paare auf der Breite der uebrigen Sections.
   Eine Variable --container-width gibt es im Projekt nicht; der
   Rueckfallwert 1200px waere genau der Wert der Grundregel gewesen,
   die Kacheln also 2px kleiner statt groesser. Die breiten Bereiche
   der Seite, Vertrauensleiste und Leistungen, stehen fest auf 1400px
   Inhalt bei 40px seitlicher Polsterung. Beide Werte werden hier
   uebernommen, sonst laege die Aussenkante 20px daneben. */
@media (min-width: 1024px) {
  .ba-section { padding-inline: 40px; }
  .ba-grid { max-width: 1400px; gap: 40px; }
  .ba-duo { gap: 6px; }
}

/* ── FAQ ── */
.faq-section { padding: 64px 40px; background: var(--bg-primary); }
.faq-container { max-width: 900px; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 40px; }
.faq-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-answer p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.faq-answer strong { color: var(--text-primary); font-weight: 700; }

/* ── TESTIMONIAL ── */
.testimonial-section { padding: 64px 40px; background: var(--bg-secondary); }
.testimonial-container { max-width: 800px; margin: 0 auto; text-align: center; }
.testimonial-header { margin-bottom: 32px; }
.testimonial-quote {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px;
  box-shadow: var(--shadow-md);
}
.testimonial-stars { font-size: 24px; color: var(--warning); letter-spacing: 4px; margin-bottom: 20px; }
.testimonial-text {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 24px;
  font-style: italic;
}
.testimonial-author {
  border-top: 2px solid var(--accent);
  padding-top: 16px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.testimonial-author strong { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.testimonial-author span { font-size: 13px; color: var(--text-secondary); }

/* Zwei Abschnitte haben mit dem Regler ihre Medienspalte verloren.
   Sie laufen ueber die volle Breite; der Text behaelt seine 62ch. */
@media (min-width: 901px) {
  .section-split--voll { grid-template-columns: 1fr; }
}

/* ── Rahmen und Schichten ── */
.ba-rahmen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
}

/* 16:9 statt 4:3. Rundung, Rahmen, Beschnitt und Abstaende bleiben die
   der uebrigen Medienbilder; abweichend ist allein das Format des
   Motivs. */
.ba-rahmen--breit { aspect-ratio: 16 / 9; }

.ba-einzelbild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* ================================================================
   EINHEITLICHES RASTER FUER BEIDE LEISTUNGSSEITEN

   Jeder Textabschnitt folgt demselben Aufbau: Text links, Medien
   rechts. Es gibt keine zentrierten Bloecke, keine gespiegelte
   Anordnung und keinen Abschnitt ueber die volle Breite. Das Raster
   sitzt innerhalb von .detail-inner und teilt sich damit die Kanten
   mit den Bausteinen darunter.
   ================================================================ */

.section-split {
  display: grid;
  grid-template-columns: 1fr;
  /* Nur zwischen den Spalten. Der Zeilenabstand bleibt null, sonst
     addiert er sich unter dem Kopfblock zu dessen margin-bottom. */
  column-gap: 32px;
  row-gap: 0;
  align-items: start;
}

.section-split__text { max-width: 62ch; }

.medien-figur { margin: 0; }
.medien-unterschrift {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
}

@media (min-width: 901px) {
  .section-split { grid-template-columns: 55fr 45fr; column-gap: 56px; }
  /* Der Kopfblock spannt beide Spalten. Dadurch beginnt die
     Medienspalte bauartbedingt auf Hoehe des ersten Absatzes, ohne
     dass irgendwo eine Hoehe geraten werden muesste. */
  .section-split > .detail-kopf { grid-column: 1 / -1; }
  /* Laeuft mit, solange der Text daneben laenger ist, und endet mit
     der Rasterzeile. */
  .section-split__media {
    position: sticky;
    top: calc(var(--header-height, 80px) + 32px);
  }
}

/* Auf schmalen Geraeten steht das Medium auf beiden Seiten gleich
   ueber dem Text. */
@media (max-width: 900px) {
  .section-split > .detail-kopf { order: 0; }
  .section-split__media        { order: 1; position: static; margin-bottom: 32px; }
  .section-split__text         { order: 2; }
}

/* Ein Abschnitt folgt dem naechsten mit demselben Abstand. */
.section-split + .section-split { margin-top: clamp(56px, 7vw, 88px); }

/* ── CTA BANNER ── */
.cta-banner {
  padding: 64px 40px;
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
}
.cta-container { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; }
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: white;
  margin-bottom: 20px;
}
.cta-desc { font-size: 17px; color: rgba(255,255,255,0.8); margin-bottom: 40px; line-height: 1.65; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-cta-phone, .btn-cta-whatsapp, .btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-cta-phone {
  background: #FFFFFF;
  color: var(--bg-dark);
}
/* Alle Zustaende bleiben hell. Der bisherige Hover setzte
   --accent-soft, rgba(30,58,138,.10), also zu 90 Prozent
   durchsichtig; auf der dunklen Flaeche verschwand der Knopf damit.
   Gleiche Spezifitaet, spaeter in der Datei, kein !important. */
.btn-cta-phone:hover  { background: rgba(255, 255, 255, .88); color: var(--bg-dark); transform: translateY(-2px); }
.btn-cta-phone:active { background: rgba(255, 255, 255, .76); color: var(--bg-dark); transform: translateY(0); }
.btn-cta-phone:focus-visible {
  background: #FFFFFF;
  color: var(--bg-dark);
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}
.btn-cta-whatsapp {
  background: #25D366;
  color: white;
}
.btn-cta-whatsapp:hover { background: #1ebe5d; transform: translateY(-2px); }
.btn-cta-secondary {
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.4);
}
.btn-cta-secondary:hover { border-color: white; background: rgba(255,255,255,0.1); }

/* ── FOOTER ── */
.site-footer {
  background: var(--bg-darker);
  color: white;
  padding: clamp(60px, 7vw, 80px) 0 32px;
}
.footer-container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; max-width: 260px; }
.footer-heading {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.footer-list { display: flex; flex-direction: column; gap: 8px; }
.footer-list a { font-size: 14px; color: rgba(255,255,255,0.6); transition: color 0.2s; }
.footer-list a:hover { color: white; }
.footer-contact-item { margin-bottom: 12px; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; }
.footer-contact-item strong { display: block; color: rgba(255,255,255,0.85); font-weight: 600; margin-bottom: 2px; }
.footer-contact-item a { color: rgba(255,255,255,0.6); transition: color 0.2s; }
.footer-contact-item a:hover { color: white; }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copyright { font-size: 13px; color: rgba(255,255,255,0.45); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 13px; color: rgba(255,255,255,0.45); transition: color 0.2s; }
.footer-legal a:hover { color: rgba(255,255,255,0.9); }

@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-buttons { flex-direction: column; align-items: stretch; }
  .btn-cta-phone, .btn-cta-whatsapp, .btn-cta-secondary { justify-content: center; }
}

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 48px; height: 48px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow-blue);
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
}
.back-to-top.show { opacity: 1; pointer-events: all; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-3px); }

/* ── PAGE HEADER ── */
/* Hell. Die Flaechen wechseln ab hier: Kopf hell, Text getoent,
   Werte hell, Bewertungen getoent, CTA dunkel. */
.page-header {
  padding: 56px 0 40px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.page-header .eyebrow { margin-bottom: 12px; }
.page-header h1 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 12px; }
.page-header-sub { font-size: 16px; color: var(--text-secondary); max-width: 560px; line-height: 1.6; }
.page-header-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.page-header-eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px; }
.page-header-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--text-primary); margin: 0 0 12px; }
.page-header-subtitle { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: 560px; margin: 0; }

/* ── QUICKNAV (DROPDOWN - PFLICHT 22) ── */
.services-quicknav {
  position: sticky;
  top: 72px;
  z-index: 50;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 16px 40px;
  box-shadow: var(--shadow-sm);
}
.quicknav-wrapper { max-width: 1400px; margin: 0 auto; position: relative; }
.quicknav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  background: var(--bg-card);
  border: 2px solid var(--text-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.quicknav-trigger:hover { background: var(--text-primary); color: white; }
.quicknav-trigger-icon { transition: transform 0.3s ease; }
.quicknav-trigger[aria-expanded="true"] .quicknav-trigger-icon { transform: rotate(180deg); }
.quicknav-dropdown {
  position: absolute;
  top: calc(100% + 12px); left: 0;
  background: var(--bg-card);
  border: 2px solid var(--text-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 16px;
  display: none;
  z-index: 100;
  min-width: 700px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.quicknav-dropdown.open {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.quicknav-group { display: flex; flex-direction: column; gap: 2px; }
.quicknav-group-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.quicknav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.quicknav-item:hover { background: var(--accent-soft); padding-left: 16px; }
.quicknav-item-num { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--accent); min-width: 24px; }

@media (max-width: 600px) {
  .services-quicknav { padding: 12px 24px; top: 64px; }
  .quicknav-trigger { width: 100%; justify-content: space-between; }
  .quicknav-dropdown { min-width: 0; width: calc(100vw - 48px); }
  .quicknav-dropdown.open { grid-template-columns: 1fr; }
}

/* ── SERVICE DETAIL ROWS (leistungen.html) ── */
.services-magazine { padding: 0 40px 100px; background: var(--bg-primary); }
.magazine-container { max-width: 1300px; margin: 0 auto; }
.service-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
  padding: 60px 0;
  border-bottom: 1px solid var(--border);
}
.service-row:last-child { border-bottom: none; }
.service-row-reverse .service-visual { order: 2; }
.service-row-reverse .service-content { order: 1; }

.service-visual {
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-tertiary);
  position: relative;
}
.service-visual img { width: 100%; height: 100%; object-fit: cover; }
.service-num-overlay {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--text-primary);
  color: var(--accent);
  padding: 8px 16px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800;
  z-index: 5;
}

.service-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.service-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.service-price-tag {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 8px 18px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800;
  margin-bottom: 20px;
}
.service-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.service-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.service-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--text-secondary);
}
.service-features li::before { content: '✓'; color: var(--accent); font-weight: 700; }
.service-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--accent);
  color: white;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}
.service-cta:hover { background: var(--accent-hover); transform: translateY(-2px); }

@media (max-width: 768px) {
  .services-magazine { padding: 0 24px 80px; }
  .service-row { grid-template-columns: 1fr; gap: 32px; }
  .service-row-reverse .service-visual, .service-row-reverse .service-content { order: 0; }
}
@media (max-width: 600px) {
  .services-magazine { padding: 0 24px 60px; }
  .service-row { padding: 40px 0; }
}

/* ── ABOUT PAGE ── */
.about-story { padding: 64px 40px; background: var(--bg-secondary); }
.story-container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.story-image { border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; }
.story-image img { width: 100%; height: 100%; object-fit: cover; }
.story-content h2 { font-size: clamp(28px, 4vw, 48px); margin-bottom: 24px; }
.story-content p { font-size: 16px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 16px; }

.about-values { padding: 64px 40px; background: var(--bg-primary); }
.values-header { text-align: center; max-width: 600px; margin: 0 auto 40px; }
.values-header h2 { margin-bottom: 12px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
.value-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 28px;
  transition: all 0.3s ease;
  position: relative;
}
.value-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 16px 16px 0 0;
  transform: scaleX(0);
  transition: transform 0.4s ease;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-card:hover::before { transform: scaleX(1); }

.value-card.value-card-featured {
  background: var(--bg-card);
  border: 3px solid var(--accent);
  box-shadow: 0 12px 30px rgba(30,58,138,0.15);
  transform: translateY(-8px);
}
.value-card.value-card-featured::before { transform: scaleX(1); height: 6px; }
.value-number {
  font-family: var(--font-display);
  font-size: 60px; font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 20px;
}
.value-card h3 { font-size: clamp(22px, 2.5vw, 28px); margin-bottom: 12px; }
.value-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.value-card-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  margin-bottom: 16px;
}

@media (max-width: 860px) {
  .about-story { padding: 48px 32px; }
  .story-container { grid-template-columns: 1fr; gap: 40px; }
  .story-image { aspect-ratio: 16/9; }
  .about-values { padding: 48px 32px; }
  .values-grid { grid-template-columns: 1fr; }
  .value-card.value-card-featured { transform: translateY(0); }
}

/* ── CONTACT PAGE ── */
/* Getoent, weil die Kopfleiste darueber jetzt hell ist. */
.contact-section { padding: 64px 40px; background: var(--bg-secondary); }
.contact-container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.contact-info-block {
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 48px;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--accent-soft);
  border-radius: 100px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.badge-dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; }
.contact-info-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}
.contact-info-item { padding: 18px 0; border-bottom: 1px solid var(--border); }
.contact-info-item:last-child { border-bottom: none; }
.contact-info-label {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.contact-info-value { font-size: 16px; color: var(--text-primary); line-height: 1.5; }
.contact-info-value a { color: var(--text-primary); transition: color 0.2s; }
.contact-info-value a:hover { color: var(--accent); }
.contact-info-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; display: block; }
.contact-info-actions { margin-top: 24px; }
.btn-whatsapp-big {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: #25D366;
  color: white;
  border-radius: 10px;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-whatsapp-big:hover { background: #1ebe5d; transform: translateY(-2px); }

/* CONTACT FORM */
.contact-form-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.contact-form-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  border-radius: 20px 20px 0 0;
}
.contact-form-wrapper h2 { font-size: 28px; margin-bottom: 8px; }
.form-intro { font-size: 14px; color: var(--text-secondary); margin-bottom: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
/* PFLICHT 18: iPhone-Safari-stable DSGVO-Checkbox */
.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent);
}
.form-checkbox label {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.form-checkbox label a { color: var(--accent); text-decoration: underline; }
.btn-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--accent);
  color: white;
  border: 2px solid var(--accent);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-submit:hover { background: var(--accent-hover); transform: translateY(-2px); }

@media (max-width: 1023px) {
  .contact-section { padding: 80px 32px; }
  .contact-container { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .contact-section { padding: 60px 24px; }
  .contact-info-block, .contact-form-wrapper { padding: 28px 24px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── LEGAL PAGES ── */
.legal-page { padding: clamp(60px,8vw,100px) 40px; }
.legal-container { max-width: 860px; margin: 0 auto; }
.legal-container h1 { margin-bottom: 32px; font-size: clamp(32px, 5vw, 56px); }
.legal-container h2 { font-size: 22px; margin: 28px 0 10px; }
.legal-container p { font-size: 15px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 14px; }
.legal-container address { font-style: normal; font-size: 15px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 14px; }
.legal-container a { color: var(--accent); text-decoration: underline; }
/* Button inside legal pages must keep white text on the accent background */
.legal-container a.btn-primary { color: #fff; text-decoration: none; }
.legal-container a.btn-primary:hover { color: #fff; }
/* "← Zurück" link on Impressum / Datenschutz (returns to origin) */
.legal-container a.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 20px;
}
.legal-container a.legal-back:hover { text-decoration: underline; }

/* ── COOKIE CONSENT BANNER (DSGVO / Consent Mode v2) — compact ── */
.cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147483000; /* above sticky bars, back-to-top, lightbox */
  width: auto;
  max-width: 360px;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.cookie-banner.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-banner-inner {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cookie-banner-text {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.cookie-banner-text a { color: #fff; text-decoration: underline; font-weight: 600; }
.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Accept and Reject are equally sized/visible (legal equal-prominence requirement) */
.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  padding: 8px 14px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cookie-btn-accept { background: var(--accent); color: #fff; border-color: var(--accent); }
.cookie-btn-accept:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cookie-btn-reject { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.cookie-btn-reject:hover { border-color: #fff; background: rgba(255,255,255,0.10); }

/* Mobile: slim full-width strip ABOVE the sticky call/anfrage bar (~52px),
   so both stay visible and the call buttons are never covered. */
@media (max-width: 768px) {
  .cookie-banner {
    left: 8px;
    right: 8px;
    bottom: 64px;
    max-width: none;
  }
  .cookie-banner-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 12px;
    gap: 8px 10px;
  }
  .cookie-banner-text { flex: 1 1 100%; }
  .cookie-banner-actions { flex: 1 1 100%; }
}

/* ── SECTION DIVIDERS ── */
.section-header { max-width: 640px; margin-bottom: 48px; }
.section-header h2 { margin-bottom: 12px; }
.section-header p { font-size: 17px; color: var(--text-secondary); line-height: 1.7; }

/* PFLICHT 19: Mobile horizontal swipeable cards */
@media (max-width: 600px) {
  .services-cards-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 24px 16px;
    margin: 0 -24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .services-cards-grid::-webkit-scrollbar { display: none; }
  .service-card-item {
    flex: 0 0 82%;
    scroll-snap-align: start;
    max-width: 340px;
  }
}

/* ── HIDDEN ── */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── MOBILE 24px PADDING (PFLICHT 9) ── */
@media (max-width: 600px) {
  .faq-section, .testimonial-section, .cta-banner, .about-story,
  .about-values, .legal-page { padding-left: 24px; padding-right: 24px; }
  .header-container { padding: 12px 24px; }
  .page-header { padding-left: 24px; padding-right: 24px; }
  .trust-bar { padding-left: 24px; padding-right: 24px; }
}

/* PFLICHT 14: backdrop-filter auf Mobile aus */
@media (max-width: 768px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-primary) !important; }
}

/* ── FAQ BUTTON ACCORDION ── */
.faq-item {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item.open {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
}
.faq-question:hover { background: var(--bg-secondary); }
.faq-item.open .faq-question {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.faq-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text-primary);
  color: white;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform .2s ease, background .2s ease;
  border-radius: 8px;
}
.faq-item.open .faq-icon {
  background: var(--accent);
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease-out, padding .25s ease-out;
}
.faq-item.open .faq-answer {
  max-height: 600px;
  padding: 24px 28px 28px;
}

/* ── PRICING SECTION ── */
.pricing-section {
  padding: 64px 0;
  background: var(--bg-secondary);
}
.pricing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.pricing-header {
  text-align: center;
  margin-bottom: 40px;
}
.pricing-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--text-primary);
  margin: 12px 0 20px;
}
.pricing-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}
.pricing-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
}
.pricing-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}
.pricing-block-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text-primary);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--accent);
}
.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pricing-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 15px;
}
.pricing-list li:last-child { border-bottom: none; }
.pricing-list span { color: var(--text-secondary); }
.pricing-list strong {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}
.pricing-cta { text-align: center; }

@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ── IMAGE PLACEHOLDER ── */
.image-placeholder {
  aspect-ratio: 4/3;
  background: var(--bg-secondary);
  border: 2px dashed var(--border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.image-placeholder-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-secondary); }
.image-placeholder-icon { font-size: 48px; opacity: 0.4; }
.image-placeholder-text { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.6; }

/* ── SECTION PADDING MOBILE OVERRIDE ── */
@media (max-width: 768px) {
  .services-cards,
  .pricing-section,
  .faq-section,
  .testimonial-section,
  .cta-banner,
  .about-story,
  .about-values,
  .contact-section { padding-top: 48px; padding-bottom: 48px; }
}

/* ── HERO COMPACT ── */
.hero-compact { min-height: calc(100vh - 80px); max-height: calc(100vh - 80px); display: flex; align-items: center; padding: 40px 0; background: var(--bg-primary); overflow: hidden; }
/* start statt center: sonst haengt die Bildhoehe an der Zeilenhoehe,
   die die laengere Textspalte vorgibt. Ungleiche Spaltenhoehen sind
   in Kauf zu nehmen, ein beschnittenes Motiv nicht. */
.hero-compact-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; width: 100%; }
.hero-compact-content { display: flex; flex-direction: column; gap: 20px; }
/* Die Groesse folgt der Textspalte: 55 Prozent von hoechstens
   1232px, also 678px. Bei 3.9vw bleibt die laengste Zeile bis
   hinunter zu 1024px einzeilig. Die Untergrenze von 30px sorgt
   dafuer, dass "Entrümpelungen." auch bei 320px in eine Zeile passt
   und nicht getrennt wird. */
.hero-compact-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.3vw, 50px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--text-primary);
  margin: 0;
  hyphens: none;
  -webkit-hyphens: none;
}
.hero-compact-title .accent { color: var(--accent); }
.hero-compact-subtitle { font-family: var(--font-body); font-size: clamp(1.0625rem, 2.4vw, 1.1875rem); line-height: 1.55; color: var(--text-secondary); margin: 0; max-width: 480px; }
.hero-compact-cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 8px; max-width: 340px; }
.btn-hero { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 12px; font-family: var(--font-display); font-size: 16px; font-weight: 700; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.btn-hero svg { flex-shrink: 0; }
.btn-hero-primary { background: var(--accent); color: #FFFFFF; }
.btn-hero-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-hero-secondary { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); }
.btn-hero-secondary:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.hero-compact-image { width: 100%; aspect-ratio: 16 / 9; height: auto; display: flex; align-items: center; justify-content: center; }
/* object-position 55%: wo der Ausschnitt senkrecht beschneidet, bleiben
   Rampe, Ladung und Sackkarre im Bild statt des Himmels darueber. */
.hero-compact-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; border-radius: 16px; }
.hero-compact-image .image-placeholder { width: 100%; height: 100%; min-height: 360px; }

@media (max-width: 1024px) {
  .hero-compact { min-height: 0; max-height: none; padding: 32px 0; }

  /* Das Bild soll zwischen Ueberschrift und Untertitel stehen. Dafuer
     loest sich der Textblock auf: display:contents nimmt ihm die eigene
     Box, seine Kinder werden dadurch selbst Rasterzellen und lassen
     sich einzeln per order sortieren. Das Markup bleibt unveraendert,
     die Lesereihenfolge im Quelltext ebenso. */
  .hero-compact-content { display: contents; }

  /* Kein Rasterabstand. Die Luecken stehen einzeln an den Kindern,
     sonst addiert sich der Abstand auf jede davon obendrauf. */
  .hero-compact-container { grid-template-columns: 1fr; gap: 0; }

  .hero-compact-title    { order: 2; margin-bottom: 20px; }
  .hero-compact-image    { order: 3; margin-bottom: 26px; }
  .hero-compact-subtitle { order: 4; margin-bottom: 20px; }
  .hero-compact-cta      { order: 5; margin-bottom: 18px; }
  .hero-badge            { order: 6; }

  /* Die Eigenabstaende dieser beiden Bloecke wuerden sich sonst auf
     die Luecken darueber draufschlagen. */
  .hero-compact-cta { margin-top: 0; max-width: 100%; }
  .hero-badge       { margin-top: 0; }

  .hero-compact-image .image-placeholder { min-height: 220px; }
}

/* ── Tablet: 700 bis 1024px ──
   In voller Breite waere das Bild mit 16:9 zu hoch und nimmt den
   Platz des Textes weg. Als flacher Streifen wirkt es wie ein Banner
   und bleibt unter einem Drittel der Bildschirmhoehe. */
@media (min-width: 700px) and (max-width: 1024px) {
  /* Auf dem Tablet steht alles mittig, sonst wirkt der einspaltige
     Hero wie eine halbierte Desktopansicht. text-align vererbt sich
     an Eyebrow, Ueberschrift und Untertitel. */
  .hero-compact { text-align: center; }

  /* Volle Containerbreite, mittig. */
  .hero-compact-image {
    aspect-ratio: 21 / 9;
    margin-bottom: 0;
  }
  .hero-compact-image img { object-position: center 55%; }

  .hero-compact-title { margin-bottom: 28px; }

  /* Alle Abstaende haengen als margin-top am jeweils folgenden Block,
     nie an beiden Seiten. Sonst addieren sie sich. */
  .hero-compact-subtitle {
    max-width: 56ch;
    margin: 28px auto 0;
    font-size: clamp(1.05rem, 2.7vw, 1.18rem);
    line-height: 1.65;
  }

  /* Beide Knoepfe nebeneinander, zusammen ueber die volle Breite des
     Containers. Dessen seitliche Polsterung bleibt, sie laufen also
     nicht bis an den Bildschirmrand. */
  .hero-compact-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    max-width: none;
    margin: 28px 0 0;
  }
  .hero-compact-cta .btn-hero {
    width: 100%;
    min-height: 60px;
    font-size: 1.05rem;
    padding-inline: 28px;
    justify-content: center;
  }

  /* Die 900px-Regel darunter setzt die Zeile linksbuendig und
     untereinander. Zwei Klassen schlagen sie, ohne !important. */
  .hero-compact .hero-badge {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    margin: 24px 0 0;
  }
  /* Beim Umbruch stuende der Strich am Zeilenanfang. */
  .hero-compact .hero-badge-trenner { display: none; }
}

/* ═══════════════════════════════════════
   MOBILE FIX BUNDLE (375px / 390px safe)
═══════════════════════════════════════ */

/* ── FIX 1: Horizontaler Scroll verhindern ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
.hero-compact, .services-cards, .faq-section, .testimonial-section,
.cta-banner, .pricing-section {
  overflow: hidden;
}

/* ── FIX 2: "Kostenlose Besichtigung anfragen" Button — Text umbrechen ── */
@media (max-width: 640px) {
  .btn-primary, .btn-secondary, .btn-submit, .btn-hero {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    word-break: break-word;
  }
  .btn-hero {
    padding: 14px 20px;
    font-size: 14px;
  }
  .btn-cta-phone, .btn-cta-whatsapp, .btn-cta-secondary {
    padding: 14px 20px;
    font-size: 13px;
    white-space: normal;
    text-align: center;
  }
}

/* ── FIX 3: Mobile-Menü — alles auf einen Bildschirm ── */
@media (max-width: 768px) {
  .mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav-link {
    font-size: clamp(18px, 4.5vw, 24px);
    padding: 12px 24px;
  }
  .mobile-menu-footer {
    padding: 16px 24px;
    gap: 10px;
  }
  .mobile-menu-footer .btn-primary,
  .mobile-menu-footer .btn-secondary {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* ── FIX 4: Pricing Mobile ── */
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-block { padding: 24px 20px; }
  .pricing-divider { margin: 32px 0; }
}

/* ── FIX 5: Back-to-Top Button ── */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    z-index: 9999;
  }
}

/* ── FIX: Kontakt-Formular Mobile ── */
@media (max-width: 768px) {
  .contact-section { padding: 48px 16px; }
  .contact-container { grid-template-columns: 1fr; gap: 24px; }
  .contact-info-block,
  .contact-form-wrapper {
    padding: 24px 16px;
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .contact-form-wrapper::before { border-radius: 16px 16px 0 0; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── FIX: Stat-Boxen vertikal gestapelt ── */
@media (max-width: 768px) {
  .highlight-visual {
    gap: 12px;
  }
  .highlight-visual-stat {
    padding: 16px 12px;
  }
  .highlight-visual-num { font-size: clamp(20px, 5vw, 28px); }
  .highlight-visual-label { font-size: 11px; }
}

/* ── FIX 6: Testimonial — weniger Abstand oben auf Mobile ── */
@media (max-width: 768px) {
  .testimonial-section { padding-top: 48px; padding-bottom: 48px; }
  .testimonial-quote { padding: 32px 24px; }
  .testimonial-stars { font-size: 20px; margin-bottom: 16px; }
  .testimonial-text { margin-bottom: 20px; }
}
@media (max-width: 480px) {
  .testimonial-section { padding-top: 40px; padding-bottom: 40px; }
  .testimonial-quote { padding: 24px 16px; }
}

/* ── Mobile Header Cleanup ── */
@media (max-width: 600px) {
  .header-container { padding: 10px 16px; }
  .logo-wrapper { width: 36px; height: 36px; font-size: 14px; border-radius: 8px; }
  .brand-name { font-size: 16px; }
  .hamburger-btn { width: 36px; height: 36px; }
  .tel-icon-btn { width: 36px; height: 36px; }
}

/* ── Pricing Disclaimer ── */
.pricing-disclaimer {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-tertiary);
  text-align: center;
  max-width: 700px;
  margin: 0 auto 18px;
}

/* ── Menu-Open Body Lock ── */
body.menu-open {
  overflow: hidden;
}
/* Hide floating / sticky elements while the mobile menu is open.
   Two selectors for robustness: the body.menu-open class AND a direct
   tie to the overlay's open state (works even if the body class is missing). */
body.menu-open .back-to-top,
body.menu-open .ag-sticky,
body.menu-open .lp-sticky-call,
.mobile-menu-overlay.open ~ .back-to-top,
.mobile-menu-overlay.open ~ .ag-sticky,
.mobile-menu-overlay.open ~ .lp-sticky-call {
  display: none !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════
   FIX BUNDLE — 4 layout / animation issues
══════════════════════════════════════════ */

/* ── FIX: Hero image — smooth fade-in, no glitch on mobile ── */
.hero-compact-image img {
  animation: heroFadeIn 0.6s ease-out both;
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (max-width: 768px) {
  .hero-compact-image img {
    animation: none;
    min-height: 0;
  }
}

/* ── FIX: Leistungen cards — symmetric padding on mobile ── */
@media (max-width: 600px) {
  .services-cards {
    padding-left: 20px;
    padding-right: 20px;
  }
  .services-cards-grid {
    padding-left: 0;
    padding-right: 20px;
    margin-left: 0;
    margin-right: -20px;
  }
  .service-card-item {
    margin-left: 0;
  }
  .service-card-item:first-child {
    margin-left: 0;
  }
}

/* ── FIX: Contact form — no horizontal overflow on mobile ── */
@media (max-width: 768px) {
  .contact-section {
    overflow-x: hidden;
  }
  .contact-container {
    max-width: 100%;
    overflow: hidden;
  }
  .contact-info-block,
  .contact-form-wrapper {
    max-width: 100%;
    overflow: hidden;
  }
  .form-group input,
  .form-group textarea,
  .form-group select {
    max-width: 100%;
    box-sizing: border-box;
  }
  .btn-submit {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── FIX: Desktop hero — larger image ──
   Erst ab 1024px. Darunter reicht die Breite fuer zwei Spalten nicht:
   das Bild wurde stark beschnitten, und die Vollhoehe des Heros
   erzeugte einen leeren Bereich ueber dem Text. ── */
@media (min-width: 1025px) {
  .hero-compact {
    min-height: calc(100vh - 60px);
    max-height: calc(100vh - 60px);
  }
  /* Der Deckel haelt die Zeilen in lesbarer Laenge. Die Medienspalte
     bekommt keinen, sie laeuft bis an den Containerrand. */
  .hero-compact-content { max-width: 34rem; }

  /* Abstand zum fest stehenden Header. Das padding gehoert zur Box des
     Heros und wird von align-items nicht umgangen. */
  .hero-compact { padding-top: clamp(48px, 5vw, 80px); }

  /* 3/2 statt 4/3: bei 4/3 fielen 25 Prozent der Breite weg und die
     Fahrzeugfront geriet ueber den rechten Rand. 3/2 schneidet nur
     16 Prozent ab, laesst Rampe, Ladung, Sackkarre und Front
     vollstaendig im Bild und erreicht 84 Prozent der Texthoehe. */
  .hero-compact-image {
    aspect-ratio: 3 / 2;
    border-radius: 16px;
    overflow: hidden;
  }
  .hero-compact-image img { object-position: center center; }

  /* Die Zeile passt in der schmaleren Textspalte nicht in eine Zeile.
     Sie bricht zwischen den beiden Quellen um, der Strich stuende
     dann am Zeilenanfang. */
  .hero-badge-trenner { display: none; }
}

/* ── FIX: Email / contact text overflow on mobile ── */
@media (max-width: 768px) {
  .contact-info-value,
  .contact-info-value a {
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  .contact-info-item {
    overflow: hidden;
    max-width: 100%;
  }
}
.legal-page a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── REFINEMENT 1: Reduce top spacing on mobile ── */
@media (max-width: 600px) {
  .page-header { padding-top: 28px; }
  .hero-compact { padding-top: 16px; }
}

/* ── REFINEMENT 2 & 3: Before/After caption ── */

/* ── REFINEMENT 4: Bright blue in dark highlight box ── */
.services-highlight-box .highlight-badge {
  background: rgba(96, 165, 250, 0.15);
  color: #60A5FA;
}
.services-highlight-box .highlight-badge-dot {
  background: #60A5FA;
  animation: pulse-blue-bright 2s ease-in-out infinite;
}
@keyframes pulse-blue-bright {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(96, 165, 250, 0); }
}
.services-highlight-box .accent-highlight,
.services-highlight-box .highlight-visual-num {
  color: #60A5FA;
}
.services-highlight-box .highlight-features li::before {
  color: #60A5FA;
}

/* ── ABOUT MISSION STATS (ueber-uns.html) ── */
.mission-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.mission-stat {
  text-align: center;
  padding: 20px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.mission-stat-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--accent);
}
.mission-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .mission-stats { grid-template-columns: 1fr; gap: 12px; }
}

/* ================================================================
   BEWERTUNGSKARTEN

   Zwei Quellen, zwei gleich gebaute Karten. Gleiche Hoehe entsteht
   allein aus dem Raster (align-items:stretch), nicht aus einer festen
   Pixelhoehe. Die Karten sind reine Anzeigeflaechen: kein Link, kein
   Hover, kein Zeigefinger.
   ================================================================ */

.rating-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  max-width: 720px;
  /* Mindestabstand zum Karussell darunter */
  margin: 0 auto 48px;
}

@media (max-width: 760px) {
  .rating-cards { grid-template-columns: 1fr; max-width: 380px; }
}

.rating-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  /* schneidet die Oberkante an den Rundungen sauber ab */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 30, 60, .06);
}

.rating-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}
.rating-card--google::before {
  background: linear-gradient(90deg, #4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75% 100%);
}
/* TODO: Hausfarbe aus dem offiziellen ProvenExpert-Asset auslesen.
   Bis dahin steht hier die Primaerfarbe des Projekts, keine geratene
   Markenfarbe. */
.rating-card--pe::before { background: var(--accent); }

/* Feste Mindesthoehe: dadurch beginnen die Bewertungszahlen beider
   Karten auf derselben Grundlinie, unabhaengig davon, ob im Kopf ein
   Logo steht oder nur ein Schriftzug. */
.rating-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 22px;
  margin-bottom: 14px;
}
.rating-card__logo { flex-shrink: 0; }

.rating-card__label {
  /* bleibt einzeilig, damit der Kopf nicht umbricht */
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Steht anstelle des Logos, solange keins vorliegt. */
.rating-card__label--marke {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

.rating-card__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 10px;
  color: var(--text-primary);
}

.rating-card__stars {
  font-size: 20px;
  letter-spacing: 2px;
  color: #F2A93B;
  margin-bottom: 10px;
}

.rating-card__count {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.rating-card__note {
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* ── GOOGLE REVIEW CARD (shared with /angebot landing page) ── */
.ag-review {
  padding: clamp(56px, 7vw, 96px) 20px;
  background: var(--bg-secondary);
}
.ag-review-text {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 14px;
  padding: 0 24px;
}
.ag-review-author {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
@media (max-width: 600px) {
  .ag-review { padding-inline: 16px; }
}

/* ================================================================
   BEWERTUNGSBLOCK T & B

   Teil A ist der Kopf mit der Gesamtnote und sitzt in der

/* ── VERTRAUENSLEISTE AUF HELLER FLAECHE ──
   .trust-bar ist im Projekt vorhanden, war aber fuer eine dunkle
   Flaeche gebaut (bg-dark, weisse Schrift). Direkt unter dem hellen
   Hero waere das ein harter Bruch, deshalb diese helle Variante.
   Alle Werte kommen aus den bestehenden Tokens, es kommt keine
   Farbe und kein Abstand hinzu: Polsterung, Raster und Breakpoints
   erbt sie unveraendert von .trust-bar und .trust-container. */
.trust-bar--hell {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  /* schlanker als die dunkle Urfassung mit ihren 32px */
  padding-block: 18px;
}

/* Zentriert mit festem Abstand statt flex:1 auf vier Spalten. Die
   Eintraege sollen nebeneinander stehen, nicht ueber die Breite
   auseinandergezogen werden. */
.trust-bar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 36px;
  list-style: none;
  margin: 0 auto;
  padding: 0 24px;
  max-width: 1200px;
}

.trust-bar__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: .94rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.trust-bar__icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--accent);
}

/* Der Trennstrich steht vor dem Haekchen, nicht zwischen Haekchen und
   Text. Er erscheint erst ab 1200px: darunter passen die vier
   Eintraege nicht mehr in eine Zeile und ein Strich am Zeilenanfang
   saehe aus wie ein Fehler. */
@media (min-width: 1200px) {
  .trust-bar__item + .trust-bar__item::before {
    content: "";
    width: 1px;
    height: 14px;
    background: var(--border);
    margin-right: 20px;
  }
}

@media (max-width: 900px) {
  .trust-bar__list { gap: 12px 26px; }
  .trust-bar__item { font-size: .88rem; }
}

@media (max-width: 600px) {
  .trust-bar__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: start;
  }
  .trust-bar__item { white-space: normal; align-items: flex-start; }
  .trust-bar__icon { margin-top: 2px; }
}

/* Die Unterzeile der Komponente traegt eine feste weisse Schrift und
   waere hier unlesbar. Sie wird im Markup nicht verwendet; falls doch,
   bekommt sie den Sekundaerton. */
.trust-bar--hell .trust-item-text strong + span {
  color: var(--text-secondary);
}

/* ================================================================
   BEWERTUNGS-KARUSSELL

   ZWEI EBENEN, STRIKT GETRENNT:

     .rev-slot  — nur Positionierung, nur JavaScript.
                  Hier steht KEINE CSS-Regel mit transform, weder im
                  Normalzustand noch bei :hover, :focus oder in einer
                  Media Query. Einzige Ausnahme ist die transition,
                  die den vom JS gesetzten Wert animiert.

     .rev-card  — nur Optik, nur CSS.
                  Das JavaScript setzt hier nichts, auch keine Klasse;
                  die Zustaende werden ueber .rev-slot.is-active
                  heruntergereicht.

   Warum: transform ist eine einzelne Eigenschaft. Schreiben JS und
   CSS beide darauf, gewinnt der zuletzt gesetzte Wert und die Karte
   springt aus ihrer Position. Dasselbe galt hier fuer opacity.

   Zu den Farben: die Vorgaben nennen --color-ink, --color-muted,
   --color-surface, --color-accent und --color-primary. Diese Tokens
   gibt es in diesem Projekt nicht. Zuordnung:
     --color-ink -> --text-primary, --color-muted -> --text-secondary,
     --color-surface -> --bg-secondary, --color-accent und
     --color-primary -> --accent.
   ================================================================ */

.rev-carousel {
  max-width: 1100px;
  margin: 24px auto 0;
}

.rev-carousel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 12px;
}

/* Feste Hoehe, weil die Slots absolut liegen und die Buehne sonst in
   sich zusammenfiele. overflow verhindert, dass weit aussen geparkte
   Slots die Seite breiter machen. pan-y laesst vertikales Scrollen
   auf dem Handy durch. */
.rev-stage {
  position: relative;
  height: 360px;
  overflow: hidden;
  touch-action: pan-y;
}

/* ── EBENE 1: POSITION (nur JS) ── */
.rev-slot {
  position: absolute;
  left: 50%;
  top: 0;
  will-change: transform, opacity;
  transition: transform .5s cubic-bezier(.22,.61,.36,1),
              opacity .4s ease;
}

/* Waehrend des Ziehens folgt der Slot dem Zeiger ohne Nachlauf. */
.rev-carousel.is-dragging .rev-slot { transition: none; }

/* ── EBENE 2: OPTIK (nur CSS) ── */
.rev-card {
  position: relative;
  width: min(420px, 82vw);
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  border-radius: 12px;
  overflow: hidden;
  /* Nachbarn treten zurueck: gedeckte Flaeche, flacher Rahmen.
     Die Deckkraft der Nachbarn sitzt hier auf der Karte, nicht auf
     dem Slot — dort schreibt das JS. */
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  opacity: .45;
  transition: box-shadow .35s ease, background-color .35s ease,
              opacity .4s ease;
}

.rev-slot.is-active .rev-card {
  background: var(--bg-card);
  opacity: 1;
  box-shadow: 0 18px 44px rgba(15, 30, 60, .14);
}

/* Kein transform im Hover. Der Anhebe-Eindruck kommt allein aus dem
   kraeftigeren Schatten. */
.rev-slot.is-active .rev-card:hover {
  box-shadow: 0 24px 56px rgba(15, 30, 60, .20);
}

.rev-slot:not(.is-active) .rev-card { cursor: pointer; }
.rev-slot:not(.is-active) .rev-card:hover { opacity: .7; }

/* Google-Balken an der Oberkante, nur auf der aktiven Karte. */
.rev-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg,
    #4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75% 100%);
  opacity: 0;
  transition: opacity .35s ease;
}

.rev-slot.is-active .rev-card::before { opacity: 1; }

/* Dekoratives Anfuehrungszeichen, aria-hidden im Markup. */
.rev-quote {
  position: absolute;
  top: 4px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--accent);
  opacity: .12;
  pointer-events: none;
  user-select: none;
}

.rev-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
}

.rev-card-stars {
  font-size: 18px;
  letter-spacing: 2px;
  color: #F2A93B;
  margin-bottom: 12px;
}

/* Der Textbereich nimmt die verbleibende Hoehe und zentriert den
   Absatz darin. Dadurch sitzt der Fuss bei kurzen wie bei langen
   Texten auf derselben Hoehe. */
.rev-card-body {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.rev-card-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.6;
  color: var(--text-primary);
  text-align: left;
  font-style: normal;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rev-slot.is-active .rev-card-text { font-weight: 450; }

.rev-card-foot {
  width: 100%;
  margin-top: 16px;
  text-align: left;
}

.rev-card-author {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.rev-card-source {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: .82rem;
  color: var(--text-secondary);
}

.rev-card-source svg { flex-shrink: 0; }

/* ── STEUERUNG ── */
.rev-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.rev-arrow {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, transform .2s ease;
}

/* Der Pfeil ist kein Slot, hier ist transform unbedenklich. */
.rev-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.rev-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.rev-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--text-secondary);
  opacity: .35;
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease, opacity .3s ease;
}

.rev-dot[aria-selected="true"] {
  width: 22px;
  background: var(--accent);
  opacity: 1;
}

/* Bleibt fuer Screenreader erhalten, ist aber nicht mehr zu sehen. */
.rev-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 699px) {
  /* Die Karte ist schmaler, der Text braucht mehr Zeilen — deshalb
     hier mehr Hoehe und ein hoeherer Zeilendeckel. Versatz und
     Skalierung der Nachbarn stehen in script.js. */
  .rev-stage { height: 380px; }
  .rev-card  { height: 380px; }
  .rev-card-text { -webkit-line-clamp: 7; }
  .rev-controls { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .rev-slot,
  .rev-card,
  .rev-card::before,
  .rev-dot,
  .rev-arrow { transition: none; }
}

/* ================================================================
   SPRUNGZIELE UNTER DEM STICKY HEADER

   Ohne diesen Abstand verschwindet die angesprungene Ueberschrift
   unter dem fest stehenden Header. --header-height setzt script.js
   auf die gemessene Hoehe, 24px kommen als Luft dazu.
   ================================================================ */
/* Jedes Sprungziel bleibt unter dem klebenden Kopf sichtbar, nicht
   nur die frueher einzeln aufgezaehlten. */
[id] {
  scroll-margin-top: calc(var(--header-height, 80px) + 32px);
}

/* ================================================================
   HAUPTNAVIGATION

   Fuenf Eintraege ohne Unterebene. Bei zwei Leistungen ist ein
   Aufklappmenue nur ein zusaetzlicher Handgriff fuer den Besucher.

   Platzrechnung fuer die Kopfzeile bei 15px Manrope 600:
     Marke 230, Navigation 736 (lange Form), Aufruf 179, zweimal
     Abstand 24, Polsterung 80  =  rund 1273px.
   Bei 1280px waeren das sieben Pixel Luft. Deshalb ruecken die
   Eintraege auf dem Desktop enger zusammen, der Telefonknopf weicht
   dort und unter 1280px stehen die kurzen Beschriftungen.
   ================================================================ */

/* Standardmaessig die lange Form. */
.nav-kurz { display: none; }

@media (max-width: 1279px) {
  /* Zwischen Hamburger-Schwelle und 1280px die kurze Form, dazu
     weicht die Tagline neben der Wortmarke. */
  .nav-lang { display: none; }
  .nav-kurz { display: inline; }
  .brand-tagline { display: none; }
}

@media (min-width: 1180px) {
  /* Engere Polsterung, damit fuenf Eintraege sicher in eine Zeile
     passen. */
  .nav-desktop { gap: 2px; }
  .nav-link { padding: 8px 12px; }
  /* Der Telefonknopf weicht auf dem Desktop. Die Nummer steht dort
     im Hero, im Kontaktbereich und im Footer. Auf schmaleren
     Geraeten bleibt er, dort ist Tippen auf die Nummer der kuerzeste
     Weg. */
  .tel-icon-btn { display: none; }
}

/* ================================================================
   HERO-BADGE MIT BEWERTUNG
   ================================================================ */

.hero-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
}

.hero-badge-stars { color: #F2A93B; letter-spacing: 2px; font-size: 15px; }

.hero-badge-trenner {
  width: 1px;
  height: 16px;
  background: var(--border-strong);
  flex-shrink: 0;
}

.hero-badge .google-g { flex-shrink: 0; }

/* Zwei Quellen nebeneinander, durch den vorhandenen Trenner getrennt.
   Google bleibt die Hauptquelle, ProvenExpert steht kleiner und
   ruhiger daneben. Die Zahlen bleiben getrennt. */
/* Reine Angabe, kein Link: kein Unterstrich, kein Hover, Standardzeiger. */
.hero-badge-quelle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  font-size: clamp(.95rem, 2.2vw, 1.05rem);
  cursor: default;
}

@media (max-width: 900px) {
  /* Untereinander, der Trenner stuende sonst quer in der Luft. */
  .hero-badge { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-badge-trenner { display: none; }
}

@media (max-width: 379px) {
  /* Bei sehr schmalen Geraeten bricht die Zeile um, der Trenner
     stuende dann quer in der Luft. */
  .hero-badge { flex-wrap: wrap; gap: 6px 8px; }
  .hero-badge-trenner { display: none; }
}

/* ================================================================
   DETAILSEITEN

   Alle vier Leistungsseiten nutzen dieselben Bausteine. Farben,
   Typo-Skala, Radien und Abstaende kommen aus den vorhandenen
   Tokens; es entstehen keine neuen Werte. #60A5FA ist der im
   Projekt bereits gesetzte Akzent auf dunklem Grund (siehe
   .services-highlight-box), #F2A93B die freigegebene Sternfarbe.

   FLAECHENWECHSEL
   Jede Section erbt ihre vier Rollen aus einer der drei Varianten.
   Bausteine greifen nur auf diese Variablen zu, nie direkt auf die
   Tokens. Dadurch funktioniert derselbe Baustein auf heller wie auf
   dunkler Flaeche, ohne dass irgendwo eine Farbe doppelt gepflegt
   werden muss.
   ================================================================ */

.detail-section {
  --flaeche-bg:     var(--bg-primary);
  --flaeche-ink:    var(--text-primary);
  --flaeche-muted:  var(--text-secondary);
  --flaeche-linie:  var(--border);
  --flaeche-akzent: var(--accent);

  padding-block: clamp(64px, 8vw, 104px);
  padding-inline: 40px;
  background: var(--flaeche-bg);
}

.detail-section--getoent { --flaeche-bg: var(--bg-secondary); }

/* Dieselben Rollen auch auf den uebrigen dunklen Flaechen des
   Projekts. Ohne sie faellt ein dort eingesetzter Baustein auf
   seinen hellen Rueckfallwert zurueck und stuende dunkel auf
   dunkel. Ein zweites Modifier-System braucht es dafuer nicht. */
.cta-banner,
.site-footer {
  --flaeche-bg:     var(--bg-dark);
  --flaeche-ink:    #FFFFFF;
  --flaeche-muted:  rgba(255, 255, 255, .82);
  --flaeche-linie:  rgba(255, 255, 255, .16);
  --flaeche-akzent: #60A5FA;
}

.detail-section--dunkel {
  --flaeche-bg:     var(--bg-dark);
  --flaeche-ink:    #FFFFFF;
  --flaeche-muted:  rgba(255, 255, 255, .72);   /* 9,5:1 auf #1A1A1A */
  --flaeche-linie:  rgba(255, 255, 255, .14);
  --flaeche-akzent: #60A5FA;                    /* 6,9:1 auf #1A1A1A */
}

.detail-inner { max-width: 1300px; margin: 0 auto; }
.detail-inner--schmal { max-width: 820px; }

/* ── TYPOGRAFISCHER KOPF: Eyebrow, H2, Balken ── */
/* Der einzige Abstand zwischen Balken und Text, projektweit. */
.detail-kopf { margin-bottom: 28px; }

.detail-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--flaeche-akzent);
  margin-bottom: 10px;
}

.detail-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--flaeche-ink);
  margin: 0;
}

.detail-section h2 .accent-highlight { color: var(--flaeche-akzent); }

.detail-balken {
  width: 48px;
  height: 3px;
  /* 14px unter der Ueberschrift. Den Abstand nach unten setzt der
     Kopfblock, damit er nur an einer Stelle steht. */
  margin: 14px 0 0;
  background: var(--flaeche-akzent);
  border-radius: 2px;
}

/* ── BREADCRUMB ── */
.breadcrumb { font-family: var(--font-body); font-size: 13px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "\203A"; opacity: .7; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================
   SEITEN-HERO

   Drei Ebenen: Bild, Verlauf, Text. Das Geisterwort laeuft rechts
   bewusst aus dem Bild heraus; overflow:hidden auf der Section
   verhindert, dass daraus horizontales Scrollen wird.
   ================================================================ */

.detail-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  min-height: clamp(340px, 42vh, 460px);
  display: flex;
  align-items: center;
  padding: clamp(44px, 6vw, 72px) 40px;
}

.detail-hero-bild { position: absolute; inset: 0; }
.detail-hero-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Beim Beschnitt bleibt die Ladeflaeche im Bild, nicht der Himmel. */
  object-position: center 55%;
  opacity: .22;
  display: block;
}

/* Links deckt der Verlauf das Bild vollstaendig ab, nach rechts
   gibt er es frei. Der Text steht damit auf ruhigem Grund, das
   Motiv bleibt trotzdem erkennbar. */
.detail-hero-schleier {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
              var(--bg-dark) 0%,
              rgba(0, 0, 0, .72) 42%,
              rgba(0, 0, 0, .35) 100%);
}

/* Einspaltig steht der Text unter dem Bildschwerpunkt, deshalb
   laeuft der Verlauf dort von oben nach unten. */
@media (max-width: 900px) {
  .detail-hero-schleier {
    background: linear-gradient(180deg,
                rgba(0, 0, 0, .55) 0%,
                var(--bg-dark) 82%);
  }
}

.detail-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.detail-hero-text { max-width: 700px; }

.detail-hero .breadcrumb { color: rgba(255, 255, 255, .6); margin-bottom: 18px; }
.detail-hero .breadcrumb a { color: rgba(255, 255, 255, .6); }
.detail-hero .breadcrumb a:hover { color: #FFFFFF; }
.detail-hero .breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, .85); font-weight: 600; }

.detail-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #FFFFFF;
  margin: 0 0 16px;
}
.detail-hero-title .accent-highlight { color: #60A5FA; }

.detail-hero-lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  max-width: 58ch;
  margin: 0 0 26px;
}

.detail-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.detail-hero .btn-hero-secondary {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, .35);
}
.detail-hero .btn-hero-secondary:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, .08);
}

.detail-hero-fakten {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 22px 0 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: .88rem;
  color: rgba(255, 255, 255, .72);
}
.detail-hero-fakten li { display: flex; align-items: center; gap: 12px; }
/* .4 ergab auf dem dunklen Hero nur 3,8:1. */
.detail-hero-fakten li + li::before { content: "\00B7"; color: rgba(255, 255, 255, .55); }

/* Genau ein Bauteil, auf beiden Seiten identisch. Eintraege ohne
   belegbare Zahl tragen nur den Text. */
.kennzahlen-karte {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}

.kennzahl { padding-block: 18px; }
/* Linie zwischen den Eintraegen, nicht unter dem letzten. */
.kennzahl + .kennzahl { border-top: 1px solid var(--border); }
.kennzahl:first-child { padding-top: 0; }
.kennzahl:last-child  { padding-bottom: 0; }

.kennzahl-wert {
  display: block;
  font-family: var(--font-display);
  /* deutlich kleiner als die H2, damit die Werte nicht konkurrieren */
  font-size: clamp(1.45rem, 2.4vw, 1.8rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
  margin-bottom: 4px;
}

.kennzahl-text {
  display: block;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ── FLIESSTEXT (Hintergrund-Block, Vorspann vor Rastern) ── */
.detail-fliesstext p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--flaeche-muted);
  margin: 0 0 18px;
  max-width: 62ch;
}
.detail-fliesstext p:last-child { margin-bottom: 0; }

/* Vorspann ueber einem Raster */
.umfang-vorspann { margin-top: 24px; }

/* ================================================================
   LEISTUNGSUMFANG

   Zwei Spalten, getrennt durch duenne Linien statt durch Kaesten.
   Keine Rahmen, keine Flaechen, keine Schatten, kein Hover und
   keine Symbole: neun gleich aussehende Kacheln waren der Grund,
   warum der Abschnitt schematisch wirkte.
   ================================================================ */

.scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
}

.scope-list li {
  padding: 22px 0;
  border-top: 1px solid var(--border);
}

/* Die oberste Zeile steht ohne Linie. */
.scope-list li:nth-child(-n+2) { border-top: none; padding-top: 0; }

.scope-list h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--flaeche-ink, var(--text-primary));
  margin: 0 0 6px;
}

.scope-list p {
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--flaeche-muted, var(--text-secondary));
  max-width: 46ch;
}

@media (max-width: 820px) {
  .scope-list { grid-template-columns: 1fr; gap: 0; }
  /* Einspaltig ist nur noch der allererste Eintrag ohne Linie. */
  .scope-list li:nth-child(2) { border-top: 1px solid var(--border); padding-top: 22px; }
}

/* ================================================================
   ABLAUF als Zeitstrahl

   Waagerecht liegt die Linie als ::before auf dem Container und
   damit unter den Kreisen. Der 4px-Ring in der Flaechenfarbe
   schneidet sie an jedem Kreis sauber auf.
   ================================================================ */

.ablauf-grid {
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
}

.ablauf-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 27px;                 /* Mitte des 56px-Kreises */
  left: 12.5%; right: 12.5%;
  height: 2px;
  background: var(--flaeche-linie);
}

.ablauf-grid li {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ablauf-num {
  position: relative;
  z-index: 2;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg-dark);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 0 0 4px var(--flaeche-bg);
}

.ablauf-titel {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--flaeche-ink);
  margin-bottom: 8px;
}

.ablauf-text {
  display: block;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.65;
  color: var(--flaeche-muted);
}

/* ================================================================
   ZITAT-SECTION

   Ein einzelnes, wortgetreu uebernommenes Zitat. Kein Karussell,
   keine Automatik, nichts, was den Text kuerzt.
   ================================================================ */

.zitat-inner { max-width: 840px; margin: 0 auto; text-align: center; }

.zitat-marke {
  display: block;
  font-family: var(--font-display);
  font-size: 120px;
  line-height: .62;
  font-weight: 700;
  color: #FFFFFF;
  opacity: .1;
  user-select: none;
  -webkit-user-select: none;
  margin-bottom: 6px;
}

.zitat-text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  font-weight: 500;
  font-style: normal;
  line-height: 1.45;
  color: #FFFFFF;
  margin: 0;
}

.zitat-sterne {
  margin-top: 26px;
  color: #F2A93B;              /* 8,7:1 auf #1A1A1A */
  font-size: 1.05rem;
  letter-spacing: .16em;
}

.zitat-name {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}

.zitat-quelle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: .85rem;
  color: rgba(255, 255, 255, .72);
}

/* ================================================================
   PREISE
   ================================================================ */

.preis-hinweis {
  margin-top: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(26px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
}

.preis-liste { list-style: none; margin: 0; padding: 0; }

.preis-liste li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--text-secondary);
}
.preis-liste li:first-child { padding-top: 0; }
.preis-liste li:last-child { border-bottom: none; padding-bottom: 0; }
.preis-liste strong { font-family: var(--font-display); color: var(--text-primary); font-weight: 700; }

.preis-fussnote {
  margin: 20px 0 0;
  font-family: var(--font-body);
  font-size: .86rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.detail-preis-text { margin-top: 28px; }

/* ================================================================
   WEITERE LEISTUNGEN
   ================================================================ */

.weitere-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.weitere-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.weitere-karte:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(15, 30, 60, .08);
}

.weitere-titel { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.weitere-text  { font-family: var(--font-body); font-size: .92rem; line-height: 1.65; color: var(--text-secondary); }
.weitere-pfeil { font-family: var(--font-body); font-size: .88rem; font-weight: 600; color: var(--accent); margin-top: auto; }

/* ================================================================
   SANFTE EINBLENDUNG

   Verborgen wird ausschliesslich per Klasse, die script.js setzt.
   Ohne JavaScript ist deshalb alles sofort sichtbar; im CSS steht
   nirgends ein opacity:0 im Ruhezustand.
   ================================================================ */

[data-reveal] { transition: opacity .55s ease-out, transform .55s ease-out; }
.reveal-verborgen { opacity: 0; transform: translateY(16px); }

/* ================================================================
   STICKY KONTAKTLEISTE, nur mobil
   ================================================================ */

.kontaktleiste { display: none; }

/* ── RESPONSIVE ── */

@media (max-width: 1099px) {
  .weitere-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 819px) {
  .detail-hero { padding: 40px 32px; min-height: clamp(300px, 38vh, 400px); }
  .detail-section { padding-inline: 32px; }

  /* Zeitstrahl senkrecht: die Linie haengt jetzt an den Schritten
     selbst, damit sie exakt am letzten Kreis endet. */
  .ablauf-grid { grid-template-columns: 1fr; gap: 28px; }
  .ablauf-grid::before { display: none; }
  .ablauf-grid li {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 20px;
    text-align: left;
    align-items: start;
  }
  .ablauf-grid li:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 27px;
    top: 56px;
    bottom: -28px;
    width: 2px;
    background: var(--flaeche-linie);
  }
  .ablauf-num  { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .ablauf-titel { grid-column: 2; margin-top: 12px; }
  .ablauf-text  { grid-column: 2; }
}

@media (max-width: 767px) {
  .weitere-grid { grid-template-columns: 1fr; }

  .kontaktleiste {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9998;                 /* unter dem Back-to-Top (9999) */
    background: var(--bg-primary);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .12);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(110%);
    transition: transform .3s ease;
  }
  .kontaktleiste.is-sichtbar { transform: translateY(0); }

  .kontaktleiste a {
    flex: 1;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .kontaktleiste a svg { width: 18px; height: 18px; }
  .kontaktleiste-anruf    { background: var(--accent); color: #FFFFFF; }
  .kontaktleiste-whatsapp { background: var(--bg-primary); color: var(--text-primary); border-left: 1px solid var(--border); }

  /* Platz fuer die Leiste, damit sie den Footer nicht verdeckt */
  body.hat-kontaktleiste { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body.hat-kontaktleiste .back-to-top { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (max-width: 600px) {
  .detail-hero { padding: 32px 24px; }
  .detail-section { padding-inline: 24px; }
  .detail-hero-cta .btn-hero { width: 100%; justify-content: center; }
  .zitat-marke { font-size: 88px; }
}

/* ================================================================
   KENNZEICHNUNG KI-GENERIERTER BILDER (Art. 50 EU-KI-VO)

   Das Label ist absolut positioniert, es steht also ausserhalb des
   Flusses und kann keinen Layout-Shift ausloesen.

   Die Klasse liegt auf dem vorhandenen Bildcontainer statt auf einem
   zusaetzlichen <figure>. Jedes betroffene Bild fuellt seinen
   Container ueber height:100% oder aspect-ratio; ein eingeschobenes
   Element wuerde diese Kette unterbrechen und die Bildhoehe
   veraendern.

   Kontrast: #FFFFFF auf rgba(0,0,0,.55). Im denkbar unguenstigsten
   Fall, naemlich reinweissem Bilduntergrund, ergibt die Ueberlagerung
   #737373 und damit 4,76:1. Ueber jedem dunkleren Bildbereich steigt
   der Wert. Die Vorgabe von 4,5:1 ist also an jeder Stelle gehalten,
   ohne die Deckkraft anzuheben.
   ================================================================ */

.ai-figure { position: relative; margin: 0; }

.ai-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  /* Der Hero der Detailseiten setzt seinen Textblock auf z-index 2.
     Ohne diesen Wert laege das Label darunter. */
  z-index: 3;
  background: rgba(0, 0, 0, .55);
  color: #FFFFFF;
  font-size: .72rem;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 4px;
  letter-spacing: .01em;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* Nie umbrechen und nie ueber den Bildrand hinauslaufen. */
  white-space: nowrap;
  max-width: calc(100% - 20px);
  pointer-events: none;
}

@media (max-width: 600px) {
  .ai-label { font-size: .68rem; padding: 4px 7px; }
}

/* Bewegung ist Zierrat. Wer sie abbestellt hat, bekommt alles
   sofort und ohne Uebergang. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; }
  .reveal-verborgen { opacity: 1; transform: none; }
  .kontaktleiste { transition: none; }
}

/* ================================================================
   ZWEI-KLICK-KARTE

   Vor dem Klick liegt hier nur diese Flaeche. Das iframe wird erst
   von script.js erzeugt, es geht also vorher keine Anfrage an Google,
   auch keine Vorschaugrafik von deren Servern.
   ================================================================ */

.map-consent {
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.map-consent-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 28px 24px;
  background: var(--bg-secondary);
  min-height: 220px;
}

.map-consent-icon { font-size: 28px; line-height: 1; }

.map-consent-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 320px;
  margin: 0;
}

.map-consent-text a { color: var(--accent); text-decoration: underline; }
.map-consent-btn { padding: 12px 22px; font-size: 12px; }

.map-consent iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}

/* ================================================================
   ZWEI BEREICHSKARTEN auf der Startseite

   Loesen die vier kleinen Leistungskarten ab. Beide Karten sind
   gleich hoch: das Raster streckt sie, der Koerper ist flex und
   der Aufruf am Fuss wird mit margin-top:auto nach unten gedrueckt.
   Kein transform auf der Karte, damit im Raster nichts springt.
   ================================================================ */

.bereich-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: stretch;
}

.bereich-karte {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.bereich-karte:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.bereich-bild {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-dark);
}
.bereich-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Beim Beschnitt bleibt die Ladeflaeche im Bild, nicht der Himmel. */
  object-position: center 55%;
  display: block;
  transition: filter .25s ease;
}
.bereich-karte:hover .bereich-bild img { filter: brightness(1.06); }

.bereich-verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--bg-dark) 0%,
    rgba(26, 26, 26, .35) 45%,
    transparent 75%);
}

.bereich-label {
  position: absolute;
  left: 20px; bottom: 16px;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.bereich-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
  padding: 26px 26px 28px;
}

.bereich-titel {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}

.bereich-text {
  font-family: var(--font-body);
  font-size: .96rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

.bereich-punkte {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
}
.bereich-punkte li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.bereich-haken { flex-shrink: 0; color: var(--accent); margin-top: 2px; }

.bereich-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  color: var(--accent);
}
.bereich-pfeil { transition: transform .2s ease; }
.bereich-karte:hover .bereich-pfeil { transform: translateX(4px); }

/* ================================================================
   ZUSAMMENARBEIT MIT MOEBELHAENDLERN
   Nur auf der Geschaeftskundenseite, steht auf derselben Flaeche
   wie der Ablauf darueber.
   ================================================================ */

.zusammenarbeit { margin-top: clamp(56px, 7vw, 88px); }

.zusammenarbeit-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 32px 0 0;
  padding: 0;
}
.zusammenarbeit-grid li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px 26px;
}
.zusammenarbeit-titel {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.zusammenarbeit-text {
  display: block;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ================================================================
   WEITERE LEISTUNGEN als eine breite Karte
   Bild links, Text rechts. Es gibt nur noch einen anderen Bereich,
   deshalb keine Rasterkarte mehr.
   ================================================================ */

.weitere-breit {
  display: grid;
  grid-template-columns: 320px 1fr;
  align-items: stretch;
  margin-top: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.weitere-breit:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(15, 30, 60, .08);
}

.weitere-breit-bild {
  position: relative;
  min-height: 220px;
  overflow: hidden;
}
.weitere-breit-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}

.weitere-breit-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(26px, 3.5vw, 40px);
}
.weitere-breit-label {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── RESPONSIVE ── */

@media (max-width: 899px) {
  .bereich-grid { grid-template-columns: 1fr; gap: 22px; }
  .zusammenarbeit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .weitere-breit { grid-template-columns: 1fr; }
  .weitere-breit-bild { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
  .bereich-body { padding: 22px 20px 24px; }
  .bereich-label { left: 16px; bottom: 12px; }
}