/*
 Theme Name:   Twenty Twenty Four Child
 description:  Twenty Twenty Four Child
 Author:       Tryfon Tzanetis
 Author URI:   http://tafhub.com
 Template: twentytwentyfour
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 7.10
License: GNU General Public License v2 or later
License URI: http: //www.gnu.org/licenses/gpl-2.0.html
Tags:         Tags: one-column,
custom-colors,
custom-menu,
custom-logo,
editor-style,
featured-images,
full-site-editing,
block-patterns,
rtl-language-support,
sticky-post,
threaded-comments,
translation-ready,
wide-blocks,
block-styles,
style-variations,
accessibility-ready,
blog,
portfolio,
news
 Text Domain:  twenty-twenty-four-child
*/
/* general */
:root {
  --cta-button-background: #0d6efd;
  --cta-button-background-hover: #0b5ed7;
  --text-link: #0d6efd;
  --text-link-hover: #052c65;
}

html {
  overflow-x: clip;
}
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100vw;
}

/* Defensive: keep all images contained on small screens, and clip any
   cosmetic overflow (e.g. ::before glows, off-screen decoration). */
img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  body.home .hp-article,
  body.home .hp-article > * {
    max-width: 100vw;
    overflow-x: clip;
  }
  body.home .hp-article .container,
  body.home .karriere-container {
    max-width: 100%;
  }
  /* Tighter side gutters on mobile — WP global padding is 15px, plus
     container 1.5rem (24px) — feels too wide on phones. Halve it. */
  body.home {
    --wp--style--root--padding-right: 8px;
    --wp--style--root--padding-left: 8px;
  }
}
.has-modal-open {
  overflow: hidden;
}
:where(.wp-site-blocks *:focus) {
  outline-width: 2px;
  outline-style: solid;
}

/* Michael 2024-09-18 */
a:where(:not(.wp-element-button)), a:where(:not(.wp-element-button)):visited {
  color: var(--text-link);
  text-decoration: underline;
  transition: color 0.2s ease;
  transition-property: background-color, border-color, color, opacity;
}

a:where(:not(.wp-element-button)):hover, a:where(:not(.wp-element-button)):focus {
  text-decoration: none;
  color: var(--text-link-hover);
  transition: color 0.2s ease;
  transition-property: background-color, border-color, color, opacity;
}

a:hover {
	cursor: pointer;
}

body {
  word-break: break-word;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

#form-bottom {
  scroll-margin-top: 80px;
}

/* Sticky-header hamburger now stays inside the header instead of detaching
   as a floating circle. (Header itself is position: sticky.) */
button a {
  color: inherit !important;
  text-decoration: none !important;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none !important;
}
a:focus {
  outline: none !important;
}

@media (max-width: 768px) {
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 28px;
  }
  h3 {
    font-size: 24px;
  }
}

/* header */
#masthead.site-header,
.site-header,
header.wp-block-template-part {
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(84, 89, 95, 0.41);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Pages on the page-clean.php template: flush hero against header — kill the
   browser-default <main> margin and the leading-block top margin. */
main.lead-page-clean {
  margin: 0;
  padding: 0;
}
main.lead-page-clean > .alignfull:first-child,
main.lead-page-clean > .wp-block-group:first-child {
  margin-top: 0;
}
/* bs24-page template: erstes vollbreites Hero-Band bündig an den (sticky)
   Header andocken. .wp-site-blocks setzt 1.2rem blockGap über den Seiteninhalt
   (analog zum Footer, vgl. ".wp-site-blocks > footer" unten); hier entfernen,
   sobald der Seiteninhalt mit einem alignfull-Band beginnt. */
.wp-site-blocks > .wp-block-post-content:has(> .alignfull:first-child) {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
/* Single-Beiträge (Service-/Leistungs-Posts, single-Template mit <main>-Wrapper):
   dasselbe 1.2rem blockGap entfernen, sobald der Beitrag mit einem alignfull-Hero
   beginnt. Hier sitzt das blockGap auf <main> (direktes .wp-site-blocks-Kind), nicht
   auf .wp-block-post-content wie bei der bs24-page-Seite oben. */
.wp-site-blocks > main:has(> .wp-block-post-content > .alignfull:first-child) {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
/* Service-/Leistungs-Karten-Grid (z.B. "Unsere Security Audits"): alle Karten
   gleich hoch über eine echte CSS-Grid-Anordnung (grid-auto-rows:1fr) statt
   wp:columns, deren Karten sonst je nach Textlänge unterschiedlich hoch sind.
   Globale, wiederverwendbare Klasse — Karten-Styling bleibt in den Bloecken. */
.rl-cardgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;
  margin-top: 8px;
}
.rl-cardgrid > .wp-block-group {
  height: 100%;
  margin: 0;
}
@media (max-width: 980px) {
  .rl-cardgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rl-cardgrid { grid-template-columns: 1fr; grid-auto-rows: auto; }
}
/* Contact pages (de 274 / en 476695 / el 477399) — the full-bleed content
   bands carry an inline 24px side padding, so the 1280px content column sits
   WIDER than the rest of the site below ~1440px and no longer lines up with
   the header. Force the global header gutter (clamp(1rem,3vw,2.5rem)) so the
   content fluchtet mit dem Header at every width (style-guide.md). */
body.page-id-274 .wp-block-post-content > .wp-block-group.alignfull.has-global-padding,
body.page-id-476695 .wp-block-post-content > .wp-block-group.alignfull.has-global-padding,
body.page-id-477399 .wp-block-post-content > .wp-block-group.alignfull.has-global-padding {
  padding-left: clamp(1rem, 3vw, 2.5rem) !important;
  padding-right: clamp(1rem, 3vw, 2.5rem) !important;
}

/* /contact form card — mirror the homepage .prod-hero__form card.
   Note: the homepage's actual rendered styling comes from the more-specific
   `#bs24-page .prod-hero__form` rule below (ID-scoped, beats the body.home
   rules in homepage.css). That rule defines the blue-bordered nested card
   look. Replicating it here without the #bs24-page wrapper. */
body.page-id-274 .prod-hero__form {
  background: #ffffff;
  border: 1px solid #0d6efd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
body.page-id-274 .prod-hero__form-title {
  font-family: var(--lead-font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--lead-primary);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
body.page-id-274 .prod-hero__form-subtitle {
  font-size: 0.95rem;
  color: var(--lead-text-muted);
  margin: 0 0 1rem;
  line-height: 1.45;
}
body.page-id-274 .prod-hero__form-inner {
  background: #f9f9f9;
  border: 2px solid #0d6efd;
  border-radius: 8px;
  padding: 20px;
  margin-top: 12px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
body.page-id-274 .prod-hero__form-inner .wpforms-field-large,
body.page-id-274 .prod-hero__form-inner input[type="text"],
body.page-id-274 .prod-hero__form-inner input[type="email"],
body.page-id-274 .prod-hero__form-inner input[type="tel"] {
  border-color: var(--lead-border) !important;
  border-radius: var(--lead-radius);
}
body.page-id-274 .prod-hero__form-inner .wpforms-field-large:focus,
body.page-id-274 .prod-hero__form-inner input:focus {
  border-color: var(--lead-accent) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.2) !important;
  outline: none;
}
body.page-id-274 .prod-hero__form-inner .wpforms-submit {
  display: inline-block;
  background: #0d6efd !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--lead-radius) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  padding: 0.95rem 2rem !important;
  width: 100%;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s !important;
}
body.page-id-274 .prod-hero__form-inner .wpforms-submit:hover {
  background: #052c65 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.35);
}
body.page-id-274 .prod-hero__form-foot {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 1.25rem;
  color: var(--lead-text-muted);
}

/* Inner group inside the FSE header — align with the 1280px content container.
   max-width = 1280 + 2×40px Gutter = 1360px; das horizontale Padding nutzt denselben
   Gutter wie der Content (clamp, = global-styles root padding), damit Header und Inhalt
   auf allen Breiten bündig fluchten (Proliance-Stil: 40px Desktop, weniger mobil). */
header.wp-block-template-part > .wp-block-group.is-position-sticky,
header.wp-block-template-part > .wp-block-group {
  background: transparent !important;
  position: relative !important;
  top: auto !important;
  box-shadow: none !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2px clamp(1rem, 3vw, 2.5rem) !important;
  box-sizing: border-box !important;
}
/* Desktop: etwas mehr Luft über/unter dem Header-Inhalt, damit der
   Telefon-CTA nicht am Rand klebt — auch im Sticky-Zustand, wenn der
   Button (statt des Logos) die Zeilenhöhe bestimmt. */
@media (min-width: 1101px) {
  header.wp-block-template-part > .wp-block-group.is-position-sticky,
  header.wp-block-template-part > .wp-block-group {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* Slim header — match fs-energieberater.de/frankfurt height (~70px). */
header.wp-block-template-part .custom-logo,
header.wp-block-template-part .wp-block-site-logo img {
  max-height: 34px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important; /* never let the flex row scale the logo down */
}
/* Keep the logo at a CONSTANT size no matter how many menu items exist.
   Logo and menu are siblings in the .header-left flex row; without this the
   non-wrapping menu (white-space:nowrap) pushes and the only shrinkable item —
   the logo — gets squeezed smaller. flex:0 0 auto pins the logo wrapper. */
header.wp-block-template-part .site-branding,
header.wp-block-template-part .wp-block-site-logo,
header.wp-block-template-part .custom-logo-link {
  flex: 0 0 auto !important;
}

/* FSE header phone icon — white SVG, 26x26 (matches legacy .header-phone_icon).
   The outermost/icon-block plugin renders .phone_icon (no `header-` prefix). */
header.wp-block-template-part .phone_icon svg,
header.wp-block-template-part .phone_icon svg path,
header.wp-block-template-part .phone_icon svg g {
  fill: #fff !important;
}
header.wp-block-template-part .phone_icon svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
}
header.wp-block-template-part .phone_icon,
header.wp-block-template-part .phone_icon .icon-container {
  width: 26px !important;
  height: 26px !important;
  flex-shrink: 0 !important;
}

/* FSE header CTA button — match legacy .header-phone_label and .header-phone_text */
header.wp-block-template-part .header-phone p {
  margin: 0 !important;
}
header.wp-block-template-part .header-phone > .wp-block-group > p:first-of-type {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #fff !important;
}
header.wp-block-template-part .header-phone p a[href^="tel:"] {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #fff !important;
  white-space: nowrap;
  display: inline-block;
}

.header a,
#masthead a,
header.wp-block-template-part a {
  color: inherit;
  text-decoration: none !important;
}
.header:not(.sticky)
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
  margin-right: 20px;
}
.header .menu a,
#masthead .menu a,
header.wp-block-template-part .menu a {
 color: #333;
}
.header-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 1280px;
  padding: 2px 1.5rem;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Slim logo on legacy PHP header (e.g. /contact) — match FSE header height. */
#masthead.site-header .site-branding img.custom-logo,
#masthead.site-header .site-branding img {
  max-height: 34px !important;
  width: auto !important;
  height: auto !important;
}
.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}
.header-left {
  gap: var(--wp--preset--spacing--30);
}
.header-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d6efd;
  border-radius: 4px;
  padding: 10px 18px;
  position: relative;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.header-phone:hover {
  background: #0b5ed7;
  transform: translateY(-1px);
}
.header-phone a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.header-phone * {
  color: #fff !important;
}
.header-phone_icon svg,
.header-phone_icon svg path {
  display: block;
  width: 26px;
  height: 26px;
  fill: #fff !important;
}
.header-phone_info {
  line-height: 1.15;
}
.header-phone_label {
  font-size: 0.8125rem;
  font-weight: 700;
}
.header-phone_text a {
  font-weight: 700;
  font-size: 1.375rem;
  white-space: nowrap;
  display: inline-block;
}
/* Header-CTA-Button (.header-phone) auf Desktop kompakt & harmonisch —
   Normal- und Sticky-Zustand identisch: Padding 5px/14px, Label 0.75rem,
   Telefonnummer 1rem, Icon 20px, Radius 8px (wie der mobile Button).
   Die inneren Block-Gruppen erben sonst die clamp()-Schriftgrößen aus dem
   Template-Part (24.8px → 38px-Zeilenbox) und blähen den Button auf 65px
   Höhe auf — daher dort fixe font-size/line-height.
   Mobil (≤600px) bleibt unverändert. */
@media (min-width: 601px) {
  .header-phone,
  header.sticky .header-phone {
    padding: 5px 14px;
    gap: 8px;
    border-radius: 8px;
  }
  header.wp-block-template-part .header-phone .wp-block-group {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }
  header.wp-block-template-part .header-phone > .wp-block-group > p:first-of-type,
  .header-phone_label {
    font-size: 0.75rem !important;
  }
  header.wp-block-template-part .header-phone p a[href^="tel:"],
  .header-phone_text a,
  header.sticky .header-phone_text a {
    font-size: 1rem !important;
  }
  header.wp-block-template-part .phone_icon svg,
  header.wp-block-template-part .phone_icon,
  header.wp-block-template-part .phone_icon .icon-container,
  .header-phone_icon svg,
  header.sticky .header-phone_icon svg {
    width: 20px !important;
    height: 20px !important;
  }
}
.mobile_menu_list ul,
.header-right .navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.desktop_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  column-gap: 19px;
  row-gap: 5px;
  font-weight: 500;
  flex-wrap: wrap;
}
/* Top-level menu only: never wrap, never break inside menu items.
   Sub-menus retain flex-wrap:wrap so items with width:100% stack vertically. */
.desktop_menu > ul {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.desktop_menu ul li {
  padding: 0 !important;
}
.mobile_menu {
  display: none !important;
}
.mobile_menu .menu > li {
  padding-right: 30px;
}
.mobile_menu .menu > li > a {
  padding: 10px 15px;
  display: block;
}
.mobile_menu .menu > li > a:hover {
  color: #fff !important;
  background-color: #0d6efd;
}
/* 2026-06-07: Hamburger-Menue-Eintraege fetter & blau. Hover bleibt weiss auf
   blauem Hintergrund (siehe Regeln oben/unten). */
.mobile_menu .menu li a {
  font-weight: 700;
  color: #0d6efd;
}
.mobile_menu .menu li a:hover {
  color: #fff !important;
}
.mobile_menu button {
  display: block;
}
.mobile_menu_list {
  position: fixed;
  background: #f3f4f6;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  bottom: 0;
  padding: clamp(1rem, var(--wp--style--root--padding-top), 20rem)
    clamp(1rem, var(--wp--style--root--padding-right), 20rem)
    clamp(1rem, var(--wp--style--root--padding-bottom), 20rem)
    clamp(1rem, var(--wp--style--root--padding-left), 20em);
  display: none;
  flex-direction: column;
  justify-content: center;
}
.has-modal-open .mobile_menu_list {
  display: flex;
  max-width: 100%;
}
.menu_close {
  position: absolute;
  right: 16px;
  top: 16px;
}
/* Flexbox-Zentrierung im Panel macht die alten margin-top-Pushdown-Hacks
   überflüssig. .menu_close ist absolute positioniert und bleibt unabhängig. */
.has-modal-open .mobile_menu_list > [class*="menu-"][class*="-container"],
.mobile_menu_list .wp-classic-menu-block {
  margin-top: 0;
  max-width: 100%;
}
.has-modal-open .mobile_menu_list .wp-classic-menu-block {
}
.has-modal-open .admin-bar .mobile_menu_list > [class*="menu-"][class*="-container"],
.has-modal-open .admin-bar .mobile_menu_list .wp-classic-menu-block {
  margin-top: 0;
}
.admin-bar .menu_close {
  top: 62px;
}
.mobile_menu .menu-main-container {
  padding-top: calc(2rem + 24px);
}
.admin-bar .mobile_menu .menu-main-container {
  padding-top: calc(2rem + 70px);
}
.header-right button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.header-right button:focus {
  outline: none;
}
.header-right button svg {
  display: block;
}
.wrap .job-post {
  width: auto;
}
.job-post .job-content .job-content-wrap {
  padding-left: 0;
}

/* ============================================================
   Beitrags-Hero-Bild (Template-402092-Hero) — wiederverwendbare globale Utility.
   Klasse `post-hero-image` am GB-Image-Block: das Bild füllt die volle Breite
   der Lesespalte, Höhe gedeckelt, beschnitten (object-fit) statt verzerrt.
   ============================================================ */
figure:has(> img.post-hero-image),
figure.post-hero-image {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.5rem;
  display: block;
}
figure:has(> img.post-hero-image) > img,
img.post-hero-image {
  display: block;
  width: 100%;
  height: clamp(200px, 38vw, 320px);
  object-fit: cover;
  border-radius: 8px;
}

/* Post-Meta Autor-Avatar (Byline): quadratisch, 8px Radius, beschnitten. */
.post-meta-avatar { line-height: 0; margin-right: 0.15em; }
.post-meta-avatar img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
/* Abstand unter der Post-Meta-/Breadcrumb-Zeile (vor dem Titel). */
.post-meta-row { margin-bottom: 1.75rem; }

/* Bottom-form "doppelter Rahmen" im Beitrags-Template (Vorbild badsanieren24.de):
   roter Akzent-Außenrahmen + blauer Marken-Innenrahmen, konzentrisch gerundet.
   Der Außen-Padding (16px) bildet den Spalt zwischen beiden Rändern. Wiederverwendbare
   Klassen am GB-Container (post-form-frame außen / post-form-inner innen) — template-agnostisch. */
.post-form-frame {
  background: #fff;
  border: 1px solid #990000;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.post-form-inner {
  border: 2px solid #0d6efd;
  border-radius: 10px;
}

/* Full-bleed Service-/Leistungs-Posts (post_type=post OHNE TOC, z. B. Incident Response,
   DevSecOps, Security Awareness): die align:full-Baender nutzten 24px Seiten-Gutter, der
   Header aber clamp(1rem,3vw,2.5rem) (=40px) -> der 1280er-Content fluchtete NICHT mit
   Logo/Menue. Hier denselben Gutter wie der Header setzen -> Inhalt buendig zum Header auf
   allen Breiten. Nur padding-inline der GB-Baender wird ueberschrieben (vertikal bleibt);
   402092-Artikel (.bs24-has-toc, Baender unter <article>) sind ausgenommen. */
body.single-post:not(.bs24-has-toc) .wp-block-post-content > .gb-container,
body.single-post:not(.bs24-has-toc) .wp-block-post-content > .wp-block-cover {
  padding-left: clamp(1rem, 3vw, 2.5rem) !important;
  padding-right: clamp(1rem, 3vw, 2.5rem) !important;
}

/* Profilseiten Dr. Gorski (1865) + Dr. Fleischmann (476663) sowie Karriere
   DE (476733) + EN (476735): gleiche Gutter-Formel wie der Header auf den
   align:full-Baendern — sonst haengt der Inhalt bei Viewports < ~1360px am
   15px-Root-Padding und ragt links/rechts ueber die Logo-/Menue-Flucht hinaus
   (2026-06-10, "Raender stimmen nicht"). Bei weiteren Seiten mit dem Problem:
   page-id hier ergaenzen (bewusst surgical statt global, um Seiten mit
   eigenem Band-Padding nicht zu verschieben). */
body.page-id-1865 .wp-block-post-content > .alignfull,
body.page-id-476663 .wp-block-post-content > .alignfull,
body.page-id-476733 .wp-block-post-content > .alignfull,
body.page-id-476735 .wp-block-post-content > .alignfull,
body.page-id-12 .wp-block-post-content > .alignfull,
body.page-id-476692 .wp-block-post-content > .alignfull,
body.page-id-47099 .wp-block-post-content > .alignfull,
body.page-id-476713 .wp-block-post-content > .alignfull,
body.page-id-476689 .wp-block-post-content > .alignfull,
body.page-id-476690 .wp-block-post-content > .alignfull {
  padding-left: clamp(1rem, 3vw, 2.5rem) !important;
  padding-right: clamp(1rem, 3vw, 2.5rem) !important;
}

/* Referenzen-Container: Header-Flucht kommt aus ".ref-section .karriere-container"
   (~Z.3105, 2026-06-10 auf die Gutter-Formel umgestellt — vorher 25px-Artikel-Kante). */

/* Startseiten (alle Sprachen): Baender auf die Header-Gutter ausrichten, damit
   der 1280px-Content auf jeder Breite mit dem Header fluchtet.
   2026-06-11: /en (476788) + /el (477403) wurden als Uebersetzung der modernen
   /de-Startseite (476644) neu aufgebaut → die alte 860px-Lesespalte der /en-Home
   ist entfernt; alle drei Home-Pages nutzen jetzt die globale 1280px-Flucht. */
body.home .wp-block-post-content > .alignfull:not(.ref-page),
body.page-id-476788 .wp-block-post-content > .alignfull:not(.ref-page),
body.page-id-477403 .wp-block-post-content > .alignfull:not(.ref-page) {
  padding-left: clamp(1rem, 3vw, 2.5rem) !important;
  padding-right: clamp(1rem, 3vw, 2.5rem) !important;
}

/* Seiten-Gutter (≈40px, Proliance) für die Section-Container des Beitrags-Templates.
   Der <article> trägt ein negatives Margin (=-root-padding), das ein Grid-/Wrapper-
   Padding neutralisiert — daher den Gutter direkt auf den Section-Containern setzen,
   so dass Inhalt + Header auf schmalen Viewports denselben 40px-Rand halten. */
body.bs24-has-toc .wp-block-post-content > article > .gb-container:not(.post-form-frame) {
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* GB-Container im Artikel als border-box. Die GB-Container rechnen hier als
   content-box (GBs eigene border-box-Regel greift nicht) → ein Container mit
   EXPLIZITEM width:100% (z. B. der Hero-Container mit `post-hero-image`) wird
   sonst 100% + 2×Gutter breit und ragt rechts über die Lesespalte hinaus.
   border-box hält ihn exakt auf Spaltenbreite; Section-Container (width:auto)
   sind unberührt. Global für ALLE 402092-Beiträge + Template. */
body.bs24-has-toc .wp-block-post-content > article > .gb-container {
  box-sizing: border-box;
}

/* Form-Rahmen UND "Auch interessant"-Grid an die Lesespalte angleichen.
   post-toc.css gibt JEDEM direkten Grid-Kind von .wp-block-post-content `width:100%`
   (volle Spalte). Der Artikeltext ist aber per Section-Padding um den Gutter eingerückt
   → Nicht-Artikel-Kinder (Bottom-Form, Related-Grid) ragten über den Content hinaus.
   Darum hier ALLE Nicht-Artikel-/Nicht-TOC-Kinder auf die Textbreite kappen (max-width =
   100% − beidseitiger Gutter) + zentrieren, so dass ihre ÄUSSERE Kante exakt mit dem
   Artikeltext links/rechts abschließt. `width:100%` aus post-toc.css wird vom max-width
   gedeckelt; margin:0 vom zentrierenden margin-inline:auto überschrieben (höhere
   Spezifität). Gilt für alle 402092-Beiträge + Template. */
body.bs24-has-toc .wp-block-post-content > :not(article):not(.toc-generator) {
  box-sizing: border-box !important;
  width: calc(100% - clamp(2rem, 6vw, 5rem)) !important;  /* Spalte − beidseitiger Gutter */
  max-width: none !important;
  /* Der <article> bricht mit margin:-15px (=-root-padding) aus dem 15px-Container-Padding aus
     und sitzt bei 0–910 (Text bei 38). Form/Gruppen brechen NICHT aus → linker margin =
     Gutter − Root-Padding gleicht das aus; margin-right:auto absorbiert den Rest. WP-Constrained
     setzt margin:auto !important → daher hier alles !important. */
  margin-left: calc(clamp(1rem, 3vw, 2.5rem) - var(--wp--style--root--padding-left, 15px)) !important;
  margin-right: auto !important;
}
/* Die "Auch interessant"-Überschrift ist ein direktes `.has-global-padding`-Kind
   (root-padding 15px). Zusammen mit der Breiten-/Margin-Regel oben würde ihr Text
   DOPPELT eingerückt (Gutter + 15px) → zu weit innen. Globales Padding hier nullen,
   damit der Überschriftentext bündig mit dem Artikeltext beginnt. Die Form behält ihr
   eigenes .post-form-frame-Padding (kein has-global-padding) → unberührt. */
body.bs24-has-toc .wp-block-post-content > .has-global-padding {
  padding-inline: 0 !important;
}

/* ============================================================
   Beitrags-/Seiten-Typografie — Skala & Abstände nach proliance.ai/blog.
   root 16px → h1 48 · h2 32 · h3 26 · h4 22 · h5 18 · h6 16 · Body 18px.
   Scoped auf den Artikel-/Seiteninhalt; .gb-headline + .breadcrumbs (Chrome)
   behalten ihre eigene Größe.
   ============================================================ */
:is(.wp-block-post-content, .entry-content) :is(h1,h2,h3,h4,h5,h6):not(.gb-headline) { font-weight: 700; }
:is(.wp-block-post-content, .entry-content) h1:not(.gb-headline) { font-size: 3rem;     line-height: 1.2; margin: 0 0 1rem; }
:is(.wp-block-post-content, .entry-content) h2:not(.gb-headline) { font-size: 2rem;     line-height: 1.2; margin: 3.5rem 0 1rem; }
:is(.wp-block-post-content, .entry-content) h3:not(.gb-headline) { font-size: 1.625rem; line-height: 1.4; margin: 2.5rem 0 .75rem; }
:is(.wp-block-post-content, .entry-content) h4:not(.gb-headline) { font-size: 1.375rem; line-height: 1.5; margin: 2rem 0 .5rem; }
:is(.wp-block-post-content, .entry-content) h5:not(.gb-headline) { font-size: 1.125rem; line-height: 1.5; margin: 1.75rem 0 .5rem; }
:is(.wp-block-post-content, .entry-content) h6:not(.gb-headline) { font-size: 1rem;     line-height: 1.5; margin: 1.5rem 0 .5rem; }
:is(.wp-block-post-content, .entry-content) > :is(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }

:is(.wp-block-post-content, .entry-content) p:not(.breadcrumbs),
:is(.wp-block-post-content, .entry-content) li { font-size: 1.125rem; line-height: 1.6; }
:is(.wp-block-post-content, .entry-content) p:not(.breadcrumbs) { margin: 0 0 1rem; }
:is(.wp-block-post-content, .entry-content) :is(ul,ol) { margin: 0 0 1rem; }
:is(.wp-block-post-content, .entry-content) li { margin-bottom: .25rem; }
:is(.wp-block-post-content, .entry-content) :is(strong,b) { font-weight: 700; }
:is(.wp-block-post-content, .entry-content) :is(em,i) { font-style: italic; }

/* TOC behält seine eigene, kleine Schriftgröße — die Artikel-Skala darf nicht in
   die Sidebar durchschlagen (li/h3). Links zusätzlich etwas kleiner (User-Wunsch). */
:is(.wp-block-post-content, .entry-content) .toc-generator :is(li, a) {
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 0;
  margin-bottom: 0;
}
:is(.wp-block-post-content, .entry-content) .toc-generator > h3,
:is(.wp-block-post-content, .entry-content) .toc-generator > .toc-title {
  font-size: 0.85rem;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}
:is(.wp-block-post-content, .entry-content) .toc-generator__sub .toc-sub-item > a { font-size: 0.92em; }

.breadcrumb-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 1.5rem;
  font-size: 14px;
  color: #1b2f4e;
}
.breadcrumb-wrapper #breadcrumbs {
  margin: 0;
  color: #5a6a85;
}
.breadcrumb-wrapper #breadcrumbs a {
  color: #1b2f4e;
  text-decoration: none;
}
.breadcrumb-wrapper #breadcrumbs a:hover {
  color: #0d6efd;
  text-decoration: underline;
}
.breadcrumb-wrapper #breadcrumbs .breadcrumb_last {
  color: #1b2f4e;
  font-weight: 600;
}
.desktop_menu ul.sub-menu li a {
  color: #1b2f4e;
}
header.sticky .mobile_menu {
  display: block !important;
}
.menu_close,
.menu_open {
  cursor: pointer;
}
.menu_open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Hamburger stays in-flow inside the sticky header (no detached floating
   circle). The header element itself is position: sticky. */
.desktop_menu .menu > li > a {
  padding: 15px 0;
  display: inline-block;
}
.desktop_menu ul.sub-menu {
  background: #ededed;
  white-space: nowrap;
  padding: 5px 0;
  border-radius: 5px;
  position: absolute;
  left: -999em;
  gap: 0;
  box-shadow: 0 5px 30px -10px rgb(0 0 0/15%);
  z-index: 999;
}
.desktop_menu ul.sub-menu li {
  border-bottom: 1px solid #e7e7e7;
  width: 100%;
}
.desktop_menu ul.sub-menu li a {
  display: block;
  padding: 10px 22px;
  line-height: 24px;
  transition: all 0.25s;
}
.desktop_menu ul.sub-menu li a:hover,
.desktop_menu ul.sub-menu li:hover > a {
  background-color: #0d6efd;
  color: #fff !important;
}
.desktop_menu .menu-item-has-children:hover ul.sub-menu {
  left: -22px;
}
.mobile_menu ul.sub-menu {
  position: unset;
  margin-top: 5px;
  display: none;
  margin-left: 20px;
}
.mobile_menu ul.sub-menu > li > a {
  padding: 10px 15px;
  display: block;
}
.mobile_menu ul.sub-menu li {
  transition: all 0.25s;
}
.mobile_menu ul.sub-menu li:hover {
  background-color: #0d6efd;
  
}
.mobile_menu ul.sub-menu li:hover a {
  color: #fff !important;
}
.mobile_menu .menu-item-has-children {
  position: relative;
}
.mobile_menu .menu-item-has-children.active:before {
  transform: rotate(45deg);
  top: 18px;
}
.mobile_menu .menu-item-has-children:before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid;
  border-left: 2px solid;
  transform: rotate(225deg);
  position: absolute;
  right: 3px;
  top: 13px;
}

.desktop_menu .menu-item-has-children {
  position: relative;
  padding-right: 25px !important;
}
.desktop_menu .menu-item-has-children:hover:before {
  transform: rotate(45deg);
  top: 27px;
}
.desktop_menu .menu-item-has-children:before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid;
  border-left: 2px solid;
  transform: rotate(225deg);
  position: absolute;
  right: 3px;
  top: 22px;
  transition: all 0.25s;
}
/* Hamburger fallback: at narrow viewports always switch to mobile menu. */
@media (max-width: 1200px) {
  .mobile_menu {
    display: block !important;
  }
  .desktop_menu {
    display: none !important;
  }
}

/* Adaptive Hamburger: when the desktop menu would overflow its allotted
   space (set by JS via body.force-mobile-menu), force the hamburger
   regardless of viewport width. This guarantees the menu never wraps. */
body.force-mobile-menu .mobile_menu {
  display: block !important;
}
body.force-mobile-menu .desktop_menu {
  display: none !important;
}

@media (max-width: 600px) {
  .site-branding img {
    max-width: 160px;
    height: auto;
  }

  /* Header-Phone-Button im Stil von fs-energieberater.de:
     Label oben + Phone-Nummer unten gleich groß (14px), beide fett, weiß,
     Phone-Icon vor der Nummer. Border-Radius 4px (Bootstrap-btn-Stil).
     `flex-grow: 0` damit Button nicht im Header-Flex-Container streckt. */
  .header-phone {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 4px 8px !important;
    text-align: center;
    line-height: 1.5;
    border-radius: 4px;
    flex-grow: 0 !important;
    flex-shrink: 0;
  }
  /* Header-Right: Phone-Button + Hamburger zusammen rechtsbündig. */
  .header-right {
    justify-content: flex-end !important;
  }
  /* Separates Icon-Box ausblenden — Icon wandert per ::before in die
     Phone-Number-Zeile. */
  .header-phone_icon {
    display: none;
  }
  .header-phone_info {
    max-width: none;
    line-height: 1.5;
  }
  .header-phone_label {
    font-size: 14px !important;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.5;
    text-transform: none !important;
  }
  .header-phone_text a {
    font-size: 14px !important;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.5;
  }
  /* Phone-Icon (SVG inline) vor der Nummer, etwas größer für Lesbarkeit. */
  .header-phone_text a::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58z'/%3E%3C/svg%3E") no-repeat center / contain;
  }
}
/* footer */
.footer nav a:hover,
.footer-block-columns a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}
.footer,
.wp-site-blocks > footer {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Footer-Inhalt exakt zur Header-/Content-Breite (1280px) ausrichten — „in einer
   Flucht mit dem Header". Der dunkle Band bleibt vollbreit (Site-Konvention für
   Full-Bleed-Bänder wie den blauen CTA darüber); nur der horizontale Gutter nutzt
   denselben clamp wie der Header (vgl. „header.wp-block-template-part > .wp-block-group"
   oben) STATT der 15px Root-Padding. Sonst lief der Footer-Inhalt zwischen 1280–1360px
   Viewport breiter aus als der Header. Die inneren .alignwide-Reihen (1280px) zentrieren
   darin und fluchten so auf ALLEN Breiten exakt mit dem Header. */
footer.wp-block-template-part > .wp-block-group {
  padding-left: clamp(1rem, 3vw, 2.5rem) !important;
  padding-right: clamp(1rem, 3vw, 2.5rem) !important;
}

/* Force prefooter and outer wrappers to have zero bottom-spacing so the
   hellgrey prefooter-Wrapper sits flush against the dark site-Footer.
   Catch-all for any margin/padding leaking through layered wrappers. */
#bs24-page .prefooter-section,
#bs24-page .prefooter-section.bs24-section,
#bs24-page .prefooter-wrapper,
#bs24-page article.geopage-article {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#bs24-page .prefooter-wrapper {
  padding-bottom: 60px !important;
}

@media (max-width: 768px) {
  #bs24-page .prefooter-wrapper {
    padding-bottom: 40px !important;
  }
}
.footer-block-group {
  background-color: #333333;
  padding: 50px 15px;
}
.footer-block-columns {
  display: flex;
  margin: 0 auto;
  max-width: 1280px;
  color: #fff;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-block-columns:not(:first-child) {
  margin-top: 30px;
}
.footer-block-column {
  width: 100%;
}
@media (min-width: 768px) {
  .footer-block-columns {
    gap: 0;
  }
  .\32 _3_column {
    max-width: 66.66%;
  }
  .\31 _3_column {
    max-width: 33.33%;
  }
}
.footer-top_container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.footer-top_container p {
  margin: 0;
  font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.256), 16px);
}
.footer-top_container p:first-child {
  font-size: clamp(15.747px, 0.984rem + ((1vw - 3.2px) * 1.058), 24px);
  line-height: 1;
}
.footer-top figure {
  margin: 0;
}
/* WP-Core .wp-block-image img { max-width: 100% } has equal specificity
   (0,1,1) and is loaded after the theme stylesheet, so we need higher
   specificity here to keep the footer logo at the intended 83px size.
   `.footer-top .wp-block-image img` = (0,2,1) wins. */
.footer-top img,
.footer-top .wp-block-image img {
  max-width: 83px;
  width: auto;
  height: auto;
  display: block;
}
.footer-block-columns ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.256), 16px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-block-columns a {
  color: #fff;
  text-decoration: none;
}
.footer-contact p {
  margin: 0;
  margin-top: 1.2rem;
  font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.256), 16px);
}
.footer-contact p.footer-contact-label {
  margin-top: 0;
  font-size: clamp(15.747px, 0.984rem + ((1vw - 3.2px) * 1.058), 24px);
  line-height: 1;
}
.footer-bottom p {
  margin: 0;
  color: #d7d7d7;
  font-size: 12px;
}
@media (max-width: 767px) {
  .footer-top {
    gap: 1rem;
  }
}
/* custom form */
.form-check-option label {
  font-size: 12px !important;
}
.form-check-option label a:hover {
  text-decoration: underline;
}

.send-button,
.button-submit {
  width: 100% !important;
  transition: all 0.3s !important;
  background-color: #0d6efd !important;
  border-radius: 4px;
  font-size: 17px !important;
  letter-spacing: 0.4px !important;
  text-shadow: rgba(0,0,0,0.4) 1px 1px 4px !important;
}
div.wpforms-container-full button.send-button[type=submit]:hover,
div.wpforms-container-full button.button-submit[type=submit]:hover {
  background-color: #052c65 !important;
}
div.wpforms-container-full:not(:empty) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}



/* WP-Forms badkonfigurator  Steps 1 von 9 */
.badkonfigurator .wpforms-page-indicator-steps {
	display: none;
}

/* WP-Forms badkonfigurator Next Button */
.badkonfigurator .wpforms-page-next {
    background-color: #0d6efd !important;
    border: 1px solid #ddd; /* Dark grey border */
    color: #fff; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 30px !important; /* Distance between text and border */
}

/* WP-Forms badkonfigurator Prev Button */
.badkonfigurator .wpforms-page-prev {
    background-color: #6c757d !important; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #fff; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}

/* WP-Forms badkonfigurator Next Button hover */
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #d77c21 !important; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

/* WP-Forms badkonfigurator Select Image Check */
.wpforms-container .wpforms-image-choices-modern .wpforms-image-choices-image:after {
    content: "\2714";
    font-size: 40px;
    line-height: 62px;
    color: #ffffff;
    background-color: #46a841 !important;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -32px 0 0 -32px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    transition: all 0.5s;
}

/* WP-Forms badkonfigurator Select Box Check */
div.wpforms-container-full .wpforms-form ul.wpforms-image-choices-modern .wpforms-image-choices-item label:hover, div.wpforms-container-full .wpforms-form ul.wpforms-image-choices-classic .wpforms-image-choices-item label:hover {
    border-color: #46a841 !important;
} 

/* WP-Forms badkonfigurator Hint for Slider */
.badkonfigurator .wpforms-field-number-slider-hint {
	font-size: 16px !important;
}


 







/* featured box animation */
.featured-box-effect svg {
  transition: all 0.3s;
}
.featured-box-effect:hover svg {
  animation: toRightFromLeft 0.3s forwards;
}
@keyframes toRightFromLeft {
  49% {
    transform: translate(100%);
  }
  50% {
    opacity: 0;
    transform: translate(-100%);
  }
  51% {
    opacity: 1;
  }
}
/* item list */
.custom_post_list {
}

.custom_post_list li {
  display: flex;
  gap: 20px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 15px;
  flex-wrap: wrap;
  position: relative;
}
.custom_post_list li > div {
  justify-content: space-between;
}
.custom_post_list li:not(:first-child) {
  margin-top: 20px !important;
}
.custom_post_list figure {
  width: 100%;
  max-width: calc(33.33% - 10px);
  margin: 0 !important;
}
.custom_post_list figure img {
  border-radius: 0 !important;
}
.custom_post_list .is-vertical {
  width: 100%;
  max-width: calc(66.66% - 10px);
}
.custom_post_list .wp-block-post-title a {
  color: #084784;
  text-decoration: none;
}
.custom_post_list a:hover {
  text-decoration: underline;
}
.custom_post_list .wp-block-post-title {
  font-size: var(--wp--preset--font-size--large) !important;
}
@media (max-width: 768px) {
  .custom_post_list figure {
    max-width: 100%;
  }
  .custom_post_list .is-vertical {
    max-width: 100%;
  }
}
label.wpforms-field-label-inline a {
  color: inherit;
}
.related_post a:hover {
  text-decoration: underline;
}
.related_post {
  margin-top: 4rem;
  margin-bottom: 3rem;
}
.related_post > p.has-large-font-size {
  margin-bottom: 2rem;
}
/* Featured-Image im Related-Post-Pattern (wp_block 44965 "Das könnte Sie auch
   interessieren") global mit 8px Radius — analog post-hero-image. Greift überall,
   wo das synced Pattern via wp:block ref eingebunden ist. */
.related_post img {
  border-radius: 8px;
}
@media only screen and (min-width: 601px) {
  .wpforms-container input.wpforms-field-small,
  .wpforms-container select.wpforms-field-small,
  .wpforms-container .wpforms-field-row.wpforms-field-small,
  .wp-core-ui div.wpforms-container input.wpforms-field-small,
  .wp-core-ui div.wpforms-container select.wpforms-field-small,
  .wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-small {
    max-width: 50% !important;
  }
}
/* table number */
.table_list li {
  margin: 10px 0;
}
.table_list a:hover {
  color: #333;
}

ol {
  list-style-type: none;
  counter-reset: item;
  padding: 0!important;
}
ol a:hover {
  text-decoration: none;
  border-bottom: 1px solid;
}
ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}
ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
  white-space: nowrap;
}
ol.table_list > li:before {
  position: relative;
}
li ol > li {
  margin: 0;
}
li ol > li:before {
  content: counters(item, ".") " ";
  white-space: nowrap;
}
.section_right {
  float: right;
}
/* font awesome */
.icon_fontawesome {
  padding: 0;
}
.icon_fontawesome li {
  list-style: none;
  position: relative;
  padding-left: 25px;
}
.icon_fontawesome li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
}
.fa_plus li:before {
  background-image: url(/wp-content/themes/twentytwentyfour-child-main/assets/svgs/font-plus.svg);
}
.fa_minus li:before {
  background-image: url(/wp-content/themes/twentytwentyfour-child-main/assets/svgs/font-minus.svg);
}
.fa_check li:before {
  background-image: url(/wp-content/themes/twentytwentyfour-child-main/assets/svgs/font-check.svg);
}
.fa_square_check li:before {
  background-image: url(/wp-content/themes/twentytwentyfour-child-main/assets/svgs/font-square_check.svg);
}
.fa_star li:before {
  background-image: url(/wp-content/themes/twentytwentyfour-child-main/assets/svgs/font-star.svg);
}
.fa_phone li:before {
  background-image: url(/wp-content/themes/twentytwentyfour-child-main/assets/svgs/font-phone.svg);
}



.jobs-template-default #BorlabsCookieBox,
.jobs-template-default .brlbs-cmpnt-container {
  margin: 0;
}
.select_field .select2-container {
  width: 100% !important;
}
.site-branding img {
  display: block;
}
.breadcrumb-wrapper #breadcrumbs {
  margin-top: 2.2rem;
}
#breadcrumbs, .breadcrumbs {
  font-size: 13px !important;
}
.author-name:hover .wp-block-post-author-name {
  text-decoration: underline;
}
.wp-block-rank-math-toc-block {
 padding: 10px 20px;
  background-color: #f9f9f9;
  border: 1px solid #aaaaaa;
}
.wp-block-rank-math-toc-block h2,
.wp-block-rank-math-toc-block h1,
.wp-block-rank-math-toc-block h3,
.wp-block-rank-math-toc-block h4,
.wp-block-rank-math-toc-block h5,
.wp-block-rank-math-toc-block h6 {
  text-align: center;
  margin: 0;
}
.wp-block-rank-math-toc-block nav ol li {
  display: table;
}
.wp-block-rank-math-toc-block nav ol li:before {
  counter-increment: none;
}
.wp-block-rank-math-toc-block nav {
  margin: 20px 0;
}
.wp-block-rank-math-toc-block nav li {
  margin: 10px 0;
}
.wp-block-rank-math-toc-block nav li a:hover {
  color: inherit;
}

.list-spacing {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* inline list for region pages */
.list-inline {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
}

.list-plain, .is-style-default {
  list-style: none;
  padding: 0;
}

/* list style for pre footer */
.list-pre-footer-links {
  list-style: none;
  padding: 0;
}

.alignright {
  float: none;
  text-align: right;
}
.lyte-wrapper {
  margin: 0 !important;
  width: 100% !important;
}
/* alret box heading color */
.alert-info h1,
.alert-info h2,
.alert-info h3,
.alert-info h4,
.alert-info h5,
.alert-info h6 {
  color: #055160;
}
.alert-success h1,
.alert-success h2,
.alert-success h3,
.alert-success h4,
.alert-success h5,
.alert-success h6 {
  color: #0a3622;
}
.alert-warning h1,
.alert-warning h2,
.alert-warning h3,
.alert-warning h4,
.alert-warning h5,
.alert-warning h6 {
  color: #664d03;
}
.alert-danger h1,
.alert-danger h2,
.alert-danger h3,
.alert-danger h4,
.alert-danger h5,
.alert-danger h6 {
  color: #58151c;
}
.alert-dark h1,
.alert-dark h2,
.alert-dark h3,
.alert-dark h4,
.alert-dark h5,
.alert-dark h6 {
  color: #ffffff;
}
.bg-color-grey h1,
.bg-color-grey h2,
.bg-color-grey h3,
.bg-color-grey h4,
.bg-color-grey h5,
.bg-color-grey h6 {
  color: #777777;
}

/* lässt ein embedded youtube video responsive erscheinen, wenn das embedd in einem div mit der class responsive-video ist */
.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* tablet column */
@media (max-width: 781px) and (min-width: 640px) {
 .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
   flex-basis: 0!important;
  }
}


/* bs-table */
.bs-table table {
    border: 1px solid #EBEBEB;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%; /* Stellt sicher, dass die Tabelle die gesamte Breite nutzt */
    box-sizing: border-box; /* Konsistente Größenberechnung in allen Browsern */
    border-bottom: 1px solid #EBEBEB; /* Stellt sicher, dass unten ein durchgehender Rahmen vorhanden ist */
}

.bs-table table tr, .bs-table table td, 
.bs-table table th {
    border: 1px solid #EBEBEB;
    padding: 8px; /* Einheitliches Padding für alle Zellen */
    margin: 0; /* Margin reset */
    text-align: left; /* Standardmäßige Textausrichtung */
    vertical-align: middle; /* Vertikale Ausrichtung in der Mitte */
    box-sizing: border-box; /* Konsistente Größenberechnung */
}

.bs-table table thead {
    background-color: #EBEBEB;
    border-bottom: 3px inset #EAEAEA;
}

.bs-table table thead th {
    border: 1px solid #EBEBEB;
    border-collapse: collapse;
    border-spacing: 0;
    font-weight: bold; /* Stellt sicher, dass die Header hervorgehoben werden */
    padding: 10px; /* Extra Padding für die Header-Zellen */
    box-sizing: border-box; /* Konsistente Größenberechnung */
}

/* Stil für ungerade Zeilen */
.bs-table table tbody tr:nth-child(odd) {
    background-color: #F7F7F7; /* Hellgrau */
}

/* Stil für gerade Zeilen */
.bs-table table tbody tr:nth-child(even) {
    background-color: #ffffff; /* Weiß */
}

/* ───────────────────────────────────────────────────────────────────────────
   Globales Tabellen-Layout — Raster mit senkrechten UND waagerechten Linien
   zwischen allen Spalten/Zeilen (wie "table table-striped table-bordered" auf
   redlings.com). Gilt für jeden wp:table-Block. Überschreibt die Core-Regel
   "is-style-stripes", die Zellrahmen sonst transparent macht (= keine
   Spaltentrennung). .bs-table-Tabellen behalten ihren eigenen, spezifischeren
   Stil (höhere Spezifität) und bleiben unverändert.
   ─────────────────────────────────────────────────────────────────────────── */
.wp-block-table { width: 100%; }
.wp-block-table > table,
.wp-block-table.is-style-stripes > table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #dee2e6;
    background-color: #fff;
}
.wp-block-table th,
.wp-block-table td,
.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td {
    border: 1px solid #dee2e6;            /* senkrechte + waagerechte Spaltentrennung */
    padding: 0.55rem 0.8rem;
    text-align: left;
    vertical-align: middle;
}
.wp-block-table thead th,
.wp-block-table.is-style-stripes thead th {
    background-color: #f1f3f5;
    font-weight: 600;
    border-bottom: 2px solid #c9ced4;
}
.wp-block-table tbody tr:nth-child(odd),
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f7f8fa;            /* gestreifte Zeilen */
}
.wp-block-table tbody tr:nth-child(even),
.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* custom accordion */
.gb-accordion__item .gb-button:focus {
  outline: none !important;
  background-color: #1b2f4e !important;
  color: #fff; 
}

.gb-accordion__toggle {
  cursor: pointer;
  background-color: #f4f4f4 !important; 
}

.gb-accordion__toggle:hover {
  background-color: #ededed !important;
}

.gb-accordion__content .gb-container {
  padding-top: 15px;
  color: #000;
}

.custom-acc-header {
  cursor: pointer;
}

.custom-acc-content {
  transition: max-height 0.25s ease;
  will-change: max-height;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
}
.custom-acc-item.active .custom-acc-header svg {
  transform: rotate(180deg);
}
.custom-acc-item.active .custom-acc-content {
  max-height: inherit;
  visibility: visible;
}


/* Article style MG 2024-09-11 */
article > header,
article > div,
article > section,
article > footer {
  padding-left: 15px;
  padding-right: 15px;
}


/* article semantic laylout update (ewan, 2024-09-10)*/
.is-layout-constrained > article {
  max-width: none !important;
  margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
  margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
}
article > :first-child {
  margin-block-start: 0 !important;
}
article > * {
  margin-block-start: 1.2rem !important;
  margin-block-end: 0 !important;
}
article > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Max Mega Menu nur auf Desktop */
@media (max-width: 768px) {
  #mega-menu-wrap-max_mega_menu_2 {
    display: none !important;
  }
}

/* Theme Menu nur auf Mobile */
@media (min-width: 769px) {
  .site-header .menu-toggle:not(.mega-menu-toggle),
  .mobile-navigation {
    display: none !important;
  }
}

/* Increase page content width */
.gb-container.gb-container-f9b7de2a {
  max-width: 84%;
}

/* 404-Seite (404.php): Inhalt auf die Site-Breite (1100px) begrenzen, mittig
   ausrichten und seitlich einrücken, damit H1/Text/Suchfeld nicht am linken
   und rechten Rand kleben. Spiegelt das Schema von .header-wrapper bzw. dem
   1100px-Content-Container. padding longhand, damit das inline padding-bottom
   (100px) der .gb-container erhalten bleibt. */
.bs24-page--404 .gb-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Homepage article wrapper: override generic article > * theme rules */
article.hp-article {
  --bs24-space-section: 40px;
}
article.hp-article > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Overlay Container in maps box */
.maps-overlay {
  position: absolute;
  top: 10px; 
  left: 10px; 
  z-index: 10;
  display: inline;
  width: 235px;
  background-color: #fff;
}

/* phone-number-link style for button */
.button-phone-number > a {
  font-size: 1.4rem;  
}

/* tasty styles */

/* Container zentrieren */
.tasty-wp-forms-icon-choice {
    display: flex;
    justify-content: center;
}


/* Erstes SVG-Icon in Grün */
.tasty-wp-forms-icon-choice .wpforms-icon-choices-item:nth-child(1) svg {
    fill: #28a745 !important; /* Grün */
}

/* Zweites SVG-Icon in Rot */
.tasty-wp-forms-icon-choice .wpforms-icon-choices-item:nth-child(2) svg {
    fill: #dc3545 !important; /* Rot */
}

.tasty-wp-forms-icon-choice .wpforms-icon-choices-item:nth-child(1):hover svg,
.tasty-wp-forms-icon-choice .wpforms-icon-choices-item:nth-child(1).wpforms-selected svg,
.tasty-wp-forms-icon-choice .wpforms-icon-choices-item:nth-child(2):hover svg,
.tasty-wp-forms-icon-choice .wpforms-icon-choices-item:nth-child(2).wpforms-selected svg {
    fill: #fff !important; 
}

/* Hover-Effekt für die erste Box */
.tasty-wp-forms-icon-choice .wpforms-icon-choices-item:nth-child(1):hover,
.tasty-wp-forms-icon-choice .wpforms-icon-choices-item:nth-child(1).wpforms-selected {
    background-color: #28a745; /* Grün */
    color: #fff;
    border-color: #28a745;
}

/* Hover-Effekt für die zweite Box */
.tasty-wp-forms-icon-choice .wpforms-icon-choices-item:nth-child(2):hover,
.tasty-wp-forms-icon-choice .wpforms-icon-choices-item:nth-child(2).wpforms-selected {
    background-color: #dc3545; /* Rot */
    color: #fff;
    border-color: #dc3545;
}

/* Mobile Content-Padding reduzieren (MG 2026-04-20) */
@media (max-width: 600px) {
  body {
    --wp--style--root--padding-left: 15px;
    --wp--style--root--padding-right: 15px;
  }

  article > header,
  article > div,
  article > section,
  article > footer {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Page-internal footer profile photo (e.g. "Ihr persönlicher Badberater"
     section on /mannheim) ships at 346×346 native size — too large on a
     mobile viewport. Constrain only the size-thumbnail figure (the profile
     photo) so unrelated images in the same footer (e.g. trust badges with
     `size-full` class) are NOT affected. */
  /* `#bs24-page` Prefix für ID-Spezifität — sonst schlägt
     `bs24-page.css:#bs24-page img { max-width: 100% }` (1,0,1) das ohne. */
  #bs24-page article > footer figure.wp-block-image.size-thumbnail img {
    max-width: 180px;
    height: auto;
  }

  /* Trust-Badges Mobile-Variante (.on_grey.info container, sichtbar auf
     Mobile während die Desktop-Variante mit `is-not-stacked-on-mobile`
     auf display:none geschaltet ist). Die Mobile-Bilder kommen ohne
     Inline-Size-Style und rendern deshalb bei nativer Größe (256×256 oder
     285×256) → dominieren die Card. Auf 80px constrainen. */
  .gb-container.on_grey.info figure.gb-block-image img,
  .gb-container.on_grey.info figure.wp-block-image img {
    max-width: 80px !important;
    height: auto !important;
    width: auto !important;
  }

  /* karriere-container Mobile-Padding wird durch bs24-page.css auf 0
     überschrieben — outer Section-Padding (15px) ist die einzige
     Padding-Schicht für konsistente 15px-Position auf allen Pages. */

  .bs24-stelle-layout {
    padding-left: 8px;
    padding-right: 8px;
  }

  .header-wrapper {
    padding-left: 8px;
    padding-right: 8px;
  }

  .footer-block-group {
    padding-left: 8px;
    padding-right: 8px;
  }

  .menu_close {
    width: 40px;
    height: 40px;
    top: 25px;
    right: 23px;
  }
  .menu_close svg {
    width: 32px;
    height: 32px;
  }

  .header-right {
    flex: 1;
    justify-content: space-between;
    gap: 20px;
  }
  .header-phone {
    background: #0d6efd;
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    flex: 1;
  }
  .header-phone a::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  .header-phone *:not(a):not(svg):not(path):not(g) {
    position: static !important;
  }
  .header-phone * {
    color: #fff !important;
  }
  .header-phone svg,
  .header-phone svg path {
    fill: #fff !important;
  }
  .header-phone svg {
    width: 18px !important;
    height: 18px !important;
  }
  .header-phone p {
    margin: 0 !important;
    white-space: nowrap;
  }
  .header-phone .has-global-padding {
    padding-left: 0;
    padding-right: 0;
  }
  .header-phone_label,
  .header-phone > *:nth-child(2) p:first-child {
    font-size: 12px;
    line-height: 1.15;
    text-transform: capitalize;
    white-space: nowrap;
    font-weight: 700;
  }
  .header-phone_text a,
  .header-phone a[href^="tel:"] {
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .menu_open {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .menu_open svg {
    width: 32px;
    height: 32px;
  }

  /* Generisches Content-H1 auf Mobile (32px / 700 / 1.2). Brauchen wir,
     damit auf Rechtsseiten/Leistungen die h1 visuell deutlich über h2 (~28px)
     und h3 (~22px) liegt. Theme-Default xx-large clamp(2.5rem,…,3.27rem)
     wäre auf 390px ≈41px — zu groß auf Mobile. */
  #bs24-page h1.wp-block-heading {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
  }

  /* Hero-H1 Mobile-Größe angeglichen an fs-energieberater.de
     (24.8px / 500 / 1.15). Hohe Spezifität nötig weil homepage.css
     #bs24-page .prod-hero h1 mit clamp(2rem, 5vw, 3.25rem) und
     bs24-page.css .bs24-hero h1 mit clamp(2rem, 5vw, 3.2rem) sonst
     bei Mobile-Viewport 32px ergeben.
     Diese Regel steht NACH der generischen h1.wp-block-heading-Regel, damit
     sie bei gleicher Spezifität (0,1,1,1) per Source-Order gewinnt — Hero-h1s
     mit .wp-block-heading-Klasse bekommen so trotzdem den kompakten Hero-Look. */
  #bs24-page .bs24-hero h1,
  #bs24-page .prod-hero h1,
  #bs24-page .hp-hero-v3 h1,
  #bs24-page .hero-left h1 {
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.15;
  }

  /* Verhindere dass nested .alignfull aus einer .container_bg Card ausbricht.
     WP setzt für .alignfull margin-left/right: calc(-1 * var(--wp--style--root--padding-left))
     was für Top-Level-Elemente korrekt ist, aber innerhalb einer Card mit
     visuellem Background (z.B. Badberater-Sektion auf /mannheim) den Inhalt
     aus der Card raus auf die Browser-Kante schiebt. */
  #bs24-page .container_bg .alignfull,
  #bs24-page .container_bg .gb-container.alignfull {
    margin-left: 0;
    margin-right: 0;
  }
}

/* WPForms Submit-Button auf Mobile zentriert und schmaler als die Card —
   visuell wie die karriere-btn-CTAs (zentriert, max-width 280 px).
   Vorher ließ der Button die volle Card-Breite an, was als "zu weit links"
   gewirkt hat. */
#bs24-page article .wpforms-submit-container {
  margin: 0;
  padding: 0;
  text-align: center;
}

#bs24-page article button.wpforms-submit,
#bs24-page article input[type="submit"].wpforms-submit {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* OL-Listen mit list-style-type: decimal in den Homepage-Sections (z.B.
   "Wie erfolgt die Beauftragung?") brauchen padding-left, sonst hängen
   die "1.", "2.", ... Marker links außerhalb der Card und ragen über
   den Content-Rand. !important wegen Inline-style-Reset auf der ol. */
#bs24-page [data-section-slug="hp-beauftragung"] ol {
  padding-left: 1.75em !important;
  list-style-position: outside !important;
}

#bs24-page article.hp-article ol li {
  padding-left: 0;
}

/* Mobile: hp-approach List ohne sichtbare Bullets — list-style-type
   auf disc setzen damit Bullet-Points sichtbar sind. */
@media (max-width: 600px) {
  #bs24-page [data-section-slug="hp-approach"] ul {
    list-style: disc !important;
    padding-left: 1.5em !important;
  }
  #bs24-page [data-section-slug="hp-approach"] ul li {
    list-style: disc !important;
    display: list-item !important;
    margin-bottom: 0.6em;
  }

  /* hp-markt komplett ausblenden auf Mobile */
  #bs24-page [data-section-slug="hp-markt"] {
    display: none !important;
  }

  /* hp-vorteile: Checkmark-Icon vor jeder Card-Headline */
  #bs24-page [data-section-slug="hp-vorteile"] .bs24-card h4 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  #bs24-page [data-section-slug="hp-vorteile"] .bs24-card h4::before {
    content: "\2713";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1.5px solid #198754;
    border-radius: 50%;
    color: #198754;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
  }

  /* Bottom-Form Section: bis an den Browser-Rand (kein extra Padding) */
  #bs24-page .hp-form .karriere-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }
  #bs24-page .hp-form .wpforms-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Form-Card-Headlines bündig zur Section-Content-Edge auf Mobile —
     Section-h2 ist bei left:15, Form-Card-Headlines waren bei left:35
     (Card-padding 20). Negative Margin lässt sie bei 15 starten. */
  #bs24-page .prod-hero__form > div > h4,
  #bs24-page .prod-hero__form h4:first-child {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 0;
    padding-right: 0;
  }

  #bs24-page .hp-form > .karriere-container > h3 {
    margin-left: 0;
    padding-left: 15px;
  }
}

/* Trust-Icons-Section ("Deutsche Qualität ...") auf GeoPages braucht mehr
   Abstand nach oben und unten zu den umliegenden Sections. */
#bs24-page article.geopage-article > section.trust_icons-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

@media (max-width: 600px) {
  #bs24-page article.geopage-article > section.trust_icons-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Homepage Hero-Form-Card (.prod-hero__form) im gleichen Style wie das
   Hero-Form auf GeoPages (.hero-form-wrapper auf /altdorf): outer Card mit
   weißer BG + 1 px orange Border, inner Box (.prod-hero__form-inner) mit
   grauer BG + 2 px orange Border. */
#bs24-page .prod-hero__form {
  background: #ffffff;
  border: 1px solid #990000;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#bs24-page .prod-hero__form > h4:first-child {
  margin: 0 0 16px;
  padding: 0;
}

#bs24-page .prod-hero__form-inner {
  background: #f9f9f9;
  border: 2px solid #990000;
  border-radius: 8px;
  padding: 20px;
  margin-top: 12px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

#bs24-page .prod-hero__form-inner .wpforms-container {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

#bs24-page .prod-hero__form-inner .bs24-hero__badges {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Homepage Hero-H1 (.prod-hero h1) auf Desktop gleiche Größe wie Hero-H1
   auf GeoPages (/altdorf etc.) — homepage.css setzt clamp(2rem, 5vw, 3.25rem)
   was bei breitem Viewport auf 3.25rem (~52 px) springt; GeoPage Hero h1
   ist konsistent 2.5 rem. */
#bs24-page .prod-hero h1 {
  font-size: 2.5rem;
}

@media (max-width: 600px) {
  #bs24-page .prod-hero h1 {
    font-size: 1.55rem;
  }
}

/* Desktop (>1200px, wo Desktop-Menü aktiv ist und Mobile-Menü versteckt):
   Header-Inhalt (Logo links, Phone rechts) soll bündig zum INHALT der
   Content-Card stehen (nicht zur Card-Edge). Die Card hat max-width 1100px
   mit 15px horizontalem Padding — der sichtbare Heading/Form-Inhalt sitzt
   also 15px innerhalb der Card-Edge. Header-Wrapper bekommt dasselbe 15px
   Padding, sodass Logo links und Phone rechts mit dem Card-Inhalt fluchten
   (statt 15px links/rechts überzustehen).
   - .header-wrapper padding-x: 15px (matched Card-Inhalt-Padding)
   - .site-branding margin-left: 0 (kein zusätzlicher Logo-Inset)
   - .navigation in .header-right wird ausgeblendet (auf Desktop sowieso leer
     da .mobile_menu display:none ist), sodass Phone das letzte Flex-Child
     ist und exakt am rechten Wrapper-Content-Edge sitzt. */
@media (min-width: 1201px) {
  .header-wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }
  #masthead .header-wrapper .site-branding {
    margin-left: 0;
  }
  .header-right > .navigation {
    display: none;
  }
}

/* ==========================================================================
   Pre-Footer-Default Block (wp_block ID 46804) — Style angleichen an
   BS24-Referenz (/badsanierung-kosten): hellgrauer Background, dunkler Text,
   60px Padding statt 100px. Buttons in dunkler Outline-Optik (sichtbar auf
   hellgrau). Selektoren mit #bs24-page geprefixt, um die Lead-Theme-Regeln
   (#bs24-page:not(.bs24-page--homepage) h4/p/a, ID-Spezifität) zu schlagen.
   ========================================================================== */
#bs24-page .gb-container.pre-footer,
.gb-container.pre-footer {
  background-color: #f4f4f4 !important;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

#bs24-page .gb-container.pre-footer h4,
#bs24-page .gb-container.pre-footer h4.gb-headline,
.gb-container.pre-footer h4,
.gb-container.pre-footer h4.gb-headline {
  color: #333333 !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

#bs24-page .gb-container.pre-footer p,
#bs24-page .gb-container.pre-footer p.has-base-color,
#bs24-page .gb-container.pre-footer p.has-base-2-color,
.gb-container.pre-footer p,
.gb-container.pre-footer p.has-base-color,
.gb-container.pre-footer p.has-base-2-color {
  color: #444444 !important;
}

#bs24-page .gb-container.pre-footer p a,
#bs24-page .gb-container.pre-footer .list-pre-footer-links a,
#bs24-page .gb-container.pre-footer ul.has-base-color a,
#bs24-page .gb-container.pre-footer ul.has-base-2-color a,
.gb-container.pre-footer p a,
.gb-container.pre-footer .list-pre-footer-links a,
.gb-container.pre-footer ul.has-base-color a,
.gb-container.pre-footer ul.has-base-2-color a {
  color: #444444 !important;
  text-decoration: underline;
}

#bs24-page .gb-container.pre-footer p a:hover,
#bs24-page .gb-container.pre-footer .list-pre-footer-links a:hover,
.gb-container.pre-footer p a:hover,
.gb-container.pre-footer .list-pre-footer-links a:hover {
  color: #333333 !important;
}

#bs24-page .gb-container.pre-footer a.gb-button,
.gb-container.pre-footer a.gb-button {
  color: #333333 !important;
  border-color: #333333 !important;
  background: transparent !important;
}

#bs24-page .gb-container.pre-footer a.gb-button:hover,
#bs24-page .gb-container.pre-footer a.gb-button:active,
#bs24-page .gb-container.pre-footer a.gb-button:focus,
.gb-container.pre-footer a.gb-button:hover,
.gb-container.pre-footer a.gb-button:active,
.gb-container.pre-footer a.gb-button:focus {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
  background: transparent !important;
}

@media (max-width: 768px) {
  #bs24-page .gb-container.pre-footer,
  .gb-container.pre-footer {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ==========================================================================
   Single-Post-Header Layout — Author/Datum linksbündig, Breadcrumb rechtsbündig.
   Trifft beide DOM-Patterns:
   - /teilbadsanierung: #bs24-page > article > header > .wp-block-group...
   - /kleines-bad-renovieren: #bs24-page > .wp-block-group... (kein article wrapper)
   Marker `.is-content-justification-space-between.is-nowrap` ist eindeutig
   genug für den Author/Breadcrumb-Header-Block.
   ========================================================================== */
#bs24-page .wp-block-group.is-content-justification-space-between.is-nowrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

#bs24-page .wp-block-group.is-content-justification-space-between.is-nowrap > .gb-container:first-child {
  text-align: left;
}

#bs24-page .wp-block-group.is-content-justification-space-between.is-nowrap > .gb-container:last-child {
  text-align: right;
  margin-left: auto;
}

/* Inner Author/Datum-Group ("Von Michael Gorski · 27. April 2026") — Items
   sitzen via WP-Default mit 1.2 rem Gap zu weit auseinander. Auf 0.5 rem reduzieren. */
#bs24-page .wp-block-group.is-content-justification-space-between.is-nowrap > .gb-container:first-child .wp-block-group.is-content-justification-left.is-layout-flex,
#bs24-page .wp-block-group.is-content-justification-space-between.is-nowrap > .gb-container:first-child > .wp-block-group {
  gap: 0.5rem;
}

/* Mobile: Post-Meta-Zeile (Author/Datum + Breadcrumb) soll nicht umbrechen,
   stattdessen komplett ausblenden — auf engen Viewports passt das Layout
   nicht in eine Zeile, und gewickelt sieht es kaputt aus. */
@media (max-width: 600px) {
  #bs24-page .wp-block-group.is-content-justification-space-between.is-nowrap {
    display: none;
  }
}

/* Mehr Abstand zwischen Post-Header (Author/Datum/Breadcrumb) und h1 — die
   WP-default block-gap (1.2rem ≈ 19 px) ist zu eng. !important wegen
   `:where(.is-layout-flow) > :first-child { margin-block-start: 0 }` das
   greift wenn h1 erstes child einer wp-block-column ist (Pattern auf z.B.
   /kleines-bad-renovieren). Font-size auf single-posts reduziert (default
   xx-large clamp(2.5rem, ..., 3.27rem) → 2rem-2.4rem). */
#bs24-page h1.wp-block-post-title {
  margin-top: 1.5rem !important;
  font-size: clamp(2rem, 3vw, 2.4rem);
  line-height: 1.2;
}

/* Abstand vor h2/h3/h4 — Sections haben eigenes Padding-Top, deshalb 0.
   Unten etwas Luft zum Folge-Content. */
#bs24-page article h2,
#bs24-page article h3,
#bs24-page article h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Hero-Subheadline zwischen H1 und Hero-Subnote — Brand-Blue, kleiner Size,
   regular weight, ohne Link-Optik. Analog zur ".h5 text-primary"-Zeile auf
   fs-energieberater.de/mannheim. */
#bs24-page .hero-section .hero-subheadline,
#bs24-page .hero-section .hero-subheadline a {
  color: var(--text-link);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 8px;
  text-decoration: none;
}

/* Hero-Subnote zwischen H1 und Hero-Bild — analog zur "text-muted"-Zeile
   auf fs-energieberater.de/mannheim. */
#bs24-page .hero-section .hero-subnote {
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* Phone-Trust-Zeile vor der Phone-Aux ("Kein Spam. Keine Weitergabe..."). */
#bs24-page .hero-form-wrapper .phone-trust {
  color: #6c757d;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: center;
  margin: 12px 0 4px;
}

/* Mehr Abstand zwischen Hero-Form-Card und dem Intro-Text darunter. */
#bs24-page .hero-section .hero-intro {
  margin-top: 32px;
}

/* Profile-Photo im Kontakt-Bottom-Bereich kleiner — nativ ist die Bilddatei
   sehr groß, max-width 280px aus variant-CSS wirkt überdimensioniert. */
#bs24-page .kontakt-bottom-photo {
  max-width: 360px;
}

/* Bottom-Form-Card (.kontakt-bottom-form-card) bekommt einen sichtbaren
   Border + Shadow analog zu fs-energieberater.de/mannheim Bottom-Form
   (.ajax-form mit 2 px solid green Border). Brand-Orange statt grün für
   Konsistenz mit der Hero-Form-Card oben. */
#bs24-page .kontakt-bottom-form-card {
  background: #f9f9f9;
  border: 2px solid #990000;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Section "Ihr persönlicher Ansprechpartner" hatte doppelten Spacing —
   Outer .bs24-section gab 80/50 px Padding, das innere .kontakt-bottom-section
   addierte zusätzliche 40 px Margin oben/unten. Beide reduzieren. */
#bs24-page .kontakt-bottom-section {
  margin: 0 auto;
}

#bs24-page .bs24-section.kontakt_bottom-section {
  padding-top: 30px;
  padding-bottom: 30px;
}

@media (max-width: 600px) {
  #bs24-page .bs24-section.kontakt_bottom-section {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* Google-Maps-Embed im "Ihr Ansprechpartner"-Block soll fix sein —
   keine User-Interaktion (kein Scroll, Zoom, Pan auf der Karte). */
#bs24-page .ansprechpartner-map iframe,
#bs24-page .ansprechpartner-map-container iframe {
  pointer-events: none;
}

/* In der service_ablauf-Section sollen die zwei Columns "Angebote & Service"
   und "Ablauf" auf Desktop nebeneinander stehen — das WP-Default stacked
   sie unter 781 px. align-items: flex-start damit beide oben starten
   (gleiche Ebene, nicht zentriert). */
@media (min-width: 781px) {
  #bs24-page .service_ablauf-section .wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 32px;
  }

  #bs24-page .service_ablauf-section .wp-block-columns > .wp-block-column {
    flex: 1 1 50%;
    min-width: 0;
  }
}

/* service_ablauf-section ist DOM-strukturell auch der Container für die
   nachfolgenden Sections (kontakt_bottom + prefooter), daher KEIN
   padding-bottom — sonst entsteht weißer Spalt zwischen Prefooter und
   Site-Footer. */
#bs24-page article.geopage-article > section.service_ablauf-section {
  padding-bottom: 0 !important;
}

/* Referenzen-Grid Bilder alle gleich hoch — die Bild-Quellen haben
   unterschiedliche Aspect-Ratios (346x194 querformat, 346x346 quadratisch),
   mit object-fit:cover wird ein einheitlicher 16:9-Crop erzwungen. */
#bs24-page .referenzen-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
}

/* "Ihre Badsanierung für den Großraum Altdorf"-Section (.bad-typen-section)
   — h2/h3 haben in der variant-CSS einen unüblichen 45px-Horizontal-Margin
   (eingerückt vs. dem Rest der Page). Auf 0 setzen für linksbündige Optik.
   Plus: .bad-typen-images Bilder gleich hoch durch aspect-ratio. */
#bs24-page .bad-typen-section h2,
#bs24-page .bad-typen-section h3 {
  margin-left: 0;
  margin-right: 0;
}

#bs24-page .bad-typen-images img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
}

/* "Kostenfreie Fachberatung 0800-40 40 776"-Block am Ende der Ablauf-Spalte
   soll als klickbarer Button wirken — der innere <a> wird per absolute
   positioning über den ganzen orange-Container gespannt + hover-state für
   visuelle Feedback + cursor pointer auf dem ganzen Container. */
#bs24-page .service_ablauf-section .gb-container[style*="background:#0d6efd"] {
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(237, 114, 0, 0.25);
}

#bs24-page .service_ablauf-section .gb-container[style*="background:#0d6efd"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(237, 114, 0, 0.4);
}

#bs24-page .service_ablauf-section .gb-container[style*="background:#0d6efd"] a[href^="tel:"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Hero-Benefits Check-Icons im Stil von fs-energieberater.de
   (Bootstrap-Icon `bi-check-circle text-success`): grüner Kreis-Outline
   mit Häkchen drin. Variant-CSS hat nacktes ✓ — wir überschreiben mit
   einem Kreis als Pseudo-Element. Zweiter Selektor (.bs24-checklist) deckt
   die Homepage Hero-Liste mit gleichem Style ab. */
#bs24-page .hero-benefits li,
#bs24-page .prod-hero .bs24-checklist li {
  padding-left: 32px;
  position: relative;
  min-height: 22px;
}

#bs24-page .hero-benefits li::before,
#bs24-page .prod-hero .bs24-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #198754;
  border: 1.5px solid #198754;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: transparent;
  background-image: none;
}

/* Mehr Abstand zwischen Site-Header (sticky/normal) und Page-Content-Beginn,
   analog zu fs-energieberater.de/mannheim. Padding oben auf #bs24-page. */
#bs24-page {
  padding-top: 32px;
}

@media (max-width: 600px) {
  #bs24-page {
    padding-top: 20px;
  }
}

/* Homepage: Hero direkt am Header — kein Abstand davor (kein Padding und
   kein Block-Gap-Margin vom WP-Layout).
   Gilt auch für sprachgleiche Startseiten, die NICHT die WP-Front-Page sind und
   daher kein body.home tragen (z.B. /en, page-id 476788): strukturell jede Seite
   im page-template-default, deren Inhalt mit einem vollbreiten alignfull-Cover-
   Hero beginnt — damit der Hero dort genauso am Header andockt wie auf /de. */
body.home main,
body.home .wp-site-blocks > main,
.wp-site-blocks > main:has(> .wp-block-post-content > .wp-block-cover.alignfull:first-child) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#bs24-page.bs24-page--homepage {
  padding-top: 0;
  margin-top: 0;
}

/* Hero-Form-Card auf GeoPages (z.B. /altdorf) — Style analog zu
   fs-energieberater.de/mannheim:
   - Outer Card: weiß, orange Border 1px, shadow, rounded, padding 20px
   - Header (.form-headline + .form-sub) sitzt oben innerhalb der Card
   - Inner Form (.wpforms-container): hellgrauer BG #f9f9f9, orange Border
     2px, rounded, padding 20px → "doppelter Rahmen"-Effekt zur Card.
   - Phone-CTAs + Badges danach, ohne extra Box.
   Note: wpforms-container rendert lokal leer (Form 467779 nur auf prod). */
#bs24-page .hero-form-wrapper {
  background: #ffffff;
  border: 1px solid #0d6efd;
  outline: none;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#bs24-page .hero-form-wrapper h2.form-headline,
#bs24-page .hero-form-wrapper .form-headline {
  margin: 0 0 4px;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
}

#bs24-page .hero-form-wrapper .form-sub {
  margin: 0 0 16px;
  padding: 0;
  border-bottom: none;
}

/* Inner-Box = "graue Box mit orange Border" (= zweiter Rahmen). Umfasst
   das WPForms-Form + Phone-CTAs + Badges. Selektor `.hero-form-inner`
   wirkt immer (lokal sichtbar auch ohne wpforms), zusätzlich `.wpforms-container`
   als Fallback für Pages ohne den Wrapper-DIV. */
#bs24-page .hero-form-wrapper .hero-form-inner,
#bs24-page .hero-form-wrapper .wpforms-container {
  background: #f9f9f9;
  border: 2px solid #0d6efd;
  border-radius: 8px;
  padding: 20px;
  margin: 16px 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

/* Wenn .hero-form-inner schon den Border hat, soll der wpforms-container
   innen drin keinen extra Border haben. */
#bs24-page .hero-form-wrapper .hero-form-inner .wpforms-container {
  background: transparent;
  border: none;
  padding: 0;
  margin: 12px 0;
  box-shadow: none;
}

/* Form-Card-Look auf Single-Posts (article) — analog zur Hero-Form-Card
   auf /altdorf: outer Card-Wrapper (umschließt Header + Form) bekommt die
   dünne 1 px Border, der innere wpforms-Container den 2 px Border + grauen
   BG. Pattern: /teilbadsanierung Top/Bottom/Konfigurator-Forms.

   Outer wrapper = der gb-container der den wpforms-container ENTHÄLT
   (entweder direct child oder über wp-block-columns geschachtelt).
   Outer hat die Headline (h3/h4 "Teilbadsanierung anfragen") drin. */
/* Form-Card-Wrapper: Outer-Card matched nur den DIREKTEN Form-Card-Container,
   nicht jeden ancestor-gb-container der irgendwo einen wpforms enthält
   (sonst bekommt der ganze Page-Content einen orangen Rahmen). */
#bs24-page .gb-container:has(> .wpforms-container),
#bs24-page .gb-container:has(> .wp-block-columns > .wp-block-column > .wpforms-container),
#bs24-page .gb-container:has(> .wp-block-columns > .wp-block-column > style + .wpforms-container) {
  background-color: transparent !important;
  border: 1px solid #0d6efd;
  border-radius: 14px;
  padding: 20px;
}

/* Bottom-Margin der wp-block-columns innerhalb der Form-Card neutralisieren —
   sonst entsteht zu viel Abstand zwischen Trust-Icons und Card-Border. */
#bs24-page .gb-container:has(> .wpforms-container) > .wp-block-columns,
#bs24-page .gb-container:has(> .wp-block-columns > .wp-block-column > .wpforms-container) > .wp-block-columns,
#bs24-page .gb-container:has(> .wp-block-columns > .wp-block-column > style + .wpforms-container) > .wp-block-columns {
  margin-bottom: 0 !important;
}

/* Letzte Element innerhalb der Column (= Trust-Badges-Row) soll keinen
   margin-bottom haben damit nichts unter den Icons zur Card-Border ist. */
#bs24-page .gb-container:has(> .wpforms-container) .wp-block-column > :last-child,
#bs24-page .gb-container:has(> .wp-block-columns > .wp-block-column > .wpforms-container) .wp-block-column > :last-child,
#bs24-page .gb-container:has(> .wp-block-columns > .wp-block-column > style + .wpforms-container) .wp-block-column > :last-child {
  margin-bottom: 0 !important;
}

/* Headings innerhalb der Form-Card sollen keinen großen Top-Margin haben
   (sonst sitzt "Teilbadsanierung anfragen" zu tief in der Card). Plus
   ein Sub-Text via ::after analog zur .form-sub-Zeile auf /altdorf-Hero. */
#bs24-page .gb-container:has(> .wpforms-container) :is(h2, h3, h4),
#bs24-page .gb-container:has(> .wp-block-columns > .wp-block-column > .wpforms-container) :is(h2, h3, h4),
#bs24-page .gb-container:has(> .wp-block-columns > .wp-block-column > style + .wpforms-container) :is(h2, h3, h4) {
  margin-top: 0;
  margin-bottom: 1rem;
}

#bs24-page .gb-container:has(> .wpforms-container) :is(h3, h4)::after,
#bs24-page .gb-container:has(> .wp-block-columns > .wp-block-column > .wpforms-container) :is(h3, h4)::after,
#bs24-page .gb-container:has(> .wp-block-columns > .wp-block-column > style + .wpforms-container) :is(h3, h4)::after {
  content: "In 2 Minuten · Rückruf werktags i. d. R. innerhalb 24h · 100% unverbindlich";
  display: block;
  margin-top: 6px;
  color: #6c757d;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
}

/* Trust-Badge-Icons unter dem Form (zert_logo, ssl-icon, europa, oekostrom)
   in der Form-Card kleiner — native Size ist 256×256, mit width:100% in
   einer schmalen Column zu groß. Auf max 50 px Höhe constrainen. */
#bs24-page article .gb-container:has(> .wpforms-container) .gb-block-image img,
#bs24-page article .gb-container:has(> .wp-block-columns .wpforms-container) .gb-block-image img,
#bs24-page article .gb-container:has(> .wpforms-container) figure.gb-block-image img,
#bs24-page article .gb-container:has(> .wp-block-columns .wpforms-container) figure.gb-block-image img {
  max-width: 60px;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Override für die NEUEN lead-local2 Form-Top/Bottom Reusable Blocks
   (476409/476411): 3 große Logos (NLP/ECA/ICI) in 33%-Spalten — die
   generische 60×50px Regel oben ist auf 4 winzige Trust-Icons designed
   und macht die Lead-Logos zu klein. Hier auf 160 px und mittig zentriert. */
#bs24-page article .gb-container-786b6ec3 .wp-block-column {
  text-align: center;
}
#bs24-page article .gb-container-786b6ec3 .gb-block-image,
#bs24-page article .gb-container-786b6ec3 figure.gb-block-image {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
}
#bs24-page article .gb-container-786b6ec3 .gb-block-image img,
#bs24-page article .gb-container-786b6ec3 figure.gb-block-image img {
  max-width: 160px !important;
  max-height: none !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Outer Form-Card (mit H3#form-bottom) — Abstand zum darüberliegenden
   Artikel-Content, sonst klebt die obere blaue Border direkt an den Absätzen. */
#bs24-page .gb-container:has(> #form-bottom) {
  margin-top: 40px;
}

/* Inner: das wpforms-container selbst — grauer BG + 2 px Border, etwas
   margin damit nicht direkt am outer border klebt. */
#bs24-page .gb-container:has(> .wpforms-container) > .wpforms-container,
#bs24-page .gb-container:has(> .wp-block-columns .wpforms-container) .wpforms-container,
#bs24-page article .wpforms-container {
  background: #f9f9f9;
  border: 2px solid #0d6efd;
  border-radius: 10px;
  padding: 20px;
  margin-top: 28px !important;
  margin-right: 0;
  margin-bottom: 0 !important;
  margin-left: 0;
  box-shadow: none;
}

/* Reset für wpforms-container die schon in einem gestylten Wrapper sitzen
   (hero-form-inner / kontakt-bottom-form-card haben bereits Border). */
#bs24-page .hero-form-inner .wpforms-container,
#bs24-page .kontakt-bottom-form-card .wpforms-container {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Post-Meta-Container (Von/Author/Datum/Breadcrumb) wenn er als direct child
   von #bs24-page sitzt — soll im Content-Bereich (alignwide max-width)
   eingerückt sein, gleich wie der h1 + Body-Content darunter. Mit max-width
   + auto-margins zentriert auf Desktop, auf Mobile bleibt er full-width
   mit content-padding. */
#bs24-page > .wp-block-group.is-content-justification-space-between.is-nowrap {
  max-width: var(--wp--style--global--wide-size, 1100px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wp--style--root--padding-left, 15px);
  padding-right: var(--wp--style--root--padding-right, 15px);
  box-sizing: border-box;
}

/* Hero-Bild auf Single-Posts soll den Content-Bereich ausfüllen + links
   bündig zur Content-Edge sitzen. Beide Markup-Varianten abdecken:
   - /teilbadsanierung: figure.gb-block-image (GenerateBlocks) mit
     img.image-responsive, parent `.gb-container.gb-container-XXX` hat
     `text-align: center` was das nativ 768×512-Bild eingerückt rendert.
   - /kleines-bad-renovieren: figure.wp-block-image.size-medium.image-base
     (Gutenberg) — nativ 537×301 zu schmal für 1100px wide-size-Layout. */
#bs24-page figure.gb-block-image img.image-responsive,
#bs24-page figure.wp-block-image.size-medium.image-base img,
#bs24-page figure.wp-block-image img.image-responsive {
  width: 100%;
  height: auto;
}

/* Eltern-Container des hero-Bildes auf left-align statt center, damit das
   Bild links bündig zur Content-Start-Kante sitzt (statt im verfügbaren
   Bereich zentriert mit Whitespace links/rechts). */
#bs24-page article .wp-block-group.alignwide.has-global-padding > .gb-container > figure.gb-block-image,
#bs24-page article .wp-block-group.alignwide.has-global-padding > .gb-container > figure.wp-block-image {
  text-align: left;
  margin-left: 0;
}

/* Auf /teilbadsanierung sitzt der Hero-Container in einer GB-Grid-Column,
   wodurch das umgebende .wp-block-group.alignwide.has-global-padding einen
   15 px Inset erzeugt — h1 und Author-Header daneben (direkt im article)
   haben diesen Inset NICHT, daher wirkt das Bild links nicht bündig zur
   Content-Edge. Padding hier neutralisieren, damit Hero-Container an der
   gleichen x-Position wie h1 startet. */
#bs24-page article .gb-grid-column .wp-block-group.alignwide.has-global-padding {
  padding-left: 0;
  padding-right: 0;
}

/* Auf Posts (single-post) und Standard-Gutenberg-Pages sitzt der oberste
   Content-Container (gb-container.alignwide/alignfull) direkt an der
   1100px-Card-Edge bei l=163 — ohne das 15px-Inner-Padding, das auf den
   Custom-Templates (Mannheim, Homepage etc.) per .karriere-container oder
   gb-container.alignfull.container_bg eingebaut ist. Damit der Content
   bündig zum Header-Inhalt (Logo/Phone bei l=178) steht, bekommt der
   Top-Level-Container hier dasselbe 15px Padding. */
body.single-post #bs24-page > .gb-container.alignwide,
body.single-post #bs24-page > .gb-container.alignfull,
body.page-template-default #bs24-page > .gb-container.alignwide,
body.page-template-default #bs24-page > .gb-container.alignfull {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Subfooter-Legal-Links (Impressum | Datenschutz | Haftungsausschluss)
   weiß ohne Underline — gleiches Pattern wie .footer-block-columns a auf
   /mannheim (PHP-Footer). Hier ist die FSE-Block-Footer-Variante (parts/
   footer.html mit `.subfooter`-Klasse), die ohne Override die globale
   Regel `a { text-decoration: underline }` aus style.css:84 erbt.
   :visited explizit für Chromes Privacy-Cascade, !important weil die
   globale `a:where(...)`-Regel sonst per Source-Order gewinnt. */
footer .subfooter a,
footer .subfooter a:link,
footer .subfooter a:visited {
  color: #fff !important;
  text-decoration: none;
}

footer .subfooter a:hover,
footer .subfooter a:focus {
  text-decoration: underline;
}

/* ── /de/datenschutz (Page 3): Content an die globale 1100px-Breite binden ──
   Der GenerateBlocks-Wrapper ist align:wide in einem is-layout-flow
   post-content und lief dadurch randbündig (edge-to-edge). Wir spiegeln das
   constrained-Layout-Verhalten: Gutter am Container, innerer Inhalt auf die
   globale content-size (1100px = Header-Breite) gekappt und zentriert — damit
   die Seite exakt so breit ist wie der Header und die EN-Seite /en/privacy. */
body.page-id-3 .entry-content > .gb-container {
  padding-left: var(--wp--style--root--padding-left, 15px) !important;
  padding-right: var(--wp--style--root--padding-right, 15px) !important;
  box-sizing: border-box !important;
}
body.page-id-3 .entry-content > .gb-container > .wp-block-columns {
  max-width: var(--wp--style--global--content-size, 1100px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── /de/blog + /en/blog (Pages 476689/476690): Full-Bleed Hero buendig an den
   Header. Der WP-Default-Block-Gap (1.2rem, via :where(.wp-site-blocks) > *)
   sitzt als margin-block-start auf dem post-content und erzeugt sonst eine
   Luecke zwischen Header und Cover-Hero. Nur auf den Blog-Seiten aufheben. */
body.page-id-476689 .wp-block-post-content,
body.page-id-476690 .wp-block-post-content {
  margin-block-start: 0 !important;
}

/* ── /de/it-sicherheit + /en/cybersecurity (Seiten 476836/476845): Hero-Banner
   buendig an den Header. 2026-06-08 von post->page umgestellt (bs24-page-Template,
   kein <main>-Wrapper) → der Block-Gap (1.2rem) sitzt nun als margin-block-start
   auf .wp-block-post-content (gleiches Muster wie die Blog-Seiten 476689/476690). */
body.page-id-476836 .wp-block-post-content,
body.page-id-476845 .wp-block-post-content {
  margin-block-start: 0 !important;
}

/* ── 2026-06-07: Header-Fix (Review Dr. Gorski) ─────────────────────────────
   Problem: Logo + Menue + Telefon-CTA + Sprachumschalter standen in einer
   nowrap-Zeile und liefen ueber die 1100px-Content-Breite hinaus ("Header zu
   breit"). Loesung: Logo etwas groesser, Menue-Abstaende/Schrift kompakter,
   damit die Header-Zeile buendig in die 1100px passt. Reversibel: diesen Block
   entfernen. */
/* 2026-06-07: Logo-Hoehe auf allen Seiten an redlings.com angeglichen (~56px).
   Greift sowohl fuer das FSE-Header-Logo (wp:site-logo) als auch fuer das
   Legacy-PHP-Header-Logo (header.php, z.B. 404-Seite). width/height:auto +
   max-width:none kommen aus den Regeln weiter oben -> Logo skaliert
   proportional auf 56px Hoehe (~290px Breite). */
header.wp-block-template-part .custom-logo,
header.wp-block-template-part .wp-block-site-logo img,
#masthead.site-header .site-branding img.custom-logo,
#masthead.site-header .site-branding img {
  max-height: 47.88px !important; /* 2026-06-09: header logo −10% (was 53.2px) */
}
header.wp-block-template-part .header-left { gap: 18px !important; }
header.wp-block-template-part .desktop_menu > ul { column-gap: 12px !important; }
header.wp-block-template-part .desktop_menu a { font-size: 15px !important; }

/* ── 2026-06-08: Logo schrumpft beim Runterscrollen (wie redlings.com) ───────
   Verhalten von redlings.com/de/ratgeber/firewall nachgebaut: oben grosses Logo
   (~56px Hoehe / ~290px Breite, Regel direkt darueber), beim Scrollen kleines
   Logo (~37px Hoehe / ~190px Breite — exakt redlings' width 290 -> sticky 190).
   Das Sticky-Signal liefert script.js: ab scrollTop>50 bekommt <header> die
   Klasse .sticky (dieselbe Mechanik, die schon den Telefon-CTA verkleinert).
   Nur Desktop (>=1101px) — unter 1100px ist das Logo ohnehin kompakt (30px,
   bs24-super-menu). Reversibel: diesen Block entfernen. */
header.wp-block-template-part .custom-logo,
header.wp-block-template-part .wp-block-site-logo img,
#masthead.site-header .site-branding img.custom-logo,
#masthead.site-header .site-branding img {
  transition: max-height 0.25s ease;
}
@media (min-width: 1101px) {
  header.wp-block-template-part.sticky .custom-logo,
  header.wp-block-template-part.sticky .wp-block-site-logo img,
  #masthead.site-header.sticky .site-branding img.custom-logo,
  #masthead.site-header.sticky .site-branding img {
    max-height: 31.64px !important; /* 2026-06-09: header logo −10% (was 35.15px) */
  }
}
@media (prefers-reduced-motion: reduce) {
  header.wp-block-template-part .custom-logo,
  header.wp-block-template-part .wp-block-site-logo img,
  #masthead.site-header .site-branding img.custom-logo,
  #masthead.site-header .site-branding img {
    transition: none;
  }
}

/* Sicherheitsnetz: kein horizontaler Scroll durch Full-Bleed-Sektionen. */
.wp-site-blocks { overflow-x: clip; }

/* ── 2026-06-07: bs24-page Content-Breite = Header-Breite ────────────────────
   Auf der bs24-page-Vorlage ist .wp-block-post-content "is-layout-flow", daher
   werden Top-Level-Bloecke mit .alignwide (oder ganz ohne Align) NICHT auf die
   Content-Breite begrenzt und laufen breiter als der 1100px-Header (z.B.
   /de/ratgeber). Hier auf 1100px (= Header) begrenzen; .alignfull bleibt
   bewusst voll-bleed. Reversibel: diesen Block entfernen. */
body.page-template-bs24-page .wp-block-post-content > .alignwide,
body.page-template-bs24-page .wp-block-post-content > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)) {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* ════════════════════════════════════════════════════════════════════
   Emergency Incident Response (Seiten /de & /en/emergency-incident-response)
   GenerateBlocks-Layout: helle Bänder, 1280px-Content (= Header-Breite),
   blauer Primär-CTA. GB-Container tragen eir-*-classNames und werden hier
   gestylt (Site-Konvention, vgl. .gb-container.pre-footer / -fwdecta).
   ════════════════════════════════════════════════════════════════════ */
/* Bänder = align:full (full-bleed); inneres .eir-inner = globale 1280px-Content-
   Breite + root-padding-Gutter wie der Header → Inhalt fluchtet mit dem Header. */
.gb-container.eir-section { width: 100%; box-sizing: border-box; padding: 56px 0; }
.gb-container.eir-inner   {
  /* max-width = content-size + L/R root padding so the *content* is exactly the
     global 1280px (border-box subtracts the padding). Without the calc the
     content was 1280-2x15 = 1250px, i.e. 30px narrower than the core-constrained
     hero/breadcrumb + header -> visible misalignment. */
  max-width: calc(var(--wp--style--global--content-size, 1280px) + var(--wp--style--root--padding-left, 15px) + var(--wp--style--root--padding-right, 15px));
  margin-left: auto; margin-right: auto;
  padding-left: var(--wp--style--root--padding-left, 15px);
  padding-right: var(--wp--style--root--padding-right, 15px);
  box-sizing: border-box;
}
.gb-container.eir-narrow  { max-width: var(--wp--style--global--content-size, 1280px); }
/* Breadcrumb-Band: voll-bleed Band (eir-section) mit duennem Padding; der Inhalt
   sitzt via eir-inner auf der 1280px-Content-Breite (fluchtet mit Hero/Baendern/Header). */
.gb-container.eir-section.eir-breadcrumb-band { padding-top: 12px; padding-bottom: 4px; }
.eir-breadcrumb-band nav[aria-label="breadcrumb"] { margin: 0; }
.eir-breadcrumb-band #breadcrumbs { margin: 0; }

/* Hero ist jetzt ein core/cover (align:full) — Styling am Block selbst (inline),
   daher keine .eir-hero-Regeln mehr nötig (Styleguide: Hero = wp:cover). */
.eir-form-band    { background: #f4f6f8; }
.eir-help-band    { background: #f4f6f8; }
.eir-experts-band { background: #ffffff; }

/* Überschriften — Title-Case, niemals Versalien */
.eir-section .gb-headline,
.eir-section h1, .eir-section h2, .eir-section h3 { text-transform: none; color: #212529; }
.eir-h1       { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.12; margin: 0 0 .4em; }
.eir-subtitle { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 500; color: #3f4b59; margin: 0 0 .7em; }
.eir-h2       { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin: 0 0 .6em; }
.eir-h2.eir-center { text-align: center; }
.eir-card-h   { font-size: 1.2rem; font-weight: 700; margin: 0 0 .6em; }
.eir-lead     { font-size: 1.12rem; line-height: 1.6; color: #3f4b59; max-width: 760px; margin: 0 0 1.6em; }
.eir-section p { line-height: 1.6; }

/* Formular (links) + rechte Spalte (Zentrale-Karte + Notfallhilfe) */
.gb-container.eir-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
/* Formular in eine abgesetzte weiße Box (hebt sich vom grauen Band ab) */
.gb-container.eir-form-col {
  background: #ffffff; border: 1px solid #e6e9ee; border-radius: 12px;
  padding: 32px 34px; box-sizing: border-box; box-shadow: 0 6px 22px rgba(16,32,43,.07);
}
.eir-form-col .wpforms-container { margin: 0; }
.gb-container.eir-right-col { display: block; }
.gb-container.eir-card.eir-office { background: #ffffff; }  /* weiß, hebt sich vom grauen Band ab */
.eir-notfall { margin-top: 34px; }
.eir-h3 { font-size: 1.4rem; font-weight: 700; margin: 0 0 .55em; color: #212529; }

/* Karten (Zentrale + Experten) */
.gb-container.eir-card {
  background: #f9fafb; border: 1px solid #e6e9ee; border-radius: 12px;
  padding: 28px 30px; box-sizing: border-box;
}
.eir-card ul { margin: 0; padding-left: 1.1em; }
.eir-card li { margin: .35em 0; color: #3f4b59; }

/* "Unsere Zentrale" — grafische Kontaktliste mit Icons (wie Original) */
.eir-contact-list { list-style: none; margin: 1.1em 0 0; padding: 0; }
.eir-contact-list li { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 1.05em; line-height: 1.5; color: #3f4b59; }
.eir-contact-list li:last-child { margin-bottom: 0; }
.eir-ci { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(153,0,0,.09); color: #990000; display: flex; align-items: center; justify-content: center; }
.eir-ci svg { width: 19px; height: 19px; }
.eir-contact-list strong { color: #212529; }
.eir-contact-list a { color: #0d6efd; text-decoration: none; }
.eir-contact-list a:hover { text-decoration: underline; }

/* Experten-Karten: 3-spaltiges Grid */
.gb-container.eir-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }

/* Original-Bilder: Team-Bild (redlings-service-team) + Allianz-Badge */
.eir-team-img { margin: 0 auto 6px; }
.eir-team-img img { max-width: 420px; height: auto; border-radius: 12px; }
.eir-allianz { margin: 40px auto 0; }
.eir-allianz img { width: 200px; height: auto; }

/* Primär-CTA dieser Seite = das WPForms-Submit (einziger Filled-CTA der Quelle)
   — Header-CTA-Blau #0d6efd (siehe redlings-cta-button-color). */
.eir-form-band .wpforms-submit,
.eir-form-band button[type="submit"] {
  background-color: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important;
}
.eir-form-band .wpforms-submit:hover,
.eir-form-band button[type="submit"]:hover { background-color: #0b5ed7 !important; border-color: #0b5ed7 !important; }

/* "Mehr"/"More" — sekundärer Outline-Button */
.btn.eir-btn-outline {
  background: transparent; border: 1px solid #0d6efd; color: #0d6efd !important;
  padding: 8px 18px; border-radius: 8px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn.eir-btn-outline:hover { background: #0d6efd; color: #fff !important; }

/* Telefon-Link in der Wir-Karte ("Rufen Sie uns an.") */
.eir-phone { margin: 0 0 1em; }
.eir-phone a { color: #0d6efd; font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.eir-phone a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .gb-container.eir-grid-2 { grid-template-columns: 1fr; gap: 28px; }
  .gb-container.eir-cards  { grid-template-columns: 1fr; }
  .gb-container.eir-section { padding: 40px 0; }
}

/* ==========================================================================
   2026-06-07: Referenzseite /de/referenzen (Page 47113)
   Eigenstaendiges, gescoptes Design unter .ref-page. Volle Breite ueber die
   karriere-fullwidth-Sektionen, Content auf 1100px (.karriere-container).
   ========================================================================== */
.ref-page {
  --ref-blue: #0d6efd;
  --ref-blue-dark: #0b5ed7;
  --ref-ink: #16233d;
  --ref-muted: #5a6577;
  --ref-line: #e6e9ef;
  --ref-bg-soft: #f5f7fb;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ref-ink);
}
.ref-page p { color: var(--ref-muted); }
/* Neutralise the #bs24-page auto-width clamp on our single wp:html wrapper so the
   full-bleed sections inside can span edge-to-edge; width is controlled solely by
   .karriere-container (1100px). */
.ref-page > .wp-block-html { max-width: none !important; padding: 0 !important; margin: 0 !important; }

/* ---- generic section spacing ---- */
.ref-section { width: 100%; }
/* 2026-06-10: Content auf die HEADER-Flucht (Logo/Menue) ausgerichtet — gleiche
   Gutter-Formel wie Header/Startseite/Profil-/Karriere-Seiten (User-Wunsch
   "Raender korrigieren"; ersetzt die fruehere 25px-Artikel-Kante von 2026-06-07).
   max-width = 1280 Content + 2x Gutter (border-box). Die 860px-Sonderregel der
   alten /en-Startseite (body.page-id-476788, style.css ~Z.730) gewinnt weiter
   per Spezifitaet. */
.ref-section .karriere-container {
  max-width: calc(1280px + 2 * clamp(1rem, 3vw, 2.5rem));
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  box-sizing: border-box;
}
.ref-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ref-blue);
  background: rgba(13,110,253,.08);
  border: 1px solid rgba(13,110,253,.18);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* ---- HERO ---- */
.ref-hero {
  background:
    radial-gradient(1100px 420px at 18% -10%, rgba(13,110,253,.10), transparent 60%),
    radial-gradient(900px 380px at 100% 0%, rgba(13,110,253,.06), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--ref-bg-soft) 100%);
  border-bottom: 1px solid var(--ref-line);
  padding: 84px 0 70px;
  text-align: center;
}
.ref-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ref-ink);
  margin: 0 0 18px;
}
.ref-hero h1 .ref-accent { color: var(--ref-blue); }
.ref-hero__lead {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.6;
}
.ref-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}
.ref-stat {
  background: #fff;
  border: 1px solid var(--ref-line);
  border-radius: 14px;
  padding: 16px 22px;
  min-width: 150px;
  box-shadow: 0 2px 10px rgba(16,35,77,.04);
}
.ref-stat strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ref-blue);
  line-height: 1;
}
.ref-stat span { font-size: .9rem; color: var(--ref-muted); }

/* ---- SECTION HEAD ---- */
.ref-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.ref-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ref-ink);
  margin: 0 0 12px;
}
.ref-head p { font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* ---- LOGO WALL ---- */
.ref-logos { background: #fff; padding: 78px 0; }
/* Flexbox statt Grid: eine unvollstaendige letzte Reihe wird zentriert (z.B. bei
   11 Logos -> 4 / 4 / 3 mittig), wirkt nie "abgeschnitten". */
.ref-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.ref-logo {
  flex: 0 0 calc(25% - 13.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--ref-line);
  border-radius: 14px;
  box-sizing: border-box;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ref-logo img {
  max-height: 46px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .22s ease, opacity .22s ease;
}
.ref-logo:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16,35,77,.10);
  border-color: rgba(13,110,253,.35);
}
.ref-logo:hover img { filter: grayscale(0); opacity: 1; }
/* Delphi text wordmark tile */
.ref-logo--text {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #6b7585;
  filter: none;
  transition: color .22s ease;
}
.ref-logo--text small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .18em; color: #97a0ae; margin-top: 2px; }
.ref-logo:hover .ref-logo--text { color: var(--ref-ink); }

/* .ref-section p.ref-note: Spezifitaet (0,3,1) noetig, weil die globale
   Absatz-Regel ":is(.wp-block-post-content,...) p:not(.breadcrumbs)" (0,2,1)
   sonst "margin: 0 0 1rem" erzwingt und das auto-Zentrieren der Box kippt. */
.ref-page .ref-section p.ref-note {
  margin: 36px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: .92rem;
  color: var(--ref-muted);
  display: flex;
  align-items: first baseline;
  justify-content: center;
  gap: 8px;
}
/* Schloss optisch auf die ERSTE Textzeile setzen: baseline-Alignment legt die
   SVG-Unterkante auf die Baseline, translateY rueckt das Glyph minimal nach
   unten (align-items:center sass bei 2-zeiligem Text zu tief). */
.ref-note svg { flex: 0 0 auto; transform: translateY(2px); }

/* ---- SECTORS ---- */
.ref-sectors { background: var(--ref-bg-soft); border-top: 1px solid var(--ref-line); border-bottom: 1px solid var(--ref-line); padding: 78px 0; }
.ref-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ref-card {
  background: #fff;
  border: 1px solid var(--ref-line);
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ref-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,35,77,.08); }
.ref-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(13,110,253,.10);
  color: var(--ref-blue);
  margin-bottom: 18px;
}
.ref-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--ref-ink); margin: 0 0 8px; }
.ref-card p { font-size: .96rem; line-height: 1.55; margin: 0; }

/* ---- CTA ---- */
.ref-cta { background: linear-gradient(135deg, var(--ref-blue) 0%, var(--ref-blue-dark) 100%); padding: 70px 0; text-align: center; }
.ref-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; margin: 0 0 14px; }
.ref-cta p { color: rgba(255,255,255,.9); font-size: 1.1rem; max-width: 620px; margin: 0 auto 28px; }
.ref-cta__btn {
  display: inline-block;
  background: #fff;
  color: var(--ref-blue) !important;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 15px 34px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.ref-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.22); }

/* ---- RESPONSIVE ---- */
@media (max-width: 980px) {
  .ref-logo { flex-basis: calc(33.333% - 12px); }
  .ref-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ref-hero { padding: 58px 0 48px; }
  .ref-logos, .ref-sectors { padding: 52px 0; }
  .ref-grid { gap: 12px; }
  .ref-logo { flex-basis: calc(50% - 6px); }
  .ref-cards { grid-template-columns: 1fr; }
  .ref-logo { height: 96px; padding: 16px; }
  .ref-stat { min-width: 130px; padding: 13px 16px; }
}

/* Referenzseite: Hero-Band buendig direkt am Header (kein Abstand). Entfernt den
   Standard-Top-Margin des <main>-Wrappers (~19px) und das #bs24-page Top-Padding
   (~32px). Die innere Hero-Luft kommt aus .ref-hero padding-top. */
body.page-id-47113 main { margin-top: 0 !important; }
body.page-id-47113 .ref-page { padding-top: 0 !important; }

/* Logo-Wall als eingebettetes Band (z.B. Startseite) ausserhalb von #bs24-page.
   Der Wrapper traegt zusaetzlich .alignfull -> WordPress/Theme rendern ihn als
   echtes Full-Bleed-Element. Abgesetzt durch einen weichen Hintergrund. */
.ref-embed.alignfull { max-width: none !important; width: auto !important; }
.ref-embed .ref-logos { background: var(--ref-bg-soft); border-top: 1px solid var(--ref-line); border-bottom: 1px solid var(--ref-line); }

/* ---- TRUST / ZERTIFIZIERUNGEN & STANDARDS (Referenzseite) ---- */
.ref-trust { background: #fff; padding: 64px 0; border-bottom: 1px solid var(--ref-line); }
.ref-trust .ref-head { margin-bottom: 34px; }
.ref-trust__groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px; }
.ref-trust__group { text-align: center; }
.ref-trust__label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--ref-muted); margin-bottom: 14px; }
.ref-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 620px; }
.ref-badge { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .95rem; color: var(--ref-ink); background: #fff; border: 1px solid var(--ref-line); border-radius: 999px; padding: 8px 17px; }
.ref-badge--cert { color: var(--ref-blue); border-color: rgba(13,110,253,.28); }
.ref-badge__logo { height: 18px; width: auto; max-width: 58px; object-fit: contain; display: block; }
.ref-badge__icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ref-muted); }
.ref-badge--cert .ref-badge__icon { color: var(--ref-blue); }
@media (max-width: 620px) { .ref-trust__groups { gap: 28px; } }

/* ── 2026-06-09: Web-Application-Pentest POSTS (476814 DE / 476815 EN) ──
   Wie die /pentest-Seiten unten, aber als post_type=post (body.postid-*): die
   1280px-Content-Breite (= Header) explizit erzwingen, falls die GB-DYN-Container
   die constrained-Layout-CSS fuer verschachtelte core-Gruppen nicht zuverlaessig
   ausgeben. Voll-Bleed bleibt erhalten (.alignfull ausgenommen). */
body.postid-476814 .gb-container .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.postid-476815 .gb-container .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size, 1280px);
  margin-left: auto;
  margin-right: auto;
}

/* ── 2026-06-08: Pentest-Seiten – Content-Breite in GenerateBlocks-Sektionen ──
   GB-DYN-Container (isDynamic) geben fuer verschachtelte core-Gruppen die
   constrained-Layout-CSS (max-width:content-size) NICHT aus -> Inhalt lief ueber
   die volle Breite. Hier die 1100px-Content-Breite (= Header) wiederherstellen.
   Voll-Bleed bleibt erhalten (.alignfull ausgenommen). Scoped auf /de+/en/pentest. */
body.page-id-476807 .gb-container .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.page-id-476811 .gb-container .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size, 1100px);
  margin-left: auto;
  margin-right: auto;
}

/* ── 2026-06-08: Zertifikate-Portfolio (Dr. Michael Gorski, Page 1865) ──
   wp:html-Badge-Wand. .cert-logo = fixe Hoehe -> normalisiert quadratische
   Credly-Badges und breite Wortmarken (TOGAF/Cisco) auf gleiche Logohoehe. */
.cert-portfolio{margin-top:6px}
.cert-portfolio .cert-sub-h{text-align:center;font-size:14px;font-weight:700;color:#990000;margin:4px 0 22px}
.cert-portfolio .cert-portfolio-h{text-align:center;font-size:22px;font-weight:800;color:#212529;margin:48px 0 4px}
.cert-portfolio .cert-featured,.cert-portfolio .cert-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.cert-portfolio .cert-featured{gap:18px;margin-bottom:8px}
.cert-portfolio .cert-cat{margin-top:36px}
.cert-portfolio .cert-cat-title{text-align:center;font-size:15px;font-weight:700;color:#212529;margin:0 0 16px}
.cert-portfolio .cert-cat-title::after{content:"";display:block;width:46px;height:3px;background:#990000;border-radius:2px;margin:9px auto 0}
.cert-portfolio .cert-card{display:flex;flex-direction:column;align-items:center;flex:0 0 138px;max-width:138px;background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:18px 10px 14px;box-sizing:border-box}
.cert-portfolio .cert-featured .cert-card{flex-basis:168px;max-width:168px;border-radius:10px;padding:24px 16px 18px}
.cert-portfolio .cert-card .cert-logo{display:flex;align-items:center;justify-content:center;height:84px;width:100%}
.cert-portfolio .cert-featured .cert-card .cert-logo{height:118px}
.cert-portfolio .cert-card .cert-logo img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.cert-portfolio .cert-card .cert-ac{margin:12px 0 0;font-size:13px;font-weight:700;color:#343a40;line-height:1.25}
.cert-portfolio .cert-featured .cert-card .cert-ac{font-size:12.5px;font-weight:600;color:#495057}
.cert-portfolio .cert-card .cert-sub{margin:3px 0 0;font-size:11.5px;color:#6c757d;line-height:1.3}
@media(max-width:640px){
 .cert-portfolio .cert-card,.cert-portfolio .cert-featured .cert-card{flex:0 0 44%;max-width:46%}
}

/* ---- TESTIMONIALS / KUNDENSTIMMEN (Referenzseite) ---- */
.ref-quotes { background: #fff; padding: 78px 0; }
.ref-quotes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ref-quote { position: relative; background: #fff; border: 1px solid var(--ref-line); border-radius: 16px; padding: 30px 30px 26px; box-shadow: 0 2px 14px rgba(16,35,77,.05); display: flex; flex-direction: column; }
.ref-quote--featured { grid-column: 1 / -1; }
.ref-quote::before { content: "\201C"; position: absolute; top: 4px; right: 24px; font-family: Georgia, 'Times New Roman', serif; font-size: 84px; line-height: 1; color: rgba(13,110,253,.13); pointer-events: none; }
.ref-quote__text { margin: 0 0 22px; font-size: 1.02rem; line-height: 1.62; color: var(--ref-ink); position: relative; z-index: 1; }
.ref-quote--featured .ref-quote__text { font-size: 1.1rem; }
.ref-quote__author { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.ref-quote__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--ref-blue); color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ref-quote__avatar svg { width: 24px; height: 24px; }
.ref-quote__meta { display: flex; flex-direction: column; line-height: 1.3; }
.ref-quote__meta strong { color: var(--ref-ink); font-size: 1rem; }
.ref-quote__meta span { color: var(--ref-muted); font-size: .88rem; }
@media (max-width: 768px) { .ref-quotes__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   2026-06-08: Referenzseite ENTBLAUT — Blau (#0d6efd) nur noch fuer Links und
   den CTA-Button. Alle dekorativen Blau-Akzente -> neutrales Ink/Grau.
   ========================================================================== */
.ref-page .ref-hero {
  background:
    radial-gradient(1100px 420px at 18% -10%, rgba(22,35,61,.06), transparent 60%),
    radial-gradient(900px 380px at 100% 0%, rgba(22,35,61,.04), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--ref-bg-soft) 100%);
}
.ref-page .ref-eyebrow { color: var(--ref-ink); background: var(--ref-bg-soft); border-color: var(--ref-line); }
.ref-page .ref-hero h1 .ref-accent { color: inherit; }
.ref-page .ref-stat strong { color: var(--ref-ink); }
.ref-page .ref-card__icon { background: var(--ref-bg-soft); color: var(--ref-ink); }
.ref-page .ref-badge--cert { color: var(--ref-ink); border-color: var(--ref-line); }
.ref-page .ref-badge--cert .ref-badge__icon { color: var(--ref-muted); }
/* Cert-Logos entfaerben, damit z.B. das blaue MITRE-Logo nicht blau bleibt */
.ref-page .ref-badge__logo { filter: grayscale(1); }
.ref-page .ref-quote::before { color: rgba(22,35,61,.10); }
.ref-page .ref-quote__avatar { background: var(--ref-ink); }
/* Links blau */
.ref-page a { color: var(--ref-blue); }
/* CTA: neutrales dunkles Band + blauer Button (einziges flaechiges Blau) */
.ref-page .ref-cta { background: #1d2430; }
.ref-page .ref-cta__btn { background: var(--ref-blue); color: #fff !important; box-shadow: 0 8px 22px rgba(13,110,253,.28); }
.ref-page .ref-cta__btn:hover { background: var(--ref-blue-dark); transform: translateY(-2px); }

/* === Pentest FAQ (section-faq → schema-ready, pages 476807/476811) ===
   post-faq.css is post-only, so style the open Q&A here for the pentest PAGES. */
body.page-id-476807 .section-faq h3.wp-block-heading,
body.page-id-476811 .section-faq h3.wp-block-heading{
    font-size:19px; line-height:1.4; color:#1a2b49; font-weight:600;
    margin:0; padding:26px 0 0; border-top:1px solid #e4e8ef;
}
body.page-id-476807 .section-faq h2.wp-block-heading + h3.wp-block-heading,
body.page-id-476811 .section-faq h2.wp-block-heading + h3.wp-block-heading{
    border-top:none; padding-top:0;
}
body.page-id-476807 .section-faq h3.wp-block-heading + p,
body.page-id-476811 .section-faq h3.wp-block-heading + p{ margin-top:10px; }
body.page-id-476807 .section-faq p,
body.page-id-476811 .section-faq p{ color:#444; line-height:1.7; margin:0 0 10px; }
body.page-id-476807 .section-faq ul,
body.page-id-476811 .section-faq ul{ margin:10px 0 14px; padding-left:22px; }
body.page-id-476807 .section-faq li,
body.page-id-476811 .section-faq li{ color:#444; line-height:1.7; margin-bottom:6px; }
body.page-id-476807 .section-faq strong,
body.page-id-476811 .section-faq strong{ color:#1a2b49; }

/* === CTA button hover states (2026-06-08) ===
   CTAs carry their colour inline, so the base colour beats plain CSS on :hover
   unless we use !important. Each button shifts toward its OWN colour:
   filled buttons darken; outline buttons fill with their colour + white text. */
.wp-block-button__link,
.wp-element-button,
.gb-button {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, filter .18s ease;
}

/* Blue filled (#0d6efd) -> darker blue (uses the existing --cta-button-background-hover var) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link[style*="#0d6efd"]:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link[style*="#0d6efd"]:focus-visible {
  background-color: var(--cta-button-background-hover, #0b5ed7) !important;
  border-color: var(--cta-button-background-hover, #0b5ed7) !important;
}

/* Red filled (#d72638, e.g. Karriere) -> darker red */
.wp-block-button:not(.is-style-outline) .wp-block-button__link[style*="#d72638"]:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link[style*="#d72638"]:focus-visible {
  background-color:#b51f2d !important;
  border-color:#b51f2d !important;
}

/* Blue outline (#0d6efd) -> fill blue, white text */
.wp-block-button.is-style-outline .wp-block-button__link[style*="#0d6efd"]:hover,
.wp-block-button.is-style-outline .wp-block-button__link[style*="#0d6efd"]:focus-visible {
  background-color:#0d6efd !important;
  border-color:#0d6efd !important;
  color:#ffffff !important;
}

/* Red outline (#990000) -> fill red, white text */
.wp-block-button.is-style-outline .wp-block-button__link[style*="#990000"]:hover,
.wp-block-button.is-style-outline .wp-block-button__link[style*="#990000"]:focus-visible {
  background-color:#990000 !important;
  border-color:#990000 !important;
  color:#ffffff !important;
}

/* GenerateBlocks buttons -> darken toward their own colour (colour-agnostic) */
.gb-button:hover,
.gb-button:focus-visible {
  filter: brightness(0.92);
}

/* Theme-default read-more buttons (#1E88E5 from global styles post 43814, no inline bg)
   -> darker blue on hover (overrides the parent theme.json grey contrast-2 hover). */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not([style*="background-color"]):hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not([style*="background-color"]):focus-visible {
  background-color:#1565c0 !important;
  border-color:#1565c0 !important;
}

/* === Pentest "Wie läuft ein Pentest ab?" — numbered vertical timeline === */
.pt-timeline { max-width: 780px; margin: 0 auto; }
.pt-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 34px; }
.pt-step:last-child { padding-bottom: 0; }
.pt-step::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: 0; width: 2px; background: #ead0d0; }
.pt-step:last-child::before { display: none; }
.pt-step__num { width: 56px; height: 56px; border-radius: 50%; background: #990000; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
  z-index: 1; box-shadow: 0 4px 14px rgba(153,0,0,.28); }
.pt-step__title { font-size: 19px; font-weight: 700; color: #16233d; margin: 13px 0 8px; line-height: 1.3; }
.pt-step__body p { color: #444; line-height: 1.7; margin: 0 0 8px; }
.pt-step__body ul { margin: 8px 0 0; padding-left: 20px; }
.pt-step__body li { color: #444; line-height: 1.6; margin-bottom: 6px; }
@media (max-width: 600px) {
  .pt-step { grid-template-columns: 44px 1fr; gap: 15px; }
  .pt-step__num { width: 44px; height: 44px; font-size: 18px; }
  .pt-step::before { left: 21px; top: 48px; }
}

/* FAQ questions raised to H2 (faq-q) — match original heading level, keep divider styling */
.page-id-476807 .section-faq h2.faq-q,
.page-id-476811 .section-faq h2.faq-q {
  font-size:19px; line-height:1.4; color:#1a2b49; font-weight:600;
  margin:0; padding:26px 0 0; border-top:1px solid #e4e8ef;
}
.page-id-476807 .section-faq h2.has-text-align-center + h2.faq-q,
.page-id-476811 .section-faq h2.has-text-align-center + h2.faq-q { border-top:none; padding-top:0; }
.page-id-476807 .section-faq h2.faq-q + p,
.page-id-476811 .section-faq h2.faq-q + p { margin-top:10px; }

/* Pentest hero text-shadow — keep white headline crisp over the (low-overlay) dark circuit image */
body.page-id-476807 .wp-block-cover__inner-container h1,
body.page-id-476811 .wp-block-cover__inner-container h1,
body.page-id-476807 .wp-block-cover__inner-container p,
body.page-id-476811 .wp-block-cover__inner-container p { text-shadow: 0 2px 14px rgba(0,0,0,.55); }

/* ── 2026-06-08: Guide YouTube Index — „Redlings Video Tutorials"
   (Page 477072 /de/guide-youtube-index ↔ 477073 /en/guide-youtube-index).
   Style-Guide-konform: Content-Breite 1280 (=Header), Headings erben globale Farbe #1b2f4e,
   Breadcrumb = Local Pattern 45770, Hero-Eyebrow rot #990000. Nur Struktur-Styles. */
body.page-id-477072 .gb-container .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.page-id-477073 .gb-container .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size, 1100px);
  margin-left: auto; margin-right: auto;
}
/* Full-Bleed-Hero bündig an Header docken (bs24-page-Template) */
body.page-id-477072 .wp-block-post-content,
body.page-id-477073 .wp-block-post-content { margin-block-start:0!important; }
/* Hero: Eyebrow/H1/Subline scharf über dunklem Banner */
body.page-id-477072 .wp-block-cover__inner-container :where(h1,p),
body.page-id-477073 .wp-block-cover__inner-container :where(h1,p) { text-shadow:0 2px 14px rgba(0,0,0,.55); }
body.page-id-477072 .gyi-eyebrow,
body.page-id-477073 .gyi-eyebrow { margin-bottom:.4rem!important; }
/* Breadcrumb-Band (Local Pattern 45770) */
body.page-id-477072 .gb-container-gyide01,
body.page-id-477073 .gb-container-gyien01 { border-bottom:1px solid #e7edf3; }
/* Video-Galerie: 2 Spalten am 1280-Raster, oben ausgerichtet */
body.page-id-477072 .wp-block-columns,
body.page-id-477073 .wp-block-columns { gap:2.6rem; align-items:flex-start; }
.gyi-date{ display:inline-flex; align-items:center; gap:.45rem; margin-block-start:6px!important;
  color:#7a8794; font-size:.92rem; font-weight:600; }
.gyi-date::before{ content:""; width:15px; height:15px; flex:0 0 auto;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237a8794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
/* Video: wp-youtube-lyte → responsiver Lyte-Player; Wrapper füllt die Spalte (Lyte regelt 16:9 selbst) */
.gyi-video{ margin:0 0 16px; }
.gyi-video .lyte-wrapper{ margin:0!important; width:100%!important; border-radius:10px; overflow:hidden;
  box-shadow:0 8px 26px rgba(13,28,51,.14); }
@media (max-width:781px){
  body.page-id-477072 .wp-block-cover__inner-container h1,
  body.page-id-477073 .wp-block-cover__inner-container h1 { font-size:34px!important; }
}

/* Service-Card-Titel: rote Heading-Links statt Blau.
   Style-Guide: keine Ueberschriften in Blau — roter Akzent #990000 (Blau bleibt fuer reine Links/CTA). */
.svc-title a,
.svc-title a:visited { color:#990000; }
.svc-title a:hover,
.svc-title a:focus { color:#7a0000; }

/* ===================================================================
   Incident Response detail pages — 476992 (DE) / 476993 (EN)
   Per style-guide.md + page-style-guide.md: content 1100, blue only for
   links/CTA, headings navy #1b2f4e, hero eyebrow red #990000, no all-caps.
   =================================================================== */
/* HERO = core/cover (bg image + dim handled by the cover block) */
.ir-hero{ position:relative; }
.ir-hero :is(h1,h2,h3,h4,h5,p){ color:#fff; }
.ir-hero .wp-block-cover__inner-container > .wp-block-group{ width:100%; }
.ir-hero .wp-block-columns{ align-items:center; gap:2.5rem; margin:0; }
.ir-eyebrow{ font-size:.95rem; font-weight:700; letter-spacing:.04em; color:#d72638; margin:0 0 .6rem; }
.ir-h1{ font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.12; margin:.1rem 0 1rem; font-weight:800; }
.ir-h1-accent{ display:inline-block; color:#d72638; font-weight:700; font-size:.62em; }
.ir-lead{ font-size:1.18rem; color:#dbe7f3; max-width:680px; margin:0; }
.ir-hero-video{ border:8px solid rgba(255,255,255,.10); border-radius:.6rem; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.45); background:#0a1422; line-height:0; }
.ir-hero-video video{ display:block; width:100%; height:auto; }
.ir-hero::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:44px; background:#fff; clip-path:polygon(0 100%,100% 0,100% 100%); z-index:2; }

/* breadcrumb bar */
.ir-breadcrumb-bar{ background:#fff; border-bottom:1px solid #e7edf3; }
.ir-breadcrumb{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; font-size:.9rem; }
.ir-breadcrumb li{ display:inline-flex; align-items:center; margin:0; }
.ir-breadcrumb li:not(:first-child)::before{ content:"›"; color:#9aa7b4; margin:0 .55rem; }
.ir-breadcrumb a{ color:#5b6b7b; text-decoration:none; }
.ir-breadcrumb a:hover{ color:#0d6efd; }
.ir-bc-current{ color:#1b2f4e; font-weight:600; }

.ir-section-lead{ font-size:1.08rem; color:#4a5568; max-width:840px; margin-bottom:2rem; }

/* cards */
.ir-card{ background:#fff; border:1px solid #e7edf3; border-radius:.6rem; padding:26px; height:100%; box-shadow:0 1px 2px rgba(16,32,43,.04); }
.ir-card h4{ color:#1b2f4e; margin:.1rem 0 .6rem; font-size:1.12rem; }
.ir-card p{ color:#4a5568; line-height:1.65; margin:0; }
.ir-card-img img{ border-radius:.4rem; margin-bottom:1rem; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.ir-num{ border-top:3px solid #1b2f4e; }
/* round icon badge (navy — blue reserved for links/CTA) */
.ir-ico{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:#eef2f6; color:#1b2f4e; }
.ir-ico svg{ width:24px; height:24px; }
.ir-num .ir-ico{ display:flex; margin-bottom:14px; }
.ir-proc{ text-align:center; }
.ir-proc .ir-card-title{ font-size:1.12rem; }
.ir-proc-icon img{ width:64px!important; height:auto; margin:0 auto .8rem; display:block; }
.ir-card-title{ font-weight:700; color:#1b2f4e; margin:.2rem 0 .5rem; }

/* service boxes: icon+title header + checkmark list */
.ir-svc{ border-top:3px solid #1b2f4e; }
.ir-svc-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:.7rem; }
.ir-svc-head .ir-ico{ width:42px; height:42px; flex:0 0 auto; }
.ir-svc-head .ir-ico svg{ width:21px; height:21px; }
.ir-svc-head h4{ margin:0; }
.ir-svc ul{ list-style:none; margin:.2rem 0 0; padding:0; }
.ir-svc li{ position:relative; padding-left:1.7rem; color:#4a5568; margin:.5rem 0; line-height:1.45; }
.ir-svc li::before{ content:""; position:absolute; left:0; top:.2rem; width:15px; height:15px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231b2f4e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* accent CTA bands */
.ir-emergency, .ir-retainer, .ir-contact-band{ background:#eef4ff; }
.ir-emergency h3, .ir-retainer h3, .ir-contact-band h3{ color:#1b2f4e; }
.ir-emergency p, .ir-retainer p, .ir-contact-sub{ color:#3a4a5e; }
.ir-emergency, .ir-contact-band{ text-align:center; }
.ir-emergency .wp-block-buttons, .ir-contact-band .wp-block-buttons{ justify-content:center; }

/* CTA buttons: primary filled #0d6efd r6px / secondary outline 2px */
.ir-btn-blue .wp-block-button__link{ background:#0d6efd; color:#fff; border-radius:6px; padding:.7em 1.6em; font-weight:600; }
.ir-btn-blue .wp-block-button__link:hover{ background:#0b5ed7; color:#fff; }
.ir-btn-outline .wp-block-button__link{ background:transparent; color:#0d6efd; border:2px solid #0d6efd; border-radius:6px; padding:.6em 1.5em; font-weight:600; }
.ir-btn-outline .wp-block-button__link:hover{ background:#0d6efd; color:#fff; }

/* expertise alternating rows */
.ir-exp-row{ margin:2.2rem 0; }
.ir-exp-img img{ border-radius:.5rem; width:100%; height:auto; object-fit:cover; }
.ir-exp-row h2{ color:#1b2f4e; font-size:1.5rem; margin:0 0 .6rem; }
.ir-exp-row p{ color:#4a5568; line-height:1.7; margin:0; }

/* incident type list (ordered <ol>, navy accent) */
.ir-incident-list{ list-style:none; counter-reset:ir-inc; margin:1.6rem 0 0; padding:0; }
.ir-incident-list li{ position:relative; background:#fff; border-left:4px solid #1b2f4e; border-radius:.3rem; padding:18px 22px 18px 58px; margin:0 0 14px; color:#4a5568; line-height:1.7; box-shadow:0 1px 2px rgba(16,32,43,.04); list-style:none; }
.ir-incident-list li::before{ counter-increment:ir-inc; content:counter(ir-inc); position:absolute; left:16px; top:17px; width:28px; height:28px; border-radius:50%; background:#1b2f4e; color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.ir-incident-list strong{ color:#1b2f4e; }

/* Warum Redlings / Ansprechpartner */
.ir-subkicker{ color:#990000; font-size:1.05rem; font-weight:700; margin:.2rem 0 1rem; }
.ir-contact-h{ margin-top:2.6rem; }
.ir-person{ background:#f7f9fc; border-radius:.6rem; padding:28px; margin-top:1rem; }
.ir-person h2{ color:#1b2f4e; }
.ir-role{ color:#5b6b7b; font-weight:600; margin:.2rem 0 .8rem; }
.ir-person ul{ color:#4a5568; line-height:1.6; }

/* related services */
.ir-rel-title{ color:#1b2f4e; margin-bottom:1.4rem; }
.ir-rel{ padding:0!important; overflow:hidden; }
.ir-rel-img img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
.ir-rel h2{ font-size:1.15rem; margin:1rem 20px .4rem; }
.ir-rel h2 a{ color:#1b2f4e; text-decoration:none; }
.ir-rel h2 a:hover{ color:#0d6efd; }
.ir-rel p{ margin:0 20px 1.2rem; color:#4a5568; }

/* FAQ accordion */
.ir-faq-title{ font-size:1.6rem; color:#1b2f4e; margin:0 0 1.4rem; text-align:center; }
.ir-faq-accordion{ max-width:860px; margin:0 auto; }
.ir-faq-accordion .gb-accordion__item{ border:1px solid #e2e8f0; border-radius:.45rem; margin:14px 0; background:#fff; overflow:hidden; }
.ir-faq-accordion .gb-accordion__toggle{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:.7em; padding:18px 24px; background:transparent; border:0; cursor:pointer; font-size:17px; font-weight:600; color:#1b2f4e; text-align:left; line-height:1.45; font-family:inherit; }
.ir-faq-accordion .gb-accordion__toggle:hover{ color:#0d6efd; }
.ir-faq-q{ flex:1 1 auto; }
.ir-faq-ic{ flex:0 0 auto; width:15px; height:15px; position:relative; }
.ir-faq-ic::before, .ir-faq-ic::after{ content:""; position:absolute; background:#1b2f4e; transition:transform .25s ease; }
.ir-faq-ic::before{ top:6.5px; left:0; width:15px; height:2px; }
.ir-faq-ic::after{ top:0; left:6.5px; width:2px; height:15px; }
.ir-faq-accordion .gb-accordion__item.is-open .ir-faq-ic::after{ transform:scaleY(0); }
.ir-faq-accordion .gb-accordion__content{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.ir-faq-accordion .gb-accordion__item.is-open .gb-accordion__content{ max-height:900px; }
.ir-faq-accordion .gb-accordion__content p{ margin:0 24px 20px; color:#4a5568; line-height:1.75; }

/* contact form: blue submit (CTA) */
body.page-id-476992 .ir-contact-band .wpforms-submit,
body.page-id-476993 .ir-contact-band .wpforms-submit{ background:#0d6efd!important; border-color:#0d6efd!important; color:#fff!important; border-radius:6px!important; }
body.page-id-476992 .ir-contact-band .wpforms-submit:hover,
body.page-id-476993 .ir-contact-band .wpforms-submit:hover{ background:#0b5ed7!important; }

/* dock full-bleed hero flush to header */
body.page-id-476992 .wp-block-post-content,
body.page-id-476993 .wp-block-post-content{ margin-block-start:0!important; }

/* 2026-06-09: About (Über uns 283 / About Us 476726) — dock full-bleed cover hero flush to header */
body.page-id-283 .wp-block-post-content,
body.page-id-476726 .wp-block-post-content{ margin-block-start:0!important; }

@media (max-width:781px){
  .ir-h1{ font-size:2rem; }
  .ir-exp-img img{ margin-bottom:1rem; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Redlings360 — narrow contact-form treatment  (.rl-form-narrow)
   Used on /de/it-sicherheit/redlings360 (477032, "Form de" 476375) and
   /en/cybersecurity/redlings360 (477033, "Form en" 476946).
   Styleguide: CTA/links = header-blue #0d6efd, radius 6px; reusable global styles.
   WPForms "modern markup" is fully CSS-variable driven, so we re-skin via its own
   custom properties. Specificity ".rl-form-narrow #wpforms-ID" (1,1,0) beats the
   form's inline "#wpforms-ID" var block (1,0,0), which is emitted later in <body>.
   ─────────────────────────────────────────────────────────────────────────── */
.rl-form-narrow #wpforms-476375,
.rl-form-narrow #wpforms-476946 {
  /* Accent — drives the submit button, the field focus ring and checkboxes/radios */
  --wpforms-button-background-color: #0d6efd;
  --wpforms-button-border-color: #0d6efd;
  --wpforms-button-border-radius: 6px;
  --wpforms-page-break-color: #0d6efd;
  /* Inputs: round to match the button */
  --wpforms-field-border-radius: 6px;
  /* White card sitting on the light-blue (#f4f8ff) section band */
  --wpforms-background-color: #ffffff;
  --wpforms-container-padding: 32px;
  --wpforms-container-border-style: solid;
  --wpforms-container-border-width: 1px;
  --wpforms-container-border-color: #dce6f5;
  --wpforms-container-border-radius: 12px;
  --wpforms-container-shadow-size-box-shadow: 0 10px 30px rgba(13, 110, 253, 0.08);
}
/* Narrow, centered column — heading, intro and the form card (no WPForms width var) */
.rl-form-narrow .wp-block-group.is-layout-constrained > *,
.rl-form-narrow .wpforms-container-full { max-width: 720px; }

/* GenerateBlocks grid fix: the "Warum Redlings" pattern grids (476976/476977/477095/477096)
   render their horizontal gap as padding-left on every column WITHOUT a compensating
   negative margin on the wrapper, so the FIRST column gets indented (content started 48px
   in, breaking alignment with the rest of the page). Drop only the first column's leading
   padding — the gap between the text and image columns is preserved. */
.gb-grid-wrapper-wde0001 > .gb-grid-column:first-child,
.gb-grid-wrapper-wen0001 > .gb-grid-column:first-child,
.gb-grid-wrapper-wtde0001 > .gb-grid-column:first-child,
.gb-grid-wrapper-wten0001 > .gb-grid-column:first-child { padding-left: 0 !important; }

/* ============================================================================
   LEISTUNGSSEITE SOTA — service-page template components
   Used by the service-page template (Post 477356 "0 TEMPLATE Leistung") and
   every clone of it. Global, reusable `.rl-*` classes (no per-page styling).
   State-of-the-art B2B service page: hero, trust signals, jump-nav, process
   steps, lite-YouTube video facade, comparison, certifications, testimonials,
   CTA band, sticky mobile CTA. Added 2026-06-09.
   NB: bump the theme `Version:` header whenever this file changes (the
   style_loader_src filter pins every asset ?ver to the theme Version).
   ============================================================================ */

:root {
  --rl-ink: #16263f;        /* headings / strong text */
  --rl-body: #44546a;       /* body / descriptions */
  --rl-eyebrow: #990000;    /* red kicker */
  --rl-cta: #0d6efd;
  --rl-cta-hover: #0b5ed7;
  --rl-card-bg: #ffffff;
  --rl-card-border: #e6e9ef;
  --rl-tint: #f4f8ff;       /* light section band */
  --rl-tint-2: #eef6ff;     /* info / tldr band */
  --rl-radius: 12px;
  --rl-header-h: 70px;      /* live value set by rl-service.js */
}

/* --- deterministic, header-aligned content width ---------------------------
   WP `alignwide` is unreliable in this single-post template (it sprawls to
   ~full width at 1280–1366px instead of capping at the content column), so
   every section is pinned to the SAME container formula as the FSE header
   (max-width 1360 = 1280 content + 2×40px gutter; see the header rule above).
   Scoped via :has(.rl-service-hero) so only this template and its clones are
   affected. This is what makes all bands "fluchten mit dem Header". */
.rl-trustbar .rl-trustbar__inner,
.rl-jumpnav .rl-jumpnav__inner,
.wp-block-post-content:has(.rl-service-hero) > .wp-block-group {
  max-width: 1360px !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, 3vw, 2.5rem) !important;
  box-sizing: border-box;
}

/* --- section rhythm + anchor offset (sticky header + jump-nav) --- */
.rl-band { padding-block: clamp(40px, 6vw, 72px); }
.rl-band--tint { background: var(--rl-tint); }
/* lands jump-nav targets just below the sticky header + jump-nav. NB: the
   global `html{scroll-padding-top:80px}` already adds 80px, so keep this small. */
.rl-sec { scroll-margin-top: 48px; }
.rl-eyebrow {
  color: var(--rl-eyebrow);
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 .4rem;
  font-size: .95rem;
}
.rl-lede { color: var(--rl-body); font-size: 1.125rem; max-width: 72ch; }

/* ---------------- Hero (alignwide group .rl-service-hero) ----------------
   Content is forced to the shared 1360 band (above) so it aligns exactly with
   every other section. The light background is painted edge-to-edge with the
   box-shadow/clip-path full-bleed trick (same as the site pre-footer), so the
   hero reads as a full-width banner WITHOUT breaking content alignment. */
.rl-service-hero {
  position: relative;
  background: var(--rl-tint);
  box-shadow: 0 0 0 100vmax var(--rl-tint);
  clip-path: inset(0 -100vmax);
  padding-block: clamp(44px, 6vw, 88px) !important;
  color: var(--rl-ink);
}
/* dock the hero flush under the header (no gap above its full-bleed bg) */
.wp-block-post-content:has(> .rl-service-hero:first-child),
.rl-service-hero:first-child { margin-block-start: 0 !important; }
.wp-site-blocks > main:has(.wp-block-post-content > .rl-service-hero:first-child) {
  margin-block-start: 0 !important;
}
.rl-service-hero .wp-block-post-title,
.rl-service-hero h1 {
  font-size: clamp(1.7rem, 5.4vw, 3.25rem) !important; /* beats the theme's fixed h1 size so it scales down on mobile */
  line-height: 1.12;
  color: var(--rl-ink);
  margin: 0 0 .6rem;
  max-width: 24ch;
  /* avoid ugly mid-word breaks from the global word-break:break-word */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}
.rl-hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--rl-body);
  max-width: 58ch;
  margin: 0 0 1.5rem;
}
.rl-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 1.6rem; }
.rl-hero-cta .wp-block-button { margin: 0; }
.rl-hero-cta .wp-block-button:not(.is-style-outline) .wp-element-button {
  background: var(--rl-cta);
  color: #fff;
  border: 2px solid var(--rl-cta);
}
.rl-hero-cta .wp-block-button:not(.is-style-outline) .wp-element-button:hover {
  background: var(--rl-cta-hover);
  border-color: var(--rl-cta-hover);
}
.rl-hero-cta .is-style-outline .wp-element-button {
  background: transparent;
  color: var(--rl-cta);
  border: 2px solid var(--rl-cta);
}
.rl-hero-cta .is-style-outline .wp-element-button:hover {
  background: var(--rl-cta);
  color: #fff;
}
.rl-hero-cta .wp-element-button {
  min-height: 48px;
  border-radius: 8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
/* hero trust trio */
.rl-trust-trio {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.rl-trust-trio li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .95rem; color: var(--rl-body); font-weight: 600;
}
.rl-trust-trio .rl-ic { color: var(--rl-cta); font-weight: 800; }

/* ---------------- Trust bar (certs + rating, light band) ---------------- */
.rl-trustbar { background: #fff; border-block: 1px solid var(--rl-card-border); }
.rl-trustbar .rl-trustbar__inner {
  max-width: 1280px; margin-inline: auto;
  padding: 16px clamp(15px, 3vw, 24px);
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center; justify-content: center;
}
.rl-trustbar .rl-badge { color: var(--rl-ink); }
.rl-rating { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--rl-body); }
.rl-stars { color: #f5a623; letter-spacing: 2px; }

/* ---------------- Sticky jump-nav (anchor chips) ---------------- */
.rl-jumpnav {
  position: sticky; top: var(--rl-header-h); z-index: 8;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-block: 1px solid var(--rl-card-border);
}
.rl-jumpnav__inner {
  max-width: 1280px; margin-inline: auto;
  padding: 10px clamp(15px, 3vw, 24px);
  display: flex; gap: 8px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rl-jumpnav__inner::-webkit-scrollbar { display: none; }
.rl-jumpnav a {
  white-space: nowrap; padding: 8px 14px; border-radius: 999px;
  font-size: .92rem; text-decoration: none; color: var(--rl-ink);
  border: 1px solid var(--rl-card-border); background: #fff;
}
.rl-jumpnav a:hover, .rl-jumpnav a:focus-visible {
  border-color: var(--rl-cta); color: var(--rl-cta);
}

/* ---------------- TL;DR / "Das Wichtigste in Kürze" ---------------- */
.rl-tldr {
  background: var(--rl-tint-2); border: 1px solid #cfe2ff;
  border-left: 4px solid var(--rl-cta); border-radius: var(--rl-radius);
  padding: 24px clamp(20px, 3vw, 30px);
}
.rl-tldr__answer { font-size: 1.15rem; color: var(--rl-ink); font-weight: 500; margin: 0 0 1rem; }
.rl-tldr ul { margin: 0; padding-left: 1.25rem; color: var(--rl-body); }
.rl-tldr li { margin: .4rem 0; }

/* ---------------- Process steps (numbered) ---------------- */
.rl-steps { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); counter-reset: rlstep; margin-top: 8px; }
.rl-steps > .wp-block-group {
  position: relative; margin: 0; padding: 24px 24px 22px 70px;
  background: var(--rl-card-bg); border: 1px solid var(--rl-card-border);
  border-radius: var(--rl-radius);
}
.rl-steps > .wp-block-group::before {
  counter-increment: rlstep; content: counter(rlstep);
  position: absolute; left: 22px; top: 24px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--rl-cta); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.rl-steps h3, .rl-steps h4 { margin: 0 0 .4rem; color: var(--rl-ink); font-size: 1.15rem; }
.rl-steps p { margin: 0; color: var(--rl-body); }

/* ---------------- Video facade (lite-YouTube) ---------------- */
.rl-video-facade {
  position: relative; aspect-ratio: 16 / 9; max-width: 880px; margin: 8px auto 0;
  border-radius: var(--rl-radius); overflow: hidden; cursor: pointer;
  background: #0f1b2d linear-gradient(135deg, #16263f, #0d2547);
}
.rl-video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-video-facade__btn {
  position: absolute; inset: 0; margin: auto; width: 78px; height: 78px;
  border: 0; border-radius: 50%; background: rgba(13,110,253,.94); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.rl-video-facade__btn::before {
  content: ""; display: block; width: 0; height: 0; margin-left: 5px;
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.rl-video-facade:hover .rl-video-facade__btn { transform: scale(1.07); background: var(--rl-cta); }
.rl-video-facade__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rl-video-facade__label {
  position: absolute; left: 16px; bottom: 14px; right: 16px; color: #dbe7fb;
  font-size: .92rem; text-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none;
}
.rl-video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rl-video-facade.is-playing .rl-video-facade__btn,
.rl-video-facade.is-playing .rl-video-facade__label { display: none; }
.rl-video-note { color: var(--rl-body); font-size: .9rem; text-align: center; margin-top: .8rem; }

/* ---------------- Certifications badges ---------------- */
.rl-badges { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; justify-content: center; }
/* Logo-Variante (Startseite "Zertifizierungen unseres Teams"): wp:image-Figuren
   ohne Eigenmargin, Bild als Block — Hoehe kommt inline (height:72px;width:auto). */
.rl-badges > .wp-block-image { margin: 0; }
.rl-badges > .wp-block-image img { display: block; }
/* Tile-Variante: jedes Logo in einer einheitlichen weissen Kachel (150x104) —
   gleicht die gemischten Logo-Formate (Siegel/Hexagon/Wortmarke) optisch an.
   14 Kacheln = exakt 2 Reihen a 7 bei 1280px Content-Breite. */
.rl-badges--tiles { gap: 14px; }
.rl-badges--tiles > .wp-block-image {
  width: 150px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--rl-card-border);
  border-radius: 8px;
}
.rl-badges--tiles > .wp-block-image img {
  max-height: 72px;
  max-width: 118px;
  width: auto;
  height: auto;
  /* Logos entsaettigt, Originalfarbe nur beim Hover der jeweiligen Kachel */
  filter: grayscale(1);
  opacity: .72;
  transition: filter .25s ease, opacity .25s ease;
}
.rl-badges--tiles > .wp-block-image:hover img,
.rl-badges--tiles > .wp-block-image:focus-within img {
  filter: none;
  opacity: 1;
}
@media (max-width: 374px) {
  .rl-badges--tiles > .wp-block-image { width: calc(50% - 7px); }
}
/* YouTube-Strip (Startseite): Icon groesser als WPs Maximum "huge" (48px) —
   social-links skalieren ueber font-size (Icon = 1em). Theme setzt li/a auf
   18px -> font-size auf li+a durchziehen UND svg fix dimensionieren. */
.wp-block-social-links.rl-yt-xl,
.wp-block-social-links.rl-yt-xl .wp-social-link,
.wp-block-social-links.rl-yt-xl .wp-social-link a { font-size: 64px; }
.wp-block-social-links.rl-yt-xl .wp-social-link svg { width: 64px; height: 64px; }
.rl-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 10px 16px; border: 1px solid var(--rl-card-border);
  border-radius: 999px; background: #fff; font-weight: 600;
  color: var(--rl-ink); font-size: .95rem;
}

/* ---------------- Why-us USP grid ---------------- */
.rl-usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.rl-usp > .wp-block-group {
  margin: 0; background: #fff; border: 1px solid var(--rl-card-border);
  border-radius: var(--rl-radius); padding: 26px;
}
.rl-usp h3, .rl-usp h4 { margin: 0 0 .5rem; color: var(--rl-ink); font-size: 1.2rem; }
.rl-usp p { margin: 0; color: var(--rl-body); }

/* ---------------- Testimonials ---------------- */
.rl-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.rl-quote {
  margin: 0; background: #fff; border: 1px solid var(--rl-card-border);
  border-radius: var(--rl-radius); padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.rl-quote blockquote { margin: 0; color: var(--rl-ink); font-size: 1.02rem; line-height: 1.55; }
.rl-quote cite { font-style: normal; font-weight: 700; color: var(--rl-ink); }
.rl-quote .rl-quote__role { color: var(--rl-body); font-size: .9rem; }

/* ---------------- Final CTA band ---------------- */
.rl-cta-band {
  background: linear-gradient(180deg, #eaf2ff, #dcebff);
  border: 1px solid #cfe2ff; border-radius: var(--rl-radius);
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
  text-align: center;
}
.rl-cta-band h2, .rl-cta-band h3 { color: var(--rl-ink); }
.rl-cta-band .rl-form-narrow { margin-top: 1.2rem; }

/* Final CTA with the double-border form frame (.post-form-frame = red outer /
   .post-form-inner = blue inner, like /de/ratgeber/buffer-overflow). Cap the
   frame to a comfortable width and centre it within the content column. */
.rl-cta-final { padding-block: clamp(28px, 4vw, 48px); }
.rl-cta-final h2 { color: var(--rl-ink); }
.wp-block-post-content:has(.rl-service-hero) .post-form-frame {
  max-width: 760px;
  margin-inline: auto;
  margin-top: 1.4rem;
}

/* FAQ column variants (the template ships both as examples).
   Default / .rl-faq-1col = one column (from post-faq.css); .rl-faq-2col = two. */
.section-faq.rl-faq-1col .gb-accordion { grid-template-columns: 1fr; }
.section-faq.rl-faq-2col .gb-accordion {
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
@media (max-width: 782px) {
  .section-faq.rl-faq-2col .gb-accordion { grid-template-columns: 1fr; }
}

/* small template hint note */
.rl-tmpl-note { color: #8a94a6; font-size: .9rem; margin: 0; }

/* ---------------- Sticky mobile CTA bar ---------------- */
.rl-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--rl-card-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  transform: translateY(115%); transition: transform .25s ease;
}
.rl-sticky-cta.is-visible { transform: none; }
.rl-sticky-cta__txt { font-weight: 700; color: var(--rl-ink); font-size: .95rem; line-height: 1.2; }
.rl-sticky-cta__btn {
  background: var(--rl-cta); color: #fff !important; text-decoration: none;
  padding: 12px 18px; border-radius: 8px; font-weight: 700; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
}
.rl-sticky-cta__btn:hover { background: var(--rl-cta-hover); }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .rl-usp, .rl-testimonials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .rl-steps, .rl-usp, .rl-testimonials { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .rl-sticky-cta { display: flex; }
  body.rl-has-sticky { padding-bottom: 76px; }
}
@media (min-width: 768px) {
  .rl-sticky-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-video-facade__btn, .rl-sticky-cta { transition: none; }
  html { scroll-behavior: auto; }
}