/* Labella Immobilien - Designschicht ueber Flatsome. Stand 24.08.2026
Markenfarben der bestehenden Seite: Blau fuehrt, Magenta akzentuiert.
Aendert NUR das Aussehen - Seiteninhalte bleiben unberuehrt. */
:root{
--li-blau-tief:#134b7d;
--li-blau:#1e73be;
--li-magenta:#ab0d9a;
--li-tuerkis:#10a1c9;
--li-tuerkis-hell:#88d0e4;
--li-sand:#f3f7fb;
--li-text:#16202c;
--li-weich:#5d6b7a;
--li-linie:#dfe6ee;
}
/* ---------------- Kopfzeile ---------------- */
#top-bar{background:var(--li-blau-tief)!important}
#masthead{background:var(--li-blau)!important}
.header.has-sticky .stuck #masthead{background:rgba(19,75,125,.97)!important}
.header-nav a{letter-spacing:.08em}
.header-nav > li > a:hover,.header-nav > li.active > a{color:var(--li-tuerkis-hell)!important}
.nav-dropdown{border-top:3px solid var(--li-magenta)!important;box-shadow:0 16px 44px rgba(19,75,125,.22)!important}
.nav-dropdown > li > a{border-left:3px solid transparent;transition:.2s}
.nav-dropdown > li > a:hover{background:var(--li-sand);color:var(--li-blau-tief);
border-left-color:var(--li-magenta)}
.header-button .button{background:var(--li-magenta)!important;border-color:var(--li-magenta)!important;
color:#fff!important;border-radius:2px}
.header-button .button:hover{background:#8c087d!important;border-color:#8c087d!important}
/* ---------------- Grundfarben ---------------- */
.button.primary:not(.is-outline),button.primary:not(.is-outline),
input[type=submit].primary:not(.is-outline){background-color:var(--li-magenta);
border-color:var(--li-magenta);border-radius:2px}
.button.primary:hover{background-color:#8c087d;border-color:#8c087d}
.button.secondary{background-color:var(--li-blau);border-color:var(--li-blau);border-radius:2px}
a{color:var(--li-magenta)}
h1,h2,h3,h4{color:var(--li-blau-tief);letter-spacing:-.015em}
/* ---------- Volle Breite: Flatsome-Container komplett ausschalten ----------
Flatsome verschachtelt section > section-content > row > col > col-inner und
deckelt row/row-main auf 1080-1266px. Alle Deckel hier aufheben, den
Seitenrand EINMAL auf col-inner setzen - randlose Baender brechen wieder aus. */
.li-voll{padding-left:0!important;padding-right:0!important}
.li-voll .row,.li-voll .row-main{max-width:none!important;width:100%!important;
padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
.li-voll .col{padding-left:0!important;padding-right:0!important;max-width:100%!important}
.li-voll .col-inner{padding-left:5vw;padding-right:5vw}
/* Randlose Baender: Hero, Vertrauensleiste, Bewertungsblock gehen bis zum Rand */
.li-voll .col-inner > .li-hero,
.li-voll .col-inner > .li-vertrauen,
.li-voll .col-inner > .li-bewertung{margin-left:-5vw;margin-right:-5vw}
/* Abstaende zwischen den Baendern: keine doppelten Leerzeilen von wpautop */
.li-voll .col-inner > p:empty{display:none}
.li-voll .section-content{width:100%}
/* ---------------- Hero mit Video ---------------- */
.li-hero{position:relative;overflow:hidden;min-height:82vh;display:flex;align-items:center}
.li-hero-medien{position:absolute;inset:0;z-index:0}
.li-hero-medien video,.li-hero-medien img{width:100%;height:100%;object-fit:cover;display:block}
.li-hero::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(105deg,rgba(19,75,125,.94) 0%,rgba(19,75,125,.76) 44%,rgba(19,75,125,.3) 100%)}
.li-hero-inhalt{position:relative;z-index:2;color:#fff;max-width:820px;padding:0 5vw}
.li-hero-inhalt h1{color:#fff!important;font-size:clamp(34px,5vw,70px);line-height:1.06;
letter-spacing:-.025em;margin-bottom:0}
.li-hero-inhalt h1 em{font-style:normal;color:var(--li-tuerkis-hell)}
.li-hero-inhalt p{font-size:clamp(16px,1.3vw,20px);margin:20px 0 32px;max-width:600px;opacity:.92;color:#fff}
@media (prefers-reduced-motion:reduce){.li-hero-medien video{display:none}}
.li-augenbraue{display:inline-flex;align-items:center;gap:11px;color:var(--li-tuerkis-hell);
font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px}
.li-augenbraue::before{content:"";width:42px;height:1px;background:var(--li-tuerkis)}
.li-marke{display:inline-flex;align-items:center;gap:11px;color:var(--li-magenta);font-size:12.5px;
font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.li-marke::before{content:"";width:32px;height:1px;background:var(--li-tuerkis)}
.li-marke.hell{color:var(--li-tuerkis-hell)}
/* ---------------- Vertrauensleiste ---------------- */
.li-vertrauen{display:grid;grid-template-columns:repeat(4,1fr);background:var(--li-blau-tief);color:#fff}
.li-vertrauen div{padding:34px 20px;text-align:center}
.li-vertrauen b{display:block;font-size:32px;color:var(--li-tuerkis-hell);letter-spacing:-.02em}
.li-vertrauen span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.78}
/* ---------------- Objektkarten ---------------- */
.li-objekte{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:30px}
.li-objekt{background:#fff;border:1px solid var(--li-linie);overflow:hidden;transition:.35s ease;
display:flex;flex-direction:column}
.li-objekt:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(19,75,125,.17)}
.li-objekt-bild{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.li-objekt-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.li-objekt:hover .li-objekt-bild img{transform:scale(1.07)}
.li-schild{position:absolute;top:15px;left:15px;background:var(--li-magenta);color:#fff;padding:7px 14px;
font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.li-schild.verkauft{background:var(--li-blau-tief)}
.li-schild.vermietet{background:var(--li-tuerkis)}
.li-objekt-text{padding:26px 24px 28px;flex:1;display:flex;flex-direction:column}
.li-ort{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--li-magenta);font-weight:700}
.li-objekt-text h3{font-size:21px;line-height:1.26;margin:9px 0 15px}
.li-objekt-text h3 a{color:var(--li-blau-tief);text-decoration:none}
.li-objekt-text h3 a:hover{color:var(--li-magenta)}
.li-eckdaten{display:flex;gap:22px;padding:15px 0;border-top:1px solid var(--li-linie);
border-bottom:1px solid var(--li-linie);margin-bottom:16px;flex-wrap:wrap}
.li-eckdaten div{font-size:12.5px;color:var(--li-weich);line-height:1.35}
.li-eckdaten b{display:block;font-size:16px;color:var(--li-text)}
.li-preis{font-size:25px;font-weight:700;letter-spacing:-.02em;margin-top:auto;color:var(--li-blau-tief)}
.li-preis small{display:block;font-size:12.5px;font-weight:400;color:var(--li-weich)}
.li-mehr{margin-top:15px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--li-magenta);
text-decoration:none;display:inline-block}
.li-mehr:hover{color:var(--li-blau-tief)}
/* ---------------- Bewertungsblock ---------------- */
.li-bewertung{background:var(--li-blau-tief);color:#fff;padding:80px 5vw;position:relative;overflow:hidden}
.li-bewertung::before{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;
border:1px solid rgba(16,161,201,.32);border-radius:50%}
.li-bewertung h2{color:#fff!important}
.li-bewertung p{opacity:.86;font-size:17px}
.li-bewertung-raster{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;
position:relative;z-index:2;max-width:1500px;margin:0 auto}
/* ---------------- Ablauf ---------------- */
.li-schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.li-schritt{position:relative;padding-top:46px}
.li-schritt b{position:absolute;top:0;left:0;font-size:52px;font-weight:800;color:var(--li-tuerkis);
opacity:.30;line-height:1;letter-spacing:-.04em}
.li-schritt h3{font-size:20px;margin-bottom:9px;position:relative}
.li-schritt p{color:var(--li-weich);font-size:15.5px}
/* ---------------- Referenzen, Hinweise, Kontakt ---------------- */
.li-referenzen{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.li-referenz{border:1px solid var(--li-linie);border-top:3px solid var(--li-tuerkis);padding:24px 22px}
.li-referenz h3{font-size:18px;margin-bottom:8px}
.li-referenz p{color:var(--li-weich);font-size:15px}
.li-status{display:inline-block;background:var(--li-blau-tief);color:#fff;font-size:11px;font-weight:800;
letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;margin-bottom:11px}
.li-status.vermietet{background:var(--li-tuerkis)}
.li-hinweis{background:var(--li-sand);border-left:4px solid var(--li-magenta);padding:32px 30px;margin-top:44px}
.li-hinweis h3{font-size:21px;margin-bottom:9px}
.li-hinweis p{color:var(--li-weich);margin-bottom:18px;max-width:640px}
.li-kontaktliste{list-style:none;margin:0}
.li-kontaktliste li{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(--li-linie);font-size:16px}
.li-kontaktliste span{color:var(--li-magenta);font-weight:700;min-width:86px;font-size:12.5px;
letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
/* ---------------- Fuss ---------------- */
.footer-2,#footer .footer-wrapper{background:var(--li-blau-tief)!important}
#footer a{color:var(--li-tuerkis-hell)}
/* ---------------- Schmale Bildschirme ---------------- */
@media (max-width:1024px){
.li-vertrauen{grid-template-columns:repeat(2,1fr)}
.li-bewertung-raster{grid-template-columns:1fr;gap:36px}
.li-schritte{grid-template-columns:1fr;gap:28px}
.li-hero{min-height:70vh}
}
/* ---------------- Nachtrag: Knopf-Farben gegen Flatsome durchsetzen ---------------- */
html body .button.primary:not(.is-outline),
html body input[type="submit"].primary:not(.is-outline),
html body button.primary:not(.is-outline),
html body .wpcf7 input[type="submit"],
html body .li-hinweis .button.primary{
background-color:var(--li-magenta)!important;
background-image:none!important; /* Flatsome legt sonst einen Verlauf darueber */
border-color:var(--li-magenta)!important;
color:#fff!important;border-radius:2px;
}
html body .button.primary:not(.is-outline):hover,
html body .wpcf7 input[type="submit"]:hover{
background-color:#8c087d!important;border-color:#8c087d!important;
}
.button.white.is-outline{border-color:rgba(255,255,255,.65)!important;color:#fff!important}
.button.white.is-outline:hover{background:#fff!important;color:var(--li-blau-tief)!important}
/* ---------------- Nachtrag 2 (24.08.): sichtbare Fehler der Live-Seite ---------------- */
/* Der Facebook-Knopf in der Kopfzeile stand als weisses Kaestchen im blauen Balken. */
.header-social-icons .button.icon,
.header-social-icons a.icon.button{background:transparent!important;background-image:none!important;
border:1px solid rgba(255,255,255,.45)!important;box-shadow:none!important;color:#fff!important}
.header-social-icons .button.icon:hover{background:var(--li-magenta)!important;
border-color:var(--li-magenta)!important}
.header-social-icons .button.icon i{color:#fff!important}
/* Objektbilder: feste Hoehe, damit die Karten nicht springen, waehrend die Fotos laden */
.li-objekt-bild{background:var(--li-sand)}
/* Fuss: mehrspaltig wie im Entwurf */
#footer .footer-widgets{background:var(--li-blau-tief);color:#fff;padding:56px 5vw 40px}
#footer .footer-widgets .row{max-width:none!important;padding:0!important}
#footer .widget>.widget-title{color:var(--li-tuerkis-hell);font-size:12.5px;letter-spacing:.16em;
text-transform:uppercase;margin-bottom:16px;display:block}
#footer .widget ul{list-style:none;margin:0}
#footer .widget li{border:0;padding:5px 0}
#footer .widget a{color:rgba(255,255,255,.82);text-decoration:none}
#footer .widget a:hover{color:var(--li-tuerkis-hell)}
#footer .footer-widgets p{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.65}
.absolute-footer{background:#0f3f6b!important;color:rgba(255,255,255,.7)!important}
/* Steht nur EIN Objekt im Raster, zieht auto-fit die Karte auf volle Breite.
Eine einzelne Karte bleibt deshalb auf Kartenbreite. */
.li-objekt:only-child{max-width:460px}
/* ======================================================================
OBJEKTSEITEN — Designschicht ueber die vorhandenen Flatsome-Bloecke.
Aendert NUR das Aussehen: keine Bilder, keine Texte, keine Reihenfolge.
Die Abschnitts-IDs sind zufaellig, die Haken (.li-preisband, .li-objekt-kopf)
setzt li-design.js.
====================================================================== */
/* --- Kopfbereich: 79 % Seitenverhaeltnis ergibt 1.138 px, das sprengt jeden
Bildschirm. Auf Bildschirmhoehe begrenzen. --- */
body.li-objektseite .slider .banner,
body.li-objektseite .section-content > .banner{
padding-top:0!important;height:min(72vh,720px)!important;min-height:420px}
/* Lesbarkeit: dunkler Verlauf unter dem Titel statt harter Textschatten */
body.li-objektseite .li-objekt-kopf .banner-bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(11,44,74,.82) 0%,rgba(11,44,74,.30) 46%,rgba(11,44,74,.12) 100%);
pointer-events:none}
/* Titel im Kopfbereich: links unten statt mittig, groesser, ohne Schattenkante */
@media (min-width:850px){
body.li-objektseite .li-objekt-kopf .text-box{
left:5vw!important;right:auto!important;top:auto!important;bottom:10%!important;
transform:none!important;width:min(860px,78%)!important;padding:0!important}
body.li-objektseite .li-objekt-kopf .text-inner{text-align:left!important}
}
body.li-objektseite .li-objekt-kopf .text-box-content{text-shadow:none!important}
/* Handy: Titel stand mittig auf dem hellen Motiv. Nach unten in den Verlauf. */
@media (max-width:849px){
body.li-objektseite .li-objekt-kopf .text-box{
top:auto!important;bottom:16%!important;left:0!important;right:0!important;
transform:none!important;width:88%!important;margin:0 auto!important;padding:0!important}
body.li-objektseite .li-objekt-kopf .banner-bg::after{
background:linear-gradient(to top,rgba(9,38,64,.90) 0%,rgba(9,38,64,.50) 42%,rgba(9,38,64,.10) 78%)!important}
}
body.li-objektseite .li-objekt-kopf h3{color:#fff!important;font-size:clamp(26px,3.4vw,48px);
line-height:1.08;letter-spacing:-.02em;margin:0 0 10px;text-transform:none}
body.li-objektseite .li-objekt-kopf h3 strong{font-weight:700}
body.li-objektseite .li-objekt-kopf p{color:var(--li-tuerkis-hell);font-size:clamp(14px,1.2vw,18px);
margin:0;letter-spacing:.02em}
/* --- Preisband: war hellblau mit kleiner Schrift, jetzt Nachtblau mit
grosser Zahl und eckigen Knoepfen wie im uebrigen Design. --- */
body.li-objektseite .li-preisband{background:var(--li-blau-tief)!important}
body.li-objektseite .li-preisband .section-bg,
body.li-objektseite .li-preisband .section-bg-overlay{background:none!important;opacity:1!important}
body.li-objektseite .li-preisband .col-inner{padding:38px 5vw 42px!important}
body.li-objektseite .li-preis-stand{color:var(--li-tuerkis-hell)!important;font-size:12.5px!important;
letter-spacing:.2em;text-transform:uppercase;margin:0 0 8px;font-weight:700}
body.li-objektseite .li-preis-zahl{margin:0 0 22px}
body.li-objektseite .li-preis-zahl strong{color:#fff;font-size:clamp(28px,3.2vw,42px);
font-weight:700;letter-spacing:-.02em;line-height:1.1}
body.li-objektseite .li-preisband .button{border-radius:2px!important;margin:0 8px 8px 0;
letter-spacing:.06em}
body.li-objektseite .li-preisband .button.secondary{
background-color:var(--li-magenta)!important;border-color:var(--li-magenta)!important;color:#fff!important}
body.li-objektseite .li-preisband .button.secondary:hover{
background-color:#8c087d!important;border-color:#8c087d!important}
/* --- Zwischenueberschriften ("Objekt Fechenheim") im neuen Stil --- */
body.li-objektseite .section-title{border:0}
body.li-objektseite .section-title b{display:none}
/* Quelltext schreibt "Objekt fechenheim" klein - capitalize statt none,
sonst steht da ein kleines f. */
body.li-objektseite .section-title span{color:var(--li-blau-tief)!important;font-size:clamp(20px,2vw,28px);
letter-spacing:-.015em;text-transform:capitalize;padding:0 0 12px 0;border:0;position:relative;display:inline-block}
body.li-objektseite .section-title span::after{content:"";position:absolute;left:0;bottom:0;
width:54px;height:3px;background:var(--li-magenta)}
/* --- Fliesstext lesbarer --- */
body.li-objektseite #main p,
body.li-objektseite #main li{font-size:16.5px;line-height:1.75;color:#3d4a58}
body.li-objektseite #main .li-preisband p{color:inherit}
body.li-objektseite #main h1{font-size:clamp(26px,3vw,40px);line-height:1.12;
letter-spacing:-.02em;margin:0 0 22px}
body.li-objektseite #main h1 + p{margin-top:0}
body.li-objektseite #main p strong{color:var(--li-blau-tief)}
body.li-objektseite #main ul{margin-left:1.1em}
body.li-objektseite #main li{margin-bottom:6px}
/* Das eingebettete Video bekam 611 px Hoehe ohne sichtbaren Rahmen -
jetzt sauber im Seitenverhaeltnis und mit Hintergrund, falls es klemmt. */
body.li-objektseite .video-fit{background:var(--li-sand)}
@media (max-width:849px){
body.li-objektseite .slider .banner,
body.li-objektseite .section-content > .banner{height:56vh!important}
}
/* ---------- Nachtrag 3: Kopf-Schieber und Preisband feinschleifen ---------- */
/* Das Preisband bekam seine Farbe nicht von der Section, sondern von einer
Inline-Regel auf .col-inner (rgba(30,115,190,.9)) - die musste weg. */
body.li-objektseite .li-preisband .col-inner{background:transparent!important}
/* #main ist eine ID und schlug die Preisfarbe - deshalb hier mit gleichem Gewicht. */
body.li-objektseite #main .li-preis-zahl strong{color:#fff!important}
body.li-objektseite #main .li-preis-stand{color:var(--li-tuerkis-hell)!important}
/* --- Kopf-Schieber: Verlauf kraeftiger, damit der Titel auf JEDEM Motiv sitzt --- */
body.li-objektseite .li-objekt-kopf .banner-bg::after{
background:
linear-gradient(to top,rgba(9,38,64,.82) 0%,rgba(9,38,64,.30) 40%,rgba(9,38,64,0) 72%),
linear-gradient(to right,rgba(9,38,64,.46) 0%,rgba(9,38,64,.08) 40%,rgba(9,38,64,0) 62%)!important}
body.li-objektseite .li-objekt-kopf p{color:#dbe9f2!important;text-shadow:0 1px 12px rgba(9,38,64,.6)}
body.li-objektseite .li-objekt-kopf h3{text-shadow:0 2px 24px rgba(9,38,64,.45)}
/* Feine Linie ueber dem Titel - dasselbe Zeichen wie .li-augenbraue im uebrigen Design */
body.li-objektseite .li-objekt-kopf .text-inner::before{content:"";display:block;width:52px;height:2px;
background:var(--li-magenta);margin:0 0 18px}
@media (max-width:849px){
body.li-objektseite .li-objekt-kopf .text-inner::before{margin:0 auto 14px}
}
/* Kein eigener Zoom: Flatsome bringt mit "slide-zoom-in-fast" schon einen
Effekt mit, der Opazitaet UND Transform animiert. Eine zweite Animation auf
transform wuerde dessen Ueberblendung stoeren. */
/* Pfeile waren nur beim Ueberfahren sichtbar - auf dem Handy also nie. */
body.li-objektseite .li-objekt-kopf .flickity-prev-next-button{
opacity:1!important;width:52px!important;height:52px!important;border-radius:50%!important;
background:rgba(9,38,64,.34)!important;border:1px solid rgba(255,255,255,.55)!important;
color:#fff!important;transition:background .25s,border-color .25s}
body.li-objektseite .li-objekt-kopf .flickity-prev-next-button:hover{
background:var(--li-magenta)!important;border-color:var(--li-magenta)!important}
body.li-objektseite .li-objekt-kopf .flickity-prev-next-button.previous{left:24px!important}
body.li-objektseite .li-objekt-kopf .flickity-prev-next-button.next{right:24px!important}
body.li-objektseite .li-objekt-kopf .flickity-prev-next-button svg,
body.li-objektseite .li-objekt-kopf .flickity-prev-next-button .arrow{fill:#fff!important}
/* Punkte nach rechts unten, damit sie dem linksbuendigen Titel nicht ins Wort fallen */
@media (min-width:850px){
body.li-objektseite .li-objekt-kopf .flickity-page-dots{
text-align:right!important;padding-right:5vw!important;bottom:34px!important}
}
body.li-objektseite .li-objekt-kopf .flickity-page-dots .dot{
width:30px!important;height:3px!important;border-radius:0!important;
background:rgba(255,255,255,.55)!important;opacity:1!important;margin:0 6px!important;
transition:background .25s,width .25s}
body.li-objektseite .li-objekt-kopf .flickity-page-dots .dot.is-selected{
background:var(--li-magenta)!important;width:46px!important}
/* Kante zum Preisband: kein harter Schnitt mehr */
body.li-objektseite .li-preisband{box-shadow:0 -1px 0 rgba(255,255,255,.08)}
/* --- Status verkaufter/vermieteter Objekte, direkt ueber dem Preis --- */
/* Das Band ist dunkel (.dark faerbt Text weiss) - deshalb Schild in Magenta
statt weisser Flaeche, sonst steht weiss auf weiss. */
body.li-objektseite #main .li-objekt-status{display:inline-block;background:var(--li-magenta);
color:#fff!important;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
padding:9px 18px;margin:0 0 18px;border:0}
body.li-objektseite #main .li-objekt-status span{display:block;font-size:11.5px;font-weight:600;
letter-spacing:.03em;text-transform:none;color:rgba(255,255,255,.88)!important;margin-top:4px}
body.li-objektseite #main .li-status-vermietet{background:var(--li-tuerkis)}
/* Schild im Kopfbereich, damit der Stand sofort sichtbar ist */
body.li-objekt-verkauft .li-objekt-kopf .text-inner::after,
body.li-objekt-vermietet .li-objekt-kopf .text-inner::after{
content:"Verkauft";display:inline-block;margin-top:16px;background:var(--li-blau-tief);color:#fff;
font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px}
body.li-objekt-vermietet .li-objekt-kopf .text-inner::after{content:"Vermietet";background:var(--li-tuerkis)}
/* Ein einzelner Punkt unter einem Schieber mit nur einem Bild ist sinnlos */
body.li-objektseite .flickity-page-dots .dot:only-child{display:none}
/* Der zweite grosse Motivbanner (Luftaufnahmen) traegt denselben Titel wie der
Kopfbereich - dort stand weisse Schrift ohne Verlauf auf einer hellen Fassade. */
body.li-objektseite .section-content > .banner .banner-bg::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to top,rgba(9,38,64,.72) 0%,rgba(9,38,64,.34) 45%,rgba(9,38,64,.10) 85%)}
body.li-objektseite .section-content > .banner .text-box-content{
text-shadow:none!important}
body.li-objektseite .section-content > .banner h3{
color:#fff!important;font-size:clamp(22px,2.6vw,36px);line-height:1.12;letter-spacing:-.015em;
text-transform:none;margin-bottom:8px}
body.li-objektseite .section-content > .banner p{
color:#dbe9f2!important;margin:0}
/* ======================================================================
NACHTRAG 4 (24.08. abends) — Menue, Blog, Formular, Feinschliff.
Anlass: Im Aufklappmenue stand beim Ueberfahren WEISSE Schrift auf hellem
Feld. Ursache live gemessen: Flatsome faerbt
.nav-dropdown.dark > li > a:hover mit color:#fff (Gewicht 0-3-2); unsere
Regel hatte nur 0-2-2 und setzte allein den Hintergrund. Dazu kam, dass
Flatsome mit .nav-dropdown.dark > li > a{border-color:rgba(255,255,255,.2)}
auch unsere transparente linke Kante einfaerbte - daher der helle Strich.
====================================================================== */
/* --- Aufklappmenue: Feld in Markenblau, eckig wie der Rest der Seite --- */
html body .nav-dropdown{
background-color:var(--li-blau-tief)!important;
border:0!important;
border-top:3px solid var(--li-magenta)!important;
border-radius:2px!important;
box-shadow:0 24px 54px rgba(11,40,68,.34)!important;
padding:8px 0!important;
min-width:286px!important;
}
/* Pfeilspitze ueber dem Feld traegt die Farbe der Magenta-Kante.
ACHTUNG: nav-dropdown-has-arrow steht am selbst, nicht an einem
Kindelement - ein Vorsatz "html body ." greift deshalb nicht. */
body.nav-dropdown-has-arrow li.has-dropdown::before,
body.nav-dropdown-has-arrow li.has-dropdown::after{
border-bottom-color:var(--li-magenta)!important;
}
html body .nav-dropdown > li > a{
color:rgba(255,255,255,.86)!important;
background-color:transparent!important;
border-left:3px solid transparent!important;
border-right:0!important;
border-top:0!important;
border-bottom:1px solid rgba(255,255,255,.10)!important;
padding:12px 22px!important;
line-height:1.35;
transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
html body .nav-dropdown > li:last-child > a{border-bottom:0!important}
html body .nav-dropdown > li > a:hover,
html body .nav-dropdown > li > a:focus,
html body .nav-dropdown > li.current-menu-item > a{
background-color:rgba(255,255,255,.13)!important;
color:#fff!important;
border-left-color:var(--li-magenta)!important;
}
/* --- Menue auf dem Handy: Flatsome liefert ein fast schwarzes Feld --- */
html body .mobile-sidebar,
html body #main-menu .sidebar-menu{background-color:var(--li-blau-tief)!important}
/* Das Feld ist nur so hoch wie die Menuepunkte - darunter schien das
fast schwarze Standardfeld von Flatsome durch. */
html body .off-canvas .mfp-content{background-color:var(--li-blau-tief)!important}
html body .nav-sidebar.nav-vertical > li > a{
color:rgba(255,255,255,.92)!important;border-color:rgba(255,255,255,.12)!important}
html body .nav-sidebar.nav-vertical > li > a:hover{color:var(--li-tuerkis-hell)!important}
html body .nav-sidebar.nav-vertical li li > a{color:rgba(255,255,255,.78)!important}
html body .mobile-sidebar .search-field{border-radius:2px}
/* --- Zwei Spalten ohne zerrissene Absaetze ---------------------------------
Vorher lagen die Texte in einem Element mit "columns:2". Der Umbruch traf
dabei mitten in einen Absatz und trennte Zwischenueberschriften von ihrem
Text ("2. Aufbereiten" unten links, der Text oben rechts). Jetzt ein
Raster: jeder Block bleibt zusammen. */
.li-doppel{display:grid;grid-template-columns:1fr 1fr;gap:30px 54px;max-width:1100px}
.li-doppel > *{margin:0}
.li-doppel p{color:var(--li-weich);margin:0}
.li-doppel h3{font-size:19px;margin:0 0 8px}
.li-doppel .li-block p + p{margin-top:14px}
/* --- Einzelnes Objekt: quer statt schmale Karte im leeren Raum ------------ */
.li-objekte.li-einzeln{grid-template-columns:1fr}
.li-objekte.li-einzeln .li-objekt{max-width:none;display:grid;grid-template-columns:1.05fr 1fr}
.li-objekte.li-einzeln .li-objekt-bild{aspect-ratio:auto;height:100%;min-height:360px;position:relative}
/* Das Bild darf die Hoehe der Karte NICHT bestimmen - sonst zieht ein
Hochformat die Kachel auf die doppelte Hoehe und zeigt nur Himmel. */
.li-objekte.li-einzeln .li-objekt-bild img{position:absolute;top:0;left:0;width:100%;height:100%;
object-fit:cover;object-position:center 62%}
.li-objekte.li-einzeln .li-objekt-text{padding:38px 40px;display:flex;flex-direction:column;
justify-content:center}
.li-objekte.li-einzeln .li-objekt-text h3{font-size:27px}
.li-objekte.li-einzeln .li-preis{font-size:31px}
/* --- Kontaktblock: rechts stand nichts, die Seite wirkte abgeschnitten --- */
.li-kontaktraster{display:grid;grid-template-columns:1.3fr 1fr;gap:54px;align-items:start;
max-width:1300px}
.li-kontaktraster .li-kontaktliste{margin:0}
.li-kontaktkarte{background:var(--li-sand);border-left:4px solid var(--li-magenta);padding:32px 30px}
.li-kontaktkarte h3{font-size:21px;margin:0 0 10px}
.li-kontaktkarte p{color:var(--li-weich);font-size:15.5px;margin-bottom:20px}
.li-kontaktkarte .button{margin-bottom:6px}
.li-kontaktkarte .li-telefon{display:block;margin-top:10px;font-size:15px;color:var(--li-blau-tief);
text-decoration:none;font-weight:700}
.li-kontaktkarte .li-telefon:hover{color:var(--li-magenta)}
/* --- Einwilligungs-Platzhalter sass unter statt in seinem Rahmen ----------
Flatsome haelt Videos in .video-fit mit padding-top:56,25 % offen und legt
die Inhalte absolut darueber. Unser Platzhalter lag im normalen Fluss -
darum die grosse leere Flaeche ueber dem Text. */
.video-fit .li-embed-sperre{position:absolute;top:0;left:0;right:0;bottom:0;min-height:0}
/* --- Fusszeile: Cookie-Link sah aus wie ein Fremdkoerper ----------------- */
.absolute-footer .li-consent-link{text-transform:none!important;letter-spacing:0!important;
text-decoration:none!important;font-size:inherit!important}
.absolute-footer .li-consent-link:hover{text-decoration:underline!important;
color:var(--li-tuerkis-hell)!important}
/* ---------------- Blog (News) ----------------
Die Newsseite war die einzige Seite ohne eigenes Aussehen: kein Kopfbild,
englischer Suchplatzhalter, Autorenzeile "von admin", leere Widgets. */
.li-blogkopf{position:relative;min-height:38vh;display:flex;align-items:center;overflow:hidden;
background:var(--li-blau-tief);margin:0 0 54px;
margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.li-blogkopf-medien{position:absolute;inset:0;z-index:0}
.li-blogkopf-medien img{width:100%;height:100%;object-fit:cover;display:block}
.li-blogkopf::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,rgba(11,40,68,.90) 0%,rgba(11,40,68,.72) 55%,rgba(11,40,68,.42) 100%)}
.li-blogkopf-inhalt{position:relative;z-index:2;padding:56px 5vw;max-width:1500px;margin:0 auto;
width:100%;color:#fff}
.li-blogkopf h1{color:#fff!important;font-size:clamp(28px,3.4vw,46px);margin:0 0 10px}
.li-blogkopf p{color:rgba(255,255,255,.9);max-width:620px;margin:0;font-size:17px}
.blog-wrapper .article-inner{border:1px solid var(--li-linie);padding:0 0 26px;height:100%}
.blog-wrapper .post-item .box-image{margin-bottom:0}
.blog-wrapper .is-divider{display:none}
.blog-wrapper .entry-header-text{padding:22px 26px 6px}
.blog-wrapper .entry-content.single-page{padding:0 26px}
.blog-wrapper .entry-title{font-size:21px;line-height:1.3}
.blog-wrapper .entry-title a{color:var(--li-blau-tief)}
.blog-wrapper .entry-title a:hover{color:var(--li-magenta)}
.blog-wrapper .entry-meta,.blog-wrapper .entry-divider{color:var(--li-weich);font-size:12.5px;
letter-spacing:.08em;text-transform:uppercase}
.blog-wrapper .entry-author,.blog-wrapper .entry-meta .byline{display:none}
.blog-wrapper .from_the_blog_comments,.blog-wrapper .entry-meta .comments-link{display:none}
.blog-wrapper .post-sidebar .widget-title{color:var(--li-blau-tief);font-size:12.5px;
letter-spacing:.16em}
.blog-wrapper .post-sidebar a{color:var(--li-blau-tief)}
.blog-wrapper .post-sidebar a:hover{color:var(--li-magenta)}
.blog-wrapper .searchform .search-field{border-radius:2px}
.blog-wrapper .entry-image img{width:100%}
/* ---------------- Formulare (Kontakt) ----------------
Die Felder waren Flatsome-Standard: graue Kaesten ohne Bezug zum Design. */
.wpcf7 label{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--li-blau-tief);margin-bottom:6px}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 input[type=url],.wpcf7 textarea,.wpcf7 select{
border:1px solid var(--li-linie)!important;border-radius:2px!important;
box-shadow:none!important;background:#fff!important;padding:13px 15px!important;
height:auto!important;font-size:16px;color:var(--li-text)}
.wpcf7 textarea{min-height:150px}
.wpcf7 input:focus,.wpcf7 textarea:focus{border-color:var(--li-magenta)!important;
box-shadow:0 0 0 3px rgba(171,13,154,.12)!important;outline:0}
.wpcf7 .wpcf7-list-item{margin:0}
.wpcf7-acceptance label{display:flex!important;gap:10px;align-items:flex-start;
text-transform:none!important;letter-spacing:0!important;font-weight:400!important;
font-size:14.5px!important;color:var(--li-weich)!important;line-height:1.55}
.wpcf7-acceptance input[type=checkbox]{margin-top:3px}
.wpcf7 .wpcf7-image-captcha,.wpcf7 .cf7ic_instructions{font-size:14px}
.wpcf7 input[type=submit]{padding:15px 34px!important;letter-spacing:.08em}
.li-formkarte{background:#fff;border:1px solid var(--li-linie);padding:34px 32px}
@media (max-width:860px){
.li-doppel{grid-template-columns:1fr;gap:22px}
.li-kontaktraster{grid-template-columns:1fr;gap:30px}
.li-objekte.li-einzeln .li-objekt{grid-template-columns:1fr}
.li-objekte.li-einzeln .li-objekt-bild{min-height:0;aspect-ratio:4/3}
.li-objekte.li-einzeln .li-objekt-text{padding:26px 24px}
.li-blogkopf{min-height:30vh}
}
/* --- Blog: Feinschliff nach der Sichtprüfung --- */
.blog-wrapper.page-wrapper{padding-top:0} /* weisser Streifen ueber dem Kopfbild */
/* "Veröffentlicht am Immobilien" - Flatsomes deutsche Uebersetzung von
"Posted in". Die Rubrik steht ohnehin ueber der Ueberschrift. */
.blog-wrapper #post-list footer.entry-meta{display:none}
.blog-wrapper .post-sidebar .button.primary{width:100%;text-align:center}
/* Captcha-Hinweis: die allgemeine Label-Regel hatte ihn in Versalien gesetzt */
.wpcf7 .cf7ic_instructions{text-transform:none!important;letter-spacing:0!important;
font-weight:400!important;font-size:15px!important;color:var(--li-weich)!important;
display:block;margin-bottom:10px}
.wpcf7 .captcha-image{border:1px solid var(--li-linie)!important;padding:18px 20px;display:block}
.absolute-footer .li-consent-link{vertical-align:baseline;line-height:inherit}
/* --- Umrissknoepfe (z. B. "Weiterlesen" im Blog) ---------------------------
Die Grundregel oben faerbte auch Umrissknoepfe magenta; die Schriftfarbe
kommt aber von Flatsome (Blau) - blaue Schrift auf magenta Flaeche.
Umrissknoepfe sind jetzt magenta umrandet und fuellen sich beim Ueberfahren. */
html body .button.primary.is-outline,
html body a.button.primary.is-outline{
background-color:transparent!important;background-image:none!important;
border-color:var(--li-magenta)!important;color:var(--li-magenta)!important;border-radius:2px}
html body .button.primary.is-outline:hover,
html body a.button.primary.is-outline:hover{
background-color:var(--li-magenta)!important;color:#fff!important}
/* ---------------- Lesbarkeit: nachgemessene Schwachstellen ----------------
Geprüft mit einer Kontrastmessung ueber alle Seiten (WCAG AA). */
/* Hellblau auf Blau ergab 2,87:1 - zu wenig fuer 14-px-Schrift.
Der aktive Punkt wird jetzt weiss und bekommt einen Magenta-Strich. */
html body .header-nav > li > a{color:rgba(255,255,255,.88)!important}
html body .header-nav > li > a:hover,
html body .header-nav > li.active > a,
html body .header-nav > li.current-menu-item > a{color:#fff!important}
html body .header-nav > li.active > a,
html body .header-nav > li.current-menu-item > a{
box-shadow:inset 0 -2px 0 0 var(--li-magenta)}
/* Sprungmarke fuer Tastaturnutzer war magenta auf blau (1,31:1). */
html body .skip-link:focus{background:#fff!important;color:var(--li-blau-tief)!important;
outline:2px solid var(--li-magenta)}
/* Schrittnummern: 2,80:1 auf dem Sandton - jetzt kraeftiger. */
.li-schritt b{opacity:.62}
/* Schild "Vermietet": Weiss auf Tuerkis ergab 3,02:1. */
.li-schild.vermietet,.li-status.vermietet{background:#0e7f9e!important}
/* Untertitel im Objekt-Kopfbild war zartblau auf hellem Foto. */
body.li-objektseite .li-objekt-kopf .text-inner p,
body.li-objektseite .li-objekt-kopf .text-inner span{color:#fff!important}
/* ---------------- Bewertungsformular im dunklen Block ----------------
Vorher standen dort nur zwei Knoepfe, die auf /kontakt/ fuehrten. Die
Wertermittlung ist im Maklergeschaeft der eigentliche Anfragen-Motor,
sie gehoert deshalb direkt in den Block. */
.li-bewertung-raster{grid-template-columns:1fr 1.05fr;align-items:start}
.li-bewertungsform .li-bf-reihe{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
/* wpautop packt BEIDE Beschriftungen einer Zeile in EIN . Dann liegt nur
ein Kind im Raster und die rechte Spalte bleibt leer. `display:contents`
loest das
auf, seine Beschriftungen werden selbst zu Rasterfeldern -
das greift auch, falls wpautop den Absatz einmal nicht setzt. */
.li-bewertungsform .li-bf-reihe > p{display:contents}
.li-bewertungsform .li-bf-reihe > p > br{display:none}
.li-bewertung .li-bewertungsform label,
.li-bewertung .wpcf7 label{display:block;color:rgba(255,255,255,.92)!important;
font-size:12.5px!important;font-weight:700!important;letter-spacing:.1em!important;
text-transform:uppercase!important;margin:0 0 6px}
.li-bewertung .li-bewertungsform label em{font-style:normal;font-weight:400;
letter-spacing:.04em;text-transform:none;opacity:.6;font-size:12px}
.li-bewertung .wpcf7 input[type=text],.li-bewertung .wpcf7 input[type=email],
.li-bewertung .wpcf7 input[type=tel],.li-bewertung .wpcf7 textarea,
.li-bewertung .wpcf7 select{
background:#fff!important;border:1px solid rgba(255,255,255,.25)!important;
border-radius:2px!important;color:var(--li-text)!important;
padding:12px 14px!important;height:auto!important;font-size:15.5px;
box-shadow:none!important;margin-bottom:16px;width:100%}
.li-bewertung .wpcf7 select{appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2316202c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")!important;
background-repeat:no-repeat!important;background-position:right 14px center!important;
background-size:12px 8px!important;padding-right:38px!important}
.li-bewertung .wpcf7 textarea{min-height:96px}
.li-bewertung .wpcf7 input:focus,.li-bewertung .wpcf7 textarea:focus,
.li-bewertung .wpcf7 select:focus{border-color:var(--li-magenta)!important;
box-shadow:0 0 0 3px rgba(171,13,154,.35)!important;outline:0}
/* Der Bilder-Captcha braucht einen hellen Kasten, seine Symbole erben die Schriftfarbe. */
.li-bewertung .li-bf-captcha{background:rgba(255,255,255,.94);padding:14px 16px;
margin-bottom:16px;color:var(--li-text)}
.li-bewertung .li-bf-captcha .cf7ic_instructions{color:var(--li-blau-tief)!important;
font-size:14px!important;margin-bottom:8px}
.li-bewertung .li-bf-captcha .captcha-image{border:0!important;padding:0!important}
.li-bewertung .li-bf-captcha label{color:var(--li-blau-tief)!important}
/* Einwilligung: Fliesstext, nicht Versalien */
.li-bewertung .wpcf7-acceptance label{display:flex!important;gap:10px;align-items:flex-start;
color:rgba(255,255,255,.86)!important;font-size:14px!important;font-weight:400!important;
letter-spacing:0!important;text-transform:none!important;line-height:1.55;margin:4px 0 18px}
.li-bewertung .wpcf7-acceptance a{color:var(--li-tuerkis-hell);text-decoration:underline}
.li-bewertung .wpcf7 input[type=submit]{width:100%;padding:16px 24px!important;font-size:15px}
.li-bewertung .wpcf7-not-valid-tip{color:#ffc2d8!important;font-size:13px;margin:-12px 0 12px}
.li-bewertung .wpcf7-response-output{border-color:rgba(255,255,255,.4)!important;
color:#fff!important;font-size:14.5px;margin:16px 0 0!important;padding:12px 14px!important}
.li-bf-telefon{margin:16px 0 0;font-size:15px;color:rgba(255,255,255,.8)}
.li-bf-telefon a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.li-bf-telefon a:hover{color:var(--li-tuerkis-hell)}
@media (max-width:860px){
.li-bewertungsform .li-bf-reihe,
.li-bewertungsform .li-bf-reihe > p{grid-template-columns:1fr;gap:0}
.li-bewertung-raster{grid-template-columns:1fr}
}
/* Das Textfeld wirkte blaugrau statt weiss - und zwar NICHT wegen seiner
eigenen Farbe (die war weiss), sondern weil `.li-bewertung p{opacity:.86}`
fuer den Fliesstext des Blocks gilt und wpautop das Feld in ein
packt.
Die Zeilen im Raster waren nicht betroffen, weil ihr
auf
`display:contents` steht und dann gar keinen Kasten erzeugt. */
.li-bewertung .wpcf7 p{opacity:1;font-size:inherit}
/* --- Fehlerhinweise im dunklen Block ---------------------------------------
CF7 liefert die Hinweise als hellen Kasten - im Nachtblau kaum lesbar. */
.li-bewertung .wpcf7-not-valid-tip{
background:transparent!important;border:0!important;box-shadow:none!important;
color:#ffc2d8!important;font-size:13px!important;padding:0!important;
margin:-10px 0 12px!important;display:block}
.li-bewertung .wpcf7 .wpcf7-not-valid{border-color:#ffc2d8!important}
.li-bewertung .li-bf-captcha .wpcf7-not-valid-tip{color:#b8004f!important;margin:6px 0 0!important}
.li-bewertung .wpcf7-response-output{background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.35)!important;color:#fff!important}
.li-bewertung .wpcf7-acceptance .wpcf7-not-valid-tip{margin:0 0 12px!important}
/* Auf dem Handy sprengte der Bewertungsblock seinen Rahmen: eine Rasterspalte
ist mindestens so breit wie ihr breitester unteilbarer Inhalt (min-content),
und die war hier 413 px bei 351 px Platz - der Rest wurde abgeschnitten.
`min-width:0` erlaubt der Spalte, kleiner zu werden als ihr Inhalt. */
.li-bewertung-raster > *,.li-kontaktraster > *,.li-doppel > *,
.li-bewertungsform .li-bf-reihe > p > label{min-width:0}