/* Eigene Anpassungen S-Immobilien Kraichgau (Sitepackage, updatesicher) */

/* --- Merkzettel-Button im Header (Icon + Zähler-Badge) --- */
.openimmo-header-bookmarks {
    display: inline-block;
    position: relative;
    margin-left: 10px;
}
.openimmo-header-bookmarks .openimmo-bookmarks-button {
    position: relative;
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    color: inherit;
    padding: 4px;
}
.openimmo-header-bookmarks .openimmo-bookmarks-button:hover {
    color: var(--ltn__secondary-color, #ff5a3c);
}
.openimmo-header-bookmarks .openimmo-bookmarks-item-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ltn__secondary-color, #ff5a3c);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
/* Bei 0 Einträgen kein Badge - seit 2026-10-01 ausgeblendet statt grau (ein leerer Kreis).
   Die Klasse openimmo-bookmarks-empty schaltet das openimmo-Bundle beim Merken/Entfernen um. */
.openimmo-bookmarks-button.openimmo-bookmarks-empty .openimmo-bookmarks-item-count,
.openimmo-bookmarks-item-count:empty {
    display: none;
}

/* --- Merken-Icon (Herz) an der Immobilie: rot GEFUELLT, wenn auf der Merkliste --- */
/* Die Klasse "bookmarked" wird serverseitig (immobilie.isBookmarked) sowie
   per JS beim Klick auf .btn-bookmarks gesetzt/entfernt. Mehrere Buttons derselben
   Immobilie haelt bookmarks-sync.js zusammen. */
.product-hover-action li a.btn-bookmarks.bookmarked,
.product-hover-action li a.btn-bookmarks.bookmarked i,
a.btn-bookmarks.bookmarked,
a.btn-bookmarks.bookmarked i {
    color: #e63946;
}
/* Auch im Hover-Zustand (Theme setzt hier sonst weiß) rot lassen */
.product-hover-action li:hover a.btn-bookmarks.bookmarked,
.product-hover-action li:hover a.btn-bookmarks.bookmarked i {
    color: #e63946;
}
/* Ausnahme: der grosse "Merken"-Knopf auf der Detailseite. Er ist ein
   .theme-btn-2 und damit dunkel gefuellt - rote Schrift darauf war kaum zu
   lesen. Dort bleibt die Schrift weiss; dass das Objekt gemerkt ist, zeigt
   ohnehin das ausgefuellte Herz. */
a.btn.btn-bookmarks.bookmarked,
a.btn.btn-bookmarks.bookmarked i,
a.btn.btn-bookmarks.bookmarked:hover,
a.btn.btn-bookmarks.bookmarked:hover i {
    color: var(--white, #fff);
}
/* Das Markup nutzt .flaticon-heart-1 - eine reine Outline-Glyphe. Nur eingefaerbt
   ist der Zustand "gemerkt" kaum zu erkennen, deshalb rendern wir das Merken-Herz
   komplett aus Font Awesome 6 Free (ist ohnehin via font-icons.css geladen):
   gleiche Glyphe fa-heart (\f004) in beiden Zustaenden, nur das Gewicht wechselt -
   400 = Outline, 900 = ausgefuellt. So aendert sich nur die Fuellung, nicht die Form.
   Die flaticon-Alternative \f125 (.flaticon-heart) ist KEIN gefuelltes Herz, sondern
   ein Herz mit Hantel - nicht verwenden.
   !important ist noetig, weil font-icons.css mit
   "i[class^='flaticon-']:before { font-family: flaticon !important; font-weight:
   normal !important; }" beide Eigenschaften erzwingt; ohne !important wuerde \f004
   in der flaticon-Schrift gesucht und bliebe leer. */
a.btn-bookmarks i:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    content: "\f004";
}
a.btn-bookmarks.bookmarked i:before {
    font-weight: 900 !important;
}

/* --- Quick-View-Modal: Schliessen-X auf den Listenseiten --- */
/* Die Modals stehen dort innerhalb des Suchformulars, und Openimmo.css (vendor) setzt
   "#openimmo-search-form button { width: 100% }". Die ID-Regel schlaegt die Theme-Regel
   ".modal-header .close" (40x40 oben rechts) - das X lief als graue Leiste ueber die
   ganze Modalbreite. Gleiche Spezifitaet zurueckholen, statt vendor/ anzufassen. */
#openimmo-search-form .modal-header .close,
#openimmo-list-form .modal-header .close {
    width: 40px;
}

/* --- Lightcase (Video-Popup): Icon-Schrift fuer das Schliessen-X --- */
/* plugins.css sucht die Schrift unter ../fonts/lightcase.*, die Dateien liegen aber in
   Fonts/Dummy/ - 404, und das X im Popup blieb unsichtbar (die Glyphe kommt aus dieser
   Schrift). Gleiche Familie hier mit richtigem Pfad neu deklarieren: custom.css wird nach
   plugins.css geladen, die spaetere @font-face-Regel gewinnt. */
@font-face {
    font-family: lightcase;
    src: url(../Fonts/Dummy/lightcase.woff) format("woff"),
         url(../Fonts/Dummy/lightcase.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

/* --- Logoleiste im Footer (Content Block "logoleiste", JS: logoleiste.js) --- */
/* Ohne JS bzw. solange alle Logos in eine Gruppe passen: normale Reihe. */
.simmo-logoleiste:not(.slick-initialized),
.simmo-logoleiste-gruppe {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
}
/* Slick setzt .slick-initialized .slick-slide { display: block } - die Gruppe muss
   aber Flex bleiben, damit die Logos nebeneinander stehen und vertikal zentriert sind. */
.simmo-logoleiste.slick-initialized .simmo-logoleiste-gruppe {
    display: flex;
}
.simmo-logoleiste-item {
    flex: 0 1 auto;
    min-width: 0;
}
.simmo-logoleiste-item img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 110px;
    margin: 0;
}

/* --- Standorte / Filialen mit Karte (Content Block "standorte", JS: standorte-karte.js) --- */
/* Theme-Karte ltn__contact-address-item-3 (2px Rahmen, Innenabstand 50/30/25), das Foto
   steht buendig oben im Rahmen statt des Icons. */
.simmo-standort {
    padding: 0 20px 20px;
    overflow: hidden;
}
.simmo-standort__bild {
    margin: 0 -20px 25px;
}
.simmo-standort__bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.simmo-standort h3 {
    margin-bottom: 10px;
}
/* Karten einer Reihe gleich hoch, auch wenn Adresse oder E-Mail unterschiedlich lang sind.
   Nur die Filial-Reihe - als Flex-Container schrumpften sonst Ueberschrift und Kartenflaeche
   (col-lg-12 ohne Inhaltsbreite) auf null. */
.simmo-standorte__filialen > [class*="col-"] {
    display: flex;
}
.simmo-standorte__filialen .simmo-standort {
    flex: 1 1 auto;
}
/* Hover: Karte hebt sich leicht an, bekommt Schatten und roten Rahmen, das Foto zoomt dezent.
   Das Bild-Div hat overflow: hidden ueber die Karte (.simmo-standort), der Zoom bleibt im Rahmen. */
.simmo-standort {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.simmo-standort__bild {
    overflow: hidden;
}
.simmo-standort__bild img {
    transition: transform 0.5s ease;
}
.simmo-standort:hover,
.simmo-standort:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--ltn__box-shadow-1);
    border-color: var(--ltn__secondary-color);
}
.simmo-standort:hover .simmo-standort__bild img,
.simmo-standort:focus-within .simmo-standort__bild img {
    transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
    .simmo-standort,
    .simmo-standort__bild img {
        transition: none;
    }
    .simmo-standort:hover,
    .simmo-standort:focus-within,
    .simmo-standort:hover .simmo-standort__bild img,
    .simmo-standort:focus-within .simmo-standort__bild img {
        transform: none;
    }
}
/* Das Theme macht jedes i in .ltn__contact-address-item(-3) zum 60px-Kreis mit 50px Schrift
   (gedacht fuer das grosse Kopf-Icon) - hier sind es kleine Icons in der Textzeile. */
.simmo-standort .simmo-standort__kontakt i {
    display: inline;
    width: auto;
    height: auto;
    line-height: inherit;
    font-size: 15px;
    border-radius: 0;
    box-shadow: none;
    background: none;
    margin-right: 6px;
    color: var(--ltn__secondary-color);
}
.simmo-standort__kontakt {
    font-size: 14px;
}
/* Icon und Link als eine Zeile: E-Mail nicht am Bindestrich umbrechen ("info@s-immo- /
   kraichgau.de") und das Icon nicht allein in eine eigene Zeile schieben. 14px, damit auch
   "sinsheim@s-immo-kraichgau.de" samt Icon in die schmalste Karte (230px Inhalt) passt. */
.simmo-standort__zeile {
    white-space: nowrap;
}
/* Kartenflaeche: vor dem Klick ein neutraler Kasten mit Hinweis, danach die Leaflet-Karte */
.simmo-standorte-karte {
    position: relative;
    height: 500px;
    margin-top: 30px;
    border: 2px solid var(--border-color-11);
    background: var(--section-bg-1);
}
.simmo-standorte-karte__hinweis {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}
.simmo-standorte-karte__hinweis p {
    max-width: 560px;
    margin-bottom: 15px;
}
.simmo-standorte-karte.is-geladen .simmo-standorte-karte__hinweis {
    display: none;
}
.simmo-standorte-karte__flaeche {
    position: absolute;
    inset: 0;
}
@media (max-width: 767px) {
    .simmo-standorte-karte {
        height: 400px;
    }
}

/* --- Logo im Kopfbereich: Inline-SVG mit Aufbau-Animation (seit 2026-09-15) --- */
/* Partial PageView/Partials/Header/Logo.html. Loest die fruehere PNG-Animation (Einblenden von links
   + Glanz-Maske) ab.
   Groesse: wie vorher das PNG (250 px, max-width 100 %) - die Spalte bestimmt die Anzeige
   (gemessen 204 x 90 Desktop, 125 x 55 Handy).
   Ablauf, nur beim ersten Seitenaufruf einer Browsersitzung (Klasse html.simmo-logo-intro setzt
   JavaScript/logo-intro.js im <head>, vor dem ersten Zeichnen):
     1. Quadrat mit "S" springt auf        0,10 s
     2. Dach senkt sich und federt nach    0,45 s
     3. "IMMOBILIEN" Buchstabe fuer Buchstabe ab 0,85 s (je 0,05 s versetzt, --i im Partial)
     4. Linie zieht sich von links         1,35 s
     5. "Kraichgau GmbH" blendet ein       1,60 s   -> fertig nach rund 2,1 s
   fill-mode "backwards" (nicht "both"): Nach der Animation gilt wieder das normale transform, sonst
   blockiert der Endzustand den Hover-Effekt am Dach.
   transform-box: fill-box - Prozente und transform-origin beziehen sich auf die Form selbst statt auf
   das ganze SVG. Bei "Bewegung reduzieren" keine Animation (Media-Query no-preference). */
.ltn__header-middle-area .simmo-logo {
    display: inline-block;
    line-height: 0;
}
/* Das Theme setzt .site-logo a { display: contents } - der Link hat damit keine eigene Box, und
   wer per Tastatur zum Logo springt, sieht keinen Fokusrahmen. Hier eine echte Box mit Rahmen. */
.ltn__header-middle-area .site-logo a {
    display: inline-block;
    line-height: 0;
}
.ltn__header-middle-area .site-logo a:focus-visible {
    outline: 2px solid var(--ltn__secondary-color);
    outline-offset: 6px;
}
.simmo-logo-svg {
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
    overflow: visible;
}
.simmo-logo-svg__quadrat,
.simmo-logo-svg__dach,
.simmo-logo-svg__buchstabe,
.simmo-logo-svg__linie,
.simmo-logo-svg__unterzeile {
    transform-box: fill-box;
}

@keyframes simmo-logo-quadrat {
    from {
        opacity: 0;
        transform: scale(0.4);
    }
    70% {
        opacity: 1;
        transform: scale(1.08);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes simmo-logo-dach {
    from {
        opacity: 0;
        transform: translateY(-70%);
    }
    60% {
        opacity: 1;
        transform: translateY(6%);
    }
    80% {
        transform: translateY(-2%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes simmo-logo-buchstabe {
    from {
        opacity: 0;
        transform: translateY(45%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes simmo-logo-linie {
    from {
        transform: scaleX(0);
    }
    to {
        transform: none;
    }
}
@keyframes simmo-logo-unterzeile {
    from {
        opacity: 0;
        transform: translateY(-20%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Dieselben Aufbau-Regeln gelten fuer das Header-Logo (html.simmo-logo-intro) und fuer das grosse
   Logo im Mini-Intro (html.simmo-intro-aktiv .simmo-intro) - siehe "Intro" weiter unten. */
@media (prefers-reduced-motion: no-preference) {
    .simmo-logo-intro .simmo-logo-svg__quadrat,
    .simmo-intro-aktiv .simmo-intro .simmo-logo-svg__quadrat {
        transform-origin: center;
        animation: simmo-logo-quadrat 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) 0.1s backwards;
    }
    .simmo-logo-intro .simmo-logo-svg__dach,
    .simmo-intro-aktiv .simmo-intro .simmo-logo-svg__dach {
        animation: simmo-logo-dach 0.7s ease-out 0.45s backwards;
    }
    .simmo-logo-intro .simmo-logo-svg__buchstabe,
    .simmo-intro-aktiv .simmo-intro .simmo-logo-svg__buchstabe {
        animation: simmo-logo-buchstabe 0.35s ease-out calc(0.85s + var(--i) * 0.05s) backwards;
    }
    .simmo-logo-intro .simmo-logo-svg__linie,
    .simmo-intro-aktiv .simmo-intro .simmo-logo-svg__linie {
        transform-origin: left center;
        animation: simmo-logo-linie 0.5s cubic-bezier(0.65, 0, 0.35, 1) 1.35s backwards;
    }
    .simmo-logo-intro .simmo-logo-svg__unterzeile,
    .simmo-intro-aktiv .simmo-intro .simmo-logo-svg__unterzeile {
        animation: simmo-logo-unterzeile 0.5s ease-out 1.6s backwards;
    }

    /* Beim Ueberfahren hebt sich das Dach kurz an - auf jeder Seite, auch ohne Intro */
    .simmo-logo-svg__dach {
        transition: transform 0.35s cubic-bezier(0.34, 1.45, 0.64, 1);
    }
    .ltn__header-middle-area .site-logo a:hover .simmo-logo-svg__dach,
    .ltn__header-middle-area .site-logo a:focus-visible .simmo-logo-svg__dach {
        transform: translateY(-12%);
    }
}

/* --- Intro: Logo baut sich gross auf und fliegt in den Kopfbereich (TEST, seit 2026-09-15) --- */
/* Markup PageView/Partials/Intro.html, Ablauf JavaScript/intro.js. Sichtbar nur mit html.simmo-intro-aktiv
   (setzt logo-intro.js im <head>, derzeit nur mit "#intro" in der Adresse). Der Aufbau nutzt dieselben
   Keyframes wie das Header-Logo (siehe oben). Waehrend des Intros ist das Header-Logo unsichtbar - das
   grosse Logo landet genau an seiner Stelle, danach wird es wieder eingeblendet. */
.simmo-intro {
    display: none;
}
.simmo-intro-aktiv {
    overflow: hidden;
}
.simmo-intro-aktiv .simmo-intro {
    position: fixed;
    inset: 0;
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: #fff;
    cursor: pointer;
}
.simmo-intro__logo {
    width: min(72vw, 460px);
}
.simmo-intro__logo .simmo-logo-svg {
    width: 100%;
    max-width: none;
}
@keyframes simmo-intro-knopf {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.simmo-intro__ueberspringen {
    position: absolute;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--simmo-text-leise, #4a4a4a);
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    animation: simmo-intro-knopf 0.4s ease 0.8s backwards;
}
.simmo-intro__ueberspringen:hover,
.simmo-intro__ueberspringen:focus-visible {
    color: var(--ltn__secondary-color);
}
.simmo-intro--flug .simmo-intro__ueberspringen {
    visibility: hidden;
}
.simmo-intro-aktiv .ltn__header-middle-area .simmo-logo {
    visibility: hidden;
}

/* --- Formulare (EXT:form, z. B. "Vertrag widerrufen") wie quarter/contact.html --- */
/* Kasten, Titel und Button-Klassen kommen aus dem Formular-Template bzw. der Formular-
   Konfiguration (Configuration/Form/SitePackage/config.yaml). Hier nur, was EXT:form anders
   ausgibt als die Vorlage. */
.frame-type-form_formframework .contact-form-box {
    margin-bottom: 60px;
}
/* Beschriftung wie in der Vorlage nur als Platzhalter sichtbar - fuer Screenreader bleibt sie da */
.contact-form-box .input-item > .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Icon im Feld: Theme-Regel ".input-item.ltn__custom-icon::before" (top 35 %), eigene Motive */
.input-item-expose.ltn__custom-icon::before {
    content: "\f015";
}
.input-item-adresse.ltn__custom-icon::before {
    content: "\f3c5";
}
/* Fehlermeldung unter dem Feld; das Theme gibt Feldern 30px Abstand nach unten */
.contact-form-box .form-control.is-invalid {
    border-color: var(--ltn__secondary-color);
}
.contact-form-box .invalid-feedback {
    display: block;
    margin: -22px 0 20px;
    font-size: 14px;
    color: var(--ltn__secondary-color);
}
@media (max-width: 767px) {
    .contact-form-box {
        padding: 30px 20px;
    }
}

/* --- Filterspalte: Kasten "Ort" mit Auswahlfeld --- */
/* Das Theme laesst .nice-select fliessen (float) - der Kasten umschloss es nicht, sein unterer
   Innenabstand lag hinter dem Feld und der Kasten wirkte unten abgeschnitten. flow-root laesst den
   Kasten das Feld umschliessen, der Abstand ist dann wie bei den anderen Kaesten. */
.simmo-filter-widget-select {
    display: flow-root;
}

/* --- Immobilien-Detailseite: Kasten "Ihr Ansprechpartner" --- */
/* Rundes Foto (aus der Team-Seite) neben Name/Position, darunter Kontaktzeilen mit roten
   Icon-Kreisen statt Aufzaehlungspunkten. Die Team-Fotos sind Ganzkoerper-Aufnahmen - daher
   kein Zuschnitt beim Skalieren, der Ausschnitt sitzt per object-position oben am Gesicht. */
.simmo-ansprechpartner__kopf {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.simmo-ansprechpartner__foto {
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--white);
    box-shadow: var(--ltn__box-shadow-1);
    background: var(--ltn__secondary-color);
}
.simmo-ansprechpartner__foto img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 50% 8%;
}
.simmo-ansprechpartner__initialen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--white);
    font-family: var(--ltn__heading-font);
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
}
.simmo-ansprechpartner__name {
    min-width: 0;
}
.simmo-ansprechpartner__name h5 {
    margin: 0 0 4px;
    font-size: 19px;
}
.simmo-ansprechpartner__position {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ltn__paragraph-color);
}
.simmo-ansprechpartner__kontakt {
    margin: 0;
    padding: 0;
    list-style: none;
}
.simmo-ansprechpartner__kontakt li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.35;
    border-top: 1px solid var(--border-color-1);
}
.simmo-ansprechpartner__kontakt li::before {
    display: none;
}
.simmo-ansprechpartner__kontakt a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--ltn__heading-color);
    transition: color 0.2s ease;
}
.simmo-ansprechpartner__icon {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ltn__secondary-color);
    color: var(--white);
    font-size: 14px;
    transition: background-color 0.2s ease;
}
.simmo-ansprechpartner__icon i {
    margin: 0;
    color: inherit;
}
.simmo-ansprechpartner__wert {
    min-width: 0;
}
/* lange Adressen ("helena.daubner@s-immo-kraichgau.de") am @ bzw. Punkt umbrechen statt am Bindestrich */
.simmo-ansprechpartner__email {
    overflow-wrap: anywhere;
}
.simmo-ansprechpartner__kontakt a:hover,
.simmo-ansprechpartner__kontakt a:focus-visible {
    color: var(--ltn__secondary-color);
}
.simmo-ansprechpartner__kontakt a:hover .simmo-ansprechpartner__icon,
.simmo-ansprechpartner__kontakt a:focus-visible .simmo-ansprechpartner__icon {
    background: var(--ltn__heading-color);
}

/* --- Startseite: Merkzettel (Herz) sauber rechts neben der Navigation ausrichten --- */
/* Ohne diese Regel "haengt" das Icon frei, da die Options-Spalte auf der
   Startseite nur den Merkzettel enthaelt. */
.ltn__header-home .ltn__header-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* --- Startseite: Logo weiss, solange der Header noch nicht "sticky" ist --- */
/* Sobald .ltn__header-sticky die Klasse .sticky-active erhaelt (beim Scrollen),
   wird der Filter entfernt und das Logo erscheint wieder in Originalfarbe (rot). */
.ltn__header-home .ltn__header-sticky:not(.sticky-active) .site-logo img {
    filter: brightness(0) invert(1);
}

/* --- Eigene Linien-Icons (seit 2026-09-15) --- */
/* Das SVG dient nur als Maske, die Farbe kommt ueber currentColor - die Icons faerben sich also
   wie die Font-Icons, die sie ersetzen (z.B. rot in .ltn__blog-meta).
   grundriss: Zimmeranzahl (vorher flaticon-bed = Schlafzimmer), mauer: Baujahr (vorher Kalender).
   Das Datum hat statt eines Icons ein Kalenderblatt, siehe weiter unten. */
.simmo-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask: var(--simmo-icon) center / contain no-repeat;
    mask: var(--simmo-icon) center / contain no-repeat;
}
.simmo-icon--grundriss {
    --simmo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1.5'/%3E%3Cpath d='M11 3v6M11 13v8M11 13h4M19 13h2'/%3E%3C/svg%3E");
}
.simmo-icon--mauer {
    --simmo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='M3 9.67h18M3 14.33h18M9 5v4.67M15 5v4.67M6 9.67v4.66M12 9.67v4.66M18 9.67v4.66M9 14.33V19M15 14.33V19'/%3E%3C/svg%3E");
}

/* --- Datum als Kalenderblatt (ViewHelper simmo:datumKachel, seit 2026-09-15) --- */
/* Variante "D" aus der Abstimmung: roter Kopf mit Monat, darunter der Tag, daneben das Jahr.
   Groessen in em, damit das Blatt in kleineren Meta-Zeilen (Seitenleiste, "Weitere") mitschrumpft. */
.simmo-datum {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    vertical-align: middle;
}
.simmo-datum__blatt {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: 3.1em;
    border-radius: 0.45em;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    line-height: 1;
    text-align: center;
}
.simmo-datum__blatt b {
    display: block;
    padding: 0.25em 0;
    background: var(--ltn__secondary-color);
    color: #fff;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.simmo-datum__blatt span {
    display: block;
    padding: 0.3em 0 0.35em;
    color: var(--ltn__heading-color, #1a1a1a);
    font-size: 1.3em;
    font-weight: 700;
}
.simmo-datum__jahr {
    color: var(--ltn__paragraph-color, #6b7280);
}

/* --- Eckdaten in den Immobilien-Boxen (Partial Immobilie/KeyFacts.html, seit 2026-09-15) --- */
/* Wohnflaeche, Zimmer, Baujahr groesser und gleichmaessig ueber die ganze Boxbreite verteilt.
   Das Theme setzt inline-block mit max-width 160px und 30px Abstand; die Trennlinie
   (ltn__list-item-2-before) sitzt dort bei right: -15px und wandert hier an den Rand der Spalte. */
.simmo-eckdaten {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}
.simmo-eckdaten li {
    flex: 1 1 0;
    max-width: none;
    margin-right: 0;
    padding: 0 10px;
    font-size: 15px;
    text-align: center;
}
.simmo-eckdaten li::before {
    right: 0;
}
.simmo-eckdaten li span {
    font-size: 20px;
    line-height: 1.3;
    white-space: nowrap;
}
.simmo-eckdaten li .simmo-icon,
.simmo-eckdaten li span i {
    font-size: 0.9em;
    margin-left: 2px;
}

/* --- Startseite "Unsere Leistungen": alle drei Boxen gleich hoch --- */
/* Die Bootstrap-Spalte wird zum Flex-Container, dadurch streckt sich die Box
   automatisch auf die Hoehe der hoechsten Box der Reihe (margin-bottom bleibt
   erhalten, deshalb kein height: 100%). Nur die Boxen-Reihe (.ltn__feature-row-equal),
   nicht die Ueberschriften-Reihe - sonst schrumpft dort die zentrierte
   .section-title-area auf Inhaltsbreite und wirkt linksbuendig. */
.ltn__feature-area .ltn__feature-row-equal > [class*="col-"] {
    display: flex;
}
.ltn__feature-area .ltn__feature-item-6 {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ltn__feature-area .ltn__feature-item-6 .ltn__feature-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Button bei unterschiedlich langen Texten immer buendig am unteren Rand */
.ltn__feature-area .ltn__feature-item-6 .ltn__feature-info .ltn__service-btn {
    margin-top: auto;
    padding-top: 25px;
}

/* --- Startseite: Slides der Immobilien-Teaser (Kauf/Miete) und der News --- */
/* Slick setzt auf .slick-slide eine feste Hoehe; mit einem Flex-Track werden
   alle Slides einer Reihe gleich hoch (unabhaengig von der Textlaenge). */
.ltn__product-slider-item-three-active .slick-track,
.ltn__blog-slider-one-active .slick-track {
    display: flex;
    align-items: stretch;
}
.ltn__product-slider-item-three-active .slick-slide,
.ltn__blog-slider-one-active .slick-slide {
    height: auto;
}
/* Wrapper, die Slick selbst erzeugt (.slick-slide > div), mitstrecken */
.ltn__product-slider-item-three-active .slick-slide > div,
.ltn__blog-slider-one-active .slick-slide > div {
    display: flex;
    height: 100%;
}
.ltn__product-slider-item-three-active .slick-slide > div > [class*="col-"],
.ltn__blog-slider-one-active .slick-slide > div > [class*="col-"] {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.ltn__product-slider-item-three-active .ltn__product-item,
.ltn__blog-slider-one-active .ltn__blog-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.ltn__product-slider-item-three-active .ltn__product-item .product-info,
.ltn__blog-slider-one-active .ltn__blog-item .ltn__blog-brief {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* News: Datum/Weiterlesen-Zeile immer am unteren Rand der Karte */
.ltn__blog-slider-one-active .ltn__blog-item .ltn__blog-meta-btn {
    margin-top: auto;
}
/* News: Platz fuer den Kartenschatten unten. Das Theme gibt der Karte margin-bottom: 50px
   (.ltn__blog-item-3-normal). Im Flex-Aufbau oben fuellt die Karte die Spalte aber ganz
   aus, der Margin ragt ueber den Slide hinaus, und .slick-list (overflow: hidden) schnitt
   den Schatten unter der Karte ab. Den Abstand deshalb als Padding in den Slide legen -
   beim News-Slider ist die Spalte selbst der Slide (div.col-lg-12.slick-slide), es gibt
   keinen Zwischen-div wie beim Immobilien-Slider. */
.ltn__blog-slider-one-active .slick-slide {
    padding-bottom: 50px;
}
.ltn__blog-slider-one-active .ltn__blog-item {
    margin-bottom: 0;
}
/* Immobilien-Teaser (Neue Kauf-/Mietobjekte): gleiches Problem wie bei den News. Das Theme
   gibt .ltn__product-item margin-bottom: 50px; im Flex-Aufbau oben kam davon nichts im Slide
   an - die Karte war genau so hoch wie der Slide, .slick-list schnitt den Schatten unten ab
   und die slick-dots klebten mit 0px Abstand an den Karten. Auch hier ist die Spalte selbst
   der Slide. */
.ltn__product-slider-item-three-active .slick-slide {
    padding-bottom: 50px;
}
.ltn__product-slider-item-three-active .ltn__product-item {
    margin-bottom: 0;
}

/* --- Startseite: Teaser-Karten kompakter --- */
/* Slick macht ALLE Slides des Tracks so hoch wie den hoechsten - ein einzelnes
   Objekt mit langem Titel oder langer Beschreibung blaeht damit die ganze Reihe
   auf. Titel und Beschreibung deshalb auf feste Zeilenzahl begrenzen, dann sind
   die Karten von sich aus gleich hoch und es bleibt kaum Leerraum. */
.ltn__product-slider-item-three-active .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ltn__product-slider-item-three-active .product-description p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}
/* Theme-Polsterung der Karte etwas reduzieren */
.ltn__product-slider-item-three-active .ltn__product-item-4 .product-info {
    padding: 20px 25px 15px;
}
.ltn__product-slider-item-three-active .product-description {
    margin-bottom: 15px;
}
/* Icon-Leiste (Schnellansicht/Merken/Details): Das Theme legt .product-hover-action
   als Overlay ueber dem Bild an, das erst beim Hover erscheint:
     .product-hover-action              { position: absolute; top: 60%; opacity: 0; }
     .ltn__product-item:hover .product-hover-action { top: 50%; opacity: 1; }
   Die Karten-Variante .ltn__product-item-4 stellt auf position: relative + opacity: 1
   um (Leiste steht fest im Fluss), setzt top aber NICHT zurueck. Bei position: relative
   verschiebt top das Element rein optisch nach unten, waehrend sein Platz im Fluss
   reserviert bleibt -> die Icons rutschen aus der Karte und hinterlassen eine Luecke.

   top muss in BEIDEN Zustaenden neutralisiert werden: ohne die :hover-Variante gewinnt
   die Theme-Regel (0,3,0) beim Ueberfahren der Karte gegen eine reine
   Basis-Regel (0,2,0) - die Icons sprangen dann genau in dem Moment weg, in dem man
   sie anklicken will. Deshalb hier .ltn__product-item.ltn__product-item-4:hover (0,4,0). */
.ltn__product-item-4 .product-hover-action,
.ltn__product-item.ltn__product-item-4:hover .product-hover-action {
    top: auto;
}
/* .ltn__product-item bringt aus der Grid-Ansicht margin-bottom: 50px mit. Im
   Slider liegt dieser Rand innerhalb des Slides und macht den Track 50px hoeher
   als die Karte - den Abstand zwischen den Reihen regelt hier Slick selbst. */
.ltn__product-slider-item-three-active .ltn__product-item {
    margin-bottom: 0;
}

/* --- Startseite: "Kauf/Miete"-Badge wieder oben rechts im Objektbild --- */
/* Die Teaser-Slides tragen sowohl .ltn__product-item-4 als auch
   .ltn__product-item-5. Aus dem Theme kommt fuer item-5 ein
   "position: inherit" (Listenansicht, Badge steht dort als Text ueber dem
   Titel). Im Bild-Kontext erbt das Badge dadurch "relative" von .product-img
   und wird durch top/right aus der Box heraus nach links geschoben. */
.ltn__product-slider-area .ltn__product-item-5 .product-img .product-badge {
    position: absolute;
    top: 15px;
    right: 18px;
    left: auto;
    margin-bottom: 0;
    z-index: 2;
}
/* item-5 setzt die Badge-Optik auf "Text" zurueck - hier wieder als Label */
.ltn__product-slider-area .ltn__product-item-5 .product-img .product-badge li {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    padding: 3px 15px 0;
    line-height: 25px;
}

/* --- Info-Karten in Container-Spalten (z.B. /immobilienverwaltung) --- */
/* Wird ueber die Container-Einstellung "Klassen Row" = "row simmo-info-cards"
   aktiviert. Macht aus den Textbloecken abgesetzte Karten und stellt sicher,
   dass die Karten einer Reihe gleich hoch sind. */
.simmo-info-cards > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.simmo-info-cards .frame {
    flex: 1 1 auto;
    background-color: var(--white);
    border: 1px solid var(--border-color-8, #e5e7eb);
    box-shadow: var(--ltn__box-shadow-4);
    padding: 30px 30px 25px;
    margin-bottom: 30px;
}
.simmo-info-cards .frame h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 20px;
}
.simmo-info-cards .frame ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.simmo-info-cards .frame ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    font-size: 15px;
}
/* Haken-Icon statt Aufzaehlungspunkt (Font Awesome ist im Theme vorhanden) */
.simmo-info-cards .frame ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 12px;
    color: var(--ltn__secondary-color);
}
.simmo-info-cards .frame ul li:last-child {
    margin-bottom: 0;
}

/* --- Immobilien-Detailseite: Karte laeuft nicht mehr in den Footer --- */
/* Das Theme setzt .property-details-google-map fix auf 360px (gedacht fuer eine
   nackte Karte). openimmo liefert darin aber Ueberschrift + Karte (#openimmo-
   google-map-points-of-interest = 500px) + POI-Buttons, die dadurch unten
   herauslaufen. Hoehe vom Inhalt bestimmen lassen, Karte etwas flacher. */
.property-details-google-map {
    height: auto;
    overflow: hidden;
}
.property-details-google-map #openimmo-google-map-points-of-interest {
    height: 420px;
}

/* --- Immobilien-Detailseite: Bildergalerie-Slider in der linken Spalte --- */
.immo-detail-gallery {
    border-radius: 8px;
    overflow: hidden;
}
.immo-detail-gallery .carousel-item img {
    object-fit: cover;
}
.immo-detail-gallery .carousel-control-prev,
.immo-detail-gallery .carousel-control-next {
    width: 12%;
    opacity: 0;
    transition: opacity .3s ease;
}
.immo-detail-gallery:hover .carousel-control-prev,
.immo-detail-gallery:hover .carousel-control-next {
    opacity: 1;
}
.immo-detail-gallery .carousel-control-prev-icon,
.immo-detail-gallery .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    background-size: 45% 45%;
}

/* --- Immobilien-Grid: gleiche Kartenhoehe je Reihe --- */
/* Die Bootstrap-Spalte streckt sich bereits auf die Hoehe der hoechsten Karte der Reihe
   (row = flex, align-items: stretch), die Karte selbst fuellt die Spalte aber nicht aus.
   Darum Spalte + Karte als Flex-Container, damit die Karte die volle Hoehe einnimmt. */
.ltn__product-grid-view .row > [class*="col-"] {
    display: flex;
}
.ltn__product-grid-view .row > [class*="col-"] > .ltn__product-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}
/* Info-Block waechst mit, damit der Preisblock bei allen Karten unten buendig sitzt
   und nicht direkt unter unterschiedlich langen Titeln/Eckdaten klebt. */
.ltn__product-grid-view .row > [class*="col-"] > .ltn__product-item > .product-info {
    flex: 1 1 auto;
}

/* --- Filter-Spalte der Listenseiten (Partial Search/FormSidebar.html) --- */
/* Nutzt die vorhandenen Theme-Widgets (.ltn__menu-widget, .checkbox-item, .checkmark),
   damit der Filter aussieht wie das urspruengliche "Advance Information"-Demo-Markup,
   das er ersetzt. Hier nur die Ergaenzungen, die das Theme nicht mitbringt. */

/* Labels umbrechen lassen: .checkbox-item ist im Theme inline-block, in der schmalen
   Spalte laufen laengere Bezeichnungen (z.B. "Zinshaus / Renditeobjekt") sonst unschoen. */
.simmo-filter-sidebar .checkbox-item {
    display: block;
    line-height: 1.5;
    padding-top: 1px;
}
.simmo-filter-sidebar .ltn__menu-widget ul li {
    margin-bottom: 6px;
}

/* Einfachauswahl (Objektart, Preis, Zimmer) als runde Marke mit Punkt statt Haken.
   Die Extension nimmt fuer diese Felder nur EINEN Wert entgegen - ein Haken wuerde
   Mehrfachauswahl suggerieren. Nur Ausstattung ist echte Mehrfachauswahl und behaelt
   die eckige Checkbox des Themes. */
.simmo-filter-sidebar .simmo-radio-item .checkmark {
    border-radius: 50%;
}
.simmo-filter-sidebar .simmo-radio-item input:checked ~ .checkmark:after {
    left: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

/* Ausstattung hat bis zu 35 Optionen - begrenzt und scrollbar, sonst schiebt die
   Spalte die Liste um ein Vielfaches ihrer Hoehe nach unten. */
.simmo-filter-sidebar .simmo-filter-scroll {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 10px;
}

.simmo-filter-sidebar .simmo-filter-widget-select .simmo-auswahl {
    width: 100%;
}

/* Aktionen: "Filter anwenden" als Theme-Button, "Zuruecksetzen" als schlichter
   Textlink - es ist ein <button>, weil ein Link das Formular nicht leeren kann. */
.simmo-filter-sidebar .simmo-filter-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.simmo-filter-sidebar .simmo-filter-reset {
    background: none;
    border: 0;
    padding: 0;
    color: #5C727D;
    text-decoration: underline;
    cursor: pointer;
}
.simmo-filter-sidebar .simmo-filter-reset:hover {
    color: var(--ltn__secondary-color);
}

/* Leere Trefferliste - erst mit dem Filter ueberhaupt erreichbar. */
.simmo-no-results {
    padding: 40px 0 60px;
}
/* Knopf "Filter zuruecksetzen" unter dem Text. Die ID im Selektor braucht es gegen
   "#openimmo-search-form button { width: 100% }" aus Openimmo.css (wie beim Modal-X oben). */
#openimmo-search-form .simmo-no-results .simmo-no-results__reset {
    display: inline-block;
    width: auto;
    margin-top: 10px;
}

/* ===========================================================================
   Handlungsaufforderung (Content Block "cta")
   Zwei Varianten: abgesetzter Kasten und farbiges Band. Beide legen Text und
   Bild nebeneinander und stapeln unter 768px.
   =========================================================================== */
.simmo-cta {
    margin: 40px 0;
}
.simmo-cta__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px;
}
.simmo-cta--box .simmo-cta__inner {
    background-color: var(--section-bg-1, #f8f8f8);
    border-radius: 4px;
}
.simmo-cta--band .simmo-cta__inner {
    background-color: var(--ltn__secondary-color);
    color: #fff;
}
.simmo-cta--band .simmo-cta__title,
.simmo-cta--band p {
    color: #fff;
}
/* Im farbigen Band waere der rote Theme-Button unsichtbar - dort weiss auf Rot. */
.simmo-cta--band .theme-btn-1 {
    background-color: #fff;
    color: var(--ltn__secondary-color);
    border-color: #fff;
}
.simmo-cta--band .theme-btn-1:hover {
    background-color: var(--ltn__primary-color, #000);
    color: #fff;
    border-color: var(--ltn__primary-color, #000);
}
.simmo-cta__body {
    flex: 1 1 auto;
}
.simmo-cta__title {
    margin-top: 0;
    margin-bottom: 15px;
}
.simmo-cta__media {
    flex: 0 0 340px;
    max-width: 340px;
}
.simmo-cta__media img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.simmo-cta__actions {
    margin-top: 25px;
}
@media (max-width: 767px) {
    .simmo-cta__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        padding: 30px 25px;
    }
    .simmo-cta__media {
        flex-basis: auto;
        max-width: 100%;
    }
}

/* --- CTA mit Bilddarstellung "Titelseite als Heft" (seit 2026-10-02) ---
   Erst fuer den Wohnmarktbericht auf der Startseite: Die Titelseite liegt schraeg wie ein
   gedrucktes Heft, darunter blitzen die Seitenkanten (gestaffelte Schatten), oben haengt ein
   rotes Lesezeichen. Faehrt man ueber die CTA oder steht der Fokus auf dem Button, richtet
   sich das Heft auf. Gedreht wird der Bildrahmen, nicht das Bild - so dreht das Lesezeichen mit. */
.simmo-cta--heft .simmo-cta__media {
    position: relative;
    flex-basis: 440px;
    max-width: 440px;
    margin: 10px 20px 20px 10px; /* Platz fuer Seitenkanten und Schatten */
    transform: rotate(-3deg);
    transition: transform 0.4s ease;
}
.simmo-cta--heft .simmo-cta__media img {
    display: block;
    border-radius: 2px;
    box-shadow:
        3px 3px 0 #f4f4f4,
        6px 6px 0 #dcdcdc,
        9px 9px 0 #c4c4c4,
        0 24px 40px rgba(0, 0, 0, 0.45);
}
.simmo-cta--heft .simmo-cta__media::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 40px; /* links: rechts oben steht auf dem Wohnmarktbericht der Titelschriftzug */
    width: 22px;
    height: 64px;
    background-color: var(--ltn__secondary-color);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.simmo-cta--heft:hover .simmo-cta__media,
.simmo-cta--heft:focus-within .simmo-cta__media {
    transform: rotate(0deg) translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
    .simmo-cta--heft .simmo-cta__media {
        transition: none;
    }
}
@media (max-width: 991px) {
    .simmo-cta--heft .simmo-cta__media {
        flex-basis: 340px;
        max-width: 340px;
    }
}
@media (max-width: 767px) {
    .simmo-cta--heft .simmo-cta__media {
        flex-basis: auto;
        max-width: calc(100% - 30px);
    }
}

/* ===========================================================================
   Dunkle CTA-Sections ueber die volle Breite (seit 2026-09-15)
   Fuer alle Handlungsaufforderungen: CTA-Block Variante "dunkel" und die
   Service-Ansprachen der Startseite (.simmo-dunkel).
   Volle Breite ohne Aenderung am Container: ein Schatten in Hintergrundfarbe
   reicht 100vmax nach links und rechts, clip-path schneidet ihn oben und unten
   ab. Schatten verbreitern das Layout nicht, es entsteht kein Querscrollen.
   =========================================================================== */
/* ============================================================
   Die Farben des Hauses - eine Stelle, nicht fuenf
   ============================================================
   Vorher trug jede dunkle Flaeche ihren eigenen Ton: die Ansprachen der
   Startseite #202326, der Footer #171B2A (--section-bg-2 des Themes), der
   Kopfbereich denselben. Nebeneinander sah das nach Zufall aus.

   Seit 16.09.2026 gibt es EIN Grau fuer alle dunklen Flaechen. Wer es aendern
   will, aendert es hier - Footer, CTA-Abschnitte, Kopfbereich, Ansprachen,
   Bild-Platzhalter und das Einwilligungsfenster ziehen mit.

   Das Rot kommt weiter aus dem Theme (--ltn__secondary-color); es steht auch im
   Logo und wird nicht hier neu definiert, sondern nur benutzt. */
:root {
    /* Die grosse dunkle Flaeche: Footer, CTA-Abschnitte, Kopfbereich,
       Ansprachen, Bild-Platzhalter, Einwilligungsfenster. */
    --simmo-grau: #3d3d3d;
    --simmo-grau-text: #d8dadc;

    /* Eine Stufe dunkler, fuer die Streifen ganz oben und ganz unten -
       die Leiste ueber der Navigation und der Bereich unter dem Footer.
       Sie rahmen die Seite ein und setzen sich dadurch vom Grau ab. */
    --simmo-dunkel: #252525;
    --simmo-dunkel-text: #d8dadc;

    /* Leiser Text auf hellem Grund (Positionsangaben, Nebensaetze). */
    --simmo-text-leise: #4a4a4a;

    /* Senkrechter Abstand zwischen den Bloecken im Inhaltsbereich. EINE Stelle
       fuer die ganze Seite - siehe Abschnitt "Abstaende im Inhaltsbereich".
       60px ist das Mass, das die Seite ohnehin benutzt: unter dem Kopfbereich
       und ueber/unter den dunklen CTA-Baendern. */
    --simmo-block-abstand: 60px;

    /* Die folgenden drei kommen aus dem Theme und sind dort hundertfach
       verbaut. Sie stehen hier, damit sie einen Namen haben und nicht als
       "irgendeine Farbe" behandelt werden - geaendert werden sie nur
       gemeinsam mit dem Theme:
         Flieasstext  #5c727d  (--ltn__color-5)
         Ueberschrift #071c1f  (--heading-color)
         helle Flaeche #f2f6f7 (--section-bg-1)
         Preisgruen   #1b6e3c  (Badges "Zum Verkauf"/"Zur Miete") */
}

/* Die grosse Flaeche des Footers (Theme: --section-bg-2, #171B2A). */
.footer-top-area.section-bg-2,
.ltn__footer-area .section-bg-2 {
    background-color: var(--simmo-grau);
}

/* Der Rahmen der Seite: Leiste ueber der Navigation (Theme: --section-bg-6,
   #0B2C3D) und der Streifen unter dem Footer (--section-bg-7, #282b38). */
.ltn__header-top-area.section-bg-6,
.ltn__copyright-area.section-bg-7 {
    background-color: var(--simmo-dunkel);
}

/* Das Logo im Footer steht auf dunklem Grund - als PNG in Rot und Schwarz war
   der Schriftzug dort kaum zu lesen. brightness(0) macht es komplett schwarz,
   invert(1) daraus weiss; so bleibt die Form erhalten, ohne dass es eine zweite
   Bilddatei braucht. */
.ltn__footer-area .footer-logo img {
    filter: brightness(0) invert(1);
}
.simmo-cta--dunkel,
.simmo-dunkel {
    background-color: var(--simmo-grau);
    color: var(--simmo-grau-text);
}
/* Volle Breite per border-image mit outset: eine einzige Farbflaeche, die 100vmax nach links und
   rechts ueber das Element hinausragt. Zaehlt nicht zur Layout-Breite (kein Querscrollen).
   Vorher box-shadow + clip-path - auf Kommapositionen blieb dort eine helle Haarlinie zwischen
   Element-Hintergrund und Schatten stehen (/unternehmen). */
.simmo-cta--dunkel {
    margin: var(--simmo-block-abstand) 0;
    /* Dieselbe Farbe auch als echter Hintergrund (seit 2026-10-01, Barrierefreiheit BF-02): Pruefwerkzeuge
       wie axe sehen die border-image-Flaeche nicht und meldeten den hellen Text als "hellgrau auf Weiss".
       Optisch keine Aenderung - border-image malt dieselbe Farbe darueber. */
    background-color: var(--simmo-grau);
    border-image: conic-gradient(var(--simmo-grau) 0 0) fill 0 / 0 / 0 100vmax;
}
/* Untertitel-Pille (section-subtitle-2): Das Theme malt den Grund per ::before in Rot mit 10 %
   Deckkraft und roter Schrift - auf Dunkelgrau kaum lesbar. Hier volles Rot mit weisser Schrift.
   !important noetig: .ltn__secondary-color setzt die Schriftfarbe im Theme selbst mit !important. */
.simmo-dunkel .section-subtitle-2 {
    color: #fff !important;
    z-index: 0; /* eigener Stapelkontext, damit das ::before hinter dem Text, aber vor dem Section-Grund liegt */
}
.simmo-dunkel .section-subtitle-2::before {
    background-color: var(--ltn__secondary-color);
    opacity: 1;
    z-index: -1; /* sonst verdeckt der absolut positionierte Grund die Schrift */
}

/* Gruppenbilder in den dunklen Ansprachen (transparente PNGs, Personen unten abgeschnitten).
   Seit 2026-09-15:
   - roter Balken (4px) am unteren Bildrand, der zu den Seiten auslaeuft, mit weissem Lichtschein
   - die Gruppe rutscht beim Hineinscrollen langsam hinter dem Balken hervor und beim Hinausscrollen
     wieder zurueck. JavaScript/gruppenbild.js setzt .simmo-rutschen (nur mit JS - ohne bleibt das
     Bild einfach stehen) und schaltet .is-sichtbar. Die pulsierende Kontur davor wurde verworfen.
   - bei "weniger Bewegung" im System steht das Bild ruhig. */
.simmo-dunkel .about-us-img-wrap {
    position: relative;
}
.simmo-dunkel .about-us-img-wrap::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -20px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.22), transparent 70%);
    pointer-events: none;
}
.simmo-dunkel .about-us-img-wrap::after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--ltn__secondary-color) 30%, var(--ltn__secondary-color) 70%, transparent);
    pointer-events: none;
}
/* Gestapelte Spalten (bis 991 px): Das Bild ist fast bildschirmbreit, die -8 % liessen den Balken
   rechts ueber den Rand ragen - die Seite scrollte seitlich (gemessen 415 statt 400 px). Hier nur so
   breit wie das Bild; der Verlauf laeuft trotzdem zu den Seiten aus. */
@media (max-width: 991px) {
    .simmo-dunkel .about-us-img-wrap::after {
        left: 0;
        right: 0;
    }
}
.simmo-gruppe__maske {
    overflow: hidden;
}
.simmo-gruppe__maske img {
    display: block;
}
.simmo-rutschen .simmo-gruppe__maske img {
    transform: translateY(100%);
    transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.simmo-rutschen.is-sichtbar .simmo-gruppe__maske img {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .simmo-rutschen .simmo-gruppe__maske img {
        transform: none;
        transition: none;
    }
}

/* Links in Fliesstexten (Textelemente): Das Theme faerbt sie wie den Text, sodass Telefon, E-Mail
   und Verweise z. B. im Impressum nicht als Link erkennbar sind. Seit 2026-09-15 rot.
   Seit 2026-10-01 DAUERHAFT unterstrichen (Barrierefreiheit BF-11, WCAG 1.4.1): nur an der Farbe
   erkennbar reicht nicht, Rot ist fuer Menschen mit Rot-Gruen-Schwaeche kaum von Grau zu
   unterscheiden. Beim Ueberfahren wird die Linie dicker. Buttons im Text behalten ihre Optik. */
.frame-type-textmedia .ce-bodytext a:not(.btn),
.frame-type-text .ce-bodytext a:not(.btn),
.frame-type-form_formframework p a:not(.btn) {
    color: var(--ltn__secondary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.frame-type-textmedia .ce-bodytext a:not(.btn):hover,
.frame-type-textmedia .ce-bodytext a:not(.btn):focus-visible,
.frame-type-text .ce-bodytext a:not(.btn):hover,
.frame-type-form_formframework p a:not(.btn):hover {
    text-decoration-thickness: 2px;
}

/* Teilen-Buttons auf der Immobilien-Detailseite (Partial openimmo/Partials/Immobilie/Teilen.html).
   Nach dem Shariff-Prinzip: reine Links, nichts wird von WhatsApp, Facebook & Co. geladen, bevor
   jemand klickt. JavaScript/teilen.js ergaenzt "Link kopieren" und das Teilen-Menue des Geraets. */
.simmo-teilen__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.simmo-teilen__liste li {
    margin: 0;
    padding: 0;
    border: 0;
}
.simmo-teilen__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: var(--simmo-dunkel, #202326);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.simmo-teilen__knopf:hover,
.simmo-teilen__knopf:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.15);
}
.simmo-teilen__knopf svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}
.simmo-teilen__knopf--whatsapp { background-color: #25d366; }
.simmo-teilen__knopf--facebook { background-color: #1877f2; }
.simmo-teilen__knopf--x { background-color: #000; }
.simmo-teilen__knopf--linkedin { background-color: #0a66c2; }
.simmo-teilen__knopf--xing { background-color: #026466; }
.simmo-teilen__knopf--telegram { background-color: #26a5e4; }
.simmo-teilen__status {
    min-height: 1.5em;
    margin: 10px 0 0;
    font-size: 14px;
}
.simmo-cta--dunkel .simmo-cta__inner {
    padding: 90px 0;
}
.simmo-cta--dunkel .simmo-cta__title,
.simmo-dunkel .section-title,
.simmo-dunkel h1,
.simmo-dunkel h2,
.simmo-dunkel h3 {
    color: #fff;
}
.simmo-cta--dunkel p,
.simmo-dunkel p {
    color: var(--simmo-dunkel-text);
}
.simmo-cta--dunkel a:not(.btn),
.simmo-dunkel a:not(.btn) {
    color: #fff;
}
/* Roter Button bleibt rot; beim Hover weiss statt schwarz (schwarz waere auf Dunkelgrau unsichtbar) */
.simmo-cta--dunkel .theme-btn-1:hover,
.simmo-dunkel .theme-btn-1:hover {
    background-color: #fff;
    color: var(--ltn__secondary-color);
    border-color: #fff;
}
.simmo-cta--dunkel .theme-btn-1:hover::after,
.simmo-dunkel .theme-btn-1:hover::after {
    background-color: #fff;
}
@media (max-width: 767px) {
    .simmo-cta--dunkel .simmo-cta__inner {
        padding: 60px 0;
    }
}

/* ===========================================================================
   Soziales Engagement (Content Block "soziales-engagement")
   Karten gleicher Hoehe; die Vereinslogos sind sehr unterschiedlich
   geschnitten (quer, hoch, quadratisch) - feste Logohoehe mit object-fit
   haelt sie unverzerrt und die Karten in einer Reihe buendig.
   =========================================================================== */
.ltn__soziales-engagement-area .row {
    display: flex;
    flex-wrap: wrap;
}
.ltn__soziales-engagement-area .row > [class*="col-"] {
    display: flex;
    margin-bottom: 30px;
}
.simmo-sponsor-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 30px;
    border: 1px solid var(--border-color-8, #e5e7eb);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Hover (seit 2026-09-16): Die Karte hebt sich leicht, der Rahmen nimmt die
   Hausfarbe an und das Logo wird von Grau auf Farbe geholt. Zusammen mit dem
   Info-Knopf, der erst dabei rot wird, sagt das: hier gibt es mehr zu sehen. */
.simmo-sponsor-item:hover,
.simmo-sponsor-item:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
    border-color: var(--ltn__secondary-color, #d63031);
}
.simmo-sponsor-logo {
    height: 90px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.simmo-sponsor-logo img {
    max-height: 90px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.simmo-sponsor-info h4 {
    margin-bottom: 12px;
    font-size: 18px;
}
.simmo-sponsor-info p:last-child {
    margin-bottom: 0;
}
/* Info-Icon oben rechts in der Karte oeffnet das Overlay mit dem vollen Text (seit 2026-09-15) */
.simmo-sponsor-item {
    position: relative;
}
.simmo-sponsor-info-knopf {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #b9bdc4;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Umgekehrt zu vorher (Wunsch vom 16.09.2026): in Ruhe grau, rot erst beim
   Ueberfahren. Das Icon soll die Karte nicht dominieren - es ist ein Angebot,
   kein Alarm. Es faerbt sich mit, sobald die Maus irgendwo auf der Karte ist,
   nicht erst genau auf dem Knopf: Sonst muesste man erst das kleine Ziel
   treffen, um zu merken, dass es eines gibt. */
.simmo-sponsor-item:hover .simmo-sponsor-info-knopf,
.simmo-sponsor-item:focus-within .simmo-sponsor-info-knopf {
    background-color: var(--ltn__secondary-color, #d63031);
}
.simmo-sponsor-info-knopf:hover,
.simmo-sponsor-info-knopf:focus-visible {
    background-color: var(--ltn__secondary-color, #d63031);
    transform: scale(1.12);
}
/* Overlay-Hoehe: Das Theme setzt global .modal-dialog { margin-top: 150px } (style.css) - ein langer
   Text ragte damit unten aus dem Bildschirm. Hier wieder Bootstrap-Abstaende, damit
   modal-dialog-scrollable greift und nur der Text im Overlay scrollt. */
.simmo-sponsor-modal .modal-dialog {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
@media (min-width: 576px) {
    .simmo-sponsor-modal .modal-dialog {
        margin-top: 1.75rem;
        margin-bottom: 1.75rem;
    }
}
/* Overlay: Kopf mit Name und Schliessen-Kreuz nebeneinander (das Theme-Modal kennt nur das Kreuz) */
.simmo-sponsor-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 30px;
}
.simmo-sponsor-modal .modal-title {
    margin: 0;
    font-size: 20px;
}
.simmo-sponsor-modal .modal-header .close {
    position: static;
    margin: 0;
    flex-shrink: 0;
}
.simmo-sponsor-modal .modal-body {
    padding: 10px 30px 30px;
}
.simmo-sponsor-modal__logo {
    margin-bottom: 20px;
    text-align: center;
}
.simmo-sponsor-modal__logo img {
    max-height: 120px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ===========================================================================
   Aufzaehlungen in Textelementen (u.a. /immobilienverwaltung)
   Ersetzt den Standard-Punkt durch ein Haken-Symbol in der Akzentfarbe.
   Greift nur in Textmedia-Inhaltselementen (.frame-type-textmedia .ce-bodytext),
   damit Navigation, Pagination und die Filter-Spalte unberuehrt bleiben - die
   nutzen ebenfalls ul/li.
   =========================================================================== */
.frame-type-textmedia .ce-bodytext ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.frame-type-textmedia .ce-bodytext ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    line-height: 1.6;
}
.frame-type-textmedia .ce-bodytext ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 13px;
    color: var(--ltn__secondary-color);
    position: absolute;
    left: 0;
    top: 2px;
}

/* ===========================================================================
   Bild-neben-Text (fluid_styled_content)
   Das Theme bringt fuer die ce-*-Klassen KEIN CSS mit - die Klassen stehen im
   Markup, bewirkten aber nichts, sodass "Bild rechts/links vom Text" wie
   "Bild ueber Text" aussah. Hier die noetigen Regeln aus dem Standard-
   Stylesheet von fluid_styled_content, auf das Theme-Raster angepasst.
   =========================================================================== */
.ce-textpic::after {
    content: "";
    display: table;
    clear: both;
}
.ce-gallery img {
    max-width: 100%;
    height: auto;
    display: block;
}
.ce-gallery figure {
    margin: 0;
}
.ce-above .ce-gallery {
    margin-bottom: 25px;
}
.ce-below .ce-gallery {
    margin-top: 25px;
}
.ce-intext .ce-gallery {
    max-width: 45%;
    margin-bottom: 20px;
}
.ce-intext.ce-right .ce-gallery {
    float: right;
    margin-left: 35px;
}
.ce-intext.ce-left .ce-gallery {
    float: left;
    margin-right: 35px;
}
/* "nowrap" heisst: Text laeuft NICHT um das Bild herum, sondern steht als
   eigener Block daneben. */
.ce-intext.ce-nowrap .ce-bodytext {
    overflow: hidden;
}
.ce-center .ce-gallery {
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px) {
    .ce-intext .ce-gallery {
        float: none;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================================
   Objekt-Kacheln: gleiche Hoehe, Titel auf zwei Zeilen
   ============================================================
   Die Objekttitel aus OpenImmo sind unterschiedlich lang -
   "Doppelhaushaelfte in Sinsheim, OT Eschelbach!" braucht zwei Zeilen,
   "Einfamilienhaus in Ortsrandlage von Oestringen, OT Odenheim!" drei.
   Nebeneinander verrutschte dadurch alles darunter: Ort, Eckdaten, Preis.

   Zwei Regeln loesen das: Der Titel bekommt feste zwei Zeilen (laengere
   werden mit "..." gekuerzt, der volle Titel bleibt im title-Attribut des
   Links), und die Kacheln einer Reihe werden gleich hoch, damit die
   Preiszeile unten buendig steht.

   NUR in der Grid-Ansicht (.ltn__product-grid-view). Vorher stand hier
   .ltn__product-tab-content-inner allein - das trifft aber BEIDE Tabs, und in
   der Listenansicht zerlegte das display: flex das Layout der Vorlage: dort
   steht das Bild per float: left neben dem Text (max-width: 40%), und ein
   Flex-Container ignoriert float. Bild und Text standen dadurch untereinander
   statt nebeneinander (gemessen 2026-09-21). Gleiche Hoehen braucht die
   Listenansicht ohnehin nicht - je Reihe steht dort nur eine Kachel.
   Der Slider auf der Startseite bleibt unberuehrt: Slick misst dort selbst. */
.ltn__product-tab-content-inner.ltn__product-grid-view .row > [class*="col-"] {
    display: flex;
}
.ltn__product-tab-content-inner.ltn__product-grid-view .ltn__product-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ltn__product-tab-content-inner.ltn__product-grid-view .ltn__product-item .product-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.ltn__product-tab-content-inner.ltn__product-grid-view .ltn__product-item .product-info-bottom {
    margin-top: auto;
}

/* Listenansicht: die Symbolzeile steht im Template INNERHALB von .product-info
   (siehe Item.html, Abschnitt Bootstrap4-list-view) und liegt damit in derselben
   Spalte neben dem Bild. Das Theme rueckt sie zusaetzlich um 30px ein - das ist
   fuer die urspruengliche Stellung als Geschwisterelement gedacht und wuerde die
   Symbole hier doppelt einruecken. */
.ltn__product-list-view .ltn__product-item .product-info .product-info-bottom {
    padding-left: 0;
}

/* Titel: genau zwei Zeilen, egal wie lang */
.ltn__product-item .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
}
.ltn__product-item .product-title a {
    display: inline;
}

/* ============================================================
   Eckdaten (m2 / Zimmer / Baujahr): ueber die volle Breite
   ============================================================
   Vorher stand jede Angabe mittig in ihrem Drittel, wodurch die Zeile
   zusammengedraengt wirkte. Jetzt sitzt die erste Angabe am linken Rand,
   die letzte am rechten, die mittlere bleibt zentriert - die Zeile spannt
   sichtbar ueber die Kachelbreite. Die Trennlinien (li::before) bleiben,
   wo sie waren. */
.simmo-eckdaten li:first-child {
    text-align: left;
    padding-left: 0;
}
.simmo-eckdaten li:last-child {
    text-align: right;
    padding-right: 0;
}

/* ============================================================
   Team: Beschreibung in Grau, Kontakt bei Hover
   ============================================================
   Die Positionsbezeichnung stand in .ltn__secondary-color, also im Rot des
   Farbschemas. Auf einer Seite mit 21 Personen war das eine rote Wand; die
   Angabe ist eine Nebeninformation und liest sich in Dunkelgrau ruhiger. */
.simmo-team-item .simmo-team-position {
    color: var(--simmo-text-leise, #4a4a4a);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

/* Kontaktstreifen ueber dem Bild. Er liegt im Bild, damit beim Aufdecken
   nichts umbricht - eine aufklappende Karte wuerde die ganze Reihe
   verschieben. */
.simmo-team-item .team-img {
    position: relative;
    overflow: hidden;
}
.simmo-team-item .simmo-team-kontakt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.78);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.simmo-team-item:hover .simmo-team-kontakt,
.simmo-team-item:focus-within .simmo-team-kontakt {
    transform: translateY(0);
}
.simmo-team-item .simmo-team-kontakt a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
}
.simmo-team-item .simmo-team-kontakt a + a {
    margin-top: 4px;
}
.simmo-team-item .simmo-team-kontakt a:hover {
    color: var(--secondary-color, #d63031);
}
.simmo-team-item .simmo-team-kontakt i {
    flex: 0 0 14px;
    font-size: 12px;
}

/* Ohne Hover (Touch) bleibt der Streifen stehen - sonst kaeme man dort nie
   an die Kontaktdaten. */
@media (hover: none) {
    .simmo-team-item .simmo-team-kontakt {
        position: static;
        transform: none;
        background: rgba(0, 0, 0, 0.85);
    }
}

/* Social-Icons erscheinen erst, wenn die Maus auf der Karte ist - sie zeigen
   ohnehin (noch) ins Leere und beruhigen die Seite, solange sie unsichtbar
   sind. Der Platz bleibt reserviert, damit beim Aufdecken nichts springt.
   Tastaturnutzer bekommen sie ueber :focus-within zu sehen. */
.simmo-team-item .ltn__social-media {
    opacity: 0;
    transition: opacity 0.25s ease;
}
.simmo-team-item:hover .ltn__social-media,
.simmo-team-item:focus-within .ltn__social-media {
    opacity: 1;
}
@media (hover: none) {
    .simmo-team-item .ltn__social-media {
        opacity: 1;
    }
}

/* X statt Twitter: Font Awesome 5 kennt das X-Logo nicht, deshalb ein
   Inline-SVG, das sich wie die Icon-Fonts daneben verhaelt. */
.simmo-icon-x {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* ============================================================
   Externe Links im redaktionellen Text kennzeichnen
   ============================================================
   Ein kleines Pfeil-Symbol vor Links, die das Haus verlassen. Erkannt wird
   das an der absoluten Adresse: Interne Verweise schreibt TYPO3 relativ
   ("/impressum"), nur externe beginnen mit http. Die eigene Domain ist
   ausgenommen, falls sie doch einmal ausgeschrieben im Text steht.
   Beschraenkt auf .ce-bodytext, damit Navigation, Footer und Social-Icons
   unberuehrt bleiben. */
.ce-bodytext a[href^="http://"]:not([href*="s-immo-kraichgau"])::before,
.ce-bodytext a[href^="https://"]:not([href*="s-immo-kraichgau"])::before {
    content: "\f35d";           /* fa-external-link-alt */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.8em;
    margin-right: 0.35em;
    display: inline-block;
    text-decoration: none;
}

/* ============================================================
   Kopfbereich (Breadcrumb): Dachmuster auf dunklem Grund
   ============================================================
   Dritter und letzter Stand vom 16.09.2026. Vorher lag dort ein Stockfoto der
   Design-Vorlage, danach ein einzelnes Dach - erst dauerhaft schwebend, dann
   mit sich nachzeichnender Kontur, dann einmal herabsinkend. Alles verworfen:
   Ein Titelstreifen, der sich bei jedem Seitenaufruf bewegt, wird laestig, und
   ohne Bewegung ist er auch barrierefrei unbedenklich (keine Regel fuer
   prefers-reduced-motion noetig, weil sich nichts regt).

   Jetzt ein ruhendes Muster: Dachlinien, reihenweise um eine halbe Kachel
   versetzt wie Ziegel. Die Form ist dieselbe wie im Logo, nur vereinfacht zur
   Linie. Als data-URI im Stylesheet - kein zusaetzlicher Bilddownload, keine
   Datei, die beim Deploy vergessen werden kann.

   Ausserdem war das Polster viel zu gross: 110px oben und unten plus 120px
   Abstand darunter, aus der Design-Vorlage uebernommen. */
.ltn__breadcrumb-area {
    padding-top: 55px;
    padding-bottom: 50px;
    margin-bottom: 60px;
}
@media (max-width: 767px) {
    .ltn__breadcrumb-area {
        padding-top: 35px;
        padding-bottom: 32px;
        margin-bottom: 40px;
    }
}

.simmo-breadcrumb {
    position: relative;
    overflow: hidden;
    background-color: var(--simmo-grau, #3d3d3d);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='120 0 760 560'%3E%3Cg transform='rotate(-16 500 280)'%3E%3Cpath d='M-1100.0,724.1947565543071 L500.0,60 L2100.0,724.1947565543071 L2100.0,786.1947565543071 L500.0,122.0 L-1100.0,786.1947565543071 Z' fill='%23ffffff' opacity='0.16'/%3E%3Cpath d='M-1100.0,842.1947565543071 L500.0,178 L2100.0,842.1947565543071 L2100.0,904.1947565543071 L500.0,240.0 L-1100.0,904.1947565543071 Z' fill='%23ffffff' opacity='0.115'/%3E%3Cpath d='M-1100.0,960.1947565543071 L500.0,296 L2100.0,960.1947565543071 L2100.0,1022.1947565543071 L500.0,358.0 L-1100.0,1022.1947565543071 Z' fill='%23ffffff' opacity='0.075'/%3E%3Cpath d='M-1100.0,1078.194756554307 L500.0,414 L2100.0,1078.194756554307 L2100.0,1140.194756554307 L500.0,476.0 L-1100.0,1140.194756554307 Z' fill='%23ffffff' opacity='0.045'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    /* Deutlich groesser als der Streifen hoch ist und nach oben hinausgeschoben:
       Die Dachspitzen liegen dadurch ausserhalb, sichtbar bleiben nur die
       schraegen Flanken. Das Motiv wirkt angeschnitten statt aufgestellt -
       man erkennt die Form, ohne dass sie wie ein Logo mitten im Bild sitzt. */
    background-position: right -60px center;
    background-size: auto 175%;
}
@media (max-width: 767px) {
    /* Auf dem Handy nimmt das Motiv sonst die halbe Flaeche unter der Ueberschrift ein. */
    .simmo-breadcrumb {
        background-size: auto 135%;
        background-position: right -40px center;
    }
}

/* Nach rechts hin laeuft das Muster aus, damit Ueberschrift und Pfad auf der
   linken Seite auf ruhigem Grund stehen. */
.simmo-breadcrumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--simmo-grau, #3d3d3d) 14%, rgba(61, 61, 61, 0.78) 42%, rgba(61, 61, 61, 0.18) 100%);
    z-index: 1;
}
.simmo-breadcrumb .container {
    position: relative;
    z-index: 2;
}

/* Auf dunklem Grund muessen Ueberschrift und Pfad hell sein - das Theme faerbt
   sie fuer einen hellen Streifen. */
.simmo-breadcrumb .page-title,
.simmo-breadcrumb .ltn__breadcrumb-list ul li,
.simmo-breadcrumb .ltn__breadcrumb-list ul li a {
    color: #fff;
}
.simmo-breadcrumb .ltn__breadcrumb-list ul li a:hover {
    color: var(--secondary-color, #d63031);
}

/* ============================================================
   Seitentitel ohne Kopfbereich
   ============================================================
   Wenn die Seiteneigenschaft "Kopfbereich mit Seitentitel anzeigen" aus ist,
   steht der Titel schlicht ueber dem Inhalt - sonst begaenne die Seite
   unvermittelt mit dem ersten Inhaltselement. */
.simmo-seitentitel {
    padding-top: 50px;
}
.simmo-seitentitel .page-title {
    margin-bottom: 0;
}

/* ============================================================
   Detailseite: Umfeld-Knoepfe unter der Karte
   ============================================================
   Die Extension liefert neun Knoepfe (Supermaerkte, Restaurants, Bus & Bahn …)
   in einer Bootstrap-btn-group. Die presst alles in eine Zeile, die dann
   umbricht: Am 16.09.2026 gemessen waren die Knoepfe zwischen 211 und 266 Pixel
   breit, jede Reihe anders versetzt, dazu das Bootstrap-Blau, das sonst
   nirgends auf der Seite vorkommt.

   Aus der btn-group wird deshalb ein Raster mit gleich breiten Feldern - drei
   je Reihe, auf schmalen Schirmen zwei, auf dem Handy eines. Und die Farben
   sind die des Hauses: ruhiger Umriss, Icon in Rot, ausgewaehlt rot gefuellt. */
.btn-group.openimmo-google-map-points-of-interest-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}
@media (max-width: 991px) {
    .btn-group.openimmo-google-map-points-of-interest-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .btn-group.openimmo-google-map-points-of-interest-buttons {
        grid-template-columns: 1fr;
    }
}

/* btn-group setzt bei ihren Kindern negative Raender und eckige Ecken - beides
   muss weg, sonst ueberlappen die Felder im Raster. */
.btn-group.openimmo-google-map-points-of-interest-buttons > .btn,
.btn-group.openimmo-google-map-points-of-interest-buttons > .btn:not(:first-child),
.btn-group.openimmo-google-map-points-of-interest-buttons > .btn:not(:last-child) {
    margin: 0;
    border-radius: 4px;
    width: 100%;
}
.btn-group.openimmo-google-map-points-of-interest-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid var(--border-color-8, #e5e7eb);
    color: var(--heading-color, #071c1f);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.btn-group.openimmo-google-map-points-of-interest-buttons .btn i {
    color: var(--ltn__secondary-color, #d63031);
    transition: color 0.2s ease;
}
.btn-group.openimmo-google-map-points-of-interest-buttons .btn:hover,
.btn-group.openimmo-google-map-points-of-interest-buttons .btn:focus-visible {
    border-color: var(--ltn__secondary-color, #d63031);
    color: var(--ltn__secondary-color, #d63031);
    background-color: #fff;
}

/* Ausgewaehlt: gefuellt, damit man auf einen Blick sieht, was gerade auf der
   Karte liegt. Die Extension setzt dafuer .active bzw. .btn-primary. */
.btn-group.openimmo-google-map-points-of-interest-buttons .btn.active,
.btn-group.openimmo-google-map-points-of-interest-buttons .btn.btn-primary {
    background-color: var(--ltn__secondary-color, #d63031);
    border-color: var(--ltn__secondary-color, #d63031);
    color: #fff;
}
.btn-group.openimmo-google-map-points-of-interest-buttons .btn.active i,
.btn-group.openimmo-google-map-points-of-interest-buttons .btn.btn-primary i {
    color: #fff;
}

/* ============================================================
   Einwilligungsfenster (Klaro) im Erscheinungsbild der Website
   ============================================================
   Klaro bringt ein eigenes, gruenes Aussehen mit, das neben dem Rest der Seite
   wie ein Fremdkoerper wirkt. Es laesst sich ueber CSS-Variablen umstellen -
   deshalb hier kein Nachbau der Bibliotheks-Regeln, sondern nur andere Werte:
   der dunkle Grund des Footers, das Rot des Hauses, die Schrift der Seite. */
.klaro {
    --font-family: 'Poppins', sans-serif;
    --font-size: 14px;
    --border-radius: 4px;
    --button-text-color: #fff;

    /* Flaechen: derselbe dunkle Ton wie Footer und Kopfbereich */
    --dark1: var(--simmo-grau, #3d3d3d);
    --dark2: #4a4a4a;
    --dark3: #565656;
    --light1: #ffffff;
    --light2: var(--simmo-grau-text, #d8dadc);
    --light3: #aeb3c0;

    /* Annehmen und Ablehnen tragen DIESELBE Farbe - siehe unten. Alle Toepfe,
       aus denen Klaro seine Knopffarben nimmt, zeigen deshalb auf dieselbe
       Theme-Variable; sonst entstehen zwei aehnliche, aber verschiedene Rots. */
    --green1: var(--ltn__secondary-color, #d63031);
    --green2: var(--ltn__secondary-color, #d63031);
    --green3: var(--ltn__primary-color, #071c1f);
    --red1: var(--ltn__secondary-color, #d63031);
    --red2: var(--ltn__secondary-color, #d63031);
    --red3: var(--ltn__primary-color, #071c1f);
    --blue1: var(--ltn__secondary-color, #d63031);
    --blue2: var(--ltn__primary-color, #071c1f);
}

/* ---- Annehmen und Ablehnen muessen gleichwertig aussehen ----
   Vorgabe der Aufsichtsbehoerden: Eine Einwilligung ist nur freiwillig, wenn
   Ablehnen genauso leicht faellt wie Zustimmen. Ein bunter "Annehmen"-Knopf
   neben einem blassen "Ablehnen" ist ein Dark Pattern und macht die
   Einwilligung angreifbar.

   Deshalb tragen hier ALLE Knoepfe dieselbe Groesse, dieselbe Schrift, denselben
   Grund und denselben Kontrast. Unterschiedlich ist nur die Beschriftung. Wer
   das aendert, nimmt der Einwilligung ihre Grundlage.

   In Ruhe weisser Rahmen auf dunklem Grund, beim Ueberfahren rot gefuellt - so
   ist keiner der beiden von vornherein der "richtige". */
.klaro .cm-btn,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-decline,
.klaro .cm-btn.cn-decline {
    background-color: transparent;
    color: #fff;
    border: 1px solid #ffffff;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 12px;
    padding: 11px 18px;
    text-align: center;
    opacity: 1;
}
.klaro .cm-btn:hover,
.klaro .cm-btn:focus-visible,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cn-decline:hover {
    background-color: var(--ltn__secondary-color, #d63031);
    border-color: var(--ltn__secondary-color, #d63031);
    color: #fff;
}

/* ---- Die Knopfreihe fuellt die Breite des Hinweises ----
   "Einstellungen" steht darueber, Ablehnen und Einverstanden teilen sich die
   Zeile darunter zu gleichen Teilen. Gleich breit ist hier nicht Kosmetik: Es
   ist derselbe Grund wie bei Farbe und Groesse. */
/* :not(.cookie-modal-notice) traegt Klaro in seinen eigenen Regeln fuer diesen
   Bereich - ohne das gewinnt dort margin-top: -0.5em. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 26px;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cn-buttons {
    display: flex;
    width: 100%;
    gap: 10px;
    margin: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cn-buttons .cm-btn {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a.cn-learn-more,
.klaro .cookie-modal .cm-btn.cm-btn-info {
    display: block;
    width: 100%;
    background-color: transparent;
    color: #fff;
    border: 1px solid #757d90;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 12px;
    padding: 11px 18px;
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius, 4px);
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a.cn-learn-more:hover,
.klaro .cookie-modal .cm-btn.cm-btn-info:hover {
    background-color: var(--ltn__secondary-color, #d63031);
    border-color: var(--ltn__secondary-color, #d63031);
    color: #fff;
}

/* ---- Der "nach oben"-Pfeil darf nicht ueber dem Fenster liegen ----
   Das Theme setzt ihn per JavaScript auf z-index 2147483647 - den groessten
   Wert, den es gibt. Ueberbieten laesst sich das nicht, also wird er
   heruntergesetzt. Das !important ist noetig, weil der Wert als Inline-Stil am
   Element haengt; eine gewoehnliche Regel kaeme dagegen nicht an. */
#scrollUp {
    z-index: 1000 !important;
}
.klaro .cookie-notice,
.klaro .cookie-modal {
    z-index: 100000 !important;
}

/* ---- Der Hinweisstreifen ---- */
.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal .cm-modal {
    border: 1px solid #ffffff;
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.klaro .cookie-notice:not(.cookie-modal-notice) {
    max-width: 440px;
    /* Nach links: Unten rechts sitzen der Suchdialog und der "nach oben"-Pfeil.
       Ohne das ueberdeckt der Streifen beides, solange niemand entschieden hat. */
    right: auto;
    left: 24px;
}
@media (max-width: 575px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 0;
        right: 0;
    }
}
@media (max-width: 575px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        max-width: none;
        border-radius: 0;
    }
}

/* Ueberschriften im Fenster in der Schrift der Seite */
.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-notice .cn-body h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

/* Klaro blendet unten eine Eigenwerbung ein - per leerem poweredBy abgeschaltet,
   der leere Platz bliebe aber stehen. */
.klaro .cookie-modal .cm-powered-by,
.klaro .cookie-notice .cm-powered-by {
    display: none;
}

/* ---- Die Schalter je Dienst ----
   Klaro faerbt die Schiene im Zustand "aus" #f2f2f2 und den Punkt darin #e6e6e6 -
   grau auf grau, auf unserem dunklen Grund erst recht nicht zu finden. Am
   16.09.2026 gemessen, nachdem es aufgefallen war.

   Jetzt: Schiene im Ausgeschalteten dunkel mit hellem Rand, im Eingeschalteten
   rot, der Punkt in beiden Faellen weiss. So unterscheiden sich die Zustaende
   nicht nur in der Farbe, sondern auch an der Position des Punktes. */
.klaro .cookie-modal .cm-list-input + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input + .cm-list-label .slider,
.klaro .cm-list-label .slider {
    background-color: #4e5567;
    border: 1px solid #757d90;
}
.klaro .cookie-modal .cm-list-input + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input + .cm-list-label .slider::before,
.klaro .cm-list-label .slider::before {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-list-input.required:checked + .cm-list-label .slider {
    background-color: var(--ltn__secondary-color, #d63031);
    border-color: var(--ltn__secondary-color, #d63031);
}
.klaro .cm-list-input:checked + .cm-list-label .slider::before {
    background-color: #ffffff;
}
.klaro .cm-list-input:focus-visible + .cm-list-label .slider {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Der Grund hinter dem offenen Fenster: Klaro nimmt rgba(0,0,0,0.5), dahinter
   liest man die Seite noch mit und die Aufmerksamkeit bleibt geteilt. Dunkler
   und leicht unscharf - die Entscheidung soll im Vordergrund stehen.
   (Wer kein backdrop-filter kann, sieht einfach nur den dunkleren Grund.) */
.klaro .cookie-modal .cm-bg {
    background-color: rgba(20, 20, 20, 0.88);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ---- Textfarben im Fenster ----
   Klaro ist fuer ein HELLES Fenster gebaut: --dark1/2/3 sind dort die
   Textfarben, --light1/2/3 die Flaechen. Unser Fenster ist dunkel, weil es zur
   Seite passen soll - dadurch stand dunkler Text auf dunklem Grund. Am
   16.09.2026 gemessen: Die Dienstbeschreibungen kamen auf #2e3446, das
   Schliessen-Kreuz sogar auf Schwarz.

   Statt an den Variablen zu drehen (sie steuern auch Flaechen) stehen die
   Textfarben hier ausdruecklich. */
.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal span,
.klaro .cookie-modal .cm-modal li,
.klaro .cookie-modal .cm-modal h1,
.klaro .cookie-modal .cm-modal h2,
.klaro .cookie-modal .cm-modal .cm-list-title,
.klaro .cookie-modal .cm-modal .cm-caption {
    color: #ffffff;
}

/* Beschreibungen und Nebentexte etwas zurueckgenommen, aber noch klar lesbar. */
.klaro .cookie-modal .cm-modal .cm-list-description,
.klaro .cookie-modal .cm-modal .cm-services .cm-content span,
.klaro .cookie-modal .cm-modal .cm-purpose p,
.klaro .cookie-notice .cn-body p {
    color: var(--simmo-grau-text, #d8dadc);
}

/* Links: Rot auf dem dunklen Grund liest sich schlecht (gemessen: Helligkeit 76).
   Weiss und unterstrichen, beim Ueberfahren in der Hausfarbe. */
.klaro .cookie-modal .cm-modal a,
.klaro .cookie-notice .cn-body a:not(.cn-learn-more):not(.cm-btn) {
    color: #ffffff;
    text-decoration: underline;
}
.klaro .cookie-modal .cm-modal a:hover,
.klaro .cookie-notice .cn-body a:not(.cn-learn-more):not(.cm-btn):hover {
    color: var(--ltn__secondary-color, #d63031);
}

/* Das Schliessen-Kreuz oben rechts stand auf Schwarz. */
.klaro .cookie-modal .cm-modal .hide svg,
.klaro .cookie-modal .cm-modal .hide {
    color: #ffffff;
    stroke: #ffffff;
}

/* ---- Die Knopfreihe im offenen Fenster ----
   Klaro laesst "Auswahl uebernehmen" den ganzen freien Platz zwischen den
   beiden anderen fuellen - der Knopf war dadurch fast dreimal so breit wie
   "Ablehnen". Das sieht nicht nur unruhig aus, es hebt eine der Moeglichkeiten
   hervor. Alle drei bekommen deshalb denselben Anteil. */
.klaro .cookie-modal .cm-modal .cm-footer-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
}
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
@media (max-width: 575px) {
    .klaro .cookie-modal .cm-modal .cm-footer-buttons {
        flex-direction: column;
    }
}

/* ============================================================
   Uebersicht auf Ordner-Seiten (Partials/Uebersicht.html)
   ============================================================
   Kacheln zu den Unterseiten - Bild, Titel, Kurzfassung. Gleiche Hoehe je
   Reihe, damit die "Ansehen"-Zeile unten buendig steht, auch wenn die eine
   Seite eine Kurzfassung hat und die andere nicht. */
.ltn__uebersicht-area .row > [class*="col-"] {
    display: flex;
    margin-bottom: 30px;
}
.simmo-uebersicht-karte {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--border-color-8, #e5e7eb);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.simmo-uebersicht-karte:hover,
.simmo-uebersicht-karte:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
    border-color: var(--ltn__secondary-color, #d63031);
}
.simmo-uebersicht-karte__bild {
    position: relative;
    aspect-ratio: 600 / 380;
    overflow: hidden;
    background-color: var(--simmo-grau, #3d3d3d);
}
.simmo-uebersicht-karte__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.simmo-uebersicht-karte:hover .simmo-uebersicht-karte__bild img {
    transform: scale(1.04);
}

/* ---- Platzhalter, wo kein Bild gepflegt ist ----
   Ueberall gleich: der dunkle Ton des Kopfbereichs und darauf das Dach aus dem
   Logo, gross und angeschnitten in der rechten unteren Ecke. Eine leere graue
   Flaeche saehe aus wie ein Fehler; so sieht man, dass hier ein Bild hin
   koennte, und es bleibt trotzdem ruhig.

   Als eigene Klasse, damit dieselbe Flaeche auch an anderen Stellen genutzt
   werden kann - nicht noch einmal nachgebaut. */
.simmo-bild-platzhalter {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background-color: var(--simmo-grau, #3d3d3d);
}

/* Das Bild liegt in einer eigenen Ebene, weil ein Filter sonst auch das Logo
   darueber grau faerben wuerde. Graustufen und aufgehellt sind schon in die
   Datei gerechnet (ImageMagick, -colorspace Gray -modulate 118); der Filter
   hier nimmt nur noch etwas Kontrast heraus, damit das Logo ruhig darauf steht. */
.simmo-bild-platzhalter::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Heller Schleier ueber dem Bild: Ohne ihn verschwindet der Schriftzug des
       Logos in den Fenstern und Baeumen des Schlosses - gemessen, indem die
       Kachel ohne Schleier nebeneinandergestellt wurde. Der Verlauf liegt in
       derselben Eigenschaft wie das Bild, damit keine dritte Ebene noetig ist
       (::before und ::after sind belegt). */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)),
        url("../Images/platzhalter-bruchsal.jpg");
    background-size: cover;
    background-position: center;
    filter: contrast(0.78);
}

/* Das Logo mittig darueber - dasselbe SVG wie im Kopfbereich der Seite. */
.simmo-bild-platzhalter::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../Images/s-immo-logo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 62% auto;
    /* drop-shadow statt box-shadow: Es folgt der Form des Logos (Dach, Quadrat,
       Schriftzug), nicht dem rechteckigen Element. Dezent gehalten - der
       Schatten soll das Logo vom Bild abheben, nicht auffallen. */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

.simmo-uebersicht-karte__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 26px 28px 24px;
}
.simmo-uebersicht-karte__text h2 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--heading-color, #071c1f);
}
.simmo-uebersicht-karte__text p {
    color: var(--simmo-text-leise, #4a4a4a);
    font-size: 15px;
    margin-bottom: 18px;
}
.simmo-uebersicht-karte__mehr {
    margin-top: auto;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ltn__secondary-color, #d63031);
}
.simmo-uebersicht-karte__mehr i {
    margin-left: 6px;
    transition: transform 0.25s ease;
    display: inline-block;
}
.simmo-uebersicht-karte:hover .simmo-uebersicht-karte__mehr i {
    transform: translateX(4px);
}

/* ---- News-Bilder fuellen ihre Spalte ----
   Das Theme laesst die Bilder in ihrer natuerlichen Groesse stehen; gemessen am
   16.09.2026 waren sie 720 Pixel breit in einer 766 Pixel breiten Spalte und
   sassen dadurch mit einem Rand darin. Jetzt fuellen sie die Spalte; das
   Seitenverhaeltnis kommt aus dem Bildschnitt (960x534). */
.ltn__blog-item .ltn__blog-img,
.ltn__blog-item .ltn__blog-img a {
    display: block;
    width: 100%;
}
.ltn__blog-item .ltn__blog-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Der Preis ist die wichtigste Zahl auf der Kachel ----
   Gemessen am 16.09.2026: 18 Pixel bei Schriftgewicht 600 - er ging zwischen
   Titel (20 Pixel) und Eckdaten unter, obwohl er die Angabe ist, nach der
   zuerst geschaut wird. Jetzt 26 Pixel und 800; der Zusatz "/Monat" bleibt
   klein und leicht, sonst konkurriert er mit der Zahl. */
.ltn__product-item .product-price,
.ltn__product-item .product-info-bottom .product-price {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.ltn__product-item .product-price span {
    font-size: inherit;
    font-weight: inherit;
}
.ltn__product-item .product-price label,
.ltn__product-item .product-price .month {
    font-size: 14px;
    font-weight: 500;
    margin-left: 2px;
}

/* Auf schmalen Schirmen eine Stufe kleiner, sonst bricht die Zeile um. */
@media (max-width: 575px) {
    .ltn__product-item .product-price,
    .ltn__product-item .product-info-bottom .product-price {
        font-size: 22px;
    }
}

/* ============================================================
   Suchdialog fuer Immobilien (Partials/ImmoDialog.html)
   ============================================================
   Knopf unten rechts, darueber klappt das Fenster auf. Der Knopf sitzt links
   neben dem "nach oben"-Pfeil, damit sich die beiden nicht ueberdecken. */
.simmo-immo-dialog-knopf {
    position: fixed;
    right: 24px;
    /* Ueber dem "nach oben"-Pfeil: Der sitzt 62 Pixel ueber der Unterkante und ist
       57 hoch (gemessen 16.09.2026), reicht also bis 119. Mit 135 bleibt Luft
       dazwischen, und beide sind einzeln zu treffen. */
    bottom: 135px;
    z-index: 998;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px 10px 10px;
    border: 0;
    border-radius: 44px;
    background-color: var(--ltn__secondary-color, #d63031);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.simmo-immo-dialog-knopf:hover,
.simmo-immo-dialog-knopf:focus-visible {
    background-color: var(--simmo-dunkel, #252525);
    transform: translateY(-2px);
}

/* Das Gesicht sitzt in einem hellen Kreis - so wirkt es wie ein Gegenueber und
   nicht wie ein Symbol auf einem Knopf. */
.simmo-immo-dialog-knopf__gesicht {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.16);
    font-size: 26px;
    line-height: 1;
}

/* Alle sieben Sekunden meldet sich der Roboter: Er wird groesser und dreht sich
   einmal ganz. Vorher war es nur ein kurzes Nicken (simmoRoboterNicken) - das ging
   neben dem roten Knopf unter. Die Pause macht den groessten Teil der Laufzeit aus,
   die Geste selbst dauert nur knapp zwei Sekunden.

   Warum der letzte Schritt auf rotate(360deg) stehen bleibt und nicht auf 0:
   Von 360 zurueck auf 0 wuerde der Kopf sichtbar rueckwaerts drehen. Am
   Schleifenende ist 360deg optisch dasselbe wie 0deg, der Uebergang faellt nicht auf.

   Der helle Kreis drumherum atmet leicht mit, damit die Bewegung nicht nur am
   Symbol haengt. Bei "Bewegung reduzieren" bleibt beides still. */
.simmo-immo-dialog-knopf__gesicht i {
    display: inline-block;
    animation: simmoRoboterMeldetSich 7s ease-in-out infinite;
    transform-origin: 50% 50%;
}
@keyframes simmoRoboterMeldetSich {
    0%, 68%          { transform: rotate(0deg) scale(1); }
    74%              { transform: rotate(0deg) scale(1.3); }
    88%              { transform: rotate(360deg) scale(1.3); }
    95%, 100%        { transform: rotate(360deg) scale(1); }
}
.simmo-immo-dialog-knopf__gesicht {
    animation: simmoRoboterKreis 7s ease-in-out infinite;
}
@keyframes simmoRoboterKreis {
    0%, 68%, 95%, 100% { background-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
    74%, 88%           { background-color: rgba(255, 255, 255, 0.32); transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .simmo-immo-dialog-knopf__gesicht i,
    .simmo-immo-dialog-knopf__gesicht { animation: none; }
}

@media (max-width: 575px) {
    /* Auf dem Handy nur das Gesicht - der Text naehme sonst die halbe Breite.
       Der Pfeil sitzt dort ebenfalls hoeher, deshalb bleibt der Abstand. */
    .simmo-immo-dialog-knopf__text { display: none; }
    .simmo-immo-dialog-knopf { padding: 8px; border-radius: 50%; bottom: 120px; }
    .simmo-immo-dialog { bottom: 196px; max-height: calc(100vh - 240px); }
}

.simmo-immo-dialog {
    position: fixed;
    right: 24px;
    bottom: 213px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 520px;
    max-height: calc(100vh - 260px);
    background-color: #fff;
    border: 1px solid var(--simmo-grau, #3d3d3d);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.simmo-immo-dialog[hidden] { display: none; }

.simmo-immo-dialog__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background-color: var(--simmo-grau, #3d3d3d);
    color: #fff;
}
.simmo-immo-dialog__titel { font-weight: 600; font-size: 15px; }
.simmo-immo-dialog__schliessen {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
}
.simmo-immo-dialog__schliessen:hover { color: var(--ltn__secondary-color, #d63031); }

.simmo-immo-dialog__verlauf {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #f7f7f8;
}
.simmo-immo-dialog__nachricht {
    max-width: 86%;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    /* Jede Nachricht schiebt sich von unten herein, statt einfach dazustehen. */
    animation: simmoNachrichtHerein 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes simmoNachrichtHerein {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Die drei Punkte, solange der Dialog "nachdenkt". */
.simmo-immo-dialog__tippt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 14px 15px;
}
.simmo-immo-dialog__tippt span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--simmo-text-leise, #4a4a4a);
    opacity: 0.45;
    animation: simmoTippt 1.1s ease-in-out infinite;
}
.simmo-immo-dialog__tippt span:nth-child(2) { animation-delay: 0.16s; }
.simmo-immo-dialog__tippt span:nth-child(3) { animation-delay: 0.32s; }
@keyframes simmoTippt {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
    30% { transform: translateY(-5px); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
    .simmo-immo-dialog__nachricht { animation: none; }
    .simmo-immo-dialog__tippt span { animation: none; }
}
.simmo-immo-dialog__nachricht--bot {
    align-self: flex-start;
    background-color: #fff;
    border: 1px solid var(--border-color-8, #e5e7eb);
    color: var(--heading-color, #071c1f);
}
.simmo-immo-dialog__nachricht--mensch {
    align-self: flex-end;
    background-color: var(--ltn__secondary-color, #d63031);
    color: #fff;
}

/* Trefferkarten: bewusst schlicht, damit die Angaben zaehlen und nicht die Optik. */
.simmo-immo-dialog__treffer-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.simmo-immo-dialog__treffer {
    display: block;
    /* Die Treffer kommen nacheinander an (Verzoegerung setzt das Skript). */
    animation: simmoNachrichtHerein 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
    padding: 11px 13px;
    background-color: #fff;
    border: 1px solid var(--border-color-8, #e5e7eb);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.simmo-immo-dialog__treffer:hover {
    border-color: var(--ltn__secondary-color, #d63031);
    transform: translateX(3px);
}
.simmo-immo-dialog__treffer-titel {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--heading-color, #071c1f);
    margin-bottom: 3px;
}
.simmo-immo-dialog__treffer-zeile {
    display: block;
    font-size: 12px;
    color: var(--simmo-text-leise, #4a4a4a);
    margin-bottom: 5px;
}
.simmo-immo-dialog__treffer-preis {
    display: block;
    font-weight: 800;
    font-size: 16px;
    color: var(--ltn__secondary-color, #d63031);
}

.simmo-immo-dialog__formular {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border-color-8, #e5e7eb);
    background-color: #fff;
}
.simmo-immo-dialog__feld {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-color-8, #e5e7eb);
    border-radius: 6px;
    font-size: 14px;
}
.simmo-immo-dialog__feld:focus {
    outline: 2px solid var(--ltn__secondary-color, #d63031);
    outline-offset: 1px;
}
.simmo-immo-dialog__senden {
    flex: 0 0 auto;
    border: 0;
    border-radius: 6px;
    padding: 0 15px;
    background-color: var(--ltn__secondary-color, #d63031);
    color: #fff;
    cursor: pointer;
}
.simmo-immo-dialog__senden:hover { background-color: var(--simmo-dunkel, #252525); }

/* Der Name im Kopf des Dialogs, mit dem Zusatz kleiner daneben. */
.simmo-immo-dialog__titel {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.simmo-immo-dialog__titel i {
    font-size: 17px;
    align-self: center;
}
.simmo-immo-dialog__titel small {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.75;
}

/* ---- Der Name "Bechti" ----
   Im Verlauf immer fett und in der Hausfarbe, damit klar ist, wer spricht.
   Zwei Ausnahmen, und beide aus einem Grund - Rot auf Rot ist nicht lesbar:
   im Knopf (roter Grund) und in einer Nachricht des Besuchers (ebenfalls rot).
   Dort steht der Name weiss, aber weiterhin fett. */
.simmo-immo-dialog__name {
    color: var(--ltn__secondary-color, #d63031);
    font-weight: 800;
}
.simmo-immo-dialog__nachricht--mensch .simmo-immo-dialog__name,
.simmo-immo-dialog-knopf .simmo-immo-dialog__name {
    color: #fff;
}

/* In der Kopfzeile steht der Name auf dem dunklen Grau - dort traegt das Rot. */
.simmo-immo-dialog__kopf .simmo-immo-dialog__name {
    color: var(--ltn__secondary-color, #d63031);
    font-size: 16px;
}

/* ============================================================
   Besprechungsliste unter /besprechen
   ============================================================
   Die Seite zeigt besprechung-todo.md. Sie ist Arbeitsmittel, kein Webauftritt -
   deshalb schlicht, gut lesbar und mit klarer Gliederung statt Theme-Optik. */
.simmo-besprechung-hinweis {
    margin-bottom: 30px;
    padding: 14px 18px;
    border-left: 4px solid var(--ltn__secondary-color, #d63031);
    background-color: #f7f7f8;
    font-size: 14px;
    color: var(--simmo-text-leise, #4a4a4a);
}
.simmo-besprechung-hinweis--fehler {
    background-color: #fdecec;
}

.simmo-md {
    max-width: 62rem;
    font-size: 15px;
    line-height: 1.65;
}
.simmo-md h2 {
    margin: 42px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color-8, #e5e7eb);
    font-size: 26px;
}
.simmo-md h2:first-child { margin-top: 0; }
.simmo-md h3 { margin: 30px 0 12px; font-size: 20px; }
.simmo-md h4 { margin: 24px 0 10px; font-size: 17px; }
.simmo-md p { margin-bottom: 14px; }
.simmo-md hr {
    margin: 34px 0;
    border: 0;
    border-top: 1px solid var(--border-color-8, #e5e7eb);
}

/* Die Punkte der Liste: Kaestchen wie auf einem Zettel, damit man sieht, was
   abgehakt ist - und Luft dazwischen, weil die Eintraege lang sind. */
.simmo-md__liste {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}
.simmo-md__liste li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color-8, #e5e7eb);
}
.simmo-md__liste li:last-child { border-bottom: 0; }
.simmo-md__kaestchen {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border: 2px solid #b9bdc4;
    border-radius: 3px;
}
.simmo-md__kaestchen.ist-erledigt {
    border-color: var(--ltn__secondary-color, #d63031);
    background-color: var(--ltn__secondary-color, #d63031);
    position: relative;
}
.simmo-md__kaestchen.ist-erledigt::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.simmo-md__tabelle {
    width: 100%;
    margin: 12px 0 22px;
    border-collapse: collapse;
    font-size: 14px;
}
.simmo-md__tabelle td {
    padding: 9px 12px;
    border: 1px solid var(--border-color-8, #e5e7eb);
    vertical-align: top;
}
.simmo-md__tabelle tr:first-child td {
    background-color: #f7f7f8;
    font-weight: 600;
}

.simmo-md code {
    padding: 2px 5px;
    background-color: #f2f2f3;
    border-radius: 3px;
    font-size: 0.92em;
    color: #b52527;
}
.simmo-md__code {
    padding: 14px 16px;
    background-color: var(--simmo-dunkel, #252525);
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 20px;
}
.simmo-md__code code {
    background: none;
    color: #e6e6e6;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
}

/* Hinweis ueber der Trefferliste: gesuchter Ort hat in dieser Rubrik kein Angebot
   (Templates/Immobilie/Search.html, DiscardedPlaceViewHelper) */
.simmo-place-notice {
    margin-bottom: 30px;
    padding: 15px 20px;
    border-left: 4px solid var(--ltn__secondary-color, #c00);
    background: #f7f7f7;
}
.simmo-place-notice p {
    margin: 0;
}

/* ============================================================
   Abstaende im Inhaltsbereich
   ============================================================
   Der Inhalt einer Seite besteht aus Containern (.c-container, Extension
   "container"). Die standen bisher ohne jeden Zwischenraum aufeinander -
   gemessen am 2026-09-21 auf /immobilienverwaltung, /immobilienverkauf und
   /unternehmen: 0px zwischen dem ersten und dem zweiten Container, 32px an
   einer Stelle. Die Bloecke liefen dadurch ineinander.

   Eine Regel fuer alle Seiten, damit der Rhythmus ueberall derselbe ist.
   Geaendert wird er an genau einer Stelle: --simmo-block-abstand im :root-Block
   weiter oben.

   Nur ZWISCHEN den Containern (Nachbar-Selektor +): vor dem ersten steht schon
   der Abstand des Kopfbereichs, nach dem letzten der des Gruppenbildes. Die
   Container sind direkte Kinder von .body-wrapper - Kopfbereich, Navigation,
   Fusszeile und die Modalfenster liegen dort ebenfalls und bleiben unberuehrt. */
.body-wrapper > .c-container + .c-container {
    margin-top: var(--simmo-block-abstand);
}

/* Dasselbe Mass INNERHALB eines Containers. Das ist der Fall, den man auf
   /immobilienverwaltung sieht: "Sondereigentumsverwaltung", "Mietverwaltung" und
   "Mietpoolverwaltung" stehen als eigene Bloecke in EINEM Container und lagen
   ohne Zwischenraum aufeinander - die Bilder stiessen direkt aneinander.
   .c-col ist die Inhaltsspalte der Container-Extension; ihre direkten Kinder sind
   die Inhaltselemente (.frame) und verschachtelte Container.

   Nachbar-Selektor, also nur ZWISCHEN den Bloecken - oben und unten schliesst der
   Container buendig ab, dort setzt der Abstand zwischen den Containern an.
   Der Abstand faellt mit vorhandenen Aussenabstaenden zusammen (margin collapsing),
   verdoppelt sich also nicht: beim dunklen CTA-Band bleibt es bei 60px. */
.c-col > * + * {
    margin-top: var(--simmo-block-abstand);
}

/* Ausnahme: das Karten-Raster (.simmo-info-cards, z.B. die vier Leistungskaesten
   unten auf /immobilienverwaltung) hat mit 30px einen eigenen, engeren Rhythmus.
   Die Karten sind ein zusammengehoeriges Raster, kein Nacheinander von Bloecken. */
.simmo-info-cards > .c-col > * + * {
    margin-top: 0;
}

/* Auf schmalen Bildschirmen die Haelfte: dort wirkt derselbe Abstand als
   Leerflaeche viel groesser, weil die Bloecke untereinander statt nebeneinander
   stehen. */
@media (max-width: 767px) {
    :root {
        --simmo-block-abstand: 30px;
    }
}

/* Das dunkle Band traegt denselben Aussenabstand wie die Container. Steht es am
   Rand seines Containers, zaehlten beide Abstaende und es wurden 120px
   (/unternehmen, gemessen 2026-09-21). Am Rand zaehlt daher nur noch der
   Container-Abstand; mitten im Container bleibt der eigene erhalten. */
.c-col > .simmo-cta--dunkel:first-child {
    margin-top: 0;
}
.c-col > .simmo-cta--dunkel:last-child {
    margin-bottom: 0;
}

/* --- Energieskala (ViewHelper simmo:energieskala, seit 2026-09-23) --- */
/* Die Farbskala A+ bis H wie auf dem Energieausweis: gleich breite Felder von Gruen nach
   Rot, darueber ein Pfeil am Kennwert, darunter die Klassengrenzen in kWh/(m²·a).
   Die aktive Klasse ist hoeher und traegt einen Rahmen, die anderen treten zurueck -
   so ist sie auch ohne Farbwahrnehmung zu erkennen. */
.simmo-energieausweis {
    padding: 30px;
}
.simmo-energieausweis .property-detail-info-list {
    padding: 0;
    margin-top: 30px;
}
.simmo-energieskala {
    margin: 0;
}
.simmo-energieskala__skala {
    position: relative;
    padding-top: 44px;     /* Platz fuer Pfeil und Wert */
    padding-bottom: 22px;  /* Platz fuer die Grenzwerte */
}
.simmo-energieskala__balken {
    display: flex;
    align-items: center;
    height: 44px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.simmo-energieskala__feld {
    flex: 1 1 0;
    height: 34px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}
/* Nicht zutreffende Klassen blass, aber per aufgehellter Grundfarbe statt opacity 0.55 - die
   blasste auch die Schrift aus (weiss auf Hellgruen 2,0:1). Gleiche Optik wie vorher (55 % Farbe
   auf Weiss), dazu dunkle Schrift: mindestens 5,3:1 (Barrierefreiheit BF-02, 01.10.2026). */
.simmo-energieskala__feld:not(.ist-aktiv) {
    color: #1d1d1d;
    background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45));
}
.simmo-energieskala__feld.ist-aktiv {
    height: 44px;
    opacity: 1;
    font-size: 19px;
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.55);
    position: relative;
    z-index: 1;
}
.simmo-energieskala__feld--aplus { background: #009a44; }
.simmo-energieskala__feld--a     { background: #4db848; }
.simmo-energieskala__feld--b     { background: #b5cf2f; color: #1d1d1d; }
.simmo-energieskala__feld--c     { background: #f2e500; color: #1d1d1d; }
.simmo-energieskala__feld--d     { background: #fcc200; color: #1d1d1d; }
.simmo-energieskala__feld--e     { background: #f39200; color: #1d1d1d; }
.simmo-energieskala__feld--f     { background: #e5561c; }
.simmo-energieskala__feld--g     { background: #d1111c; }
.simmo-energieskala__feld--h     { background: #9c0f22; }
/* Zutreffende Klasse in voller Farbe, Schrift 19 px fett (mobil 15 px) = grosse Schrift, Vorgabe 3:1.
   Weiss reicht auf A+ (3,68:1), F (3,70:1), G, H; nur auf A (2,54:1) dunkle Schrift (6,63:1). */
.simmo-energieskala__feld--a.ist-aktiv {
    color: #1d1d1d;
}

/* Pfeil: Wert als Faehnchen, darunter ein Dreieck, das auf die Stelle im Balken zeigt. */
.simmo-energieskala__zeiger {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}
.simmo-energieskala__zeiger span {
    white-space: nowrap;
    background: #1d1d1d;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 3px;
}
.simmo-energieskala__zeiger::after {
    content: "";
    border: 7px solid transparent;
    border-top-color: #1d1d1d;
    border-bottom: 0;
}
/* Am Rand nicht aus dem Kasten ragen: das Faehnchen haengt dann einseitig am Pfeil. */
.simmo-energieskala__zeiger--links {
    align-items: flex-start;
    transform: translateX(-7px);
}
.simmo-energieskala__zeiger--rechts {
    align-items: flex-end;
    transform: translateX(calc(-100% + 7px));
}

.simmo-energieskala__grenzen {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    font-size: 12px;
    color: #5c727d;
}
.simmo-energieskala__grenzen span {
    position: absolute;
    transform: translateX(-50%);
}
.simmo-energieskala figcaption {
    margin-top: 12px;
    font-size: 15px;
}
@media (max-width: 575px) {
    .simmo-energieausweis {
        padding: 20px 15px;
    }
    .simmo-energieskala__feld {
        font-size: 12px;
    }
    .simmo-energieskala__feld.ist-aktiv {
        font-size: 15px;
    }
    .simmo-energieskala__grenzen {
        font-size: 10px;
    }
}

/* --- Overlays (Bootstrap-Modals) ueber dem Kopfbereich (seit 2026-09-23) --- */
/* Das Theme hebt .ltn__header-area auf z-index 9999, Bootstrap legt Modal und
   Abdunklung auf 1040-1060. Auf schmalen Bildschirmen lagen Logo und Merkzettel-
   Knopf dadurch ueber dem Quick-View-Overlay und fingen dort die Klicks ab
   (per elementFromPoint gemessen). Solange ein Modal offen ist (Bootstrap setzt
   dann body.modal-open), tritt der Kopf zurueck. */
body.modal-open .ltn__header-area {
    z-index: 1;
}

/* --- Filterspalte: Umkreissuche (seit 2026-09-24) --- */
/* Das Theme ersetzt jedes <select> durch ein .nice-select mit float:left. Im Umkreis-Kasten
   rutschte die Beschriftung "Entfernung" dadurch rechts neben das Kaestchen und stand nicht
   auf dessen Mitte (Screenshot vom 24.09.2026). Hier stehen Beschriftung und Feld wie beim
   Ortsfeld darueber untereinander, das Kaestchen ist so breit wie das Textfeld. */
.simmo-filter-umkreis__felder label {
    display: block;
    margin: 0 0 8px;
}
.simmo-filter-umkreis__felder .form-control + label,
.simmo-filter-umkreis__felder input + label {
    margin-top: 20px;
}
.simmo-filter-umkreis__felder .simmo-auswahl {
    width: 100%;
    margin-bottom: 0;
}

/* --- Mobile Ansichten (seit 2026-10-01, nach Durchsicht bei 390 px Breite) --- */

/* Kopf: Herz und Menueknopf ganz rechts. Das Theme zentriert die Options-Spalte
   (.ltn__header-5 .ltn__header-options, justify-content: center), die Regel fuer
   .ltn__header-home griff nicht, weil der Kopf diese Klasse nicht (mehr) traegt. */
@media (max-width: 1199px) {
    .ltn__header-area .ltn__header-options {
        justify-content: flex-end;
    }
    .ltn__header-options .openimmo-header-bookmarks {
        margin: 0 10px 0 0;
    }
}

/* Mobilmenue: Merkzettel statt der Shop-Knoepfe der Vorlage (Partials/MobileMenu.html) */
.simmo-menue-merkzettel .openimmo-bookmarks-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
}
.simmo-menue-merkzettel .openimmo-bookmarks-button i {
    width: 50px;
    height: 50px;
    line-height: 46px;
    text-align: center;
    border: 2px solid var(--border-color-1);
    font-size: 18px;
}
/* Beschriftung aus dem title des Knopfs ("Merkzettel", uebersetzt von openimmo) - das Widget
   verwirft eigene settings, ein zweites Template liesse sich nicht unterscheiden. */
.simmo-menue-merkzettel .openimmo-bookmarks-button::after {
    content: attr(title);
}
.simmo-menue-merkzettel .openimmo-bookmarks-button:hover i {
    color: var(--ltn__secondary-color);
}
.simmo-menue-merkzettel .openimmo-bookmarks-item-count {
    position: absolute;
    top: 4px;
    left: 34px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ltn__secondary-color);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.simmo-menue-merkzettel {
    padding: 20px 0;
}

/* Teaser-Slider: Das Vorschaubild fuellt die Karte auch dann, wenn nur eine Immobilie
   zu sehen ist (bei 500 px war das Bild 380 px breit, die Karte 468 px). */
.ltn__product-slider-item-three-active .product-img img {
    width: 100%;
    height: auto;
}

/* Abstaende der Abschnitte (Theme-Klassen) bis zur Tablet-Breite - 115/120 px oben und unten
   waren auf dem Handy fast eine halbe Bildschirmhoehe Leerraum je Abschnitt. */
@media (max-width: 991px) {
    .pt-115,
    .pt-120 {
        padding-top: 60px;
    }
    .pb-115,
    .pb-120 {
        padding-bottom: 60px;
    }
    .pb-90 {
        padding-bottom: 30px;
    }
}

/* Dunkle Ansprachen ("Sie moechten verkaufen?" u. a.) unterhalb des Desktop-Layouts.
   768-991 px: Text und Gruppenbild nebeneinander (7/5) statt gestapelt - gestapelt war das Bild
   bei 897 px 380 px hoch und nahm die halbe Ansprache ein. Darunter gestapelt, das Bild aber
   hoechstens 400 px breit und mittig. */
@media (min-width: 768px) and (max-width: 991px) {
    .simmo-dunkel .row > .col-lg-6:first-child {
        flex: 0 0 58.333%;
        max-width: 58.333%;
    }
    .simmo-dunkel .row > .col-lg-6:last-child {
        flex: 0 0 41.667%;
        max-width: 41.667%;
    }
    .simmo-dunkel .about-us-img-wrap {
        margin-bottom: 0;
    }
}
@media (max-width: 767px) {
    .simmo-dunkel .about-us-info-wrap {
        margin-bottom: 30px;
    }
    .simmo-dunkel .about-us-img-wrap {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Footer unterhalb des Desktop-Layouts: weniger Luft zwischen den Bloecken
   (zwei Spalten entfallen dort ohnehin, siehe Partials/Footer.html) */
@media (max-width: 1199px) {
    .footer-top-area {
        padding-top: 50px;
        padding-bottom: 10px;
    }
    .ltn__footer-area .footer-widget {
        margin-bottom: 35px;
    }
    .ltn__footer-area .footer-title {
        margin-bottom: 15px;
    }
    .ltn__footer-area .footer-menu li {
        margin-bottom: 8px;
    }
    .ltn__footer-area .footer-logo .site-logo img {
        max-width: 200px;
    }
}

/* Startseite "Unser Angebot": unterhalb des Desktop-Layouts (bis 991 px) Icon links, Text rechts,
   alle drei Kaesten untereinander - vorher je ~400 px hohe zentrierte Karten, und zwischen
   576 und 991 px standen zwei nebeneinander und die dritte allein darunter.
   text-center der Vorlage ist !important. */
@media (max-width: 991px) {
    .ltn__feature-area .ltn__feature-row-equal {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
    .ltn__feature-area .ltn__feature-row-equal > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .ltn__feature-area .ltn__feature-item-6 {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
        text-align: left !important;
    }
    .ltn__feature-area .ltn__feature-item-6 .ltn__feature-icon {
        flex: 0 0 72px;
        margin: 0;
    }
    .ltn__feature-area .ltn__feature-item-6 .ltn__feature-icon img {
        width: 72px;
        height: auto;
    }
    .ltn__feature-area .ltn__feature-item-6 h3 {
        margin-bottom: 6px;
    }
    .ltn__feature-area .ltn__feature-item-6 p {
        margin-bottom: 0;
    }
    .ltn__feature-area .ltn__feature-item-6 .ltn__feature-info .ltn__service-btn {
        padding-top: 10px;
        align-self: flex-start;
    }
    .ltn__feature-area .ltn__feature-row-equal > [class*="col-"] .ltn__feature-item-6 {
        margin-bottom: 15px;
    }
}

/* --- Startseiten-Slider: Vorschaubilder nicht unter der Schnellsuche (seit 2026-10-01) --- */
/* Ab 1400 px zieht die Theme-Klasse mt--65 die Suchkarte 65 px ueber den Slider. Die Leiste
   der Vorschaubilder sass nur 30 px ueber dem Sliderrand und lag damit zu 60-90 % unter der
   Karte (gemessen 1400-1920 px) - zusammen mit dem initialSlide-Fehler in main.js sah man dann
   "nur ein" Vorschaubild. Gleiche Grenze wie mt--65, Abstand 30 px + 65 px Ueberlappung. */
@media (min-width: 1400px) {
    .ltn__slider-11-img-slide-arrow {
        bottom: 95px;
    }
}


/* ==========================================================================================
   Barrierefreiheit (seit 2026-10-01) - Befundnummern aus barrierefreiheit/befunde.md
   ========================================================================================== */

/* BF-01 Haus-Rot fuer Text und Knoepfe (WCAG 1.4.3), seit 2026-10-01 - FREIGABE DURCH DEN KUNDEN OFFEN.
   #ff0000 erreicht gegen Weiss nur 3,99:1 (verlangt 4,5:1). #e30000 = 4,92:1 auf Weiss, 4,52:1 auf dem
   hellgrauen Grund #f2f6f7. Die Variable faerbt Knoepfe, Links, Abzeichen und Akzente der ganzen Seite.
   Das Logo ist davon nicht betroffen: es traegt sein Rot fest im SVG (Partials/Header/Logo.html).
   Zurueck zum Original: diese Regel loeschen (Quelle: SCSS $color-sparkasse-red in _global.scss). */
:root {
    --ltn__secondary-color: #e30000;
}

/* BF-03 Fokus sichtbar (WCAG 2.4.7). Das Theme setzt "* { outline: none }" - damit sahen
   Tastaturnutzer nirgends, wo sie sind (75-91 Stopps je Seite ohne Rahmen). :focus-visible
   greift nur bei Tastatur, Mausklicks bleiben ohne Rahmen. Rot #e30000 hat gegen Weiss 4,9:1,
   auf dunklen Flaechen (Kopfleiste, dunkle Ansprachen, Footer, Cookie-Banner) ein weisser Rahmen.
   Mit Elementtyp im Selektor: Das Theme hat ausserdem "a:focus { outline: none }" - spezifischer
   als ein blankes :focus-visible, das deshalb verlor (erste Nachmessung 01.10.: 46-84 Stopps
   weiter ohne Rahmen). a:focus-visible ist gleich spezifisch und gewinnt, weil custom.css spaeter laedt. */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #e30000;
    outline-offset: 2px;
}
.ltn__header-top-area :focus-visible,
.simmo-dunkel :focus-visible,
.simmo-cta--dunkel :focus-visible,
.ltn__footer-area :focus-visible,
.ltn__utilize-mobile-menu .ltn__social-media-2 :focus-visible,
.klaro .cookie-notice :focus-visible,
.btn.theme-btn-1:focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 5px #252525;
}
/* Bootstrap-Bausteine bringen eigene, spezifischere Fokusregeln mit: .btn:focus = hellblauer Schatten
   mit 25 % Deckkraft (kaum sichtbar), .carousel-control-*:focus = outline 0. Gleich spezifisch
   ueberschreiben (Nachmessung 01.10.: "Expose als PDF", "Merken", Galeriepfeile ohne Rahmen). */
.btn:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
    outline: 3px solid #e30000;
    outline-offset: 2px;
    box-shadow: none;
}
/* Rote Knoepfe auf hellem Grund: weisser Rahmen + dunkler Ring, sonst verschwindet Rot an Rot */
.btn.theme-btn-1:focus-visible {
    outline-offset: 0;
}
/* Gestaltete Auswahlknoepfe/Haken der Filter: das echte input ist durchsichtig (opacity 0),
   der Rahmen gehoert deshalb an das sichtbare Kaestchen daneben. */
.checkbox-item input:focus-visible + .checkmark {
    outline: 3px solid #e30000;
    outline-offset: 2px;
}

/* BF-04 Tastatur nicht in Unsichtbares (WCAG 2.4.3).
   1) Zugeklapptes Mobilmenue: lag nur per transform ausserhalb des Bildes und war mit 8 Stopps
      je Seite erreichbar. visibility wird vom Theme mit "transition: all .5s" ueberblendet -
      beim Schliessen springt sie also erst NACH dem Hinausfahren auf hidden, die Animation bleibt. */
.ltn__utilize:not(.ltn__utilize-open) {
    visibility: hidden;
}
/* 2) Nicht gewaehlte Ansicht (Kacheln/Liste) der Immobilienlisten: Das Theme blendet sie per
      visibility/opacity/height aus, setzt die Merk-/Schnellansicht-Knoepfe darin aber ausdruecklich
      wieder auf visible - so waren sie fokussierbar (30 Stopps auf /immobilien/kaufen).
      Ganz aus dem Fluss nehmen wie Bootstrap selbst. */
.tab-content > .tab-pane:not(.active) {
    display: none;
}
/* 3) Pfeile der Bildergalerie im Expose erscheinen nur beim Ueberfahren - bei Tastaturfokus
      ebenfalls einblenden, sonst ist der Fokus auf einem unsichtbaren Knopf. */
.immo-detail-gallery .carousel-control-prev:focus-visible,
.immo-detail-gallery .carousel-control-next:focus-visible,
.immo-detail-gallery:focus-within .carousel-control-prev,
.immo-detail-gallery:focus-within .carousel-control-next {
    opacity: 1;
}

/* BF-07 "Zum Inhalt springen" (WCAG 2.4.1) - erscheint beim ersten Tab oben links */
.simmo-sprunglink {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 100000;
    padding: 12px 18px;
    background: #252525;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}
.simmo-sprunglink:focus,
.simmo-sprunglink:focus-visible {
    top: 16px;
    color: #fff;
    outline: 3px solid #fff;
    box-shadow: 0 0 0 6px #e30000;
}
#inhalt:focus {
    outline: none;
}

/* BF-02 Links der nicht hervorgehobenen Leistungskaesten ("Mietobjekte ansehen", "Immobilie
   verkaufen"): Theme-Farbe --ltn__color-1 #8cb2b2 = 2,3:1 auf Weiss. Jetzt die Textfarbe
   (5,0:1); der hervorgehobene Kasten bleibt rot, beim Ueberfahren rot. */
.ltn__feature-item-6 .ltn__feature-info .ltn__service-btn {
    color: var(--ltn__paragraph-color);
}
.ltn__feature-item-6.active .ltn__feature-info .ltn__service-btn,
.ltn__feature-item-6 .ltn__feature-info .ltn__service-btn:hover {
    color: var(--ltn__secondary-color);
}

/* ===========================================================================
   Slider fuer Tastatur und Screenreader (Barrierefreiheit BF-05/BF-09, 2026-10-02)
   Rollen, Namen und "inert" setzt slider-zugang.js; hier nur, was man sieht.
   =========================================================================== */

/* Die Pfeile der Vorlage erscheinen erst beim Ueberfahren (opacity 0 + visibility hidden).
   visibility hidden nimmt sie aus der Tab-Reihenfolge - per Tastatur waren sie unerreichbar.
   Jetzt: unsichtbar bleiben sie, erreichbar sind sie, und bei Tastaturfokus erscheinen sie. */
.slick-arrow-1 .slick-arrow {
    visibility: visible;
}
.slick-arrow-1 .slick-arrow:focus-visible {
    opacity: 1;
}
/* Pfeile sind jetzt <button> statt <a> - Browser-Vorgaben fuer Knoepfe ausgleichen */
button.slick-arrow {
    padding: 0;
    font: inherit;
}

/* Knopf "Automatischen Wechsel anhalten/fortsetzen" */
.simmo-karussell-pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: var(--simmo-grau);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.simmo-karussell-pause:hover {
    background-color: var(--ltn__secondary-color);
}
.simmo-karussell-pause:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #252525;
}

/* Startseite: links neben den drei Vorschaubildern unten im Bild. Die Bilderleiste hat im
   Theme links 100px Innenabstand (style.css, .ltn__slider-11-img-slide-arrow-active) - der
   Knopf steht in diesem Abstand, 12px vor dem ersten Bild. */
.ltn__slider-11-img-slide-arrow-inner {
    position: relative;
}
.ltn__slider-11-img-slide-arrow-inner > .simmo-karussell-pause {
    position: absolute;
    top: 50%;
    left: 44px;
    z-index: 2;
    transform: translateY(-50%);
}

/* Logoleiste im Footer: unter den Logos, mittig */
.simmo-logoleiste + .simmo-karussell-pause {
    display: flex;
    width: 36px;
    height: 36px;
    margin: 15px auto 0;
    font-size: 12px;
}

/* ===========================================================================
   Ueberschriften-Gliederung (Barrierefreiheit BF-08, 2026-10-02)
   Viele Ueberschriften haben eine andere Ebene bekommen (eine h1 je Seite, keine Spruenge),
   die Kicker ueber den Abschnittstiteln und die Positionen im Team sind keine Ueberschriften
   mehr (<p>). Aussehen soll sich nichts. Diese Elemente tragen deshalb die Klasse ihrer
   FRUEHEREN Ebene (.h1-.h6, aus dem Theme). Was das Theme nur an die Tags haengt, kommt
   hier fuer die Klassen dazu: Hausschrift, die Groessen aus responsive.css, drei
   Kontextregeln. Gemessen: berechnete Stile vorher/nachher auf allen Seiten gleich.
   =========================================================================== */
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Sparkasse Head', 'Sparkasse', 'Sparkasse Ersatz', 'Poppins', sans-serif;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .h1 { font-size: 30px; }
    .h2 { font-size: 26px; }
    .h3 { font-size: 22px; }
    .h4 { font-size: 20px; }
    .h5 { font-size: 18px; }
    .h6 { font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .h1 { font-size: 26px; }
    .h2 { font-size: 22px; }
    .h3 { font-size: 20px; }
    .h4 { font-size: 18px; }
    .h5 { font-size: 16px; }
    .h6 { font-size: 15px; }
}
@media (max-width: 767px) {
    .h1 { font-size: 24px; }
    .h2 { font-size: 20px; }
    .h3 { font-size: 18px; }
    .h4 { font-size: 17px; }
    .h5 { font-size: 16px; }
    .h6 { font-size: 14px; }
}
/* Kontextregeln, die vorher am Tag hingen */
.simmo-ansprechpartner__name .h5 {
    font-size: 19px;
    margin-top: 0;
    margin-bottom: 4px;
}
.simmo-sponsor-info .h4 {
    font-size: 18px;
    margin-bottom: 12px;
}
.popular-post-widget-brief .h6 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}
/* Kicker ueber den Abschnittstiteln (jetzt <p class="h6 section-subtitle">): Das Theme gibt
   ihnen die Grundschrift; die .h6-Regel oben wuerde sie zur Ueberschriftenschrift machen,
   und die Absatzregel nimmt den Abstand nach unten weg. */
.section-subtitle.h6 {
    font-family: var(--ltn__body-font);
    margin-bottom: 15px;
}
/* Preis im Expose (jetzt <p class="h2 simmo-price-color">): eine Absatzregel der Seitenleiste
   setzt sonst 14px. Groessen wie h2 in style.css/responsive.css. */
.simmo-price-color.h2 {
    font-size: 30px;
    line-height: 1.3;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .simmo-price-color.h2 { font-size: 26px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .simmo-price-color.h2 { font-size: 22px; }
}
@media (max-width: 767px) {
    .simmo-price-color.h2 { font-size: 20px; }
}
/* Zwischenueberschriften im Fliesstext (Impressum, Datenschutz, Barrierefreiheitserklaerung)
   waren h3 direkt unter der h1 der Seite und sind seit BF-08 h2 (Datenbank + inhalte.yaml).
   Sie behalten die Groesse von h3. Vorher gab es im Fliesstext keine einzige h2 - die Regel
   trifft nur diese. Wer im Editor kuenftig "Ueberschrift 2" waehlt, bekommt dieselbe Groesse. */
.ce-bodytext h2 {
    font-size: 24px;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .ce-bodytext h2 { font-size: 22px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .ce-bodytext h2 { font-size: 20px; }
}
@media (max-width: 767px) {
    .ce-bodytext h2 { font-size: 18px; }
}

/* ===========================================================================
   Auswahllisten als echte <select> (Barrierefreiheit BF-10, 2026-10-02)
   Bis hierher ersetzte das Theme jedes <select> durch nice-select (eine <ul>): Screenreader
   erkannten keine Auswahlliste, die geoeffnete Liste liess sich per Tastatur nicht scrollen.
   main.js startet nice-select nicht mehr. Geschlossen sehen die Felder aus wie vorher
   (Masse aus nice-select gemessen); aufgeklappt zeigt der Browser seine eigene Liste - am
   Handy das gewohnte Auswahlrad.
   =========================================================================== */
select.simmo-auswahl {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 30px 0 18px;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    background-color: #fff;
    /* Pfeil wie bei nice-select: Winkel in #999 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1.2l3 3 3-3' fill='none' stroke='%23999' stroke-width='1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 8px 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--ltn__paragraph-color);
    height: 42px;
    line-height: 40px;
    cursor: pointer;
    text-overflow: ellipsis;
}
/* Schnellsuche der Startseite */
select.simmo-auswahl--schnellsuche {
    height: 60px;
    line-height: 58px;
    padding: 0 40px 0 20px;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    background-position: right 13px center;
}
/* Sortierung ueber der Kauf-/Mietliste (Templates/Immobilie/Search.html) */
select.simmo-auswahl--sortierung {
    width: 190px;
    height: 50px;
    line-height: 46px;
    border: 2px solid #ededed;
    border-radius: 0;
    font-weight: 700;
}
/* Fokus: wie die anderen Felder (BF-03) */
select.simmo-auswahl:focus-visible {
    outline: 3px solid #e30000;
    outline-offset: 2px;
}

/* BF-12 Klickflaechen (WCAG 2.2, 2.5.8): Icon-Links mindestens 24 x 24 px.
   Das Icon bleibt so gross wie bisher, nur die klickbare Flaeche drumherum
   waechst. Der negative Rand oben/unten haelt die Zeilenhoehe, damit Kopfleiste
   und Fuss nicht hoeher werden. Gilt fuer Kopf, Fuss, News und /team. */
.ltn__social-media ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    margin: -4px 0;
    vertical-align: middle;
}
/* Kontaktzeilen im Streifen ueber dem Mitarbeiterfoto: 20 px -> 24 px hoch */
.simmo-team-item .simmo-team-kontakt a {
    min-height: 24px;
}

/* News: YouTube-Video als Vorschaubild mit Play-Knopf (Partial News/Medium.html).
   Das Video selbst oeffnet erst nach Einwilligung in der Lightbox. */
.simmo-news-video {
    position: relative;
    display: block;
}
.simmo-news-video img {
    width: 100%;
    height: auto;
}
.simmo-news-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 26px;
    line-height: 72px;
    text-align: center;
}
.simmo-news-video:hover .simmo-news-video-play,
.simmo-news-video:focus-visible .simmo-news-video-play {
    background: #e30000;
}