/*home page custum css*/
@font-face {
    font-family: "Niveau Grotesk";
    src: url("../font/NiveauGroteskLight.eot");
    src: local("../font/Niveau Grotesk Light"), local("NiveauGroteskLight"),
        url("../font/NiveauGroteskLight.eot?#iefix") format("embedded-opentype"),
        url("../font/NiveauGroteskLight.woff2") format("woff2"),
        url("../font/NiveauGroteskLight.woff") format("woff"),
        url("../font/NiveauGroteskLight.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: "Niveau Grotesk";
    src: url("../font/NiveauGroteskBold.eot");
    src: local("../font/Niveau Grotesk Bold"), local("NiveauGroteskBold"),
        url("../font/NiveauGroteskBold.eot?#iefix") format("embedded-opentype"),
        url("../font/NiveauGroteskBold.woff2") format("woff2"),
        url("../font/NiveauGroteskBold.woff") format("woff"),
        url("../font/NiveauGroteskBold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: "Niveau Grotesk";
    src: url("../font/NiveauGroteskMedium.eot");
    src: local("../font/Niveau Grotesk Medium"), local("NiveauGroteskMedium"),
        url("../font/NiveauGroteskMedium.eot?#iefix") format("embedded-opentype"),
        url("../font/NiveauGroteskMedium.woff2") format("woff2"),
        url("../font/NiveauGroteskMedium.woff") format("woff"),
        url("../font/NiveauGroteskMedium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Niveau Grotesk";
    src: url("../font/NiveauGroteskRegular.eot");
    src: local("font/Niveau Grotesk Regular"), local("NiveauGroteskRegular"),
        url("../font/NiveauGroteskRegular.eot?#iefix") format("embedded-opentype"),
        url("../font/NiveauGroteskRegular.woff2") format("woff2"),
        url("../font/NiveauGroteskRegular.woff") format("woff"),
        url("../font/NiveauGroteskRegular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../font/PlayfairDisplay-Medium.woff2") format("woff2"),
        url("../font/PlayfairDisplay-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../font/PlayfairDisplay-Bold.woff2") format("woff2"),
        url("../font/PlayfairDisplay-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Niveau Grotesk" !important;
    font-weight: normal;
    font-style: normal;
}

* {
    outline: none;
}


@media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1320px;
    }

    

    

    


}


@media (min-width: 0px) {
    .d-md-block {
        display: block !important;
    }
}


.dmi-nav-btn-content{
    display: none;
    text-align: left;
    padding-left: 25px;

}


header .dmi-header-inquiry {
    float: right !important;
}

/* Claude 2026-07-20: Der Header-CTA war frueher <button>, wurde bei der nested-interactive-
   a11y-Korrektur zu <a class="btn btn-outline-success">. Diese Regel (Marken-Blau + weisser Text)
   griff nur auf <button> -> der Anchor fiel auf Bootstraps gruenes btn-outline-success zurueck.
   Selektor auf den Anchor erweitert; inline-flex zentriert den Text, den <button> von selbst zentriert. */
.dmi-header-inquiry button:hover,
.dmi-header-inquiry a.btn-outline-success:hover {
    background: #165b97 !important;
    color: #fff !important;
}

.dmi-header-inquiry button,
.dmi-header-inquiry a.btn-outline-success {
    background: #127aa8 !important;
    color: #fff !important;
    border: none !important;
    margin-left: 25px;
    font-family: "Niveau Grotesk";
    width: 198px;
    height: 56px;
    font-size: 17px;
    font-weight: bold;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

button.btn.btn-outline-success a {
    text-decoration: none;
    color: #fff;
}

.btn-check:focus+.btn-outline-success,
.btn-outline-success:focus {
    box-shadow: none !important;
}

.dmi-consult-box .dmi-consult-phone {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #127aa8 !important;
    margin: 11px 0 0;
    font-family: "Niveau Grotesk";
    line-height: 28px;
}


.dmi-consult-box .dmi-consult-phone a:hover {
    color: #165b97;
    transition: 0.5s;
}

.dmi-consult-box .dmi-consult-phone a {
    text-decoration: none;
    color: #127aa8;
}

.dmi-consult-box p {
    font-size: 18px;
    font-family: "Playfair Display";
    line-height: normal;
}

.dmi-header-inquiry img {
    margin-right: 15px;
}

.dmi-header-bottom {
    background: #165b97;
    margin: 0 0 0;
}

.dmi-header-bottom a {
    color: #fff !important;
    font-size: 19px;
    font-family: "Niveau Grotesk";
    font-weight: 500;
}


.dmi-header-bottom li:first-child {
    border: none;
    padding: 20px 25px;
}

/* Claude 2026-07-20: vertikales Padding war asymmetrisch (20px oben / 23px unten) -> zweizeilige
   Menuepunkte (z.B. "FRAGEN ZUR DENKMALIMMOBILIE" bei schmalerem Desktop) sassen sichtbar zu hoch
   (Rose "nicht mittig"). Symmetrisch gemacht; line-height von 18px (< 19px Schrift, gedraengt/"zu kurz")
   auf 22px fuer Luft zwischen den zwei Zeilen. Der Hover (li:hover) fuellt das ganze li - dadurch wieder
   voll und mittig. */
.dmi-header-bottom li {
    padding: 20px 25px;
    border-left: 1px solid #1b66a1;
    display: flex;
    align-items: center;
    transition: 0.5s;
}

.dmi-header-bottom li a {
    padding: 0 0 0 0 !important;
    margin: 0px;
    line-height: 22px;
}

nav.navbar.navbar-expand-lg.navbar-light {
    padding: 0 !important;
}

.dmi-header-bottom li:last-child {
    padding: 20px 25px;
}

header .dmi-header-inquiry {
    /* Claude 2026-07-23: float:right + padding-top:25px entfernt - schob den Beratungs-Block nach
       unten (zu tief) und verhinderte vertikale Zentrierung. Rechtsbuendig macht bereits die innere
       .d-flex.justify-content-end; vertikal zentriert jetzt .dmi-header-top .row (align-items:center). */
    padding-top: 0;
}
/* Logo + Beratungsblock in der weissen Kopfleiste vertikal mittig ausrichten (statt Logo oben / Block unten). */
.dmi-header-top .row {
    align-items: center;
    min-height: 90px;
}
/* Bootstrap-Standardpadding (5px) der inline navbar-brand entfernen, damit die Box exakt der
   Logohoehe entspricht und die Zeile das Logo praezise mittig setzt (sonst ~4px zu hoch). */
.dmi-header-top .navbar-brand {
    display: flex;
    align-items: center;
    width: max-content;
    padding: 0;
}


.carousel-control-next-icon {
    background-image: url(../img/next.png) !important;
    width: 28px;
    height: 46px;
}

.carousel-control-prev-icon {
    background-image: url(../img/prev.png) !important;
    width: 28px;
    height: 46px;
}


.w-100 {
    height: min-content !important;
}


a.active {
    background: #127aa8 !important;
}

.dmi-kfw-slide {
    position: absolute;
    /* Claude 2026-07-22 (Rose): etwas weiter vom Rand einruecken, einheitlich mit .dmi-kfw-badge. */
    top: 42px;
    right: 44px;
}


.dmi-sticky-actions {
position: fixed!important;
right: 0;
bottom: 0;
/* Claude 2026-07-17 (Bugfix, Rose-Korrektur): war z-index:9999 - identisch zu .dmi-inquiry-form (siehe
   dort), wodurch die spaeter im DOM stehende Kontaktbox beim Scrollen ueber die Sticky-Buttons
   rendern konnte. Die Sticky-Buttons sind als oberste UI-Ebene gedacht und duerfen/sollen anderen
   Inhalt ueberlagern (nicht umgekehrt) - z-index bewusst ueber alle regulaeren Seiteninhalte
   angehoben, aber unterhalb der echten Vollbild-Overlays (mobiles Menue/Sticky-Navbar, 999999999). */
z-index: 99999 !important;
top: 0;
margin: auto;
height: 210px;
}

.dmi-sticky-actions a.top{
    background: #002f6f;
}


.dmi-testimonials-heading h2 {
    font-size: 45px;
    color: #2e2e2e;
    margin: 0px;
    font-family: "Playfair Display";
    line-height: 50px;
    font-weight: bold;
    border-left: solid 7px #165b97;
    padding-left: 15px;
}


.dmi-property-slide .dmi-testimonials-list p {
    display: flex;
    align-items: center;
    line-height: 35px;
    font-family: "Niveau Grotesk";
    font-size: 19px;
    color: #939393;
    margin: 0;
}

.dmi-property-slide .dmi-testimonials-list img {
    height: 12px !important;
    width: 8px !important;
    margin-right: 7px !important;
}

.dmi-property-slide .dmi-testimonials-outer h3 {
    padding-left: 30px;
    font-size: 26px;
    font-family: "Playfair Display";
    font-weight: bold;
}

.dmi-property-slide .dmi-testimonials-list {
    padding-left: 30px;
}


.dmi-property-slide .dmi-testimonials-outer {
    padding-top: 41px;
}

.dmi-property-slide .dmi-testimonials-list {
    margin-top: 21px;
}


.card_img_owl {
    padding: 10px;
}

.dmi-property-slide .dmi-testimonials-outer {
    padding-top: 23px;
}


.dmi-property-slide .alle {
    text-align: center;
    margin-top: 50px;
}

.dmi-property-slide .alle a {
    background: #127aa8;
    text-decoration: none;
    color: #fff;
    font-size: 17px;
    padding: 20px 30px;
    border-radius: 6px;
    font-family: "Niveau Grotesk";
    font-weight: 500;
    letter-spacing: 0.5px;
}


.owl-stage-outer {
    padding-bottom: 0px !important;
}


.dmi-testimonials-header {
    background: #f7f7f7;
    padding-top: 232px;
    padding-bottom: 135px;
}

.dmi-testimonials-header .dmi-testimonials-heading {
    margin-bottom: 80px;
}

.dmi-testimonials-first.card_img_owl img {
    width: auto;
    margin-bottom: -40px;
    z-index: 9;
    position: relative;
}

.dmi-testimonials-first .dmi-testimonials-outer {
    padding: 35px 20px;
}

.dmi-testimonials-first .dmi-testimonials-outer h3 {
    font-size: 27px;
    font-family: "Playfair Display";
    font-weight: bold;
    margin: 20px 0 25px;
}

.dmi-testimonials-first img.dmi-testimonial-icon {
    width: auto !important;
}

.dmi-testimonials-first.dmi-testimonials-outer {
    padding: 35px 20px;
}

.dmi-testimonials-header .card {
    border: none;
    box-shadow: 0px 0px 20px #e4eaef;
}

.dmi-testimonials-first .card_img_owl {
    padding: 0 20px !important;
    margin-bottom: -28px;
    position: relative;
    z-index: 9;
}

.dmi-testimonials-header .alle {
    width: 100%;
    margin: 40px 0 0;
}

.dmi-testimonials-header .alle a {
    /* Claude 2026-07-20: war dunkelgrau #303031 (Rest-Mockup-Farbe) - fiel als einziger CTA aus
       dem Marken-Blau der Seite (Rose-Meldung "andere Farbe als der Rest"). Auf #127aa8 angeglichen;
       der :hover war bereits #165b97 (Marken-Hover). */
    background: #127aa8;
    text-decoration: none;
    color: #fff;
    font-size: 17px;
    padding: 20px 21px 20px 25px;
    border-radius: 6px;
    font-family: "Niveau Grotesk";
    text-align: center;
    margin: 0 auto;
    display: table;
    text-transform: uppercase !important;
    font-weight: bold;
}


.dmi-testimonials-widget span.prev::before {
    content: "";
    background: url(../img/owl2s_left.png);
    height: 45px;
    width: 65px;
    position: relative;
    display: block;
}

.dmi-testimonials-widget span.next::before {
    content: "";
    background: url(../img/owl2s_right.png);
    height: 45px;
    width: 65px;
    position: relative;
    display: block;
}

.dmi-testimonials-widget .owl-nav {
    position: absolute;
    top: 40%;
}


.dmi-testimonials-widget .owl-nav {
    position: absolute;
    top: 40%;
    width: 100%;
}

/* Claude 2026-07-17 (Visual-QA-Fund): war "margin-left/right: 0px" - dadurch sass der Pfeil exakt
   am linken/rechten Rand der Testimonial-Karten und ueberlappte deren Text (Playwright-Ueberlappungs-
   check + Screenshot bestaetigt, "Was unsere Kunden ueber uns sagen"-Sektion, Desktop-Breite). Die
   fast identische .aktuelle_main-Karussell-Sektion (Aktuelles/News) loest dasselbe Problem bereits
   korrekt mit -85px, um die Pfeile aus dem Kartenbereich in den umgebenden Weissraum zu schieben -
   hier analog uebernommen. Nur die desktop-Basisregel betroffen; die schmaleren Breakpoints setzen
   .owl-nav bereits auf position:unset (Pfeile unterhalb der Karten, kein Ueberlappungsrisiko). */
.dmi-testimonials-widget .owl-nav button.owl-prev {
    margin-left: -85px !important;
    float: left;
}

.dmi-testimonials-widget .owl-nav button.owl-next {
    float: right;
    margin-right: -85px !important;
}

.dmi-testimonials-widget .dmi-testimonials-heading h2 {
    display: inline-block;
}


.more-btn {
    margin-top: 30px;
}


.dmi-testimonials-header .dmi-testimonials-list p {
    font-family: "Niveau Grotesk";
    font-size: 17px;
    line-height: 28px;
    color: #516576;
}


.modal-content {
    background-color: transparent !important;
    border: 7px solid #FFF;
    width: 100% !important;
    max-width: 576px !important;
    height: 360px;
}

button.btn-close {
    display: block !important;
    position: absolute;
    right: -20px;
    position: absolute;
    background-color: #fff;
    width: 25px;
    height: 25px;
    font-size: 12px;
    border-radius: 50%;
    font-family: "Gotham";
    z-index: 1;
    top: -20px;
    opacity: 1;
    padding: 5px;
}

.modal-content .modal-body {
    padding: 0 !important;
}

.modal-content .modal-body iframe {
    width: 100%;
    height: 100%;
}


.erfahren {
    padding: 115px 0;
    background: #f6f7f9;
}


.erfahren .dmi-testimonials-heading h2 {
    border-left: solid 8px #165b97;
}

.denkmal {
    padding: 120px 0;
}

.denkmal .dmi-testimonials-heading {
    padding-bottom: 32px;
}


.aktuelles .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    border-radius: 5px;
}


footer {
    background: #f6f7f9;
    padding-top: 108px;
    /* Claude 2026-07-29 (Rose, wiederkehrender Bug): padding-bottom war 40px -> die Copyright-Leiste
       (.dmi-footer-bottom) liegt IM footer, dahinter blieben 40px leerer Footer-Hintergrund bis zum
       Seitenende. Desktop-Pendant zum Mobil-Fix vom 2026-07-27: 0, damit die Leiste buendig sitzt.
       Der Abstand zur Leiste kommt jetzt aus .dmi-footer-bottom margin-top. */
    padding-bottom: 0;
}

/* Claude 2026-07-24 (Rose): dezente Copyright-Leiste unterhalb des Footers (uebliche Stelle) -
   klein, gedaempft, zentriert; leicht dunklerer Ton als der Footer zur feinen Abgrenzung. */
.dmi-footer-bottom {
    background: #eceef1;
    padding: 12px 0;
    margin-top: 40px;
}
.dmi-footer-bottom p {
    margin: 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #9aa1a9;
}

.dmi-footer-para p {
    font-size: 18px;
    font-family: "Niveau Grotesk";
    margin-bottom: 20px;
    color: #4e4e4f;
}

.dmi-footer-para {
    margin-top: 45px;
}

.dmi-footer-para img {
    margin-right: 10px;
}

.dmi-footer-bg h2 {
    font-size: 25px;
    font-family: "Playfair Display";
    font-weight: bold;
    position: relative;
    margin: 0;
}

.dmi-footer-bg h2:before {
    content: " ";
    background: #165b97;
    width: 40px;
    height: 3px;
    bottom: -28px;
    position: absolute;
}

.dmi-footer-offers ul {
    margin-top: 66px;
    margin-bottom: 45px;
}

.dmi-footer-offers li a {
    text-decoration: none;
    padding: 0 0 24px 0;
    font-size: 18px;
    display: flex;
    font-family: "Niveau Grotesk";
    align-items: baseline;
    color: #434343 !important;
    line-height: normal;
}

.dmi-footer-offers img {
    margin-right: 10px;
    width: 8px;
    height: 13px;
    margin-top: 5px;
}

.form-check {
    display: flex;
}

input#gridCheck {
    margin-right: 10px;
}

.form-check input {
    padding: 0 8px !important;
    outline: none;
    border: none;
}


body .form-select {
    color: #7f7f7f;
    background-image: url(../img/down.png) !important;
    background-repeat: no-repeat !important;
    background-position: 93% 55% !important;
    background-size: 11px 7px !important;
    border: 1px solid #ced4da !important;
    cursor: pointer;
}


.dmi-footer-bg img.dmi-footer-logo {
    width: 100%;
}

.carousel-control-next,
.carousel-control-prev {
    opacity: 1 !important;
}


/* Claude 2026-07-23: alte Raster-Logo-Regel (width:470px) entfernt - das Logo ist jetzt das
   Marken-Lockup (components/_brand.php), Signet-Groesse regelt .dmi-brand__signet in dmi-brand.css. */


.alle button {
    display: none;
}

.dmi-testimonials-heading h3 {
    display: none;
}

.dmi-testimonials-widget .alle button {
    display: none;
}

.dmi-responsive-logo {
    display: none;
}

.dmi-footer-responsive.dmi-footer-para {
    display: none;
}

.dmi-mobile-header-top {
    display: none;
}

.dmi-footer-para a {
    color: transparent;
}

.dmi-footer-para span .fa {
    color: #4e4e4f;
    padding: 10px 11px;
    border: 3px solid #4e4e4f;
    border-radius: 55px;
    font-size: 22px;
    margin-right: 15px;
}

.dmi-footer-para span .fa:hover {
    color: #1a3a6b;
    border: 3px solid #1a3a6b;
}

ul.list-unstyled li {
    display: flex;
}


.dmi-property-slide .alle a:hover,
.dmi-testimonials-header .alle a:hover{
    background: #165b97 !important;
    transition: 0.5s;
}


label.form-check-label {
    cursor: pointer !important;
}

ul.navbar-nav.me-auto.mb-2.mb-lg-0 li.nav-item a.nav-link.active {
    background: transparent !important;
}

img.d-block.w-100.responsive {
    display: none !important;
}

.dmi-header-bottom li:hover {
    background: #127aa8;
}

.dmi-footer-offers li a:hover {
    color: #20629b;
}

.dmi-footer-para p a {
    font-size: 18px;
    font-family: "Niveau Grotesk";
    margin-bottom: 20px;
    color: #4e4e4f;
    text-decoration: none;
}

.dmi-footer-para p a:hover {
    color: #20629b;
}


/*----29-07-21----*/
/*--------404-page----*/


/*----------------------------------------------------------------------------------------
----------------------------------Unsere Angebote-----------------------------------------
------------------------------------------------------------------------------------------*/
.dmi-hero {
    /* Claude 2026-07-17 (Bugfix, wiederholte Rose-Meldung): war
       "background: url(../img/bannerbg.png) no-repeat; background-size:100% 100%" - diese alte,
       statische Grafik ist seit dem Hero-Slideshow-Redesign komplett obsolet (das echte Foto kommt
       jetzt als Inline-Style auf .hero-carousel__item), war aber weiterhin sichtbar: .hero-carousel
       beginnt erst NACH dem padding-top:54px dieser Regel, wodurch ein staendig sichtbarer 54px
       hoher Streifen der alten Grafik oberhalb des echten Fotos blieb (kein Lade-Timing-Effekt,
       sondern strukturell auf jeder Seite so). Hintergrund komplett entfernt statt nur den Streifen
       zu kaschieren - fuer diese Regel gibt es keinen gueltigen Anwendungsfall mehr. */
    position: relative;
    padding: 54px 0 0;
}

/* Claude 2026-07-17 (Bugfix, Folge der eigenen R1291-Aenderung): das padding-top:54px der Basisregel
   existierte ausschliesslich, um Platz fuer die dort frueher gesetzte statische Hintergrundgrafik zu
   schaffen. Seit die entfernt ist (siehe oben), blieb an ihrer Stelle ein 54px hohes WEISSES Band
   zwischen Navigationsleiste und echtem Objektfoto stehen - auf jeder estatelist-Seite, per
   Zoom-Screenshot bestaetigt. Das Design-Mockup (doc/neue Website/.../Property Page/
   Denkmalimmobilien---Property-Page.png) zeigt eindeutig: das Foto beginnt unmittelbar unter der
   Navigationsleiste, ohne Zwischenraum, und die weisse CTA-Box ist ~54px ins Foto eingerueckt.
   Genau das entsteht, wenn hier padding-top entfaellt: .hero-static-box behaelt top:54px und rueckt
   damit ins Foto ein, statt wie bisher exakt an dessen Oberkante zu kleben.
   Nur fuer den Slideshow-Hero gescopet - die Objektdetailseite nutzt .dmi-hero ebenfalls, legt
   ihren Inhalt aber INNERHALB dieses Paddings ab und wuerde sich sonst um 54px verschieben. */
.dmi-hero--slideshow {
    padding-top: 0;
}

.dmi-cta-box {
    background: url(../img/parkbg.png) no-repeat;
    width: 517px;
    height: 614px;
    padding: 57px 20px 0;
    z-index: 999;
    position: relative;
}

/* Claude 2026-07-17 (Bugfix Hero-Slideshow-Redesign): .dmi-cta-box liegt seit diesem Fix als
   statischer Overlay ueber dem rotierenden .hero-carousel (siehe estatelist/indexSuccess.php,
   pflegeSuccess.php) - .hero-static-box uebernimmt exakt die Position, die .dmi-cta-box vorher als
   In-Flow-Kind von .dmi-hero hatte (oben per top:54px an .dmi-hero's padding-top
   angeglichen, damit sich nichts verschiebt). */
.hero-static-box {
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    z-index: 999;
}

/* Claude 2026-07-17 (Rose-Wunsch): "Wir muessen die gesamte weisse CTA-Box als Ganzes etwas kleiner
   und kompakter machen ... Bei dieser Groesse werden wir immer auf Probleme stossen. Finde die
   maximal geeignete Groesse."

   Ausgangslage (gemessen bei 1440px): .dmi-cta-box war 517x614px - also exakt 100% der Fotohoehe. Die
   Box reichte damit zwangslaeufig bis in den dunklen Kennzahlen-Balken (.dmi-hero-facts) am Fotofuss
   hinein und verdeckte den Objektnamen. Genau daraus entstand die ganze Fehlerkette der letzten
   Runden: erst ein Ausweich-padding-left von 477px, dann 560px, was wiederum die Kennzahlen-Zeile
   zum Umbrechen zwang und den Balken ueber seine feste Hintergrundbildhoehe wachsen liess.

   Loesung an der Wurzel statt weiterer Ausweich-Abstaende: die Box wird so kompakt, dass sie
   OBERHALB des Balkens endet. Gemessenes Ergebnis bei 1440px: 420x382px = 62% der Fotohoehe, 117px
   Abstand zum Balken. Der grosszuegige Abstand ist Absicht, nicht Zufall - bei schmaleren Fenstern
   brechen die Kennzahlen um und der Balken waechst nach oben (bis ~+38px pro Zusatzzeile); der
   Puffer faengt das ab, ohne dass die Box erneut kollidiert.

   Bewusst auf .hero-static-box gescopet (existiert nur in estatelist/indexSuccess.php +
   pflegeSuccess.php): .dmi-cta-box/.dmi-cta-box__text/.dmi-cta-box__phone werden auch von der Objektdetailseite
   (estates/_topbanner.php) genutzt - die soll unveraendert bleiben und hat ihre eigenen
   .dmi-property-details-Overrides.

   height:auto + background-size:100% 100% statt fester 614px: entkoppelt die Box von der festen
   Groesse ihres Hintergrundbilds (parkbg.png, 517x614) - dasselbe Muster, das die urspruenglichen
   Autoren bereits bei max-width:600px fuer .dmi-cta-box nutzen. */
.hero-static-box .dmi-cta-box {
    width: 420px;
    height: auto;
    background-size: 100% 100%;
    padding: 30px 24px 28px;
}

.hero-static-box .dmi-cta-box__text :is(h1, h2) {
    font-size: 30px;
    line-height: 36px;
    padding-left: 36px;
}

.hero-static-box .dmi-cta-box__text :is(h1, h2):before {
    top: 15px;
    width: 18px;
    height: 6px;
}

.hero-static-box .dmi-cta-box__text p {
    font-size: 16px;
    line-height: 23px;
    margin: 12px 0 0 0;
    padding-left: 36px;
}

.hero-static-box .dmi-cta-box__phone {
    font-size: 28px;
    line-height: 30px;
    margin-top: 12px;
}

.hero-static-box .dmi-cta-box__phone img {
    padding: 7px 13px 6px 9px;
    margin: 0 12px 0 1px;
}

/* Kind-Kombinator (> a) ist hier zwingend, kein Versehen: .dmi-cta-box__text enthaelt ZWEI Arten von Links -
   den CTA-Button als direktes Kind, und den Inline-Link "Ihren Anruf!" innerhalb eines <p>. Die
   Basis-Regel .dmi-cta-box__text a stylt beide als Button, die Ausnahme .dmi-cta-box__text p a (0,1,2) macht das
   fuer den Inline-Link wieder rueckgaengig. Ein flaches ".hero-static-box .dmi-cta-box__text a" (0,2,1)
   haette diese Ausnahme ueberstimmt und dem Fliesstext-Link Button-Padding verpasst - beim ersten
   Versuch genau so passiert und im Screenshot als Luecke in "Wir freuen uns auf | Ihren Anruf!"
   sichtbar geworden. */
.hero-static-box .dmi-cta-box__text > a {
    font-size: 15px;
    padding: 11px 28px;
    margin: 14px 0 0 36px;
}

/* Claude 2026-07-17: bewusst KEIN owl.carousel fuer .hero-carousel - eine echte Ueberblendung
   (Rose-Wunsch) mit owl.carousels translateX-basierter Slide-Mechanik zu erzwingen waere nur mit
   fragilen Zusatz-Overrides moeglich. Reines Vanilla-JS-Crossfade stattdessen (custom.js), analog
   zu dmis eigenem main-Modul-Hero (dmi-main.js, ebenfalls kein owl.carousel). Alle Slides liegen
   uebereinander (position:absolute) und werden per Opacity ein-/ausgeblendet - kein Drag/Touch-
   Handler vorhanden, fuer den Nutzer also nicht manuell bewegbar. */
.hero-carousel {
    position: relative;
    height: 614px;
    overflow: hidden;
}

.hero-carousel__item {
    position: absolute;
    inset: 0;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 1200ms ease;
}

.hero-carousel__item.is-active {
    opacity: 1;
    z-index: 1;
}

.hero-carousel__item .dmi-kfw-badge {
    position: absolute;
    /* Claude 2026-07-22 (Rose): KfW-Stempel etwas weiter vom Rand einruecken (war 24/24, wirkte in die
       obere rechte Ecke gequetscht) - einheitlich mit .dmi-kfw-slide der Objektdetailseite. */
    top: 42px;
    right: 44px;
}

/* Claude 2026-07-17 (Rose-Wunsch): "Auch schon frueher auf display:none gehen, wenn ansonsten fast
   das gesamte Bild verdeckt wird." Schwelle von 600px auf 835px angehoben (bewusst ein bereits im
   Stylesheet vorhandener Breakpoint, kein neuer). Empirisch per Breiten-Sweep + Screenshots
   ermittelt, nicht geschaetzt - Anteil der Box an der Fotobreite:
     900px Viewport -> 47% (Foto klar lesbar, Box bleibt)
     835px Viewport -> 50% (Grenzfall)
     768px Viewport -> 55% - zusammen mit den sticky Icons rechts (~9%) bleibt nur noch ein schmaler
                       Streifen Foto in der Mitte uebrig; genau der von Rose gemeinte Zustand.
   Ab hier ist der Inhalt der Box nicht verloren: Telefonnummer und Kontakt sind ueber die sticky
   Icons und den Seiteninhalt weiterhin erreichbar. */
@media (max-width: 835px) {
    .hero-static-box {
        display: none;
    }
}

@media (max-width: 600px) {
    .hero-carousel,
    .hero-carousel__item {
        height: 520px;
    }
}

.dmi-cta-box__text :is(h1, h2) {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 48px;
    line-height: 57px;
    color: #434343;
    margin: 0;
    padding: 0 0 0 50px;
    position: relative;
    /* Claude 2026-07-22 (Rose): allgemeingueltiger Umbruch-Workaround fuer lange Objekt-/Ortsnamen
       in der weissen Hero-Box. text-wrap:balance verteilt die Zeilen ausgewogen (haelt so mehrteilige
       Ortsnamen wie "Bad Reichenhall" von selbst zusammen, statt sie mitten im Namen zu trennen) UND
       vermeidet Overflow selbst bei sehr langen Staedten (z.B. "Rheingau-Taunus (Landkr.)"), wo das
       fruehere harte white-space:nowrap aus der Box lief. overflow-wrap:break-word ist das Sicherheits-
       netz gegen ueberlange Einzelwoerter. Aeltere Browser ohne balance-Support fallen sauber auf
       normalen Umbruch zurueck (dann evtl. wieder ein Ort-Umbruch, aber nie Overflow). */
    overflow-wrap: break-word;
    text-wrap: balance;
}

.dmi-cta-box__text :is(h1, h2):before {
    content: "";
    width: 23px;
    height: 8px;
    background: #165b97;
    display: block;
    position: absolute;
    top: 26px;
    left: 1px;
}

.dmi-cta-box__text :is(h1, h2) span {
    color: #165b97;
    /* Claude 2026-07-22 (Rose): frueheres white-space:nowrap entfernt - hielt zwar "Bad Reichenhall"
       zusammen, lief aber bei sehr langen Staedten aus der Box. Das Zusammenhalten uebernimmt jetzt
       text-wrap:balance auf dem h1/h2 (s.o.), ohne Overflow-Risiko. */
}

/* Claude 2026-07-22 (Rose): VERKAUFT-Kennzeichnung im Objekt-Hero (verkaufte Referenzobjekte).
   margin-left 50px = buendig mit dem h1-Text (der hat padding-left:50px fuer den blauen Balken). */
.dmi-cta-box__text .dmi-sold-badge {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    font-family: "Niveau Grotesk", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 20px;
    border-radius: 3px;
    margin: 0 0 14px 50px;
    font-size: 18px;
    line-height: 1;
}

.dmi-cta-box__text p {
    font-family: "Niveau Grotesk";
    font-size: 20px;
    line-height: 30px;
    color: #6c6e71;
    margin: 25px 0 0 0;
    padding: 0 0 0 50px;
}

.dmi-cta-box__text p a {
    font-weight: bold;
    color: #165b97;
}

.dmi-cta-box__text p a {
    font-weight: bold;
    color: #165b97;
    padding: 0;
    margin: 0;
    background: transparent !important;
    text-decoration: none;
    text-transform: capitalize;
}

.dmi-cta-box__phone {
    font-weight: bold;
    text-decoration: none;
    font-size: 44px;
    color: #165b97;
    line-height: 40px;
    align-items: center;
    display: inline-block;
    margin: 27px 0 0 0;
}

.dmi-cta-box__phone img {
    background: #165b97;
    padding: 12px 20px 10px 14px;
    border-radius: 0 100px 100px 0;
    margin: 0 20px 0 1px;
}


.dmi-cta-box__text a {
    font-family: "Niveau Grotesk";
    font-weight: bold;
    font-size: 17px;
    margin: 28px 0 0 50px;
    background: #127aa8;
    padding: 18px 50px;
    text-decoration: none;
    text-transform: uppercase;
    color: #fefefe;
    border-radius: 5px;
    display: inline-block;
}

.dmi-cta-box__text a:hover {
    background: #165b97;
}


.sidebar.weitere a:hover {
    background: #5d5b5b;
}

.sidebar.pflege a:hover {
    background: #446619;
}

.dmi-cta-box__text img.dmi-kfw-badge {
    position: relative;
    left: -44px;
    top: -5px;
}

.dmi-hero-facts {
    background: url(../img/bgtext.png) no-repeat;
    /* Claude 2026-07-17 (Bugfix, Rose-Meldung "dunkler Balken nicht mehr buendig mit dem Bild,
       Schrift zu weit oben"): bgtext.png ist 1806x115px GROSS UND FEST - ohne background-size deckte
       es nur die obersten 115px dieser Box ab. Sobald der Inhalt hoeher wurde (siehe unten:
       padding-left liess die Kennzahlen auf 2 Zeilen umbrechen -> Box 135px statt 116px), blieben
       die untersten 20px der Box OHNE dunklen Hintergrund: der Balken endete sichtbar vor der
       Fotounterkante und die umgebrochene zweite Textzeile ("70%", "11,00 €") hing darunter auf dem
       nackten Foto. background-size:100% 100% koppelt den Balken jetzt fest an die Boxhoehe - egal
       wie hoch der Inhalt wird, der Balken deckt ihn immer vollstaendig und bleibt buendig. Dasselbe
       Muster nutzen die urspruenglichen Autoren bereits fuer .dmi-cta-box bei max-width:600px.
       bgtext.png ist ein flacher rgba(34,37,40,0.8)-Balken mit weichem Verlauf nur an der Oberkante
       (per Pixel-Sampling geprueft) - vertikales Strecken ist dadurch unkritisch. */
    background-size: 100% 100%;
    padding: 20px 0 25px 0;
    /* Claude 2026-07-17: margin war -105px (negativer Zug nach oben, ueberlappte .dmi-cta-box -
       dessen fixe Hoehe von 614px reichte bei 1440px-Viewport bis in .dmi-hero-facts hinein, "PARK
       SUITES..."-Text wurde teilweise verdeckt). Kleinere Breakpoints setzen .dmi-hero-facts margin
       bereits korrekt auf 0 (siehe media queries unten) - hier an dasselbe, ueberlappungsfreie
       Muster angeglichen. */
    margin: 0;
}

.dmi-hero-facts h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 28px;
    line-height: 32px;
    color: #fff;
    margin: 0;
    /* Claude 2026-07-17 (Rose-Wunsch "CTA-Box kompakter"): padding-left ist wieder 0 (war zuvor 477px,
       dann 560px). Beide Werte waren nur Ausweich-Abstaende vor der damals 614px hohen .dmi-cta-box, die
       exakt die volle Fotohoehe einnahm und dadurch bis in diesen Balken hineinreichte. Seit die Box
       kompakt ist (siehe .hero-static-box .dmi-cta-box oben) endet sie deutlich OBERHALB des Balkens -
       ein Ausweichen ist nicht mehr noetig. Das ist auch der eigentliche Grund, warum der Balken
       wieder buendig sitzt: das 560px-Padding hatte die Kennzahlen-Zeile darunter zum Umbrechen
       gezwungen (verfuegbare Breite 720px < 854px Bedarf der breitesten Zeile). */
    padding: 0;
}

.dmi-hero-facts ul {
    margin: 20px 0 0 0;
    /* Claude 2026-07-17: padding-left aus demselben Grund wie beim h2 wieder auf 0 (siehe dort).
       justify-content bleibt flex-start (nicht das urspruengliche flex-end) - damit beginnen
       Objektname und Kennzahlen garantiert an derselben x-Position, also buendig. */
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
}

.dmi-hero-facts ul li {
    font-weight: 500;
    font-size: 24px;
    padding: 0 20px 0;
    color: #fff;
    border-left: 2px solid #fff;
    line-height: 19px;
}

.dmi-hero-facts ul li:first-child {
    border: none;
    padding: 0 20px 0 0;
}

.dmi-hero-facts ul li:last-child {
    padding: 0 0 0 20px;
}

.dmi-hero-facts ul li span {
    padding: 0 0 0 20px;
}


.dmi-sticky-actions ul {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Claude 2026-07-28 (Rose "chevrons nicht exakt mittig"): ul fuellt die feste Container-Hoehe
       (210px Desktop / 150px Mobile), die 3 li teilen sie per flex:1 gleichmaessig -> gleich hohe
       Boxen. Zuvor ergab sich die Boxhoehe aus padding + Bildhoehe, und die drei Icons haben
       verschiedene Hoehen (29/19/11px) -> unterschiedlich hohe Boxen, Icon nicht konsistent zentriert. */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dmi-sticky-actions ul li {
    flex: 1;
    display: flex;
}

.dmi-sticky-actions ul li a {
    background: #165b97;
    border: 3px solid #fff;
    padding: 0 20px; /* horizontal fuer die Boxbreite; vertikal via Flex zentriert */
    /* Icon exakt in der Box zentrieren (beide Achsen), unabhaengig von der Bildgroesse: */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.dmi-sticky-actions ul li:nth-child(2) a {
    border-top: 0;
    border-bottom: 0;
}

.dmi-sticky-actions ul li a:hover {
    background: #127aa8;
}

.breadcrumb-item+.breadcrumb-item::before {
    /* Claude 2026-07-20: war das rohe Multibyte-Zeichen "›" (UTF-8 E2 80 BA). style.css hat keine
       @charset-Deklaration - wird die CSS vom Browser als Latin-1 interpretiert, erscheint daraus der
       Mojibake "›" (Rose-Meldung "Zeichensalat" im Breadcrumb). CSS-Unicode-Escape ist
       encoding-unabhaengig und rendert immer korrekt U+203A. */
    content: "\203A";
    padding-right: 10px;
}

.breadcrumb a {
    color: #165b97;
    font-size: 20px;
    text-decoration: none;
}

.breadcrumb-item.active {
    color: #6c6e71;
    font-size: 20px;
    padding-left: 10px;
}

ol.breadcrumb {
    margin: 60px 0 45px;
}

.dmi-sidebar-head {
    margin: 45px 0 60px 20px;
}

/* Claude 2026-07-17 (Visual-QA Paket 3): Der margin-bottom von 60px ist fuer Sidebar-Boxen gedacht,
   unter deren Ueberschrift noch Fliesstext folgt (Service-Widget, Bundeslaender-Filter auf
   /immobilien - dort beabsichtigt und geprueft). Bei den reinen Link-Listen dagegen ("Erfahren Sie
   mehr" / "mehr Informationen", ul.more DIREKT nach der Ueberschrift) klaffte dadurch eine 60px
   grosse Leerstelle zwischen Ueberschrift und erstem Link - auf /kunden, /service, /ueber-uns und
   den Info-Seiten. Nur dieser Fall wird per :has() verkleinert; alle anderen .dmi-sidebar-head bleiben
   unveraendert. */
.dmi-sidebar-head:has(+ ul.more) {
    margin-bottom: 22px;
}

.dmi-sidebar-head h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 24px;
    line-height: 36px;
    color: #2e2e2e;
    margin: 0;
    padding: 0;
    display: flex;
}

.dmi-sidebar-head h2 img {
    margin: 0 0 0 15px;
}

/* Claude 2026-07-20: Der Akzentbalken hatte eine FESTE Hoehe (64px, + je Breakpoint 58/38/24/46px).
   Bei einzeiligen Ueberschriften (z.B. /service "Erfahren Sie mehr", 32px) ragte er weit ueber die
   Headline hinaus (Rose-Meldung "zu lang fuer Headline"). Jetzt adaptiv: align-self:stretch laesst den
   Balken exakt so hoch wie den Ueberschriftentext werden (1 Zeile -> kurz, 2 Zeilen -> lang). Die festen
   Hoehen in den Media-Queries sind dazu auf auto gesetzt. */
.dmi-sidebar-head h2:before {
    content: "";
    width: 8px;
    align-self: stretch;
    flex: 0 0 auto;
    display: block;
    background: #165b97;
    margin: 0 10px 0 0;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar ul li a {
    text-decoration: none;
    font-size: 22px;
    color: #4d4d4d;
    line-height: normal;
    display: flex;
    border-top: 1px solid #d5dae2;
    padding: 20px 17px;
    margin: 0 16px;
    position: relative;
    background: transparent !important;
}

.sidebar ul li:first-child a {
    border: none;
}

.sidebar {
    border: 2px solid #e3e3e3;
    background: #f6f6f6;
    border-left: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    margin: 0 0 43px;
}

/* Claude 2026-07-17: generische Content-Box + Formularfeld-Styles fuer Seiten ohne Hero-Banner
   (z.B. /kontakt) - .dmi-inquiry-form ist bewusst NICHT wiederverwendbar (fest auf den dunkelblauen
   Hero-Ueberlapp-Effekt der Objektdetailseite zugeschnitten, inkl. margin:-477px). .kontakt_input/
   ol.fields/li.lr (aus den geteilten Kontaktformular-Partials) hatten bisher ueberhaupt keine
   CSS-Regeln - Formulare ausserhalb von .dmi-inquiry-form rendierten als nackte Browser-Standard-Felder. */
/* Claude 2026-07-20: Titelband mit Bild fuer Text-Seiten (Infolexikon), analog dmi_de (Rose-Wunsch).
   Eigener Klassenname .dmi-subheader, weil .dmi-hero in dmi bereits fuer den Objekt-/estatelist-Hero
   belegt ist. Vollbreites Band ueber der Content-Zeile: Hintergrundfoto + dunkler Verlauf + Breadcrumb,
   H1 (Playfair, dmi-Aesthetik) und neutraler Unterzeile. */
.dmi-subheader {
    position: relative;
    overflow: hidden;
    background: #165b97 center / cover no-repeat;
    color: #fff;
    margin: 0 0 40px;
}
.dmi-subheader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 40, 68, 0.82) 0%, rgba(12, 40, 68, 0.55) 55%, rgba(12, 40, 68, 0.32) 100%);
}
.dmi-subheader .container {
    position: relative;
    padding-top: 46px;
    padding-bottom: 42px;
}
.dmi-subheader .dmi-crumb {
    color: #d7e3ee;
    font-family: "Niveau Grotesk";
    font-size: 13px;
    margin: 0 0 12px;
}
.dmi-subheader .dmi-crumb a { color: #d7e3ee; text-decoration: none; }
.dmi-subheader .dmi-crumb a:hover { color: #fff; }
.dmi-subheader h1 {
    font-family: "Playfair Display";
    font-weight: bold;
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    margin: 0;
    padding: 0;
}
.dmi-subheader .dmi-subheader-sub {
    color: #eaf2f9;
    font-family: "Niveau Grotesk";
    font-size: 18px;
    line-height: 1.4;
    margin: 12px 0 0;
    max-width: 760px;
}

.dmi-plain-box {
    background: #fff;
    border: 2px solid #e3e3e3;
    border-radius: 5px;
    padding: 33px 40px 30px;
    margin: 0 0 43px;
}

/* Claude 2026-07-17 (Visual-QA Paket 3): h2 mit aufgenommen. Grund: /ueber-uns hatte DREI h1
   ("Wir über uns", "Ihre Ansprechpartner:", "Was unsere Kunden über uns sagen") - genau eine h1 pro
   Seite ist die Vorgabe, nachgeordnete Abschnitte gehoeren auf h2. Die beiden nachgeordneten
   Ueberschriften wurden deshalb zu h2.
   Diese Regel galt aber nur fuer h1: gemessen war h2 in derselben Box Niveau Grotesk 500 ohne
   padding-left - die Ueberschriften haetten also Schriftart, -schnitt UND den blauen Akzentbalken
   verloren. Die semantische Korrektur soll die Optik nicht veraendern, deshalb gilt beides jetzt
   gleichermassen fuer h1 und h2 innerhalb von .dmi-plain-box. */
.dmi-plain-box h1,
.dmi-plain-box h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 32px;
    margin: 0 0 20px;
    padding: 0 0 0 20px;
    position: relative;
}

.dmi-plain-box h1:before,
.dmi-plain-box h2:before {
    content: "";
    width: 8px;
    height: 32px;
    background: #165b97;
    display: block;
    position: absolute;
    left: 0;
    top: 4px;
}

ol.fields,
.fields {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fields li.lr,
.fields li.er {
    margin: 0 0 18px;
}

.fields li label {
    display: block;
    font-weight: bold;
    color: #4d4d4d;
    margin: 0 0 6px;
    font-family: "Niveau Grotesk";
}

.fields li .kontakt_input,
.fields li select,
.fields li textarea.kontakt_input {
    width: 100%;
    border: 1px solid #cecece;
    border-radius: 5px;
    padding: 10px 13px;
    font-family: "Niveau Grotesk";
    font-size: 16px;
    color: #4d4d4d;
    height: 46px;
    background: #fff;
}

.fields li textarea.kontakt_input {
    height: 140px;
}

/* Claude 2026-07-23 (Audit): Validierungsfehler sichtbar machen - .validation-failed hatte bisher KEIN
   CSS, fehlerhafte Pflichtfelder waren optisch nicht erkennbar (die Meldung "Dieses Feld ist ein
   Pflichtfeld." stand nur im title-Tooltip des Labels). Jetzt rotes Label + roter Feldrahmen. */
.fields li.validation-failed label {
    color: #c0392b;
}
.fields li.validation-failed .kontakt_input,
.fields li.validation-failed select,
.fields li.validation-failed textarea.kontakt_input {
    border-color: #c0392b;
    background-color: #fdf4f3;
    /* Claude 2026-07-25 (Rose): zusaetzlicher roter Glow, damit der 1px-Rahmen auch auf dem
       dunkelblauen Objektformular unmissverstaendlich sichtbar ist (kein Layout-Shift). */
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.35);
}

.fields li.hint label {
    display: inline;
    font-weight: normal;
}

/* Claude 2026-07-17 (Bugfix: Kontaktformular auf Objektseiten schwer lesbar): .dmi-inquiry-form
   (Objektdetailseite) nutzt dieselben geteilten Kontaktformular-Partials (ol.fields) wie /kontakt -
   die obige .fields li label-Farbe #4d4d4d ist fuer den weissen .dmi-plain-box-Hintergrund gedacht
   und war auf .dmi-inquiry-form's dunkelblauem Hintergrund (#002f6f) praktisch unlesbar (Kontrast ~1.5:1).
   Analog zur bereits bestehenden .dmi-inquiry-form form .form-check label-Regel (weiss), hier fuer alle
   Feldlabels inkl. der Datenschutz-Checkbox (li.hint label, andere Markup-Struktur als .form-check). */
.dmi-inquiry-form .fields li label {
    color: #fff;
}
/* Claude 2026-07-25 (Bugfix): auf der dunklen .dmi-inquiry-form ueberschrieb die obige weisse
   Label-Farbe die rote Fehler-Label-Farbe (.fields li.validation-failed label, gleiche Spezifitaet,
   aber frueher im File) -> fehlerhafte Pflichtfelder wirkten "unmarkiert". Hoehere Spezifitaet +
   helleres Rot fuer den dunkelblauen Hintergrund. */
.dmi-inquiry-form .fields li.validation-failed label {
    color: #ff8a80;
}

.fields li.er .arrow a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #127aa8;
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    padding: 14px 30px;
    text-transform: uppercase;
}

.fields li.er .arrow a.button:hover {
    background: #165b97;
}

/* Claude 2026-07-17: .staff (Ansprechpartner-Kacheln, /ueber-uns) und .kundenmeinung
   (Testimonial-Liste, /ueber-uns + /kunden) hatten keine CSS-Regeln. */
.staff {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 0 0 25px;
    padding: 0 0 25px;
    border-bottom: 1px solid #e3e3e3;
}

.staff img {
    border-radius: 5px;
    flex: 0 0 auto;
}


#kundenmeinungen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kundenmeinung {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 0 0 25px;
    padding: 0 0 25px;
    border-bottom: 1px solid #e3e3e3;
}

.kundenmeinung:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.kundenmeinung img {
    border-radius: 5px;
    flex: 0 0 auto;
}

.kundenmeinung .author {
    color: #6c6e71;
    font-size: 15px;
    margin-top: 8px;
}

.sidebar ul li a:hover {
    color: #127aa8;
}

.sidebar ul li a:before {
    content: "";
    width: 8px;
    height: 66px;
    background: transparent;
    position: absolute;
    top: 0;
    left: -16px;
    transition: background 0.5s;
}

.sidebar ul li a:hover:before {
    content: "";
    width: 8px;
    height: 66px;
    background: #127aa8;
    position: absolute;
    top: 0;
    left: -16px;
    transition: background 0.5s;
}

.sidebar ul li a:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 11px solid transparent;
    position: absolute;
    left: -8px;
    top: 22px;
    transition: border-left 0.5s;
}

.sidebar ul li a:hover:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 11px solid #127aa8;
    position: absolute;
    left: -8px;
    top: 22px;
    transition: border-left 0.5s;
}

a,
button {
    transition: all 0.3s ease;
}

.sidebar ul li a.active {
    color: #127aa8;
}

.sidebar ul li a.active:before {
    content: "";
    width: 8px;
    height: 66px;
    background: #127aa8;
    position: absolute;
    top: 0;
    left: -16px;
}

.sidebar ul li a.active:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 11px solid #127aa8;
    position: absolute;
    left: -8px;
    top: 22px;
}

/* Claude 2026-07-21: Hover-/Active-Indikator im Sidebar-Menue (Info-Lexikon "Erfahren Sie mehr")
   war fest bemasst - der Balken (:before) 66px hoch, der Pfeil (:after) bei top:22px. Bei
   zweizeiligen Menuepunkten (lange Lexikon-Titel) deckte der Balken nur die obere Zeile ab
   ("zu kurz") und der Pfeil zeigte auf die erste Zeile statt in die Mitte ("nicht mittig",
   Rose-Meldung). Jetzt adaptiv: Balken ueber die volle Link-Hoehe, Pfeil vertikal zentriert. */
.sidebar ul li a:before,
.sidebar ul li a:hover:before,
.sidebar ul li a.active:before {
    height: auto;
    top: 0;
    bottom: 0;
}
.sidebar ul li a:after,
.sidebar ul li a:hover:after,
.sidebar ul li a.active:after {
    top: 50%;
    transform: translateY(-50%);
}

.dmi-city {
    margin: -15px 0 0;
    padding: 0 27px;
}

.dmi-city p {
    font-weight: 300;
    font-size: 19px;
    line-height: normal;
    margin: 0 0 16px;
}

.dmi-city select {
    background-image: url(../img/arrowb.png) !important;
    color: #165b97;
    font-size: 18px;
    border: 1px solid #e3e3e3 !important;
    height: 50px;
    margin: 0 0 40px;
    padding: 0 15px 0 15px;
    background-position: right 15px center !important;
}

.sidebar.pflege ul li {
    text-decoration: none;
    font-size: 20px;
    color: #4d4d4d;
    line-height: normal;
    display: flex;
    border-top: 1px solid #d5dae2;
    padding: 20px 3px;
    margin: 0 16px;
    position: relative;
    align-items: center;
}

.sidebar.pflege ul li:first-child {
    border: none;
}

.sidebar.pflege ul li img {
    margin: 0 10px 0 0;
}

/* Claude 2026-07-22 (Rose): gruener Aufzaehlungspfeil (statt der blauen Haken), analog zu den
   gruenen Chevrons auf pflege-kapitalanlage.de. FA-caret-right (dmi hat FontAwesome), Pflege-Gruen. */
.sidebar.pflege ul li:before {
    /* Claude 2026-07-22 (Rose): Chevron (wie Glyphicon-chevron-right \e080 auf pflege-kapitalanlage.de),
       NICHT das gefuellte Caret. dmi hat kein Glyphicons-Halflings -> FA-chevron-right \f054 (gleiche Form). */
    font-family: 'FontAwesome';
    content: "\f054";
    color: #4f761d;
    margin-right: 12px;
    font-size: 14px;
    line-height: 1;
}

/* Claude 2026-07-22 (Rose): Pflege-Box auf Pflege-CI. Box weiss (das Logo-PNG hat weissen Hintergrund
   und stand vorher als weisses Rechteck auf der grauen .sidebar-Flaeche = unschoen) + gruener Akzent
   oben als Marken-Signal. Button pflege-gruen statt DMI-blau (weisser Text auf #4f761d = 5,33:1). */
.sidebar.pflege {
    background: #fff;
    border-top: 3px solid #4f761d;
}

.sidebar.pflege a {
    font-family: "Niveau Grotesk";
    font-weight: bold;
    font-size: 17px;
    margin: 15px auto 36px;
    background: #4f761d;
    text-decoration: none;
    text-transform: uppercase;
    color: #fefefe;
    border-radius: 5px;
    width: 227px;
    height: 61px;
    padding: 0;
    align-items: center;
    display: flex;
    justify-content: center;
}

.sidebar.pflege img {
    margin: 40px auto 20px;
    display: block;
}

.sidebar.weitere {
    border-color: #a1bdd7;
    background: #165b97;
    border-left: none;
}

.sidebar.weitere .dmi-sidebar-head {
    margin: 30px 0 35px 20px;
}

.sidebar.weitere .dmi-sidebar-head h2 {
    color: #fff;
}

.sidebar.weitere .dmi-sidebar-head h2:before {
    height: auto; /* Claude 2026-07-20: adaptiver Balken, siehe Basisregel */
    background: #fff;
    margin: 0 10px 0 0;
}

.sidebar.weitere img {
    width: 100%;
    margin: 0 0 30px;
}

.sidebar.weitere h3 {
    color: #fff;
    padding: 0 0 0 28px;
    line-height: 28px;
    font-size: 22px;
    font-weight: 500;

    margin: 0;
}

.dmi-estatelist-content {
    padding: 0 0 0 28px;
}

.dmi-estatelist-content p {
    color: #fff;
    font-size: 19px;
    margin: 0;
    line-height: 28px;
    padding: 40px 0 0;
}

.sidebar.weitere a {
    font-family: "Niveau Grotesk";
    font-weight: bold;
    font-size: 17px;
    margin: 10px 0 40px 28px;
    background: #127aa8;
    text-decoration: none;
    text-transform: uppercase;
    color: #fefefe;
    border-radius: 5px;
    width: 227px;
    height: 61px;
    padding: 0;
    align-items: center;
    display: flex;
    justify-content: center;
}

.dmi-estate-list h1 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 38px;
    line-height: 40px;
    color: #2e2e2e;
    margin: 0;
    padding: 0;
    display: flex;
}

.dmi-estate-list h1:before {
    content: "";
    width: 8px;
    display: block;
    height: 50px;
    background: #165b97;
    margin: 0 13px 0 0;
}

.dmi-estate-list .dmi-estate-filter {
    background: #e7eef4;
    padding: 10px 20px;
    margin: 25px 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dmi-estate-list .dmi-estate-filter p {
    font-size: 22px;
    color: #165b97;
    font-weight: 500;
    margin: 0;
    line-height: normal;
}

.dmi-filter-select {
    display: flex;
    align-items: center;
}

.dmi-filter-select label {
    font-size: 18px;
    color: #3d4042;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 15px 0 0;
}

.dmi-filter-select select {
    background-image: url(../img/icon7.png) !important;
    color: #45484b;
    font-size: 16px;
    border: 1px solid #e3e3e3 !important;
    height: 37px;
    margin: 0 0 0;
    padding: 0 15px 0 15px;
    background-position: right 15px center !important;
    width: 186px;
}

.form-select:focus {
    box-shadow: none;
}

.dmi-estate-card {
    border: solid 2px #cecece;
    border-radius: 5px;
    transition: 0.3s;
    margin: 0 0 45px;
    /* Claude 2026-07-17: position:relative fuer .stretched-link (Bootstrap-Utility) - macht die
       gesamte Karte klickbar ueber den "zur Objektseite"-Link, statt eines irrefuehrenden, wie
       reiner Text aussehenden Stadtname-Links (siehe .dmi-estate-card__title). */
    position: relative;
}

.dmi-estate-card:hover {
    border: solid 2px #165b97;
    box-shadow: 10px 10px 25px #cfdeea;
}

.dmi-estate-card__img img {
    width: 100%;
}

.dmi-estate-card__img {
    position: relative;
    margin: 10px;
}

.dmi-estate-card__img h4 {
    background-image: url(../img/icon9.png);
    background-repeat: no-repeat;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding: 6px 0 0 18px;
    margin: 0;
    position: absolute;
    top: 10px;
    width: 84px;
    height: 34px;
}

/* Claude 2026-07-23 (Rose): Status-Badge auf dem Kartenbild (verschoben aus dem Titel). Oben rechts,
   damit es nicht mit dem KFW-Badge (oben links) kollidiert. Optik konsistent zur .dmi-sold-badge der
   Objektseite: rot, uppercase, letter-spacing. Ampelfarben fuer die anderen beiden Zustaende. */
.dmi-card-badge {
    position: absolute;
    top: 10px;
    right: 0;
    display: inline-block;
    color: #fff;
    font-family: "Niveau Grotesk", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 16px;
    font-size: 15px;
    line-height: 1;
    border-radius: 3px 0 0 3px;
    z-index: 2;
}
.dmi-card-badge--sold {
    background: #c0392b;
}
.dmi-card-badge--progress {
    background: #165b97;
}
.dmi-card-badge--exclusive {
    background: #127aa8;
}

.dmi-estate-card__title {
    padding: 0 0 0 32px;
}

.dmi-estate-card__title a {
    font-size: 18px;
    font-weight: 300;
    color: #0c4b82;
    text-decoration: none;
    border-bottom: 1px solid;
    margin: 10px 0 18px;
    display: inline-block;
    line-height: 20px;
}

.dmi-estate-card__title h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 28px;
    /* Claude 2026-07-28 (Rose): line-height:20px war kleiner als die Schriftgroesse (28/24px an groesseren
       Breakpoints) -> bei umbrechenden Objektnamen ("Seniorenwohnanlage Schwanenhof") ueberlappten die
       zwei Zeilen. line-height relativ (1.25) -> skaliert an allen Breakpoints, keine Ueberlappung.
       min-height reserviert 2 Zeilen -> ein- und zweizeilige Titel ergeben gleich hohe Karten, damit die
       laengere Karte nicht mehr aus dem Raster faellt. */
    line-height: 1.25;
    min-height: 2.5em;
    color: #2e2e2e;
    margin: 0 0 30px;
    padding: 0;
}

.dmi-estate-card__content {
    background: #f7f7f7;
}

.dmi-estate-card__content ul {
    margin: 0;
    padding: 0 0 14px;
    list-style: none;
}

.dmi-estate-card__content li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #cecece;
    padding: 10px 30px 13px 10px;
    margin: 0 16px 0 23px;
    color: #4d4d4d;
    font-weight: 500;
}

.dmi-estate-card__content li:first-child {
    border-top: none;
}

.dmi-estate-card__btn a {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 15px 15px 25px 0;
    color: #165b97;
    text-decoration: none;
    font-weight: 500;
}

.dmi-estate-card__btn a img {
    margin: 0 0 0 15px;
}

/* Claude 2026-07-24 (Rose): Pflege-Variante der Objektkarte. Lehnt sich optisch an
   Pflege-Kapitalanlage an (Gruen #4f761d + Marken-Logo + "Externes Angebot"-Tag), damit klar
   erkennbar ist, dass diese Karten auf die externe Seite pflege-kapitalanlage.de fuehren -
   analog zum frontend-Pflege-Listing (dortiges pflege-kapitalanlage-Icon). */
.dmi-estate-card--pflege {
    border-color: #cdddb5;
}

.dmi-estate-card--pflege:hover {
    border: solid 2px #4f761d;
    box-shadow: 10px 10px 25px #dde8cf;
}

.dmi-estate-card__pflege-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: #f0f5e8;
    border-bottom: 2px solid #4f761d;
    border-radius: 3px 3px 0 0;
    padding: 8px 14px;
}

.dmi-estate-card__pflege-logo {
    display: block;
    height: 26px;
    width: auto;
    max-width: 100%;
}

.dmi-estate-card__pflege-tag {
    background: #4f761d;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 3px;
    white-space: nowrap;
}

.dmi-estate-card--pflege .dmi-estate-card__title a {
    color: #4f761d;
}

.dmi-estate-card--pflege .dmi-estate-card__btn a {
    color: #4f761d;
}

.main_content {
    padding: 0 0 100px;
}

ul.pagination {
    margin: 25px 0 0;
    justify-content: center;
}

.pagination li a.page-link,
.pagination li span.page-link {
    /* Claude 2026-07-17: span.page-link ergaenzt - die aktuelle Seite wird als <span> statt <a>
       gerendert (_pager_partial.php), bekam bisher keine dieser Regeln und erschien dadurch viel
       kleiner als die anklickbaren Seitenzahlen. */
    border-radius: 5px;
    padding: 17px 20px;
    border-color: #9e9e9e;
    margin: 0 15px 0 0;
    font-size: 19px;
    font-weight: bold;
    color: #9e9e9e;
    line-height: 12px;
    height: 50px;
    display: flex;
    align-items: center;
    width: 50px;
    justify-content: center;
    background: transparent !important;
}

.pagination li a.page-link:hover {
    color: #3f3f3f !important;
    background-color: transparent;
}

.pagination li.active .page-link {
    /* Claude 2026-07-17: Selector war .pagination li a.active - traf nie etwas, da die aktive
       Seite als <li class="page-item active"><span class="page-link"> gerendert wird (active-Klasse
       sitzt am li, nicht am Link/Span). */
    color: #fff;
    background: #1a3a6b !important;
}

.dmi-mobile-filter-bar {
    display: none;
}


li.nav-item.active {
    background: #127aa8;
}


/*-------------------------Property Details----------------------------------
-------------------------------------------------------------*/
.dmi-property-details .dmi-hero {
    background: url(../img/bannerbg2.png) no-repeat;
    background-size: 100% 100%;
}

.dmi-property-details .dmi-cta-box__text :is(h1, h2) {
    font-size: 50px;
    line-height: 42px;
}

.dmi-property-details .dmi-cta-box__text :is(h1, h2):before {
    top: 17px;
}

.dmi-property-details .dmi-estate-card__content {
    background: #f4f6f8;
    margin: 0 3px;
}

/* Claude 2026-07-17 (Rose-Meldung: "Das Agentenbild bei 'Ihr Ansprechpartner' ragt über den Rahmen
   der weißen Box hinaus"). Ursache exakt vermessen:

   probg.png ist 607x752, und das SOLIDE WEISS endet darin bereits bei y=716 - die untersten 36px
   sind reiner Schlagschatten (per Pixel-Sampling bestimmt). Diese Regel setzte die Box aber auf
   height:812px OHNE background-size: die Grafik lag damit in natürlicher Größe oben an, die weiße
   Fläche endete bei 716 und der Rest der 812px war schlicht transparent. Das Agentenbild endet bei
   relativ 730 - also 14px UNTERHALB der weißen Fläche, sichtbar als Beine/Stuhl, die unten aus der
   Box heraus aufs Hintergrundfoto ragen.

   Fix nach demselben Muster wie beim estatelist-Hero (R1298) und wie es die ursprünglichen Autoren
   in dieser Datei bereits bei max-width:1000px und max-width:560px selbst nutzen: height:auto +
   background-size:100% 100% koppelt die weiße Fläche fest an die tatsächliche Boxhöhe, unabhängig
   von der festen Größe der Hintergrundgrafik.

   padding-bottom:72px statt 0: davon deckt der mitskalierte Schlagschatten ~4,8% der Boxhöhe (bei
   ~842px also ~40px) ab, es bleiben ~32px echter Weißraum unter dem Foto - entspricht dem Abstand
   im Design-Mockup (doc/neue Website/.../Property Details Page).

   Nur >1000px war betroffen: darunter greift bereits background-size (siehe max-width:1000px), und
   ab max-width:767px liegt das sichtbare Agentenbild ohnehin in .dmi-inquiry-col--mobile AUSSERHALB dieser
   Box (per closest('.dmi-cta-box') verifiziert) - dort gibt es den Effekt gar nicht. */
.dmi-property-details .dmi-cta-box {
    background: url(../img/probg.png) no-repeat;
    background-size: 100% 100%;
    width: 607px;
    height: auto;
    padding: 57px 20px 72px;
    z-index: 999;
    position: relative;
}

.dmi-property-details .dmi-cta-box__text ul {
    padding: 0;
    margin: 30px 0 12px 50px;
    list-style: none;
}

.dmi-property-details .dmi-cta-box__text ul li {
    display: flex;
    /* Claude 2026-07-28 (Rose, "Pfeile nicht exakt mittig"): line-height:10px liess umbrechende
       Highlights ueberlappen -> line-height:1.35 (kein Ueberlappen). align-items:center zentriert
       den Pfeil exakt zur Textzeile (einzeilige Items = Regelfall); beim seltenen zweizeiligen Item
       sitzt er mittig zum Block. */
    align-items: center;
    line-height: 1.35;
    padding: 0 0 15px;
    font-weight: 500;
    color: #4f5256;
}

.dmi-property-details .dmi-cta-box__text ul li img {
    padding: 0 10px 0 0;
    margin: 0 0 0;
}

.dmi-property-details .dmi-estate-card__content ul {
    margin: 0;
    padding: 0 0 0px;
    list-style: none;
}

.dmi-property-details .dmi-estate-card__content li {
    padding: 12px 20px 10px 35px;
    margin: 0 10px 0 10px;
    line-height: 18px;
}

.dmi-property-details .dmi-estate-card__content li:first-child {
    padding: 20px 20px 10px 35px;
}

.dmi-property-details .dmi-estate-card__content li span {
    text-align: left;
    width: 195px;
}

.dmi-inquiry-col {
    padding: 37px 35px 40px 40px;
    display: flex;
    /* Claude 2026-08-11 (Rose: "Sollten Ueberschrift und Foto auf einer Hoehe sein?"):
       vorher align-items:end aus dem Mockup-Nachbau - das Foto hing dadurch tiefer als die
       Ueberschrift. Jetzt Oberkanten buendig. */
    align-items: flex-start;
}

.dmi-inquiry-content {
    padding: 0 0 0 22px;
}

.dmi-inquiry-content h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 28px;
    line-height: 32px;
    color: #2e2e2e;
    margin: 0 0 0 13px;
    padding: 0;
}

.dmi-inquiry-content p {
    font-size: 18px;
    color: #5d5b5b;
    margin: 18px 0 13px 13px;
}

.dmi-contact-badge {
    display: flex;
}

.dmi-contact-badge p {
    margin: 0;
    color: #4a4a4a;
    line-height: 18px;
    padding: 5px 0 15px;
}

.dmi-contact-badge a {
    font-size: 31px;
    font-weight: bold;
    margin: 0;
    color: #127aa8;
    line-height: 20px;
    text-decoration: none;
}

.dmi-contact-badge a:hover {
    color: #165b97;
}

nav.breadcrumbs {
    background: #f5f6f6;
}

nav.breadcrumbs ol.breadcrumb {
    margin: 0 0 30px;
}

nav.breadcrumbs li.breadcrumb-item {
    line-height: 17px;
    padding-top: 17px;
    padding-bottom: 17px;
}

nav.breadcrumbs .breadcrumb-item+.breadcrumb-item::before {
    color: #165b97;
}

.dmi-property-content h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 45px;
    line-height: 40px;
    color: #2e2e2e;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
}

.dmi-collapse-arrow h2 a.dmi-accordion-btn {
    display: none;
    align-items: center;
    position: absolute;
    right: 0;
}

.dmi-collapse-arrow h2 {
    position: relative;
    display: flex;
}

.dmi-property-content h2:before {
    content: "";
    width: 8px;
    display: block;
    height: 48px;
    background: #165b97;
    margin: 0 20px 0 0;
}

/* Claude 2026-07-22 (Rose): Zwischenzeile "<Objekt>: <Abschnitt>" war 30px Playfair Bold und
   konkurrierte mit der grossen Abschnitts-H2 darueber und der Inhalts-Ueberschrift darunter (unschoene
   3-fach-Kaskade). Jetzt klar untergeordneter, ruhiger Subtitle (kleiner, grau, sans, eingerueckt auf
   Hoehe des H2-Textes). Gilt fuer alle Abschnitte mit diesem Muster (Die Immobilie / Standort). */
.dmi-property-content p,
.dmi-location p {
    font-size: 17px;
    color: #8a8a8a;
    margin: 10px 0 0 30px;
    font-family: "Niveau Grotesk", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.dmi-property-content {
    border-bottom: solid 1px #b9cde0;
    padding: 27px 0 19px 0;
}

.row.dmi-highlights {
    padding: 27px 0 0 0 !important;
}

.row.dmi-highlights img {
    margin-right: 12px;
}

.row.dmi-highlights li {
    font-size: 20px;
    font-family: "Niveau Grotesk" !important;
}

.row.dmi-highlights li {
    padding: 10px 0;
    font-size: 20px;
    font-family: "Niveau Grotesk" !important;
    align-items: center;
    font-weight: 500;
    color: #5d5b5b;
    /* Claude 2026-07-17 (Bugfix: Spalten ueberlappen sich): war "white-space: nowrap" - bei den
       zwei .col-md-6-Spalten dieser Liste (siehe .row.dmi-highlights oben) reicht die Spaltenbreite
       fuer laengere Highlight-Texte (echte Objektdaten, z.B. "Langfristiger Pachtvertrag (20 Jahre
       + Verlaengerungsoptionen)") nicht aus - nowrap verhinderte den Zeilenumbruch und liess den
       Text ueber die Spaltengrenze hinaus in die Nachbarspalte hineinlaufen. Reproduziert und
       verifiziert bei mehreren Breiten (u.a. 900px UND 1440px, nicht nur schmale Bildschirme).
       Die bisherige @media(max-width:835px)-Ausnahme (white-space:inherit) deckte nur einen
       Teilbereich ab und wird durch diesen Fix ueberfluessig, siehe dort. */
    white-space: normal;
}

.dmi-property-center {
    margin: 16px 0 0;
}

/* Claude 2026-07-24 (Rose): Sammelmeldung bei Validierungsfehlern (von custom.js eingefuegt).
   Rot auf hell UND dunkel lesbar (Objektformular hat dunkelblauen Hintergrund). */
.form-error-summary {
    background: #c0392b;
    color: #fff;
    padding: 11px 15px;
    border-radius: 4px;
    margin: 0 0 16px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
}

.dmi-inquiry-form h2 {
    font-family: "Playfair Display";
    font-size: 40px;
    line-height: 40px;
    color: #fff;
    margin: 0;
    padding: 0;
    display: flex;
    font-weight: bold;
}

.dmi-property-section .col-md-7 {
    width: 61%;
    padding: 0 60px 0 15px;
}

.dmi-property-section .col-md-5 {
    width: 37.666667%;
}

.dmi-inquiry-form h2:before {
    content: "";
    width: 8px;
    display: block;
    height: 48px;
    background: #fff;
    margin: 0 20px 0 0;
}

.dmi-inquiry-form {
    background: #002f6f !important;
    padding: 33px 40px 30px;
    border-radius: 5px;
    /* Claude 2026-07-24 (Rose): float:right, damit Highlights/Beschreibung das Formular umfliessen und
       darunter ueber die volle Breite laufen (statt starrer col-md-5-Spalte mit Leerflaeche rechts unten).
       margin-top:-477px zieht es weiterhin in den Hero hoch; margin-left als Abstand zum umfliessenden Text.
       Ab <=1270px setzt custom.js .dmi-inquiry-form--relocated und hebt Float/Breite/negativen Margin auf. */
    margin: -477px 0 0 40px;
    z-index: 9999;
    position: relative;
    float: right;
    width: 38%;
}

/* Claude 2026-07-17 (Rose-Wunsch): .dmi-inquiry-form--relocated wird von custom.js ab ~1024px Breite
   gesetzt, sobald das Kontaktformular per DOM-Verschiebung vor "Weitere Angebote" gelandet ist
   (siehe .dmi-property-section .col-md-5{display:none} weiter oben). Kompensiert dort gezielt den
   Hero-Ueberlapp-Effekt (margin:-477px, s.o. - ergibt ausserhalb der urspruenglichen Position
   keinen Sinn mehr) und stellt volle Breite + zweispaltige Eingabefelder her. Zwei Klassen auf
   einem Selektor (hoehere Spezifitaet als jede einzelne .dmi-inquiry-form-Regel, auch in den Breakpoint-
   Bloecken weiter unten) statt die bestehenden Regeln einzeln zu suchen/anzupassen. */
.dmi-inquiry-form.dmi-inquiry-form--relocated {
    margin: 40px 0;
    width: 100%;
    float: none;
}

.dmi-inquiry-form.dmi-inquiry-form--relocated .fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.dmi-inquiry-form.dmi-inquiry-form--relocated .fields li.er,
.dmi-inquiry-form.dmi-inquiry-form--relocated .fields li.hint,
.dmi-inquiry-form.dmi-inquiry-form--relocated .fields li:has(textarea) {
    grid-column: 1 / -1;
}

@media (max-width: 480px) {
    .dmi-inquiry-form.dmi-inquiry-form--relocated .fields {
        grid-template-columns: 1fr;
    }
}

/* Claude 2026-07-24 (Rose): Anrede ist eine normale, gleich breite Grid-Zelle (paart mit Vorname) -
   NICHT mehr eine eigene volle Zeile mit schmalem Select. Die Formulare haben durch die einheitliche
   Feldreihenfolge (PartOne, PartThree ohne Strasse, PartTwo) genau 8 halbbreite Felder = 4 saubere
   Paar-Zeilen: Anrede|Vorname, Name|Mail, Telefon|PLZ+Ort, Investitionsart|Erreichbarkeit.
   (Ersetzt die fruehere "Anrede allein/schmal"-Loesung vom 2026-07-23, die die ungerade Feldzahl und
   damit "Investitionsart allein in einer Zeile" verursachte.) */

/* oberhalb 1270px bleibt die Objektanfrage in der schmalen blauen Seitenspalte (nicht relocated),
   dort ebenfalls zweispaltig; engerer Spalten-Gap wegen der schmaleren Spalte. */
@media (min-width: 1271px) {
    .dmi-inquiry-form:not(.dmi-inquiry-form--relocated) .fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
    }
    .dmi-inquiry-form:not(.dmi-inquiry-form--relocated) .fields li.er,
    .dmi-inquiry-form:not(.dmi-inquiry-form--relocated) .fields li.hint,
    .dmi-inquiry-form:not(.dmi-inquiry-form--relocated) .fields li:has(textarea) {
        grid-column: 1 / -1;
    }
}

/* Claude 2026-07-24 (Rose): /kontakt-Formular zweispaltig. Feldreihenfolge (PartOne, PartThree ohne
   Strasse, PartTwo) ergibt im Grid: Anrede|Vorname, Name|Mail, Telefon|PLZ+Ort, Investitionsart|
   Erreichbarkeit; Nachricht/Datenschutz/Button volle Breite. Das versteckte Honeypot-<li> (display:none)
   belegt keine Grid-Zelle. Scope: #contact-form. Ab 768px (Desktop/Tablet). */
@media (min-width: 768px) {
    #contact-form .fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
    }
    #contact-form .fields li.er,
    #contact-form .fields li.hint,
    #contact-form .fields li:has(textarea) {
        grid-column: 1 / -1;
    }
}

.dmi-inquiry-form form select {
    /* Claude 2026-07-18 (Rose: "Select zu kurz/uneinheitlich auf Objektseiten"): war ein
       2021-Clickdummy-Rest (height:50px, font 17px, Farbe #7f7f7f, kein vertikales Padding) -
       gleiche Spezifitaet (0,1,2) wie ".fields li select" (46px), gewann aber per spaeterer
       Quellposition und machte den Select 4px hoeher + andere Schrift/Farbe als die 46px-Textfelder
       daneben. Jetzt exakt auf die Textfeld-Werte (.fields li .kontakt_input) angeglichen:
       height 46, font 16, Farbe #4d4d4d, padding 10px/13px. Rahmen/Radius/Breite kommen weiter
       aus ".fields li select". */
    padding: 10px 13px;
    background: #fff;
    font-family: "Niveau Grotesk" !important;
    font-size: 16px;
    color: #4d4d4d;
    height: 46px;
}

/* Claude 2026-07-17 (Bugfix aus dem Visual-QA der Objektseiten, auf allen 4 geprueften Seiten
   gefunden): "height: 50px" hier ENTFERNT. Die Regel stammt aus dem 2021-Clickdummy, dessen
   Fake-Formular nur Textfelder kannte - sie trifft pauschal JEDES input. Seit R1256 hier das echte
   Kontaktformular steht, bekam damit auch die Datenschutz-Checkbox height:50px statt 13px: sie
   wurde zu einem 13x50px hohen Balken, wodurch der Labeltext auf eine eigene Zeile rutschte und
   neben der Checkbox eine leere Luecke stehen blieb. Per Stylesheet-Bisect nachgewiesen (style.css
   deaktiviert -> 13px) und im Zoom-Screenshot bestaetigt.

   Fuer die Textfelder ist das Entfernen folgenlos: alle sichtbaren Textfelder tragen .kontakt_input
   und beziehen ihre Hoehe aus ".fields li .kontakt_input" (height:46px), die als spezifischere
   Regel (0,2,1 vs. 0,1,2) hier ohnehin gewinnt - gemessen vor und nach der Aenderung identisch 46px.
   Die einzigen weiteren inputs sind hidden-Felder (Hoehe irrelevant).

   Bewusst NICHT per :not([type="checkbox"]) geloest, obwohl das der naheliegende Weg waere: das
   hebt die Spezifitaet auf (0,2,2) und schlaegt damit .kontakt_input (0,2,1) - im Test sprangen die
   Textfelder dadurch von 46px auf 50px. Ein Fix, der einen neuen Fehler einbaut. */
.dmi-inquiry-form form input {
    padding: 0 0px 0 13px;
    background: #fff;
    font-family: "Niveau Grotesk" !important;
    font-size: 17px;
}

.dmi-inquiry-form form input::placeholder {
    color: #7f7f7f;
}

.dmi-inquiry-form form textarea {
    color: #7f7f7f;
    min-width: 110px !important;
    background: #fff;
    font-family: "Niveau Grotesk" !important;
    font-size: 17px;
    height: 110px;
}

.dmi-inquiry-form input#gridCheck {
    height: 17px;
}

.dmi-inquiry-form .form-check {
    align-items: inherit;
}

.dmi-inquiry-form form .form-check label {
    color: #fff;
    font-size: 15px;
    line-height: 22px;
    font-family: "Niveau Grotesk" !important;
    font-weight: lighter;
    display: inline;
}

.dmi-inquiry-form form .form-check a {
    color: #127aa8;
    font-size: 15px !important;
    text-decoration: none;
    font-family: "Niveau Grotesk" !important;
    line-height: 22px;
    font-weight: bold;
}

.dmi-inquiry-form form button {
    background: #127aa8 !important;
    color: #fff !important;
    font-size: 17px;
    font-family: "Niveau Grotesk" !important;
    font-weight: bold;
    width: 100%;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dmi-inquiry-form form button:hover {
    background: #165b97 !important;
}

.dmi-inquiry-form form {
    margin-top: 10px;
}

.dmi-property-center p {
    font-size: 19px;
    /* Claude 2026-07-28 (Rose): war 300 (Light). Solange NiveauGroteskLight 404te, fiel das
       unsichtbar auf ~normal zurueck - genau der Zustand, der jahrelang angezeigt wurde. Seit die
       Light-Schrift laedt (2026-07-28), rendert der Fliesstext duenn und wirkt neben Checkliste/Lead
       wie eine andere Schrift ("Typografie uneinheitlich", Rose). 400 = einheitlich, entspricht dem
       historisch sichtbaren Gewicht. Gilt fuer alle Objektbeschreibungs-Absaetze (center/intro/energy). */
    font-weight: 400;
    line-height: 32px;
    color: #5d5b5b;
    margin-bottom: 28px; /* Claude 2026-07-28: an .dmi-location-text p angeglichen (war 45) */
    font-family: "Niveau Grotesk" !important;
}

.dmi-property-center p:first-child {
    font-size: 22px !important;
    line-height: 27px !important;
    font-weight: 500;
    margin-bottom: 40px;
    color: #323030;
    font-family: "Niveau Grotesk" !important;
}

.dmi-property-center p:last-child {
    margin-bottom: 35px;
}

.dmi-energy {
    background: #f7f7f7;
    border: solid 1px #d9e0ea;
    border-radius: 5px;
    padding: 25px 35px;
}

.dmi-property-slide {
    width: 98%;
    margin: 0 auto;
}

.dmi-property-slide .col-lg-12.dmi-brochure-link {
    margin: 0 0 0 -13px;
}

.dmi-energy h2 {
    font-size: 30px;
    font-family: "Playfair Display";
    font-weight: bold;
    color: #2e2e2e;
    margin-bottom: 18px;
}

.dmi-energy p {
    font-size: 18px;
    font-weight: 400; /* Claude 2026-07-28: 300->400 fuer einheitliche Beschreibungstypografie, s. .dmi-property-center p */
    color: #2e2e2e;
    margin-bottom: 7px;
}

.dmi-property-slider .card_img_owl {
    padding: 0px !important;
}

.dmi-property-slider .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: none !important;
    border-radius: .25rem;
    margin-left: 1px;
    transition: 0.3s;
}

.dmi-property-slider .card:hover {
    box-shadow: none !important;
}

.dmi-property-slider .owl-nav {
    position: absolute;
    top: 34%;
    width: 100% !important;
}

.dmi-property-slider span.prev::before {
    content: "";
    background: url(../img/right_img.png);
    height: 55px;
    width: 65px;
    position: relative;
    display: block;
}

.dmi-property-slider span.next::before {
    content: "";
    background: url(../img/left_img.png);
    height: 55px;
    width: 65px;
    position: relative;
    display: block;
}

.dmi-property-slider button.owl-next {
    float: right;
}

.dmi-property-slider button.owl-next {
    margin-right: -39px;
}

.dmi-property-slider button.owl-prev {
    float: left;
}

.dmi-property-slider button.owl-prev {
    margin-left: -28px;
}

.dmi-property-slider {
    margin-top: 65px;
}

.dmi-brochure-link p {
    font-size: 18px;
    color: #262626;
    font-family: "Niveau Grotesk";
    font-weight: normal;
}

.dmi-brochure-link a {
    color: #165b97;
    font-family: "Niveau Grotesk";
    text-decoration: none;
    position: relative;
    margin: 0 0 0 3px;
}

.dmi-brochure-link a:after {
    content: "";
    display: block;
    width: 98%;
    height: 1px;
    background: #99aec8;
    position: absolute;
    right: 0;
    bottom: -1px;
}

.dmi-property-slider .owl-dots {
    display: none !important;
}

.dmi-property-slider .owl-stage-outer {
    padding-bottom: 25px !important;
}

.dmi-property-content-section .col-12 {
    margin-top: 14px !important;
    padding: 0;
}

/* Claude 2026-07-28: mit .dmi-property-center p / .dmi-location-text p vereinheitlicht (ein Schriftbild
   ueber alle Beschreibungsabschnitte). Zwei zuvor getrennte Bloecke zusammengefuehrt. */
.dmi-property-intro p {
    font-family: "Niveau Grotesk";
    font-size: 19px;
    font-weight: 400;
    line-height: 32px;
    color: #5d5b5b;
    margin: 0 0 28px;
}

section.dmi-property-intro-section {
    padding: 49px 0 40px 0;
}


.dmi-units p {
    font-size: 30px;
    color: #2e2e2e;
    margin: 55px 0 0px 0;
    font-family: "Playfair Display";
    font-weight: bold;
    line-height: 26px;
}

.dmi-units h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 45px;
    line-height: 40px;
    color: #2e2e2e;
    margin: 0;
    padding: 0;
    display: flex;
}

.dmi-units h2:before {
    content: "";
    width: 8px;
    display: block;
    height: 50px;
    background: #165b97;
    margin: 0 13px 0 0;
}

.dmi-units {
    border-bottom: solid 1px #b9cde0;
    padding: 0 0 19px 0;
}

section.dmi-units-section {
    padding: 96px 0 0 0;
}


thead.dmi-units-thead {
    background: #165b97;
}

.dmi-units-thead th {
    font-size: 22px;
    font-weight: 500;
    align-items: center;
    padding: 13px 8px;
    /* ⚠️ line-height war 10px bei 22px Schrift (Rose 2026-08-10: "Die Schrift überlappt, die
       Icons auch"). Eine Zeilenhoehe unter der Schriftgroesse laesst umbrechende Kopfzeilen
       uebereinanderlaufen - sichtbar, sobald der Platz eng wird. */
    line-height: 1.25;
    color: #fff;
    border: none;
    text-align: center;
    white-space: nowrap;
}

/* ⚠️ Scroll-Huelle statt Seiten-Scroll: die Tabelle ist auf dem Handy breiter als das Fenster.
   Ohne sie scrollt die ganze Seite horizontal, und die fixierten Aktionsknoepfe rutschen
   scheinbar nach rechts aus dem Bild (Rose 2026-08-10, beides derselbe Grund). */
/* ⚠️ Ankersprung unter der Kopfleiste hindurch (Rose 2026-08-10: "Jetzt Berechnen springt ins
   Leere"). Der Knopf zeigte auf href="#" und damit nirgendwohin; jetzt auf #steuervorteil.

   Der Abstand ist NICHT nur die Hoehe der Navigation, sondern rund das Doppelte - und dahinter
   steckt ein zweiter Effekt, den man erst beim Nachmessen sieht: Die Navigation ist zunaechst
   im Textfluss und wird beim Scrollen per JS auf `position: fixed` umgeschaltet. In dem Moment
   verlaesst sie den Fluss, und der gesamte Inhalt rutscht um genau ihre Hoehe (gemessen 71 px)
   nach oben. Ein scroll-margin-top von 84 px landete deshalb gemessen bei 13 px - immer noch
   hinter der Leiste. 155 = 84 gewuenschter Abstand + 71 Versatz.

   Wer die Kopfleiste umbaut (Hoehe oder das Umschalten auf fixed), muss diesen Wert nachziehen. */
#steuervorteil,
/* ⚠️ Auch das Anfrageformular - und hier war zusaetzlich das ZIEL falsch (Rose 2026-08-10:
   "Musterberechnung fuer mich anfordern springt auch ins Leere"). Die beiden Rechner-Knoepfe
   zeigten auf #dmi-inquiry-form-anchor. Dieser Anker ist aber nur eine LEERE MARKIERUNG: custom.js
   verschiebt das Formular unterhalb 1270 px per DOM ans Seitenende (vor #weitere-angebote) und
   benutzt den Anker allein, um es bei breiteren Fenstern zurueckzuschieben. Auf dem Handy sprang
   der Knopf also dorthin, wo das Formular NICHT mehr steht - gemessen lagen 11.286 px dazwischen.
   Kopfzeilen-CTA und Mail-Symbol zeigten laengst richtig auf #dmi-inquiry-form; die zwei
   Rechner-Knoepfe jetzt auch. */
#dmi-inquiry-form {
    scroll-margin-top: 155px;
}

.dmi-units-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dmi-accordion-content td {
    padding: 20px 0 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    color: #262626;
}


tbody,
td,
tfoot,
th,
thead,
tr {
    border: none;
}

table.table {
    margin: 0;
}

.dmi-accordion-icon-up {}

.dmi-accordion-icon-down {
    display: none;
}

.dmi-accordion-btn[aria-expanded="true"] .dmi-accordion-icon-down {
    display: inherit;
}

.dmi-accordion-btn[aria-expanded="true"] .dmi-accordion-icon-up {
    display: none;
}

/* ⚠️ Symbol UEBER den Text, nicht daneben - nebeneinander reicht die Spaltenbreite nicht.
   Das alte `margin: -5px 7px 0 0` stammte aus dem Nebeneinander-Layout und liess die Symbole
   linksbuendig stehen, waehrend die Beschriftung mittig sitzt (gemessen bis 87 px Versatz von
   der Spaltenmitte, Rose 2026-08-10: "Die Icons wirken seltsam positioniert").

   ⚠️ Diese Regel MUSS hier stehen, nicht weiter oben: es gab bereits einen zweiten Block fuer
   denselben Selektor. Bei gleicher Spezifitaet gewinnt der spaetere - eine Aenderung oben blieb
   deshalb wirkungslos. */
.dmi-units-thead th img {
    display: block;
    margin: 0 auto 4px;
}

a.dmi-accordion-btn {
    margin: 0 10px 0 0;
    cursor: pointer;
}


.dmi-accordion-row h2 {
    color: #262626;
    font-size: 20px;
    font-weight: bold;
    font-family: "Niveau Grotesk";
    margin-bottom: 23px;
}

.dmi-accordion-row p {
    color: #757474;
    font-size: 18px;
    font-family: "Niveau Grotesk";
    line-height: 31px;
    margin-bottom: 22px !important;
}

.dmi-accordion-row h2 a {
    color: #262626;
    font-size: 18px;
    font-family: "Niveau Grotesk";
    text-decoration: none;
    font-weight: 500;
}


.dmi-accordion-row h2 {
    margin: -5px 0 0 0;
    line-height: 15px;
}

.dmi-floorplan-image img {
    width: 100%;
}

.dmi-accordion-row {
    padding: 48px 0 58px 0;
}

.dmi-accordion-heading {
    padding-top: 52px;
}


.list-unstyled .accordion-button {
    position: relative;
    display: flex;
    width: 0% !imporatant;
    padding: 0rem 0rem !important;
    font-size: 1rem;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 0% !important;
    right: 21px !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url(../img/acc_icon.png) !important;
    transform: rotate(0deg) !important;
}

.accordion-button::after {
    background-image: url(../img/acc_icon.png) !important;
    transform: rotate(90deg) !important;
}


.dmi-pdf-link a:hover {
    background: #165b97;
}


.dmi-gallery-inner h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 45px;
    line-height: 40px;
    color: #2e2e2e;
    margin: 0;
    padding: 0;
    display: flex;
}

.dmi-gallery-inner h2:before {
    content: "";
    width: 8px;
    display: block;
    height: 50px;
    background: #165b97;
    margin: 0 20px 0 0;
}

.dmi-gallery-inner p {
    font-size: 30px;
    color: #2e2e2e;
    margin: 37px 0 0px 0;
    font-family: "Playfair Display";
    font-weight: bold;
    line-height: 26px;
}

.dmi-gallery-inner {
    border-bottom: solid 1px #b9cde0;
    padding: 27px 0 19px 0;
}

.dmi-gallery {
    padding: 175px 0 119px 0;
}


.dmi-double-bg {
    background-image: url(../img/double_bg.png);
    background-size: 100% 100%;
}

.dmi-double-bg h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 30px;
    line-height: 40px;
    color: #2e2e2e;
    margin: 0;
    padding: 0;
    display: flex;
}

.dmi-double-bg h2:before {
    content: "";
    width: 13px;
    display: block;
    height: 68px;
    background: #165b97;
    margin: 7px 13px 0 0;
}

.dmi-pdf-link a {
    background: #127aa8;
    border-radius: 5px;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    font-family: "Niveau Grotesk";
    text-transform: uppercase;
    width: 227px;
    display: flex;
    height: 61px;
    align-items: center;
    justify-content: center;
}

.dmi-pdf-link a img {
    margin-left: 12px;
}

.dmi-pdf-link {
    padding: 23px 0 0 15px;
}

.dmi-pdf-download {
    padding-left: 61px;
}

.dmi-double-bg {
    background-image: url(../img/double_bg.png);
    background-size: 100% 100%;
    padding: 62px 0 62px 0;
}

/* Claude 2026-08-16 (Rose, #1040): ohne Steuervorteil-Spalte (Neubau u.ae.) nutzt der
   PDF-Download die volle Breite - die zweigeteilte Hintergrundgrafik saehe dann wie ein
   Versehen aus. Einfarbig im Ton der linken Haelfte (aus double_bg.png gemessen). */
.dmi-double-bg.dmi-single-bg {
    background-image: none;
    background-color: #ECF5F8;
}

.dmi-location {
    border-bottom: solid 1px #b9cde0;
    padding: 27px 0 19px 0;
}

.dmi-location h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 45px;
    line-height: 40px;
    color: #2e2e2e;
    margin: 0;
    padding: 0;
    display: flex;
}

.dmi-location h2:before {
    content: "";
    width: 8px;
    display: block;
    height: 50px;
    background: #165b97;
    margin: 0 22px 0 0;
}

/* .dmi-location p wird jetzt zusammen mit .dmi-property-content p oben als ruhiger Subtitle gestylt
   (Claude 2026-07-22) - die fruehere 30px-Playfair-Bold-Regel hier entfernt. */


/* Claude 2026-07-28 (Rose): Standort-Zwischenueberschrift ("Magdeburg - Sudenburg") war ein h3 und
   fiel damit auf Bootstrap-Defaults zurueck (die vorhandene Subheading-Regel galt nur h2). h3 mit
   aufgenommen -> einheitlicher dmi-Subheading-Stil (Brand-Blau/Niveau Grotesk/500); groesserer
   margin-top schafft klaren Abstand zur duennen Trennlinie darueber (.dmi-location border-bottom). */
.dmi-location-text h2,
.dmi-location-text h3 {
    color: #165b97;
    font-size: 28px;
    font-family: "Niveau Grotesk";
    font-weight: 500;
    margin: 44px 0 18px 0;
}

/* Claude 2026-07-28 (Rose, 2. Anlauf): Der Standort-Fliesstext hatte GAR KEINE eigene Regel und fiel
   auf Bootstrap-Defaults zurueck (16px / #212529 / line-height 1.5), waehrend der "Die Immobilie"-Text
   ueber .dmi-property-center p das dmi-Design bekommt (19px / #5d5b5b / line-height 32). Daher sahen die
   beiden Abschnitte "voellig anders" aus (Groesse, Farbe, Abstaende). Standort-Absaetze jetzt exakt an
   .dmi-property-center p angeglichen -> einheitliches Schriftbild ueber alle Beschreibungsabschnitte. */
.dmi-location-text p {
    font-family: "Niveau Grotesk";
    font-size: 19px;
    font-weight: 400;
    line-height: 32px;
    color: #5d5b5b;
    margin: 0 0 28px;
}

.dmi-location-text p:last-child {
    margin-bottom: 0;
}


.dmi-map-section .container-fluid {
    padding: 0px !imporatant;
}

.dmi-map-section .container-fluid {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

section.dmi-location-section {
    padding: 87px 0 25px 0;
}

/* Claude 2026-07-25 (Rose, DSGVO): Google-Maps Click-to-load-Platzhalter. Vor Zustimmung wird die
   Karte nicht geladen - hier ein neutraler, kartenähnlicher Platzhalter mit Hinweis + "Karte laden". */
.dmi-map-consent {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    background: #eef1f4 repeating-linear-gradient(45deg, rgba(0,47,111,0.03) 0 12px, transparent 12px 24px);
    border: 1px solid #d7dde3;
    color: #33475b;
}
.dmi-map-consent--loaded {
    display: block;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
}
.dmi-map-consent__inner {
    max-width: 520px;
}
.dmi-map-consent__title {
    margin: 0 0 10px;
    font-size: 22px;
    color: #002f6f;
}
.dmi-map-consent__text {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.5;
}
.dmi-map-consent__remember {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: #667;
    cursor: pointer;
}
.dmi-map-consent__remember input {
    margin-right: 6px;
    vertical-align: middle;
}

.dmi-related-offers-inner h2 {
    font-family: "Playfair Display";
    font-weight: bold;
    font-size: 45px;
    line-height: 40px;
    color: #2e2e2e;
    margin: 0;
    padding: 0;
    display: flex;
}

.dmi-related-offers-inner h2:before {
    content: "";
    width: 8px;
    display: block;
    height: 49px;
    background: #165b97;
    margin: 0 7px 0 0;
}

.dmi-related-offers {
    padding: 121px 0 0 0;
}

.dmi-related-offers button.owl-prev {
    margin-left: -73px;
}

.dmi-related-offers button.owl-prev {
    float: left;
}

.dmi-related-offers button.owl-next {
    margin-right: -73px;
}

.dmi-related-offers button.owl-next {
    float: right;
}

.dmi-related-offers span.next::before {
    content: "";
    background: url(../img/owl2s_right.png);
    background-repeat: no-repeat;
    height: 55px;
    width: 65px;
    position: relative;
    display: block;
}

.dmi-related-offers span.prev::before {
    content: "";
    background: url(../img/owl2s_left.png);
    background-repeat: no-repeat;
    height: 55px;
    width: 65px;
    position: relative;
    display: block;
}

.dmi-related-offers .owl-nav {
    position: absolute;
    top: 20%;
    width: 100% !important;
}

.dmi-related-offers .card_img_owl {
    padding: 0px;
}

.dmi-related-offers .card {
    border: none;
}

.dmi-inquiry-top p {
    margin: 0 0 0 0;
    font-family: "Niveau Grotesk";
    font-size: 17px;
    font-weight: 500;
}

.dmi-inquiry-top a {
    color: #127aa8;
    font-size: 14px;
    text-decoration: none;
    font-family: "Niveau Grotesk";
    font-weight: 500;
}

.dmi-inquiry-top p {
    margin: 17px 0 9px 0 !important;
    font-family: "Niveau Grotesk";
    font-size: 17px;
    font-weight: 500;
    line-height: 13px;
}

.dmi-inquiry-top h2 {
    font-size: 20px;
    font-weight: bold;
    font-family: "Playfair Display";
    margin: 0 0 17px 0;
    line-height: 18px;
}

.dmi-inquiry-top {
    background: #fff !important;
    width: 95%;
    padding: 2px 3px 5px 15px;
    position: relative;
    margin: 0 auto;
    top: -51px;
}

.dmi-related-offers-inner {
    margin-bottom: 44px;
}

.dmi-related-offers .owl-dots {
    display: none;
}

.dmi-related-offers .owl-stage-outer {
    padding-bottom: 0px !important;
}

.dmi-gallery .dmi-gallery-inner {
    margin-bottom: 59px;
}


.dmi-inquiry-col--mobile {
    display: none !important;
}


.dmi-inquiry-col--mobile {
    display: none;
}

.accordin_mobile {
    display: none;
}

.dmi-related-offers button.owl-prev {
    margin-left: -85px !important;
}

.dmi-related-offers button.owl-next {
    margin-right: -85px !important;
}

/*=-------------------------Reponsive code here----------------------------------*/


@media (max-width:1460px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1280px;
    }

    .dmi-header-bottom a {
        font-size: 18px;
    }

    .dmi-header-bottom li {
        padding: 20px 24px 23px 30px;
    }

    

    /*------------------------------------------------------------------------*/

    .dmi-hero-facts ul li:first-child {
        padding: 0 15px 0 0;
    }

    .dmi-hero-facts ul li {
        font-size: 23px;
        padding: 0 15px 0;
    }

    .sidebar.pflege ul li {
        font-size: 18px;
    }

    .dmi-inquiry-form h2 {
        font-size: 37px;
    }
}

@media(max-width:1424px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1200px;
    }

    .dmi-header-bottom a {
        font-size: 16px;
    }

    

    

    .dmi-footer-offers li a {
        font-size: 15px;
    }

    .dmi-footer-para p {
        font-size: 15px;
    }

    /*----------------------------------
--------------------------------------*/
    .dmi-hero-facts ul li:first-child {
        padding: 0 10px 0 0;
    }

    .dmi-hero-facts ul li {
        font-size: 22px;
        padding: 0 10px 0;
    }

    .dmi-hero-facts ul li span {
        padding: 0 0 0 10px;
    }

    .dmi-sidebar-head h2 {
        font-size: 20px;
        line-height: 30px;
    }

    .dmi-sidebar-head h2:before {
        height: auto; /* Claude 2026-07-20: adaptiver Balken, siehe Basisregel */
    }

    .sidebar.pflege ul li {
        font-size: 17px;
    }

    .dmi-estate-card__title h2 {
        font-size: 24px;
    }

    .sidebar.weitere a {
        padding: 20px 20px;
    }


    .dmi-inquiry-form h2 {
        font-size: 34px;
    }
}


@media(max-width:1345px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1170px;
    }

    .dmi-header-bottom li:first-child {
        padding: 20px 20px 23px 0;
    }

    .dmi-header-bottom li {
        padding: 20px 20px 23px 30px;
    }

    

    /*----------------------------------
--------------------------------------*/
    .dmi-hero-facts ul li {
        font-size: 21px;
    }

    .dmi-hero-facts ul li span {
        padding: 0 0 0 7px;
    }

    .sidebar.pflege img {
        width: 80%;
    }

    .sidebar.pflege ul li img {
        width: auto;
    }

    

    

    

    .dmi-testimonials-widget .owl-nav {
        position: unset;
        margin: 25px 0 0;
    }

    .dmi-testimonials-widget .owl-nav button.owl-prev {
        margin-left: -25px;
    }

    .dmi-testimonials-widget .owl-nav button.owl-next {
        margin-right: -25px;
    }

    .dmi-estatelist-content p {
        font-size: 17px;
    }
}

@media (max-width: 1280px) {
    .dmi-related-offers .owl-nav {
        position: unset;
        top: 0;
    }

    .dmi-related-offers button.owl-prev {
        margin-left: -10px;
    }

    .dmi-related-offers button.owl-next {
        margin-right: -10px;
    }

    .dmi-related-offers button.owl-next {
        float: none !important;
        margin-right: 0px !important;
    }

    .dmi-related-offers .owl-nav {
        position: unset;
        top: 0;
        width: 100% !important;
        margin: 0;
        text-align: center;
    }

    .dmi-related-offers button.owl-prev {
        float: none;
        margin-left: 0px !important;
    }

    .dmi-inquiry-top {
        margin: -50px auto 0;
        top: 0;
    }
}

@media (max-width: 1270px) {
    /* Claude 2026-07-17 (Bugfix: .dmi-inquiry-form verrutscht bei ~1025-1270px): war "width: inherit" -
       einzige Stelle im ganzen File, an der .col-md-7 keine zur .col-md-5-Breite passende Prozentzahl
       bekommt (Summe muss 100% ergeben, siehe alle anderen Breakpoints hier). "inherit" nimmt
       stattdessen die Breite der .row-Elternspalte an, wodurch .col-md-5 (enthaelt .dmi-inquiry-form) im
       flex .row umbricht - der bestehende margin:-477px-Aufzieheffekt zieht die dann umgebrochene Box
       anschliessend in fremden Inhalt hinein. Passend zur Basis-Breite .col-md-5:37.666667% (siehe
       oben in der Datei, kein spezifischerer Override in diesem Bereich). */
    .dmi-property-section .col-md-7 {
        width: 62.333333%;
    }
}


@media (max-width: 1160px) {

    body .dmi-header-bottom li {
        padding: 0 20px 0 22px !important;
    }

}

@media (max-width: 1200px) {

    

    

    

    .dmi-testimonials-widget .owl-nav {
        position: unset !important;
        top: 0;
        text-align: center;
        margin: 0 auto;
        width: 150px !important;
        margin-top: 25px;
        display: flow-root;
    }

    .dmi-testimonials-widget .owl-nav button.owl-prev {
        margin-left: 0;
        float: left;
    }

    .dmi-testimonials-widget .owl-nav button.owl-next {
        float: right;
        margin-right: 0;
    }

    

    

    .dmi-property-slide .alle {
        margin-top: 70px;
    }

    


    .dmi-testimonials-first .dmi-testimonials-outer h3 {
        font-size: 23px !important;
    }

    

}

@media(max-width:1090px) {

    

    

    

}


@media (max-width:1024px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 100%;
    }

    .sidebar ul {
        margin-top: -20px !important;
    }

    .dmi-sidebar-head h2 img {
        margin-left: 14% !important;
    }

    body .dmi-header-bottom li {
        padding: 0 18px 0 10px !important;
    }

    .dmi-sidebar-head h2::before {
        width: 5px !important;
    }

    .sidebar.weitere .dmi-sidebar-head h2::before {
        margin: 0px 10px 0 0 !important;
    }

    

    

    

    

    

    /* Claude 2026-07-23: alte Raster-Logo-Regel (width:100%) entfernt - Signet ist jetzt img.dmi-brand__signet
       mit fester Hoehe; width:100% haette es auf Mobil verzerrt/gestreckt. */

    .dmi-consult-box p {
        font-size: 14px;
    }

    .dmi-consult-box .dmi-consult-phone {
        font-size: 24px !important;
        margin: 6px 0 0;
    }

    header .dmi-header-inquiry {
        padding-top: 10px;
    }

    .dmi-header-inquiry button {
        width: 145px;
        font-size: 14px;
    }

    .dmi-header-bottom li:first-child {
        padding: 20px 10px 23px 0;
    }

    .dmi-header-bottom li {
        padding: 20px 10px 23px 10px;
    }

    .dmi-header-bottom li:last-child {
        padding: 20px 10px 23px 10px;
    }

    

    /*----------------------------------
-----------------------------------*/
    .dmi-hero-facts ul {
        justify-content: center;
    }

    .dmi-hero-facts {
        /* Claude 2026-07-17: siehe Basis-Regel oben - dieselbe Ueberlappung mit .dmi-cta-box bei
           max-width:1024px, aus demselben Grund auf 0 gestellt. */
        margin: 0;
    }

    .dmi-estate-list h1 {
        font-size: 24px;
    }

    .dmi-sidebar-head h2 {
        font-size: 14px;
        line-height: 20px;
    }

    .dmi-sidebar-head h2:before {
        height: auto; /* Claude 2026-07-20: adaptiver Balken, siehe Basisregel */
        margin: 0 10px 0 0;
    }

    .dmi-estate-list .dmi-estate-filter p {
        font-size: 16px;
    }

    .dmi-filter-select label {
        font-size: 16px;
    }

    .dmi-sidebar-head {
        margin: 20px 0 20px 20px;
    }

    .sidebar ul li a {
        font-size: 16px;
        padding: 14px 14px;
        margin: 0 10px;
    }

    .sidebar ul li a.active:before {
        height: 47px;
        left: -10px;
    }

    .sidebar ul li a.active:after {
        left: -4px;
        top: 14px;
    }

    .sidebar ul li a:hover:before {
        height: 47px;
        left: -10px;
    }

    .sidebar ul li a:hover:after {
        left: -4px;
        top: 14px;
    }

    .dmi-city {
        margin: 0px 0 0;
        padding: 0 20px;
    }

    .dmi-city p {
        font-size: 15px;
    }

    .sidebar.pflege img {
        width: 90%;
    }

    .sidebar.pflege ul li {
        font-size: 14px;
        padding: 14px 3px;
        margin: 0 10px;
    }

    .sidebar.pflege a {
        padding: 15px 0;
        width: 90%;
        text-align: center;
    }

    .sidebar.weitere .dmi-sidebar-head {
        margin: 20px 0 20px 10px;
    }

    .sidebar.weitere .dmi-sidebar-head h2:before {
        height: auto; /* Claude 2026-07-20: adaptiver Balken, siehe Basisregel */
    }

    .sidebar {
        margin: 0 0 30px;
    }

    .sidebar.weitere h3 {
        padding: 0 15px;
        line-height: 20px;
        font-size: 16px;
        margin: 0;
    }

    .dmi-estatelist-content {
        padding: 0 15px;
    }

    .dmi-estatelist-content p {
        font-size: 14px;
        line-height: 20px;
        padding: 20px 0 0;
    }

    .sidebar.weitere a {
        padding: 20px 0px;
        margin: 20px auto 20px;
        width: 87%;
        font-size: 14px;
        text-align: center;
    }

    .dmi-estate-card__title h2 {
        font-size: 16px;
    }

    /*------------------------------------
---------------------------------------*/
    /* Claude 2026-07-17 (Rose-Wunsch, Schwelle inzwischen auf 1270px angehoben - siehe
       @media(max-width:1270px)-Block weiter unten im File, der col-md-5/7 fuer den gesamten
       1024-1270px-Bereich einheitlich regelt und wegen spaeterer Position in der Kaskade
       gewinnt): hier keine col-md-5/7-Regeln mehr noetig. */
    .dmi-inquiry-form h2 {
        font-size: 28px;
        line-height: 33px;
    }

    .dmi-inquiry-form h2:before {
        height: 35px;
    }

    .row.dmi-highlights li {
        font-size: 14px;
    }


    .dmi-pdf-download {
        padding-left: 15px;
    }

    .col-md-6.dmi-pdf-download .col-md-7 {
        width: auto;
    }

    .col-md-6.dmi-pdf-download .col-md-5.dmi-pdf-link {
        width: auto;
    }

    .col-md-6.dmi-pdf-download-mobile .col-md-6 {
        width: auto;
    }

    .col-md-6.dmi-pdf-download-mobile .col-md-6 {
        width: auto;
    }

    .dmi-property-slider button.owl-prev {
        margin-left: -10px;
    }

    .dmi-property-slider button.owl-next {
        margin-right: -20px;
    }

    .dmi-property-slide .dmi-testimonials-list p {
        font-size: 14px;
    }


}

@media(max-width:1000px) {
    /* Claude 2026-07-17: height 748px -> auto, padding-bottom 0 -> 72px (siehe Basisregel). Hier war
       zwar kein Überstand, aber bei 768px blieben zwischen Foto-Unterkante und weißer Fläche nur
       10px - sichtbar gedrängt. Mit height:auto ist der Abstand jetzt über den ganzen Bereich
       konstant (gemessen 72-75px), statt je nach Breite zwischen 10px und 52px zu schwanken. */
    .dmi-property-details .dmi-cta-box {
        width: 487px;
        height: auto;
        padding: 57px 15px 72px;
        background-size: 100% 100%;
    }

    .dmi-inquiry-form {
        margin: -357px 0 0;
        padding: 24px 15px 30px;
    }

    .dmi-property-details .dmi-cta-box__text :is(h1, h2) {
        font-size: 30px;
        /* Claude 2026-07-28 (Rose): line-height fehlte hier -> es blieb bei den 42px der Basisregel
           (fuer 50px gedacht) -> unproportional grosser Abstand zwischen den zwei Titelzeilen
           ("Heidestrasse," / "Magdeburg"). An die 30px angepasst. */
        line-height: 34px;
        padding: 0 0 0 30px;
    }

    .dmi-cta-box__text :is(h1, h2):before {
        width: 15px;
    }

    .dmi-property-details .dmi-cta-box__text ul {
        margin: 30px 0 12px 30px;
    }

    .dmi-property-details .dmi-estate-card__content li:first-child {
        padding: 15px 20px 10px 20px;
    }

    .dmi-property-details .dmi-estate-card__content li {
        padding: 12px 20px 10px 20px;
    }

    .dmi-inquiry-col {
        padding: 37px 35px 40px 30px;
    }

    .dmi-inquiry-content h2 {
        font-size: 18px;
        line-height: 24px;
        margin: 0 0 0 0;
        padding: 0;
    }

    .dmi-inquiry-content p {
        font-size: 14px;
        margin: 18px 0 13px 0;
    }

    .dmi-contact-badge {
        display: flex;
        align-items: center;
    }

    .dmi-contact-badge img {
        width: 60px;
        margin: 0 0 0 -12px;
    }

    .dmi-contact-badge p {
        margin: 0;
        padding: 0;
    }

    .dmi-contact-badge a {
        font-size: 22px;
    }

    .dmi-property-slider button.owl-next {
        margin-right: 0px;
    }

    .dmi-property-slider button.owl-prev {
        margin-left: 0;
    }

    .dmi-property-slider span.next::before {
        width: 55px;
    }

    .dmi-property-slide .col-lg-12.dmi-brochure-link {
        margin: 0 0 0 0;
    }


    .dmi-gallery {
        padding: 70px 0 70px 0;
    }


}

@media(max-width:991px) {
    li.nav-item.dmi-nav-fragen a {
    /* padding-right: 0px; */
    text-align: left !important;
}


#world-map{
    width: 303px!important;
}
    .dmi-responsive-logo {
        display: block;
    }
    .dmi-phone-nav-tab .dmi-responsive-logo a img{
        min-width: 280px;
    }

    .dmi-header-top {
        display: none;
    }

    .dmi-header-bottom {
        background: #fff;
        margin: 0 0 0;
    }

    .dmi-mobile-header-top {
        background: #0c4b82;
        text-align: center;
        padding: 2px 0;
        display: block;
    }

    .dmi-mobile-header-top p {
        color: #fff;
        font-weight: 500;
        margin: 0;
    }

    .dmi-mobile-header-top span {
        color: #fff;
        font-weight: bold;
        margin: 0;
    }

    .dmi-mobile-header-top span a {
        text-decoration: none;
    }

    .navbar-light .navbar-toggler-icon {
        background-image: url(../img/menu-close.png);
       border: 2px solid #0e4d83;
       border-radius: 50%;
       padding: 19px 19px;
    /* height: 37px; */
       background-size: 28px;
    /* width: 30px; */
       line-height: 17px;
       font-weight: normal!important;


    }
    button.navbar-toggler.collapsed .navbar-toggler-icon{
        border:0!important;
    }

    .navbar-light .navbar-toggler.collapsed .navbar-toggler-icon {
        background-image: url(../img/menu.png);
    }

    .navbar-light .navbar-toggler {
        color: inherit;
        border: none;
        padding: 0;
    }

    .navbar-toggler:focus {
        box-shadow: none !important
    }

    .navbar ul {
        margin-bottom: 0px !important;
    }

    /*div#navbarTogglerDemo01 {
    overflow: scroll !important;
    height: 200px;
}*/

    .navbar-collapse {
        top: 108px;
    }

    .navbar-light .navbar-nav .nav-link {
        color: #434343!important;
        padding: 0 10px !important;
        border: none !important;
    }

    .dmi-header-bottom li {
        border: none;
        border-bottom: 1px solid rgba(68, 197, 248,0.4)!important;
    }

    .dmi-header-bottom li:first-child {
        border: none;
        border-bottom: 1px solid rgba(68, 197, 248,0.4)!important;
    }

    .dmi-header-bottom li:first-child {
        padding: 15px 10px 15px 10px;
    }

    .dmi-header-bottom li {
        padding: 15px 10px 15px 10px;
    }

    nav.navbar.navbar-expand-lg.navbar-light {
        padding: 12px 0 6px 0 !important;
    }

    

    .carousel-item {
        height: 740px;
    }

    .carousel-item img.d-block.w-100 {
        width: auto !important;
    }

    /*------movile-view---*/

    .overlay-content .navbar-nav, .navbar-expand-lg.navbar-light .show ul, .navbar-expand-lg.navbar-light ul{
        background: #0c4b82!important;
        padding-bottom: 154px;

    }

    .overlay-content .navbar-nav li, .navbar-expand-lg.navbar-light .show ul li, .navbar-expand-lg.navbar-light li.nav-item{
        padding: 10px 0 10px 20px!important;
        white-space: nowrap;
    }
    .overlay-content .navbar-nav li a.nav-link, .navbar-expand-lg.navbar-light .show ul li a, .navbar-expand-lg.navbar-light li.nav-item a{
        padding: 6px 0 6px 15px !important;
         color: #fff!important;
         border-left: 5px solid transparent!important;
      
    } 

    
    .overlay-content .navbar-nav li:hover, .navbar-expand-lg.navbar-light .show ul li:hover, .navbar-expand-lg.navbar-light li.nav-item:hover{
       background: transparent!important;
   }
     .overlay-content .navbar-nav li.active, .navbar-expand-lg.navbar-light .show ul li.active, .navbar-expand-lg.navbar-light li.nav-item.active{
        background: #0c4b82!important;
     }
    .overlay-content .navbar-nav li.active a.nav-link, .navbar-expand-lg.navbar-light .show ul li.active a, .navbar-expand-lg.navbar-light li.nav-item.active a{

        border-left: 5px solid #127aa8!important;
        color: #127aa8!important;
    }

    
    
	.dmi-phone-nav-tab {
		justify-content: space-between;
	}
   nav.navbar.navbar-expand-lg.navbar-light.sticky .dmi-phone-nav-tab {
    padding: 9px 0px 9px 15px!important;
    }
	
    

    

    

    

    
    

   

    

    

    

    

    

    

    

    .dmi-property-slide {
        width: 100%;
    }

    .dmi-testimonials-first {
        width: 100%;
    }

    .aktuelles {
        width: 100%;
    }

    .owl-dots {
        display: none;
    }

    .dmi-property-slide .alle {
        margin-top: 45px;
    }

    .dmi-testimonials-widget .owl-nav {
        margin-top: 40px !important;
    }

    .dmi-testimonials-widget .owl-nav {
        position: unset;
        top: 0;
        width: 100% !important;
        margin: 0;
        text-align: center;
    }

    .dmi-testimonials-widget .owl-nav button.owl-next {
        margin-right: 0;
        margin-left: 26px;
        float: none;
    }

    .dmi-testimonials-widget .owl-nav button.owl-prev {
        float: none;
        margin-left: 0;
    }

    

    .dmi-testimonials-heading h2 {
        font-size: 24px;
        ;
        line-height: 24px;
    }

    

    

    .dmi-testimonials-header {
        padding-top: 142px;
        padding-bottom: 65px;
    }

    .dmi-testimonials-header .alle a {
        margin: 30px auto 0;
    }

    

    

    

    .dmi-testimonials-header .dmi-testimonials-heading {
        margin-bottom: 40px;
    }

    

    .erfahren {
        padding: 50px 0;
        background: #f6f7f9;
    }

    

    .denkmal {
        padding: 50px 0;
    }

    footer {
        padding-top: 40px;
        /* Claude 2026-07-27 (Rose): war 40px -> die Copyright-Leiste (.dmi-footer-bottom) hatte darunter
           40px leeren Footer-Hintergrund. Die Leiste soll buendig am Seitenende sitzen. */
        padding-bottom: 0;
    }

    

    

    

    

    

    

    

    

    

    

    

    

    

}

@media(max-width:978px) {
    .dmi-sidebar-head h2 br {
        display: none;
    }

    .dmi-sidebar-head {
        margin: 20px 0 5px 10px;
    }

    .dmi-estate-card__content li {
        text-align: end;
    }
}


@media(max-width:835px) {
    .dmi-footer-bg .col-md-3 {
        width: 50%;
    }

    .dmi-footer-bg .col-md-2.dmi-footer-offers {
        width: 50%;
        display: flex;
        justify-content: space-between;
    }

    

    .dmi-footer-bg .col-md-4.dmi-footer-offers {
        width: 100%;
    }

    

    

    /*a.bottom-to-top {
    position: fixed;
}*/

    

    /*----------------------------------
----------------------------------------*/
    .dmi-hero-facts {
        margin: 0 0 0 0;
    }

    .dmi-hero-facts h2 {
        padding: 0 0 0 0;
        text-align: center;
    }

    ol.breadcrumb {
        margin: 30px 0 30px;
    }

    .dmi-estate-list h1 {
        font-size: 20px;
    }

    .dmi-sidebar-head {
        width: 95%;
        margin: 10px auto 0;
    }

    .sidebar ul li a {
        font-size: 14px;
        padding: 14px 8px;
        margin: 0 10px;
    }

    .dmi-city {
        margin: 0px 0 0;
        padding: 0 5px;
    }

    .dmi-city p {
        font-size: 14px;
        margin: 15px 0;
    }

    .dmi-city select {
        font-size: 14px;
        margin: 0 0 20px;
    }

    .sidebar.weitere h3 {
        font-size: 14px;
    }

    .sidebar.weitere h3 br {
        display: none;
    }

    .dmi-estatelist-content p br {
        display: none;
    }

    .sidebar.weitere a {
        padding: 15px 10px;
    }

    .dmi-estate-card__title {
        padding: 0 0 0 10px;
    }

    .dmi-estate-card__content li {
        margin: 0 10px 0 10px;
    }

    .dmi-sidebar-head h2 img {
        display: block;
        width: 55px;
    }

    .pagination li a.page-link,
    .pagination li span.page-link {
        padding: 14px 15px;
        font-size: 14px;
    }


    .dmi-property-details .dmi-cta-box {
        width: 457px;
    }

    .dmi-contact-badge a {
        font-size: 18px;
    }

    /* Claude 2026-07-17: .row.dmi-highlights li { white-space: inherit; } hier entfernt - seit dem
       Fix an der Basisregel (.row.dmi-highlights li, siehe dort) ist "white-space: normal" bereits
       Standard, dieser Override war nur ein Teilbereichs-Pflaster (<=835px) fuer denselben Bug. */
}

@media(max-width:990px) {
    .sticky .container {
        padding: 0;
    }

    .sticky.navbar.navbar-expand-lg.navbar-light {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 999999999;
        background: #ffff;
        box-shadow: 0 0 10px;
        left: 0;
    }
    

    .sticky.navbar-light .navbar-toggler {
        padding: 0 0px 0 0;
    }

    .navbar-toggler {
        margin-right: 15px;
    }

    header .container {
        padding: 0;
    }


}

@media(max-width:767px) {

    


    ol.breadcrumb {
        display: none;
    }

    .dmi-hero-facts ul li:last-child {
        padding: 0 0 0 8px;
    }

    .sidebar.weitere .dmi-sidebar-head h2:before {
        margin: 0px 10px 0 0;
    }

    .main_content {
        padding: 0 0 0px;
    }

    .dmi-sidebar-head h2 {
        font-size: 20px;
    }

    .content_section .col-md-3 {
        order: 2;
    }

    .dmi-mobile-filter-bar {
        display: block;
        margin: 30px 0 0;
    }

    .dmi-sidebar-head h2:before {
        height: auto; /* Claude 2026-07-20: adaptiver Balken, siehe Basisregel */
    }

    .content_section .sidebar:nth-child(1) {
        display: none;
    }

    .content_section .sidebar:nth-child(2) {
        display: none;
    }

    

    .dmi-mobile-filter-bar .sidebar {
        display: block !important;
    }

    .dmi-estatelist-content p {
        padding: 10px 0 0;
    }

    ul.pagination {
        display: none;
    }

    .dmi-hero-facts h2 {
        padding: 0 0 0 0;
        text-align: left;
        font-size: 18px;
        line-height: 16px;
    }

    .dmi-hero-facts ul {
        display: block;
    }

    .dmi-hero-facts ul li {
        font-size: 18px;
        display: inline-block;
    }

    .dmi-hero-facts ul {
        margin: 10px 0 0 0;
    }

    .dmi-hero-facts {
        margin: 0 0 0 0;
        background-size: 100% 100%;
        padding: 15px 0;
    }

    .dmi-inquiry-form {
        margin: 30px 0 0;
        padding: 24px 15px 30px;
    }

    .dmi-property-section .col-md-5 {
        width: 100%;
    }

    .dmi-property-section .col-md-7 {
        width: 100%;
    }

    .dmi-inquiry-col--mobile {
        display: block !important;
        width: 90%;
        background: #fff;
        margin: 0 auto;
        position: relative;
        top: -47px;
        box-shadow: 0px 6px 50px 6px #dcdada8a;
    }

    .dmi-inquiry-col--mobile .dmi-inquiry-col {
        padding: 16px 10px 0 10px;
        margin-bottom: 10px;
    }

    .dmi-inquiry-col--mobile .dmi-inquiry-content {
        padding: 0px 0 0px 17px;
    }

    .dmi-inquiry-col.dmi-inquiry-col--desktop {
        display: none;
    }

    /* Claude 2026-07-17 (eigenständiger Fund beim Verifizieren des Agentenbild-Fixes): hier stand
       "height: 467px". Der Inhalt braucht dort aber mehr Platz - .dmi-estate-card__content (die Kennzahlen-
       Tabelle) ragte dadurch im Bereich 601-767px 35px unten aus der weißen Fläche heraus.
       Derselbe Fehlertyp wie beim gemeldeten Agentenbild (feste Höhe < Inhalt), nur an anderer
       Stelle sichtbar: das Agentenbild liegt in diesem Bereich bereits in .dmi-inquiry-col--mobile
       AUSSERHALB der Box, deshalb fiel hier bisher nichts auf. height:auto, damit die Box ihrem
       Inhalt folgt - wie in der Basisregel. */
    .dmi-property-details .dmi-cta-box {
        height: auto;
    }

    .dmi-property-details .dmi-hero {
        /* Claude 2026-07-28 (Rose, Idee A "Foto-Header + Karte"): padding-top 60->120px, damit oben
           ein bewusster Foto-Streifen als Header sichtbar ist und die weisse Karte dessen Unterkante
           ueberlappt (statt das Foto fast vollstaendig zu verdecken). */
        padding: 120px 0 170px;
    }

    .dmi-inquiry-content h2 {
        font-size: 28px;
        line-height: 32px;
    }

    .dmi-inquiry-content p {
        font-size: 18px;
        margin: 10px 0 10px 0;
    }

    .dmi-contact-badge img {
        width: auto;
    }

    .dmi-contact-badge {
        align-items: end;
    }

    .dmi-inquiry-col--mobile .dmi-inquiry-col {
        padding: 16px 10px 20px 10px;
    }

    .dmi-property-section .col-md-7 {
        order: 2;
    }

    .dmi-property-section .col-md-5 {
        padding: 0;
    }

    .dmi-property-content-section .col-12 {
        padding: 0;
    }

    .dmi-inquiry-form {
        margin: 10px 0 0;
        padding: 24px 40px 70px;
    }

    .dmi-inquiry-form h2:before {
        background: #165b97;
    }

    .dmi-inquiry-form h2 {
        padding: 10px 0 30px;
    }

    

    

    

    .dmi-inquiry-form form button {
        width: 100%;
    }

    .dmi-property-slider .dmi-property-slide {
        width: 75%;
        margin: 0 auto;
    }

    .dmi-property-slider button.owl-prev {
        margin-left: -60px;
    }

    .dmi-property-slider button.owl-next {
        margin-right: -60px;
    }

    .dmi-brochure-link p {
        text-align: center;
    }

    section.dmi-property-intro-section {
        padding: 20px 0 20px 0;
    }

    .list-unstyled {
        margin: 0;
    }

    .dmi-property-center p:first-child {
        margin-bottom: 20px;
    }

    .dmi-property-center p {
        margin-bottom: 20px;
    }

    .dmi-energy {
        padding: 20px 25px;
    }

    .dmi-property-slider {
        margin-top: 40px;
    }

    .dmi-property-intro p {
        margin-bottom: 20px;
    }


    .align-items-center {
        justify-content: center;
    }

    .accordin_mobile {
        border: solid 1px #b9defe;
        box-shadow: 0px 2px 22px #cae1fd;
        display: block;
    }

    

    .accordin_mobile th {
        text-align: center;
    }

    .accordin_mobile th {
        text-align: center;
        padding: 0 0;
    }

    

    

    

    .accordin_mobile .dmi-accordion-content td {
        padding: 8px 0;
    }

    

    .dmi-accordion-row {
        padding: 0 0 30px 0;
        margin: 0;
        background: #fff;
        border-bottom: 2px solid #f4f8fb;
    }

    .col-md-7.dmi-floorplan-image {
        order: 2;
        padding: 0;
    }

    .dmi-accordion-heading {
        padding-top: 20px;
    }

    .dmi-double-bg {
        background-image: none;
        padding: 0px 0 0 0;
    }

    .col-md-6.dmi-pdf-download-mobile .col-md-6 {
        width: 50%;
    }

    .col-md-6.dmi-pdf-download .col-md-7 {
        width: 50%;
    }

    .col-md-6.dmi-pdf-download-mobile {
        background: #ecf5f8;
        padding: 20px 15px 30px;
    }

    .col-md-6.dmi-pdf-download {
        background: #ecf5f8;
        padding: 20px 15px 30px;
        margin: 3px 0 0;
    }

    .dmi-pdf-link {
        padding: 9px 0 0 15px;
    }

    .dmi-pdf-link a {
        width: 97%;
    }

    .col-md-6.dmi-pdf-download .col-md-5.dmi-pdf-link {
        width: 50%;
    }

    

    .dmi-location h2:before {
        margin: 0 10px 0 0;
    }

    .dmi-double-bg h2:before {
        margin: 7px 10px 0 0;
    }

    .dmi-gallery-inner h2:before {
        margin: 0 10px 0 0;
    }

    .dmi-gallery {
        padding: 0 0 0 0;
    }

    .dmi-gallery .dmi-gallery-inner {
        margin-bottom: 0;
        padding: 30px 0 30px 0;
    }

    .dmi-gallery-inner p {
        margin: 30px 0 0px 0;
    }

    section.dmi-location-section {
        padding: 0 0 0px 0;
    }

    

    

    .dmi-location-text h2,
    .dmi-location-text h3 {
        /* Claude 2026-07-28 (Rose): h3 mit aufgenommen + etwas mehr Abstand nach oben zur Trennlinie. */
        margin: 26px 0 14px 0;
    }

    

    .dmi-units p {
        margin: 30px 0 -20px 0;
        font-size: 20px;
    }

    section.dmi-units-section {
        padding: 50px 0 0 0;
    }


    .dmi-property-content p {
        margin: 30px 0 0px 0;
    }

    

    

    

    

    

    

    .dmi-related-offers {
        padding: 50px 0 80px 0;
    }

    .dmi-collapse-arrow h2 a.dmi-accordion-btn {
        display: flex;
    }

    .dmi-property-details .dmi-kfw-slide img {
        width: 40%;
    }

    .dmi-gallery-inner h2 {
        font-size: 24px;
        line-height: 24px;
    }

    .dmi-gallery-inner h2:before {
        width: 6px;
        height: 30px;
    }

    .dmi-location h2 {
        font-size: 24px;
        line-height: 24px;
    }

    .dmi-location h2:before {
        width: 6px;
        height: 30px;
    }

    .dmi-collapse-arrow h2 {
        align-items: center;
        font-size: 24px;
        line-height: 24px;
    }

    .dmi-units {
        padding: 0 0 30px 0;
    }

    .dmi-location {
        padding: 30px 0 30px 0;
    }

    .dmi-property-content h2:before {
        width: 6px;
        height: 30px;
        margin: 0 10px 0 0;
    }

    .dmi-related-offers-inner h2 {
        font-size: 24px;
        line-height: 24px;
    }

    .dmi-related-offers-inner h2:before {
        width: 6px;
        height: 30px;
        margin: 0 10px 0 0;
    }

    .dmi-gallery-inner p {
        margin: 30px 0 -20px 0;
        font-size: 20px;
    }

    

    .dmi-location p {
        font-size: 20px;
        margin: 30px 0 -20px 0;
    }

    /*-----------29-07-21-------*/
    
    
    
    


}

@media(max-width:600px) {
    .dmi-cta-box {
        width: 90%;
        background-size: 100% 100%;
        height: auto;
        padding-bottom: 40px;
        padding-left: 18px;
    }

    .dmi-property-details .dmi-cta-box {
        width: 90%;
        background-size: 100% 100%;
    }

    .dmi-estate-list h1 {
        line-height: 26px;
    }
}

@media(max-width:560px) {
    .dmi-property-details .dmi-cta-box {
        height: auto;
        padding-bottom: 40px;
        padding-left: 18px;
    }

    .dmi-cta-box__text :is(h1, h2) {
        font-size: 20px;
        line-height: 27px;
        padding: 0 0 0 20px;
    }

    .dmi-cta-box__text :is(h1, h2) br {
        display: none;
    }

    .dmi-estate-card {
        margin: 0 0 25px;
    }

    .dmi-cta-box__text :is(h1, h2):before {
        top: 10px;
        left: -2px;
    }

    .dmi-cta-box__text p {
        padding: 0 10px 0 20px;
        margin: 10px 0 0;
    }

    .dmi-cta-box__text p br {
        display: none;
    }

    .dmi-cta-box__phone img {
        margin: 0 20px 0 -2px;
    }

    .dmi-cta-box__phone {
        font-size: 24px;
    }

    .dmi-cta-box__text a {
        display: block;
        margin: 20px auto 0;
        text-align: center;
        width: 86%;
        padding: 18px 0;
    }

    .dmi-cta-box__text p a {
        display: initial;
    }

    .dmi-cta-box__text img.dmi-kfw-badge {
        position: unset;
        left: 0;
        top: 0;
        text-align: right;
        display: block;
        margin: 20px 10px 0 auto;
    }

    .dmi-estate-list .dmi-estate-filter {
        display: block;
    }

    .dmi-estate-list .dmi-estate-filter p {
        margin: 0 0 10px;
    }

    .dmi-filter-select select {
        width: 100%;
    }

    .dmi-sticky-actions ul li a {
        padding: 10px 10px;
    }

    .dmi-units h2 {
        font-size: 34px;
    }

    .dmi-double-bg h2 {
        font-size: 24px;
    }


}

@media(max-width:520px) {

    .dmi-inquiry-form {
        padding: 24px 20px 70px;
    }
}

@media(max-width:480px) {

#world-map{
    width: 363px!important;
}


.overlay .btn-outline-success, .navbar-expand-lg.navbar-light .show ul .btn-outline-success, .navbar-expand-lg.navbar-light ul .btn-outline-success {
   
    width: 140px!important;
    height: 45px!important;
    /* Claude 2026-07-27 (Rose): "JETZT ANFRAGEN"-Text stand im 45px hohen Button oben statt vertikal
       mittig -> per flex im Button zentrieren (vertikal + horizontal). Button-Position unveraendert. */
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
}
.overlay a, .overlay .dmi-consult-box p, .navbar-expand-lg.navbar-light .show ul .dmi-consult-box p, .navbar-expand-lg.navbar-light ul .dmi-consult-box p {
    font-size: 16px!important;
}
    .navbar-collapse {
        top: 0;
        margin-top: 20px !important;
    }
.overlay .dmi-close-btn {
        top: 5px!important;
    }
   .overlay .dmi-consult-box p a {
  
    display: block!important;
}


    .dmi-property-details .dmi-hero {
        /* Claude 2026-07-28 (Rose, Idee A): mehr Foto-Header oben, s. max-width:767px. */
        padding: 110px 0 130px;
    }

    .dmi-inquiry-content p {
        font-size: 16px;
    }

    .accordin_mobile th {
        font-size: 14px;
    }

    .dmi-accordion-content td {
        font-size: 14px;
    }

    .dmi-double-bg h2 {
        font-size: 18px;
        line-height: 27px;
    }

    .dmi-double-bg h2:before {
        height: 45px;
    }

    .dmi-inquiry-content p {
        font-size: 14px;
    }

    .dmi-property-details .dmi-estate-card__content {
        margin: 0 0px;
    }

    .dmi-property-details .dmi-estate-card__content li:first-child {
        padding: 15px 5px 10px 5px;
    }

    .dmi-property-details .dmi-estate-card__content li {
        padding: 12px 5px 10px 5px;
    }

    .dmi-energy h2 {
        font-size: 23px;
    }


    .dmi-units h2 {
        font-size: 30px;
    }

    .dmi-units h2:before {
        height: 40px;
        margin: 0 10px 0 0;
    }

    

}

@media (max-width: 445px) {
    .dmi-cta-box {
        padding-left: 15px;
    }

    .dmi-property-details .dmi-estate-card__content li {
        font-size: 14px;
    }

    .dmi-inquiry-content h2 {
        font-size: 21px;
        line-height: 25px;
    }

    .dmi-contact-badge img {
        width: 65px;
        margin: 7px 0 0 -12px;
    }

    .dmi-property-details .dmi-estate-card__content li span {
        text-align: left;
        width: 105px;
    }

    

    .dmi-accordion-row p {
        font-size: 14px;
    }


    .dmi-pdf-link a {
        font-size: 14px;
    }

    .dmi-pdf-link {
        padding: 0 0 0 0;
    }

    .col-md-6.dmi-pdf-download-mobile .col-md-6 {
        width: 47%;
    }

    .col-md-6.dmi-pdf-link {
        width: 53% !important;
    }

    .dmi-double-bg h2 {
        font-size: 14px;
        line-height: 20px;
    }

    .dmi-double-bg h2:before {
        height: 30px;
    }

    .dmi-units h2 {
        font-size: 24px;
        line-height: 24px;
    }

    .dmi-units h2:before {
        height: 30px;
        width: 6px;
    }

    .dmi-brochure-link p {
        font-size: 14px;
    }

    .dmi-energy h2 {
        font-size: 20px;
    }

    

}


@media (max-width: 420px) {
    .dmi-inquiry-content h2 {
        font-size: 18px;
    }

    .dmi-contact-badge img {
        width: 55px;
    }

    .dmi-inquiry-content p {
        margin: 5px 0 5px 0;
        font-size: 13px;
    }

    .dmi-contact-badge a {
        font-size: 24px;
    }

    .dmi-inquiry-col img.user_img {
        width: 115px;
    }

    .dmi-inquiry-col {
        align-items: inherit;
    }

    .accordin_mobile th {
        font-size: 12px;
        padding: 0 3px;
    }

    .dmi-accordion-content td {
        font-size: 12px;
    }

    .dmi-property-slider button.owl-prev {
        margin-left: -50px;
    }

    .dmi-property-slider button.owl-next {
        margin-right: -50px;
    }
}

@media(max-width:767px) {


    

    

    

    

    

    

    

    

    

    

    

    

    .col-sm-6 {
        flex: 0 0 auto;
        width: 100%;
    }

    

    

    .uber-uns .col-sm-4 {
        width: 90%;
        margin: 0 auto 80px;
    }

    

    

    

    

    

    

    

    

    .dmi-testimonials-header {
        padding-top: 150px;
        padding-bottom: 40px;
    }

    .dmi-testimonials-header .dmi-testimonials-heading h2 {
        margin: 0 0 50px !important;
    }

    .dmi-testimonials-header .dmi-testimonials-heading {
        margin-bottom: 0;
    }

    .erfahren .row-cols-5>* {
        width: 50%;
    }

    .erfahren .row-cols-5>*:last-child {
        margin: 0 auto;
    }

    .col-sm-7 {
        width: 100%;
    }

    .col-sm-5 {
        width: 100%;
    }

    

    

    

    

    

    

    

    form.row.g-3 {
        margin: 0 0;
    }

    

    

    .dmi-footer-bg .row .col-md-3:nth-child(1) {
        width: 100%;
        padding: 0 15px !important;
    }

    .dmi-footer-bg {
        position: relative;
    }

    .dmi-footer-para {
        display: none;
    }

    .dmi-footer-responsive.dmi-footer-para {
        display: block;
    }

    .dmi-footer-responsive.dmi-footer-para {
        border-top: 1px solid #ccc;
        width: 95%;
        margin: 0 auto;
        padding: 20px 0 0;
        text-align: center;
    }

    .dmi-footer-offers ul {
        margin-bottom: 25px;
    }

    /* Claude 2026-07-27 (Rose): Chevron-Bullets vor den Footer-Links waren nicht vertikal zentriert
       (fixes margin-top:5px am img + flex-start). align-items:baseline richtet das Icon an der
       Textbasislinie aus -> bei einzeiligen Links optisch zentriert, bei mehrzeiligen an der ersten
       Zeile. Font-unabhaengig (kein Magic-Margin). */
    .dmi-footer-offers li {
        align-items: baseline;
    }
    .dmi-footer-offers img {
        margin-top: 0;
    }

    .dmi-footer-bg img.dmi-footer-logo {
        width: 60%;
        margin: 0 auto 40px;
        text-align: center;
        display: block;
    }

    /* Claude 2026-07-28 (Rose): Footer-Logo (Signet+Wortmarke) im Mobile-View ausblenden - wirkte zu
       gross und klebte mit zu wenig Abstand an der folgenden "Angebote"-Ueberschrift. Die Startseite
       ist ohnehin ueber den Header erreichbar. */
    .dmi-footer-brand {
        display: none;
    }

    .dmi-footer-bg .col-md-3 {
        padding: 0 0 0 15px !important;
    }

    .col-md-3.dmi-footer-offers {
        order: 1;
        width: 60%;
    }

    .dmi-footer-bg .col-md-2.dmi-footer-offers {
        width: 40%;
        display: block;
        justify-content: space-between;
    }

    .col-md-4.dmi-footer-offers {
        order: 3;
    }

    .col-md-2.dmi-footer-offers {
        order: 2;
    }

    .dmi-footer-responsive.dmi-footer-para {
        order: 4;
    }

    .dmi-responsive-logo {
        display: block;
        width: 70%;
       min-width: 230px;
    }

    /* Claude 2026-07-27 (Rose): Header-Logo klebte am linken Rand (.container hat auf Mobil
       padding-left:0) -> linker Abstand. Nur der Sticky-Header, nicht das Overlay-Menue-Logo. */
    #stickymenu .dmi-responsive-logo {
        margin-left: 15px;
    }

    .dmi-responsive-logo img {
        width: 100%;
    }

    

    

    .dmi-kfw-slide img {
        width: 50%;
    }

    .dmi-kfw-slide {
        position: absolute;
        top: 12px;
        right: 11px;
        text-align: right;
    }

    .dmi-testimonials-widget .dmi-testimonials-heading h2 {
        margin: 0 0 30px;
    }

    .dmi-property-slide .alle a {
        display: inline-block;
        margin: 0 0 40px;
    }

    

    

    


    

   .dmi-sticky-actions {
        height: 150px !important;
    }

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    .dmi-testimonials-heading h2 {
        line-height: 35px !important;
    }

    

    

    .dmi-footer-offers li a {
        font-size: 14px;
    }

    .dmi-testimonials-widget .owl-nav {
        margin-top: 40px !important;
    }

    

    .dmi-testimonials-header .alle a {
        background: #127aa8 !important;
    }

    .alle a {
        text-transform: none !important;
    }

    

    

    

    


}


@media(max-width:480px) {

    /*.dmi-related-offers button.owl-prev {
    margin-left: 55px !important;
    margin-top: 15px;
}
.dmi-related-offers button.owl-next {
    margin-right: 75px !important;
    margin-top: 15px;
}*/
    header .container {
        padding: 0 !important;
    }

    .dmi-responsive-logo {
        padding-left: 0px !important;
    }

    /*


.navbar.navbar-expand-lg.navbar-light.sticky {

}*/


    

    

    

    

    

    

    

    

    .carousel-item {
        height: auto;
    }

    

    

    

    .dmi-testimonials-first .dmi-testimonials-outer {
        height: 465px;
    }

    

    

    

    

    

    

    img.d-block.w-100.desktop {
        display: none !important;
    }

    img.d-block.w-100.responsive {
        display: block !important;
    }

    

    

    

    

    

    

    

    .dmi-property-slide .alle a {
        padding: 15px !important;
    }

    

}

@media(max-width:489px) {
    .dmi-sidebar-head h2:before {
        height: auto; /* Claude 2026-07-20: adaptiver Balken, siehe Basisregel */
    }
}

@media(max-width:400px) {
    

    

    

    

    
}

@media(max-width:378px) {
    
}


@media(max-width:370px) {
}


@media (max-width: 835px) {
    .sidebar.weitere h3 {
        font-size: 17px !important;
        margin-bottom: 25px !important;
    }

    .dmi-estatelist-content p {
        font-size: 17px;
        margin-bottom: 25px !important;
    }
}

@media(min-width:1025px) and (max-width: 1090px) {
    .dmi-property-section .col-md-7 {
        width: 58% !important;
    }

    .dmi-property-section .col-md-5 {
        width: 30.666667%;
    }

    .dmi-inquiry-form {
        padding: 33px 18px 30px;
    }
}

@media(min-width:768px) and (max-width: 790px) {
    .sidebar.pflege ul li {
        font-size: 13.5px;
    }

   .overlay .dmi-close-btn {
    top: 24px!important;
}
}

@media(min-width:320px) and (max-width: 410px) {
    .dmi-sidebar-head h2 img {
        margin: 0 0 0 0px;
        margin-left: 0% !important;
    }
}

@media(min-width:724px) and (max-width: 767px) {
    
}

@media(min-width:652px) and (max-width: 722px) {
    
    .overlay .dmi-close-btn {
    top: 27px!important;
}
.dmi-phone-nav-tab .dmi-responsive-logo a img {
    min-width: 501px!important;
}
}
@media(min-width:736px) and (max-width: 766px) {
   
    .overlay .dmi-close-btn {
    top: 27px!important;
}
.dmi-phone-nav-tab .dmi-responsive-logo a img {
    min-width: 501px!important;
}
}

@media(min-width:580px) and (max-width: 652px) {
    
}

@media(min-width:510px) and (max-width: 560px) {
    .dmi-cta-box__phone img {
        margin: 0 20px 0 0px;
    }
}

@media(min-width:370px) and (max-width: 395px) {

}

@media(min-width:315px) and (max-width: 404px) {
    
}

@media(min-width:348px) and (max-width: 404px) {
    
}

@media(min-width:315px) and (max-width: 348px) {
}

@media(min-width:768px) and (max-width: 780px) {
    .dmi-estate-card__content li {
        padding: 10px 15px 13px 10px;
    }
}

@media (max-width: 767px) {


    .dmi-double-bg .col-md-6 {
        width: 100% !important;
    }

    .dmi-pdf-download .col-md-7 {
        width: 100% !important;
    }

    .dmi-pdf-download .col-md-5.dmi-pdf-link {
        width: 100% !important;
    }

    .dmi-double-bg .col-md-6 a {
        margin-left: 13px;
    }

    .dmi-double-bg h2:before {
        content: "";
        height: 26px;
        width: 7px;
        margin: 5px 10px 0 0;
    }

    .sidebar.weitere h3 {
        font-size: 22px !important;
    }

    .sidebar.pflege ul li {
        font-size: 20px !important;
    }

    /* Claude 2026-07-17 (Bugfix, zweite Fundstelle desselben Rose-Bugs): hier stand
       "background: url(../img/property_sec.png) no-repeat; background-size:100% 100%" - das
       Mobil-Gegenstueck zur bannerbg.png-Regel, die in R1291 aus der Basis-Regel entfernt wurde.
       Weil damals nur die Basis-Regel bereinigt wurde, war der von Rose mehrfach gemeldete Fehler
       ("altes statisches Hintergrundbild") unterhalb von 767px die ganze Zeit weiterhin aktiv: das
       echte Objektfoto (.hero-carousel) beginnt erst nach .banner_sections padding-top:54px, in
       genau diesem 54px-Streifen schien property_sec.png (eine Wiese) oberhalb des Fotos durch.
       Per elementFromPoint + background-image-Kette an der Streifen-Koordinate nachgewiesen, im
       Mobil-Screenshot als gruener Balken sichtbar. Hintergrund komplett entfernt - seit dem
       Hero-Slideshow-Redesign kommt das Bild ausschliesslich aus .hero-carousel__item. */
    
   

    .dmi-estatelist-content p {
        font-size: 19px;
    }

    .navbar-collapse {
        width: 100%;
        left: 0px !important;
        overflow: hidden;
    }

    .navbar-collapse {
        width: 100% !important;
        left: -0px !important;
        overflow: hidden !important;
    }

    .dmi-contact-badge a {
        font-size: 31px !important;
    }

    .dmi-property-details .dmi-hero {
        background: url(../img/details_pro.png) no-repeat;
        background-size: 100% 100%;
    }

    .dmi-sidebar-head h2 img {
        display: block;
        margin-left: 20% !important;
    }

    .dmi-sidebar-head h2 {
        align-items: center;
    }
}

@media (max-width: 348px) {
    .navbar-collapse {
        top: 65px;
    }


}


@media (max-width: 1165px) {
    .dmi-pdf-download {
        padding-left: 10px;
    }

    .dmi-pdf-link {
        padding: 12px 0 0 0px;
    }
}

@media (max-width: 1117px) {
    .dmi-double-bg h2 {
        font-size: 26px;
        line-height: 31px;
    }

    .dmi-pdf-link a {
        font-size: 16px;
        width: 190px;
    }

    .dmi-double-bg h2:before {
        content: "";
        height: 53px;
        margin: 7px 10px 0 0;
    }

    .dmi-sidebar-head h2 img {
        margin: 0 0 0 0px;
        margin-left: 0%;
    }
}

@media (min-width: 932px) and (max-width: 1024px) {
    .dmi-double-bg h2:before {
        content: "";
        height: 30px;
        margin: 3px 10px 0 0;
    }
}

@media (min-width: 580px) and (max-width: 767px) {
}

@media (min-width: 490px) and (max-width: 580px) {
}

@media (min-width: 836px) and (max-width: 870px) {
    .dmi-sidebar-head h2 img {
        margin: 0 0 0 0px;
    }
}@media (min-width: 812px) and (max-width: 835px) {
    .overlay .dmi-close-btn {
    top: 24px!important;
    right: 15px!important;
}
}

@media (min-width: 1080px) and (max-width: 1207px) {
    .dmi-inquiry-form {
        padding: 33px 20px 30px;
    }

    .dmi-property-section .col-md-5 {
        width: 31.666667%;
    }

    /* Claude 2026-07-17 (Bugfix, siehe @media(max-width:1270px) oben): passendes Gegenstueck zur
       col-md-5-Breite in genau diesem engeren Bereich, sonst bleibt col-md-7 bei 62.333333% aus dem
       umschliessenden 1270px-Block stehen und die Summe ergibt wieder nicht 100%. */
    .dmi-property-section .col-md-7 {
        width: 68.333333%;
    }
}

/* Claude 2026-07-17 (Bugfix, Rose-Meldung "Kontaktformular unnoetig schmal bei 1027px"): #dmi-inquiry-form
   wird per JS (custom.js) im gesamten 1024-1270px-Bereich vor "Weitere Angebote" verschoben (siehe
   dort) - .col-md-5 bleibt danach leer/ausgeblendet, .col-md-7 nimmt die volle Breite ein. Bewusst
   NACH den beiden obigen Bloecken (Basis-1270px-Block und die engere 1080-1207px-Praezisierung)
   platziert, damit diese Regel bei gleicher Spezifitaet in der Kaskade gewinnt - sonst wuerde v.a.
   der 1080-1207px-Block (col-md-5:31.666667%) weiterhin durchschlagen. */
@media (max-width: 1270px) {
    .dmi-property-section .col-md-5 {
        display: none;
    }

    .dmi-property-section .col-md-7 {
        width: 100%;
        padding: 0 15px 0 15px;
    }
}

@media (min-width: 1024px) and (max-width: 1230px) {
    .dmi-pdf-download {
        padding-left: 20px;
    }
}

@media (min-width: 767px) and (max-width: 1024px) {
    .dmi-double-bg a {
        margin-left: 38px;
    }
}

@media (min-width: 834px) and (max-width: 910px) {
    .dmi-sidebar-head h2:before {
        height: auto; /* Claude 2026-07-20: adaptiver Balken, siehe Basisregel */
        margin: 0 4px 0 0;
    }
}


@media (max-width: 426px) {
    

    .dmi-double-bg h2:before {
        content: "";
        height: 55px;
        margin: 5px 10px 0 0;
    }


}


@media screen and (min-width: 767px) {

    button.owl-prev {
        margin-left: -25px !important;

    }

    .dmi-property-slider span.prev::before {
        width: 43px;
    }

    .dmi-property-slider span.next::before {
        width: 50px;
    }


    button.owl-next {
        margin-right: -10px !important;
    }

}


.dmi-header-bottom li {
    padding: 0 22px 0 28px !important;
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, .55);
    padding: 20px 0 23px 0!important;
}

/*----------8-7-21 pt------*/

body #contact-enquiryform>div .custom_error {
    border: 1px solid red !important;
}

.g-recaptcha.has-error iframe {
    border: 1px solid red !important;
}

.message #error {
    color: red !important;
    border: 1px solid red;
    padding: 0 5px;
    text-align: center !important;
}


body #contact-enquiryform>div>.mage-error {
    color: red !important;
}

body #contact-enquiryform>div>div>.mage-error {
    color: red !important;
}


@media screen and (max-device-width: 991px) and (orientation: landscape) {
    div#navbarTogglerDemo01 {
        overflow: scroll !important;
        height: 265px !important;
    }
}

@media (min-device-width: 467px) and (max-device-width: 600px) {

    .navbar-collapse {
        top: 83px !important;
    }
}

@media (min-device-width: 601px) and (max-device-width: 727px) {

    .navbar-collapse {
        top: 100px !important;
    }
}

@media (min-device-width: 728px) and (max-device-width: 767px) {

    .navbar-collapse {
        top: 110px !important;
    }
}


/*----------9-7-21 pt------*/

body #contact-enquiryform>div .custom_error,
.dmi-property-content-section .col-12 .custom_error {
    border: 1px solid red !important;
}

.g-recaptcha.has-error iframe {
    border: 1px solid red !important;
}

.message #error,
.dmi-inquiry-form form .message .pderror {
    color: red !important;
    border: 1px solid red;
    padding: 0 5px;
    text-align: center !important;
}

.dmi-inquiry-form form .message .pderror,
.dmi-inquiry-form form .message .pdresult {
    margin-top: 20px;
}

.dmi-inquiry-form form .message {
    padding: 0;
    margin: 0;
}


form .form-check {
    display: block;
}

body #contact-enquiryform>div>.mage-error,
.dmi-property-content-section .col-12 .pdmage-error {
    color: red !important;
}

body #contact-enquiryform>div>div>.mage-error {
    color: red !important;
}


.dmi-inquiry-form form .col-12:nth-child(11) input:hover {
    background: #165b97 !important;
    transition: 0.5s;
}


.btn-primary:focus {
    box-shadow: none !important;
    background: #127aa8 !important;
}


form input#gridCheck {
    margin-right: 0;
}

.message .result,
.dmi-inquiry-form form .message .pdresult {
    color: green;
    border: 1px solid green;
    text-align: center;
}


/* 10-7-2021 */


.dmi-inquiry-form form .col-12:nth-child(11) input {
    float: none;
    width: 100%;
    height: 60px;
    background: #127aa8;
}

.dmi-property-content-section .col-12:nth-child(10) .form-check {
    padding: 0;
    position: relative;
}

.dmi-property-content-section .col-12:nth-child(10) .pdmage-error {
    position: static;
}

.dmi-property-content-section .col-12:nth-child(10) .form-check input {
    height: 15px !important;
    width: 15px !important;
    max-width: 15px;
    margin: 0;
    line-height: 0;
    vertical-align: middle;
}

.dmi-property-content-section .col-12:nth-child(11) {
    position: relative;
}

.dmi-property-content-section .col-12:nth-child(11) div#pdajaxLoader {
    position: absolute;
    right: -25px;
    top: 18px;
}

.dmi-property-content-section .col-12:nth-child(11) div#pdajaxLoader img {
    width: 100%;
    height: 100%;
}


.dmi-property-content-section .col-12:nth-child(10) .form-check .check-div {
    display: inline-block;
    position: relative;
    width: 17px;
    height: 17px;
    line-height: 0;
    border-radius: 2px;
}


@media only screen and (min-width: 768px) and (max-width: 1023px) {
    


    

    

    

    

    


    /* 13-7-2021/ */
    

    .dmi-property-content-section .col-12:nth-child(11) {
        text-align: center;
        width: auto;
        margin: 0 auto;
    }

    .dmi-inquiry-form form .col-12:nth-child(11) input {
        width: auto;
        padding: 0 50px;
    }

    /* 13-07-2021 */
}

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    
    


    /* 13-7-2021 */
    

    

    

    

    

    

    .dmi-property-content-section .col-12:nth-child(11) {
        text-align: center;
        width: auto;
        margin: 0 auto;
    }

    .dmi-inquiry-form form .col-12:nth-child(11) input {
        width: auto;
        padding: 0 50px;
    }


    /* 30-7-2021 */

    #world-map{
    width: 415px!important;
}

}

@media only screen and (max-width: 767px) {
    


    .modal-content {
        max-width: 340px !important;
        height: 300px;
        margin: 0 auto;
    }

    

    

    

    .dmi-property-content-section .col-12:nth-child(11) div#pdajaxLoader {
        right: -18px;
        width: 15px;
        height: auto;
    }

    

    .dmi-inquiry-form form .form-check label {
        font-size: 14px;
    }

    body #contact-enquiryform>div>.mage-error,
    .dmi-property-content-section .col-12 .pdmage-error {
        font-size: 14px;
    }

    .message #error,
    .dmi-inquiry-form form .message .pderror {
        font-size: 14px;
    }


    

    

    

    

    

    


    /* 13-7-2021 */
    

    

    

    .dmi-property-content-section .col-12:nth-child(11) {
        width: auto;
        margin: 0 auto;
    }

    .dmi-inquiry-form form .col-12:nth-child(11) input {
        padding: 0 50px;
    }

    /* 13-7-2021 */
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    

    .modal-content {
        max-width: 340px !important;
        height: 220px;
    }
}

/* 10-7-2021 */


/*28-7-2021*/
.overlay {
  height: 100%;
  width: 0px;
  position: fixed;
  z-index: 999999999 !important;
  top: 0;
  right: 0;
  background-color: #0c4b82!important;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content, nav.navbar.navbar-expand-lg.navbar-light .navbar ul {
  position: relative;
  width: 100%;
  text-align: center;

}

.overlay a, .overlay .dmi-consult-box p  {
  /*padding: 8px;*/
  text-decoration: none;
  font-size: 20px;
  color: #45B5AA;
  display: block;
  transition: 0.3s;
  font-weight: 500;
}


.dmi-close-btn-size{
    font-size: 36px !important;
}
.overlay a:hover, .overlay a:focus {
  color: #7EE1D6;
}

.overlay .dmi-close-btn{
  position: absolute;
  color: #0e4d83 !important;
  float: right;
  font-size: 40px;
  top: 5px;
  right: 15px;
  bottom: auto;
  border: 2px solid  #0e4d83;
  border-radius: 50%;
  padding: 5px 5px;
  height: 35px;
  line-height: 17px;
  font-size: 40px !important;
  font-weight: normal!important;
}
.overlay .btn-outline-success, .navbar-expand-lg.navbar-light .show ul .btn-outline-success, .navbar-expand-lg.navbar-light ul .btn-outline-success  {
   background: #127aa8 !important;
    color: #fff !important;
    border: none !important;

    font-family: "Niveau Grotesk";
    width: 198px;
    height: 56px;
    font-size: 17px;
    font-weight: bold;
    padding: 0; 
    margin-top: 20px;
}

.overlay .btn-outline-success:hover, .navbar-expand-lg.navbar-light .show ul .btn-outline-success:hover, .navbar-expand-lg.navbar-light ul .btn-outline-success:hover  {
    background: #165b97 !important;
}

.overlay .dmi-consult-box, .navbar-expand-lg.navbar-light .show ul .dmi-consult-box, .navbar-expand-lg.navbar-light ul .dmi-consult-box {
    margin-top: 20px;
   
    padding-left: 35px;
    position: relative;
    display: flex;
    flex-wrap: left;
}

.overlay .dmi-consult-box:before, .navbar-expand-lg.navbar-light .show ul .dmi-consult-box:before, .navbar-expand-lg.navbar-light ul .dmi-consult-box:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(../img/phone-white.png) no-repeat;
width: 30px;
height: 30px;
} 


.overlay .dmi-consult-box p, .navbar-expand-lg.navbar-light .show ul .dmi-consult-box p, .navbar-expand-lg.navbar-light ul .dmi-consult-box p{
text-align: left;
margin-top: 0!important;
display: inline-block;
color: #fff!important;
white-space: nowrap;
font-family: "Niveau Grotesk";
}
/* .overlay .dmi-consult-box {
text-align: left;
margin-top: 0!important;
}*/
.overlay .dmi-consult-box p a, .navbar-expand-lg.navbar-light .show ul .dmi-consult-box p a, .navbar-expand-lg.navbar-light ul .dmi-consult-box p a{
 color: #127aa8 !important;
 display: inline-block;
}

.dmi-close-btn-wrap{
    width: 30%;
    position: relative;
}

 nav.navbar.navbar-expand-lg.navbar-light .dmi-phone-nav-tab{
    padding:21px 0  21px  15px;
    background: #fff;
        transition: 0.3s;
}
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .dmi-close-btn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

main {
  height: 100vh;
}

.dmi-nav-accent {
    background-color: transparent !important;
}

.navbar .fixed-action-btn.dmi-responsive-fixed-btn {
    display: none !important;
}

.dmi-header-bottom .dmi-responsive-fixed-btn{
    display: none !important;
}
@media screen and (max-width: 450px){
.overlay .dmi-close-btn {
    font-size: 40px;

    color: #0e4d83 !important;
}
}
@media screen and (max-width: 991px){
.navbar .fixed-action-btn.dmi-responsive-fixed-btn {
    display: block !important;
}
.dmi-header-bottom .dmi-responsive-fixed-btn{
    display: block !important;
}

.recaptcha-div iframe {
    width: 97%;
    border-radius: 6px;
}

.dmi-responsive-fixed-btn {
    display: none !important;
}

.dmi-nav-btn-content{
    display: block;
}


}
/* Claude 2026-07-17 (Visual-QA Paket 3, Fund auf /ueber-uns + /service + allen Seiten mit
   Service-Sidebar): Die Liste "Unser Service auf einen Blick" (components/_serviceWidget.php,
   Inhalt aus der DB via $service->getTextShort()) rendert als <ul> - hatte aber weder
   Aufzaehlungszeichen noch Abstand zwischen den Punkten (gemessen: list-style:none, padding:0,
   li margin-bottom:0). Die 5 Punkte liefen dadurch zu einer Textwand zusammen und waren als
   einzelne Leistungen nicht erkennbar.
   Bewusst auf .service gescopet - der Inhalt kommt aus TinyMCE und die Regel soll nicht andere
   DB-Listen im Projekt treffen. Punktfarbe #127aa8 ist die durchgehende Akzentfarbe der Seite. */
.service ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.service ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
}

.service ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #127aa8;
}

/* Claude 2026-07-17 (Visual-QA Paket 3): Textblock einer Kundenmeinung. .kundenmeinung ist ein
   Flex-Container (Foto links, Text rechts) - ohne diesen Wrapper wurde JEDES Kind des <li> zur
   eigenen Spalte: Titel-Absatz, Text-Absatz und Autor-Absatz standen nebeneinander statt
   untereinander. flex:1 laesst den Textblock den Rest der Breite neben dem Foto einnehmen;
   min-width:0 verhindert, dass langer Text den Flex-Item ueber die Zeile hinaus aufblaeht. */
.kundenmeinung__text {
    flex: 1;
    min-width: 0;
}

/* =========================================================================================
   Beispielrechnung Denkmalabschreibung auf der Objektseite (Claude 2026-07-31, Karte #127aa8, Trennlinie #45b9e8, Playfair/Niveau Grotesk) -
   geaendert ist nicht die Optik, sondern die Aussage.
   ========================================================================================= */
.dmi-afa			{ background-image: url(../img/property_bg_sec.png); background-size: 100% 100%;
			  padding: 90px 0 74px 0; color: #fff; }
.dmi-afa-inner			{ max-width: 940px; margin: 0 auto; }
.dmi-afa-title			{ font-family: "Playfair Display"; font-size: 44px; font-weight: bold;
			  line-height: 1.12; margin: 0 0 10px; position: relative; padding-left: 28px; }
/* Der weisse Balken ist absolut positioniert, NICHT Flex-Item: als Flex-Container wuerde jedes
   Inline-Element der Ueberschrift selbst zum Flex-Item und bekaeme den Spaltenabstand. */
.dmi-afa-title:before		{ content: ""; position: absolute; left: 0; top: 8px;
			  width: 8px; height: 46px; background: #fff; }
.dmi-afa-sub			{ font-family: "Niveau Grotesk"; font-size: 17px; color: rgba(255,255,255,.72);
			  margin: 0 0 38px; padding-left: 28px; line-height: 1.5; }

/* Der 12-Jahres-Verlauf: massstabsgetreu (Balkenhoehe = Verhaeltnis der AfA-Saetze). */
.dmi-afa-schedule		{ margin: 0 0 34px; }
.dmi-afa-bars			{ display: flex; align-items: flex-end; gap: 6px; height: 132px; }
.dmi-afa-bar			{ flex: 1; background: #127aa8; border-top: 3px solid #45b9e8;
			  border-radius: 3px 3px 0 0; position: relative; }
.dmi-afa-bar.is-low		{ opacity: .72; }
.dmi-afa-bar b			{ position: absolute; left: 0; right: 0; bottom: -24px; text-align: center;
			  font-size: 11px; font-weight: normal; color: rgba(255,255,255,.72); }
.dmi-afa-legend			{ display: flex; justify-content: space-between; gap: 20px; margin-top: 34px;
			  padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18);
			  font-size: 13px; color: rgba(255,255,255,.72); }
.dmi-afa-legend b		{ color: #fff; font-weight: 600; }

.dmi-afa-claim			{ font-family: "Playfair Display"; font-size: 28px; line-height: 1.35; margin: 0 0 10px; }
.dmi-afa-claim em		{ font-style: normal; color: #63c8ee; }
.dmi-afa-note			{ font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.72);
			  max-width: 66ch; margin: 0 0 28px; }

.dmi-afa-actions		{ margin: 0 0 34px; }
.dmi-afa-btn			{ display: inline-block; padding: 15px 26px; border-radius: 3px;
			  font-size: 14px; font-weight: bold; letter-spacing: .06em; text-transform: uppercase;
			  text-decoration: none; border: 1px solid transparent; }
.dmi-afa-btn-primary		{ background: #fff; color: #127aa8; }
.dmi-afa-btn-primary:hover	{ background: #e8f4fa; color: #0e5f84; text-decoration: none; }
.dmi-afa-btn:focus		{ outline: 3px solid #63c8ee; outline-offset: 3px; }

.dmi-afa-assumptions		{ border-top: 1px solid rgba(255,255,255,.18); padding-top: 20px;
			  font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.72); }
.dmi-afa-assumptions b		{ color: #fff; }
.dmi-afa-empty			{ background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.3);
			  border-radius: 4px; padding: 26px 24px; }
.dmi-afa-empty p		{ font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 62ch; }

@media (max-width: 767px) {
  .dmi-afa			{ padding: 52px 0 46px 0; }
  .dmi-afa-title		{ font-size: 27px; padding-left: 18px; }
  .dmi-afa-title:before		{ width: 5px; height: 32px; top: 5px; }
  .dmi-afa-sub			{ font-size: 15px; padding-left: 18px; }
  .dmi-afa-bars			{ height: 96px; gap: 3px; }
  .dmi-afa-bar b		{ font-size: 9px; }
  /* Drei Legendenspalten sind auf Handybreite gequetscht - untereinander lesbarer. */
  .dmi-afa-legend		{ display: block; }
  .dmi-afa-legend span		{ display: block; margin-bottom: 5px; }
  .dmi-afa-claim		{ font-size: 21px; }
}

/* Aufklappbarer Rechner (Variante C, Teil B) - Claude 2026-07-31. */
.dmi-afa-reveal			{ margin: 0 0 28px; }
.dmi-afa-reveal > summary	{ cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold;
			  letter-spacing: .06em; text-transform: uppercase; color: #fff;
			  padding: 14px 22px; border: 1px solid rgba(255,255,255,.45); border-radius: 3px; }
.dmi-afa-reveal > summary::-webkit-details-marker { display: none; }
.dmi-afa-reveal > summary:after	{ content: " +"; }
.dmi-afa-reveal[open] > summary:after { content: " –"; }
.dmi-afa-reveal > summary:hover	{ border-color: #fff; }
.dmi-afa-reveal > summary:focus	{ outline: 3px solid #63c8ee; outline-offset: 3px; }
.dmi-afa-calc			{ margin-top: 22px; background: rgba(255,255,255,.07);
			  border: 1px solid rgba(255,255,255,.16); border-radius: 4px; padding: 22px 24px; }
.dmi-afa-fields			{ display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-end; }
.dmi-afa-field label,
.dmi-afa-fieldlabel		{ display: block; font-size: 13px; color: rgba(255,255,255,.72); margin-bottom: 7px; }
.dmi-afa-input,
.dmi-afa-preis			{ width: 170px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.35);
			  background: rgba(255,255,255,.96); color: #123; border-radius: 3px; font-size: 16px; }
.dmi-afa-input:focus,
.dmi-afa-preis:focus		{ outline: 3px solid #63c8ee; outline-offset: 1px; }
.dmi-afa-seg			{ display: inline-flex; border: 1px solid rgba(255,255,255,.35);
			  border-radius: 3px; overflow: hidden; }
.dmi-afa-seg button		{ padding: 11px 18px; background: none; border: 0; color: #fff;
			  font-size: 14px; font-family: inherit; cursor: pointer; }
.dmi-afa-seg button[aria-pressed="true"] { background: #fff; color: #127aa8; font-weight: bold; }
.dmi-afa-seg button:focus	{ outline: 3px solid #63c8ee; outline-offset: -3px; }
.dmi-afa-result			{ margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.dmi-afa-result .dmi-afa-claim	{ font-size: 24px; margin-bottom: 14px; }
.dmi-afa-breakdown		{ list-style: none; margin: 0 0 14px; padding: 0; max-width: 520px; }
.dmi-afa-breakdown li		{ display: flex; justify-content: space-between; gap: 16px;
			  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 15px; }
.dmi-afa-breakdown li:last-child { border-bottom: 0; }
.dmi-afa-breakdown span		{ color: rgba(255,255,255,.72); }
.dmi-afa-rechtsstand		{ font-size: 12.5px; color: rgba(255,255,255,.72); margin: 0; }
.dmi-afa-hint			{ margin: 16px 0 0; padding: 10px 14px; border-radius: 3px;
			  background: rgba(255,255,255,.14); font-size: 14px; line-height: 1.55; }
@media (max-width: 767px) {
  .dmi-units-thead th	{ font-size: 15px; padding: 10px 6px; }
  .dmi-units-thead th img { width: 20px; height: auto; }
  .dmi-afa-fields		{ gap: 16px; }
  /* ⚠️ .dmi-afa-preis muss mit: es hatte als einziges Feld keine eigene Breitenregel und
     blieb auf dem Handy schmal, waehrend die anderen die volle Breite nahmen
     (Rose 2026-08-10). */
  .dmi-afa-input,
  .dmi-afa-preis { width: 100%; }
  .dmi-afa-field		{ width: 100%; }
  .dmi-afa-result .dmi-afa-claim { font-size: 19px; }
}

/* Klammerzusatz in der Unterzeile der Beispielrechnung (Preisspanne / AfA-Spanne). */
.dmi-afa-hinweis { display: block; margin-top: 4px; font-size: 13.5px; opacity: .85; }

/* ============================================================================
   Energieausweis-Skala (Objektseite) - Claude 2026-08-10 (Rose)
   GEG-Farbverlauf wie der offizielle Bandtacho (gruen -> gelb -> rot), neun
   gleich breite Klassensegmente A+ bis H. Die ZEIGERPOSITION rechnet
   lib/EnergieSkala.class.php stueckweise nach den echten GEG-Klassengrenzen -
   nicht linear wie die dmi_de-Vorlage (dort landet 76 kWh im falschen Segment).
   Klassenbuchstaben stehen IM Band (weiss + Schattenkante, wie im amtlichen
   Ausweis); die aktive Klasse ist zusaetzlich vergroessert und unterstrichen.
   ========================================================================= */
.dmi-energy-gesetz {
    font-size: 16px;
    font-family: "Niveau Grotesk", sans-serif;
    font-weight: 500;
    color: #6d757c;
}
.dmi-energy-skala {
    position: relative;
    margin: 30px 0 26px;
}
.dmi-energy-wertmarke {
    position: relative;
    display: inline-block;
    transform: translateX(-50%);
    margin-bottom: 0;
    padding: 4px 12px;
    background: #165b97;            /* dmi-Akzentblau */
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
}
.dmi-energy-band {
    position: relative;
    display: flex;
    height: 44px;
    border-radius: 5px;
    overflow: hidden;
    /* Verlaufsstopps auf den Segmentmitten (9 Segmente a 11,1 %) */
    background: linear-gradient(90deg,
        #008d36 0%, #39a935 12%, #95c11f 25%, #d3d800 37%, #ffec00 50%,
        #fbb900 62%, #f39200 75%, #e63312 87%, #d1121b 100%);
}
.dmi-energy-klasse {
    flex: 1 1 0;
    text-align: center;
    line-height: 44px;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    border-right: 2px solid rgba(255, 255, 255, .55);
}
.dmi-energy-klasse:last-child { border-right: none; }
.dmi-energy-klasse--ist {
    font-size: 24px;
    text-decoration: underline;
    text-underline-offset: 5px;
}
.dmi-energy-zeiger {                /* senkrechte Markierungslinie im Band */
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    background: #165b97;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
}

/* Claude 2026-08-11 (Rose, Georgsmarienhuette): der Pfeil ist ein EIGENES Element an der
   echten Wertposition. Vorher hing er als ::after an der Sprechblase - wird die am Rand
   per clamp() festgehalten, zeigte er auf die Blasenmitte statt auf den Wert (Klasse A,
   Pfeil auf B). Die Blase ist jetzt nur noch das daneben schwebende Etikett. */
.dmi-energy-band-huelle { position: relative; padding-top: 7px; }
.dmi-energy-pfeil {
    position: absolute; top: 0; width: 0; height: 0; margin-left: -7px;
    border: 7px solid transparent; border-bottom: none; border-top: 7px solid #165b97;
}
.dmi-energy-daten {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 0;
}
.dmi-energy-daten dt {
    font-size: 18px;
    font-weight: 600;
    color: #2e2e2e;
}
.dmi-energy-daten dd {
    font-size: 18px;
    font-weight: 400;
    color: #2e2e2e;
    margin: 0;
}
@media (max-width: 767px) {
    .dmi-energy-band { height: 38px; }
    .dmi-energy-klasse { line-height: 38px; font-size: 15px; }
    .dmi-energy-klasse--ist { font-size: 19px; }
    .dmi-energy-wertmarke { font-size: 13px; padding: 3px 9px; }
    .dmi-energy-daten { grid-template-columns: 1fr; gap: 2px; }
    .dmi-energy-daten dd { margin-bottom: 8px; }
}

/* ============================================================================
   Ratgeber-Zielseiten (Landingpage-Konsolidierung) - Claude 2026-08-11 (Rose:
   "schoene Darstellung, um von der Wall of Text wegzukommen"). Lesespalte mit
   Luft, Sprungmarken-Chips, Ablauf-Zeitleiste, Foto-Zwischenbilder, Rechen-
   Karte, AfA-Diagramm, Grunderwerbsteuer-Kacheln. Kartenraster am Ende nutzt
   die vorhandenen .dmi-estate-card-Stile.
   ========================================================================= */
.dmi-ratgeber { max-width: 880px; margin: 0 auto; padding: 10px 0 40px; }
.dmi-ratgeber section { margin-top: 44px; scroll-margin-top: 155px; }
.dmi-ratgeber h2 {
    font-family: "Playfair Display"; font-weight: 700; font-size: 30px; color: #2e2e2e;
    padding-bottom: 10px; border-bottom: 3px solid #127aa8; display: inline-block; margin-bottom: 16px;
}
.dmi-ratgeber h3 { font-family: "Playfair Display"; font-weight: 700; font-size: 20px; color: #165b97; margin: 22px 0 8px; }
.dmi-ratgeber p, .dmi-ratgeber li { font-size: 17px; line-height: 1.65; color: #2e2e2e; }
.dmi-ratgeber p { margin-bottom: 14px; }
.dmi-ratgeber a { color: #165b97; text-decoration: underline; text-underline-offset: 2px; }
.dmi-ratgeber-lead { font-size: 20px; line-height: 1.6; color: #2e2e2e; margin: 18px 0 6px; }
.dmi-ratgeber-klein { font-family: "Niveau Grotesk", sans-serif; font-size: 15px; font-weight: 500; color: #6d757c; }

/* Sprungmarken */
.dmi-ratgeber-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.dmi-ratgeber-toc a {
    display: inline-block; padding: 7px 14px; border: 1px solid #d9e0ea; border-radius: 999px;
    font-size: 14px; font-weight: 600; color: #165b97; text-decoration: none; background: #f6f9fc;
}
.dmi-ratgeber-toc a:hover { background: #165b97; color: #fff; border-color: #165b97; }

/* Drei-Vorteile-Raster */
.dmi-ratgeber-triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 6px 0 10px; }
.dmi-ratgeber-vorteil { background: #f6f9fc; border: 1px solid #d9e0ea; border-radius: 8px; padding: 18px 20px; }
.dmi-ratgeber-vorteil h3 { margin-top: 0; }
.dmi-ratgeber-vorteil p { margin-bottom: 0; font-size: 15.5px; }

/* Ablauf-Zeitleiste */
.dmi-ratgeber-ablauf { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: schritt; position: relative; }
.dmi-ratgeber-ablauf::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: #d9e0ea; }
.dmi-ratgeber-ablauf li { position: relative; padding: 7px 0 22px 50px; counter-increment: schritt; }
.dmi-ratgeber-ablauf li:last-child { padding-bottom: 0; }
/* Kreis 32px, Mitte auf der Mitte der ersten Textzeile.
   ⚠️ Die ZIFFER sass zusaetzlich 2px zu tief IM Kreis (Rose, dreimal gemeldet - ich hatte
   dreimal Kreis-gegen-Text gemessen statt Ziffer-im-Kreis). Grund: Playfair-Ziffern sitzen
   tief in der Zeilenbox, Flex zentriert die BOX, nicht die Glyphe. padding-bottom verkleinert
   die Inhaltsflaeche von unten und hebt die Glyphe entsprechend an (per Pixelanalyse des
   gerenderten Bildes justiert, nicht nach Gefuehl). */
.dmi-ratgeber-ablauf li::before {
    content: counter(schritt); position: absolute; left: 0; top: 6px;
    width: 32px; height: 32px; border-radius: 50%; background: #165b97; color: #fff;
    font-family: "Playfair Display"; font-weight: 700; font-size: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; padding-bottom: 4px;
    box-shadow: 0 0 0 4px #fff;
}

/* Foto-Zwischenbilder echter Denkmaeler */
.dmi-ratgeber-foto { display: block; position: relative; margin: 40px 0 4px; border-radius: 8px; overflow: hidden; }
.dmi-ratgeber-foto img { display: block; width: 100%; height: auto; }
.dmi-ratgeber-foto__cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 12px;
    background: linear-gradient(to top, rgba(11,30,54,.85), rgba(11,30,54,0));
    color: #fff; font-size: 15px; font-weight: 600;
}
.dmi-ratgeber-foto:hover .dmi-ratgeber-foto__cap { text-decoration: underline; }

/* Merklisten */
.dmi-ratgeber-checks, .dmi-ratgeber-risiken { list-style: none; margin: 8px 0 0; padding: 0; }
.dmi-ratgeber-checks li, .dmi-ratgeber-risiken li { position: relative; padding: 7px 0 7px 34px; }
.dmi-ratgeber-checks li::before {
    content: "\2713"; position: absolute; left: 0; top: 11px; width: 22px; height: 22px;
    background: #127aa8; border-radius: 50%; color: #fff; font-size: 13px; text-align: center; line-height: 22px;
}
.dmi-ratgeber-risiken li::before {
    content: "!"; position: absolute; left: 0; top: 11px; width: 22px; height: 22px;
    background: #c0392b; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; text-align: center; line-height: 22px;
}

/* Rechen-Karte */
.dmi-ratgeber-rechnung { background: #f6f9fc; border: 1px solid #d9e0ea; border-left: 5px solid #165b97; border-radius: 8px; padding: 20px 24px; }
.dmi-ratgeber-rechnung__profil { font-size: 15.5px; color: #4a5560; }
.dmi-ratgeber-rechnung table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.dmi-ratgeber-rechnung td { padding: 9px 0; border-bottom: 1px solid #e3e9f1; font-size: 16.5px; }
.dmi-ratgeber-rechnung td:last-child { text-align: right; white-space: nowrap; }
.dmi-ratgeber-rechnung__summe td { border-bottom: none; border-top: 2px solid #165b97; font-size: 18px; }
.dmi-ratgeber-disclaimer { font-size: 13.5px; color: #6d757c; margin-bottom: 0; }

/* AfA-Diagramm */
.dmi-ratgeber-chart { margin: 18px 0 8px; }
.dmi-ratgeber-chart svg { width: 100%; height: auto; }
.dmi-ratgeber-chart figcaption { font-size: 14px; color: #6d757c; text-align: center; margin-top: 4px; }

/* Grunderwerbsteuer-Kacheln */
.dmi-ratgeber-gest { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.dmi-ratgeber-gest__land {
    display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
    background: #f6f9fc; border: 1px solid #d9e0ea; border-radius: 6px; padding: 8px 12px; font-size: 14px;
}
.dmi-ratgeber-gest__land strong { color: #165b97; font-size: 15px; white-space: nowrap; }

/* Ratgeber-Verweis im dunklen AfA-Kasten (Rose 2026-08-12, SEO-Verlinkung) */
.dmi-afa-mehr { margin: 10px 0 0; font-size: 14px; }
.dmi-afa-mehr a { color: #9fd1f5; text-decoration: underline; }
.dmi-afa-mehr a:hover { color: #fff; }

/* Wissens-Band unter der Objektliste (Rose 2026-08-12, Verlinkungs-Feinschliff) */
.dmi-wissen-band { margin-top: 34px; padding: 30px 0 8px; border-top: 1px solid #e5e5e5; }
.dmi-wissen-band h2 {
    font-size: 24px; margin: 0 0 16px; text-align: left;
}
.dmi-wissen-band__karten {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.dmi-wissen-band__karten a {
    display: block; background: #fff; border: 1px solid #d9e0ea; border-radius: 8px;
    padding: 14px 16px; text-decoration: none; color: #2e2e2e;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dmi-wissen-band__karten a:hover { border-color: #165b97; box-shadow: 0 2px 10px rgba(22,91,151,.10); }
.dmi-wissen-band__karten strong { display: block; color: #165b97; font-size: 16px; margin-bottom: 5px; }
.dmi-wissen-band__karten span { font-size: 13.5px; line-height: 1.5; color: #4a5560; }
@media (max-width: 991px) { .dmi-wissen-band__karten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dmi-wissen-band__karten { grid-template-columns: 1fr; } }

/* Alle-Kundenstimmen-Link unter dem Karussell auf /ueber-uns (Rose 2026-08-12) */
.dmi-testimonials-alle { margin-top: 14px; font-weight: 600; }

/* "Alle ausklappen"-Knopf der FAQ (Rose 2026-08-12, wie im Pflege-Glossar) */
.dmi-faq-alle { display: flex; justify-content: flex-end; margin: 4px 0 14px; }
.dmi-faq-alle button {
    background: #fff; color: #165b97; border: 1px solid #165b97; border-radius: 6px;
    padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.dmi-faq-alle button:hover { background: #165b97; color: #fff; }

/* FAQ-Aufklapper (Rose 2026-08-11). <details>/<summary> statt eigenem JS:
   der Browser liefert Tastaturbedienung und Screenreader-Semantik mit, und die
   Antworten stehen fuer Google auch zugeschlagen im Quelltext. */
.dmi-faq-item {
    border: 1px solid #d9e0ea; border-radius: 8px; background: #fff;
    margin-bottom: 10px; overflow: hidden;
}
.dmi-faq-item[open] { border-color: #165b97; box-shadow: 0 2px 10px rgba(22, 91, 151, .08); }
.dmi-faq-item summary {
    cursor: pointer; list-style: none; padding: 15px 46px 15px 18px; position: relative;
    font-family: 'Playfair Display', Georgia, serif; font-size: 19px; line-height: 1.4;
    color: #165b97; font-weight: 700;
}
.dmi-faq-item summary::-webkit-details-marker { display: none; }
.dmi-faq-item summary:hover { background: #f6f9fc; }
.dmi-faq-item summary:focus-visible { outline: 2px solid #165b97; outline-offset: -2px; }
/* Eigenes Pluszeichen: der Standardmarker laesst sich nicht zuverlaessig gestalten. */
.dmi-faq-item summary::after {
    content: ''; position: absolute; right: 20px; top: 50%; width: 12px; height: 12px;
    margin-top: -6px;
    background:
        linear-gradient(#165b97, #165b97) center/12px 2px no-repeat,
        linear-gradient(#165b97, #165b97) center/2px 12px no-repeat;
    transition: transform .15s ease;
}
.dmi-faq-item[open] summary::after { transform: rotate(45deg); }
.dmi-faq-antwort { padding: 0 18px 16px; }
.dmi-faq-antwort p { margin: 0; font-size: 16px; line-height: 1.65; color: #4a5560; }
.dmi-faq-antwort a { color: #165b97; font-weight: 600; }

/* Objektkarten-Reihe + Fusszeilen */
.dmi-ratgeber-objekte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.dmi-ratgeber-mehr { margin-top: 18px; font-weight: 600; }

/* Eigene kompakte Objektkarte der Ratgeberseiten (Rose: Listenkarte sah im schmalen
   Raster 'ungleich und verschoben' aus). Gleiche Hoehe ueber flex + margin-top:auto,
   2 Zeilen fuer den Namen reserviert, einzeilige Faktenzeilen mit kompakten Werten. */
.dmi-ratgeber-karte {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid #d9e0ea; border-radius: 8px; overflow: hidden;
    text-decoration: none !important; color: #2e2e2e;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.dmi-ratgeber-karte:hover { border-color: #165b97; box-shadow: 6px 6px 18px #cfdeea; }
.dmi-ratgeber-karte__bild { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.dmi-ratgeber-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dmi-ratgeber-karte__kopf { display: block; padding: 14px 16px 10px; min-height: 86px; }
.dmi-ratgeber-karte__ort { display: block; font-size: 13.5px; color: #6d757c; }
.dmi-ratgeber-karte__name {
    display: block; font-family: "Playfair Display"; font-weight: 700; font-size: 20px;
    line-height: 1.25; color: #2e2e2e; margin-top: 2px;
}
.dmi-ratgeber-karte__fakten { display: block; padding: 0 16px; }
.dmi-ratgeber-karte__zeile {
    display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
    padding: 7px 0; border-top: 1px solid #eef2f7; font-size: 14.5px;
}
.dmi-ratgeber-karte__zeile span { color: #6d757c; }
.dmi-ratgeber-karte__zeile strong { color: #2e2e2e; white-space: nowrap; }
.dmi-ratgeber-karte__mehr {
    display: block; margin-top: auto; padding: 12px 16px 14px;
    color: #165b97; font-weight: 700; font-size: 15px;
}
.dmi-ratgeber-karte:hover .dmi-ratgeber-karte__mehr { text-decoration: underline; }

/* CTA-Band (Rose: 'auffaelliger machen und besser designen') */
.dmi-ratgeber-cta {
    margin-top: 34px; border-radius: 10px; padding: 30px 34px;
    background: linear-gradient(135deg, #0c4b82, #165b97 55%, #127aa8);
    color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.dmi-ratgeber-cta h2 {
    font-family: "Playfair Display"; font-size: 26px; font-weight: 700; color: #fff;
    border: none; padding: 0; margin: 0 0 6px; display: block;
}
.dmi-ratgeber-cta p { color: #dbe9f5; margin: 0; font-size: 16px; max-width: 480px; }
.dmi-ratgeber-cta__aktion { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.dmi-ratgeber-cta__tel {
    display: inline-block; background: #fff; color: #165b97 !important; text-decoration: none !important;
    font-family: "Playfair Display"; font-weight: 700; font-size: 22px; padding: 12px 26px;
    border-radius: 8px; text-align: center; white-space: nowrap;
}
.dmi-ratgeber-cta__tel:hover { background: #eaf4fb; }
.dmi-ratgeber-cta__mail {
    display: inline-block; border: 2px solid rgba(255,255,255,.7); color: #fff !important;
    text-decoration: none !important; font-weight: 600; font-size: 15px; padding: 9px 18px;
    border-radius: 8px; text-align: center;
}
.dmi-ratgeber-cta__mail:hover { background: rgba(255,255,255,.12); }

@media (max-width: 900px) {
    .dmi-ratgeber-triple, .dmi-ratgeber-objekte { grid-template-columns: 1fr; }
    .dmi-ratgeber-gest { grid-template-columns: repeat(2, 1fr); }
    .dmi-ratgeber h2 { font-size: 25px; }
    .dmi-ratgeber-lead { font-size: 18px; }
}

/* Autorenkasten der Ratgeber-Zielseiten (Rose 2026-08-11: Helge Neumann, Inhaber) */
.dmi-ratgeber-autor {
    display: flex; gap: 18px; align-items: flex-start;
    margin-top: 34px; padding: 20px 24px;
    background: #f6f9fc; border: 1px solid #d9e0ea; border-radius: 10px;
}
.dmi-ratgeber-autor__foto { flex: 0 0 auto; border-radius: 8px; }
.dmi-ratgeber-autor__name { font-family: "Playfair Display"; font-weight: 700; font-size: 19px; color: #2e2e2e; margin: 0; }
.dmi-ratgeber-autor__rolle { font-size: 13.5px; font-weight: 600; color: #165b97; text-transform: uppercase; letter-spacing: .04em; margin: 2px 0 8px; }
.dmi-ratgeber-autor__vita { font-size: 15px; color: #4a5560; margin: 0; }

/* ============================================================================
   AfA-Rechner auf HELLEM Grund (Ratgeber-Zielseite B) - Claude 2026-08-11.
   ⚠️ Die Rechner-Stile stammen von der Objektseite und sind fuer den DUNKLEN
   Kasten dort gebaut: weisse Schrift, durchscheinende weisse Raender. Auf der
   weissen Ratgeberseite war dadurch schlicht nichts zu sehen (Labels weiss auf
   weiss). Hier dieselbe Mechanik, nur in hell umgesetzt.
   ========================================================================= */
.dmi-ratgeber .dmi-afa-calc {
    background: #f6f9fc; border: 1px solid #d9e0ea; border-left: 5px solid #165b97;
    border-radius: 8px; padding: 22px 24px; margin-top: 8px;
}
.dmi-ratgeber .dmi-afa-field label,
.dmi-ratgeber .dmi-afa-fieldlabel { color: #4a5560; font-weight: 600; }
.dmi-ratgeber .dmi-afa-input,
.dmi-ratgeber .dmi-afa-preis,
.dmi-ratgeber .dmi-afa-anteil {
    width: 170px; padding: 11px 12px; border: 1px solid #c3ced9; background: #fff;
    color: #2e2e2e; border-radius: 4px; font-size: 16px;
}
.dmi-ratgeber .dmi-afa-anteil { width: 110px; }
.dmi-ratgeber .dmi-afa-input:focus,
.dmi-ratgeber .dmi-afa-preis:focus,
.dmi-ratgeber .dmi-afa-anteil:focus { outline: 3px solid #63c8ee; outline-offset: 1px; }
.dmi-ratgeber .dmi-afa-seg { border-color: #c3ced9; border-radius: 4px; }
.dmi-ratgeber .dmi-afa-seg button { color: #165b97; }
.dmi-ratgeber .dmi-afa-seg button[aria-pressed="true"] { background: #165b97; color: #fff; }
.dmi-ratgeber .dmi-afa-result { border-top: 1px solid #d9e0ea; }
.dmi-ratgeber .dmi-afa-result .dmi-afa-claim { font-size: 22px; color: #2e2e2e; }
.dmi-ratgeber .dmi-afa-result .dmi-afa-claim em,
.dmi-ratgeber .dmi-afa-result .dmi-afa-claim b { font-style: normal; color: #165b97; font-weight: 700; }
.dmi-ratgeber .dmi-afa-breakdown li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid #e3e9f1; font-size: 16px; color: #2e2e2e;
}
.dmi-ratgeber .dmi-afa-breakdown li:last-child { border-bottom: none; }
/* ⚠️ Die Kindelemente tragen auf der Objektseite eigenes Weiss (.dmi-afa-breakdown span) -
   ohne diese Zeile bleiben Bezeichnung UND Betrag auf hellem Grund unsichtbar. */
.dmi-ratgeber .dmi-afa-breakdown li span { color: #4a5560; }
.dmi-ratgeber .dmi-afa-breakdown li b,
.dmi-ratgeber .dmi-afa-breakdown li b span { color: #2e2e2e; font-weight: 700; }
.dmi-ratgeber .dmi-afa-rechtsstand { font-size: 13px; color: #6d757c; margin: 10px 0 0; }
.dmi-ratgeber .dmi-afa-hint { color: #c0392b; font-weight: 600; margin: 12px 0 0; }
@media (max-width: 767px) {
    .dmi-ratgeber .dmi-afa-input,
    .dmi-ratgeber .dmi-afa-preis,
    .dmi-ratgeber .dmi-afa-anteil { width: 100%; }
    .dmi-ratgeber .dmi-afa-field { width: 100%; }
}