/* ==========================================================================
   Krelle Umzüge – High-End Clean Design System
   Ästhetik: Inspiriert von moderner High-End Architektur & Logistik (hmueller-sohn.de)
   Dominanz: Edles Anthrazit (#181B20 / #232830), pure Weißflächen (#FFF) &
             sanftes Off-White/Steingrau (#F7F8FA, #EFF1F4).
   Große, bildgewaltige Fotobereiche, großzügiges Spacing & reduzierte Akzente.
   ========================================================================== */

/* --- Schrift: Plus Jakarta Sans lokal ausgeliefert (DSGVO, keine Verbindung zu Google) ---
   Variable Schrift: eine Datei je Zeichensatz deckt alle Stärken von 400 bis 800 ab. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- CSS Custom Properties / Design Tokens --- */
:root {
  /* Surfaces */
  --bg-main: #ffffff;
  --bg-subtle: #f8f9fb;
  --bg-muted: #f1f3f6;
  --bg-card: #ffffff;
  --bg-card-hover: #fafbfc;
  --bg-dark: #16191d;
  --bg-dark-card: #20242a;
  --bg-glass: rgba(255, 255, 255, 0.94);

  /* Primary Theme: Edles Anthrazit */
  --anthrazit-deep: #121518;
  --anthrazit-main: #181b20;
  --anthrazit-surface: #22272f;
  --anthrazit-hover: #2c333e;
  --anthrazit-soft: #f2f4f7;
  --anthrazit-border: #dcdfe4;

  /* Typography */
  --text-main: #14171b;
  --text-secondary: #48515c;
  --text-muted: #636c78;
  --text-light: #949ea8;
  --text-on-dark: #f8f9fb;

  /* Brand Accent: Krelle Hellblau (#7aadeb als einheitlicher Akzent für Buttons, Sterne & Icons) */
  --brand-blue: #7aadeb;
  --brand-blue-hover: #679ecc;
  --brand-blue-active: #588ebc;
  --brand-blue-subtle: rgba(122, 173, 235, 0.15);
  --brand-blue-glow: rgba(122, 173, 235, 0.35);
  --text-on-blue: #ffffff;

  /* Accent: Anthrazit als primäre Farbe, Krelle-Blau nur ganz dezent */
  --accent-primary: #181b20;
  --accent-hover: #2b3038;
  --accent-subtle: #f4f6f9;
  --accent-gold: #181b20;
  --accent-green: #181b20;
  --accent-anthrazit: #181b20;

  /* Lines & Borders */
  --border-light: #e5e8ed;
  --border-subtle: #edf0f5;
  --border-dark: rgba(255, 255, 255, 0.1);

  /* Shadows (Weich, natürlich, edel) */
  --shadow-xs: 0 1px 2px rgba(18, 21, 24, 0.04);
  --shadow-sm: 0 2px 8px rgba(18, 21, 24, 0.05);
  --shadow-md: 0 8px 24px -4px rgba(18, 21, 24, 0.07), 0 2px 6px -1px rgba(18, 21, 24, 0.03);
  --shadow-lg: 0 20px 40px -8px rgba(18, 21, 24, 0.1), 0 6px 16px -2px rgba(18, 21, 24, 0.04);
  --shadow-button: 0 6px 18px -2px rgba(24, 27, 32, 0.22);

  /* Radius (Architektonisch, modern) */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --trans-fast: 0.16s ease;
  --trans-base: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-max: 1280px;
  --header-height: 74px;
}

/* --- Base & Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-main);
  background-color: var(--bg-main);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body {
  overflow-x: clip;
  position: relative;
  background-color: var(--bg-main);
  color: var(--text-main);
}

p, h1, h2, h3, h4, h5, h6, span, a, label, li, blockquote {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

img, picture, svg, video, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--trans-fast);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  max-width: 100%;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

/* --- Container Utility --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- Typography & Headings --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--anthrazit-main);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.section-title {
  font-size: clamp(1.75rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
  color: var(--anthrazit-main);
  overflow-wrap: break-word;
  hyphens: auto;
}

.section-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 680px;
  line-height: 1.68;
}

.section-header {
  margin-bottom: 56px;
}

.section-header.center {
  text-align: center;
}

.section-header.center .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.section-header.split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

@media (max-width: 768px) {
  .section-header.split {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Section Layouts --- */
.section {
  padding: 110px 0;
  position: relative;
}

.section-light {
  background-color: var(--bg-main);
}

.section-subtle {
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.section-muted {
  background-color: var(--bg-muted);
}

@media (max-width: 768px) {
  .section {
    padding: 72px 0;
  }
}

/* --- Buttons (Clean, Edles Anthrazit) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: color var(--trans-base),
    background-color var(--trans-base),
    border-color var(--trans-base),
    box-shadow var(--trans-base),
    transform var(--trans-base),
    opacity var(--trans-base);
  white-space: nowrap;
  line-height: 1;
}

.btn-primary {
  background-color: var(--anthrazit-main);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  border: 1.5px solid var(--anthrazit-main);
}

.btn-primary svg {
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #7aadeb;
  border-color: #7aadeb;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(122, 173, 235, 0.4);
}

.btn-primary:hover svg {
  color: #ffffff;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background-color: transparent;
  color: var(--anthrazit-main);
  border: 1.5px solid var(--anthrazit-main);
  border-radius: var(--radius-full);
  font-weight: 700;
  transition: color var(--trans-base),
    background-color var(--trans-base),
    border-color var(--trans-base),
    box-shadow var(--trans-base),
    transform var(--trans-base),
    opacity var(--trans-base);
}

.btn-secondary:hover {
  background-color: var(--anthrazit-main);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background-color: transparent;
  color: var(--anthrazit-main);
  border: 1px solid var(--border-light);
}

.btn-ghost:hover {
  background-color: var(--anthrazit-soft);
  border-color: var(--anthrazit-border);
}

.btn-lg {
  padding: 17px 34px;
  font-size: 1.05rem;
}

.btn-sm {
  padding: 10px 20px;
  font-size: 0.875rem;
}

.btn-tesla-outline {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--anthrazit-main);
  color: var(--anthrazit-main);
  font-weight: 700;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color var(--trans-base),
    background-color var(--trans-base),
    border-color var(--trans-base),
    box-shadow var(--trans-base),
    transform var(--trans-base),
    opacity var(--trans-base);
}

.btn-tesla-outline:hover {
  background-color: var(--anthrazit-main);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ==========================================================================
   STICKY HEADER & NAVIGATION (Tesla-Style: Extrem clean, minimalistisch & fokussiert)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 1000;
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled {
  height: 76px;
  background-color: rgba(18, 21, 26, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Navigation auf Unterseiten (Impressum, Datenschutz, AGB) sofort mit Anthrazit hinterlegt für weiße Schrift */
.site-header-solid,
.legal-page .site-header,
body:has(.legal-page-header) .site-header {
  background-color: rgba(24, 27, 32, 0.98) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Obere Header-Zeile (Logo & Menü) bei geöffnetem Burger-Menü in Anthrazit einfärben */
.site-header.menu-open,
.site-header:has(.menu-toggle.is-active) {
  background-color: rgba(24, 27, 32, 0.98) !important;
  background: rgba(24, 27, 32, 0.98) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand Logo (Präsent, groß & markant) */
.brand-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Logo präsent und beim Scrollen in fester Größe (kein Springen) */
.brand-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  transition: transform var(--trans-fast);
}

.brand-link:hover .brand-logo {
  transform: scale(1.03);
}

/* Navigation Links (Exakt wie gewünscht: Über uns, Leistungen, Preise, Kontakt) */
.main-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Leistungen-Dropdown (Desktop: öffnet bei Hover & Tastaturfokus) */
.nav-item-dropdown {
  position: relative;
}

.nav-link-dropdown {
  gap: 6px;
}

.nav-dropdown-chevron {
  opacity: 0.8;
  transition: transform var(--trans-fast);
}

.nav-item-dropdown:hover .nav-dropdown-chevron,
.nav-item-dropdown:focus-within .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 260px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: rgba(24, 27, 32, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, 6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1001;
}

/* Unsichtbare Brücke, damit das Menü beim Runterfahren mit der Maus offen bleibt */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  transform: translate(-50%, 10px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-dropdown-link {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-dropdown-all {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-dropdown-all .nav-dropdown-link {
  font-weight: 700;
  color: var(--brand-blue);
}

/* Header Actions Right (Kostenloses Angebot Pill Button wie im Hero) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-tesla-header {
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.015em;
  text-transform: none;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.btn-tesla-header svg {
  color: currentColor;
  transition: transform var(--trans-fast);
}

/* Hamburger Button (clean, ohne Umrandung) */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle:hover,
.menu-toggle.is-active {
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #ffffff;
  position: relative;
  transition: background-color var(--trans-fast),
    transform var(--trans-fast),
    top var(--trans-fast),
    bottom var(--trans-fast);
}

.menu-toggle span::before,
.menu-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: #ffffff;
  transition: background-color var(--trans-fast),
    transform var(--trans-fast),
    top var(--trans-fast),
    bottom var(--trans-fast);
}

.menu-toggle span::before {
  top: -7px;
}

.menu-toggle span::after {
  bottom: -7px;
}

.menu-toggle.is-active span {
  background-color: transparent;
}

.menu-toggle.is-active span::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle.is-active span::after {
  transform: rotate(-45deg);
  bottom: 0;
}

@media (max-width: 900px) {
  .brand-logo {
    height: 50px;
  }
  .main-nav {
    display: none;
  }
  /* Button im Header mobil ausblenden – nur Burgermenü */
  .btn-tesla-header {
    display: none !important;
  }
  .menu-toggle {
    display: flex;
  }
  .header-actions .nav-phone-direct {
    display: none;
  }
}

@media (max-width: 600px) {
  :root {
    --header-height: 72px;
  }
  .site-header,
  .site-header.scrolled {
    height: 72px;
  }
  .mobile-nav-drawer {
    top: 72px;
  }
  .brand-logo {
    height: 44px;
    max-width: 170px;
  }
}

@media (max-width: 440px) {
  .brand-logo {
    height: 40px;
    max-width: 150px;
  }
  .header-actions {
    gap: 8px;
  }
}

/* Mobile Dropdown Menu (kompakt unter Header, nicht über gesamten Bildschirm) */
.mobile-nav-drawer {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  max-height: calc(100dvh - var(--header-height));
  background: rgba(24, 27, 32, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  z-index: 99;
  padding: 16px 20px 22px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
}

.mobile-nav-drawer.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav-link {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  color: #ffffff;
}

.mobile-nav-link:hover, .mobile-nav-link.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.mobile-services-sub {
  margin-left: 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.15);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.mobile-sub-link {
  font-size: 0.95rem;
  padding: 6px 12px;
  color: #bac3cf;
}

.mobile-footer-actions {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ==========================================================================
   SEKTION 1: TESLA-INSPIRED FULL-STAGE HERO (tesla.com / cybertruck Ästhetik)
   ========================================================================== */
.tesla-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 130px 24px 36px;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}

.tesla-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: 
    linear-gradient(180deg, rgba(10, 14, 18, 0.68) 0%, rgba(10, 14, 18, 0.12) 28%, rgba(10, 14, 18, 0.16) 68%, rgba(10, 14, 18, 0.72) 100%),
    url('/assets/img/krelle-lkw-berlin.webp?v=1');
  background-size: cover;
  background-position: center 36%;
  background-repeat: no-repeat;
}

.tesla-hero-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
}

.tesla-hero-title {
  font-size: clamp(1.85rem, 5.5vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: #ffffff;
  margin-bottom: 10px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
  overflow-wrap: break-word;
}

.tesla-hero-subtitle {
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
  line-height: 1.5;
  max-width: 720px;
}

/* Bottom Tesla Action Strip */
.tesla-hero-bottom {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  padding-top: 36px;
}

.tesla-bottom-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 900px;
}

/* Tesla Action Buttons */
.tesla-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: auto;
  max-width: 680px;
}

.btn-tesla-primary {
  min-width: 220px;
  height: 52px;
  padding: 0 36px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.btn-tesla-primary svg {
  color: currentColor;
  transition: transform var(--trans-fast);
  flex-shrink: 0;
}

.btn-tesla-secondary {
  min-width: 200px;
  height: 52px;
  padding: 0 32px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .btn,
  .btn-tesla-primary,
  .btn-tesla-secondary,
  .btn-tesla-outline,
  .btn-primary {
    padding: 0 20px;
    height: 48px;
    font-size: 0.9rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .btn,
  .btn-tesla-primary,
  .btn-tesla-secondary,
  .btn-tesla-outline,
  .btn-primary {
    padding: 0 14px;
    height: 46px;
    font-size: 0.84rem;
    gap: 8px;
  }
}

.tesla-scroll-indicator {
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: teslaBounce 2s infinite;
  text-decoration: none;
  transition: color var(--trans-fast);
  margin-top: 2px;
}

.tesla-scroll-indicator:hover {
  color: #ffffff;
}

@keyframes teslaBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(5px);
  }
  60% {
    transform: translateY(2px);
  }
}

/* ==========================================================================
   SEKTION 2: TESLA SPECS BAR (Dezent, clean & präzise unter der Hero-Stage)
   ========================================================================== */
.tesla-specs-bar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-light);
  padding: 34px 0;
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.specs-bar-grid {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
}

.specs-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.specs-bar-val {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: var(--anthrazit-main);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.specs-bar-lbl {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-top: 4px;
}

.specs-bar-divider {
  width: 1px;
  height: 38px;
  background-color: var(--border-light);
}

@media (max-width: 880px) {
  .specs-bar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 14px;
  }
  .specs-bar-divider {
    display: none;
  }
}

@media (max-width: 860px) {
  .tesla-cta-row {
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    gap: 12px;
  }
  .tesla-cta-row .btn-tesla-primary,
  .tesla-cta-row .btn-tesla-secondary {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .tesla-hero-section {
    min-height: 82vh;
    padding: 90px 18px 24px;
  }
  .tesla-specs-row {
    gap: 20px 28px;
  }
}

@media (max-width: 420px) {
  .specs-bar-grid {
    gap: 16px 10px;
  }
  .specs-bar-val {
    font-size: 1.25rem;
  }
  .specs-bar-lbl {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
  }
}

/* ==========================================================================
   SEKTION 3: DIE 7 KERNLEISTUNGEN (Große Bildkarten wie bei hmueller-sohn)
   ========================================================================== */
.services-section {
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.services-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.section-header-left {
  max-width: 640px;
}

.services-header-action {
  flex-shrink: 0;
}

.services-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: var(--anthrazit-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.services-nav-btn svg {
  color: #1e242d;
  transition: transform var(--trans-fast);
}

.services-nav-btn:hover:not(:disabled) {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: var(--anthrazit-main);
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.services-nav-btn:disabled {
  opacity: 0.28;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* Slider Viewport & Track */
.services-slider-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 8px 4px 24px 4px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.services-slider-viewport:active {
  cursor: grabbing;
}

.services-slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Slide Card */
.service-slide-card {
  flex: 0 0 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.service-slide-card:hover {
  transform: translateY(-6px);
  border-color: #cbd3de;
  box-shadow: 0 20px 40px -10px rgba(18, 21, 24, 0.12), 0 4px 12px rgba(18, 21, 24, 0.04);
}

.service-slide-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.service-slide-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--bg-subtle);
}

.service-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.service-slide-card:hover .service-slide-media img {
  transform: scale(1.06);
}

.service-slide-badge {
  display: none !important;
}

.service-slide-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-slide-title {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--anthrazit-main);
  margin: 0 0 10px 0;
  line-height: 1.3;
  transition: color var(--trans-fast);
  text-wrap: balance;
}

.service-slide-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 20px 0;
  flex-grow: 1;
  min-height: 2.9em;
  text-wrap: pretty;
}

.service-slide-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--anthrazit-main);
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.service-slide-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--bg-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--anthrazit-main);
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.service-slide-card:hover .service-slide-arrow {
  background-color: var(--anthrazit-main);
  color: #ffffff;
  transform: translateX(4px);
}

/* Zentrierte Steuerung wie bei den Kundenstimmen */
.services-slider-controls-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 38px;
}

.services-slider-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.services-slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-slider-dot.active {
  width: 32px;
  border-radius: 9999px;
  background: #181b20;
}

/* Responsive Slider Breakpoints */
@media (max-width: 1024px) {
  .service-slide-card {
    flex: 0 0 calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 860px) {
  .services-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .services-header-action {
    width: 100%;
  }
  .services-header-action .btn-tesla-outline {
    width: 100%;
    justify-content: center;
  }
}

.services-bottom-action {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

@media (max-width: 640px) {
  .services-bottom-action {
    margin-top: 28px;
    width: 100%;
  }
  .services-bottom-action .btn-tesla-outline {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .service-slide-card {
    flex: 0 0 88%;
    max-width: 88%;
  }
  .services-slider-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .services-slider-viewport::-webkit-scrollbar {
    display: none;
  }
  .service-slide-card {
    scroll-snap-align: start;
  }
  .services-slider-bottom {
    justify-content: center;
  }
}

/* ==========================================================================
   SEKTION 4: „WARUM KRELLE UMZÜGE?“ (Große Bildfläche & Anthrazit-Karten)
   ========================================================================== */
.why-section {
  background-color: #ffffff;
  border-top: 1px solid var(--border-light, #e2e8f0);
  border-bottom: 1px solid var(--border-light, #e2e8f0);
  padding: 80px 0;
  overflow: hidden;
}

.why-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  align-items: center;
  gap: 56px;
}

/* Linke Spalte: Kompakte Fotofläche - Bild füllt bis ganz unten */
.why-visual-wrapper {
  position: relative;
  height: 100%;
}

.why-image-card {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 16px 36px -12px rgba(24, 27, 32, 0.12);
  border: 1px solid var(--border-light, #e2e8f0);
  height: 100%;
  min-height: 380px;
}

.why-image-card picture {
  display: block;
  width: 100%;
  height: 100%;
}

.why-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-image-card:hover img {
  transform: scale(1.03);
}

/* Rechte Spalte: Story, Checklist & Buttons */
.why-content-wrapper {
  display: flex;
  flex-direction: column;
}

.why-content-wrapper .section-title {
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 18px 0;
  color: var(--anthrazit-main, #181b20);
}

.why-story {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary, #475569);
  margin-bottom: 24px;
  font-weight: 400;
}

/* Schlanke, unaufdringliche Checkliste ohne Kachel-Boxen */
.why-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin-bottom: 32px;
}

.why-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--anthrazit-main, #181b20);
}

.why-check-item svg {
  color: var(--brand-blue, #7aadeb);
  stroke: var(--brand-blue, #7aadeb);
  flex-shrink: 0;
}

.why-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .why-section {
    padding: 60px 0;
  }
  .why-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .why-image-card {
    min-height: 280px;
  }
  .why-checklist {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 860px) {
  .why-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 12px;
  }
  .why-actions .btn-tesla-primary,
  .why-actions .btn-tesla-secondary {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   SCROLL-EXPAND SHOWCASE (Großflächig mit Scroll-Vergrößerung wie flash-security.de)
   ========================================================================== */
.scroll-expand-section {
  padding: 70px 0;
  background-color: var(--bg-main);
  overflow: hidden;
}

.scroll-expand-container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.scroll-expand-card {
  position: relative;
  min-height: 520px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  transform: scale(0.92);
  transform-origin: center center;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.25s ease;
  will-change: transform;
  background-color: #121518;
}

.scroll-expand-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transition: transform 0.4s ease-out;
}

.scroll-expand-card:hover .scroll-expand-bg {
  transform: scale(1.08);
}

.scroll-expand-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 18, 23, 0.94) 0%, rgba(14, 18, 23, 0.7) 48%, rgba(14, 18, 23, 0.2) 100%);
  z-index: 1;
}

.scroll-expand-content {
  position: relative;
  z-index: 2;
  padding: 64px 64px;
  max-width: 680px;
  color: #ffffff;
}

.scroll-expand-title {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 18px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.scroll-expand-desc {
  font-size: 1.1rem;
  line-height: 1.65;
  color: #d1d8e2;
  margin-bottom: 24px;
  max-width: 580px;
}

.scroll-expand-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  width: 100%;
}

.scroll-expand-features.grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  max-width: 620px;
}

.scroll-expand-features.list-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 620px;
}

.expand-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.96rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.4;
  background: transparent;
  border: none;
  padding: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.expand-feature-item svg {
  color: var(--brand-blue);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.scroll-expand-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .scroll-expand-card {
    min-height: 480px;
    transform: scale(0.96);
  }
  .scroll-expand-content {
    padding: 44px 30px;
  }
  .scroll-expand-overlay {
    background: linear-gradient(180deg, rgba(14, 18, 23, 0.92) 0%, rgba(14, 18, 23, 0.65) 100%);
  }
}

@media (max-width: 860px) {
  .scroll-expand-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 12px;
  }
  .scroll-expand-actions .btn-tesla-primary,
  .scroll-expand-actions .btn-tesla-secondary {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .scroll-expand-card {
    min-height: 440px;
    border-radius: 20px;
    transform: scale(1);
  }
  .scroll-expand-content {
    padding: 32px 18px;
  }
  .scroll-expand-title {
    font-size: clamp(1.65rem, 5vw, 2.2rem);
  }
  .scroll-expand-desc {
    font-size: 0.98rem;
    line-height: 1.55;
    margin-bottom: 20px;
  }
  .scroll-expand-features.grid-2x2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .expand-feature-item {
    font-size: 0.9rem;
  }
}

/* Anchor Scroll Margin für Sticky Header */
#ueber-uns,
#leistungen,
#preise,
#ablauf,
#zusatzleistungen,
#bewertungen,
#angebot,
#faq {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* ==========================================================================
   SEKTION 5: DER ABLAUF – INTERAKTIVER ZEITSTRAHL (4 Schritte)
   ========================================================================== */
.timeline-section {
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 84px 0;
  position: relative;
}

.timeline-wrapper {
  position: relative;
  margin-top: 56px;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Zeitstrahl-Schrittkarte (ohne Hover) */
.timeline-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  position: relative;
}

.timeline-step-number {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--anthrazit-main);
  margin-bottom: 18px;
  display: block;
}

.timeline-card-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--anthrazit-main);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.timeline-card-text {
  font-size: 0.90rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.timeline-dots {
  display: none;
}

/* Responsiver Ablauf (Tablet & Mobile) */
@media (max-width: 992px) {
  .timeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 720px) {
  .timeline-section {
    padding: 60px 0;
  }

  .timeline-wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px 12px;
  }

  .timeline-wrapper::-webkit-scrollbar {
    display: none;
  }

  .timeline-grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    width: max-content;
  }

  .timeline-card {
    flex: 0 0 calc(100vw - 64px);
    max-width: 330px;
    scroll-snap-align: center;
    padding: 26px 22px;
  }

  .timeline-step-number {
    font-size: 2.1rem;
    margin-bottom: 14px;
  }

  .timeline-dots {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
}

/* ==========================================================================
   SEKTION 6: ALLE ZUSATZLEISTUNGEN IM SCHNELLÜBERBLICK (Icon Grid)
   ========================================================================== */
.extras-section {
  background-color: #ffffff;
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.extra-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  transition: color var(--trans-base),
    background-color var(--trans-base),
    border-color var(--trans-base),
    box-shadow var(--trans-base),
    transform var(--trans-base),
    opacity var(--trans-base);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-xs);
}

.extra-card:hover {
  transform: translateY(-4px);
  background: #ffffff;
  border-color: var(--anthrazit-border);
  box-shadow: var(--shadow-md);
}

.extra-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  background: #ffffff;
  color: var(--anthrazit-main);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.extra-card:hover .extra-icon {
  background: var(--anthrazit-main);
  color: #ffffff;
  border-color: var(--anthrazit-main);
}

.extra-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--anthrazit-main);
  line-height: 1.35;
}

.extra-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 1040px) {
  .extras-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 680px) {
  .extras-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .extra-card {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   KUNDENSTIMMEN / GOOGLE BEWERTUNGEN
/* ==========================================================================
   KUNDENSTIMMEN / GOOGLE BEWERTUNGEN (Interaktiver Slider)
   ========================================================================== */
.reviews-section {
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 84px 0;
  position: relative;
}

.reviews-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 36px;
  padding: 0 2px;
}

.reviews-header-content {
  max-width: 680px;
}

.reviews-header-content .section-title {
  margin-bottom: 10px;
}

.reviews-header-content .section-subtitle {
  margin: 0;
}

.slider-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-bottom: 4px;
}

.slider-arrow-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: var(--anthrazit-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.slider-arrow-btn:hover {
  background: var(--anthrazit-main);
  color: #ffffff;
  border-color: var(--anthrazit-main);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.reviews-slider-viewport {
  width: 100%;
  overflow: hidden;
  padding: 8px 4px;
  margin: -8px -4px;
}

.reviews-slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.review-slide {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  box-sizing: border-box;
}

.review-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  transition: color var(--trans-base),
    background-color var(--trans-base),
    border-color var(--trans-base),
    box-shadow var(--trans-base),
    transform var(--trans-base),
    opacity var(--trans-base);
}

.review-card:hover {
  border-color: rgba(24, 27, 32, 0.28);
  box-shadow: 0 16px 36px rgba(18, 21, 24, 0.08);
  transform: translateY(-4px);
}

.review-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.review-stars-gold {
  color: #7aadeb;
  font-size: 1.15rem;
  letter-spacing: 2px;
}

.review-text {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.62;
  font-style: italic;
  margin: 0;
  flex-grow: 1;
}

.review-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #242930, #14171b);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.review-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-author strong {
  font-size: 0.98rem;
  color: var(--anthrazit-main);
  font-weight: 700;
}

.review-author span {
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

/* Slider Dots */
.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width var(--trans-fast),
    background-color var(--trans-fast),
    border-radius var(--trans-fast),
    transform var(--trans-fast);
}

.slider-dot.active {
  width: 28px;
  background: var(--anthrazit-main);
}

/* Dezent platzierte Google-Bewertungszeile darunter (Zentriert, 3 Elemente) */
.reviews-subtle-bar {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}

.subtle-bar-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--anthrazit-main);
}

.subtle-google-icon {
  flex-shrink: 0;
}

.subtle-score {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--anthrazit-main);
}

.subtle-stars {
  color: #7aadeb;
  letter-spacing: 1px;
  font-size: 0.95rem;
}

.subtle-count {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.subtle-google-link {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--anthrazit-main);
  text-decoration: none;
  padding: 7px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  background: #ffffff;
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.subtle-google-link:hover {
  border-color: var(--anthrazit-main);
  background: var(--anthrazit-main);
  color: #ffffff;
}

@media (max-width: 1024px) {
  .review-slide {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 720px) {
  .review-slide {
    flex: 0 0 100%;
  }

  .reviews-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .slider-nav-actions {
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  .reviews-section {
    padding: 60px 0;
  }

  .review-card {
    padding: 24px 20px;
  }

  .reviews-subtle-bar {
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

/* ==========================================================================
   SEKTION 7: SCHLANKES ANFRAGE-MODUL & DIREKTKONTAKT (Nicht erschlagend)
   ========================================================================== */
.contact-section {
  background-color: var(--bg-subtle);
  padding: 90px 0;
}

.contact-grid-clean {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 48px;
  align-items: start;
}

/* Express Form Card */
.contact-form-clean-card {
  background: #ffffff;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 10px 30px -5px rgba(24, 27, 32, 0.05);
}

/* Segmented Control Tabs (Tesla Switch Ästhetik) */
.type-selector-clean {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #f1f3f6;
  padding: 4px;
  border-radius: var(--radius-full);
  margin-bottom: 26px;
}

.type-tab-clean {
  border: none;
  background: transparent;
  padding: 11px 16px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.type-tab-clean:hover {
  color: var(--anthrazit-main);
}

.type-tab-clean.active {
  background-color: var(--anthrazit-main);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(24, 27, 32, 0.25);
}

/* Form Row & Group */
.form-row-clean {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.form-row-address {
  grid-template-columns: 2fr 1.15fr;
}

.form-group-clean {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}

.form-row-clean .form-group-clean {
  margin-bottom: 0;
}

.form-label-clean {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--anthrazit-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-label-tag {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-tertiary, #64748b);
}

.form-input-clean, .form-textarea-clean, .form-select-clean {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-sm, 8px);
  background: #ffffff;
  font-size: 0.95rem;
  color: var(--anthrazit-main);
  font-family: inherit;
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.form-input-clean::placeholder,
.form-textarea-clean::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.form-select-wrapper {
  position: relative;
  width: 100%;
}

.form-select-clean {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
  cursor: pointer;
}

.form-input-clean:focus, .form-textarea-clean:focus, .form-select-clean:focus {
  outline: none;
  border-color: var(--brand-blue, #7aadeb);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(122, 173, 235, 0.25);
}

.form-textarea-clean {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

/* Honeypot Spam Protection */
.sr-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Checkbox */
.form-checkbox-label-clean {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.825rem;
  color: var(--text-secondary);
  line-height: 1.45;
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 20px;
}

.form-checkbox-label-clean input {
  margin-top: 2px;
  accent-color: var(--brand-blue);
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}

.form-checkbox-label-clean a {
  color: var(--anthrazit-main);
  text-decoration: underline;
}

/* Micro Trust under Submit */
.form-micro-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 0.825rem;
  color: var(--text-muted);
  margin-top: 14px;
  flex-wrap: wrap;
}

.form-micro-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.form-micro-trust svg {
  color: var(--brand-blue);
}

/* Form Feedback */
.form-status {
  padding: 14px 18px;
  border-radius: var(--radius-xs);
  margin-top: 16px;
  font-size: 0.925rem;
  display: none;
}

.form-status.success {
  display: block;
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.form-status.error {
  display: block;
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ==========================================================================
   DIREKTKONTAKT-BOX (Rechte Spalte, Clean & Minimalistisch)
   ========================================================================== */
.direct-contact-clean-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  box-shadow: 0 4px 20px rgba(18, 21, 24, 0.04);
  position: sticky;
  top: 110px;
}

.direct-title {
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
  color: var(--anthrazit-main);
  line-height: 1.25;
}

.direct-desc {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 24px 0;
}

.clean-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}

.clean-contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background-color: var(--bg-white);
  text-decoration: none;
  transition: color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

.clean-contact-row:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(18, 21, 24, 0.05);
  transform: translateX(3px);
}

.clean-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--anthrazit-main);
  flex-shrink: 0;
  transition: color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

.clean-contact-row:hover .clean-contact-icon {
  background: var(--anthrazit-main);
  color: #ffffff;
}

.clean-contact-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.clean-contact-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.2;
}

.clean-contact-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--anthrazit-main);
  letter-spacing: -0.01em;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.clean-contact-arrow {
  color: var(--text-light);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.clean-contact-row:hover .clean-contact-arrow {
  color: var(--anthrazit-main);
  transform: translateX(3px);
}

.clean-contact-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}

.note-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #10b981;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .contact-grid-clean {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .contact-form-clean-card {
    padding: 28px 22px;
  }
  .form-row-clean,
  .form-row-address {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .direct-contact-clean-card {
    position: static;
    padding: 28px 22px;
  }
}

@media (max-width: 560px) {
  .type-selector-clean {
    grid-template-columns: 1fr;
    border-radius: var(--radius-md);
    gap: 6px;
    padding: 6px;
  }
  .type-tab-clean {
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.88rem;
  }
}

@media (max-width: 420px) {
  .contact-form-clean-card {
    padding: 20px 14px;
    border-radius: 16px;
  }
  .direct-contact-clean-card {
    padding: 20px 14px;
    border-radius: 16px;
  }
  .form-input-clean, .form-textarea-clean, .form-select-clean {
    padding: 11px 12px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   SEKTION 8: FOOTER (Minimalistisch, edel & exakt wie gewünscht)
   ========================================================================== */
.site-footer {
  background-color: #0b0d10;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 72px 0 32px;
  color: #94a3b8;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 0.9fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer-heading,
.footer-col h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.footer-logo {
  height: 48px;
  width: auto;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

.footer-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #94a3b8;
  margin-top: 20px;
  max-width: 320px;
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.footer-contact-item .footer-icon,
.footer-contact-item svg {
  color: #7aadeb;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-item a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color var(--trans-fast);
}

.footer-contact-item a:hover {
  color: #ffffff;
}

.footer-legal-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-legal-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.footer-legal-link svg {
  color: #64748b;
  flex-shrink: 0;
  transition: transform var(--trans-fast), color var(--trans-fast);
}

.footer-legal-link:hover {
  color: #ffffff;
}

.footer-legal-link:hover svg {
  color: #7aadeb;
  transform: translateX(3px);
}

/* Footer Bottom (Polar Marketing GmbH Skill Guideline) */
.footer-bottom {
  text-align: left;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.825rem;
  color: #94a3b8;
  line-height: 1.6;
}

.footer-bottom p {
  margin: 0;
  color: #94a3b8;
}

.footer-bottom .footer-credit {
  color: inherit;
  text-decoration: none;
  display: inline;
  transition: color var(--trans-fast);
}

.footer-bottom .footer-credit:hover {
  color: #ffffff;
  text-decoration: underline;
}

@media (max-width: 990px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ==========================================================================
   SIDE CONTACT DOCK / FLOATING QUICK CONTACT (Phone, Email, WhatsApp)
   ========================================================================== */
.side-contact-dock {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 990;
}

.dock-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #ffffff;
  border: 1px solid var(--border-light);
  border-right: none;
  border-radius: 9999px 0 0 9999px;
  box-shadow: -4px 4px 16px rgba(18, 21, 24, 0.08), -1px 2px 5px rgba(18, 21, 24, 0.04);
  text-decoration: none;
  cursor: pointer;
  height: 52px;
  padding: 0 14px 0 16px;
  color: var(--text-main);
  transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: padding, background-color, box-shadow;
}

.dock-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}

.dock-icon svg {
  display: block;
  transition: transform 0.25s ease,
    color 0.25s ease;
}

.dock-phone .dock-icon {
  color: #181b20;
}

.dock-email .dock-icon {
  color: #181b20;
}

.dock-whatsapp .dock-icon {
  color: #25d366;
}

.dock-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-main);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-left: 0;
  transition: max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, margin 0.3s ease;
}

/* Hover & Focus State */
.dock-item:hover,
.dock-item:focus-visible {
  padding: 0 18px 0 20px;
  box-shadow: -6px 8px 26px rgba(18, 21, 24, 0.20);
  outline: none;
}

.dock-item:hover .dock-label,
.dock-item:focus-visible .dock-label {
  max-width: 170px;
  opacity: 1;
  margin-left: 10px;
}

/* Individual Hover Themes */
.dock-phone:hover,
.dock-phone:focus-visible {
  background-color: #7aadeb;
  border-color: #7aadeb;
  color: #ffffff;
  box-shadow: -6px 8px 26px rgba(122, 173, 235, 0.4);
}
.dock-phone:hover .dock-icon,
.dock-phone:focus-visible .dock-icon {
  color: #ffffff;
  transform: scale(1.08);
}

.dock-email:hover,
.dock-email:focus-visible {
  background-color: var(--anthrazit-main);
  border-color: var(--anthrazit-main);
  color: #ffffff;
  box-shadow: -6px 8px 26px rgba(18, 21, 24, 0.28);
}
.dock-email:hover .dock-icon,
.dock-email:focus-visible .dock-icon {
  color: #ffffff;
  transform: scale(1.08);
}

.dock-whatsapp:hover,
.dock-whatsapp:focus-visible {
  background-color: #25d366;
  border-color: #25d366;
  color: #ffffff;
}
.dock-whatsapp:hover .dock-icon,
.dock-whatsapp:focus-visible .dock-icon {
  color: #ffffff;
  transform: scale(1.08);
}

/* Back to Top */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--anthrazit-main);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--trans-base),
    visibility var(--trans-base),
    transform var(--trans-base),
    color var(--trans-base),
    background-color var(--trans-base),
    border-color var(--trans-base);
  z-index: 95;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  border-color: var(--anthrazit-main);
  color: var(--anthrazit-main);
  transform: translateY(-3px);
}

@media (max-width: 900px) {
  .side-contact-dock {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .side-contact-dock {
    display: none !important;
  }
  .back-to-top {
    bottom: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   SEKTION: HÄUFIGE FRAGEN (FAQ)
   ========================================================================== */
.faq-section {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-top: 1px solid var(--border-light);
  border-bottom: none;
  padding: 84px 0 30px;
  position: relative;
}

.faq-section .section-subtitle {
  max-width: 1050px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px) {
  .faq-section .section-subtitle {
    white-space: nowrap;
  }
}

.faq-accordion-wrapper {
  max-width: 800px;
  margin: 44px auto 0;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
}

.faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  box-shadow: none;
}

.faq-item[open] {
  background: transparent;
  border-color: var(--border-light);
  box-shadow: none;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--anthrazit-main);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-item[open] .faq-question {
  color: var(--anthrazit-main);
  font-weight: 700;
}

.faq-icon-wrapper {
  width: 26px;
  height: 26px;
  background-color: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--trans-base);
}

.faq-item[open] .faq-icon-wrapper {
  transform: rotate(180deg);
  background-color: transparent;
  color: var(--anthrazit-main);
}

.faq-answer {
  padding: 0 4px 22px 4px;
  animation: faqFadeIn 0.25s ease-out;
}

@keyframes faqFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-answer p {
  font-size: 0.98rem;
  line-height: 1.68;
  color: var(--text-secondary);
  margin: 0;
}

/* FAQ Footer Callout (Dezent & Luftig) */
.faq-bottom-callout {
  margin-top: 52px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.faq-bottom-callout p {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--anthrazit-main);
  margin: 0;
  letter-spacing: -0.01em;
}

.faq-callout-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 860px) {
  .faq-callout-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 12px;
  }
  .faq-callout-actions .btn-tesla-primary,
  .faq-callout-actions .btn-tesla-secondary {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .faq-section {
    padding: 60px 0;
  }

  .faq-question {
    padding: 20px 20px;
    font-size: 1.02rem;
  }

  .faq-answer {
    padding: 0 20px 20px 20px;
  }

  .faq-icon-wrapper {
    width: 32px;
    height: 32px;
  }

  .faq-bottom-callout {
    padding: 24px 18px;
  }
}

/* ==========================================================================
   RECHTLICHE SEITEN (Impressum, Datenschutz, AGB)
   ========================================================================== */
.legal-page-header {
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
  padding: 130px 0 44px;
}

@media (max-width: 768px) {
  .legal-page-header {
    padding: 96px 0 32px;
  }
}

.legal-breadcrumbs {
  margin-bottom: 16px;
}

.legal-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.legal-breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: var(--border-light);
}

.legal-breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--trans-fast);
}

.legal-breadcrumbs a:hover {
  color: var(--brand-blue);
  text-decoration: underline;
}

.legal-breadcrumbs [aria-current="page"] {
  color: var(--anthrazit-main);
  font-weight: 600;
}

.legal-page-title {
  font-size: clamp(1.75rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--anthrazit-main);
  margin: 0;
  overflow-wrap: break-word;
}

.legal-page-title em {
  font-style: normal;
  color: var(--brand-blue);
}

.legal-content-section {
  background-color: #ffffff;
  padding: 64px 0 100px;
}

@media (max-width: 768px) {
  .legal-content-section {
    padding: 44px 0 64px;
  }
}

.rechtstext {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--text-secondary);
  overflow-wrap: break-word;
  hyphens: auto;
}

.rechtstext h2 {
  font-size: 1.55rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--anthrazit-main);
  margin: 44px 0 18px;
}

.rechtstext h2:first-of-type {
  margin-top: 0;
}

.rechtstext h3 {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--anthrazit-main);
  margin: 28px 0 12px;
}

.rechtstext p {
  margin: 0 0 18px 0;
}

.rechtstext address {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 24px;
}

.rechtstext a {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--trans-fast);
}

.rechtstext a:hover {
  color: var(--brand-blue-hover);
  text-decoration: underline;
}

.rechtstext ol,
.rechtstext ul {
  padding-left: 24px;
  margin: 16px 0 24px 0;
}

.rechtstext li {
  margin-bottom: 10px;
  line-height: 1.65;
}

.rechtstext .stand {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.rechtstext .agb-liste {
  list-style: none;
  padding: 0;
  margin: 24px 0 36px 0;
  counter-reset: agb-counter;
}

.rechtstext .agb-liste > li {
  counter-increment: agb-counter;
  position: relative;
  padding-left: 44px;
  margin-bottom: 28px;
}

.rechtstext .agb-liste > li::before {
  content: counter(agb-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-blue);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.rechtstext .agb-liste h3 {
  margin: 0 0 8px 0;
  font-size: 1.15rem;
}

.pdf-download-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  color: var(--anthrazit-main) !important;
  font-size: 0.92rem;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-top: 8px;
  margin-bottom: 24px;
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.pdf-download-badge:hover {
  background-color: var(--anthrazit-main);
  color: #ffffff !important;
  border-color: var(--anthrazit-main);
  transform: translateY(-1px);
}

.pdf-download-badge svg {
  color: var(--brand-blue);
  transition: transform var(--trans-fast), color var(--trans-fast);
}

.pdf-download-badge:hover svg {
  color: #ffffff;
  transform: translateY(2px);
}

/* ==========================================================================
   LEISTUNGEN-ÜBERSICHT (Unterseite /leistungen)
   ========================================================================== */
.nav-link[aria-current="page"] {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Kompakte Hero-Bühne (Variante der Startseiten-Hero) */
.page-hero {
  min-height: 0;
  justify-content: center;
  padding: 150px 24px 84px;
}

/* Leistungsübersicht: geteilter Hero – Text links auf Anthrazit, Foto rechts bis zum Rand */
.page-hero-split {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  background-color: #12151a;
  color: #ffffff;
  overflow: hidden;
}

.page-hero-split-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 150px;
  padding-bottom: 110px;
}

.page-hero-split-text {
  max-width: 560px;
}

.page-hero-split-title {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #ffffff;
  margin-bottom: 18px;
}

.page-hero-split-subtitle {
  max-width: 480px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.page-hero-split .page-hero-actions {
  justify-content: flex-start;
  width: max-content;
  max-width: none;
  margin-top: 34px;
}

/* Buttons nicht zusammenquetschen, volle Innenabstände behalten */
.page-hero-split .page-hero-actions > a {
  flex-shrink: 0;
}

.page-hero-split-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  background-color: #12151a;
}

/* Weicher Übergang vom Anthrazit ins Foto, oben abgedunkelt für die Navigation */
.page-hero-split-media::before {
  content: "";
  position: absolute;
  /* 2px über den linken Rand, damit keine helle Bildkante durchscheint */
  inset: 0 0 0 -2px;
  background:
    linear-gradient(90deg, #12151a 0%, rgba(18, 21, 26, 0.9) 5%, rgba(18, 21, 26, 0.6) 12%, rgba(18, 21, 26, 0.28) 22%, rgba(18, 21, 26, 0.08) 32%, rgba(18, 21, 26, 0) 40%),
    linear-gradient(180deg, rgba(18, 21, 26, 0.6) 0%, rgba(18, 21, 26, 0) 28%);
}

@media (max-width: 900px) {
  .page-hero-split {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .page-hero-split-inner {
    padding-top: 124px;
    padding-bottom: 36px;
  }
  /* Gestapelt (Tablet/Handy): Text und Buttons zentriert */
  .page-hero-split-text {
    margin: 0 auto;
    text-align: center;
  }
  .page-hero-split-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  .page-hero-split .page-hero-actions {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .page-hero-split-media {
    position: relative;
    width: 100%;
    height: 320px;
  }
  .page-hero-split-media::before {
    background: linear-gradient(180deg, #12151a 0%, rgba(18, 21, 26, 0) 35%);
  }
}

.page-hero-actions {
  margin-top: 34px;
}

/* Leistungs-Raster als Bild-Kacheln: Foto füllt die Kachel, Text unten auf dunklem Verlauf.
   3 Spalten, zwei breite Kacheln diagonal (oben links, unten rechts) → 2 + 3 + 2 = 7 */
.services-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.service-tile {
  position: relative;
  display: block;
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  text-decoration: none;
  background-color: #12151a;
  box-shadow: 0 10px 30px -12px rgba(18, 21, 24, 0.35);
  scroll-margin-top: 90px;
  transition: transform var(--trans-base), box-shadow var(--trans-base);
}

.service-tile-wide {
  grid-column: span 2;
}

.service-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 21, 26, 0) 30%, rgba(18, 21, 26, 0.55) 58%, rgba(18, 21, 26, 0.94) 100%);
  transition: background var(--trans-base);
}

.service-tile-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
}

.service-tile-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #ffffff;
}

.service-tile-wide .service-tile-title {
  font-size: 1.75rem;
}

.service-tile-desc {
  max-width: 460px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}

.service-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 700;
}

.service-tile-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: var(--anthrazit-main);
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.service-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -14px rgba(18, 21, 24, 0.45);
}

.service-tile:hover .service-tile-img {
  transform: scale(1.05);
}

.service-tile:hover .service-tile-arrow {
  background-color: var(--brand-blue);
  color: #ffffff;
  transform: translateX(4px);
}

/* Tablet: 2 Spalten, nur die erste Kachel bleibt breit → 1 + 2 + 2 + 2 */
@media (max-width: 1024px) {
  .services-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-tile-wide:last-child {
    grid-column: span 1;
  }
  .service-tile-wide:last-child .service-tile-title {
    font-size: 1.4rem;
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding: 120px 16px 56px;
  }
  .page-hero-service::before {
    top: 96px;
    width: 46vw;
  }
  .page-hero-service::after {
    bottom: 20px;
    width: 64vw;
  }
  .page-hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .page-hero-actions .btn-tesla-primary,
  .page-hero-actions .btn-tesla-secondary {
    width: 100%;
  }
  .page-hero-split-media {
    height: 240px;
  }
  .page-hero-split .page-hero-actions {
    width: 100%;
  }
  /* Handy: alle Kacheln untereinander */
  .services-overview-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-tile,
  .service-tile-wide:last-child {
    grid-column: span 1;
    height: 340px;
  }
  .service-tile-body {
    padding: 22px;
  }
  .service-tile-wide .service-tile-title {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   LEISTUNGS-UNTERSEITEN (/leistungen/<leistung>)
   ========================================================================== */
.nav-dropdown-link[aria-current="page"] {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

.mobile-sub-link.active {
  color: #ffffff;
  font-weight: 700;
}

/* Hero ohne Bild in Anthrazit (gleicher Ton wie die gescrollte Navigation),
   belebt durch die Krelle-Streifen aus dem Logo: oben links und unten rechts, sehr dezent */
.page-hero-service {
  background-color: #12151a;
}

.page-hero-service::before,
.page-hero-service::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.06;
}

.page-hero-service::before {
  top: 120px;
  left: 0;
  width: min(34vw, 520px);
  aspect-ratio: 600 / 140;
  background-image: url('/assets/img/krelle-streifen-links.svg');
  background-position: left center;
}

.page-hero-service::after {
  bottom: 40px;
  right: 0;
  width: min(38vw, 600px);
  aspect-ratio: 600 / 140;
  background-image: url('/assets/img/krelle-streifen-rechts.svg');
  background-position: right center;
}

/* Einleitung: zwei Absätze mit etwas weniger Abstand */
.why-content-wrapper .why-story + .why-story {
  margin-top: -8px;
}

/* Leistungsumfang: 6 Kacheln → 3 Spalten, damit keine Lücke entsteht */
.service-features-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Weitere Leistungen: 6 kompakte Bild-Links in 3 Spalten */
.related-services-section {
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-light);
}

.related-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.related-service {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 12px;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--anthrazit-main);
  box-shadow: var(--shadow-xs);
  transition: color var(--trans-base),
    background-color var(--trans-base),
    border-color var(--trans-base),
    box-shadow var(--trans-base),
    transform var(--trans-base),
    opacity var(--trans-base);
}

.related-service:hover {
  transform: translateY(-3px);
  border-color: var(--anthrazit-border);
  box-shadow: var(--shadow-md);
}

.related-service-media {
  flex: 0 0 88px;
  height: 64px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background-color: var(--bg-subtle);
}

.related-service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-service-name {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.related-service-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--bg-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--trans-fast),
    background-color var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast);
}

.related-service:hover .related-service-arrow {
  background-color: var(--anthrazit-main);
  color: #ffffff;
  transform: translateX(3px);
}

@media (max-width: 1040px) {
  .service-features-grid,
  .related-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .service-features-grid,
  .related-services-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   KONTAKT-BUTTON JE NACH GERÄT
   Desktop: „Mail schreiben“, Handy/Tablet (wie Burger-Menü ab 900px): „Jetzt anrufen“
   ========================================================================== */
.cta-call {
  display: none !important;
}

@media (max-width: 900px) {
  .cta-call {
    display: inline-flex !important;
  }
  .cta-mail {
    display: none !important;
  }
}

/* ==========================================================================
   BARRIEREFREIHEIT, BEDIENUNG & BEWEGUNG (gilt für alle Seiten)
   ========================================================================== */

/* „Zum Inhalt springen“: unsichtbar, bis er per Tastatur fokussiert wird */
.skip-link {
  position: fixed;
  top: -120px;
  left: 16px;
  z-index: 2000;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  background-color: #ffffff;
  color: var(--anthrazit-main);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: top var(--trans-fast);
}

.skip-link:focus {
  top: 16px;
}

/* Das Sprungziel erhält den Fokus, ohne sichtbaren Rahmen */
main:focus {
  outline: none;
}

/* Einheitlicher, gut sichtbarer Tastatur-Fokus für alle Bedienelemente */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}

.menu-toggle:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* Kein Doppeltipp-Zoom-Verzug auf Touch-Geräten */
a,
button,
summary,
label,
input,
select,
textarea {
  touch-action: manipulation;
}

/* Überschriften ausgewogen umbrechen, Fließtext ohne einzelne Wörter am Ende */
.section-title,
.tesla-hero-title,
.page-hero-split-title,
.scroll-expand-title,
.service-tile-title,
.timeline-card-title,
.extra-card h3 {
  text-wrap: balance;
}

.section-subtitle,
.why-story,
.tesla-hero-subtitle,
.page-hero-split-subtitle {
  text-wrap: pretty;
}

/* Handy-Menü: Scrollen bleibt im Menü, die Seite dahinter bewegt sich nicht */
.mobile-nav-drawer {
  overscroll-behavior: contain;
}

/* Abstand zu Displayrändern bei Geräten mit Notch */
.side-contact-dock {
  right: env(safe-area-inset-right, 0px);
}

.back-to-top {
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Formular: Fehlermeldungen direkt am Feld */
.form-field-error {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #b42318;
}

.form-input-clean[aria-invalid="true"],
.form-textarea-clean[aria-invalid="true"],
.form-select-clean[aria-invalid="true"] {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.form-checkbox-label-clean.is-invalid {
  color: #b42318;
}

/* Reduzierte Bewegung: keine Animationen, kein weiches Scrollen, kein Zoom */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .service-tile:hover,
  .service-slide-card:hover,
  .related-service:hover,
  .extra-card:hover,
  .service-tile:hover .service-tile-img,
  .service-slide-card:hover .service-slide-media img,
  .why-image-card:hover img,
  .scroll-expand-card:hover .scroll-expand-bg {
    transform: none;
  }
}

/* Per Skript fokussierte Sprungziele (Abschnitte) ohne Fokusrahmen */
[tabindex="-1"]:focus {
  outline: none;
}

/* ==========================================================================
   ÜBER UNS (/ueber-uns)
   ========================================================================== */
/* Bilder in „Geschichte“ und „Team“ im Format der Startseiten-Kachel (554 × 395 px ≈ 7 : 5) */
.about-story-section .why-image-card,
.about-team-section .why-image-card {
  height: auto;
  min-height: 0;
  aspect-ratio: 7 / 5;
}

.about-story-section .why-image-card img {
  object-position: 50% 40%;
}

.about-team-section .why-image-card img {
  object-position: 50% 62%;
}

/* Team-Abschnitt: Bild rechts, Text links */
.about-team-section {
  background-color: var(--bg-subtle);
}

.about-team-section .why-grid {
  grid-template-columns: 1.15fr 1.05fr;
}

.about-team-section .why-visual-wrapper {
  order: 2;
}

@media (max-width: 980px) {
  .about-team-section .why-grid {
    grid-template-columns: 1fr;
  }
  .about-team-section .why-visual-wrapper {
    order: 0;
  }
}

/* Referenzen: gleich große Bilder im Dreier-Raster, beliebig erweiterbar (bricht in neue Reihen um) */
.references-section {
  background-color: #ffffff;
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.reference-item {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #12151a;
}

.reference-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reference-item:hover img {
  transform: scale(1.04);
}

.reference-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 22px 20px;
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(18, 21, 26, 0) 0%, rgba(18, 21, 26, 0.85) 100%);
}

/* Kundenstimmen unter der Galerie */
.reference-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.reference-quotes .review-card {
  height: 100%;
}

.reference-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
  font-size: 0.98rem;
  color: var(--text-secondary);
}

.reference-rating strong {
  color: var(--anthrazit-main);
}

@media (max-width: 1024px) {
  .reference-grid {
    gap: 16px;
  }
  .reference-quotes {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .reference-item:hover img {
    transform: none;
  }
}

/* ==========================================================================
   KRELLE-ROUTE (Ablauf auf der Startseite): LKW fährt vom alten zum neuen Zuhause
   Sichtbar nur, wenn das Skript läuft (.krelle-route-ready) und ab 993px Breite.
   ========================================================================== */
.krelle-route {
  display: none;
}

.krelle-route-ready .krelle-route {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-top: 40px;
}

.route-place {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 92px;
  color: var(--anthrazit-main);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

.route-house {
  width: 44px;
  height: 44px;
}

.route-place-end {
  color: var(--text-light);
  transition: color 0.4s ease;
}

.krelle-route.is-arrived .route-place-end {
  color: var(--brand-blue);
}

.route-track {
  position: relative;
  flex: 1;
  height: 150px;
}

/* Straße mit gestrichelter Mittellinie */
.route-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 12px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 14px, transparent 14px 28px) center / 100% 2px no-repeat,
    #2c333e;
}

/* Zurückgelegter Weg in CI-Blau unter der Straße */
.route-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--brand-blue);
  transform-origin: left center;
  transform: scaleX(0);
}

/* Haltepunkte unter den vier Schritten */
.route-stop {
  position: absolute;
  bottom: 9px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 3px solid #9aa3ad;
  z-index: 1;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.route-stop.is-reached {
  background-color: var(--brand-blue);
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(122, 173, 235, 0.35);
}

.route-truck {
  position: absolute;
  left: 0;
  bottom: 14px;
  z-index: 2;
  width: 300px;
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(18, 21, 26, 0.16));
  will-change: transform;
}

/* Schritte werden freigeschaltet, sobald der LKW sie erreicht */
.krelle-route-ready .timeline-card {
  opacity: 0.45;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}

.krelle-route-ready .timeline-card.is-reached {
  opacity: 1;
  transform: none;
  border-color: rgba(122, 173, 235, 0.55);
  box-shadow: 0 14px 34px -14px rgba(18, 21, 26, 0.25);
}

.krelle-route-ready .timeline-card .timeline-step-number {
  transition: color 0.45s ease;
}

.krelle-route-ready .timeline-card.is-reached .timeline-step-number {
  color: var(--brand-blue);
}

/* Während die Sektion angepinnt ist: Abstand nach oben für die feste Navigation */
.krelle-route-ready.timeline-section {
  padding-top: 120px;
}

@media (max-width: 992px) {
  .krelle-route-ready .krelle-route {
    display: none;
  }
}

/* Ablauf im 21st-Stil: große, blasse Zahl hinter jeder Karte (Desktop) */
.timeline-step {
  display: contents;
}

.timeline-bignum {
  display: none;
}

@media (min-width: 993px) {
  .timeline-step {
    display: block;
    position: relative;
    padding-left: 78px;
  }

  .krelle-route-ready .timeline-grid,
  .timeline-grid:has(.timeline-step) {
    gap: 20px;
  }

  .timeline-bignum {
    display: block;
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-54%);
    z-index: 0;
    font-size: 11rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #e4e8ee;
    pointer-events: none;
    user-select: none;
    transition: color 0.5s ease;
  }

  .timeline-step .timeline-card {
    position: relative;
    z-index: 1;
    height: 100%;
  }

  /* Die kleine Nummer in der Karte entfällt, die große Zahl übernimmt */
  .timeline-step .timeline-step-number {
    display: none;
  }

  .krelle-route-ready .timeline-step.is-reached .timeline-bignum {
    color: rgba(122, 173, 235, 0.5);
  }
}

/* Ablauf auf großen Bildschirmen etwas breiter, damit Karten und große Zahlen Platz haben */
@media (min-width: 1200px) {
  .timeline-section .container {
    max-width: 1400px;
  }
}

/* ==========================================================================
   BEWEGUNGSSYSTEM (assets/js/krelle-motion.js)
   Startzustände gelten nur mit .js-motion an <html> (gesetzt im <head>, entfällt bei
   „Bewegung reduzieren“ oder wenn GSAP nicht lädt). Ohne Klasse ist alles sofort sichtbar.
   ========================================================================== */
.js-motion :is(
  .tesla-hero-title, .tesla-hero-subtitle, .tesla-hero-bottom .tesla-cta-row,
  .page-hero-split-title, .page-hero-split-subtitle, .page-hero-split .page-hero-actions,
  .page-hero-service .page-hero-actions, .legal-page-header .legal-page-title,
  .page-hero-split-media
) {
  visibility: hidden;
}

.js-motion :is(
  .section-header, .why-content-wrapper > *, .extra-card, .service-tile, .faq-item,
  .related-service, .reference-quotes .review-card, .reference-rating, .scroll-expand-content > *,
  .contact-form-clean-card, .direct-contact-clean-card, .specs-bar-item, .services-bottom-action,
  .legal-content-section .rechtstext > *
) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(32px);
}

/* Bildmaske: Rahmen startet eingezogen */
.js-motion :is(.why-image-card, .reference-item) {
  visibility: hidden;
  clip-path: inset(10% 10% 10% 10% round 16px);
}

/* Hero der Leistungs-Unterseiten: Krelle-Streifen fahren wie Fahrtwind herein */
@keyframes krelleStripesLeft {
  from { opacity: 0; transform: translateX(-120px); }
  to { opacity: 0.06; transform: none; }
}

@keyframes krelleStripesRight {
  from { opacity: 0; transform: translateX(120px); }
  to { opacity: 0.06; transform: none; }
}

.js-motion .page-hero-service::before {
  animation: krelleStripesLeft 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.js-motion .page-hero-service::after {
  animation: krelleStripesRight 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ==========================================================================
   BILD-FENSTER-HERO (Prototyp: Über uns, Privatumzug)
   Oben Anthrazit wie die Navigation mit Überschrift und Buttons, darunter ein breites Foto,
   das zur Hälfte in den hellen Bereich ragt und sich beim Scrollen auf volle Breite öffnet.
   ========================================================================== */
.page-hero-window {
  --window-height: clamp(200px, 30vw, 440px);
  --window-overlap: calc(var(--window-height) / 2);
  position: relative;
  padding-top: 150px;
  color: #ffffff;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(122, 173, 235, 0.08), transparent 70%),
    linear-gradient(#12151a, #12151a) top / 100% calc(100% - var(--window-overlap)) no-repeat,
    #ffffff;
  overflow: hidden;
}

/* Krelle-Streifen aus dem Logo, dezent im dunklen Teil */
.page-hero-window::before,
.page-hero-window::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: min(34vw, 520px);
  aspect-ratio: 600 / 140;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.06;
}

.page-hero-window::before {
  top: 120px;
  left: 0;
  background-image: url('/assets/img/krelle-streifen-links.svg');
  background-position: left center;
}

.page-hero-window::after {
  top: calc(100% - var(--window-overlap) - 150px);
  right: 0;
  background-image: url('/assets/img/krelle-streifen-rechts.svg');
  background-position: right center;
}

.page-hero-window .tesla-hero-header {
  position: relative;
  z-index: 1;
  padding: 0 24px;
  margin-bottom: 52px;
}

/* Ruhige Typografie wie bei Apple/Tesla: kleiner, halbfett, Untertitel zurückgenommen */
.page-hero-window .tesla-hero-title {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 14px;
  text-shadow: none;
}

.page-hero-window .tesla-hero-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.66);
  max-width: 580px;
  text-shadow: none;
}

.page-hero-window .page-hero-actions {
  margin-top: 30px;
}

.page-hero-window .page-hero-actions > a {
  height: 46px;
  min-width: 0;
  padding: 0 26px;
  font-size: 0.94rem;
}

/* Foto: volle Breite, per Maske auf Containerbreite eingezogen; das Skript öffnet sie beim Scrollen */
.page-hero-window-media {
  position: relative;
  z-index: 1;
  height: var(--window-height);
  margin: 0;
  overflow: hidden;
  clip-path: inset(0 max(24px, calc((100% - 980px) / 2)) round 18px);
}

.page-hero-window-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--window-focus, center);
}

@media (max-width: 640px) {
  .page-hero-window {
    padding-top: 120px;
  }
  .page-hero-window .tesla-hero-header {
    padding: 0 16px;
    margin-bottom: 40px;
  }
  .page-hero-window::before {
    top: 96px;
    width: 46vw;
  }
  .page-hero-window::after {
    width: 56vw;
  }
  .page-hero-window-media {
    clip-path: inset(0 16px round 16px);
  }
}

.js-motion :is(.page-hero-window .tesla-hero-title, .page-hero-window .tesla-hero-subtitle, .page-hero-window .page-hero-actions, .page-hero-window-media) {
  visibility: hidden;
}

.js-motion .page-hero-window::before {
  animation: krelleStripesLeft 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.js-motion .page-hero-window::after {
  animation: krelleStripesRight 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ==========================================================================
   BUTTONS (ruhig und flach wie bei Apple/Tesla)
   Primär: volle Pille in Krelle-Hellblau mit dunkler Schrift.
   Sekundär: feine Kontur, weiß auf dunklem, anthrazit auf hellem Hintergrund.
   Keine Schatten, kein Glühen, keine Icons.
   ========================================================================== */
.btn-tesla-primary,
.btn-tesla-header,
.btn-tesla-secondary,
.btn-tesla-outline,
.contact-form-clean-card .btn-primary {
  height: 46px;
  min-width: 0;
  padding: 0 26px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  box-shadow: none;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transform: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-tesla-primary svg,
.btn-tesla-header svg,
.btn-tesla-secondary svg,
.btn-tesla-outline svg,
.contact-form-clean-card .btn-primary svg {
  display: none;
}

.btn-tesla-primary,
.btn-tesla-header,
.contact-form-clean-card .btn-primary {
  background-color: #7aadeb;
  border-color: #7aadeb;
  color: #0f1216;
}

.btn-tesla-primary:hover,
.btn-tesla-header:hover,
.contact-form-clean-card .btn-primary:hover {
  background-color: #94bef0;
  border-color: #94bef0;
  color: #0f1216;
  transform: none;
  box-shadow: none;
}

.btn-tesla-primary:active,
.btn-tesla-header:active,
.contact-form-clean-card .btn-primary:active {
  background-color: #6a9fdf;
  border-color: #6a9fdf;
}

/* Sekundär auf dunklem Grund (Heros, Bildkacheln) */
.btn-tesla-secondary {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.42);
  color: #ffffff;
}

.btn-tesla-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.75);
  color: #ffffff;
  transform: none;
  box-shadow: none;
}

/* Sekundär auf hellem Grund */
:is(.why-actions, .faq-callout-actions, .mobile-footer-actions) .btn-tesla-secondary,
.btn-tesla-outline {
  background-color: transparent;
  border-color: rgba(18, 21, 26, 0.22);
  color: var(--anthrazit-main);
}

:is(.why-actions, .faq-callout-actions, .mobile-footer-actions) .btn-tesla-secondary:hover,
.btn-tesla-outline:hover {
  background-color: rgba(18, 21, 26, 0.05);
  border-color: rgba(18, 21, 26, 0.45);
  color: var(--anthrazit-main);
}

.btn-tesla-header {
  height: 36px;
  padding: 0 18px;
  font-size: 0.85rem;
}

.contact-form-clean-card .btn-primary {
  height: 52px;
  font-size: 1rem;
}

.btn-tesla-primary:focus-visible,
.btn-tesla-header:focus-visible,
.btn-tesla-secondary:focus-visible,
.btn-tesla-outline:focus-visible {
  outline: 2px solid #7aadeb;
  outline-offset: 3px;
}

/* ==========================================================================
   KONTAKT (/kontakt): Formular und Direktkontakt ragen wie das Hero-Foto
   der anderen Unterseiten aus dem Anthrazit in den hellen Bereich
   ========================================================================== */
.page-hero-contact {
  --contact-dark: 200px;
  padding-bottom: 72px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(122, 173, 235, 0.08), transparent 70%),
    #12151a;
}

/* Hell ab 200 px unter der Kartenoberkante, unabhängig von der Formularhöhe */
.page-hero-contact > .container {
  position: relative;
}

.page-hero-contact > .container::before {
  content: "";
  position: absolute;
  top: var(--contact-dark);
  bottom: -72px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #ffffff;
}

.page-hero-contact::after {
  display: none;
}

.page-hero-contact .contact-grid-clean {
  position: relative;
  z-index: 1;
  color: var(--text-main);
  text-align: left;
}

.contact-info-section {
  padding-top: 24px;
}

@media (max-width: 640px) {
  .page-hero-contact {
    --contact-dark: 120px;
    padding-bottom: 48px;
  }
  .page-hero-contact > .container::before {
    bottom: -48px;
  }
}

/* ==========================================================================
   FEINSCHLIFF (ruhiger, hochwertiger Gesamteindruck nach Apple/Tesla)
   Leichtere Überschriften, mehr Luft, Karten ohne Rahmen und Schatten.
   ========================================================================== */
.section {
  padding: 130px 0;
}

.section-title,
.scroll-expand-title {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.section-title {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.scroll-expand-title {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

.tesla-hero-section:not(.page-hero) .tesla-hero-title {
  font-weight: 600;
  letter-spacing: -0.03em;
}

.specs-bar-val {
  font-weight: 600;
}

.tesla-specs-bar {
  box-shadow: none;
}

/* Karten: ruhige Flächen statt Rahmen und Schatten */
.review-card {
  border: 0;
  border-radius: 22px;
  box-shadow: none;
}

.why-image-card,
.reference-item {
  border: 0;
  border-radius: 22px;
  box-shadow: none;
}

.service-tile {
  border-radius: 22px;
  box-shadow: none;
}

.contact-form-clean-card,
.direct-contact-clean-card {
  border: 0;
  border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(18, 21, 26, 0.25);
}

@media (max-width: 640px) {
  .section {
    padding: 84px 0;
  }
}

/* ==========================================================================
   OHNE FOTO: Abschluss-Kachel der Leistungsseiten und „Weitere Leistungen“
   (jedes Foto steht nur einmal auf der Website, Leistungsfotos höchstens dreimal)
   ========================================================================== */
.scroll-expand-card-plain {
  background:
    radial-gradient(ellipse 70% 80% at 85% 20%, rgba(122, 173, 235, 0.12), transparent 70%),
    #12151a;
}

.scroll-expand-card-plain::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 48px;
  width: min(42%, 560px);
  aspect-ratio: 600 / 140;
  background: url('/assets/img/krelle-streifen-rechts.svg') right center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

.related-service {
  padding: 22px 22px 22px 26px;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}

.related-service-name {
  font-weight: 600;
}

/* ==========================================================================
   FOTO-HERO DER UNTERSEITEN (gleicher Aufbau wie die Startseite)
   Vollbild-Foto, Überschrift oben, Buttons unten; Foto je Seite über --hero-image
   ========================================================================== */
.page-hero-photo {
  min-height: min(84vh, 880px);
  padding-bottom: 56px;
}

.page-hero-photo .tesla-hero-backdrop {
  background-image:
    linear-gradient(180deg, rgba(10, 14, 18, 0.8) 0%, rgba(10, 14, 18, 0.42) 28%, rgba(10, 14, 18, 0.08) 52%, rgba(10, 14, 18, 0.6) 100%),
    var(--hero-image);
  background-position: center, var(--hero-focus, center 60%);
  background-size: cover;
}

.page-hero-photo .tesla-hero-title {
  font-weight: 600;
  letter-spacing: -0.03em;
}

.page-hero-photo .page-hero-actions {
  margin-top: 0;
}

@media (max-width: 768px) {
  .page-hero-photo {
    min-height: 76vh;
    padding-bottom: 32px;
  }
}

/* ==========================================================================
   SEKTIONEN: KLARER UND HOCHWERTIGER
   Größere Lesetexte, Icon-Raster als ruhige Liste statt Kästen
   ========================================================================== */
/* Lesetexte: mindestens 16 bis 17 px */
.why-story {
  font-size: 1.12rem;
  line-height: 1.7;
}

.why-check-item {
  font-size: 1rem;
}

.service-slide-desc,
.timeline-card-text,
.review-text,
.faq-answer p {
  font-size: 1rem;
  line-height: 1.65;
}

.service-slide-title,
.timeline-card-title,
.faq-question {
  font-weight: 600;
}

/* Leistungskarten der Startseite: ohne Rahmen, mehr Luft */
.service-slide-card {
  border: 0;
  border-radius: 22px;
  box-shadow: none;
}

.service-slide-content {
  padding: 28px 28px 26px;
}

/* Ablauf-Karten: ohne Rahmen und Schatten */
.timeline-card {
  border: 0;
  border-radius: 22px;
  box-shadow: none;
}

/* Kundenstimmen auf weißem Grund (Über uns): Fläche wie die Karten auf der Startseite */
.references-section .review-card {
  background: #f5f5f7;
}

/* ==========================================================================
   NAVIGATION WIE BEI APPLE: beim Scrollen halbtransparentes Glas statt massiver Fläche
   ========================================================================== */
.site-header.scrolled {
  height: 70px;
  background-color: rgba(18, 21, 26, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.nav-link {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: #ffffff;
}

/* ==========================================================================
   SCHNELLKONTAKT AM RAND: dunkle Glasleiste statt weißer Kreise
   Jeder Knopf trägt sein eigenes Glas, damit beim Hover nur dieser herausgleitet
   ========================================================================== */
.side-contact-dock {
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dock-item {
  position: relative;
  height: 52px;
  padding: 0 16px 0 15px;
  background-color: rgba(18, 21, 26, 0.88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 0;
  border-radius: 0;
  box-shadow: -10px 12px 28px -18px rgba(0, 0, 0, 0.55);
  color: #ffffff;
}

.dock-item + .dock-item {
  border-top: 0;
}

.dock-item:first-child {
  border-top-left-radius: 16px;
}

.dock-item:last-child {
  border-bottom-left-radius: 16px;
}

/* Feine Trennlinien zwischen den Einträgen */
.dock-item + .dock-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
}

.dock-phone .dock-icon,
.dock-email .dock-icon,
.dock-whatsapp .dock-icon {
  color: #ffffff;
}

.dock-icon svg {
  width: 20px;
  height: 20px;
}

.dock-label {
  font-weight: 500;
  letter-spacing: 0;
}

/* Nur der überfahrene Knopf gleitet heraus, mit runden Ecken links */
.dock-item:hover,
.dock-item:focus-visible {
  padding: 0 20px 0 18px;
  border-radius: 16px 0 0 16px;
  box-shadow: -10px 14px 30px -14px rgba(0, 0, 0, 0.5);
}

.dock-item:hover::before,
.dock-item:focus-visible::before,
.dock-item:hover + .dock-item::before,
.dock-item:focus-visible + .dock-item::before {
  opacity: 0;
}

.dock-phone:hover,
.dock-phone:focus-visible,
.dock-email:hover,
.dock-email:focus-visible {
  background-color: #7aadeb;
  border-color: #7aadeb;
  color: #0f1216;
}

.dock-phone:hover .dock-icon,
.dock-phone:focus-visible .dock-icon,
.dock-email:hover .dock-icon,
.dock-email:focus-visible .dock-icon {
  color: #0f1216;
  transform: none;
}

.dock-whatsapp:hover,
.dock-whatsapp:focus-visible {
  background-color: #25d366;
  border-color: #25d366;
  color: #0f1216;
}

.dock-whatsapp:hover .dock-icon,
.dock-whatsapp:focus-visible .dock-icon {
  color: #0f1216;
  transform: none;
}

/* Nach-oben-Knopf im gleichen Glas-Stil */
.back-to-top {
  background-color: rgba(18, 21, 26, 0.88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
}

.back-to-top:hover {
  background-color: #7aadeb;
  border-color: #7aadeb;
  color: #0f1216;
  transform: translateY(-2px);
}

/* „Weitere Leistungen“: Icon je Leistung im Stil der Icon-Kacheln */
.related-service-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  color: var(--anthrazit-main);
  transition: background-color var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}

.related-service:hover .related-service-icon {
  background: var(--anthrazit-main);
  border-color: var(--anthrazit-main);
  color: #ffffff;
}

.related-service {
  padding: 18px 22px 18px 18px;
}

/* ==========================================================================
   SCHLUSSKACHEL: freigestellter Krelle-LKW (echtes Foto, Adresse korrigiert)
   Steht rechts unten, leicht angeschnitten; fährt beim Hineinscrollen von rechts ein
   ========================================================================== */
.scroll-expand-card-plain .scroll-expand-content {
  max-width: 600px;
}

.scroll-expand-card-plain::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: -4%;
  bottom: 8%;
  width: min(52%, 660px);
  aspect-ratio: 1600 / 600;
  background: url('/assets/img/krelle-lkw-freigestellt.webp') right bottom / contain no-repeat;
  filter: drop-shadow(0 26px 28px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

/* Streifen treten hinter den LKW zurück */
.scroll-expand-card-plain::after {
  display: none;
}

.js-motion .scroll-expand-card-plain::before {
  opacity: 0;
  transform: translateX(26%);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.js-motion .scroll-expand-card-plain.truck-in::before {
  opacity: 1;
  transform: none;
}

/* Tablet und Handy: LKW unter dem Text */
@media (max-width: 900px) {
  .scroll-expand-card-plain {
    align-items: flex-start;
  }
  .scroll-expand-card-plain .scroll-expand-content {
    max-width: none;
    padding-bottom: calc(36vw + 32px);
  }
  .scroll-expand-card-plain::before {
    width: 96%;
    right: -14%;
    bottom: 5%;
  }
}

/* Schlusskachel: Überschrift breiter laufen lassen (über dem LKW), ausgeglichene Zeilen ohne Einzelwort am Ende */
.scroll-expand-card-plain .scroll-expand-content { max-width: 780px; }
.scroll-expand-card-plain .scroll-expand-desc,
.scroll-expand-card-plain .scroll-expand-features { max-width: 560px; }
.scroll-expand-title { text-wrap: balance; }

/* Kurze Überschriften auf dem Desktop in einer Zeile */
@media (min-width: 1024px) {
  .title-one-line { white-space: nowrap; }
}

/* Überschriften: normaler Umbruch (erste Zeile am längsten), kein einzelnes Wort in der letzten Zeile.
   „balance“ macht die zweite Zeile oft länger als die erste und wird deshalb hier überschrieben. */
h1, h2, h3,
.section-title,
.tesla-hero-title,
.page-hero-split-title,
.scroll-expand-title,
.service-tile-title,
.service-slide-title,
.timeline-card-title,
.extra-card h3 {
  text-wrap: pretty;
}

/* Handy: Abschnittsüberschriften etwas kleiner, damit kurze Titel in eine Zeile passen */
@media (max-width: 480px) {
  .section-title { font-size: 1.75rem; }
}

/* Desktop: Untertitel dürfen breiter laufen, damit kurze Texte nicht mit ein, zwei Wörtern umbrechen */
@media (min-width: 1024px) {
  .section-subtitle { max-width: 820px; }
}

/* Desktop: LKW größer, Krelle-Streifen wieder sichtbar, oberhalb des LKW (mobil bleibt unverändert) */
@media (min-width: 901px) {
  .scroll-expand-card-plain::before {
    right: -5%;
    bottom: 5%;
    width: min(62%, 820px);
  }
  .scroll-expand-card-plain::after {
    display: block;
    z-index: 0;
    right: 0;
    top: 14%;
    bottom: auto;
    width: min(40%, 520px);
    opacity: 0.12;
  }
}

/* Fließtext: kein einzelnes Wort allein in der letzten Zeile */
main p, main li, main blockquote { text-wrap: pretty; }

/* ==========================================================================
   BILD + TEXT: genau zwei feste Bildformate auf der ganzen Website
   Querformat (Standard, Leistungsseiten) 3 : 2, Hochformat 4 : 5 mit begrenzter Breite
   ========================================================================== */
.why-visual-wrapper {
  height: auto;
}

.why-image-card,
.about-story-section .why-image-card,
.about-team-section .why-image-card {
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
}

.why-image-card.why-image-portrait,
.about-story-section .why-image-card.why-image-portrait,
.about-team-section .why-image-card.why-image-portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

@media (max-width: 980px) {
  .why-image-card.why-image-portrait {
    max-width: 360px;
  }
}

/* Hochformat: Bildspalte genau so breit wie das Bild, Text rückt nach */
@media (min-width: 981px) {
  .why-grid:has(.why-image-portrait) {
    grid-template-columns: 400px 1fr;
    gap: 88px;
  }
  .about-team-section .why-grid:has(.why-image-portrait) {
    grid-template-columns: 1fr 400px;
  }
  .why-image-card.why-image-portrait {
    margin-inline: 0;
  }
}

/* Harmonie: Bildhöhe ungefähr gleich Texthöhe.
   Querformat 4 : 3 (Text auf Leistungsseiten ca. 430 bis 540 px), Hochformat 4 : 5 mit 290 px Breite (Text ca. 300 bis 360 px) */
.why-image-card,
.about-story-section .why-image-card,
.about-team-section .why-image-card {
  aspect-ratio: 4 / 3;
}

.why-image-card.why-image-portrait,
.about-story-section .why-image-card.why-image-portrait,
.about-team-section .why-image-card.why-image-portrait {
  max-width: 290px;
}

@media (min-width: 981px) {
  .why-grid:has(.why-image-portrait) {
    grid-template-columns: 290px minmax(0, 640px);
    justify-content: center;
    gap: 96px;
  }
  .about-team-section .why-grid:has(.why-image-portrait) {
    grid-template-columns: minmax(0, 640px) 290px;
  }
}

/* Kontaktliste: WhatsApp-Zeile beim Hover immer in WhatsApp-Grün */
.clean-contact-row[href^="https://wa.me"]:hover {
  border-color: #25d366;
  background-color: rgba(37, 211, 102, 0.06);
}
.clean-contact-row[href^="https://wa.me"]:hover .clean-contact-icon {
  background: #25d366;
  color: #ffffff;
}
.clean-contact-row[href^="https://wa.me"]:hover .clean-contact-arrow {
  color: #25d366;
}

/* Kontaktseite: Anschrift und Erreichbarkeit in der Seitenspalte, gleiche Optik wie die Kontaktzeilen.
   Erreichbarkeit ist kein Link und bewegt sich deshalb beim Hover nicht. */
.clean-contact-info {
  margin-top: 12px;
}
.clean-contact-static:hover {
  background-color: var(--bg-white);
  border-color: var(--border-light);
  box-shadow: none;
  transform: none;
}
.clean-contact-static:hover .clean-contact-icon {
  background: var(--bg-subtle);
  color: var(--anthrazit-main);
}

/* 404-Seite */
.not-found-header { padding-bottom: 140px; }
.not-found-text { max-width: 560px; margin: 18px 0 32px; color: var(--text-secondary); font-size: 1.1rem; line-height: 1.6; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Preise: Umzugscheckliste zum Herunterladen */
.checklist-download {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.checklist-download p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.05rem;
}
.checklist-download .pdf-download-badge {
  margin: 0;
}

/* Kontaktseite: rechte Box bleibt stehen, bis das Formular durchgescrollt ist.
   „overflow: hidden“ am Hero würde position: sticky aushebeln, „clip“ schneidet genauso ab, ohne das zu verhindern. */
.page-hero-window.page-hero-contact {
  overflow: clip;
}
@media (min-width: 981px) {
  .page-hero-contact .direct-contact-clean-card {
    position: sticky;
    top: 100px;
  }
}

/* Hochformat nur bei langem Text (ca. 500 px Texthöhe): 420 × 525 px */
.why-image-card.why-image-portrait {
  max-width: 420px;
}
@media (min-width: 981px) {
  .why-grid:has(.why-image-portrait) {
    grid-template-columns: 420px minmax(0, 1fr);
    justify-content: stretch;
    gap: 72px;
  }
}
@media (max-width: 980px) {
  .why-image-card.why-image-portrait {
    max-width: 360px;
  }
}

/* Punkte-Slider: dezente Pfeile neben den Punkten */
.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
}
.slider-nav[hidden] { display: none; }
.slider-nav .slider-dots { margin-top: 0; }
.slider-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(18, 21, 26, 0.14);
  background: transparent;
  color: var(--anthrazit-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.slider-arrow:hover:not(:disabled) {
  background: #ffffff;
  border-color: rgba(18, 21, 26, 0.28);
}
.slider-arrow:focus-visible {
  outline: 2px solid #7aadeb;
  outline-offset: 2px;
}
.slider-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
/* Ablauf-Punkte gibt es nur auf dem Handy */
.timeline-nav { display: none; }
@media (max-width: 992px) {
  .timeline-nav { display: flex; margin-top: 24px; }
  .timeline-nav[hidden] { display: none; }
}

/* Footer Rechtliches: Pfeile von Anfang an blau und ohne Bewegung, wie die übrigen Footer-Icons */
.footer-legal-link svg,
.footer-legal-link:hover svg {
  color: #7aadeb;
  transform: none;
}

/* Anker zum Formular: Abstand zur festen Navigation */
#anfrage { scroll-margin-top: 96px; }

/* Sprung über „Kostenloses Angebot“ (/kontakt#anfrage): Formular sofort an Ort und Stelle zeigen,
   ohne Einblend-Bewegung, damit es nicht nachträglich unter die Navigation rutscht */
.js-motion .contact-form-clean-card:target {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Handy: Logo in der Navigation deutlich größer */
@media (max-width: 600px) {
  .brand-logo {
    height: 54px;
    max-width: 240px;
  }
}
@media (max-width: 380px) {
  .brand-logo {
    height: 48px;
    max-width: 210px;
  }
}

/* Handy: Überschrift im Foto-Hero mit mehr Luft zur Navigation */
@media (max-width: 600px) {
  .tesla-hero-section .tesla-hero-header {
    padding-top: 34px;
  }
}

/* Eigener Bildausschnitt im Foto-Hero auf dem Handy (z. B. Transport & Montage) */
@media (max-width: 768px) {
  .page-hero-photo .tesla-hero-backdrop {
    background-position: center, var(--hero-focus-m, var(--hero-focus, center 60%));
  }
}

/* Startseiten-Hero: Untertitel auf dem Desktop in einer Zeile */
@media (min-width: 1024px) {
  #hero .tesla-hero-subtitle { max-width: 900px; }
}

/* Fünf Menüpunkte: auf schmalen Desktops etwas enger, damit nichts an Logo und Button stößt */
@media (min-width: 1001px) and (max-width: 1100px) {
  .nav-link { padding-left: 10px; padding-right: 10px; }
  .nav-list { gap: 2px; }
}
/* bis 1000 px Burgermenü statt Menüleiste */
@media (max-width: 1000px) {
  .main-nav { display: none; }
  .btn-tesla-header { display: none !important; }
  .menu-toggle { display: flex; }
  .header-actions .nav-phone-direct { display: none; }
}

/* Kontakt: Einsatzgebiet */
.area-section .section-subtitle { margin-left: auto; margin-right: auto; }
.area-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  margin: 8px auto 0;
  padding: 0;
}
.area-list li {
  padding: 8px 16px;
  border: 1px solid var(--border-color, rgba(15, 23, 42, 0.12));
  border-radius: 999px;
  background: #fff;
  font-size: 0.95rem;
  color: var(--text-primary, #111827);
}
.area-note {
  text-align: center;
  margin: 28px auto 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brand-blue-active);
}

/* Handy: kleinere Hochkant-Titelbilder (schnellere Ladezeit) */
@media (max-width: 768px) {
  .tesla-hero-backdrop {
    background-image:
      linear-gradient(180deg, rgba(10, 14, 18, 0.68) 0%, rgba(10, 14, 18, 0.12) 28%, rgba(10, 14, 18, 0.16) 68%, rgba(10, 14, 18, 0.72) 100%),
      url('/assets/img/krelle-lkw-berlin-mobil.webp?v=1');
  }
  .page-hero-photo .tesla-hero-backdrop {
    background-image:
      linear-gradient(180deg, rgba(10, 14, 18, 0.8) 0%, rgba(10, 14, 18, 0.42) 28%, rgba(10, 14, 18, 0.08) 52%, rgba(10, 14, 18, 0.6) 100%),
      var(--hero-image-m, var(--hero-image));
  }
}

/* Barrierefreiheit: Slider-Punkte mit genug Abstand zum Antippen */
.slider-dots { gap: 18px; }

/* Startseiten-Hero (Berlin-Motiv): Text vor hellem Himmel gut lesbar halten */
#hero .tesla-hero-title,
#hero .tesla-hero-subtitle {
  text-shadow: 0 2px 14px rgba(10, 14, 18, 0.55), 0 1px 3px rgba(10, 14, 18, 0.35);
}
#hero:not(.page-hero-photo) .tesla-hero-backdrop {
  background-image:
    linear-gradient(180deg, rgba(10, 14, 18, 0.74) 0%, rgba(10, 14, 18, 0.4) 30%, rgba(10, 14, 18, 0.14) 55%, rgba(10, 14, 18, 0.72) 100%),
    url('/assets/img/krelle-lkw-berlin.webp?v=1');
}
@media (max-width: 768px) {
  #hero:not(.page-hero-photo) .tesla-hero-backdrop {
    background-image:
      linear-gradient(180deg, rgba(10, 14, 18, 0.78) 0%, rgba(10, 14, 18, 0.5) 32%, rgba(10, 14, 18, 0.16) 55%, rgba(10, 14, 18, 0.72) 100%),
      url('/assets/img/krelle-lkw-berlin-mobil.webp?v=1');
  }
}