/* ============================================================
   THE SMART ONES – CUSTOM.CSS
   Font: Inter (Google Fonts)
   ============================================================ */

/* Inter laden */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');


/* -----------------------------------------
   LOGO – Schriftzug THE SMART ONES
------------------------------------------ */

.logo-text {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0B0E11;        /* CI-Schwarz */
}

.logo-text span {
    display: block;
    font-size: 0.7em;
    letter-spacing: 0.24em;
}


/* -----------------------------------------
   Premium-Navigation THE SMART ONES
------------------------------------------ */

.sp-megamenu-parent > li > a {
    font-family: "Inter", sans-serif;
    font-weight: 300 !important;          /* leichter Schnitt */
    font-size: 14px !important;           /* klein & edel   */
    letter-spacing: 0.18em !important;    /* Luxus-Laufweite */
    text-transform: uppercase;
    color: #0B0E11 !important;            /* Carbon Black   */
    padding: 10px 16px !important;        /* schlanker Header */
}

.sp-megamenu-parent > li > a:hover {
    color: #C8B99A !important;            /* Gold Microtone */
}

.sp-megamenu-parent > li.active > a {
    color: #0B0E11 !important;
}


/* -----------------------------------------
   Header-Hintergrund & Layout
------------------------------------------ */

/* Header-Hintergrund flach, keine Blase */
#sp-header,
#sp-header .container,
#sp-header .sp-megamenu-wrapper {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Seite und Header im CI-Hintergrund */
body,
#sp-header {
    background-color: #F4F0EB !important;   /* Soft Warm White */
}

/* Header-Höhe (Grund-Setup) */
#sp-header {
    padding: 10px 0 !important;
}


/* ============================================
   THE SMART ONES – Premium Minimal Sign-In / User Button
   ============================================ */

/* Grundstil des Buttons (A-Tag) */
#sp-header .sp-module a.sp-sign-in {
    background-color: transparent !important;
    border: 1px solid #D9D5CE !important;      /* Soft Platinum – feiner Rahmen */
    border-radius: 4px !important;             /* dezente Ecken */
    padding: 4px 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    text-decoration: none !important;
    color: #0B0E11 !important;                  /* Carbon Black */
    box-shadow: none !important;
}

/* Text im Button – gilt für "SIGN IN" und den Username später */
#sp-header .sp-module a.sp-sign-in .signin-text,
#sp-header .sp-module a.sp-sign-in .user-text {
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;               /* filigran */
    letter-spacing: 0.12em !important;         /* wie Menülinks */
    text-transform: uppercase !important;
    color: #0B0E11 !important;                 /* dunkler Text */
}

/* Icons (User Icon + Chevron) dezenter */
#sp-header .sp-module a.sp-sign-in i {
    color: #6E7C89 !important;                 /* Blue-Gray Steel – edle Ikonenfarbe */
    font-size: 14px !important;
}

/* Hover-Effekt – dezent & edel */
#sp-header .sp-module a.sp-sign-in:hover {
    border-color: #C8B99A !important;          /* Gold Microtone */
    color: #C8B99A !important;
    background-color: transparent !important;
}

/* Hover: Text wird ebenfalls Gold */
#sp-header .sp-module a.sp-sign-in:hover .signin-text,
#sp-header .sp-module a.sp-sign-in:hover .user-text {
    color: #C8B99A !important;
}

/* Button höher positionieren – feiner Pixelabgleich */
#sp-header .sp-module a.sp-sign-in {
    position: relative !important;
    top: -3px !important;
}


/* ============================================
   THE SMART ONES – Perfekter Sticky Header
   Immer CI-Hintergrund, keine Lücken, Premium Minimal
   ============================================ */

/* 1) Header-Hintergrund immer CI-Farbe */
#sp-header,
#sp-header.menu-fixed,
#sp-header.header-sticky,
#sp-header.fixed {
    background-color: #F4F0EB !important;       /* Soft Warm White – CI */
    box-shadow: none !important;
    border-bottom: 1px solid #D9D5CE !important;/* super dezente Linie */
    z-index: 9999 !important;
}

/* 2) Header-Höhe (schlank & edel) */
#sp-header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* 3) Sticky-Placeholder entfernen (verursacht „Luft“ oben) */
.sticky-header-placeholder {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4) Kein zusätzliches Padding oben im Body */
.body-innerwrapper {
    padding-top: 0 !important;
}

/* 5) Sicherstellen, dass der Header NAHTLOS oben sitzt */
#sp-header {
    margin-top: 0 !important;
    top: 0 !important;
}

/* 6) Falls Template versucht, sticky-Version abzudunkeln → deaktivieren */
#sp-header.menu-fixed,
#sp-header.header-sticky,
#sp-header.fixed {
    opacity: 1 !important;
}


/* ------------------------------------
   PREMIUM TYPOGRAPHY + COLOR SYSTEM
   THE SMART ONES – LONGEVITY
------------------------------------ */

/* Global body text (Farbe & Grundschrift) */
body {
    font-family: "Inter", sans-serif;
    color: #7B8A91; /* Soft Gray */
}

/* Headings */
h1, h2, h3, h4, h5 {
    color: #2A3B47;           /* Premium Charcoal */
    font-weight: 300;         /* filigran */
    letter-spacing: 0.02em;
}

/* (Zusätzlicher) Menü-Selector – falls Template diesen verwendet */
#sp-menu .sp-megamenu-wrapper a {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #2A3B47;
    letter-spacing: 0.15em;   /* BYREDO-Look */
}

/* Menu hover */
#sp-menu .sp-megamenu-wrapper a:hover {
    color: #0345BF;
}


/* CTA Button (green wellness look) */
.btn-primary,
.tso-cta {
    background: #0A6D4F;
    color: #FFFFFF;
    border-radius: 6px;
    padding: 12px 28px;
    font-weight: 400;
}

#addonId .sppb-addon-title {
    font-family: "Inter", sans-serif !important;
    font-weight: 300 !important;        /* edel & filigran */
    font-size: 64px !important;         /* Hero-Größe */
    line-height: 1.1 !important;        /* modernes Tight Leading */
    letter-spacing: 0.01em !important;  /* dezent luxuriös */
    color: #0B0E11 !important;          /* CI-Schwarz */
    margin: 0 0 20px 0 !important;      /* Abstand nach unten */
    padding: 0 !important;
}

/* Mobile-Anpassung */
@media (max-width: 767px) {
    #addonId .sppb-addon-title {
        font-size: 42px !important;
        line-height: 1.15 !important;
    }
}