/* ==========================================================================
   Waremo – Designsystem
   --------------------------------------------------------------------------
   Eigenstaendige Ebene ueber dem Zingbox-Template. Enthaelt ausschliesslich
   Waremo-spezifische Regeln; keine Zingbox- oder SP-Page-Builder-Datei wird
   veraendert. Geladen von plg_system_waremosite mit Cache-Busting.

   Gestaltungsvorbild ist das Layoutsystem von sg-solar.de: getragene
   Karten mit weichem Schatten, ein Akzentband hinter den Leistungen,
   grosszuegige Ueberschriften in Rubik, ruhige Abschnittsrhythmen und ein
   dunkler Fussbereich mit hellem Kontaktband. Uebernommen wird nur die
   Struktur, nicht die Farbigkeit: alle Farben leiten sich aus dem Waremo-
   Logo (#7EBFE6) ab.

   Aufbau
     1  Marken-Tokens
     2  Anbindung an vorhandene Template-Variablen
     3  Sichtbarkeit und Bewegung
     4  Typografie
     5  Raster, Flaechen, Rhythmus
     6  Links, Schaltflaechen, Fokus
     7  Kopfbereich und Navigation
     8  Bausteine (Abschnittstitel, Leistungskarten, Zertifikate, Partner,
        News, Fragenkacheln)
     9  Startseite
    10  Formulare
    11  Fussbereich
    12  Breakpoints
    13  Hilfsklassen und Trefferflaechen
    14  Einwilligungshinweis

   Grundregeln ab 320 px Breite; Erweiterungen ausschliesslich ueber
   min-width-Breakpoints (576 / 768 / 992 / 1200 / 1400).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1  Marken-Tokens
   --------------------------------------------------------------------------
   Einzige Farbe des Logos ist #7EBFE6. Alles Weitere ist daraus abgeleitet:
   eine dunklere, textsichere Variante fuer Flaechen mit weisser Schrift,
   eine sehr helle Variante fuer ruhige Hintergruende, dazu ein neutrales
   Dunkel fuer Schrift und Fussbereich.

   Gemessene Kontrastwerte (WCAG 2.1):
     #7EBFE6 auf Weiss ............ 2.00  -> niemals weisser Text auf Hellblau
     #1F242C auf #7EBFE6 .......... 7.78  AAA
     #2E6F95 auf Weiss ............ 5.49  AA
     Weiss  auf #2E6F95 ........... 5.49  AA   -> CTA mit weisser Schrift ok
     Weiss  auf #1F5170 ........... 9.30  AAA
     #565872 auf Weiss ............ 6.92  AA
     #565872 auf #EEF7FC .......... 6.38  AA
     #1F242C auf Weiss ............ 15.59 AAA
   -------------------------------------------------------------------------- */
:root {
  --brand-primary: #7EBFE6;
  /* Nur fuer :hover-Zustaende. Flaechen, Schrift, Linien und Icons im
     Ruhezustand verwenden ausschliesslich --brand-primary. */
  --brand-primary-strong: #2E6F95;
  --brand-primary-deep: #1F5170;
  --brand-primary-soft: #D9EDF8;
  --brand-dark: #1F242C;
  --brand-text: #565872;
  --brand-surface: #EEF7FC;
  --brand-white: #FFFFFF;

  /* Abgeleitete Rollen */
  --brand-line: #DCE7EF;
  --brand-line-strong: rgba(46, 111, 149, 0.35);
  --brand-focus: #2E6F95;
  --brand-on-primary: var(--brand-dark);
  --brand-on-dark: var(--brand-white);

  /* Rhythmus */
  --wm-space-xs: 0.5rem;
  --wm-space-sm: 1rem;
  --wm-space-md: 1.75rem;
  --wm-space-lg: 3rem;
  --wm-space-xl: 4.5rem;
  --wm-gutter: 20px;

  /* Form */
  --wm-radius: 10px;
  --wm-radius-card: 18px;
  --wm-radius-pill: 999px;
  --wm-shadow: 0 12px 36px rgba(31, 36, 44, 0.09);
  --wm-shadow-lift: 0 20px 50px rgba(31, 36, 44, 0.16);
  --wm-tap: 44px;
  --wm-measure: 68ch;
  --wm-card-media: 220px;
}

/* --------------------------------------------------------------------------
   2  Anbindung an vorhandene Template-Variablen
   --------------------------------------------------------------------------
   Zingbox und der Page Builder greifen an vielen Stellen auf --maincolor,
   --secondcolor und --thirdcolor zu. --maincolor traegt haeufig weisse
   Schrift und wird deshalb auf die textsichere Variante gelegt.
   -------------------------------------------------------------------------- */
:root {
  --maincolor: var(--brand-primary);
  --secondcolor: var(--brand-primary);
  --thirdcolor: var(--brand-dark);
}

/* --------------------------------------------------------------------------
   3  Sichtbarkeit und Bewegung
   --------------------------------------------------------------------------
   Der Page Builder setzt .sppb-wow auf visibility:hidden und rechnet damit,
   dass eine Scroll-Bibliothek die Elemente wieder einblendet. Diese
   Bibliothek wird auf dieser Installation nicht geladen, wodurch acht
   Bereiche der Startseite dauerhaft unsichtbar blieben. Inhalt darf niemals
   von einer Animation abhaengen: die Sichtbarkeit wird erzwungen, das
   Einblenden uebernimmt eine reine CSS-Animation, die immer durchlaeuft.
   -------------------------------------------------------------------------- */
.sppb-wow,
.sppb-animated,
[class*="sppb-wow"] {
  visibility: visible !important;
  animation-fill-mode: both;
}

.sppb-wow.fadeInUp,
.sppb-wow.fadeInDown,
.sppb-wow.fadeIn,
.sppb-wow.fadeInLeft,
.sppb-wow.fadeInRight {
  animation-name: wmFadeIn;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0s !important;
}

@keyframes wmFadeIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Zaehler-Addons zeigen ihren Wert auch ohne laufendes Skript. */
.sppb-animated-number { visibility: visible !important; }

@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-wow { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   4  Typografie
   --------------------------------------------------------------------------
   Eine Schriftfamilie fuer alles. Rubik ist geometrisch-offen und liegt
   damit deutlich naeher an der Wortmarke des Logos als die zuvor genutzte
   schmale Auszeichnungsschrift. Ueberschriften stehen fett und leicht
   negativ laufend, Fliesstext ruhig und weit.
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body,
button,
input,
select,
textarea,
.sp-megamenu-parent,
.sppb-btn,
.sppb-addon-title,
.sppb-addon-text,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

body {
  color: var(--brand-text);
  background-color: var(--brand-white);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6,
.sppb-addon-title,
.sp-page-builder h1,
.sp-page-builder h2 {
  color: var(--brand-dark);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1, .sppb-addon-title.h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.06;
  margin-bottom: var(--wm-space-sm);
}

h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  line-height: 1.1;
  margin-bottom: var(--wm-space-sm);
}

h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.3; margin-bottom: var(--wm-space-xs); }
h4 { font-size: 1.05rem; margin-bottom: var(--wm-space-xs); }

p { margin: 0 0 var(--wm-space-sm); line-height: 1.75; }
p:last-child { margin-bottom: 0; }

.sppb-addon-content p,
.sppb-addon-text-block p { max-width: var(--wm-measure); }

::selection { background: var(--brand-primary-soft); color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   5  Raster, Flaechen, Rhythmus
   -------------------------------------------------------------------------- */
#sp-main-body { padding: 0; }

#sp-main-body > .row { margin-right: 0; margin-left: 0; }
#sp-main-body > .row > #sp-component { padding-right: 0; padding-left: 0; }

.sp-page-builder .page-content .sppb-section {
  padding-top: var(--wm-space-lg);
  padding-bottom: var(--wm-space-lg);
}

.sppb-addon-wrapper { margin-bottom: var(--wm-space-md); }
.sppb-addon-wrapper:last-child { margin-bottom: 0; }

/* Ruhige Grundflaechen fuer hervorgehobene Abschnitte. */
.wm-surface,
.sppb-section.wm-surface { background-color: var(--brand-surface); }

.wm-dark,
.sppb-section.wm-dark {
  background-color: var(--brand-dark);
  color: var(--brand-on-dark);
}
.wm-dark h1, .wm-dark h2, .wm-dark h3, .wm-dark h4,
.wm-dark .sppb-addon-title { color: var(--brand-white); }
.wm-dark p, .wm-dark li { color: rgba(255, 255, 255, 0.88); }

/* Auf hellblauen Flaechen immer dunkler Text – weisser Text erreicht dort
   nur einen Kontrast von 2.00 und faellt durch. */
.wm-accent,
.sppb-section.wm-accent {
  background-color: var(--brand-primary);
  color: var(--brand-on-primary);
}
.wm-accent h1, .wm-accent h2, .wm-accent h3,
.wm-accent p, .wm-accent li,
.wm-accent .sppb-addon-title { color: var(--brand-dark); }

.wm-rule { border: 0; border-top: 1px solid var(--brand-line); margin: var(--wm-space-lg) 0; }

.sppb-section[class*="sppb-section-content-center"] { min-height: 0; }

img, svg, video { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   6  Links, Schaltflaechen, Fokus
   -------------------------------------------------------------------------- */
a {
  color: var(--brand-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
  color: var(--brand-primary-deep);
  text-decoration: underline;
}

/* Das violettblaue #6185D1 aus dem Zingbox-Demostand wird ersetzt. */
a:hover { color: var(--brand-primary-deep) !important; }

.sppb-addon-content p a { color: var(--brand-primary); text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

body .sppb-btn,
body .sppb-sp-slider-button .sp-slider-btn-text,
.btn,
button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 14px 30px;
  border: 0;
  border-radius: var(--wm-radius);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body .sppb-btn,
body .sppb-btn-primary,
.wm-btn-primary,
input[type="submit"] {
  color: var(--brand-white) !important;
  background: var(--brand-primary) !important;
  box-shadow: 0 10px 24px rgba(46, 111, 149, 0.24);
}

body .sppb-btn:hover,
body .sppb-btn:focus-visible,
body .sppb-btn-primary:hover,
.wm-btn-primary:hover,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
  color: var(--brand-white) !important;
  background: var(--brand-primary-deep) !important;
  box-shadow: 0 14px 30px rgba(31, 81, 112, 0.32);
  transform: translateY(-2px);
}

body .sppb-btn-secondary,
.wm-btn-secondary {
  color: var(--brand-primary) !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 2px var(--brand-primary);
}

body .sppb-btn-secondary:hover,
.wm-btn-secondary:hover {
  color: var(--brand-white) !important;
  background: var(--brand-primary-strong) !important;
}

.sp-scroll-up {
  display: flex;
  align-items: center;
  justify-content: center;
  right: 22px;
  bottom: 75px;
  width: 46px;
  height: 46px;
  color: var(--brand-white);
  background: var(--brand-primary);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(31, 36, 44, 0.22);
}

/* --------------------------------------------------------------------------
   7  Kopfbereich und Navigation
   --------------------------------------------------------------------------
   Der Zingbox-Demostand stellt das Logo in eine weisse Tafel, die mit
   -103 px aus dem Kopfbereich herausragt und dabei die Kontaktzeile
   ueberdeckt. Die Tafel entfaellt; Logo, Menue und Handlungsaufforderung
   stehen in einer Zeile auf gleicher Grundlinie.
   -------------------------------------------------------------------------- */
#sp-top,
#sp-top .sppb-section {
  color: var(--brand-dark) !important;
  background-color: var(--brand-primary) !important;
}

#sp-top a,
#sp-top i,
#sp-top .sppb-icon-container { color: var(--brand-dark) !important; }

#sp-header {
  position: sticky;
  top: 0;
  z-index: 999;
  min-height: 72px;
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--brand-line);
  box-shadow: 0 6px 22px rgba(31, 36, 44, 0.06);
  backdrop-filter: blur(12px);
}

#sp-header.header-sticky,
#sp-header.sticky {
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 28px rgba(31, 36, 44, 0.1);
}

#sp-header .row,
#sp-header > .container > .container-inner > .row {
  align-items: center;
  flex-wrap: nowrap;
  min-height: 72px;
}

#sp-logo,
#sp-menu { min-width: 0; }

/* Weisse Logotafel des Demostands vollstaendig aufloesen. */
#sp-header .logo,
#sp-header.header-sticky .logo {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  justify-content: flex-start;
}

#sp-header .logo-image,
#sp-logo img,
.sp-default-logo,
.offcanvas-menu .logo-image {
  width: auto !important;
  height: auto !important;
  max-width: min(240px, 100%);
  max-height: 46px;
  object-fit: contain;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--wm-tap);
  color: var(--brand-dark);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Ein Unterstrich folgt der Beschriftung – keine eigene Markergeometrie. */
.sp-megamenu-parent > li > a::before,
.sp-megamenu-parent > li > a::after { content: none !important; }

.sp-megamenu-parent > li > a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-decoration-skip-ink: none;
  text-underline-offset: 9px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

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

.sp-megamenu-parent > li.active > a { box-shadow: none; }

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

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  display: flex;
  align-items: center;
  min-height: var(--wm-tap);
  padding: 0.5rem 1rem;
  color: var(--brand-dark);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:focus-visible {
  background-color: var(--brand-surface);
  color: var(--brand-primary-strong);
}

/* Untermenue auch bei Tastaturfokus oeffnen, nicht nur bei :hover. */
.sp-megamenu-parent > li.sp-has-child:focus-within > .sp-dropdown {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Handlungsaufforderung im Kopfbereich: weisse Schrift braucht die
   textsichere Blauvariante, auf Hellblau waere sie nicht lesbar. */
#sp-position1 .sppb-btn {
  min-width: 150px;
  padding-right: 30px;
  padding-left: 30px;
  white-space: nowrap;
}

/* Offcanvas */
.offcanvas-menu .offcanvas-inner { background-color: var(--brand-white); }
.offcanvas-menu .menu > li > a,
.offcanvas-menu .menu-child > li > a {
  display: flex;
  align-items: center;
  min-height: var(--wm-tap);
  border-bottom: 1px solid var(--brand-line);
  color: var(--brand-dark);
  font-size: 1.05rem;
}
.offcanvas-menu .menu > li > a:hover { color: var(--brand-primary-strong); }

@media (max-width: 991.98px) {
  #sp-menu { padding-right: 0; }

  body.ltr #offcanvas-toggler.offcanvas-toggler-right {
    margin-right: 0;
    margin-left: 0;
  }

  #offcanvas-toggler {
    display: grid !important;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 12px;
    touch-action: manipulation;
  }

  .offcanvas-menu,
  .offcanvas-menu .offcanvas-inner {
    background-color: var(--brand-white);
  }

  body .offcanvas-menu .offcanvas-inner .sp-module ul > li > a,
  body .offcanvas-menu .offcanvas-inner .sp-module ul > li > span,
  body .offcanvas-menu .offcanvas-inner .sp-module ul > li .menu-toggler,
  body .offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a {
    color: var(--brand-dark) !important;
  }

  body .offcanvas-menu .offcanvas-inner .sp-module ul > li > a:hover,
  body .offcanvas-menu .offcanvas-inner .sp-module ul > li > a:focus,
  body .offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a:hover,
  body .offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a:focus {
    color: var(--brand-primary-strong) !important;
  }

  .offcanvas-menu .close-offcanvas .burger-icon > span {
    background-color: var(--brand-dark) !important;
  }
}

.burger-icon > span { background-color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   8  Bausteine
   -------------------------------------------------------------------------- */

/* Feste Punktgroessen aus dem Demostand duerfen den Satzspiegel nicht
   sprengen. */
.sp-page-builder .sppb-addon-title,
.sp-page-builder h1,
.sp-page-builder h2,
.sp-page-builder h3 {
  overflow-wrap: anywhere;
}

/* 8.1  Abschnittstitel: zentriert, mit kurzem Akzentstrich darueber. */
.section-heading {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-heading .sppb-addon-title {
  margin-bottom: 0;
  font-size: clamp(1.9rem, 6.4vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}

.section-heading .sppb-addon-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  margin: 0 auto 20px;
  background: var(--brand-primary);
  border-radius: var(--wm-radius-pill);
}

.section-heading .sppb-addon-content p { margin-left: auto; margin-right: auto; }

/* 8.2  Leistungskarten
   --------------------------------------------------------------------------
   Der Page Builder erzeugt je Addon eine Regel der Form
   #sppb-addon-… .box-service { height:990px; margin-top:-240px; … }.
   Sie steht im Seitenkoerper und traegt eine Kennung; die folgenden
   Festlegungen muessen sie deshalb ausdruecklich uebersteuern. */
.sppb-addon.box-service,
.sppb-addon-feature.box-service {
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: hidden;
  background: var(--brand-white) !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: var(--wm-radius-card) !important;
  margin: 0 !important;
  box-shadow: var(--wm-shadow) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.box-service:hover {
  border-color: var(--brand-primary) !important;
  box-shadow: var(--wm-shadow-lift) !important;
  transform: translateY(-6px);
}

/* Die dunkle Bildabdeckung des Demostands entfaellt; das Bild wird beim
   Ueberfahren stattdessen leicht herangefahren. */
.box-service .sppb-img-container::before { display: none !important; }

.box-service > .sppb-addon-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.box-service .sppb-img-container {
  display: block;
  flex: 0 0 auto;
  height: var(--wm-card-media) !important;
  overflow: hidden;
  line-height: 0;
}

.box-service .sppb-img-container img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  object-fit: cover;
  transition: transform 400ms ease;
}

.box-service:hover .sppb-img-container img { transform: scale(1.035); }

.box-service .sppb-media-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0 26px 28px !important;
}

/* Der Editor hinterlaesst leere Absaetze mit einem Zeilenumbruch. Sie
   erzeugen Zwischenraeume, die nicht zum Rhythmus der Karte gehoeren. */
.box-service .sppb-addon-text > p:not(:has(a)) { display: none; }
.box-service .sppb-addon-text > p:first-child,
.box-service .sppb-addon-text > p:last-child { display: none; }
.box-service .sppb-addon-text br[data-mce-bogus] { display: none; }

.box-service .icon {
  display: grid;
  place-items: center;
  width: 74px !important;
  height: 74px !important;
  max-height: 74px !important;
  padding: 0 !important;
  margin: -37px 0 0 !important;
  color: var(--brand-primary) !important;
  background: var(--brand-white) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(31, 36, 44, 0.14) !important;
  font-size: 32px !important;
  line-height: 1;
}

.box-service .heading {
  margin: 20px 0 10px;
  font-size: 1.25rem;
  line-height: 1.3;
}

.box-service .heading a { color: var(--brand-dark); text-decoration: none; }
.box-service .heading a:hover { color: var(--brand-primary-strong) !important; }

.box-service .sub-heading {
  margin: 0 0 var(--wm-space-sm);
  color: var(--brand-text);
  line-height: 1.7;
}

.box-service .sppb-addon-text > p:has(a) { margin: auto 0 0; }

.service-read-more,
.btn-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.service-read-more:hover,
.btn-read-more:hover {
  color: var(--brand-primary-deep) !important;
  text-decoration: none;
}

.service-read-more .fa-arrow-right { transition: transform 180ms ease; }
.service-read-more:hover .fa-arrow-right { transform: translateX(4px); }

/* 8.3  Zertifikatsnachweise
   --------------------------------------------------------------------------
   Kein Rahmen um die Abbildung herum und keine Beschriftung darueber: die
   Urkunde spricht fuer sich. Darunter steht allein der Hinweis auf die
   PDF-Datei. Er gehoert zur Abbildung und verhaelt sich auch so – beide
   liegen im selben Verweis und reagieren gemeinsam auf Zeiger und Fokus.
   Was die Urkunde bezeugt, steht in der Bildalternative und wird
   Hilfstechnik als Bezeichnung des Verweises vorgelesen. */
.wm-certificate {
  position: relative;
  display: block;
  height: 100%;
  padding: 0;
  text-align: left !important;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.wm-certificate .sppb-addon-content { padding: 0; }

.wm-certificate .sppb-addon-single-image-container {
  overflow: hidden;
  background: var(--brand-white);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.wm-certificate .sppb-addon-single-image-container > a { display: block; }

/* Trefferflaeche auf Abbildung und Hinweis zusammen ausdehnen. */
.wm-certificate .sppb-addon-single-image-container > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.wm-certificate .sppb-addon-single-image-container > a > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 0;
  background: var(--brand-surface);
}

/* Hinweis auf das Format, unmittelbar unter der Abbildung. */
.wm-certificate .sppb-addon-content::after {
  content: "PDF ansehen \2197";
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--brand-primary);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

/* Zeiger oder Fokus auf einem der beiden Teile hebt beide hervor. */
.wm-certificate:hover .sppb-addon-single-image-container,
.wm-certificate:focus-within .sppb-addon-single-image-container {
  border-color: var(--brand-primary);
  box-shadow: var(--wm-shadow);
  transform: translateY(-3px);
}

.wm-certificate:hover .sppb-addon-content::after,
.wm-certificate:focus-within .sppb-addon-content::after {
  color: var(--brand-primary-deep);
  text-decoration-color: currentColor;
}

/* 8.4  Partnerbereich */
.partner-section .sppb-addon-title { color: var(--brand-dark); }
.partner-section .animated-heading-highlighted-text { color: var(--brand-primary); }
.partner-section svg path { stroke: var(--brand-primary); }

.wm-partners img,
.sppb-addon-raw-html img[alt*="Partner"] {
  width: auto;
  max-height: 96px;
  object-fit: contain;
}

/* 8.5  News */
.article-item {
  overflow: hidden;
  background: var(--brand-white);
  border: 1px solid var(--brand-line);
  border-radius: var(--wm-radius-card);
  box-shadow: var(--wm-shadow);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.article-item:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--wm-shadow-lift);
  transform: translateY(-4px);
}

.sppb-articles-carousel-img { position: relative; overflow: hidden; line-height: 0; }

.sppb-articles-carousel-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}

.sppb-articles-carousel-meta-date {
  display: inline-block;
  padding: 6px 12px !important;
  color: var(--brand-white) !important;
  background: var(--brand-primary) !important;
  border-radius: 6px;
  font-family: 'Rubik', system-ui, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600;
  letter-spacing: 0 !important;
}

.sppb-articles-carousel-content { padding: 20px 22px 24px; }

a.link-articles {
  color: var(--brand-dark) !important;
  font-family: 'Rubik', system-ui, sans-serif !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3;
  text-decoration: none;
}

a.link-articles:hover { color: var(--brand-primary-strong) !important; }

.sppb-articles-carousel-content .btn-read-more,
.sppb-articles-carousel-meta-category a {
  font-family: 'Rubik', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

.sppb-articles-carousel-introtext {
  margin: 10px 0 14px;
  color: var(--brand-text);
  line-height: 1.7;
}

.sppb-articles-carousel-meta-category { font-size: 0.85rem; }
.sppb-articles-carousel-content i.line { display: none; }

/* 8.6  Fragenliste
   --------------------------------------------------------------------------
   Keine Kacheln. Acht verschieden hohe Kaesten in zwei Spalten lesen sich
   als unfertiges Raster; eine Liste liest sich als Liste. Getrennt wird
   durch Haarlinien, nicht durch Rahmen und Schatten.

   Jede Zeile fuehrt zum Anfrageformular. Der Winkel am rechten Rand zeigt
   das an, ohne eine Schaltflaeche zu behaupten. Die Polsterung ist in jeder
   Zeile gleich, damit ein- und zweizeilige Fragen denselben Rhythmus halten.
   -------------------------------------------------------------------------- */
.wm-faq-item {
  display: flex;
  align-items: center;
  gap: var(--wm-space-sm);
  min-height: var(--wm-tap);
  padding: 22px 2px;
  border-bottom: 1px solid var(--brand-line);
  color: var(--brand-dark);
  text-decoration: none;
  transition: border-color 180ms ease;
}

/* Die erste Zeile folgt unmittelbar auf die Ueberschrift und bekommt
   deshalb eine eigene Oberkante. */
.addon-root-text-block + .addon-root-raw-html .wm-faq-item {
  border-top: 1px solid var(--brand-line);
}

.wm-faq-item:hover,
.wm-faq-item:focus-visible {
  text-decoration: none;
}

.wm-faq-question {
  flex: 1 1 auto;
  margin: 0;
  color: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
}

.wm-faq-item:hover .wm-faq-question,
.wm-faq-item:focus-visible .wm-faq-question {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Der Winkel ist gezeichnet, nicht gesetzt: keine Abhaengigkeit von einer
   Symbolschrift, die spaeter fehlen kann. */
.wm-faq-cue {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-top: 2px solid var(--brand-primary);
  border-right: 2px solid var(--brand-primary);
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.wm-faq-item:hover .wm-faq-cue,
.wm-faq-item:focus-visible .wm-faq-cue {
  transform: translateX(4px) rotate(45deg);
}

/* --------------------------------------------------------------------------
   9  Startseite
   --------------------------------------------------------------------------
   Die erzeugten Abschnittsangaben des Page Builders stehen als <style> im
   Seitenkoerper und damit hinter dieser Datei. Ueberschreibungen brauchen
   deshalb !important; sie sind auf die betroffenen Abschnitte begrenzt.
   -------------------------------------------------------------------------- */

/* 9.1  Buehne
   --------------------------------------------------------------------------
   Der erste Bildschirm beantwortet vier Fragen in fester Reihenfolge:
   Wofuer buergt der Betrieb (Plakette), was leistet er (Ueberschrift), wer
   ist er (Firmenzeile), und was kann man jetzt tun (Anfrage oder Anruf).
   Dazwischen drei Kurzangaben, damit die Leistungsbreite ohne Lesen
   erkennbar ist.

   Die Abbildung nimmt die groessere Haelfte: eine Photovoltaikflaeche
   wirkt ueber die Flaeche, nicht ueber Details.
   -------------------------------------------------------------------------- */
.page-59 #section-id-ce17e52f-789c-42ed-a5da-dab22cc517c4 {
  padding: 56px 0 64px !important;
  margin-bottom: 0 !important;
  background:
    radial-gradient(circle at 28% 42%, rgba(46, 111, 149, 0.10), transparent 42%),
    #F5FAFC !important;
}

/* Zwei Streuschmuckbilder aus dem Zingbox-Demostand: ein oranges Punktraster
   und ein grauer Rahmen. Beide gehoeren nicht zur Waremo-Marke. */
.page-59 #sppb-addon-wrapper-318d6ee4-801f-4f1c-b363-e5e4b9266f6a,
.page-59 #sppb-addon-wrapper-7b0e6489-1679-49d3-8d24-1754ef13273d { display: none !important; }

/* Ein Leerraum-Baustein schob die Textspalte nach unten, solange sie unter
   der Abbildung stand. */
.page-59 #sppb-addon-wrapper-6154610c-84a3-463f-afa2-e9b7037fa413 { display: none !important; }

/* 9.1.1  Abbildung */
.page-59 .startimg,
.page-59 .startimg .sppb-addon-content {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

.page-59 .startimg .sppb-addon-single-image-container {
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 28px 60px rgba(31, 36, 44, 0.18);
}

.page-59 .startimg img {
  display: block;
  width: 100% !important;
  max-width: none;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

/* 9.1.2  Plakette mit dem Nachweis */
.page-59 #sppb-addon-wrapper-b20648df-161f-4bf3-8c29-f4a1645a52b0 { margin-bottom: var(--wm-space-sm) !important; }

.page-59 .wm-hero-badge {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 11px 20px 11px 15px;
  text-align: left !important;
  background: var(--brand-white);
  border: 1px solid var(--brand-line);
  border-radius: var(--wm-radius);
  box-shadow: 0 6px 18px rgba(31, 36, 44, 0.06);
}

.page-59 .wm-hero-badge::before {
  content: "";
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  background-color: var(--brand-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1.5 4 5v6.1c0 4.9 3.4 9.5 8 10.9 4.6-1.4 8-6 8-10.9V5l-8-3.5Zm-1.2 14.3-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1.5 4 5v6.1c0 4.9 3.4 9.5 8 10.9 4.6-1.4 8-6 8-10.9V5l-8-3.5Zm-1.2 14.3-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}

.page-59 .wm-hero-badge .sppb-addon-title {
  grid-column: 2;
  margin: 0 !important;
  color: var(--brand-primary) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

.page-59 .wm-hero-badge .sppb-addon-content { grid-column: 2; }

.page-59 .wm-hero-badge p {
  margin: 0;
  color: var(--brand-text);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* 9.1.3  Ueberschrift, Firmenzeile, Einleitung */
.page-59 #sppb-addon-wrapper-46848d2a-1ddf-43a2-a86c-fb29576523d1 { margin-bottom: var(--wm-space-md) !important; }

.page-59 .main-heading .sppb-addon-title { display: none !important; }

.page-59 .main-heading .heading {
  margin: 0 0 10px !important;
  color: var(--brand-dark) !important;
  font-family: 'Rubik', system-ui, sans-serif !important;
  font-size: clamp(2rem, 3.3vw, 2.9rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance;
}

.page-59 .main-heading .wm-hero-company {
  margin: 0 0 16px !important;
  color: var(--brand-primary) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

.page-59 .main-heading .sub-heading {
  max-width: 34rem;
  margin: 0 !important;
  color: var(--brand-text) !important;
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
}

/* 9.1.4  Drei Kurzangaben */
.page-59 #sppb-addon-wrapper-a1c7e5b0-3d94-4f21-8a66-1e0b2c7d9f34 { margin-bottom: var(--wm-space-md) !important; }

.page-59 ul.wm-hero-points {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-59 ul.wm-hero-points > li {
  position: relative;
  padding-left: 30px;
  color: var(--brand-dark);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
}

.page-59 ul.wm-hero-points > li::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--brand-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/* 9.1.5  Anfragen oder anrufen */
.page-59 #sppb-addon-wrapper-b7a1c4e2-9f30-4d55-8c61-2ad4f0e91b73 { margin-bottom: 10px !important; }

.page-59 .wm-hero-cta .sppb-addon-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.page-59 .wm-hero-cta .sppb-btn { margin: 0 !important; min-width: 230px; }

/* Die Rufnummer ist die nachgeordnete Moeglichkeit und tritt entsprechend
   zurueck. */
.page-59 .wm-hero-cta .sppb-btn-1 {
  position: relative;
  min-width: 0;
  padding-right: 4px;
  padding-left: 34px;
  color: var(--brand-primary) !important;
  background: none !important;
  box-shadow: none !important;
}

.page-59 .wm-hero-cta .sppb-btn-1::before {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

.page-59 .wm-hero-cta .sppb-btn-1:hover,
.page-59 .wm-hero-cta .sppb-btn-1:focus-visible {
  color: var(--brand-primary-deep) !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  transform: none;
}

.page-59 .wm-hero-note {
  margin: 0;
  color: var(--brand-text);
  font-size: 0.88rem;
}

/* 9.1.6  Aufteilung: die groessere Haelfte gehoert der Abbildung. */
@media (min-width: 992px) {
  .page-59 #section-id-ce17e52f-789c-42ed-a5da-dab22cc517c4 > .sppb-row-container > .sppb-row > [id^="column-wrap-id-"]:first-child {
    max-width: 56% !important;
    flex-basis: 56% !important;
  }

  .page-59 #section-id-ce17e52f-789c-42ed-a5da-dab22cc517c4 > .sppb-row-container > .sppb-row > [id^="column-wrap-id-"]:last-child {
    max-width: 44% !important;
    flex-basis: 44% !important;
    padding-left: clamp(32px, 3.5vw, 56px) !important;
  }
}

/* Auf schmalen Geraeten kommt die Aussage vor die Abbildung. */
@media (max-width: 991.98px) {
  .page-59 #section-id-ce17e52f-789c-42ed-a5da-dab22cc517c4 > .sppb-row-container > .sppb-row {
    display: flex;
    flex-direction: column-reverse;
  }

  .page-59 #section-id-ce17e52f-789c-42ed-a5da-dab22cc517c4 .startimg { margin-top: var(--wm-space-md); }
  .page-59 .startimg img { aspect-ratio: 3 / 2; }
}

@media (max-width: 575.98px) {
  .page-59 .wm-hero-cta .sppb-btn-0 { width: 100%; }
  .page-59 .startimg .sppb-addon-single-image-container { border-radius: 18px; }
}

/* 9.2  Leistungsband und Leistungskarten */
.page-59 #section-id-1656004652082 {
  padding: 56px 0 40px !important;
  background-image: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-surface) 100%) !important;
}

.page-59 #section-id-1656004652082 .sppb-addon-title,
.page-59 #section-id-1656004652082 .sppb-addon-title::before { color: var(--brand-dark) !important; }
.page-59 #section-id-1656004652082 .sppb-addon-title::before { background: var(--brand-dark) !important; }

.page-59 #section-id-1656004652089 {
  padding: 0 0 var(--wm-space-xl) !important;
  position: relative;
  z-index: 2;
}

/* Die vier Karten liegen im Quelltext in zwei Spalten zu je zwei Karten.
   Damit alle vier Karten in einem gemeinsamen Raster liegen und ihre Hoehe
   zeilenweise finden, werden Spalte und Addon-Huelle uebersprungen. */
.page-59 #section-id-1656004652089 > .sppb-row-container > .sppb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  margin: 0;
}

.page-59 #section-id-1656004652089 [id^="column-wrap-id-"],
.page-59 #section-id-1656004652089 [id^="column-id-"],
.page-59 #section-id-1656004652089 .sppb-column-addons { display: contents !important; }

.page-59 #section-id-1656004652089 .sppb-column-overlay { display: none !important; }

/* Die Leerraum-Addons zwischen den Karten sind durch den Rasterabstand
   ersetzt. */
.page-59 #section-id-1656004652089 .addon-root-empty-space { display: none !important; }

.page-59 #section-id-1656004652089 .addon-root-feature { height: 100%; margin-bottom: 0; }
.page-59 #section-id-1656004652089 .addon-root-feature > .clearfix { height: 100%; }

/* 9.3  Zertifikate */
.page-59 #section-id-5cd00616-3e66-4244-9667-805b92c46e83 {
  padding: var(--wm-space-xl) 0 !important;
  background-color: var(--brand-white) !important;
  background-position: 100% 100% !important;
  background-size: contain !important;
}

.page-59 #section-id-319644f9-1067-443f-bdfb-a4d6c45062aa {
  padding: 0 0 var(--wm-space-lg) !important;
}

/* 9.4  News */
.page-59 #section-id-1656091600509 { padding: var(--wm-space-xl) 0 !important; }

.page-59 #section-id-1656091600509 .sppb-addon-title {
  margin-bottom: var(--wm-space-md);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
}

/* 9.5  Partner */
.page-59 #section-id-562b37a1-4eba-4054-8817-d9c058d83382 {
  padding: var(--wm-space-lg) 0 var(--wm-space-xl) !important;
  background-color: var(--brand-surface) !important;
}

.page-59 #section-id-562b37a1-4eba-4054-8817-d9c058d83382 img {
  width: 100% !important;
  max-width: 340px;
  max-height: 130px;
  margin: 0 auto;
  object-fit: contain;
}

/* 9.6  Meistgestellte Fragen
   --------------------------------------------------------------------------
   Eine Spalte ueber die ganze Breite laesst die Fragen auseinanderfallen.
   Die Liste steht deshalb in einem eigenen Satzspiegel, mittig unter der
   Ueberschrift, die dasselbe Muster traegt wie "UNSERE SERVICES" und
   "Zertifikate": zentriert, mit Akzentstrich darueber.
   -------------------------------------------------------------------------- */
.page-59 #section-id-4387872d-dc32-4ec9-a453-e769c5917f35 {
  padding: var(--wm-space-xl) 15px !important;
  background-color: var(--brand-white) !important;
}

.page-59 #section-id-4387872d-dc32-4ec9-a453-e769c5917f35 .sppb-container-inner {
  width: 100%;
  max-width: 1290px;
  margin: 0 auto;
}

.page-59 #section-id-4387872d-dc32-4ec9-a453-e769c5917f35 .sppb-column-addons {
  display: block;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

.page-59 #section-id-4387872d-dc32-4ec9-a453-e769c5917f35 .sppb-addon-wrapper {
  margin: 0 !important;
}

.page-59 #section-id-4387872d-dc32-4ec9-a453-e769c5917f35 .addon-root-text-block {
  margin-bottom: var(--wm-space-md) !important;
}

/* Die Einleitung steht ruhig unter der Ueberschrift, nicht als zweite
   Ansage in derselben Groesse. */
.page-59 #section-id-4387872d-dc32-4ec9-a453-e769c5917f35 .section-heading .sppb-addon-content p {
  max-width: 56ch;
  margin: 18px auto 0;
  color: var(--brand-text);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   9b  Unterseiten
   --------------------------------------------------------------------------
   Leistungs-, Rechts- und Formularseiten folgen demselben Bausystem wie die
   Startseite: Seitenkopf mit Akzentstrich, Kacheln statt blosser Listen, ein
   Leistungsband in der textsicheren Blauvariante und ein Formular mit
   sichtbaren Beschriftungen.
   -------------------------------------------------------------------------- */
#sp-page-builder:not(.page-59) .page-content > .sppb-section:first-child {
  padding-top: var(--wm-space-xl) !important;
}

/* Seitenkopf: gleiche Handschrift wie die Abschnittstitel der Startseite. */
#sp-page-builder:not(.page-59) .sppb-addon-header h1,
#sp-page-builder:not(.page-59) .page-content > .sppb-section:first-child h1.sppb-addon-title {
  font-size: clamp(2.1rem, 4.4vw, 3.25rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}

#sp-page-builder:not(.page-59) .page-content > .sppb-section:first-child h1.sppb-addon-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  margin: 0 0 22px;
  background: var(--brand-primary);
  border-radius: var(--wm-radius-pill);
}

/* Zwischenueberschrift der Leistungsseiten. */
.wm-section-heading .sppb-addon-title {
  margin-bottom: var(--wm-space-md) !important;
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
}

/* --------------------------------------------------------------------------
   Leistungsumfang
   --------------------------------------------------------------------------
   Ein Muster fuer alle vier Leistungsseiten. Wo der Umfang in Abschnitte
   zerfaellt – Projektentwicklung: Standortpruefung, Vorplanung,
   Genehmigung – steht der Abschnittstitel als Zwischenueberschrift ueber
   einer Haarlinie; wo er das nicht tut, entfaellt diese Ebene ersatzlos.
   Keine Kacheln, keine Rahmen, keine Ziffern: Ueberschrift, Linie und
   Abstand gliedern.
   -------------------------------------------------------------------------- */
.wm-scope { max-width: 820px; }

.wm-scope-group { padding-bottom: var(--wm-space-lg); }
.wm-scope-group:last-child { padding-bottom: 0; }

.wm-scope-title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--brand-line);
  color: var(--brand-dark);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.wm-scope-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-scope-list > li {
  position: relative;
  padding-left: 30px;
  color: var(--brand-text);
  line-height: 1.6;
}

.wm-scope-list > li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 18px;
  height: 18px;
  background-color: var(--brand-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

@media (max-width: 575.98px) {
  .wm-scope-group { padding-bottom: var(--wm-space-md); }
  .wm-scope-list > li { padding-left: 26px; }
  .wm-scope-list > li::before { width: 16px; height: 16px; background-size: 16px 16px; }
}

/* --------------------------------------------------------------------------
   Weitere Leistungen: durchgehendes Band statt versetztem Kasten
   -------------------------------------------------------------------------- */
.sppb-section.contained-row {
  padding: var(--wm-space-xl) 0 !important;
  background: var(--brand-primary) !important;
}

.sppb-section.contained-row > .sppb-row-container > .sppb-row {
  display: block;
  margin: 0;
}

.sppb-section.contained-row [id^="column-wrap-id-"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex-basis: 100% !important;
}

.sppb-section.contained-row [id^="column-wrap-id-"]:first-child { display: none !important; }

.sppb-section.contained-row .sppb-column {
  padding: 0 !important;
  background: transparent !important;
}

.sppb-section.contained-row .addon-root-empty-space { display: none !important; }

/* Die Ueberschrift stand als Konturschrift hinter der Liste. */
.sppb-section.contained-row .main-heading .sppb-addon-title {
  position: static !important;
  margin: 0 0 var(--wm-space-md) !important;
  color: var(--brand-white) !important;
  font-family: 'Rubik', system-ui, sans-serif !important;
  font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
  letter-spacing: -0.025em !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: currentColor !important;
}

.sppb-section.contained-row .main-heading .sppb-addon-content { display: none; }

.sppb-section.contained-row .sppb-addon-raw-html .sppb-addon-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.sppb-section.contained-row { padding-right: var(--wm-gutter) !important; padding-left: var(--wm-gutter) !important; }

.sppb-section.contained-row .about-us-full-width {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sppb-section.contained-row .about-us-full-width ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sppb-section.contained-row .about-us-full-width li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  list-style: none;
}

.sppb-section.contained-row .about-us-full-width a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--wm-tap);
  padding: 16px 20px;
  color: var(--brand-white) !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--wm-radius);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.sppb-section.contained-row .about-us-full-width,
.sppb-section.contained-row .about-us-full-width ul,
.sppb-section.contained-row .about-us-full-width li,
.sppb-section.contained-row .about-us-full-width a { height: 100%; }

.sppb-section.contained-row .about-us-full-width a::before {
  display: grid !important;
  place-items: center;
  flex: 0 0 auto;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--brand-primary) !important;
  background: var(--brand-white) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.sppb-section.contained-row .about-us-full-width a::after {
  content: "\2192";
  flex: 0 0 auto;
  opacity: 0.7;
}

.sppb-section.contained-row .about-us-full-width a:hover,
.sppb-section.contained-row .about-us-full-width a:focus-visible {
  color: var(--brand-dark) !important;
  background: var(--brand-white);
  border-color: var(--brand-white);
  transform: translateY(-2px);
}

.sppb-section.contained-row .about-us-full-width.active a {
  color: var(--brand-dark) !important;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Rechts- und Textseiten: ruhige Lesebreite, kleinere Zwischenueberschriften. */
.wm-legal-section .sppb-addon-title,
#sp-page-builder:not(.page-59) .sppb-addon-text-block .sppb-addon-title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  line-height: 1.2 !important;
}

#sp-page-builder:not(.page-59) .sppb-addon-text-block .sppb-addon-content,
#sp-page-builder:not(.page-59) .sppb-addon-text-block p,
#sp-page-builder:not(.page-59) .sppb-addon-text-block ul { max-width: 70ch; }

#sp-page-builder:not(.page-59) .sppb-addon-text-block ul {
  padding-left: 1.25rem;
  list-style: disc;
}

#sp-page-builder:not(.page-59) .sppb-addon-text-block li::marker { color: var(--brand-primary); }
#sp-page-builder:not(.page-59) .sppb-addon-text-block li { margin-bottom: 0.35rem; }

.wm-legal-section { margin-bottom: var(--wm-space-md); }

/* Kontaktseite: Streifen und Karte in derselben Formensprache. */
#sp-page-builder .sppb-section:has(> .sppb-container-inner .sppb-addon-feature.contact) {
  padding: 18px 8px !important;
  background-color: var(--brand-primary) !important;
  border-radius: var(--wm-radius-card);
}

/* Die Kontaktzeile war urspruenglich in einen Page-Builder-Container
   eingebettet. Als eigenstaendiger Abschnitt braucht sie dessen normale
   Desktopbreiten explizit, damit der blaue Hintergrund nicht ueber die
   gesamte Fensterbreite laeuft. */
@media (min-width: 992px) {
  #sp-page-builder.page-23 #section-id-2abae96d-4fb3-4c93-8db9-2d13402c244f {
    width: 960px;
    max-width: calc(100% - 30px);
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  #sp-page-builder.page-23 #section-id-2abae96d-4fb3-4c93-8db9-2d13402c244f {
    width: 1140px;
  }
}

@media (min-width: 1400px) {
  #sp-page-builder.page-23 #section-id-2abae96d-4fb3-4c93-8db9-2d13402c244f {
    width: 1320px;
  }
}

.sppb-addon-feature.contact { text-align: left; }

.sppb-addon-feature.contact,
.sppb-addon-feature.contact p,
.sppb-addon-feature.contact span,
.sppb-addon-feature.contact .sppb-addon-text,
.sppb-addon-feature.contact .sppb-media-content { color: var(--brand-dark) !important; }

.sppb-addon-feature.contact .sppb-addon-title,
.sppb-addon-feature.contact .sppb-addon-title a,
.sppb-addon-feature.contact .sppb-addon-text p {
  color: var(--brand-dark) !important;
  font-weight: 600 !important;
}

.sppb-addon-feature.contact .sppb-icon-container {
  color: var(--brand-dark) !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

/* --------------------------------------------------------------------------
   9c  Anfrageformular
   --------------------------------------------------------------------------
   Zweigeteilte Seite nach dem Vorbild von sg-solar.de: links eine dunkle
   Spalte mit Anrede und Einleitung, rechts das Formular auf weissem Grund.
   Der Aufbau entsteht vollstaendig im Stylesheet – der Abschnitt bleibt im
   Page Builder eine einzige Spalte und ist dort weiter bearbeitbar.

   Visforms gibt die Feldbezeichnungen nur fuer Hilfstechnik aus. Ein
   Platzhalter verschwindet beim Tippen und ist deshalb keine Beschriftung:
   die Bezeichnungen werden sichtbar gemacht, die Platzhalter geben einen
   eigenen Hinweis.
   -------------------------------------------------------------------------- */
#sp-page-builder.page-47 .page-content > #section-id-1656445770425 {
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--brand-white) !important;
}

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

#sp-page-builder.page-47 #section-id-1656445770425 [id^="column-wrap-id-"] {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  flex: 0 0 100% !important;
}

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

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

/* 9c.1  Dunkle Textspalte */
#sp-page-builder.page-47 #sppb-addon-wrapper-1656445770428,
#sp-page-builder.page-47 #sppb-addon-wrapper-1656445770431 {
  position: relative;
  z-index: 1;
  padding-right: var(--wm-gutter) !important;
  padding-left: var(--wm-gutter) !important;
  margin: 0 !important;
  color: var(--brand-white);
  background: var(--brand-dark);
}

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

#sp-page-builder.page-47 #sppb-addon-wrapper-1656445770428::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 130px;
  height: 130px;
  background: var(--brand-primary);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}

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

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

#sp-page-builder.page-47 #sppb-addon-1656445770428 .sppb-addon-title {
  margin: 0 !important;
  color: var(--brand-primary) !important;
  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-47 #sppb-addon-1656445770431 h1 {
  max-width: 15ch;
  margin: 0 0 24px !important;
  color: var(--brand-white) !important;
  font-size: clamp(2.1rem, 9.5vw, 3.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

/* Der Akzentstrich der uebrigen Seitenkoepfe entfaellt hier: die Kurzzeile
   darueber uebernimmt seine Aufgabe. */
#sp-page-builder.page-47 #sppb-addon-1656445770431 h1::before { content: none !important; }

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

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

#sp-page-builder.page-47 #sppb-addon-wrapper-53ccd081-0cd9-4528-aa44-d6bb08b19bd7 { display: none !important; }

/* 9c.2  Formularspalte */
#sp-page-builder.page-47 #sppb-addon-wrapper-ec523e45-716a-4426-ae9d-30e643e6b01e {
  position: relative;
  z-index: 2;
  padding: 50px var(--wm-gutter) 72px !important;
  margin: 0 !important;
  background: var(--brand-white);
}

#sp-page-builder.page-47 #sppb-addon-ec523e45-716a-4426-ae9d-30e643e6b01e .sppb-addon-title {
  margin: 0 0 12px !important;
  color: var(--brand-dark) !important;
  font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}

#sp-page-builder.page-47 #sppb-addon-ec523e45-716a-4426-ae9d-30e643e6b01e .sppb-addon-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 18px;
  background: var(--brand-primary);
  border-radius: var(--wm-radius-pill);
}

/* 9c.3  Felder */
.visforms-form,
#mod-visform1,
#mod-visform1 fieldset {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

#mod-visform1 .vis_mandatory {
  margin: 0 0 26px;
  color: var(--brand-text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}

#mod-visform1 fieldset > .row:not(.form-group) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin: 0;
}

#mod-visform1 fieldset > .row:not(.form-group) > [class*="field"] {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

#mod-visform1 .form-group.row,
#mod-visform1 [class*="field"] > .row {
  display: block;
  margin: 0;
}

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

#mod-visform1 label {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  color: var(--brand-dark) !important;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}

#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;
}

#mod-visform1 .required label .visually-hidden::after,
#mod-visform1 .form-group.required > label::after {
  content: " *";
  color: #A4262C;
}

#mod-visform1 .form-control,
#mod-visform1 .form-select,
#mod-visform1 select {
  width: 100%;
  min-height: 56px;
  padding: 13px 0 11px !important;
  color: var(--brand-dark) !important;
  background-color: var(--brand-white) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--brand-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  line-height: 1.4;
  transition: border-color 180ms ease, background-color 180ms ease;
}

#mod-visform1 select.form-control { padding-right: 40px !important; }
#mod-visform1 textarea.form-control { min-height: 170px; resize: vertical; }

#mod-visform1 .form-control::placeholder { color: #8C8FA3; opacity: 1; }

#mod-visform1 .form-control:hover,
#mod-visform1 select:hover,
#mod-visform1 .form-control:focus,
#mod-visform1 select:focus {
  background-color: var(--brand-surface) !important;
  border-bottom-color: var(--brand-primary-strong) !important;
}

/* Der Tastaturfokus bleibt als eigener Rahmen sichtbar; die farbige
   Unterkante allein waere dafuer zu schwach. */
#mod-visform1 .form-control:focus-visible,
#mod-visform1 select:focus-visible {
  outline: 3px solid var(--brand-focus) !important;
  outline-offset: 2px;
}

#mod-visform1 .form-group:focus-within label { color: var(--brand-primary) !important; }

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

/* 9c.4  Pruefbild */
#mod-visform1 fieldset > .form-group.row.required {
  display: block;
  padding-top: 28px;
  margin: 34px 0 0;
  border-top: 1px solid var(--brand-line);
}

#mod-visform1 fieldset > .form-group.row.required > div {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  padding: 0;
}

#mod-visform1 .captchacode {
  flex: 0 0 auto;
  width: auto !important;
  max-width: min(100%, 220px);
  height: auto;
  padding: 8px;
  margin: 0 !important;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
}

#mod-visform1 [class^="captcharefresh"] {
  flex: 0 0 38px;
  width: 38px !important;
  height: 38px;
  padding: 9px;
  margin: 0 !important;
  background: var(--brand-primary);
  border-radius: 50%;
}

#mod-visform1 fieldset > .form-group.row.required span {
  flex: 0 0 min(100%, 230px);
  width: min(100%, 230px);
  padding: 0;
}

/* 9c.5  Absenden */
#mod-visform1 fieldset > .col-12,
#mod-visform1 .pbBtnCon > [class~="col-10"],
#mod-visform1 .pbBtnCon [class~="col-12"],
#mod-visform1 .pbBtnCon [class~="col-auto"] {
  width: 100%;
  max-width: none;
  padding: 0;
}

#mod-visform1 .pbBtnCon {
  display: block;
  padding: 0;
  margin: 30px 0 0 !important;
  border: 0;
}

#mod-visform1 .pbBtnCon > [class~="col-1"] { display: none; }

#mod-visform1 .pbBtnCon .justify-content-center {
  display: flex;
  justify-content: stretch !important;
}

#mod-visform1 #field8 {
  width: 100% !important;
  min-height: 58px;
  padding: 16px 28px !important;
  color: var(--brand-white) !important;
  background: var(--brand-primary) !important;
  border: 2px solid var(--brand-primary) !important;
  border-radius: var(--wm-radius) !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.3;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

#mod-visform1 #field8:hover,
#mod-visform1 #field8:focus-visible {
  color: var(--brand-white) !important;
  background: var(--brand-primary-deep) !important;
  border-color: var(--brand-primary-deep) !important;
  transform: none;
}

#mod-visform1 #field8[disabled] { opacity: 0.55; cursor: not-allowed; }

@media (min-width: 768px) {
  #mod-visform1 fieldset > .row:not(.form-group) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 24px;
  }

  /* Name, Erreichbarkeit, Anschrift, Anliegen. */
  #mod-visform1 .field1  { grid-column: 1 / 7;   grid-row: 1; }
  #mod-visform1 .field2  { grid-column: 7 / 13;  grid-row: 1; }
  #mod-visform1 .field3  { grid-column: 1 / 7;   grid-row: 2; }
  #mod-visform1 .field6  { grid-column: 7 / 13;  grid-row: 2; }
  #mod-visform1 .field9  { grid-column: 1 / 10;  grid-row: 3; }
  #mod-visform1 .field11 { grid-column: 10 / 13; grid-row: 3; }
  #mod-visform1 .field10 { grid-column: 1 / 5;   grid-row: 4; }
  #mod-visform1 .field4  { grid-column: 5 / 13;  grid-row: 4; }
  #mod-visform1 .field5  { grid-column: 1 / 13;  grid-row: 5; }
  #mod-visform1 .field7  { grid-column: 1 / 13;  grid-row: 6; }
}

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

  #sp-page-builder.page-47 #column-id-1656445770423 > .sppb-column-addons::before,
  #sp-page-builder.page-47 #column-id-1656445770423 > .sppb-column-addons::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }

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

  #sp-page-builder.page-47 #column-id-1656445770423 > .sppb-column-addons::after {
    top: 0;
    left: calc(40% - 220px);
    width: 220px;
    height: 220px;
    background: var(--brand-primary);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
  }

  #sp-page-builder.page-47 #sppb-addon-wrapper-1656445770428,
  #sp-page-builder.page-47 #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-47 #sppb-addon-wrapper-1656445770428 {
    grid-row: 1;
    padding-top: 94px !important;
  }

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

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

  #sp-page-builder.page-47 #sppb-addon-1656445770431 h1 {
    max-width: 12ch;
    font-size: clamp(2.6rem, 3.6vw, 3.6rem) !important;
  }

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

  #mod-visform1 .pbBtnCon .justify-content-center { justify-content: flex-end !important; }

  #mod-visform1 .pbBtnCon [class~="col-auto"] {
    width: auto !important;
    max-width: none;
    margin-left: auto;
  }

  #mod-visform1 #field8 { width: auto !important; min-width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  #mod-visform1 .form-control,
  #mod-visform1 select,
  #mod-visform1 #field8 { transition: none; }
}

/* --------------------------------------------------------------------------
   10  Formulare
   -------------------------------------------------------------------------- */
label,
.visCtrlLabel label,
.control-label label {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: var(--brand-dark);
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea,
.form-control {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0.85rem;
  border: 1px solid #CFD9E2;
  border-radius: var(--wm-radius);
  background-color: var(--brand-white);
  color: var(--brand-dark);
  font-family: inherit;
  font-size: 1rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus {
  border-color: var(--brand-primary);
  outline: 3px solid var(--brand-focus);
  outline-offset: 1px;
  box-shadow: none;
}

textarea { min-height: 9rem; resize: vertical; }

.invalid,
input[aria-invalid="true"],
.visError input,
.visError textarea { border-color: #A4262C; }

.visErrorMessage,
.wm-form-error {
  color: #A4262C;
  font-weight: 500;
  margin-top: 0.35rem;
}

.wm-form-success {
  border-left: 4px solid var(--brand-primary);
  background: var(--brand-surface);
  color: var(--brand-dark);
  padding: var(--wm-space-sm) var(--wm-space-md);
}

fieldset { border: 0; padding: 0; margin: 0 0 var(--wm-space-md); }

/* --------------------------------------------------------------------------
   11  Fussbereich
   --------------------------------------------------------------------------
   Zuvor lagen dort drei widersprechende Flaechen uebereinander: eine dunkle
   Grundfarbe, eine helle Bleistiftzeichnung als Abschnittsbild und ein
   dunkler Kontaktkasten darin. Ueberschriften standen weiss auf weiss.
   Jetzt: eine durchgehend dunkle Flaeche, darauf ein helles Kontaktband in
   der Logofarbe mit dunkler Schrift.
   -------------------------------------------------------------------------- */
#sp-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  color: rgba(255, 255, 255, 0.78);
  background-color: var(--brand-dark);
}

#sp-footer::before,
#sp-footer::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

#sp-footer::before {
  top: 0;
  right: 0;
  width: clamp(140px, 18vw, 280px);
  height: clamp(90px, 9vw, 130px);
  background: rgba(126, 191, 230, 0.16);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}

#sp-footer::after {
  bottom: 0;
  left: 0;
  width: clamp(150px, 28vw, 380px);
  height: clamp(110px, 18vw, 220px);
  background: rgba(126, 191, 230, 0.12);
  clip-path: polygon(0 30%, 100% 100%, 0 100%);
}

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

/* Die Bleistiftzeichnung des Demostands entfaellt. */
#sp-footer .sppb-section {
  background-image: none !important;
  background-color: transparent !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 .sppb-addon-title {
  color: var(--brand-white) !important;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--wm-space-sm);
}

#sp-footer a { color: rgba(255, 255, 255, 0.86) !important; text-decoration: none; }
#sp-footer a:hover,
#sp-footer a:focus-visible {
  color: var(--brand-primary) !important;
  text-decoration: underline;
}

#sp-footer ul { list-style: none; margin: 0; padding: 0; }
#sp-footer li { margin-bottom: 0.4rem; }
#sp-footer li a { display: inline-flex; align-items: center; min-height: 32px; }

#sp-footer img { width: auto; max-width: 210px; }

.wm-footer-logo img {max-width: 210px; }

/* Dekorative ::after-Linien im Fussbereich entfallen. */
#sp-footer .sppb-addon-title::after,
#sp-footer h3::after,
#sp-footer h4::after { content: none !important; display: none !important; }

/* 11.1  Kontaktband */
#sp-footer #section-id-1656098955893 {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 48px 0 !important;
  color: var(--brand-dark) !important;
  background-color: var(--brand-primary) !important;
  border-radius: 0 !important;
}

#sp-footer #section-id-1656098955893::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.24);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
  display: block !important;
}

#sp-footer #section-id-1656098955893 > .sppb-container-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  padding: 0 var(--wm-gutter);
  margin: 0 auto;
}

#sp-footer #section-id-1656098955893 .sppb-icon-container {
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  place-items: center;
  color: var(--brand-dark) !important;
  background: rgba(255, 255, 255, 0.32) !important;
  border: 1px solid rgba(31, 36, 44, 0.28) !important;
  border-radius: 50% !important;
}

#sp-footer #section-id-1656098955893 .sppb-icon-container i {
  color: inherit !important;
  font-size: 22px !important;
}

#sp-footer #section-id-1656098955893 .sppb-media { display: flex; align-items: center; gap: 16px; }
#sp-footer #section-id-1656098955893 .sppb-media > .pull-left { float: none !important; margin: 0 !important; }
#sp-footer #section-id-1656098955893 .sppb-media-content { display: flex; flex-direction: column-reverse; min-width: 0; }

#sp-footer #section-id-1656098955893 .sppb-addon-text,
#sp-footer #section-id-1656098955893 .sppb-addon-text p,
#sp-footer #section-id-1656098955893 .sppb-addon-text a,
#sp-footer #section-id-1656098955893 .sppb-addon-text span {
  margin: 0;
  color: rgba(31, 36, 44, 0.72) !important;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#sp-footer #section-id-1656098955893 .sppb-addon-text p { margin: 0 0 4px; }

#sp-footer #section-id-1656098955893 .sppb-addon-title {
  margin: 0 !important;
  color: var(--brand-dark) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

#sp-footer #section-id-1656098955893 a,
#sp-footer #section-id-1656098955893 .sppb-addon-title a { color: var(--brand-dark) !important; }
#sp-footer #section-id-1656098955893 .sppb-addon-title a:hover,
#sp-footer #section-id-1656098955893 .sppb-addon-title a:focus-visible { color: var(--brand-primary-deep) !important; }

#sp-footer #section-id-1656098955893 .sppb-divider-border { border-color: rgba(31, 36, 44, 0.25) !important; }

/* 11.2  Verweisspalten und Zeile mit dem Urhebervermerk */
#sp-footer #section-id-1656118327352 { padding: 64px 0 !important; }

#sp-footer #section-id-1656119785407 {
  padding: 20px 0 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

#sp-footer #section-id-1656119785407 .sppb-addon-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
}

/* Urhebervermerk und Gestaltungsnachweis stehen in einer Zeile; die
   Trennlinie gehoert nur an den Abschnitt, nicht an die zweite Spalte. */
#sp-footer #section-id-1656119785407 .sppb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px clamp(24px, 12vw, 180px);
}

#sp-footer #section-id-1656119785407 [id^="column-wrap-id-"] {
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto !important;
}

#sp-footer #section-id-1656119785407 [id^="column-wrap-id-"],
#sp-footer #section-id-1656119785407 [id^="column-id-"],
#sp-footer #section-id-1656119785407 .sppb-addon-wrapper {
  border: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 767.98px) {
  #sp-footer #section-id-1656119785407 .sppb-row { justify-content: center; }
}

.wm-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.wm-footer-legal .sppb-addon-content:empty { display: none; }
.wm-footer-legal .sppb-addon-title { margin: 0 !important; }
.wm-footer-legal .wm-consent-switch { margin: 0; }

/* Mobil: alles zentriert. */
@media (max-width: 767.98px) {
  #sp-footer,
  #sp-footer .sp-column,
  #sp-footer .sppb-addon,
  #sp-footer .sppb-column,
  #sp-footer ul,
  #sp-footer li,
  #sp-footer p,
  #sp-footer h3,
  #sp-footer h4,
  #sp-footer .sppb-addon-title { text-align: center !important; }

  #sp-footer img { margin-left: auto; margin-right: auto; display: block; }
  #sp-footer li a { justify-content: center; }
}

/* --------------------------------------------------------------------------
   12  Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  :root { --wm-space-lg: 3.5rem; --wm-space-xl: 5rem; --wm-gutter: 28px; }
}

@media (min-width: 768px) {
  :root { --wm-space-lg: 4rem; --wm-space-xl: 6rem; --wm-gutter: 32px; }

  body { font-size: 1.02rem; }

  .sp-page-builder .page-content .sppb-section {
    padding-top: var(--wm-space-xl);
    padding-bottom: var(--wm-space-xl);
  }

  #sp-header .logo-image,
  #sp-logo img,
  .sp-default-logo { max-width: 260px; max-height: 52px; }

  :root { --wm-card-media: 250px; }

  .page-59 #section-id-1656004652089 > .sppb-row-container > .sppb-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Die Fragenliste bleibt auch auf breiten Schirmen einspaltig. */
  .page-59 #section-id-4387872d-dc32-4ec9-a453-e769c5917f35 .wm-faq-item {
    padding: 24px 2px;
  }

  .page-59 .about-us-content-left ul { gap: 12px; }
}

@media (min-width: 992px) {
  #sp-header,
  #sp-header .row,
  #sp-header > .container > .container-inner > .row { min-height: 84px; }

  #sp-header .logo-image,
  #sp-logo img,
  .sp-default-logo { max-width: 280px; max-height: 60px; }

  /* Die Karten ruecken in das Leistungsband hinein – der Uebergang zwischen
     Band und Karten ersetzt eine harte Kante. */
  .page-59 #section-id-1656004652082 { padding: 100px 0 250px !important; }

  .page-59 #section-id-1656004652089 { margin-top: -200px !important; }

  .page-59 .wm-qualification { max-width: calc(100% - 40px); margin-left: 40px; }

  .page-59 #section-id-ce17e52f-789c-42ed-a5da-dab22cc517c4 {
    padding: 88px 0 96px !important;
  }
}

@media (min-width: 1200px) {
  :root { --wm-space-xl: 6.5rem; --wm-card-media: 290px; }

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

@media (min-width: 1400px) {
  body { font-size: 1.05rem; }
}

/* Kein horizontaler Ueberlauf, auf keiner Breite. */
html, body { overflow-x: clip; max-width: 100%; }
.sppb-row, .row { margin-left: 0; margin-right: 0; }
.sppb-row > [class*="sppb-col"], .row > [class*="col"] { min-width: 0; }

/* --------------------------------------------------------------------------
   13  Hilfsklassen und Trefferflaechen
   -------------------------------------------------------------------------- */

/* Untermenue, das per Tastatur geoeffnet wurde. */
.sp-megamenu-parent > li.wm-open > .sp-dropdown {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Nummerierte Leistungspositionen (Unterseiten). */
.wm-numbered { counter-reset: wm-item; list-style: none; margin: 0; padding: 0; }
.wm-numbered > li {
  counter-increment: wm-item;
  position: relative;
  padding: var(--wm-space-md) 0 var(--wm-space-md) 3.25rem;
  border-top: 1px solid var(--brand-line);
}
.wm-numbered > li::before {
  content: counter(wm-item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--wm-space-md);
  color: var(--brand-primary);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

/* Aufklappbare Abschnitte (Unterseiten). */
.sppb-panel-group .sppb-panel {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--brand-line);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.sppb-panel-group .sppb-panel-heading { background: transparent; padding: 0; }
.sppb-panel-group .sppb-panel-title,
.sppb-panel-group .sppb-panel-heading > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--wm-tap);
  padding: var(--wm-space-sm) 0;
  color: var(--brand-dark);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.sppb-panel-group .sppb-panel-title:hover { color: var(--brand-primary-strong); }
.sppb-panel-group .sppb-panel-body { padding: 0 0 var(--wm-space-md); }

/* Fremdfarben aus dem Zingbox-Demostand neutralisieren. */
.article-details .article-author-information { background: var(--brand-surface); color: var(--brand-dark); }
.zingbox-icon-tick:before { color: var(--brand-primary); }

/* Einzelne Page-Builder-Zeilen tragen negative Aussenabstaende von bis zu
   35 px je Seite. Auf schmalen Geraeten wird der Inhalt dadurch
   abgeschnitten; dort wird einspaltig ausgegeben. */
@media (max-width: 767.98px) {
  .sp-page-builder .page-content .sppb-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .sp-page-builder .page-content .sppb-row > [class*="sppb-col"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sppb-articles-carousel-wrap { max-width: 100%; }
}

/* Weiterlesen-Verweise, verlinkte Leistungsueberschriften, die Schaltflaechen
   im Newsslider und das Schliessen-Symbol der mobilen Navigation waren nur
   17 bis 26 px hoch. Auf Geraeten ohne Zeigegeraet erhalten sie die volle
   Zielgroesse, ohne dass sich ihre Beschriftung aendert. */
@media (max-width: 991.98px), (pointer: coarse) {
  .service-read-more,
  .btn-read-more,
  .sppb-addon-feature h3.heading > a,
  .sppb-addon-feature .heading > a,
  .article-item .btn-read-more,
  .sppb-addon-single-image .sppb-addon-title a {
    display: inline-flex;
    align-items: center;
    min-height: var(--wm-tap);
  }

  .close-offcanvas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--wm-tap);
    min-height: var(--wm-tap);
  }

  #sp-footer .sppb-addon-title a,
  #sp-footer .sppb-feature-title a {
    display: inline-flex;
    align-items: center;
    min-height: var(--wm-tap);
  }
}

/* --------------------------------------------------------------------------
   14  Einwilligungshinweis
   --------------------------------------------------------------------------
   Ruhig gestaltet, mobil zuerst, keine Verdunklung des Seiteninhalts.
   Ablehnen und Zustimmen sind gleich gross, gleich auffaellig und in
   derselben Ebene – eine der beiden Antworten wird nicht bevorzugt.
   -------------------------------------------------------------------------- */
.wm-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--brand-white);
  border-top: 3px solid var(--brand-primary);
  box-shadow: 0 -2px 12px rgba(31, 36, 44, 0.12);
  padding: var(--wm-space-md) var(--wm-space-sm);
  max-height: 80vh;
  overflow-y: auto;
}

.wm-consent-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand-dark);
  margin: 0 0 var(--wm-space-xs);
}

.wm-consent-text {
  color: var(--brand-text);
  font-size: 0.95rem;
  margin: 0 0 var(--wm-space-xs);
  max-width: 60ch;
}

.wm-consent-link {
  display: inline-block;
  margin-bottom: var(--wm-space-sm);
  color: var(--brand-primary);
}

.wm-consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wm-space-sm);
  max-width: 26rem;
}

.wm-consent-btn {
  min-height: var(--wm-tap);
  padding: 0.7em 1.2em;
  border-radius: var(--wm-radius);
  border: 2px solid var(--brand-primary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.wm-consent-deny {
  background: var(--brand-white);
  color: var(--brand-primary);
}

.wm-consent-allow {
  background: var(--brand-primary);
  color: var(--brand-white);
}

.wm-consent-deny:hover,
.wm-consent-deny:focus-visible { background: var(--brand-surface); }

.wm-consent-allow:hover,
.wm-consent-allow:focus-visible {
  background: var(--brand-primary-deep);
  border-color: var(--brand-primary-deep);
}

.wm-consent-switch { margin: var(--wm-space-xs) 0 0; }

.wm-consent-switch-btn {
  background: none;
  border: 0;
  padding: 0.4rem 0;
  min-height: 32px;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}

/* Ohne diese Ruecknahme faerben die globalen Regeln `button:hover` und
   `button:focus` aus der Template-Datei custom.css die Schaltflaeche
   vollflaechig ein. */
.wm-consent-switch-btn:hover,
.wm-consent-switch-btn:focus,
.wm-consent-switch-btn:focus-visible { background: none; }

.wm-consent-switch-btn:hover,
.wm-consent-switch-btn:focus-visible { color: var(--brand-primary); }

@media (min-width: 768px) {
  .wm-consent {
    left: auto;
    right: var(--wm-space-md);
    bottom: var(--wm-space-md);
    max-width: 30rem;
    border: 1px solid var(--brand-line);
    border-top: 3px solid var(--brand-primary);
    border-radius: var(--wm-radius);
    padding: var(--wm-space-md);
  }
}