/*======================================================================
RAKanzlei – v4 Mietrecht (mobile first, nur für template-v4.php)
====================================================================== */

/* 0) Sicherheitsnetz & WPBakery Neutralisierung (Mobile Overflow Fix) */
/* ALTEN Block mit "body.page-template-template-v4 html" löschen und DIESEN verwenden */
html,
body.page-template-template-v4 {
  overflow-x: hidden !important;
  box-sizing: border-box;
}

body.page-template-template-v4 *,
body.page-template-template-v4 *::before,
body.page-template-template-v4 *::after {
  box-sizing: inherit;
}



/* Hero Positionierung (Mobile/Default) - Fixiert den Start unter dem Sticky Header */
body.page-template-template-v4 .hero:first-child { 
    /* Margin = Variable Header-Höhe + 8px Puffer */
    margin-top: calc(var(--v4-header-d)) !important;
}

/* Theme-Padding und WPBakery-Margins/Paddings neutralisieren */
body.page-template-template-v4 .page_content_wrap,
body.page-template-template-v4 .content_wrap,
body.page-template-template-v4 .content_wrap > .content,
body.page-template-template-v4 .content_wrap > .sidebar { padding: 0 !important; margin: 0 !important; }
body.page-template-template-v4 .vc_row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
body.page-template-template-v4 .vc_column_container, body.page-template-template-v4 .vc_column_container > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
body.page-template-template-v4 .wpb_content_element { margin-bottom: 0 !important; }

/* 1) v4 Tokens & Grundtypografie – nur für v4-Seiten */
body.page-template-template-v4 {
  /* Design Tokens */
  --color-primary:#b5007c; /* Kanzlei CI */
  --color-dark:#202a44;
  --color-text:#535b7c;
  --color-border:#cfd3dc;
  --color-light-bg:#f8f9fb;

  --radius:12px;
  --shadow:0 2px 8px rgba(0,0,0,.06);

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --max-text: 880px;
  --hero-image:none;
    
/* CTA – Steuerung */
--cta-align: center;
--cta-maxw: 720px;
--cta-buttons-dir: row;
--cta-buttons-justify: center;
--cta-buttons-gap: var(--s2);
    
/* FIX: Rhythmus-Variablen (Mobile First) */
  --flow: var(--s3); /* 24px: Vertikale Abstände zwischen Boxen */
  --pad: var(--s3);  /* 24px: Innenabstand in Boxen */

/* Primärfarbe als RGB für Schatten etc. (Default: Kanzlei-Magenta) */
  --color-primary-rgb: 181, 0, 124;

  /* Buttons – Default (werden von Themen-Bereichen überschrieben können) */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: #fff;
  --btn-primary-border: var(--color-primary);
  --btn-primary-hover-bg: var(--color-primary);   /* keine Aufhellung */
  --btn-primary-hover-text: #fff;
  --btn-primary-hover-border: var(--color-primary);
  --btn-primary-shadow: 0 2px 8px rgba(0,0,0,.15);
  --btn-primary-hover-shadow: 0 4px 14px rgba(0,0,0,.22);

  --btn-secondary-bg: #fff;
  --btn-secondary-text: var(--color-dark);
  --btn-secondary-border: var(--color-border);

  --btn-secondary-hover-bg: var(--color-primary);
  --btn-secondary-hover-text: #fff;
  --btn-secondary-hover-border: var(--color-primary);

  --btn-secondary-shadow: 0 2px 8px rgba(0,0,0,.10);
  --btn-secondary-hover-shadow: 0 4px 12px rgba(0,0,0,.18);}

/* Typo Basis */
body.page-template-template-v4 {
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--color-text);
  line-height:1.6;
}
body.page-template-template-v4 h1,
body.page-template-template-v4 h2,
body.page-template-template-v4 h3 {
  font-family:'Montserrat',sans-serif;
  color:var(--color-dark);
}

/* Typografie – Mobile First, konsolidierte Hierarchie (inkl. Margins, KORRIGIERT) */
body.page-template-template-v4 { font-size: 15px; line-height: 1.6; }
body.page-template-template-v4 h1 {
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 var(--s2); /* Oben 0, unten 16px */
}
body.page-template-template-v4 h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 var(--s1); /* Oben 0, unten 8px */
}
body.page-template-template-v4 h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 0 0 var(--s1); /* Oben 0, unten 8px */
}

@media (min-width: 769px) {
  body.page-template-template-v4 { font-size: 16px; }
  body.page-template-template-v4 h1 { font-size: 30px; }
  body.page-template-template-v4 h2 { font-size: 24px; }
  body.page-template-template-v4 h3 { font-size: 20px; }
}
@media (min-width: 1101px) {
  body.page-template-template-v4 { font-size: 17px; }
  body.page-template-template-v4 h1 { font-size: 34px; }
  body.page-template-template-v4 h2 { font-size: 26px; }
  body.page-template-template-v4 h3 { font-size: 22px; }
}

/* Variable Header Height Definition (Nutzung f. Hero Margin-Top) */
body.page-template-template-v4 {
    --v4-header-d: 1px; /* Mobile Standard-Höhe (geschätzt) */
}
@media (min-width: 769px) {
    body.page-template-template-v4 {
        --v4-header-d: 42.25px; /* Desktop/Tablet Höhe (gemessen) */
    }
}


/* ============================================================
   v4 LINKS – BASIS
   - Gilt für alle Mietrechts-v4-Seiten im Inhaltsbereich (.page_content_wrap)
   - Normale Textlinks orientieren sich an --color-primary
   - Buttons (.btn / .btn-primary) sind bewusst ausgeschlossen
   ============================================================ */

/* 2) Layout & Wrap – EINHEITLICH */
body.page-template-template-v4 .wrap {
  width: min(1240px, 92vw);
  margin: 0 auto !important;
  box-sizing: border-box;
  padding-inline: 20px;
}

@media (min-width: 769px){
  body.page-template-template-v4 .wrap {
    padding-inline: 24px;
  }
}

@media (min-width: 1101px){
  body.page-template-template-v4 .wrap {
    padding-inline: 32px;
  }
}
/* === v4 – Basis-Linkstil im Inhaltsbereich (alle v4-Seiten) === */
body.page-template-template-v4 .page_content_wrap a:not(.btn):not(.btn-primary) {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

body.page-template-template-v4 .page_content_wrap a:not(.btn):not(.btn-primary):hover {
  color: var(--color-dark);
}

/* v4 alignment pass: headings */
body.page-template-template-v4 h1,
body.page-template-template-v4 h2,
body.page-template-template-v4 h3,
body.page-template-template-v4 h4 { text-align: left; }

body.page-template-template-v4 .hero h1 {
  text-align: center;
  max-width: 20ch;
  margin: 0 auto;
}

/* Ab Tablet: kompletter Hero-Textblock linksbündig */
@media (min-width: 769px) {
  body.page-template-template-v4 .hero h1 {
    text-align: left;
    max-width: none;
    margin: 0;
  }

  body.page-template-template-v4 .hero .panel {
    text-align: left;
    align-items: flex-start;
  }
}

body.page-template-template-v4 .stack > * + * { 
    margin-top:var(--s3); 
}
body.page-template-template-v4 .stack-4 > * + * { 
    margin-top:var(--s4); 
}

/* 2a) Standard-Abstand zwischen aufeinanderfolgenden Boxen (FINALE ERZWINGUNG) */

/* Erzwingt den Abstand FÜR ALLE Element, die auf ein vorheriges Element folgen,
   wenn sie im äußeren .wrap sitzen und die Modul-Klassen haben.
   Dies schließt den Abstand Hero -> Related, Related -> Card etc. */
body.page-template-template-v4 .wrap.stack-4 > .card + .card,
body.page-template-template-v4 .wrap.stack-4 > .card + .prose,
body.page-template-template-v4 .wrap.stack-4 > .prose + .card,
body.page-template-template-v4 .wrap.stack-4 > .related + .card,
body.page-template-template-v4 .wrap.stack-4 > .hero + .related, /* HÖCHSTE PRIORITÄT FÜR HERO -> RELATED */
body.page-template-template-v4 .wrap.stack-4 > * + * { /* GENERAL FALLBACK für alle folgenden Elemente */
  margin-top: var(--flow) !important;
}

/* Speziell: HERO + RELATED (damit es garantiert greift, falls der obere Block nicht reicht) */
body.page-template-template-v4 .hero + .related {
    margin-top: var(--flow) !important;
}

/* Globale Variablen für Hero-Abstände (Mobile First) */
body.page-template-template-v4 {
  --hero-y: clamp(24px, 5vh, 40px);
  --hero-pos: 40%;
}

@media (min-width: 769px) {
  body.page-template-template-v4 {
    --hero-y: clamp(40px, 7vh, 64px);
  }
}

@media (min-width: 1280px) {
  body.page-template-template-v4 {
    --hero-y: clamp(56px, 9vh, 96px);
  }
}
@media (min-width: 769px) { body.page-template-template-v4 { --hero-pos: 36%; } }
@media (min-width: 1101px) { body.page-template-template-v4 { --hero-pos: 34%; } }

/* A) .hero Container: Layout und Hintergrund (Farbverlauf KORRIGIERT) */
body.page-template-template-v4 .hero {
  margin: 0 !important; 
  margin-bottom: var(--flow) !important; 
  padding-top: var(--hero-y) !important;
  padding-bottom: var(--hero-y) !important;

  /* Verhindert Margin-Collapse mit dem folgenden Modul */
  border-bottom: 1px solid transparent;

  /* Höhe / UI/UX */
  min-height: clamp(380px, 60dvh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  overflow: hidden;

  /* Hintergrund */
  background:
    linear-gradient(
      180deg, 
      rgba(var(--hero-overlay-dark, 32, 42, 68), .90), 
      rgba(var(--hero-overlay-light, 32, 42, 68), .84)
    ),
    var(--hero-image) !important;
    
  background-size: cover !important;
  background-position: center var(--hero-pos) !important;
  background-repeat: no-repeat !important;
}

/* === v4 HERO DESKTOP FIX – mehr Luft, kein Quetschen === */
@media (min-width: 1280px) {
  body.page-template-template-v4 .hero {
    max-height: none !important;
    min-height: clamp(480px, 55vh, 620px) !important;
    padding-top: clamp(32px, 4vh, 56px) !important;
    padding-bottom: clamp(32px, 4vh, 56px) !important;
  }
}

/* B) .hero .wrap: Seitliche Ränder im Hero (Mobile vs. Tablet) */
body.page-template-template-v4 .hero .wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (min-width: 769px) {
  body.page-template-template-v4 .hero .wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  }
}

/* C) .hero .panel: Der Text-Kasten (PADDING KORRIGIERT) */
body.page-template-template-v4 .hero .panel {
  margin: 0 auto !important;

  /* Begrenzte Zeilenlänge + kleiner Innenabstand zu den Rändern */
  max-width: min(720px, 100% - 16px);

  padding: var(--pad); /* bleibt variablenbasiert */
  color: #fff !important;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  box-sizing: border-box;
  gap: var(--s2) !important;
}


/* Hero Typo: Alle Schriften im Panel müssen weiß sein, für Lesbarkeit auf dunklem BG */
body.page-template-template-v4 .hero .panel,
body.page-template-template-v4 .hero .panel h1,
body.page-template-template-v4 .hero .panel h2,
body.page-template-template-v4 .hero .panel h3,
body.page-template-template-v4 .hero .panel .sub {
  color: #fff !important;
}

@media (min-width: 769px) {
  body.page-template-template-v4 .hero .panel {
    padding: clamp(32px, 4vw, 48px) !important;
  }
}

/* 4) BOXEN: Visuelle Basis & Einheitliches Padding */

/* Fügt die verlorene Optik (Rahmen, Schatten, Hintergrund) zu allen Boxen hinzu */
body.page-template-template-v4 .card,
body.page-template-template-v4 .prose,
body.page-template-template-v4 .faq,
body.page-template-template-v4 .topic {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body.page-template-template-v4 .card.soft,
body.page-template-template-v4 .cta,
body.page-template-template-v4 .related,
body.page-template-template-v4 .faq-header {
  background: var(--color-light-bg);
}
body.page-template-template-v4 .faq { overflow: hidden; }

/* Setzt das Padding auf Basis der Responsive Steuerung */
body.page-template-template-v4 .card,
body.page-template-template-v4 .prose,
body.page-template-template-v4 .related,
body.page-template-template-v4 .faq,
body.page-template-template-v4 .cta {
  padding: var(--pad) !important; /* Nutzt die Variable --pad */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* === BUTTONS – v4 Mietrecht (Theme-gesteuert, per Variablen überschreibbar) === */

/* Basis-Layout für beide Varianten */
body.page-template-template-v4 .btn,
body.page-template-template-v4 .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  min-width: 200px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font: 700 16px/1.2 "Montserrat", sans-serif;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  border: 2px solid transparent;
}

/* Primary Button – nutzt reine Variablen */
body.page-template-template-v4 .btn-primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-border) !important;
  box-shadow: var(--btn-primary-shadow);
}

body.page-template-template-v4 .btn-primary:hover {
  background: var(--btn-primary-hover-bg) !important;
  color: var(--btn-primary-hover-text) !important;
  border-color: var(--btn-primary-hover-border) !important;
  transform: translateY(-1px);
  box-shadow: var(--btn-primary-hover-shadow);
}

/* Secondary Button (weißer Button) – ebenfalls rein variablenbasiert */
body.page-template-template-v4 .btn {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border-color: var(--btn-secondary-border) !important;
  box-shadow: var(--btn-secondary-shadow);
}

body.page-template-template-v4 .btn:hover {
  background: var(--btn-secondary-hover-bg) !important;
  color: var(--btn-secondary-hover-text) !important;
  border-color: var(--btn-secondary-hover-border) !important;
  transform: translateY(-1px);
  box-shadow: var(--btn-secondary-hover-shadow);
}

/* Focus/Disabled/Reduced Motion wie gehabt */
body.page-template-template-v4 .btn:focus-visible,
body.page-template-template-v4 .btn-primary:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 181,0,124), .25);
}

body.page-template-template-v4 .btn[disabled],
body.page-template-template-v4 .btn-primary[disabled],
body.page-template-template-v4 .btn.is-disabled,
body.page-template-template-v4 .btn-primary.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce){
  body.page-template-template-v4 .btn,
  body.page-template-template-v4 .btn-primary{
    transition: none;
    transform: none !important;
  }
}

/* Mobile: Full-width untereinander */
@media (max-width: 768px) {
  body.page-template-template-v4 .btn,
  body.page-template-template-v4 .btn-primary {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  body.page-template-template-v4 .btn + .btn,
  body.page-template-template-v4 .btn + .btn-primary,
  body.page-template-template-v4 .btn-primary + .btn,
  body.page-template-template-v4 .btn-primary + .btn-primary {
    margin-top: var(--s2);
  }
}

/* FAQ-Reparatur: PM-Symbole vor Button-Stil schützen */
body.page-template-template-v4 .faq .pm {
  border-radius: 6px !important;
  font: 700 15px/1 "Arial", sans-serif !important;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
  border: 1px solid rgba(var(--color-primary-rgb, 181, 0, 124), 0.3);
}

/* 5) Notice */
body.page-template-template-v4 .notice{
  display:flex; align-items:flex-start; gap:12px;
  background:#fdf8fb; border-left:4px solid var(--color-primary);
  border-radius:var(--radius); padding:var(--s3); box-shadow:var(--shadow);
}
body.page-template-template-v4 .notice .dot{
  display:none !important;
}

/* 6) Cards / Prose */
body.page-template-template-v4 .card{
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
body.page-template-template-v4 .card.soft{ background:var(--color-light-bg); }

body.page-template-template-v4 .prose{
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
body.page-template-template-v4 .prose p{ max-width:var(--max-text); }

/* 7) FAQ – Konsolidierte Deklaration (Mobile First) */

/* Basis-Box: Farben, Rahmen, Shadow, Padding kommt von .card-Konsolidierung */
body.page-template-template-v4 .faq {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden; /* Für saubere Ecken */
}

/* FAQ Header (falls vorhanden) */
body.page-template-template-v4 .faq-header {
  background: var(--color-light-bg);
  padding: var(--s3);
  font-weight: 700;
  border-radius: var(--radius) var(--radius) 0 0;
  margin: 0 !important; /* Sicherheit gegen Header-Margins */
}

/* Trennlinie zwischen Items */
body.page-template-template-v4 .faq-item + .faq-item {
  border-top: 1px solid var(--color-border);
}

/* Fragezeile: Flex-Layout und Hover-Effekt */
body.page-template-template-v4 .faq-q {
  padding: var(--s3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}
body.page-template-template-v4 .faq-q:hover {
  background: var(--color-light-bg);
}

/* Plus/Minus-Symbol (.pm) – Konsolidiert & Zentrierung Fix */
body.page-template-template-v4 .faq .pm {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid currentColor;       /* zieht automatisch die Primärfarbe */
    color: var(--color-primary);          /* bleibt, jetzt aber dynamisch */
   
  /* FIX: display:grid ist stabiler für Zentrierung des Icons */
    display: grid;
    place-items: center;
    font-weight: 700;
    flex-shrink: 0;
    font-size: 15px !important;
    line-height: 1;

  /* FIX: content muss neu gesetzt werden, falls es überschrieben wird */
  content: "+" !important;
}
body.page-template-template-v4 .faq-item.open .pm::before {
  content: "–" !important;
}
body.page-template-template-v4 .faq .pm::before {
  content: "+" !important;
}

/* FAQ Antwort (muss versteckt sein, wird per JS/Klasse geöffnet) */
body.page-template-template-v4 .faq-a {
    display: none;
    /* Padding der Box übernehmen, aber oben/unten korrigieren */
    padding: var(--s3);
   
    /* FIX 1: Oberen Abstand und Trennlinie korrigieren */
    padding-top: var(--s2) !important; /* 16px Abstand zwischen Frage und Antwort */
    border-top: 1px solid var(--color-border);
   
    /* FIX 2: Behält die Linke/Rechte Symmetrie der Box */
    padding-left: var(--s3);
  padding-right: var(--s3);
   
    /* Abstand nach unten */
    padding-bottom: var(--s3);
    margin-bottom: 0 !important;
    line-height: 1.55;
}
body.page-template-template-v4 .faq-item.open .faq-a {
    display: block;
}

/* 8) CTA */
body.page-template-template-v4 .cta{
  background:var(--color-light-bg); border:1px solid var(--color-border);
  border-radius:var(--radius); padding:var(--s5); text-align:center; box-shadow:var(--shadow);
}
body.page-template-template-v4 .cta h2{ margin-bottom:var(--s2); text-align: center !Important; }

body.page-template-template-v4 .grid{
  display:grid;
  gap:var(--s2);
  /* MOBILE FIRST: Standard 1 Spalte für alle Grid-Klassen */
  grid-template-columns:1fr;
  padding: 0 !important;
  margin: 0 !important;
}

/* Responsive Grid-Spalten Steuerung (KORRIGIERT) */
body.page-template-template-v4 .grid.grid-3 {
  grid-template-columns: 1fr; /* Mobile: 1 Spalte */
}

@media (min-width: 769px) {
  body.page-template-template-v4 .grid.grid-3 {
    grid-template-columns: repeat(2, 1fr) !important; /* Tablet: 2 Spalten */
  }
}

@media (min-width: 1400px) { /* NEU: erst ab 1400px auf 3 Spalten */
  body.page-template-template-v4 .grid.grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

body.page-template-template-v4 .topic{
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:var(--pad) !important;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  height: 100%;
}
body.page-template-template-v4 .topic h3{ margin:0 0 var(--s1); }
body.page-template-template-v4 .topic p{ margin:0 0 var(--s2) 0; flex-grow: 1; }
body.page-template-template-v4 .topic a {
  font-weight: 600; /* nur Schriftschnitt, Farbe kommt von der allgemeinen Linkregel */
}

/* 10) Steps – Final konsistent (Mobile First, scoped) */
body.page-template-template-v4 .steps {
  display: grid;
  gap: var(--s2);
  padding: 0;
  margin: 0;
}

/* Jede Step-Zeile: Zahl + Text */
body.page-template-template-v4 .step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s2);
  align-items: start; /* Zahl und Textblock oben bündig */
}

/* Zahlenfeld (Badge) */
body.page-template-template-v4 .num {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  margin-top: 2px; /* optische Feinjustierung */
}

/* Headline im Step (egal ob h2 oder h3) */
body.page-template-template-v4 .step h2,
body.page-template-template-v4 .step h3 {
  margin-top: 0;
  margin-bottom: var(--s1)!important; /* identisch mit .topic h3 */
  line-height: 1.3;
}

/* Textblöcke unter der Headline */
body.page-template-template-v4 .step p {
  margin: 0; /* keine extra Lücken */
  line-height: 1.6;
}

/* Optischer Rhythmus für Mehrzeiler */
body.page-template-template-v4 .step p + p {
  margin-top: var(--s1);
}
/* === 11) Checklist – BASE =============================== */
body.page-template-template-v4 .checklist ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s2);
  max-width: var(--max-text);
}

body.page-template-template-v4 .checklist li{
  display: flex;
  align-items: center;
  gap: var(--s2);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

body.page-template-template-v4 .checklist li:hover{
  background: rgba(var(--color-primary-rgb, 181, 0, 124), 0.05);
  border-radius: var(--radius);
}

body.page-template-template-v4 .checklist .box{
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.25s ease;
}

/* Checked State */
body.page-template-template-v4 .checklist li.done .box{
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 181, 0, 124), 0.08);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 181, 0, 124), 0.15);
}

body.page-template-template-v4 .checklist li.done .box::after{
  content: "✓";
  color: var(--color-primary);
  font-weight: 800;
  font-size: 16px;
  font-family: "Arial Rounded MT Bold", "Segoe UI", sans-serif;
  transform: rotate(-8deg);
  line-height: 1;
}

/* Hero-Bild für Seite 66585 - Mietrecht */
body.page-id-66585 {
  --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2020/06/Mietrecht.jpg');
}

/* === v4 – Related / Grid / Topic: sauber & symmetrisch =================== */

/* Box „Weitere Themen …“ */
body.page-template-template-v4 .related{
  background: var(--color-light-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad) !important;
  text-align: left !important;
  box-sizing: border-box;
  max-width: var(--max-text);
  margin-left: auto;
  margin-right: auto;
}

/* Target-Group (Mieter/Vermieter) soll genauso zentriert wirken */
body.page-template-template-v4 .related.target-group {
  max-width: 100% !important; /* war: var(--max-text) – jetzt volle Breite wie andere Module */
  margin-left: auto;
  margin-right: auto;
}

/* Überschrift in der Related-Box */
body.page-template-template-v4 .related > h2,
body.page-template-template-v4 .related > h3 {
  margin: 0 0 var(--s2) !important;
  line-height: 1.3 !important;
}

/* Grid in Related – keine eigenen Offsets */
body.page-template-template-v4 .related .grid {
  display: grid;
  gap: var(--s2);
  grid-template-columns: 1fr;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 2 Spalten ab Tablet */
@media (min-width: 769px) {
  body.page-template-template-v4 .related .grid.grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 3 Spalten ab großem Desktop */
@media (min-width: 1400px) { /* KORRIGIERT: war 1280px */
  body.page-template-template-v4 .related .grid.grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Topic-Karten in Related */
body.page-template-template-v4 .related .topic {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--pad) !important;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

body.page-template-template-v4 .related .topic h3 {
  font-size: 19px !important;
  line-height: 1.3 !important;
  margin: 0 0 var(--s1) !important;
  color: var(--color-dark) !important;
  font-weight: 600 !important;
}

body.page-template-template-v4 .related .topic p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--color-text) !important;
  margin: 0 0 var(--s2) !important;
  flex-grow: 1;
}

/* ============================================================
v4 Mietrecht – Final Responsive & Typo/Spacing Fix (Mobile First)
============================================================ */

body.page-template-template-v4 *,
body.page-template-template-v4 *::before,
body.page-template-template-v4 *::after {
  box-sizing: inherit;
}

/* --- Vertikale Symmetrie: gleiche Abstände in Sektionen --- */
body.page-template-template-v4 .stack > * + * {
  margin-top: var(--s3);
}
@media (min-width: 769px) {
  body.page-template-template-v4 .stack > * + * {
    margin-top: var(--s4);
  }
}

/* --- Sicherheit: Keine weißen Ränder, Footer bündig --- */
body.page-template-template-v4 footer {
  width: 100vw;
  margin-left: calc(-1 * (100vw - 100%) / 2);
  overflow: hidden;
}
/* === v4 FINAL FIX (scoped) — Mietrecht Template only ============ */
body.page-template-template-v4 {
  /* Sicherheit gegen horizontales Scrollen */
  overflow-x: hidden;
}

/* 5) Listen/Abstände in Topics & Prose (sauber & symmetrisch) */
body.page-template-template-v4 .topic > * + * { margin-top: 16px; }
body.page-template-template-v4 .topic p { margin: 0 0 16px 0; }
body.page-template-template-v4 .prose > * + * { margin-top: 20px; }

/* 6) Anker sauber unter Sticky-Header stoppen */
body.page-template-template-v4 [id] { scroll-margin-top: calc(var(--v4-header-d) + 16px); }

/* 7) Footer bündig (nur optischer Schutz, verändert kein anderes Template) */
body.page-template-template-v4 footer { width: 100%; overflow-x: hidden; }


/* === v4 – Theme-Title/Hero-Box zuverlässig verstecken (nur Header/Title-Bereich) === */
body.page-template-template-v4 .page_title,
body.page-template-template-v4 .page_title_wrap,
body.page-template-template-v4 .sc_layouts_title,
body.page-template-template-v4 .top_panel_title,
body.page-template-template-v4 .sc_layouts_title_caption,
body.page-template-template-v4 .sc_layouts_title_breadcrumbs,
body.page-template-template-v4 .trx_addons_title_with_image,
body.page-template-template-v4 .trx_addons_title_page {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Nur Title-Reihen im KOPF verstecken – Footer bleibt unberührt 
body.page-template-template-v4 .top_panel .sc_layouts_row.sc_layouts_row_type_normal.sc_layouts_row_delimiter {
  display: none !important;*/
}
/* === v4 – Desktop Feintuning: Hero-Start & rechter Rand ================= */

/* 2) Rechter Weißraum auf Desktop beseitigen (WPBakery/Theme-Container) */
@media (min-width:1101px){
  body.page-template-template-v4 .page_wrap,
  body.page-template-template-v4 .page_content_wrap,
  body.page-template-template-v4 .content_wrap,
  body.page-template-template-v4 .content_wrap > .content,
  body.page-template-template-v4 .content_wrap > .sidebar {
    padding-right: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.page-template-template-v4 .vc_row{
    margin-right: 0 !important;
  }
  body.page-template-template-v4 .vc_column_container,
  body.page-template-template-v4 .vc_column_container > .vc_column-inner{
    padding-right: 0 !important;
  }
}

/* === v4 – Notice (Wichtig...) Innenräume und Ausrichtung ================= */
body.page-template-template-v4 .notice{
  padding: 16px 18px !important; /* links/rechts leicht angleichen */
  align-items: center !important; /* Text vertikal mittig */
}
/* === v4 – Typo-feintuning Textboxen ============================= */

/* v4 – Prose/Card: layoutbreit; Zeilenlänge über --max-text begrenzen */
body.page-template-template-v4 .prose,
body.page-template-template-v4 .card {
  width: 100%;
  max-width: var(--max-text);
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left;
  color: #535b7c;
  font-size: 17px;
  line-height: 1.65;
}

/* Inhaltliche Elemente in Prose/Card auf angenehme Lesebreite begrenzen */
body.page-template-template-v4 .prose > p,
body.page-template-template-v4 .prose > ul,
body.page-template-template-v4 .prose > ol,
body.page-template-template-v4 .prose > blockquote,
body.page-template-template-v4 .card > p,
body.page-template-template-v4 .card > ul,
body.page-template-template-v4 .card > ol,
body.page-template-template-v4 .card > blockquote {
  max-width: var(--max-text);
}

/* angenehmer Absatzabstand im Fließtext */
body.page-template-template-v4 .prose p + p,
body.page-template-template-v4 .card p + p { margin-top: 1.2em; }

/* Mobile: Typo leicht kleiner, Innenräume kompakter */
@media (max-width:768px){
  body.page-template-template-v4 .prose,
  body.page-template-template-v4 .card {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* 2) Abstand zwischen "Beratung Mietrecht" (typisch .prose/.card) und der Inhaltsübersicht
 (typisch .related oder .grid mit Topics) */
body.page-template-template-v4 .prose + .related,
body.page-template-template-v4 .card + .related,
body.page-template-template-v4 .prose + .grid,
body.page-template-template-v4 .card + .grid{
  margin-top: var(--s4) !important; /* mobile */
}
@media (min-width: 769px){
  body.page-template-template-v4 .prose + .related,
  body.page-template-template-v4 .card + .related,
  body.page-template-template-v4 .prose + .grid,
  body.page-template-template-v4 .card + .grid{
    margin-top: var(--s5) !important; /* tablet/desktop */
  }
}

/* 1) Einheitliche Innenräume für alle Module-Boxen */
body.page-template-template-v4 .card,
body.page-template-template-v4 .prose,
body.page-template-template-v4 .related,
body.page-template-template-v4 .faq,
body.page-template-template-v4 .cta {
  padding: var(--pad) !important;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 2) Einheitliche Außenabstände zwischen Boxen */
body.page-template-template-v4 .wrap > .card,
body.page-template-template-v4 .wrap > .prose,
body.page-template-template-v4 .wrap > .related,
body.page-template-template-v4 .wrap > .faq,
body.page-template-template-v4 .wrap > .cta {
  margin-left: auto;
  margin-right: auto;
}

/* 2a) Standard-Abstand zwischen aufeinanderfolgenden Boxen */
body.page-template-template-v4 .card + .card,
body.page-template-template-v4 .card + .prose,
body.page-template-template-v4 .card + .related,
body.page-template-template-v4 .card + .faq,
body.page-template-template-v4 .card + .cta,
body.page-template-template-v4 .prose + .card,
body.page-template-template-v4 .prose + .prose,
body.page-template-template-v4 .prose + .related,
body.page-template-template-v4 .prose + .faq,
body.page-template-template-v4 .prose + .cta,
body.page-template-template-v4 .related + .card,
body.page-template-template-v4 .related + .prose,
body.page-template-template-v4 .related + .related,
body.page-template-template-v4 .related + .faq,
body.page-template-template-v4 .related + .cta,
body.page-template-template-v4 .faq + .card,
body.page-template-template-v4 .faq + .prose,
body.page-template-template-v4 .faq + .related,
body.page-template-template-v4 .faq + .faq,
body.page-template-template-v4 .faq + .cta,
body.page-template-template-v4 .cta + .card,
body.page-template-template-v4 .cta + .prose,
body.page-template-template-v4 .cta + .related,
body.page-template-template-v4 .cta + .faq,
body.page-template-template-v4 .cta + .cta {
  margin-top: var(--flow) !important;
}

/* 2b) Speziell: HERO → erste Box (z. B. „Beratung Mietrecht“) */
body.page-template-template-v4 .hero + .card,
body.page-template-template-v4 .hero + .prose,
body.page-template-template-v4 .hero + .related,
body.page-template-template-v4 .hero + .faq,
body.page-template-template-v4 .hero + .cta {
  margin-top: var(--flow) !important;
}

/* 2c) Speziell: „Beratung Mietrecht“ (prose/card) → Inhaltsübersicht (related/grid) */
body.page-template-template-v4 .prose + .related,
body.page-template-template-v4 .card + .related,
body.page-template-template-v4 .prose + .grid,
body.page-template-template-v4 .card + .grid {
  margin-top: var(--flow) !important;
}

/* 3) Text-Innenabstände in .prose (Überschriften, Absätze, Listen) */
body.page-template-template-v4 .prose > * + * { margin-top: 14px; }
@media (min-width:769px){
  body.page-template-template-v4 .prose > * + * { margin-top: 16px; }
}
body.page-template-template-v4 .prose ul,
body.page-template-template-v4 .prose ol { padding-left: 22px; }
body.page-template-template-v4 .prose li + li { margin-top: 6px; }

/* 4) Notice – symmetrisch & ruhig */
body.page-template-template-v4 .notice {
  padding: 16px 18px !important;
  align-items: center !important;
}
body.page-template-template-v4 .notice .dot { margin-top: 0; }

/* Topic-Karte: Innenabstände & Aufbau */
body.page-template-template-v4 .topic {
  padding: var(--pad) !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Vertikaler Rhythmus innerhalb der Karte */
body.page-template-template-v4 .topic > * + * { margin-top: 14px; }


/* 6) FAQ – Reihenabstände */
body.page-template-template-v4 .faq-header { margin: 0 !important; }
body.page-template-template-v4 .faq-item + .faq-item { border-top: 1px solid var(--color-border); }
body.page-template-template-v4 .faq-q { padding: 14px 0; }

/* v4 – FAQ-Antworten: mehr Abstand zum Trennstrich */
body.page-template-template-v4 .faq-a {
  padding-bottom: var(--s2) !important; /* Luft unter der Antwort */
  margin-bottom: 0 !important;  /* kein doppelter Abstand */
  line-height: 1.55;
}

/* 7) Sicherheitsnetz: Kein zusätzlicher Außenabstand in WPBakery-Elementen */
body.page-template-template-v4 .wpb_content_element { margin-bottom: 0 !important; }

/* === v4 – Abstand zum Footer (Theme-Footer bleibt unverändert) === */

/* sorgt dafür, dass der letzte Inhaltsblock nicht am Footer klebt */
body.page-template-template-v4 .wrap > :last-child {
  margin-bottom: var(--s5) !important; /* 48px mobile, ~mehr auf Desktop */
}

/* Tablet & Desktop – leicht großzügiger */
@media (min-width:769px){
  body.page-template-template-v4 .wrap > :last-child {
    margin-bottom: calc(var(--s5) * 1.2) !important;
  }
}

/* === v4 – Bottom-Gap Fix NUR für template-v4.php (ANHÄNGEN) === */

/* 1) Leere Absatz-Tags, die WPBakery/Editor oft vor/nach dem Footer erzeugt */
body.page-template-template-v4 .page_content_wrap > p:empty,
body.page-template-template-v4 .content_wrap > p:empty,
body.page-template-template-v4 footer + p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Das „Full-Width Clearfix“ direkt NACH dem Footer hat oft Höhe/Weißraum */
body.page-template-template-v4 footer + .vc_row-full-width.vc_clearfix {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 3) Sicherheit: keine Rest-Abstände am unteren Seitencontainer */
body.page-template-template-v4 .page_wrap,
body.page-template-template-v4 .page_content_wrap,
body.page-template-template-v4 .content_wrap,
body.page-template-template-v4 .content_wrap > .content,
body.page-template-template-v4 .content_wrap > .sidebar {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 4) Falls die letzte WPBakery-Zeile noch Spacer mitgibt, letzte Elemente „einfrieren“ */
body.page-template-template-v4 .wpb_content_element:last-child,
body.page-template-template-v4 .vc_row:last-child,
body.page-template-template-v4 .vc_empty_space:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important; /* für vc_empty_space */
}

/* 5) Footer selbst: keine extra Außenabstände unten hinzufügen */
body.page-template-template-v4 footer {
  margin-bottom: 0 !important;
}

/* 6) VC-Fullwidth-Row IM Footer: keine Offsets, keine feste Breite (nur Footer) */
body.page-template-template-v4 footer .vc_row[data-vc-full-width="true"] {
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body.page-template-template-v4 footer .vc_row[data-vc-stretch-content="true"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

  /* Headline im Step – egal ob h2 oder h3 */
  body.page-template-template-v4 .card h2,
  body.page-template-template-v4 .card h3 {
    margin: 0 0 var(--s1); /* top=0, right=0, bottom=var(--s1), left=0 */
    line-height: 1.3;
  }

  /* Fließtext unter Headline */
  body.page-template-template-v4 .card .step p{
    margin:0;     /* kein zusätzlicher Versatz */
    line-height:1.6;
  }

  body.page-template-template-v4 .card .step p + p{
    margin-top: var(--s1); /* sanfter Abstand zwischen Absätzen */
  }

  /* === v4 – Hero Hintergrund für Mieter-Landingpage (ANHÄNGEN) === */
  /* Ersetze 12345 durch die echte Page-ID der Mieter-Seite */
  body.page-id-66716 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/Mieter-Mietvertrag-Haus.webp');
  }

  /* Mietrecht – Mieter: Mietminderung (Page-ID 66728) */
  body.page-id-66728 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/Mieter-Mietminderung-Anwalt.webp');
  }

  /* === v4 Mietrecht – Hero-Bild: Mieterhöhung (Post-ID 66738) === */
  body.page-id-66738 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/Frau-Traurig-Mieterhoehung.webp');
  }

  /* Hero-Bild für Seite 66743 – Schönheitsreparaturen */
  body.page-id-66743 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/Schoenheitsreparaturen.webp');
  }

  /* Hero-Bild für Seite 66591 – Mietrecht Kündigung */
  body.page-id-66591 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/Kuendigung-Mietvertrag.webp');
  }

  /* Hero-Bild für Seite "Kaution" (Page-ID 66754) */
  body.page-template-template-v4.page-id-66754 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/kaution-mieter.webp');
  }

  /* Hero-Bild: Räumungsklage (Mieter) */
  body.page-id-66593 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/raeumungsklage-mieter.webp');
  }

  /* Hero-Bild für Seite "Mietrecht für Vermieter" */
  body.page-id-66762 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/Mietrecht-Vermieter.webp');
  }

  /* Hero-Bild für Seite 66781 – Kündigung Vermieter */
  body.page-id-66781 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/Kuendigung-Vermieter.webp');
  }

  /* Hero-Bild: Vermieter – Mieterhöhung (ID 66791) */
  body.page-id-66791 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/Mieterhoehung-Vermieter.webp');
  }

  /* Hero-Bild für Seite 66795 – Mietminderung Vermieter */
  body.page-id-66795 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/Mietminderung-Vermieter.webp');
  }

  /* Hero-Bild für Seite 66799 – Räumungsklage Vermieter */
  body.page-id-66799 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/raeumungsklage-vermieter.webp');
  }

  /* Hero-Bild für Seite 66803 – Kaution Vermieter */
  body.page-id-66803 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/kaution-vermieter.webp');
  }

  /* Hero-Bild für Seite 66807 – Schönheitsreparaturen Vermieter */
  body.page-id-66807 {
    --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/schoenheitsreparaturen-vermieter.webp');
  }

/* Hero-Bild – Mietminderung Vermieter (Page-ID 66870) */
body.page-template-template-v4.page-id-66870 {
  --hero-image: url('https://rakanzlei-braun.de/wp-content/uploads/2025/11/Mietminderung-Vermieter.webp');
}


/* ==========================================================
MIETERBEREICH Farbkonzept (LILA/VIOLETT - Konsistentes Design)
========================================================== */
body.page-template-template-v4.page-id-66716,
body.page-template-template-v4.parent-pageid-66716 {
    /* Akzentfarben (LILA) */
    --color-primary: #7b3ea1 !important; /* Lila/Violett als CTA */
    --color-secondary: #c1a4e0 !important; /* Heller Lila-Ton für Akzente */

    /* Typo und neutrale Flächen */
    --color-dark: #3d4458 !important;    /* Headings */
    --color-text: #5e5e5e !important;    /* Fließtext */
    --color-border: #a4b3b6 !important;  /* Rahmen */
    --color-light-bg: #eef2f6 !important;/* Seitenhintergrund */
    --color-surface: #e4e7ec !important; /* CTA/Related */

    /* Hero-Overlay-Farben (Lila-Tönung) */
    --hero-overlay-dark: 53, 30, 68;
    --hero-overlay-light: 84, 60, 107;
    --hero-overlay-top: .90;
    --hero-overlay-bottom: .84;

    /* Basis-Farben für Mieter-Interaktionen */
    --mieter-primary: #7b3ea1;
    --mieter-primary-rgb: 123, 62, 161;  /* für RGBA-Hintergründe */

    /* Link-Farben Mieter (Vorschlag 2 = aktiv) */
    --mieter-link: #7b3ea1;   /* Normal */
    --mieter-link-hover: #4e2775;   /* kräftig, dunkel, klar */

    /*
    Alternative Hover-Vorschläge (nur Info – falls du später tauschen willst):
    Vorschlag 1 (dezenter):   #6c3794
    Vorschlag 3 (sehr satt):  #4e2775
    */

    /* Hintergrund des Body auf Light-BG setzen */
    background-color: var(--color-light-bg) !important;
}

/* Mieter – Links nur im Content-Bereich (kein Header/Footer) */
body.page-template-template-v4.page-id-66716 .page_content_wrap a:not(.btn):not(.btn-primary),
body.page-template-template-v4.parent-pageid-66716 .page_content_wrap a:not(.btn):not(.btn-primary) {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.page-template-template-v4.page-id-66716 .page_content_wrap a:not(.btn):not(.btn-primary):hover,
body.page-template-template-v4.parent-pageid-66716 .page_content_wrap a:not(.btn):not(.btn-primary):hover {
    color: var(--mieter-link-hover);
}

/* === Checklist – Mieter (optimiert, variablenbasiert) ============= */
body.page-template-template-v4.page-id-66716 .checklist li.done .box,
body.page-template-template-v4.parent-pageid-66716 .checklist li.done .box {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 123, 62, 161), 0.12);
  box-shadow: 0 0 0 1px rgba(var(--color-primary-rgb, 123, 62, 161), 0.12);
}

body.page-template-template-v4.page-id-66716 .checklist li:hover,
body.page-template-template-v4.parent-pageid-66716 .checklist li:hover {
  background: rgba(var(--color-primary-rgb, 123, 62, 161), 0.14);
}

/* Hover: klarer, 40% stärker */
body.page-template-template-v4.page-id-66716 .checklist li:hover,
body.page-template-template-v4.parent-pageid-66716 .checklist li:hover {
  background: rgba(var(--mieter-primary-rgb), 0.14);
}

/* 2. Normale Boxen (card, prose, faq) auf reines Weiß setzen (nur in diesem Scope) */
body.page-template-template-v4.page-id-66716 .card,
body.page-template-template-v4.parent-pageid-66716 .card,
body.page-template-template-v4.page-id-66716 .prose,
body.page-template-template-v4.parent-pageid-66716 .prose,
body.page-template-template-v4.page-id-66716 .faq,
body.page-template-template-v4.parent-pageid-66716 .faq,
body.page-template-template-v4.page-id-66716 .topic,
body.page-template-template-v4.parent-pageid-66716 .topic {
    background: #fff !important; /* Reines Weiß */
}

/* 3. CTA/Related auf Surface setzen (nur in diesem Scope) */
body.page-template-template-v4.page-id-66716 .card.soft,
body.page-template-template-v4.parent-pageid-66716 .card.soft,
body.page-template-template-v4.page-id-66716 .cta,
body.page-template-template-v4.parent-pageid-66716 .cta,
body.page-template-template-v4.page-id-66716 .related,
body.page-template-template-v4.parent-pageid-66716 .related,
body.page-template-template-v4.page-id-66716 .faq-header,
body.page-template-template-v4.parent-pageid-66716 .faq-header {
    background: var(--color-surface) !important; /* Nuance dunkler (#e4e7ec) */
}

/* 4. Notice/Info-Box mit dem dunkleren Hintergrund kombinieren (Lila Akzent) */
body.page-template-template-v4.page-id-66716 .notice,
body.page-template-template-v4.parent-pageid-66716 .notice {
    background: var(--color-surface) !important;
    border-left: 4px solid var(--color-primary) !important; /* Primary Color Akzent */
}

/* 5. Hero-Overlay-Korrektur, um die neuen Variablen zu nutzen */
body.page-template-template-v4.page-id-66716 .hero,
body.page-template-template-v4.parent-pageid-66716 .hero {
    background:
  linear-gradient(
    180deg,
    rgba(var(--hero-overlay-dark, 32, 42, 68), var(--hero-overlay-top, .90)),
    rgba(var(--hero-overlay-light, 32, 42, 68), var(--hero-overlay-bottom, .84))
  ),
  var(--hero-image) !important;
}  
    
    
/* ===========================================================================
===========Vermieterbereich Farbkonzept (EDLER ENTWURF 3) ====================
=============================================================================*/

body.page-template-template-v4.page-id-66762,
body.page-template-template-v4.parent-pageid-66762 {
  /* Farben Vermieter – AKZENT = helles Blau */
  --color-primary: #00bcd4 !important;          /* Hauptakzent (Buttons, Steps, FAQ, Checklist) */
  --color-primary-rgb: 0, 188, 212 !important;  /* für RGBA-Schatten/Hintergründe */

  --color-secondary: #b5007c !important;        /* optionaler Zweitakzent (Magenta) */
  --color-dark: #3d4458 !important;
  --color-text: #5e5e5e !important;
  --color-border: #a4b3b6 !important;
  --color-light-bg: #eef2f6 !important;
  --color-surface: #e4e7ec !important;

  /* Hero-Overlay NUR für Vermieter (RGB + Alpha) */
  --hero-overlay-dark: 26, 30, 41;
  --hero-overlay-light: 32, 42, 68;
  --hero-overlay-top: .92;
  --hero-overlay-bottom: .86;

  /* Akzent-Hilfsvariablen (falls wir später noch spezieller werden wollen) */
  --vermieter-primary: #00bcd4;
  --vermieter-primary-rgb: 0, 188, 212;

  background-color: var(--color-light-bg) !important;
}
    

/* 2. Normale Boxen (card, prose, faq) auf reines Weiß setzen */
body.page-template-template-v4.page-id-66762 .card,
body.page-template-template-v4.parent-pageid-66762 .card,
body.page-template-template-v4.page-id-66762 .prose,
body.page-template-template-v4.parent-pageid-66762 .prose,
body.page-template-template-v4.page-id-66762 .faq,
body.page-template-template-v4.parent-pageid-66762 .faq,
body.page-template-template-v4.page-id-66762 .topic,
body.page-template-template-v4.parent-pageid-66762 .topic {
    background: #fff !important; /* Reines Weiß */
}

/* 3. CTA/Related (die bisher schon light-bg waren) auf Surface setzen */
body.page-template-template-v4.page-id-66762 .card.soft,
body.page-template-template-v4.parent-pageid-66762 .card.soft,
body.page-template-template-v4.page-id-66762 .cta,
body.page-template-template-v4.parent-pageid-66762 .cta,
body.page-template-template-v4.page-id-66762 .related,
body.page-template-template-v4.parent-pageid-66762 .related,
body.page-template-template-v4.page-id-66762 .faq-header,
body.page-template-template-v4.parent-pageid-66762 .faq-header {
    background: var(--color-surface) !important; /* Eine Nuance dunkler (#e4e7ec) */
}

/* Vermieter – Links NUR im Content-Bereich (analog Mieter) */
body.page-template-template-v4.page-id-66762 .page_content_wrap a:not(.btn):not(.btn-primary),
body.page-template-template-v4.parent-pageid-66762 .page_content_wrap a:not(.btn):not(.btn-primary) {
    color: var(--color-primary);   /* = helles Blau */
    text-decoration: none;
    transition: color 0.2s ease;
}

body.page-template-template-v4.page-id-66762 .page_content_wrap a:not(.btn):not(.btn-primary):hover,
body.page-template-template-v4.parent-pageid-66762 .page_content_wrap a:not(.btn):not(.btn-primary):hover {
    color: var(--color-dark);
}

/* 4. Notice/Info-Box mit dem dunkleren Hintergrund kombinieren (Türkis-Akzent) */
body.page-template-template-v4.page-id-66762 .notice,
body.page-template-template-v4.parent-pageid-66762 .notice {
    background: var(--color-surface) !important;
    border-left: 4px solid var(--color-primary) !important;
}

/* === Checklist – Vermieter (Türkis) ============================= */
body.page-template-template-v4.page-id-66762 .checklist li.done .box,
body.page-template-template-v4.parent-pageid-66762 .checklist li.done .box {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 0, 188, 212), 0.12);
  box-shadow: 0 0 0 1px rgba(var(--color-primary-rgb, 0, 188, 212), 0.12);
}

body.page-template-template-v4.page-id-66762 .checklist li.done .box::after,
body.page-template-template-v4.parent-pageid-66762 .checklist li.done .box::after {
  color: var(--color-primary);
}

body.page-template-template-v4.page-id-66762 .checklist li:hover,
body.page-template-template-v4.parent-pageid-66762 .checklist li:hover {
  background: rgba(var(--color-primary-rgb, 0, 188, 212), 0.14);
}


/* --- BOX RHYTHM VARIABLES (Responsive Steuerung am Ende) --- */
@media (min-width: 769px){
  body.page-template-template-v4 {
    --flow: var(--s4);
    --pad: var(--s4);
  }
}
@media (min-width: 1101px){
  body.page-template-template-v4 {
    --flow: var(--s5);
    --pad: var(--s5);
  }
}
/* Hero Link: Korrigiert Farbe und Hover, da Inline-Style verwendet wird */
body.page-template-template-v4 .hero [data-anw]:hover {
    color: var(--color-primary) !important; 
    text-decoration: underline !important;
}

/* Hero Link: Korrigiert Farbe und Hover */
body.page-template-template-v4 .hero [data-anw]:hover {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}

/* v4 Hero Link Highlight Fix (Mobile iOS/Android, ohne Button-Einfluss) */
body.page-template-template-v4 .hero a:not(.btn):not(.btn-primary),
body.page-template-template-v4 .hero [data-anw]:not(.btn):not(.btn-primary) {
  -webkit-tap-highlight-color: transparent;
  background: none !important; /* kein transparent !important */
  outline: none !important;
}

/* ============================================================
   v4 – Mobile Overflow Fix: Menü + Scroll-To-Top
   (nur Mietrecht-Template)
   ============================================================ */

/* 1) Mobile-Menü-Wrapper niemals breiter als der Viewport */
body.page-template-template-v4 .menu_mobile_nav_area,
body.page-template-template-v4 .menu_mobile_overlay,
body.page-template-template-v4 .menu_mobile_inner {
  max-width: 100vw !important;
  width: 100vw !important;
  box-sizing: border-box !important;
  left: 0 !important;
  right: auto !important;
  overflow-x: hidden !important;
}

/* 2) Menü-Liste im Container halten */
body.page-template-template-v4 .menu_mobile_nav_area .menu_mobile_nav {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Sicherheit: einzelne Menü-Einträge nicht breiter als der Container */
body.page-template-template-v4 .menu_mobile_nav_area .menu_mobile_nav > li {
  max-width: 100% !important;
}

/* 3) Scroll-To-Top-Button sauber im Viewport positionieren */
body.page-template-template-v4 a.trx_addons_scroll_to_top {
  right: 16px !important;   /* statt irgendeinem zu großen Right-Wert */
}

/* === v4 – WPBakery Margin Fix (verstärkt für alle Seiten) === */

/* 1. Wrap-Container: horizontale Margins auf ALLEN v4-Seiten */
body.page-template-template-v4 .wrap.stack-4,
body.page-template-template-v4.page-id-66716 .wrap.stack-4,
body.page-template-template-v4.parent-pageid-66716 .wrap.stack-4,
body.page-template-template-v4.page-id-66762 .wrap.stack-4,
body.page-template-template-v4.parent-pageid-66762 .wrap.stack-4 {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 2. VC-Column-Container: keine Extra-Paddings */
body.page-template-template-v4 .vc_column_container,
body.page-template-template-v4 .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* === v4 – WPBakery Raw HTML Wrapper Fix === */

/* 1. Der wpb_wrapper Container darf keine Offsets haben */
body.page-template-template-v4 .wpb_raw_html > .wpb_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 2. Der wrap.stack-4 darin muss zentriert sein */
body.page-template-template-v4 .wpb_raw_html .wrap.stack-4 {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: min(1240px, 92vw) !important;
  box-sizing: border-box !important;
  padding-inline: 24px !important;
}

/* === v4 – Related Topic Overflow Fix (Mieter/Vermieter) === */

/* Alle Topics in Related: Zwinge auf Grid-Breite */
body.page-template-template-v4.page-id-66716 .related .topic,
body.page-template-template-v4.parent-pageid-66716 .related .topic,
body.page-template-template-v4.page-id-66762 .related .topic,
body.page-template-template-v4.parent-pageid-66762 .related .topic {
  /* Kritisch: Box-Sizing + Width-Constraint */
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important; /* Erlaubt Shrinking im Grid */
  
  /* Verhindere feste Breiten */
  flex-basis: auto !important;
  
  /* Margin darf nicht extra Platz verbrauchen */
  margin: 0 !important;
}

/* Grid selbst: Overflow sichtbar machen (Debugging) */
body.page-template-template-v4.page-id-66716 .related .grid,
body.page-template-template-v4.parent-pageid-66716 .related .grid,
body.page-template-template-v4.page-id-66762 .related .grid,
body.page-template-template-v4.parent-pageid-66762 .related .grid {
  max-width: 100% !important;
  overflow: hidden !important; /* verhindert Overflow */
}

@media (min-width: 1280px) {
  body.page-template-template-v4 .hero .panel {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    padding: clamp(40px, 4vh, 72px) !important;
    max-width: min(840px, 100% - 80px);
  }
}

/* DEBUGGING: Rote Rahmen (später entfernen!) 
body.page-template-template-v4 .related {
  outline: 2px solid red !important;
}
body.page-template-template-v4 .related .grid {
  outline: 2px solid blue !important;
}
body.page-template-template-v4 .related .topic {
  outline: 2px solid green !important;
} */

/* ===========================================================
   FIX: Großbildschirm – Wrap-Container wieder zentrieren
   =========================================================== */

@media (min-width: 1400px) {

  /* Hauptcontainer wieder mittig ausrichten */
  body.page-template-template-v4 .wrap,
  body.page-template-template-v4 .wrap.stack-4 {
    width: 1240px !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* WPBakery / Theme überschreibt wrap → zurücksetzen */
  body.page-template-template-v4 .page_wrap,
  body.page-template-template-v4 .page_content_wrap,
  body.page-template-template-v4 .content_wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Verhindert, dass vc_row "überbreit" geht */
  body.page-template-template-v4 .vc_row {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Garantiert: der innere wrap bleibt der zentrierte Container */
  body.page-template-template-v4 .wpb_raw_html .wrap.stack-4 {
    width: 1240px !important;
    max-width: 1240px !important;
  }
}