/**
 * LAKO27 - Custom Styles
 *
 * Erganzende CSS-Regeln fur die LAKO27 Website
 * Basierend auf dem Styleguide von Nasse Design
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Variablen)
   ========================================================================== */

:root {
    /* Farben aus Styleguide */
    --lako-blau: #0065AD;
    --lako-dunkelblau: #003256;
    --lako-gelb: #FFCD1B;
    --lako-curry: #DF9602;
    --lako-weiss: #FFFFFF;
    --lako-schwarz: #1A1A1A;
    --lako-grau-hell: #F5F5F5;
    --lako-grau: #6B6B6B;

    /* Farbabstufungen Blau */
    --lako-blau-80: rgba(0, 101, 173, 0.8);
    --lako-blau-60: rgba(0, 101, 173, 0.6);
    --lako-blau-40: rgba(0, 101, 173, 0.4);
    --lako-blau-20: rgba(0, 101, 173, 0.2);

    /* Farbabstufungen Gelb */
    --lako-gelb-80: rgba(255, 205, 27, 0.8);
    --lako-gelb-60: rgba(255, 205, 27, 0.6);
    --lako-gelb-40: rgba(255, 205, 27, 0.4);
    --lako-gelb-20: rgba(255, 205, 27, 0.2);

    /* Abstande */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-xxl: 100px;

    /* Border Radius (angelehnt an Logo-Form) */
    --radius-small: 4px;
    --radius-medium: 15px;
    --radius-large: 30px;
    --radius-logo: 0 0 30px 0; /* Abgerundete Ecke unten rechts */

    /* Schatten */
    --shadow-light: 0 2px 10px rgba(0, 50, 86, 0.08);
    --shadow-medium: 0 4px 20px rgba(0, 50, 86, 0.12);
    --shadow-strong: 0 8px 40px rgba(0, 50, 86, 0.16);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}


/* ==========================================================================
   GLOBALE BASIS-STYLES
   ========================================================================== */

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--lako-schwarz);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection Color */
::selection {
    background-color: var(--lako-gelb);
    color: var(--lako-dunkelblau);
}


/* ==========================================================================
   BUTTONS - LAKO STYLE
   ========================================================================== */

/* Primary Button (Blau) */
.lako-btn-primary,
.elementor-button.lako-btn-primary {
    background-color: var(--lako-blau) !important;
    color: var(--lako-weiss) !important;
    border: none !important;
    border-radius: var(--radius-logo) !important;
    padding: 15px 30px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: none !important;
    transition: var(--transition-normal) !important;
    box-shadow: var(--shadow-light) !important;
}

.lako-btn-primary:hover,
.elementor-button.lako-btn-primary:hover {
    background-color: var(--lako-dunkelblau) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
}

/* Secondary Button (Gelb) */
.lako-btn-secondary,
.elementor-button.lako-btn-secondary {
    background-color: var(--lako-gelb) !important;
    color: var(--lako-dunkelblau) !important;
    border: none !important;
    border-radius: var(--radius-logo) !important;
    padding: 15px 30px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: none !important;
    transition: var(--transition-normal) !important;
    box-shadow: var(--shadow-light) !important;
}

.lako-btn-secondary:hover,
.elementor-button.lako-btn-secondary:hover {
    background-color: var(--lako-curry) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
}

/* Outline Button */
.lako-btn-outline,
.elementor-button.lako-btn-outline {
    background-color: transparent !important;
    color: var(--lako-blau) !important;
    border: 2px solid var(--lako-blau) !important;
    border-radius: var(--radius-logo) !important;
    padding: 13px 28px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: var(--transition-normal) !important;
}

.lako-btn-outline:hover,
.elementor-button.lako-btn-outline:hover {
    background-color: var(--lako-blau) !important;
    color: var(--lako-weiss) !important;
}


/* ==========================================================================
   BOXES & CARDS - LAKO STYLE (mit abgerundeter Ecke)
   ========================================================================== */

.lako-box,
.lako-card {
    background: var(--lako-weiss);
    border-radius: var(--radius-logo);
    box-shadow: var(--shadow-light);
    padding: var(--spacing-lg);
    transition: var(--transition-normal);
}

.lako-box:hover,
.lako-card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-4px);
}

/* Box mit Blauem Hintergrund */
.lako-box-blue {
    background: var(--lako-blau);
    color: var(--lako-weiss);
    border-radius: var(--radius-logo);
    padding: var(--spacing-lg);
}

.lako-box-blue h1,
.lako-box-blue h2,
.lako-box-blue h3,
.lako-box-blue h4,
.lako-box-blue h5,
.lako-box-blue h6 {
    color: var(--lako-weiss);
}

/* Box mit Gelbem Hintergrund */
.lako-box-yellow {
    background: var(--lako-gelb);
    color: var(--lako-dunkelblau);
    border-radius: var(--radius-logo);
    padding: var(--spacing-lg);
}


/* ==========================================================================
   SCHMUCKSCHRIFT KLASSE
   ========================================================================== */

.lako-schmuck,
.lako-handwriting {
    font-family: 'Grape Nuts', cursive !important;
    font-weight: 400 !important;
}

/* Kombination: Uberschrift + Schmuckschrift (wie im Styleguide) */
.lako-headline-combo {
    display: block;
}

.lako-headline-combo .main-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--lako-dunkelblau);
}

.lako-headline-combo .script-text {
    font-family: 'Grape Nuts', cursive;
    color: var(--lako-blau);
    display: block;
    margin-top: -0.2em;
}

/* Gelber Highlight-Hintergrund fur Text (wie im Styleguide) */
.lako-highlight {
    background: var(--lako-gelb);
    padding: 0.1em 0.3em;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}


/* ==========================================================================
   BILDER MIT LAKO-STYLE
   ========================================================================== */

.lako-image {
    border-radius: var(--radius-logo);
    overflow: hidden;
}

.lako-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: var(--transition-slow);
}

.lako-image:hover img {
    transform: scale(1.03);
}

/* Bild mit Overlay (80% Weiss wie im Styleguide) */
.lako-image-overlay {
    position: relative;
    border-radius: var(--radius-logo);
    overflow: hidden;
}

.lako-image-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

.lako-image-overlay .overlay-content {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   SPONSOR LOGOS (Graustufen -> Farbe bei Hover)
   ========================================================================== */

.lako-sponsor-logo {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--transition-normal);
}

.lako-sponsor-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}


/* ==========================================================================
   SILHOUETTE DIVIDER
   ========================================================================== */

.lako-silhouette-divider {
    width: 100%;
    height: auto;
    display: block;
}

.lako-silhouette-divider.blue {
    fill: var(--lako-blau);
}

.lako-silhouette-divider.yellow {
    fill: var(--lako-gelb);
}


/* ==========================================================================
   COUNTDOWN / DATUM ELEMENT
   ========================================================================== */

.lako-countdown {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.lako-countdown-item {
    text-align: center;
    background: var(--lako-blau);
    color: var(--lako-weiss);
    padding: var(--spacing-md);
    border-radius: var(--radius-logo);
    min-width: 80px;
}

.lako-countdown-number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    display: block;
}

.lako-countdown-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    margin-top: 5px;
    display: block;
}


/* ==========================================================================
   NAVIGATION STYLES
   ========================================================================== */

/* Sticky Header Background */
.lako-header-sticky {
    background: var(--lako-weiss);
    box-shadow: var(--shadow-light);
    transition: var(--transition-normal);
}

/* Navigation Links */
.lako-nav-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--lako-dunkelblau);
    text-decoration: none;
    padding: 10px 15px;
    transition: var(--transition-fast);
    position: relative;
}

.lako-nav-link:hover {
    color: var(--lako-blau);
}

.lako-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--lako-gelb);
    transition: var(--transition-fast);
    transform: translateX(-50%);
}

.lako-nav-link:hover::after {
    width: 80%;
}


/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */

.lako-footer {
    background: var(--lako-dunkelblau);
    color: var(--lako-weiss);
}

.lako-footer a {
    color: var(--lako-weiss);
    text-decoration: none;
    transition: var(--transition-fast);
}

.lako-footer a:hover {
    color: var(--lako-gelb);
}


/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Text Colors */
.text-blau { color: var(--lako-blau) !important; }
.text-dunkelblau { color: var(--lako-dunkelblau) !important; }
.text-gelb { color: var(--lako-gelb) !important; }
.text-curry { color: var(--lako-curry) !important; }
.text-weiss { color: var(--lako-weiss) !important; }

/* Background Colors */
.bg-blau { background-color: var(--lako-blau) !important; }
.bg-dunkelblau { background-color: var(--lako-dunkelblau) !important; }
.bg-gelb { background-color: var(--lako-gelb) !important; }
.bg-curry { background-color: var(--lako-curry) !important; }
.bg-grau-hell { background-color: var(--lako-grau-hell) !important; }

/* Spacing */
.section-padding {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
}

@media (max-width: 767px) {
    .section-padding {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
}


/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1024px) {
    :root {
        --spacing-xl: 50px;
        --spacing-xxl: 80px;
    }
}

@media (max-width: 767px) {
    :root {
        --spacing-lg: 30px;
        --spacing-xl: 40px;
        --spacing-xxl: 60px;
        --radius-large: 20px;
    }

    .lako-countdown-number {
        font-size: 2rem;
    }
}