/*
Theme Name: BZB Child
Theme URI: https://bz-baden.de
Description: Child-Theme für die Baufi-Zentrum Baden GmbH. Enthält Markenfarben, Typografie und die Abschnittsvorlagen der neuen Startseite.
Author: Baufi-Zentrum Baden GmbH
Template: kadence
Version: 14.3
Text Domain: bzb-child
*/
/* ============================================================
1. Marken- und Grundwerte
============================================================ */
:root{
--bzb-navy:#241C52;
--bzb-navy-dark:#1A1440;
--bzb-gold:#C49C48;
--bzb-gold-dark:#8A6A24;
--bzb-gold-pale:#F4EBD8;
--bzb-sand:#FAF7F1;
--bzb-muted:#5C5773;
--bzb-line:#E4DED2;
}
.bzb-section{padding:70px 24px}
.bzb-section.is-sand{background:var(--bzb-sand)}
.bzb-inner{max-width:1140px;margin:0 auto}
.bzb-eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--bzb-gold-dark);margin-bottom:12px}
.bzb-lead{font-size:18px;color:var(--bzb-muted);max-width:46em}
/* Schaltflächen */
.bzb-btn .wp-block-button__link,
a.bzb-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;
padding:15px 26px;border-radius:4px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent}
.bzb-btn-gold .wp-block-button__link{background:var(--bzb-gold);color:#241C52;border-color:var(--bzb-gold)}
.bzb-btn-gold .wp-block-button__link:hover{background:#B0883A}
.bzb-btn-outline .wp-block-button__link{background:transparent;border-color:var(--bzb-navy);color:var(--bzb-navy)}
.bzb-btn-navy .wp-block-button__link{background:var(--bzb-navy);color:#fff;border-color:var(--bzb-navy)}
/* ============================================================
2. Aktionsbanner
============================================================ */
.bzb-ribbon{background:var(--bzb-navy);color:#fff;padding:22px 24px}
.bzb-ribbon .bzb-inner{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.bzb-ribbon-logo{background:#fff;border-radius:4px;padding:9px 14px;display:flex;align-items:center}
.bzb-ribbon-logo img{height:34px;width:auto}
.bzb-ribbon-flag{display:inline-block;background:var(--bzb-gold);color:#241C52;font-size:12px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:7px}
.bzb-ribbon-head{font-weight:700;font-size:20px;line-height:1.2;color:#fff;margin:0 0 6px}
.bzb-ribbon p{margin:0;font-size:15px;line-height:1.55;color:#DEDAEE}
.bzb-ribbon-gold{margin-top:10px !important;color:var(--bzb-gold) !important;font-weight:700}
/* ============================================================
3. Hero und Vertrauensleiste
============================================================ */
.bzb-hero{background:var(--bzb-sand);padding:48px 24px 0;border-bottom:1px solid var(--bzb-line)}
.bzb-hero .bzb-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:end}
.bzb-hero-copy{padding-bottom:52px}
.bzb-hero h1{font-size:clamp(31px,4.2vw,50px);line-height:1.12;margin:0 0 14px}
.bzb-hero h1 em{font-style:normal;color:var(--bzb-gold-dark);display:block}
.bzb-figure{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:430px;
background-color:var(--bzb-navy);background-image:url('assets/img/region-markgraeflerland.svg');
background-size:cover;background-position:center;
border-radius:6px 6px 0 0;border-bottom:4px solid var(--bzb-gold);overflow:hidden}
.bzb-figure:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(36,28,82,.22),rgba(36,28,82,.55))}
.bzb-figure img{position:relative;z-index:1;max-width:355px;display:block}
.bzb-quote{background:#fff;border-left:5px solid var(--bzb-gold);padding:14px 18px;font-size:14.5px;
line-height:1.55;color:var(--bzb-muted);margin-top:20px;max-width:460px;border-radius:0 4px 4px 0}
.bzb-quote strong{display:block;color:var(--bzb-navy);margin-bottom:3px}
.bzb-trust{background:var(--bzb-navy);color:#CFCAE4;padding:20px 24px}
.bzb-trust .bzb-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;font-size:14px}
.bzb-trust strong{display:block;color:var(--bzb-gold);font-size:20px}
/* ============================================================
4. Partnerleiste und Logoplätze
============================================================ */
.bzb-logostrip{border-top:1px solid var(--bzb-line);border-bottom:1px solid var(--bzb-line);background:#fff;padding:18px 24px}
.bzb-logostrip .bzb-inner{display:grid;grid-template-columns:auto repeat(5,1fr);gap:16px;align-items:center}
.bzb-logostrip .bzb-label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--bzb-muted);font-weight:700}
.bzb-logoslot{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--bzb-line);
border-radius:4px;height:74px;padding:8px 14px;text-align:center}
.bzb-logoslot.is-empty{border-style:dashed;font-size:11px;letter-spacing:.12em;color:var(--bzb-muted)}
.bzb-logoslot img{max-height:46px;width:auto}
/* ============================================================
5. Bildabschnitte mit Farbschleier
============================================================ */
.bzb-photo{position:relative;color:#fff;background-color:var(--bzb-navy);background-size:cover;background-position:center;padding:70px 24px}
.bzb-photo:before{content:"";position:absolute;inset:0;background:rgba(36,28,82,.74)}
.bzb-photo .bzb-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.bzb-photo p{color:#DEDAEE}
.bzb-photo .bzb-eyebrow{color:var(--bzb-gold)}
.bzb-ticks{list-style:none;padding:0;margin:0 0 22px}
.bzb-ticks li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid rgba(255,255,255,.18)}
.bzb-ticks li:before{content:"";position:absolute;left:0;top:19px;width:12px;height:12px;border:2px solid var(--bzb-gold);border-radius:50%}
.bzb-aktionsbox{background:#fff;color:var(--bzb-navy);border-radius:6px;padding:24px;border-top:5px solid var(--bzb-gold)}
.bzb-aktionsbox .bzb-zahl{font-size:44px;font-weight:700;color:var(--bzb-gold-dark);line-height:1;display:block}
/* ============================================================
6. Karten, Rechner, Partner
============================================================ */
.bzb-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bzb-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bzb-card{background:#fff;border:1px solid var(--bzb-line);padding:24px;border-radius:4px}
.bzb-card .bzb-num{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--bzb-gold-dark);display:block}
.bzb-card h3{margin:9px 0 8px;font-size:18.5px}
.bzb-card p{font-size:15px;color:var(--bzb-muted);margin:0}
.bzb-card.is-featured{grid-column:1 / -1;border:2px solid var(--bzb-gold);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.bzb-tool{background:#fff;border:1px solid var(--bzb-line);border-top:4px solid var(--bzb-gold);padding:24px}
.bzb-tool p{font-size:15px;color:var(--bzb-muted)}
.bzb-partner{background:#fff;border:1px solid var(--bzb-line);border-radius:4px;padding:24px;display:flex;flex-direction:column}
.bzb-partner .bzb-rolle{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--bzb-gold-dark)}
.bzb-partner p{font-size:15px;color:var(--bzb-muted)}
.bzb-vorteil{background:var(--bzb-gold-pale);color:#4A3A12;font-size:14px;padding:9px 12px;border-radius:4px;margin-top:auto}
/* ============================================================
7. Terminbuchung mit Einbettungsplatz
============================================================ */
.bzb-booking{background:var(--bzb-navy);color:#fff;padding:70px 24px}
.bzb-booking .bzb-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.bzb-booking p{color:#D6D2E8}
.bzb-booking .bzb-eyebrow{color:var(--bzb-gold)}
.bzb-steps{list-style:none;padding:0;margin:20px 0 0}
.bzb-steps li{padding:12px 0;border-top:1px solid rgba(255,255,255,.16)}
.bzb-steps li strong{color:var(--bzb-gold);margin-right:12px}
.bzb-embed{position:relative;background:#fff;color:var(--bzb-navy);border-radius:6px;padding:24px;
border-top:5px solid var(--bzb-gold);outline:2px dashed rgba(196,156,72,.7);outline-offset:6px;min-height:260px}
.bzb-embed-flag{position:absolute;top:-13px;right:16px;background:var(--bzb-gold);color:#241C52;font-size:11.5px;
font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:3px}
.bzb-consent{font-size:13px;color:var(--bzb-muted);margin-top:12px}
/* ============================================================
8. Region, Wissen, Fragen
============================================================ */
.bzb-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bzb-pill{border:1px solid var(--bzb-line);background:#fff;border-radius:40px;padding:7px 15px;font-size:14px;color:var(--bzb-muted)}
.bzb-themen{background:#fff;border:1px solid var(--bzb-line);border-radius:4px;padding:22px}
.bzb-themen dt{font-weight:700;margin-top:14px}
.bzb-themen dt:first-child{margin-top:0}
.bzb-themen dd{margin:3px 0 0;font-size:14.5px;color:var(--bzb-muted)}
.bzb-faq{max-width:840px;margin:0 auto}
.bzb-faq .wp-block-details{background:#fff;border:1px solid var(--bzb-line);border-radius:4px;margin-bottom:10px;padding:16px 20px}
.bzb-faq .wp-block-details summary{font-weight:700;cursor:pointer}
/* ============================================================
8b. Ablauf, Unterlagen, Ortsseiten
============================================================ */
.bzb-ablauf{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:32px}
.bzb-schritt{background:#fff;border:1px solid var(--bzb-line);border-top:4px solid var(--bzb-gold);border-radius:4px;padding:20px}
.bzb-schritt h3{font-size:16px;margin:10px 0 6px}
.bzb-schritt p{font-size:14px;color:var(--bzb-muted);margin:0}
.bzb-unterlagen{background:var(--bzb-sand);border:1px solid var(--bzb-line);border-radius:6px;padding:26px}
.bzb-unterlagen .wp-block-columns{margin-top:12px}
.bzb-unterlagen li{font-size:15px;color:var(--bzb-muted);padding:3px 0}
.bzb-ortsseiten{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.bzb-ortsseiten p{background:#fff;border:1px solid var(--bzb-line);border-left:4px solid var(--bzb-gold);
border-radius:4px;padding:14px 16px;font-size:14px;color:var(--bzb-muted);margin:0}
.bzb-unterthemen{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
.bzb-unterthemen p{margin:0;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.25);font-size:14.5px}
.bzb-karte-platzhalter{border:1px dashed var(--bzb-line);border-radius:4px;padding:14px;text-align:center;
font-size:13.5px;color:var(--bzb-muted)}
/* ============================================================
9. Kontakt
============================================================ */
.bzb-kontakt{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
.bzb-formular{background:#fff;border:1px solid var(--bzb-line);border-radius:6px;border-top:5px solid var(--bzb-gold);padding:26px}
.bzb-formular input[type=text],.bzb-formular input[type=email],.bzb-formular input[type=tel],
.bzb-formular select,.bzb-formular textarea{width:100%;padding:11px 12px;border:1px solid var(--bzb-line);border-radius:4px;font-size:15px}
.bzb-kanal{background:#fff;border:1px solid var(--bzb-line);border-radius:6px;padding:20px;margin-bottom:14px}
.bzb-kanal .bzb-rolle{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--bzb-gold-dark);text-transform:uppercase}
.bzb-kanal h3{font-size:17px;margin:7px 0 6px}
.bzb-kanal p{font-size:14.5px;color:var(--bzb-muted);margin:0 0 12px}
/* ============================================================
10. Abschluss
============================================================ */
.bzb-cta{background:var(--bzb-gold);color:#241C52;text-align:center;padding:60px 24px}
.bzb-cta p{max-width:40em;margin:0 auto 22px;color:#4A3A12}
/* ============================================================
11. Mobil
============================================================ */
@media(max-width:980px){
.bzb-hero .bzb-inner,.bzb-booking .bzb-inner,.bzb-photo .bzb-inner,
.bzb-grid2,.bzb-grid3,.bzb-kontakt,.bzb-card.is-featured,.bzb-ribbon .bzb-inner,
.bzb-ablauf,.bzb-ortsseiten,.bzb-unterthemen{grid-template-columns:1fr}
.bzb-trust .bzb-inner{grid-template-columns:repeat(2,1fr)}
.bzb-logostrip .bzb-inner{grid-template-columns:repeat(2,1fr)}
.bzb-logostrip .bzb-label{grid-column:1 / -1}
.bzb-figure{min-height:340px}
}
/* ============================================================
12. Druck
============================================================ */
@media print{
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.bzb-section,.bzb-photo,.bzb-booking{break-inside:avoid-page}
.bzb-card,.bzb-partner,.bzb-tool,.bzb-embed{break-inside:avoid}
}
/* ============================================================
13. Lesbarkeit, Vorrang vor den Theme-Farben
------------------------------------------------------------
WordPress und Kadence geben Überschriften, Absätzen und Links
eigene Farben. In den dunklen Abschnitten führt das dazu, dass
dunkler Text auf dunklem Grund steht. Die folgenden Regeln
setzen die Textfarben je Abschnitt verbindlich.
============================================================ */
/* Dunkle Abschnitte: alles hell */
.bzb-ribbon, .bzb-ribbon *,
.bzb-booking, .bzb-booking *,
.bzb-photo, .bzb-photo *,
.bzb-trust, .bzb-trust *{
color:#FFFFFF;
}
.bzb-ribbon h1,.bzb-ribbon h2,.bzb-ribbon h3,
.bzb-booking h1,.bzb-booking h2,.bzb-booking h3,
.bzb-photo h1,.bzb-photo h2,.bzb-photo h3{
color:#FFFFFF !important;
}
.bzb-ribbon p,.bzb-booking p,.bzb-photo p,
.bzb-booking li,.bzb-photo li{
color:#DEDAEE !important;
}
.bzb-ribbon a:not(.wp-element-button),
.bzb-booking a:not(.wp-element-button),
.bzb-photo a:not(.wp-element-button){
color:#FFFFFF !important;
text-decoration:underline;
text-underline-offset:3px;
}
.bzb-trust strong{color:var(--bzb-gold) !important}
.bzb-ribbon .bzb-eyebrow,.bzb-booking .bzb-eyebrow,.bzb-photo .bzb-eyebrow{color:var(--bzb-gold) !important}
.bzb-ribbon-head{color:#FFFFFF !important}
.bzb-ribbon-gold{color:var(--bzb-gold) !important}
.bzb-ribbon-flag{color:#241C52 !important;background:var(--bzb-gold)}
/* Weiße Kästen innerhalb dunkler Abschnitte: wieder dunkler Text */
.bzb-photo .bzb-aktionsbox, .bzb-photo .bzb-aktionsbox *,
.bzb-booking .bzb-embed, .bzb-booking .bzb-embed *,
.bzb-ribbon .bzb-ribbon-logo, .bzb-ribbon .bzb-ribbon-logo *{
color:var(--bzb-navy);
}
.bzb-photo .bzb-aktionsbox h3,.bzb-booking .bzb-embed h3{color:var(--bzb-navy) !important}
.bzb-photo .bzb-aktionsbox p,.bzb-booking .bzb-embed p{color:var(--bzb-muted) !important}
.bzb-photo .bzb-aktionsbox .bzb-zahl{color:var(--bzb-gold-dark) !important}
.bzb-booking .bzb-embed .bzb-embed-flag{color:#241C52 !important}
/* Helle Abschnitte: dunkler Text sicherstellen */
.bzb-section h1,.bzb-section h2,.bzb-section h3,
.bzb-card h3,.bzb-partner h3,.bzb-tool h3,.bzb-kanal h3,.bzb-schritt h3{
color:var(--bzb-navy) !important;
}
.bzb-section p,.bzb-section li{color:var(--bzb-muted)}
.bzb-eyebrow{color:var(--bzb-gold-dark) !important}
.bzb-num,.bzb-rolle{color:var(--bzb-gold-dark) !important}
.bzb-vorteil{color:#4A3A12 !important}
/* Goldenes Abschlussband */
.bzb-cta,.bzb-cta *{color:#241C52}
.bzb-cta h1,.bzb-cta h2,.bzb-cta h3{color:#241C52 !important}
.bzb-cta p{color:#4A3A12 !important}
/* Schaltflächen: Beschriftung immer lesbar */
.bzb-btn-gold .wp-block-button__link,
.bzb-btn-gold .wp-element-button{background:var(--bzb-gold) !important;color:#241C52 !important;border-color:var(--bzb-gold) !important}
.bzb-btn-navy .wp-block-button__link,
.bzb-btn-navy .wp-element-button{background:var(--bzb-navy) !important;color:#FFFFFF !important;border-color:var(--bzb-navy) !important}
.bzb-btn-outline .wp-block-button__link,
.bzb-btn-outline .wp-element-button{background:transparent !important;color:var(--bzb-navy) !important;border-color:var(--bzb-navy) !important}
.bzb-photo .bzb-btn-outline .wp-element-button,
.bzb-booking .bzb-btn-outline .wp-element-button{color:#FFFFFF !important;border-color:#FFFFFF !important}
/* Fragenbereich */
.bzb-faq .wp-block-details summary{color:var(--bzb-navy) !important}
.bzb-faq .wp-block-details p{color:var(--bzb-muted) !important}
/* ============================================================
14. Beispielbilder der Abschnitte
------------------------------------------------------------
Die Bilder liegen im Ordner assets/img. Sie lassen sich auf
zwei Wegen austauschen, siehe HINWEIS.txt in diesem Ordner.
Ein im Editor gesetztes Hintergrundbild hat Vorrang, weil es
als Inline-Stil ausgegeben wird.
============================================================ */
.bzb-photo.is-markgraeflerland{background-image:url('assets/img/region-markgraeflerland.svg')}
.bzb-photo.is-kaiserstuhl{background-image:url('assets/img/region-kaiserstuhl.svg')}
.bzb-photo.is-freiburg{background-image:url('assets/img/region-freiburg.svg')}
/* ============================================================
15. Layoutfestigkeit gegenüber den WordPress-Standardstilen
------------------------------------------------------------
WordPress begrenzt Kindelemente von Gruppen auf die Inhaltsbreite
und setzt Abstände zwischen Blöcken. In den Rastern führt das dazu,
dass die breite Karte nicht mit den Karten darunter abschließt.
============================================================ */
[class*="bzb-"], [class*="bzb-"] *{box-sizing:border-box}
.bzb-inner > *, .bzb-grid2 > *, .bzb-grid3 > *, .bzb-kontakt > *,
.bzb-ablauf > *, .bzb-ortsseiten > *, .bzb-unterthemen > *,
.bzb-region > *, .bzb-kanaele > *, .bzb-logostrip .bzb-inner > *{
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
margin-block-start:0 !important;
}
.bzb-grid2,.bzb-grid3,.bzb-ablauf,.bzb-ortsseiten,.bzb-unterthemen,.bzb-region{display:grid !important}
.bzb-card.is-featured{grid-column:1 / -1 !important;width:100% !important;margin:0 !important}
.bzb-inner{width:100%;max-width:1140px}
/* Regionsabschnitt mit Karte */
.bzb-region{grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.bzb-mapbox{background:#fff;border:1px solid var(--bzb-line);border-radius:4px;padding:20px}
.bzb-mapbox img{display:block;width:100%;height:auto}
.bzb-pills{display:flex !important;flex-wrap:wrap;gap:8px;margin-top:16px}
.bzb-pills > *{margin:0 !important}
/* Standardhintergrund, falls kein Bild gesetzt ist */
.bzb-photo{background-image:url('assets/img/region-markgraeflerland.svg')}
.bzb-figure{background-image:url('assets/img/region-markgraeflerland.svg')}
@media(max-width:980px){
.bzb-region{grid-template-columns:1fr}
}
/* ============================================================
16. Nacharbeiten aus der Sichtprüfung
============================================================ */
/* 16.1 Karten einer Reihe gleich hoch, Rahmen schließen bündig ab */
.bzb-grid2,.bzb-grid3{align-items:stretch}
.bzb-grid2 > *,.bzb-grid3 > *{height:100%}
.bzb-card,.bzb-partner,.bzb-tool{height:100%;display:flex;flex-direction:column}
.bzb-card.is-featured{display:grid;height:auto}
.bzb-card p:last-child,.bzb-tool p:last-child{margin-bottom:0}
/* 16.1b Auch Text- und Kartenspalten von der Inhaltsbreite befreien.
Ausgenommen bleibt .bzb-inner, die zentriert bleiben muss. */
[class*="bzb-"] > *:not(.bzb-inner){
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* 16.2 Ortszeile im Hero einzeilig halten */
.bzb-hero .bzb-eyebrow{font-size:12px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:980px){
.bzb-hero .bzb-eyebrow{white-space:normal}
}
/* 16.3 Hero ruhiger: kleinere Titelgröße, kürzere Zeilen, weniger Höhe */
.bzb-hero{padding-top:40px}
.bzb-hero h1{font-size:clamp(28px,3.4vw,42px);line-height:1.15;margin-bottom:12px}
.bzb-hero .bzb-lead{font-size:17.5px;max-width:32em;margin-bottom:20px}
.bzb-hero-copy{padding-bottom:44px}
.bzb-quote{font-size:14px;padding:12px 16px;margin-top:18px;max-width:420px}
.bzb-quote strong{font-size:14.5px}
.bzb-figure{min-height:400px}
/* 16.4 Lauftext im Aktionsbanner
Der Satz läuft von rechts ein, steht in der Mitte der Laufzeit still
und verlässt das Feld nach links. Bei aktivierter Bewegungsreduktion
im Betriebssystem bleibt der Text ruhig stehen. */
.bzb-marquee{overflow:hidden;margin-top:10px}
.bzb-marquee .bzb-ribbon-gold{
display:inline-block;white-space:nowrap;margin:0 !important;
animation:bzb-lauftext 18s linear infinite;will-change:transform;
}
@keyframes bzb-lauftext{
0%{transform:translateX(125%)}
22%{transform:translateX(0)}
72%{transform:translateX(0)}
100%{transform:translateX(-125%)}
}
.bzb-marquee:hover .bzb-ribbon-gold{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
.bzb-marquee .bzb-ribbon-gold{animation:none;white-space:normal}
}
/* Auf dem Handy steht die Zeile still und darf umbrechen.
Bewegter Text in schmaler Spalte wäre kaum lesbar. */
@media(max-width:600px){
.bzb-marquee .bzb-ribbon-gold{animation:none;white-space:normal;font-size:14.5px}
}
/* Kein seitlicher Überstand durch den nicht umbrechenden Lauftext */
.bzb-ribbon .bzb-inner{grid-template-columns:auto minmax(0,1fr) auto}
.bzb-ribbon-text,.bzb-marquee{min-width:0;max-width:100%}
/* ============================================================
17. Ortszeile über die volle Breite
------------------------------------------------------------
In der linken Spalte war für fünf Regionen kein Platz. Die Zeile
steht deshalb über dem Hero und nutzt die gesamte Inhaltsbreite.
============================================================ */
.bzb-hero > .bzb-hero-top{
max-width:1140px !important;
margin-left:auto !important;
margin-right:auto !important;
padding-bottom:2px;
}
.bzb-hero > .bzb-hero-top .bzb-orte{
margin:0 !important;
font-size:clamp(11px,1vw,13px);
letter-spacing:.09em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@media(max-width:980px){
.bzb-hero-top .bzb-orte{white-space:normal;letter-spacing:.06em}
}
/* ============================================================
18. Gutscheinzeile als goldenes Laufband
------------------------------------------------------------
Der Satz steht immer in einer Zeile und ist durch die goldene
Fläche vom übrigen Banner abgesetzt. Er läuft von rechts ein,
steht etwa die Hälfte der Laufzeit still und verlässt das Feld
nach links. Beim Überfahren mit der Maus hält er an.
============================================================ */
.bzb-ribbon .bzb-inner{align-items:center}
.bzb-marquee{
grid-column:1 / -1;
background:var(--bzb-gold);
border-radius:4px;
padding:9px 14px;
overflow:hidden;
margin-top:12px;
min-width:0;
max-width:100%;
}
.bzb-marquee .bzb-ribbon-gold{
display:inline-block;
white-space:nowrap !important;
color:#241C52 !important;
font-weight:700;
font-size:15px;
margin:0 !important;
animation:bzb-lauftext 18s linear infinite;
}
@media(max-width:600px){
.bzb-marquee{padding:8px 10px}
.bzb-marquee .bzb-ribbon-gold{animation:bzb-lauftext 15s linear infinite;font-size:13.5px}
}
/* Bei aktivierter Bewegungsreduktion steht der Satz still.
Auf schmalen Bildschirmen darf er dann umbrechen, damit er lesbar bleibt. */
@media(prefers-reduced-motion:reduce){
.bzb-marquee .bzb-ribbon-gold{animation:none;transform:none}
@media(max-width:600px){
.bzb-marquee .bzb-ribbon-gold{white-space:normal !important}
}
}
/* ============================================================
19. Laufband mittig und nur so breit wie nötig
------------------------------------------------------------
Auf breiten Bildschirmen ist die goldene Fläche nur so breit wie
der Satz und steht mittig. Der Satz ist dort vollständig lesbar,
eine Bewegung wäre überflüssig. Erst wenn der Platz nicht reicht,
also auf Tablet und Handy, nimmt das Band die volle Breite ein
und der Satz läuft durch. Die Ruhelage ist dann ebenfalls mittig.
============================================================ */
.bzb-marquee{
width:fit-content;
max-width:100%;
justify-self:center; /* wirkt im Raster unabhängig von den Außenabständen */
text-align:center;
}
.bzb-marquee .bzb-ribbon-gold{
animation:none;
transform:none;
text-align:center;
}
@media(max-width:1100px){
.bzb-marquee{width:100%;justify-self:stretch}
.bzb-marquee .bzb-ribbon-gold{animation:bzb-lauftext 18s linear infinite}
}
@media(max-width:600px){
.bzb-marquee .bzb-ribbon-gold{animation:bzb-lauftext 15s linear infinite}
}
@media(prefers-reduced-motion:reduce){
.bzb-marquee .bzb-ribbon-gold{animation:none !important;transform:none !important}
.bzb-marquee{width:100%}
}
@media(prefers-reduced-motion:reduce) and (max-width:600px){
.bzb-marquee .bzb-ribbon-gold{white-space:normal !important}
}
/* ============================================================
20. Schaltflächen: Größe, Rückmeldung, Verhalten auf dem Handy
------------------------------------------------------------
Jede Schaltfläche, die etwas auslöst, hat eine Mindesthöhe von
48 Pixeln, passt sich der Bildschirmbreite an und gibt beim
Berühren, Überfahren und bei Tastaturbedienung Rückmeldung.
============================================================ */
.bzb-btn .wp-block-button__link,
.bzb-btn .wp-element-button,
a.bzb-btn{
min-height:48px;
max-width:100%;
padding:14px 26px;
transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
text-decoration:none;
cursor:pointer;
}
/* Zeigergerät: Überfahren */
@media(hover:hover){
.bzb-btn-gold .wp-element-button:hover{background:#B0883A !important}
.bzb-btn-navy .wp-element-button:hover{background:#160F3A !important}
.bzb-btn-outline .wp-element-button:hover{background:var(--bzb-navy) !important;color:#FFFFFF !important}
.bzb-photo .bzb-btn-outline .wp-element-button:hover,
.bzb-booking .bzb-btn-outline .wp-element-button:hover{background:#FFFFFF !important;color:var(--bzb-navy) !important}
}
/* Berührung und Klick */
.bzb-btn .wp-element-button:active{transform:translateY(1px)}
/* Tastaturbedienung: sichtbarer Fokusrahmen */
.bzb-btn .wp-element-button:focus-visible{
outline:3px solid var(--bzb-gold);
outline-offset:3px;
}
.bzb-photo .bzb-btn .wp-element-button:focus-visible,
.bzb-booking .bzb-btn .wp-element-button:focus-visible,
.bzb-ribbon .bzb-btn .wp-element-button:focus-visible{outline-color:#FFFFFF}
.bzb-cta .bzb-btn .wp-element-button:focus-visible{outline-color:var(--bzb-navy)}
/* Handy: volle Breite, damit der Daumen sicher trifft */
@media(max-width:600px){
.bzb-btn,.bzb-btn .wp-block-button__link,.bzb-btn .wp-element-button{width:100%}
.bzb-hero-cta .wp-block-buttons,
.bzb-inner .wp-block-buttons{width:100%}
.bzb-btn .wp-element-button{padding:15px 18px;font-size:16px;text-align:center}
.bzb-ribbon .bzb-btn .wp-element-button{width:100%}
}
/* Zwischenbreiten: Schaltflächen dürfen umbrechen statt zu überlaufen */
.wp-block-buttons{flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){
.bzb-btn .wp-block-button__link,
.bzb-btn .wp-element-button{transition:none}
.bzb-btn .wp-element-button:active{transform:none}
}
/* ============================================================
21. Aktionsbanner: beide goldenen Flächen zentriert, Schrift weiß
------------------------------------------------------------
Weiße Schrift auf dem hellen Gold C49C48 erreicht nur ein
Kontrastverhältnis von etwa 2,6 zu 1 und wäre damit schlecht
lesbar. Die Flächen verwenden deshalb den dunkleren Goldton
8A6A24 aus derselben Farbfamilie. Damit liegt der Kontrast bei
rund 5 zu 1 und erfüllt die Anforderung von 4,5 zu 1.
============================================================ */
.bzb-ribbon .bzb-inner{align-items:center}
.bzb-ribbon-flag{
grid-column:1 / -1;
justify-self:center;
width:fit-content;
max-width:100%;
background:var(--bzb-gold-dark) !important;
color:#FFFFFF !important;
padding:6px 14px;
border-radius:4px;
margin:0 0 4px !important;
text-align:center;
}
.bzb-marquee{background:var(--bzb-gold-dark)}
.bzb-marquee .bzb-ribbon-gold{color:#FFFFFF !important}
/* Hinweisende Hand als Vektorgrafik, damit die Darstellung auf allen
Geraeten gleich ist. Die Grafik liegt unter assets/img/hand-hinweis.svg. */
.bzb-hand{
display:inline-block;
width:1.25em;
height:1.25em;
margin-right:8px;
vertical-align:-0.24em;
background:url('assets/img/hand-hinweis.svg') center/contain no-repeat;
}
/* Zähler für die Baumarktgutscheine */
.bzb-zaehler{
grid-column:1 / -1;
justify-self:center;
width:fit-content;
max-width:100%;
margin-top:10px;
text-align:center;
}
.bzb-zaehler-text{
margin:0 0 6px !important;
font-size:14px;
font-weight:700;
color:var(--bzb-gold) !important;
letter-spacing:.02em;
}
.bzb-zaehler-balken{
height:6px;
width:260px;
max-width:100%;
border-radius:3px;
background:rgba(255,255,255,.22);
overflow:hidden;
}
.bzb-zaehler-balken span{
display:block;
height:100%;
background:var(--bzb-gold);
border-radius:3px;
}
/* ============================================================
22. Rangfolge im Aktionsbanner
------------------------------------------------------------
Das Datum ordnet ein, der Gutschein ist das Angebot. Deshalb
steht die Auszeichnung oben nur als Kontur, während das Band
in hellem Gold den einzigen Blickfang bildet.
Kontraste: Gold auf Dunkelblau 6,1 zu 1, dunkelbraune Schrift
auf hellem Gold 6,6 zu 1.
============================================================ */
.bzb-ribbon-flag{
background:transparent !important;
color:var(--bzb-gold) !important;
border:1.5px solid var(--bzb-gold);
padding:5px 13px;
}
.bzb-marquee{background:var(--bzb-gold)}
.bzb-marquee .bzb-ribbon-gold{color:#241C52 !important}
/* Auf hellem Gold wird die hinweisende Hand dunkel dargestellt */
.bzb-marquee .bzb-hand{
background-image:url('assets/img/hand-hinweis-dunkel.svg');
}
/* ============================================================
22. Aktionsbanner, helle Fassung
------------------------------------------------------------
Das Banner steht nicht mehr auf Dunkelblau, sondern auf dem
warmen hellen Goldton. Dadurch wirkt es einladend statt wie eine
Warnleiste. Die Aussage steht in drei Stufen: Zeitpunkt, Kernsatz,
drei Zahlen. Die Belohnung sitzt rechts in einer eigenen Spalte
direkt über der Schaltfläche und geht damit nicht mehr unter.
============================================================ */
.bzb-ribbon.is-hell{
background:var(--bzb-gold-pale);
border-bottom:3px solid var(--bzb-gold);
padding:22px 24px;
}
.bzb-ribbon.is-hell, .bzb-ribbon.is-hell *{color:var(--bzb-navy) !important}
.bzb-ribbon.is-hell .bzb-inner{
display:grid;
grid-template-columns:auto minmax(0,1fr) minmax(270px,320px);
gap:26px;
align-items:center;
}
.bzb-ribbon.is-hell .bzb-ribbon-logo{background:#fff;border-radius:6px;padding:12px 16px}
.bzb-ribbon.is-hell .bzb-ribbon-logo img{height:36px;width:auto;display:block}
.bzb-ribbon.is-hell .bzb-ribbon-flag{
display:inline-block;
background:transparent !important;
border:1.5px solid var(--bzb-navy);
border-radius:40px;
padding:3px 12px;
font-size:12.5px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
margin:0 0 8px !important;
}
.bzb-ribbon.is-hell .bzb-ribbon-head{
font-size:clamp(19px,2vw,24px);
line-height:1.22;
font-weight:700;
margin:0 0 6px !important;
}
.bzb-ribbon.is-hell .bzb-ribbon-sub{
font-size:15.5px;
line-height:1.5;
margin:0 0 12px !important;
max-width:46em;
}
.bzb-fakten{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:10px 26px;
margin:0 !important;
padding:0 !important;
}
.bzb-fakten li{
font-size:14.5px;
padding:0 0 0 16px;
position:relative;
border:0 !important;
}
.bzb-fakten li:before{
content:"";
position:absolute;left:0;top:9px;
width:7px;height:7px;border-radius:50%;
background:var(--bzb-gold-dark);
}
.bzb-fakten strong{font-weight:700}
/* Belohnung und Schaltfläche in eigener Spalte */
.bzb-ribbon.is-hell .bzb-ribbon-aktion{
background:#fff;
border-radius:6px;
padding:16px;
border-top:4px solid var(--bzb-gold);
}
.bzb-belohnung{
background:var(--bzb-gold);
color:#241C52 !important;
border-radius:4px;
padding:10px 12px;
font-size:14px;
font-weight:700;
line-height:1.35;
margin:0 0 10px !important;
display:flex;
align-items:flex-start;
gap:8px;
}
.bzb-ribbon.is-hell .bzb-zaehler{width:100%;justify-self:stretch;margin:0 0 12px;text-align:left}
.bzb-ribbon.is-hell .bzb-zaehler-text{font-size:13.5px;color:var(--bzb-navy) !important;margin:0 0 5px !important}
.bzb-ribbon.is-hell .bzb-zaehler-balken{width:100%;background:rgba(36,28,82,.14)}
.bzb-ribbon.is-hell .bzb-zaehler-balken span{background:var(--bzb-gold-dark)}
.bzb-ribbon.is-hell .wp-block-buttons{width:100%}
.bzb-ribbon.is-hell .bzb-btn .wp-element-button{width:100%}
/* Hand in der dunklen Fassung auf der goldenen Belohnungsfläche */
.bzb-belohnung .bzb-hand{
background:url('assets/img/hand-hinweis-dunkel.svg') center/contain no-repeat;
width:1.5em;height:1.5em;
flex:0 0 auto;
margin-right:0;
vertical-align:0;
}
/* Beschriftung der Schaltfläche bleibt weiß */
.bzb-ribbon.is-hell .bzb-btn-navy .wp-element-button{color:#FFFFFF !important}
@media(max-width:1100px){
.bzb-ribbon.is-hell .bzb-inner{grid-template-columns:auto minmax(0,1fr)}
.bzb-ribbon.is-hell .bzb-ribbon-aktion{grid-column:1 / -1}
}
@media(max-width:700px){
.bzb-ribbon.is-hell .bzb-inner{grid-template-columns:1fr;gap:16px}
.bzb-ribbon.is-hell .bzb-ribbon-logo{width:fit-content}
.bzb-fakten{flex-direction:column;gap:6px}
}
/* ============================================================
23. Fußbereich und Kontaktleiste
============================================================ */
.bzb-fuss{background:var(--bzb-navy-dark);padding:56px 24px 28px}
.bzb-fuss, .bzb-fuss *{color:#B9B4D0}
.bzb-fuss h3{color:#FFFFFF !important;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.bzb-fuss a{color:#B9B4D0;text-decoration:none}
.bzb-fuss a:hover{color:var(--bzb-gold)}
.bzb-fuss p{font-size:15px;margin:0 0 12px}
.bzb-fuss ul{list-style:none;margin:0;padding:0}
.bzb-fuss li{padding:4px 0;font-size:15px}
.bzb-fuss-spalten{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:32px}
.bzb-fuss-social{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15)}
.bzb-fuss-social p{margin:0 0 6px}
.bzb-fuss-social a{text-decoration:underline;text-underline-offset:3px}
.bzb-fuss-recht{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15)}
.bzb-fuss-recht p{font-size:14px}
.bzb-fuss-recht a{text-decoration:underline;text-underline-offset:3px}
.bzb-fuss-klein{font-size:12.5px !important;color:#8F8AA8 !important;line-height:1.5}
/* WhatsApp-Kasten im Fußbereich */
.bzb-kanalbox{background:rgba(255,255,255,.06);border-left:3px solid var(--bzb-gold);border-radius:0 4px 4px 0;padding:14px 16px;margin-top:16px}
.bzb-wa-titel{display:flex;align-items:center;gap:8px;color:#FFFFFF !important;font-weight:700;margin:0 0 6px !important}
.bzb-wa-titel .bzb-hand{background:url('assets/img/hand-hinweis.svg') center/contain no-repeat;width:1.3em;height:1.3em;flex:0 0 auto}
.bzb-wa-text{font-size:13.5px !important;line-height:1.5;margin:0 0 10px !important}
.bzb-wa-link{display:inline-block;background:var(--bzb-gold);color:#241C52 !important;font-weight:700;font-size:14px;
padding:9px 14px;border-radius:4px;text-decoration:none !important;min-height:44px;line-height:26px}
.bzb-wa-link:hover{background:#B0883A;color:#241C52 !important}
/* Feste Kontaktleiste, nur auf Handys */
.bzb-kontaktleiste{display:none}
@media(max-width:700px){
.bzb-kontaktleiste{
position:fixed;left:0;right:0;bottom:0;z-index:60;
display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;
background:var(--bzb-navy);padding:8px 10px;
}
.bzb-kontaktleiste a{
display:flex;align-items:center;justify-content:center;min-height:48px;
border:1.5px solid rgba(255,255,255,.5);border-radius:4px;
color:#FFFFFF;text-decoration:none;font-weight:700;font-size:14.5px;
}
.bzb-kontaktleiste a.ist-haupt{background:var(--bzb-gold);border-color:var(--bzb-gold);color:#241C52}
body{padding-bottom:72px}
}
@media(max-width:980px){
.bzb-fuss-spalten{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
.bzb-fuss-spalten{grid-template-columns:1fr}
}
/* ============================================================
24. Unterseiten: Kopfbereich und Autorenzeile
============================================================ */
.bzb-lp-kopf{background:var(--bzb-sand);padding:56px 24px;border-bottom:1px solid var(--bzb-line)}
.bzb-lp-kopf h1{margin:0 0 12px}
.bzb-lp-kopf .bzb-lead{margin-bottom:20px}
.bzb-autor{font-size:14px;color:var(--bzb-muted) !important;border-top:1px solid var(--bzb-line);padding-top:12px;margin-top:24px !important}
/* ============================================================
25. Beitragsbild in der Höhe begrenzen
------------------------------------------------------------
Das Beitragsbild wird von Kadence in voller Breite und voller
Höhe ausgegeben. Bei einem Bild im Format 1200 mal 630 ist das
auf grossen Bildschirmen zu dominant. Die folgende Regel begrenzt
die Höhe und beschneidet mittig, das Seitenverhältnis bleibt
unverfälscht.
============================================================ */
.post-thumbnail img,
.entry-header .post-thumbnail img,
.wp-post-image.attachment-post-thumbnail,
.entry-content-wrap > .post-thumbnail img{
max-height:340px;
width:100%;
object-fit:cover;
object-position:center;
border-radius:6px;
}
@media(max-width:780px){
.post-thumbnail img,
.entry-header .post-thumbnail img,
.wp-post-image.attachment-post-thumbnail{max-height:200px}
}
/* Variante für ein schmales Bild neben dem Text, falls gewünscht:
im Editor dem Bildblock die Klasse bzb-bild-schmal geben. */
.bzb-bild-schmal img{
max-width:520px;
height:auto;
border-radius:6px;
}
/* ============================================================
26. Tabellen im Markenstil
============================================================ */
.bzb-tabelle table{width:100%;border-collapse:collapse;background:#fff}
.bzb-tabelle th{
background:var(--bzb-navy);color:#FFFFFF !important;
text-align:left;font-size:15px;padding:12px 14px;
}
.bzb-tabelle td{
border-bottom:1px solid var(--bzb-line);
padding:12px 14px;font-size:15.5px;color:var(--bzb-navy);
}
.bzb-tabelle tr:last-child td{border-bottom:0}
.bzb-tabelle td:last-child{font-weight:700;color:var(--bzb-gold-dark)}
/* ============================================================
27. Sprungmarkenleiste
------------------------------------------------------------
Schmale Leiste unter dem Hero. Sie fuehrt zu den Abschnitten
der Startseite, ohne mit der Terminbuchung zu konkurrieren.
Wird der Gruppe zusaetzlich die Klasse ist-haftend gegeben,
bleibt die Leiste beim Scrollen am oberen Rand stehen.
============================================================ */
.bzb-sprungleiste{
background:#FFFFFF;
border-bottom:1px solid var(--bzb-line);
padding:12px 24px;
}
.bzb-sprungleiste .bzb-inner{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 10px;
}
.bzb-sprung-label{
margin:0 6px 0 0 !important;
font-size:12.5px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--bzb-muted) !important;
}
.bzb-sprung{margin:0 !important}
.bzb-sprung a{
display:inline-block;
border:1px solid var(--bzb-line);
border-radius:40px;
padding:8px 16px;
font-size:14.5px;
font-weight:600;
color:var(--bzb-navy) !important;
text-decoration:none !important;
background:#FFFFFF;
min-height:40px;
line-height:22px;
}
.bzb-sprung a:hover{
border-color:var(--bzb-gold);
background:var(--bzb-gold-pale);
}
.bzb-sprung a:focus-visible{outline:3px solid var(--bzb-gold);outline-offset:2px}
.bzb-sprungleiste.ist-haftend{position:sticky;top:0;z-index:40}
/* Damit ein angesprungener Abschnitt nicht unter der Kopfzeile klebt */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:90px}
@media(max-width:700px){
.bzb-sprungleiste .bzb-inner{
flex-wrap:nowrap;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.bzb-sprungleiste .bzb-inner::-webkit-scrollbar{display:none}
.bzb-sprung a{white-space:nowrap}
.bzb-sprung-label{display:none}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
}
/* ============================================================
28. Hero-Bildpanel, Bild im Editor austauschbar
------------------------------------------------------------
Im Hero steht kein Text auf dem Bild, sondern nur das
freigestellte Portraet. Deshalb genuegt ein leichter Verlauf
am unteren Rand, damit sich der dunkle Anzug abhebt.
Die Landschaft bleibt in ihren Farben erhalten.
============================================================ */
.bzb-figure{
background-image:url('assets/img/hero-markgraeflerland.webp');
background-position:center 40%;
}
.bzb-figure:before{
background:linear-gradient(to bottom,
rgba(36,28,82,0) 0%,
rgba(36,28,82,0) 55%,
rgba(36,28,82,.16) 78%,
rgba(36,28,82,.34) 100%);
}
/* ============================================================
29. Hero-Bildpanel als Cover-Block
------------------------------------------------------------
Wird der Bildbereich als Cover-Block angelegt und mit der
Klasse bzb-figure-cover versehen, laesst sich das Bild jederzeit
im Editor austauschen. Das Theme gibt nur Form, Hoehe und den
goldenen Abschluss vor.
============================================================ */
.wp-block-cover.bzb-figure-cover{
min-height:430px;
align-items:flex-end;
padding:0;
border-radius:6px 6px 0 0;
border-bottom:4px solid var(--bzb-gold);
overflow:hidden;
}
.wp-block-cover.bzb-figure-cover .wp-block-cover__inner-container{
width:100%;
display:flex;
justify-content:center;
align-items:flex-end;
}
.wp-block-cover.bzb-figure-cover figure{margin:0;line-height:0}
.wp-block-cover.bzb-figure-cover img.wp-block-cover__image-background{object-position:center 40%}
.wp-block-cover.bzb-figure-cover .wp-block-image img{
max-width:355px;
width:100%;
height:auto;
display:block;
}
@media(max-width:980px){
.wp-block-cover.bzb-figure-cover{min-height:340px}
}
/* ============================================================
30. Wissensbereich: Suchfeld und Beitragskacheln
============================================================ */
.bzb-filterzeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.bzb-filterzeile input{flex:1 1 320px;border:1px solid var(--bzb-line);border-radius:4px;
padding:13px 14px;font-size:16px;min-height:48px;color:var(--bzb-navy);background:#fff}
.bzb-filterzeile input:focus-visible{outline:3px solid var(--bzb-gold);outline-offset:2px}
.bzb-zuruecksetzen{border:1px solid var(--bzb-line);background:#fff;border-radius:4px;padding:12px 18px;
font-size:15px;font-weight:700;color:var(--bzb-navy);min-height:48px;cursor:pointer}
.bzb-zuruecksetzen:hover{border-color:var(--bzb-gold);background:var(--bzb-gold-pale)}
.bzb-treffer{font-size:14.5px;color:var(--bzb-muted) !important;margin:12px 0 0 !important}
.bzb-leer{display:none;background:var(--bzb-sand);border:1px solid var(--bzb-line);
border-radius:6px;padding:22px;margin-top:24px;color:var(--bzb-navy)}
.bzb-leer p{margin:8px 0 0}
.bzb-wissen{padding:56px 24px}
.bzb-wissen .wp-block-post-template{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;padding:0;margin:0}
.bzb-wissen .wp-block-post-template > li{background:#fff;border:1px solid var(--bzb-line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.bzb-wissen .wp-block-post-template > li.bzb-versteckt,
.wp-block-post-template > .bzb-versteckt{display:none !important}
.bzb-wissen .wp-block-post-featured-image{margin:0}
.bzb-wissen .wp-block-post-featured-image img{width:100%;height:170px;object-fit:cover;display:block}
.bzb-wissen .wp-block-post-date{font-size:13px;font-weight:700;color:var(--bzb-gold-dark) !important;padding:16px 18px 0;margin:0}
.bzb-wissen .wp-block-post-title{font-size:18px;line-height:1.3;margin:6px 0 0;padding:0 18px}
.bzb-wissen .wp-block-post-title a{color:var(--bzb-navy) !important;text-decoration:none}
.bzb-wissen .wp-block-post-excerpt{font-size:14.5px;color:var(--bzb-muted);padding:0 18px 18px;margin:8px 0 0}
.bzb-wissen .wp-block-post-excerpt__more-link{color:var(--bzb-gold-dark);font-weight:700;text-decoration:none}
@media(max-width:980px){.bzb-wissen .wp-block-post-template{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.bzb-wissen .wp-block-post-template{grid-template-columns:1fr}}
/* ============================================================
31. Kacheln gleichmaessig halten
------------------------------------------------------------
Titel auf drei Zeilen, Kurzfassung auf vier Zeilen begrenzt.
Damit bleiben die Kacheln optisch ruhig, auch wenn die
Beitragstitel unterschiedlich lang sind.
============================================================ */
.bzb-wissen .wp-block-post-title{
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:70px;
}
.bzb-wissen .wp-block-post-excerpt__excerpt{
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}
.bzb-wissen .wp-block-post-excerpt{margin-top:8px;padding-bottom:16px}
.bzb-wissen .wp-block-post-excerpt__more-link{display:inline-block;margin-top:10px}
/* ============================================================
32. Suchergebnisse im Wissensbereich
============================================================ */
.bzb-suchen{
border:2px solid var(--bzb-gold);background:var(--bzb-gold);color:#241C52;
border-radius:4px;padding:12px 22px;font-size:16px;font-weight:700;min-height:48px;cursor:pointer;
}
.bzb-suchen:hover{background:#B0883A;border-color:#B0883A}
a.bzb-zuruecksetzen{display:inline-flex;align-items:center;text-decoration:none}
.bzb-suchergebnisse{
list-style:none;padding:0;margin:24px 0 0;
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.bzb-suchergebnisse > li{
background:#fff;border:1px solid var(--bzb-line);border-radius:6px;overflow:hidden;
display:flex;flex-direction:column;
}
.bzb-such-bild{display:block;line-height:0}
.bzb-such-bild img{width:100%;height:170px;object-fit:cover;display:block}
.bzb-such-datum{font-size:13px;font-weight:700;color:var(--bzb-gold-dark) !important;padding:16px 18px 0;margin:0}
.bzb-such-titel{font-size:18px;line-height:1.3;margin:6px 0 0;padding:0 18px}
.bzb-such-titel a{color:var(--bzb-navy) !important;text-decoration:none}
.bzb-such-titel a:hover{color:var(--bzb-gold-dark) !important}
.bzb-such-text{font-size:14.5px;color:var(--bzb-muted) !important;padding:0 18px;margin:8px 0 0}
.bzb-such-mehr{padding:10px 18px 18px;margin:auto 0 0}
.bzb-such-mehr a{color:var(--bzb-gold-dark) !important;font-weight:700;text-decoration:none}
@media(max-width:980px){.bzb-suchergebnisse{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.bzb-suchergebnisse{grid-template-columns:1fr}}
/* ============================================================
33. Hero: Panel und Portraet sauber ausrichten
------------------------------------------------------------
Das Bildpanel beginnt auf gleicher Hoehe wie die Ortszeile und
reicht bis zur Vertrauensleiste. Das Portraet steht mittig und
wird am Rand nicht mehr angeschnitten.
============================================================ */
.bzb-hero .bzb-inner{align-items:stretch}
.bzb-hero-copy{display:flex;flex-direction:column;justify-content:center}
.bzb-figure{
align-self:stretch;
justify-content:center;
padding:0 6%;
}
.bzb-figure figure{
margin:0;
width:100%;
display:flex;
justify-content:center;
align-items:flex-end;
line-height:0;
}
.bzb-figure img.person,
.bzb-figure figure img{
max-width:min(360px, 100%);
width:auto;
height:auto;
margin:0 auto;
display:block;
}
@media(max-width:980px){
.bzb-figure{padding:0 12%}
.bzb-hero-copy{padding-bottom:28px}
}
/* ============================================================
34. Hero nach Variante B
------------------------------------------------------------
Textspalte links, rechts das Bildpanel mit der Landschaft.
Das Portraet steht gross und buendig unten im Panel, links
unten liegt die weisse Namenskarte. Unter der Schaltflaeche
steht die Bewertung als Vertrauenselement.
============================================================ */
.bzb-hero{padding-top:44px}
.bzb-hero .bzb-inner{align-items:stretch;gap:40px}
.bzb-hero-copy{display:flex;flex-direction:column;justify-content:center;padding-bottom:44px}
.bzb-figure{
position:relative;
align-self:stretch;
min-height:470px;
padding:0;
border-radius:8px 8px 0 0;
border-bottom:5px solid var(--bzb-gold);
background-position:center 62%;
display:flex;
align-items:flex-end;
justify-content:center;
overflow:hidden;
}
.bzb-figure:before{
background:linear-gradient(to bottom, rgba(36,28,82,0) 58%, rgba(36,28,82,.30) 100%);
}
.bzb-figure figure{margin:0;line-height:0;display:flex;align-items:flex-end;justify-content:center;height:100%}
.bzb-figure img.person,
.bzb-figure figure img{
position:relative;
z-index:1;
height:88%;
width:auto;
max-width:none;
display:block;
margin:0;
}
/* Weisse Namenskarte unten links im Panel */
.bzb-namenskarte{
position:absolute;
left:16px;
bottom:16px;
z-index:2;
margin:0 !important;
background:#FFFFFF;
border-left:5px solid var(--bzb-gold);
border-radius:0 4px 4px 0;
padding:12px 16px;
max-width:260px;
font-size:14px !important;
line-height:1.45;
color:var(--bzb-muted) !important;
}
.bzb-namenskarte strong{display:block;color:var(--bzb-navy) !important;font-size:15.5px}
/* Bewertungszeile unter der Schaltflaeche */
.bzb-bewertung{
display:flex;align-items:center;gap:9px;flex-wrap:wrap;
font-size:14.5px;color:var(--bzb-muted) !important;margin:18px 0 0 !important;
}
.bzb-sterne{color:var(--bzb-gold-dark);font-size:17px;letter-spacing:1px}
@media(max-width:980px){
.bzb-figure{min-height:360px}
.bzb-figure img.person,.bzb-figure figure img{height:82%}
.bzb-namenskarte{position:static;max-width:none;margin:14px 0 0 !important;border-radius:0 4px 4px 0}
.bzb-hero .bzb-inner{gap:24px}
}
/* ============================================================
35. Namenskarte zuverlaessig im Bildpanel verankern
------------------------------------------------------------
Je nach Blockaufbau ordnet der Editor Kindelemente anders an.
Die Karte wird deshalb ausdruecklich am Bildpanel ausgerichtet
und nicht an einem weiter aussen liegenden Bereich.
============================================================ */
.bzb-figure{position:relative !important}
.bzb-figure .bzb-namenskarte{
position:absolute !important;
left:16px !important;
right:auto !important;
top:auto !important;
bottom:16px !important;
width:auto !important;
max-width:min(260px, calc(100% - 32px)) !important;
z-index:3;
}
/* Sitzt die Karte im Aufbau ausserhalb des Panels, wird sie
stattdessen als ruhige Zeile darunter dargestellt. */
.bzb-inner > .bzb-namenskarte,
.bzb-hero-copy > .bzb-namenskarte{
position:static !important;
max-width:none !important;
margin:14px 0 0 !important;
}
@media(max-width:980px){
.bzb-figure .bzb-namenskarte{
position:static !important;
max-width:none !important;
margin:14px 0 0 !important;
}
}
/* ============================================================
36. Namenskarte als Leiste, Leitsatz unter der Bewertung
------------------------------------------------------------
Die Karte liegt jetzt als schmale Leiste am unteren Rand des
Bildpanels. Damit kann sie das Gesicht nicht mehr ueberdecken.
Der Leitsatz von Herrn Brand steht in der Textspalte.
============================================================ */
.bzb-figure .bzb-namenskarte{
left:0 !important;
right:0 !important;
bottom:0 !important;
max-width:none !important;
background:rgba(255,255,255,.94);
border-left:0 !important;
border-top:3px solid var(--bzb-gold);
border-radius:0 !important;
padding:11px 18px !important;
font-size:14px !important;
line-height:1.4;
}
.bzb-figure .bzb-namenskarte strong{
display:inline !important;
font-size:15px;
margin-right:8px;
}
.bzb-figure .bzb-namenskarte strong:after{
content:"·";
color:var(--bzb-gold-dark);
margin-left:8px;
font-weight:400;
}
.bzb-leitsatz{
font-size:15.5px !important;
line-height:1.5;
color:var(--bzb-muted) !important;
font-style:italic;
border-left:3px solid var(--bzb-gold);
padding-left:14px;
margin:14px 0 0 !important;
max-width:34em;
}
@media(max-width:980px){
.bzb-figure .bzb-namenskarte{position:absolute !important;border-radius:0 !important}
}
/* ============================================================
36. Hero: Portraetgroesse, Namenskarte, Leitsatz (ersetzt)
------------------------------------------------------------
Das Portraet ist kleiner, damit die Namenskarte nicht in den
Bart ragt. Groesse und Bild lassen sich im Editor aendern:
Eine im Bildblock gesetzte Breite und ein im Gruppenblock
gesetztes Hintergrundbild haben Vorrang, weil das Theme hier
ohne Ausrufezeichen arbeitet.
============================================================ */
.bzb-figure img.person,
.bzb-figure figure img{
height:auto;
max-height:74%;
width:auto;
max-width:min(320px, 84%);
}
.bzb-figure .bzb-namenskarte{
bottom:14px !important;
max-width:min(230px, calc(100% - 28px)) !important;
padding:10px 14px;
font-size:13.5px !important;
line-height:1.4;
}
.bzb-figure .bzb-namenskarte strong{font-size:14.5px}
/* Leitsatz unter der Bewertungszeile */
.bzb-leitsatz{
font-size:15px !important;
line-height:1.55;
color:var(--bzb-muted) !important;
border-left:4px solid var(--bzb-gold);
padding-left:14px;
margin:14px 0 0 !important;
max-width:34em;
}
/* ============================================================
37. Hero: Portraet nach rechts, Karte frei, Groesse waehlbar
------------------------------------------------------------
Das Portraet steht rechts im Panel, die Namenskarte links davon
auf freier Flaeche. Die Groesse laesst sich ohne neues Theme
aendern: der Gruppe des Bildpanels unter Erweitert eine der
Klassen portraet-klein, portraet-gross oder portraet-riesig
geben. Ohne Klasse gilt die mittlere Groesse.
============================================================ */
.bzb-figure{
justify-content:flex-end;
padding:0 3% 0 0;
}
.bzb-figure img.person,
.bzb-figure figure img{
height:84%;
width:auto;
max-height:none;
max-width:none;
align-self:flex-end;
}
.bzb-figure.portraet-klein img{height:70%}
.bzb-figure.portraet-gross img{height:92%}
.bzb-figure.portraet-riesig img{height:100%}
.bzb-figure .bzb-namenskarte{
bottom:18px !important;
left:18px !important;
max-width:min(240px, calc(100% - 36px)) !important;
}
@media(max-width:980px){
.bzb-figure{justify-content:center;padding:0 6%}
.bzb-figure img.person,.bzb-figure figure img{height:78%}
}
/* Namenskarte: Name immer in eigener Zeile, ausreichend breit */
.bzb-figure .bzb-namenskarte{max-width:min(268px, calc(100% - 36px)) !important;padding:11px 15px}
.bzb-figure .bzb-namenskarte strong{display:block !important;margin-bottom:2px}
/* ============================================================
38. Portraet steht immer auf der Unterkante
------------------------------------------------------------
Unabhaengig davon, ob die Gruppe im Editor auf Fluss, Raster
oder Flex steht, wird das Bildpanel als Flexbereich mit unterer
Ausrichtung dargestellt. Zusaetzliche Klassen erlauben ein
Feinjustieren ohne neues Theme:
portraet-tiefer, portraet-hoeher.
============================================================ */
.bzb-figure{
display:flex !important;
flex-direction:row !important;
align-items:flex-end !important;
justify-content:flex-end !important;
}
.bzb-figure > *{
align-self:flex-end !important;
margin-bottom:0 !important;
}
.bzb-figure figure,
.bzb-figure .wp-block-image{
margin:0 !important;
line-height:0;
align-self:flex-end !important;
display:flex !important;
align-items:flex-end !important;
}
.bzb-figure img{
display:block;
vertical-align:bottom;
margin-bottom:0 !important;
}
/* Feinjustierung */
.bzb-figure.portraet-tiefer img{margin-bottom:-3% !important}
.bzb-figure.portraet-hoeher img{margin-bottom:5% !important}
/* Die Namenskarte bleibt davon unberuehrt */
.bzb-figure .bzb-namenskarte{align-self:auto !important}
/* ============================================================
39. Kopfbereich: Logo und Menue praesenter
------------------------------------------------------------
Das Logo wird groesser dargestellt, die Menuepunkte bekommen
Gewicht, Abstand und eine goldene Linie beim Ueberfahren und
fuer die aktive Seite. Der letzte Punkt wird als Schaltflaeche
hervorgehoben, wenn ihm im Menue die Klasse menue-kontakt
gegeben wird.
============================================================ */
.site-branding img,
.site-header img.custom-logo,
.site-header .site-brand-logo img{
max-width:none !important;
width:auto !important;
height:clamp(52px, 5vw, 76px) !important;
}
.site-header .main-navigation a,
.site-header .primary-menu-container a,
.site-header nav a{
font-size:16.5px !important;
font-weight:600 !important;
color:var(--bzb-navy) !important;
letter-spacing:.005em;
padding-left:14px !important;
padding-right:14px !important;
position:relative;
}
.site-header .main-navigation a:after,
.site-header .primary-menu-container a:after{
content:"";
position:absolute;
left:14px; right:14px; bottom:10px;
height:3px; border-radius:2px;
background:var(--bzb-gold);
transform:scaleX(0);
transform-origin:left;
transition:transform .18s ease;
}
.site-header .main-navigation a:hover:after,
.site-header .primary-menu-container a:hover:after,
.site-header .current-menu-item > a:after,
.site-header .current_page_item > a:after{transform:scaleX(1)}
.site-header .current-menu-item > a,
.site-header .current_page_item > a{color:var(--bzb-navy) !important}
/* Letzter Menuepunkt als Schaltflaeche: im Menue die Klasse menue-kontakt vergeben */
.site-header .menue-kontakt > a{
background:var(--bzb-gold);
color:#241C52 !important;
border-radius:4px;
padding:11px 20px !important;
margin-left:10px;
min-height:44px;
display:inline-flex;
align-items:center;
}
.site-header .menue-kontakt > a:after{display:none}
.site-header .menue-kontakt > a:hover{background:#B0883A}
@media(max-width:1100px){
.site-header .main-navigation a,
.site-header .primary-menu-container a{font-size:15.5px !important;padding-left:10px !important;padding-right:10px !important}
}
/* ============================================================
40. Aktionszeile deutlich schmaler
------------------------------------------------------------
Eine Zeile statt eines Blocks: Auszeichnung, Kernsatz und
Schaltflaeche nebeneinander, der erklaerende Text tritt
zurueck. Die Schaltflaeche wird nicht mehr zusammengequetscht.
============================================================ */
.bzb-ribbon.is-hell{padding:12px 24px}
.bzb-ribbon.is-hell .bzb-inner{
grid-template-columns:minmax(0,1fr) auto !important;
gap:18px;
align-items:center;
}
.bzb-ribbon.is-hell .bzb-ribbon-flag{
display:inline-block;
margin:0 10px 0 0 !important;
padding:2px 10px;
font-size:11.5px;
vertical-align:middle;
}
.bzb-ribbon.is-hell .bzb-ribbon-head{
display:inline;
font-size:17px !important;
line-height:1.35;
margin:0 !important;
}
.bzb-ribbon.is-hell .bzb-ribbon-sub{
display:inline;
font-size:14.5px !important;
color:var(--bzb-muted) !important;
margin:0 0 0 8px !important;
}
.bzb-ribbon.is-hell .bzb-btn .wp-element-button{
white-space:nowrap;
min-width:220px;
padding:12px 20px;
min-height:44px;
}
.bzb-ribbon.is-hell .wp-block-buttons{justify-content:flex-end}
@media(max-width:860px){
.bzb-ribbon.is-hell .bzb-inner{grid-template-columns:1fr !important;gap:10px}
.bzb-ribbon.is-hell .bzb-ribbon-sub{display:block;margin:6px 0 0 !important}
.bzb-ribbon.is-hell .wp-block-buttons{justify-content:flex-start}
.bzb-ribbon.is-hell .bzb-btn .wp-element-button{width:100%;min-width:0}
}
/* ============================================================
41. Aktionszeile in der oberen Kopfzeile von Kadence
------------------------------------------------------------
Wird der Bannertext als HTML-Element in die obere Kopfzeile
gelegt, steht er ueber Logo und Menue. Die Gestaltung
entspricht der Aktionszeile im Seiteninhalt.
============================================================ */
.site-top-header-wrap,
.site-header-top-section{
background:var(--bzb-gold-pale) !important;
border-bottom:1px solid var(--bzb-gold);
}
.bzb-topbar{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px 14px;
padding:7px 0;
font-size:14.5px;
line-height:1.4;
color:var(--bzb-navy);
}
.bzb-topbar .bzb-topbar-flag{
display:inline-block;
border:1.5px solid var(--bzb-navy);
border-radius:40px;
padding:2px 10px;
font-size:11.5px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
white-space:nowrap;
}
.bzb-topbar strong{font-weight:700}
.bzb-topbar .bzb-topbar-text{color:var(--bzb-muted)}
.bzb-topbar a.bzb-topbar-btn{
margin-left:auto;
background:var(--bzb-navy);
color:#FFFFFF !important;
text-decoration:none !important;
font-weight:700;
font-size:14px;
padding:8px 16px;
border-radius:4px;
white-space:nowrap;
min-height:38px;
display:inline-flex;
align-items:center;
}
.bzb-topbar a.bzb-topbar-btn:hover{background:#160F3A}
@media(max-width:860px){
.bzb-topbar{font-size:13.5px;padding:8px 0}
.bzb-topbar .bzb-topbar-text{display:none}
.bzb-topbar a.bzb-topbar-btn{margin-left:0;width:100%;justify-content:center}
}
/* ============================================================
42. Namenskarte flacher und tiefer
============================================================ */
.bzb-figure .bzb-namenskarte{
bottom:10px !important;
left:10px !important;
max-width:min(215px, calc(100% - 20px)) !important;
padding:9px 13px !important;
font-size:13px !important;
}
.bzb-figure .bzb-namenskarte strong{font-size:14px !important;margin-bottom:1px}
/* ============================================================
43. Rechnerabschnitt mit vier Kacheln
------------------------------------------------------------
Nach dem Entfernen von Zins- und Sanierungsrechner bleiben
vier Kacheln. Sie werden in zwei Reihen zu zwei Spalten
dargestellt, damit keine Luecke entsteht.
============================================================ */
.bzb-section .bzb-grid3:has(> .bzb-tool:nth-child(4):last-child){
grid-template-columns:repeat(2, minmax(0,1fr));
}
@media(max-width:700px){
.bzb-section .bzb-grid3:has(> .bzb-tool:nth-child(4):last-child){
grid-template-columns:1fr;
}
}
/* ============================================================
44. Kopfbereich: Telefonnummer und Terminknopf
------------------------------------------------------------
Beide Elemente werden im Customizer unter Kopfzeile in die
rechte Zone gezogen. Die Telefonnummer als HTML-Element mit
der Klasse bzb-kopf-tel, der Knopf als Button-Element.
============================================================ */
.bzb-kopf-tel{
color:var(--bzb-navy) !important;
font-weight:700 !important;
font-size:18px !important;
text-decoration:none !important;
margin-right:16px;
white-space:nowrap;
display:inline-flex;
align-items:center;
gap:8px;
min-height:44px;
}
.bzb-kopf-tel:hover{color:var(--bzb-gold-dark) !important}
.bzb-kopf-tel:before{
content:"";
width:19px;height:19px;
flex:0 0 auto;
background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* Terminknopf im Kopfbereich in den Hausfarben */
.site-header .header-button,
.site-header .kadence-header-button,
.site-header .header-html .wp-block-button__link{
background:var(--bzb-gold) !important;
color:#241C52 !important;
border:0 !important;
border-radius:4px !important;
font-weight:700 !important;
font-size:15.5px !important;
padding:12px 22px !important;
min-height:46px;
display:inline-flex;
align-items:center;
}
.site-header .header-button:hover,
.site-header .kadence-header-button:hover{background:#B0883A !important}
@media(max-width:980px){
.bzb-kopf-tel{font-size:16px !important;margin-right:10px}
.site-header .header-button{padding:11px 16px !important;font-size:14.5px !important}
}
/* ============================================================
45. Abschnitte der neuen Startseite und der Seite Ueber uns
============================================================ */
.bzb-immo-text{display:flex;flex-direction:column;justify-content:center}
.bzb-leitsatz{
font-size:15px !important;line-height:1.55;color:var(--bzb-muted) !important;
border-left:4px solid var(--bzb-gold);padding-left:14px;margin:14px 0 0 !important;max-width:34em;font-style:italic;
}
.bzb-lp-kopf{background:var(--bzb-sand);border-bottom:1px solid var(--bzb-line);padding:52px 24px}
.bzb-lp-kopf .bzb-inner{max-width:1140px;margin:0 auto}
.bzb-lp-kopf h1{margin:0 0 14px}
.bzb-autor{font-size:14px !important;color:var(--bzb-muted) !important;border-top:1px solid var(--bzb-line);padding-top:14px;margin-top:18px !important}
.bzb-consent{font-size:13.5px !important;color:var(--bzb-muted) !important}
.bzb-karte-platzhalter{
border:1px dashed var(--bzb-line);border-radius:4px;padding:14px;text-align:center;
font-size:14px !important;color:var(--bzb-muted) !important;
}
.bzb-kanaele{display:grid;gap:16px}
.bzb-kanal{background:#fff;border:1px solid var(--bzb-line);border-radius:6px;padding:18px 20px}
.bzb-kanal h3{font-size:18px;margin:4px 0 8px}
.bzb-rolle{font-size:12px !important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bzb-gold-dark) !important;margin:0 !important}
.bzb-formular{background:#fff;border-top:4px solid var(--bzb-gold);border-radius:4px;padding:20px 22px}
.bzb-immo-text .wp-block-image img{border-radius:6px}
/* ============================================================
46. Bewertungssiegel in der Vertrauensleiste
------------------------------------------------------------
Das Siegel von ProvenExpert bekommt eine eigene Spalte rechts.
Die vier Textangaben behalten ihre Breite, die Leiste waechst
nicht in die Hoehe und der Hero darueber bleibt unveraendert.
============================================================ */
.bzb-trust .bzb-inner{
grid-template-columns:repeat(4, minmax(0,1fr)) auto !important;
align-items:center;
gap:18px 26px;
}
.bzb-trust .wp-block-image{
margin:0 !important;
grid-column:5;
justify-self:end;
align-self:center;
line-height:0;
}
.bzb-trust .wp-block-image img,
.bzb-trust img[src*="provenexpert"]{
width:96px !important;
max-height:112px;
height:auto !important;
object-fit:contain;
display:block;
background:#FFFFFF;
padding:6px;
border-radius:6px;
box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.bzb-trust p{margin:0 !important;line-height:1.45}
@media(max-width:1100px){
.bzb-trust .bzb-inner{grid-template-columns:repeat(2, minmax(0,1fr)) auto !important}
.bzb-trust .wp-block-image{grid-column:3;grid-row:1 / span 2}
}
@media(max-width:700px){
.bzb-trust .bzb-inner{grid-template-columns:1fr !important}
.bzb-trust .wp-block-image{grid-column:1;grid-row:auto;justify-self:center;margin-top:10px !important}
.bzb-trust .wp-block-image img{width:116px !important}
}
/* ============================================================
47. Hero: gleichmaessige Hoehe
------------------------------------------------------------
Textspalte und Bildpanel richten sich an derselben Hoehe aus,
damit der Abschnitt nicht springt, wenn Elemente ergaenzt
werden. Klassen zum Feinjustieren: hero-hoeher, hero-flacher.
============================================================ */
.bzb-hero .bzb-inner{align-items:stretch}
.bzb-figure{min-height:clamp(400px, 34vw, 480px)}
.bzb-hero.hero-hoeher .bzb-figure{min-height:clamp(440px, 38vw, 540px)}
.bzb-hero.hero-flacher .bzb-figure{min-height:clamp(340px, 28vw, 420px)}
.bzb-hero-copy{padding-bottom:36px}
@media(max-width:980px){
.bzb-figure{min-height:340px}
.bzb-hero-copy{padding-bottom:24px}
}
/* ============================================================
48. Vertrauensleiste kompakter und sauber ausgerichtet
------------------------------------------------------------
Alle vier Angaben beginnen auf gleicher Hoehe, auch wenn ein
Text zweizeilig umbricht. Die Leiste wird flacher, damit sie
den Hero nicht auseinanderzieht.
============================================================ */
.bzb-trust{padding:0 !important}
.bzb-trust .bzb-inner{
padding:14px 24px !important;
align-items:start !important;
gap:10px 26px !important;
}
.bzb-trust p{
margin:0 !important;
align-self:start;
line-height:1.35 !important;
font-size:14px !important;
}
.bzb-trust p strong{
display:block;
font-size:18px !important;
line-height:1.2;
margin-bottom:2px;
}
.bzb-trust .wp-block-image{align-self:center !important}
@media(max-width:1100px){
.bzb-trust .bzb-inner{padding:12px 20px !important;gap:10px 18px !important}
}
@media(max-width:700px){
.bzb-trust .bzb-inner{padding:14px 18px !important;gap:12px !important}
.bzb-trust p strong{font-size:17px !important}
}
/* ============================================================
49. Bewertungssiegel groesser, mit Beschriftung
------------------------------------------------------------
Das Siegel steht rechts in der Vertrauensleiste, darunter ein
kurzer Hinweis. Beides ist ein Verweis, der in einem neuen
Fenster bei ProvenExpert oeffnet.
============================================================ */
.bzb-trust .bzb-siegel{
grid-column:5;
justify-self:end;
align-self:center;
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
margin:0 !important;
text-align:center;
}
.bzb-trust .bzb-siegel a{text-decoration:none;display:block;line-height:0}
.bzb-trust .bzb-siegel img{
width:132px !important;
height:auto !important;
display:block;
background:#FFFFFF;
padding:8px;
border-radius:8px;
box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.bzb-trust .bzb-siegel .bzb-siegel-text{
font-size:12.5px;
line-height:1.35;
color:#CFCAE4;
max-width:150px;
}
.bzb-trust .bzb-siegel .bzb-siegel-text a{
display:inline;
line-height:1.35;
color:var(--bzb-gold) !important;
font-weight:700;
text-decoration:underline;
}
@media(max-width:1100px){
.bzb-trust .bzb-siegel{grid-column:3;grid-row:1 / span 2}
.bzb-trust .bzb-siegel img{width:118px !important}
}
@media(max-width:700px){
.bzb-trust .bzb-siegel{grid-column:1;grid-row:auto;justify-self:center;margin-top:12px !important}
.bzb-trust .bzb-siegel img{width:140px !important}
.bzb-trust .bzb-siegel .bzb-siegel-text{max-width:none}
}
/* ============================================================
50. Siegel schmaler, Groesse waehlbar
------------------------------------------------------------
Standard ist schmal. Ueber zusaetzliche Klassen am Block
laesst sich die Groesse aendern: siegel-gross, siegel-klein.
============================================================ */
.bzb-trust .bzb-siegel img{
width:104px !important;
max-height:none;
padding:6px;
border-radius:6px;
}
.bzb-trust .bzb-siegel.siegel-gross img{width:132px !important}
.bzb-trust .bzb-siegel.siegel-klein img{width:88px !important}
.bzb-trust .bzb-siegel .bzb-siegel-text{max-width:132px;font-size:12px}
@media(max-width:1100px){
.bzb-trust .bzb-siegel img{width:100px !important}
}
@media(max-width:700px){
.bzb-trust .bzb-siegel img{width:120px !important}
.bzb-trust .bzb-siegel .bzb-siegel-text{max-width:none}
}
/* ============================================================
51. Portraets auf der Seite Ueber uns
------------------------------------------------------------
Beide Portraets erscheinen gleich: freigestellt auf warmem
Grund, goldene Unterkante, gleiche Breite.
============================================================ */
.bzb-section .bzb-kontakt{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:start}
.bzb-section .bzb-kontakt > .wp-block-image{margin:0}
.bzb-section .bzb-kontakt > .wp-block-image img{
width:100%;height:auto;display:block;
background:var(--bzb-gold-pale);
border-radius:6px;border-bottom:4px solid var(--bzb-gold);
}
@media(max-width:900px){
.bzb-section .bzb-kontakt{grid-template-columns:1fr}
.bzb-section .bzb-kontakt > .wp-block-image{max-width:420px}
}
/* ============================================================
51. Portraets auf der Seite Ueber uns einheitlich
============================================================ */
.bzb-section .bzb-kontakt .wp-block-image img[src*="oliver-brand"],
.bzb-section .bzb-kontakt .wp-block-image img[src*="sindy-kantz"]{
width:100%;
height:auto;
background:var(--bzb-gold-pale);
border-radius:6px;
border-bottom:4px solid var(--bzb-gold);
display:block;
}
/* ============================================================
55. Verweise erkennbar machen
------------------------------------------------------------
Verweise im Fliesstext sind dauerhaft unterstrichen und
wechseln beim Ueberfahren die Farbe. Schaltflaechen zeigen
den Handzeiger und heben sich leicht an. Damit ist auf einen
Blick klar, was angeklickt werden kann.
============================================================ */
.bzb-section a:not(.wp-block-button__link):not(.bzb-sprung a),
.bzb-photo-copy a:not(.wp-block-button__link),
.bzb-faq a,
.bzb-unterlagen a,
.bzb-card a,
.bzb-kanal a{
color:var(--bzb-gold-dark);
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1.5px;
transition:color .15s ease, text-decoration-color .15s ease;
}
.bzb-section a:hover,
.bzb-photo-copy a:hover,
.bzb-faq a:hover,
.bzb-card a:hover,
.bzb-kanal a:hover{
color:var(--bzb-navy);
text-decoration-thickness:2.5px;
}
/* Alles Anklickbare bekommt den Handzeiger */
a, button, summary, .wp-block-button__link, .bzb-card a, .bzb-tool a{cursor:pointer}
/* Schaltflaechen heben sich beim Ueberfahren leicht an */
.wp-block-button__link{transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease}
.wp-block-button__link:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(36,28,82,.18)}
/* Ganze Karten anklickbar wirken lassen, wenn sie einen Verweis enthalten */
.bzb-card:has(a):hover,
.bzb-tool:has(a):hover{
border-color:var(--bzb-gold);
box-shadow:0 6px 18px rgba(36,28,82,.10);
transition:border-color .15s ease, box-shadow .15s ease;
}
/* Fragen im Fragenbereich als anklickbar kennzeichnen */
.bzb-faq summary{cursor:pointer}
.bzb-faq summary:hover{color:var(--bzb-gold-dark)}
/* Tastaturbedienung: deutlich sichtbarer Fokusrahmen */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{
outline:3px solid var(--bzb-gold);
outline-offset:2px;
border-radius:2px;
}
/* ============================================================
56. Alles Anklickbare fuehlt sich anklickbar an
------------------------------------------------------------
Handzeiger, Anheben beim Ueberfahren, Eindruecken beim Klick.
Gilt fuer Schaltflaechen, Sprungmarken, Kacheln, die feste
Leiste auf dem Handy, das Bewertungssiegel und Bilder, die
einen Verweis enthalten.
============================================================ */
a, button, summary, label, input[type="submit"], input[type="button"],
.wp-block-button__link, .bzb-btn, .bzb-sprung a, .bzb-tool a,
.bzb-card a, .bzb-kanal a, .bzb-siegel a, .bzb-ortsseiten a,
.bzb-kontaktleiste a, .wp-block-image a{cursor:pointer}
/* Einheitliche Rueckmeldung beim Ueberfahren und beim Klick */
.wp-block-button__link, .bzb-sprung a, .bzb-kontaktleiste a,
.bzb-ortsseiten a, .bzb-siegel a, .bzb-tool a{
transition:transform .12s ease, box-shadow .12s ease,
background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wp-block-button__link:active, .bzb-sprung a:active,
.bzb-kontaktleiste a:active, .bzb-ortsseiten a:active,
.bzb-siegel a:active{transform:translateY(1px);box-shadow:none}
/* Sprungmarken */
.bzb-sprung a:hover{
background:var(--bzb-gold-pale);
border-color:var(--bzb-gold);
transform:translateY(-1px);
}
/* Ortskacheln und Rechnerkacheln */
.bzb-ortsseiten a:hover{
background:var(--bzb-gold-pale);
box-shadow:0 6px 16px rgba(36,28,82,.10);
transform:translateY(-1px);
}
.bzb-tool:hover{border-color:var(--bzb-gold)}
.bzb-tool a:hover{color:var(--bzb-navy)}
/* Feste Leiste auf dem Handy */
.bzb-kontaktleiste a:hover, .bzb-kontaktleiste a:focus-visible{
filter:brightness(1.06);
}
/* Bewertungssiegel */
.bzb-siegel a:hover img{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(0,0,0,.26);
transition:transform .12s ease, box-shadow .12s ease;
}
/* Verlinkte Bilder */
.wp-block-image a:hover img{
filter:brightness(1.03);
transition:filter .15s ease;
}
/* Auf Geraeten ohne Maus keine Schwebeeffekte, dafuer klare Druckreaktion */
@media (hover:none){
.wp-block-button__link:hover, .bzb-sprung a:hover,
.bzb-ortsseiten a:hover, .bzb-card:hover{transform:none;box-shadow:none}
.wp-block-button__link:active{transform:scale(.985)}
}
/* Wer Bewegung reduziert haben moechte, bekommt keine */
@media (prefers-reduced-motion:reduce){
.wp-block-button__link, .bzb-sprung a, .bzb-ortsseiten a,
.bzb-kontaktleiste a, .bzb-siegel a{transition:none}
.wp-block-button__link:hover, .bzb-sprung a:hover,
.bzb-ortsseiten a:hover{transform:none}
}
/* ============================================================
57. Schneller Kontakt ueber WhatsApp
------------------------------------------------------------
Einheitlicher Baustein fuer alle Seiten, eingefuegt ueber den
Kurzcode bzb_whatsapp.
============================================================ */
.bzb-wa{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px 20px;
flex-wrap:wrap;
background:#FFFFFF;
border:1px solid #D9D4E8;
border-radius:6px;
padding:12px 16px;
margin:18px auto 0;
max-width:760px;
color:#241C52;
text-align:left;
}
.bzb-wa .bzb-wa-text{order:1;flex:1 1 300px;display:flex;flex-direction:column;gap:2px;margin:0 !important;font-size:16px !important}
.bzb-wa .bzb-wa-text strong{font-size:17px;color:#241C52}
.bzb-wa .bzb-wa-text span{font-size:16px;color:#3A3550;line-height:1.5}
.bzb-wa-btn{
order:2;
display:inline-flex;
align-items:center;
gap:8px;
background:#25D366;
color:#08331B !important;
text-decoration:none !important;
font-weight:700;
font-size:16px;
padding:10px 16px;
border-radius:4px;
min-height:44px;
white-space:nowrap;
transition:background-color .15s ease;
}
.bzb-wa-btn:before,
.bzb-menu-wa > a:before,
.bzb-menu-tel > a:before{
content:"";
width:17px;height:17px;flex:0 0 auto;background:currentColor;
-webkit-mask:var(--bzb-wa-icon) center/contain no-repeat;
mask:var(--bzb-wa-icon) center/contain no-repeat;
}
.bzb-menu-tel > a:before{
-webkit-mask-image:var(--bzb-tel-icon);
mask-image:var(--bzb-tel-icon);
}
:root{
--bzb-wa-icon:url("data:image/svg+xml;utf8,");
--bzb-tel-icon:url("data:image/svg+xml;utf8,");
}
.bzb-wa-btn:hover{background:#1FBE5B}
.bzb-wa-btn:focus-visible,
.bzb-menu-wa > a:focus-visible,
.bzb-menu-tel > a:focus-visible{outline:3px solid #C49C48;outline-offset:2px}
@media(max-width:700px){
.bzb-wa{flex-direction:column;align-items:stretch}
.bzb-wa .bzb-wa-text{flex:0 0 auto}
.bzb-wa-btn{justify-content:center}
}
/* WhatsApp im Hauptmenue (Menuepunkt mit CSS-Klasse bzb-menu-wa), ab 7.5 */
.header-navigation .bzb-menu-wa > a,
.main-navigation .bzb-menu-wa > a{
display:inline-flex !important;
align-items:center;
gap:6px;
background:#25D366;
color:#08331B !important;
font-weight:700;
border-radius:4px;
padding:7px 12px !important;
margin-left:10px;
line-height:1.2;
}
.header-navigation .bzb-menu-wa > a:hover,
.main-navigation .bzb-menu-wa > a:hover{background:#1FBE5B;color:#08331B !important}
.mobile-navigation .bzb-menu-wa > a{
display:flex !important;
align-items:center;
gap:8px;
color:#1B8F47 !important;
font-weight:700;
}
/* Telefon im Hauptmenue (Menuepunkt mit CSS-Klasse bzb-menu-tel), ab 7.6
Im Kopfbereich nur das Symbol, die Nummer bleibt fuer Vorleseprogramme lesbar. */
.header-navigation .bzb-menu-tel > a,
.main-navigation .bzb-menu-tel > a{
display:inline-flex !important;
align-items:center;
justify-content:center;
background:#241C52;
color:#FFFFFF !important;
border-radius:4px;
padding:9px 10px !important;
margin-left:10px;
line-height:1;
font-size:0 !important;
min-width:38px;
min-height:36px;
}
.header-navigation .bzb-menu-tel > a:before,
.main-navigation .bzb-menu-tel > a:before{width:18px;height:18px}
.header-navigation .bzb-menu-tel > a:hover,
.main-navigation .bzb-menu-tel > a:hover{background:#3A2F7A;color:#FFFFFF !important}
.header-navigation .bzb-menu-tel + .bzb-menu-wa > a{margin-left:6px}
.mobile-navigation .bzb-menu-tel > a{
display:flex !important;
align-items:center;
gap:8px;
color:#241C52 !important;
font-weight:700;
}
/* ============================================================
Externe Verweise: sichtbarer Hinweis auf neues Fenster (ab 7.0)
Gilt fuer Textverweise, nicht fuer Schaltflaechen.
============================================================ */
p a[target="_blank"]:not(.wp-block-button__link):not(.bzb-wa-btn)::after,
li:not(.menu-item) > a[target="_blank"]:not(.wp-block-button__link)::after {
content: "\00a0\2197";
content: "\00a0\2197" / " (öffnet in neuem Fenster)";
font-size: .85em;
text-decoration: none;
display: inline-block;
}
/* Aktionsbanner ohne Anbieterlogo (ab 7.3) */
.bzb-ribbon .bzb-inner:not(:has(.bzb-ribbon-logo)){grid-template-columns:minmax(0,1fr) auto}
/* ============================================================
Kopfzeile in zwei Reihen mit Aktionsleiste rechts (ab 8.5)
Reihe 1: Logo mittig in Originalproportion.
Reihe 2: Hauptmenue links, rechts Telefon, WhatsApp und
Immobiliensuche als Symbolschaltflaechen, danach "Termin buchen".
Die Symbole sind SVG-Grafiken aus functions.php (bzb_menu_aktionsleiste).
============================================================ */
@media (min-width:1025px){
#masthead .site-main-header-inner-wrap{
display:grid !important;grid-template-columns:1fr !important;grid-template-rows:auto auto;row-gap:0;
}
#masthead .site-header-main-section-left{grid-column:1;grid-row:1;justify-content:center;padding:14px 0 8px}
#masthead .site-header-main-section-right{grid-column:1;grid-row:2;border-top:1px solid #E6E1F0}
#masthead .site-branding a.brand{display:flex;align-items:center}
#masthead .site-branding a.brand img.custom-logo{
width:auto !important;max-width:340px !important;height:auto !important;max-height:70px !important;object-fit:contain;
}
#site-navigation,#site-navigation .header-menu-container{width:100%}
#site-navigation ul.menu{display:flex;align-items:center;width:100%;flex-wrap:nowrap !important}
#site-navigation ul.menu > li.menu-item:not(.bzb-menu-aktionen) > a{
padding:16px 12px !important;font-size:16px !important;white-space:nowrap;
}
#site-navigation ul.menu > li.bzb-menu-aktionen{margin-left:auto !important;padding:0;list-style:none}
#site-navigation ul.bzb-aktionen{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
#site-navigation ul.bzb-aktionen > li{margin:0 !important;padding:0}
#site-navigation ul.bzb-aktionen > li > a{
display:inline-flex !important;align-items:center;justify-content:center;
height:42px !important;min-height:42px !important;line-height:1 !important;
margin:0 !important;border-radius:6px;box-sizing:border-box;
}
#site-navigation ul.bzb-aktionen > li:not(.bzb-menu-termin) > a{width:42px !important;min-width:42px !important;padding:0 !important}
#site-navigation ul.bzb-aktionen > li > a svg{display:block;width:20px;height:20px;flex:0 0 auto}
#site-navigation .bzb-menu-aktionen a::before,
.site-header #site-navigation .bzb-menu-aktionen a::after{display:none !important;content:none !important}
#site-navigation .bzb-menu-tel > a{background:#241C52;color:#FFFFFF !important}
#site-navigation .bzb-menu-tel > a:hover{background:#3A2F7A;color:#FFFFFF !important}
#site-navigation .bzb-menu-wa > a{background:#25D366;color:#08331B !important}
#site-navigation .bzb-menu-wa > a:hover{background:#1FBE5B;color:#08331B !important}
#site-navigation .bzb-menu-suche > a{background:#FFFFFF;color:#241C52 !important;border:2px solid #241C52}
#site-navigation .bzb-menu-suche > a:hover{background:#F4EBD8;color:#241C52 !important}
#site-navigation ul.bzb-aktionen > li.bzb-menu-termin > a{
width:auto !important;min-width:0 !important;padding:0 20px !important;margin-left:6px !important;
background:#C49C48;color:#241C52 !important;font-weight:700;font-size:15.5px !important;
}
#site-navigation ul.bzb-aktionen > li.bzb-menu-termin > a:hover{background:#B0883A;color:#241C52 !important}
#site-navigation .bzb-menu-aktionen a:focus-visible{outline:3px solid #241C52;outline-offset:2px}
}
@media (min-width:1025px) and (max-width:1199px){
#masthead .site-branding a.brand img.custom-logo{max-width:280px !important}
#site-navigation ul.menu > li.menu-item:not(.bzb-menu-aktionen) > a{padding:14px 8px !important;font-size:15px !important}
#site-navigation ul.bzb-aktionen > li.bzb-menu-termin > a{padding:0 14px !important;font-size:15px !important}
#site-navigation ul.bzb-aktionen{gap:6px}
}
/* Symbol Immobiliensuche (Haus mit Lupe) */
.bzb-menu-suche > a:before{
content:"";width:17px;height:17px;flex:0 0 auto;background:currentColor;
-webkit-mask:var(--bzb-suche-icon) center/contain no-repeat;
mask:var(--bzb-suche-icon) center/contain no-repeat;
}
:root{--bzb-suche-icon:url("data:image/svg+xml;utf8,")}
/* Mobiles Menue: Aktionen als normale Eintraege mit Symbol */
.mobile-navigation .bzb-menu-termin > a{color:#8A6A24 !important;font-weight:700}
.mobile-navigation .bzb-menu-suche > a{display:flex !important;align-items:center;gap:8px;color:#241C52 !important;font-weight:700}
/* ============================================================
Bilder im Inhalt und Textfarbe (ab 8.6)
Illustrationen in Textabschnitten laufen nicht mehr ueber die
volle Breite, sondern stehen mittig mit maximal 560 Pixeln.
Fliesstext in einem dunklen Blaugrau statt Schwarz.
============================================================ */
body{color:#3A3560}
.entry-content :where(p,li,td,dd){color:#3A3560}
/* dunkle Abschnitte behalten helle Schrift */
.bzb-trust,.bzb-trust p,.bzb-trust span,.bzb-trust div,.bzb-photo p,.bzb-booking p,.bzb-fuss p,.bzb-fuss li{color:#D6D2E8}
.bzb-trust strong{color:#C49C48}
.entry-content .bzb-inner > figure.wp-block-image{
width:min(100%,560px) !important;max-width:560px !important;margin:28px auto !important;
}
.entry-content .bzb-inner > figure.wp-block-image img{
width:100%;height:auto;border-radius:10px;box-shadow:0 8px 24px rgba(36,28,82,.08);
}
@media (max-width:700px){
.entry-content .bzb-inner > figure.wp-block-image{margin:20px auto !important}
}
/* Kompaktere Abstaende zwischen den Abschnitten (ab 8.7) */
.bzb-section{padding:48px 24px}
.bzb-section + .bzb-section{padding-top:40px}
.bzb-photo{padding-top:52px;padding-bottom:52px}
.bzb-booking{padding:52px 24px}
.bzb-cta{padding:44px 24px}
.bzb-lp-kopf{padding:44px 24px}
.entry-content .bzb-section h2:first-child,.entry-content .bzb-inner > h2:first-child{margin-top:0}
.entry-content .bzb-eyebrow{margin-bottom:8px}
@media (max-width:700px){
.bzb-section{padding:36px 18px}
.bzb-section + .bzb-section{padding-top:30px}
.bzb-cta,.bzb-lp-kopf,.bzb-booking{padding:36px 18px}
}
/* Menuezeile mittig unter dem Logo, Aufklappmenue hell und lesbar (ab 8.8) */
@media (min-width:1025px){
#masthead .site-header-main-section-right{justify-content:center !important}
#masthead .site-header-item-main-navigation,#site-navigation,#site-navigation .header-menu-container,#site-navigation ul.menu{width:auto !important;flex:0 0 auto}
#site-navigation ul.menu{justify-content:center}
#site-navigation ul.menu > li.bzb-menu-aktionen{margin-left:22px !important}
.header-navigation .header-menu-container ul.sub-menu{
background:#FFFFFF !important;border:1px solid #E6E1F0;border-radius:8px;
box-shadow:0 10px 30px rgba(36,28,82,.14);padding:6px 0;
}
.header-navigation .header-menu-container ul.sub-menu li a{
color:#241C52 !important;background:transparent !important;padding:10px 18px !important;font-size:15px !important;
}
.header-navigation .header-menu-container ul.sub-menu li a:hover,
.header-navigation .header-menu-container ul.sub-menu li a:focus-visible{background:#F4EBD8 !important;color:#241C52 !important}
.header-navigation .header-menu-container ul.sub-menu li a::after{display:none !important}
}
/* Rechnerkacheln kompakt, Vorteilskasten lesbar (ab 8.9) */
.bzb-tool{padding:16px 18px;border-radius:8px}
.bzb-tool h3{font-size:16.5px;margin:0 0 4px}
.bzb-tool p{font-size:14px;line-height:1.45;margin:0 0 8px}
.bzb-tool p:has(> a){margin-top:8px}
.bzb-tool a{font-weight:700;font-size:14.5px}
.bzb-tool a[target="_blank"]::after{content:"\00a0\2197";font-size:.85em}
.bzb-grid3{gap:16px}
.bzb-photo .bzb-aktionsbox{max-width:380px;padding:18px 20px;border-radius:8px}
.bzb-photo .bzb-aktionsbox h3{font-size:19px;margin:0 0 8px;color:var(--bzb-navy)}
.bzb-photo .bzb-aktionsbox,.bzb-photo .bzb-aktionsbox p,.bzb-photo .bzb-aktionsbox li,.bzb-photo .bzb-aktionsbox span{color:#3A3560 !important;font-size:15px;line-height:1.5}
.bzb-photo .bzb-aktionsbox li::marker{color:var(--bzb-gold-dark)}
/* Engere Abstaende rund um Bilder und zwischen Absaetzen (ab 9.0) */
.entry-content .bzb-inner > figure.wp-block-image{margin:12px auto 18px !important}
.entry-content .bzb-inner > figure.wp-block-image + h2,
.entry-content .bzb-inner > figure.wp-block-image + h3{margin-top:18px !important}
.entry-content .bzb-inner > p{margin-bottom:18px}
.entry-content .bzb-inner > p:has(+ figure.wp-block-image){margin-bottom:8px}
.entry-content .bzb-inner > h2{margin-bottom:14px}
.entry-content .bzb-inner > h3{margin-bottom:10px}
.entry-content .bzb-inner > ul,.entry-content .bzb-inner > ol{margin-bottom:18px}
.entry-content .bzb-section h2 + p,.entry-content .bzb-inner > h2 + p{margin-top:0}
@media (max-width:700px){
.entry-content .bzb-inner > figure.wp-block-image{margin:10px auto 14px !important}
}
/* Bild in dunklen Abschnitten (Grenzgaenger) und Ortsseiten (ab 9.1) */
.bzb-photo .bzb-photo-bild{margin:0;justify-self:center;width:100%;max-width:480px}
.bzb-photo .bzb-photo-bild img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.35);border:2px solid rgba(196,156,72,.55)}
.bzb-photo .bzb-photo-bild figcaption{color:#D6D2E8;font-size:13px;text-align:center;margin-top:8px}
@media (max-width:900px){.bzb-photo .bzb-photo-bild{max-width:420px;margin-top:8px}}
.bzb-ortsfakten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 6px}
.bzb-ortsfakten p{background:#fff;border:1px solid var(--bzb-line);border-top:4px solid var(--bzb-gold);border-radius:8px;padding:14px 16px;margin:0;font-size:15px;line-height:1.45}
.bzb-ortsfakten p strong{display:block;color:var(--bzb-navy);font-size:16px;margin-bottom:4px}
@media (max-width:760px){.bzb-ortsfakten{grid-template-columns:1fr}}
/* Baufinanzierungslexikon (ab 9.3) */
.bzb-lexikon{max-width:900px;margin:0 auto}
.bzb-lex-suche{background:#fff;border:1px solid var(--bzb-line);border-radius:10px;padding:18px 20px;margin:0 0 18px;box-shadow:0 8px 24px rgba(36,28,82,.06)}
.bzb-lex-suche label{display:block;font-weight:700;color:var(--bzb-navy);margin-bottom:8px}
.bzb-lex-suche input[type="search"]{width:100%;font-size:18px;padding:12px 14px;border:2px solid var(--bzb-navy);border-radius:8px;color:#241C52;background:#fff}
.bzb-lex-suche input[type="search"]:focus-visible{outline:3px solid var(--bzb-gold);outline-offset:2px}
.bzb-lex-hinweis{font-size:14px;color:#3A3560;margin:8px 0 0}
.bzb-lex-anzahl{font-weight:700;color:var(--bzb-navy)}
.bzb-lex-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.bzb-lex-nav a{display:inline-block;min-width:36px;text-align:center;padding:6px 8px;border:1px solid var(--bzb-line);border-radius:6px;background:#fff;color:var(--bzb-navy);font-weight:700;text-decoration:none}
.bzb-lex-nav a:hover,.bzb-lex-nav a:focus-visible{background:#F4EBD8}
.bzb-lex-buchstabe{font-size:22px;color:var(--bzb-gold-dark);border-bottom:2px solid var(--bzb-gold);padding-bottom:4px;margin:26px 0 12px}
.bzb-begriff{background:#fff;border:1px solid var(--bzb-line);border-left:4px solid var(--bzb-gold);border-radius:8px;padding:14px 18px;margin:0 0 12px;scroll-margin-top:140px}
.bzb-begriff h3{font-size:18px;margin:0 0 4px}
.bzb-begriff h3 a{color:var(--bzb-navy);text-decoration:none}
.bzb-begriff h3 a:hover{text-decoration:underline}
.bzb-lex-gruppe-tag{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:#8A6A24;margin:0 0 6px !important}
.bzb-begriff > p:last-child{margin:0;font-size:15.5px;line-height:1.55;color:#3A3560}
.bzb-begriff.ist-treffer{border-left-color:var(--bzb-navy)}
.bzb-begriff:target{box-shadow:0 0 0 3px var(--bzb-gold)}
.bzb-lex-leer{background:#F4EBD8;border-radius:8px;padding:16px 18px;color:#241C52}
.bzb-lex-leer p{margin:6px 0 0;color:#3A3560}
@media (max-width:700px){.bzb-lex-suche{padding:14px}.bzb-lex-suche input[type="search"]{font-size:16px}}
/* Lexikon 9.4: Suchwoerter nur im Editor sichtbar, Bloecke im Editor gepflegt */
.entry-content .bzb-lex-aliase{display:none}
.editor-styles-wrapper .bzb-lex-aliase{display:block;font-size:12px;color:#8A6A24;background:#FAF7F1;border:1px dashed #C49C48;padding:4px 8px;border-radius:4px}
.entry-content .bzb-begriff h3{font-size:18px;margin:0 0 4px;color:var(--bzb-navy)}
.entry-content .bzb-begriff > p:last-child{margin:0;font-size:15.5px;line-height:1.55;color:#3A3560}
.entry-content .bzb-lex-buchstabe{font-size:22px;color:var(--bzb-gold-dark);border-bottom:2px solid var(--bzb-gold);padding-bottom:4px;margin:26px 0 12px}
.bzb-lex-ergebnisse .bzb-begriff{margin-bottom:12px}
/* Lexikon 9.5: Buchstabenleiste bleibt beim Scrollen oben sichtbar */
.bzb-lex-nav{position:sticky;top:0;z-index:20;background:rgba(250,247,241,.97);padding:10px 0;margin:0 0 18px;border-bottom:1px solid var(--bzb-line)}
.admin-bar .bzb-lex-nav{top:32px}
.bzb-lex-nav a.bzb-lex-nav-suche{min-width:auto;padding:6px 12px;background:var(--bzb-navy);color:#fff;border-color:var(--bzb-navy)}
.bzb-lex-nav a.bzb-lex-nav-suche:hover,.bzb-lex-nav a.bzb-lex-nav-suche:focus-visible{background:#3A3560}
.bzb-lex-buchstabe{scroll-margin-top:70px}
.bzb-lex-suche{scroll-margin-top:20px}
.entry-content .bzb-begriff{scroll-margin-top:80px}
@media (max-width:782px){.admin-bar .bzb-lex-nav{top:46px}}
.entry-content .bzb-lex-leer{margin-bottom:18px}
/* BauzinsRadar Tabellen (ab 9.8) */
.bzb-zinstabelle table{border-collapse:collapse;width:100%;font-size:15.5px}
.bzb-zinstabelle th{background:var(--bzb-navy);color:#fff;text-align:left;padding:10px 12px}
.bzb-zinstabelle td{padding:9px 12px;border-bottom:1px solid var(--bzb-line);color:#3A3560}
.bzb-zinstabelle tr:nth-child(even) td{background:#FAF7F1}
.bzb-zinstabelle figcaption{font-size:13.5px;color:#3A3560;text-align:left;margin-top:6px}
.entry-content .bzb-hinweisbox{background:#F4EBD8;border-left:4px solid var(--bzb-gold);border-radius:8px;padding:14px 18px;margin:18px 0}
.entry-content .bzb-hinweisbox p{font-size:14.5px;line-height:1.5;margin:0 0 8px;color:#3A3560}
.entry-content .bzb-hinweisbox p:last-child{margin-bottom:0}
/* Ausgabenliste BauzinsRadar als Kacheln (ab 9.9) */
.entry-content ul.wp-block-latest-posts.bzb-ausgaben{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0;margin:8px 0 0;list-style:none}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben > li{background:#fff;border:1px solid var(--bzb-line);border-radius:10px;overflow:hidden;margin:0;padding:0 0 16px;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(36,28,82,.06)}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben .wp-block-latest-posts__featured-image{margin:0 0 12px}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben .wp-block-latest-posts__featured-image img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block;border-radius:0}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben > li > a:not(.wp-block-latest-posts__featured-image a){display:block;padding:0 16px;font-weight:700;font-size:16.5px;line-height:1.35;color:var(--bzb-navy);text-decoration:none}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben > li > a:hover{text-decoration:underline}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben .wp-block-latest-posts__post-date{display:block;padding:6px 16px 0;font-size:13px;color:#8A6A24;letter-spacing:.03em}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben .wp-block-latest-posts__post-excerpt{padding:8px 16px 0;margin:0;font-size:14.5px;line-height:1.5;color:#3A3560}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben .wp-block-latest-posts__post-excerpt a{font-weight:700;color:var(--bzb-navy)}
@media (max-width:900px){.entry-content ul.wp-block-latest-posts.bzb-ausgaben{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.entry-content ul.wp-block-latest-posts.bzb-ausgaben{grid-template-columns:1fr}}
.entry-content .bzb-radar-logo{margin:0 0 14px}
.entry-content .bzb-radar-logo img{width:100%;height:auto}
/* Startseite Kopf: Siegel links neben dem Portraet, Leitsatz am Bildrahmen (ab 10.0) */
.bzb-hero .bzb-inner > .bzb-hero-seite{display:flex;flex-direction:column;align-self:stretch;min-width:0}
.bzb-hero-seite .bzb-figure{flex:1 1 auto;border-radius:8px 8px 0 0}
.bzb-hero-seite .bzb-figure figure{justify-content:flex-end;padding-right:6%}
.bzb-siegel{position:absolute;left:18px;bottom:104px;z-index:3;text-align:center;width:180px}
.bzb-siegel a{display:block;line-height:0}
.bzb-siegel img{width:180px;height:auto;border-radius:6px;box-shadow:0 10px 26px rgba(36,28,82,.28);background:#fff}
.bzb-siegel-text{margin:8px 0 0 !important;font-size:12.5px !important;font-weight:700;color:#fff !important;background:rgba(36,28,82,.85);padding:4px 8px;border-radius:4px;line-height:1.3}
.bzb-hero-seite .bzb-leitsatz{margin:0 !important;background:#fff;border:1px solid var(--bzb-line);border-top:0;border-radius:0 0 8px 8px;padding:14px 18px;color:var(--bzb-navy) !important;font-weight:700;font-size:15.5px;line-height:1.45}
@media (max-width:980px){
.bzb-siegel{position:static;width:auto;margin:14px 0 0;display:flex;align-items:center;gap:12px;text-align:left}
.bzb-siegel img{width:120px}
.bzb-siegel-text{margin:0 !important;background:transparent;color:var(--bzb-navy) !important;padding:0}
.bzb-hero-seite .bzb-figure{display:grid;grid-template-columns:auto 1fr}
}
/* Restliche schwarze Schrift in Dunkelblau: Ueberschriften und Hervorhebungen */
.entry-content :where(h1,h2,h3,h4,h5,h6){color:var(--bzb-navy)}
.entry-content :where(strong,b){color:inherit}
:where(.site-footer,.site-header) :where(h1,h2,h3,h4){color:var(--bzb-navy)}
/* Fotos statt Illustrationen in den Bildflaechen (ab 10.1) */
.bzb-figure{background-image:url('assets/img/foto-baum-panel.webp') !important;background-position:center 55% !important}
.bzb-photo.is-kaiserstuhl{background-image:url('assets/img/foto-strasse-panorama.webp') !important;background-position:center 60%}
.bzb-photo.is-markgraeflerland{background-image:url('assets/img/foto-dorf-panorama.webp') !important;background-position:center 60%}
.bzb-photo.is-freiburg{background-image:url('assets/img/foto-baum-panorama.webp') !important;background-position:center 60%}
.bzb-photo.is-kaiserstuhl:before,.bzb-photo.is-markgraeflerland:before,.bzb-photo.is-freiburg:before{background:linear-gradient(90deg,rgba(36,28,82,.86) 0%,rgba(36,28,82,.72) 55%,rgba(36,28,82,.55) 100%)}
/* Kopfbereich: Siegel links, Portraet rechts, ohne Ueberlappung (ab 10.1) */
.bzb-hero-seite .bzb-figure{display:grid !important;grid-template-columns:200px 1fr;align-items:end;padding:0 0 0 16px;overflow:hidden}
.bzb-hero-seite .bzb-figure .bzb-siegel{position:static;grid-column:1;grid-row:1;align-self:start;margin:52px 0 0;width:180px;bottom:auto;left:auto}
.bzb-hero-seite .bzb-figure figure{grid-column:2;grid-row:1;justify-content:center;padding:0;height:100%;align-self:end}
.bzb-hero-seite .bzb-figure figure img{height:88%;width:auto;max-height:420px}
.bzb-hero-seite .bzb-figure .bzb-namenskarte{grid-column:1;grid-row:1;align-self:end;position:static !important;margin:0 0 16px !important;max-width:200px}
@media (max-width:980px){
.bzb-hero-seite .bzb-figure{grid-template-columns:1fr;padding:16px;min-height:0}
.bzb-hero-seite .bzb-figure .bzb-siegel{grid-row:auto;margin:0 0 12px;display:flex;align-items:center;gap:12px;width:auto}
.bzb-hero-seite .bzb-figure figure{grid-column:1;grid-row:auto;height:auto}
.bzb-hero-seite .bzb-figure figure img{height:auto;max-height:300px}
.bzb-hero-seite .bzb-figure .bzb-namenskarte{grid-row:auto;margin:12px 0 0 !important;max-width:none}
}
/* Beitragsliste als Zeilenkarten auf der Startseite (ab 10.1) */
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste{grid-template-columns:1fr;gap:14px}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste > li{display:grid;grid-template-columns:200px 1fr;column-gap:16px;align-items:center;padding:0 16px 0 0}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__featured-image{grid-row:1 / span 3;margin:0;height:100%}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__featured-image a,.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__featured-image img{height:100%;min-height:120px;object-fit:cover;aspect-ratio:auto}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste > li > a{padding:14px 0 0;font-size:16px}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__post-date{padding:4px 0 0}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__post-excerpt{padding:6px 0 14px}
@media (max-width:600px){.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste > li{grid-template-columns:1fr;padding:0 0 14px}.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__featured-image{grid-row:auto}.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste > li > a,.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__post-excerpt,.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__post-date{padding-left:16px;padding-right:16px}}
/* Korrektur 10.2: Bildpanel im Kopf, Portraet mittig und passend, Siegel sichtbar; Foto auch im Gewerbe-Abschnitt */
.bzb-hero-seite .bzb-figure{grid-template-columns:200px minmax(0,1fr) !important;min-height:470px}
.bzb-hero-seite .bzb-figure > *{min-width:0}
.bzb-hero-seite .bzb-figure figure{height:100%;display:flex;align-items:flex-end;justify-content:center;padding:0 8px}
.bzb-hero-seite .bzb-figure figure img{height:auto !important;width:auto !important;max-width:100% !important;max-height:390px !important;margin:0}
.bzb-photo,.bzb-photo.is-gewerbe{background-image:url('assets/img/foto-dorf-panorama.webp') !important;background-position:center 60%}
.bzb-photo.is-markgraeflerland{background-image:url('assets/img/foto-baum-panorama.webp') !important}
.bzb-photo.is-gewerbe:before,.bzb-photo:before{background:linear-gradient(90deg,rgba(36,28,82,.88) 0%,rgba(36,28,82,.74) 55%,rgba(36,28,82,.58) 100%)}
/* Korrektur 10.2: Zeilenkarten auf der Startseite, Bild in fester Proportion */
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__featured-image{height:auto !important;align-self:center}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__featured-image a{display:block;height:auto !important;min-height:0 !important}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste .wp-block-latest-posts__featured-image img{height:auto !important;min-height:0 !important;aspect-ratio:1200/630 !important;width:100%;object-fit:cover}
.entry-content ul.wp-block-latest-posts.bzb-ausgaben-liste > li{align-items:center}
.entry-content .bzb-wissen{display:grid !important;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.entry-content .bzb-themen{background:#fff;border:1px solid var(--bzb-line);border-radius:10px;padding:18px 20px}
.entry-content .bzb-themen h3{margin-top:0}
@media (max-width:900px){.entry-content .bzb-wissen{grid-template-columns:1fr}}
/* Kopfbereich 10.3: Siegel und Leitsatz links neben dem Bildpanel, Portraet mittig und unten buendig, Panel ohne Abstand oben und unten */
.bzb-hero{padding-bottom:0 !important}
.bzb-hero .bzb-inner{align-items:stretch !important;gap:32px;grid-template-columns:.92fr 1.08fr !important}
.bzb-hero-copy{padding-bottom:44px !important}
.bzb-hero .bzb-inner > .bzb-hero-seite{display:grid !important;grid-template-columns:176px minmax(0,1fr) !important;grid-template-rows:auto 1fr !important;column-gap:14px;row-gap:12px;align-self:stretch;flex-direction:unset}
.bzb-hero-seite .bzb-siegel{grid-column:1;grid-row:1;position:static !important;width:auto !important;margin:0 !important;text-align:center;bottom:auto;left:auto}
.bzb-hero-seite .bzb-siegel img{width:176px;max-width:100%;height:auto;border-radius:6px;box-shadow:0 8px 22px rgba(36,28,82,.18);background:#fff}
.bzb-hero-seite .bzb-siegel-text{margin:8px 0 0 !important;font-size:12.5px !important;font-weight:700;color:#fff !important;background:var(--bzb-navy);padding:5px 8px;border-radius:4px;line-height:1.3}
.bzb-hero-seite .bzb-leitsatz{grid-column:1;grid-row:2;align-self:end;margin:0 !important;background:#fff;border:1px solid var(--bzb-line);border-left:4px solid var(--bzb-gold);border-top:1px solid var(--bzb-line);border-radius:6px;padding:12px 14px;color:var(--bzb-navy) !important;font-weight:700;font-size:14.5px;line-height:1.45}
.bzb-hero-seite .bzb-figure{grid-column:2;grid-row:1 / span 2;display:flex !important;grid-template-columns:none !important;align-items:flex-end;justify-content:center;padding:0;min-height:470px;height:100%;border-radius:8px 8px 0 0;overflow:hidden}
.bzb-hero-seite .bzb-figure figure{position:relative;z-index:1;height:100%;width:100%;display:flex;align-items:flex-end;justify-content:center;padding:0;margin:0}
.bzb-hero-seite .bzb-figure figure img{height:82% !important;width:100% !important;max-width:100% !important;max-height:none !important;object-fit:cover;object-position:center top;margin:0}
.bzb-hero-seite .bzb-figure .bzb-namenskarte{position:absolute !important;left:12px !important;bottom:12px !important;margin:0 !important;max-width:150px;padding:8px 10px;font-size:12.5px !important;grid-column:auto;grid-row:auto}
.bzb-hero-seite .bzb-figure .bzb-namenskarte strong{font-size:14px}
.bzb-hero .bzb-inner{margin-bottom:0 !important}
.bzb-hero .bzb-hero-top{margin-bottom:14px !important}
@media (max-width:980px){
.bzb-hero{padding-bottom:0 !important}
.bzb-hero .bzb-inner > .bzb-hero-seite{grid-template-columns:1fr !important;grid-template-rows:auto !important;row-gap:12px}
.bzb-hero-seite .bzb-siegel{grid-row:2;display:flex;align-items:center;gap:12px;text-align:left}
.bzb-hero-seite .bzb-siegel img{width:120px}
.bzb-hero-seite .bzb-siegel-text{background:transparent;color:var(--bzb-navy) !important;padding:0}
.bzb-hero-seite .bzb-leitsatz{grid-row:3}
.bzb-hero-seite .bzb-figure{grid-column:1;grid-row:1;min-height:340px;height:auto}
.bzb-hero-seite .bzb-figure figure img{height:88% !important}
.bzb-hero-seite .bzb-figure .bzb-namenskarte{position:absolute !important}
}
/* Kopfbereich 10.4: Siegel kleiner und dezenter, Leitsatz mit Abstand zur blauen Leiste, Block niedriger */
.bzb-hero .bzb-inner > .bzb-hero-seite{grid-template-columns:150px minmax(0,1fr) !important;column-gap:14px;row-gap:10px}
.bzb-hero-seite .bzb-siegel{opacity:.82;transition:opacity .2s}
.bzb-hero-seite .bzb-siegel:hover{opacity:1}
.bzb-hero-seite .bzb-siegel img{width:140px;box-shadow:0 6px 16px rgba(36,28,82,.14)}
.bzb-hero-seite .bzb-siegel-text{font-size:11px !important;padding:4px 6px;margin:6px 0 0 !important;background:rgba(36,28,82,.85)}
.bzb-hero-seite .bzb-leitsatz{margin:0 0 18px !important;font-size:13.5px;padding:10px 12px}
.bzb-hero-seite .bzb-figure{min-height:400px}
.bzb-hero-copy{padding-bottom:28px !important}
.bzb-hero{padding-top:36px}
.bzb-hero .bzb-hero-top{margin-bottom:12px !important}
/* Kopfbereich 10.5: Handy und Tablet, alles untereinander */
@media (max-width:980px){
.bzb-hero .bzb-inner{grid-template-columns:1fr !important;gap:16px}
.bzb-hero-copy{padding-bottom:8px !important}
.bzb-hero .bzb-inner > .bzb-hero-seite{grid-template-columns:1fr !important;grid-template-rows:auto auto auto !important;row-gap:12px}
.bzb-hero-seite .bzb-figure{grid-column:1 !important;grid-row:1 !important;min-height:0;height:auto;aspect-ratio:4/3;width:100%;border-radius:8px 8px 0 0}
.bzb-hero-seite .bzb-figure figure img{height:84% !important;width:100% !important;object-fit:cover;object-position:center top}
.bzb-hero-seite .bzb-siegel{grid-column:1 !important;grid-row:2 !important;display:flex;align-items:center;gap:12px;text-align:left;opacity:1;width:100% !important}
.bzb-hero-seite .bzb-siegel a{flex:0 0 auto}
.bzb-hero-seite .bzb-siegel img{width:110px}
.bzb-hero-seite .bzb-siegel-text{margin:0 !important;background:transparent;color:var(--bzb-navy) !important;padding:0;font-size:13px !important}
.bzb-hero-seite .bzb-leitsatz{grid-column:1 !important;grid-row:3 !important;margin:0 0 20px !important;font-size:14.5px}
.bzb-hero-seite .bzb-figure .bzb-namenskarte{max-width:170px}
}
@media (max-width:600px){
.bzb-hero-seite .bzb-figure{aspect-ratio:1/1}
}
/* Feste Aktionsleiste unten auf Handy und Tablet (ab 10.6) */
.bzb-mobilleiste{display:none}
@media (max-width:1024px){
.bzb-mobilleiste{position:fixed;left:0;right:0;bottom:0;z-index:9990;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--bzb-line);box-shadow:0 -6px 20px rgba(36,28,82,.12)}
.bzb-mobilleiste a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none !important;padding:0 8px}
.bzb-mobilleiste a svg{width:20px;height:20px;flex:0 0 auto}
.bzb-mobilleiste .bzb-ml-tel{background:#F4EBD8;color:var(--bzb-navy)}
.bzb-mobilleiste .bzb-ml-wa{background:#25D366;color:#08331B}
.bzb-mobilleiste .bzb-ml-termin{background:var(--bzb-gold);color:var(--bzb-navy)}
.bzb-mobilleiste a:focus-visible{outline:3px solid var(--bzb-navy);outline-offset:2px}
body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
/* Im Aufklappmenue: Anrufen, WhatsApp und Termin sind in der Leiste, dort nur noch Immobiliensuche als Textlink */
#mobile-drawer li.bzb-menu-tel,#mobile-drawer li.bzb-menu-wa,#mobile-drawer li.bzb-menu-termin{display:none !important}
#mobile-drawer li.bzb-menu-aktionen{padding:0;border:0}
#mobile-drawer ul.bzb-aktionen{display:block !important;padding:0;margin:0}
#mobile-drawer li.bzb-menu-suche a{display:flex !important;align-items:center;gap:10px;width:auto !important;height:auto !important;padding:12px 0 !important;background:transparent !important;border:0 !important;color:var(--bzb-navy) !important;border-radius:0 !important}
#mobile-drawer li.bzb-menu-suche a .screen-reader-text{position:static !important;width:auto !important;height:auto !important;clip:auto !important;clip-path:none !important;margin:0 !important;overflow:visible !important;font-size:16px;font-weight:600}
}
@media (max-width:400px){
.bzb-mobilleiste a span{font-size:13px}
}
/* Kopfbereich 10.7: Namenskarte auf Handy und Tablet als Leiste am unteren Bildrand, nicht im Gesicht */
@media (max-width:980px){
.bzb-hero-seite .bzb-figure figure img{object-position:center 30%}
.bzb-hero-seite .bzb-figure .bzb-namenskarte{left:0 !important;right:0 !important;bottom:0 !important;max-width:none !important;width:100%;border-radius:0;border-left:0;border-top:3px solid var(--bzb-gold);background:rgba(36,28,82,.84);color:#E6E1F0 !important;padding:8px 14px !important;font-size:13px !important;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bzb-hero-seite .bzb-figure .bzb-namenskarte strong{display:inline;color:#fff !important;font-size:15px}
}
/* Kopfbereich 10.8: Siegel und Leitsatz rechts vom Bildpanel */
@media (min-width:981px){
.bzb-hero .bzb-inner > .bzb-hero-seite{grid-template-columns:minmax(0,1fr) 150px !important}
.bzb-hero-seite .bzb-figure{grid-column:1 !important}
.bzb-hero-seite .bzb-siegel{grid-column:2 !important}
.bzb-hero-seite .bzb-leitsatz{grid-column:2 !important;border-left:1px solid var(--bzb-line);border-right:4px solid var(--bzb-gold)}
.bzb-hero .bzb-inner{gap:28px}
}
/* Silbentrennung in Ueberschriften statt harter Umbrueche mitten im Wort (ab 10.9) */
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal;word-break:normal;hyphenate-limit-chars:8 4 4}
@media (max-width:600px){
.entry-content h1{font-size:32px}
.entry-content h2{font-size:27px}
.entry-content h3{font-size:19px}
}
/* Kopfbereich 11.0: Portraet mit ganzen Schultern, Siegel und Leitsatz kleiner */
@media (min-width:981px){
.bzb-hero .bzb-inner > .bzb-hero-seite{grid-template-columns:minmax(0,1fr) 124px !important;column-gap:12px}
.bzb-hero-seite .bzb-figure figure img{height:auto !important;width:100% !important;max-height:74% !important;object-fit:contain !important;object-position:center bottom}
.bzb-hero-seite .bzb-siegel img{width:124px;box-shadow:0 4px 12px rgba(36,28,82,.12)}
.bzb-hero-seite .bzb-siegel{opacity:.85}
.bzb-hero-seite .bzb-siegel-text{font-size:10.5px !important;padding:4px 5px}
.bzb-hero-seite .bzb-leitsatz{font-size:12.5px;line-height:1.4;padding:9px 10px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal;word-break:normal;font-style:normal}
.bzb-hero-seite .bzb-figure .bzb-namenskarte{max-width:150px;padding:8px 10px;font-size:12.5px !important}
}
/* Kopfbereich 11.2: Siegel und Leitsatz in der Textspalte, Bildpanel rechts in voller Breite, Schreibschrift lokal */
@font-face{font-family:'Caveat';src:url('assets/fonts/caveat-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
.bzb-hero{padding-top:30px}
.bzb-hero .bzb-hero-top{margin-bottom:10px !important}
.bzb-hero .bzb-inner{grid-template-columns:.95fr 1.05fr !important;gap:32px;margin-bottom:0 !important}
.bzb-hero-copy{justify-content:flex-start !important;padding-bottom:14px !important}
.bzb-hero .bzb-inner > .bzb-hero-seite{display:flex !important;flex-direction:column;grid-template-columns:none !important}
.bzb-hero-seite .bzb-figure{flex:1 1 auto;min-height:380px;height:auto}
.bzb-hero-seite .bzb-figure figure img{height:auto !important;width:100% !important;max-height:74% !important;object-fit:contain !important;object-position:center bottom}
.bzb-hero-seite .bzb-figure .bzb-namenskarte{background:rgba(255,255,255,.82) !important;max-width:170px;padding:9px 12px;font-size:13px !important;left:12px !important;bottom:12px !important}
.bzb-hero-copy .bzb-hero-vertrauen{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:14px}
.bzb-hero-copy .bzb-siegel{position:static !important;flex:0 0 118px;width:118px !important;margin:0 !important;text-align:center;opacity:.92}
.bzb-hero-copy .bzb-siegel img{width:118px;height:auto;border-radius:6px;box-shadow:0 6px 16px rgba(36,28,82,.14);background:#fff}
.bzb-hero-copy .bzb-siegel-text{margin:5px 0 0 !important;font-size:10px !important;font-weight:700;color:#fff !important;background:var(--bzb-navy);padding:4px 5px;border-radius:4px;line-height:1.3}
.bzb-hero-copy .bzb-leitsatz{flex:1 1 auto;margin:0 !important;background:transparent;border:0;padding:0;color:var(--bzb-navy) !important;font-family:'Caveat',cursive;font-weight:700;font-size:23px;line-height:1.2;font-style:normal;hyphens:manual}
.bzb-hero-copy .bzb-hero-vertrauen p.bzb-leitsatz{color:var(--bzb-navy) !important}
.bzb-hero-copy .wp-block-buttons{margin-bottom:0}
.bzb-hero-copy .wp-block-buttons + p{margin-top:8px !important;font-size:15px}
@media (max-width:980px){
.bzb-hero-copy{padding-bottom:6px !important}
.bzb-hero-copy .bzb-hero-vertrauen{padding-top:10px}
.bzb-hero-copy .bzb-leitsatz{font-size:21px}
.bzb-hero-seite .bzb-figure{min-height:0;aspect-ratio:4/3}
}
@media (max-width:600px){
.bzb-hero-copy .bzb-hero-vertrauen{align-items:flex-start}
.bzb-hero-copy .bzb-siegel{flex-basis:100px;width:100px !important}
.bzb-hero-copy .bzb-siegel img{width:100px}
.bzb-hero-seite .bzb-figure{aspect-ratio:1/1}
}
/* Kopfbereich 11.3: freigegebene Fassung. Bild ca. 40 Prozent, Siegel ganz links, Leitsatz davor zum Bild hin, mehr Luft um Ueberschrift und Button */
@media (min-width:981px){
.bzb-hero .bzb-inner{grid-template-columns:1.55fr 1fr !important;gap:24px}
.bzb-hero-copy h1{margin-bottom:22px !important;line-height:1.12}
.bzb-hero-copy .bzb-lead{margin-bottom:26px !important;max-width:none}
.bzb-hero-copy .wp-block-buttons + p{margin-top:10px !important}
.bzb-hero-copy .bzb-hero-vertrauen{justify-content:space-between;align-items:center;gap:16px;padding-top:18px}
.bzb-hero-copy .bzb-siegel{flex:0 0 94px;width:94px !important;text-align:left;opacity:.95}
.bzb-hero-copy .bzb-siegel img{width:94px;box-shadow:0 4px 12px rgba(36,28,82,.14)}
.bzb-hero-copy .bzb-siegel-text{display:inline-block;white-space:nowrap;margin:4px 0 0 !important;font-size:9.5px !important;padding:3px 6px}
.bzb-hero-copy .bzb-leitsatz{flex:0 1 430px;margin-left:auto !important;font-size:23px}
.bzb-hero-seite .bzb-figure{min-height:400px}
.bzb-hero-seite .bzb-figure figure img{max-height:80% !important}
.bzb-hero-seite .bzb-figure .bzb-namenskarte{max-width:150px !important;padding:8px 10px !important;font-size:12.5px !important}
.bzb-hero-seite .bzb-figure .bzb-namenskarte strong{font-size:14px}
}
@media (max-width:980px){
.bzb-hero-copy h1 br,.bzb-hero-copy .bzb-lead br{display:none}
}
/* Kopfbereich 11.4: Abstaende und Schriftgroessen wie in der freigegebenen Vorschau */
@media (min-width:981px){
.bzb-hero{padding-top:26px}
.bzb-hero .bzb-hero-top{margin-bottom:8px !important}
.bzb-hero-copy{margin-bottom:0 !important}
.bzb-hero-copy > *{margin-top:0 !important;margin-bottom:0 !important}
.bzb-hero-copy h1{margin-bottom:20px !important;font-size:44px;line-height:1.15}
.bzb-hero-copy .bzb-lead{margin-bottom:24px !important;font-size:16.5px !important;line-height:1.5;max-width:none !important}
.bzb-hero-copy .wp-block-buttons + p{margin-top:8px !important}
.bzb-hero-copy .bzb-hero-vertrauen{margin-top:auto !important;padding-top:16px}
.bzb-hero-copy .bzb-leitsatz{font-size:23px !important;line-height:1.2 !important}
}
/* Kopfbereich 11.5: Handy und Tablet wieder einspaltig */
@media (max-width:980px){
.bzb-hero .bzb-inner{grid-template-columns:1fr !important;gap:16px}
.bzb-hero-copy{margin-bottom:0 !important;padding-bottom:0 !important}
.bzb-hero-copy > *{margin-top:0 !important;margin-bottom:0 !important}
.bzb-hero-copy h1{margin-bottom:14px !important}
.bzb-hero-copy .bzb-lead{margin-bottom:18px !important;font-size:16px !important;line-height:1.5}
.bzb-hero-copy .wp-block-buttons + p{margin-top:8px !important;font-size:14.5px}
.bzb-hero-copy .bzb-hero-vertrauen{display:flex;align-items:center;gap:12px;padding-top:14px;margin:0 !important}
.bzb-hero-copy .bzb-siegel{flex:0 0 90px;width:90px !important;text-align:left;opacity:.95}
.bzb-hero-copy .bzb-siegel img{width:90px}
.bzb-hero-copy .bzb-siegel-text{display:inline-block;white-space:nowrap;font-size:9px !important;padding:3px 5px;margin:4px 0 0 !important}
.bzb-hero-copy .bzb-leitsatz{flex:1 1 auto;font-size:20px !important;line-height:1.2 !important;margin:0 !important}
.bzb-hero .bzb-inner > .bzb-hero-seite{margin-top:14px}
.bzb-hero-seite .bzb-figure{min-height:0 !important;height:auto !important;aspect-ratio:1/1;width:100%}
.bzb-hero-seite .bzb-figure figure img{height:auto !important;width:100% !important;max-height:82% !important;object-fit:contain !important;object-position:center bottom}
}
/* 11.6: Siegelbeschriftung auf Handy zweizeilig unter dem Siegel, kein Ueberlappen mit dem Leitsatz */
@media (max-width:980px){
.bzb-hero-copy .bzb-siegel{overflow:visible}
.bzb-hero-copy .bzb-siegel-text{display:block !important;white-space:normal !important;width:90px;box-sizing:border-box;text-align:center;font-size:9px !important;line-height:1.25;padding:3px 4px}
.bzb-hero-copy .bzb-hero-vertrauen{align-items:center;gap:14px}
.bzb-hero-copy .bzb-leitsatz{position:relative;z-index:1}
}
/* 11.7: Siegelbeschriftung auf Handy und Tablet ausblenden */
@media (max-width:980px){
.bzb-hero-copy .bzb-siegel-text{display:none !important}
}
/* 11.8: Namensleiste auf Handy und Tablet dunkelblau mit weisser Schrift */
@media (max-width:980px){
.bzb-hero-seite .bzb-figure .bzb-namenskarte{background:rgba(36,28,82,.88) !important;color:#E6E1F0 !important;left:0 !important;right:0 !important;bottom:0 !important;max-width:none !important;width:100%;border-radius:0 !important;border-left:0 !important;border-top:3px solid var(--bzb-gold);padding:8px 14px !important}
.bzb-hero-seite .bzb-figure .bzb-namenskarte strong{color:#fff !important}
}
/* 11.9: Knopf "nach oben" ueber der festen Kontaktleiste, fester Kopf auf dem Handy */
@media (max-width:1024px){
#kt-scroll-up,#kt-scroll-up-reader{bottom:calc(84px + env(safe-area-inset-bottom)) !important;z-index:9991}
#kt-scroll-up{background:var(--bzb-navy);color:#fff;border-radius:8px}
#masthead.site-header{position:sticky;top:0;z-index:100}
.admin-bar #masthead.site-header{top:46px}
.bzb-lex-nav{top:var(--bzb-kopf-hoehe,72px)}
}
/* 12.0: Aufklappbereiche auf der Startseite (Leistungen, Gewerbe, Ablauf, Rechner, Immobiliensuche, Grenzgaenger, Eigenheimrente) */
.entry-content details.bzb-klapp{margin:18px 0 0 !important;border:1px solid var(--bzb-line);border-radius:10px;background:#fff;padding:0 !important;overflow:hidden}
.entry-content details.bzb-klapp > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;min-height:52px;font-weight:700;font-size:16px;line-height:1.3;color:var(--bzb-navy) !important;background:transparent}
.entry-content details.bzb-klapp > summary::-webkit-details-marker{display:none}
.entry-content details.bzb-klapp > summary::marker{content:""}
.entry-content details.bzb-klapp > summary::after{content:"+";flex:0 0 32px;height:32px;border-radius:50%;background:var(--bzb-gold);color:var(--bzb-navy);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;line-height:1;transition:transform .2s}
.entry-content details.bzb-klapp[open] > summary::after{content:"\2212"}
.entry-content details.bzb-klapp > summary:hover{background:#FAF7F1}
.entry-content details.bzb-klapp > summary:focus-visible{outline:3px solid var(--bzb-gold);outline-offset:-3px}
.entry-content details.bzb-klapp[open] > summary{border-bottom:1px solid var(--bzb-line)}
.entry-content details.bzb-klapp > :not(summary){margin:16px 16px 0 !important}
.entry-content details.bzb-klapp > :last-child{margin-bottom:16px !important}
.entry-content details.bzb-klapp .bzb-auf{display:none}
.entry-content details.bzb-klapp[open] .bzb-auf{display:inline}
.entry-content details.bzb-klapp[open] .bzb-zu{display:none}
.entry-content details.bzb-klapp figure.wp-block-image{max-width:420px;margin-left:auto !important;margin-right:auto !important}
.entry-content details.bzb-klapp figure.wp-block-image img{width:100%;height:auto;border-radius:8px}
/* Hervorgehobene Variante als Aufforderung (Rechner) */
.entry-content details.bzb-klapp.is-cta{border-color:var(--bzb-gold);border-width:2px}
.entry-content details.bzb-klapp.is-cta > summary{background:#F4EBD8}
/* in dunklen Fotoabschnitten */
.bzb-photo details.bzb-klapp{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.28) !important}
.bzb-photo details.bzb-klapp > summary{color:#fff !important}
.bzb-photo details.bzb-klapp > summary:hover{background:rgba(255,255,255,.08)}
.bzb-photo details.bzb-klapp[open] > summary{border-bottom-color:rgba(255,255,255,.2)}
.bzb-photo details.bzb-klapp .bzb-aktionsbox{max-width:none !important;margin:16px 16px 0 !important}
/* Kompakte Abschnitte */
.bzb-kompakt{padding-top:40px !important;padding-bottom:40px !important}
.bzb-kompakt .bzb-inner{max-width:860px;margin-left:auto;margin-right:auto}
.bzb-photo.bzb-kompakt .bzb-inner{display:block !important}
.bzb-kompakt .wp-block-buttons{margin-top:18px}
.bzb-kompakt .bzb-lead{margin-bottom:0}
/* Leistungen: Kerngeschaeft allein, Partnerhinweis */
.bzb-kern .bzb-card.is-featured{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px}
.bzb-kern{margin-top:18px}
.entry-content details.bzb-klapp .bzb-grid3{margin:16px !important}
.bzb-partnerhinweis{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#F4EBD8;border-left:4px solid var(--bzb-gold);border-radius:8px;padding:14px 18px}
.bzb-partnerhinweis p{margin:0 !important;font-size:14.5px;line-height:1.5;color:#3A3560}
.bzb-partnerhinweis p strong{color:var(--bzb-navy)}
.bzb-partnerhinweis .wp-block-buttons{margin:0 !important;flex:0 0 auto}
@media (max-width:760px){
.bzb-kern .bzb-card.is-featured{grid-template-columns:1fr}
.bzb-partnerhinweis{flex-direction:column;align-items:flex-start}
.entry-content details.bzb-klapp > summary{font-size:15px;padding:10px 12px}
.entry-content details.bzb-klapp > :not(summary){margin:12px 12px 0 !important}
.entry-content details.bzb-klapp > :last-child{margin-bottom:12px !important}
.entry-content details.bzb-klapp .bzb-grid3{grid-template-columns:1fr !important;margin:12px !important}
.bzb-kompakt{padding-top:30px !important;padding-bottom:30px !important}
}
/* 12.1: Anfahrt-Knopf, Hinweise beim Ueberfahren, Handyleiste mit vier Knoepfen, blaue Leiste zum Aufklappen, Region */
@media (min-width:1025px){
#site-navigation .bzb-menu-karte > a{background:#FFFFFF;color:#241C52 !important;border:2px solid var(--bzb-gold)}
#site-navigation .bzb-menu-karte > a:hover{background:#F4EBD8}
#site-navigation ul.bzb-aktionen{align-items:center}
#site-navigation ul.bzb-aktionen > li > a{position:relative;box-sizing:border-box;height:42px !important}
#site-navigation ul.bzb-aktionen .bzb-tip{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);background:var(--bzb-navy);color:#fff;font-size:12.5px;font-weight:500;line-height:1.2;white-space:nowrap;padding:7px 10px;border-radius:6px;box-shadow:0 6px 16px rgba(36,28,82,.22);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s;z-index:50}
#site-navigation ul.bzb-aktionen .bzb-tip:before{content:"";position:absolute;top:-5px;left:50%;margin-left:-5px;border:5px solid transparent;border-top:0;border-bottom-color:var(--bzb-navy)}
#site-navigation ul.bzb-aktionen > li > a:hover .bzb-tip,#site-navigation ul.bzb-aktionen > li > a:focus-visible .bzb-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
#site-navigation ul.bzb-aktionen > li:last-child .bzb-tip{left:auto;right:0;transform:none}
}
.bzb-tip{display:none}
@media (min-width:1025px){#site-navigation ul.bzb-aktionen .bzb-tip{display:block}}
#mobile-drawer li.bzb-menu-karte{display:none !important}
/* Handyleiste: vier Knoepfe, Symbol ueber Text */
@media (max-width:1024px){
.bzb-mobilleiste{grid-template-columns:1fr 1fr 1fr 1.3fr !important;gap:5px !important;padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important}
.bzb-mobilleiste a{flex-direction:column !important;gap:3px !important;min-height:52px !important;font-size:11.5px !important;line-height:1.15;text-align:center;padding:4px !important}
.bzb-mobilleiste a span{font-size:11.5px !important}
.bzb-mobilleiste .bzb-ml-karte{background:#fff;border:2px solid var(--bzb-gold);color:var(--bzb-navy)}
.bzb-mobilleiste .bzb-ml-termin span{font-size:12.5px !important}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom)) !important}
#kt-scroll-up,#kt-scroll-up-reader{bottom:calc(88px + env(safe-area-inset-bottom)) !important}
}
/* Blaue Leiste unter dem Bild: vier Punkte, Beschreibung zum Aufklappen */
.bzb-trust .bzb-inner.bzb-trust-klapp{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:0 !important}
.bzb-trust details.bzb-trust-punkt{padding:12px 16px;border-right:1px solid rgba(255,255,255,.12);margin:0 !important}
.bzb-trust details.bzb-trust-punkt:last-child{border-right:0}
.bzb-trust details.bzb-trust-punkt > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.bzb-trust details.bzb-trust-punkt > summary::-webkit-details-marker{display:none}
.bzb-trust details.bzb-trust-punkt > summary::marker{content:""}
.bzb-trust details.bzb-trust-punkt > summary strong{display:block;color:var(--bzb-gold) !important;font-size:19px;line-height:1.2}
.bzb-trust details.bzb-trust-punkt > summary span{display:block;color:#E6E1F0 !important;font-size:13.5px;line-height:1.35}
.bzb-trust details.bzb-trust-punkt > summary::after{content:"+";flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid var(--bzb-gold);color:var(--bzb-gold);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;line-height:1}
.bzb-trust details.bzb-trust-punkt[open] > summary::after{content:"\2212"}
.bzb-trust details.bzb-trust-punkt > summary:focus-visible{outline:2px solid var(--bzb-gold);outline-offset:3px}
.bzb-trust details.bzb-trust-punkt p{margin:8px 0 0 !important;font-size:13.5px;line-height:1.5;color:#D6D2E8 !important}
@media (max-width:760px){
.bzb-trust .bzb-inner.bzb-trust-klapp{grid-template-columns:1fr 1fr !important}
.bzb-trust details.bzb-trust-punkt{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);padding:10px 12px}
.bzb-trust details.bzb-trust-punkt:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}
.bzb-trust details.bzb-trust-punkt > summary strong{font-size:17px}
.bzb-trust details.bzb-trust-punkt > summary span{font-size:12.5px}
}
/* Ablauf im Aufklappbereich */
.entry-content details.bzb-klapp .bzb-ablauf{margin:16px !important}
/* Region: Karte nach tatsaechlicher Lage, hochformatig */
#region .bzb-region{grid-template-columns:240px 1fr !important;gap:32px;align-items:start}
#region .bzb-mapbox{padding:10px}
#region .bzb-region-text details.bzb-klapp .bzb-ortsseiten{margin:16px !important}
@media (max-width:760px){
#region .bzb-region{grid-template-columns:1fr !important}
#region .bzb-mapbox{max-width:220px;margin:0 auto}
}
/* 12.2: Anfahrt und Kundenlogin als Symbole, Termin kompakt, blaue Leiste in einer Reihe */
@media (min-width:1025px){
#site-navigation .bzb-menu-karte > a,#site-navigation .bzb-menu-login > a{background:transparent !important;border:0 !important;width:34px !important;min-width:34px !important;color:var(--bzb-navy) !important;border-radius:8px}
#site-navigation .bzb-menu-karte > a svg,#site-navigation .bzb-menu-login > a svg{width:22px;height:22px}
#site-navigation .bzb-menu-karte > a:hover,#site-navigation .bzb-menu-login > a:hover{background:#F4EBD8 !important}
#site-navigation ul.bzb-aktionen > li.bzb-menu-login{margin-right:6px;padding-right:10px;border-right:1px solid var(--bzb-line)}
#site-navigation ul.bzb-aktionen > li.bzb-menu-termin > a{display:inline-flex !important;align-items:center;gap:6px;padding:0 12px !important;font-size:13.5px !important;height:42px !important}
#site-navigation ul.bzb-aktionen > li.bzb-menu-termin > a svg{width:18px;height:18px}
}
#mobile-drawer li.bzb-menu-karte{display:none !important}
#mobile-drawer li.bzb-menu-login a{display:flex !important;align-items:center;gap:10px;width:auto !important;height:auto !important;padding:12px 0 !important;background:transparent !important;border:0 !important;color:var(--bzb-navy) !important}
#mobile-drawer li.bzb-menu-login a .screen-reader-text{position:static !important;width:auto !important;height:auto !important;clip:auto !important;clip-path:none !important;margin:0 !important;overflow:visible !important;font-size:16px;font-weight:600}
#mobile-drawer .bzb-tip{display:none !important}
/* Blaue Leiste: eine Reihe, ohne Aufklappen */
.bzb-trust .bzb-inner.bzb-trust-reihe{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:0 !important}
.bzb-trust .bzb-trust-reihe > p{margin:0 !important;padding:12px 16px;border-right:1px solid rgba(255,255,255,.12)}
.bzb-trust .bzb-trust-reihe > p:last-child{border-right:0}
.bzb-trust .bzb-trust-reihe strong{display:block;color:var(--bzb-gold) !important;font-size:19px;line-height:1.2}
.bzb-trust .bzb-trust-reihe span{display:block;color:#E6E1F0 !important;font-size:13.5px;line-height:1.35}
.bzb-trust .bzb-trust-reihe .kurz{display:none}
@media (max-width:760px){
.bzb-trust{padding-left:0 !important;padding-right:0 !important}
.bzb-trust .bzb-trust-reihe > p{padding:9px 4px;text-align:center}
.bzb-trust .bzb-trust-reihe strong{font-size:14px}
.bzb-trust .bzb-trust-reihe span{font-size:10.5px;line-height:1.25;hyphens:auto}
.bzb-trust .bzb-trust-reihe .lang{display:none}
.bzb-trust .bzb-trust-reihe .kurz{display:block}
}
/* 12.3: Aufklappmenue auf dem Handy in Markenblau statt Schwarz, alle Punkte hell und lesbar */
#mobile-drawer .drawer-inner,#mobile-drawer .drawer-content{background:var(--bzb-navy) !important}
#mobile-drawer .drawer-header{background:var(--bzb-navy) !important}
#mobile-drawer .menu-toggle-close,#mobile-drawer .menu-toggle-close .toggle-close-bar{color:#fff !important}
#mobile-drawer .mobile-navigation ul li > a,#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap > a{color:#F7F5FB !important}
#mobile-drawer .mobile-navigation ul li > a:hover,#mobile-drawer .mobile-navigation ul li.current-menu-item > a{color:var(--bzb-gold) !important}
#mobile-drawer .mobile-navigation ul li{border-color:rgba(255,255,255,.14) !important}
#mobile-drawer .mobile-navigation .drawer-sub-toggle{color:#F7F5FB !important;border-color:rgba(255,255,255,.2) !important}
#mobile-drawer li.bzb-menu-suche a,#mobile-drawer li.bzb-menu-login a{color:#F7F5FB !important}
#mobile-drawer li.bzb-menu-suche a svg,#mobile-drawer li.bzb-menu-login a svg{color:var(--bzb-gold)}
#mobile-drawer li.bzb-menu-suche a .screen-reader-text,#mobile-drawer li.bzb-menu-login a .screen-reader-text{color:#F7F5FB !important}
/* 12.3: blaue Leiste auf dem Handy in voller Breite, keine Wortbrueche */
@media (max-width:760px){
.bzb-hero > .bzb-trust{margin:0 -24px !important;width:auto !important}
.bzb-trust .bzb-inner.bzb-trust-reihe{padding:0 6px !important}
.bzb-trust .bzb-trust-reihe > p{padding:10px 3px !important;min-width:0}
.bzb-trust .bzb-trust-reihe strong{font-size:13.5px !important;word-break:normal !important;overflow-wrap:normal !important;hyphens:manual !important}
.bzb-trust .bzb-trust-reihe span{font-size:10.5px !important;word-break:normal !important;overflow-wrap:normal !important;hyphens:manual !important}
}
/* 12.4: Partnerangebot deutlich von den Finanzierungsloesungen getrennt */
#leistungen .bzb-partnerhinweis{margin-top:44px !important;position:relative}
#leistungen .bzb-partnerhinweis:before{content:"";position:absolute;left:0;right:0;top:-24px;border-top:1px dashed rgba(36,28,82,.2)}
@media (max-width:760px){#leistungen .bzb-partnerhinweis{margin-top:36px !important}#leistungen .bzb-partnerhinweis:before{top:-19px}}
/* 12.5: Leiste unter dem Bild hell (Sand mit goldener Linie) statt Dunkelblau */
.bzb-trust{background:#F4EBD8 !important;border-top:3px solid var(--bzb-gold) !important;color:var(--bzb-navy) !important}
.bzb-trust .bzb-trust-reihe > p{border-right:1px solid rgba(36,28,82,.12) !important}
.bzb-trust .bzb-trust-reihe > p:last-child{border-right:0 !important}
.bzb-trust .bzb-trust-reihe strong{color:#8A6A24 !important}
.bzb-trust .bzb-trust-reihe span,.bzb-trust p{color:var(--bzb-navy) !important}
/* 12.6: E-Mail-Knopf im Menue, verlinkte Kontaktdaten auf der Kontaktseite */
@media (min-width:1025px){
#site-navigation .bzb-menu-mail > a{background:#FFFFFF;color:#241C52 !important;border:2px solid #241C52}
#site-navigation .bzb-menu-mail > a:hover{background:#F4EBD8}
}
#mobile-drawer li.bzb-menu-mail a{display:flex !important;align-items:center;gap:10px;width:auto !important;height:auto !important;padding:12px 0 !important;background:transparent !important;border:0 !important;color:#F7F5FB !important}
#mobile-drawer li.bzb-menu-mail a svg{color:var(--bzb-gold)}
#mobile-drawer li.bzb-menu-mail a .screen-reader-text{position:static !important;width:auto !important;height:auto !important;clip:auto !important;clip-path:none !important;margin:0 !important;overflow:visible !important;font-size:16px;font-weight:600;color:#F7F5FB !important}
.bzb-kanal h3 a{color:var(--bzb-navy) !important;text-decoration:none;border-bottom:2px solid rgba(196,156,72,.55)}
.bzb-kanal h3 a:hover,.bzb-kanal h3 a:focus-visible{border-bottom-color:var(--bzb-gold);background:#F4EBD8}
.bzb-kanal h3 a[target="_blank"]::after{content:none !important}
.bzb-kanal .bzb-kanal-aktion{margin:4px 0 0 !important}
.bzb-kanal .bzb-kanal-aktion a{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--bzb-navy) !important;text-decoration:none;background:#F4EBD8;padding:6px 10px;border-radius:6px}
.bzb-kanal .bzb-kanal-aktion a:hover{background:#EADBB8}
.bzb-kanal .bzb-kanal-aktion a svg{width:16px;height:16px}
.bzb-kanal .bzb-kanal-aktion a[target="_blank"]::after{content:none !important}
/* 12.7: kleinere Fotos auf Handy und Tablet */
@media (max-width:1024px){
.bzb-figure{background-image:url('assets/img/foto-baum-panel-handy.webp') !important}
.bzb-photo,.bzb-photo.is-gewerbe{background-image:url('assets/img/foto-dorf-panorama-handy.webp') !important}
.bzb-photo.is-kaiserstuhl{background-image:url('assets/img/foto-strasse-panorama-handy.webp') !important}
.bzb-photo.is-markgraeflerland{background-image:url('assets/img/foto-baum-panorama-handy.webp') !important}
.bzb-photo.is-freiburg{background-image:url('assets/img/foto-baum-panorama-handy.webp') !important}
}
/* 12.9: Immobiliensuche nur mit dem goldenen Symbol, altes Hausymbol (Pseudo-Element) entfernt */
.bzb-menu-suche > a:before{content:none !important;display:none !important}
/* 13.0: Knopf "Auf den Startbildschirm" und Anleitung */
.bzb-appknopf[hidden],.bzb-appdialog[hidden]{display:none !important}
.bzb-appknopf{max-width:460px;margin:18px 0}
.bzb-appknopf-karte{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--bzb-line,#E4DCCB);border-left:4px solid var(--bzb-gold);border-radius:12px;padding:12px 14px}
.bzb-appknopf-karte img{width:56px;height:56px;border-radius:12px;flex:0 0 56px}
.bzb-appknopf-karte strong{display:block;color:var(--bzb-navy);font-size:16px;line-height:1.3}
.bzb-appknopf-karte span{display:block;color:#3A3560;font-size:14px;line-height:1.4}
.bzb-appknopf-los{display:block;width:100%;margin-top:10px;background:var(--bzb-navy);color:#fff;border:0;border-radius:8px;padding:13px 16px;font-weight:700;font-size:16px;cursor:pointer}
.bzb-appknopf-los:focus-visible{outline:3px solid var(--bzb-gold);outline-offset:2px}
.site-footer .bzb-appknopf-karte,.bzb-photo .bzb-appknopf-karte{background:#fff}
.bzb-appdialog{position:fixed;inset:0;z-index:100000;background:rgba(20,16,48,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.bzb-appdialog-box{background:#fff;border-radius:14px;border-left:4px solid var(--bzb-gold);max-width:440px;width:100%;padding:20px 20px 16px;margin-bottom:70px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.bzb-appdialog-t{font-weight:700;color:var(--bzb-navy);font-size:17px;margin:0 0 12px}
.bzb-appdialog ol{margin:0 0 14px;padding-left:22px;font-size:16px;line-height:1.5;color:#222}
.bzb-appdialog ol li{margin-bottom:8px}
.bzb-appdialog ol svg{vertical-align:-4px;color:#1a5fd0;margin-left:4px}
.bzb-appdialog-andere{font-size:16px;line-height:1.5;margin:0 0 14px}
.bzb-appdialog-zu{width:100%;background:#fff;color:var(--bzb-navy);border:2px solid var(--bzb-navy);border-radius:8px;padding:11px;font-weight:700;font-size:16px;cursor:pointer}
/* 13.1: Hilfe-Verweis unter dem App-Knopf, Hinweise fuer Android */
.bzb-appknopf-hilfe{display:block;margin:8px auto 0;background:none;border:0;padding:4px;color:var(--bzb-navy);text-decoration:underline;font-size:15px;cursor:pointer}
.bzb-appknopf-hilfe[hidden]{display:none}
.site-footer .bzb-appknopf-hilfe{color:inherit}
.bzb-appdialog-andere p{font-size:16px;line-height:1.5;margin:0 0 10px}
.bzb-appdialog-andere ul{margin:0 0 14px;padding-left:20px;font-size:15px;line-height:1.5}
.bzb-appdialog-andere li{margin-bottom:6px}
.bzb-appdialog-box{max-height:calc(100vh - 110px);overflow:auto}
.bzb-fuss .bzb-appknopf-los{background:var(--bzb-gold) !important;color:var(--bzb-navy) !important}
.bzb-fuss .bzb-appknopf-hilfe{color:#F4EBD8 !important}
.bzb-fuss .bzb-appknopf-karte strong{color:var(--bzb-navy) !important}
.bzb-fuss .bzb-appknopf-karte span{color:#3A3560 !important}
/* 13.2: WhatsApp-Knopf im Kasten "Lieber kurz schreiben?" ragte auf schmalen Handys ueber den weissen Kasten hinaus */
.bzb-wa-btn{white-space:normal !important;max-width:100% !important;box-sizing:border-box !important;justify-content:center;text-align:center}
@media (max-width:420px){
.bzb-wa-btn{padding:10px 12px !important;font-size:15px !important;gap:8px !important}
}
/* 13.3: "Cookie-Einstellungen aendern" als Knopf (Complianz-Klasse cmplz-manage-consent), sieht aus wie ein Textlink */
button.bzb-linkknopf{background:none !important;border:0 !important;padding:0 !important;margin:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;display:inline;box-shadow:none !important;min-height:0}
button.bzb-linkknopf:focus-visible{outline:3px solid var(--bzb-gold);outline-offset:2px}
/* 13.4: KfW-Unterseiten, Bild oben und Detailverweise auf der Uebersicht */
.entry-content figure.bzb-kfw-bild{margin:0 0 28px !important}
.entry-content figure.bzb-kfw-bild img{width:100%;height:auto;border-radius:10px;display:block}
.entry-content p.bzb-mehr{margin-top:12px !important;font-weight:700}
.entry-content p.bzb-mehr a{color:var(--bzb-navy);text-decoration:underline;text-decoration-color:var(--bzb-gold);text-underline-offset:3px}
.entry-content p.bzb-mehr a::after{content:" \2192";color:var(--bzb-gold)}
/* 13.5 */
.bzb-appknopf-los[disabled]{opacity:.7;cursor:progress}
.bzb-appdialog-andere p[hidden]{display:none}
/* 13.7: Anleitung passt auf kleine Handys, Knopf "Verstanden" immer sichtbar */
.bzb-appdialog{align-items:center !important;padding:12px !important}
.bzb-appdialog-box{margin:0 !important;max-height:calc(100vh - 24px) !important;max-height:calc(100dvh - 24px) !important;display:flex;flex-direction:column;overflow:hidden !important;padding:16px 16px 12px !important}
.bzb-appdialog-t{font-size:16px !important;margin:0 0 8px !important;line-height:1.3}
.bzb-appdialog ol{flex:0 1 auto;overflow:auto;font-size:15px !important;line-height:1.4 !important;margin:0 0 8px !important}
.bzb-appdialog ol li{margin-bottom:5px !important}
.bzb-appdialog-andere{flex:0 1 auto;overflow:auto;margin:0 0 10px}
.bzb-app-mehr summary{cursor:pointer;font-weight:700;color:var(--bzb-navy);font-size:15px;padding:6px 0}
.bzb-app-mehr ul{margin:4px 0 0 !important;padding-left:18px;font-size:14px !important;line-height:1.4 !important}
.bzb-appdialog-zu{flex:0 0 auto;margin-top:auto}
/* 13.8: Die ganze Karte ist der Knopf "Auf den Startbildschirm" */
button.bzb-appknopf-karte{width:100%;text-align:left;font:inherit;cursor:pointer;display:flex !important;align-items:center;gap:14px;background:#fff !important;border:1px solid var(--bzb-line,#E4DCCB) !important;border-left:4px solid var(--bzb-gold) !important;border-radius:12px;padding:12px 14px !important;color:inherit;box-shadow:0 4px 14px rgba(36,28,82,.08);transition:box-shadow .2s,transform .1s}
button.bzb-appknopf-karte:hover{box-shadow:0 6px 18px rgba(36,28,82,.16)}
button.bzb-appknopf-karte:active{transform:scale(.99)}
button.bzb-appknopf-karte:focus-visible{outline:3px solid var(--bzb-gold);outline-offset:2px}
button.bzb-appknopf-karte[disabled]{opacity:.8;cursor:progress}
.bzb-appknopf-text{flex:1 1 auto;min-width:0}
.bzb-appknopf-text strong{display:block;color:var(--bzb-navy) !important;font-size:16px;line-height:1.3}
.bzb-appknopf-text span{display:block;color:#3A3560 !important;font-size:14px;line-height:1.4}
.bzb-appknopf-status{display:block;font-style:normal;font-weight:700;color:#8A6A24 !important;font-size:14px;margin-top:4px}
.bzb-appknopf-plus{flex:0 0 36px;height:36px;border-radius:50%;background:var(--bzb-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;line-height:1}
.bzb-fuss .bzb-appknopf-plus{background:var(--bzb-gold);color:var(--bzb-navy)}
button.bzb-appknopf-karte.bzb-appknopf-los{margin:0 !important;font-weight:400}
.bzb-fuss button.bzb-appknopf-karte.bzb-appknopf-los{background:#fff !important;color:var(--bzb-navy) !important}
.bzb-appknopf-plus{color:#fff !important}
.bzb-appknopf-plus svg{display:block}
.bzb-fuss .bzb-appknopf-plus{color:var(--bzb-navy) !important}
@media (max-width:420px){button.bzb-appknopf-karte{gap:10px;padding:10px 12px !important}.bzb-appknopf-karte img{width:48px;height:48px;flex-basis:48px}.bzb-appknopf-text strong{font-size:15px}.bzb-appknopf-text span{font-size:13px}.bzb-appknopf-status{font-size:13.5px}}
.bzb-appknopf-plus{display:flex !important;align-items:center !important;justify-content:center !important;width:36px !important;height:36px !important;padding:0 !important}.bzb-appknopf-plus svg{width:20px !important;height:20px !important;margin:0 !important;position:static !important}