/*
Theme Name: Pretzel Pete Theme
Theme URI: https://www.pretzelpete.de/
Version: 1.1
Author: Oliver Fleck
Author URI: https://www.oliverfleck.de/
template: bb-theme
*/
/* ==========================================================================
   1. GLOBALE SETTINGS & TYPOGRAFIE
   ========================================================================== */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.heading_color_2 { color: #977fb7 !important; }

.gold-font {
    background-image: url("/wp-content/uploads/2025/12/PP_GoldFond_horizontal-scaled.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* ==========================================================================
   2. BUTTONS & NAVIGATION (Global & WPForms)
   ========================================================================== */
/* Flex-Zentrierung für Buttons */
.fl-button .fl-button-text,
.wpforms-submit {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pfeil-Icon nach dem Text */
.fl-button .fl-button-text::after,
.wpforms-submit::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    background-image: url('/wp-content/uploads/2026/01/arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Spezifische Korrekturen für WPForms Absende-Button */
.wpforms-submit {
    margin-left: auto;
    margin-right: auto;
    height: 60px !important;
}

/* ==========================================================================
   3. WPFORMS CHECKBOX & LINKS
   ========================================================================== */
/* Verstecken der originalen Checkbox */
#wpforms-494-field_5_3 {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

/* Custom Kreis-Design */
#wpforms-494-field_5_3 + label {
    color: #312564;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#wpforms-494-field_5_3 + label::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid #312564;
    border-radius: 50%;
    margin-right: 12px;
    transition: background-color 0.2s ease;
}

/* Checkbox Aktiv-Status (Häkchen) */
#wpforms-494-field_5_3:checked + label::before {
    background-color: #312564;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Unterstreichung für Links im Label */
div.wpforms-container-full .wpforms-field-checkbox input ~ label a {
    text-decoration: underline !important;
}

/* ==========================================================================
   4. SNACK-RATING & LEGENDE (Brezeln)
   ========================================================================== */
.snack-rating-container { color: #2D2D64; }

.rating-row, .legend-item {
    display: flex;
    align-items: center;
}

.rating-row { margin-bottom: 12px; }

.brezel, .legend-icon {
    width: 28px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

.brezel { 
    margin-right: 6px; 
    background-image: url('/wp-content/uploads/2026/01/rating2.svg');
}

/* Rating Level Logik */
.level-5 .brezel:nth-child(-n+5),
.level-4 .brezel:nth-child(-n+4),
.level-3 .brezel:nth-child(-n+3),
.level-2 .brezel:nth-child(-n+2),
.level-1 .brezel:nth-child(-n+1),
.active .icon-pretzel { background-image: url('/wp-content/uploads/2026/01/rating1.svg'); }

/* Legenden Icons */
.inactive .icon-pretzel { background-image: url('/wp-content/uploads/2026/01/rating2.svg'); }
.inactive .icon-pieces { background-image: url('/wp-content/uploads/2026/01/pieces-inactive.svg'); }
.inactive .icon-mixes { background-image: url('/wp-content/uploads/2026/01/mixes-inactive.svg'); }
.inactive .icon-bites { background-image: url('/wp-content/uploads/2026/01/bites-inactive.svg'); }
.active .icon-pieces { background-image: url('/wp-content/uploads/2026/01/pieces-active.svg'); }
.active .icon-mixes { background-image: url('/wp-content/uploads/2026/01/mixes-active.svg'); }
.active .icon-bites { background-image: url('/wp-content/uploads/2026/01/bites-active.svg'); }

.rating-label, .legend-label { font-weight: 600; font-size: 15px; color: #2D2D64; }
.rating-legend {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px 30px; 
    padding-top: 20px;
}

@media (max-width: 748px) {
    .legend-item {
        flex: 0 0 calc(50% - 15px); 
    }
}

/* ==========================================================================
   5. SLIDER & PAGER (Beaver Builder / bxSlider)
   ========================================================================== */
/* Slider Pfeile */
.slider-next .fl-content-slider-svg-container svg,
.slider-prev .fl-content-slider-svg-container svg { display: none !important; }

.slider-next .fl-content-slider-svg-container,
.slider-prev .fl-content-slider-svg-container {
    width: 45px; height: 45px;
    background: url('/wp-content/uploads/2026/01/arrow.svg') no-repeat center/40%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #ffffff; border-radius: 50%;
}

.slider-prev .fl-content-slider-svg-container { transform: scaleX(-1); }

/* Pager Punkte (Standard & Page-ID 111) */
.bx-wrapper .bx-pager.bx-default-pager button {
    background: transparent; border: 2px solid #312664;
    text-indent: -9999px; display: block;
    width: 13px; height: 13px; margin: 0 5px; border-radius: 100px;
}

.bx-wrapper .bx-pager.bx-default-pager a.active, 
.bx-wrapper .bx-pager.bx-default-pager button.active { background: #312664 !important; }

body.page-id-111 .bx-wrapper .bx-pager.bx-default-pager button { border-color: #fff; }
body.page-id-111 .bx-wrapper .bx-pager.bx-default-pager a.active,
body.page-id-111 .bx-wrapper .bx-pager.bx-default-pager button.active { background: #fff !important; }

.fl-slide-foreground { position: absolute; bottom: 0 !important; width: 100%; max-width: 100% !important; }
.bx-wrapper .bx-pager { z-index: 99; }

/* ==========================================================================
   6. MENÜ & LAYOUT EFFEKTE
   ========================================================================== */
/* Grundstyling für den Link und den Container */
#menu-hauptmenue li.menu-item a,
#menu-hauptmenue li.menu-item .fl-has-submenu-container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: white;
    transition: color 0.3s;
    text-decoration: none;
}

#menu-hauptmenue li.menu-item a::after {
    content: "" !important;
    display: inline-block !important;
    width: 20px;
    height: 20px;
    margin-left: 15px;
    background: url('/wp-content/uploads/2026/01/arrow.svg') no-repeat center/contain !important;
    filter: brightness(0) invert(1) !important;
    transition: all 0.3s ease-in-out !important;
    flex-shrink: 0;
}

#menu-hauptmenue li.menu-item a:hover { 
    color: #d7be6b !important; 
}

#menu-hauptmenue li.menu-item a:hover::after { 
    transform: translateX(8px) !important; 
    filter: none !important;
}

#menu-hauptmenue .fl-menu-toggle {
    order: 3; 
    margin-left: 5px;
}

#menu-hauptmenue .sub-menu li.menu-item a::after {
    width: 15px;
    height: 15px;
}
/* Spalten-Hover Effekt */
.clickable-col .fl-col-content { transition: all 0.4s ease-in-out; }
.clickable-col .fl-col-content:hover { transform: translateY(-8px) !important; }

/* Produktkategorie-Navigation */
.product-category-navigation > .fl-module { transition: all 0.4s ease-in-out; }
.product-category-navigation > .fl-module:hover { transform: translateY(-8px) !important; }
.product-category-navigation > .fl-module { background-size: 450px; }



/* Absolute Positionierung */
.photo_absolute_left_bottom { position: absolute; bottom: 0; left: 0; }
.photo_absolute_right_top { position: absolute; top: 0; right: 0; }

/* ==========================================================================
   7. NÄHRWERTTABELLE
   ========================================================================== */
.naehrwerte { width: 100%; max-width: 450px; border-collapse: collapse; color: #2e2e6e; }
.naehrwerte td { padding: 10px 0; border-bottom: 1px solid #2e2e6e; vertical-align: top; }
.naehrwerte tr:first-child td { border-bottom: 3px solid #2e2e6e; padding-bottom: 12px; }
.naehrwerte p { margin: 0; line-height: 1.4; }
.naehrwerte td:last-child p { text-align: right; font-weight: bold; }
.naehrwerte .indent { padding-left: 15px; }

/* ==========================================================================
   7. Pretzel Container
   ========================================================================== */
/* Der Hauptcontainer über die ganze Seite */
.pretzel-parallax-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1; /* Erhöhe auf 99, wenn sie GANZ oben liegen sollen */
}

.floating-pretzel {
    position: absolute;
    width: 60px;
    height: auto;
    will-change: transform; /* Optimiert die Performance für Animationen */
    transition: transform 0.1s linear; /* Macht die Parallax-Bewegung geschmeidig */
	transition: transform 0.1s linear, top 0.5s cubic-bezier(0,.49,.33,1); /* Um Elemente mit Anpassung der Eigenschaft top wegkicken zu können*/
    pointer-events: auto;

}

.zindex100 {z-index:100 !important;}

/* ==========================================================================
   7. Druckeinstellungen
   ========================================================================== */

@media print {
    header, 
    footer, 
    .fl-builder-content-header, 
    .fl-builder-content-footer,
    .pretzel-parallax-container,
    .print-button {
        display: none !important;
    }

    a[href]:after {
        content: none !important;
    }

    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        margin: 1cm;
    }
}



/* ==========================================================================
   8. Videodarstellung für Unsere Geschichte
   ========================================================================== */


body.page-id-113 .fl-row .fl-video{
	transform: rotate(5deg) scale(0.9);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 6px 14px 20px 1px #00000044;
}

body.page-id-113 .fl-row:nth-of-type(even) .fl-video{
	transform: rotate(-5deg) scale(0.9);
}



/* ==========================================================================
   9. Schatten hinter Schrift in Headerbildern
   ========================================================================== */

.fl-slide:has(.fl-slide-title) .fl-slide-bg-photo::after {
background: linear-gradient(180deg,rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
  content: '';
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
}


/* ==========================================================================
   10. Produkt-Seite
   ========================================================================== */


.shoplink {
  align-items: flex-end;
  background: #ffffff;
}

@media (max-width: 768px) {

.fl-col-group:has(.produktdiashow), .produktdiashow .fl-module-slideshow {
    background-color: #ffffff;
}
	
.fl-col-group:has(.produktdiashow) {
  overflow: hidden;
}
	
.produktdiashow, .produktdiashow div:not(.fl-slideshow-nav) {
  max-width: 100%;
  width: 100%;
}
  
.produktdiashow{
  padding-top: 100px;
  padding-bottom: 100px;
}
  
.produktdiashow .fl-slideshow-frame-content{
  transform: scale(1.5);
  }

.produktdiashow + .fl-col .fl-col-content {
  border-top-right-radius: unset ;
}
	
div.fl-col.produktdiashow > div {
  background-color: #ffffff;
}

}