@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-bold-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-bold-webfont.woff') format('woff'),
         url('../fonts/ubuntu-bold-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-bolditalic-webfont.woff') format('woff'),
         url('../fonts/ubuntu-bolditalic-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-italic-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-italic-webfont.woff') format('woff'),
         url('../fonts/ubuntu-italic-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-light-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-light-webfont.woff') format('woff'),
         url('../fonts/ubuntu-light-webfont.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-lightitalic-webfont.woff') format('woff'),
         url('../fonts/ubuntu-lightitalic-webfont.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-medium-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-medium-webfont.woff') format('woff'),
         url('../fonts/ubuntu-medium-webfont.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-mediumitalic-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-mediumitalic-webfont.woff') format('woff'),
         url('../fonts/ubuntu-mediumitalic-webfont.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/ubuntu-regular-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-regular-webfont.woff') format('woff'),
         url('../fonts/ubuntu-regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;

}

/**
* @license
*
* Font Family: Sentient
* Designed by: Noopur Choksi
* URL: https://www.fontshare.com/fonts/sentient
* © 2026 Indian Type Foundry
*
* Sentient Extralight 
* Sentient ExtralightItalic 
* Sentient Light 
* Sentient LightItalic 
* Sentient Regular 
* Sentient Italic 
* Sentient Medium 
* Sentient MediumItalic 
* Sentient Bold 
* Sentient BoldItalic 
* Sentient Variable (Variable font)
* Sentient VariableItalic (Variable font)

*
*/
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-Extralight.woff2') format('woff2'),
       url('../fonts/Sentient-Extralight.woff') format('woff'),
       url('../fonts/Sentient-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-ExtralightItalic.woff2') format('woff2'),
       url('../fonts/Sentient-ExtralightItalic.woff') format('woff'),
       url('../fonts/Sentient-ExtralightItalic.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-Light.woff2') format('woff2'),
       url('../fonts/Sentient-Light.woff') format('woff'),
       url('../fonts/Sentient-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-LightItalic.woff2') format('woff2'),
       url('../fonts/Sentient-LightItalic.woff') format('woff'),
       url('../fonts/Sentient-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-Regular.woff2') format('woff2'),
       url('../fonts/Sentient-Regular.woff') format('woff'),
       url('../fonts/Sentient-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-Italic.woff2') format('woff2'),
       url('../fonts/Sentient-Italic.woff') format('woff'),
       url('../fonts/Sentient-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-Medium.woff2') format('woff2'),
       url('../fonts/Sentient-Medium.woff') format('woff'),
       url('../fonts/Sentient-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-MediumItalic.woff2') format('woff2'),
       url('../fonts/Sentient-MediumItalic.woff') format('woff'),
       url('../fonts/Sentient-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-Bold.woff2') format('woff2'),
       url('../fonts/Sentient-Bold.woff') format('woff'),
       url('../fonts/Sentient-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient';
  src: url('../fonts/Sentient-BoldItalic.woff2') format('woff2'),
       url('../fonts/Sentient-BoldItalic.woff') format('woff'),
       url('../fonts/Sentient-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

/* ==========================================================================
   Lokale Webfonts: PT Serif
   ========================================================================== */

/* Regular (400 normal) */
@font-face {
    font-family: 'PT Serif';
    src: url('../fonts/ptserif-regular-webfont.woff2') format('woff2'),
         url('../fonts/ptserif-regular-webfont.woff') format('woff'),
         url('../fonts/ptserif-regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Italic (400 italic) */
@font-face {
    font-family: 'PT Serif';
    src: url('../fonts/ptserif-italic-webfont.woff2') format('woff2'),
         url('../fonts/ptserif-italic-webfont.woff') format('woff'),
         url('../fonts/ptserif-italic-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Bold (700 normal) */
@font-face {
    font-family: 'PT Serif';
    src: url('../fonts/ptserif-bold-webfont.woff2') format('woff2'),
         url('../fonts/ptserif-bold-webfont.woff') format('woff'),
         url('../fonts/ptserif-bold-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Bold Italic (700 italic) */
@font-face {
    font-family: 'PT Serif';
    src: url('../fonts/ptserif-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/ptserif-bolditalic-webfont.woff') format('woff'),
         url('../fonts/ptserif-bolditalic-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* ==========================================================================
   Base CSS & Layout for Bürgerwindpark Template
   ========================================================================== */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
em, img, strong, sub, sup, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, details, figure, figcaption, footer,
header, hgroup, menu, nav, section, summary, time, mark, audio, video,
input, textarea {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1.5;
    background: #ffffff;
    color: #092657;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

p {
    margin-bottom: 20px;
}

a {
    text-decoration: none;
    color: #092657;
}

a:hover {
    text-decoration: underline;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Bootstrap 4 Grid System
   ========================================================================== */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media(min-width: 576px) { .container-sm, .container { max-width: 540px; } }
@media(min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } }
@media(min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } }
@media(min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1170px; } }
@media(min-width: 1400px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1370px; } }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-12, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-12, .col-xl-4, .col-xl-5, .col-xl-6, .col-lg-4 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-12 { flex: 0 0 100%; max-width: 100%; }

@media(min-width: 768px) {
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
    .d-md-none { display: none !important; }
    .d-md-flex { display: flex !important; }
    .d-md-block { display: block !important; }
}

@media(min-width: 992px) {
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
}

@media(min-width: 1200px) {
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .d-xl-none { display: none !important; }
    .d-xl-flex { display: flex !important; }
}

.d-none { display: none !important; }
.d-flex { display: flex !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }

/* Spacing Helpers */
.frame-space-after-medium { padding-bottom: 60px; }
@media(max-width: 767.98px) { .frame-space-after-medium { padding-bottom: 400px; } }
@media(min-width: 768px) { .frame-space-after-medium { padding-bottom: 0px; margin-bottom: -150px;} }
@media(min-width: 992px) { .frame-space-after-medium { padding-bottom: 0px; margin-bottom: 70px;} }
.frame-space-after-extra-large { padding-bottom: 0px; }
@media(min-width: 768px) { .frame-space-after-extra-large { padding-bottom: 150px; } }
@media(min-width: 992px) { .frame-space-after-extra-large { padding-bottom: 0px; } }
@media(min-width: 1200px) { .frame-space-after-extra-large { padding-bottom: 0px; } }
@media(min-width: 1400px) { .frame-space-after-extra-large { padding-bottom: 250px; } }

.frame-space-before-medium { padding-top: 60px; }

/* ==========================================================================
   Header & Navigation (Urzustand mit 2px Puffer)
   ========================================================================== */

.pageHeader {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
/*   background: #ffffff;*/
    z-index: 100;
}

.main-brand-logo {
    display: inline-block;
    flex-shrink: 0;
}

.main-brand-logo .logo {
    height: 60px;
    width: auto;
    display: block;
}

@media (min-width: 1200px) {
    .main-brand-logo .logo {
        height: 78px;
    }
}

#navWrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Standard-Styling der Menü-Pills Hauptebene */
.dj-megamenu li.dj-up > a.dj-up_a {
    border-radius: 50px;
    border: 1px solid #ffda00;
    background-color: #ffffff;
    color: #092657;
    padding: 8px 22px;
    margin: 0 4px;
    font-weight: 400;
    transition: all 0.2s ease;
    margin-right:10px;
}

.dj-megamenu li.dj-up > a.dj-up_a:hover,
.dj-megamenu li.dj-up.active > a.dj-up_a,
.dj-megamenu-clean li ul.dj-submenu > li > a:hover {
    background-color: #092657 !important;
    color: #fff !important;
    border: 1px solid #092657 !important;
    transition: all 0.2s ease;
}

/* Gestaltung Submenuebene */

.dj-megamenu-clean li ul.dj-submenu > li > a {
    font-size: inherit !important;
    line-height: 24px !important;
    text-decoration: none;
    border-radius: 50px;
    border: 1px solid #ffda00;
    background-color: #ffffff;
    color: #092657 !important;
    padding: 4px 22px 8px 22px !important;
    margin: 5px 4px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    position: relative;
}

#dj-megamenu110sticky {
  height: 70px !important;
  background-color: rgba(255, 255, 255, 0.5) !important; /* 50% weißer Hintergrund */
  backdrop-filter: blur(5px); /* optional: moderner Milchglas-Effekt für bessere Lesbarkeit */
  -webkit-backdrop-filter: blur(5px);
}

/* Logo im Sticky-Container fest vertikal mittig verankern */
#dj-megamenu110sticky #dj-megamenu110stickylogo {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Nur wenn der Sticky-Balken sichtbar aktiv ist, die nachfolgende UL um 15px absenken */
.dj-megamenu-wrapper:has(#dj-megamenu110sticky:not([style*="display: none"])) > ul#dj-megamenu110 {
    margin-top: 15px !important;
}

.dj-megamenu-clean.dj-megamenu-sticky {
 /* top: 15px; */
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid #ffda00;
}

.dj-megamenu-clean li div.dj-subwrap .dj-subwrap-in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: transparent !important;
}

/* Höhe und exakte vertikale Zentrierung für Clean-Theme Links */
.dj-megamenu-clean li.dj-up > a.dj-up_a {
    height: 40px !important;
    line-height: 30px !important; /* 40px minus 2px Border = exakte Mitte */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
}

/* Internen Versatz von DJ-MegaMenu eliminieren */
.dj-megamenu-clean li.dj-up > a.dj-up_a span,
.dj-megamenu-clean li.dj-up > a.dj-up_a .dj-up_sub,
.dj-megamenu-clean li.dj-up > a.dj-up_a .dj-up_txt {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    display: inline !important;
}

/* Native DJ-MegaMenu Sticky-Klasse 
.dj-sticked {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    padding: 10px 0 !important;
}*/

/* Arrow mittig verschieben */

.dj-megamenu-clean .arrow {
  top: 41% !important;
}

/* ==========================================================================
   DJ-MegaMenu Clean: Sticky-Logo exakt an Container-Fluchtlinie ausrichten
   ========================================================================== */

/* Standard (Mobil bis kleiner Desktop): normaler Abstand */
.dj-megamenu-clean .dj-stickylogo.dj-align-left {
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    max-height: 39px !important;
    height: 39px !important;
    width: auto !important;
}

/* Ab Bootstrap MD (≥ 768px): Container-Breite 720px */
@media (min-width: 768px) {
    .dj-megamenu-clean .dj-stickylogo.dj-align-left {
        left: calc((100vw - 720px) / 2 + 15px) !important;
    }
}

/* Ab Bootstrap LG (≥ 992px): Container-Breite 960px */
@media (min-width: 992px) {
    .dj-megamenu-clean .dj-stickylogo.dj-align-left {
        left: calc((100vw - 960px) / 2 + 15px) !important;
    }
}

/* Ab Bootstrap XL (≥ 1200px): Container-Breite 1140px */
@media (min-width: 1200px) {
    .dj-megamenu-clean .dj-stickylogo.dj-align-left {
        left: calc((100vw - 1140px) / 2 + 15px) !important;
    }
}

/* Ab Bootstrap XXL (≥ 1400px): Container-Breite 1320px */
@media (min-width: 1400px) {
    .dj-megamenu-clean .dj-stickylogo.dj-align-left {
        left: calc((100vw - 1320px) / 2 + 15px) !important;
    }
}

/* ==========================================================================
   Intro Section, Sonne & Intro-Image
   ========================================================================== */

/* 1. Hauptsektion: Verhindert horizontalen Scrollbalken */
.mainSection {
    position: relative;
    overflow-x: clip !important;
}

@media(min-width: 1200px) {
    .mainSection {
        margin-top: 40px; /* Reduziert von 150px, da Header nicht mehr fixed im Weg steht */
    }
}

.mask_pageIntro,
.mask_subpageIntro {
    line-height: 1.6;
    position: relative;
}

.container-narrow {
    max-width: 936px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-top: 30px; /* Mobil: Abstand nach unten zum Header schaffen */
}

@media(min-width: 768px) {
    .mask_pageIntro .container-narrow, 
    .mask_subpageIntro .container-narrow {
        margin-bottom: 70px;
        padding-top: 250px; /* Schafft Platz für das 200px Bild rechts */
    }
}

@media(min-width: 992px) {
    .mask_pageIntro .container-narrow, 
    .mask_subpageIntro .container-narrow {
        padding-top: 300px; /* Schafft Platz für das 300px Bild rechts */
    }
}

@media(min-width: 1200px) {
    .mask_pageIntro .container-narrow, 
    .mask_subpageIntro .container-narrow {
        padding-top: 340px; /* Perfekte Ausgangshöhe auf Desktop */
    }
}

/* 2. Globale Sonne: Breakpoints */
.sun {
    border-radius: 100%;
    position: absolute;
    pointer-events: none;
    z-index: -1;
    width: 595px;
    height: 595px;
    top: -100px;
    left: 45%;
}

@media(min-width: 768px) {
    .sun {
        width: 900px;
        height: 900px;
        left: 70%;
        top: -150px;
    }
}

@media(min-width: 992px) {
    .sun {
        width: 950px;
        height: 950px;
        left: 60%;
        top: -150px;
    }
}

@media(min-width: 1200px) {
    .sun {
        width: 1000px;
        height: 1000px;
        left: 65%;
        top: -200px;
    }
}

/* Farbsteuerung über PHP-Klassen */
.sun.sun-home {
    background-color: #ffda00 !important;
}

.sun.sun-subpage {
    background-color: #f2f4f7 !important;
}

/* ==========================================================================
   3. Runder Intro-Bild Container & Welle (exakt nach Original-Breakpoints)
   ========================================================================== */

.intro-img-wrap {
    width: 300px;
    height: 300px;
    margin: 0 auto 20px auto;
    position: relative;
    z-index: 10;
}

@media(min-width: 768px) {
    .intro-img-wrap {
        width: 200px;
        height: 200px;
        margin-bottom: 0;
        position: absolute;
        right: 5%;
        top: 0;
        left: auto;
    }
}

@media(min-width: 992px) {
    .intro-img-wrap {
        width: 300px;
        height: 300px;
        margin-bottom: 0;
        position: absolute;
        right: 21%;
        top: 10px;
        left: auto;
    }
}

@media(min-width: 1200px) {
    .intro-img-wrap {
        right: 0;
        left: 60%;
        top: -10px;
    }
}

/* Bildmaske / Kreis */
.intro-img-wrap .img-container {
    border-radius: 100%;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Bild-Skalierung und Hover-Zoom */
.intro-img-wrap .img-container img,
.intro-img-wrap .intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease-in-out;
}

.intro-img-wrap:hover .img-container img,
.intro-img-wrap:hover .intro-img {
    transform: scale(1.1);
}

/* Wave-Grafik */
.intro-img-wrap .wave {
    position: absolute;
    right: -40px;
    top: 20px;
    height: 40px;
    width: auto;
    pointer-events: none;
    z-index: 12;
}

@media(min-width: 768px) {
    .intro-img-wrap .wave {
        height: 50px;
        right: -55%;
    }
}

@media(min-width: 992px) {
    .intro-img-wrap .wave {
        height: 75px;
        right: -60%;
    }
}

/* ==========================================================================
   Fix: Text & Inhalt VOR die Sonne heben
   ========================================================================== */

/* 1. Die Sonne bleibt strikt im Hintergrund */
.sun {
    z-index: 0 !important;
    pointer-events: none !important;
}

/* 2. Container mit dem Inhalt & Page Builder CK nach vorne holen */
.mask_subpageIntro .container-narrow,
.mask_subpageIntro .component-content,
.com-content-article.item-page,
.com-content-article__body {
    position: relative !important;
    z-index: 5 !important;
}

/* 3. Text & Überschriften für Klicks und Selektion freigeben */
.com-content-article__body .pagebuilderck {
    position: relative !important;
    z-index: 6 !important;
}

/* ==========================================================================
   Hero Typografie (Streng getrennt: Startseite vs. Unterseiten)
   ========================================================================== */

/* Titel nur auf der echten Startseite im Intro */
.is-home .mask_pageIntro h1,
.is-home .hero-title,
.is-home .hero-content-wrap h1 {
    font-family: 'Sentient', Georgia, serif !important;
    font-weight: 500 !important;
    font-style: italic !important;
    font-size: 26px !important;
    margin-bottom: 45px;
    line-height: 1.2 !important;
    color: #092657 !important;
    margin-left: -6px !important;
    text-align: center !important;
}

@media (min-width: 768px) {
.is-home .mask_pageIntro h1,
.is-home .hero-title,
.is-home .hero-content-wrap h1 {
    font-family: 'Sentient', Georgia, serif !important;
    font-weight: 500 !important;
    font-style: italic !important;
    font-size: 26px !important;
    margin-bottom: 45px;
    line-height: 1.2 !important;
    color: #092657 !important;
    margin-left: -6px !important;
    text-align: left !important;
}
}

@media (min-width: 1200px) {
.is-home .mask_pageIntro h1,
.is-home .hero-title,
.is-home .hero-content-wrap h1 {
    font-family: 'Sentient', Georgia, serif !important;
    font-weight: 500 !important;
    font-style: italic !important;
    font-size: 40px !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
    color: #092657 !important;
    margin-left: -6px !important;
    text-align: left !important;
}
}

/* Großer kursiver Text NUR für den ersten Absatz auf der Startseite */
.is-home .mask_pageIntro > .container-narrow > p:first-of-type,
.is-home .mask_pageIntro .hero-lead,
.is-home .hero-content-wrap > p:first-of-type {
    font-family: 'Sentient', Georgia, serif !important;
    font-weight: 200 !important;
    font-style: italic !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
    color: #092657 !important;
    hyphens: auto !important;
    position: relative !important;
    text-align: center !important;
}

@media (min-width: 767.98px) {
.is-home .mask_pageIntro > .container-narrow > p:first-of-type,
.is-home .mask_pageIntro .hero-lead,
.is-home .hero-content-wrap > p:first-of-type {
    font-family: 'Sentient', Georgia, serif !important;
    font-weight: 200 !important;
    font-style: italic !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
    color: #092657 !important;
    hyphens: auto !important;
    position: relative !important;
    text-align: left !important;
}
}

@media (min-width: 1199.98px) {
.is-home .mask_pageIntro > .container-narrow > p:first-of-type,
.is-home .mask_pageIntro .hero-lead,
.is-home .hero-content-wrap > p:first-of-type {
    font-family: 'Sentient', Georgia, serif !important;
    font-weight: 200 !important;
    font-style: italic !important;
    font-size: 30px !important;
    line-height: 1.5 !important;
    color: #092657 !important;
    hyphens: auto !important;
    position: relative !important;
    text-align: left !important;
}
}

/* Gelbe Welle Startseite: nur 1. Absatz */
.is-home .mask_pageIntro p:first-of-type {
    position: relative !important;
}

/* 1. Desktop & Tablet (ab 768px): bleibt wie bisher links angeschnitten */
.is-home .mask_pageIntro p:first-of-type::before {
    content: url("../../../../../images/wave-yellow.png") !important;
    position: absolute !important;
    left: -6% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    display: block !important;
    z-index: 10 !important;
}

/* 2. Mobil (< 768px): Mittig zwischen H1 und Text platziert */
@media (max-width: 767.98px) {
    .is-home .mask_pageIntro p:first-of-type {
        margin-top: 0px !important; /* Schafft vertikalen Raum für die zentrierte Welle */
    }

    .is-home .mask_pageIntro p:first-of-type::before {
        left: 50% !important;
        top: -35px !important;
        transform: translateX(-50%) !important;
    }
}

/* ==========================================================================
   News Detailseite: H1 im .page-header wie .mainline stylen
   ========================================================================== */

.item-page .page-header {
    border-bottom: none !important;
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
}

.item-page .page-header h1,
.item-page h1 {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
    color: #092657 !important;
    margin-left: 0 !important;
    margin-bottom: 20px !important;
    text-transform: none !important;
}

@media (min-width: 768px) {
    .item-page .page-header h1,
    .item-page h1 {
        font-size: 32px !important;
    }
}

/* ==========================================================================
   Startseite vs. Unterseiten: Teaser & Fließtext
   ========================================================================== */

/* 1. Startseite: Teaser-Text direkt unter H1 (Sentient, 30px, Italic, 200) */
.is-home .mask_pageIntro p:first-of-type,
.is-home .hero-lead {
    font-family: 'Sentient', Georgia, serif !important;
    font-weight: 200 !important;
    font-style: italic !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
    color: #092657 !important;
    hyphens: auto !important;
    text-align: left !important;
}

@media (max-width: 768px) {
.is-home .mask_pageIntro p:first-of-type,
.is-home .hero-lead {
        text-align: center !important;
    }
}

@media (min-width: 1200px) {
.is-home .mask_pageIntro p:first-of-type,
.is-home .hero-lead {
        font-size: 30px !important;
    }
}

/* 2. Unterseiten & News: Fließtext immer aufrecht (Sentient, 18px, Regular, 300) */
.is-subpage p,
.is-subpage .component-content p,
.mask_subpageIntro p,
.news-list-container p,
.item-page p {
    font-family: 'Sentient', Georgia, serif !important;
    font-style: normal !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    color: #092657 !important;
}

/* Welle auf Unterseiten und in Inhalten strikt unterbinden */
.is-subpage p::before,
.mask_subpageIntro p::before,
.component-content p::before,
.news-list-container p::before {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   Section: Cluster / Map Banner & Solar Teaser (Stacking Context & Fix)
   ========================================================================== */

.content-cluster-container {
    position: relative;
    overflow-x: clip; /* Verhindert horizontales Scrollen */
    width: 100%;
}

.content-cluster-container .first-section,
.content-cluster-container .last-section {
    position: relative;
}

/* 1. STACKING CONTEXT & CLICK-THROUGH FIX:
   Container lässt Klicks durch, Teaser fangen sie wieder ein */
.cluster-teasers-top,
.cluster-teasers-bottom {
    position: relative;
    z-index: 30 !important;
    pointer-events: none !important; /* Unsichtbare Containerfläche blockiert Karte & Bild nicht */
}

.content-cluster-container .non-row-item {
    position: relative;
    width: 100vw;
    z-index: 10;
}

/* --- Teaser-Boxen Basis-Styling --- */
.mask_subpage-teaser {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 30px 0;
    position: relative;
    z-index: 31 !important;
    width: 280px;
    hyphens: auto;
    pointer-events: auto !important; /* Teaser-Inhalte bleiben klickbar & selektierbar */
}

@media(max-width: 767.98px) {
.mask_subpage-teaser {
    width: 100%;
}
}

@media(min-width: 768px) and (max-width: 991.98px) {
.mask_subpage-teaser {
    width: clamp(240px, 8.97vw + 171.12px, 260px) !important;
}
}

@media(min-width: 992px) {
.mask_subpage-teaser {
    width: 260px !important;
}
}

@media(min-width: 1200px) {
.mask_subpage-teaser {
    width: 280px !important;
}
}

/* 1. Obere Teaser (First Section - Beratung & Wasserstoff) */

.first-section .mask_subpage-teaser {
    top: 80px;
    left:180px;
}

@media(max-width: 767.98px) {
.first-section .mask_subpage-teaser {
    top: 900px;
    left: 0px;
}
}

@media(min-width: 768px) and (max-width:991.98px) {
.first-section .mask_subpage-teaser {
    left:clamp(180px, 35.87vw - 95.52px, 260px) !important;
}
.teaser-hydrogen .mask_subpage-teaser {
    left:clamp(200px, 17.94vw + 62.24px, 240px) !important;
}
}

@media(min-width: 992px) and (max-width:1199.98px) {
.first-section .mask_subpage-teaser {
    top: 280px !important;
    left:70px !important;
}
.teaser-hydrogen .mask_subpage-teaser {
    left:130px !important;
}
}

@media(min-width: 1200px) {
.first-section .mask_subpage-teaser {
    left: 260px;
}
}

@media(min-width: 1400px) {
.first-section .mask_subpage-teaser {
    top: 100px;
    left: 280px;
}
.teaser-hydrogen .mask_subpage-teaser {
    left:230px !important;
}
}

/* 2. Unterer Teaser (Last Section - Solarpark) */
.last-section .mask_subpage-teaser {
    top: -110px;
    left: 30px;
}

@media(max-width: 767.98px) {
.last-section .mask_subpage-teaser {
    top: 480px;
    left: 0px;
}
}

@media(min-width: 767.98px) {
.last-section .mask_subpage-teaser {
    top:-250px !important;
    width:280px;
}
}

@media(min-width: 992px) {
.last-section .mask_subpage-teaser {
    top:0px !important;
    width:280px;
}
}

/* PNG-Icons für die Teaser */
.teaser-icon-wrap {
    width: 165px;
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teaser-icon-wrap.i-right {
    align-self: flex-end;
}

.teaser-icon-wrap.i-left {
    align-self: flex-end;
}

@media(min-width: 768px) {
    .teaser-icon-wrap.i-left {
        align-self: flex-start;
    }
    .teaser-custom-icon {
    padding-right: 15px !important;
}
}

.teaser-custom-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.mask_subpage-teaser .std-headline {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 34px;
    line-height: 0.4;
    color: #092657;
    margin-top: 30px;
}

@media(min-width: 1400px) {
    .mask_subpage-teaser .std-headline {
        margin-top: 90px;
    }
}

.mask_subpage-teaser .std-subline {
    font-family: 'Sentient', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 32px;
    line-height: 1.2;
    color: #092657;
    margin-bottom: 15px;
    margin-top: 5px;
}

@media(min-width: 768px) and (max-width: 991.98px) {
    .mask_subpage-teaser .std-subline {
        font-size: 26px;
    }
}

@media(min-width: 992px) and (max-width: 1199.98px) {
    .mask_subpage-teaser .std-subline {
        font-size: 29px;
    }
}

.mask_subpage-teaser .std-textblock {
    font-size: 16px;
    line-height: 1.4;
    color: #092657;
    font-family: 'Sentient', Georgia, serif;
    font-weight: 200;
    font-style: normal;
}

/* ==========================================================================
   Feinjustierung: Wasserstoff-Teaser 100px nach links
   ========================================================================== */
@media (min-width: 768px) {
    .teaser-hydrogen {
        transform: translateX(-100px);
    }
}

/* --- Map-Banner & runde Landkarte --- */
.map-banner {
    position: relative;
    height: 400px;
}

@media(min-width: 1200px) {
    .map-banner {
        height: 500px;
    }
}

.map-banner .map {
    top: -700px;
    position: absolute;
    width: 720px;
    height: 720px;
    overflow: hidden;
    border-radius: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

@media(min-width: 768px) {
    .map-banner .map {
        width: clamp(450px, 44.84vw + 105.6px, 550px);
        height: clamp(450px, 44.84vw + 105.6px, 550px);
        top: -135%;
        left: -25%;
        transform: none;
    }
}

@media(min-width: 992px) {
    .map-banner .map {
        width: clamp(600px, 48.31vw + 120.77px, 700px);
        height: clamp(600px, 48.31vw + 120.77px, 700px);
        top: -90%;
        left: -20%;
    }
}

@media(min-width: 1200px) {
    .map-banner .map {
        width: clamp(700px, 50.25vw + 96.98px, 800px);
        height: clamp(700px, 50.25vw + 96.98px, 800px);
        top: -80%;
        left: -22%;
        transform: none;
    }
}

@media(min-width: 1400px) {
    .map-banner .map {
        width: 1000px;
        height: 1000px;
        top: -680px;
        left: clamp(-392px, 56.92vw - 1188.92px, -96px);
    }
}

.map-banner .map .map-img {
    transform: scale(1.7) translateX(-50px) translateY(40px);
}

@media(min-width: 768px) {
    .map-banner .map .map-img { transform: scale(1.3) translateX(20px) translateY(0px); }
}
@media(min-width: 992px) {
    .map-banner .map .map-img { transform: scale(1.5) translateX(-30px) translateY(20px); }
}
@media(min-width: 1200px) {
    .map-banner .map .map-img { transform: scale(1.5) translateX(20px) translateY(50px); }
}
@media(min-width: 1400px) {
    .map-banner .map .map-img { transform: scale(1) translateX(0px) translateY(0px); }
}

/* 2. KANTEN-BILD: Gruppe_119.png ganz nach vorne heben */
.map-banner .banner-img-wrap {
    position: absolute;
    overflow: hidden;
    border-radius: 100%;
    z-index: 35 !important; /* Höher als Teaser-Container -> voller Hover-Effekt */
    display: block !important;
    pointer-events: auto !important;
}

@media(max-width: 767.98px) {
.map-banner .banner-img-wrap {
  display: none !important;
}
}

@media(min-width: 768px) {
    .map-banner .banner-img-wrap {
        width: clamp(200px, 22.42vw + 27.8px, 250px);
        height: clamp(200px, 22.42vw + 27.8px, 250px);
        top: -620px;
        left: 18%;
    }
}

@media(min-width: 992px) {
    .map-banner .banner-img-wrap {
        width: 260px;
        height: 260px;
        top: -400px;
        left: 25%;
    }
}

@media(min-width: 1200px) {
    .map-banner .banner-img-wrap {
        width: 300px;
        height: 300px;
        top: -400px;
        left: 26%;
    }
}

@media(min-width: 1400px) {
    .map-banner .banner-img-wrap {
        width: 450px;
        height: 450px;
        top: -630px;
        left: clamp(392px, 53.85vw - 361.84px, 672px);
    }
}

.map-banner .banner-img-wrap .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    transition: transform .2s ease-in-out;
}

.map-banner .banner-img-wrap .banner-img:hover {
    transform: scale(1.1);
}

/* --- Pins / Links auf der Karte --- */
.map-banner .map-content {
    width: 100%;
    height: 100%;
    position: relative;
    top: -100%;
    z-index: 35 !important;
}

.map-banner .map-content .links {
    position: relative;
    z-index: 36 !important;
    pointer-events: auto !important;
}

@media(min-width: 768px) {
    .map-banner .map-content .links { left: 65%; top: 52%; }
}
@media(min-width: 992px) {
    .map-banner .map-content .links { left: 60%; top: 55%; }
}
@media(min-width: 1200px) {
    .map-banner .map-content .links { left: 60%; top: 55%; }
}
@media(min-width: 1400px) {
    .map-banner .map-content .links { top: 50%; left: 50%; }
}

.map-banner .map-content .links a {
    background: #ffda00;
    color: #092657;
    border-radius: 20px;
    padding: 8px 18px;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    border: 0;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.map-banner .map-content .links a:hover {
    color: #092657;
    background: #fff;
}

.map-banner .map-content .links .medelby-1 {
    position: absolute;
    top: -135px;
    left: -110px;
    z-index: 5;
}

@media(min-width: 768px) { .map-banner .map-content .links .medelby-1 { left: -90px; } }
@media(min-width: 992px) { .map-banner .map-content .links .medelby-1 { top: -150px; left: -140px; } }
@media(min-width: 1200px) { .map-banner .map-content .links .medelby-1 { top: -150px; left: -110px; } }
@media(min-width: 1400px) { .map-banner .map-content .links .medelby-1 { top: -180px; left: -50px; } }

.map-banner .map-content .links .medelby-2 {
    position: absolute;
    top: -110px;
    left: 50px;
    z-index: 5;
}

@media(min-width: 768px) { .map-banner .map-content .links .medelby-2 { left: 10px; } }
@media(min-width: 992px) { .map-banner .map-content .links .medelby-2 { left: -40px; top: -130px; } }
@media(min-width: 1200px) { .map-banner .map-content .links .medelby-2 { left: 60px; top: -110px; } }
@media(min-width: 1400px) { .map-banner .map-content .links .medelby-2 { top: -160px; left: 100px; } }

.map-banner .map-content .links .wallsbuell {
    position: absolute;
    top: 70px;
    left: -30px;
    z-index: 5;
}

@media(min-width: 768px) { .map-banner .map-content .links .wallsbuell { left: -60px; top: 40px; } }
@media(min-width: 992px) { .map-banner .map-content .links .wallsbuell { left: -80px; top: 60px; } }
@media(min-width: 1200px) { .map-banner .map-content .links .wallsbuell { left: 0; top: 90px; } }
@media(min-width: 1400px) { .map-banner .map-content .links .wallsbuell { left: 30px; top: 50px; } }

/* --- Windmühlen --- */
.map-banner .map-content .windmills {
    position: relative;
    top: 38%;
    left: 43%;
}

@media(min-width: 768px) { .map-banner .map-content .windmills { top: 34%; left: 57%; } }
@media(min-width: 992px) { .map-banner .map-content .windmills { top: 44%; left: 48%; } }
@media(min-width: 1200px) { .map-banner .map-content .windmills { top: 44%; left: 55%; } }
@media(min-width: 1400px) { .map-banner .map-content .windmills { top: 38%; left: 52%; } }

.map-banner .map-content .windmills .wm-1,
.map-banner .map-content .windmills .wm-3 {
    width: 50px;
}

@media(min-width: 768px) {
    .map-banner .map-content .windmills .wm-1,
    .map-banner .map-content .windmills .wm-3 { width: 35px; }
}

@media(min-width: 1200px) {
    .map-banner .map-content .windmills .wm-1,
    .map-banner .map-content .windmills .wm-3 { width: 50px; }
}

.map-banner .map-content .windmills .wm-2 {
    width: 35px;
    position: relative;
    top: 0;
}

@media(min-width: 768px) { .map-banner .map-content .windmills .wm-2 { width: 25px; } }
@media(min-width: 1200px) { .map-banner .map-content .windmills .wm-2 { width: auto; height: 80px; } }

@media(max-width: 767.98px) {
    /* Pins mittig skalieren */
    .map-banner .map-content .links {
        left: 50%;
        top: 50%;
    }

    .map-banner .map-content .links .medelby-1 { top: -110px; left: -100px; }
    .map-banner .map-content .links .medelby-2 { top: -80px; left: 30px; }
    .map-banner .map-content .links .wallsbuell { top: 50px; left: -20px; }

    .map-banner .map-content .windmills {
        top: 38%;
        left: 45%;
    }
    .map-banner .map-content .windmills .wm-1,
    .map-banner .map-content .windmills .wm-3 { width: 40px; }
    .map-banner .map-content .windmills .wm-2 { width: 28px; }
}


/* ==========================================================================
   Solar-Banner Feinjustierung (Höher & weiter nach links)
   ========================================================================== */

/* 1. Haupt-Container der unteren Sektion */
.content-cluster-container .last-section {
    position: relative;
    min-height: 480px;
}

@media(min-width: 768px) {
    .content-cluster-container .last-section {
        padding-top: 60px;
        min-height: 520px;
    }
}

@media(min-width: 1200px) {
    .content-cluster-container .last-section {
        padding-top: 80px;
        min-height: 600px;
    }
}

/* 2. Banner-Bühne: Zieht die gesamte Gruppe nach oben */
.circle-banner {
    position: absolute;
    top: -850px; /* Nach oben ziehen, damit es bündig neben dem Teaser sitzt */
    right: 100px;
    width: 100vw;
    height: 100%;
    pointer-events: none;
    z-index: 15;
    display: block !important;
}

@media(max-width: 767.98px) {
.circle-banner {
    top: 0; /* Nach oben ziehen, damit es bündig neben dem Teaser sitzt */
}
}

@media(min-width: 1200px) {
    .circle-banner {
        top: -420px; /* Bei großen Screens noch etwas höher */
    }
}

@media(min-width: 1400px) {
    .circle-banner {
        top: -850px;
    }
}

.circle-banner .wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

/* 3. Gelbe Sonne im Hintergrund (weiter nach links geholt) */
.circle-banner .sun {
    height: 550px;
    width: 550px;
    background-color: #ffda00 !important;
    border-radius: 50%;
    position: absolute;
    right: -120px; /* Weiter links ins Bild geholt */
    top: 50px;
    z-index: 1;
    display: block !important;
}

@media(max-width: 767.98px) {
.circle-banner .sun {
    display: none !important;
}
}

@media(min-width: 992px) {
    .circle-banner .sun {
        height: 700px;
        width: 700px;
        right: -140px;
        top: 300px;
    }
}

@media(min-width: 1200px) {
    .circle-banner .sun {
        height: 1000px;
        width: 1000px;
        right: -160px;
        top: -250px;
    }
}

@media(min-width: 1400px) {
    .circle-banner .sun {
        height: 1100px;
        width: 1100px;
        right: -180px;
        top: 50px;
    }
}

/* 4. Runder Bild-Container Gruppe_120 (weiter nach links gerückt) */
.circle-banner .banner-img-wrap {
    position: absolute;
    z-index: 10;
    overflow: hidden;
    border-radius: 50%;
    pointer-events: auto;
    display: block !important;
    aspect-ratio: 1 / 1;
}

@media(max-width: 767.98px) {
.circle-banner .banner-img-wrap {
    display: none !important;
}
}

@media(min-width: 768px) {
    .circle-banner .banner-img-wrap {
        right: 120px; /* Weiter links */
        width: 250px;
        height: 250px;
        top: 40px;
    }
}

@media(min-width: 992px) {
    .circle-banner .banner-img-wrap {
        right: 200px;
        width: 320px;
        height: 320px;
        top: 280px;
    }
}

@media(min-width: 1200px) {
    .circle-banner .banner-img-wrap {
        right: 200px;
        width: 380px;
        height: 380px;
        top: -100px;
    }
}

@media(min-width: 1400px) {
    .circle-banner .banner-img-wrap {
        right: 250px; /* Deutlich weiter links */
        width: 450px;
        height: 450px;
        top: 140px;
    }
}

.circle-banner .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    transition: transform .2s ease-in-out;
}

.circle-banner .banner-img:hover {
    transform: scale(1.1);
}

/* 5. Weiße Welle (mit dem Bild mitgewandert) */
.circle-banner .wave {
    position: absolute;
    width: auto;
    z-index: 12;
    pointer-events: none;
    display: block !important;
}

@media(min-width: 768px) {
    .circle-banner .wave {
        height: 90px;
        opacity: .4;
        right: -40px;
        top: 400px;
    }
}

@media(min-width: 992px) {
    .circle-banner .wave {
        height: 130px;
        opacity: .4;
        right: 0px;
        top: 650px;
    }
}

@media(min-width: 1200px) {
    .circle-banner .wave {
        height: 160px;
        opacity: .4;
        right: -120px;
        top: 330px;
    }
}

@media(min-width: 1400px) {
    .circle-banner .wave {
        height: 190px;
        opacity: .4;
        right: -60px;
        top: 650px;
    }
}

/* ==========================================================================
   Bootstrap Carousel Core-Styles (Verhindert das Stapeln der Slides)
   ========================================================================== */
.carousel {
    position: relative;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-inner::after {
    display: block;
    clear: both;
    content: "";
}

.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: block;
}

/* Flüssiger Übergang */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
    transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
    transform: translateX(-100%);
}

/* ==========================================================================
   Section: Team / Personal Slider (Bootstrap 5 Carousel)
   ========================================================================== */

.frame-type-mask_h2personalslider {
    background: #092657;
    padding: 90px 15px;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

/* Runder Headshot Container exakt horizontal zentrieren */
.mask_personal-slider .personal {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert alle Kindelemente (Bild, Text, Name) */
    text-align: center;
}

.mask_personal-slider .img-wrap {
    position: relative;
    display: block;
    margin: 0 auto 30px auto;
    width: fit-content; /* Verhindert, dass der Wrapper die volle Breite einnimmt */
}

.mask_personal-slider .headshot-wrap {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

@media(min-width: 992px) {
    .mask_personal-slider .headshot-wrap {
        width: 270px;
        height: 270px;
    }
}

.mask_personal-slider .headshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease-in-out;
}

.mask_personal-slider .img-wrap:hover .headshot {
    transform: scale(1.08);
}

/* ==========================================================================
   Gelbe Sprechblase (94px Kreis mit dunkelblauem SVG-Icon)
   ========================================================================== */
.mask_personal-slider .icon-speechbubble {
    position: absolute;
    width: 94px;
    height: 94px;
    background-color: #ffda00;
    border-radius: 50%;
    left: -20px;
    top: 25px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Individuelles Affinity-SVG als Sprechblase */
.mask_personal-slider .icon-speechbubble::before {
    content: "";
    display: block;
    width: 33px;
    height: 33px;
    background-color: #092657; /* Färbt das Icon dunkelblau */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg transform='matrix(0.712782,0,0,0.695337,-839.214913,-351.784501)'%3E%3Cpath d='M1208.37,562.838L1208.36,562.838C1203.78,562.835 1199.28,561.605 1195.36,559.278L1194.43,558.725L1184.76,561.26L1187.34,551.837L1186.73,550.871C1184.18,546.801 1182.82,542.089 1182.83,537.281C1182.83,523.203 1194.29,511.748 1208.38,511.748C1215.16,511.732 1221.66,514.428 1226.44,519.237C1231.25,524.018 1233.94,530.523 1233.92,537.302C1233.91,551.382 1222.45,562.838 1208.37,562.838ZM1230.11,515.568C1224.31,509.761 1216.59,506.562 1208.37,506.558C1191.43,506.558 1177.65,520.339 1177.64,537.279C1177.63,542.671 1179.05,547.969 1181.74,552.639L1177.38,568.559L1193.67,564.287C1198.16,566.735 1203.22,568.025 1208.36,568.027L1208.37,568.027C1225.31,568.027 1239.1,554.243 1239.11,537.304C1239.11,529.095 1235.92,521.376 1230.11,515.568Z' fill='%23000' fill-rule='nonzero'/%3E%3C/g%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 44 44'%3E%3Cg transform='matrix(0.712782,0,0,0.695337,-839.214913,-351.784501)'%3E%3Cpath d='M1208.37,562.838L1208.36,562.838C1203.78,562.835 1199.28,561.605 1195.36,559.278L1194.43,558.725L1184.76,561.26L1187.34,551.837L1186.73,550.871C1184.18,546.801 1182.82,542.089 1182.83,537.281C1182.83,523.203 1194.29,511.748 1208.38,511.748C1215.16,511.732 1221.66,514.428 1226.44,519.237C1231.25,524.018 1233.94,530.523 1233.92,537.302C1233.91,551.382 1222.45,562.838 1208.37,562.838ZM1230.11,515.568C1224.31,509.761 1216.59,506.562 1208.37,506.558C1191.43,506.558 1177.65,520.339 1177.64,537.279C1177.63,542.671 1179.05,547.969 1181.74,552.639L1177.38,568.559L1193.67,564.287C1198.16,566.735 1203.22,568.025 1208.36,568.027L1208.37,568.027C1225.31,568.027 1239.1,554.243 1239.11,537.304C1239.11,529.095 1235.92,521.376 1230.11,515.568Z' fill='%23000' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* Feste Mindesthöhe für den Carousel-Bereich, damit nichts springt */
.mask_personal-slider .carousel-inner {
    min-height: 640px; /* Hält den gesamten Slider-Körper ruhig */
}

/* Typografie & reservierter Platz für Zitate */
.mask_personal-slider .description {
    font-family: 'Sentient', Georgia, serif;
    font-size: 20px;
    line-height: 1;
    font-style: italic;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 25px;
    text-align: center;
    min-height: 220px; /* Reserviert Platz für die längsten Zitate */
    display: flex;
    align-items: center; /* Zentriert kürzere Zitate optisch schön vertikal */
    justify-content: center;
}

.mask_personal-slider .name {
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #ffda00;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* ==========================================================================
   Fix: Teamslider Typografie & Farben auf Unterseiten absichern
   ========================================================================== */

/* 1. Zitat / Beschreibung: Immer Weiß (Sentient, Italic) */
.is-subpage .mask_personal-slider .description,
.is-subpage .mask_personal-slider .description p,
.is-subpage .frame-type-mask_h2personalslider .description,
.is-subpage .frame-type-mask_h2personalslider .description p {
    color: #ffffff !important;
    font-family: 'Sentient', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 300 !important;
}

/* 2. Name: Immer Gelb (Ubuntu, 500, Uppercase) */
.is-subpage .mask_personal-slider .name,
.is-subpage .mask_personal-slider .name p,
.is-subpage .frame-type-mask_h2personalslider .name,
.is-subpage .frame-type-mask_h2personalslider .name p {
    color: #ffda00 !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-style: normal !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

@media(min-width: 1200px) {
    .mask_personal-slider .carousel-inner {
        min-height: 660px;
    }
    
    .mask_personal-slider .description,
    .is-subpage .mask_personal-slider .description,
.is-subpage .mask_personal-slider .description p,
.is-subpage .frame-type-mask_h2personalslider .description,
.is-subpage .frame-type-mask_h2personalslider .description p {
        font-size: 22px !important;
    }
.is-subpage .mask_personal-slider .name,
.is-subpage .mask_personal-slider .name p,
.is-subpage .frame-type-mask_h2personalslider .name,
.is-subpage .frame-type-mask_h2personalslider .name p {
    font-size: 15px !important;
}
}

/* Gelbe Pfeil-Buttons links und rechts */
.frame-type-mask_h2personalslider .slider-buttons {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    position: relative;
    z-index: 20;
}

@media(min-width: 768px) {
    .frame-type-mask_h2personalslider .slider-buttons {
        width: 100%;
        left: 0;
        top: 40%;
        transform: translateY(-50%);
        position: absolute;
        justify-content: space-between;
        padding: 0 4vw;
        pointer-events: none;
        margin-top: 0;
    }
}

@media(min-width: 1400px) {
    .frame-type-mask_h2personalslider .slider-buttons {
        padding: 0 8vw;
    }
}

.frame-type-mask_h2personalslider .slider-btn {
    width: 48px;
    height: 48px;
    background: #ffda00;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.frame-type-mask_h2personalslider .slider-btn:hover {
    background: #ffffff;
    transform: scale(1.1);
}

/* Weiße Wellen im dunkelblauen Hintergrund */
.frame-type-mask_h2personalslider .waves > * {
    height: 120px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.08;
    pointer-events: none;
    width: auto;
}

.frame-type-mask_h2personalslider .waves .wave1 { left: -100px; }
.frame-type-mask_h2personalslider .waves .wave2 { right: -100px; }

@media(max-width: 767.98px) {
.frame-type-mask_h2personalslider .waves > * {
    display: none;
}
}

@media (min-width: 768px)and (max-width:1199.98px) {
  .frame-type-mask_h2personalslider .waves .wave1 {
    left: -300px;
  }
  .frame-type-mask_h2personalslider .waves .wave2 {
    right: -300px;
  }
}

.three-columns-container {
    background: #ffda00;
    padding: 60px 0;
}

.mask_footerbar {
    margin: 42px auto;
    text-align: center;
}

/* Buttons & Links */
.std-link {
    background: #ffffff;
    border: 1px solid #ffda00;
    border-radius: 25px;
    padding: 10px 20px;
    display: inline-block;
    color: #092657;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-right: 15px;
}

.std-link:hover {
    border: 1px solid #092657;
    text-decoration: none;
    background: #092657;
    color: #ffffff;
}

/* ==========================================================================
   Section: Bautagebuch (Diary)
   ========================================================================== */

.diaryContainer {
    position: relative;
    background-color: #f2f4f7; /* Sanfter graublauer Hintergrund der Sektion */
    padding-top: 0;
    padding-bottom: 0 !important; /* Entfernt überflüssiges Container-Padding */
    margin-bottom: 0 !important;
    overflow: hidden;
}

/* Falls die Standard-Abstandsklasse greift, diese gezielt drosseln */
.diaryContainer.frame-space-after-medium {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important; /* Oder auf den gewünschten Restwert setzen */
}

@media (min-width: 1200px) {
    /* Hebt den 15px Innenabstand links auf, damit der Kreis bis an die Kante reicht */
    .diaryContainer.container-fluid,
    .diaryContainer .container-fluid {
        padding-left: 0 !important;
    }

    /* Falls der Kreis direkt in einer .row liegt, die negativen Margin links abfangen */
    .diaryContainer .row {
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   Bautagebuch: Responsives Verhalten nach Breakpoints
   ========================================================================== */

/* 1. Mobil (< 768px): Gesamtes Modul weiß, zentriert */
@media (max-width: 767.98px) {
    .diaryContainer {
        background-color: #ffffff !important;
        padding-top: 40px;
    }

    .diary-spacer {
        display: none !important;
    }

    .diaryContainer .bg-img-wrapper {
        display: none !important;
    }

    .diary-content {
        margin-right: 15px !important;
        padding: 40px 20px;
        box-shadow: none !important; /* Nahtloser weißer Übergang */
        top: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
     .diaryContainer {
        padding-top: 40px;
    }
 
    /* 1. Kreis & Hintergrund-Wasserzeichen ausblenden */
    .diaryContainer .bg-img-wrapper,
    .diaryContainer .diary-spacer {
        display: none !important;
    }

    /* 2. Linke Leerspalte neutralisieren */
    .diaryContainer .col-md-4:has(.diary-spacer),
    .diaryContainer .col-md-5:has(.diary-spacer),
    .diaryContainer .row > div:first-child:empty {
        display: none !important;
        width: 0 !important;
        flex: 0 0 0% !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. Inhaltsspalte auf echte 100% Breite aufziehen */
    .diaryContainer .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        left: 0 !important;
    }

    /* 4. Row zentrieren und Überhang neutralisieren */
    .diaryContainer .row {
        justify-content: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 2. Tablet (768px bis 991.98px): 15px Rand links & rechts */
@media (min-width: 768px) and (max-width: 991.98px) {
    .diaryContainer .diary-content {
        width: auto !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
        top: 0 !important;
        padding: 40px 30px;
    }
}

/* 3. Kleiner Desktop (992px bis 1199.98px): 100px Rand links & rechts */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .diaryContainer .diary-content {
        width: auto !important;
        margin-left: 100px !important;
        margin-right: 100px !important;
        top: 0 !important;
        padding: 50px 40px;
    }
}

/* 4. Desktop (ab 1200px - Originalzustand mit 1000px Kreis & Freiraum links) */
@media (min-width: 1200px) {

    .diary-spacer {
        display: block !important;
    }

    .diaryContainer .bg-img-wrapper {
        display: flex !important;
        position: absolute;
        left: 150px;
        top: 330px;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 1;
        align-items: center;
        justify-content: center;
    }

    .diaryContainer .bg-img-wrapper::before {
        content: "";
        position: absolute;
        width: 800px;
        height: 800px;
        background-color: rgba(9, 38, 87, 0.03);
        border-radius: 50%;
        z-index: -1;
        pointer-events: none;
    }

    .diaryContainer .news-icon-bg {
        width: 238px;
        height: 292px;
        opacity: 0.9;
        display: block;
        fill: #ffffff !important;
    }

    .diary-content {
        top: 80px;
        padding: 60px 50px;
    }
}

@media (min-width: 1400px) {
        .diaryContainer .bg-img-wrapper {
            left:290px;
            top: 430px;
    }
    .diaryContainer .bg-img-wrapper::before {
        width: 1000px;
        height: 1000px;
    }
}

/* ==========================================================================
   Bautagebuch Kacheln (768px bis 1199.98px): 
   Links Einleitungsbild flexibel mitwachsend (200px bis 400px), rechts Text
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199.98px) {
    .diary-content .news-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 25px !important;
    }

    /* Bildspalte links: flex-basis skaliert dynamisch per clamp() */
    .diary-content .news-image,
    .diary-content .news-box > [class*="col-"]:first-child {
        flex: 0 0 clamp(200px, 46.4vw - 156.38px, 400px) !important;
        max-width: clamp(200px, 46.4vw - 156.38px, 400px) !important;
        width: clamp(200px, 46.4vw - 156.38px, 400px) !important;
        margin-bottom: 0 !important;
    }

    /* Das Bild selbst füllt diese mitwachsende Spalte immer zu 100% aus */
    .diary-content .news-image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 12px !important;
        object-fit: cover !important;
    }

    /* Textspalte rechts: Füllt den gesamten restlichen Raum aus */
    .diary-content .news-text,
    .diary-content .news-box > [class*="col-"]:last-child {
        flex: 1 1 0% !important;
        max-width: none !important;
        width: auto !important;
        min-width: 0 !important; /* Verhindert ungewolltes Herausschieben bei langen Wörtern */
    }
}

/* ==========================================================================
   Bautagebuch: Kachel Basis-Styling & News-Badge
   ========================================================================== */

.diary-content {
    position: relative;
    z-index: 10;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(9, 38, 87, 0.06);
}

/* News-Badge Kreis oben rechts */
.diary-content .icon-wrapper {
    position: absolute;
    top: -10px;
    right: 20px;
    z-index: 15;
    pointer-events: none;
}

@media (min-width: 768px) {
    .diary-content .icon-wrapper {
        top: 50px;
        right: 60px;
    }
}

@media (min-width: 992px) {
    .diary-content .icon-wrapper {
        top: 60px;
        right: 70px;
    }
}

.diary-content .icon-news {
    width: 170px;
    height: 170px;
    background-color: #092657;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diary-content .icon-news svg {
    width: 46px;
    height: auto;
    display: block;
}

/* Header & Kacheln */
.frame.frame-diary.default-container.diary {
    margin-top: 150px;
}

.diary .stdheader .mainline {
    font-family: 'Ubuntu', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #092657;
    line-height: 1.1;
}

.diary .stdheader .subline {
    font-family: 'Sentient', Georgia, serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 300;
    color: #092657;
    margin-bottom: 40px;
}

.news-item-wrap {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(9, 38, 87, 0.08);
}

.news-item-wrap:last-child {
    border-bottom: none;
}

.news-box {
    align-items: flex-start;
}

.news-image img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.news-text .stdheader.small {
    margin-top: 0;
    padding-top: 0;
}

.news-text .stdheader.small .mainline {
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #092657;
    margin-top: 0;
    line-height: 1.2;
    margin-bottom: 8px;
}

.news-text .bodytext {
    line-height: 1.5;
    color: #092657;
    font-family: 'Sentient', Georgia, serif;
    font-weight: 300;
    font-size: 100%;
}

/* ==========================================================================
   Bautagebuch: Paginierung
   ========================================================================== */

.diaryContainer .pagination-wrap {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid rgba(9, 38, 87, 0.08);
}

.diaryContainer .f3-widget-paginator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Neuer & Älter Buttons */
.diaryContainer .f3-widget-paginator .previous a,
.diaryContainer .f3-widget-paginator .next a {
    display: inline-block;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #092657;
    text-decoration: none;
    padding: 12px 20px;
    border: 1px solid #ffda00;
    border-radius: 25px;
    background-color: transparent;
    transition: all 0.25s ease;
}

/* Hover-Status für Neuer & Älter */
.diaryContainer .f3-widget-paginator .previous a:hover,
.diaryContainer .f3-widget-paginator .next a:hover {
    background-color: #092657;
    border-color: #092657;
    color: #ffda00;
    text-decoration: none;
}

/* ==========================================================================
   Timeline / Seitenzahlen: Unter 600px strikt ausblenden
   ========================================================================== */

@media (max-width: 599.98px) {
    .diaryContainer .timeline,
    .diaryContainer .f3-widget-paginator li:not(.previous):not(.next),
    .diaryContainer .f3-widget-paginator .page,
    .diaryContainer .f3-widget-paginator .diary-page-num {
        display: none !important;
    }

    /* Stellt sicher, dass Vor/Zurück-Buttons außen bleiben */
    .diaryContainer .f3-widget-paginator {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
}

/* Ab 600px wieder regulär einblenden */
@media (min-width: 600px) {
    .diaryContainer .timeline,
    .diaryContainer .f3-widget-paginator li.timeline {
        display: flex !important;
        padding: 12px 20px;
        border: 1px solid #ffda00;
        border-radius: 25px;
        align-items: center;
        gap: 8px;
    }
}

/* Links der Seitenzahlen */
.diaryContainer .timeline a.diary-page-num {
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    color: #092657;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Hover & Active / Current Status */
.diaryContainer .timeline a.diary-page-num:hover,
.diaryContainer .timeline a.diary-page-num.current {
    text-decoration: underline;
    font-weight: 700;
    color: #092657;
}

/* ==========================================================================
   Kontakt Sektion: Gelber 3-Spalten-Block
   ========================================================================== */

.contact-section-yellow {
    background-color: #ffda00;
    padding: 25px 0;
    position: relative;
    color: #092657;
}

/* --- Spalte 1: Foto & PNG-Welle --- */
.mask_contact-img {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: -120px;
    left: 150px;
}

@media (max-width: 767.98px) {
    /* 1. Spalten-Container zentrieren und Versatz aufheben */
    .mask_contact-img {
        left: 0 !important;
        top: 0px !important; /* Nach Bedarf anpassen, wie weit es nach oben ragen soll */
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* 2. Runden Bild-Wrapper exakt in die Mitte setzen */
    .mask_contact-img .headshot-wrap {
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
    }

    /* 3. Welle mobil an das zentrierte Bild anbinden oder optional ausblenden */
    .mask_contact-img .wave {
        left: 50% !important;
        transform: translate(-150px, -50%) !important; /* Hält die Welle links am runden Bild */
    }
}

@media (min-width: 768px) and (max-width:991.98px) {
.mask_contact-img {
    left: 0px !important;
    top: -60px;
}
}

@media (min-width: 992px) and (max-width:1199.98px) {
.mask_contact-img {
    left: 70px !important;
    top: -70px;
}
}

@media (min-width: 1200px) and (max-width:1399.98px) {
.mask_contact-img {
    left: 90px !important;
    top: -40px;
}
}

@media (min-width: 1400px) {
.mask_contact-img {
    top: -50px;
    left: 140px;
}
}

/* Originale Werte für das Porträt mit Maskierungs-Schutz */
.mask_contact-img .headshot-wrap {
    max-width: 220px;
    overflow: hidden;
    border-radius: 100%;
    align-self: start;
    margin-top: 30%;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    cursor: pointer;
}

@media (min-width: 1200px) {
    .mask_contact-img .headshot-wrap {
        max-width: 270px;
        margin-top: 25%;
    }
}

/* Porträtfoto mit flüssiger Transition */
.mask_contact-img .headshot-wrap img.headshot {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

/* Innerer Zoom-Effekt bei Hover */
.mask_contact-img .headshot-wrap:hover img.headshot,
.mask_contact-img:hover .headshot-wrap img.headshot {
    transform: scale(1.08);
}

/* Welle links angeschnitten über dem Porträt */
.mask_contact-img .wave {
    height: 36px;
    opacity: 0.5;
    position: absolute;
    left: -65px;
    top: 80%;
    transform: translateY(-50%);
    width: auto;
    pointer-events: none;
    z-index: 2;
}

/* --- Spalte 2: Convert Forms Formular Styling --- */
.contact-form-wrap form {
    margin: 0;
}

.contact-form-wrap .cf-heading,
.contact-form-wrap h2,
.contact-form-wrap h3,
#cf_1 .cf-title,
#cf_1 .cf-heading {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    color: #092657 !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
}

#cf_1 {
  --font: 'Sentient', Georgia, 'Times New Roman', Times, serif !important;
  --label-color: #092657 !important;
}

.contact-form-wrap .form-control,
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap textarea {
    background-color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    color: #092657;
    margin-bottom: 15px;
    width: 100%;
    font-size: 15px;
}

.contact-form-wrap textarea {
    resize: vertical;
    min-height: 120px;
}

/* Convert Forms: Inputs und Textarea ohne Border, mit Rundung */
.contact-form-wrap .form-control,
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap textarea {
    background-color: #ffffff !important;
    border: none !important;
    outline: none !important;
    border-radius: 20px !important;
    padding: 14px 18px !important;
    color: #092657 !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    font-size: 15px !important;
    box-shadow: 0 4px 15px rgba(9, 38, 87, 0.06) !important;
}

/* Spezifisch für Textarea: saubere Mindesthöhe & vertikales Resize */
.contact-form-wrap textarea {
    min-height: 120px !important;
    resize: vertical;
}

/* Fokus-Zustand beim Reinklicken: kein Standard-Rahmen, nur sanfter Glow */
.contact-form-wrap .form-control:focus,
.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus {
    box-shadow: 0 6px 20px rgba(9, 38, 87, 0.12) !important;
    border: none !important;
    outline: none !important;
}

/* Sende-Button: Abgerundet, Dunkelblau, gelbe Ubuntu-Schrift */
.contact-form-wrap .btn,
.contact-form-wrap input[type="submit"],
.contact-form-wrap button[type="submit"],
.contact-form-wrap .cf-btn,
#cf_1 .cf-btn-submit,
#cf_1 button[type="submit"] {
    background-color: #092657 !important;
    color: #ffda00 !important;
    border: 1px solid #092657 !important;
    border-radius: 25px !important;
    padding: 12px 28px !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    display: inline-block !important;
    box-shadow: 0 4px 12px rgba(9, 38, 87, 0.15) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

/* Hover-Status: Weiß mit blauem Rand & blauer Schrift */
.contact-form-wrap .btn:hover,
.contact-form-wrap input[type="submit"]:hover,
.contact-form-wrap button[type="submit"]:hover,
.contact-form-wrap .cf-btn:hover,
#cf_1 .cf-btn-submit:hover,
#cf_1 button[type="submit"]:hover {
    background-color: #ffffff !important;
    border-color: #092657 !important;
    color: #092657 !important;
    box-shadow: 0 6px 18px rgba(9, 38, 87, 0.2) !important;
}

/* ==========================================================================
   Convert Forms: Schriftfarbe für getippten Text erzwingen
   ========================================================================== */

/* 1. Eingegebener Text über alle Convert-Forms-Klassen */
.contact-form-wrap .cf-form input,
.contact-form-wrap .cf-form textarea,
.contact-form-wrap .cf-input,
.contact-form-wrap .cf-form-control,
.contact-form-wrap input.form-control,
.contact-form-wrap textarea.form-control {
    color: #092657 !important;
    -webkit-text-fill-color: #092657 !important; /* Überschreibt WebKit-/Browser-Styles */
    caret-color: #092657 !important;             /* Cursor-Farbe */
}

/* 2. Platzhalter (Placeholder) getrennt ansprechen */
.contact-form-wrap .cf-form input::placeholder,
.contact-form-wrap .cf-form textarea::placeholder,
.contact-form-wrap .cf-input::placeholder,
.contact-form-wrap .cf-form-control::placeholder {
    color: #092657 !important;
    -webkit-text-fill-color: #092657 !important;
    opacity: 0.6 !important;                     /* Optional: etwas dezenter als getippter Text */
}

/* Browser-Präfixe für Placeholder */
.contact-form-wrap .cf-form input::-webkit-input-placeholder,
.contact-form-wrap .cf-form textarea::-webkit-input-placeholder {
    color: #092657 !important;
    -webkit-text-fill-color: #092657 !important;
}

/* 3. Eventuelle CSS-Variablen von Convert Forms im Container überschreiben */
.contact-form-wrap,
.contact-form-wrap .cf-form {
    --cf-field-color: #092657 !important;
    --cf-placeholder-color: #092657 !important;
}

/* --- Spalte 3: Kontaktdaten Typografie & Liste --- */

.mask_contact {
  position: relative;
  top: -12px;
}

@media (max-width: 767.98px) {  
.mask_contact {
  left: clamp(0%, 38.16vw - 139.28px, 20%);
}   
}

@media (min-width: 768px) {  
.mask_contact {
  top:20px !important;
}   
}

@media (min-width: 1200px) {  
.mask_contact {
  top:18px !important;
}   
}

/* Überschrift: Ubuntu */
.mask_contact .headline {
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #092657;
    line-height: 1.3;
    margin-bottom: 15px;
}

@media (max-width: 991.98px) { 
.mask_contact .headline {
        margin-top: 60px;
}
}

/* Fließtext: Sentient */
.mask_contact .bodytext {
    font-family: 'Sentient', Georgia, serif;
    font-size: 17px; /* Bei Serif-Schriften wie Sentient oft 1-2px größer für gleiche optische Wirkung */
    font-weight: 400;
    line-height: 1.5;
    color: #092657;
    margin-bottom: 25px;
}

/* Kontaktliste: Sentient */
.mask_contact ul.contact-list {
    padding-left: 0;
    margin-bottom: 0;
}

.mask_contact ul.contact-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    font-family: 'Sentient', Georgia, serif;
    font-size: 16px;
    line-height: 1.2;
    color: #092657;
}

@media (min-width:768px) and (max-width: 1199.98px) {  
/* Überschrift: Ubuntu */
.mask_contact .headline {
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 15px;
}

/* Fließtext: Sentient */
.mask_contact .bodytext {
    font-family: 'Sentient', Georgia, serif;
    font-size: 16px; /* Bei Serif-Schriften wie Sentient oft 1-2px größer für gleiche optische Wirkung */
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Kontaktliste: Sentient */
.mask_contact ul.contact-list {
    padding-left: 0;
    margin-bottom: 0;
}

.mask_contact ul.contact-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    font-family: 'Sentient', Georgia, serif;
    font-size: 16px;
    line-height: 1.2;
    color: #092657;
}
}

/* Links (Telefon, Mail): Sentient */
.mask_contact ul.contact-list li a {
    font-family: 'Sentient', Georgia, serif;
    color: #092657;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mask_contact ul.contact-list li a:hover {
    opacity: 0.75;
    text-decoration: underline;
}

/* Icon-Ausrichtung beibehalten */
.mask_contact ul.contact-list .icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    margin-right: 12px;
    margin-top: 3px;
    color: #092657;
}

.mask_contact ul.contact-list .icon-wrap svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

/* Wappen */
.crest-item {
  margin-top: 5px;
  position: relative;
  top: 3px;
}


/* ==========================================================================
   Page Builder CK: Typografie für Unterseiten
   ========================================================================== */

[data-type="heading"][data-align] > .inner .titleck {
  flex: 0 1 auto !important;
  width: 100% !important;
}

   /* Dachzeile (H2) */
.com-content-article__body .pagebuilderck h2.titleck,
.pagebuilderck h2.titleck {
    font-family: 'Sentient', Georgia, serif !important;
    font-weight: 500 !important;
    font-style: italic !important;
    font-size: 40px !important;
    line-height: 0.7 !important;
    color: #092657 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* Hauptüberschrift (H1) */
.com-content-article__body .pagebuilderck h1.titleck,
.pagebuilderck h1.titleck {
    font-family: 'Sentient', Georgia, serif !important;
    font-weight: 300 !important;
    font-style: italic !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    color: #092657 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

/* Fließtext (Sentient) */
/*.com-content-article__body .pagebuilderck .cktext p,
.pagebuilderck .cktext p {
    font-family: 'Sentient', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #092657 !important;
    margin-bottom: 1.5rem !important;
}*/

/* Fetter Einleitungsabsatz */
.com-content-article__body .pagebuilderck .cktext p:first-of-type strong,
.pagebuilderck .cktext p:first-of-type strong {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

strong {font-weight: 500 !important;}

.com-content-article__body .pagebuilderck a.morelink,
.pagebuilderck a.morelink {
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'Sentient', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #092657 !important;
    text-decoration: none !important;
    text-underline-offset: 4px !important;
    position: relative !important;
    padding-left: 28px !important; /* Platz für den Pfeil links schaffen */
    transition: color 0.2s ease, transform 0.2s ease !important;
}

/* Der dunkelblaue Pfeil (Back-to-Top-Pfeil um 90° nach rechts gedreht) */
.com-content-article__body .pagebuilderck a.morelink::before,
.pagebuilderck a.morelink::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important; /* Nicht klick-/verweissensitiv */
    
    /* Exaktes SVG unseres Pfeils (Dunkelblau #092657) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23092657' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    
    /* 90 Grad nach rechts drehen & vertikal zentrieren */
    transform: translateY(-50%) rotate(90deg) !important;
    transition: transform 0.2s ease !important;
}

/* Hover-Effekt: Text wird gelb, Pfeil schiebt sich 3px nach rechts */
.com-content-article__body .pagebuilderck a.morelink:hover,
.pagebuilderck a.morelink:hover {
    text-decoration: underline !important;
}

.com-content-article__body .pagebuilderck a.morelink:hover::before,
.pagebuilderck a.morelink:hover::before {
    transform: translateY(-50%) rotate(90deg) translateY(-3px) !important;
}

/* Responsiv für Smartphones & Tablets und kleine Bildschirme */
@media (max-width: 1199.98px) {
    .com-content-article__body .pagebuilderck h1.titleck,
    .pagebuilderck h1.titleck {
        font-size: 32px !important;
        margin-bottom: 18px !important;
        text-align: center !important;
    }

    .com-content-article__body .pagebuilderck h2.titleck,
    .pagebuilderck h2.titleck {
        font-size: 26px !important;
        text-align: center !important;
        margin-top: clamp(10px, 4.2vw - 5px, 45px) !important;
    }

    .com-content-article__body .pagebuilderck .cktext p,
    .pagebuilderck .cktext p {
        font-size: 16.5px !important;
        text-align: center !important;
    }
}

/* H3 Überschrift (Sentient, 19px, Regular) */
.com-content-article__body .pagebuilderck h3.titleck,
.pagebuilderck h3.titleck,
.com-content-article__body h3,
.item-page h3 {
    font-family: 'Sentient', Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    color: #092657 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

/* ==========================================================================
   Ungeordnete Listen (ul) mit gelbem Pfeil-Icon
   ========================================================================== */

.com-content-article__body .pagebuilderck ul,
.pagebuilderck ul,
.item-page ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 1.5rem !important;
}

.com-content-article__body .pagebuilderck ul li,
.pagebuilderck ul li,
.item-page ul li {
    position: relative !important;
    padding-left: 26px !important; /* Platz für den gelben Pfeil */
    margin-bottom: 10px !important;
    font-family: 'Sentient', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    color: #092657 !important;
}

/* Der gelbe Pfeil (um 90° nach rechts gedreht) */
.com-content-article__body .pagebuilderck ul li::before,
.pagebuilderck ul li::before,
.item-page ul li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important; /* Exakt an der ersten Textzeile ausgerichtet */
    width: 15px !important;
    height: 15px !important;
    pointer-events: none !important;

    /* Identisches SVG, Stroke auf #ffda00 gesetzt (%23ffda00) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffda00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    /* 90 Grad nach rechts drehen */
    transform: rotate(90deg) !important;
}

/* ==========================================================================
   Akkordeon: Gemeinden & Unterseiten-Inhalte (Custom Arrows & Dashed Lines)
   ========================================================================== */

.subpage-accordion-container {
    margin-top: 30px;
    margin-bottom: 50px;
}

/* Dunkelblaue, gestrichelte Trennlinien */
.medelby-accordion .accordion-item {
    background: transparent;
    border: none;
    border-bottom: 1px dashed #092657;
    border-radius: 0;
}

.medelby-accordion .accordion-item:first-of-type {
    border-top: 1px dashed #092657;
}

/* Accordion-Header Button */
.medelby-accordion .accordion-button {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 16px 5px !important;
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    border: none !important;
    cursor: pointer !important;
    text-align: left !important;
    position: relative !important;
}

.medelby-accordion .accordion-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Titel exakt wie H3: Sentient, 19px, 400 (BLEIBT STEHEN) */
.medelby-accordion .accordion-button .title,
.medelby-accordion h3.accordion-header {
    font-family: 'Sentient', Georgia, serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    color: #092657 !important;
    margin: 0 !important;
    transition: color 0.2s ease;
}

.medelby-accordion .accordion-button:hover .title {
    color: #092657 !important;
}

/* 1. Der runde Kreis mit gelbem Rahmen (5px größer: 43px) */
.medelby-accordion .accordion-button::after {
    content: '' !important;
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
    border-radius: 50% !important;
    border: 1px solid #ffda00 !important;
    background-color: #ffffff !important;
    margin-left: auto !important;
    display: block !important;
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
    z-index: 1 !important;
}

/* 2. Der Pfeil exakt zentriert im Kreis (zeigt nach unten) */
.medelby-accordion .accordion-button::before {
    content: '' !important;
    position: absolute !important;
    right: 26.5px !important; /* Exakte Kreis-Mittelachse bei 5px Button-Padding */
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23092657' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    
    /* Perfekt mittig verankert und 180° nach unten gerichtet */
    transform: translate(50%, -50%) rotate(180deg) !important;
    transition: transform 0.25s ease, background-image 0.25s ease !important;
}

/* 3. Aufgeklappt: Pfeil dreht nach oben (bleibt exakt zentriert) */
.medelby-accordion .accordion-button:not(.collapsed)::before {
    transform: translate(50%, -50%) rotate(0deg) !important;
}
/* 4. Hover: Kreis wird dunkelblau (#092657), Pfeil wird weiß */
.medelby-accordion .accordion-button:hover::after {
    background-color: #092657 !important;
    border-color: #092657 !important;
}

.medelby-accordion .accordion-button:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Inhaltsbereich (Auf- & Zuklappen) */
.medelby-accordion .accordion-collapse {
    display: block;
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 1;
}

.medelby-accordion .accordion-collapse.is-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Aufgeklappter Inhalt (Sentient) */
.medelby-accordion .accordion-body {
    padding: 10px 5px 25px 5px;
    font-family: 'Sentient', Georgia, serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: #092657;
}

.medelby-accordion .accordion-img-wrap img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* ==========================================================================
   Akkordeon: 2-Spalten-Layout (Bild fest 198px links, Text rechts mit 25px)
   ========================================================================== */

@media (min-width: 768px) {
    .medelby-accordion .accordion-body-flex {
        display: flex !important;
        align-items: flex-start !important;
        gap: 25px !important; /* Exakt 25px Abstand zwischen Bild und Text */
    }

    /* Bildcontainer fest auf 198px fixieren */
    .medelby-accordion .accordion-body-flex .accordion-img-wrap {
        flex: 0 0 198px !important;
        width: 198px !important;
        max-width: 198px !important;
        min-width: 198px !important;
        margin-bottom: 0 !important;
    }

    /* Textspalte füllt den gesamten verbleibenden Raum */
    .medelby-accordion .accordion-body-flex .accordion-content-text {
        flex: 1 1 auto !important;
        min-width: 0 !important; /* Verhindert Flexbox-Overflow */
    }
}

/* Bild füllt die 198px voll aus */
.medelby-accordion .accordion-body-flex .accordion-img-wrap img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px !important;
}

/* Mobil unter 768px */
@media (max-width: 767.98px) {
    .medelby-accordion .accordion-body-flex .accordion-img-wrap {
        width: 198px !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   Abstandskorrektur: Unterseiten-Inhalt zum Kontaktmodul (ca. 60px)
   ========================================================================== */

/* 1. Das übermäßige Padding des Outer-Frames auf Unterseiten deckeln */
.mask_subpageIntro,
.frame:has(.mask_subpageIntro),
.frame-space-after-extra-large:has(.mask_subpageIntro) {
    padding-bottom: 40px !important;
}

/* 2. Container-Narrow Margin nach unten bereinigen */
.mask_subpageIntro .container-narrow {
    margin-bottom: 20px !important;
}

/* 3. Sicherstellen, dass alle Morelink-Absätze sichtbar bleiben */
.com-content-article__body .pagebuilderck p:has(a.morelink) {
    display: block !important;
}

/* 4. Nur den wirklich leeren Abschlussblock von Page Builder CK neutralisieren */
#ID1791185857450 {
    display: none !important;
}


/* ==========================================================================
   Newsbereich / Aktuelles Unterseite
   ========================================================================== */

.news-list-container {
    margin-top: 30px;
    margin-bottom: 50px;
    border-top: 1px dashed #092657;
    border-bottom: 1px dashed #092657;    
}

/* Einzelne Beitragszeile mit dunkelblauer dashed Border */
.news-list-container .news-item-wrap {
    padding-top: 35px;
    padding-bottom: 35px;
    border-bottom: 1px dashed #092657;
}

.news-list-container .news-item-wrap:first-of-type {
    padding-top: 15px;
}

.news-list-container .news-item-wrap:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

/* Bildspalte links */
.news-list-container .news-image {
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .news-list-container .news-image {
        margin-bottom: 0;
        padding-right: 25px;
    }
}

.news-list-container .news-image img {
    width: 100%;
    height: auto;
    max-height: 265px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(9, 38, 87, 0.06);
    transition: transform 0.25s ease;
}

.news-list-container .news-image a:hover img {
    transform: scale(1.02);
}

/* Titel (Sentient / Ubuntu H3 Look) */
.news-list-container .news-text .mainline {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.news-list-container .news-text .mainline a {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #092657 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.news-list-container .news-text .mainline a:hover {
    color: #ffda00 !important;
}

/* Teaser-Text (Sentient) */
.news-list-container .news-text .bodytext {
    font-family: 'Sentient', Georgia, serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    color: #092657;
    margin-bottom: 15px;
}

.news-list-container .news-text .bodytext p {
    margin-bottom: 10px;
}

/* Weiterlesen-Link mit Pfeil */
.news-list-container .news-text a.morelink {
    margin-top: 5px;
}

/* ==========================================================================
   Morelink: Dunkelblauer Pfeil-Link (nur bei expliziter Klasse .morelink)
   ========================================================================== */

a.morelink {
    font-family: 'Sentient', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #092657 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.2s ease !important;
}

/* Der gedrehte Medelby-Pfeil davor */
a.morelink::before {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23092657' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transform: rotate(90deg) !important; /* Nach rechts zeigend */
    transition: transform 0.2s ease !important;
}

/* Hover: Text unterstrichen, Pfeil rückt 2px nach rechts */
a.morelink:hover {
    color: #092657 !important;
    text-decoration: underline !important;
}

a.morelink:hover::before {
    filter: none !important;
    text-decoration: none !important;
    transform: rotate(90deg) translateX(2px) !important;
}

/* ==========================================================================
   Standard-Links im Beitrags-Fließtext (Impressum, Datenschutz, Fließtext)
   ========================================================================== */

.item-page p a:not(.morelink):not(.btn),
.item-page li a:not(.morelink):not(.btn) {
    color: #092657 !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    display: inline !important;
}

.item-page p a:not(.morelink):not(.btn):hover,
.item-page li a:not(.morelink):not(.btn):hover {
    text-decoration: underline !important;
}

.item-page p a:not(.morelink):not(.btn)::before,
.item-page li a:not(.morelink):not(.btn)::before {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   Globale Textmarkierung (Selection) im CI-Gelb
   ========================================================================== */

::selection {
    background-color: #FFF800 !important;
    color: #092657 !important;
}

::-moz-selection {
    background-color: #FFF800 !important;
    color: #092657 !important;
}

/* ==========================================================================
   Unterseiten OHNE Bild (Impressum, Datenschutz etc.)
   ========================================================================== */

/* Versteckt eventuell leere Bild-Wrapper */
.has-no-hero .intro-img-wrap,
.has-no-hero .img-container {
    display: none !important;
}

/* 1. Die künstlichen Margin-Tops komplett auf 0 zurücksetzen */
.has-no-hero .component-content,
.is-subpage .has-no-hero .item-page,
.has-no-hero .item-page {
    margin-top: 0 !important;
}

/* 2. Den übermäßigen oberen Innenabstand des Intros für alle Screens neutralisieren */
.has-no-hero .container-narrow,
.container-narrow.has-no-hero,
.mask_subpageIntro.has-no-hero .container-narrow,
.is-subpage.has-no-hero .container-narrow {
    padding-top: 40px !important;
    margin-top: 0 !important;
}

@media (min-width: 1200px) {
    .has-no-hero .container-narrow,
    .container-narrow.has-no-hero,
    .mask_subpageIntro.has-no-hero .container-narrow,
    .is-subpage.has-no-hero .container-narrow {
        padding-top: 60px !important;
    }
}

/* ==========================================================================
   Responsive Navigation (< 1200px) - DJ-MegaMenu Offcanvas Aside
   ========================================================================== */

@media (max-width: 1199.98px) {

    /* --- 1. Runder weißer Burger-Button (Immer sichtbar & ganz oben) --- */
    .dj-megamenu-wrapper .dj-mobile-open-btn,
    .dj-offcanvas-top .dj-offcanvas-close-btn {
        width: 48px !important;
        height: 48px !important;
        background-color: #ffffff !important;
        border-radius: 50% !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(9, 38, 87, 0.15) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        position: fixed !important;
        top: 25px !important;
        right: 25px !important;
        z-index: 99999 !important; /* Über ALLEM anderen */
        transition: background-color 0.25s ease !important;
    }

    .dj-megamenu-wrapper .dj-mobile-open-btn:hover,
    .dj-offcanvas-top .dj-offcanvas-close-btn:hover {
        background-color: rgba(255, 255, 255, 0.75) !important;
    }

    .dj-mobile-open-btn::before,
    .dj-mobile-open-btn::after,
    .dj-offcanvas-close-btn::before,
    .dj-offcanvas-close-btn::after {
        display: none !important;
    }

    /* --- 2. Die drei dunkelblauen Linien des Burgers --- */
    .dj-mobile-open-btn .dj-mobile-open-icon {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background-color: #092657 !important;
        border-radius: 2px !important;
        position: relative !important;
        transition: background-color 0.25s ease, transform 0.25s ease !important;
    }

    .dj-mobile-open-btn .dj-mobile-open-icon::before,
    .dj-mobile-open-btn .dj-mobile-open-icon::after {
        content: '' !important;
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background-color: #092657 !important;
        border-radius: 2px !important;
        position: absolute !important;
        left: 0 !important;
        transition: transform 0.25s ease !important;
    }

    .dj-mobile-open-btn .dj-mobile-open-icon::before {
        top: -7px !important;
    }

    .dj-mobile-open-btn .dj-mobile-open-icon::after {
        bottom: -7px !important;
    }

    /* --- 3. Verwandlung in ein Kreuz & Close-Button im Menü --- */
    body.dj-offcanvas-opened .dj-mobile-open-btn .dj-mobile-open-icon,
    .dj-mobile-open-btn.active .dj-mobile-open-icon,
    .dj-mobile-open-btn.opened .dj-mobile-open-icon {
        background-color: transparent !important;
    }

    body.dj-offcanvas-opened .dj-mobile-open-btn .dj-mobile-open-icon::before,
    .dj-mobile-open-btn.active .dj-mobile-open-icon::before,
    .dj-mobile-open-btn.opened .dj-mobile-open-icon::before {
        top: 0 !important;
        transform: rotate(45deg) !important;
    }

    body.dj-offcanvas-opened .dj-mobile-open-btn .dj-mobile-open-icon::after,
    .dj-mobile-open-btn.active .dj-mobile-open-icon::after,
    .dj-mobile-open-btn.opened .dj-mobile-open-icon::after {
        bottom: 0 !important;
        transform: rotate(-45deg) !important;
    }

    /* Der native Close-Button von DJ-MegaMenu als perfektes dunkelblaues Kreuz gestylt */
    .dj-offcanvas-close-icon {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        position: relative !important;
    }

    .dj-offcanvas-close-icon::before,
    .dj-offcanvas-close-icon::after {
        content: '' !important;
        position: absolute !important;
        top: 9px !important;
        left: 0 !important;
        width: 20px !important;
        height: 2.5px !important;
        background-color: #092657 !important;
        border-radius: 2px !important;
    }

    .dj-offcanvas-close-icon::before {
        transform: rotate(45deg) !important;
    }

    .dj-offcanvas-close-icon::after {
        transform: rotate(-45deg) !important;
    }

    .dj-offcanvas-top {
        display: block !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* --- 4. Das Aside als gelbes Vollbild --- */
    aside#dj-megamenu110offcanvas,
    aside.dj-offcanvas {
        background-color: #ffda00 !important; /* Medelby Gelb */
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 90000 !important;
        box-sizing: border-box !important;
        border: none !important;
        box-shadow: none !important;
        overflow-y: auto !important;
    }

    .dj-offcanvas-content {
        padding: 100px 30px 60px 30px !important;
        background-color: transparent !important;
    }

    .dj-offcanvas-overlay {
        display: none !important;
    }

    /* --- 5. Hauptpunkte: Links & untereinander mit Abstand --- */
    aside#dj-megamenu110offcanvas ul.dj-mobile-nav {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    aside#dj-megamenu110offcanvas li.dj-mobileitem {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        display: block !important;
        cursor: pointer;
    }

    /* Weiße Kapsel / Pille für Haupt-Links */
    aside#dj-megamenu110offcanvas li.dj-mobileitem > a {
        background-color: #ffffff !important;
        color: #092657 !important;
        font-family: 'Ubuntu', sans-serif !important;
        font-weight: 400 !important;
        font-size: 18px !important;
        padding: 11px 26px !important;
        border-radius: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-decoration: none !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
        transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
    }

    /* --- 6. Untermenüs: Sauber eingeklappt & JS-freundlich --- */
    aside#dj-megamenu110offcanvas ul.dj-mobile-nav-child {
        display: none; /* Kein !important, damit DJ-MegaMenus JS inline 'display: block' setzen kann! */
        list-style: none !important;
        padding: 6px 0 6px 0 !important;
        margin: 8px 0 4px 15px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Fallback für alle Klassen & Attribute, die DJ-MegaMenu beim Klick setzt */
    aside#dj-megamenu110offcanvas li.dj-mobileitem.open > ul.dj-mobile-nav-child,
    aside#dj-megamenu110offcanvas li.dj-mobileitem.opened > ul.dj-mobile-nav-child,
    aside#dj-megamenu110offcanvas li.dj-mobileitem.show > ul.dj-mobile-nav-child,
    aside#dj-megamenu110offcanvas li.dj-mobileitem > a[aria-expanded="true"] + ul.dj-mobile-nav-child,
    aside#dj-megamenu110offcanvas ul.dj-mobile-nav-child[style*="display: block"],
    aside#dj-megamenu110offcanvas ul.dj-mobile-nav-child[style*="display: flex"] {
        display: flex !important;
    }

    aside#dj-megamenu110offcanvas ul.dj-mobile-nav-child li.dj-mobileitem {
        margin-bottom: 4px !important;
    }

    /* Untermenü-Pillen */

    /* Basis Untermenü-Links (weiß) */
    aside#dj-megamenu110offcanvas ul.dj-mobile-nav-child li.dj-mobileitem > a {
        font-size: 16px !important;
        padding: 8px 22px !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        color: #092657 !important;
    }

    /* Hover & Active / Current (Klasse auf <li> ODER direkt auf <a>) */
    aside#dj-megamenu110offcanvas li.dj-mobileitem > a:hover,
    aside#dj-megamenu110offcanvas li.dj-mobileitem.active > a,
    aside#dj-megamenu110offcanvas li.dj-mobileitem.current > a,
    aside#dj-megamenu110offcanvas li.dj-mobileitem > a.active,
    aside#dj-megamenu110offcanvas li.dj-mobileitem > a.current,
    aside#dj-megamenu110offcanvas ul.dj-mobile-nav-child li.dj-mobileitem.active > a,
    aside#dj-megamenu110offcanvas ul.dj-mobile-nav-child li.dj-mobileitem.current > a,
    aside#dj-megamenu110offcanvas ul.dj-mobile-nav-child li.dj-mobileitem > a.active,
    aside#dj-megamenu110offcanvas ul.dj-mobile-nav-child li.dj-mobileitem > a.current {
        background-color: #092657 !important;
        color: #ffffff !important;
        transform: translateX(4px) !important;
    }

    /* Stellt sicher, dass auch innere Spans/Texte weiß werden */
    aside#dj-megamenu110offcanvas li.dj-mobileitem.active > a *,
    aside#dj-megamenu110offcanvas li.dj-mobileitem.current > a *,
    aside#dj-megamenu110offcanvas li.dj-mobileitem > a.active *,
    aside#dj-megamenu110offcanvas li.dj-mobileitem > a.current * {
        color: #ffffff !important;
    }

    /* Toggler (Aufklapp-Pfeil) */
    aside#dj-megamenu110offcanvas .toggler {
        display: inline-block !important;
        width: 9px !important;
        height: 9px !important;
        border-right: 2.5px solid #092657 !important;
        border-bottom: 2.5px solid #092657 !important;
        transform: rotate(45deg) !important;
        margin-left: 6px !important;
        transition: transform 0.2s ease !important;
    }

    aside#dj-megamenu110offcanvas li.dj-mobileitem.open > a .toggler,
    aside#dj-megamenu110offcanvas li.dj-mobileitem.opened > a .toggler {
        transform: rotate(-135deg) !important;
    }

    aside#dj-megamenu110offcanvas li.dj-mobileitem > a:hover .toggler,
    aside#dj-megamenu110offcanvas li.dj-mobileitem.active > a .toggler {
        border-color: #ffffff !important;
    }
}


/* ==========================================================================
   Back to Top: Floating Button (Weißer Kreis, Slider-Stil mit SVG)
   ========================================================================== */

.back-to-top-wrap {
    position: fixed;
    bottom: 35px;
    right: 200px; /* Ca. 200px vom rechten Fensterrand auf Desktop */
    z-index: 9999;
    pointer-events: none;
}

.back-to-top-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background-color: #ffffff;
    border: 1px solid #ffda00;
    border-radius: 50%;
    color: #092657;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto !important;
    
    /* Im Ruhezustand (oben) ausgeblendet */
    opacity: 1;            /* zum Testen von 0 auf 1 */
    visibility: visible;   /* zum Testen von hidden auf visible */
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Sichtbar nach Scrollen */
.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover: Dunkelblau mit gelbem Pfeil & leichtem Anheben */
.back-to-top-btn:hover {
    background-color: #092657;
    border-color: #092657;
    color: #ffda00;
    transform: translateY(-3px);
}

.back-to-top-btn svg {
    display: block;
    transition: transform 0.2s ease;
}

/* Mobilgeräte */
@media (max-width: 767.98px) {
    .back-to-top-btn svg {
        margin-top: 10.5px !important;
        margin-left: 10.5px !important;
    }
}

.back-to-top-btn:hover svg {
    transform: translateY(-2px);
}

/* Große Bildschirme / Laptops: 80px */
@media (max-width: 1399.98px) {
    .back-to-top-wrap {
        right: 80px;
    }
}

/* Tablets (Quer- und Hochformat): 40px */
@media (max-width: 991.98px) {
    .back-to-top-wrap {
        right: 40px;
    }
}

/* Smartphones: dein bewährter Abstand und Button-Größe */
@media (max-width: 767.98px) {
    .back-to-top-wrap {
        bottom: 20px;
        right: 20px;
    }
    .back-to-top-btn {
        width: 42px;
        height: 42px;
    }
}

/* ==========================================================================
   Footer: Layout, Vertikale Zentrierung & Responsives Verhalten
   ========================================================================== */

/* 1. Negativen Überhang von Sektionen davor neutralisieren (verhindert das Verschwinden bei 768-991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .contact-section-yellow,
    .frame:has(.contact-section-yellow),
    .frame-space-after-medium:has(.contact-section-yellow) {
        margin-bottom: 0 !important;
    }
}

/* 2. Footer-Hauptcontainer */
footer,
.page-footer,
.footer,
.mask_footer {
    position: relative;
    z-index: 50;
    width: 100%;
    background-color: #ffffff;
}

@media (max-width: 767.98px) {
    footer,
.page-footer,
.footer,
.mask_footer {
    padding: 0 !important;
}
}
@media (min-width: 768px) {
    footer,
.page-footer,
.footer,
.mask_footer {
    padding: 30px 0;
}
}
@media (min-width: 992px) {
    footer,
.page-footer,
.footer,
.mask_footer {
    padding: 0 0 30px 0;
}
}

/* 3. Zeile im Footer: Vertikal mittig ausrichten (behebt das Kleben am unteren Rand ab 992px) */
footer .row,
.mask_footerbar .row,
.footer .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* ==========================================================================
   Footer Breakpoints: Mobil (< 768px) vs. Desktop (ab 768px)
   ========================================================================== */

/* --- Mobil (< 768px): Mittig untereinander, Wappen ganz unten --- */
@media (max-width: 767.98px) {
    /* 1. Hauptwrapper auf volle Breite und ohne asymmetrische Ränder */
    .mask_footerbar {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    /* 2. Container/Row zentrieren */
    footer .container,
    .mask_footerbar .container,
    footer .row,
    .mask_footerbar .row {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* 3. Spalten auf volle Breite und mittig */
    .mask_footerbar [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 4. Listen-Padding des Browsers killen */
    .mask_footerbar ul,
    .mask_footerbar nav {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        list-style: none !important;
    }

    .mask_footerbar li {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. Asymmetrischen Rand von .std-link neutralisieren */
    .mask_footerbar .std-link,
    .footer-links a,
    .mask_footerbar a {
        display: inline-block !important;
        margin: 0 auto !important; /* Hebt das margin-right: 15px restlos auf */
        text-align: center !important;
    }

    /* 6. Wappen ganz unten zentriert */
    .crest-item,
    .footer-logo,
    .footer-crest {
        width: 100% !important;
        margin: 25px auto 0 auto !important;
        top: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .crest-item img,
    .footer-crest img {
        margin: 0 auto !important;
        display: block !important;
    }
}

/* --- Ab 768px (Tablet & Desktop): In einer Linie, linksbündig & vertikal zentriert --- */
@media (min-width: 768px) {
    .mask_footerbar {
        margin: 0 auto !important;
        text-align: left !important;
    }

    footer .row,
    .mask_footerbar .row,
    .footer .row {
        flex-direction: row !important;
        align-items: center !important;
    }

    /* Links nebeneinander in einer Linie */
    .mask_footerbar ul,
    .mask_footerbar nav,
    .footer-links {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 15px !important;
        order: 1 !important;
    }

    .mask_footerbar .std-link,
    .footer-links a {
        margin-right: 0 !important;
    }

    /* Wappen rechtsbündig auf gleicher Höhe */
    .crest-item,
    .footer-logo,
    .footer-crest {
        order: 2 !important;
        margin-top: 0 !important;
        top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
}