/*
Theme Name: Schlüter & Broda (Kadence Child)
Theme URI: https://www.schlueter-broda.de
Description: Child-Theme auf Basis von Kadence für die Schlüter & Broda Immoservice GmbH. Enthält die Design-Tokens des freigegebenen Prototyps, selbst gehostete Schriften (Manrope/Inter, DSGVO-konform ohne Google-CDN) sowie die Zusatzstile für Elementor-Sektionen, mobile Sticky-Leiste und Barrierefreiheit.
Author: Schlüter & Broda Immoservice GmbH
Template: kadence
Version: 1.7.2
Requires PHP: 7.4
Text Domain: schluter-broda-kadence
*/

/* =========================================================================
   1. Selbst gehostete Schriften — kein Google-CDN (DSGVO)
   ========================================================================= */

@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* =========================================================================
   2. Design-Tokens (1:1 aus dem freigegebenen Prototyp)
   ========================================================================= */

:root{
  /* Markengrün */
  --sb-gruen:#54A81C;
  --sb-gruen-dunkel:#3D7C10;
  --sb-gruen-hover:#326609;
  --sb-gruen-active:#295408;
  --sb-gruen-100:#E7F2DB;
  --sb-gruen-50:#F3F9EC;

  /* Anthrazit & Neutrale */
  --sb-anthrazit:#1E2228;
  --sb-text:#23272E;
  --sb-text-sekundaer:#4A515A;
  --sb-text-gedaempft:#5F6770;
  --sb-grau-400:#A9AFAC;
  --sb-grau-300:#CFD4CF;
  --sb-grau-200:#E2E6E1;
  --sb-grau-100:#EFF2EE;
  --sb-grau-50:#F7F9F6;
  --sb-weiss:#FFFFFF;

  /* Semantisch */
  --sb-fehler:#B42318;
  --sb-fehler-50:#FCF0EE;
  --sb-erfolg:#3D7C10;
  --sb-warnung:#9A6700;

  /* Aliasse */
  --sb-flaeche-seite:#FFFFFF;
  --sb-flaeche-karte:#FFFFFF;
  --sb-flaeche-eingerueckt:#F7F9F6;
  --sb-flaeche-dunkel:#1E2228;
  --sb-text-auf-dunkel:#F4F6F3;
  --sb-text-sekundaer-auf-dunkel:#B9C0BA;
  --sb-gruen-auf-dunkel:#7FCC49;
  --sb-aktion:#3D7C10;
  --sb-aktion-hover:#326609;
  --sb-aktion-active:#295408;
  --sb-link:#3D7C10;
  --sb-fokus-ring:0 0 0 3px rgba(84,168,28,.35);

  /* Typografie */
  --sb-font-headline:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  --sb-font-text:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --sb-body-size:17px;
  --sb-body-lh:1.65;

  /* Radien */
  --sb-radius-sm:4px;
  --sb-radius-md:6px;
  --sb-radius-lg:10px;

  /* Schatten */
  --sb-schatten-sm:0 1px 2px rgba(30,34,40,.06);
  --sb-schatten-md:0 2px 8px rgba(30,34,40,.08);
  --sb-schatten-lg:0 8px 24px rgba(30,34,40,.12);
}

/* =========================================================================
   3. Basis-Typografie
   ========================================================================= */

body{
  font-family:var(--sb-font-text);
  font-size:var(--sb-body-size);
  line-height:var(--sb-body-lh);
  color:var(--sb-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,.sb-headline{
  font-family:var(--sb-font-headline);
  color:var(--sb-anthrazit);
}

h1{font-weight:800;line-height:1.15;letter-spacing:-0.015em;text-wrap:pretty;}
h2{font-weight:700;letter-spacing:-0.01em;}
h3,h4{font-weight:700;}

a{color:var(--sb-link);}
a:hover{color:var(--sb-aktion-hover);}

/* =========================================================================
   4. Hilfsklassen für den Elementor-Nachbau
   ========================================================================= */

/* Eyebrow / Label-Zeile über Überschriften */
.sb-eyebrow{
  font-family:var(--sb-font-headline);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--sb-aktion);
}

/* Zahlen sauber untereinander (Preise, Telefonnummern) */
.sb-zahlen,.sb-preis{font-variant-numeric:tabular-nums;}

/* Große Preisangabe */
.sb-preis{
  font-family:var(--sb-font-headline);
  font-weight:800;
  line-height:1.1;
  color:var(--sb-anthrazit);
}

/* Lesbare Zeilenlänge */
.sb-lesbar{max-width:70ch;}

/* Karte mit grüner Oberkante (Leistungskarten) */
.sb-karte-oben{border-top:3px solid var(--sb-gruen);}

/* Karten-Hover: Schatten wechselt */
.sb-karte{
  background:var(--sb-flaeche-karte);
  border:1px solid var(--sb-grau-200);
  border-radius:var(--sb-radius-lg);
  box-shadow:var(--sb-schatten-sm);
  transition:box-shadow .2s ease;
}
.sb-karte:hover{box-shadow:var(--sb-schatten-md);}

/* Schritt-Nummernkreis */
.sb-schritt-nr{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:50%;
  border:2px solid var(--sb-gruen);
  font-family:var(--sb-font-headline);
  font-weight:700;
  color:var(--sb-aktion);
  flex:0 0 auto;
}

/* Auto-fit-Raster wie im Original (bricht platzabhängig, nicht an Breakpoints).
   !important ist nötig, weil Elementor auf .e-con pauschal display:flex setzt. */
.sb-grid-auto{display:grid!important;gap:clamp(16px,2vw,24px);align-items:stretch;}
.sb-grid-auto>*{width:auto!important;max-width:none!important;}

/* --- Raster für Elementor-Container ---------------------------------------
   Elementor verwirft eigene CSS-Klassen an Containern (nur Widgets behalten
   sie). Deshalb sprechen wir die Container über ein Kindelement an. Damit
   entsteht exakt das auto-fit-Verhalten des Originals, ohne feste Breakpoints. */

.sb-raster{
  display:grid!important;
  align-items:stretch;
}
.sb-raster>.elementor-element{width:auto!important;max-width:none!important;flex:none!important;}

/* 250 px — Vertrauensargumente, Ablaufschritte */
.e-con-inner:has(> .sb-vertrauen-item),
.e-con:has(> .sb-vertrauen-item),
.e-con-inner:has(> .sb-schritt),
.e-con:has(> .sb-schritt){
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(16px,2vw,24px);
  align-items:start;
}

/* 280 px — Leistungskarten, Preiskarten */
.e-con-inner:has(> .sb-leistungskarte),
.e-con:has(> .sb-leistungskarte),
.e-con-inner:has(> .sb-preiskarte),
.e-con:has(> .sb-preiskarte){
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(16px,2vw,24px);
  align-items:stretch;
}

/* 420 px — Hero (Text + Bildkarte) */
.e-con-inner:has(> .sb-hero-bildkarte),
.e-con:has(> .sb-hero-bildkarte){
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(24px,4vw,56px);
  align-items:center;
}

/* 380 px — Über-uns-Teaser, Service-Teaser */
.e-con-inner:has(> .sb-illustration),
.e-con:has(> .sb-illustration),
.e-con-inner:has(> .sb-downloads),
.e-con:has(> .sb-downloads){
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(24px,4vw,56px);
}
.e-con-inner:has(> .sb-illustration){align-items:center;}
.e-con-inner:has(> .sb-downloads){align-items:start;}

/* Rasterkinder dürfen nicht von Elementors Flex-Breiten überschrieben werden */
.e-con-inner:has(> .sb-vertrauen-item)>.elementor-element,
.e-con:has(> .sb-vertrauen-item)>.elementor-element,
.e-con-inner:has(> .sb-schritt)>.elementor-element,
.e-con:has(> .sb-schritt)>.elementor-element,
.e-con-inner:has(> .sb-leistungskarte)>.elementor-element,
.e-con:has(> .sb-leistungskarte)>.elementor-element,
.e-con-inner:has(> .sb-preiskarte)>.elementor-element,
.e-con:has(> .sb-preiskarte)>.elementor-element,
.e-con-inner:has(> .sb-hero-bildkarte)>.elementor-element,
.e-con:has(> .sb-hero-bildkarte)>.elementor-element,
.e-con-inner:has(> .sb-illustration)>.elementor-element,
.e-con:has(> .sb-illustration)>.elementor-element,
.e-con-inner:has(> .sb-downloads)>.elementor-element,
.e-con:has(> .sb-downloads)>.elementor-element{
  width:auto!important;
  max-width:none!important;
  flex:none!important;
}

.e-con:has(> .sb-illustration){align-items:center;}
.e-con:has(> .sb-downloads){align-items:start;}


/* --- Generisches Raster-System für alle Elementor-Seiten -------------------
   Konvention: Jedes direkte Kind eines Raster-Containers bekommt die Klasse
   `sb-raster-<X>` (X = minmax-Wert in px). Elementor setzt Widget-Klassen auf
   den .elementor-element-Wrapper, deshalb greifen wir den Container per :has().
   Ergebnis: exakt das auto-fit-Verhalten des Originals, ohne feste Breakpoints. */

.e-con:has(> .sb-raster-170),.e-con-inner:has(> .sb-raster-170),
.e-con:has(> .sb-raster-220),.e-con-inner:has(> .sb-raster-220),
.e-con:has(> .sb-raster-240),.e-con-inner:has(> .sb-raster-240),
.e-con:has(> .sb-raster-250),.e-con-inner:has(> .sb-raster-250),
.e-con:has(> .sb-raster-260),.e-con-inner:has(> .sb-raster-260),
.e-con:has(> .sb-raster-280),.e-con-inner:has(> .sb-raster-280),
.e-con:has(> .sb-raster-300),.e-con-inner:has(> .sb-raster-300),
.e-con:has(> .sb-raster-320),.e-con-inner:has(> .sb-raster-320),
.e-con:has(> .sb-raster-340),.e-con-inner:has(> .sb-raster-340),
.e-con:has(> .sb-raster-380),.e-con-inner:has(> .sb-raster-380),
.e-con:has(> .sb-raster-420),.e-con-inner:has(> .sb-raster-420){
  display:grid!important;
  gap:clamp(16px,2vw,24px);
  align-items:stretch;
}

.e-con:has(> .sb-raster-170)>.elementor-element,.e-con-inner:has(> .sb-raster-170)>.elementor-element,
.e-con:has(> .sb-raster-220)>.elementor-element,.e-con-inner:has(> .sb-raster-220)>.elementor-element,
.e-con:has(> .sb-raster-240)>.elementor-element,.e-con-inner:has(> .sb-raster-240)>.elementor-element,
.e-con:has(> .sb-raster-250)>.elementor-element,.e-con-inner:has(> .sb-raster-250)>.elementor-element,
.e-con:has(> .sb-raster-260)>.elementor-element,.e-con-inner:has(> .sb-raster-260)>.elementor-element,
.e-con:has(> .sb-raster-280)>.elementor-element,.e-con-inner:has(> .sb-raster-280)>.elementor-element,
.e-con:has(> .sb-raster-300)>.elementor-element,.e-con-inner:has(> .sb-raster-300)>.elementor-element,
.e-con:has(> .sb-raster-320)>.elementor-element,.e-con-inner:has(> .sb-raster-320)>.elementor-element,
.e-con:has(> .sb-raster-340)>.elementor-element,.e-con-inner:has(> .sb-raster-340)>.elementor-element,
.e-con:has(> .sb-raster-380)>.elementor-element,.e-con-inner:has(> .sb-raster-380)>.elementor-element,
.e-con:has(> .sb-raster-420)>.elementor-element,.e-con-inner:has(> .sb-raster-420)>.elementor-element{
  width:auto!important;max-width:none!important;flex:none!important;
}

.e-con:has(> .sb-raster-170),.e-con-inner:has(> .sb-raster-170){grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));}
.e-con:has(> .sb-raster-220),.e-con-inner:has(> .sb-raster-220){grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));}
.e-con:has(> .sb-raster-240),.e-con-inner:has(> .sb-raster-240){grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
.e-con:has(> .sb-raster-250),.e-con-inner:has(> .sb-raster-250){grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));align-items:start;}
.e-con:has(> .sb-raster-260),.e-con-inner:has(> .sb-raster-260){grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
.e-con:has(> .sb-raster-280),.e-con-inner:has(> .sb-raster-280){grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
.e-con:has(> .sb-raster-300),.e-con-inner:has(> .sb-raster-300){grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.e-con:has(> .sb-raster-320),.e-con-inner:has(> .sb-raster-320){grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));}
.e-con:has(> .sb-raster-340),.e-con-inner:has(> .sb-raster-340){grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
.e-con:has(> .sb-raster-380),.e-con-inner:has(> .sb-raster-380){grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(24px,4vw,56px);}
.e-con:has(> .sb-raster-420),.e-con-inner:has(> .sb-raster-420){grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(24px,4vw,56px);align-items:center;}

/* Karten im Raster auf volle Höhe ziehen */
.sb-karte,.sb-leistungskarte,.sb-preiskarte,.sb-wertekarte{height:100%;}

/* --- Weitere Bausteine für die Unterseiten -------------------------------- */

/* Checklisten-Punkt mit grünem Häkchen */
.sb-check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--sb-text-sekundaer);}
.sb-check svg{flex:0 0 auto;margin-top:3px;}

/* Preistabelle / Preisstaffel */
.sb-tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
.sb-tabelle th,.sb-tabelle td{padding:12px 16px;border-bottom:1px solid var(--sb-grau-200);text-align:left;font-size:15px;}
.sb-tabelle th{font-family:var(--sb-font-headline);font-weight:600;font-size:14px;color:var(--sb-anthrazit);}

/* FAQ-Akkordeon (details/summary — funktioniert ohne JavaScript) */
.sb-faq{border:1px solid var(--sb-grau-200);border-radius:var(--sb-radius-md);background:var(--sb-weiss);margin-bottom:8px;}
.sb-faq>summary{
  cursor:pointer;list-style:none;padding:16px 20px;
  font-family:var(--sb-font-headline);font-weight:600;font-size:16px;color:var(--sb-anthrazit);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.sb-faq>summary::-webkit-details-marker{display:none;}
.sb-faq>summary::after{content:"";width:10px;height:10px;flex:0 0 auto;border-right:2px solid var(--sb-gruen);border-bottom:2px solid var(--sb-gruen);transform:rotate(45deg);transition:transform .15s ease;}
.sb-faq[open]>summary::after{transform:rotate(-135deg);}
.sb-faq>div{padding:0 20px 18px;font-size:15px;line-height:1.6;color:var(--sb-text-sekundaer);max-width:70ch;}

/* Download-Zeile (deaktiviert) */
.sb-download{
  display:flex;align-items:center;gap:14px;
  background:var(--sb-grau-100);border:1px dashed var(--sb-grau-300);
  border-radius:var(--sb-radius-md);padding:13px 16px;margin-bottom:8px;
}
.sb-download .sb-chip{
  margin-left:auto;font-size:13px;color:var(--sb-text-gedaempft);
  background:var(--sb-weiss);border:1px solid var(--sb-grau-200);
  border-radius:var(--sb-radius-sm);padding:5px 10px;white-space:nowrap;
}

/* Rechtsseiten: schmalerer Lesebereich */
.sb-rechtstext{max-width:720px;margin:0 auto;}
.sb-rechtstext h2{font-size:22px;margin:32px 0 10px;}
.sb-rechtstext p,.sb-rechtstext li{font-size:16px;line-height:1.65;color:var(--sb-text-sekundaer);}

/* Karten im Raster füllen die volle Höhe */
.sb-leistungskarte,.sb-preiskarte{height:100%;}
.sb-grid-auto--170{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));}
.sb-grid-auto--220{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));}
.sb-grid-auto--240{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
.sb-grid-auto--260{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
.sb-grid-auto--280{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
.sb-grid-auto--300{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.sb-grid-auto--320{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));}
.sb-grid-auto--340{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
.sb-grid-auto--380{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));}
.sb-grid-auto--420{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));}

/* Buttons im Original-Stil — auch auf Elementor-Buttons und reine <a>-Elemente */
.sb-btn-primaer .elementor-button,
a.sb-btn-primaer{
  background:var(--sb-aktion);
  color:#fff;
  font-family:var(--sb-font-headline);
  font-weight:700;
  font-size:16px;
  padding:14px 24px;
  border:1px solid var(--sb-aktion);
  border-radius:var(--sb-radius-md);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background-color .12s ease;
}
.sb-btn-primaer .elementor-button:hover,
a.sb-btn-primaer:hover{background:var(--sb-aktion-hover);border-color:var(--sb-aktion-hover);color:#fff;}

.sb-btn-sekundaer .elementor-button,
a.sb-btn-sekundaer{
  background:var(--sb-weiss);
  color:var(--sb-aktion);
  font-family:var(--sb-font-headline);
  font-weight:700;
  font-size:16px;
  padding:13px 23px;
  border:1px solid var(--sb-aktion);
  border-radius:var(--sb-radius-md);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background-color .12s ease;
}
.sb-btn-sekundaer .elementor-button:hover,
a.sb-btn-sekundaer:hover{background:var(--sb-gruen-50);color:var(--sb-aktion);}


/* Elementor-Wrapper der Buttons darf keinen eigenen Rahmen zeigen */
.elementor-element.sb-btn-primaer,
.elementor-element.sb-btn-sekundaer{
  background:none!important;
  border:0!important;
  padding:0!important;
  box-shadow:none!important;
}

/* Telefonnummern nie mitten in der Nummer umbrechen */
a[href^="tel:"],.sb-telefon{white-space:nowrap;}

/* Fußnote in den Preiskarten mit gleicher Laufweite wie die Nachbarkarten */
.sb-preiskarte p,.sb-preiskarte div{line-height:1.55;}

/* Preiskarte als vollflächiger Link */
a.sb-karte{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:box-shadow .12s ease,border-color .12s ease;}
a.sb-karte:hover{box-shadow:var(--sb-schatten-md);border-color:var(--sb-gruen);}

/* =========================================================================
   5. Header — grüne 3-px-Unterkante wie im Original
   ========================================================================= */

.site-header-wrap,
#masthead{border-bottom:3px solid var(--sb-gruen);}

.site-header-row .header-navigation .header-menu-container>ul>li>a{
  font-family:var(--sb-font-headline);
  font-weight:600;
  font-size:15px;
}

/* Aktiver Menüpunkt: grün + Unterstrich */
.header-navigation ul li.current-menu-item>a,
.header-navigation ul li.current-menu-ancestor>a,
.header-navigation ul li.current-page-ancestor>a{
  color:var(--sb-aktion)!important;
  box-shadow:inset 0 -2px 0 var(--sb-gruen);
}

/* =========================================================================
   6. Mobile Sticky-Aktionsleiste (Anrufen / Anfrage senden)
   ========================================================================= */

.sb-sticky-leiste{display:none;}

@media (max-width:767px){
  body{padding-bottom:64px;}

  .sb-sticky-leiste{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:60;
    padding:8px 12px;
    background:var(--sb-weiss);
    border-top:1px solid var(--sb-grau-200);
    box-shadow:var(--sb-schatten-lg);
  }

  .sb-sticky-leiste a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 12px;
    border-radius:var(--sb-radius-md);
    font-family:var(--sb-font-headline);
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    line-height:1.2;
  }

  .sb-sticky-leiste .sb-anrufen{
    color:var(--sb-aktion);
    background:var(--sb-weiss);
    border:1px solid var(--sb-aktion);
  }

  .sb-sticky-leiste .sb-anfrage{
    color:#fff;
    background:var(--sb-aktion);
    border:1px solid var(--sb-aktion);
  }

  .sb-sticky-leiste .sb-anrufen:hover{background:var(--sb-gruen-50);}
  .sb-sticky-leiste .sb-anfrage:hover{background:var(--sb-aktion-hover);}
}

/* =========================================================================
   7. Barrierefreiheit — sichtbare Fokuszustände & Skip-Link
   ========================================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--sb-gruen);
  outline-offset:2px;
  border-radius:2px;
  box-shadow:var(--sb-fokus-ring);
}

.sb-skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:999;
  padding:12px 20px;
  background:var(--sb-weiss);
  color:var(--sb-aktion);
  font-family:var(--sb-font-headline);
  font-weight:700;
  border-radius:var(--sb-radius-md);
  box-shadow:var(--sb-schatten-md);
}
.sb-skip-link:focus{left:16px;top:16px;}

/* =========================================================================
   8. Formular — Zustände wie im Original
   ========================================================================= */

.sb-formular label{
  font-family:var(--sb-font-text);
  font-size:14px;
  font-weight:600;
  color:var(--sb-anthrazit);
}

.sb-formular input,
.sb-formular select,
.sb-formular textarea{
  font-family:var(--sb-font-text);
  font-size:16px;
  min-height:44px;
  border:1px solid var(--sb-grau-300);
  border-radius:var(--sb-radius-sm);
}

.sb-formular .sb-pflicht{color:var(--sb-fehler);}
.sb-formular .sb-feldfehler{font-size:13px;color:var(--sb-fehler);}

.sb-meldung-fehler{
  background:var(--sb-fehler-50);
  border:1px solid var(--sb-fehler);
  border-radius:var(--sb-radius-md);
  padding:12px 16px;
  color:var(--sb-fehler);
}

.sb-meldung-erfolg{
  background:var(--sb-gruen-50);
  border:1px solid var(--sb-gruen-100);
  border-radius:var(--sb-radius-md);
  padding:12px 16px;
  color:var(--sb-erfolg);
}

/* =========================================================================
   9. Bewegungsreduzierung respektieren
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* =========================================================================
   10. Footer nach Original-Vorlage
   ========================================================================= */

.site-footer,.site-footer-wrap{border-top:3px solid var(--sb-gruen);}

.sb-footer{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(24px,3vw,40px);
  max-width:1200px;
  margin:0 auto;
  text-align:left;
}
.sb-footer a{color:var(--sb-text-auf-dunkel);text-decoration:none;}
.sb-footer a:hover{color:var(--sb-gruen-auf-dunkel);}

.sb-footer-titel{
  font-family:var(--sb-font-headline);
  font-size:13px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--sb-gruen-auf-dunkel);
  margin:0 0 12px;
}
.sb-footer-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;}
.sb-footer-text{font-size:14px;line-height:1.6;color:var(--sb-text-sekundaer-auf-dunkel);max-width:34ch;}
.sb-footer-kontakt{font-size:15px;line-height:1.6;color:var(--sb-text-sekundaer-auf-dunkel);display:flex;flex-direction:column;gap:10px;}
.sb-footer-plakette{background:#fff;border-radius:var(--sb-radius-md);padding:12px;display:inline-block;width:fit-content;margin-bottom:14px;}
.sb-footer-plakette img{height:110px;width:auto;display:block;}

.sb-footer-unten{
  max-width:1200px;margin:0 auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--sb-text-sekundaer-auf-dunkel);
  text-align:left;
}
.sb-footer-unten a{color:inherit;text-decoration:none;}
.sb-footer-unten a:hover{color:var(--sb-gruen-auf-dunkel);}
.sb-footer-rechtliches{display:flex;gap:20px;flex-wrap:wrap;}

@media (max-width:767px){
  .sb-footer-unten{flex-direction:column;align-items:flex-start;}
}

/* =========================================================================
   11. Korrekturen aus der Endabnahme
   ========================================================================= */

/* Datenschutz-Checkbox im Kontaktformular: gleichmäßiger Zeilenabstand */
.sb-formular .ff-el-form-check,
.sb-formular .ff-el-form-check-label{line-height:1.5;}
.sb-formular .ff-el-form-check-label{display:flex!important;align-items:flex-start;gap:10px;font-size:14px;color:var(--sb-text-sekundaer);cursor:pointer;}
.sb-formular .ff-el-form-check-label input[type="checkbox"]{margin-top:3px;flex:0 0 auto;}
.sb-formular .ff-el-form-check-label span{display:block;line-height:1.5;}

/* Auswahlliste „Art der Anfrage": gewählter Wert in normaler Textfarbe,
   damit er nicht wie ein unausgefüllter Platzhalter wirkt */
.sb-formular select{color:var(--sb-text)!important;}

/* Absende-Button im Original-Stil */
.sb-formular .ff-btn-submit{
  background:var(--sb-aktion)!important;
  color:#fff!important;
  border:0!important;
  font-family:var(--sb-font-headline)!important;
  font-weight:700!important;
  font-size:16px!important;
  padding:14px 28px!important;
  border-radius:var(--sb-radius-md)!important;
  min-height:48px;
}
.sb-formular .ff-btn-submit:hover{background:var(--sb-aktion-hover)!important;}

/* Fehler- und Erfolgsmeldungen im Markenstil */
.sb-formular .ff-el-is-error .text-danger,
.sb-formular .error{color:var(--sb-fehler)!important;font-size:13px;}
.sb-formular .ff-message-success{
  background:var(--sb-gruen-50);border:1px solid var(--sb-gruen-100);
  border-radius:var(--sb-radius-lg);padding:28px;text-align:center;color:var(--sb-erfolg);
}

/* Mobiler Header bleibt beim Scrollen oben — wie auf dem Desktop */
@media (max-width:1024px){
  .site-header-wrap,
  #masthead{position:sticky;top:0;z-index:50;background:var(--sb-weiss);}
  .admin-bar .site-header-wrap,
  .admin-bar #masthead{top:0;}
}

/* =========================================================================
   12. Sprungziele (Anker) — sanftes Scrollen, Header verdeckt nichts
   ========================================================================= */

html{scroll-behavior:smooth;}

/* Der sticky Header ist ca. 83 px hoch (80 px + 3 px Markenlinie).
   Ohne diesen Abstand würde die Überschrift beim Sprung darunter verschwinden. */
:target,
#leistungen,
[id^="sb-anker"]{scroll-margin-top:100px;}

/* Partnerlogos: große Klickfläche, ruhiger Hover */
.sb-partner-link{transition:background-color .18s ease;}
.sb-partner-link:hover,.sb-partner-link:focus-visible{background:var(--sb-grau-50,#F7F9F6);}


/* ============================================================
   Downloads — aktive Einträge (verlinkte PDF)
   ergänzt 26.08.2026
   ============================================================ */
.sb-download-gruppe{font-family:var(--sb-font-headline);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sb-text-gedaempft);margin:26px 0 10px;}
.sb-download-gruppe:first-child{margin-top:0;}
a.sb-download{background:var(--sb-weiss);border:1px solid var(--sb-grau-200);text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease;}
a.sb-download:hover{border-color:var(--sb-gruen);box-shadow:var(--sb-schatten-sm);}
a.sb-download:focus-visible{outline:none;border-color:var(--sb-gruen);box-shadow:var(--sb-fokus-ring);}
a.sb-download .sb-download-text{min-width:0;}
a.sb-download .sb-download-titel{display:block;font-weight:600;font-size:15px;color:var(--sb-anthrazit);}
a.sb-download .sb-download-meta{display:block;font-size:13px;color:var(--sb-text-gedaempft);font-variant-numeric:tabular-nums;}
a.sb-download .sb-chip{color:var(--sb-gruen-dunkel);border-color:var(--sb-gruen);font-weight:600;}

/* lange Wortungetueme wie "Mietschuldenfreiheitsbescheinigung" duerfen auf schmalen Displays umbrechen */
a.sb-download .sb-download-titel{overflow-wrap:anywhere;hyphens:auto;}
a.sb-download .sb-download-text{flex:1 1 auto;}

/* ============================================================
   Mobilkorrekturen (bis 767 px)              ergaenzt 26.08.2026
   ============================================================ */
@media (max-width:767px){
  /* Startseite: Logo-Bildkarte vor den Text ziehen */
  .sb-hero-bildkarte{order:-1 !important;margin-bottom:24px !important;}

  /* Bildkarten mit Schmuckflaeche + Plakette (Startseite-Hero, Ueber uns):
     Schmuckflaeche ausblenden, Plakette unter die Karte stellen.
     Die :has()-Bedingung sorgt dafuer, dass nur die dreiteiligen
     Wrapper getroffen werden - reine Illustrationsbaender bleiben unberuehrt. */
  .sb-hero-bildkarte > div:has(> div:nth-child(3)),
  .sb-illustration > div:has(> div:nth-child(3)){margin:0 !important;}
  .sb-hero-bildkarte > div:has(> div:nth-child(3)) > div:first-child,
  .sb-illustration > div:has(> div:nth-child(3)) > div:first-child{display:none !important;}
  .sb-hero-bildkarte > div > div:nth-child(3),
  .sb-illustration > div > div:nth-child(3){position:static !important;margin:12px 0 0 !important;width:auto !important;}

  /* Illustrationsbaender ganz zeigen statt extrem zu beschneiden */
  .sb-illustration > div:has(> svg){height:auto !important;}
  .sb-illustration > div > svg{width:100% !important;height:auto !important;display:block;}

  /* Mindest-Touchziele */
  .menu-toggle-open.drawer-toggle{min-width:44px !important;min-height:44px !important;}
  .sb-footer-liste a,
  .sb-footer-rechtliches a{display:inline-block;padding:3px 0;}
}

/* Downloads: auf schmalen Displays rutscht der Chip unter den Titel */
@media (max-width:520px){
  a.sb-download{flex-wrap:wrap;row-gap:10px;}
  a.sb-download .sb-download-text{flex:1 1 100%;}
  a.sb-download .sb-chip{margin-left:34px;}
}