/* ==========================================================================
   YST CI-Guide — Youngstar Travel
   @font-face + Custom Color Vars + Component Styles
   Stand: 2026-02-26
   ========================================================================== */

/* --- @font-face: Bebas Neue Pro Book (Fliesstext, weight 400) --- */
@font-face {
    font-family: "Bebas Neue Pro";
    src: url("./fonts/Bebas-Neue-Pro-Book.woff2") format("woff2"),
         url("./fonts/Bebas-Neue-Pro-Book.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- @font-face: Bebas Neue Pro Regular (weight 500, Fallback) --- */
@font-face {
    font-family: "Bebas Neue Pro";
    src: url("./fonts/Bebas-Neue-Pro-Regular.woff2") format("woff2"),
         url("./fonts/Bebas-Neue-Pro-Regular.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* --- @font-face: Bebas Neue Pro Bold (Ueberschriften, weight 700) --- */
@font-face {
    font-family: "Bebas Neue Pro";
    src: url("./fonts/Bebas-Neue-Pro-Bold.woff2") format("woff2"),
         url("./fonts/Bebas-Neue-Pro-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- YST Custom Color Variables --- */
:root {
    --yst-blau: #00b0de;
    --yst-schwarz: #1d1d22;
    --yst-schoenfeld-gelb: #ffe57a;
    --yst-koessen-gruen: #52baa3;
    --yst-tauplitzalm-orange: #f08759;
    --yst-gerlosplatte-lavendel: #b299c7;
    --yst-gradient: linear-gradient(135deg, #6cc04a 0%, #00b0de 100%);
}

/* ==========================================================================
   COMPONENT STYLES
   ========================================================================== */

/* --- CTA Banner "Jede Reise ein Abenteuer" --- */
#brxe-cta001 {
    background: linear-gradient(135deg, #6cc04a 0%, #00b0de 100%) !important;
}

/* --- Kategorien Header Layout --- */
#brxe-kth001 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    padding: 0 0 var(--space-m) 0;
    max-width: var(--content-width, 1280px);
    margin: 0 auto;
}

#brxe-kth003 {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--space-xs);
    align-items: center;
}

/* --- Pill Buttons --- */
.yst-btn-pill {
    border-radius: 25px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    cursor: pointer;
}

.yst-btn-primary {
    background-color: var(--yst-blau) !important;
    color: #fff !important;
    border: none !important;
}
.yst-btn-primary:hover {
    background-color: hsl(195 100% 36%) !important;
}

.yst-btn-outline-black {
    background-color: transparent !important;
    color: var(--yst-schwarz) !important;
    border: 2px solid var(--yst-schwarz) !important;
}
.yst-btn-outline-black:hover {
    background-color: var(--yst-schwarz) !important;
    color: #fff !important;
}

.yst-btn-outline-white {
    background-color: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}
.yst-btn-outline-white:hover {
    background-color: rgba(255,255,255,0.15) !important;
}

.yst-btn-gradient {
    background: var(--yst-gradient) !important;
    color: #fff !important;
    border: none !important;
}
.yst-btn-gradient:hover {
    filter: brightness(1.1);
}

/* --- Cards --- */
.yst-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.yst-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.yst-card__image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.yst-card__content {
    padding: var(--space-m);
}

/* --- Team Portraits --- */
.yst-portrait {
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.yst-portrait__name {
    font-weight: 700;
    text-align: center;
}

.yst-portrait__role {
    font-weight: 400;
    text-align: center;
    color: #666;
}

/* --- Section Variants --- */
.yst-section-gray {
    background-color: #f5f5f5;
}

.yst-cta-banner {
    background: linear-gradient(135deg, #6cc04a 0%, #00b0de 100%);
    color: #fff;
    text-align: center;
}

/* --- Haus-Farben --- */
.yst-haus-koessen { --haus-color: #52baa3; }
.yst-haus-gerlos { --haus-color: #b299c7; }
.yst-haus-schoenfeld { --haus-color: #ffe57a; }
.yst-haus-tauplitz { --haus-color: #f08759; }

/* --- Hero Gradient Overlay (auf Slider, nicht Section) --- */
#brxe-dwyaex {
    position: relative;
}
#brxe-dwyaex::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(108,192,74,0.35) 0%, rgba(0,176,222,0.35) 100%);
    z-index: 5;
    pointer-events: none;
}
.hero__text-wrapper {
    position: relative;
    z-index: 10;
}
.hero__slide-btn {
    position: relative;
    z-index: 10;
}
#brxe-dwyaex .splide__arrows {
    z-index: 10;
}
#brxe-dwyaex .splide__pagination {
    z-index: 10;
}

/* ==========================================================================
   HERO BACKGROUND FIX — Bricks Code-Signature Workaround
   (Bricks blockiert _background.color wenn per DB gesetzt, daher hier per CSS)
   ========================================================================== */

/* --- Haus-Seiten Heroes --- */
#brxe-kblepy { background-color: #52baa3 !important; }  /* Kössen */
#brxe-qfzxue { background-color: #b299c7 !important; }  /* Gerlosplatte */
#brxe-mjzhtw { background-color: #ffe57a !important; }  /* Schönfeld */
#brxe-jmsazn { background-color: #f08759 !important; }  /* Tauplitz */

/* --- Info-Seiten Heroes (YST Blau) --- */
#brxe-xcwdrq,  /* Jugendreisen Sommer */
#brxe-spykbm,  /* Kontakt */
#brxe-idbqyu,  /* FAQs */
#brxe-xfesqp,  /* Infos für Eltern */
#brxe-lctbge,  /* Betreuung & Sicherheit */
#brxe-jahfzn,  /* An- & Abreise */
#brxe-krzwlf,  /* Aufenthalt & Programm */
#brxe-csznpi,  /* Gesundheit & Besonderheiten */
#brxe-luycjk,  /* Reisevorbereitung */
#brxe-qrdxsa,  /* Reiseversicherung */
#brxe-axwpij,  /* Buchung & Verfügbarkeit */
#brxe-ibjnyk,  /* Zahlung, Stornierung & Umbuchung */
#brxe-fahzmo,  /* Arbeiten bei YOUNGSTAR */
#brxe-fxbsea,  /* Neubau Gerlosplatte */
#brxe-xniugc   /* Blog */ {
    background-color: var(--yst-blau) !important;
}

/* --- Jugendreisen Winter Hero (Schwarz) --- */
#brxe-hoszwi { background-color: var(--yst-schwarz) !important; }

/* --- Hero Text weiß (Typography wird von Bricks Code-Signature blockiert) --- */
#brxe-kblepy h1, #brxe-kblepy h2, #brxe-kblepy p, #brxe-kblepy .brxe-text-basic,
#brxe-qfzxue h1, #brxe-qfzxue h2, #brxe-qfzxue p, #brxe-qfzxue .brxe-text-basic,
#brxe-jmsazn h1, #brxe-jmsazn h2, #brxe-jmsazn p, #brxe-jmsazn .brxe-text-basic,
#brxe-xcwdrq h1, #brxe-xcwdrq h2, #brxe-xcwdrq p, #brxe-xcwdrq .brxe-text-basic,
#brxe-hoszwi h1, #brxe-hoszwi h2, #brxe-hoszwi p, #brxe-hoszwi .brxe-text-basic,
#brxe-spykbm h1, #brxe-spykbm h2, #brxe-spykbm p, #brxe-spykbm .brxe-text-basic,
#brxe-idbqyu h1, #brxe-idbqyu h2, #brxe-idbqyu p, #brxe-idbqyu .brxe-text-basic,
#brxe-xfesqp h1, #brxe-xfesqp h2, #brxe-xfesqp p, #brxe-xfesqp .brxe-text-basic,
#brxe-lctbge h1, #brxe-lctbge h2, #brxe-lctbge p, #brxe-lctbge .brxe-text-basic,
#brxe-jahfzn h1, #brxe-jahfzn h2, #brxe-jahfzn p, #brxe-jahfzn .brxe-text-basic,
#brxe-krzwlf h1, #brxe-krzwlf h2, #brxe-krzwlf p, #brxe-krzwlf .brxe-text-basic,
#brxe-csznpi h1, #brxe-csznpi h2, #brxe-csznpi p, #brxe-csznpi .brxe-text-basic,
#brxe-luycjk h1, #brxe-luycjk h2, #brxe-luycjk p, #brxe-luycjk .brxe-text-basic,
#brxe-qrdxsa h1, #brxe-qrdxsa h2, #brxe-qrdxsa p, #brxe-qrdxsa .brxe-text-basic,
#brxe-axwpij h1, #brxe-axwpij h2, #brxe-axwpij p, #brxe-axwpij .brxe-text-basic,
#brxe-ibjnyk h1, #brxe-ibjnyk h2, #brxe-ibjnyk p, #brxe-ibjnyk .brxe-text-basic,
#brxe-fahzmo h1, #brxe-fahzmo h2, #brxe-fahzmo p, #brxe-fahzmo .brxe-text-basic,
#brxe-fxbsea h1, #brxe-fxbsea h2, #brxe-fxbsea p, #brxe-fxbsea .brxe-text-basic,
#brxe-xniugc h1, #brxe-xniugc h2, #brxe-xniugc p, #brxe-xniugc .brxe-text-basic {
    color: #fff !important;
}
/* Schönfeld: dunkler Text auf gelbem Hero */
#brxe-mjzhtw h1, #brxe-mjzhtw h2, #brxe-mjzhtw p, #brxe-mjzhtw .brxe-text-basic {
    color: var(--yst-schwarz) !important;
}

/* --- CTA-Banner Gradient Fix (alle Seiten mit yst_cta_banner class) --- */
.brxe-section[class*="yst_cta_banner"],
.brxe-section.yst_cta_banner {
    background: linear-gradient(135deg, #6cc04a 0%, #00b0de 100%) !important;
    color: #fff !important;
}

/* --- Section Gray Fix --- */
.brxe-section[class*="yst_section_gray"],
.brxe-section.yst_section_gray {
    background-color: #f5f5f5 !important;
}

/* ==========================================================================
   RESPONSIVE — Mobile First Adjustments
   ========================================================================== */

/* Tablet (max-width: 991px) */
@media (max-width: 991px) {
    /* Grid-Layouts auf 2 Spalten */
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Hero-Überschriften verkleinern */
    h1 {
        font-size: 36px !important;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* Kategorien Header stack */
    #brxe-kth001 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-s);
    }
    
    /* Flex-Layouts zu Stack */
    [style*="flex-direction: row"] {
        flex-direction: column !important;
    }
    
    /* Grids auf 1 Spalte */
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Sections weniger Padding */
    .brxe-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Hero-Überschriften */
    h1 {
        font-size: 28px !important;
    }
    h2 {
        font-size: 24px !important;
    }
    
    /* Buttons volle Breite auf Mobile */
    .yst-btn-pill {
        width: 100%;
        justify-content: center;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 24px !important;
    }
    
    .yst-btn-pill {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}