/* Wie auf ufkb.de: Container = min(90%, 1170px). Ohne den Cap übersteuert
   width:90% die Bootstrap-Stufen (750/970/1170px) aus ufkb_legacy.css und
   der Inhalt läuft auf breiten Screens über die volle Viewport-Breite
   (und unter die Sidebar). */
.container, .container-sm {
  width: 90%;
  max-width: 1170px;
}

/* ==========================================================================
   Bild + Caption: Grid-Layout (Einheiten gleich hoch)
   ========================================================================== */

/* figure-Float deaktivieren – nur für Einheiten mit Caption (figure + img-caption im selben div) */
.wp-block-group.is-layout-flow:has(> figure.embedded-content-image.align-left:not(.full).fourth):has(> .img-caption)
    > figure.embedded-content-image.align-left.fourth {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Parent-Container: < 768px → 2 Spalten */
@media (max-width: 767px) {
    .wp-block-group.text-main.ezrichtext-field:has(> .wp-block-group.is-layout-flow > figure.fourth) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 0;
    }
}

/* Parent-Container: >= 768px → 4 Spalten */
@media (min-width: 768px) {
    .wp-block-group.text-main.ezrichtext-field:has(> .wp-block-group.is-layout-flow > figure.fourth) {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 20px;
        row-gap: 0;
    }
}

/* Nicht-Einheiten (H2, P, CF7 …) immer über volle Breite */
.wp-block-group.text-main.ezrichtext-field:has(> .wp-block-group.is-layout-flow > figure.fourth)
    > *:not(.wp-block-group.is-layout-flow:has(> figure.fourth)) {
    grid-column: 1 / -1;
}

/* Einheiten (nur mit Caption): overflow + vertikaler Abstand */
.wp-block-group.is-layout-flow:has(> figure.embedded-content-image.align-left:not(.full).fourth):has(> .img-caption) {
    overflow: hidden;
    margin-bottom: 20px;
}

/* Wenn Caption folgt: untere Ecken des Bildes nicht abrunden */
.wp-block-group.is-layout-flow:has(> .img-caption) > figure.img-rounded-top img {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Bild links neben dem Text (z.B. Startseiten-Intro): auf ufkb.de gibt
   `#content-section .grid-display-wrapper + p { padding-top: 15px !important }`
   dem Text neben einem gefloateten Bild 15px Luft nach oben — zusammen mit dem
   15px-margin-top des Floats stehen Bild und erste Textzeile dort bündig.
   Der WP-Import hat keinen .grid-display-wrapper (dessen Klassen liegen direkt
   auf der <figure>), die Legacy-Regel greift also nie: der Text begann 15px
   oberhalb der Bildoberkante und der Abstand zum Banner war zu knapp.
   Spiegelung der Regel für die flache Struktur: */
#content-section figure.embedded-content.grid-display + p {
    padding-top: 15px !important;
}

/* Auf ufkb.de schließt die Bild-Caption (.img-caption) bündig mit der
   Float-Box ab (margin-bottom 0). WPs Standard-<figcaption>
   (.wp-element-caption) bringt 16px margin-bottom mit, die die Float-Box
   verlängern: der Text bricht eine Rasterzeile später auf volle Breite um
   und unter der Caption bleibt mehr Leerraum als auf der Quellseite. */
#content-section figure.embedded-content figcaption {
    margin-bottom: 0;
}

/* Xing/LinkedIn-Icons nebeneinander: WP-Layout-Flow überschreiben */
.wp-block-group.ezrichtext-field figure.icon.align-left {
    display: block !important;
    float: left !important;
    clear: none !important;
    width: auto !important;
    margin: 0 8px 0 0 !important;
}

/* ==========================================================================
   Homepage: Header-Titel ohne Hintergrund
   ========================================================================== */

body.home .h1.header-title.center-block.wp-block-paragraph {
    background: none !important;
}

/* ==========================================================================
   Back-Link-Navbar: main nach unten schieben
   ========================================================================== */

/* body hat padding-top: 72px für den fixen Header. Die back_link_navbar
   (d-block d-lg-none) belegt darunter weitere 48px – main muss entsprechend
   versetzt werden. Suchseite: Navbar dort via CSS versteckt, kein Versatz. */
@media (max-width: 767px) {
    body:not(.search-results):has(#back_link_navbar) main {
        margin-top: 40px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body:not(.search-results):has(#back_link_navbar) main {
        margin-top: 48px !important;
    }
}

/* ==========================================================================
   Typografie
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    text-wrap: auto;
}

strong, b {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 700;
}

h1 strong, h1 b,
h2 strong, h2 b,
h3 strong, h3 b,
h4 strong, h4 b,
h5 strong, h5 b,
h6 strong, h6 b {
    font-weight: inherit;
}

#content-section p {
    font-size: 15.79px !important;
    line-height: 25px !important;
    margin-bottom: 20px !important;
}

@media (min-width: 768px) and (max-width: 1279px) {
    #content-section p {
        font-size: 18.948px !important;
        line-height: 30px !important;
        margin-bottom: 24px !important;
    }
}

@media (min-width: 1280px) {
    #content-section p {
        font-size: 22.106px !important;
        line-height: 35px !important;
        margin-bottom: 28px !important;
    }
}

/* ≥1920px: vierte Stufe des Legacy-Rootsystems (ufkb.de skaliert html auf
   10/12/14/16px; WP fixiert html auf 16px, daher hier gebackene px-Werte).
   Alle 1920er-Werte = 1280er-Bucket × 8/7 (= ×16/14). Ohne diese Stufe ist
   PROD auf Bildschirmen ≥1920px durchgehend 12,5 % kleiner als ufkb.de. */
@media (min-width: 1920px) {
    #content-section p {
        font-size: 25.264px !important;
        line-height: 40px !important;
        margin-bottom: 32px !important;
    }
}

#content-section a {
    line-height: inherit !important;
}

#content-section .wp-block-button a.wp-element-button {
    padding: 2px 12px;
}

@media (min-width: 1280px) {
    #content-section .wp-block-button a.wp-element-button {
        padding: 2.5px 14px;
    }
}

@media (min-width: 1920px) {
    #content-section .wp-block-button a.wp-element-button {
        padding: 3px 16px;
    }
}

/* ==========================================================================
   Überschriften
   ========================================================================== */

#content-section h1 {
    font-size: 37.39px !important;
    line-height: 40px !important;
    margin-bottom: 20px !important;
    padding-top: 15px !important;
}

#content-section h2 {
    font-size: 31.57px !important;
    line-height: 35px !important;
    margin-bottom: 5px !important;
    padding-top: 30px !important;
    letter-spacing: 0.5px;
}

#content-section h3 {
    padding: 20px 0 0 0 !important;
    font-size: 28.05px !important;
    line-height: 30px !important;
    margin-bottom: 5px !important;
}

#content-section h4 {
    font-size: 23.69px !important;
    line-height: 30px !important;
    margin-bottom: 5px !important;
    padding-top: 20px !important;
}

@media (min-width: 768px) and (max-width: 1279px) {
    #content-section h1 {
        font-size: 44.868px !important;
        line-height: 48px !important;
        margin-bottom: 24px !important;
        padding-top: 18px !important;
    }

    #content-section h2 {
        font-size: 37.884px !important;
        line-height: 42px !important;
        margin-bottom: 6px !important;
        padding-top: 36px !important;
    }

    #content-section h3 {
        padding: 24px 0 0 0 !important;
        font-size: 33.66px !important;
        line-height: 30px !important;
        margin-bottom: 6px !important;
    }

    #content-section h4 {
        font-size: 28.428px !important;
        line-height: 36px !important;
        margin-bottom: 6px !important;
        padding-top: 24px !important;
    }
}

@media (min-width: 1280px) {
    #content-section h1 {
        font-size: 52.346px !important;
        line-height: 56px !important;
        margin-bottom: 28px !important;
        padding-top: 21px !important;
    }

    #content-section h2 {
        font-size: 44.198px !important;
        line-height: 49px !important;
        margin-bottom: 7px !important;
        padding-top: 42px !important;
        letter-spacing: 1px;
    }

    #content-section h3 {
        padding: 28px 0 0 0 !important;
        font-size: 39.27px !important;
        line-height: 35px !important;
        margin-bottom: 7px !important;
    }

    #content-section h4 {
        font-size: 33.166px !important;
        line-height: 42px !important;
        margin-bottom: 7px !important;
        padding-top: 28px !important;
    }
}

@media (min-width: 1920px) {
    #content-section h1 {
        font-size: 59.824px !important;
        line-height: 64px !important;
        margin-bottom: 32px !important;
        padding-top: 24px !important;
    }

    #content-section h2 {
        font-size: 50.512px !important;
        line-height: 56px !important;
        margin-bottom: 8px !important;
        padding-top: 48px !important;
    }

    #content-section h3 {
        padding: 32px 0 0 0 !important;
        font-size: 44.88px !important;
        line-height: 40px !important;
        margin-bottom: 8px !important;
    }

    #content-section h4 {
        font-size: 37.904px !important;
        line-height: 48px !important;
        margin-bottom: 8px !important;
        padding-top: 32px !important;
    }
}

a.wp-block-tiptip-hyperlink-group-block {
    margin-bottom: 84px !important;
}

a.wp-block-tiptip-hyperlink-group-block:hover {
    text-decoration: none !important;
}

.wp-container-core-columns-is-layout-d1ddae0e a.wp-block-tiptip-hyperlink-group-block {
    margin-bottom: 28px !important;
}

a.wp-block-tiptip-hyperlink-group-block h1,
a.wp-block-tiptip-hyperlink-group-block h2,
a.wp-block-tiptip-hyperlink-group-block h3,
a.wp-block-tiptip-hyperlink-group-block h4,
a.wp-block-tiptip-hyperlink-group-block h5,
a.wp-block-tiptip-hyperlink-group-block h6 {
    color: #24618f !important;
    padding-top: 0 !important;
}

h1 a, h1 a:visited, h1 a:hover,
h2 a, h2 a:visited, h2 a:hover,
h3 a, h3 a:visited, h3 a:hover,
h4 a, h4 a:visited, h4 a:hover,
h5 a, h5 a:visited, h5 a:hover,
h6 a, h6 a:visited, h6 a:hover {
    color: #24618f !important;
}

/* ==========================================================================
   Listen
   ========================================================================== */

#content-section ul li {
    background-image: none;
}

#content-section li {
    font-size: 15.79px !important;
    line-height: 25px !important;
    margin-bottom: 20px !important;
    padding-left: 15px !important;
}

#content-section li::before {
    width: 7px;
    height: 35px;
}

@media (min-width: 768px) and (max-width: 1279px) {
    #content-section li {
        font-size: 18.948px !important;
        line-height: 30px !important;
        margin-bottom: 12px !important;
        padding-left: 18px !important;
    }

    #content-section ul li::before {
        width: 6px;
        height: 30px;
    }
}

@media (min-width: 1280px) {
    #content-section li {
        font-size: 22.106px !important;
        line-height: 35px !important;
        margin-bottom: 14px !important;
        padding-left: 21px !important;
    }

    #content-section ul li::before {
        width: 7px;
        height: 35px;
    }
}

@media (min-width: 1920px) {
    #content-section li {
        font-size: 25.264px !important;
        line-height: 40px !important;
        margin-bottom: 16px !important;
        padding-left: 24px !important;
    }

    #content-section ul li::before {
        width: 8px;
        height: 40px;
    }
}

#content-section ul.hook li::after {
    content: "✓";
}

/* ==========================================================================
   Globales Overflow-Handling
   ========================================================================== */

/*
 * Firefox RDM-Quirk (Startseite): Das Dropdown-Menü (#navbar-collapse, lg-menu-cols-3)
 * ist auch im slideOut-Zustand 1983px breit. In Firefox Responsive Design Mode übernimmt
 * der Nav diese Content-Breite statt sich auf left:0;right:0 zu verlassen → Nav 3305px.
 * max-width:100vw auf dem Nav und dem Header kappt beide auf Viewport-Breite.
 * overflow-x:hidden auf html (statt body) verhindert den horizontalen Scrollbalken
 * durch width:100vw-Elemente, ohne den Firefox-Quirk auszulösen, bei dem body mit
 * overflow:hidden als Containing Block für position:fixed gilt.
 */
html {
    overflow-x: hidden;
}

#navbar-container {
    max-width: 100vw !important;
}

/* Desktop: Container vollbreit für Items am Viewport-Rand.
 * Logo-Position wie auf ufkb.de: dort setzt das KMU-JS die Navbar-Container-Breite so,
 * dass die linke Kante auf dem zentrierten Bootstrap-3-Grid liegt:
 * margin-left = (clientWidth − min(Grid-Festbreite, 90% clientWidth)) / 2
 * mit Grid-Festbreite 970px (992–1199px) bzw. 1170px (ab 1200px).
 * Hier in calc() gegen 100% (= Containing Block: Container-Content-Box, clientWidth − 30px)
 * statt 100vw, damit eine klassische Scrollbar das Ergebnis nicht verfälscht:
 * clientWidth = 100% + 30px  →  90% clientWidth = 90% + 27px. */
@media (min-width: 992px) {
    body.mobile-breakpoint-always #navbar-container.justified-with-content-mobile > .container {
        max-width: none !important;
        width: 100% !important;
    }

    #navbar-container .navbar-header {
        margin-left: calc((100% + 30px - min(970px, 90% + 27px)) / 2) !important;
    }

    #navbar-container .navbar-collapse {
        justify-content: flex-end;
    }
}

@media (min-width: 1200px) {
    #navbar-container .navbar-header {
        margin-left: calc((100% + 30px - min(1170px, 90% + 27px)) / 2) !important;
    }
}

header.wp-block-template-part {
    max-width: 100vw !important;
}


/* ==========================================================================
   Layout / Content-Breite
   ========================================================================== */

/*
 * Neutralisiert die `has-global-padding`-Regel aus style.css, die das
 * post-content auf 1140px zentriert. Die Innen-Breite wird vom Legacy-
 * `.container` (max-width 90% + margin auto) gesteuert, wie auf der
 * Quellseite (ufkb.de). Höhere Spezifität via `body` schlägt die
 * media-query-Varianten der Originalregel.
 *
 * `:not(.container)`, da `padding-inline: 0 !important` sonst auch das
 * eigene `padding: 0 15px` von `.container` (Zeile 5-9) überschreibt, wenn
 * ein Element beide Klassen trägt (z.B. wp-block-group.container.has-global-padding).
 */
body .has-global-padding:not(.alignfull):not(.container) {
    --wp--style--root--padding-left: 0 !important;
    --wp--style--root--padding-right: 0 !important;
    padding-inline: 0 !important;
}

/*
 * style.css hat eine eigene @media (width < 768px)-Regel, die
 * `.has-global-padding:not(.alignfull)` (ohne `.container`-Ausnahme) per
 * !important auf 5% setzt. Erzwingt für `.container`-Elemente stattdessen
 * durchgehend die 15px aus Zeile 5-9, unabhängig von der Fensterbreite.
 * Höhere Spezifität (3 Klassen statt 2 bei style.css) gewinnt unabhängig
 * vom Breakpoint.
 */
body .has-global-padding.container:not(.alignfull) {
    --wp--style--root--padding-left: 15px !important;
    --wp--style--root--padding-right: 15px !important;
    padding-inline: 15px !important;
}

/*
 * style.css setzt `.alignfull ~ p { padding-top: 15px }` pauschal für jedes
 * p, das irgendwo nach einem .alignfull-Element folgt — auch wenn dazwischen
 * noch eine Überschrift steht, die selbst schon eigenes padding-top mitbringt
 * (siehe #content-section h1-h6 weiter unten). Höhere Spezifität durch die
 * zusätzliche Überschriften-Element-Selektoren gewinnt unabhängig von der
 * Reihenfolge in style.css.
 */
.alignfull ~ h1 ~ p,
.alignfull ~ h2 ~ p,
.alignfull ~ h3 ~ p,
.alignfull ~ h4 ~ p,
.alignfull ~ h5 ~ p,
.alignfull ~ h6 ~ p {
    padding-top: 0;
}

/*
 * ufkb_legacy.css setzt `#page #content-section .intro { padding-top: 2rem }`.
 * Der `#page`-Selektor greift erst wenn JS `body.id = "page"` setzt (DOMContentLoaded),
 * was einen Layout-Shift verursacht. Diese Regel stellt das Padding von Anfang an sicher.
 * ufkb.de rendert 2rem gegen das gestufte Root (10/12/14/16px) → 20/24/28/32px;
 * WP fixiert html auf 16px, daher hier gestufte px-Werte. !important, damit die
 * Legacy-Regel (auf PROD konstant 32px) nach DOMContentLoaded nicht zurücküberschreibt.
 */
#content-section .intro {
    padding-top: 20px !important;
}

@media (min-width: 768px) {
    #content-section .intro {
        padding-top: 24px !important;
    }
}

@media (min-width: 1280px) {
    #content-section .intro {
        padding-top: 28px !important;
    }
}

@media (min-width: 1920px) {
    #content-section .intro {
        padding-top: 32px !important;
    }
}

/*
 * Legacy `<section>`-Wrapper sollen full-width sein; die Innen-`.container`
 * übernimmt die Breite. Hebt Gutenbergs
 * `.is-layout-constrained > * { max-width: 1140px; margin: auto }` für
 * Sections auf (siehe Homepage `section.homepage-intro`).
 */
.entry-content.is-layout-constrained > section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

/*
 * style.css setzt `.entry-content > section > * { width: 90% }`, was die
 * Legacy-`.container`-Breite (1170 / max-width 90%) zerstört. Override:
 * `.container` direkt unter `<section>` soll wieder wie auf der Quellseite
 * agieren.
 */
.entry-content > section > .container {
    max-width: 90%;
    width: 1170px;
}

.entry-content.wp-block-post-content {
    --wp--style--root--padding-right: var(--wp--preset--spacing--50);
    --wp--style--root--padding-left: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   Banner
   ========================================================================== */

#content-section .banner h1,
#content-section .banner .h1.header-title {
    padding: 42px !important;
    margin: 0 !important;
    font-weight: 400;
    text-shadow: 2px 2px #434343;
    line-height: 4.5rem !important;
    font-size: 4.209rem !important;
}

body:not(.home) #content-section .banner h1,
body:not(.home) #content-section .banner .h1.header-title {
    background-color: rgba(36, 97, 143, 0.75) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 36px;
    border-radius: 6px;
    width: 80%;
}

@media (max-width: 1199px) {
    #content-section .banner h1,
    #content-section .banner .h1.header-title {
        font-size: 3.739rem !important;
        padding: 1rem 0 !important;
        margin: 0 10% !important;
    }
}

@media (min-width: 992px) {
    body:not(.home) #content-section .banner h1,
    body:not(.home) #content-section .banner .h1.header-title {
        width: 80%;
    }
}

@media (min-width: 1200px) {
    body:not(.home) #content-section .banner h1,
    body:not(.home) #content-section .banner .h1.header-title {
        padding: 12px 0;
    }
}

.banner .wp-block-buttons,
div.alignfull .wp-block-buttons {
    margin-top: 24px;
    height: 42px;
    line-height: 3rem !important;
    padding: .25rem 1rem;
}

@media (min-width: 1280px) {
    .banner .wp-block-buttons {
        margin-top: 28px;
        height: 49px;
    }
}

@media (min-width: 1920px) {
    .banner .wp-block-buttons {
        margin-top: 32px;
        height: 56px;
    }
}

section.alignfull,
.banner.alignfull {
    margin-bottom: 0;
}

.wp-block-cover, .wp-block-cover-image {
    padding: 0;
}

/* Banner-Höhe wie auf ufkb.de: < 992px fluid im 16:9-Verhältnis zur Breite,
   ab 992px fix je Breakpoint (übernimmt die Werte aus dem Legacy-System).
   Überschreibt den Inline-Style min-height:…px;aspect-ratio:unset; aus dem
   Cover-Block im Editor. */
.wp-block-cover.alignfull {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
}

@media (min-width: 992px) and (max-width: 1279px) {
    .wp-block-cover.alignfull {
        aspect-ratio: auto !important;
        min-height: 504px !important;
    }
}

@media (min-width: 1280px) and (max-width: 1919px) {
    .wp-block-cover.alignfull {
        aspect-ratio: auto !important;
        min-height: 588px !important;
    }
}

@media (min-width: 1920px) {
    .wp-block-cover.alignfull {
        aspect-ratio: auto !important;
        min-height: 672px !important;
    }
}

/* ==========================================================================
   Formulare
   ========================================================================== */

#content-section label {
    line-height: 28px;
    margin-bottom: 7px;
}

@media (min-width: 768px) and (max-width: 1279px) {
    #content-section label {
        line-height: 24px;
        margin-bottom: 6px;
    }
}

@media (min-width: 1280px) {
    #content-section label {
        line-height: 20px;
        margin-bottom: 5px;
    }
}

.wpcf7-list-item {
    margin: 0;
}

#content-section .form-group, #content-section .form-group p {
    margin: 0 !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Contact Form 7 – Submit-Button */
#content-section .wpcf7-form div.row:has(> p > input.wpcf7-submit) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#content-section .wpcf7-form p:has(input.wpcf7-submit) {
    position: relative;
    text-align: center;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

#content-section .wpcf7-form p:has(input.wpcf7-submit) .wpcf7-spinner {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#content-section input.wpcf7-form-control.wpcf7-submit {
    display: inline-block;
    width: auto !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background-color 0.2s;
}

#content-section input.wpcf7-form-control.wpcf7-submit:not(:disabled) {
    background-color: #24618f !important;
}

#content-section input.wpcf7-form-control.wpcf7-submit:not(:disabled):hover {
    background-color: #1d4f75 !important;
}

#content-section input.wpcf7-submit {
    line-height: 30px !important;
    margin: 0 0 20px 0;
    padding: 2.5px 10px;
    height: 35px;
    float: right;
}

@media (min-width: 768px) and (max-width: 1279px) {
    #content-section input.wpcf7-submit {
        line-height: 36px !important;
        margin: 0 0 24px 0;
        padding: 3px 12px;
        height: 42px;
    }
}

@media (min-width: 1280px) {
    #content-section input.wpcf7-submit {
        line-height: 42px !important;
        margin: 0 0 28px 0;
        padding: 3.5px 14px;
        height: 49px;
    }
}

@media (min-width: 1920px) {
    #content-section input.wpcf7-submit {
        line-height: 48px !important;
        margin: 0 0 32px 0;
        padding: 4px 16px;
        height: 56px;
    }
}

/* ==========================================================================
   Bilder
   ========================================================================== */

.wp-block-image.full,
figure.full {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    height: auto !important;
}

figcaption {
    font-size: max(1rem, 12px) !important;
}

figure.full img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: unset !important;
}

figure.img-responsive img {
	display: block;
	height: auto;
	max-width: 100%;
    width: 100%;
}

.full-content figure.has-caption img {
	margin-bottom: 0;
}

figure.lazy-loading.lazy-loaded img {
	background-color: transparent;
}

figure.img-rounded-top img {
	border-radius: .5rem .5rem 0 0;
}

figure.img-rounded img {
	border-radius: .5rem;
}

figure.high-resolution img {
	display: none !important;
}

figure.standard-resolution img {
	display: inline-block !important;
}

@media only screen and (-o-min-device-pixel-ratio: 1.25/1),
       only screen and (-webkit-min-device-pixel-ratio: 1.25),
       only screen and (min--moz-device-pixel-ratio: 1.25),
       only screen and (min-device-pixel-ratio: 1.25),
       only screen and (min-resolution: 1.25dppx),
       only screen and (min-resolution: 200dpi) {
	figure.high-resolution img {
		display: inline-block !important;
	}

	figure.standard-resolution img {
		display: none !important;
	}
}

/* ==========================================================================
   Collapsible Block Wrapper (Details/Summary Accordion)
   ========================================================================== */

.collapsible-block-wrapper {
    margin: 1rem 0;
}

.collapsible-block-wrapper .wp-block-details {
    margin-bottom: 4px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.collapsible-block-wrapper .wp-block-details > summary {
    background: #f8f9fa;
    color: #24618f;
    padding: 10px 45px 10px 15px;
    cursor: pointer;
    list-style: none;
    position: relative;
    line-height: 25px;
    font-size: 15.79px;
    font-weight: 400;
    display: block;
    margin: 0 0 10px 0;
    text-decoration: none;
}

@media (min-width: 768px) and (max-width: 1279px) {
    .collapsible-block-wrapper .wp-block-details > summary {
        padding: 18px 60px 18px 24px;
        font-size: 18.948px;
        line-height: 30px;
        margin: 0 0 12px 0;
    }
}

@media (min-width: 1280px) {
    .collapsible-block-wrapper .wp-block-details > summary {
        padding: 21px 70px 21px 28px;
        font-size: 22.106px;
        line-height: 35px;
        margin: 0 0 14px 0;
    }
}

@media (min-width: 1920px) {
    .collapsible-block-wrapper .wp-block-details > summary {
        padding: 24px 80px 24px 32px;
        font-size: 25.264px;
        line-height: 40px;
        margin: 0 0 16px 0;
    }
}

.collapsible-block-wrapper .wp-block-details > summary:hover,
.collapsible-block-wrapper .wp-block-details[open] > summary {
    background-color: #e9ecef;
}

/* Standard-Dreieck des Browsers verstecken */
.collapsible-block-wrapper .wp-block-details > summary::-webkit-details-marker,
.collapsible-block-wrapper .wp-block-details > summary::marker {
    display: none;
    content: '';
}

/* Chevron-Pfeil rechts */
.collapsible-block-wrapper .wp-block-details > summary::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 21px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #1a5276;
    border-bottom: 2px solid #1a5276;
    border-top: none;
    border-left: none;
    background: none;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s ease;
}

@media (min-width: 768px) and (max-width: 1279px) {
    .collapsible-block-wrapper .wp-block-details > summary::after {
        right: 27px;
        top: 34px;
        width: 12px;
        height: 12px;
        border-right: 2px solid #1a5276;
        border-bottom: 2px solid #1a5276;
    }
}

@media (min-width: 1280px) {
    .collapsible-block-wrapper .wp-block-details > summary::after {
        right: 32px;
        top: 40px;
        width: 15px;
        height: 15px;
        border-right: 3px solid #1a5276;
        border-bottom: 3px solid #1a5276;
    }
}

@media (min-width: 1920px) {
    .collapsible-block-wrapper .wp-block-details > summary::after {
        right: 37px;
        top: 46px;
        width: 17px;
        height: 17px;
        border-right: 3px solid #1a5276;
        border-bottom: 3px solid #1a5276;
    }
}

.collapsible-block-wrapper .wp-block-details[open] > summary::after {
    transform: translateY(-25%) rotate(225deg) !important;
}

/* Inhalt unterhalb der Summary */
.collapsible-block-wrapper .wp-block-details > .wp-block-group {
    padding: 12px !important;
    background-color: #fff !important;
    margin: 0 !important;
}

/* ==========================================================================
   Sidebar / emergencyCB
   ========================================================================== */

#emergencyCB_Wrapper {
    transition: top 0.2s linear;
}

/* Desktop: emergencyCB sichtbar, Control versteckt */
@media (min-width: 992px) {
    #emergencyCB         { display: block !important; }
    #emergencyCB_Control { display: none  !important; }
}

/* Mobile: emergencyCB ausgeblendet, Control eingeblendet */
@media (max-width: 991px) {
    #emergencyCB         { display: none  !important; }
    #emergencyCB_Control { display: block !important; }
}

#emergencyCBContent .embedded-image img {
    width: auto;
}

/*
 * Die Legacy-CSS stellt Padding, Border-Radius und Display erst über
 * `#page .custom-style-button.contains-link > a` bereit, also erst nach
 * DOMContentLoaded. Dieser Selektor stellt die Button-Darstellung von
 * Anfang an sicher.
 */
#emergencyCB_Wrapper.fixedPosition #emergencyCB .custom-style-button.contains-link > a {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 0.5rem;
    font-size: 21.328px !important;
    line-height: 32px !important;
    background-color: #24618f;
    border-color: #1f537b;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

#emergencyCB_Wrapper.fixedPosition #emergencyCB .custom-style-button.contains-link > a:hover {
    text-decoration: none;
    background: #1a4566;
}

/* ==========================================================================
   Startseite – Teaser-Bereich (Altersvorsorge, BU etc.)
   ========================================================================== */

/*
 * ufkb_legacy.css setzt overflow:hidden auf #content-section, was verhindert,
 * dass Elemente per negativem Margin über die .entry-content-Padding hinaus
 * reichen. Override auf visible, Float-Containment übernimmt .entry-content
 * (display:flow-root via style.css).
 */
#content-section {
    overflow: visible;
}

/*
 * ufkb_legacy.css malt einen vollflächigen grauen Streifen hinter dem ersten
 * `.line-content` nach `section.homepage-intro` via `::before`. Das matcht nur
 * den ersten Block (adjacent-sibling) und feuert im Editor unbeabsichtigt.
 * Stattdessen verwenden wir Gutenbergs nativen Hintergrund-Toggle: in der
 * Block-Sidebar eine Farbe wählen → der Block bekommt `has-background`, und
 * die Regel unten lässt die Farbe per ::before bis zum Viewport-Rand laufen.
 */
section.homepage-intro + .line-content:not(.has-background)::before {
	content: none;
}

.line-content.has-background {
    position: relative;
}

/*
 * Doppelte Selektor-Variante: die zweite Form gleicht die Spezifität (0,3,2)
 * der Legacy-Regel `section.homepage-intro + .line-content::before` aus
 * ufkb_legacy.css aus, die sonst die left/right-Werte übersteuern würde.
 */
.line-content.has-background::before,
section.homepage-intro + .line-content.has-background::before {
    background-color: inherit;
    bottom: 0;
    content: "";
    display: block;
    left: calc(50% - 50vw);
    position: absolute;
    right: calc(50% - 50vw);
    top: 0;
}

/*
 * Innerhalb einer Has-Background-Sektion soll das `::before` exakt am Inhalt
 * abschließen. Die Karten haben generell `margin-bottom: 84px` (s.o.), was
 * den grauen Hintergrund unter der letzten Reihe weiterlaufen lässt – die
 * Lücke wirkt dann wie ein „grauer Spacer“. Wir nullen den Margin nur in der
 * letzten Spalten-Reihe innerhalb eines bemalten Containers.
 */
.line-content.has-background .wp-block-columns:last-child a.wp-block-tiptip-hyperlink-group-block {
    margin-bottom: 0 !important;
}

/* Grauer Hintergrund, der sich bis zum Seitenrand erstreckt */
/*
 * is-layout-constrained setzt margin-left/right: auto !important auf Kinder –
 * deshalb müssen hier !important gesetzt werden. Außerdem überschreibt
 * max-width: var(--wp--style--global--content-size) die Breite, daher
 * max-width: 100vw !important.
 */
.wp-container-core-columns-is-layout-d1ddae0e {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
}

/* Lücke zwischen den zwei Zeilen schließen */
.wp-container-core-columns-is-layout-d1ddae0e + .wp-container-core-columns-is-layout-d1ddae0e {
    margin-block-start: 0 !important;
    padding-top: 0;
}

/*
 * ufkb_legacy.css setzt h3 in #content-section auf 2.805rem !important –
 * für die schmalen Teaser-Spalten brauchen wir eine kleinere Größe.
 */
#content-section .wp-container-core-columns-is-layout-d1ddae0e .header-text-one {
    color: #24618f;
    font-size: 2.104rem !important;
    line-height: 1.3 !important;
    padding-top: 7px !important;
    margin-bottom: 0.5rem !important;
}

@media (max-width: 479px) {
    #content-section .wp-container-core-columns-is-layout-d1ddae0e .header-text-one {
        font-size: 2.805rem !important;
    }
}

/* Fließtext unter den Teaser-Überschriften */
#content-section .wp-container-core-columns-is-layout-d1ddae0e p {
    font-size: 1.579rem !important;
    line-height: 28px !important;
    color: #212529 !important;
}

@media (min-width: 1200px) {
    #content-section .wp-container-core-columns-is-layout-d1ddae0e p {
        font-size: 1.333rem !important;
    }
}

#content-section .wp-container-core-columns-is-layout-d1ddae0e .wp-block-tiptip-hyperlink-group-block:hover p {
    color: #212529 !important;
    line-height: 28px !important;
}

/* Teaserbilder gleich hoch */
.wp-container-core-columns-is-layout-d1ddae0e .wp-block-image {
    overflow: hidden;
    border-radius: 0.5rem;
    aspect-ratio: 2 / 1;
    width: 100%;
}

.wp-container-core-columns-is-layout-d1ddae0e .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform 2s ease;
}

/* Zoom-In beim Hovern */
.wp-container-core-columns-is-layout-d1ddae0e .wp-block-tiptip-hyperlink-group-block:hover {
    text-decoration: none !important;
}

.wp-container-core-columns-is-layout-d1ddae0e .wp-block-tiptip-hyperlink-group-block:hover .wp-block-image img {
    transform: scale(1.25);
}


/* ==========================================================================
   Header – Back-Link Navbar (nur Mobile, d-lg-none)
   ========================================================================== */

.back-button-navbar {
    position: fixed !important;
    top: 6rem;
    left: 0;
    right: 0;
    height: 4rem;
    line-height: 4rem;
    background: #24618f;
    color: #fff;
    text-align: center;
    z-index: 1020;
    box-sizing: border-box;
    border-bottom: 1px solid #1a4566;
    transition: top 0.2s linear, opacity 0.3s linear;
    opacity: 1;
}

body.scrolled .back-button-navbar {
    top: 4rem;
}

body.loaded .back-button-navbar.scroll-hidden {
    opacity: 0;
    pointer-events: none;
}

.back-button-navbar .grid-btn {
    color: #fff !important;
    text-decoration: none !important;
}

.back-button-navbar .grid-btn:hover {
    background: #24618f;
}

.back-button-navbar .fa {
    margin-right: 8px;
}

/* ==========================================================================
   Startseite – CF7-Formular Checkboxen
   ========================================================================== */

#content-section .form-group.checkbox-group input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none !important;
    background-color: #e9ecef !important;
    border: 1px solid #6c757d !important;
    border-radius: 3px !important;
    cursor: pointer;
}

#content-section .form-group.checkbox-group input[type="checkbox"]:checked {
    background-color: #e9ecef !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1.25rem !important;
}

/* ==========================================================================
   Blog – Verwandte Beiträge
   ========================================================================== */

.ufkb-related-posts {
    padding-top: 10px;
    padding-bottom: 20px;
}

.ufkb-related-posts__sep {
    margin-bottom: 30px;
}

#content-section .ufkb-related-posts__heading {
    padding-top: 10px !important;
    margin-bottom: 48px !important;
}

@media (min-width: 768px) and (max-width: 1279px) {
}

@media (min-width: 1280px) {
}

.ufkb-related-posts__item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.ufkb-related-posts__thumb {
    flex: 0 0 240px;
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

.ufkb-related-posts__img {
    width: 240px;
    height: 210px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    transition: transform .2s linear;
}

.ufkb-related-posts__thumb:hover .ufkb-related-posts__img {
    transform: scale(1.25);
    transition: transform 2s linear;
}

.ufkb-related-posts__body {
    flex: 1;
    margin-top: 0;
}

#content-section h3.ufkb-related-posts__title {
    padding-top: 0 !important;
    font-size: 28.05px !important;
    line-height: 36px !important;
}

.ufkb-related-posts__excerpt {
    margin-bottom: 0 !important;
    color: #212529;
}

@media (max-width: 600px) {
    .ufkb-related-posts__item {
        flex-direction: column;
    }

    .ufkb-related-posts__thumb {
        flex: none;
        width: 100%;
    }

    .ufkb-related-posts__img {
        width: 100%;
    }
}

@media (min-width: 601px) and (max-width: 767px) {
    .ufkb-related-posts__img {
        height: 130px;
    }
    
    #content-section h3.ufkb-related-posts__title {
        font-size: 33.66px !important;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .ufkb-related-posts__item {
        margin-bottom: 24px;
    }

    .ufkb-related-posts__thumb {
        flex: 0 0 220px;
    }

    .ufkb-related-posts__img {
        width: 220px;
        height: 120px;
    }

    #content-section h3.ufkb-related-posts__title {
        font-size: 33.66px !important;
    }
}

@media (min-width: 1280px) {
    .ufkb-related-posts__item {
        margin-bottom: 56px;
    }

    .ufkb-related-posts__thumb {
        flex: 0 0 360px;
    }

    .ufkb-related-posts__img {
        width: 360px;
        height: 204px;
    }

    #content-section h3.ufkb-related-posts__title {
        font-size: 39.27px !important;
        line-height: 42px !important;
    }
}

@media (min-width: 1920px) {
    .ufkb-related-posts__item {
        margin-bottom: 64px;
    }

    #content-section h3.ufkb-related-posts__title {
        font-size: 44.88px !important;
        line-height: 48px !important;
    }
}

.ufkb-related-posts__item:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Zoom-Hover-Effekt (ufkb_legacy.css: .zoom-img-trigger / .zoom-img)
   ========================================================================== */

/* Legacy-Effekt greift nur auf Kinder mit Klasse "bg-img"; im Block-Editor
   gesetzte Bilder bekommen diese Klasse nie – deshalb hier zusätzlich
   direkt auf das <img> im .zoom-img-Wrapper anwenden. */
.zoom-img-trigger .zoom-img img {
    transition: transform .2s linear;
}

.zoom-img-trigger:hover .zoom-img img {
    transform: scale(1.25);
    transition: transform 2s linear;
}

/* ==========================================================================
   Hervorhebungs-Box (.background/.background-dark + .ez-classes-added)
   ========================================================================== */

/* ufkb_legacy.css zieht das :after mit left:-2000px;right:-2000px auf (>4000px
   breite Malfläche), um den Hintergrund über die volle Fensterbreite zu
   ziehen. Das führt auf langen Seiten (z.B. Standorte) beim ersten Scroll zu
   einem Compositing-Ruckler, der die fixierte Nav kurz verrutschen lässt.
   Ersatz durch den 100vw/translateX(-50%)-Trick: optisch identisch, aber ohne
   überdimensionierte Malfläche. */
.background.ez-classes-added:after,
.background-dark.ez-classes-added:after {
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    transform: translateX(-50%);
}

/* ==========================================================================
   Teaser-Kacheln: einzelne Spalte in letzter Zeile nicht auf volle Breite
   strecken lassen (Gutenberg-Columns-Flex zieht ein einzelnes Kind sonst
   automatisch auf 100%)
   ========================================================================== */

@media (min-width: 782px) {
    .wp-block-columns:has(> .wp-block-column:only-child) > .wp-block-column {
        flex-grow: 0;
        flex-basis: calc((100% - 2 * 24px) / 3);
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer .meadow-logo-bottom {
    display: inline-block !important;
    contain-intrinsic-size: auto 200px auto 199px !important;
}

/* ==========================================================================
   OpenStreetMap (Leaflet) mount
   ========================================================================== */

/* The imported map container has no children at render time — Leaflet fills it
   on load. Leaflet needs a non-zero container height or the map stays blank, so
   give it a concrete size here (the source theme supplied this via inline style
   + ancestor CSS that the import does not carry over). */
.maplocation-map {
	height: 100%;
	width: 100%;
}

/* The address popup renders inside #content-section, so the section's large
   heading/paragraph typography (declared !important) leaks in and scales the
   popup up. Restore the source theme's compact popup sizing. */
#content-section .leaflet-popup-content h5 {
	font-size: 16.576px !important;
	line-height: 21px !important;
	margin-bottom: 7px !important;
	padding-top: 7px !important;
	font-weight: 500 !important;
}

#content-section .leaflet-popup-content p {
	font-size: 16.576px !important;
	line-height: 21px !important;
	margin-bottom: 7px !important;
}

#content-section .leaflet-popup-content span,
#content-section .leaflet-popup-content strong {
	font-size: 14px !important;
	line-height: 17.5px !important;
}

/* ==========================================================================
   Consent opt-in embeds (YouTube etc.)
   ========================================================================== */

/* On the source the opt-in notice is hidden by default and faded in on hover (theme
   JS toggles an .active class; the fade is JS-driven). That JS is not imported, and
   `display` cannot transition, so reproduce a hover fade with opacity + visibility:
   keep the notice laid out (overriding .hidden's display:none) but invisible until the
   .deactivated embed is hovered. The activation script removes .deactivated after
   consent, which retires this and shows the iframe. */
#content-section .optin-elem.deactivated .infobox.optin {
	display: flex !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

#content-section .optin-elem.deactivated:hover .infobox.optin {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease;
}

/* The source theme fades #content-section embeds in via JS that sets opacity:1 on
   .fadein on load/scroll. That JS is not imported, so .fadein blocks stay at
   opacity:0 forever — hiding both the consent placeholder and the iframe inside
   them. Force them visible (the fade-in is cosmetic). */
#content-section .fadein {
	opacity: 1 !important;
}

/* ==========================================================================
   Consent opt-in embeds (YouTube etc.)
   ========================================================================== */

#content-section .altcha input[type="checkbox"]:last-of-type,
#content-section label.altcha-label {
    margin: 0 !important;
}