/* =========================================================
   Gebrüder Weber – komplettes Design-System
   Geordnet nach HTML-Abschnittsreihenfolge.
   → Suche einfach den Abschnitt, den du bearbeiten willst.
   ========================================================= */


/* =========================================================
   DESIGN-VARIABLEN
   Hier zentral alle Farben, Abstände und Schriften ändern.
   ========================================================= */
:root {
  /* Farben (Dunkelmodus) */
  --color-bg:           #080B0F;          /* Seitenhintergrund */
  --color-surface:      #121820;          /* Karten-Hintergrund */
  --color-surface-2:    #1E252D;          /* Karten-Hintergrund (heller) */
  --color-surface-3:    #252D38;          /* Karten-Hintergrund (noch heller) */
  --color-accent:       #00AEEF;          /* Blau – Hauptfarbe für Hervorhebungen */
  --color-accent-dark:  #176C94;          /* Dunkles Blau – für Verläufe */
  --color-accent-glow:  rgba(0, 174, 239, 0.18); /* Leuchteffekt-Farbe */
  --color-text:         #F4F7FA;          /* Haupttext */
  --color-text-muted:   #A7B0BA;          /* Grauer Hilfstext */
  --color-silver:       #C8CDD2;          /* Silber – für Listen und Nebentext */
  --color-border:       rgba(255, 255, 255, 0.08); /* Rahmenlinien */
  --color-success:      #3FCF8E;          /* Grün (Erfolgsmeldungen) */
  --color-warning:      #F5B942;          /* Gelb (Warnungen) */
  --color-error:        #E86666;          /* Rot (Fehler) */

  /* Eckenradien */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;

  /* Breiten */
  --maxw:        1200px;  /* maximale Inhaltsbreite */
  --maxw-narrow:  820px;  /* schmaler Inhaltsbereich (z.B. #ergebnisse) */

  /* Schatten */
  --shadow:        0 18px 50px rgba(0,0,0,0.45);
  --shadow-accent: 0 0 0 1px var(--color-accent-dark), 0 0 40px var(--color-accent-glow);

  /* Header-Höhe – wird für sticky-Versatz verwendet */
  --header-h: 76px;

  /* Animations-Kurve */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Schriftart */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}


/* =========================================================
   BASIS
   Reset-Regeln und globale HTML-Elemente.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding-top sorgt dafür, dass beim Anspringen eines Ankers
   der Header den Inhalt nicht verdeckt */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-weight: 500;
  overflow-x: clip;  /* verhindert horizontales Scrollen, ohne overflow-y (und damit "position: sticky") zu beeinflussen */
}
body.kein-scrollen { overflow: hidden; } /* wenn Mobil-Menü offen ist */

/* Hintergrund-Farbverlauf (oben rechts + oben links) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(0,174,239,0.10), transparent 60%),
    radial-gradient(700px 500px at -10% 20%, rgba(23,108,148,0.10), transparent 55%);
  pointer-events: none;
}
/* Feines Gitternetz-Muster im Hintergrund */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; opacity: 0.4;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

img { max-width: 100%; display: block; }

/* Überschriften – clamp(MIN, FLUID, MAX) = passt sich der Bildschirmbreite an */
h1, h2, h3, h4 {
  line-height: 1.2; margin: 0 0 0.5em;
  font-weight: 700; letter-spacing: -0.01em; color: var(--color-text);
}
h1 { font-size: clamp(2rem, 5vw, 3.3rem); }    /* ~32px bis 53px */
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); } /* ~26px bis 40px */
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }


/* =========================================================
   LAYOUT
   Grundlegende Struktur für alle Sektionen.
   ========================================================= */

/* .container zentriert den Inhalt und begrenzt die Breite */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container-schmal { max-width: var(--maxw-narrow); }

/* Standard-Abstand oben/unten für alle Sektionen:
   30px (mobil) → ~64px (bei 1280px Breite) → 70px (Desktop)
   Möchtest du den Abstand größer/kleiner: ändere die Zahlen in clamp() */
.seitenabschnitt { padding: clamp(30px, 5vw, 0px) 0; position: relative; }

/* Dunkler Hintergrund-Verlauf für bestimmte Sektionen (z.B. #pakete-preise) */
.seitenabschnitt-dunkel {
  background: linear-gradient(180deg, rgba(18,24,32,0.6), rgba(8,11,15,0));
}

/* Hilfsmittel */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.verborgen { display: none !important; }

/* Tastaturfokus-Ring (für Barrierefreiheit) */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }


/* =========================================================
   GEMEINSAME ELEMENTE
   Klassen, die in mehreren Abschnitten verwendet werden.
   ========================================================= */

/* --- Bereich-Label (kleiner blauer Text über jeder Überschrift) --- */
.bereich-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px;
}
/* Leuchtpunkt vor dem Label-Text */
.bereich-label::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent);
  flex-shrink: 0;
  margin-right: 8px;
}

/* --- Abschnitt-Kopf (zentrierter Block mit Label + Überschrift + Text) --- */
/* margin-bottom: Abstand nach unten bis zum Inhalt darunter
   clamp(36px, 5vw, 56px) = ~36px mobil bis 56px Desktop */
.bereich-kopf { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }

/* Beschreibungstext unter der Überschrift */
.bereich-beschreibung { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.7; }
.bereich-beschreibung.links { text-align: left; }

/* --- Schaltflächen (Buttons) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease), border-color 0.2s var(--ease);
  text-align: center; line-height: 1.2;
}
.btn-gross { padding: 15px 30px; font-size: 1.05rem; }
.btn-primaer {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #03252f;
  box-shadow: 0 8px 24px var(--color-accent-glow);
}
.btn-primaer:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,174,239,0.35); }
.btn-umriss {
  background: rgba(255,255,255,0.03); color: var(--color-text); border-color: var(--color-border);
}
.btn-umriss:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); }

/* --- Symbole (SVG-Icons) --- */
.symbol      { width: 22px; height: 22px; color: var(--color-accent); flex: none; }
.symbol-gross { width: 40px; height: 40px; color: var(--color-accent); }

/* --- Einblend-Animation (beim Scrollen) --- */
.einblenden { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.einblenden.sichtbar { opacity: 1; transform: none; }


/* =========================================================
   HEADER / KOPFZEILE
   Sticky Navigation oben auf der Seite.
   ========================================================= */

/* Haupt-Header-Leiste */
.seiten-kopfzeile {
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Sticky muss auf dem echten <header>-Element sitzen (WordPress-Template-Teil):
   dessen Elternelement .wp-site-blocks ist so hoch wie die ganze Seite und bietet
   dadurch genug Platz zum "Kleben". .seiten-kopfzeile selbst hatte als Elternelement
   nur das kaum höhere <header> – dort konnte sticky nie richtig greifen. */
header.wp-block-template-part {
  position: sticky; top: 0; z-index: 100;
}
/* Header nach dem Scrollen – wird leicht transparent + verschwommen */
.seiten-kopfzeile.gescrollt {
  background: rgba(8,11,15,0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  border-bottom-color: var(--color-border);
}

/* Innenlayout des Headers */
.kopfzeile-innen { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; }

/* Logo-Bereich */
.marke          { display: flex; align-items: center; gap: 12px; }
.marken-logo    { flex: none; border-radius: 12px; }
.marken-text    { display: flex; flex-direction: column; line-height: 1.15; }
.marken-name    { font-weight: 700; font-size: 1.12rem; }
.marken-untertitel { font-size: 0.74rem; color: var(--color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* Navigationsleiste */
.haupt-navigation   { display: flex; align-items: center; gap: 26px; }
.navigations-liste  { display: flex; align-items: center; gap: 4px; }
.navigations-link {
  padding: 8px 12px; border-radius: 8px;
  font-size: 0.95rem; color: var(--color-silver);
  position: relative; transition: color 0.2s var(--ease);
}
/* Unterstrich-Effekt beim Hover */
.navigations-link::after {
  content: ""; position: absolute;
  left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease); border-radius: 2px;
}
.navigations-link:hover { color: var(--color-text); }
.navigations-link:hover::after,
.navigations-link.aktiv::after  { transform: scaleX(1); }
.navigations-link.aktiv         { color: var(--color-text); }

/* --- Dropdown-/Untermenü-Navigation (Leistungen / Ratgeber) ---
   Desktop: aufklappendes Panel (Hover + Klick). Mobil: Accordion (siehe @media unten). */
.hat-untermenu { position: relative; }
.untermenu-umschalter {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: inherit; /* Größe kommt aus .navigations-link = wie "Start" */
  display: inline-flex; align-items: center; gap: 7px;
}
.untermenu-pfeil {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.25s var(--ease); position: relative; top: -2px;
}
.hat-untermenu:hover .untermenu-pfeil,
.hat-untermenu.offen .untermenu-pfeil { transform: rotate(-135deg); top: 1px; }
.untermenu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 200;
  min-width: 250px; margin: 0; padding: 8px; list-style: none;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.untermenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.hat-untermenu:hover > .untermenu,
.hat-untermenu:focus-within > .untermenu,
.hat-untermenu.offen > .untermenu { opacity: 1; visibility: visible; transform: translateY(0); }
.navigations-unterlink {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--color-silver); font-size: 0.97rem; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
a.navigations-unterlink:hover, a.navigations-unterlink:focus-visible { background: rgba(0,174,239,0.14); color: var(--color-text); }
.ist-platzhalter { color: var(--color-text-muted); cursor: default; }
.ist-platzhalter em {
  font-style: normal; font-size: 0.68rem; letter-spacing: 0.03em;
  color: var(--color-accent); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 1px 8px; margin-left: 8px; vertical-align: middle;
}
/* Dropdown wird auf Mobil zum Accordion */
@media (max-width: 980px) {
  .untermenu-umschalter {
    width: 100%; justify-content: space-between;
    padding: 14px 12px; font-size: 1.05rem; border-bottom: 1px solid var(--color-border); color: var(--color-silver);
  }
  .untermenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; background: transparent; border: none; box-shadow: none; border-radius: 0;
    padding: 0 0 0 10px; gap: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease);
  }
  .untermenu::before { display: none; }
  .hat-untermenu.offen > .untermenu { max-height: 500px; }
  .navigations-unterlink { padding: 13px 12px; border-bottom: 1px solid var(--color-border); font-size: 1rem; }
  .ist-platzhalter { display: block; }
}

/* Hamburger-Menü (nur auf Mobilgeräten sichtbar) */
.menu-button {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--color-border);
  border-radius: 10px; cursor: pointer; align-items: center; justify-content: center;
}
.menu-button span {
  display: block; width: 22px; height: 2px;
  background: var(--color-text); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
/* X-Form wenn Menü offen */
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hell/Dunkel-Umschalter-Button */
.modus-umschalter {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  color: var(--color-silver);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
  flex: none; padding: 0;
}
.modus-umschalter:hover { border-color: var(--color-accent); color: var(--color-accent); }
.modus-umschalter svg { display: block; }
.modus-umschalter .mond-icon { display: none; } /* Mond nur im Hellmodus sichtbar */

/* Nach-oben-Button (feste Position unten rechts) */
.nach-oben-button {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--color-accent); color: #03252f; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px var(--color-accent-glow);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.nach-oben-button svg { width: 26px; height: 26px; }
.nach-oben-button.sichtbar { opacity: 1; transform: translateY(0); }


/* =========================================================
   #START – EINLEITUNG (HERO)
   Erster Abschnitt mit Überschrift, Bild und Parallax-Licht.
   ========================================================= */

/* padding-top: Abstand zwischen Header und Hero-Text
   clamp(48px, 7vw, 90px) = ~48px mobil bis 90px Desktop */
.einleitung { padding-top: clamp(48px, 7vw, 90px); }

/* Zwei-Spalten-Raster: links Text, rechts Bild */
.einleitung-raster { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; }

.einleitung-beschreibung { font-size: 1.15rem; color: var(--color-text-muted); max-width: 540px; }

/* Abstand zwischen den beiden Buttons */
.einleitung-aktionen { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 30px; }

/* Vorteil-Liste unter den Buttons */
.einleitung-vorteile { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.einleitung-vorteile li { display: flex; align-items: center; gap: 9px; font-size: 0.95rem; color: var(--color-silver); }
.einleitung-bild { display: flex; justify-content: center; }

/* Zeilenumbrüche in Listen ausblenden (SVG-Icons übernehmen die Trennung) */
.einleitung-vorteile li br,
.vertrauens-eintrag br { display: none; }

/* SVG-Icons vor den Vorteil-Einträgen */
.einleitung-vorteile li::before {
  content: '';
  display: inline-block;
  width: 22px; height: 22px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  flex-shrink: 0;
}
.einleitung-vorteile li:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z' fill='none' stroke='%2300AEEF' stroke-width='1.6'/%3E%3C/svg%3E");
}
.einleitung-vorteile li:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10' fill='none' stroke='%2300AEEF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.einleitung-vorteile li:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 11a4 4 0 1 0-8 0M3 20a7 7 0 0 1 18 0' fill='none' stroke='%2300AEEF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.einleitung-vorteile li:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z' fill='none' stroke='%2300AEEF' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='9' r='2.4' fill='none' stroke='%2300AEEF' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* --- Parallax-Licht-Effekt im Hero --- */
/* Das Licht bewegt sich beim Scrollen leicht mit (JavaScript steuert translateY) */
.parallax-hintergrund {
  position: absolute;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  top: -120px;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}
.einleitung .container {
  position: relative;
  z-index: 1; /* über dem Parallax-Licht */
}

/* Hellblauer Licht-Strahl (bewegt sich beim Scrollen) */
.parallax-licht {
  position: absolute;
  width: 100%; height: 120%;
  top: -10%; left: 0;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 18%,
      rgba(0,174,239,0.16) 30%,
      rgba(0,174,239,0.42) 54%,  /* stärkster Punkt – Wert erhöhen = heller */
      rgba(0,174,239,0.16) 72%,
      transparent 88%
    );
  animation: parallaxLicht 3s ease-in-out infinite alternate;
  will-change: transform;
}

/* Zweite Licht-Ebene (leichter Reflex) */
.parallax-reflex {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 12%,
      rgba(180,225,255,0.08) 35%,
      rgba(0,174,239,0.07) 57%,
      transparent 78%
    );
  animation: parallaxReflex 4s ease-in-out infinite alternate;
  will-change: opacity;
}

/* Puls-Animationen für den Licht-Effekt */
@keyframes parallaxLicht  { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes parallaxReflex { from { opacity: 0.3; } to { opacity: 1; } }

/* Animation bei "Bewegung reduzieren"-Einstellung im OS ausschalten */
@media (prefers-reduced-motion: reduce) {
  .parallax-licht,
  .parallax-reflex { animation: none !important; }
}


/* =========================================================
   VERTRAUENSLEISTE
   Schmale Leiste mit 4 Stärken-Einträgen unter dem Hero.

   ABSTAND: padding: 22px 0
   → Bewusst kleiner als die Standard-Sektionen (70px), damit
     die Leiste kompakt bleibt. Die Lichtstrahlen darüber und
     darunter sitzen dadurch leicht asymmetrisch – das ist
     ein akzeptierter Kompromiss.
   ========================================================= */
.vertrauensleiste {
  padding: 22px 0;  /* ← hier ändern für größere/kleinere Leiste */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: rgba(18,24,32,0.4);
}

/* 4 gleichmäßige Spalten */
.vertrauensleiste-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vertrauens-eintrag { display: flex; align-items: center; gap: 12px; justify-content: center; font-weight: 600; font-size: 0.98rem; }

/* SVG-Icons vor den Einträgen */
.vertrauens-eintrag::before {
  content: '';
  display: inline-block;
  width: 22px; height: 22px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  flex-shrink: 0;
}
.vertrauens-eintrag:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z' fill='none' stroke='%2300AEEF' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='9' r='2.4' fill='none' stroke='%2300AEEF' stroke-width='1.6'/%3E%3C/svg%3E");
}
.vertrauens-eintrag:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11l2-5h10l2 5M5 11h14v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z' fill='none' stroke='%2300AEEF' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='14' r='1.1' fill='%2300AEEF'/%3E%3Ccircle cx='16' cy='14' r='1.1' fill='%2300AEEF'/%3E%3C/svg%3E");
}
.vertrauens-eintrag:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 11l2 2 4-4M5 5h14v14H5z' fill='none' stroke='%2300AEEF' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.vertrauens-eintrag:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l2.5 5 5.5.8-4 3.9.9 5.5L12 16.5 7.1 18.7l.9-5.5-4-3.9L9.5 8z' fill='none' stroke='%2300AEEF' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* =========================================================
   #ERGEBNISSE + BAFG-BILD
   Textblock über dem Vorher/Nachher-Schieberegler.

   ABSTANDS-SYSTEM in diesem Bereich (von oben nach unten):
   ① #ergebnisse padding-bottom: 0.5rem (= 8px)
      → Nur wenig Platz zwischen Text und Bild darunter
   ② HTML-Spacer 70px (im WordPress-Editor)
      → Abstand nach dem Bild, vor dem Lichtstrahl
   ③ #pakete-preise padding-top: ~70px (Standard .seitenabschnitt)
      → Abstand nach dem Lichtstrahl bis zum Pakete-Inhalt
   ========================================================= */

/* Nur 8px Abstand nach unten, damit der BAFG-Text nah am Bild bleibt */
#ergebnisse { padding-bottom: 0.5rem !important; }

/* BAFG-Plugin Größe und Zentrierung */
.bafg-twentytwenty-wrapper,
.twentytwenty-wrapper,
[class*="bafg-"],
[class*="twentytwenty-wrapper"] {
  max-width: 720px !important;  /* ← Slider-Breite ändern */
  width: 100% !important;
  margin: 0 auto !important;
}
.bafg-twentytwenty-container,
.twentytwenty-container,
[class*="twentytwenty-container"] {
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;   /* quadratisch = passt zu den 952x952-Bildern, kein Beschnitt.
                                        Bei anderem Bildformat hier anpassen, z. B. 3 / 2. */
  height: auto !important;
}
.bafg-twentytwenty-wrapper img,
.twentytwenty-container img {
  height: 100% !important;   /* Bild füllt den Container komplett – nichts abgeschnitten */
  object-fit: cover !important;
  width: 100% !important;
  display: block !important;
}
.twentytwenty-overlay { height: 100% !important; }

/* FOUC-Fix: verhindert das kurze Riesen-Aufblitzen des Vorher/Nachher-Bildes,
   bevor das Plugin-JavaScript den Schieberegler aufgebaut hat.
   Greift NUR im Zustand vor der Initialisierung (Klasse .twentytwenty-container
   fehlt dann noch) – der fertige Slider bleibt unberührt. */
.bafg-twentytwenty-wrapper,
.bafg-twentytwenty-container {
  max-height: 720px !important;   /* nie höher als der fertige Slider */
}
.bafg-twentytwenty-container:not(.twentytwenty-container) {
  max-width: 720px !important;
  margin: 0 auto !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.bafg-twentytwenty-container:not(.twentytwenty-container) > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* Nur das Vorher-Bild zeigen, bis der Slider steht */
.bafg-twentytwenty-container:not(.twentytwenty-container) > img + img {
  display: none !important;
}


/* =========================================================
   #PAKETE
   Drei Reinigungspakete als Karten.
   ========================================================= */

/* Drei gleichmäßige Spalten */
.paket-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }

/* Einzel-Karte */
.paket-karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.paket-karte:hover { transform: translateY(-4px); border-color: rgba(0,174,239,0.35); }

/* Empfohlenes Paket – mit Blau-Rahmen und Leuchteffekt */
.paket-empfohlen {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-accent), var(--shadow);
  position: relative;
}
.paket-empfohlen::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-accent-glow), transparent 50%);
  pointer-events: none; z-index: 0;
}
.paket-karte > * { position: relative; z-index: 1; }

/* Kennzeichnung-Badge (z.B. "Empfohlen") */
.kennzeichnung {
  align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
  background: var(--color-surface-3); color: var(--color-silver);
  border: 1px solid var(--color-border);
}
.kennzeichnung-hervorgehoben { background: var(--color-accent); color: #03252f; border-color: transparent; }

/* Beschreibung und Inhaltsliste */
.paket-beschreibung { color: var(--color-text-muted); font-size: 0.97rem; line-height: 1.6; }
.paket-liste { margin: 18px 0 26px; display: flex; flex-direction: column; gap: 11px; }
.paket-liste li { position: relative; padding-left: 28px; color: var(--color-silver); font-size: 1rem; line-height: 1.55; }
/* Häkchen vor jedem Listen-Eintrag */
.paket-liste li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}
/* Button am unteren Ende der Karte */
.paket-karte .btn { margin-top: auto; width: 100%; }


/* =========================================================
   #ZUSATZ
   Zusatzleistungen als kleinere Karten.
   ========================================================= */

/* Drei gleichmäßige Spalten */
.zusatz-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.zusatz-karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 18px;
  text-align: center;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.zusatz-karte:hover { transform: translateY(-4px); border-color: rgba(0,174,239,0.35); }
.zusatz-karte h3 { font-size: 1.02rem; margin: 14px 0 8px; }

/* Preisanzeige */
.zusatz-preis { font-weight: 700; color: var(--color-accent); margin: 0; }
.zusatz-preis.gedaempft { color: var(--color-text-muted); font-weight: 600; font-size: 0.92rem; }


/* =========================================================
   #PREISE
   Preistabelle mit Größen-Umschalter.
   ========================================================= */

/* Umschalter-Leiste (Klein/Mittel/Groß) */
.preis-umschalter {
  display: flex;
  width: fit-content;
  margin: 0 auto 2rem;
  gap: 4px;
  padding: 5px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  justify-content: center;
}
.preis-umschalter-button {
  border: none; background: transparent;
  color: var(--color-text-muted);
  font: inherit; font-weight: 600;
  padding: 10px 24px; border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.preis-umschalter-button.ist-aktiv {
  background: var(--color-accent);
  color: #03252f;
}

/* Zentrierung des Preisbereichs (außer Tabelle und Hinweise) */
#preise .container { text-align: center; }
#preise .bereich-kopf,
#preise .preistabelle-rahmen,
#preise .mehrwertsteuer-hinweis { text-align: left; }

/* Preistabelle */
.preistabelle-rahmen {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
padding: 6px 0 6px;
}
.preistabelle {
  width: 100%; border-collapse: collapse; min-width: 520px;
  background: var(--color-surface); table-layout: fixed;
}
.preistabelle th, .preistabelle td {
  padding: 16px 18px;
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}
.preistabelle th:first-child, .preistabelle td:first-child { text-align: left; }
.preistabelle thead th {
  background: var(--color-surface-2);
  font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-silver);
}
.preistabelle tbody tr:last-child td { border-bottom: none; }

/* --- Rabatt-Modus ---
   Das WPCode-Snippet „Rabatt-Modus" setzt <html class="rabatt-aktiv"> und zeigt
   bei jeder Zelle mit data-aktion="…" den durchgestrichenen Normalpreis + den
   festen Aktionspreis (Euro-Wert direkt aus dem Attribut, keine Berechnung).
   Ausnehmen: data-aktion bei der Zelle einfach weglassen. */
.preistabelle .preis-aktion { display: none; }
html.rabatt-aktiv .preistabelle .preis-normal {
  display: block; text-decoration: line-through;
  opacity: 0.55; font-size: 0.8em;
}
html.rabatt-aktiv .preistabelle .preis-aktion {
  display: block; color: var(--color-accent); font-weight: 700;
}

/* Hinweise unter der Tabelle */
.mehrwertsteuer-hinweis { margin: 16px 0 0; color: var(--color-accent); font-weight: 600; }
.preis-hinweis          { margin: 16px 0 0; color: var(--color-accent); font-weight: 600; }

/* Preis-Legende (WordPress-Version) */
.preis-legende { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 26px; margin: 26px 0; color: var(--color-text-muted); }
.preis-legende > div:last-of-type { grid-column: 1 / -1; text-align: center; }
.legende-kuerzel { display: inline-block; min-width: 28px; color: var(--color-accent); font-weight: 700; }
.preis-infobox {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: var(--color-silver);
  font-size: 0.95rem;
  margin-top: 16px;
}

/* Preistabelle auf kleinen Bildschirmen */
@media (max-width: 620px) {
  .preistabelle-rahmen {
    border: none; box-shadow: none;
    border-radius: var(--radius); overflow-x: auto; padding: 2px 0 6px;
    background: var(--color-surface);
    margin-left: -18px;
    margin-right: -18px;
    width: calc(100% + 36px);
  }
  .preistabelle { min-width: 0; font-size: 0.75rem; }
  .preistabelle th:first-child,
  .preistabelle td:first-child { width: 26%; white-space: normal; }
.preistabelle th, .preistabelle td { padding: 10px 3px; white-space: nowrap; }
.preistabelle td.gedaempft { white-space: normal; }
.preistabelle th:last-child, .preistabelle td:last-child { padding-left: 1px; }
.preis-legende > div { text-align: left; }
.preis-legende > div:last-of-type { text-align: center; }
}


/* =========================================================
   #BEWERTUNGEN
   Kundenbewertungen als Karten.
   ========================================================= */

/* Drei gleichmäßige Spalten */
.bewertungen-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 2.5rem; }

.bewertung-karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.bewertung-sterne { color: var(--color-accent); font-size: 1.25rem; letter-spacing: 2px; }
.bewertung-text   { font-size: 1rem; color: var(--color-text); font-style: italic; margin: 0; padding: 0; border: none; }
.bewertung-autor  { font-size: 0.88rem; color: var(--color-text-muted); margin: 0; }


/* =========================================================
   #UEBER-UNS
   "Über uns" und Geschäftskunden-Bereich.
   ========================================================= */

/* Zwei-Spalten-Raster: links Bild, rechts Text */
.ueber-uns-raster { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: center; }
.ueber-uns-bild   { display: flex; justify-content: center; }

/* Geschäftskunden-Unterbereich (umgekehrte Spaltenreihenfolge: links Text, rechts Bild) */
.geschaeftskunden-raster { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.geschaeftskunden-bild   { display: flex; justify-content: center; }

/* Vorteilsliste mit Häkchen */
.vorteils-liste { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 28px; }
.vorteils-liste li { position: relative; padding-left: 30px; color: var(--color-silver); }
.vorteils-liste li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,174,239,0.15); border: 1px solid var(--color-accent);
}
.vorteils-liste li::after {
  content: ""; position: absolute; left: 6px; top: 8px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}


/* =========================================================
   #ABLAUF
   4-Schritte-Ablauf als Karten mit Pfeilen.
   ========================================================= */

/* Vier gleichmäßige Spalten + relative Position für Pfeile */
.ablauf-raster {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  position: relative;
}

/* Einzelner Ablauf-Schritt */
.ablauf-schritt {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 18px;  /* ← hier Innen-Abstand der Karte anpassen */
  position: relative;
}

/* Nummern-Badge (z.B. "01") */
.ablauf-nummer {
  width: 46px; height: 46px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #03252f;
}
.ablauf-schritt h3 { font-size: 1.12rem; }
.ablauf-schritt p  { color: var(--color-text-muted); margin: 0; font-size: 0.97rem; line-height: 1.6; }

/* Pfeil zwischen den Schritten (→) */
.ablauf-schritt:not(:last-child)::after {
  content: "→";
  position: absolute; right: -18px; top: 24px;
  font-size: 1.6rem; color: var(--color-accent); opacity: 0.85; z-index: 1;
}
/* Pfeile auf Mobile ausblenden */
@media (max-width: 620px) {
  .ablauf-schritt:not(:last-child)::after { display: none; }
}


/* =========================================================
   #EINSATZGEBIET
   PLZ-Rechner und Karte mit Einsatzgebiet.
   ========================================================= */

/* PLZ-Eingabefeld mit Button */
.plz-rechner { max-width: 480px; margin: 0 auto 2.5rem; }
.plz-eingabe-gruppe { display: flex; gap: 0.75rem; }
.plz-eingabe {
  flex: 1;
  background: var(--color-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300AEEF' stroke-width='1.8'%3E%3Cpath d='M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3C/svg%3E") no-repeat left 1rem center;
  background-size: 20px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 4px var(--color-accent-glow);
  color: var(--color-text);
  font-size: 1.1rem; padding: 0.95rem 1.1rem 0.95rem 3rem;
  font-family: inherit; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.plz-eingabe:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 4px rgba(63,207,142,0.20), 0 0 16px rgba(63,207,142,0.28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FCF8E' stroke-width='1.8'%3E%3Cpath d='M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3C/svg%3E");
}
.plz-eingabe::placeholder { color: var(--color-text-muted); }

/* Orts-Dropdown: klappt direkt unter dem Eingabefeld auf */
.plz-eingabe-wrap { position: relative; }
.plz-eingabe-wrap .plz-eingabe { width: 100%; }
.plz-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  margin: 0; padding: 6px; list-style: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  max-height: 260px; overflow-y: auto;
}
.plz-dropdown[hidden] { display: none; }
.plz-dropdown li { margin: 0; }
.plz-dropdown-item {
  display: block; width: 100%; text-align: left;
  font: inherit; color: var(--color-text);
  background: transparent; border: none; border-radius: 8px;
  padding: 0.6rem 0.8rem; cursor: pointer;
  transition: background 0.15s;
}
.plz-dropdown-item:hover,
.plz-dropdown-item.ist-aktiv { background: rgba(0,174,239,0.14); }

/* Ergebnisbox nach PLZ-Eingabe */
.plz-ergebnis { margin-top: 1rem; }
.plz-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  line-height: 1.6;
}
.plz-ort     { font-weight: 600; font-size: 1.05rem; color: var(--color-text); margin-bottom: 0.2rem; }
.plz-nr      { font-weight: 400; color: var(--color-text-muted); font-size: 0.9rem; }
.plz-zone    { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; }
.plz-kosten  { font-size: 1.2rem; font-weight: 700; color: var(--color-text); }
.plz-unbekannt { color: var(--color-text-muted); }
.plz-hinweis  { margin-top: 1.25rem; font-size: 0.85rem; line-height: 1.6; color: var(--color-text-muted); text-align: center; }

/* PLZ-Eingabe auf kleinen Bildschirmen untereinander */
@media (max-width: 480px) {
  .plz-eingabe-gruppe { flex-direction: column; }
}

/* Zonen-Legende (Farbkreise + Text) */
.radius-legende {
  display: flex; flex-wrap: wrap;
  gap: 12px 28px; justify-content: center;
  margin-bottom: 20px;
}
.radius-eintrag { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--color-silver); }
.radius-farbe   { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }

/* Orts-Chips unter der Karte */
.orte-liste   { display: flex; flex-wrap: wrap; gap: 25px; justify-content: center; }
.ort-eintrag  {
  padding: 8px 18px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-silver); font-size: 0.9rem; font-weight: 600;
}
.ort-eintrag-haupt { border-color: var(--color-accent); color: var(--color-accent); }

/* Einsatzgebiet-Kopf: weniger Abstand nach unten (wegen Karte direkt darunter) */
#einsatzgebiet .bereich-kopf { margin-bottom: 2px; }

/* Legende auf kleinen Bildschirmen kompakter */
@media (max-width: 620px) {
  .radius-legende { gap: 10px 16px; }
}


/* =========================================================
   #PLANER
   Terminanfrage-Formular mit Zusammenfassung.
   ========================================================= */

/* Fortschrittsanzeige (Schritt 1/2/3) */
.planung-fortschritt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 34px; }
.planung-fortschritt li {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--color-text-muted);
  padding: 8px 14px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
}
.planung-fortschritt li.ist-aktuell { border-color: var(--color-accent); color: var(--color-text); }
.planung-fortschritt .schritt-nummer {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-surface-3); color: var(--color-silver);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
}
.planung-fortschritt li.ist-aktuell .schritt-nummer {
  background: var(--color-accent); color: #03252f;
}

/* Haupt-Layout: Formular + Zusammenfassung nebeneinander */
.planung-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }

/* Formular-Bereich */
.planung-formular { display: flex; flex-direction: column; gap: 20px; }
.planung-schritt  {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 22px 22px 24px;
  background: var(--color-surface); margin: 0; box-shadow: var(--shadow);
}
.planung-schritt legend { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; padding: 0 6px; }
.schritt-symbol {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-accent); color: #03252f;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700;
}

/* Feld-Bezeichnungen und Auswahl-Buttons */
.feld-bezeichnung            { font-weight: 600; margin: 18px 0 10px; font-size: 0.95rem; }
.feld-bezeichnung:first-of-type { margin-top: 8px; }
.auswahl-zeile               { display: flex; gap: 10px; }
.auswahl-umbruch             { flex-wrap: wrap; }
.auswahl-button {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 11px 18px; border-radius: 10px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-silver);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease), transform 0.15s var(--ease);
}
.auswahl-button:hover { border-color: var(--color-accent); color: var(--color-text); }
.auswahl-button.ist-aktiv {
  background: var(--color-accent); color: #03252f;
  border-color: transparent; box-shadow: 0 4px 16px var(--color-accent-glow);
}
.inline-hinweis { font-size: 0.88rem; color: var(--color-warning); margin: 12px 0 0; }

/* Zusatz-Optionen als Checkboxen */
.zusatz-auswahl-raster { display: grid; grid-template-columns: 1fr; gap: 10px; }
.zusatz-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  cursor: pointer; transition: border-color 0.2s var(--ease);
}
.zusatz-option:hover { border-color: rgba(0,174,239,0.4); }
.zusatz-option input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--color-accent); flex: none; }
.zusatz-preis-label { display: block; font-style: normal; font-size: 0.85rem; color: var(--color-accent); margin-top: 2px; }

/* Dropdown-Feld */
.auswahl-feld {
  width: 100%; font: inherit;
  padding: 12px 14px; border-radius: 10px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text); cursor: pointer;
}
.demo-hinweis {
  margin-top: 14px; font-size: 0.85rem; color: var(--color-warning);
  background: rgba(245,185,66,0.08); border: 1px solid rgba(245,185,66,0.25);
  padding: 10px 14px; border-radius: 10px;
}

/* Zeitslot-Auswahl */
.dauer-info   { font-weight: 600; color: var(--color-silver); margin-bottom: 16px; }
.zeitslots    { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.zeitslot {
  text-align: left; font: inherit; cursor: pointer;
  padding: 14px 16px; border-radius: 12px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: border-color 0.2s var(--ease), transform 0.15s var(--ease), background 0.2s var(--ease);
}
.zeitslot:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.zeitslot.ist-ausgewaehlt {
  border-color: var(--color-accent);
  background: rgba(0,174,239,0.1);
  box-shadow: 0 0 0 1px var(--color-accent);
}
.zeitslot .zeitslot-tag     { font-weight: 700; display: block; }
.zeitslot .zeitslot-uhrzeit { color: var(--color-accent); font-weight: 600; }
.zeitslot .zeitslot-info    { display: block; font-size: 0.82rem; color: var(--color-text-muted); margin-top: 4px; }
.kein-zeitslot { grid-column: 1/-1; background: var(--color-surface-2); border: 1px solid rgba(245,185,66,0.3); border-radius: var(--radius); padding: 22px; }
.kein-zeitslot h4 { color: var(--color-warning); margin-bottom: 8px; }
.kein-zeitslot p  { color: var(--color-silver); }

/* Zusammenfassung (Sticky-Seitenleiste) */
.planung-zusammenfassung { position: sticky; top: calc(var(--header-h) + 16px); }
.zusammenfassung-karte {
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-accent), var(--shadow);
}
.zusammenfassung-titel         { color: var(--color-accent); margin-bottom: 6px; font-size: 1.15rem; }
.zusammenfassung-konfiguration { color: var(--color-silver); font-weight: 600; margin-bottom: 16px; }
.zusammenfassung-zeilen        { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.zusammenfassung-zeile         { display: flex; justify-content: space-between; gap: 12px; font-size: 0.96rem; }
.zusammenfassung-zeile .bezeichnung  { color: var(--color-text-muted); }
.zusammenfassung-zeile .wert         { font-weight: 600; white-space: nowrap; }
.zusammenfassung-zeile.ausstehend .wert { color: var(--color-warning); }
.zusammenfassung-gesamt { border-top: 1px solid var(--color-border); padding-top: 16px; margin-top: 4px; font-size: 1.2rem; font-weight: 700; }
.zusammenfassung-gesamt .gesamt-betrag  { color: var(--color-accent); display: block; font-size: 1.5rem; margin-top: 2px; }
.zusammenfassung-gesamt .gesamt-hinweis { display: block; font-size: 0.82rem; font-weight: 400; color: var(--color-text-muted); margin-top: 6px; }
.zusammenfassung-hinweis { font-size: 0.82rem; color: var(--color-text-muted); margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--color-border); }

/* Anfrage-Block (erscheint nach Formular-Ausfüllung) */
.anfrage-block { margin-top: 30px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.anfrage-block h3 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin-bottom: 20px; }
.anfrage-zusammenfassung { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px; }
.anfrage-zusammenfassung dl  { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; }
.anfrage-zusammenfassung dt  { color: var(--color-text-muted); font-size: 0.92rem; }
.anfrage-zusammenfassung dd  { margin: 0; font-weight: 600; text-align: right; }


/* =========================================================
   #FAQ
   Häufig gestellte Fragen als aufklappbare Einträge.
   ========================================================= */

.faq-liste { display: flex; flex-direction: column; gap: 12px; }

.faq-eintrag {
  background: var(--color-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-eintrag[open] { border-color: rgba(0,174,239,0.3); }

.faq-eintrag summary {
  padding: 1.1rem 1.4rem;
  cursor: pointer; font-weight: 600; font-size: 1rem; color: var(--color-text);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  user-select: none;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }

/* Pfeil-Icon rechts neben der Frage */
.faq-eintrag summary::after {
  content: '';
  flex-shrink: 0; width: 20px; height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2300AEEF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  transition: transform 0.25s ease;
}
.faq-eintrag[open] summary::after { transform: rotate(180deg); }

/* Antwort-Text */
.faq-eintrag p { padding: 0 1.4rem 1.2rem; color: var(--color-text-muted); margin: 0; font-size: 1rem; line-height: 1.7; }


/* =========================================================
   #KONTAKT
   Kontaktformular und Kontaktdaten.
   ========================================================= */

/* Formular-Raster (zwei Spalten) */
.formular-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.formular-feld     { display: flex; flex-direction: column; gap: 7px; }
.formular-feld-voll { grid-column: 1/-1; }  /* erstreckt sich über beide Spalten */
.formular-feld label { font-weight: 600; font-size: 0.95rem; }
.pflichtfeld { color: var(--color-accent); }

/* Eingabefelder */
.formular-feld input,
.formular-feld textarea {
  font: inherit; padding: 12px 14px; border-radius: 10px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text); transition: border-color 0.2s var(--ease);
}
.formular-feld input:focus-visible,
.formular-feld textarea:focus-visible { border-color: var(--color-accent); }
.formular-feld input.ungueltig,
.formular-feld textarea.ungueltig     { border-color: var(--color-error); }
.feld-fehler { color: var(--color-error); font-size: 0.85rem; min-height: 1em; }

/* Datenschutz-Einwilligung */
.einwilligung { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 8px; cursor: pointer; }
.einwilligung input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--color-accent); flex: none; }
.einwilligung span  { font-size: 0.92rem; color: var(--color-silver); }

/* Erfolgs-/Fehlermeldung nach dem Absenden */
.formular-ergebnis { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); font-weight: 500; display: none; }
.formular-ergebnis.sichtbar { display: block; }
.formular-ergebnis.erfolg   { background: rgba(63,207,142,0.1); border: 1px solid rgba(63,207,142,0.4); color: #c6ffe4; }

/* Formular-Karte und Kontaktdaten-Box */
.kontakt-formular {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow);
}
.kontakt-info {
  margin-top: 34px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 26px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 28px;
}
.kontakt-info-eintrag  { display: flex; align-items: center; gap: 12px; color: var(--color-silver); }
.kontakt-schaltflaeche  { grid-column: 1/-1; justify-self: start; margin-top: 6px; }
.kontakt-schaltflaechen { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }


/* =========================================================
   FOOTER / FUßZEILE
   Unterer Bereich mit Links, Kontaktdaten, Copyright.
   ========================================================= */

/* padding: Innen-Abstand, margin-top: Abstand zur letzten Sektion */
.seiten-fusszeile {
  border-top: 1px solid var(--color-border);
  background: rgba(8,11,15,0.6);
  padding: 36px 0 20px;
  margin-top: 24px;
  font-size: 0.95rem;   /* Basis-Größe – verhindert, dass das Theme Links & "Baiersdorf & Umgebung" aufbläht */
}

/* Vier Spalten: Marke, Navigation, Kontakt, Rechtliches */
.fusszeile-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }

.fusszeile-marke  { display: flex; flex-direction: column; gap: 4px; }
.fusszeile-gebiet { color: var(--color-text-muted); margin-top: 8px; }

.fusszeile-navigation h4,
.fusszeile-kontakt h4 { font-size: 0.95rem; margin-bottom: 14px; color: var(--color-silver); }

.fusszeile-navigation ul,
.fusszeile-kontakt ul { display: flex; flex-direction: column; gap: 9px; }

.fusszeile-navigation a { font-size: 0.9rem; color: var(--color-text-muted); transition: color 0.2s var(--ease); }
.fusszeile-navigation a:hover { color: var(--color-accent); }
.fusszeile-kontakt li { color: var(--color-text-muted); font-size: 0.92rem; }

/* Copyright-Zeile */
.fusszeile-unten { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.urheberrecht    { color: var(--color-text-muted); font-size: 0.88rem; margin: 14px 0 0; }


/* =========================================================
   LICHTSTRAHL-TRENNLINIEN
   Blaue Linien zwischen den Sektionen.
   Verwendet im HTML: <div class="lichtstrahl lichtstrahl--weich">

   Verfügbare Varianten:
   --hauch    → sehr dezent, 1px, leicht transparent
   --klassisch → klar sichtbar, 1px, mit Leuchten
   --weich    → 6px breit, verschwommen (wird auf der Seite verwendet)
   --intensiv → 2px, sehr hell mit weißem Zentrum
   ========================================================= */
.lichtstrahl {
  height: 0;   /* Standard: unsichtbar, Variante setzt height */
  margin: 0;
  border: none;
  display: block;
}

.lichtstrahl--hauch {
  height: 1px;
  background: linear-gradient(to right,
    transparent 8%,
    rgba(0,174,239,0.45) 30%,
    rgba(0,174,239,0.75) 50%,   /* ← 0.75 = Intensität in der Mitte */
    rgba(0,174,239,0.45) 70%,
    transparent 92%);
  box-shadow: 0 0 5px 1px rgba(0,174,239,0.18);
}

.lichtstrahl--klassisch {
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(0,174,239,0.70) 20%,
    #00AEEF 50%,
    rgba(0,174,239,0.70) 80%,
    transparent 100%);
  box-shadow: 0 0 10px 2px rgba(0,174,239,0.35),
              0 0 3px  0   rgba(0,174,239,0.70);
}

.lichtstrahl--weich {
  height: 6px;                  /* ← Dicke der Linie ändern */
  background: linear-gradient(to right,
    transparent 0%,
    rgba(0,174,239,0.08) 10%,
    rgba(0,174,239,0.45) 35%,
    rgba(0,174,239,0.85) 50%,   /* ← 0.85 = Helligkeit in der Mitte */
    rgba(0,174,239,0.45) 65%,
    rgba(0,174,239,0.08) 90%,
    transparent 100%);
  filter: blur(1px);            /* ← Unschärfe: höher = weicher */
}

.lichtstrahl--intensiv {
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(0,174,239,0.60) 15%,
    #55D8FF 48%,
    #ffffff  50%,               /* weißes Zentrum */
    #55D8FF  52%,
    rgba(0,174,239,0.60) 85%,
    transparent 100%);
  box-shadow: 0 0 18px  5px rgba(0,174,239,0.55),
              0 0 40px 10px rgba(0,174,239,0.20);
}


/* =========================================================
   HELL-MODUS
   Wird aktiviert wenn <html class="hell-modus"> gesetzt ist.
   Alle Farben werden für hellen Hintergrund angepasst.
   ========================================================= */



/* Helle Farbvariablen (überschreiben die dunklen in :root) */
html.hell-modus {
  --color-bg:         #E8EEF5;
  --color-surface:    #FFFFFF;
  --color-surface-2:  #F0F4F8;
  --color-surface-3:  #E2E8F2;
  --color-text:       #0B1120;
  --color-text-muted: #253040;
  --color-silver:     #2E3D50;
  --color-border:     rgba(0, 0, 0, 0.14);
  --shadow:           0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.07);
}

/* Hintergrund-Verlauf (heller, dezenter) */
html.hell-modus body::before {
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(0,174,239,0.06), transparent 60%),
    radial-gradient(700px 500px at -10% 20%, rgba(23,108,148,0.05), transparent 55%);
}
html.hell-modus body::after {
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
}

/* Dunkler Abschnitt im Hellmodus */
html.hell-modus .seitenabschnitt-dunkel {
  background: linear-gradient(180deg, rgba(190,210,235,0.55), rgba(232,238,245,0));
}

/* Karten mit hellem Schatten hervorheben */
html.hell-modus .paket-karte,
html.hell-modus .zusatz-karte,
html.hell-modus .ablauf-schritt,
html.hell-modus .bewertung-karte,
html.hell-modus .faq-eintrag,
html.hell-modus .planung-schritt,
html.hell-modus .kontakt-info,
html.hell-modus .kontakt-formular,
html.hell-modus .preis-infobox,
html.hell-modus .preistabelle-rahmen {
  box-shadow: 0 2px 14px rgba(0,0,0,0.09), 0 0 0 1px rgba(0,0,0,0.10);
}

/* Header im Hellmodus */
html.hell-modus .seiten-kopfzeile.gescrollt {
  background: rgba(240,244,248,0.92);
  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
}


/* Vertrauensleiste im Hellmodus */
html.hell-modus .vertrauensleiste { background: rgba(220,230,242,0.6); }

/* Buttons */
html.hell-modus .btn-umriss { background: rgba(0,0,0,0.03); }
html.hell-modus .menu-button { background: rgba(0,0,0,0.04); }

/* Parallax-Licht im Hellmodus dezenter */
html.hell-modus .parallax-licht {
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 18%,
      rgba(0,174,239,0.07) 30%,
      rgba(0,174,239,0.18) 54%,
      rgba(0,174,239,0.07) 72%,
      transparent 88%
    );
}
html.hell-modus .parallax-reflex {
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 12%,
      rgba(0,130,200,0.04) 35%,
      rgba(0,174,239,0.03) 57%,
      transparent 78%
    );
}

/* Header-Wrapper im Hellmodus transparent halten (WordPress-Template-Teil) */
html.hell-modus header,
html.hell-modus .wp-block-template-part { background-color: transparent !important; }

/* Footer im Hellmodus */
html.hell-modus .seiten-fusszeile { background: rgba(220,230,242,0.7); }

/* FAQ-Rahmen im Hellmodus */
html.hell-modus .faq-eintrag { border-color: var(--color-border); }

/* PLZ-Eingabe und Ergebnisbox im Hellmodus */
html.hell-modus .plz-eingabe { background-color: rgba(0,0,0,0.04); }
html.hell-modus .plz-box     { background: rgba(0,0,0,0.03); }

/* Kontaktformular Erfolgsmeldung im Hellmodus */
html.hell-modus .formular-ergebnis.erfolg {
  background: rgba(63,207,142,0.12);
  border-color: rgba(63,207,142,0.5);
  color: #1a6640;
}

/* Links-Seite Buttons im Hellmodus */
html.hell-modus .links-buttons .btn-umriss { border-color: rgba(0, 0, 0, 0.40); color: var(--color-text); }

/* Hell/Dunkel-Umschalter im Hellmodus */
html.hell-modus .modus-umschalter { background: rgba(0,0,0,0.04); }
html.hell-modus .modus-umschalter .sonne-icon { display: none; }
html.hell-modus .modus-umschalter .mond-icon  { display: block; }


/* =========================================================
   RESPONSIVE
   Anpassungen für kleinere Bildschirme.
   Hinweis: Einige Abschnitte haben eigene @media-Regeln
   direkt im jeweiligen Abschnitt oben (PLZ, Preistabelle, Ablauf).
   ========================================================= */

/* Tablet und kleiner (unter 980px) */
@media (max-width: 980px) {
  /* Navigation: Liste ausblenden, Hamburger-Button anzeigen */
  .navigations-liste, .navigations-schaltflaeche { display: none; }
  .menu-button { display: flex; }

  /* Mobile Navigation als Overlay */
  .haupt-navigation {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(8,11,15,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 24px 24px;
    transform: translateY(-100vh); transition: transform 0.35s var(--ease);
    box-shadow: var(--shadow);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .haupt-navigation.geoeffnet { transform: translateY(0); }
html.hell-modus .haupt-navigation { background: rgba(240,244,248,0.98) !important; }
  .haupt-navigation.geoeffnet .navigations-liste,
  .haupt-navigation.geoeffnet .navigations-schaltflaeche { display: flex; }
  .navigations-liste { flex-direction: column; align-items: stretch; gap: 2px; }
  .navigations-link  { padding: 14px 12px; font-size: 1.05rem; border-bottom: 1px solid var(--color-border); }
  .navigations-link::after { display: none; }
  .navigations-schaltflaeche { margin-top: 14px; }

  /* Hero: ein Spalte, Bild nach oben */
  .einleitung-raster { grid-template-columns: 1fr; gap: 36px; }
  .einleitung-bild   { order: -1; }

  /* Über uns und Geschäftskunden: ein Spalte */
  .geschaeftskunden-raster, .ueber-uns-raster { grid-template-columns: 1fr; gap: 32px; }
  .ueber-uns-bild { order: -1; }

  /* Terminplaner: ein Spalte, Zusammenfassung nicht sticky */
  .planung-layout { grid-template-columns: 1fr; }
  .planung-zusammenfassung { position: static; }

  /* Zusatz: zwei Spalten */
  .zusatz-raster { grid-template-columns: repeat(2, 1fr); }

  /* Ablauf: zwei Spalten */
  .ablauf-raster { grid-template-columns: repeat(2, 1fr); }

  /* Bewertungen: eine Spalte */
  .bewertungen-raster { grid-template-columns: 1fr; }

  /* Footer: zwei Spalten */
  .fusszeile-raster { grid-template-columns: 1fr 1fr; }
}

/* Mobil (unter 620px) */
@media (max-width: 620px) {
  .container { padding: 0 18px; }

  /* Vertrauensleiste: zwei Spalten */
  .vertrauensleiste-raster { grid-template-columns: 1fr 1fr; gap: 14px; }
  .vertrauens-eintrag { justify-content: flex-start; font-size: 0.9rem; }

  /* Pakete: eine Spalte */
  .paket-raster { grid-template-columns: 1fr; }

  /* Preislegende: eine Spalte */
  .preis-legende    { grid-template-columns: 1fr; }

  /* Zusatz und Ablauf: eine Spalte */
  .zusatz-raster { grid-template-columns: 1fr; }
  .ablauf-raster { grid-template-columns: 1fr; }

  /* Kontaktformular: eine Spalte */
  .formular-raster { grid-template-columns: 1fr; }
  .kontakt-info    { grid-template-columns: 1fr; }

  /* Footer: eine Spalte */
  .fusszeile-raster { grid-template-columns: 1fr; }

  /* Planer */
  .planung-fortschritt li { font-size: 0.78rem; padding: 6px 10px; }
  .anfrage-zusammenfassung dl { grid-template-columns: 1fr; }
  .anfrage-zusammenfassung dd { text-align: left; }

  /* Sonstiges */
  .einleitung-vorteile { gap: 12px; }
  .btn-gross           { width: 100%; }
  .einleitung-aktionen { flex-direction: column; }
}

/* Bewegungsreduktion (OS-Einstellung) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .einblenden { opacity: 1; transform: none; }
}


/* =========================================================
   WORDPRESS-KORREKTUREN
   Diese Regeln korrigieren WordPress-Standardverhalten,
   das mit dem eigenen Design kollidiert.
   ========================================================= */

/* Seitentitel und Footer von WordPress ausblenden (eigener Header/Footer) */
.wp-block-post-title { display: none; }
footer.wp-block-template-part { display: none !important; }

/* Block-Gap auf 0 setzen (WordPress fügt sonst Lücken zwischen Blöcken ein) */
.wp-block-post-content { --wp--style--block-gap: 0px !important; }

/* HTML-Blöcke: kein vertikaler Außenabstand */
.wp-block-post-content > .wp-block-html { margin-block: 0 !important; }

/* Ablauf-Liste: WordPress-Listennummern entfernen */
ol.ablauf-raster { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }

/* Hero (Einleitung): WordPress fügt oben Platz hinzu, wir reduzieren ihn */
.einleitung.seitenabschnitt { padding-top: 1.5rem !important; }

main#wp--skip-link--target.wp-block-group {
  margin-top: 0 !important;
}
#wp--skip-link--target > .wp-block-group.alignfull {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Scroll-Spy: aktiver Navigations-Link wird hervorgehoben */
header a.aktiv {
  color: var(--color-accent) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--color-accent) !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 2px !important;
}



/* WordPress 6.x fügt automatisch margin-block: 1.5rem zu allen Elementen
   in Layout-Blöcken hinzu – das erzeugt ungewollte Zusatzabstände.
   Wird auf 0 zurückgesetzt, damit nur unsere eigenen paddings wirken. */
.wp-block-post-content > * { margin-block: 0 !important; }


/* =========================================================
   SPEZIALSEITEN
   Impressum, Datenschutz und Links-Seite.
   ========================================================= */

/* Impressum / Datenschutz */
.rechtstext-seite   { padding-top: 5rem; }
.rechtstext-inhalt h2 {
  font-size: 1.25rem; margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.rechtstext-inhalt h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.rechtstext-inhalt p,
.rechtstext-inhalt address { color: var(--color-text-muted); line-height: 1.7; font-style: normal; margin-bottom: 0.5rem; }
.rechtstext-inhalt a { color: var(--color-accent); }

/* Links-Seite (einzelne Schaltflächen-Übersicht) */
.links-seite { min-height: 70vh; display: flex; align-items: center; text-align: center; padding-top: 5rem; }
.links-seite .bereich-kopf { margin-bottom: 2.5rem; }
.links-buttons { display: flex; flex-direction: column; gap: 1rem; max-width: 380px; margin: 0 auto; }
.links-buttons .btn       { width: 100%; }
.links-buttons svg        { flex: none; }
.links-buttons .btn-umriss { border-color: rgba(255, 255, 255, 0.30); }


/* =========================================================
   PAKETE & PREISE – interaktiver Angebotsbereich
   Fahrzeuggrößen-Auswahl, dynamische Kartenpreise,
   Aufklapp-Leistungen + aufklappbarer Preisvergleich.
   Logik liegt im WPCode-Snippet "Pakete & Preise".
   ========================================================= */

/* Schritt-Beschriftungen (1. … / 2. …) */
.schritt-label { text-align: center; font-weight: 700; font-size: 1.05rem; color: var(--color-text); margin: 2rem 0 0.2rem; }
.schritt-nr    { color: var(--color-accent); }

/* Fahrzeuggrößen-Auswahl */
.groessen-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0.6rem auto 0.4rem; max-width: 560px; }
.groesse-btn {
  font: inherit; font-weight: 700; cursor: pointer; min-width: 56px;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text);
  transition: transform 0.15s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.groesse-btn:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.groesse-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #03252f; border-color: transparent; box-shadow: 0 8px 24px var(--color-accent-glow);
}
.groesse-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Dynamisches Infofeld */
.fahrzeug-info { max-width: 560px; margin: 0 auto 2.4rem; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 14px 18px; }
.fi-klasse { display: block; font-weight: 700; font-size: 1.15rem; color: var(--color-accent); }
.fi-bsp    { display: block; color: var(--color-text-muted); font-size: 0.95rem; margin-top: 2px; }
.fi-bsp:empty { display: none; }

/* Preis auf der Paketkarte */
.paket-preis { margin: 0.2rem 0 1rem; min-height: 2.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.karte-wert       { font-size: 2rem; font-weight: 800; color: var(--color-text); line-height: 1.1; }
.karte-normal     { font-size: 1rem; text-decoration: line-through; opacity: 0.55; }
.karte-aktion     { font-size: 2rem; font-weight: 800; color: var(--color-accent); line-height: 1.1; }
.preis-aufanfrage { font-size: 1.25rem; font-weight: 700; color: var(--color-text-muted); }
.preis-mwst-mini  { font-size: 0.72rem; color: var(--color-text-muted); font-weight: 500; margin-top: 2px; }

/* Aufklappbare Leistungen (je Paket) + Preisvergleich */
.aufklapp { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin: 0 0 1rem; overflow: hidden; text-align: left; }
.paket-karte .aufklapp { width: 100%; }
.aufklapp[open] { border-color: rgba(0, 174, 239, 0.3); }
.aufklapp > summary {
  list-style: none; cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--color-text);
  padding: 0.8rem 1.1rem; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::after {
  content: ''; width: 16px; height: 16px; flex-shrink: 0;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%2300AEEF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition: transform 0.25s var(--ease);
}
.aufklapp[open] > summary::after { transform: rotate(180deg); }
.aufklapp .paket-liste { padding: 0 1.2rem 1.1rem; }

/* Aufklappbarer Preisvergleich */
.vergleich { max-width: 900px; margin: 2.5rem auto 1rem; }
.vergleich > summary { justify-content: center; font-size: 1rem; padding: 1rem 1.2rem; }
.vergleich .inhalt { padding: 0 1rem 1.2rem; }
.preis-legende { font-size: 0.85rem; }               /* kleiner – Startseite + Geschäftskunden */
.vergleich .preis-legende { gap: 6px 22px; margin: 18px 0 0; }   /* kompaktere Abstände nur im Startseiten-Vergleich */

/* aktive Spalte in der Preistabelle dezent hervorheben */
.preistabelle .spalte-aktiv { background: rgba(0, 174, 239, 0.10); }
.preistabelle thead th.spalte-aktiv { color: var(--color-accent); }

/* zentrierte Hinweise unter der Tabelle */
#pakete-preise .preis-hinweis  { text-align: center; }
#pakete-preise .geschaefts-link { text-align: center; color: var(--color-text-muted); }
#pakete-preise .geschaefts-link a { color: var(--color-accent); text-decoration: underline; }

/* Zusatz-Beschreibung (z. B. Sonderverschmutzungen) */
.zusatz-info { font-size: 0.85rem; color: var(--color-text-muted); margin: 0.1rem 0 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .groesse-btn, .aufklapp > summary::after { transition: none !important; }
}


/* =========================================================
   FOOTER – neu: Logo + Social, klickbarer Kontakt, Rechtslinks unten
   ========================================================= */

/* Logo + Social in der Marke-Spalte */
.fusszeile-logo   { width: 44px; height: 44px; border-radius: 50%; margin-bottom: 4px; }
.fusszeile-social { display: flex; gap: 10px; margin-top: 14px; }
.fusszeile-social a {
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-2); color: var(--color-accent);
  border: 1px solid var(--color-border);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.fusszeile-social a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.fusszeile-social svg { width: 18px; height: 18px; }

/* Kontakt-Spalte: Icon + Label + Wert (anklickbar) */
.fusszeile-kontakt .kontakt-eintrag { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.kontakt-ic  { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--color-accent); }
.kontakt-lbl { display: block; font-size: 0.72rem; color: var(--color-text-muted); line-height: 1.4; }
.kontakt-val { display: block; font-size: 0.92rem; color: var(--color-text); transition: color 0.2s var(--ease); }
a.kontakt-val:hover { color: var(--color-accent); }

/* Unterzeile: Copyright links, Impressum/Datenschutz rechts */
.fusszeile-unten { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.fusszeile-unten .urheberrecht { margin: 0; }
.fusszeile-rechts { display: flex; gap: 20px; }
.fusszeile-rechts a { color: var(--color-text-muted); font-size: 0.88rem; transition: color 0.2s var(--ease); }
.fusszeile-rechts a:hover { color: var(--color-accent); }