/*----------------------------------------------
*
* [JID Custom Stylesheet]
*
* Strukturelle Overrides für JID Aromastar:
* Fonts, Navbar-Overflow, Logo, Service-Card-Hover,
* Sticky-Header, Mobile-Menü-Fix
*
----------------------------------------------*/

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

[CONTENTS]

1. Fonts (Body / Headings / Slider)
2. Navbar / Logo Overflow Fix
3. Logo Sizing (Header + Footer, inline SVG, mit Mobile-Breakpoints)
4. Service Cards – Hover Colors
5. Sticky-Header Auto-Hide (für jid-custom.js)
6. Mobile-Menü-Modal Fix (doppelte Items unterdrücken)

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

/*----------------------------------------------
1. Fonts
----------------------------------------------*/

/* #region Fonts */

body, p, li, td, input, textarea, select, label,
.nav-link, .navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.title, .super, .featured,
footer h4, footer .title,
.footer h4, .footer .title {
    font-family: 'Playfair Display', serif !important;
}

/* Slider hero titles: Roboto Black */
.slider .title,
.hero .title,
#slider .title,
.swiper-slide .title {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 900 !important;
}

/* Per-Slide wählbare Headline-Schrift (Dropdown im Slider-Modul).
   WICHTIG: #slider mitnehmen — die Default-Regel oben enthält
   "#slider .title" (ID-Selektor, 1,0,1,0). Ohne ID würde unsere
   Klassen-Regel verlieren. #slider .title.jid-title-… = 1,0,2,0 gewinnt.
   font-weight bei Playfair = 700 (tunebar). */
#slider .title.jid-title-roboto,
.full-slider .title.jid-title-roboto,
.swiper-slide .title.jid-title-roboto,
.hero .title.jid-title-roboto {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 900 !important;
}
#slider .title.jid-title-playfair,
.full-slider .title.jid-title-playfair,
.swiper-slide .title.jid-title-playfair,
.hero .title.jid-title-playfair {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
}

/* #endregion Fonts */

/*----------------------------------------------
2. Navbar / Logo Overflow Fix
----------------------------------------------*/

/* #region Navbar Overflow */

#header,
#header nav,
#header nav .container,
#header nav .container.header,
.navbar,
.navbar-expand,
.navbar-brand {
    overflow: visible;
    clip-path: none;
}

/* #endregion Navbar Overflow */

/*----------------------------------------------
2b. Navbar Social-Icon Abstände
----------------------------------------------*/

/* #region Navbar Social Spacing */

.navbar-nav.icons .nav-item.social a.nav-link {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* #endregion Navbar Social Spacing */

/*----------------------------------------------
3. Logo Sizing (Header + Footer) – inline SVG, Farbe via currentColor
----------------------------------------------*/

/* #region Logo */

/* Header-Logo: am unteren Rand der Navbar, ragt nach oben heraus */
.navbar-brand {
    align-self: flex-end;
    padding-bottom: 6px;
    padding-top: 0;
    margin-bottom: 0;
}

/* Header-Logo (inline SVG) – Desktop: 110px
   Breite ergibt sich automatisch aus dem viewBox-Verhältnis.
   color steuert die Füllung (SVG nutzt fill="currentColor"). */
.navbar-brand .jid-logo {
    display: block;
    height: 110px !important;
    width: auto;
    color: var(--logo-color, #E62646);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.13));
}

/* Tablet (< 992px): Logo auf 75px */
@media (max-width: 991px) {
    .navbar-brand .jid-logo {
        height: 75px !important;
    }
}

/* Phone (< 576px): Logo auf 55px */
@media (max-width: 575px) {
    .navbar-brand .jid-logo {
        height: 55px !important;
    }
}

/* Footer-Logo: weiß (inline SVG, currentColor – kein brightness/invert-Hack mehr nötig) */
footer .jid-logo,
.footer .jid-logo {
    height: var(--footer-brand-height, 80px) !important;
    width: auto !important;
    color: #ffffff;
}

/* Footer "Rechtliches"-Tags: kompakte Breite */
.footer .badge.tag.d-block {
    width: fit-content;
}

/* Footer: Social-Icons weiß + Gradient-Clip-Text des Themes aufheben */
footer .share-list .nav-link i,
footer .navbar-nav.social .nav-link i {
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

footer .share-list .nav-link:hover i,
footer .navbar-nav.social .nav-link:hover i {
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

/* #endregion Logo */



/*----------------------------------------------
5. Sticky-Header Auto-Hide
   (gesteuert per jid-custom.js, eigene Klasse)
----------------------------------------------*/

/* #region Sticky Header */

header .navbar-expand {
    transition: transform 0.3s ease-in-out !important;
}

header .navbar-expand.jid-nav-hidden {
    transform: translate3d(0, -100%, 0) !important;
}

/* #endregion Sticky Header */

/*----------------------------------------------
5b. Menü-Farben: Normal- vs. Sticky-Zustand
    ------------------------------------------------------------
    --nav-color        = Menü 1 (navi normal, über Hero)
    --nav-sticky-color = Menü 2 (sticky, gescrollt)
    Gilt für die Nav-Links ("Start") und das Social-Icon (Instagram).
    Der Logo behält sein eigenes --logo-color.
    Die Klasse "jid-nav-sticky" setzt jid-custom.js ab dem Scroll-
    Schwellwert; ohne Klasse greift der Normal-Wert.
----------------------------------------------*/

/* #region Menü-Farben */

/* Normal (über Hero): Links */
header .navbar-expand .navbar-nav .nav-link {
    color: var(--nav-color, #2a2f64) !important;
}

/* Normal: Social-Icon – Gradient-Clip des Themes aufheben, damit color greift */
header .navbar-expand .navbar-nav.icons .nav-link i {
    color: var(--nav-color, #2a2f64) !important;
    -webkit-text-fill-color: var(--nav-color, #2a2f64) !important;
    background-image: none !important;
}

/* Sticky (gescrollt): Links */
header .navbar-expand.jid-nav-sticky .navbar-nav .nav-link {
    color: var(--nav-sticky-color, #212443) !important;
}

/* Sticky: Social-Icon */
header .navbar-expand.jid-nav-sticky .navbar-nav.icons .nav-link i {
    color: var(--nav-sticky-color, #212443) !important;
    -webkit-text-fill-color: var(--nav-sticky-color, #212443) !important;
    background-image: none !important;
}

/* #endregion Menü-Farben */

/*----------------------------------------------
6. Mobile-Menü-Modal Fix
   - "contacts"-Slot ausblenden (sonst doppelte Menüpunkte,
     weil main.js dort nochmal die Hauptnavigation einfügt)
----------------------------------------------*/

/* #region Mobile Menu */

#menu .contacts {
    display: none !important;
}

/* #endregion Mobile Menu */

/* =============================================
   Service-Cards: Hover-Farbschemata (Klassen-basiert)
   Neue Farbe? Block kopieren + im Modul-Eingabe
   in $colorOptions ergänzen.
   ============================================= */

/* Rouge */
.card.card-color-rouge::before {
    background-image: linear-gradient(45deg, #7a0e36 15%, #b85268 65%) !important;
}
.card.card-color-rouge:hover,
.card.card-color-rouge:hover::after {
    background-image: linear-gradient(135deg, #7a0e36 0%, #b85268 100%) !important;
    background-color: transparent !important;
    cursor: pointer;
}
.card.card-color-rouge:hover h4,
.card.card-color-rouge:hover p,
.card.card-color-rouge:hover .icon,
.card.card-color-rouge:hover .btn-icon {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background-image: none !important;
}

/* Sandstein */
.card.card-color-sandstein::before {
    background-image: linear-gradient(45deg, #8a6e4f 15%, #c5a57e 65%) !important;
}
.card.card-color-sandstein:hover,
.card.card-color-sandstein:hover::after {
    background-image: linear-gradient(135deg, #8a6e4f 0%, #c5a57e 100%) !important;
    background-color: transparent !important;
    cursor: pointer;
}
.card.card-color-sandstein:hover h4,
.card.card-color-sandstein:hover p,
.card.card-color-sandstein:hover .icon,
.card.card-color-sandstein:hover .btn-icon {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background-image: none !important;
}

/* Lavendel */
.card.card-color-lavendel::before {
    background-image: linear-gradient(45deg, #8080d4 15%, #adadf2 65%) !important;
}
.card.card-color-lavendel:hover,
.card.card-color-lavendel:hover::after {
    background-image: linear-gradient(135deg, #8080d4 0%, #adadf2 100%) !important;
    background-color: transparent !important;
    cursor: pointer;
}
.card.card-color-lavendel:hover h4,
.card.card-color-lavendel:hover p,
.card.card-color-lavendel:hover .icon,
.card.card-color-lavendel:hover .btn-icon {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background-image: none !important;
}

/* =============================================
   Hero-Slider: schräger Rahmen hinter dem Text
   - rechts offen : Rahmen umschließt den Text, rechts etwas kürzer & offen
                    (Breite via --jid-frame-right-width, Default 50% von .left)
   - links offen  : feste Breite, langer Text ragt rechts hinaus, links offen
   - off          : kein Rahmen
   Jeweils 3 durchgehende Seiten + zwei kurze "Anstriche" an der offenen Seite.
   Klasse am .left-Element (Dropdown im Hero-Slider-Modul).
   Winkel (−15°) und Linienfarbe (var(--primary-color)) bleiben.
   Überschrift bricht nur an echten Trennstellen um (kein Wortbruch).

   Tunable:
   - Abstand oben/unten/links: top -5rem / bottom -1rem / left -1.5rem
   - "rechts offen": Breite --jid-frame-right-width (Default 50%)
   - "links offen": Breite --jid-frame-left-width (Default 50%)
   - Länge der Anstriche: die 18%/82%-Werte im Verlauf
   ============================================= */

/* --- rechts offen: Rahmen umschließt den Text, rechts etwas kürzer & offen --- */
.full-slider.featured .inner .left.frame-open-right:before,
.full-slider.featured .inner .left.frame-open-right:after {
    top: -5rem;
    bottom: -1rem;
    left: -4.5rem;      /* mehr Abstand links: gedrehte Unterkante berührt sonst die Schrift */
    right: auto;
    width: calc(var(--jid-frame-right-width, 50%) + 1.5rem);  /* +1.5rem gleicht das Linksrücken aus → rechte (offene) Kante bleibt unverändert */
    height: auto;
}
/* Überschrift nur an echten Trennstellen umbrechen (z. B. Bindestrich),
   nie mitten im Wort – Umbruch wie vor der Rahmen-Änderung */
.full-slider.featured .inner .left.frame-open-right .title,
.full-slider.featured .inner .left.frame-open-left .title {
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;
    hyphens: manual;
}
.full-slider.featured .inner .left.frame-open-right:before {
    border-image: none;
    border-style: solid;
    border-color: var(--primary-color);
    border-width: 2px 0 2px 2px;   /* oben | rechts(0) | unten | links */
}
.full-slider.featured .inner .left.frame-open-right:after {
    border-style: solid;
    border-width: 0 2px 0 0;       /* nur rechts → kurze Anstriche oben/unten */
    border-image: linear-gradient(to bottom,
        var(--primary-color) 0 18%, transparent 18% 82%, var(--primary-color) 82% 100%) 1;
}

/* --- links offen: gleiche Größe/Abstände wie "rechts offen", nur links offen --- */
.full-slider.featured .inner .left.frame-open-left:before,
.full-slider.featured .inner .left.frame-open-left:after {
    top: -5rem;
    bottom: -1rem;
    left: -1.5rem;
    right: auto;
    width: var(--jid-frame-left-width, 50%);
    height: auto;
}
.full-slider.featured .inner .left.frame-open-left:before {
    border-image: none;
    border-style: solid;
    border-color: var(--primary-color);
    border-width: 2px 2px 2px 0;   /* oben | rechts | unten | links(0) */
}
.full-slider.featured .inner .left.frame-open-left:after {
    border-style: solid;
    border-width: 0 0 0 2px;       /* nur links → kurze Anstriche oben/unten */
    border-image: linear-gradient(to bottom,
        var(--primary-color) 0 18%, transparent 18% 87%, var(--primary-color) 82% 100%) 1;
}

/* --- kein Rahmen: komplett ausblenden (überschreibt main.css zuverlässig) ---
   WICHTIG: Klasse "frame-none" statt "off" – "off" ist eine interne
   Animations-Klasse des Leverage-Sliders und wird vom Template-JS entfernt. */
.full-slider.featured .inner .left.frame-none:before,
.full-slider.featured .inner .left.frame-none:after {
    display: none !important;
    border: 0 !important;
    content: none !important;
}

/* ============================================================
   Header-CTA ("KONTAKT") an die BUTTON-Farbe binden
   ------------------------------------------------------------
   Der Button im Header soll der gewählten Button-Farbe folgen
   (wie der Hero-Button "Anruf"), NICHT der Grundfarbe hell.
   Hoch spezifisch + !important, da eine header-spezifische
   Regel der main.css ihn sonst auf var(--primary-color) zieht.
   ============================================================ */
header .navbar-expand .navbar-nav.action .btn,
header .navbar-expand .navbar-nav.action .btn.primary-button {
    background-color: var(--btn-color) !important;
    background-image: none !important;
    color: #fff !important;
}
header .navbar-expand .navbar-nav.action .btn:hover,
header .navbar-expand .navbar-nav.action .btn:focus,
header .navbar-expand .navbar-nav.action .btn.primary-button:hover,
header .navbar-expand .navbar-nav.action .btn.primary-button:focus {
    background-color: var(--btn-color) !important;
    background-image: linear-gradient(45deg, var(--btn-color-2) 15%, var(--btn-color) 65%) !important;
    color: #fff !important;
}

/* ============================================================
   Akzentlinie über Überschriften (h2.featured) – nur dünner
   ------------------------------------------------------------
   Überschreibt height:5px aus der main.css. Länge (50px) und
   Verlauf bleiben unverändert; nur die Höhe wird 2px.
   ============================================================ */
h2.featured::before {
    height: 2px;
}

/* ============================================================
   Hero-Slide ohne Bild/Video → weißer Hintergrund
   (sonst scheint der Section-/Flächenton durch; gilt Haupt + LP)
   ============================================================ */
.full-slider .swiper-slide.jid-slide-plain,
.no-slider   .swiper-slide.jid-slide-plain {
    background-color: #ffffff;
}


/* ============================================================
   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
   weiße Theme-Regel oben inkl. -webkit-text-fill-color (das color schlägt). */
footer .navbar-nav.social .nav-link i,
footer .share-list .nav-link i {
    color: var(--btn-color, #dd1e4b) !important;
    -webkit-text-fill-color: var(--btn-color, #dd1e4b) !important;
    background-image: none !important;
}
footer .navbar-nav.social .nav-link:hover i,
footer .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;
}

/* ============================================================
   Modul "Text (zentriert)" (jid-richtext)
   ------------------------------------------------------------
   Zentrierte Überschrift (ohne Akzentlinie) + Editor-Text.
   Bild-Ausrichtung kommt aus dem CKE5-Profil "jid_richtext" und
   landet als figure.image-style-* im HTML – hier gestylt, da die
   Leverage-main.css diese Klassen nicht kennt.
   ============================================================ */

/* #region Text zentriert */

/* Überschrift: zentriert, ohne die Akzentlinie aus main.css */
.jid-richtext h2.featured {
    text-align: center;
}
.jid-richtext h2.featured::before {
    content: none !important;
    display: none !important;
}

/* Text-Container: Floats der seitlichen Bilder einschließen (Clearfix) */
.jid-richtext-body::after {
    content: "";
    display: table;
    clear: both;
}

/* --- CKE5-Bilder: Grundlayout (Default = zentriert als Block) --- */
.jid-richtext-body figure.image {
    display: table;
    margin: 1.5rem auto;
    max-width: 100%;
}
.jid-richtext-body figure.image img {
    display: block;
    width: 100%;
    height: auto;
}
.jid-richtext-body figure.image figcaption {
    display: table-caption;
    caption-side: bottom;
    font-size: .85rem;
    color: #777;
    padding-top: .4rem;
    text-align: center;
}

/* --- Blockausrichtung ("Text umbrechen" / break text) --- */
.jid-richtext-body figure.image.image-style-block-align-left  { margin-left: 0;    margin-right: auto; }
.jid-richtext-body figure.image.image-style-block-align-right { margin-left: auto; margin-right: 0; }
.jid-richtext-body figure.image.image-style-align-center,
.jid-richtext-body figure.image.image-style-block-align-center { margin-left: auto; margin-right: auto; }

/* --- Seitlich mit Textumfluss ("wrap text") --- */
.jid-richtext-body figure.image.image-style-align-left {
    float: left;
    margin: .25rem 1.75rem 1rem 0;
    max-width: 50%;
}
.jid-richtext-body figure.image.image-style-align-right,
.jid-richtext-body figure.image.image-style-side {
    float: right;
    margin: .25rem 0 1rem 1.75rem;
    max-width: 50%;
}

/* --- Inline-Bild --- */
.jid-richtext-body .image-inline {
    display: inline-block;
    vertical-align: baseline;
    max-width: 100%;
}
.jid-richtext-body img.image_resized {
    height: auto;
}

/* Mobile: seitliche Bilder volle Breite, kein Float */
@media (max-width: 575px) {
    .jid-richtext-body figure.image.image-style-align-left,
    .jid-richtext-body figure.image.image-style-align-right,
    .jid-richtext-body figure.image.image-style-side {
        float: none;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* #endregion Text zentriert */

/* ============================================================
   Section-Hintergrund "Navy" → Sekundärfarbe aus dem Color-Theme
   ------------------------------------------------------------
   Statt festem Navy folgt die Fläche jetzt --secondary-color des
   jeweiligen Templates (Haupt = JID Color Theme, LP = LP Color
   Theme). Auf der Hauptseite ist das weiterhin #212443 (= altes
   Navy), auf LPs die dortige Sekundärfarbe. Gilt für alle Module,
   die die Hintergrund-Option nutzen.
   ============================================================ */
.bg-section-navy {
    background-color: var(--secondary-color, #212443) !important;
}