/* ═══════════════════════════════════════════════════════════════════
 *  SOATEK LP — Konsolidiertes Stylesheet
 *  Stand: 2026-06-12
 *
 *  Struktur:
 *    1. Variablen (:root), Reset, Typography
 *    2. Header / Hero / Sections / Benefits / Trustbar
 *    3. Promise / Reonic / References / Wirtschaft / Förderung
 *    4. Form / FAQ / Footer-Defaults
 *    5. Gewerbe-spezifische Styles (Rechner, Timeline, Branchen)
 *    6. WP-spezifische Form-Card-Styles
 *    7. ──────── FINALE OVERRIDES (Patch v3) ────────
 *       Hier landen alle Anpassungen die ältere Regeln überschreiben:
 *       - Logo container-bündig
 *       - Mega-Nav mit Submenüs (schlägt Twenty-Twenty-One)
 *       - Footer 3-Spalten-Layout
 *       - Float-CTA als Desktop-Circle, Mobile aus
 *
 *  Konsolidiert aus: lp.css (Original) + Patches v3..v21
 *  Letztes Update 2026-06-12 (v21 = Refs-Cards Polish + Timeline-Linie)
 *  Die früheren Patches v1 und v2 sind hier nicht mehr nötig — v3 ist
 *  vollständig und ersetzt sie.
 * ═══════════════════════════════════════════════════════════════════ */


:root {
  /* Brand Colors */
  --c-orange: #ec792c;
  --c-orange-dark: #d96a1f;
  --c-orange-light: #f8a96b;
  --c-darkblue: #2e3841;
  --c-darkblue-soft: #3d4854;
  --c-yellow: #f5b942;

  /* Neutrals */
  --c-white: #ffffff;
  --c-gray-50: #f7f7f5;
  --c-gray-100: #ededeb;
  --c-gray-200: #d4d4d2;
  --c-gray-500: #6b6b6b;
  --c-gray-700: #3a3a3a;
  --c-text: #2a2a2a;

  /* Typography */
  --f-display: 'Bricolage Grotesque', 'Outfit', system-ui, sans-serif;
  --f-body: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing & Layout */
  --container: 1240px;
  --gutter: 24px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 4px 20px rgba(46, 56, 65, 0.06);
  --shadow-card: 0 8px 30px rgba(46, 56, 65, 0.1);
  --shadow-lg:   0 18px 50px rgba(46, 56, 65, 0.18);
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.05;
  color: var(--c-darkblue);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2.1rem); font-weight: 700; }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 700; }

p { margin-bottom: 0; }
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.eyebrow {
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--c-gray-500);
  font-weight: 500;
  margin-bottom: 16px;
  text-align: center;
}
.eyebrow.dark { color: var(--c-white); opacity: .85; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 1.05rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--c-orange);
  color: var(--c-white);
  box-shadow: 0 6px 18px rgba(236, 121, 44, 0.35);
}
.btn-primary:hover { background: var(--c-orange-dark); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--c-white);
  border: 2px solid rgba(255,255,255,.4);
}
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-arrow::after { content: "→"; font-size: 1.2em; }

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-darkblue);
  color: var(--c-white);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: padding .25s ease;
}
.header.scrolled .header-logo {
  width: 78px;
  height: 78px;
  padding: 8px;
  margin-bottom: -10px;
  margin-left: 0;
  align-self: center;
  margin-top: 0;
}
.header.scrolled .header-inner {
  min-height: 64px;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  min-height: 78px;
}
.header-logo {
  background: var(--c-white);
  padding: 14px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: -14px;
  margin-bottom: -90px;
  margin-left: 70px;
  display: block;
  line-height: 0;
  width: 160px;
  height: 160px;
  box-sizing: border-box;
  transition: width .25s ease, height .25s ease, margin .25s ease, padding .25s ease;
}
.header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.header-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.header-top {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header-phone {
  font-weight: 600;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--c-white);
}
.header-phone .icon { width: 18px; height: 18px; opacity: .75; stroke-width: 2.2; }
.header-cta {
  background: var(--c-orange);
  color: var(--c-white);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.header-cta:hover { background: var(--c-orange-dark); transform: translateY(-1px); }
.header-cta .icon { width: 16px; height: 16px; }
.header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.header-nav a {
  color: var(--c-white);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color .2s ease;
  white-space: nowrap;
}
.header-nav a:hover { color: var(--c-orange); }
.burger {
  width: 32px;
  height: 22px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--c-white);
  width: 100%;
  border-radius: 1px;
}
/* Variante: schlanker Conversion-Header (nur Tel + CTA, kein Menü) */
.header-nav.lp-hide { display: none; }

/* Geometric brand decoration (Soatek-Pfeile) — max 2 pro Seite, abwechselnd L/R */
.brand-deco {
  position: absolute;
  width: 180px;
  height: 360px;
  pointer-events: none;
  opacity: 1;
  z-index: 1;
}
.brand-deco.right {
  right: clamp(16px, 10%, 140px);
  top: 50%;
  transform: translateY(-50%);
}
.brand-deco.left {
  left: clamp(16px, 10%, 140px);
  top: 50%;
  transform: translateY(-50%);
}
.brand-deco img,
.brand-deco svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
@media (max-width: 1200px) {
  .brand-deco { width: 130px; height: 260px; }
}
@media (max-width: 980px) {
  .brand-deco {
    width: 70px;
    height: 140px;
    opacity: .55;
  }
  .brand-deco.right { right: 8px; }
  .brand-deco.left { left: 8px; }
}

/* Hero */
.hero {
  position: relative;
  min-height: 620px;
  background: var(--c-darkblue);
  color: var(--c-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 80px 0 60px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    105deg,
    rgba(46, 56, 65, 0.92) 0%,
    rgba(46, 56, 65, 0.55) 45%,
    rgba(46, 56, 65, 0.2) 75%,
    rgba(46, 56, 65, 0.7) 100%
  ),
  url('https://picsum.photos/seed/soatek-hero-roof/1920/900?grayscale');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.hero-text {
  padding-top: 30px;
}
.hero-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
  border: 1px solid rgba(255,255,255,.18);
}
.hero h1 {
  color: var(--c-white);
  margin-bottom: 24px;
}
.hero h1 .accent { color: var(--c-orange); display: inline-block; }
.hero-sub {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: rgba(255,255,255,.85);
  font-weight: 400;
  margin-bottom: 36px;
  max-width: 520px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,.7);
}
.hero-trust .star { color: var(--c-orange); }

/* Trust bar (under hero) */
.trustbar {
  background: var(--c-white);
  padding: 28px 0;
  border-bottom: 1px solid var(--c-gray-100);
}
.trustbar-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-gray-700);
  font-weight: 500;
  font-size: 0.95rem;
}
.trust-badge .icon {
  width: 36px;
  height: 36px;
  background: var(--c-orange);
  color: var(--c-white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}
.trust-badge.stars { font-weight: 700; color: var(--c-darkblue); }

/* Section base */
section { padding: 90px 0; position: relative; }
section.bg-gray { background: var(--c-gray-50); }
section.bg-dark { background: var(--c-darkblue); color: var(--c-white); }
section.bg-dark h2 { color: var(--c-white); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.section-head p { color: var(--c-gray-500); font-size: 1.1rem; margin-top: 16px; }
section.bg-dark .section-head p { color: rgba(255,255,255,.75); }

/* Three-Col Vorteile */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.benefit {
  text-align: center;
  padding: 16px;
}
.benefit-icon {
  width: 80px;
  height: 80px;
  background: var(--c-orange);
  color: var(--c-white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  font-size: 2rem;
}
.benefit h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
  color: var(--c-darkblue);
}
.benefit p { color: var(--c-gray-500); }

/* Orange Promise Card (wie "Photovoltaik vom Profi") */
.promise-card {
  background: linear-gradient(135deg, var(--c-orange) 0%, var(--c-orange-dark) 100%);
  color: var(--c-white);
  padding: 60px 70px;
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  align-items: start;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.promise-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.promise-eyebrow {
  text-transform: none;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 12px;
  opacity: .9;
}
.promise-card h2 {
  color: var(--c-white);
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.05;
}
.promise-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.promise-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 1.05rem;
  line-height: 1.5;
}
.promise-list .check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 2px solid var(--c-white);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.promise-list .check::before { content: "✓"; font-weight: 700; font-size: 1rem; }

/* Reonic-iframe Block */
.reonic-block {
  background: var(--c-darkblue);
  color: var(--c-white);
  padding: 80px 0;
  position: relative;
}
.reonic-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: center;
}
.reonic-text h2 { color: var(--c-white); margin-bottom: 18px; }
.reonic-text .sub { color: rgba(255,255,255,.8); font-size: 1.1rem; margin-bottom: 24px; }
.reonic-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.reonic-list li { display: flex; gap: 14px; align-items: flex-start; }
.reonic-list .arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--c-white);
  color: var(--c-darkblue);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 2px;
}
.reonic-iframe-mock {
  background: var(--c-white);
  color: var(--c-darkblue);
  border-radius: var(--radius-lg);
  padding: 50px 40px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.reonic-iframe-mock .badge {
  position: absolute;
  top: -14px;
  right: 30px;
  background: var(--c-orange);
  color: var(--c-white);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}
.reonic-iframe-mock h3 { font-size: 1.6rem; margin-bottom: 4px; }
.reonic-iframe-mock .checks { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.reonic-iframe-mock .checks li {
  display: flex; gap: 10px; align-items: center; list-style: none;
  color: var(--c-gray-700);
}
.reonic-iframe-mock .checks li::before {
  content: "✓"; color: var(--c-orange);
  background: rgba(236, 121, 44, 0.12);
  border-radius: 50%; width: 22px; height: 22px;
  display: inline-grid; place-items: center; font-weight: 700;
  flex-shrink: 0;
}
.reonic-iframe-mock .house-illustration {
  background: var(--c-gray-50);
  border-radius: var(--radius-md);
  padding: 20px;
  display: grid;
  place-items: center;
  min-height: 140px;
  position: relative;
}
.reonic-iframe-mock .house-illustration svg { width: 100%; max-width: 280px; height: 100px; }
.reonic-cta {
  align-self: flex-start;
  margin-top: 8px;
  background: var(--c-orange);
  color: var(--c-white);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.reonic-cta::after { content: "→"; }

/* References (wie Kunden-Referenzen Soatek) */
.refs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.ref-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-darkblue);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.ref-card-img {
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: var(--c-gray-100);
}
.ref-card-body { padding: 28px 26px 32px; }
.ref-card-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 18px; line-height: 1.3; color: var(--c-white); }
.ref-card-quote { font-style: italic; color: rgba(255,255,255,.85); margin-bottom: 18px; font-size: 0.95rem; line-height: 1.55; }
.ref-card-author { font-weight: 600; font-size: 0.9rem; color: var(--c-orange); }

/* Wirtschaftlichkeit (3 Boxen) */
.wirt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.wirt-card {
  background: var(--c-white);
  border-radius: var(--radius-md);
  padding: 36px 30px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  border: 2px solid transparent;
  transition: border-color .2s ease, transform .2s ease;
}
.wirt-card:hover { border-color: var(--c-orange); transform: translateY(-4px); }
.wirt-card.featured { border-color: var(--c-orange); position: relative; }
.wirt-card.featured::before {
  content: "Beliebteste Größe";
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-orange);
  color: var(--c-white);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.wirt-size {
  font-family: var(--f-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--c-darkblue);
  line-height: 1;
}
.wirt-size .unit { font-size: 1rem; color: var(--c-gray-500); font-weight: 500; margin-left: 4px; }
.wirt-label { color: var(--c-gray-500); margin-bottom: 18px; font-size: 0.95rem; }
.wirt-rows { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; text-align: left; border-top: 1px solid var(--c-gray-100); padding-top: 14px; }
.wirt-rows .row { display: flex; justify-content: space-between; font-size: 0.95rem; }
.wirt-rows .row .lbl { color: var(--c-gray-500); }
.wirt-rows .row .val { font-weight: 600; color: var(--c-darkblue); }
.wirt-disclaimer { font-size: 0.8rem; color: var(--c-gray-500); text-align: center; margin-top: 24px; font-style: italic; }

/* Förderung */
.foerder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.foerder-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.foerder-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  font-size: 1.05rem;
  line-height: 1.5;
}
.foerder-list .arrow {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--c-darkblue);
  color: var(--c-white);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  margin-top: 2px;
}
.foerder-list strong { color: var(--c-darkblue); display: block; margin-bottom: 4px; }
.foerder-info {
  background: var(--c-orange);
  color: var(--c-white);
  padding: 36px;
  border-radius: var(--radius-md);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  position: relative;
}
.foerder-info::before {
  content: "\201C";
  position: absolute;
  top: -10px; left: 26px;
  font-size: 5rem;
  font-family: serif;
  opacity: 0.4;
  line-height: 1;
}
.foerder-info .author { font-style: normal; font-weight: 600; margin-top: 18px; font-size: 0.95rem; opacity: .9; }

/* Form */
.form-section {
  background: var(--c-orange);
  color: var(--c-white);
  padding: 90px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.form-section::before, .form-section::after {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.form-section::before { top: -100px; left: -100px; }
.form-section::after { bottom: -100px; right: -100px; }
.form-section h2 { color: var(--c-white); }
.form-section .sub { color: rgba(255,255,255,.85); margin: 16px 0 40px; font-size: 1.1rem; }
.form-card {
  background: var(--c-white);
  color: var(--c-text);
  padding: 50px;
  border-radius: var(--radius-lg);
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-row.single { grid-template-columns: 1fr; }
.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-darkblue);
  margin-bottom: 6px;
}
.form-field label .req { color: var(--c-orange); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--c-gray-100);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  font-size: 1rem;
  transition: border-color .2s ease;
  font-family: inherit;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--c-orange);
}
.form-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--c-gray-500);
  margin: 24px 0;
  line-height: 1.5;
}
.form-checkbox input { margin-top: 4px; flex-shrink: 0; }
.form-checkbox a { color: var(--c-orange); text-decoration: underline; }
.form-submit {
  width: 100%;
  padding: 18px;
  background: var(--c-orange);
  color: var(--c-white);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  transition: background .2s ease;
}
.form-submit:hover { background: var(--c-orange-dark); }

/* FAQ */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--c-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-gray-100);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.faq-item:hover { box-shadow: var(--shadow-soft); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-darkblue);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  width: 32px; height: 32px;
  background: var(--c-orange);
  color: var(--c-white);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.4rem;
  font-weight: 400;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .answer {
  padding: 0 28px 24px 28px;
  color: var(--c-gray-700);
  line-height: 1.65;
}

/* Sticky Mobile CTA */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--c-darkblue);
  display: flex;
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.sticky-cta a {
  flex: 1;
  text-align: center;
  padding: 16px;
  color: var(--c-white);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sticky-cta a + a { background: var(--c-orange); }

/* Floating Desktop CTA */
.float-cta {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-white);
  display: grid;
  place-items: center;
  z-index: 50;
  font-size: 1.6rem;
  box-shadow: 0 10px 30px rgba(236, 121, 44, 0.5);
  transition: transform .2s ease;
}
.float-cta:hover { transform: scale(1.1); }

/* Footer */
.footer {
  background: var(--c-darkblue);
  color: rgba(255,255,255,.7);
  padding: 50px 0 30px;
  font-size: 0.9rem;
  margin-bottom: 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer-brand {
  background: var(--c-white);
  padding: 20px 24px;
  border-radius: var(--radius-md);
  display: inline-block;
  margin-bottom: 18px;
}
.footer-brand img { height: 44px; }
.footer p { line-height: 1.7; }
.footer h5 { color: var(--c-white); margin-bottom: 14px; font-size: 0.95rem; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer a:hover { color: var(--c-orange); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 40px;
  padding-top: 20px;
  text-align: center;
  font-size: 0.8rem;
  opacity: .7;
}

/* Responsive */
@media (max-width: 980px) {
  h1 { font-size: clamp(2rem, 8vw, 3.4rem); }
  .header-inner { min-height: 58px; padding: 10px var(--gutter); gap: 12px; }
  .header-logo {
    padding: 8px;
    margin-top: -10px;
    margin-bottom: -36px;
    margin-left: 0;
    width: 78px;
    height: 78px;
  }
  .header-right { gap: 0; }
  .header-top { gap: 10px; }
  .header-phone { font-size: 0; gap: 0; }      /* nur Icon, Nummer ausgeblendet */
  .header-phone .icon { width: 22px; height: 22px; opacity: 1; }
  .header-cta { padding: 8px 16px; font-size: 0.85rem; }
  .header-cta .icon { display: none; }
  .header-nav { display: none; }                /* Menü auf Mobile in Burger */
  .burger { margin-left: 6px; }
  .hero { padding: 100px 0 60px; min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .benefits-grid { grid-template-columns: 1fr; gap: 32px; }
  .reonic-grid { grid-template-columns: 1fr; gap: 40px; }
  .refs-grid { grid-template-columns: 1fr; }
  .wirt-grid { grid-template-columns: 1fr; }
  .foerder-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .promise-card { grid-template-columns: 1fr; padding: 40px 32px; gap: 28px; }
  .form-card { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; }
  section { padding: 60px 0; }
  body { padding-bottom: 64px; } /* sticky CTA spacer */
  .float-cta { display: none; }
}
@media (min-width: 981px) {
  .sticky-cta { display: none; }
}

/* Brand decorative SVG (orange triangle cluster — wie auf Soatek) */
.deco-cluster { display: inline-block; }


.icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
  flex-shrink: 0;
}
.icon-fill { fill: currentColor; stroke: none; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 36px; height: 36px; }
.icon-xxl { width: 56px; height: 56px; }

/* Anpassung Trust-Badge: Icon-Container etwas kleiner und Padding rein */
.trust-badge .icon-wrap {
  width: 38px; height: 38px;
  background: var(--c-orange);
  color: var(--c-white);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.trust-badge .icon-wrap .icon { width: 18px; height: 18px; }

/* Anpassung Benefit-Icon: SVG drin */
.benefit-icon .icon { width: 36px; height: 36px; stroke-width: 1.8; }

/* Float-CTA SVG-Größe */
.float-cta .icon { width: 26px; height: 26px; stroke-width: 2; }

/* Sticky-CTA SVG-Größe */
.sticky-cta .icon { width: 18px; height: 18px; }

/* Hero eyebrow icon */
.hero-eyebrow .icon { width: 14px; height: 14px; opacity: .9; }

/* Header phone icon: leicht transparent */
.header-phone .icon { width: 18px; height: 18px; opacity: .75; stroke-width: 2.2; }

/* Header CTA icon */
.header-cta .icon { width: 16px; height: 16px; }

/* Hero trust line stars (Unicode) bleiben gelb-orange */
.hero-trust .stars { color: var(--c-orange); letter-spacing: 1px; }

/* Btn-ghost mit Icon */
.btn-ghost .icon { width: 18px; height: 18px; opacity: .9; }

/* ─── Gewerbe-spezifische Styles (Rechner, Timeline, Branchen) ─── */
.benefits-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.benefit-4 {
  text-align: left;
  padding: 30px 24px;
  background: var(--c-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border-top: 4px solid var(--c-orange);
}
.benefit-4 .icon-num {
  font-family: var(--f-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--c-orange);
  line-height: 1;
  margin-bottom: 18px;
}
.benefit-4 h3 { font-size: 1.15rem; margin-bottom: 10px; color: var(--c-darkblue); line-height: 1.2; }
.benefit-4 p { font-size: 0.95rem; color: var(--c-gray-500); line-height: 1.55; }
.calc {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 50px 48px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.calc::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(236, 121, 44, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.calc h3 { color: var(--c-darkblue); font-size: 1.5rem; margin-bottom: 8px; }
.calc-form { display: flex; flex-direction: column; gap: 22px; }
.calc-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-darkblue);
  margin-bottom: 8px;
}
.calc-field .hint { font-weight: 400; color: var(--c-gray-500); font-size: 0.82rem; margin-left: 6px; }
.calc-field input, .calc-field select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--c-gray-100);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  background: var(--c-white);
  transition: border-color .2s ease;
}
.calc-field input:focus, .calc-field select:focus {
  outline: none; border-color: var(--c-orange);
}
.calc-result {
  background: linear-gradient(135deg, var(--c-darkblue) 0%, var(--c-darkblue-soft) 100%);
  color: var(--c-white);
  padding: 36px 32px;
  border-radius: var(--radius-md);
  position: relative;
}
.calc-result h4 {
  color: var(--c-white);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 18px;
}
.calc-result .out-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.calc-result .out-row:last-of-type { border-bottom: none; }
.calc-result .out-row .lbl { color: rgba(255,255,255,.75); font-size: 0.95rem; }
.calc-result .out-row .val {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--c-white);
}
.calc-result .out-row .val.accent { color: var(--c-orange); }
.calc-result .disclaimer {
  font-size: 0.8rem;
  opacity: .6;
  font-style: italic;
  margin-top: 16px;
}
.calc-cta {
  margin-top: 24px;
  width: 100%;
  padding: 16px;
  background: var(--c-orange);
  color: var(--c-white);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  display: block;
}
.calc-cta:hover { background: var(--c-orange-dark); }
.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 36px; left: 6%; right: 6%;
  height: 2px;
  background: var(--c-gray-100);
  z-index: 0;
}
.tl-step { position: relative; z-index: 1; text-align: center; }
.tl-step .num {
  width: 72px; height: 72px;
  background: var(--c-orange);
  color: var(--c-white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  font-family: var(--f-display);
  font-size: 1.8rem;
  font-weight: 800;
  border: 6px solid var(--c-white);
  box-shadow: 0 6px 18px rgba(236, 121, 44, 0.3);
}
.tl-step h4 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--c-darkblue);
  line-height: 1.25;
}
.tl-step .meta {
  font-size: 0.78rem;
  color: var(--c-orange);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.tl-step p {
  font-size: 0.88rem;
  color: var(--c-gray-500);
  line-height: 1.5;
}
.branche-tag {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--c-darkblue);
  color: var(--c-white);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.trust-block {
  text-align: center;
  padding: 60px 0 30px;
}
.trust-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px;
  margin-top: 30px;
  opacity: 0.7;
}
.trust-logos .logo-mock {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-gray-500);
  padding: 12px 24px;
  border: 2px solid var(--c-gray-200);
  border-radius: var(--radius-md);
  letter-spacing: 0.03em;
}
.gewerbe {
  min-height: 580px;
}
.gewerbe .hero-bg {
  background-image: linear-gradient(
    105deg,
    rgba(46, 56, 65, 0.95) 0%,
    rgba(46, 56, 65, 0.65) 50%,
    rgba(46, 56, 65, 0.3) 80%,
    rgba(46, 56, 65, 0.7) 100%
  ),
  url('https://picsum.photos/seed/soatek-gewerbe-hero/1920/900?grayscale');
}
.benefits-4 { grid-template-columns: 1fr; gap: 20px; }
.calc { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
.timeline { grid-template-columns: 1fr; gap: 32px; }
.timeline::before { display: none; }
.trust-logos { gap: 24px; }


/* ─── WP-spezifische Ergänzungen ────────────────────────────── */

/* Float-CTA initial unten versteckt — JS toggled das */
.float-cta { transform: translateY(120%); transition: transform .25s ease; }

/* Hero-Background per Inline-Style aus ACF überschreibt CSS-Fallback */
.hero-bg[style*="background-image"] { background-color: transparent; }

/* FluentForm-Container im Form-Card stylen, damit es nicht aus dem Soatek-Look fällt */
.form-card .ff-default,
.form-card .frm_forms,
.form-card .fluentform {
    font-family: inherit !important;
}
.form-card .ff-el-input--label label {
    font-weight: 600 !important;
    color: var(--c-darkblue) !important;
    margin-bottom: 6px !important;
}
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card input[type="number"],
.form-card select,
.form-card textarea {
    border: 2px solid var(--c-gray-200) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    transition: border-color .2s ease !important;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
    border-color: var(--c-orange) !important;
    outline: none !important;
}
.form-card .ff-btn-submit,
.form-card button[type="submit"] {
    background: var(--c-orange) !important;
    color: #fff !important;
    padding: 16px 32px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .2s ease, transform .2s ease !important;
}
.form-card .ff-btn-submit:hover,
.form-card button[type="submit"]:hover {
    background: var(--c-orange-dark) !important;
    transform: translateY(-2px);
}

/* Calc-Hint-Zeile im Rechner */
.calc-hint {
    font-size: 0.85rem;
    color: var(--c-gray-500);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ═══════════════════════════════════════════════════════════════════
 *  7. FINALE OVERRIDES — schlägt Twenty-Twenty-One und Original
 *     Stand 2026-06-12 (vorher: separate Patches v1/v2/v3)
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── HEADER: Logo container-bündig ───────────────────────────────── */

.header-logo {
    margin-left: 0 !important;
}
.header.scrolled .header-logo {
    margin-left: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
 *  MEGA-NAV — hoch-spezifisch, schlägt Twenty-Twenty-One
 * ═══════════════════════════════════════════════════════════════════ */

/* Twenty-Twenty-One Sub-Menu-Toggle (+/-) komplett verstecken */
body.soatek-lp-ads .header .sub-menu-toggle,
body.soatek-lp-ads .header button.sub-menu-toggle,
body.soatek-lp-ads .header-nav .sub-menu-toggle,
body.soatek-lp-ads .header [class*="sub-menu-toggle"] {
    display: none !important;
}

/* Twenty-Twenty-One spezifische Menü-Klassen überschreiben */
body.soatek-lp-ads .header .menu,
body.soatek-lp-ads .header .menu li,
body.soatek-lp-ads .header .menu a {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

/* Top-Level Mega-Nav */
body.soatek-lp-ads .header .soatek-mega-nav,
body.soatek-lp-ads .header ul.soatek-mega-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 28px !important;
    width: auto !important;
    background: transparent !important;
}

body.soatek-lp-ads .header .soatek-mega-nav > li {
    position: relative !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    display: block !important;
    width: auto !important;
}

body.soatek-lp-ads .header .soatek-mega-nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    padding: 18px 4px !important;
    line-height: 1.2 !important;
    background: transparent !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: color .2s ease;
}

body.soatek-lp-ads .header .soatek-mega-nav > li > a:hover,
body.soatek-lp-ads .header .soatek-mega-nav > li > a:focus-visible,
body.soatek-lp-ads .header .soatek-mega-nav > li.current-menu-item > a,
body.soatek-lp-ads .header .soatek-mega-nav > li.current-menu-parent > a {
    color: var(--c-orange) !important;
    background: transparent !important;
}

/* Caret bei Items mit Submenu */
body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children > a::after,
body.soatek-lp-ads .header .soatek-mega-nav > li.has-submenu > a::after {
    content: "▾";
    font-size: 0.7rem;
    opacity: .7;
    margin-left: 2px;
    transition: transform .2s ease;
    display: inline-block;
}
body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:hover > a::after,
body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:focus-within > a::after,
body.soatek-lp-ads .header .soatek-mega-nav > li.has-submenu:hover > a::after,
body.soatek-lp-ads .header .soatek-mega-nav > li.has-submenu:focus-within > a::after {
    transform: rotate(180deg);
}


/* ─── SUB-MENU (Dropdown) ─────────────────────────────────────────── */

body.soatek-lp-ads .header .soatek-mega-nav .sub-menu,
body.soatek-lp-ads .header .soatek-mega-nav .submenu,
body.soatek-lp-ads .header .soatek-mega-nav > li ul {
    position: absolute !important;
    top: 100% !important;
    left: -24px !important;
    width: auto !important;
    min-width: 280px !important;
    padding: 24px 12px 20px !important;
    margin: 0 !important;
    background: var(--c-darkblue) !important;
    background-image: linear-gradient(180deg, var(--c-darkblue) 0%, #252f37 100%) !important;
    border-radius: 0 0 4px 4px !important;
    border-top: 2px solid var(--c-orange) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
    list-style: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease !important;
    z-index: 200 !important;
    display: block !important;
    pointer-events: none !important;
}

body.soatek-lp-ads .header .soatek-mega-nav > li:hover > .sub-menu,
body.soatek-lp-ads .header .soatek-mega-nav > li:hover > .submenu,
body.soatek-lp-ads .header .soatek-mega-nav > li:hover > ul,
body.soatek-lp-ads .header .soatek-mega-nav > li:focus-within > .sub-menu,
body.soatek-lp-ads .header .soatek-mega-nav > li:focus-within > .submenu,
body.soatek-lp-ads .header .soatek-mega-nav > li:focus-within > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

body.soatek-lp-ads .header .soatek-mega-nav .sub-menu li,
body.soatek-lp-ads .header .soatek-mega-nav .submenu li,
body.soatek-lp-ads .header .soatek-mega-nav > li ul li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: auto !important;
    border: none !important;
    background: transparent !important;
}

body.soatek-lp-ads .header .soatek-mega-nav .sub-menu li a,
body.soatek-lp-ads .header .soatek-mega-nav .submenu li a,
body.soatek-lp-ads .header .soatek-mega-nav > li ul li a {
    display: block !important;
    padding: 11px 22px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.3 !important;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
    white-space: nowrap;
}
body.soatek-lp-ads .header .soatek-mega-nav .sub-menu li a:hover,
body.soatek-lp-ads .header .soatek-mega-nav .sub-menu li a:focus-visible,
body.soatek-lp-ads .header .soatek-mega-nav .submenu li a:hover,
body.soatek-lp-ads .header .soatek-mega-nav .submenu li a:focus-visible,
body.soatek-lp-ads .header .soatek-mega-nav > li ul li a:hover,
body.soatek-lp-ads .header .soatek-mega-nav > li ul li a:focus-visible {
    color: var(--c-orange) !important;
    background: rgba(255,255,255,.04) !important;
    padding-left: 28px !important;
}

/* Hover-Bridge zwischen Top-Level und Sub-Menu */
body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children::before,
body.soatek-lp-ads .header .soatek-mega-nav > li.has-submenu::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

body.soatek-lp-ads .header .header-nav {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}

@media (max-width: 980px) {
    body.soatek-lp-ads .header .soatek-mega-nav { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
 *  FOOTER — bleibt wie v2
 * ═══════════════════════════════════════════════════════════════════ */

.footer {
    background: #fff;
    color: var(--c-darkblue);
    padding: 0 0 24px;
    border-top: 1px solid #ededeb;
}
.footer-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0 36px;
    gap: 24px;
}
.footer-tagline::before,
.footer-tagline::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #d4d4d2;
    max-width: 280px;
}
.footer-tagline span {
    color: var(--c-orange);
    font-weight: 500;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.4;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 60px;
    padding: 20px 0 50px;
    align-items: start;
}
.footer-col h4 {
    color: var(--c-darkblue);
    font-weight: 700;
    margin: 0 0 12px;
    font-size: 1.1rem;
}
.footer-col h4:not(:first-of-type) { margin-top: 30px; }
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}
.footer-col ul li { margin-bottom: 4px; }
.footer-col ul li a {
    color: #4a4a4a;
    text-decoration: none;
    font-size: 0.97rem;
    transition: color .2s ease;
}
.footer-col ul li a:hover { color: var(--c-orange); }
.footer-col-brand .footer-logo {
    width: 200px; height: auto;
    margin-bottom: 18px; display: block;
}
.footer-col-brand p {
    margin: 0 0 10px;
    line-height: 1.55;
    font-size: 0.97rem;
    color: #4a4a4a;
}
.footer-col-brand strong { color: var(--c-darkblue); font-weight: 700; }
.footer-phone-strong {
    color: var(--c-orange) !important;
    font-weight: 700 !important;
    margin: 14px 0 18px !important;
}
.footer-phone-strong a {
    color: var(--c-orange);
    text-decoration: none;
}
.footer-btn-ghost {
    display: inline-block;
    padding: 12px 36px;
    border: 2px solid var(--c-darkblue);
    border-radius: 999px;
    color: var(--c-darkblue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.97rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    margin-top: 8px;
}
.footer-btn-ghost:hover {
    background: var(--c-darkblue);
    color: #fff;
    transform: translateY(-1px);
}
.footer-bottom {
    border-top: 1px solid #ededeb;
    padding: 22px 0 4px;
    text-align: center;
}
.footer-bottom small {
    font-size: 0.9rem;
    color: var(--c-gray-500);
}
.footer-bottom small a {
    color: var(--c-gray-500);
    text-decoration: none;
    margin: 0 4px;
    transition: color .2s ease;
}
.footer-bottom small a:hover { color: var(--c-orange); }

@media (max-width: 980px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 16px 0 40px;
    }
    .footer-tagline { padding: 30px 0 20px; }
    .footer-tagline span { font-size: 0.98rem; }
    .footer-tagline::before,
    .footer-tagline::after { max-width: 60px; }
}


/* ═══════════════════════════════════════════════════════════════════
 *  FLOAT-CTA — Desktop-Circle (50px über Onetap-Auge)
 * ═══════════════════════════════════════════════════════════════════ */

/* Alte 2-Button-Bar (falls noch im DOM) ausblenden */
nav.float-cta { display: none !important; }

/* Single-Circle-Button — Desktop sichtbar, Mobile aus */
a.float-cta-single,
.float-cta.float-cta-single {
    position: fixed !important;
    right: 20px !important;
    bottom: 90px !important;        /* 50px Abstand über Onetap-Auge (das typischerweise bei bottom: 20px sitzt) */
    left: auto !important;
    top: auto !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 9998 !important;       /* knapp unter Onetap (typisch 9999), bleibt aber sichtbar */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--c-orange) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(236, 121, 44, 0.45) !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
    transform: none !important;     /* überschreibt inline-style transform vom lp.js */
    line-height: 1 !important;
    font-size: 0 !important;        /* versteckt evt. zurückgebliebenen Text-Node */
}

.float-cta-single:hover,
.float-cta-single:focus-visible {
    background: var(--c-orange-dark) !important;
    transform: scale(1.08) !important;
    box-shadow: 0 10px 24px rgba(236, 121, 44, 0.55) !important;
}

.float-cta-single .icon,
.float-cta-single svg {
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    display: block !important;
    margin: 0 !important;
}

.float-cta-single span {
    display: none !important;       /* falls Text-span versehentlich noch im DOM */
}

/* Mobile: komplett ausblenden */
@media (max-width: 980px) {
    .float-cta-single,
    a.float-cta-single,
    .float-cta.float-cta-single {
        display: none !important;
    }
}


/* ─── DIAGNOSE für fremde Sticky-Buttons (außer Onetap, das bleibt) ── */

body.soatek-lp-ads .wpb-sticky-btn,
body.soatek-lp-ads .brizy-cta-floating,
body.soatek-lp-ads [class*="floating-button"]:not([class*="onetap"]),
body.soatek-lp-ads [class*="sticky-cta"]:not(.float-cta-single):not([class*="onetap"]),
body.soatek-lp-ads [class*="floating-cta"]:not(.float-cta-single):not([class*="onetap"]) {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v4
 *  - Header-BG: #3f3d39 default, #fff scrolled
 *  - Mobile-Header: Phone-Icon + CTA + Burger sichtbar
 *  - Mega-Menu: 2-Spalten-Layout wie Brizy (Headline links, Items rechts)
 *  - Mobile-Drawer mit eigener Nav
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── HEADER: Background-Farbe + Scrolled-State ──────────────────── */

body.soatek-lp-ads .header {
    background: #3f3d39 !important;
    transition: background .3s ease, box-shadow .3s ease, color .3s ease;
}
body.soatek-lp-ads .header.scrolled {
    background: #fff !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.08);
}

/* Text-Farben im scrolled-State invertieren */
body.soatek-lp-ads .header.scrolled .header-phone,
body.soatek-lp-ads .header.scrolled .header-phone .phone-text,
body.soatek-lp-ads .header.scrolled .soatek-mega-nav > li > a {
    color: var(--c-darkblue) !important;
}
body.soatek-lp-ads .header.scrolled .header-phone .icon,
body.soatek-lp-ads .header.scrolled .soatek-mega-nav > li > a .icon {
    color: var(--c-darkblue) !important;
    stroke: var(--c-darkblue) !important;
}
body.soatek-lp-ads .header.scrolled .burger span {
    background: var(--c-darkblue) !important;
}
/* CTA-Button bleibt orange im Scrolled-State */


/* ─── BURGER ──────────────────────────────────────── */

.burger {
    display: none;     /* Desktop default */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-left: 8px;
}
.burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, background .3s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }


/* ─── MEGA-MENU: 2-Spalten Brizy-Style ────────────── */

body.soatek-lp-ads .header .soatek-mega-nav .sub-menu,
body.soatek-lp-ads .header .soatek-mega-nav .submenu {
    /* Volle Browser-Breite, zentriert */
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-8px) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    /* 2-Spalten-Grid */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
    padding: 70px 80px !important;
    margin: 0 !important;
    background: #3f3d39 !important;
    background-image: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    box-shadow: 0 16px 50px rgba(0,0,0,.4) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease !important;
    z-index: 9990 !important;
    list-style: none !important;
}

/* Headline links — vom JS injiziert */
.soatek-mega-headline {
    grid-column: 1 !important;
    text-align: right !important;
    font-family: var(--f-display);
    font-size: clamp(36px, 4.5vw, 64px);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    align-self: center;
    padding-right: 0;
    user-select: none;
}
.soatek-mega-headline span {
    display: inline-block;
}

/* Items rechts */
body.soatek-lp-ads .header .soatek-mega-nav .sub-menu > li,
body.soatek-lp-ads .header .soatek-mega-nav .submenu > li {
    grid-column: 2 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
/* Falls die Items neben der Headline gerendert werden (Grid füllt zeilenweise),
   sorgen wir dafür dass alle Items rechts stehen, aber als Block-Liste angeordnet */
body.soatek-lp-ads .header .soatek-mega-nav .sub-menu,
body.soatek-lp-ads .header .soatek-mega-nav .submenu {
    grid-auto-flow: row;
}

body.soatek-lp-ads .header .soatek-mega-nav .sub-menu li a,
body.soatek-lp-ads .header .soatek-mega-nav .submenu li a {
    display: block !important;
    text-align: left !important;
    padding: 8px 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: color .15s ease, padding-left .15s ease !important;
    white-space: nowrap;
}
body.soatek-lp-ads .header .soatek-mega-nav .sub-menu li a:hover,
body.soatek-lp-ads .header .soatek-mega-nav .submenu li a:hover {
    color: var(--c-orange) !important;
    background: transparent !important;
    padding-left: 8px !important;
}

/* Hover/Focus zeigt Mega-Menu */
body.soatek-lp-ads .header .soatek-mega-nav > li:hover > .sub-menu,
body.soatek-lp-ads .header .soatek-mega-nav > li:hover > .submenu,
body.soatek-lp-ads .header .soatek-mega-nav > li:focus-within > .sub-menu,
body.soatek-lp-ads .header .soatek-mega-nav > li:focus-within > .submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}


/* ─── MOBILE HEADER: Phone-Icon, CTA, Burger ───────── */

@media (max-width: 980px) {
    body.soatek-lp-ads .header-inner {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    body.soatek-lp-ads .header-logo {
        width: 64px !important;
        height: auto !important;
    }
    body.soatek-lp-ads .header-logo img {
        width: 64px !important;
        height: 64px !important;
    }
    body.soatek-lp-ads .header-top {
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    /* Phone: nur Icon zeigen, Text verstecken */
    body.soatek-lp-ads .header-phone .phone-text {
        display: none !important;
    }
    body.soatek-lp-ads .header-phone {
        width: 40px;
        height: 40px;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,.1);
    }
    body.soatek-lp-ads .header.scrolled .header-phone {
        background: rgba(46,56,65,.08);
    }
    body.soatek-lp-ads .header-phone .icon {
        width: 18px !important;
        height: 18px !important;
    }
    /* CTA-Button kompakter */
    body.soatek-lp-ads .header-cta {
        padding: 9px 16px !important;
        font-size: 13px !important;
    }
    body.soatek-lp-ads .header-cta .icon {
        width: 16px !important;
        height: 16px !important;
    }
    /* Burger zeigen */
    body.soatek-lp-ads .burger {
        display: flex !important;
    }
    /* Desktop-Mega-Nav verstecken */
    body.soatek-lp-ads .header .soatek-mega-nav {
        display: none !important;
    }
    /* Header-Nav rückt nach rechts */
    body.soatek-lp-ads .header-nav {
        gap: 0 !important;
    }
}


/* ─── MOBILE DRAWER (Slide-In von rechts) ────────── */

.soatek-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 88vw;
    background: var(--c-darkblue);
    color: #fff;
    z-index: 99998;
    transform: translateX(100%);
    transition: transform .3s ease;
    padding: 70px 28px 30px;
    overflow-y: auto;
    box-shadow: -8px 0 30px rgba(0,0,0,.3);
}
.soatek-mobile-drawer.open {
    transform: translateX(0);
}
.drawer-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: background .15s ease;
}
.drawer-close:hover { background: rgba(255,255,255,.1); }

.soatek-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99997;
    opacity: 0;
    transition: opacity .25s ease;
}
.soatek-drawer-backdrop.visible { opacity: 1; }

/* Drawer-Nav (vertikale Liste, normales Verhalten) */
.soatek-drawer-nav,
.soatek-mobile-drawer .soatek-drawer-nav,
.soatek-mobile-drawer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
.soatek-drawer-nav > li {
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 0;
}
.soatek-drawer-nav > li > a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
}
.soatek-drawer-nav > li.menu-item-has-children > a::after,
.soatek-drawer-nav > li.has-submenu > a::after {
    content: "›";
    font-size: 22px;
    transition: transform .2s ease;
    color: rgba(255,255,255,.4);
}
.soatek-drawer-nav > li.open > a::after {
    transform: rotate(90deg);
    color: var(--c-orange);
}
.soatek-drawer-nav .sub-menu,
.soatek-drawer-nav .submenu {
    /* Versteckt im default, expand bei .open am Parent */
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 0 12px 12px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: none !important;
    border-top: none !important;
}
.soatek-drawer-nav > li.open .sub-menu,
.soatek-drawer-nav > li.open .submenu {
    display: block !important;
}
.soatek-drawer-nav .sub-menu li a,
.soatek-drawer-nav .submenu li a {
    display: block !important;
    padding: 10px 0 !important;
    color: rgba(255,255,255,.85) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}
.soatek-drawer-nav .sub-menu li a:hover,
.soatek-drawer-nav .submenu li a:hover {
    color: var(--c-orange) !important;
    padding-left: 6px !important;
}
/* Headlines im Drawer ausblenden (passt nicht in dieses Layout) */
.soatek-drawer-nav .soatek-mega-headline { display: none !important; }

/* Drawer-CTA-Bereich unten */
.drawer-cta {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.drawer-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
}
.drawer-phone .icon { width: 20px; height: 20px; color: var(--c-orange); }
.drawer-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--c-orange);
    color: #fff !important;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    transition: background .2s ease;
}
.drawer-cta-btn:hover { background: var(--c-orange-dark); }
.drawer-cta-btn .icon { width: 18px; height: 18px; }


/* ─── Body-Scroll-Lock wenn Drawer offen ──────────── */

body.soatek-drawer-open { overflow: hidden; }


/* Drawer auf Desktop nicht zeigen (sicherheitshalber) */
@media (min-width: 981px) {
    .soatek-mobile-drawer,
    .soatek-drawer-backdrop { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v5
 *
 *  - Mega-Menu Architektur umgestellt:
 *      .sub-menu war direkt im <li> (position: absolute, 100vw-Hack)
 *      → jetzt: .mega-wrap als Container im <li>, enthält
 *        .soatek-mega-headline + .sub-menu (von WP-Menü-Render)
 *
 *  - .mega-wrap wird absolute zum Header positioniert (left:0; right:0)
 *    statt mit 100vw-Hack — funktioniert zuverlässig in jedem Layout.
 *
 *  - Submenu-Items: 1.5em row-gap statt 80px gap (das war row UND column)
 * ═══════════════════════════════════════════════════════════════════ */


/* Header als positioning-Anchor für Mega-Wrap (sollte schon so sein,
   sicherheitshalber explizit setzen) */
body.soatek-lp-ads .header {
    position: relative;
}


/* ─── ALTE .sub-menu-Regeln entkräften (außerhalb von .mega-wrap) ─── */

/* Die v3-Regeln targetieren .soatek-mega-nav .sub-menu direkt.
   Wir verhindern, dass die alten Regeln auf das *neue* Submenu im
   .mega-wrap-Container greifen, indem wir spezifischere Override-Regeln
   für ".mega-wrap .sub-menu" setzen (siehe unten).
   Das alte position:absolute/100vw/etc. wird komplett überschrieben. */


/* ─── NEU: .mega-wrap als Mega-Menu-Container ────────────────────── */

body.soatek-lp-ads .header .soatek-mega-nav > li {
    position: static !important;   /* damit .mega-wrap relativ zum Header positioniert wird */
}

body.soatek-lp-ads .header .mega-wrap {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 80px !important;
    row-gap: 0 !important;
    align-items: center !important;

    padding: 70px 80px !important;
    background: #3f3d39 !important;
    background-image: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    box-shadow: 0 16px 50px rgba(0,0,0,.4) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease !important;
    z-index: 9990 !important;
}

/* Show on Hover/Focus */
body.soatek-lp-ads .header .soatek-mega-nav > li:hover > .mega-wrap,
body.soatek-lp-ads .header .soatek-mega-nav > li:focus-within > .mega-wrap {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Hover-Bridge — Mauszeiger soll Submenu erreichen können */
body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    z-index: 9989;
}


/* ─── Headline (links in Spalte 1) ───────────────────────────────── */

body.soatek-lp-ads .header .mega-wrap .soatek-mega-headline {
    grid-column: 1 !important;
    grid-row: 1 !important;
    text-align: right !important;
    font-family: var(--f-display);
    font-size: clamp(36px, 4.5vw, 60px);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    align-self: center;
    user-select: none;
}
body.soatek-lp-ads .header .mega-wrap .soatek-mega-headline span {
    display: inline-block;
}


/* ─── Submenu-Liste (rechts in Spalte 2) ─────────────────────────── */

body.soatek-lp-ads .header .mega-wrap .sub-menu,
body.soatek-lp-ads .header .mega-wrap ul.sub-menu {
    /* Override aller alten position-absolute / 100vw / opacity-Regeln */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: auto !important;

    /* Eigentliches Layout */
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5em !important;
    align-self: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

body.soatek-lp-ads .header .mega-wrap .sub-menu li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    grid-column: auto !important;  /* override v3-Regel "grid-column: 2" */
}

body.soatek-lp-ads .header .mega-wrap .sub-menu li a {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-align: left !important;
    white-space: nowrap;
    transition: color .15s ease, transform .15s ease !important;
}
body.soatek-lp-ads .header .mega-wrap .sub-menu li a:hover,
body.soatek-lp-ads .header .mega-wrap .sub-menu li a:focus-visible {
    color: var(--c-orange) !important;
    background: transparent !important;
    padding: 0 !important;
    transform: translateX(6px) !important;
}


/* ─── Mobile: Mega-Wraps natürlich aus ───────────────────────────── */

@media (max-width: 980px) {
    body.soatek-lp-ads .header .mega-wrap {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v6
 *
 *  Punkt 1 — Header:
 *   - Sticky-Header ENTFERNT (position: relative, scrollt mit)
 *   - Hauptmenü-Schriftgröße ~3× aktueller Größe
 *   - Hamburger-Icon auch auf Desktop sichtbar
 *
 *  Punkt 2 — Mega-Wrap:
 *   - Wirklich volle Browser-Breite (alle Vorfahren auf static gezwungen)
 *   - Sub-menu-Items linksbündig (align-items: flex-start)
 *
 *  Punkt 3 — Float-CTA:
 *   - 50×50px (vorher 56×56px)
 *   - right: 17px (vorher 20px)
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. HEADER: nicht mehr sticky ────────────────────────────── */

body.soatek-lp-ads .header {
    position: relative !important;
    top: auto !important;
    /* falls noch position: sticky/fixed irgendwo: aus */
}


/* ─── 2. MEGA-WRAP volle Breite — Vorfahren entgiften ─────────
   Alle Container zwischen <header> und .mega-wrap müssen static sein,
   sonst landet absolute auf dem falschen Positionierungs-Container.
   ─────────────────────────────────────────────────────────────── */

body.soatek-lp-ads .header-inner,
body.soatek-lp-ads .header-right,
body.soatek-lp-ads .header-nav,
body.soatek-lp-ads .header .soatek-mega-nav,
body.soatek-lp-ads .header .soatek-mega-nav > li {
    position: static !important;
}

/* .mega-wrap selbst absolute zum <header> = volle Browser-Breite */
body.soatek-lp-ads .header .mega-wrap {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}


/* ─── 3. HAUPTMENÜ Font-Size +300% ──────────────────────────── */

body.soatek-lp-ads .header .soatek-mega-nav > li > a {
    font-size: 2.85rem !important;   /* von ~0.95rem auf ~46px (≈ +300%) */
    font-weight: 600 !important;
    padding: 14px 0 !important;
    line-height: 1.1 !important;
}

/* Wenn dir 46px zu groß ist: einfach .85rem auf z.B. 2rem (=32px) oder
   1.6rem (=26px) ändern. Eine zentrale Stelle, der Rest bleibt. */


/* ─── 4. HAMBURGER auch auf Desktop sichtbar ─────────────────── */

.burger {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 24px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-left: 24px;
}
.burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, background .3s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* Im scrolled-State (falls jemand noch nach .scrolled hovert): dunkle Striche */
body.soatek-lp-ads .header.scrolled .burger span { background: var(--c-darkblue) !important; }


/* ─── 5. SUB-MENU Items linksbündig + größere Schrift ────────── */

body.soatek-lp-ads .header .mega-wrap .sub-menu {
    align-items: flex-start !important;   /* Items linksbündig im Flex-Container */
    width: max-content !important;        /* schmal, nicht stretchen */
}

body.soatek-lp-ads .header .mega-wrap .sub-menu li {
    width: auto !important;
}
body.soatek-lp-ads .header .mega-wrap .sub-menu li a {
    display: inline-block !important;
    width: auto !important;
    text-align: left !important;
}


/* ─── 6. FLOAT-CTA Single-Button: 50px, right 17px ───────────── */

a.float-cta-single,
.float-cta.float-cta-single {
    width: 50px !important;
    height: 50px !important;
    right: 17px !important;
    /* bottom bleibt 90px (Onetap-Abstand) — falls anders gewünscht hier anpassen */
}
.float-cta-single .icon,
.float-cta-single svg {
    width: 22px !important;
    height: 22px !important;
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v7
 *
 *  Korrekturen zum v6-Patch:
 *   - Sticky-Header WIEDER aktiviert (war v6-Korrektur, jetzt zurück)
 *   - Hauptmenü-Schrift mit absoluten Pixel-Werten + extra-spezifischen
 *     Selektoren (vorherige rem-Werte wurden offenbar überschrieben)
 *   - Drawer auf Desktop sichtbar (in v4 stand display:none ab 981px)
 *   - Drawer-Look: hell, dunkle Schrift wie Brizy-Mockup
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. STICKY-HEADER WIEDER AKTIVIEREN ───────────────────────── */

body.soatek-lp-ads .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9000 !important;
}


/* ─── 2. HAUPTMENÜ-SCHRIFTGRÖSSE: absolute px + extra-spezifisch ── */

/* Setzt font-size mit absoluten px (kein rem/em -> keine Inheritance-Issues)
   und über mehrere Selektor-Varianten gleichzeitig, sodass keine
   Original-Regel mehr gewinnen kann. */

body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li > a,
body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li.menu-item > a,
body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li.menu-item-has-children > a,
body.soatek-lp-ads .header .header-nav ul.soatek-mega-nav > li > a,
body.soatek-lp-ads .header-nav .soatek-mega-nav > li > a {
    font-size: 32px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    padding: 18px 0 !important;
    letter-spacing: -0.01em !important;
}

/* Falls ein <span> im <a> die Größe definiert (manche WP-Walker tun das) */
body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li > a span,
body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li > a > * {
    font-size: inherit !important;
    line-height: inherit !important;
}


/* ─── 3. DRAWER auf Desktop SICHTBAR machen ────────────────────── */

/* v4-Patch hatte: @media (min-width: 981px) { .soatek-mobile-drawer { display: none !important; } }
   Das überschreiben wir hier: */

@media (min-width: 981px) {
    body.soatek-lp-ads .soatek-mobile-drawer {
        display: block !important;
    }
    body.soatek-lp-ads .soatek-drawer-backdrop {
        display: block !important;
    }
}

/* Default-Zustand bleibt: translateX(100%) → off-screen rechts.
   JS toggled .open → translateX(0) → sichtbar. */


/* ─── 4. DRAWER-LOOK: hell, dunkle Schrift (Brizy-Stil) ───────── */

body.soatek-lp-ads .soatek-mobile-drawer {
    width: clamp(320px, 32vw, 500px) !important;
    max-width: 90vw !important;
    background: #f5f5f3 !important;
    color: var(--c-darkblue) !important;
    box-shadow: -16px 0 40px rgba(0,0,0,.18) !important;
    padding: 80px 40px 40px !important;
}

/* Close-Button: dunkel */
body.soatek-lp-ads .soatek-mobile-drawer .drawer-close {
    color: var(--c-darkblue) !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 36px !important;
    top: 18px !important;
    right: 22px !important;
}
body.soatek-lp-ads .soatek-mobile-drawer .drawer-close:hover {
    background: rgba(46,56,65,.06) !important;
}

/* Nav-Items: dunkel, groß, fett */
body.soatek-lp-ads .soatek-drawer-nav > li {
    border-bottom: none !important;
    padding: 0 !important;
}
body.soatek-lp-ads .soatek-drawer-nav > li > a {
    color: var(--c-darkblue) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    padding: 14px 0 !important;
    background: transparent !important;
}
body.soatek-lp-ads .soatek-drawer-nav > li > a:hover {
    color: var(--c-orange) !important;
}

/* Aktive Seite orange */
body.soatek-lp-ads .soatek-drawer-nav > li.current-menu-item > a,
body.soatek-lp-ads .soatek-drawer-nav > li.current-menu-parent > a,
body.soatek-lp-ads .soatek-drawer-nav > li.current-menu-ancestor > a {
    color: var(--c-orange) !important;
}

/* Caret rechts: dunkel auf hell */
body.soatek-lp-ads .soatek-drawer-nav > li.menu-item-has-children > a::after,
body.soatek-lp-ads .soatek-drawer-nav > li.has-submenu > a::after {
    color: rgba(46,56,65,.5) !important;
}
body.soatek-lp-ads .soatek-drawer-nav > li.open > a::after {
    color: var(--c-orange) !important;
}

/* Sub-Menüs im Drawer */
body.soatek-lp-ads .soatek-drawer-nav .sub-menu,
body.soatek-lp-ads .soatek-drawer-nav .submenu {
    background: transparent !important;
    padding: 0 0 12px 16px !important;
}
body.soatek-lp-ads .soatek-drawer-nav .sub-menu li a,
body.soatek-lp-ads .soatek-drawer-nav .submenu li a {
    color: rgba(46,56,65,.75) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    padding: 8px 0 !important;
}
body.soatek-lp-ads .soatek-drawer-nav .sub-menu li a:hover,
body.soatek-lp-ads .soatek-drawer-nav .submenu li a:hover {
    color: var(--c-orange) !important;
}

/* CTA-Block unten im Drawer */
body.soatek-lp-ads .soatek-mobile-drawer .drawer-cta {
    border-top: 1px solid rgba(46,56,65,.12) !important;
    margin-top: 36px !important;
    padding-top: 28px !important;
}
body.soatek-lp-ads .soatek-mobile-drawer .drawer-phone {
    color: var(--c-darkblue) !important;
    font-size: 18px !important;
}
body.soatek-lp-ads .soatek-mobile-drawer .drawer-phone .icon {
    color: var(--c-orange) !important;
    stroke: var(--c-orange) !important;
}

/* Backdrop bleibt dunkel */
body.soatek-lp-ads .soatek-drawer-backdrop {
    background: rgba(0,0,0,.4) !important;
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v8
 *
 *  KRITISCHER BUG-FIX:
 *   - Drawer-Backdrop blockierte alle Header-Klicks
 *     (display:block !important + position:fixed inset:0 + pointer-events:auto)
 *
 *  Zusätzlich:
 *   - Submenu-Carets (▾) entfernt
 *   - Hauptmenü-Font auf 20px (vorher 32px war zu groß)
 *   - Sticky-Button bottom 80px (vorher 90px, 10px näher zum unteren Rand)
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. BACKDROP: nur klick-fangend wenn .visible ──────────────── */

body.soatek-lp-ads .soatek-drawer-backdrop {
    pointer-events: none !important;
}
body.soatek-lp-ads .soatek-drawer-backdrop.visible {
    pointer-events: auto !important;
}

/* Mega-Wrap sicherheitshalber auch verstärken — default 100% klick-tot */
body.soatek-lp-ads .header .mega-wrap {
    pointer-events: none !important;
}
body.soatek-lp-ads .header .soatek-mega-nav > li:hover > .mega-wrap,
body.soatek-lp-ads .header .soatek-mega-nav > li:focus-within > .mega-wrap {
    pointer-events: auto !important;
}

/* Hover-Bridge ::before darf auch keine Klicks abfangen */
body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children::before {
    pointer-events: none !important;
}


/* ─── 2. SUBMENU-CARETS (▾) ENTFERNEN ──────────────────────────── */

body.soatek-lp-ads .header .soatek-mega-nav > li > a::after,
body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children > a::after,
body.soatek-lp-ads .header .soatek-mega-nav > li.has-submenu > a::after {
    content: none !important;
    display: none !important;
}


/* ─── 3. HAUPTMENÜ-FONT 20px ──────────────────────────────────── */

body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li > a,
body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li.menu-item > a,
body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li.menu-item-has-children > a,
body.soatek-lp-ads .header .header-nav ul.soatek-mega-nav > li > a,
body.soatek-lp-ads .header-nav .soatek-mega-nav > li > a {
    font-size: 20px !important;
    font-weight: 600 !important;
    padding: 14px 0 !important;
    line-height: 1.2 !important;
}


/* ─── 4. STICKY-BUTTON 10px näher zum unteren Rand ────────────── */

a.float-cta-single,
.float-cta.float-cta-single {
    bottom: 80px !important;   /* vorher 90px */
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v9
 *
 *  - Hover-Bridge (::before) ENTFERNT
 *    Verursachte Hover-Sprung zu "Kontakt", weil alle drei ::before
 *    übereinander im selben 12px-Streifen lagen (position absolute zum
 *    Header, da <li> static). Bridge nicht nötig, da Mega-Wrap direkt
 *    bei top: 100% des Headers ansetzt — kein Gap.
 *
 *  - Mega-Wrap halbtransparent (Brizy-Stil)
 *    background: rgba(63, 61, 57, 0.7) + backdrop-filter blur
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. HOVER-BRIDGE WEG ─────────────────────────────────────── */

body.soatek-lp-ads .header .soatek-mega-nav > li::before,
body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children::before,
body.soatek-lp-ads .header .soatek-mega-nav > li.has-submenu::before {
    content: none !important;
    display: none !important;
}


/* ─── 2. MEGA-WRAP HALBTRANSPARENT ────────────────────────────── */

body.soatek-lp-ads .header .mega-wrap {
    background: rgba(63, 61, 57, 0.7) !important;
    background-image: none !important;

    /* Frosted-Glass-Effekt (wo unterstützt) */
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* Falls die Lesbarkeit auf transparentem BG leidet — leichter Text-Schatten */
body.soatek-lp-ads .header .mega-wrap .soatek-mega-headline,
body.soatek-lp-ads .header .mega-wrap .sub-menu li a {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v10
 *
 *  - Mega-Menu Hover über JS-Klasse .is-mega-open statt CSS :hover
 *    (verhindert Hover-Sprung über Hover-Gaps)
 *  - Submenu-Items: gap 1.2em (vorher 1.5em, -20%)
 *  - Logo Default: 220×220px, ohne border-radius
 *  - Logo Scrolled: rechteckige Variante, ohne Box, ohne Shadow
 *  - Sticky-Header ohne Box-Shadow im Scrolled (sauberer Look)
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. MEGA-MENU HOVER: über .is-mega-open Klasse ────────────── */

/* v5's :hover-Aktivierung neutralisieren — JS übernimmt jetzt */
body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:hover > .mega-wrap {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
}

/* .is-mega-open zeigt das Mega-Menu (vom JS gesetzt) */
body.soatek-lp-ads .header .soatek-mega-nav > li.is-mega-open > .mega-wrap,
body.soatek-lp-ads .header .soatek-mega-nav > li:focus-within > .mega-wrap {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}


/* ─── 2. SUBMENU-ITEMS: gap 1.2em (vorher 1.5em) ───────────────── */

body.soatek-lp-ads .header .mega-wrap .sub-menu {
    gap: 1.2em !important;
}


/* ─── 3. LOGO Default: 220×220, ohne Radius ────────────────────── */

body.soatek-lp-ads .header-logo {
    width: 220px !important;
    height: 220px !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: -50px !important;   /* hängt unten leicht über (Brizy-Stil) */
    overflow: visible !important;
    background: #fff;
}
body.soatek-lp-ads .header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Logo-Switch zwischen default und scrolled */
body.soatek-lp-ads .header-logo .logo-default { display: block; }
body.soatek-lp-ads .header-logo .logo-scrolled { display: none; }


/* ─── 4. SCROLLED-STATE: rechteckiges Logo, keine Box, kein Shadow ── */

body.soatek-lp-ads .header.scrolled {
    box-shadow: none !important;       /* kein box-shadow am Header */
}

body.soatek-lp-ads .header.scrolled .header-logo {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.soatek-lp-ads .header.scrolled .header-logo .logo-default {
    display: none !important;
}
body.soatek-lp-ads .header.scrolled .header-logo .logo-scrolled {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: 56px !important;
    object-fit: contain !important;
}


/* ─── 5. Schutz: hover-bridge bleibt aus (sicherheitshalber) ───── */

body.soatek-lp-ads .header .soatek-mega-nav > li::before {
    content: none !important;
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v11
 *
 *  Vereinfachung — JS-Hover war zu kompliziert (flackerte):
 *   - Pure CSS :hover (kein JS für Mega-Menu mehr)
 *   - Hover-Gap-Bridge via padding-bottom auf <a> (reicht hover-area
 *     bis zum Mega-Wrap, kein Sprung mehr)
 *
 *  Header-Diät:
 *   - header-inner: kein vertikales padding
 *   - Logo 5% kleiner (210×210), oben bündig
 *   - header-right: weniger gap, weniger padding
 *   - Hauptmenü-li: padding-top reduziert, padding-bottom als Bridge
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. CSS :HOVER WIEDER NORMAL (v10-Override neutralisieren) ── */

body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:hover > .mega-wrap,
body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:focus-within > .mega-wrap {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}


/* ─── 2. HOVER-BRIDGE via <a> padding-bottom ─────────────────────── */

/* Das `<a>` reicht 18px nach unten — Hover bleibt aktiv solange Maus
   in diesem Bereich ist. Mega-Wrap startet bei a.bottom (=header.bottom
   wenn header-inner padding-bottom: 0). Kein Gap, kein Hover-Sprung. */

body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li > a,
body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li.menu-item > a,
body.soatek-lp-ads .header .header-nav .soatek-mega-nav > li.menu-item-has-children > a,
body.soatek-lp-ads .header-nav .soatek-mega-nav > li > a {
    padding: 8px 0 18px 0 !important;
}


/* ─── 3. HEADER-DIÄT — kompakt wie Brizy-Hauptseite ─────────────── */

/* header-inner: nur horizontales padding, sodass Logo oben bündig sitzt
   und li.bottom = header.bottom (kein Gap zum Mega-Wrap) */
body.soatek-lp-ads .header-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: flex-start !important;
}

/* Logo: 5% kleiner, oben bündig, hängt nach unten über
   (margin-bottom negativ macht den Header höhenmäßig wieder kompakt) */
body.soatek-lp-ads .header-logo {
    width: 210px !important;
    height: 210px !important;
    margin-top: 0 !important;
    margin-bottom: -130px !important;   /* Header bleibt ~80px hoch */
    border-radius: 0 !important;
    align-self: flex-start !important;
    overflow: visible !important;
}

/* Header-Right: kompakter, kein Gap zwischen Top und Nav */
body.soatek-lp-ads .header-right {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
    gap: 4px !important;
}

/* Header-Top (Phone + CTA): kein extra padding */
body.soatek-lp-ads .header-top {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Header-Nav (Hauptmenü-Items): kein extra padding */
body.soatek-lp-ads .header-nav {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}


/* ─── 4. .is-mega-open Klasse darf nicht stören ──────────────────── */

/* Falls noch alter JS lädt — wir nutzen die Klasse nicht mehr,
   aber zumindest soll sie auch das Mega-Menu sichtbar halten. */
body.soatek-lp-ads .header .soatek-mega-nav > li.is-mega-open > .mega-wrap {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v12
 *
 *  1) Hero-Section bekommt 100px Padding nach oben
 *  2) Mega-Wrap Click-Fix mit DREIFACHER Sicherheit:
 *     a) Ultra-spezifische CSS (html-prefix für höchste Spezifität)
 *     b) Sub-Menu-Items mit position: relative + z-index (eigener
 *        Stacking-Context, damit nichts sie überlagert)
 *     c) Plus JS-Click-Fallback in lp.js
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. HERO PADDING ──────────────────────────────────────────── */

body.soatek-lp-ads .hero,
body.soatek-lp-ads section.hero,
body.soatek-lp-ads .hero-section {
    padding-top: 100px !important;
}


/* ─── 2a. MEGA-WRAP: ultra-spezifische Click-Garantie ─────────── */

/* `html body.soatek-lp-ads...` hat Spezifität (0,6,3) — höher als alle
   bisherigen Overrides (max 0,6,2). Garantiert: bei Hover ist mega-wrap
   visible UND klickbar. */

html body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:hover > div.mega-wrap,
html body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:focus-within > div.mega-wrap {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 9990 !important;
}


/* ─── 2b. SUB-MENU-ITEMS: eigener Stacking-Context ────────────── */

/* Mit position: relative + z-index bekommen die Items eigenen Stacking-
   Context. Kein anderes Element kann sie überlagern oder Klicks abfangen. */

html body.soatek-lp-ads .header .mega-wrap .sub-menu,
html body.soatek-lp-ads .header .mega-wrap .sub-menu > li,
html body.soatek-lp-ads .header .mega-wrap .sub-menu > li > a {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: auto !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* Headline darf nicht hover/click abfangen */
html body.soatek-lp-ads .header .mega-wrap .soatek-mega-headline {
    pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v13 — BUG-FIX (saubere Lösung)
 *
 *  Diagnose: v5 hatte `visibility: visible !important; pointer-events: auto !important`
 *  auf .sub-menu hardcoded. Das überschreibt das vom Vorfahren (.mega-wrap)
 *  geerbte visibility: hidden. Resultat: alle drei mega-wraps waren klickbar,
 *  egal ob "aktiv" oder nicht. Last-DOM = Kontakt fängt alle Klicks ab.
 *
 *  Fix: display: none auf inaktive mega-wraps. display:none ist absolut
 *  und kann von Descendants nicht überschrieben werden.
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. Mega-Wrap: display none default, display grid bei hover ── */

html body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children > .mega-wrap {
    display: none !important;
}

html body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:hover > .mega-wrap,
html body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:focus-within > .mega-wrap {
    display: grid !important;
    /* Diese Properties auch hier, falls v10's :hover-Override sie wieder versteckt */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}


/* ─── 2. Sub-Menu: keine eigene visibility/pointer-events mehr ──── */

/* v5 hatte hier visibility: visible !important — das war der Bug.
   Jetzt erbt die sub-menu wieder normal vom mega-wrap. */

html body.soatek-lp-ads .header .mega-wrap .sub-menu,
html body.soatek-lp-ads .header .mega-wrap ul.sub-menu,
html body.soatek-lp-ads .header .mega-wrap .sub-menu > li,
html body.soatek-lp-ads .header .mega-wrap .sub-menu > li > a {
    visibility: inherit !important;
    pointer-events: inherit !important;
}

/* Aber wenn mega-wrap aktiv (display:grid), dann sub-menu items voll klickbar */
html body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:hover > .mega-wrap .sub-menu > li > a,
html body.soatek-lp-ads .header .soatek-mega-nav > li.menu-item-has-children:focus-within > .mega-wrap .sub-menu > li > a {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v14 — Feinschliff
 *
 *  - Hauptmenü-Items: horizontaler Abstand 2,5× (28px → 70px)
 *  - Hero-Section padding-top: +50px (100px → 150px)
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. HAUPTMENÜ: gap × 2,5 ───────────────────────────────────── */

body.soatek-lp-ads .header .soatek-mega-nav,
body.soatek-lp-ads .header ul.soatek-mega-nav {
    gap: 70px !important;
    column-gap: 70px !important;
}


/* ─── 2. HERO: padding-top auf 150px ────────────────────────────── */

body.soatek-lp-ads .hero,
body.soatek-lp-ads section.hero,
body.soatek-lp-ads .hero-section {
    padding-top: 150px !important;
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v15 — Sektion-Layouts erzwingen
 *
 *  Falls Twenty-Twenty-One oder andere CSS-Quellen die Mockup-Layouts
 *  überschreiben: hier mit !important + html-Prefix nageln.
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. Vier Gründe: 4 Spalten horizontal ──────────────────────── */

html body.soatek-lp-ads .benefits-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
}
@media (max-width: 980px) {
    html body.soatek-lp-ads .benefits-4 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}


/* ─── 2. B2B-Referenzen: 3 Karten mit Bild ──────────────────────── */

html body.soatek-lp-ads .b2b-refs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
}
@media (max-width: 980px) {
    html body.soatek-lp-ads .b2b-refs {
        grid-template-columns: 1fr !important;
    }
}

/* Bild-Container muss als background-image rendern */
html body.soatek-lp-ads .b2b-ref-img {
    height: 200px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
}
html body.soatek-lp-ads .b2b-ref-img .branche-tag {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: var(--c-darkblue) !important;
    color: var(--c-white) !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}

/* 3 Stats nebeneinander */
html body.soatek-lp-ads .b2b-ref-stats {
    display: flex !important;
    gap: 24px !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--c-gray-100) !important;
    border-bottom: 1px solid var(--c-gray-100) !important;
}
html body.soatek-lp-ads .b2b-ref-stats .stat {
    flex: 1 !important;
}


/* ─── 3. Ablauf-Timeline: 5 Schritte horizontal ──────────────────── */

html body.soatek-lp-ads .timeline {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 24px !important;
    position: relative !important;
}
html body.soatek-lp-ads .timeline::before {
    content: "" !important;
    position: absolute !important;
    top: 36px !important;
    left: 6% !important;
    right: 6% !important;
    height: 2px !important;
    background: var(--c-gray-100) !important;
    z-index: 0 !important;
}
html body.soatek-lp-ads .tl-step {
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
}
html body.soatek-lp-ads .tl-step .num {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 20px !important;
    background: var(--c-orange) !important;
    color: var(--c-white) !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-family: var(--f-display) !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    border: 6px solid var(--c-white) !important;
    box-shadow: 0 6px 18px rgba(236, 121, 44, 0.3) !important;
}
@media (max-width: 980px) {
    html body.soatek-lp-ads .timeline {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    html body.soatek-lp-ads .timeline::before {
        display: none !important;
    }
}


/* ─── 4. FAQ: Mockup-Stil sicherstellen ──────────────────────────── */

html body.soatek-lp-ads .faq-list {
    max-width: 820px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
html body.soatek-lp-ads .faq-item {
    background: var(--c-white) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--c-gray-100) !important;
    overflow: hidden !important;
}


/* ═══════════════════════════════════════════════════════════════════
 *  UPDATE 2026-06-12 v21 — Refs-Cards Polish + Timeline-Linie
 * ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. B2B-Ref als Card mit Schatten und Rundung ──────────────── */

html body.soatek-lp-ads .b2b-ref {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
}


/* ─── 2. Bild mit fester Höhe, Branche-Tag-Pill ─────────────────── */

html body.soatek-lp-ads .b2b-ref-img {
    height: 200px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
}
html body.soatek-lp-ads .b2b-ref-img .branche-tag {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: var(--c-darkblue, #2e3841) !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}


/* ─── 3. Card-Body — Padding und Typo ───────────────────────────── */

html body.soatek-lp-ads .b2b-ref-body {
    padding: 24px 26px 28px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
html body.soatek-lp-ads .b2b-ref-body h4 {
    font-size: 1.15rem !important;
    color: var(--c-darkblue, #2e3841) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
html body.soatek-lp-ads .b2b-ref-body > p {
    font-size: 0.92rem !important;
    color: #555555 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}


/* ─── 4. Stats-Row — 3 separate KPIs mit großen Zahlen ──────────── */

html body.soatek-lp-ads .b2b-ref-stats {
    display: flex !important;
    gap: 24px !important;
    padding: 14px 0 !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: 1px solid #eeeeee !important;
    margin: 0 !important;
}
html body.soatek-lp-ads .b2b-ref-stats .stat {
    flex: 1 !important;
    text-align: left !important;
    background: transparent !important;
}

/* WICHTIG: explizit Timeline-Circle-Style zurücksetzen, falls .num bleed */
html body.soatek-lp-ads .b2b-ref-stats .stat .num {
    display: block !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
    color: var(--c-orange, #ec792c) !important;
    line-height: 1 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    place-items: initial !important;
}
html body.soatek-lp-ads .b2b-ref-stats .stat .lbl {
    display: block !important;
    font-size: 0.78rem !important;
    color: #777777 !important;
    margin-top: 4px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}


/* ─── 5. Timeline — sichtbare horizontale Verbindungslinie ──────── */

html body.soatek-lp-ads .timeline {
    position: relative !important;
}
html body.soatek-lp-ads .timeline::before {
    content: "" !important;
    position: absolute !important;
    top: 36px !important;
    left: 6% !important;
    right: 6% !important;
    height: 2px !important;
    background: #d4d4d4 !important;
    z-index: 0 !important;
    display: block !important;
}
@media (max-width: 980px) {
    html body.soatek-lp-ads .timeline::before {
        display: none !important;
    }
}