/* Custom CSS for Mache Theme */
/* Angepasst an LUMILERO "Costume Boutique" Farbpalette */

/* =============================================================================
   Palette:
     terracotta  #C05428  → Primärfarbe / Buttons / Akzente
     scarlet     #C42020  → Navbar-Hintergrund
     gold        #C8980A  → Trennlinien / Akzent
     cream       #FDF0E4  → Helle Flächen
     parchment   #FFFAF4  → Body-Hintergrund
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. CSS-Variablen
   --------------------------------------------------------------------------- */
:root {
  --lum-terracotta:       #C05428;
  --lum-terracotta-dark:  #8B3810;
  --lum-terracotta-light: #D8704A;
  --lum-scarlet:          #C42020;
  --lum-scarlet-dark:     #8B1010;
  --lum-gold:             #C8980A;
  --lum-gold-bright:      #E8C020;
  --lum-cream:            #FDF0E4;
  --lum-cream-dark:       #F5E4D0;
  --lum-parchment:        #FFFAF4;
  --lum-text-dark:        #3A2010;
  --lum-text-mid:         #6B4028;
}

/* ---------------------------------------------------------------------------
   2. Body
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'UbuntuBoldItalic';
    src: url('../fonts/Ubuntu-Italic.ttf') format('truetype');
}

body {
    font-family: 'UbuntuBoldItalic', sans-serif;
    background-color: var(--lum-parchment);
}

/* ---------------------------------------------------------------------------
   3. Header / Navbar — Scarlet-Gradient wie Vaadin-Navbar
   --------------------------------------------------------------------------- */
header {
    position: relative;
    background: linear-gradient(90deg, #fdf1e5 0%, #e8a0a0 30%, #C42020 60%, #8B1010 100%);
    border-bottom: 3px solid var(--lum-gold-bright);
    box-shadow: 0 2px 10px rgba(196, 32, 32, 0.30);
}

header.sticky,
.header.sticky {
    background: linear-gradient(90deg, #fdf1e5 0%, #e8a0a0 30%, #C42020 60%, #8B1010 100%);
    border-bottom: 3px solid var(--lum-gold-bright);
    box-shadow: 0 2px 10px rgba(196, 32, 32, 0.30);
}

header .logo {
    width: auto;
    height: auto;
    padding: 3px 0;
}

header .logo a {
    width: 100%;
    height: 100%;
    display: block;
}

header .logo img {
    height: auto;
}

/* ---------------------------------------------------------------------------
   4. Navigation — weiße Links auf dunklem Navbar-Hintergrund
   --------------------------------------------------------------------------- */
nav ul li a {
    color: #FFFAF4;
}

nav ul li a:hover {
    color: var(--lum-gold-bright);
    transition: all 0.5s;
}

.nav-collapse a:active,
.nav-collapse .active a {
    color: var(--lum-gold-bright);
}

/* Hamburger-Menü-Linien (mobile) */
span.line {
    background: var(--lum-gold);
}

/* ---------------------------------------------------------------------------
   5. Dekorative Trennlinie
   --------------------------------------------------------------------------- */
/* Überschreibt span.line aus style.css für dekorativen Einsatz */

/* ---------------------------------------------------------------------------
   6. Banner / Hero
   --------------------------------------------------------------------------- */

/* Unterseiten (Impressum, Datenschutz etc.) haben kein Hintergrundbild —
   Überschrift muss dort dunkel sein statt weiß */
.banner.banner-alt h1 {
    color: var(--lum-text-dark);
}

.banner.banner-alt span.line {
    background: var(--lum-gold);
    display: block;
}

.banner a {
    color: var(--lum-terracotta);
}

.banner .button-container a {
    background: linear-gradient(135deg, var(--lum-terracotta) 0%, var(--lum-terracotta-dark) 100%);
    color: #FFFAF4;
    width: 150px;
    border: 1px solid var(--lum-terracotta-dark);
    box-shadow: 0 2px 6px rgba(192, 84, 40, 0.30);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.banner .button-container a:hover {
    filter: brightness(1.10);
    box-shadow: 0 3px 10px rgba(192, 84, 40, 0.45);
    color: #FFFAF4;
}

.video a {
    color: var(--lum-terracotta);
}

/* ---------------------------------------------------------------------------
   7. Services / Features
   --------------------------------------------------------------------------- */
.services h3 {
    color: var(--lum-terracotta);
}

.services img {
    height: 200px;
}

.features h3 {
    color: var(--lum-terracotta);
}

/* ---------------------------------------------------------------------------
   8. Pricing
   --------------------------------------------------------------------------- */
.price .price-container a {
    background: linear-gradient(135deg, var(--lum-terracotta) 0%, var(--lum-terracotta-dark) 100%);
    border: 1px solid var(--lum-terracotta-dark);
    box-shadow: 0 2px 6px rgba(192, 84, 40, 0.30);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.price .price-container a:hover {
    filter: brightness(1.10);
    box-shadow: 0 3px 10px rgba(192, 84, 40, 0.45);
}

.price .price-container:hover .black {
    background: var(--lum-gold);
}

/* ---------------------------------------------------------------------------
   9. Join Now / CTA-Buttons
   --------------------------------------------------------------------------- */
.joinnow {
    background: linear-gradient(135deg, var(--lum-terracotta) 0%, var(--lum-terracotta-dark) 100%);
}

.joinnow a {
    color: var(--lum-terracotta);
}

a.showmore {
    color: var(--lum-terracotta);
}

.cta2 a, .cta3 a, .button {
    background: linear-gradient(135deg, var(--lum-terracotta) 0%, var(--lum-terracotta-dark) 100%);
    border: 1px solid var(--lum-terracotta-dark);
    box-shadow: 0 2px 6px rgba(192, 84, 40, 0.30);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.cta2 a:hover {
    background: #fff;
    color: var(--lum-terracotta);
    filter: none;
    box-shadow: none;
    transition: all 0.4s;
}

footer p a:hover {
    color: var(--lum-terracotta);
}

/* ---------------------------------------------------------------------------
   10. Loader
   --------------------------------------------------------------------------- */
.se-pre-con {
    background: linear-gradient(135deg, var(--lum-terracotta) 0%, var(--lum-terracotta-dark) 100%);
}

/* ---------------------------------------------------------------------------
   11. Layout-Anpassungen
   --------------------------------------------------------------------------- */
div.rightside { text-align: left; }

@media only screen and (min-width: 0px) and (max-width: 1000px) {
    header nav {
        padding-top: unset;
    }
    header .logo img {
        width: 100px;
    }
}

@media only screen and (min-width: 1001px) {
    header nav {
        padding-top: 35px;
    }
    header nav ul li a {
        padding: 5px 0;
    }
    header .logo img {
        width: 150px;
    }
}