/*----------------------------------------------
*
* [JID Landingpage Stylesheet]
*
* LP-spezifische Komponenten-Styles (gilt nur im Landingpage-Template).
* Farben kommen NICHT von hier, sondern aus dem LP-Head als :root-Override
* (Modul "LP-Farben" der jeweiligen Kategorie). Diese Datei nutzt nur die
* Variablen und definiert Layouts, die es auf der Hauptseite nicht gibt.
*
* Wird in den folgenden Schritten gefüllt:
*   - Haltung/Werte-Block (Bild links / Text rechts, super-Headline, 2 Buttons)
*   - Pricing / Plans
*   - LP-Kontaktformular
*
----------------------------------------------*/

/* (noch leer – wird Modul für Modul ergänzt) */

/*----------------------------------------------
2. LP Bild + Text (Modul) – Bleed-Hero wie Original
   ------------------------------------------------
   Bild seitlich groß (wie hero-image-left/right), Text überlagernd.
   Farbige Ecke = ::before hinter dem Bild in var(--primary-color)
   → folgt der LP-Farbe. Bild links → Ecke oben links, Bild rechts → oben rechts.

   Tunable am .lp-hero-media:
     --lp-corner-w / --lp-corner-h   Größe der Ecke (Default 55% / 45%)
     --lp-corner-offset              Versatz nach außen (Default 1.75rem)
----------------------------------------------*/

.lp-bildtext.lp-bg-1 { background-color: var(--section-1-bg-color); }
.lp-bildtext.lp-bg-2 { background-color: var(--section-2-bg-color); }

/* Bild bleedet seitlich (Wrapper übernimmt Position von hero-image-*) */
.lp-hero-media {
    position: absolute;
    bottom: 0;
    height: 85%;
    z-index: 1;
}
.lp-hero-media.lp-media-left  { left: 10%; }
.lp-hero-media.lp-media-right { right: 10%; }
.lp-hero-media img {
    position: relative;
    z-index: 1;
    height: 100%;
    width: auto;
    display: block;
}

/* Farbige Ecke (themen-adaptiv) */
.lp-hero-media.lp-corner::before {
    content: "";
    position: absolute;
    z-index: 0;
    background-color: var(--primary-color);
    width: var(--lp-corner-w, 55%);
    height: var(--lp-corner-h, 45%);
    top: calc(var(--lp-corner-offset, 1.75rem) * -1);
}
.lp-hero-media.lp-corner.lp-media-left::before  { left:  calc(var(--lp-corner-offset, 1.75rem) * -1); }
.lp-hero-media.lp-corner.lp-media-right::before { right: calc(var(--lp-corner-offset, 1.75rem) * -1); }

/* super-Headline in Markenfarbe */
.lp-bildtext .super { color: var(--primary-color); }

/* Responsive: Bild oben (volle Breite), dann Text */
@media (max-width: 991px) {
    .lp-hero-media {
        position: relative;
        left: auto;
        right: auto;
        height: auto;
        width: 100%;
        max-width: 90%;
        margin: 0 auto 2.5rem;
    }
    .lp-hero-media img { width: 100%; height: auto; }
    .lp-hero-media.lp-corner::before { --lp-corner-offset: 1rem; }
}

/*----------------------------------------------
3. LP YouTube-Video (Modul, DSGVO Klick-zum-Laden)
   ------------------------------------------------
   Poster + Play-Button (var(--primary-color)); YouTube lädt erst
   per Klick (youtube-nocookie.com).
   Tunable: --lp-video-max (Maximalbreite), --lp-video-play (Play-Größe)
----------------------------------------------*/

.lp-video-section {
    padding: 5rem 0;
}
.lp-video-section.lp-bg-1 { background-color: var(--section-1-bg-color); }
.lp-video-section.lp-bg-2 { background-color: var(--section-2-bg-color); }

.lp-video-title {
    text-align: center;
    color: var(--primary-color);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1.1;
    margin: 0 0 2.5rem;
}

.lp-video {
    position: relative;
    width: 100%;
    max-width: var(--lp-video-max, 960px);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
/* Fallback für Browser ohne aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    .lp-video { height: 0; padding-bottom: 56.25%; }
}

.lp-video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #000;
    cursor: pointer;
    display: block;
}
.lp-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lp-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--lp-video-play, 92px);
    height: var(--lp-video-play, 92px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}
.lp-video-play svg {
    width: 100%;
    height: 100%;
    fill: var(--primary-color);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35));
}
.lp-video-facade:hover .lp-video-play,
.lp-video-facade:focus-visible .lp-video-play {
    transform: translate(-50%, -50%) scale(1.08);
}

.lp-video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 767px) {
    .lp-video-section { padding: 3rem 0; }
    .lp-video-title { font-size: 2rem; margin-bottom: 1.75rem; }
    .lp-video-play { --lp-video-play: 64px; }
}

/*----------------------------------------------
4. LP-Footer auf hellem Grund (Theme-Footer hat .odd)
   ------------------------------------------------
   Der per REX_TEMPLATE[3] geteilte Footer hat <footer class="odd"> und
   rendert daher im Dunkel-Modus (helle Schrift, Copyright 0.25). Auf der
   hellen LP drehen wir das zurück: dunkle Schrift, rotes Logo, roter Button,
   sichtbare Badge-Borders, Copyright 0.05 – wie im LP-Design.
   Alles auf body.page-landing footer.odd gescopt → Hauptseite bleibt unberührt.
----------------------------------------------*/

/* Grundtext + Überschriften dunkel (überschreibt odd-Hellschrift) */
body.page-landing footer.odd,
body.page-landing footer.odd p,
body.page-landing footer.odd li {
    color: #5a5a5a;
}
body.page-landing footer.odd .title {
    color: #2b2b2b;
}

/* Links dunkel, Hover rot */
body.page-landing footer.odd .nav-item .nav-link {
    color: #4a4a4a;
}
body.page-landing footer.odd .nav-item .nav-link:hover {
    color: var(--primary-color);
}

/* Logo rot (SVG nutzt currentColor) */
body.page-landing footer.odd .jid-logo {
    color: var(--primary-color);
}

/* Instagram-Icon rot */
body.page-landing footer.odd .navbar-nav.social .nav-link i {
    color: var(--primary-color);
    -webkit-text-fill-color: var(--primary-color);
    background-image: none;
}

/* "Rechtliches"-Badges: dunkle Schrift + sichtbarer Border (statt odd-hell) */
body.page-landing footer.odd .badge.tag,
body.page-landing footer.odd .footer-widget .badge.tag {
    color: #4a4a4a;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
body.page-landing footer.odd .badge.tag:hover,
body.page-landing footer.odd .footer-widget .badge.tag:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* CTA-Button: rot gefüllt wie primary-button (statt Geister-dark-button) */
body.page-landing footer.odd .btn.dark-button {
    background-color: var(--btn-color);
    background-image: none;
    border: 1px solid var(--btn-color);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
body.page-landing footer.odd .btn.dark-button:after {
    display: none;
}
body.page-landing footer.odd .btn.dark-button:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #ffffff;
}

/* Copyright-Leiste dezent (0.05) statt odd-0.25 */
body.page-landing footer.odd .copyright {
    background-color: rgba(0, 0, 0, 0.05);
}


/* ============================================================
   Menü-Anker: unsichtbares Sprungziel je Sektion (.jid-anchor)
   ------------------------------------------------------------
   Die Section-Module geben als erstes Kind der <section> ein
   <span class="jid-anchor" id="…"> aus. scroll-margin-top schafft
   den Versatz unter dem festen Header, sonst verschwindet der
   Sektionsanfang beim Anklicken eines Menüpunkts dahinter.
   Versatz tunebar via --jid-anchor-offset (Default 130px).
   ============================================================ */
.jid-anchor {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    scroll-margin-top: var(--jid-anchor-offset, 130px);
}

/* =============================================
   Footer-Feinschliff (Modul "JID Footer")
   ============================================= */
/* Kontaktzeile: Icon oben ausgerichtet, Abstand zum Text, Text als linksbündiger Block */
.footer .jid-footer-contact { display: flex !important; align-items: flex-start; text-align: left; }
.footer .jid-footer-contact > i { flex: 0 0 auto; margin-right: .65rem; margin-top: .2em; }
.footer .jid-footer-contact-txt { display: block; flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.45; }

/* Instagram-/Social-Icon in Button-Farbe (--btn-color). Überschreibt die
   LP-Regel oben, die -webkit-text-fill-color auf --primary-color setzt. */
body.page-landing footer.odd .navbar-nav.social .nav-link i,
body.page-landing footer.odd .share-list .nav-link i {
    color: var(--btn-color, #dd1e4b) !important;
    -webkit-text-fill-color: var(--btn-color, #dd1e4b) !important;
    background-image: none !important;
}
body.page-landing footer.odd .navbar-nav.social .nav-link:hover i,
body.page-landing footer.odd .share-list .nav-link:hover i {
    color: var(--btn-color, #dd1e4b) !important;
    -webkit-text-fill-color: var(--btn-color, #dd1e4b) !important;
    opacity: .8;
}

/* ============================================================
   Slider-/Hero-Section: Hintergrund IMMER #F5F5F5
   (ueberschreibt --hero-bg-color / Theme-Flaechenton, Haupt + LP)
   ============================================================ */
#slider {
    background-color: #f5f5f5 !important;
}
.full-slider .swiper-slide.jid-slide-plain,
.no-slider   .swiper-slide.jid-slide-plain {
    background-color: #f5f5f5 !important;
}