/*
 Theme Name:  Breakdance Zero Theme Child
 Theme URI:   https://example.com
 Description: Child-Theme für Breakdance Zero Theme
 Author:      Christian
 Template:    breakdance-zero-theme-master
 Version:     1.0.0
*/

/* =============================================
   GRUNDEINSTELLUNGEN
   ============================================= */

/* Standard */
html {
  font-size: 62.5% !important;        /*  10px */
}

/* Tablet ipad */
@media (max-width: 1180px) {
  html { font-size: 57.25% !important;  }  
}

/* Tablet */
@media (max-width: 1024px) {
  html { font-size: 51.25% !important;  }  /* 9px */
}

/* Mobile */
@media (max-width: 768px) {
  html { font-size: 50% !important; }     /* 8px */
}

/* 4K / UHD */
@media (min-width: 2200px) {
  html { font-size: 68.75% !important;  }  /* 11px */
}

/* 4k Contained */
main {
  max-width: 2560px;
  margin: 0 auto;
}

* {
  box-sizing: border-box;
}

/* Offset für Anchor-Links bei Sticky Header */
[id] {
  scroll-margin-top: 130px;
}

/* =============================================
   Fix: Breakdance Mobile Menu Overflow
   ============================================= */
@media (max-width: 767px) {
  .bde-header-builder,
  .bde-header-builder__container,
  .breakdance-menu-list,
  .breakdance-dropdown-floater,
  .breakdance-dropdown-body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  .breakdance-menu-list {
    width: 100vw !important;
  }
  
  .breakdance-dropdown-floater,
  .breakdance-dropdown-body {
    width: 100% !important;
  }
}

/* =============================================
   HERO SECTION - INTRO
   ============================================= */
.intro-section {
  width: 100%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .intro-section {
    height: 100vh;
  }
}

/* Hintergrund */
.intro-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  z-index: 0;
}

@media (min-width: 1024px) {
  .intro-background {
    height: 100%;
  }
}

.intro-background img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}

.intro-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Overlay mit Gradienten */
.intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0.8) 35%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}

.intro-overlay:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0) 100%);
}

.intro-overlay:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%);
}

/* Content Layout */
.intro-content {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 15vh;
  padding: 1.4rem;
}

@media (min-width: 1024px) {
  .intro-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
    padding: 8rem;
  }
}

/* Info Bereich (links) */
.intro-info {
  height: 100%;
  display: grid;
  align-items: end;
}

@media (min-width: 768px) {
  .intro-info {
    max-width: 80ch;
  }
}

.intro-text {
  margin-top: auto;
}

/* Badges */
.badges {
  margin-top: 2rem;
  max-width: 18ch;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.badges .breakdance {
  background: none;
}

@media (max-width: 1024px) {
  .badges {
    margin-top: 8rem; /* auto */
  }
}

/* Buttons */
.button-container {
  display: flex;
  gap: 1rem;
}

/* =============================================
   PRODUKT CARDS
   ============================================= */
.product-item {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  padding: 1.4rem;
  aspect-ratio: 3.3 / 4.8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

a .product-item h2,
a .product-item p {
	transition: 300ms !important;
}

a:hover .product-item h2 { 
    color: var(--bde-brand-primary-color);
}

/* p vor der vererbten hover-farbe schützen */
a:hover .product-item p {
  color: var(--bde-body-text-color);
}

/*a:hover .product-item p {color: var(--bde-body-text-color);}*/

/* Card Header */
.product-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  height: 40px;
  flex-shrink: 0;
}

.product-badge {
  background: var(--bde-headings-color);
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.product-item .product-item-top .product-brand-logo {
  flex-shrink: 0;
  max-width: 60px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-item .product-item-top .product-brand-logo img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  padding: 0;
}

/* Card Bild */
.product-image {
  height: 55%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 0;
  overflow: hidden;
  flex-shrink: 0;
}

.breakdance .product-item img {
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.5rem;
}

/* Card Content */
.product-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  padding: 1rem;
}

.breakdance .product-item-headline {
  font-size: 2.4rem;
  margin: 0 0 0.8rem 0;
  line-height: 1.3;
  flex-shrink: 0;
  font-weight: 600;
}

.product-item p {
  font-size: 1.5rem;
  line-height: 1.6;
  margin: 0;
  height: calc(1.5rem * 1.6 * 4);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

@media (max-width: 480px) {
  .product-item p {
    font-size: 1.3rem;
    line-height: 1.5;
    height: calc(1.3rem * 1.5 * 4);
  }
  
  .breakdance .product-item-headline {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
}

/* =============================================
   PRODUKT GRID (Hero Section)
   ============================================= */
.product-wrapper {
  --card-width: 280px;
  --grid-gap: 2rem;
  
  width: auto;
  max-width: none;
  margin-top: auto;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: visible;
  padding: 0;
}

/* Tablet/Mobile Anpassungen */
@media (max-width: 1023px) {
  .product-wrapper {
    width: 100%;
    margin-right: 0;
    padding-right: 1.4rem;
  }
  
  .intro-content {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

@media (max-width: 479px) {
  .intro-content {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* Grid Container */
.products-grid {
  display: grid;
  grid-template-columns: var(--card-width);
  gap: var(--grid-gap);
  align-items: end;
  justify-content: end;
  width: 100%;
}

/* Unter 1024px: Grid ausblenden */
@media (max-width: 1023px) {
  .products-grid {
    display: none;
  }
}

/* Default: Nur 1. Card sichtbar */
.products-grid .product-item-link:nth-child(n+2) {
  display: none;
}

/* Ab 1024px: 1 Card */
@media (min-width: 1024px) {
  .product-wrapper {
    --card-width: 300px;
  }
}

/* Ab 1300px: 2 Cards */
@media (min-width: 1300px) {
  .product-wrapper {
    --card-width: 260px;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, var(--card-width));
  }
  
  .products-grid .product-item-link:nth-child(-n+2) {
    display: block;
  }
  
  .products-grid .product-item-link:nth-child(n+3) {
    display: none;
  }
}

@media (min-width: 1400px) {
  .product-wrapper { --card-width: 280px; }
}

@media (min-width: 1500px) {
  .product-wrapper { --card-width: 300px; }
}

@media (min-width: 1600px) {
  .product-wrapper { --card-width: 320px; }
}

@media (min-width: 1700px) {
  .product-wrapper { --card-width: 340px; }
}

@media (min-width: 1800px) {
  .product-wrapper { --card-width: 360px; }
}

@media (min-width: 1920px) {
  .product-wrapper {
    --card-width: 380px;
    --grid-gap: 2.5rem;
  }
}

/* Ab 2100px: 3 Cards */
@media (min-width: 2100px) {
  .product-wrapper {
    --card-width: 300px;
  }
  
  .products-grid {
    grid-template-columns: repeat(3, var(--card-width));
  }
  
  .products-grid .product-item-link:nth-child(-n+3) {
    display: block;
  }
}

@media (min-width: 2300px) {
  .product-wrapper { --card-width: 330px; }
}

@media (min-width: 2560px) {
  .product-wrapper {
    --card-width: 360px;
    --grid-gap: 3rem;
  }
}

@media (min-width: 2800px) {
  .product-wrapper { --card-width: 380px; }
}

@media (min-width: 3000px) {
  .product-wrapper { --card-width: 400px; }
}

/* =============================================
   HEADER
   ============================================= */
@media (max-width: 1520px) {
  a.bde-text-link.header-telephone {
    display: none;
  }
}

/* =============================================
   PRODUKT MEGAMENU
   ============================================= */

/* Desktop */
.ot-megamenu {
  --column-count: 7;
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  gap: 2rem 2.5rem;
  background: #fff;
  width: 100%;
}

.ot-megamenu__column {
  min-width: 0;
}

.ot-megamenu__heading {
  display: block;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 1rem;
  font-size: var(--menu-base-font-size);
  cursor: pointer;
}

.ot-megamenu__heading:hover {
  color: #2bb4d4;
}

.ot-megamenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ot-megamenu__item {
  margin-bottom: 0.6rem;
}

.ot-megamenu__link {
  color: #555;
  text-decoration: none;
  font-size: var(--menu-base-font-size);
  line-height: 1.5;
}

.ot-megamenu__link:hover {
  color: #2bb4d4;
}

ul#menu-109 li.breakdance-dropdown-item a:hover{
    color: #2bb4d4;
	padding-left: 5px;
    transition: 500ms;
}

/* Basis-Zustand vorbereiten */
ul#menu-109 li.ot-megamenu__item a,
.ot-megamenu__link {
    display: block;
    padding-left: 0;
    transition: padding-left 500ms, color 500ms;
}

/* Hover-Effekt */
ul#menu-109 li.ot-megamenu__item a:hover,
.ot-megamenu__link:hover {
    color: #2bb4d4;
    padding-left: 5px;
}



/* Volle Breite für den Dropdown Container 
.bde-header-builder__dropdown-content:has(.ot-megamenu) {
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: none !important;
}*/



/* Mobile Accordion */
@media (max-width: 1023px) {
  .ot-megamenu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent;
  }
  
  .ot-megamenu__column {
    border-bottom: none;
  }
  
  .ot-megamenu__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0px;
    margin-bottom: 0;
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    background: transparent;
  }
  
  .ot-megamenu__heading::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #999;
    border-bottom: 1.5px solid #999;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  
  .ot-megamenu__heading[aria-expanded="true"]::after {
    transform: rotate(-135deg);
  }
  
  .ot-megamenu__list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: transparent;
  }
  
  .ot-megamenu__list[aria-hidden="false"] {
    max-height: 1000px;
  }
  
  .ot-megamenu__item {
    padding: 0;
    margin: 0;
  }
  
  .ot-megamenu__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 12px 40px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    border-bottom: 1px solid #eee;
  }
  
  .ot-megamenu__link:hover {
    background: transparent;
    color: #2bb4d4;
  }
}


/* Kurzmerkale */
ul.rz-kurzmerkmale {
    margin-bottom: 0;
}