/* ==========================================================================
   JA Dach & Sanierungen GmbH — Designebene
   --------------------------------------------------------------------------
   Vorbild: Aufbau und Rhythmus der SG-Solar-Seite (localhost:8080), die auf
   demselben Zingbox-/Helix-Template laeuft. Uebernommen wird ausschliesslich
   die DESIGNSPRACHE — kein Inhalt, keine Kontaktdaten, keine fremden Marken.

   Farben: Das JA-Dach-Logo enthaelt exakt zwei Farben. Nachgemessen im SVG:

        #005689   Blau     — tragende Marke, Navigation, Flaechen, Aktionen
        #F3943E   Orange   — Logo-Akzent, sparsam als Hervorhebung

   Dazu nur neutrale Toene aus der verbindlichen Markenvorgabe (#1F242C dunkel,
   #565872 Text, #F3F7FA Flaeche). Es werden KEINE weiteren Farben erfunden —
   insbesondere kein Navy, wie es eine Vorfassung dieser Datei eingefuehrt hatte.

   Aufbau
     1. Tokens
     2. Basis und Typografie
     3. Layoutbreiten
     4. Header, Navigation, Anfrage-Schaltflaeche
     5. Offcanvas
     6. Schaltflaechen
     7. Abschnitte und Ueberschriften
     8. Hero
     9. Leistungen
    10. Partner
    11. Anfrage-Abschnitt
   12. Formular
   12b. Anfrageseite
   12c. Kontaktseite
   12d. Karriereseite
    13. Rechtstexte
    14. Footer
    15. Zugaenglichkeit und Bewegung

   Mobile first: Grundregeln gelten ab 320px, Erweiterungen ausschliesslich
   ueber min-width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Logofarben — nachgemessen, nicht geschaetzt */
  --jd-blue:        #005689;
  --jd-blue-dark:   #00426A;
  --jd-blue-soft:   rgba(0, 86, 137, 0.08);
  --jd-orange:      #F3943E;
  --jd-orange-dark: #C9741F;

  /* Dritter Ton derselben Logofarbe, ausschliesslich fuer orange SCHRIFT auf
     Weiss. Nachgerechnet: #F3943E erreicht gegen Weiss 2.3:1, #C9741F 3.5:1 -
     beides zu wenig fuer Text (gefordert 4.5:1). #AD6212 liegt bei 4.7:1 und
     ist derselbe Farbton, nur weiter abgedunkelt. Fuer Flaechen und Linien
     bleibt es bei --jd-orange bzw. --jd-orange-dark. */
  --jd-orange-text: #AD6212;

  /* Neutrale Toene aus der Markenvorgabe */
  --jd-ink:         #1F242C;
  --jd-ink-soft:    #2B3440;
  --jd-text:        #565872;
  --jd-muted:       #6E7186;
  --jd-surface:     #F3F7FA;
  --jd-line:        #DCE6ED;
  --jd-white:       #FFFFFF;

  /* Rhythmus: waechst mit der Breite, wie beim Vorbild */
  --jd-gutter:      20px;
  --jd-section:     56px;
  --jd-header:      68px;

  /* Hoehe der oberen Kontaktleiste (#sp-top). Nachgemessen: 17px Textzeile
     plus 10px Polster oben und unten. Die Logoflaeche im Header greift genau
     um diesen Betrag nach oben durch die Leiste hindurch. */
  --jd-topbar:      37px;

  --jd-radius:      14px;
  --jd-radius-sm:   10px;
  --jd-radius-btn:  7px;   /* Eckenrundung aller Schaltflaechen, Vorbild 7px */
  --jd-tap:         44px;
  --jd-shadow:      0 14px 40px rgba(31, 36, 44, 0.10);
  --jd-shadow-soft: 0 6px 18px rgba(31, 36, 44, 0.06);

  --jd-font:        "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --jd-font-head:   "Jost", "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Templatevariablen umbelegen. custom.css setzt hier Zingbox-Fremdfarben
     (Violett, Gruen, Fremdorange); diese Ebene laedt danach.
     Bewusst alle drei auf Blau: mehrere Templateregeln kombinieren diese
     Variablen fest mit weisser Schrift. Orange als Flaeche wuerde dort den
     Kontrast unterschreiten. Orange wird deshalb nur dort gesetzt, wo diese
     Datei auch die Schriftfarbe kontrolliert. */
  --maincolor:   #005689;
  --secondcolor: #005689;
  --thirdcolor:  #005689;
}

@media (min-width: 576px) {
  :root { --jd-gutter: 28px; --jd-section: 68px; }
}

@media (min-width: 768px) {
  :root { --jd-gutter: 32px; --jd-section: 84px; }
}

@media (min-width: 1200px) {
  :root { --jd-section: 104px; }
}

/* --------------------------------------------------------------------------
   2. Basis und Typografie
   -------------------------------------------------------------------------- */
html {
  min-width: 320px;
  font-size: 16px;
  scroll-padding-top: calc(var(--jd-header) + 12px);
}

body {
  min-width: 320px;
  overflow-x: clip;
  font-family: var(--jd-font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--jd-text);
  background: var(--jd-white);
  -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe, table { max-width: 100%;}

/* Lange deutsche Komposita duerfen das Layout nicht sprengen. */
h1, h2, h3, h4, h5, h6, p, a, li { overflow-wrap: break-word; }
h1, h2, h3 { text-wrap: balance; }

h1, h2, h3, h4, h5, h6,
.sppb-addon-title,
.sp-page-title .sp-page-title-heading {
  font-family: var(--jd-font-head);
  color: var(--jd-ink);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-top: 0;
}

/* Der Page Builder setzt .sppb-addon-title auf display:inline-block. Ein
   solches Element richtet sich nach seinem Inhalt statt nach der Spalte:
   "Sanierungsleistungen" wurde bei 40px 381px breit und ragte aus einer
   197px schmalen Spalte heraus. Als Block mit Silbentrennung bricht es
   sauber um — bei langen deutschen Komposita der Normalfall. */
.sppb-addon-title {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* KEINE automatische Silbentrennung in Ueberschriften. Sie zerlegte den
   Firmennamen mitten im Wort zu "JA Dach & Sanie-rungen GmbH". Ueberschriften
   brechen an Wortgrenzen; nur wenn ein einzelnes Wort breiter als die Spalte
   ist, greift der Notumbruch aus overflow-wrap. */
h1, h2, h3, h4, h5, h6, .sppb-addon-title {
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Fluide Groessen: kein Sprung an Breakpoints, nie zu gross auf schmalen
   Geraeten. */
h1, .sppb-addon-title.sppb-title-heading {
  font-size: clamp(2rem, 7.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

h2 { font-size: clamp(1.6rem, 5.4vw, 2.6rem); line-height: 1.1; }
h3 { font-size: clamp(1.2rem, 3.4vw, 1.5rem); }
h4 { font-size: clamp(1.05rem, 2.6vw, 1.2rem); }

/* Die Builder-Daten setzen je Seite eigene Schriftgroessen ueber Inline-Regeln
   mit ID-Selektor. Gemessen ergab das fuer die Seitenueberschrift 50px, 54px,
   68px und 72px — vier Groessen fuer denselben Zweck. Damit die Seiten wie ein
   System wirken, wird die H1 zentral normiert. Das betrifft ausschliesslich
   die Groesse; Text, Farbe und Ausrichtung bleiben im Backend einstellbar. */
#sp-main-body h1,
#sp-main-body h1.sppb-addon-title {
  font-size: clamp(2.2rem, 6.6vw, 4.1rem) !important;   /* Vorbild: 65px */
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

/* Dasselbe Problem beim Fliesstext: Die Builder-Daten setzen je Addon eigene
   Groessen, wodurch nebeneinanderstehende Absaetze unterschiedlich gross
   wirkten. Der Vorlage folgend eine Groesse, die mit der Breite waechst -
   17px auf schmalen Geraeten, 20px auf dem Desktop.
   Der Footer ist ausgenommen und behaelt seine kleinere Schrift. */
#sp-main-body p,
#sp-main-body li,
#sp-main-body .sppb-addon-text,
#sp-main-body .sppb-addon-text p,
#sp-main-body .sppb-addon-content > p {
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem) !important;
  line-height: 1.75 !important;   /* Vorbild: 1.79 - luftig genug fuer 20px */
}

/* Ueberschriften der zweiten und dritten Ebene ebenfalls vereinheitlichen. */
#sp-main-body h2,
#sp-main-body h2.sppb-addon-title {
  font-size: clamp(1.75rem, 3.4vw, 2.9rem) !important;
  line-height: 1.1 !important;
}

#sp-main-body h3,
#sp-main-body h3.sppb-addon-title {
  font-size: clamp(1.25rem, 1.6vw, 1.6rem) !important;
  line-height: 1.25 !important;
}

p { margin-top: 0; }

a {
  color: var(--jd-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover, a:focus { color: var(--jd-blue-dark); }

.text-primary { color: var(--jd-blue) !important; }

hr, .sppb-divider { border-color: var(--jd-line); }

/* --------------------------------------------------------------------------
   3. Layoutbreiten
   --------------------------------------------------------------------------
   Der Page Builder setzt auf Bootstrap-Zeilen mit negativen Aussenabstaenden.
   Ohne Innenabstand am Container ragten diese Zeilen auf Mobilgeraeten
   nachweislich 20px ueber den rechten Rand hinaus. Der Container bekommt
   deshalb den Gutter als Innenabstand.
   -------------------------------------------------------------------------- */
#sp-main-body { padding: 0; }

/* WICHTIG: nur die OBERSTE Ebene bekommt den Gutter.
   Der Page Builder verschachtelt Zeilen; ein Innenabstand auf jeder Ebene
   summiert sich. Gemessen ohne diese Einschraenkung: verschachtelte Zeilen
   starteten bei 20px, 63px und 173px und ragten rechts aus dem Viewport. */
#sp-main-body .sppb-section > .sppb-row-container,
#sp-main-body .sppb-section > .sppb-container-inner {
  width: 100%;
  max-width: none;
  padding-right: var(--jd-gutter);
  padding-left: var(--jd-gutter);
}

/* Verschachtelte Container erben den Abstand nicht noch einmal.
   Wichtig ist die letzte Gruppe: Der Builder verschachtelt ganze SEKTIONEN in
   Spalten. Deren Container ist ebenfalls direktes Kind einer .sppb-section und
   haette den Gutter sonst ein zweites Mal bekommen. */
#sp-main-body .sppb-row-container .sppb-row-container,
#sp-main-body .sppb-row-container .sppb-container-inner,
#sp-main-body .sppb-column .sppb-row-container,
#sp-main-body .sppb-addon .sppb-row-container,
#sp-main-body .sppb-column-addons .sppb-section > .sppb-row-container,
#sp-main-body .sppb-column-addons .sppb-section > .sppb-container-inner {
  padding-right: 0;
  padding-left: 0;
  max-width: none;
}

/* Verschachtelte Sektionen tragen aus der Zingbox-Vorlage prozentuale
   Seitenpolster (gemessen 37px links, 60px rechts - asymmetrisch und damit
   ohnehin unbeabsichtigt). Auf einem 390px breiten Geraet fressen sie fast
   100px und quetschen den Inhalt auf ein Drittel der Breite; auf 1280px
   blieben nur 66% nutzbar. Der Aussenabstand kommt bereits vom Gutter der
   obersten Ebene, deshalb entfallen sie auf allen Breiten. */
#sp-main-body .sppb-column-addons .sppb-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 1400px) {
  #sp-main-body .sppb-section > .sppb-row-container,
  #sp-main-body .sppb-section > .sppb-container-inner {
    max-width: 1320px;
    margin-inline: auto;
  }
}

.sppb-section { overflow-x: clip; }

/* Zeilenabstand statt zusammengequetschter Spalten auf Mobilgeraeten. */
#sp-main-body .sppb-row { row-gap: 22px; }

@media (min-width: 992px) {
  #sp-main-body .sppb-row { row-gap: 32px; }
}

/* --------------------------------------------------------------------------
   4. Header, Navigation, Anfrage-Schaltflaeche
   -------------------------------------------------------------------------- */
/* Kontaktleiste ueber der Navigation. Der Aufbau steht bereits: erste Spalte
   frei (dort liegt die weisse Logoflaeche), beide Angaben linksbuendig
   direkt daneben. Nachgemessen stiessen Adresse und E-Mail jedoch ohne
   jeden Abstand aneinander — die Zeile las sich wie ein einziger Text.
   Im Vorbild liegen rund 17px zwischen Adressende und Briefsymbol. */
#sp-top .inner {
  align-items: center;
  column-gap: 18px;
}

#sp-header {
  position: sticky;
  top: 0;
  z-index: 999;
  min-height: var(--jd-header);
  background: var(--jd-white);
  border-bottom: 1px solid var(--jd-line);
  box-shadow: none;
}

#sp-header > .container > .container-inner > .row,
#sp-header > .container > .row,
#sp-header > .row {
  min-height: var(--jd-header);
  flex-wrap: nowrap;
  align-items: center;
}

#sp-logo {
  min-width: 0;
  flex: 1 1 auto;
}

/* Der Logo-Container aus der Zingbox-Vorlage bringt drei Eigenschaften mit,
   die zusammen einen weissen Kasten erzeugen, der oben UND unten aus dem
   Header herausragt:
       background: #FFFFFF;  padding: 50px 0;  position: absolute;
   Gemessen ergab das eine Box von 176px Hoehe bei 94px Headerhoehe, beginnend
   19px oberhalb des Headers. Im Ergebnis schwebte eine weisse Karte ueber dem
   dunklen Hero. Der Container wird deshalb in den normalen Fluss geholt und
   von Flaeche und Polster befreit.

   Zusaetzlich wird die Klickflaeche auf den Inhalt begrenzt, damit sie auf
   schmalen Geraeten nicht unter den Menue-Button reicht.

   Das gilt fuer schmale Geraete, auf denen es keine Kontaktleiste gibt.
   Ab 992px wird die weisse Flaeche weiter unten bewusst wieder aufgebaut —
   dort aber nicht mit einem geschaetzten Versatz, sondern fest an Leisten-
   und Headerkante verankert. Siehe den Block "Logoflaeche" weiter unten. */
#sp-header .logo {
  position: relative !important;
  background: transparent !important;
  padding: 0 !important;
  /* custom.css zieht den Container mit "margin: -103px 0 0" nach oben —
     der eigentliche Grund, warum das Logo ueber die Headerkante ragte. */
  margin: 0 !important;
  width: auto !important;
  height: auto !important;

  /* Der Container trug zusaetzlich "box-shadow: 0 5px 10px rgba(0,0,0,.07)".
     Auf dem weissen Header zeichnete dieser Schatten ein weiches graues
     Rechteck um das Logo — es sah aus, als klebte das Logo auf einer eigenen
     Karte. Ein Logo braucht keinen Schlagschatten. */
  box-shadow: none !important;
  border: 0 !important;
}

#sp-header .logo,
#sp-header .logo > a,
#sp-header .sp-default-logo {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
}

/* Die Logospalte war durch die absolute Positionierung auf Hoehe 0
   zusammengefallen. Sie traegt das Logo jetzt selbst und zentriert es.

   Das "!important" ist noetig, weil custom.css mit
       #sp-header > .container > .container-inner > .row > div > .sp-column
       { display: block !important }
   die Bootstrap-Klasse "d-flex" der Spalte aushebelt. Ohne die Korrektur
   greift "align-items: center" nicht und das Logo klebt an der Oberkante
   der Kopfzeile - auf schmalen Geraeten gemessen 0px Luft oben gegen 19px
   unten. Zwei ID-Selektoren schlagen den einen aus custom.css. */
#sp-header #sp-logo,
#sp-header #sp-logo > .sp-column {
  display: flex !important;
  align-items: center;
  min-height: var(--jd-header);
}

/* Logogroesse am Vorbild ausgerichtet: dort 50px hoch auf schmalen Geraeten
   und 76px auf dem Desktop. Die Vorfassung blieb mit 42/54px deutlich
   darunter, wodurch das Logo im Header verloren wirkte. */
#sp-header .logo img,
#sp-header .logo-image,
.offcanvas-menu .logo-image {
  width: auto !important;
  height: auto !important;
  max-width: 230px;
  max-height: 50px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Logoflaeche ab 992px
   --------------------------------------------------------------------------
   Aufbau nach dem Vorbild, nachgemessen bei 1320px Container:

       Kontaktleiste            37px hoch, farbig ueber die volle Breite
       Navigationszeile         93px hoch, weiss
       weisse Logoflaeche      300px breit (= Breite der Logospalte),
                               reicht durch beide Baender hindurch bis an
                               die Seitenoberkante
       Logo                     90px hoch, mittig in dieser Flaeche
       erster Menuepunkt        rund 33px rechts neben der Flaeche

   Verankerung statt Schaetzung: Die Flaeche sitzt absolut in der Logospalte
   und wird oben um genau die Leistenhoehe hochgezogen, unten sitzt sie
   buendig auf der Headerunterkante. Aendert sich die Headerhoehe, wandert
   sie mit; nur die Leistenhoehe ist ein Zahlenwert (--jd-topbar).

   Voraussetzung ist, dass die Logospalte die volle Headerhoehe einnimmt,
   deshalb die Umstellung der Kopfzeile auf "stretch". custom.css setzt dort
   "center" mit !important, das laesst sich nur ebenso ueberstimmen. Die
   beiden anderen Spalten behalten ihre mittige Ausrichtung: ihre
   Inhaltsboxen uebernehmen die Hoehe und zentrieren selbst. */
@media (min-width: 992px) {
  #sp-header > .container > .container-inner > .row,
  #sp-header > .container > .row,
  #sp-header > .row { align-items: stretch !important; }

  /* Nur die Logospalte braucht die volle Hoehe. Menue und Schaltflaeche
     behalten ihre mittige Ausrichtung, sonst haengt die Schaltflaeche an
     der Oberkante. */
  #sp-header #sp-menu,
  #sp-header #sp-position1 { align-self: center; }

  #sp-header #sp-logo,
  #sp-header #sp-logo > .sp-column {
    align-items: stretch;
    align-self: stretch;
    min-height: 0;
  }

  /* Die Spalte traegt die Flaeche nur noch als Bezugsrahmen: ihr einziger
     Inhalt ist absolut positioniert, ohne feste Breite fiele sie deshalb
     auf 0 zusammen und die Flaeche mit ihr. */
  #sp-header #sp-logo > .sp-column {
    position: relative;
    width: 100%;
  }

  #sp-header .logo {
    position: absolute !important;
    top: calc(-1 * var(--jd-topbar));
    right: 0;
    bottom: 0;
    left: 0;
    width: auto !important;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--jd-white) !important;
    z-index: 3;
  }

  #sp-header .logo img,
  #sp-header .logo-image { max-width: 100%; max-height: 90px; }

  /* Beim Scrollen fixiert das Template die Kopfzeile (Klasse
     "header-sticky"). Oberhalb liegt dann keine Kontaktleiste mehr, sondern
     der Bildschirmrand. Die Flaeche endet deshalb buendig mit der Kopfzeile,
     sonst wuerde das Logo oben abgeschnitten. */
  #sp-header.header-sticky .logo { top: 0; }

  #sp-header.header-sticky .logo img,
  #sp-header.header-sticky .logo-image { max-height: 64px; }
}

/* Hauptnavigation: ruhige Schrift, Akzent als Unterstreichung statt Flaeche. */
/* Einheitlich 18px/600 wie beim Vorbild. Ohne !important setzen einzelne
   Menuepunkte eigene Groessen durch - gemessen 17px, 17px und 18px
   nebeneinander in derselben Leiste. */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
#sp-header.header-sticky .sp-megamenu-parent > li > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.current-item > a {
  font-family: var(--jd-font-head) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--jd-ink) !important;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li > a:focus-visible,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.current-item > a {
  color: var(--jd-blue) !important;
  text-decoration-color: var(--jd-orange);
}

/* Der waagerechte Abstand der Menuepunkte bleibt, wie das Template ihn
   setzt: 20px rechtes plus 14px linkes Polster ergeben nachgemessen 33px
   zwischen den Texten - genau der Wert des Vorbilds. Der erste Punkt hat
   kein linkes Polster, sein Text beginnt also 20px neben der Logoflaeche. */

/* Alte Markergeometrie des Templates entfernen — die Unterstreichung folgt
   jetzt dem Text. */
.sp-megamenu-parent > li > a::before,
.sp-megamenu-parent > li > a::after { content: none !important; }

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: var(--jd-white);
  border: 1px solid var(--jd-line);
  border-radius: var(--jd-radius-sm);
  box-shadow: var(--jd-shadow);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { color: var(--jd-ink); }

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a { color: var(--jd-blue); }

/*  Anfrage-Schaltflaeche im Header.
    Vorgefunden: transparenter Grund, weisse Schrift, weisser Rahmen — auf dem
    weissen Header ergab das 1:1 Kontrast, der Text war unsichtbar. Sie wird
    zur einzigen grossflaechig orangen Stelle der Seite. Dunkler Text auf dem
    Logo-Akzent ergibt rund 6,8:1 und ist damit auch fuer Fliesstext sicher. */
#sp-position1 .sppb-btn,
#sp-position1 .request-button,
#sp-position1 a.sppb-btn {
  --secondcolor: #F3943E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 60px;              /* Vorbild: 60px hoch, nicht 44px */
  padding: 14px 26px;
  background: var(--jd-orange) !important;
  border: 1px solid var(--jd-orange) !important;
  border-radius: 7px !important; /* Vorbild: 7px */
  color: var(--jd-ink) !important;
  font-family: var(--jd-font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

#sp-position1 .sppb-btn:hover,
#sp-position1 .sppb-btn:focus-visible,
#sp-position1 a.sppb-btn:hover,
#sp-position1 a.sppb-btn:focus-visible {
  background: var(--jd-ink) !important;
  border-color: var(--jd-ink) !important;
  color: var(--jd-white) !important;
}

/* Sichtbarkeit steuert das Template ueber die Bootstrap-Klassen
   "d-none d-sm-none d-md-block" - also ab 768px. Diese Klassen tragen
   !important und lassen sich per ID-Selektor nicht ueberstimmen; ein
   entsprechender Versuch blieb wirkungslos. Das entspricht ohnehin dem
   Vorbild, das die Schaltflaeche ab derselben Breite neben dem Menue-Button
   zeigt. Hier wird deshalb nur die Ausrichtung gesetzt. */
#sp-position1 { justify-content: flex-end; align-items: center; }

/* Die Schaltflaeche steckt in einem Builder-Modul, dessen Spalte 15px
   Rinne mitbringt. Dadurch endete sie 12px vor der Containerkante, waehrend
   die Logoflaeche links buendig an ihr sitzt — die Kopfzeile stand sichtbar
   schief. Im Vorbild sind beide Kanten symmetrisch. Betrifft nur dieses
   eine Modul. */
#sp-position1 .sppb-row-container { padding-left: 0; padding-right: 0; }
#sp-position1 .sppb-row { margin-left: 0; margin-right: 0; }
#sp-position1 [class*="sppb-col-"] { padding-left: 0; padding-right: 0; }

/* --------------------------------------------------------------------------
   5. Offcanvas
   -------------------------------------------------------------------------- */
/* Der Menue-Button traegt im Template die Bootstrap-Klasse "d-lg-none" und
   gehoert damit ausschliesslich auf schmale Geraete. Eine Vorfassung dieser
   Datei setzte "display: grid !important" ohne Breitenbindung und hebelte das
   aus - der Burger erschien dadurch auch auf dem Desktop NEBEN der ohnehin
   sichtbaren Hauptnavigation. Die Sichtbarkeit wird deshalb ausdruecklich an
   die Breite gebunden. */
@media (max-width: 991.98px) {
  #offcanvas-toggler {
    display: grid !important;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: var(--jd-radius-sm);
    color: var(--jd-blue);
    touch-action: manipulation;
  }
}

@media (min-width: 992px) {
  #offcanvas-toggler { display: none !important; }
}

#offcanvas-toggler > .fa,
#offcanvas-toggler > .fas,
#offcanvas-toggler > i,
#offcanvas-toggler .burger-icon > span { color: var(--jd-blue); background-color: currentColor; }

#offcanvas-toggler:hover,
#offcanvas-toggler:focus-visible { color: var(--jd-blue-dark); }

.offcanvas-menu {
  width: min(88vw, 360px);
}

body.ltr.offcanvs-position-right:not(.offcanvas-active) .offcanvas-menu {
  right: calc(-1 * min(88vw, 360px));
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span,
.offcanvas-menu .offcanvas-inner ul.menu > li > a {
  display: flex;
  align-items: center;
  min-height: var(--jd-tap);
  font-family: var(--jd-font-head);
  font-weight: 500;
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--jd-line);
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li.active > a {
  box-shadow: inset 3px 0 0 0 var(--jd-orange);
  padding-left: 12px;
}

/* --------------------------------------------------------------------------
   6. Schaltflaechen
   --------------------------------------------------------------------------
   Auf Mobilgeraeten volle Breite mit sicherer Tippflaeche, ab 576px wieder
   inhaltsbreit — genau wie beim Vorbild.
   -------------------------------------------------------------------------- */
body .sppb-btn,
body .sppb-sp-slider-button .sp-slider-btn-text,
input[type="submit"],
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: var(--jd-radius-sm);
  font-family: var(--jd-font-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  white-space: normal;
  text-decoration: none;
  box-shadow: none;
  touch-action: manipulation;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

@media (min-width: 576px) {
  body .sppb-btn,
  body .sppb-sp-slider-button .sp-slider-btn-text,
  input[type="submit"] { width: auto; }
}

.btn-primary,
.sppb-btn-primary,
body .sppb-btn.sppb-btn-primary {
  background-color: var(--jd-blue) !important;
  border: 1px solid var(--jd-blue) !important;
  color: var(--jd-white) !important;
}

.btn-primary:hover, .btn-primary:focus-visible,
.sppb-btn-primary:hover, .sppb-btn-primary:focus-visible {
  background-color: var(--jd-blue-dark) !important;
  border-color: var(--jd-blue-dark) !important;
  color: var(--jd-white) !important;
}

/* Kontur statt Flaeche — der ruhige Zweitrang. */
.sppb-btn-secondary,
body .sppb-btn.sppb-btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--jd-blue) !important;
  color: var(--jd-blue) !important;
}

.sppb-btn-secondary:hover,
.sppb-btn-secondary:focus-visible {
  background-color: var(--jd-blue) !important;
  color: var(--jd-white) !important;
}

/* Der Anfrage-CTA im Inhalt. Die Builder-Daten setzen den Hintergrund ueber
   "background: var(--secondcolor) !important". Statt diese Regel per
   Spezifitaet zu ueberbieten, wird die Variable lokal umbelegt — die
   vorhandene Builder-Regel loest dann selbst den Akzent auf und bleibt im
   Backend unveraendert bearbeitbar. */
.request-button,
a.sppb-btn.request-button,
.jd-cta {
  --secondcolor: #F3943E;
  background-color: var(--jd-orange) !important;
  border-color: var(--jd-orange) !important;
  color: var(--jd-ink) !important;
  font-weight: 600;
}

.request-button:hover,
.request-button:focus-visible,
a.sppb-btn.request-button:hover,
a.sppb-btn.request-button:focus-visible {
  --secondcolor: #C9741F;
  background-color: var(--jd-orange-dark) !important;
  border-color: var(--jd-orange-dark) !important;
  color: var(--jd-white) !important;
}

/* Einheitliche Eckenrundung. Die Builder-Daten geben jeder Schaltflaeche
   einen eigenen Wert mit — Kopfbereich 7px, Inhalts-CTA 5px, Formular 10px.
   Hier bekommen alle vier Ecken jeder Schaltflaeche denselben Radius, damit
   die Knoepfe der Seite gleich aussehen. Die Builder-Regeln stehen in
   <style>-Blocken im Dokument und damit hinter dieser Datei, deshalb
   !important. */
.sppb-btn,
a.sppb-btn,
button.sppb-btn,
.request-button,
a.sppb-btn.request-button,
.jd-cta,
#sp-position1 .sppb-btn,
#sp-position1 a.sppb-btn,
#sp-position1 .request-button,
.jd-form .btn,
.vis_form .btn,
.btn.btn-primary {
  border-radius: var(--jd-radius-btn) !important;
}

/* --------------------------------------------------------------------------
   7. Abschnitte und Ueberschriften
   -------------------------------------------------------------------------- */
#sp-main-body .sppb-section {
  padding-top: var(--jd-section);
  padding-bottom: var(--jd-section);
}

/* Wechselnde Grundflaechen geben der Seite Rhythmus, ohne bunt zu werden. */
.jd-surface,
#sp-main-body .sppb-section.jd-surface { background-color: var(--jd-surface); }

/* Bei mittig gesetzten Abschnittsueberschriften gehoert der Strich mittig
   darueber - so steht er im Vorbild. Als Blockelement mit fester Breite
   richtet er sich sonst immer links aus, unabhaengig von der Textrichtung;
   auf der Startseite stand er dadurch deutlich neben der Ueberschrift.
   Erkannt an der Template-Klasse "section-heading", die genau die mittig
   gesetzten Ueberschriften traegt. */
#sp-main-body .section-heading .sppb-addon-title::before { margin-inline: auto; }

/* Nicht bei Ueberschriften, die in Karten, Listen oder im Footer stehen. */
#sp-footer .sppb-addon-title::before,
.service-inner-text .sppb-addon-title::before,
.sppb-addon-feature .sppb-addon-title::before,
#sp-position1 .sppb-addon-title::before { content: none !important; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
#head-main-site {
  position: relative;
  background-color: var(--jd-ink);
  background-size: cover;
  background-position: center;
  color: var(--jd-white);
}

/* Lesbarkeit ueber dem Bild: dunkler Verlauf statt aufgehellter Schrift. */
#head-main-site::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(31, 36, 44, 0.78) 0%, rgba(31, 36, 44, 0.62) 100%);
  pointer-events: none;
}

#head-main-site > * { position: relative; z-index: 1; }

#head-main-site h1,
#head-main-site h2,
#head-main-site h3,
#head-main-site .sppb-addon-title { color: var(--jd-white) !important; }

/* Der Hero-Titel steht in einer halbbreiten Spalte neben dem Bild.
   Mit der allgemeinen H1-Groesse von 65px lief der Firmenname dort mehrzeilig
   und brach an der einzigen verfuegbaren Stelle um — ausgerechnet nach dem
   kaufmaennischen Und: "JA Dach &" / "Sanierungen GmbH". Eine Zeile auf "&"
   enden zu lassen ist schlechte Typografie.

   Der Name braucht bei 51px rund 670px, die Spalte bietet 613px. Bei 45px
   passt er vollstaendig auf EINE Zeile. Auf schmalen Geraeten bricht er
   weiterhin um, dort aber ohne Alternative und deutlich unauffaelliger. */
#head-main-site h1,
#head-main-site h1.sppb-addon-title {
  font-size: clamp(1.75rem, 3.15vw, 2.8rem) !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

/* Das animated_heading-Addon im Stil "highlighted" zeichnet einen handgemalt
   wirkenden SVG-Kringel um den hervorgehobenen Text. Das Standard-Farbschema
   (blauer Text #005689, blaues Oval) hatte auf der dunklen Hero-Flaeche zu
   wenig Kontrast. Die Korrektur:
     – Text erbt die weisse Farbe seiner Ueberschrift.
     – SVG-Strich nutzt das Marken-Orange fuer gute Sichtbarkeit.
     – Layout bleibt inline, damit text-wrap: balance greifen kann. */
.animated-heading-highlighted-text,
.animated-heading-highlighted-wrap {
  color: inherit !important;
  background: none !important;

  /* Inline-Layout statt inline-block: verhindert isolierten Umbruch
     innerhalb des Highlight-Spans ("JA Dach &" / "Sanierungen GmbH"). */
  display: inline !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* SVG-Kringel sichtbar lassen, aber Farbe an den dunklen Hintergrund
   anpassen. Die Strichfarbe wird auf das Marken-Orange gesetzt. */
#head-main-site .animated-heading-highlighted-wrap svg {
  display: block !important;
  margin-top: 10px;
}

#head-main-site .animated-heading-highlighted-wrap svg path {
  stroke: var(--jd-orange) !important;
}

#head-main-site p,
#head-main-site .sppb-addon-text { color: rgba(255, 255, 255, 0.88) !important; }

#head-main-site .sppb-addon-title::before { background: var(--jd-orange); }

/* --------------------------------------------------------------------------
   8b. Hero der Leistungsseiten
   --------------------------------------------------------------------------
   Angelegt durch db/migrations/2026-08-20-18-service-page-hero.py. Die Sektion
   traegt die Klasse .jd-service-hero und als Hintergrund das Bild, das die
   Startseite bereits demselben Leistungsbereich zuordnet. Farbe, Verlauf und
   Abstaende kommen bewusst von hier statt aus den Builder-Daten - so bleibt
   die Gestaltung an einer Stelle aenderbar.
   -------------------------------------------------------------------------- */
.jd-service-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--jd-ink);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--jd-white);

  /* Vollbreit ohne Tricks: Die Migration legt den Hero als TOP-LEVEL-Sektion
     an. Ein Ausbruch per negativem Aussenabstand (100vw-Technik) waere hier
     falsch gewesen - die Elternspalte sitzt nicht mittig, der Hero waere um
     85px versetzt und rechts abgeschnitten worden. */
}

/* Lesbarkeit ueber dem Foto: dunkler Verlauf statt aufgehellter Schrift.
   Links kraeftiger, damit der linksbuendige Text sicher steht. */
.jd-service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    100deg,
    rgba(31, 36, 44, 0.92) 0%,
    rgba(31, 36, 44, 0.80) 45%,
    rgba(31, 36, 44, 0.55) 100%
  );
  pointer-events: none;
}

.jd-service-hero > * { position: relative; z-index: 1; }

/* Die allgemeine Regel fuer verschachtelte Sektionen nimmt Containern den
   Gutter. Der Hero braucht ihn, sonst klebt der Text am Rand. */
#sp-main-body .jd-service-hero > .sppb-container-inner,
#sp-main-body .jd-service-hero > .sppb-row-container {
  padding-right: var(--jd-gutter) !important;
  padding-left: var(--jd-gutter) !important;
  max-width: 1320px;
  margin-inline: auto;
}

.jd-service-hero h1,
.jd-service-hero h2,
.jd-service-hero h3,
.jd-service-hero .sppb-addon-title { color: var(--jd-white) !important; }

.jd-service-hero p,
.jd-service-hero li,
.jd-service-hero .sppb-addon-text,
.jd-service-hero .sppb-addon-text p { color: rgba(255, 255, 255, 0.88) !important; }

/* Einleitungstext im Hero etwas schmaler als die volle Lesebreite - er steht
   als Anreisser ueber der Seite, nicht als Fliesstext. */
.jd-service-hero .sppb-addon-text p { max-width: 54ch; }

/* Der Akzentstrich sitzt hier ueber der Seitenueberschrift. */
.jd-service-hero .sppb-addon-title::before { background: var(--jd-orange); }

.jd-service-hero .sppb-addon-wrapper + .sppb-addon-wrapper { margin-top: 26px; }

/* --------------------------------------------------------------------------
   9. Leistungen
   --------------------------------------------------------------------------
   Die Leistungsbloecke sind eigenstaendige Builder-Elemente mit der Struktur
   .service-inner-text > .icon + .text-wrap > h3.heading + ul
   -------------------------------------------------------------------------- */
/* Abschnitte mit Leistungskarten bekommen die ruhige Markenflaeche.
   Vorher standen weisse Karten auf weissem Grund — sie waren nur an einem
   sehr schwachen Schatten zu erkennen und wirkten dadurch wie versehentlich
   umrandete Textbloecke. Auf #F3F7FA lesen sie sich als eigenstaendige
   Elemente, so wie die Partnerflaeche auf der Startseite. */
#sp-main-body .sppb-section:has(.service-inner-text) {
  background-color: var(--jd-surface);
}

.service-inner-text {
  position: relative;
  height: 100%;
  padding: 24px 22px;
  background: var(--jd-white);
  border: 1px solid var(--jd-line);
  border-radius: var(--jd-radius) !important;
  box-shadow: var(--jd-shadow-soft);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* --- Leistungen als Raster -------------------------------------------------
   Die Leistungen sind eigenstaendige Builder-Elemente, die als Geschwister in
   EINER Spalte liegen. Untereinander gestapelt ergaben sie auf dem Desktop
   786px breite Baender - unruhig zu lesen und weit weg von der Vorlage.
   Die Spalte wird deshalb ab 768px zum Raster. Ueberschriften und
   Schaltflaechen in derselben Spalte spannen weiterhin ueber die volle
   Breite, damit die Gliederung erhalten bleibt.
   -------------------------------------------------------------------------- */
/* Der Selektor ist bewusst exakt auf die DIREKTE Verschachtelung gemuenzt.
   Ein lockeres :has(> * .service-inner-text) trifft auch aeussere Spalten,
   weil die Karten dort ebenfalls - nur tiefer - enthalten sind. Das machte
   die verschachtelte Sektion zum Rasterelement und halbierte die Breite auf
   jeder Ebene: gemessen 1201px -> 590px -> 353px -> 166px je Karte. */
@media (min-width: 768px) {
  .sppb-column-addons:has(> .sppb-addon-wrapper > * > .sppb-addon > .sppb-addon-content > .service-inner-text) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;

    /* Zwingend: .sppb-column ist ein Flex-Container und .sppb-column-addons
       ein Flex-Item mit "flex: 0 1 auto". Als Raster mit minmax(0, 1fr) faellt
       die intrinsische Mindestbreite auf null, woraufhin das Flex-Item auf
       Inhaltsbreite zusammenfaellt - gemessen 75px statt 786px. Die feste
       Breite haelt das Raster auf Spaltenbreite. */
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Alles, was keine Leistungskarte ist, bleibt volle Breite. */
  .sppb-column-addons:has(> .sppb-addon-wrapper > * > .sppb-addon > .sppb-addon-content > .service-inner-text)
    > .sppb-addon-wrapper:not(:has(.service-inner-text)) {
    grid-column: 1 / -1;
  }

  /* Karten gleich hoch: die Wrapper-Kette muss die Hoehe durchreichen. */
  .sppb-column-addons:has(> .sppb-addon-wrapper > * > .sppb-addon > .sppb-addon-content > .service-inner-text) > .sppb-addon-wrapper {
    margin-bottom: 0 !important;
  }

  .sppb-column-addons:has(> .sppb-addon-wrapper > * > .sppb-addon > .sppb-addon-content > .service-inner-text)
    > .sppb-addon-wrapper:has(.service-inner-text),
  .sppb-column-addons:has(> .sppb-addon-wrapper > * > .sppb-addon > .sppb-addon-content > .service-inner-text)
    > .sppb-addon-wrapper:has(.service-inner-text) > .clearfix,
  .sppb-column-addons:has(> .sppb-addon-wrapper > * > .sppb-addon > .sppb-addon-content > .service-inner-text)
    > .sppb-addon-wrapper:has(.service-inner-text) .sppb-addon,
  .sppb-column-addons:has(> .sppb-addon-wrapper > * > .sppb-addon > .sppb-addon-content > .service-inner-text)
    > .sppb-addon-wrapper:has(.service-inner-text) .sppb-addon-content {
    height: 100%;
  }
}

/* Karten ohne Aufzaehlung sind kurz und vertragen eine dritte Spalte.
   Karten MIT Aufzaehlung bleiben zweispaltig, damit die Zeilen lesbar sind. */
@media (min-width: 1200px) {
  .sppb-column-addons:has(> .sppb-addon-wrapper > * > .sppb-addon > .sppb-addon-content > .service-inner-text):not(:has(.service-inner-text ul)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.service-inner-text:hover,
.service-inner-text:focus-within {
  border-color: var(--jd-blue);
  box-shadow: var(--jd-shadow);
}

/* Akzentkante oben — die einzige Orange-Verwendung in den Karten. */
.service-inner-text::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  width: 44px;
  height: 4px;
  border-radius: 0 0 2px 2px;
  background: var(--jd-orange);
}

.service-inner-text .icon { display: none; }

.service-inner-text .heading,
.service-inner-text h3 {
  margin: 10px 0 12px;
  color: var(--jd-ink) !important;
  font-family: var(--jd-font-head);
  font-size: clamp(1.1rem, 3vw, 1.28rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.service-inner-text ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.service-inner-text ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 7px;
  color: var(--jd-text);
  line-height: 1.55;
}

.service-inner-text ul li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jd-blue);
}

.service-inner-text ul li:last-child { margin-bottom: 0; }

/* Auf der Startseite sind die beiden Leistungsbereiche Bildkarten. */
.sppb-addon-single-image img,
.sppb-addon-image img,
.jd-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--jd-radius);
}

/* Inhaltsbilder bekommen denselben Radius wie die Karten - sonst steht das
   Hero-Bild als hartkantiges Rechteck neben lauter gerundeten Elementen.
   Logos sind ausgenommen: ein abgerundetes Firmen- oder Partnerlogo sieht
   nach Fehler aus. */
#sp-main-body img:not([alt*="Partnerlogo" i]):not(.logo-image):not([src*="logo" i]) {
  height: auto;
  border-radius: var(--jd-radius);
}

/* --- 9.1 Leistungskarten der Startseite ------------------------------------
   Diese Karten sind eine andere Bauart als die Leistungsbloecke der
   Unterseiten weiter oben: Spalte mit Bild, darunter ein Textabschnitt, der
   sich 30px ueber das Bild schiebt. Erkannt werden sie an der Template-
   Klasse "box-work", die nur an dieser Bauart und nur auf der Startseite
   haengt.

   Vorbild, nachgemessen an einer 404px breiten Karte:

       Bild          buendig ueber die volle Kartenbreite
       Karte         weiss, gerundet, EIN Schatten fuer Bild und Text
       Titel/Text    linksbuendig, rund 25px Polster zur Kartenkante
       Weiterlesen   unten links, bei allen Karten auf einer Linie
       Abschnitt     farbige Flaeche, damit die weissen Karten stehen

   Vorgefunden: Titel, Text und Schaltflaeche zentriert; der Schatten lag nur
   am weissen Textteil, das Bild darueber stand ohne; die beiden Karten waren
   unterschiedlich hoch (395px gegen 360px) und die Schaltflaechen dadurch um
   34px gegeneinander versetzt; quer ueber die Bildunterkante lief ein blauer
   3px-Balken aus der Vorlage, den das Vorbild an dieser Stelle nicht hat.

   Der Selektor greift die AEUSSERE Spalte: ":has(.box-work)" allein wuerde
   auch die innere Spalte im Textabschnitt treffen, die den Textblock
   ebenfalls enthaelt - die Karte bekaeme dann Flaeche und Schatten doppelt.
   Der Pfad ueber den geschachtelten Abschnitt trifft nur die aeussere.
   ---------------------------------------------------------------------- */

/* Die Karte ist die Spalte: sie traegt Flaeche, Radius, Rahmen und Schatten
   und beschneidet das Bild.

   Das Vorbild stellt die weissen Karten auf eine farbige Abschnittsflaeche.
   Das geht hier nicht: der folgende Partnerabschnitt traegt bereits
   --jd-surface, zwei gleich helle Flaechen hintereinander wuerden zu einem
   Block verschmelzen. Stattdessen bekommt die Karte dieselbe feine
   Umrandung wie die Leistungskarten der Unterseiten - damit steht sie auch
   auf weissem Grund. */
#sp-main-body .sppb-column:has(> .sppb-column-addons > .sppb-section .box-work) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--jd-white);
  border: 1px solid var(--jd-line);
  border-radius: var(--jd-radius);
  box-shadow: var(--jd-shadow-soft);
}

/* Das Bild sass in einer eigenen gerundeten Box; den Radius setzt jetzt die
   Karte, das Bild fuellt ihre oberen Ecken. */
#sp-main-body .sppb-column:has(> .sppb-column-addons > .sppb-section .box-work) img {
  border-radius: 0 !important;
}

/* Hoehe von der Spalte bis zum letzten Element durchreichen: nur so sind
   beide Karten gleich hoch und die Schaltflaechen koennen unten stehen. */
#sp-main-body .sppb-column:has(> .sppb-column-addons > .sppb-section .box-work) > .sppb-column-addons {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

#sp-main-body .sppb-column:has(> .sppb-column-addons > .sppb-section .box-work) > .sppb-column-addons > .sppb-section {
  flex: 1;
  display: flex;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

#sp-main-body .sppb-column:has(> .sppb-column-addons > .sppb-section .box-work) .sppb-container-inner,
#sp-main-body .sppb-column:has(> .sppb-column-addons > .sppb-section .box-work) .sppb-container-inner > .sppb-row {
  flex: 1;
  display: flex;
  width: 100%;
}

#sp-main-body .sppb-column:has(> .sppb-column-addons > .sppb-section .box-work) .sppb-container-inner > .sppb-row > div {
  display: flex;
}

#sp-main-body .sppb-column:has(> .sppb-column-addons > .sppb-section .box-work) .sppb-container-inner .sppb-column,
#sp-main-body .sppb-column:has(> .sppb-column-addons > .sppb-section .box-work) .sppb-container-inner .sppb-column-addons {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

/* Schaltflaeche ans untere Ende - dadurch stehen sie bei ungleich langen
   Texten trotzdem auf einer Linie. */
#sp-main-body .sppb-addon-wrapper:has(.box-work-btn) { margin-top: auto; }

/* Linksbuendig wie im Vorbild. Der Builder setzt fuer die Schaltflaeche
   "text-align: center" per ID-Regel im Dokument, deshalb !important. */
#sp-main-body .box-work,
#sp-main-body .box-work .sppb-addon-title,
#sp-main-body .box-work .sppb-addon-text,
#sp-main-body .box-work .sppb-addon-text p,
#sp-main-body .box-work-btn,
#sp-main-body .box-work-btn .sppb-addon,
#sp-main-body .box-work-btn .sppb-addon-content {
  text-align: left !important;
}

/* Der blaue 3px-Balken quer ueber der Bildunterkante entfaellt. Er stammt
   aus der Vorlage (Rohtext-Element mit "top: -40px"), das Vorbild setzt an
   diese Stelle nichts. Der orange Akzentstrich ueber dem Titel bleibt und
   steht jetzt buendig mit Titel, Text und Schaltflaeche. */
#sp-main-body .sppb-addon-raw-html .box-work { display: none !important; }

/* --------------------------------------------------------------------------
   10. Partner
   -------------------------------------------------------------------------- */
.partner-section,
#section-id-dfd5b66b-08b5-4927-9be5-001ae5a1a6cf { background-color: var(--jd-surface); }

/* Die Partnerlogos tragen aus den Builder-Daten feste Inline-Breiten
   (gemessen 420px). In einer Logoleiste wirken sie damit wie Inhaltsbilder
   statt wie Marken-Signets. Als stabiler Anker dient der Alttext: beide
   Partnerlogos sind mit "... Partnerlogo" ausgezeichnet - das ist
   inhaltsgetrieben und ueberlebt jeden Umbau der Sektion. */
img[alt*="Partnerlogo" i] {
  object-fit: contain;
  margin-inline: auto;
}

.partner-section img,
.jd-partners img {
  width: auto;
  max-width: 100%;
  max-height: 58px;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  filter: grayscale(100%);
  opacity: 0.72;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.partner-section a:hover img,
.partner-section a:focus-visible img,
.jd-partners a:hover img,
.jd-partners a:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
}

@media (min-width: 768px) {
  .partner-section img, .jd-partners img { max-height: 68px; }
}

/* --------------------------------------------------------------------------
   11. Anfrage-Abschnitt
   -------------------------------------------------------------------------- */
/* ACHTUNG: #request-button-section ist KEINE Inhaltssektion, auch wenn der
   Name das nahelegt. Die Builder-Daten definieren sie als fest positionierten
   Schwebe-Button unten rechts:

       position: fixed; bottom: 10px; right: 0; z-index: 1000;

   und blenden sie oberhalb von 1200px aus, weil dort die Schaltflaeche im
   Header dieselbe Aufgabe uebernimmt.

   Eine Vorfassung dieser Datei behandelte sie als vollbreites CTA-Band und
   gab ihr eine blaue Flaeche. Das Ergebnis war ein blauer Block, der auf
   Mobilgeraeten hinter der orangen Schaltflaeche hervorstand (gemessen 207px
   Blockbreite gegen 167px Schaltflaechenbreite). Die Flaeche entfaellt
   deshalb - sichtbar bleibt allein die Schaltflaeche. */
#request-button-section {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   12. Formular
   -------------------------------------------------------------------------- */
.visforms label,
.jd-form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--jd-font-head);
  font-weight: 500;
  color: var(--jd-ink);
}

.visforms input[type="text"],
.visforms input[type="email"],
.visforms input[type="tel"],
.visforms input[type="number"],
.visforms select,
.visforms textarea,
.form-control,
.form-select {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--jd-line);
  border-radius: var(--jd-radius-sm);
  background: var(--jd-white);
  color: var(--jd-ink);
  font-family: var(--jd-font);
  font-size: 16px !important; /* verhindert das Zoomen auf iOS */
  box-shadow: none;
}

.visforms textarea,
textarea.form-control { min-height: 150px; }

.visforms input:focus,
.visforms select:focus,
.visforms textarea:focus {
  border-color: var(--jd-blue);
  outline: 2px solid var(--jd-blue);
  outline-offset: 1px;
}

.visforms .star, .visforms .required-sign { color: var(--jd-orange-dark); }
.visforms .invalid, .visforms .vferror { border-color: #B3261E; }

.visforms .error-message, .jd-form__error {
  margin-top: 6px;
  color: #B3261E;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   12b. Anfrageseite (Seite 48)
   --------------------------------------------------------------------------
   Aufbau nach dem Vorbild (SG-Solar-Anfrageseite, localhost:8080), das auf
   demselben Zingbox-Template und sogar auf denselben Page-Builder-IDs sitzt.
   Uebernommen wird allein die Bauform; die Farben kommen aus Abschnitt 1.

   Zwei Flaechen statt einer Spalte:

       links   dunkle Flaeche mit Marke, Ueberschrift und Einleitung,
               randlos bis zum Fensterrand, orange Schraege in der Ecke
       rechts  weisse Flaeche mit dem Formular

   Die Builder-Daten legen alle vier Bausteine (Marke, Ueberschrift,
   Leerraum, Formularmodul) in EINE Spalte. Statt die Seite im Backend
   umzubauen, wird die Addonliste ab 992px zu einem zweispaltigen Raster:
   Baustein 1 und 2 links, das Formularmodul rechts ueber beide Zeilen.
   Der Leerraum-Baustein entfaellt, er wuerde das Raster verschieben.
   Damit bleibt die Seite im Page Builder unveraendert bearbeitbar.

   Am Formular selbst aendert sich die Bauform der Felder:

     * Die Beschriftungen werden sichtbar. Visforms stellt sie auf
       "verbergen" und legt sie als optisch verborgene Spanne ab - der Text
       ist also vorhanden und wird hier nur wieder eingeblendet. Das
       Pflichtsternchen kommt per ::after dazu.
     * Die Felder verlieren Rahmen und Rundung und bekommen nur noch eine
       Grundlinie. Bei Fokus faerbt sie sich orange, die Flaeche hellt auf.
     * Ab 768px stehen die Felder im 12-Spalten-Raster nebeneinander,
       zusammengehoerige Angaben paarweise (Vor-/Nachname, Telefon/Mail,
       Strasse/Nummer, PLZ/Ort).

   Bewusst NICHT gesetzt wird "outline" im Fokuszustand: Die Tastaturanzeige
   aus Abschnitt 15 muss hier durchgreifen, sonst waere das Formular per
   Tastatur nicht mehr bedienbar.
   -------------------------------------------------------------------------- */

/* Die Sektion traegt keine eigenen Abstaende mehr - die beiden Flaechen
   reichen bis an den Fensterrand und bringen ihr Polster selbst mit. */
#sp-page-builder.page-48 .page-content > #section-id-1656445770425 {
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--jd-white) !important;
}

#sp-page-builder.page-48 #section-id-1656445770425 > .sppb-row-container,
#sp-page-builder.page-48 #section-id-1656445770425 > .sppb-row-container > .sppb-row {
  width: 100%;
  max-width: none;
  padding: 0 !important;
  margin: 0 !important;
}

#sp-page-builder.page-48 #column-wrap-id-1656445770423 {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  flex: 0 0 100% !important;
}

#sp-page-builder.page-48 #column-id-1656445770423,
#sp-page-builder.page-48 #column-id-1656445770423 > .sppb-column-addons {
  width: 100%;
}

#sp-page-builder.page-48 #column-id-1656445770423 > .sppb-column-addons {
  position: relative;
  isolation: isolate;
  background: var(--jd-white);
}

/* --- dunkle Flaeche ------------------------------------------------------ */
/* Bis 992px liegt sie als Band ueber dem Formular, darueber als Spalte. */
#sp-page-builder.page-48 #sppb-addon-wrapper-1656445770428,
#sp-page-builder.page-48 #sppb-addon-wrapper-1656445770431 {
  position: relative;
  z-index: 1;
  padding-right: var(--jd-gutter) !important;
  padding-left: var(--jd-gutter) !important;
  margin: 0 !important;
  color: var(--jd-white);
  background: var(--jd-ink);
}

#sp-page-builder.page-48 #sppb-addon-wrapper-1656445770428 {
  padding-top: 62px !important;
}

/* Die Schraege sitzt im Band oben rechts; ab 992px wandert sie an die
   Kante zwischen den beiden Flaechen (siehe unten). */
#sp-page-builder.page-48 #sppb-addon-wrapper-1656445770428::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 130px;
  height: 130px;
  background: var(--jd-orange);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}

#sp-page-builder.page-48 #sppb-addon-wrapper-1656445770428 > *,
#sp-page-builder.page-48 #sppb-addon-wrapper-1656445770431 > * {
  position: relative;
  z-index: 1;
}

#sp-page-builder.page-48 #sppb-addon-wrapper-1656445770431 {
  padding-top: 18px !important;
  padding-bottom: 58px !important;
  border-bottom: 8px solid var(--jd-orange);
}

/* Marke ueber der Ueberschrift: klein, gesperrt, in Versalien. */
#sp-page-builder.page-48 #sppb-addon-1656445770428 .sppb-addon-title {
  margin: 0 0 0 0.4em !important;   /* Stamm des J */
  color: var(--jd-orange) !important;
  font-family: var(--jd-font-head);
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase;
}

#sp-page-builder.page-48 #sppb-addon-1656445770431 h1,
#sp-page-builder.page-48 #sppb-addon-1656445770431 h1.sppb-addon-title {
  max-width: 15ch;
  margin: 0 0 24px -0.031em !important;   /* S bzw. e */
  color: var(--jd-white) !important;
  font-size: clamp(2.2rem, 9.5vw, 3.4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

#sp-page-builder.page-48 #sppb-addon-1656445770431 .sppb-addon-content {
  margin-left: -0.067em;   /* Mittel der drei Zeilenanfaenge */
}

#sp-page-builder.page-48 #sppb-addon-1656445770431 .sppb-addon-content,
#sp-page-builder.page-48 #sppb-addon-1656445770431 .sppb-addon-content p {
  max-width: 54ch;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
}

#sp-page-builder.page-48 #sppb-addon-1656445770431 .sppb-addon-content p {
  margin-bottom: 0;
}

/* Der Leerraum-Baustein wuerde im Raster eine eigene Zeile beanspruchen. */
#sp-page-builder.page-48 #sppb-addon-wrapper-53ccd081-0cd9-4528-aa44-d6bb08b19bd7 {
  display: none !important;
}

/* --- weisse Flaeche mit dem Formular ------------------------------------- */
#sp-page-builder.page-48 #sppb-addon-wrapper-ec523e45-716a-4426-ae9d-30e643e6b01e {
  position: relative;
  z-index: 2;
  padding: 50px var(--jd-gutter) 72px !important;
  margin: 0 !important;
  background: var(--jd-white);
}

/* Die Ueberschrift ueber dem Formular kommt von Visforms selbst, nicht vom
   Page Builder - sie traegt deshalb keine .sppb-addon-title. */
#sp-page-builder.page-48 .visforms > h2 {
  margin: 0 0 12px !important;
  color: var(--jd-ink);
  font-size: clamp(1.9rem, 7vw, 2.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em;
}

#sp-page-builder.page-48 .visforms > h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 18px;
  background: var(--jd-orange);
}

#sp-page-builder.page-48 .visforms-form,
#sp-page-builder.page-48 #mod-visform1,
#sp-page-builder.page-48 #mod-visform1 fieldset {
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* Visforms baut das Formular aus Bootstrap-Zeilen. Deren negative
   Aussenabstaende und die Spaltenpolster wuerden das Raster verschieben;
   beides haengt an derselben Variablen. */
#sp-page-builder.page-48 #mod-visform1 .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

#sp-page-builder.page-48 #mod-visform1 .form-group {
  margin-bottom: 0;
}

#sp-page-builder.page-48 #mod-visform1 .vis_mandatory {
  margin: 0 0 26px;
  color: var(--jd-muted);
  font-family: var(--jd-font-head);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}

/* --- Felder -------------------------------------------------------------- */
#sp-page-builder.page-48 #mod-visform1 fieldset > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin: 0;
}

#sp-page-builder.page-48 #mod-visform1 .visfield-container {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

#sp-page-builder.page-48 #mod-visform1 .visfield-container > .row,
#sp-page-builder.page-48 #mod-visform1 .visfield-container .form-group.row {
  display: block;
  margin: 0;
}

#sp-page-builder.page-48 #mod-visform1 .visfield-container .form-group.row > div,
#sp-page-builder.page-48 #mod-visform1 [data-error-field-id] {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* Visforms legt den Beschriftungstext als optisch verborgene Spanne ab.
   Hier wird er wieder sichtbar - der Text selbst bleibt unveraendert. */
#sp-page-builder.page-48 #mod-visform1 label {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  color: var(--jd-ink) !important;
  font-family: var(--jd-font-head);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

#sp-page-builder.page-48 #mod-visform1 label .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 0 !important;
}

#sp-page-builder.page-48 #mod-visform1 .required label .visually-hidden::after {
  content: " *";
  color: var(--jd-orange-text);
}

/* Nur noch eine Grundlinie statt eines Kastens. "height: auto" ist noetig,
   weil die Builder-Daten dem Auswahlfeld feste 60px zuweisen. */
#sp-page-builder.page-48 #mod-visform1 .form-control,
#sp-page-builder.page-48 #mod-visform1 .form-select {
  width: 100%;
  height: auto !important;
  min-height: 56px;
  padding: 13px 0 11px !important;
  color: var(--jd-ink) !important;
  background-color: var(--jd-white) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--jd-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--jd-font);
  font-size: 1rem !important;   /* verhindert das Zoomen auf iOS */
  line-height: 1.4;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

/* Das Template nimmt dem Auswahlfeld die Systemdarstellung ("appearance:
   none") und dazu das Pfeilsymbol, das Bootstrap als Hintergrundbild
   mitliefert. Gemessen stand "Leistung" damit ohne jedes Zeichen da und war
   von einem Textfeld nicht zu unterscheiden - im Kastenlayout fiel das nicht
   auf, ohne Rahmen sehr wohl. Der Pfeil kommt deshalb von hier. */
#sp-page-builder.page-48 #mod-visform1 .form-select {
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F242C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 16px 16px !important;
}

#sp-page-builder.page-48 #mod-visform1 textarea.form-control {
  min-height: 170px;
  resize: vertical;
}

#sp-page-builder.page-48 #mod-visform1 .form-control::placeholder {
  color: var(--jd-muted);
  opacity: 1;
}

#sp-page-builder.page-48 #mod-visform1 .form-control:hover,
#sp-page-builder.page-48 #mod-visform1 .form-select:hover,
#sp-page-builder.page-48 #mod-visform1 .form-control:focus,
#sp-page-builder.page-48 #mod-visform1 .form-select:focus {
  background-color: var(--jd-surface) !important;
  border-bottom-color: var(--jd-orange-dark) !important;
}

/* Der allgemeine Fokusrahmen (Abschnitt 15) legt einen orangen Kasten um das
   Feld. Im Unterstrich-Layout stoert das, deshalb entfaellt er hier. Damit der
   Fokus trotzdem sichtbar bleibt, wird die Grundlinie orange und ueber einen
   inneren Schatten optisch dicker - ohne Verschiebung des Layouts. Der
   Schatten unterscheidet den Fokus zugleich vom Ueberfahren mit der Maus. */
#sp-page-builder.page-48 #mod-visform1 .form-control:focus,
#sp-page-builder.page-48 #mod-visform1 .form-select:focus,
#sp-page-builder.page-48 #mod-visform1 .form-control:focus-visible,
#sp-page-builder.page-48 #mod-visform1 .form-select:focus-visible {
  outline: none !important;
  box-shadow: inset 0 -1px 0 0 var(--jd-orange-dark) !important;
}

#sp-page-builder.page-48 #mod-visform1 .form-group:focus-within label {
  color: var(--jd-orange-text) !important;
}

/* Gemessen vergibt der Validierer (jQuery Validate) am fehlerhaften Feld die
   Klasse "error" - nicht "invalid" oder "vferror". Nach denen suchte diese
   Regel bisher allein, die rote Grundlinie erschien deshalb an keinem Feld.
   Die beiden anderen Klassen bleiben stehen: Visforms setzt sie an anderer
   Stelle, und sie kosten hier nichts. */
#sp-page-builder.page-48 #mod-visform1 .form-control.error,
#sp-page-builder.page-48 #mod-visform1 .form-select.error,
#sp-page-builder.page-48 #mod-visform1 .form-control.invalid,
#sp-page-builder.page-48 #mod-visform1 .form-select.invalid,
#sp-page-builder.page-48 #mod-visform1 .form-control.vferror,
#sp-page-builder.page-48 #mod-visform1 .form-select.vferror {
  border-bottom-color: #B3261E !important;
}

/* Der Meldungstext steht in einem eigenen <label> im Fehlerbehaelter. Damit
   traf ihn die allgemeine Beschriftungsregel weiter oben: dunkle Schrift,
   14px, 8px Abstand darunter - er las sich wie eine zweite Feldbeschriftung
   statt wie ein Fehler. Der umgebende Absatz brachte weitere 20px mit. */
#sp-page-builder.page-48 #mod-visform1 [data-error-field-id] p,
#sp-page-builder.page-48 #mod-visform1 [class*="viscaptcha_response_field"] p {
  margin: 0;
}

#sp-page-builder.page-48 #mod-visform1 label.error {
  margin: 0 !important;
  color: #B3261E !important;
  font-size: 0.8rem;
  line-height: 1.4;
}

#sp-page-builder.page-48 #mod-visform1 [data-error-field-id]:not(:empty) {
  padding-top: 7px;
  color: #B3261E;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* --- Sicherheitsabfrage --------------------------------------------------- */
/* Visforms haengt die Captcha-Zeile als eigene Bootstrap-Zeile direkt in das
   Fieldset. Damit traf sie dieselbe Regel wie die Feldzeile und wurde zum
   Zwoelfspaltenraster: Beschriftung, Bild, Erneuern-Symbol und Eingabefeld
   standen gemessen in je einer 25px schmalen Spalte - das Bild auf 25x9px
   gestaucht, der Stern unter der Beschriftung umgebrochen, der Platzhalter
   nach "Captch" abgeschnitten. Die Zeile bekommt deshalb ihr eigenes Layout
   und bleibt vom Feldraster unberuehrt. */
#sp-page-builder.page-48 #mod-visform1 fieldset > .form-group.row.required {
  display: block;
  margin: 24px 0 0;
}

/* Bild, Erneuern-Symbol und Eingabefeld stehen nebeneinander. Zwischen den
   drei Bausteinen liefert Visforms geschuetzte Leerzeichen aus; im Flexlayout
   waeren das eigene Elemente unbekannter Breite. "font-size: 0" nimmt ihnen
   die Breite, die Abstaende kommen aus den Aussenabstaenden darunter. */
#sp-page-builder.page-48 #mod-visform1 fieldset > .form-group.row.required > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Visforms verteilt die Bausteine mit "justify-content-evenly". Sobald das
     Eingabefeld unter das Bild rutscht, stuende die obere Zeile dadurch
     eingerueckt - im Formular ist alles linksbuendig. */
  justify-content: flex-start !important;
  row-gap: 12px;
  width: 100%;
  max-width: none;
  padding: 0;
  font-size: 0;
}

/* Das Bild kommt mit 215x80px vom Server. Auf 150px Breite steht es auf der
   Hoehe des Eingabefeldes; "height: auto" haelt dabei das Seitenverhaeltnis,
   auch wenn die Zeile schmaler wird als das Bild. */
#sp-page-builder.page-48 #mod-visform1 .captchacode {
  flex: 0 0 auto;
  width: 150px;
  height: auto;
  max-width: 100%;
  /* Visforms gibt dem Bild die Bootstrap-Klasse "mb-3". Deren Abstand steht
     unter "!important" und liesse sonst 16px Leerraum unter der Zeile. */
  margin: 0 14px 0 0 !important;
  background: var(--jd-white);
  border: 1px solid var(--jd-line);
  border-radius: var(--jd-radius-sm);
}

/* Das Symbol ist 22x20px klein. Das Polster bringt die Trefferflaeche auf die
   44px aus --jd-tap, ohne das Bild selbst zu vergroessern. */
#sp-page-builder.page-48 #mod-visform1 img[class*="captcharefresh"] {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 22px;
  height: 20px;
  padding: 11px;
  margin: 0 6px 0 0;
  border-radius: 50%;
  transition: background-color 0.18s ease;
}

#sp-page-builder.page-48 #mod-visform1 img[class*="captcharefresh"]:hover {
  background-color: var(--jd-surface);
}

/* Das Eingabefeld nimmt den Rest der Zeile und rutscht unter das Bild, sobald
   daneben weniger als 180px bleiben. */
#sp-page-builder.page-48 #mod-visform1 fieldset > .form-group.row.required > div > span {
  display: flex;
  flex: 1 1 180px;
  min-width: 180px;
  padding: 0;
  font-size: 1rem;
}

/* Der Abstand unter den Eingabefeldern (Abschnitt oben) traegt hier nicht: er
   wuerde die Zeile um 14px hoeher machen als das Feld und das Bild daneben
   entsprechend nach unten schieben. Der Abstand nach unten kommt in dieser
   Zeile von der Schaltflaeche. */
#sp-page-builder.page-48 #mod-visform1 fieldset > .form-group.row.required .form-control {
  margin-bottom: 0;
}

/* Die Fehlermeldung des Captchas landet in einem Behaelter ohne das Merkmal
   "data-error-field-id", nach dem die Regel weiter oben sucht - sie stand
   deshalb unformatiert im Fliesstext. Hier wird sie gleich behandelt. */
#sp-page-builder.page-48 #mod-visform1 [class*="viscaptcha_response_field"]:not(:empty) {
  padding-top: 7px;
  color: #B3261E;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* --- Schaltflaeche ------------------------------------------------------- */
/* Visforms rahmt die Schaltflaeche in drei Spalten (1 - 10 - 1) und zentriert
   sie darin. Im Vorbild steht sie linksbuendig unter dem Formular. */
#sp-page-builder.page-48 #mod-visform1 fieldset > .col-12,
#sp-page-builder.page-48 #mod-visform1 .vf-button-container > .col-10,
#sp-page-builder.page-48 #mod-visform1 .vf-button-container .col-12 {
  width: 100%;
  max-width: none;
  padding: 0;
}

#sp-page-builder.page-48 #mod-visform1 .vf-button-container {
  display: block;
  padding: 0;
  margin: 30px 0 0 !important;
}

#sp-page-builder.page-48 #mod-visform1 .vf-button-container > .col-1 {
  display: none;
}

#sp-page-builder.page-48 #mod-visform1 .vf-button-container .justify-content-center {
  display: flex;
  justify-content: flex-start !important;
}

#sp-page-builder.page-48 #mod-visform1 .vf-button-container .col-auto {
  width: 100%;
  padding: 0;
}

#sp-page-builder.page-48 #mod-visform1 #field11 {
  width: 100% !important;
  min-height: 56px;
  padding: 16px 28px !important;
  color: var(--jd-ink) !important;
  background: var(--jd-orange) !important;
  border: 1px solid var(--jd-orange) !important;
  border-radius: var(--jd-radius-btn) !important;
  box-shadow: none !important;
  font-family: var(--jd-font-head);
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1.3;
}

#sp-page-builder.page-48 #mod-visform1 #field11:hover,
#sp-page-builder.page-48 #mod-visform1 #field11:focus-visible {
  color: var(--jd-white) !important;
  background: var(--jd-orange-dark) !important;
  border-color: var(--jd-orange-dark) !important;
}

/* Visforms liefert die Schaltflaeche gesperrt aus und gibt sie per Skript
   frei. Ohne Skript bleibt sie gesperrt - dann soll sie das auch zeigen. */
#sp-page-builder.page-48 #mod-visform1 #field11:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (min-width: 576px) {
  #sp-page-builder.page-48 #mod-visform1 .vf-button-container .col-auto {
    width: auto;
  }

  #sp-page-builder.page-48 #mod-visform1 #field11 {
    width: auto !important;
    min-width: 220px;
  }
}

/* --- Feldraster ab 768px ------------------------------------------------- */
@media (min-width: 768px) {
  #sp-page-builder.page-48 #mod-visform1 fieldset > .row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 24px;
  }

  #sp-page-builder.page-48 #mod-visform1 .field1  { grid-column: 1 / 7;  grid-row: 1; }
  #sp-page-builder.page-48 #mod-visform1 .field2  { grid-column: 7 / 13; grid-row: 1; }
  #sp-page-builder.page-48 #mod-visform1 .field3  { grid-column: 1 / 7;  grid-row: 2; }
  #sp-page-builder.page-48 #mod-visform1 .field9  { grid-column: 7 / 13; grid-row: 2; }
  #sp-page-builder.page-48 #mod-visform1 .field4  { grid-column: 1 / 9;  grid-row: 3; }
  #sp-page-builder.page-48 #mod-visform1 .field5  { grid-column: 9 / 13; grid-row: 3; }
  #sp-page-builder.page-48 #mod-visform1 .field6  { grid-column: 1 / 5;  grid-row: 4; }
  #sp-page-builder.page-48 #mod-visform1 .field7  { grid-column: 5 / 13; grid-row: 4; }
  #sp-page-builder.page-48 #mod-visform1 .field8  { grid-column: 1 / 13; grid-row: 5; }
  #sp-page-builder.page-48 #mod-visform1 .field10 { grid-column: 1 / 13; grid-row: 6; }
}

/* --- zwei Flaechen nebeneinander ab 992px -------------------------------- */
@media (min-width: 992px) {
  #sp-page-builder.page-48 #column-id-1656445770423 > .sppb-column-addons {
    display: grid;
    min-height: 900px;
    grid-template-columns: minmax(340px, 40%) minmax(0, 60%);
    grid-template-rows: auto 1fr;
  }

  /* Die dunkle Flaeche liegt als Ebene HINTER den Bausteinen. Nur so reicht
     sie ueber die volle Hoehe, auch wenn der Text darin kuerzer ist als das
     Formular daneben. */
  #sp-page-builder.page-48 #column-id-1656445770423 > .sppb-column-addons::before,
  #sp-page-builder.page-48 #column-id-1656445770423 > .sppb-column-addons::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }

  #sp-page-builder.page-48 #column-id-1656445770423 > .sppb-column-addons::before {
    inset: 0 auto 0 0;
    width: 40%;
    background: var(--jd-ink);
  }

  /* Die Schraege waechst mit dem Fenster mit. Fest gesetzte 220px wirkten auf
     einem 1440er Bildschirm deutlich schwerer als im Vorbild, weil sie dort
     ueber ein Drittel der Panelbreite einnahmen. */
  #sp-page-builder.page-48 #column-id-1656445770423 > .sppb-column-addons::after {
    --jd-wedge: clamp(120px, 12vw, 220px);
    top: 0;
    left: calc(40% - var(--jd-wedge));
    width: var(--jd-wedge);
    height: var(--jd-wedge);
    background: var(--jd-orange);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
  }

  #sp-page-builder.page-48 #sppb-addon-wrapper-1656445770428,
  #sp-page-builder.page-48 #sppb-addon-wrapper-1656445770431 {
    grid-column: 1;
    padding-right: clamp(48px, 5vw, 84px) !important;
    padding-left: clamp(48px, 5vw, 84px) !important;
    background: transparent;
  }

  #sp-page-builder.page-48 #sppb-addon-wrapper-1656445770428 {
    grid-row: 1;
    padding-top: 94px !important;
  }

  #sp-page-builder.page-48 #sppb-addon-wrapper-1656445770428::before {
    display: none;
  }

  #sp-page-builder.page-48 #sppb-addon-wrapper-1656445770431 {
    grid-row: 2;
    padding-top: 22px !important;
    padding-bottom: 94px !important;
    border-bottom: 0;
  }

  #sp-page-builder.page-48 #sppb-addon-1656445770431 h1,
  #sp-page-builder.page-48 #sppb-addon-1656445770431 h1.sppb-addon-title {
    max-width: 12ch;
    font-size: clamp(2.8rem, 3.8vw, 4.1rem) !important;
  }

  #sp-page-builder.page-48 #sppb-addon-wrapper-ec523e45-716a-4426-ae9d-30e643e6b01e {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: 90px clamp(54px, 6vw, 100px) 100px !important;
  }
}

/* --------------------------------------------------------------------------
   12c. Kontaktseite
   --------------------------------------------------------------------------
   Die Seite wurde aus dem Waremo-Auftritt uebernommen. Die Inhaltsmigration
   versieht ihre drei Abschnitte mit stabilen Klassen, damit hier ausschliesslich
   die JA-Dach-Gestaltung greift und keine Builder-IDs fest verdrahtet werden.
   -------------------------------------------------------------------------- */
#sp-main-body .jd-contact-hero {
  padding-top: clamp(64px, 8vw, 104px) !important;
  padding-bottom: clamp(48px, 6vw, 76px) !important;
  background:
    radial-gradient(circle at 88% 18%, var(--jd-blue-soft), transparent 34%),
    var(--jd-white) !important;
}

.jd-contact-hero .jd-contact-heading {
  max-width: 840px;
  margin-inline: auto;
}

.jd-contact-hero .jd-contact-heading .sppb-addon-title {
  max-width: 18ch;
  margin-inline: auto;
  color: var(--jd-ink) !important;
}

.jd-contact-hero .jd-contact-heading .sppb-addon-title::before {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: var(--jd-orange);
}

#sp-main-body .jd-contact-hero .sppb-addon-text,
#sp-main-body .jd-contact-hero .sppb-addon-text p {
  max-width: 64ch;
  margin: 22px auto 0;
  color: var(--jd-text) !important;
}

.jd-contact-hero a {
  color: var(--jd-blue);
  font-weight: 600;
}

/* Vollbreites Kontaktband in der primaeren Markenfarbe. */
#sp-main-body .jd-contact-details {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
  background: var(--jd-blue) !important;
  color: var(--jd-white);
}

.jd-contact-details .sppb-row { align-items: stretch; }

.jd-contact-details .sppb-column,
.jd-contact-details .sppb-column-addons,
.jd-contact-details .sppb-addon-wrapper,
.jd-contact-details .clearfix,
.jd-contact-details .jd-contact-card,
.jd-contact-details .jd-contact-card > .sppb-addon-content {
  height: 100%;
}

.jd-contact-details .jd-contact-card .sppb-media {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 16px;
}

.jd-contact-details .jd-contact-card .pull-left {
  flex: 0 0 auto;
  float: none;
  margin-right: 0;
}

/* Die Builder-Regeln fuer Farbe, Radius und Groesse stehen spaeter im DOM;
   deshalb muessen die Markenwerte hier ausdruecklich Vorrang bekommen. */
.jd-contact-details .jd-contact-card .sppb-icon-container {
  display: grid !important;
  place-items: center;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--jd-white) !important;
}

.jd-contact-details .jd-contact-card .sppb-icon-container i {
  width: auto !important;
  height: auto !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

#sp-main-body .jd-contact-details .sppb-feature-box-title {
  margin: 0 0 4px;
  font-family: var(--jd-font-head);
  font-size: 0.75rem !important;
  font-weight: 700;
  line-height: 1.35 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72) !important;
}

#sp-main-body .jd-contact-details .sppb-addon-text,
#sp-main-body .jd-contact-details .sppb-addon-text p {
  margin: 0;
  font-size: 1rem !important;
  font-weight: 500;
  line-height: 1.45 !important;
  color: var(--jd-white) !important;
}

.jd-contact-details .jd-contact-card a {
  color: var(--jd-white) !important;
  text-decoration: none;
}

.jd-contact-details .jd-contact-card a:hover,
.jd-contact-details .jd-contact-card a:focus-visible {
  color: var(--jd-white) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 992px) {
  .jd-contact-details .sppb-row > div:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.20);
  }

  .jd-contact-details .sppb-row > div { padding-inline: 24px; }
  .jd-contact-details .sppb-row > div:first-child { padding-left: 15px; }
  .jd-contact-details .sppb-row > div:last-child { padding-right: 15px; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .jd-contact-details .sppb-row > div {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 575.98px) {
  #sp-main-body .jd-contact-details {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .jd-contact-details .sppb-row > div {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Standortkarte auf einer ruhigen Flaeche und als klar begrenzte Karte. */
#sp-main-body .jd-contact-map {
  padding-top: clamp(56px, 7vw, 88px) !important;
  padding-bottom: clamp(56px, 7vw, 88px) !important;
  background: var(--jd-surface) !important;
}

.jd-contact-map .sppb-addon-openstreetmap-wrapper {
  overflow: hidden;
  border: 1px solid var(--jd-line);
  border-radius: var(--jd-radius);
  box-shadow: var(--jd-shadow-soft);
}

.jd-contact-map .sppb-addon-openstreetmap {
  min-height: 340px;
}

/* --------------------------------------------------------------------------
   12d. Karriereseite
   --------------------------------------------------------------------------
   Angelegt durch db/migrations/2026-08-28-27-karriere-page.py. Die Seite ist
   bewusst aus vorhandenen Bausteinen zusammengesetzt: Hero der Leistungsseiten
   (Abschnitt 8b), Leistungskarten (Abschnitt 9) und die mittige
   Abschnittsueberschrift der Kontaktseite (Abschnitt 12c). Hier steht deshalb
   nur, was diese Bausteine fuer die Ausbildungsinhalte zusaetzlich brauchen.
   -------------------------------------------------------------------------- */
/* Die Leistungskarten tragen sonst eine Aufzaehlung. Auf der Karriereseite
   steht in der Karte ein kurzer Fliesstext; ohne diese Regel erbte er den
   Absatzabstand des Fliesstexts und lag ungleichmaessig in der Karte. */
.service-inner-text p {
  margin: 0;
  color: var(--jd-text);
  line-height: 1.55;
}

/* Ueberleitung zur Bewerbung: mittige Ueberschrift auf ruhiger Flaeche,
   dieselbe Lesebreite wie auf der Kontaktseite. */
.jd-career-apply .jd-career-apply-heading {
  max-width: 840px;
  margin-inline: auto;
}

.jd-career-apply .jd-career-apply-heading .sppb-addon-title {
  color: var(--jd-ink) !important;
}

#sp-main-body .jd-career-apply .sppb-addon-text,
#sp-main-body .jd-career-apply .sppb-addon-text p {
  max-width: 60ch;
  margin: 22px auto 0;
  color: var(--jd-text) !important;
}

/* --------------------------------------------------------------------------
   13. Rechtstexte
   -------------------------------------------------------------------------- */
/* Lesebreite.
   Gemessen liefen Absaetze auf Impressum, Datenschutz und Formularseite ueber
   die volle Containerbreite von 1256px — bei 20px Schrift rund 130 Zeichen je
   Zeile. Als komfortabel gelten 60 bis 80. Die Begrenzung wirkt NUR dort, wo
   die Spalte breiter als etwa 720px ist; mehrspaltige Bereiche und
   Kartentexte sind ohnehin schmaler und bleiben unberuehrt.

   (Der frueher hier stehende Selektor ".page-49 #sp-main-body" war falsch
   herum verschachtelt: Die Seitenklasse sitzt auf #sp-page-builder INNERHALB
   von #sp-main-body, nicht darueber. Er hat nie gegriffen.) */
#sp-main-body p,
#sp-main-body .sppb-addon-text > ul,
#sp-main-body .sppb-addon-text > ol {
  /* 62ch, nicht 72ch: Die ch-Einheit richtet sich nach der Ziffernbreite der
     Schrift und faellt bei Rubik breiter aus als die mittlere Zeichenbreite.
     Gemessen ergaben 72ch rund 91 Zeichen je Zeile; 62ch landen bei etwa 78. */
  max-width: 62ch;
}

/* In zentrierten Bereichen bleibt der begrenzte Textblock mittig. */
#sp-main-body .sppb-text-center p,
#sp-main-body [class*="text-center"] p,
#sp-main-body .sppb-section-content-center .sppb-addon-text p {
  margin-inline: auto;
}

/* Abschnittsueberschriften in Rechtstexten bekommen Luft nach oben. */
.page-49 h2, .page-50 h2 { margin-top: 1.8em; }

/* --------------------------------------------------------------------------
   14. Footer
   --------------------------------------------------------------------------
   Aufbau nach dem Vorbild, in drei Baendern:

       1. Kontaktband     randlos ueber die volle Fensterbreite, farbig,
                          drei Spalten mit rundem Symbolplaettchen,
                          Bezeichnung darueber, Wert darunter, dazwischen
                          duenne senkrechte Trennlinien
       2. dunkle Flaeche  drei Spalten (Logo, Leistungen, Rechtliches)
       3. Fusszeile       Haarlinie darueber, zwei mittig gesetzte Haelften

   Dazu zwei dezente Schraegen als Akzent: hell in der oberen rechten Ecke
   des Bandes, dunkel in der unteren linken Ecke der dunklen Flaeche.

   Farbe des Bandes: Das Vorbild nimmt dafuer seine Markenfarbe. Bei JA Dach
   ist das Blau (#005689) — dieselbe Flaeche traegt bereits die Kontakt-
   leiste ganz oben auf der Seite, beide Baender klammern die Seite also
   sichtbar zusammen. Orange bleibt der Anfrage-Schaltflaeche vorbehalten,
   wie in Abschnitt 1 festgelegt.
   -------------------------------------------------------------------------- */
#sp-footer,
#sp-bottom {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--jd-ink) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Die obere Schraege sass frueher hier am Footer. Sie liegt jetzt am
   Kontaktband selbst (weiter unten): Das Band bringt eine eigene Flaeche
   mit und wuerde eine Form, die am Footer haengt, verdecken. */
#sp-footer::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  bottom: 0;
  left: 0;
  width: clamp(150px, 28vw, 380px);
  height: clamp(100px, 16vw, 200px);
  background: rgba(0, 86, 137, 0.35);
  clip-path: polygon(0 30%, 100% 100%, 0 100%);
}

#sp-footer > * { position: relative; z-index: 1; }

/* Der Builder setzt in Footer-Abschnitten eigene Flaechen; sie wuerden die
   Grundflaeche zerschneiden. */
#sp-footer .sppb-section,
#sp-bottom .sppb-section {
  padding-top: var(--jd-section);
  padding-bottom: 34px;
  color: inherit !important;
  background-color: transparent !important;
  background-image: none !important;
}

.bottom-feature{
  display:flex;
  justify-content: center;
}

.sppb-icon-container{
  display: flex !important;
  justify-content: center;
  align-items: center !important;
}

#sp-footer .sppb-section::before,
#sp-footer .sppb-section::after { display: none !important; }

#sp-footer h1, #sp-footer h2, #sp-footer h3, #sp-footer h4, #sp-footer h5, #sp-footer h6,
#sp-footer .sppb-addon-title,
#sp-bottom .sppb-addon-title { color: var(--jd-white) !important; }

#sp-footer p, #sp-footer li, #sp-footer .sppb-addon-text,
#sp-footer .sppb-addon-text p, #sp-footer .sppb-media-content,
#sp-bottom p, #sp-bottom .sppb-addon-text {
  color: rgba(255, 255, 255, 0.82) !important;
}

#sp-footer a, #sp-bottom a { color: var(--jd-white) !important; }

#sp-footer a:hover, #sp-footer a:focus-visible,
#sp-bottom a:hover, #sp-bottom a:focus-visible {
  color: var(--jd-orange) !important;
}

#sp-footer .sppb-row { row-gap: 28px; }

/* Keine dekorativen Linien unter Footer-Ueberschriften. */
#sp-footer .sppb-addon-title::after,
#sp-bottom .sppb-addon-title::after,
#sp-footer h3::after, #sp-bottom h3::after { content: none !important; display: none !important; }

#sp-footer ul, #sp-bottom ul { list-style: none; padding-left: 0; }

/* Die Punkte standen mit zusaetzlichem Aussenabstand 41px auseinander,
   im Vorbild sind es 30px. Der Abstand entfaellt; die anklickbare Flaeche
   bleibt mit 35px Hoehe unveraendert, die Zeilen stossen nur direkt
   aneinander. */
#sp-footer .service-list li { margin-bottom: 0; }

/* Kontaktzeilen: Symbol und Text nebeneinander, sauber ausgerichtet. */
#sp-footer .sppb-media { display: flex; gap: 12px; align-items: flex-start; }
#sp-footer .sppb-media .pull-left { float: none; }
#sp-footer .sppb-icon-container { color: var(--jd-orange); }

/* --------------------------------------------------------------------------
   14.1 Kontaktband
   --------------------------------------------------------------------------
   Das Band ist der erste der drei Abschnitte im Footer-Modul. Es wird ueber
   seinen Inhalt erkannt (":has(.bottom-feature)") statt ueber die vom
   Builder vergebene Nummer im id-Attribut - die Nummer wechselt, sobald der
   Abschnitt im Backend neu angelegt wird, die Kontaktkaesten bleiben.

   Randlos ueber die volle Fensterbreite: Das Band steckt im 1320er-
   Container und kann seine Flaeche deshalb nicht selbst tragen. Sie kommt
   von einem Pseudoelement, das links und rechts mit "calc(50% - 50vw)" bis
   an den Fensterrand reicht. 50vw schliesst die Bildlaufleiste mit ein, der
   Ueberstand von wenigen Pixeln wird von "overflow: hidden" am Footer
   abgeschnitten - es entsteht also keine Querleiste. */
#sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature) {
  position: relative;
  z-index: 0;
  padding-top: 72px !important;
  padding-bottom: 72px !important;

  /* Abschnitt 3 setzt allen Builder-Abschnitten "overflow-x: clip", damit
     kein Abschnitt die Seite breiter macht. Genau das schnitt hier die
     ueberstehende Flaeche an der Containerkante ab: Das Band endete links
     und rechts mit dem Text statt am Fensterrand, die helle Schraege war
     ganz verschwunden. Das Band nimmt sich davon aus - abgeschnitten wird
     der Ueberstand eine Ebene hoeher, am Footer selbst. */
  overflow: visible;
}

#sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature)::before {
  content: "";
  display: block !important;      /* die Sperre weiter oben gilt hier nicht */
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -2;
  background: var(--jd-blue);
  pointer-events: none;
}

/* Helle Schraege in der oberen rechten Ecke - im Vorbild ein hellerer Ton
   der Bandfarbe, hier als aufgehelltes Blau. */
#sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature)::after {
  content: "";
  display: block !important;
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  z-index: -1;
  width: clamp(140px, 18vw, 280px);
  height: clamp(80px, 8vw, 120px);
  background: rgba(255, 255, 255, 0.10);
  clip-path: polygon(28% 0, 100% 0, 100% 100%);
  pointer-events: none;
}

/* Alle Bandregeln adressieren "..column-addons > .sppb-section:has(...)".
   Der Kindpfad ist noetig: Der aeussere Abschnitt des Moduls enthaelt die
   Kontaktkaesten ebenfalls als Nachfahren, ":has()" allein traf ihn also
   mit - und damit auch die Spalten der dunklen Flaeche darunter.

   Trennlinien zwischen den drei Angaben. Der Builder haelt dafuer bereits
   schmale Zwischenspalten vor, deren Divider-Addon aber auf allen Breiten
   ausgeblendet ist. Die Linie wird deshalb an der Spalte selbst gezeichnet:
   1px, mittig, kuerzer als das Band - wie im Vorbild. Die letzte
   Zwischenspalte steht am Bandende und bleibt leer. */
#sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature) .sppb-col-md-1 { position: relative; }

#sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature) .sppb-col-md-1:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 144px;                  /* Vorbild: 143px */
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.22);
}

/* Spaltenbreiten des Bandes. Der Bauplan gibt den Angaben je ein Viertel
   und den Zwischenspalten je ein Zwoelftel. Damit blieben fuer den Text
   241px - die Adresse brach auf zwei Zeilen um, waehrend sie im Vorbild in
   einer steht. Dort sind die Angaben rund 31% breit und die Zwischenraeume
   entsprechend schmal. */
@media (min-width: 992px) {
  #sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature) .sppb-col-md-3 {
    flex: 0 0 30%;
    max-width: 30%;
  }

  #sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature) .sppb-col-md-1 {
    flex: 0 0 3.3333%;
    max-width: 3.3333%;
  }
}

/* Zeile aus Symbol und Text. Vorbild: 19px Abstand dazwischen, Symbol
   mittig zu den Textzeilen.

   "justify-content" ausdruecklich: Der Abschnitt traegt die Builder-Klasse
   "sppb-section-content-center", wodurch Telefon und E-Mail in ihrer Spalte
   mittig sassen, die laengere Adresse dagegen linksbuendig - die drei
   Symbole standen dadurch nicht auf einer gemeinsamen Rasterlinie. Im
   Vorbild beginnen alle drei am linken Spaltenrand. */
#sp-footer .bottom-feature .sppb-media {
  gap: 18px;
  align-items: center;
  justify-content: flex-start !important;
}

/* Die Builder-Regeln stehen in <style>-Blocken IM Dokument und damit hinter
   dieser Datei. Bei gleicher Spezifitaet gewinnt der spaetere Block - fuer
   Groesse und Flaeche des Plaettchens ist deshalb !important noetig. */
#sp-footer .bottom-feature .sppb-icon-container {
  display: grid;
  place-items: center;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--jd-white) !important;
}

/* Das Template haengt an den Symbolkasten zusaetzlich 15px Aussenabstand;
   zusammen mit dem Abstand der Zeile waeren es 33px statt der 19px des
   Vorbilds. */
#sp-footer .bottom-feature .sppb-media .pull-left { margin-right: 0; }

#sp-footer .bottom-feature .sppb-icon-container i { font-size: 20px; line-height: 1; }

/* Bezeichnung ueber dem Wert: klein, versal, gesperrt - im Vorbild rund
   12px. Die Reihenfolge steht bereits so im Bauplan des Moduls, hier wird
   nur die Groesse gesetzt. */
#sp-footer .bottom-feature .sppb-addon-text p {
  margin: 0 0 4px;
  font-family: var(--jd-font-head);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72) !important;
}

#sp-footer .bottom-feature .sppb-media-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Auf dem Band ist Orange als Hoverfarbe zu schwach (4,4:1 auf Blau).
   Stattdessen Unterstreichung bei gleichbleibendem Weiss. */
#sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature) a:hover,
#sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature) a:focus-visible {
  color: var(--jd-white) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Unterhalb von 992px wird je Angabe nur noch ein Drittel der Breite frei;
   die Zwischenspalten wuerden den Text auf wenige Zeichen quetschen. Sie
   entfallen dort samt Linie. Unter 768px blendet der Bauplan das ganze
   Band aus (Klassen sppb-hidden-sm/xs) - das bleibt so. */
@media (max-width: 991.98px) {
  #sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature) .sppb-col-md-1 { display: none; }

  #sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature) .sppb-col-md-3 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  #sp-footer .sppb-column-addons > .sppb-section:has(.bottom-feature) {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* --------------------------------------------------------------------------
   14.2 Dunkle Flaeche und Fusszeile
   -------------------------------------------------------------------------- */
/* Erste Spalte der dunklen Flaeche. Zwei Punkte:

   Groesse - das Logo lief 400px breit, mehr als doppelt so breit wie das
   Bild an derselben Stelle im Vorbild (210px) und breiter als im Kopf der
   Seite.

   Lesbarkeit - das Logo besteht aus blauen Linien (#005689). Direkt auf der
   dunklen Grundflaeche (#1F242C) ergibt das rund 2:1; der Schriftzug
   "Dach & Sanierungen GmbH" war praktisch nicht zu erkennen. Das Vorbild
   setzt an dieselbe Stelle eine helle Karte. Die Karte ist Gestaltung, das
   Logo bleibt unveraendert - eine weisse Fassung der Marke gibt es im
   Projekt nicht, und Einfaerben per Filter wuerde die Marke verfaelschen. */
#sp-footer .sppb-addon-single-image .sppb-addon-single-image-container {
  display: inline-block;
  padding: 18px 20px;
  background: var(--jd-white);
  border-radius: var(--jd-radius-sm);
}

#sp-footer .sppb-addon-single-image img {
  display: block;
  max-width: 190px;
}

/* Fusszeile: Haarlinie darueber, beide Haelften mittig - so steht es im
   Vorbild. Die Haelften und ihre Zentrierung bringt der Bauplan schon mit,
   hier fehlten Linie und die ruhigere Schrift (Vorbild rund 15px, normal
   statt fett). */
/* ":last-of-type" statt ":last-child": Der Builder haengt hinter die
   Abschnitte noch <style>-Elemente, das letzte KIND ist also kein
   Abschnitt. Die Haarlinie selbst gibt es bereits, aber in Hellgrau
   (#D9D9D9) - auf dunklem Grund ein harter Strich statt der zurueck-
   genommenen Linie des Vorbilds. */
#sp-footer .sppb-column-addons > .sppb-section:last-of-type {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px !important;    /* Vorbild: 26px Linie bis Textoberkante */
  padding-bottom: 26px !important;
}

#sp-footer .sppb-column-addons > .sppb-section:last-of-type .sppb-addon-title,
#sp-footer .sppb-column-addons > .sppb-section:last-of-type .sppb-addon-title a {
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.70) !important;
}

/* Die Schaltflaeche "nach oben" ist im Vorbild ein Kreis von 48px. Das
   Template setzt 36px - darunter liegt die uebliche Mindestgroesse fuer
   Tippziele. */
.sp-scroll-up {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
}

/* Auf Mobilgeraeten wird der komplette Footer zentriert. */
@media (max-width: 767.98px) {
  /* Die drei Spalten der dunklen Flaeche stehen im Bauplan fest auf einem
     Drittel - auch auf dem Telefon. Dort blieben je Spalte 115px: das Logo
     schrumpfte auf 85px Breite und die beiden Linklisten standen
     dreispaltig nebeneinander. Unterhalb von 768px stehen sie deshalb
     untereinander, den Zeilenabstand liefert die row-gap-Regel oben. */
  #sp-footer .sppb-column-addons > .sppb-section:nth-of-type(2) .sppb-row > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #sp-footer, #sp-bottom,
  #sp-footer .sppb-addon, #sp-bottom .sppb-addon,
  #sp-footer .sppb-addon-content, #sp-bottom .sppb-addon-content,
  #sp-footer .sppb-addon-title, #sp-bottom .sppb-addon-title,
  #sp-footer ul, #sp-bottom ul { text-align: center; }

  #sp-footer .sppb-media { display: block; }
  #sp-footer .sppb-media .pull-left { display: block; margin: 0 auto 6px; }
  #sp-footer img, #sp-bottom img { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   15. Zugaenglichkeit und Bewegung
   -------------------------------------------------------------------------- */

/* Das Template entfernt Fokusanzeigen global (":focus { outline: 0 }" und
   "a:hover, a:focus, a:active { outline: 0 }"). Ohne Gegenmassnahme ist die
   Seite per Tastatur unbedienbar, weil nicht erkennbar ist, wo man steht.
   Die Regeln haben dieselbe Spezifitaet, deshalb ist !important noetig. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--jd-orange) !important;
  outline-offset: 2px !important;
  border-radius: var(--jd-radius-sm);
}

@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
    outline: 3px solid var(--jd-orange) !important;
    outline-offset: 2px !important;
  }
}

/* Sprungmarke zum Inhalt. */
.jd-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 16px;
  background: var(--jd-blue);
  color: var(--jd-white);
  border-radius: 0 0 var(--jd-radius-sm) 0;
}

.jd-skip-link:focus { left: 0; color: var(--jd-white); }

#sp-footer a, #sp-bottom a, .jd-contact a {
  display: inline-block;
  min-height: 1.75rem;
  padding-block: 0.15rem;
}

/* Inhalte duerfen ohne Animation nie unsichtbar bleiben. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .sppb-animated-number, [data-sppb-wow], .wow, .sppb-wow {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }
}

.no-js .wow, .no-js .sppb-wow {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* --------------------------------------------------------------------------
   Inhalt darf nie von einer Animation abhaengen
   --------------------------------------------------------------------------
   Der Page Builder blendet Abschnitte per "sppb-wow" beim Scrollen ein und
   setzt sie dafuer vorab auf "visibility: hidden; opacity: 0". Auf der
   Startseite betraf das 76 Elemente - darunter die Ueberschrift "Leistungen"
   und die kompletten Bloecke "Sanierungen" und "Dachdeckerarbeiten".

   Das ist aus zwei Gruenden nicht hinnehmbar:
     * Bleibt das Skript aus (Fehler, Reader-Modus, langsame Verbindung),
       fehlen diese Inhalte dauerhaft.
     * "visibility: hidden" nimmt Inhalte auch aus dem Screenreader-Baum.
       Blinde Nutzende bekommen die Leistungen also gar nicht mit.

   Die Einblendbewegung selbst bleibt erhalten - nur der unsichtbare
   Ausgangszustand entfaellt. */
.sppb-wow,
.sppb-wow *,
[data-sppb-wow-duration],
.wow {
  visibility: visible !important;
  opacity: 1 !important;
}