/* ========================================================= 01 – ALLGEMEINE HILFSKLASSEN ========================================================= */ /* Elemente ausblenden */ .houdini {display: none;} /* Zusätzlicher Abstand unter H2 */ .h2mitmehrabstand h2 { margin-bottom: 34px;} /* ========================================================= 02 – IMMO DER WOCHE - kein Umbruch innerhalb von Wörtern ========================================================= */ .immobilie-der-woche h2,.immobilie-der-woche p { hyphens: none !important;} /* ========================================================= 03 – Ü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, h1 span.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);} /* ========================================================= 04 – 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;}} /* ========================================================= 05 – 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; }} /* ========================================================= 06 – 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;} /* ========================================================= 07 – 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; }} /* ========================================================= 08 – MOBILE ABSTÄNDE ========================================================= */ /* Reduziert Abstände bei Layouts innerhalb von Layouts */ @media (max-width: 767px) { .nomargedownonmobile .stretchable-col {margin-bottom: 0 !important; }} /* ========================================================= 09 – 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; }} /* ========================================================= 10 – TEASER OHNE CTA-BUTTON ========================================================= */ .nobuttonfix .justify-content-between, .nobuttonfix .kf-theme-scope .justify-content-between { justify-content: unset !important;} /* ========================================================= 11 – PRIVATE BANKING ========================================================= */ .kf-theme-scope .michele h3,.michele h3, .michele h2 { font-size: 22px !important; line-height: 26px !important; margin-top: 30px;} /* ========================================================= 12 – 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;} /* ========================================================= 13 – 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; }} /* ========================================================= 14 – ORANGER BUTTON ========================================================= */ .kf-theme-scope .btnorange .mdc-button, .btnorange .kf-theme-scope .mdc-button, .btnorange .cms-button.cms-button-primary { background: #f35e01;} .btnorange kf-icon-font{color: #ffffff; fill:#ffffff; } .btnorange .mdc-button__label span { width: auto !important; color: #ffffff; font-size: 16px;} /* ========================================================= 15 – 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;} .akah1 h2{font-size:38px; color: #002d67; display: inline-block; line-height:1.3em; position: relative;} .akah1 h2::after {content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 6px; background-color: #f35e01; border-radius: 10px;} .akah1 h3{font-size:24px; margin-bottom: 8px;} .kachel p em {font-style: normal !important; color: #555555;font-weight: normal; text-shadow: 2px 1px #ffffff;} @media (min-width: 768px) { .orangeteaser { max-width: 600px !important; margin: 0 auto; }} /* ========================================================= 16 – PRIVATE BANKING CLOSER-FIX ========================================================= */ @media (min-width: 1492px) { .pb-beratungsqualitaet .kf-col-12.kf-col-md-6 {padding-top: 44px !important; }} .akkordeon-image img { max-width:35%; height: auto;} /* Buttons die lang sind und daher nicht zweizeilig umbrechen */ @media(min-width: 600px){.btnlarge .cms-link-button a{min-width: 265px!important;}} @media (min-width: 1200px) { .kf-theme-scope .kf-col-lg.cms-component.kachel,.kf-theme-scope .kf-col-lg-4.kachel{ padding-left: 0px !important; padding-right: 40px!important; }} [_nghost-ng-c2848336588]{padding-bottom:0!important;} /* ========================================== Visual Teaser – horizontale Variante CSS-Klasse: vt-rotated ========================================== */ @media (min-width: 1024px) { /* Hauptcontainer horizontal ausrichten */ .vt-rotated .visual-teaser { flex-direction: row; align-items: stretch; } /* Bildbereich */ .vt-rotated .visual-teaser > .image-slot {flex: 0 0 50%; width: 50%; min-width: 0; margin-block-end: 0; display: flex; overflow: hidden; } /* Bildkomponente auf volle Höhe bringen */ .vt-rotated .image-slot cms-ui-image{display: block; flex: 1 1 auto; width: 100%; height: 100%; min-height: 100%; aspect-ratio: auto !important;} /* Bild vollständig ausfüllen */ .vt-rotated .image-slot cms-ui-image img { width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: cover;} /* Textbereich */ .vt-rotated .visual-teaser > .visual-teaser-container{flex: 1 1 50% !important; min-width: 0; box-sizing: border-box;padding: 1.5rem !important;}} @media (min-width: 1024px) { cms-visual-teaser.vt-rotated .visual-teaser { flex-direction: row !important; align-items: stretch; } cms-visual-teaser.vt-rotated .visual-teaser cms-richtext { -webkit-line-clamp: 5 !important; } cms-visual-teaser.vt-rotated .visual-teaser cms-composite-link h2 { -webkit-line-clamp: 3 !important;}} .sticky-bar-white.cms-component >*{background: #ffffff!important;} cms-sticky-bar.sticky-bar-white .cms-sticky-bar-wrapper::after {content: ""; display: block; position: absolute; top: 100%; left: 0; width: 100vw; height: 10vh; background: #fff; z-index: 999;} cms-sticky-bar.sticky-bar-white .cms-sticky-bar-wrapper.is-stuck::after {height: 0vh;} cms-sticky-bar.sticky-bar-white cms-sticky-bar-desktop{border-bottom: 0!important;} [_nghost-ng-c2848336588] .cms-render-scope>cms-sticky-bar>*+* {margin-block-start: -96px!important; }