/![]()
. */
body.page-11 .frame-type-textmedia .textmedia-item.textmedia-gallery,
body.page-12 .frame-type-textmedia .textmedia-item.textmedia-gallery {
aspect-ratio: auto !important;
overflow: visible !important;
background: transparent !important;
border-radius: 0 !important;
position: relative !important;
}
body.page-11 .frame-type-textmedia .textmedia-gallery figure,
body.page-12 .frame-type-textmedia .textmedia-gallery figure {
margin: 0;
display: block;
}
/* FIX: Legacy-Regel ".textmedia-gallery > div { position: absolute; inset: 0 }"
schließt das Bild aus dem Flow aus und kollabiert die Gallery auf 0 Höhe,
sodass die Sharing-Bar im whitespace verschwindet. Für die Statement-Seiten
wieder Normal-Flow erzwingen, inkl. .gallery-row und .gallery-item: kein
aspect-Trick / padding-bottom, sondern volle Bild+figcaption-Höhe. */
body.page-11 .frame-type-textmedia .textmedia-item.textmedia-gallery > div,
body.page-12 .frame-type-textmedia .textmedia-item.textmedia-gallery > div,
body.page-11 .frame-type-textmedia .textmedia-item.textmedia-gallery > a,
body.page-12 .frame-type-textmedia .textmedia-item.textmedia-gallery > a,
body.page-11 .frame-type-textmedia .textmedia-item.textmedia-gallery .ce-bodytext,
body.page-12 .frame-type-textmedia .textmedia-item.textmedia-gallery .ce-bodytext,
body.page-11 .frame-type-textmedia .textmedia-gallery .gallery-row,
body.page-12 .frame-type-textmedia .textmedia-gallery .gallery-row,
body.page-11 .frame-type-textmedia .textmedia-gallery .gallery-item,
body.page-12 .frame-type-textmedia .textmedia-gallery .gallery-item {
position: static !important;
inset: auto !important;
display: block !important;
height: auto !important;
padding-bottom: 0 !important;
aspect-ratio: auto !important;
overflow: visible !important;
}
body.page-11 .frame-type-textmedia .textmedia-gallery figure picture,
body.page-12 .frame-type-textmedia .textmedia-gallery figure picture {
display: block;
aspect-ratio: 4 / 3;
width: 100%;
overflow: hidden;
border-radius: 4px;
background-color: var(--bdl-blue-pale, #e8eef5);
}
body.page-11 .frame-type-textmedia .textmedia-gallery figure picture img,
body.page-12 .frame-type-textmedia .textmedia-gallery figure picture img,
body.page-11 .frame-type-textmedia .textmedia-gallery figure > img,
body.page-12 .frame-type-textmedia .textmedia-gallery figure > img {
position: static !important;
inset: auto !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block;
aspect-ratio: 4 / 3 !important;
}
/* Vita als figcaption — klein, kursiv, grau, sichtbar unterm Bild */
body.page-11 .frame-type-textmedia figcaption,
body.page-12 .frame-type-textmedia figcaption,
body.page-11 .frame-type-textmedia figcaption.caption,
body.page-12 .frame-type-textmedia figcaption.caption {
display: block !important;
position: static !important;
margin-top: 0.7rem;
padding: 0 0.15rem;
font-family: 'Roboto', sans-serif;
font-size: 0.85rem;
line-height: 1.5;
color: #555;
font-style: italic;
opacity: 1;
visibility: visible;
}
/* Mobile (1-spaltig) — figure und Text untereinander */
@media (max-width: 767px) {
body.page-11 .frame-type-textmedia .textmedia-left,
body.page-11 .frame-type-textmedia .textmedia-right,
body.page-12 .frame-type-textmedia .textmedia-left,
body.page-12 .frame-type-textmedia .textmedia-right {
grid-template-columns: 1fr !important;
}
}
/* ----------- Sharing-Leiste pro Statement ----------- */
.bdl-share {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
margin: 0.9rem 0 0;
padding: 0.75rem 0 0;
border-top: 1px solid rgba(0, 58, 120, 0.12);
}
.bdl-share__label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #888;
margin-right: 0.1rem;
}
.bdl-share__item {
display: inline-flex;
}
.bdl-share__item a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: transparent;
color: var(--bdl-blue, #003a78);
border: 1px solid rgba(0, 58, 120, 0.25);
text-decoration: none !important;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.bdl-share__item a:hover,
.bdl-share__item a:focus-visible {
background: var(--bdl-blue, #003a78);
color: #fff;
border-color: var(--bdl-blue, #003a78);
transform: translateY(-1px);
}
.bdl-share__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
}
.bdl-share__icon svg {
display: block;
width: 100%;
height: 100%;
}
/* Screenreader-only label (Icon-Only-Buttons) */
.bdl-share__text {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
/* ============================================================
YP-Video-Embed (Jan Köberle, Markus Thomann)
============================================================ */
.bdl-yp-video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
background: #0d1421;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
}
.bdl-yp-video-wrapper--full {
margin-top: 2rem;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.bdl-yp-video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* Wenn das Video die Stelle des Bildes einnimmt (Jan Köberle): an feature-row__media-Grid anpassen */
.bdl-feature-row__media:has(.bdl-yp-video-wrapper) {
background: transparent !important;
padding: 0;
}
.bdl-feature-row__media .bdl-yp-video-wrapper {
aspect-ratio: auto;
height: 100%;
min-height: 320px;
}
/* ============================================================
Kundenbeispiele: Article-Hero + Story-Layout
============================================================ */
/* Container für Story-Text (schmaler als bdl-bleed default) */
.bdl-narrow {
max-width: 760px !important;
margin-left: auto;
margin-right: auto;
}
/* Article-Hero über bdl-bleed--image */
.bdl-bleed--image .bdl-article-headline {
font-family: var(--bdl-font, "Roboto"), system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.15;
color: #fff;
margin: 0.5rem 0 1rem;
max-width: 900px;
}
.bdl-bleed--image .bdl-article-lead {
color: rgba(255, 255, 255, 0.92);
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
font-weight: 300;
line-height: 1.55;
max-width: 760px;
margin: 0;
}
.bdl-section-tag--light {
color: #fff;
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.32);
backdrop-filter: blur(6px);
}
.bdl-bleed--image {
padding-top: clamp(60px, 8vw, 100px) !important;
padding-bottom: clamp(60px, 8vw, 100px) !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Teaser-Lead direkt unter dem Hero in der Story */
.bdl-article-teaser {
font-size: 1.15rem;
line-height: 1.55;
color: #4a5568;
font-weight: 400;
border-left: 4px solid var(--bdl-blue, #003a78);
padding: 0.25rem 0 0.25rem 1.25rem;
margin: 0 0 2rem;
}
/* Inline-Figure mit Bildunterschrift */
.bdl-figure {
margin: 0 auto;
max-width: 1100px;
text-align: center;
}
.bdl-figure-img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
}
.bdl-figure figcaption {
margin-top: 0.85rem;
font-size: 0.92rem;
color: #6b7280;
font-style: italic;
}
/* Info-Box (Projekt im Überblick) */
.bdl-info-box {
background: #fff;
border: 1px solid #e2e8f0;
border-left: 4px solid var(--bdl-blue, #003a78);
padding: 1.5rem 1.75rem;
border-radius: 8px;
}
.bdl-info-box h3 {
margin: 0 0 0.85rem;
font-size: 1.15rem;
color: var(--bdl-blue, #003a78);
}
.bdl-info-box ul {
margin: 0;
padding-left: 1.25rem;
list-style-type: disc;
}
.bdl-info-box li {
margin: 0.35rem 0;
line-height: 1.5;
}
/* Back-Link zur Übersicht */
.bdl-back-link {
margin: 1rem 0 0;
font-size: 0.95rem;
}
.bdl-back-link a {
color: var(--bdl-blue, #003a78);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.bdl-back-link a:hover {
opacity: 0.7;
}
/* Video-Embed (16:9 Responsive) */
.bdl-video-embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 12px;
background: #000;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.bdl-video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ============================================================
Marktbericht 2025: Stats + Chart-Helfer
============================================================ */
.bdl-stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.bdl-chart-subtitle {
font-size: 1rem;
color: #6b7280;
margin: 0 0 1rem;
text-align: center;
}
.bdl-chart-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
margin: 1.5rem 0;
}
@media (min-width: 900px) {
.bdl-chart-grid {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
.bdl-chart-grid > div {
min-width: 0;
}
/* ============================================================
Pull-Quote: Default-Styling für und