/* =========================================================
   01 – ALLGEMEINE HILFSKLASSEN
   ========================================================= */

/* Elemente ausblenden */
.houdini {
    display: none;
}

/* Zusätzlicher Abstand unter H2 */
.h2mitmehrabstand h2 {
    margin-bottom: 34px;
}


/* =========================================================
   02 – ÜBERSCHRIFTEN UND FARBEN
   ========================================================= */

/* H3 optisch wie H2 darstellen */
.kf-theme-scope h3.h2,
.h2 h3 {
    margin-bottom: 32px !important;
    font-size: 1.375rem !important;
    margin-top: 38px !important;

}

/* Orange Schrift */
h1.orange,
h2.orange,
p.orange,
.orange h2,
.orange ul li::marker,
.kf-theme-scope .kf-color-primary-contrast h1.orange,
.kf-theme-scope .kf-bg-primary.kf-color-primary-contrast h2.orange,
.kf-theme-scope .kf-bg-primary .kf-color-primary-contrast .orange h2 {
    color: #ff6600;
}

/* Dunkelblaue Überschrift */
.kf-theme-scope .ultimate-renderer-scope h2.darkblue {
    color: #012f63;
    font-size: clamp(2rem, 4vw, 3rem);
}


/* =========================================================
   03 – FULL-WIDTH-ELEMENTE
   ========================================================= */

/* Full-Width-Herobilder bei gesetzter Klasse .fullwidth */
.fullwidth {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.fullwidth img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Verhindert horizontales Scrollen durch Elemente,
 * die mit 100vw über den Inhaltsbereich hinausgehen.
 */
body {
    overflow-x: hidden;
}

@media (min-width: 1492px) {
    .kf-theme-scope .fullwidth .container-xl,
    .kf-theme-scope .fullwidth .container-lg,
    .kf-theme-scope .fullwidth .container-md,
    .kf-theme-scope .fullwidth .container-sm,
    .kf-theme-scope .fullwidth .container {
        max-width: none;
        margin-bottom: 0;
    }
}


/* =========================================================
   04 – MINDESTHÖHEN FÜR BOXEN
   ========================================================= */

@media (min-width: 1024px) {
    .minheight140,
    .minheight170,
    .minheight334 {
        display: inline-block;
        width: 100%;
    }

    .minheight140 {
        min-height: 140px;
    }

    .minheight170 {
        min-height: 170px;
    }

    .minheight334 {
        min-height: 334px;
    }
}


/* =========================================================
   05 – ZITATBOX
   ========================================================= */

.blockquote p {
    margin: 15px 0;
    padding: 20px;
    border-left: 6px solid #ff6600;
    background: #d9e0e8;
    color: #002d67;
    line-height: 1.5;
}

.blockquote p em {
    font-style: normal;
}

/* Öffnendes Anführungszeichen */
.blockquote p em::before {
    content: "“";
    display: inline-block;
    margin-right: 6px;
    color: #002d67 !important;
    font-size: 3.8em;
    line-height: 0;
    vertical-align: -0.45em;
}


/* =========================================================
   06 – AUTOMATISCHE TEXTSPALTEN
   ========================================================= */

.columnize .checked {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .columnize .checked {
        column-count: 2;
        column-gap: 34px;
    }
}

@media (min-width: 1000px) {
    .columnize .checked {
        column-count: 3;
    }
}


/* =========================================================
   07 – MOBILE ABSTÄNDE
   ========================================================= */

/* Reduziert Abstände bei Layouts innerhalb von Layouts */
@media (max-width: 767px) {
    .nomargedownonmobile .stretchable-col {
        margin-bottom: 0 !important;
    }
}


/* =========================================================
   08 – FILIALSEITEN
   ========================================================= */

/* Icon-Hack für weniger Weißraum – 13.05.2026 */
@media (min-width: 1024px) {
    .fengshui .media {
        margin-top: 45px;
    }

    .fengshui .h-100 {
        min-height: 546px;
    }

    .fengshui svg {
        width: 160px;
        height: 160px;
    }
}

/* Darstellung Filialleitung */
@media (min-width: 1024px) {
    .filialleitung img.dynamic-image {
        display: block;
        width: 311px !important;
        height: 248px !important;
        object-fit: cover;
        object-position: center top;
    }

    .filialleitung .teaser.stretchable.w-100 {
        width: 100% !important;
        max-height: calc(100% - 8px);
        box-shadow: none;
    }
}


/* =========================================================
   09 – TEASER OHNE CTA-BUTTON
   ========================================================= */

.nobuttonfix .justify-content-between,
.nobuttonfix .kf-theme-scope .justify-content-between {
    justify-content: unset !important;
}


/* =========================================================
   10 – PRIVATE BANKING
   ========================================================= */

.kf-theme-scope .michele1 h3,
.michele1 h3 {
    font-size: 38px !important;
    line-height: 1.2 !important;
    margin-top:2em
}


/* =========================================================
   11 – 50/50-TEASER
   ========================================================= */

.kf-theme-scope .fiftyorangeteaser h2.cms-teaser-50-heading-container,
.kf-theme-scope .fiftyorangeteaser h2.cms-header,
.fiftyorangeteaser h2 {
    color: #f35e01 !important;
}


/* =========================================================
   12 – VIDEO-GRID HELDENAWARD – 08/2026
   ========================================================= */

.media-panel {
    margin: 0 14px;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.02),
        0 6px 18px rgba(0, 0, 0, 0.04);
}

.media-panel .cms-layout--row {
    gap: 34px;
}

.media-panel .cms-layout--column {
    padding: 24px 12px;
}

.media-panel h2 {
    margin-bottom: 10px;
}

.media-panel h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: #004b9b;
}

.media-panel p {
    margin-top: 0;
    line-height: 1.6;
}

.media-panel .video-tile {
    overflow: hidden;
    border-radius: 10px;
}

@media (min-width: 1000px) {
    .media-panel cms-video-audio {
        display: block;
        min-width: 360px;
    }
}


/* =========================================================
   13 – ORANGER BUTTON
   ========================================================= */

.kf-theme-scope .btnorange .mdc-button,
.btnorange .kf-theme-scope .mdc-button,
.btnorange .cms-button.cms-button-primary {
    background: #f35e01;
}

.btnorange .mdc-button__label span {
    width: auto !important;
    color: #ffffff;
    font-size: 16px;
}


/* =========================================================
   14 – ORANGER TEXT-TEASER
   ========================================================= */

.orangeteaser section .text-teaser-content {
    background: #f35e01;
}

.orangeteaser section .text-teaser-content:hover {
    background: rgba(243, 94, 1, 0.78) !important;
}

.orangeteaser h2,
.orangeteaser p,
.orangeteaser b,
.orangeteaser .kf-icon-font-container {
    color: #ffffff;
}

@media (min-width: 768px) {
    .orangeteaser {
        max-width: 600px !important;
        margin: 0 auto;
    }
}