/* =========================================================================
   Unternehmensfarbe
   -------------------------------------------------------------------------
   Das Theme verwendet als Akzentfarbe ein Orange/Orange-Rot, das fast
   ausschließlich über CSS-Variablen gesteuert wird (var(--ltn__secondary-color)
   u. a., 200+ Stellen). Statt jede Regel in der style.css anzufassen, werden
   hier zentral die Farb-Variablen auf die Unternehmensfarbe #500000 gesetzt.
   custom.css wird zuletzt geladen und überschreibt damit das Theme.
   ========================================================================= */
:root {
    --ltn__secondary-color:   #500000;       /* Haupt-Akzent (Buttons, Links, Icons) */
    --ltn__secondary-color-3: #500000;       /* Akzent-Variante (Verläufe/Hover)     */
    --border-color-4:         #500000;       /* Akzent-Rahmen                        */
    --orange:                 #500000;       /* Badges (.bg-orange)                  */
    --ltn__color-6:           #f3e8e8;       /* heller Akzent-Hintergrund (Tönung)   */
    --section-bg-2:           rgb(76,75,74); /* Footer & Top-Navi Hintergrund        */
    --section-bg-6:           rgb(76,75,74); /* Top-Navi Hintergrund                 */
    --section-bg-7:           rgb(76,75,74); /* Footer Copyright-Leiste              */
}

/* theme-btn-2 ist im Theme schwarz (--ltn__primary-color) und wechselt nur
   beim Hover in die Akzentfarbe. Da die Variable auch Texte/Flächen steuert,
   wird der Button hier gezielt auf die Unternehmensfarbe gesetzt. */
.theme-btn-2 {
    background-color: #500000;
}
.theme-btn-2:hover {
    background-color: #6e0000; /* etwas heller als Hover-Feedback */
}

/* =========================================================================
   Propstack-Bilder: einheitliche Zuschnitte
   -------------------------------------------------------------------------
   Die Fotos der Objekte kommen in gemischten Formaten von Propstack
   (Querformat 16:9, Hochformat 3:4 aus Handyfotos usw.). Das Theme erwartet
   gleich große Bilder – sonst springt vor allem der Hero-Slider (centerMode)
   und die Galerie wird ungleich hoch.

   Lösung: Jedes Bild bekommt einen festen Rahmen (aspect-ratio) und wird mit
   object-fit: cover mittig beschnitten – unabhängig vom Originalformat.
   Grundrisse werden bewusst NICHT beschnitten (object-fit: contain).
   ========================================================================= */

/* Hero-Slider (Detailseite) */
.ltn__img-slider-area .ltn__img-slide-item-4 > a {
    display: block;
    overflow: hidden;
    border-radius: 6px;
}
.ltn__img-slider-area .ltn__img-slide-item-4 img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

/* Bildergalerie (Detailseite) */
.ltn__property-details-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
}

/* Objekt-/Produktkarten (Übersicht + "Weitere Immobilien") */
.ltn__product-item .product-img > a {
    display: block;
    width: 100%;
}
.ltn__product-item .product-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
}

/* Grundrisse: vollständig anzeigen, nicht beschneiden */
.property-floorplan-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
}

/* =========================================================================
   Sticky-Header: Content-Sprung beim Scrollen verhindern
   -------------------------------------------------------------------------
   Das Theme schaltet .ltn__header-middle-area beim Scrollen per JS auf
   position: fixed um (Klasse "sticky-active", siehe style.css "Header
   Sticky"). Dadurch verlässt der Bereich den Dokumentenfluss und der Platz,
   den er eingenommen hat, fällt sofort weg – der gesamte Seiteninhalt
   rutscht um die Höhe der Navigation nach oben (z. B. überlappt dann das
   Hero-Hintergrundbild die "Über uns"-Sektion). main.js (Punkt 36) füllt
   diesen Platzhalter mit der tatsächlichen Höhe, sobald der Header fixiert
   wird, und blendet ihn sonst aus.
   ========================================================================= */
.ltn__header-sticky-placeholder {
    display: none;
}

/* =========================================================================
   Header-Navigation: rechtsbündig
   ========================================================================= */
.ltn__header-middle-area .header-menu-column {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* =========================================================================
   Header-Logo + Firmenname (Desktop)
   -------------------------------------------------------------------------
   Logo und Schriftzug stehen zusammen in der <a>, damit beides zusammen
   klickbar zur Startseite führt.
   ========================================================================= */
.ltn__header-middle-area .site-logo-link {
    display: flex;
    align-items: center;
}
.ltn__header-middle-area .site-logo img {
    height: 64px;
    width: auto;
}
.site-logo-text {
    margin-left: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--ltn__primary-color);
    white-space: nowrap;
}

/* =========================================================================
   Header mobil: schmalere Bar + Logo auf gleicher Höhe wie Burger-Menü
   -------------------------------------------------------------------------
   Das Theme sieht den Header-5-Logo-Bereich mobil eigentlich als eigene,
   volle Zeile vor (site-logo-wrap bekommt margin: 10px 0 30px, style.css
   Zeile ~5796) – dieses Projekt zeigt Logo und Burger-Menü aber in einer
   Zeile (siehe .header-menu-column oben). Die alte Margin blieb stehen und
   hat Logo/Text dadurch gegenüber dem Burger nach oben verschoben. Deshalb
   hier zurückgesetzt und Logo/Text/Bar für mobil verkleinert.
   ========================================================================= */
@media (max-width: 991px) {
    .ltn__header-middle-area {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .ltn__header-middle-area .site-logo-wrap {
        margin: 0;
    }
    .ltn__header-middle-area .site-logo img {
        height: 36px;
    }
    .site-logo-text {
        font-size: 15px;
    }
}

/* =========================================================================
   Logo im aufklappenden Mobile-Menü: kleiner darstellen
   -------------------------------------------------------------------------
   Ohne Größenangabe rendert das Logo hier in Originalgröße (140x142px) –
   für die Menükopfzeile viel zu groß.
   ========================================================================= */
.ltn__utilize-menu-head .site-logo img {
    height: 44px;
    width: auto;
}

/* =========================================================================
   Feature-Boxen (Our Main Focus): gleiche Höhe in der Reihe
   ========================================================================= */
.ltn__feature-area .col-lg-4,
.ltn__feature-area .col-sm-6 {
    display: flex;
}
.ltn__feature-item-6 {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ltn__feature-item-6 .ltn__feature-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ltn__feature-item-6 .ltn__feature-info .ltn__service-btn {
    margin-top: auto;
}

/* =========================================================================
   Kategorie-Kacheln: einheitliche Titel-Höhe (immer zweizeilig)
   -------------------------------------------------------------------------
   Kacheln mit ein- und zweizeiligen Titeln bekommen durch den festen height-
   Wert dieselbe Gesamthöhe – gilt für Service-Seite und Homepage.
   ========================================================================= */
.ltn__category-item-5 a .category-title {
    height: 60px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================================
   Badge „Geförderter Wohnraum" auf den Objektkarten
   -------------------------------------------------------------------------
   Auf den Karten (ltn__product-item-5) sind die Badges gleichfarbiger Text
   in der Unternehmensfarbe – keine farbigen Boxen. Damit „Geförderter
   Wohnraum" klar vom „Zur Miete"-Tag getrennt ist, steht ein Mittelpunkt
   dazwischen (nur, wenn ein Tag davor steht; sonst kein führendes Zeichen).
   Die absolute Positionierung des Theme-::before (Dreieck) wird zurückgesetzt.
   ========================================================================= */
.product-badge li.badge-subsidized:not(:first-child)::before {
    content: "·";
    display: inline-block;
    position: static;
    border: 0;
    width: auto;
    height: auto;
    margin: 0 7px;
    color: var(--ltn__secondary-color);
    font-weight: 700;
}

/* =========================================================================
   Footer: kompakter statt hohem, einspaltigem Block mit undurchsichtigem Logo
   -------------------------------------------------------------------------
   Das Theme sieht großzügige Innenabstände für einen mehrzeiligen Footer mit
   Logo vor (padding-top: 92px, footer-widget margin-bottom: 60px). Der Footer
   wurde auf drei Spalten (Kurztext, Kontakt, Seiten) umgestellt und das Logo
   entfernt (fixe, nicht transparente PNG-Grafik) – die Abstände werden hier
   entsprechend gestrafft.
   ========================================================================= */
.footer-top-area {
    padding-top: 45px;
    padding-bottom: 5px;
}
.footer-widget {
    margin-bottom: 30px;
}
.footer-widget .footer-title {
    font-size: 18px;
    margin-bottom: 15px;
}
.footer-about-widget p {
    margin-bottom: 0; /* globales p hat sonst margin-bottom: 1.5em */
}
.footer-address ul li {
    margin-top: 6px;
}
.footer-menu ul li {
    margin-bottom: 8px;
}
.ltn__copyright-area {
    padding-top: 18px;
    padding-bottom: 18px;
}

@media (max-width: 991px) {
    .footer-top-area {
        padding-top: 35px;
    }
    .footer-widget {
        margin-bottom: 22px;
    }
}

/* =========================================================================
   Call-to-Action-Button "Zu unseren Angeboten" über dem Footer
   -------------------------------------------------------------------------
   Das Theme umbricht den Button-Inhalt bei schmalen Viewports, sodass das
   Pfeil-Icon in eine eigene Zeile rutscht. white-space: nowrap hält Text
   und Icon zusammen in einer Zeile.
   ========================================================================= */
.call-to-action-inner-6 .btn-wrapper .btn {
    white-space: nowrap;
}

/* =========================================================================
   Hero (Startseite): vollflächiges Objektfoto statt Theme-Illustration
   -------------------------------------------------------------------------
   Der Hero zeigte bisher eine freigestellte, generische Hausgrafik aus dem
   Theme (slider/21.png) auf hellem Grund – kein echtes Objekt der Kundin.
   Das Markup in index.php legt nun ein <picture> mit dem Vormaystraße-
   Rendering absolut hinter den Text; alles Weitere (Skalierung, Abdunklung,
   Textfarben, Mindesthöhe) übernimmt dieser Block. Gilt bewusst nur für die
   Startseite (Klasse .home-hero) – die Unterseiten-Header (bg/14.jpg) bleiben
   unberührt.

   Bild statt data-bs-bg: Das Theme setzt background-image sonst erst per
   jQuery aus data-bs-bg (siehe main.js), das wichtigste Bild der Seite würde
   also erst nach dem Laden des ~470 KB schweren main.js/plugins.js
   erscheinen. Ein echtes <img> ist sofort im HTML da, per fetchpriority
   bevorzugt geladen und funktioniert auch ohne JavaScript.
   ========================================================================= */
.home-hero .ltn__slide-item {
    position: relative;
    overflow: hidden;
}

.home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.home-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%; /* Neubau steht rechts im Bild, oben/unten wird beschnitten */
}

/* Abdunklung als Verlauf statt Vollflächen-Overlay: Das Gebäude steht rechts
   im Motiv, links davon sind Parkplatz/Nachbarhaus hell und detailreich –
   dort braucht weißer Text eine kräftige Abdunklung, rechts beim Gebäude darf
   das Rendering sichtbar bleiben. Farbwert rgba(7,28,31,…) entspricht der
   Theme-Variable --ltn__heading-color, die auch in den Theme-eigenen
   Verlaufsfarben (--gradient-color-2/3/5) verwendet wird. */
.home-hero .ltn__slide-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(7, 28, 31, 0.88) 0%,
        rgba(7, 28, 31, 0.72) 30%,
        rgba(7, 28, 31, 0.28) 60%,
        rgba(7, 28, 31, 0) 88%);
}

.home-hero .ltn__slide-item-inner {
    position: relative;
    z-index: 2;
}

/* Textfarben: Das Theme setzt Überschrift/Fließtext dunkel und den Untertitel
   in der Unternehmensfarbe #500000 (var(--ltn__secondary-color)) – auf dem
   abgedunkelten Foto beides praktisch unlesbar. */
.home-hero .slide-sub-title,
.home-hero .slide-sub-title span,
.home-hero .slide-title,
.home-hero .slide-brief p {
    color: var(--white);
}
.home-hero .slide-brief {
    border-left-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 991px) {
    /* Unter 992px erzwingt das Theme height:auto für .ltn__slide-item
       (style.css, Media Query max-width:1199px) – ohne eigene Mindesthöhe
       würde der Hero mit Vollbild-Hintergrund zu einem flachen, stark
       beschnittenen Streifen. Der Textblock läuft hier zudem über die volle
       Breite (slide-brief hat keine max-width-Beschränkung im Theme), ein
       gerichteter Verlauf reicht daher nicht mehr – stattdessen eine
       flächige Abdunklung. */
    .home-hero .ltn__slide-item {
        min-height: 560px;
    }
    .home-hero .ltn__slide-item::before {
        background: rgba(7, 28, 31, 0.62);
    }
    .home-hero-bg img {
        object-position: 75% center; /* schmaler Viewport: seitlich beschnitten, Gebäude im Bild halten */
    }
}

/* Kontaktformular-Widget (Immobilien-Detailseite): Das Theme setzt für
   .ltn__widget-title global text-transform: capitalize – dadurch wird aus
   "Nachricht senden" fälschlich "Nachricht Senden" (das Verb "senden" darf
   im Deutschen nicht großgeschrieben werden). Global lässt sich die Regel
   nicht entfernen, da .ltn__widget-title auch andere Sidebar-Widgets
   betrifft – daher hier gezielt nur für dieses eine Widget deaktiviert. */
.ltn__form-widget .ltn__widget-title {
    text-transform: none;
}

/* Telefon-Feld im Kontaktformular: Das Theme stylt in style.css nur
   input[type="text"/"email"/"password"/"submit"] + textarea (Rahmen, Höhe,
   Innenabstand, Radius) – input[type="tel"] fehlt dort in der Selektorliste
   und blieb dadurch unstyled (Browser-Default). Hier mit denselben Werten
   nachgezogen, damit das Telefonfeld optisch zu den übrigen Feldern passt. */
input[type="tel"] {
    background-color: var(--white);
    border: 2px solid;
    border-color: var(--border-color-9);
    height: 65px;
    box-shadow: none;
    padding-left: 20px;
    padding-right: 40px;
    font-size: 16px;
    color: var(--ltn__paragraph-color);
    width: 100%;
    margin-bottom: 30px;
    border-radius: 0;
}
input[type="tel"]::placeholder {
    color: var(--ltn__paragraph-color);
    font-size: 14px;
}
input[type="tel"]:focus {
    border-color: var(--ltn__secondary-color);
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home-hero .ltn__slide-item {
        min-height: 640px;
    }
}