/* =====================================================
   Haus + Licht — Sektions-Gestaltung
   Erzeugt visuellen Rhythmus ohne das Theme-CSS zu ändern.
   ===================================================== */

/* --------------------------------------------------
   Scroll-Indikator Animation
   -------------------------------------------------- */
@keyframes arrowbounce {
    0%, 100% { transform: translateY(0px); opacity: 0.4; }
    50%       { transform: translateY(6px); opacity: 1; }
}

.scroll-arr1 { animation: arrowbounce 1.5s ease-in-out infinite 0s;    transform-origin: 340px 205px; }
.scroll-arr2 { animation: arrowbounce 1.5s ease-in-out infinite 0.25s; transform-origin: 340px 220px; }
.scroll-arr3 { animation: arrowbounce 1.5s ease-in-out infinite 0.5s;  transform-origin: 340px 235px; }

@media (prefers-reduced-motion: reduce) {
    .scroll-arr1, .scroll-arr2, .scroll-arr3 { animation: none; }
}

/* --------------------------------------------------
   Trennlinien: grauen box-shadow entfernen, alle
   Abschnitte bekommen einen roten border-top
   -------------------------------------------------- */
#wrapper.divided > * {
    box-shadow: none;
}

.spotlight.style1,
section.wrapper.style1,
footer.wrapper.style1 {
    border-top: 3px solid #bd1211;
}

/* --------------------------------------------------
   Spotlight-Sektionen: dunkler Hintergrund
   -------------------------------------------------- */
.spotlight.style1 {
    background-color: #181818;
}

/* Spotlight-Überschriften in Akzentfarbe */
.spotlight h2 {
    color: #bd1211;
}

/* --------------------------------------------------
   Items-Icons: roter Hintergrund statt Rahmen
   -------------------------------------------------- */
.items .icon.style2:before {
    background-color: #bd1211;
    box-shadow: none;
    color: #ffffff;
}

.items a.icon.style2:hover:before {
    background-color: #9a0f0e;
    box-shadow: none;
    color: #ffffff;
}

/* --------------------------------------------------
   Banner-Untertitel in Akzentfarbe
   -------------------------------------------------- */
.banner p.major {
    color: #bd1211;
}

/* --------------------------------------------------
   Spotlight-Text: erstes Wort hervorgehoben
   -------------------------------------------------- */
.spotlight-lead {
    color: #bd1211;
    font-weight: 400;
}

/* --------------------------------------------------
   Items-Sektion (section.wrapper): zurück zu Weiß
   -------------------------------------------------- */
section.wrapper.style1 {
    background-color: #111111;
}

/* Footer: leicht abgesetzt vom Hintergrund */
footer.wrapper.style1 {
    background-color: #1c1c1c;
}

/* --------------------------------------------------
   Banner-Header: Logo + Tagline nebeneinander
   -------------------------------------------------- */
.banner-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.banner-logo {
    height: 13rem;
    width: auto;
    flex-shrink: 0;
}

.banner-header .major {
    margin: 0;
}

/* Mobil: Logo über dem Text */
@media screen and (max-width: 736px) {
    .banner-header {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .banner-logo {
        height: 11rem;
    }
}

/* --------------------------------------------------
   Spotlight-Bilder: immer nach oben ausrichten
   Verhindert, dass der obere Bereich bei breiten
   Viewports (z.B. 1920x1080) abgeschnitten wird.
   -------------------------------------------------- */
.spotlight.style1 .image img {
    -webkit-object-position: top;
    object-position: top;
}

/* --------------------------------------------------
   Banner + Über-mich-Bild: immer vollständig anzeigen
   object-fit: contain statt cover — kein Zuschneiden.
   Hintergrund transparent damit die Sektionsfarbe
   als Letterbox dient.
   -------------------------------------------------- */
.banner.style1 .image,
#spotlight2 .image {
    background-color: transparent;
}

.banner.style1 .image img {
    object-fit: contain;
    object-position: center;
}

/* Über-mich: Bild physisch an den rechten Rand ankern, natürliche Größe */
#spotlight2 .image img {
    position: absolute;
    top: 50%;
    right: 0;
    left: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    transform: translateY(-50%);
}

/* Mobil (portrait): Bild-Container nicht auf 50vh fixieren */
@media screen and (orientation: portrait) {
    .banner.style1 .image {
        height: auto !important;
    }

    .banner.style1 .image img {
        position: relative;
        width: 100%;
        height: auto;
    }
}

/* Mobil portrait ≤736px: spotlight2 zurück auf normale Breite */
@media screen and (max-width: 736px) and (orientation: portrait) {
    #spotlight2 .image img {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        height: auto;
        max-height: none;
        transform: none;
    }
}