/* Platz, damit Inhalte nicht hinter dem fixen Footer liegen */
body.produkte-page .produkte{ padding-bottom: 1px; }

/* ===========================
   PRODUKTE (MOBILE ≤1250px)
   HEADER (nur CSS)
   =========================== */

/* Wegweiser – Position & Grundstil */
.produkte-page .produkte-wegweiser{
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 9000;                  /* unter Header (der hat 9999), über Inhalt */
  backdrop-filter: blur(5px) saturate(120%);
  -webkit-backdrop-filter: blur(5px) saturate(120%);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(209,182,98,0.55);
  border-radius: 12px;
  padding: 8px 10px;
  overflow: auto;
}

body.produkte-page {
  font-family: "Lato", sans-serif;
}


.produkte-page .produkte-wegweiser ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.produkte-page .produkte-wegweiser a{
  display: block;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  line-height:0.9;
}
.produkte-page .produkte-wegweiser a:hover,
.produkte-page .produkte-wegweiser a:focus{
  background: rgba(209,182,98,0.18);
  outline: none;
}

/* Aktive Kategorie */
.produkte-page .produkte-wegweiser a.is-active{
  background: rgba(209,182,98,0.28);
  border: 1px solid rgba(209,182,98,0.55);
}

/* Mobile: unten als „Dock“ damit der Daumen rankommt */
@media (max-width: 1250px){
  .produkte-page .produkte-wegweiser{
    left: 0; right: 0; bottom: 0; top: auto;
    margin: 0;
    border-radius: 14px 14px 0 0;
    padding: 10px;
  }
  
  .produkte-page .produkte-wegweiser ul{
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 5px;
  }
}

/* Platz unten frei halten, falls am Handy fix am Rand */
@media (max-width: 1250px){
  .produkte-page .produkte{
    padding-bottom: 140px; /* ggf. feinjustieren */
  }
}

/* PRODUKTE: Wegweiser immer oben horizontal (alle Breakpoints) */
.produkte-page .produkte-wegweiser{
  position: fixed !important;
  z-index: 9000 !important;
  padding: 8px 10px !important;
  backdrop-filter: blur(5px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(120%) !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(209,182,98,0.55) !important;
  border-radius: 0 0 12px 12px !important;
  overflow: hidden !important;
}

/* Inhalt im Wegweiser: horizontal scrollende Tabs */
.produkte-page .produkte-wegweiser ul{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 6px 4px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
}
.produkte-page .produkte-wegweiser a{
  display: block !important;
  padding: 8px 10px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}
.produkte-page .produkte-wegweiser a:hover,
.produkte-page .produkte-wegweiser a:focus{
  background: rgba(209,182,98,0.18) !important;
  outline: none !important;
}
.produkte-page .produkte-wegweiser a.is-active{
  background: rgba(209, 181, 98, 0.555) !important;
  border: 1px solid rgba(209,182,98,0.55) !important;
}

/* --- Positionierung oben: Desktop vs. Mobil --- */

/* Desktop (>=1251px): oben, von der Headerkante bis zum rechten Rand */
@media (min-width: 1251px){
  .produkte-page .produkte-wegweiser{
    top: 16px !important;
    left: calc(var(--header-w, 250px) + 12px) !important;
    right: 12px !important;
  }
  /* Platz für den Wegweiser schaffen */
  .produkte-page .horizontal-wrapper,
  .produkte-page main.produkte{
    padding-top: 74px !important; /* Höhe Wegweiser + Luft (bei Bedarf feinjustieren) */
  }
}

/* Mobil/Tablet (<=1250px): direkt unter dem mobilen Header */
@media (max-width: 1250px){
  .produkte-page .produkte-wegweiser{
    top: calc(100px + env(safe-area-inset-top, 0px)) !important; /* dein mobiler Header = 100px */
    left: 0 !important; right: 0 !important;
  }
  /* bei sehr schmal (Header = 140px) */
  @media (max-width: 700px){
    .produkte-page .produkte-wegweiser{
      top: calc(140px + env(safe-area-inset-top, 0px)) !important;
    }
  }
  /* Inhalt nach unten schieben damit nichts überlappt */
  .produkte-page .horizontal-wrapper,
  .produkte-page main.produkte{
    padding-top: 160px !important; /* Header (100) + Wegweiser (~60) – bei 700px: */
  }
  @media (max-width: 700px){
    .produkte-page .horizontal-wrapper,
    .produkte-page main.produkte{
      padding-top: 200px !important; /* Header 140 + Wegweiser ~60 */
    }
  }
}
/* PRODUKTE: Tab-Leiste mit Zeilenumbruch */
.produkte-page .produkte-wegweiser ul{
  display: flex !important;
  flex-wrap: wrap !important;         /* <-- Mehrzeilig erlauben */
  gap: 8px 10px !important;           /* row-gap / column-gap */
  margin: 0 !important;
  padding: 6px 6px 10px !important;
  overflow-x: hidden !important;       /* keine horizontale Scrollleiste */
  overflow-y: auto !important;         /* falls viele Zeilen, vertikal scrollen */
 }

.produkte-page .produkte-wegweiser a{
  white-space: normal !important;      /* Text darf umbrechen */
}

/* Platz nach oben etwas großzügiger (falls 2 Zeilen entstehen) */
@media (min-width: 1251px){
  .produkte-page .horizontal-wrapper,
  .produkte-page main.produkte{
    padding-top: 110px !important;     /* vorher ~74px */
  }
}
@media (max-width: 1250px){
  .produkte-page .horizontal-wrapper,
  .produkte-page main.produkte{
    padding-top: 200px !important;     /* Header 100 + 2 Zeilen Tabs (~100) */
  }
}
@media (max-width: 700px){
  .produkte-page .horizontal-wrapper,
  .produkte-page main.produkte{
    padding-top: 240px !important;     /* Header 140 + 2 Zeilen Tabs (~100) */
  }
}

/* HARD FIX: Wegweiser-Leiste = nur so hoch wie die Tabs */
.produkte-page .produkte-wegweiser{
  position: fixed !important;
  /* MOBIL: direkt unter deinem mobilen Header (100px/140px reguliert JS) */
  top: calc(100px + env(safe-area-inset-top, 0px)) !important;
  left: 0 !important; right: 0 !important;

  /* WICHTIG: NICHT nach unten ziehen */
  bottom: auto !important;

  /* Keine erzwungene Höhe */
  height: auto !important;
  max-height: none !important;

  /* Keine Zusatz-Luft */
  padding: 0 !important;
  margin: 0 !important;

  display: block !important;
  overflow: visible !important;
  border-radius: 0 0 8px 8px !important;
}

/* DESKTOP-Position */
@media (min-width:1251px){
  .produkte-page .produkte-wegweiser{
    top: 16px !important;
    left: calc(var(--header-w, 250px) + 12px) !important;
    right: 12px !important;
  }
}

/* UL: mehrzeilig ohne Strecken – Höhe kommt NUR von den Tabs */
.produkte-page .produkte-wegweiser ul{
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;   /* kein Stretch */
  align-items: flex-start !important;
  gap: 6px 8px !important;

  /* Mini-Optik, aber kein Aufblasen */
  padding: 2px 6px 2px !important;
  margin: 0 !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.produkte-page .produkte-wegweiser li{ margin: 0 !important; }
.produkte-page .produkte-wegweiser a{
  margin: 0 !important;
  line-height: 1.1 !important; /* kompakt, bestimmt die Zeilenhöhe */
}

/* PRODUKTE · Tabs kompakter: weniger Zeilenabstand */
.produkte-page .produkte-wegweiser a{
  line-height: 1.05 !important;  /* zuvor ~1.15 */
  padding-block: 5px !important; /* vertikal schlanker, Breite bleibt */
}

/* mobil noch einen Tick enger */
@media (max-width: 1250px){
  .produkte-page .produkte-wegweiser a{
    line-height: 1.02 !important;
    padding-block: 4px !important;
  }
}

/* ultra-eng (≤700px) minimal straffer */
@media (max-width: 700px){
  .produkte-page .produkte-wegweiser a{
    line-height: 1.0 !important;
    padding-block: 3px !important;
  }
}

/* PRODUKTE: Wegweiser exakt unter den Header positionieren */
@media (max-width:1250px){
  .produkte-page .produkte-wegweiser{
    top: calc(var(--wegweiser-top, 100px) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important; right: 0 !important;
    position: fixed !important;
  }
}

/* bis hier gut */ 

@media (max-width:1250px){
  .produkte-wegweiser.collapsed ul{ display:none !important; }
  .produkte-wegweiser .wegweiser-toggle{
    display:inline-block; padding:6px 10px; border-radius:8px; margin-right:6px;
    background: rgba(255, 255, 255, 0.15); color: #fff; font-weight:700;
  }
}

@media (max-width: 1250px) {
  /* Footer-Inhalt enger anordnen */
  body.produkte-page footer.site-footer .footer-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  /* Alle Texte kompakter */
  body.produkte-page footer.site-footer * {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* SVG-Icons kleiner */
  body.produkte-page footer.site-footer svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Socials & Zahlungen in eine Zeile pressen */
  body.produkte-page footer.site-footer .footer-item,
  body.produkte-page footer.site-footer .footer-links,
  body.produkte-page footer.site-footer .footer-payments {
    flex: 0 1 auto !important;
    white-space: nowrap !important;
  }

  /* Kein Zeilenumbruch im Footer */
  body.produkte-page footer.site-footer .footer-row,
  body.produkte-page footer.site-footer .footer-copy {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }
}
@media (max-width: 1250px) {
  /* Footer-Inhalt automatisch skalieren, statt abzuschneiden oder zu scrollen */
  body.produkte-page footer.site-footer .footer-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    transform-origin: left center !important;
    scale: clamp(0.7, 100vw / 420, 1) !important; /* skaliert auf schmalen Screens automatisch */
  }

  /* Schrift und Icons bleiben proportional */
  body.produkte-page footer.site-footer * {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }

  body.produkte-page footer.site-footer svg {
    width: 14px !important;
    height: 14px !important;
  }
}
@media (max-width: 1250px) {
  body.produkte-page footer.site-footer {
    width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  body.produkte-page footer.site-footer .footer-inner {
    width: max-content !important;
    min-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }
}
@media (max-width: 1250px) {
  body.produkte-page footer.site-footer {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.produkte-page footer.site-footer .footer-inner {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.produkte-page footer.site-footer * {
    overflow: visible !important;
    white-space: normal !important;
  }
}
@media (max-width: 1250px) {
  body.produkte-page footer.site-footer .footer-row--bottom {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.produkte-page footer.site-footer .fr-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    text-align: center !important;
  }

  body.produkte-page footer.site-footer .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 6px !important;
  }

  body.produkte-page footer.site-footer .footer-links a {
    white-space: normal !important;
    margin: 0 4px !important;
  }
}

@media (max-width: 1250px) {
  /* Zahlungen umbrechen statt abschneiden */
  body.produkte-page footer.site-footer .footer-payments {
    display: flex !important;
    flex-wrap: wrap !important;      /* ← erlaubt Umbruch */
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    overflow: visible !important;
    text-align: center !important;
  }

  body.produkte-page footer.site-footer .footer-payments .badge {
    margin: 2px 4px !important;
    flex: 0 1 auto !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 1250px) {
  /* Rechter Footer-Rand: etwas mehr Luft */
  body.produkte-page footer.site-footer .fr-bottom {
    padding-right: 32px !important;  /* Abstand vom rechten Rand */
    box-sizing: border-box !important;
  }

  /* Falls einzelne Elemente am Rand kleben */
  body.produkte-page footer.site-footer .footer-links,
  body.produkte-page footer.site-footer .footer-payments,
  body.produkte-page footer.site-footer .footer-copy {
    margin-right: 6px !important;
  }
}
body.produkte-page {
  padding-bottom: 0 !important;
}

/* bis hier gut */ 

@media (max-width: 1250px) {
  .produkte-wegweiser {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .produkte-wegweiser .wegweiser-toggle {
    all: unset !important;                /* entfernt Button-Optik */
    cursor: pointer !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.9) !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .produkte-wegweiser .wegweiser-toggle::after {
    font-size: 0.9em !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
  }

  .produkte-wegweiser .wegweiser-toggle:hover,
  .produkte-wegweiser .wegweiser-toggle:focus {
    background: rgba(255,255,255,0.1) !important;
    outline: none !important;
  }
}
/* Gut so */ 

@media (max-width: 1250px) {
  /* Wenn collapsed: nur der Titel sichtbar */
  .produkte-wegweiser.collapsed ul {
    display: none !important;
  }

  /* Vertikal aufgeklappt: Glas wie im Header-Menü */
  .produkte-wegweiser ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    background: rgba(253, 188, 188, 0.2) !important; /* gleiches Glas-Level wie Header */
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
    border-radius: 0 0 12px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
  }

  .produkte-wegweiser ul li {
    width: 100% !important;
  }

  .produkte-wegweiser ul a {
    display: block !important;
    width: 100% !important;
    padding: 9px 12px !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.05) !important;
    transition: background 0.3s ease !important;
  }

  .produkte-wegweiser ul a:hover,
  .produkte-wegweiser ul a:focus {
    background: rgba(255,255,255,0.18) !important;
    outline: none !important;
  }

  /* Toggle: "Kategorien ▾" bleibt oben */
  .produkte-wegweiser .wegweiser-toggle {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.95) !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
  }

  .produkte-wegweiser .wegweiser-toggle::after {
    font-size: 0.9em !important;
    opacity: 0.8 !important;
    transition: transform 0.3s ease !important;
  }

  .produkte-wegweiser.open .wegweiser-toggle::after {
    transform: rotate(180deg) !important;
  }
}

@media (max-width: 1250px) {
  .produkte-wegweiser ul {
    align-items: flex-start !important;   /* Tabs linksbündig */
  }

  .produkte-wegweiser ul a {
    text-align: left !important;          /* Text linksbündig */
    padding-left: 18px !important;        /* sanfter Einzug */
  }

.produkte-page .produkte-wegweiser a.is-active {
  background: rgba(209,182,98,0.28) !important;
  border: 1px solid rgba(209,182,98,0.55) !important;
  box-shadow: 0 0 8px rgba(209,182,98,0.45) !important;
}
.produkte-page .produkte-wegweiser {
  display: flex !important;
  align-items: center !important;
  gap: 0px !important;
}

.produkte-page .wegweiser-toggle {
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1rem !important;
  letter-spacing: 0.5px !important;
}

.produkte-page .wegweiser-current {
  color: rgba(209,182,98,0.85) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}}



/* Produkte – Wegweiser: ausgeklappte Tabs links unter "Kategorien" ausrichten */
@media (max-width:1250px){
  .produkte-page .produkte-wegweiser {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .produkte-page .produkte-wegweiser ul {
    width: 100% !important;
    text-align: left !important;
    margin-top: 6px !important;
    padding-left: 14px !important; /* leichter Einzug */
    justify-content: flex-start !important;
  }

  .produkte-page .produkte-wegweiser li {
    text-align: left !important;
  }

  .produkte-page .produkte-wegweiser a {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

@media (max-width:1250px){

/* Aktuelles Panel optisch unabhängig positionieren */
.produkte-page .produkte-wegweiser {
  position: relative !important; /* Anker für absolute Platzierung */
}

.produkte-page .wegweiser-current {
  position: absolute !important;
  right: 14px !important;
  top: 8px !important;
  color: rgba(209,182,98,0.85) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  pointer-events: none !important; /* klickt nicht in andere Elemente */
}

/* Fix: Wegweiser bleibt beim Scrollen sichtbar + aktuelles Panel unabhängig positioniert */
.produkte-page .produkte-wegweiser {
  position: fixed !important;
  top: calc(140px + env(safe-area-inset-top,0px)) !important; /* bleibt unter deinem Header */
  left: 0 !important;
  right: 0 !important;
  z-index: 9000 !important;
}

.produkte-page .wegweiser-current {
  position: absolute !important;
  right: 12px !important;
  top: 11px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  pointer-events: none !important;
}}


/* Produkte – Tabs fächern sanft auf, Leiste klappt korrekt */
@media (max-width:1250px){
  /* Ul: aus- und einklappen */
  .produkte-page .produkte-wegweiser ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    transition: max-height .6s ease, opacity .4s ease, transform .45s ease !important;
  }

  /* geöffnet */
  .produkte-page .produkte-wegweiser:not(.collapsed) ul {
    max-height: 500px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Tabs einzeln auffächern */
  .produkte-page .produkte-wegweiser li {
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    transition: opacity .35s ease, transform .45s ease !important;
  }

  /* Offen: fächern von oben nach unten */
  .produkte-page .produkte-wegweiser:not(.collapsed) li {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}


/* Fix: Tabs fächern garantiert von oben nach unten (eine Spalte, kein Wrap) */
@media (max-width:1250px){
  .produkte-page .produkte-wegweiser ul {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;     /* <-- verhindert Spaltenaufteilung */
    gap: 4px !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    transition: max-height .6s ease, opacity .4s ease, transform .45s ease !important;
  }

  .produkte-page .produkte-wegweiser:not(.collapsed) ul {
    max-height: 700px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .produkte-page .produkte-wegweiser li {
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    transition: opacity .35s ease, transform .45s ease !important;
  }

  .produkte-page .produkte-wegweiser:not(.collapsed) li {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Staffelung top-down */
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(1){ transition-delay: .05s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(2){ transition-delay: .10s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(3){ transition-delay: .15s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(4){ transition-delay: .20s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(5){ transition-delay: .25s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(6){ transition-delay: .30s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(7){ transition-delay: .35s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(8){ transition-delay: .40s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(9){ transition-delay: .45s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(10){ transition-delay: .50s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(11){ transition-delay: .55s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(12){ transition-delay: .60s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(13){ transition-delay: .65s !important; }
  .produkte-page .produkte-wegweiser:not(.collapsed) li:nth-child(14){ transition-delay: .70s !important; }
}


/* Fix: Eingeklappte Tableiste komplett unsichtbar und flach */
@media (max-width:1250px){
  .produkte-page .produkte-wegweiser.collapsed ul {
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border: none !important;
  }

  /* kleine optische Ruhe im Wechsel */
  .produkte-page .produkte-wegweiser ul {
    transition: max-height .5s ease, opacity .3s ease, transform .4s ease !important;
  }
}

/* Fix: Tableiste exakt unter dem Header positionieren */
@media (max-width:1250px){
  .produkte-page .produkte-wegweiser {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9000 !important;
    top: calc(100px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* Bei sehr schmal (<=700px): Header ist 140px hoch */
@media (max-width:500px){
  .produkte-page .produkte-wegweiser {
    top: calc(140px + env(safe-area-inset-top, 0px)) !important;
  }
}


/* Desktop: "Kategorien"-Button ausblenden */
@media (min-width:1251px){
  .produkte-page .produkte-wegweiser .wegweiser-toggle{
    display: none !important;
  }
}

/* Desktop: aktuelles Panel (· Moisture etc.) ausblenden */
@media (min-width:1251px){
  .produkte-page .wegweiser-current{
    display: none !important;
  }
}


/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* Tablet-Fix: Footer darf nicht mehr abgeschnitten werden */
@media (min-width:701px) and (max-width:1250px){
  body.produkte-page .horizontal-wrapper,
  body.produkte-page main.produkte{
    overflow: visible !important;      /* verhindert Abschneiden nach unten */
    height: auto !important;
    min-height: 100vh !important;      /* nutzt volle Bildschirmhöhe */
  }

  body.produkte-page footer.site-footer{
    position: relative !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 82px !important;
    margin-top: 4vh !important;        /* Abstand zum Inhalt, damit nichts klebt */
    z-index: 2 !important;
    overflow: visible !important;
  }
}
/* Bis hier gut */ 

/* ================= Panel 1: Color Care ================= */
.panel-color {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  height: 100vh;
  padding-left: calc(var(--header-w, 250px) + 2vw);
}

/* Einheitlicher Glasstil */
.panel-color .glassbox {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(209, 182, 98, 0.85);
  border-radius: 22px;
  backdrop-filter: blur(5px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(110%) !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Große Bühne links */
.colorcare-stage {
  width: 55%;
  height: 70vh;
}
.colorcare-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Produktbox rechts */
.colorcare-product {
  width: 25%;
  height: 70vh;
  flex-direction: column;
  text-align: center;
  padding: 1.5rem;
}
.colorcare-product img {
  width: auto;
  height: 60%;
  object-fit: contain;
  margin-bottom: 1rem;
}
.colorcare-product .product-text h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}
.colorcare-product .product-text p {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  line-height: 1.4;
}

@media (min-width:1251px){
  .panel-color {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: calc(var(--header-w, 250px) + 5vw);
    gap: 1vw !important;
  }

  .panel-color .glassbox {
    position: relative;
    background: rgba(255,255,255,0.08);
    border: 3px solid rgba(209,182,98,0.85);
    border-radius: 22px;
    backdrop-filter: blur(5px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(110%) !important;
    box-shadow: 0 0 25px rgba(0,0,0,0.25);
    overflow: hidden;
    transform: translateZ(0); /* verhindert Repaint-Versatz */
  }

  .colorcare-stage {
    width: 48%;
    height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .colorcare-product {
    width: 15%;
    height: 60vh;
    margin-right: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* Panel-1: Flex vollständig deaktivieren → kein Springen mehr */
.panel-color {
  display: block !important;
  position: relative !important;
  height: 100vh !important;
}

/* Bühne links */
.panel-color .colorcare-stage {
  position: absolute !important;
  top: 50% !important;
  left: calc(var(--header-w, 250px) + 3.3vw) !important;
  transform: translateY(-50%) !important;
  width: 41% !important;
  height: 65vh !important;
}

/* Produkt rechts */
.panel-color .colorcare-product {
  position: absolute !important;
  top: 50% !important;
  left: calc(var(--header-w, 250px) + 0.01vw + 45.5% ) !important;
  transform: translateY(-50%) !important;
  width: 17% !important;
  height: 60vh !important;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

.panel-color {
  min-height: 100vh !important;
  height: 100vh !important;
  position: relative !important;
  overflow: hidden !important;
}
/* verhindert, dass padding-top Panels nach unten schiebt */
.produkte-page main.produkte {
  padding-top: 0 !important;
}

.produkte-page .horizontal-wrapper {
  padding-top: 0 !important;
}



/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Desktop: Produkte horizontal scrollen lassen */
@media (min-width:1251px){
  .horizontal-wrapper{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
  }

  .produkte{
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .panel{
    width: 100vw !important;
    height: 100vh !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }
}
/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Pfeile fix innen – ohne die Glasbox zu verschieben */
.ccp-arrow{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 2rem !important;
  color: #fff !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 5 !important;
  user-select: none !important;
}
.ccp-left{ left: 12px !important; }
.ccp-right{ right: 12px !important; }

/* Slider-Inhalt zentriert, Box bleibt identisch */
.ccp-slide-wrapper{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.ccp-slide img{
  width: auto !important;
  height: 60% !important;
  object-fit: contain !important;
  margin-bottom: 1rem !important;
}

.ccp-slide h3{
  color: #fff !important;
  font-size: 1.3rem !important;
  margin-bottom: .4rem !important;
}

.ccp-slide p{
  color: rgba(255,255,255,0.85) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* Nur ein Slide sichtbar */
.ccp-slide{ display: none !important; }
.ccp-slide.active{ display: flex !important; flex-direction: column !important; }

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Produkt-Glasbox: Innenlayout bleibt, Bild passt sich in der Höhe an */
.colorcare-product{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Slider-Innenleben füllt die Glasbox komplett */
.ccp-slide-wrapper{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ccp-slide{
  width: 100% !important;
  height: 100% !important;
}

/* Bild passt sich der verfügbaren Höhe an, ohne die Box zu sprengen */
.ccp-slide img{
  max-height: 50% !important;   /* Höhe der Glasbox, bei Bedarf Zahl ändern */
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: 1rem !important;
  flex: 0 0 auto !important;
}

/* Text block bleibt darunter, ohne Höhe zu verändern */
.ccp-slide .product-text{
  flex: 0 0 auto !important;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Produkttexte besser lesbar – ohne die Glasbox zu verschieben */


/* Titel kräftiger & größer */
.colorcare-product .product-text h3,
.ccp-slide .product-text h3{
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  color: #fff !important;
  margin-bottom: 0.35rem !important;
}

/* Fließtext etwas größer + mehr Kontrast */
.colorcare-product .product-text p,
.ccp-slide .product-text p{
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.94) !important;
}

/* Leichte Kontur für besseren Kontrast vor hellem Motiv */
.colorcare-product .product-text,
.ccp-slide .product-text{
  text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* PANEL 1 COLOR FERTIG */ 

/* TEMPLATE PANEL (Panel 2–14) */
.panel {
  position: relative !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: block !important;
}

@media (max-width: 1250px) {
.panel {
  padding-bottom: 100px;
}
}


/* STAGE LINKS */
.panel .stage-box {
  position: absolute !important;
  top: 50% !important;
  left: calc(var(--header-w, 250px) + 2vw) !important;
  transform: translateY(-50%) !important;
  width: 50% !important;
  height: 65vh !important;
}

/* PRODUKT RECHTS */
.panel .product-box {
  position: absolute !important;
  top: 50% !important;
  left: calc(var(--header-w, 250px) + 49% + 5vw) !important;
  transform: translateY(-50%) !important;
  width: 20% !important;
  height: 60vh !important;
  display: flex !important;

  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1.5rem !important;
}

/* Einheitliche Glasbox – identisch wie Panel 1 */
.panel .glassbox {
  background: rgba(255,255,255,0.08);
  border: 3px solid rgba(209,182,98,0.85);
  border-radius: 22px;
  backdrop-filter: blur(5px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(110%) !important;
  box-shadow: 0 0 25px rgba(0,0,0,0.25);
  overflow: hidden;
}

/* Bild */
.stage-box img,
.product-box img {
  width: 120% !important;
  height: 100% !important;
  object-fit: fill !important;
}

.product-box img {
  width: 100% !important;
  height: 100% !important;
  max-height: 50% !important;
  object-fit: contain !important;
}

/* Pfeile */
.p-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 2rem !important;
  color: #fff !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 5 !important;
}
.p-left { left: 12px !important; }
.p-right { right: 12px !important; }

/* Product Slider */
.p-slide-wrapper {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.p-slide {
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.p-slide.active { display: flex !important; }

/* Text */
.p-slide h3 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 0.35rem !important;
}
.p-slide p {
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.94) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Stage-Bild komplett in die Glasbox skalieren */
.stage-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;   /* oder 'contain', wenn nichts abgeschnitten werden soll */
}

/* Bis hier gut - 14 Panels ausgefüllt mit Bildern und Texten */ 

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

.info-trigger {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(209,182,98,0.85);
  color: #ffffff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  z-index: 15;
  font-size: 1rem;
}

/* Popup-Box */
.info-popup {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: auto;
  padding: 1.2rem;
  display: none;
  overflow-y: auto;
  border-radius: 20px;
  z-index: 20;
}

/* Jede Info-Zeile */
.info-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}



.info-item p {
  color: white;
  font-size: 1.2rem;
  line-height: 1.45;
  margin: 0;
}

/* X-Button */
.info-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 1.9rem;
  color: white;
  cursor: pointer;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.info-item img {
  width: 30vw;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.info-item .info-text h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  margin-top: 8px;
}

.info-item .info-text p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.9);
}


/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Popup deutlich weiter nach links in der Titelbild-Glasbox */
.panel-color .info-popup{
  position: absolute !important;
  top: 50% !important;
  left: 15% !important;              /* → viel weiter links */
  transform: translateY(-50%) !important;

  max-width: 70% !important;
  padding: 1rem 1.4rem !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Bild in der Popup-Box vertikal mittig ausrichten */
.panel-color .info-popup .info-item{
  display: flex !important;
  align-items: center !important;   /* vertikal zentrieren */
  gap: 1rem !important;
}

.panel-color .info-popup .info-item img{
  max-height: 70% !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Standard: beim Laden unsichtbar, aber an gleicher Stelle */
.panel-color .info-popup{
  display: block !important;          /* NICHT mehr none */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Beim Öffnen (z.B. per .classList.add('is-open')) sichtbar */
.panel-color .info-popup.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */
.info-popup{
  display: none !important;
}

.info-popup.is-open{
  display: block !important;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* GLOBALER Popup-Standard für ALLE Panels */
.panel .info-popup{
  position: absolute !important;
  top: 50% !important;
  left: 15% !important;
  transform: translateY(-50%) !important;
  overflow: visible !important; 
  width: auto !important;
  max-width: 70% !important;
  max-height: none !important;
  padding: 1.2rem !important;

  border-radius: 20px !important;
  overflow-y: auto !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  z-index: 20 !important;
}

/* Sichtbar wenn geöffnet */
.panel .info-popup.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Einheitliche Info-Item-Maße */
.panel .info-popup .info-item{
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.panel .info-popup .info-item img{
  width: 130px !important;
  height: 130px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* Popup bekommt echte Höhe ohne künstliches Hoch-/Runterziehen */
.panel .info-popup{
  top: auto !important;
  bottom: 30% !important;    /* sitzt perfekt visuell */
  transform: none !important;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Glasoptik für alle Info-Popups einheitlich & heller */
.panel .info-popup{
  background: rgba(209,182,98,0.25) !important;
  border: 1px solid rgba(209, 181, 98, 0.842) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}

/* bis hier gut. Pop ups mit Wirkkomplexen sind eingefügt. */

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */
/* Pills unten in der Titelbild-Glasbox (für ALLE Panels wiederverwendbar) */

.panel .stage-pills{
  position: absolute !important;
  bottom: 14px !important;
  left: 18px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: 80% !important;
  z-index: 12 !important;
}

.panel .stage-pill{
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  background: rgba(209,182,98,0.85) !important;
  color: #fff !important;
  white-space: nowrap !important;
}

/* Bis hier gut - Inhaltsstoffe Pills fertig */ 

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */
.horizontal-wrapper{
  scroll-behavior: smooth;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

.produkte-page .produkte-counter{
  position:absolute;
  top:4px;
  right:12px;
  font-weight:700;
  font-size:0.95rem;
  color:rgba(255, 255, 255, 0.9);
  pointer-events:none;
  z-index:9999;
}

@media(max-width:1250px){
  .produkte-page .produkte-counter{
    display:none !important; /* nur Desktop anzeigen */
  }
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

.ccp-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:12px;
}

.ccp-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  transition:background .25s, transform .25s;
  cursor:pointer;
}

.ccp-dot.active{
  background:rgba(209,182,98,0.85);
  transform:scale(1.25);
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */
/* HARDCOPY der Panel-1-Dots für ALLE Panels */

.ccp-dots {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9999 !important; /* drüber über alles */
}

.ccp-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  transition: background .25s, transform .25s !important;
  cursor: pointer !important;

  /* Verhindert Einfluss anderer Container (der Panel-1-Trick) */
  flex-shrink: 0 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

.ccp-dot.active {
  background: rgba(209,182,98,0.85) !important;
  transform: scale(1.25) !important;
}

/* Globale Panel-Hauptüberschrift */
.panel .panel-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;

  text-align: center;
  font-family: "Pacifico", cursive;
  font-size: 2.6rem;
  font-weight: 400;
  color: #ffffff;

  text-shadow: 0 0 1px rgba(0, 0, 0, 0.99), 0 0 10px rgba(209, 182, 98, 0.99), 0 0 15px rgba(209, 182, 98, 0.88), 0 0 20px rgba(209, 182, 98, 0.77) !important;

  padding-top: 4rem;
  margin: 0;

  z-index: 10;
  pointer-events: none; /* verhindert Klickprobleme mit Slidern */
}

.panel .panel-title {
  opacity: 0;
  transform: translate(-50%, 20px);
  animation: none; /* Animation erst starten, wenn JS Klasse setzt */
}

.panel-title.animate {
  animation: panelTitleFadeUp .8s ease-out forwards;
}

@keyframes panelTitleFadeUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.stage-box,
.product-box {
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.stage-box:hover,
.product-box:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 25px rgba(209,182,98,0.45);
}
/* Panel 1: Hover Effekt nur für die beiden Glasboxen */
.colorcare-stage,
.colorcare-product {
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.colorcare-stage:hover,
.colorcare-product:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 25px rgba(209,182,98,0.45);
}

/* Startzustand */
.product-text {
  opacity: 0;
  transition: opacity .9s ease-out;
}

/* Aktiv beim Scrollen */
.product-text.animate {
  opacity: 1;
}

/* Stempel für empfohlene Produkte */
/* Slides als Anker für den Stempel */
.p-slide,
.ccp-slide{
  position: relative !important;
}

/* Stempel für empfohlene Produkte */
.p-slide.recommended::before,
.ccp-slide.recommended::before{
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  width: 80px;          /* bei Bedarf anpassen */
  aspect-ratio: 1 / 1;
  background-image: url("../bilder/stempel/von-rubys-empfohlen.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.9;
  pointer-events: none;
  z-index: 30;
}

/* Badge-Stempel nur für bestimmte Tabs */
.produkte-wegweiser a.tab-badge {
  position: relative;
  padding-left: 42px; /* Platz für den Stempel */
}

/* Stempel selbst */
.produkte-wegweiser a.tab-badge::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-image: url("../bilder/stempel/von-rubys-empfohlen.webp");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

.panel-colorcare {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.0),
    rgba(126, 5, 5, 0.651)
  );
}
.panel-blonde {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(173, 120, 5, 0.5)
  );
}

.panel-keratin-healing-oil {
  background: linear-gradient(
    135deg,
    rgba(235, 201, 169, 0.2),
    rgba(75, 29, 0, 0.5)
  );
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Panel 4 – Curls (rosé + weiß) */
.panel-curls {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(204, 120, 134, 0.5)
  );
}

/* Panel 5 – Moisture (weiß + königsblau) */
.panel-moisture {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(0, 79, 158, 0.5)
  );
}

/* Panel 6 – Nourish (weiß + dunkelgrün) */
.panel-nourish {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(11, 100, 38, 0.5)
  );
}

/* Panel 7 – Remedy (dunkelgrau, leicht rauchig) */
.panel-remedy {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(0, 0, 0, 0.55)
  );
}

/* Panel 8 – Smooth (weiß + dunkellila) */
.panel-smooth {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(76, 17, 145, 0.55)
  );
}

/* Panel 9 – Strength (weiß + kräftig grün) */
.panel-strength {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(14, 128, 65, 0.55)
  );
}

/* Panel 10 – Volume (weiß + dunkelorange) */
.panel-volume {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(158, 71, 5, 0.699)
  );
}

/* Panel 11 – T.R.U.E. (hellblau, clean) */
.panel-true {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(135, 213, 236, 0.55)
  );
}

/* Panel 12 – Ultimate Treatment (mittelblau) */
.panel-ultimate-treatment {
  background: linear-gradient(
    135deg,
    rgba(230, 242, 255, 0.1),
    rgba(31, 123, 221, 0.55)
  );
}

/* Panel 13 – Emergency Service (ähnlich Oil: braun + gold) */
.panel-emergency-service {
  background: linear-gradient(
    135deg,
    rgba(240, 202, 76, 0.2),
    rgba(44, 17, 0, 0.685)
  );
}

/* Panel 14 – Style (schwarz, aber weich) */
.panel-style {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3),
    rgba(40, 40, 40, 0.9)
  );
}

/* Bis hier gut */ 

/* ============================== */ /* MINI MARLENA – fixed helper */ /* ============================== */ 
.mini-marlena { 
  position: fixed; 
  bottom: 75px; 
  right: 730px; 
  width: 95px; 
  height: auto; 
  z-index: 9999; 
  cursor: pointer; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 6px; animation: 
  marlena-fadein 0.9s ease forwards; 
} 
  
  .mini-marlena img { 
    width: 120px; 
    height: auto; 
    object-fit: contain; 
    filter: drop-shadow(0 0 6px rgba(209,182,98,0.9)); 
    transition: transform 0.25s ease; 
  } 
  
  .mini-marlena:hover img { 
    transform: scale(1.08); 
  } 
  
  /* Sprechblase */ 
  .mini-marlena-bubble { 
    position: absolute; 
    bottom: 140px; /* über Marlena */ 
    right: 0; 
    width: 200px; /* <<< BREITER */ 
    max-width: 320px; 
    background: rgba(209,182,98,0.7); 
    border: 1px solid rgba(209,182,98,0.9); 
    border-radius: 14px; 
    padding: 14px 16px; 
    color: white; 
    font-size: 0.9rem; 
    line-height: 1.35; 
    box-shadow: 0 0 12px rgba(0,0,0,0.4); 
    opacity: 0; 
    pointer-events: none; 
    transform: translateY(10px) scale(0.95); 
    transition: all 0.25s ease; 
  } 
  
  /* Sprechblase sichtbar beim Hover */ 
    .mini-marlena:hover .mini-marlena-bubble { 
      opacity: 1; 
      pointer-events: auto; 
      transform: translateY(0) scale(1); 
    } 
      
      /* Sanftes Auftauchen unten rechts */ 
      @keyframes marlena-fadein { 
        0% { opacity: 0; 
          transform: translateY(20px) scale(0.9); } 100% { 
            opacity: 1; transform: translateY(0) scale(1); } 
          } 
          
          .mini-marlena-bubble::after { 
            content: ""; 
            position: absolute; 
            bottom: -11px; /* Pfeil sitzt unten an der Blase */ 
            right: 30px; /* Abstand anpassen, damit er auf Marlena zeigt */ 
            width: 0; 
            height: 0; 
            border-left: 10px solid transparent; 
            border-right: 10px solid transparent; 
            border-top: 10px solid rgba(209,182,98,0.7); /* gleiche Farbe wie die Blase */ /* Goldrand wie bei deinen Glasboxen */ 
            filter: drop-shadow(0 0 3px rgba(209,182,98,0.7)); } /* Mini Marlena sitzt gut */ /* Sidebar Grundstruktur */ 
            
            #marlena-sidebar { 
              position: fixed; 
              top: 51px; 
              right: -320px; /* ausgefahren */ 
              max-width: 300px; 
              height: 80.5vh; 
              background: rgba(255, 255, 255, 0.4); 
              backdrop-filter: blur(14px); 
              padding: 20px; 
              box-shadow: -4px 0 25px rgba(0,0,0,0.4); 
              transition: right .35s ease; 
              z-index: 99999; 
              color: #fff; 
              display: flex; 
              flex-direction: column; 
              gap: 14px; } /* sichtbar */ 
              
              #marlena-sidebar.open { 
                right: 0; } 
                
                .sidebar-header { 
                  display: flex; 
                  justify-content: space-between; 
                  align-items: center; } 
                  
                  #sidebar-close { 
                    background: none; 
                    border: none; 
                    color: #fff; 
                    font-size: 1.8rem; 
                    cursor: pointer; } /* Input */ 
                    
                    #sidebar-search { 
                      width: 90%; 
                      padding: 10px; 
                      margin-right: 15px;
                      border-radius: 8px; 
                      border: none; 
                      font-size: 1rem; } /* Tags */ 
                      
                      .sidebar-tags { 
                        display: flex; 
                        flex-wrap: wrap; 
                        gap: 8px; } 
                        
                        .sidebar-tags .tag { 
                          background: rgba(255,255,255,0.2); 
                          padding: 6px 10px; 
                          border-radius: 50px; 
                          cursor: pointer; 
                          font-size: .9rem; } /* Hinweis */ 
                          
                          .sidebar-hint { 
                            font-size:1.1rem; 
                            opacity: .8; 
                            margin-top: auto; } 
                            
/* Wegweiser Leiste: Treffer */ 
.produkte-wegweiser a.match { 
  color: #ffffff !important; 
  text-shadow: 0 0 15px rgb(255, 208, 0); 
} 

/* Wegweiser Leiste: Nichttreffer */ 
.produkte-wegweiser a.dim { 
  color: #505050 !important; 
  opacity: 0.2; } 
  
  #marlena-sidebar { 
    transform: translateX(100%); 
    right: 0; } #marlena-sidebar.open { 
    transform: translateX(0); } 
    
    /* Suchfunktion Pop up ist gut. */ 
    
    /* Mini-Marlena Bubble – Glassmorphism */ 
    
    .marlena-bubble { position: fixed; bottom: 205px; /* sitzt über Marlena */ right: 720px; /* an deine aktuelle Marlena-Position angepasst */ width: 280px; /* Größe M */ padding: 14px 18px; background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.35); font-size: 16px; line-height: 1.35; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,0.6); box-shadow: 0 0 14px rgba(209, 182, 98, 0.55); /* dein Goldton */ opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; z-index: 99999; } /* sichtbar */ .marlena-bubble.show { opacity: 1; transform: translateY(0); } /* kleiner Pfeil zur Marlena */ .marlena-bubble::after { content: ""; position: absolute; bottom: -12px; right: 55px; width: 22px; height: 22px; background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px) saturate(140%); transform: rotate(45deg); border-right: 1px solid rgba(255,255,255,0.35); border-bottom: 1px solid rgba(255,255,255,0.35); } /* =========================== Mini Marlena – Produktkarte M =========================== */ #marlena-perfect-product { position: fixed; bottom: 200px; /* sitzt schön unter Marlena */ right: 720px; /* gleiche Achse wie deine Mini Marlena */ width: 220px; padding: 14px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px) saturate(130%); border-radius: 16px; display: none; /* sichtbar erst bei 1 Produkt */ flex-direction: column; align-items: center; gap: 10px; z-index: 99999; animation: fadeInMarlenaCard .5s ease; } @keyframes fadeInMarlenaCard { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } #marlena-perfect-product.show { display: flex; } #marlena-perfect-product .mp-bubble { font-size: 14px; text-align: center; color: white; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.45); line-height: 1.3; } #marlena-perfect-product .mp-img { width: 100px; height: auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); } #marlena-perfect-product .mp-title { font-size: 15px; font-weight: 600; text-align: center; color: white; } #marlena-perfect-product .mp-go { background: rgba(255, 215, 130, 0.9); border: none; color: black; padding: 6px 10px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: 0.2s; } #marlena-perfect-product .mp-go:hover { background: rgba(255, 225, 150, 1); } #marlena-perfect-match { display: none !important; } .marlena-cta-button { position: fixed; bottom: 100px; /* Gleichhöhe wie Mini-Marlena – du kannst’s anpassen */ right: 830px; /* Abstand zum Rand */ padding: 6px 12px; background: rgba(209, 182, 98, 0.85); /* dein Goldton */ backdrop-filter: blur(6px) saturate(140%); color: #fff; border: none; border-radius: 14px; font-size: 16px; font-weight: 600; cursor: pointer; z-index: 9998; box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; } .marlena-cta-button:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.35); } .marlena-cta-button:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0,0,0,0.25); } /* Glasbox für Suchergebnisse */ .marlena-results-box { margin: 20px 0; padding: 15px 18px; background: rgba(255, 255, 255, 0.15); border-radius: 14px; backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.25); display: none; /* wird per JS aktiviert */ max-height: 260px; overflow-y: auto; } /* Titel */ .marlena-results-box h4 { margin: 0 0 10px 0; font-size: 15px; letter-spacing: 0.4px; font-weight: 600; color: var(--ruby-gold, rgba(209, 182, 98, 0.85)); } /* Ergebnisliste */ .results-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } /* Ein einzelnes Ergebnis */ .results-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; transition: background 0.25s ease; } /* Hover */ .results-list li:hover { background: rgba(255, 255, 255, 0.25); } /* ICON — tannengrün */ .results-list li::before { content: "▸"; font-size: 16px; color: #0f3d2e; /* TANNENGRÜN */ font-weight: bold; margin-right: 4px; } 


/* ================================
   Mini-Marlena: Anheben bei Desktop <1737px
   ================================ */
@media (min-width:1251px) and (max-width:1736px) {
  .mini-marlena {
    bottom: 105px !important;  /* vorher ~90–105px → jetzt sicher über Footer */
  }

  .mini-marlena-bubble {
    bottom: calc(150px + 65px) !important; 
  }

  #marlena-perfect-product {
    bottom: calc(150px + 45px) !important;
  }

  .marlena-cta-button {
    bottom: 125px !important;
  }
}




.mini-marlena {
    right: calc((100vw - 1920px) / 2 + 730px);
}
@media (max-width: 1737px) {
    .mini-marlena {
        right: max(80px, calc((100vw - 1920px) / 2 + 730px));
    }
}
.mini-marlena {
    right: calc((100vw - 1920px) / 2 + 730px) !important;
}

.marlena-cta-button {
    right: calc((100vw - 1920px) / 2 + 830px) !important;
}
@media (max-width: 1737px) {
    .mini-marlena {
        right: max(80px, calc((100vw - 1920px) / 2 + 730px)) !important;
    }

    .marlena-cta-button {
        right: max(80px, calc((100vw - 1920px) / 2 + 830px)) !important;
    }
}

/* Früherer Zeilenumbruch für Stage-Pills */
.panel .stage-pills {
    max-width: 77% !important; /* vorher 80% → jetzt bricht eher um */
    flex-wrap: wrap !important;
}

/* ============================
   PRODUCT-BOX RESPONSIVE FIX  
   Für Panel 1 (.colorcare-product)
   und für Panel 2–14 (.product-box, .ccp-product)
   ============================ */

/* Basis: flüssigere Schrift & engeres Line-Height */
.colorcare-product .product-text p,
.product-box .product-text p,
.ccp-product .product-text p {
    line-height: 1.45 !important;
    transition: line-height .2s ease, font-size .2s ease;
}

/* Produktbilder: dürfen ab ~1700px Höhe reduzieren */
.colorcare-product img,
.product-box img,
.ccp-product img {
    transition: max-height .25s ease;
}

/* ======= BREAKPOINT 1 — Desktop etwas schmaler (<1700px) ======= */
@media (max-width: 1700px) {
    .colorcare-product .product-text p,
    .product-box .product-text p,
    .ccp-product .product-text p {
        line-height: 1.35 !important;
        font-size: 1.0rem !important;
    }

    .colorcare-product img,
    .product-box img,
    .ccp-product img {
        max-height: 45% !important; /* vorher 50% */
    }
}

/* ======= BREAKPOINT 2 — <1500px ======= */
@media (max-width: 1500px) {
    .colorcare-product .product-text p,
    .product-box .product-text p,
    .ccp-product .product-text p {
        line-height: 1.28 !important;
        font-size: 1.0rem !important;
    }

    .colorcare-product img,
    .product-box img,
    .ccp-product img {
        max-height: 40% !important;
    }
}

/* ======= BREAKPOINT 3 — <1400px ======= */
@media (max-width: 1400px) {
    .colorcare-product .product-text p,
    .product-box .product-text p,
    .ccp-product .product-text p {
        line-height: 1.28 !important;
        font-size: 1.0rem !important;
    }

    .colorcare-product img,
    .product-box img,
    .ccp-product img {
        max-height: 40% !important;
    }
}

/* ======= BREAKPOINT 4 — <1300px ======= */
@media (max-width: 1300px) {
    .colorcare-product .product-text p,
    .product-box .product-text p,
    .ccp-product .product-text p {
        line-height: 1.2 !important;
        font-size: 1.0rem !important;
    }

    .colorcare-product img,
    .product-box img,
    .ccp-product img {
        max-height: 40% !important;
    }
}


/* ============================================
   PANEL 2–14: Hybrid-Bildverhalten
   Groß = FILL, schmal = CONTAIN
   ============================================ */

/* Basis: große Desktops → fill, wie du es vorher hattest */
.panel .stage-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center !important;
    transition: transform .25s ease, max-height .25s ease;
}

/* --- Ab hier schmale Desktops → contain, damit nichts gequetscht wird --- */

/* unter 1737px */
@media (max-width: 1737px) {
    .panel .stage-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        max-height: 95% !important;
    }
}

/* unter 1600px */
@media (max-width: 1600px) {
    .panel .stage-box img {
        max-height: 88% !important;
    }
}

/* unter 1500px */
@media (max-width: 1500px) {
    .panel .stage-box img {
        max-height: 80% !important;
    }
}

/* unter 1400px */
@media (max-width: 1400px) {
    .panel .stage-box img {
        max-height: 72% !important;
    }
}

/* unter 1300px */
@media (max-width: 1250px) {
    .panel .stage-box img {
        max-height: 100% !important;
    }
}


/*Responsive desktop angefangen, bis hier ok */


/* ============================================================
   PANEL 2–14: Bild zentrieren, sobald object-fit: contain aktiv ist
   ============================================================ */

/* Stage-Box muss zum Flex-Container werden */
.panel .stage-box {
    display: flex !important;
    justify-content: center !important;  /* horizontal */
    align-items: center !important;       /* vertikal */
    overflow: hidden !important;
}

/* Bild bei contain sauber in der Mitte ausrichten */
@media (max-width: 1737px) {
    .panel .stage-box img {
        object-position: center center !important;
        margin: 0 auto !important;
        align-self: center !important;   /* falls Bild eigene Regeln hat */
        justify-self: center !important;
    }
}
/* Wegweiser: früherer Zeilenumbruch, damit nichts den "1/14"-Counter überdeckt */
@media (min-width: 1251px) {
  .produkte-page .produkte-wegweiser ul {
    flex-wrap: wrap !important;
    /* bisher war zu viel Platz, daher jetzt geringere max-Breite */
    max-width: calc(100% - 60px) !important; 
    /* 60px = Platz für "Kategorien" + Counter "1/14" rechts */
  }
}

/* Nur die Panel-Titel verschieben, wenn Tabs zweizeilig werden */
@media (min-width:1251px) and (max-width:1744px) {
  .produkte-page .panel h2,
  .produkte-page .panel .panel-title {
    margin-top: 34px !important; /* etwas extra Luft */
  }
}

/* Panel-Überschriften responsiv zentrieren + skalieren */
@media (min-width:1251px) and (max-width:1700px) {
  .produkte-page .panel h2,
  .produkte-page .panel .panel-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* kontrolliertes Schrumpfen statt Überlaufen */
    font-size: clamp(1.6rem, 2.2vw, 2.8rem) !important;

    /* Text darf umbrechen, aber schön */
    max-width: 90% !important;
    white-space: normal !important;
    line-height: 1.2 !important;

    /* etwas Luft nach oben, damit Tabs nichts verdecken */
    margin-top: 34px !important;
  }
}

@media (min-width:1251px){
.panel {
  width: 100dvw !important;
  max-width: 100dvw !important;
  overflow: hidden !important;
}
.horizontal-wrapper {
  width: 100dvw !important;
  max-width: 100dvw !important;
  overflow-x: auto !important;
}

/* Panel 1 denselben linken Startabstand geben wie alle anderen Panels */
.panel-1 {
  padding-left: 10px !important;
  box-sizing: border-box !important;
}

/* PANEL 1 LINKS VERSCHIEBEN – nur Produkte-Seite */
body.produkte-page .panel-color {
    position: relative !important;
    left: -35px !important;  /* ← Wert anpassen bis es perfekt sitzt */
}
}


/* ==========================================
   PANEL-TITEL absolut perfekt zentrieren
   → Mitte des Panels
   → Headerbreite links abziehen
   → gilt für Panel 1 + Panel 2–14
   ========================================== */

@media (min-width:1251px) {

  .produkte-page .panel h2,
  .produkte-page .panel .panel-title {

    position: absolute;
    top: 0;

    /* Mittelpunkt des sichtbaren Bereichs  
       (gesamte Breite – Headerbreite) / 2 + Headerbreite */
    left: calc( (100vw - var(--header-w, 250px)) / 2 + var(--header-w, 250px) );

    transform: translateX(-50%);

    width: auto;
    text-align: center;

    font-size: clamp(2.2rem, 2.8vw, 3.2rem);
    line-height: 1.2;
    white-space: nowrap;

    z-index: 20;
    pointer-events: none;
  }
}
/* Panel-Titel: kein Zeilenumbruch */
@media (min-width:1251px) {
  .produkte-page .panel h2,
  .produkte-page .panel .panel-title {
    white-space: nowrap !important;
  }
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */
/* PRODUKTE · PARALLAX FIX — Layer 2–5 vollständig & ohne harte Kanten */



/* RESPONSIVE DESKTOP FERTIG */ 

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
@media (max-width: 1250px) {
  .produkte-page .panel-color {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    overflow: visible; /* falls ein Element zu weit rausging */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
@media (max-width: 1250px) {
  .produkte-page .panel.panel-color h2 {
    margin-top: 130px; /* Abstand nach unten – justierbar */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */

/* Panel 1 Überschrift skalieren – nur mobil */
@media (max-width: 1250px) {
  .produkte-page .panel.panel-color h2 {
    font-size: clamp(1.4rem, 5vw, 2rem);
    /* 2rem = groß genug für Tablet,
       1.4rem = nie zu klein auf sehr schmalen Screens,
       5vw = flüssige Anpassung dazwischen */

    line-height: 1.2; /* kompakter, damit nichts kollidiert */
  }
}

/* Referenziert: dein aktuelles mein-weg HTML/CSS/JS */
/* PANEL 1 – HARTE MOBILE ANORDNUNG */
@media (max-width: 1250px) {

  /* Panel 1 bekommt einen sicheren Block-Flow */
  .produkte-page #panel-color {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  /* Überschrift bleibt sichtbar & Abstand vom Header */
  .produkte-page #panel-color .panel-title {
    text-align: center !important;
    width: 100% !important;
  }

  /* STAGEBOX → erste Box */
  .produkte-page .colorcare-stage {
    display: block !important;
    position: relative !important;
    width: 92% !important;
    max-width: 600px !important;
    margin: 20px auto 30px auto !important;
    padding: 20px !important;
  }

  .produkte-page .colorcare-stage img.colorcare-hero {
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* PRODUCTBOX → zweite Box */
  .produkte-page .colorcare-product {
    display: block !important;
    position: relative !important;
    width: 80% !important;
    max-width: 600px !important;
    margin: 0 auto 40px auto !important;
    padding: 20px !important;
  }

  /* Der komplette Slider bricht korrekt */
  .produkte-page .colorcare-product .ccp-slide-wrapper {
    width: 100% !important;
    height: auto !important;
  }
}


@media (max-width: 1250px) {

  /* PANEL-COLOR komplett mobil korrekt begrenzen */
  #panel-color {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 0 !important;

    position: relative !important;
    left: 0 !important;
    right: 0 !important;

    display: block !important;
  }

  /* Der horizontale Wrapper darf das Panel NICHT mehr scrollen */
  .horizontal-wrapper {
    overflow-x: hidden !important;
  }
}

@media (max-width: 1250px) {

  /* PANEL COLOR – echte, absolute Zentrierung */
  #panel-color .colorcare-stage{
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 90% !important; /* du kannst 85–95% nehmen */
    max-width: 500px !important; /* Boxgröße begrenzen */

    margin: 20px 0 !important; /* Abstand oben/unten */
    display: block !important;
  }
  #panel-color .colorcare-product{
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    width: 80% !important; /* du kannst 85–95% nehmen */
    max-width: 600px !important; /* Boxgröße begrenzen */

    margin: 20px 0 !important; /* Abstand oben/unten */
    display: block !important;

}

}

@media (max-width: 1250px) {

  /* Stagebox hochskalieren, groß, mittig, schöner Abstand */
  #panel-color .colorcare-stage {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 70% !important;          /* deutlich breiter */
    max-width: 1600px !important;    /* groß, aber nicht zu fett */
    min-height: 300px;
    height: auto !important;   /* Höhe erhöhen → Bild hat Platz */
    max-height: 595px !important;
    margin-top: -100px !important;    /* runter vom Header */
    margin-bottom: 30px !important;

    padding: 20px !important;       /* Innenraum wie Desktop */
  }

  /* Bild in der Stagebox größer & schön zentriert */
  #panel-color .colorcare-stage img {
    width: 100% !important;          /* größer */
    object-fit: contain !important; /* nie verzerren */
    margin: 0 auto !important;      /* exakt mittig */
    display: block !important;
  }
}


@media (max-width:1250px){
  #panel-color{
    min-height: auto !important;   /* Inhalt bestimmt Höhe */
    padding-bottom: clamp(48px, 10vh, 120px) !important;
  }
}





@media (max-width: 1250px) {
  #panel-color .colorcare-stage {
    margin-top: -550px !important;        /* ganz hoch */
    padding-top: 0 !important;       /* falls innen noch Abstand war */
  }

  #panel-color .panel-title {
    margin-bottom: 60px !important;  /* Titel gibt etwas Luft zur Box */
  }
}


@media ((min-width: 280px) and (max-width: 960px)) {
  #panel-color .colorcare-stage {
    margin-top: -500px !important;        /* ganz hoch */
    padding-top: 0 !important;       /* falls innen noch Abstand war */
  }}


@media (max-width: 1250px) {

  .panel.panel-color {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-bottom: 24px; /* Luft unter der Product-Box */
  }

}

@media (max-width: 1250px) {

  /* Nur das Innenleben der Produktbox umbauen – Box selbst bleibt unberührt */
  
  /* Die Slide-Wrapper vertikal statt horizontal */
  #panel-color .colorcare-product .ccp-slide-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  /* Jede Slide vertikal: Bild oben, Text unten */
  #panel-color .colorcare-product .ccp-slide {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 10px 0 !important;
  }

  /* Produktbild oben */
  #panel-color .colorcare-product .ccp-slide img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 10px !important;
  }
}

/* ------------------------------- */ 

/* =====================================================
   FINAL FIX – Panel 1 Slider MOBIL
   überschreibt ALLE kaputten Mobile-Regeln
   ===================================================== */
@media (max-width:1250px){

  #panel-color .colorcare-product{
    overflow:hidden !important;
  }

  #panel-color .colorcare-product .ccp-slide-wrapper{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    height:auto !important;
    transform:translateX(0);
    transition:transform .35s ease;
  }

  #panel-color .colorcare-product .ccp-slide{
    flex:0 0 100% !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }
}

@media (max-width:1250px){

  /* Padding aus dem Slider-Rechenraum entfernen */
  #panel-color .colorcare-product{
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  /* Slides bekommen ihr Padding innen */
  #panel-color .ccp-slide{
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width:1250px){

  /* Luft für Text – ohne den Slider zu beeinflussen */
  #panel-color .ccp-slide .ccp-text{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width:1250px){

  /* Produktbild auf Handy bewusst kleiner */
  #panel-color .ccp-slide img{
    width: auto !important;
    object-fit: contain !important;
    margin-bottom: 10px !important;
    margin-top: -10px !important;
  }
}

@media (max-width:1250px){

  /* Pfeile höher – auf Höhe des Produktbildes */
  #panel-color .ccp-arrow{
    top: 15% !important;   /* war 50% → jetzt neben dem Bild */
    transform: translateY(-50%) !important;
  }
}

@media (max-width:1250px){

  /* Text wieder sauber vom Glasrand abrücken */
  #panel-color .ccp-slide .ccp-text,
  #panel-color .ccp-slide h3,
  #panel-color .ccp-slide p{
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width:1250px){

  #panel-color .ccp-dot{
    appearance: none !important;
    -webkit-appearance: none !important;
    padding: 0 !important;
    border: none !important;

    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;

    border-radius: 50% !important;
    line-height: 0 !important;
  }
}







@media (max-width:1250px){

  #panel-color .ccp-slide p{
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width:1250px){

  .colorcare-product .product-text h3,
  #panel-color .ccp-slide .product-text h3{
    font-size: 1.1rem !important;   /* etwas kleiner */
    margin-top: -6px !important;   /* rückt nach oben */
    margin-bottom: 6px !important; /* kompakter Abstand zum Text */
    line-height: 1.2 !important;
  }
}

@media (max-width:295px){
 #panel-color .ccp-slide p {
        font-size: 0.9rem !important;
        line-height: 1.0 !important;
    }
  }

@media (max-width:1250px){

  /* Panel-Inhalt bekommt unten Platz */
  #panel-color{
    padding-bottom: 96px; /* Höhe der Interaction-Zone */
    box-sizing: border-box;
  }

  /* Interaction-Zone als eigene Zeile */
  .panel-interaction{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: 96px;              /* ← hier spielst du */
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 16px;
    margin-right: 25% !important;
    box-sizing: border-box;

    z-index: 50;
    pointer-events: auto;
  }

  /* Mini Marlena nicht mehr fixed */
  .mini-marlena,
  .marlena-cta-button{
    position: static !important;
    transform: none !important;
  }
}
@media (max-width:1250px){
  .marlena-cta-button{
    margin-right: 28px !important; /* minimal nach links */
  }
}

@media (max-width:1250px){

  /* sehr schmale Handys */
  .ccp-slide img{
    height: 20vh !important;
    max-height: 20vh !important;
    width: auto !important;
  }

  /* etwas breiter */
  @media (min-width: 420px){
    .ccp-slide img{
      height: 20vh !important;
      max-height: 20vh !important;
    }
  }

  /* größere Phones / kleine Tablets */
  @media (min-width: 600px){
    .ccp-slide img{
      height: 25vh !important;
      max-height: 25vh !important;
    }
  }
}

/* Produktbox gut*/ 

@media (max-width: 800px){
  #panel-color{
    height: calc(170vh + 100px) !important;
  }
}


@media (min-width: 801px) and (max-width: 1250px){
  #panel-color{
    height: calc(110vh + 450px) !important;
  }
}

@media (min-width: 961px) and (max-width: 1250px){
  #panel-color{
    height: calc(110vh + 600px) !important;
  }
}

@media (min-width: 1101px) and (max-width: 1250px){
  #panel-color{
    height: calc(110vh + 550px) !important;
  }
}

/* PANEL 1 NICHT MEHR ANFASSEN! */ 

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* NUR MOBIL – Desktop bleibt unberührt */
@media (max-width: 1250px) {

  .info-popup--mobile {
    position: fixed;
    inset: 0;
    z-index: 999999999;

    display: none;
    overflow-y: auto;

    padding: 24px 20px 32px;
    background: rgba(126, 5, 5, 0.35);
    backdrop-filter: blur(6px);
  }

  .info-popup--mobile.is-open {
    display: block;
  }

  .info-popup--mobile .info-item {
    max-width: 520px;
    margin: 0 auto;
  }

  .info-popup--mobile img {
    display: block;
    max-width: 160px;
    margin: 0 auto 16px;
  }

  .info-popup--mobile h4 {
    text-align: center;
    margin-bottom: 12px;
  }

  .info-popup--mobile p {
    line-height: 1.45;
  }

  .info-popup--mobile .info-close {
    position: sticky;
    top: 0;
    margin-left: auto;
    display: block;
    font-size: 28px;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
  }
}


/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* NUR MOBIL – Popup selbst ist das Fenster */
@media (max-width: 1250px) {

  .info-popup--mobile {
    inset: auto !important;

    width: min(70vw, 300px) !important;
    max-height: 70vh !important;

    top: 55% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    padding: 14px !important;

    border-radius: 14px !important;

    overflow-y: auto !important;
  }

}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* NUR MOBIL – Bild oben, Text darunter */
@media (max-width: 1250px) {

  .info-popup--mobile .info-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
  }

  .info-popup--mobile img {
    order: 1;
    margin-bottom: 5px !important;
  }

  .info-popup--mobile .info-text {
    order: 2;
    text-align: center;
  }
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* NUR MOBIL – Text minimal kompakter */
@media (max-width: 1250px) {

  .info-popup--mobile .info-text p {

    line-height: 1.2 !important;   /* etwas enger */
  }
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* NUR MOBIL – altes Desktop-Popup deaktivieren */
@media (max-width: 1250px) {
  #panel-color .info-popup {
    display: none !important;
    pointer-events: none !important;
  }
}

@media (max-width: 1250px) {
  #marlena-sidebar.open {
    top: 170px !important;
    bottom: 1px; /* ggf. feinjustieren, je nach Höhe der Marlena-Leiste */
    max-height: calc(60vh - 80px);
  }
}

@media (max-width: 1250px) {

  /* 1. Produktberatung-Button auf mobil AUS */
  .marlena-cta-button {
    display: none !important;
  }
}

@media (max-width: 1250px) {

  .mini-marlena {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .mini-marlena-bubble {
    position: static !important;   /* ← ABSOLUT RAUS */
    bottom: auto !important;
    right: auto !important;

    margin-left: -20px !important;  /* rechts neben Marlena */
    margin-top: -10px !important;
    transform: none !important;
    opacity: 1 !important;         /* immer sichtbar wie gewünscht */
    pointer-events: auto !important;
  }

  /* Pfeil unter der Bubble deaktivieren (zeigt sonst nach unten ins Leere) */
  .mini-marlena-bubble::after {
    display: none !important;
  }

}

@media (max-width: 1250px) {

  .mini-marlena-bubble {
    display: block !important;        /* inline-Begrenzung killen */
    width: auto !important;
    min-width: 120px !important;      /* erzwingt Breite */
    max-width: 10vw !important;       /* trotzdem mobil-safe */

    white-space: normal !important;   /* verhindert Zeilen-Zwang */
  }

}
/* MOBIL: Sidebar-Inhalt darf NIEMALS über die Sidebar hinausragen */
@media (max-width: 1250px) {

  #marlena-sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Sidebar selbst bleibt sauber */
  }

  /* Scrollbarer Innenbereich */
  #marlena-sidebar .sidebar-scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important; /* WICHTIG für Flex-Scroll */
    padding-bottom: 12px;
  }

  /* Ergebnisse bleiben IM Scrollbereich */
  .marlena-results-box {
    max-height: none !important;
    overflow: visible !important;
  }

  .sidebar-hint {
    font-size: 1.1rem;
    opacity: .8;
    margin-top: 20px;
}
}

/* ----------------------------------- */ 

@media (max-width: 1250px) {
  .marlena-category-hint {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 0.9rem;
    line-height: 1.3;
    color: rgba(255,255,255,0.9);
    background: rgba(209,182,98,0.25);
    border: 1px solid rgba(209,182,98,0.55);
    border-radius: 10px;
  }
}

/* Desktop: komplett aus */
@media (min-width: 1251px) {
  .marlena-category-hint {
    display: none !important;
  }
}

/* NUR MOBIL: Tags ausblenden, wenn Hint aktiv ist */
@media (max-width:1250px){
  #marlena-sidebar.hint-active .sidebar-tags{
    display: none !important;
  }
}

/* NUR MOBIL – Abstand für Sidebar-Tags bei display:block */
@media (max-width:1250px){
  #marlena-sidebar .sidebar-tags .tag{
    display: inline-block !important;
    margin: 1px 1px 1px 1px !important; /* oben | rechts | unten | links */
    line-height: 1.1 !important;
  }
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* NUR MOBIL: alter Hint weg, wenn neuer aktiv ist */
@media (max-width: 1250px){
  body.category-hint-active .sidebar-hint{
    display: none !important;
  }
}

@media (max-width: 1250px) {
  .mini-marlena {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 1250px) {

  /* Default: Bubble IMMER versteckt */
  .mini-marlena-bubble {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .8s ease, transform .8s ease;
  }

  /* NUR dieser State macht sie sichtbar */
  .mini-marlena-bubble.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
  }

}

@media (max-width: 1250px) {

  .mini-marlena-bubble {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px);
    pointer-events: none;
    transition:
      opacity .8s ease,
      transform .8s ease,
      visibility 0s linear .8s; /* ← wichtig */
  }

  .mini-marlena-bubble.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
    transition:
      opacity .8s ease,
      transform .8s ease,
      visibility 0s; /* sofort sichtbar */
  }
}

@media (max-width:1250px){

  /* Mobile Bubble ist standardmäßig unsichtbar */
  #marlena-perfect-product-mobile{
    position: fixed;
    left: 25px;
    right: 25px;
    bottom: 110px; /* unter Header + Wegweiser */
    z-index: 99999;

    display: block;
    padding: 12px 12px 10px;

    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 16px;
    box-shadow: 0 0 14px rgba(209, 182, 98, 0.55);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;

    transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
  }

  /* Sichtbar */
  #marlena-perfect-product-mobile.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;

    transition: opacity .35s ease, transform .35s ease, visibility 0s;
  }

  #marlena-perfect-product-mobile .mpp-bubble{
    font-size: 14px;
    text-align: center;
    color: #fff;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.28);
    line-height: 1.25;
    text-shadow: 0 0 6px rgba(0,0,0,0.6);
    margin-bottom: 10px;
  }

  #marlena-perfect-product-mobile .mpp-row{
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    align-items: center;
  }

  #marlena-perfect-product-mobile .mpp-img{
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  }

  #marlena-perfect-product-mobile .mpp-title{
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    text-shadow: 0 0 6px rgba(0,0,0,0.6);
  }

  #marlena-perfect-product-mobile .mpp-sub{
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
  }

  /* Mobile – Perfect Product Button (gold) */
#marlena-perfect-product-mobile .mpp-sub{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 12px;

  background: rgba(209, 182, 98, 0.85); /* dein Gold */
  color: #ffffff;
  font-weight: 400;
  font-size: 11px;
  border: none;

  box-shadow: 0 4px 12px rgba(209, 182, 98, 0.45);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

#marlena-perfect-product-mobile .mpp-sub:active{
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(209, 182, 98, 0.35);
}
  .mini-marlena img { 
    width: 80px; 
    margin-left: -15px;
    height: auto; 
    object-fit: contain; 
    filter: drop-shadow(0 0 6px rgba(209,182,98,0.9)); 
    transition: transform 0.25s ease; 
    z-index: 999999999999999;
  } 

/* Mobile Info-Popup – Text responsiv ohne Scroll */
.info-popup--mobile .info-text p{
  font-size: clamp(14px, 3.8vw, 16px);
  line-height: 1.35;
  margin: 0;

  /* Text kompakter umbrechen */
  word-break: break-word;
  hyphens: auto;

  /* leichtes Schrumpfen bei wenig Höhe */
  max-height: 48vh;
}


}

@media (max-width: 1250px) {

  /* Mobile Info-Popup – Bild responsiv */
  .info-popup--mobile is-open img{
    width: min(90%, 150px) !important;
    height: auto;
    max-height: 45vh;
    object-fit: contain;
    margin: 0 auto 12px;
    display: block;
  }

}

/* ------------- Bis hier gut -------------- */ 
/* --------- Jetzt Panel 2-14 mobil -------- */
/* ----------------------------------------- */


@media (max-width: 1250px) {

  /* ===============================
     STAGE-BOX (Panel 2–14)
     =============================== */
  .panel:not(.panel-color) .stage-box {
    padding: 16px 16px 18px;
    min-height: unset;
  }

  .panel:not(.panel-color) .stage-box img {
    max-width: 100%;
    height: auto;
    margin: 0 auto 10px;
    display: block;
  }

  /* Pills kompakter */
  .panel:not(.panel-color) .stage-pills {
    gap: 6px;
    flex-wrap: wrap;
  }

  .panel:not(.panel-color) .stage-pill {
    font-size: 12px;
    padding: 4px 8px;
  }

  /* ===============================
     INFO-POPUP (Panel 2–14)
     =============================== */
  .panel:not(.panel-color) .info-popup {
    max-height: none;
    padding: 14px;
  }

  .panel:not(.panel-color) .info-popup img {
    max-width: 64px;
    height: auto;
    flex-shrink: 0;
  }

  .panel:not(.panel-color) .info-text h4 {
    font-size: clamp(14px, 4vw, 16px);
  }

  .panel:not(.panel-color) .info-text p {
    font-size: clamp(13px, 3.8vw, 15px);
    line-height: 1.35;
  }

  /* ===============================
     PRODUCT-BOX (Panel 2–14)
     =============================== */
  .panel:not(.panel-color) .product-box {
    padding: 14px 14px 18px;
    min-height: unset;
  }

  .panel:not(.panel-color) .product-box img {
    max-height: 140px;
    width: auto;
    margin: 0 auto 8px;
    display: block;
  }

  .panel:not(.panel-color) .product-text h3 {
    font-size: clamp(15px, 4vw, 17px);
  }

  .panel:not(.panel-color) .product-text p {
    font-size: clamp(13px, 3vw, 15px);
    line-height: 1.35;
  }

}

@media (max-width: 1250px) {

  /* Panel 2–14: JEDE Positionierung aufheben */
  .panel:not(.panel-color) .stage-box,
  .panel:not(.panel-color) .product-box {
    position: static !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% + 140px !important;
    max-width: 150% !important;
    margin: 0 !important;
  }

  /* Abstand zwischen Stage und Product */
  .panel:not(.panel-color) .stage-box {
    margin-bottom: 5px !important;
  }

}

@media (max-width: 1250px) {

  /* Panel 2–14: Glasboxen dürfen NICHT höher als der Viewport sein */
  .panel:not(.panel-color) .stage-box {
    min-height: 300px !important;
    height: auto !important;
    object-fit: contain;
    overflow: hidden;
  }

}

@media (max-width: 1250px) {
  /* Panel 2–14: Glasboxen auch in der BREITE begrenzen */
  .panel:not(.panel-color) .stage-box {
    max-width: 1046px !important;
    width: 98% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


  .panel:not(.panel-color) .product-box {
    max-width: calc(100vw - 32px) !important;
    width: 85% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 100px !important; 
  }
}



@media (max-width: 1250px) {

  /* Panel 2–14: KEINE feste Höhe */
  .panel:not(.panel-color) {
    height: auto !important;
    min-height: unset !important;
    max-height: auto !important;
  }

}

@media (max-width: 1250px) {

  /* Abstand zwischen Stage-Box und Product-Box verkleinern */
  .panel:not(.panel-color) .stage-box {
    margin-bottom: -60px !important;
  }

}

@media (max-width: 1250px) {

  /* Beide Glasboxen zusammen weiter nach unten */
  .panel:not(.panel-color) .stage-box {
    margin-top: 350px !important;
  }

}

@media (max-width: 960px) {

  /* Panel 2–14: Platz für Panel-Überschrift schaffen */
  .panel:not(.panel-color) {
    padding-top: 0.5rem !important;
    padding-bottom: 2rem !important;
  }
}




@media (max-width: 1250px) {

  /* Panel-Titel auf Mobile IMMER sichtbar */
  .panel:not(.panel-color) .panel-title {
    opacity: 1 !important;
    padding-top: 25px; 
    font-size: clamp(1.4rem, 8vw, 2rem);

}
}

@media (max-width: 1250px) {

  /* Product-Box (Panel 2–14) */
  .panel:not(.panel-color) .product-box {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Slide selbst vertikal aufbauen */
  .panel:not(.panel-color) .product-box .p-slide {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Produktbild oben – max 50% */
  .panel:not(.panel-color) .product-box .p-slide img {
    max-height: 50%;
    width: auto;
    object-fit: contain;
    margin: 010px auto 6px;
    flex-shrink: 0;
  }

  /* Text unten – kein Scroll */
  .panel:not(.panel-color) .product-box .product-text {
    flex: 1 1 auto;
    overflow: visible;
  }

}

@media (max-width: 1250px) {

  /* Produkttext auf Mobile IMMER sichtbar */
  .panel:not(.panel-color) .product-box .product-text {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .p-slide h3 {
   font-size: 1.0rem !important;
   font-weight: 700 !important;
   color: #fff !important;
   margin-top: -1rem !important;

  }
}

@media (max-width: 1250px) {

  .panel:not(.panel-color) .product-text p {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

}

@media (max-width: 1250px) {

  /* Desktop-Padding der Product-Box auf Mobile reduzieren */
  .panel:not(.panel-color) .product-box {
    padding: 0.5rem !important;
  }

}

@media (max-width: 1250px) {

  /* Produktbox skaliert insgesamt */
  .panel:not(.panel-color) .product-box {
    padding: clamp(0.5rem, 2.5vw, 1rem) !important;
  }

  /* Slide flexibel, aber stabil */
  .panel:not(.panel-color) .product-box .p-slide {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  /* Bild: fester Anteil, wächst NICHT unendlich */
  .panel:not(.panel-color) .product-box .p-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;

    /* Bildanteil klar begrenzen */
    max-height: clamp(50px, 1vw, 160px);

    flex-shrink: 0;
    margin: 0 auto;
    display: block;
  }

  /* Text bekommt immer Platz */
  .panel:not(.panel-color) .product-text {
    flex: 1 1 auto;
    opacity: 1 !important;
    transform: none !important;
  }

}

@media (max-width: 1250px) {

  /* Product-Box darf in der Höhe wachsen */
  .panel:not(.panel-color) .product-box {
    max-height: none !important;
    max-width: 600px !important;
  }

  /* Slide richtet sich nach Inhalt */
  .panel:not(.panel-color) .product-box .p-slide {
    min-height: unset !important;
  }

}

@media (max-width: 1250px) {

  .panel:not(.panel-color) .product-box .p-slide img {
    width: auto;
    max-width: 45%;
    height: 10vh;

    /* kontrolliert, tablet-gebremst */
    max-height: clamp(180px, 30vw, 260px) !important;

    object-fit: contain;
    margin: 0 auto 6px;
    display: block;
  }

}

@media (max-width: 1250px) {

  .panel:not(.panel-color) .stage-box {
    display: flex;
    flex-direction: column;
  }

  .panel:not(.panel-color) .stage-box img {
    align-self: flex-start;

  }

}

@media (max-width: 1250px) {

  .panel:not(.panel-color) .stage-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .panel:not(.panel-color) .stage-box > img:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: stretch;
    display: block;
  }

}

@media (max-width: 1250px) {

  /* Fester Abstand UNTER der Stage-Box */
  .panel:not(.panel-color) .stage-box {
    margin-bottom: 14px !important;

  }


}

@media (max-width: 360px) {

  /* etwas mehr Luft unter der Stage-Box */
  .panel:not(.panel-color) .stage-box {
    margin-bottom: 1.25rem !important;
  }

}
@media (max-width: 320px) {

  /* noch mehr Sicherheitsabstand */
  .panel:not(.panel-color) .stage-box {
    margin-bottom: 1.75rem !important;
  }

}

@media (max-width: 1250px) {

  /* Panels dürfen NICHT transformiert sein */
  .panel:not(.panel-color) {
    transform: none !important;
    position: relative !important;
  }

}
@media (max-width: 1250px) {
  .panel:not(.panel-color) .stage-box,
  .panel:not(.panel-color) .product-box {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    height: 430px !important;
  }
}
@media (max-width: 1250px) {
  .panel:not(.panel-color) .stage-box {
    margin-bottom: 14px !important;
  }
}

@media (max-width: 1250px) {
  .panel:not(.panel-color) .panel-title {
    position: static !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    margin-bottom: 25px; /* Abstand zur Stage-Box */
  }
}

@media (max-width: 1250px) {
  .panel:not(.panel-color) .stage-box,
  .panel:not(.panel-color) .product-box {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 175px) {
  .produkte-wegweiser {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
}

@media (max-width: 175px) {
  .wegweiser-current { display: none; }
}

/* -------------------------------------------- */

@media (max-width: 1250px) {

  /* Panel 1 in normalen Flow zwingen */
  .panel.panel-color {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Überschrift */
  .panel.panel-color .panel-title {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    margin-bottom: 20px;
  }

  /* Stage + Product wieder Teil des Flows */
  .panel.panel-color .stage-box,
  .panel.panel-color .product-box {
    position: static !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;

    margin-left: auto;
    margin-right: auto;
    width: 88%;
    max-width: 520px;
  }

  /* fester Abstand zwischen Stage und Product */
  .panel.panel-color .stage-box {
    margin-bottom: 14px;
  }

}

@media (max-width: 500px) {
  .produkte-page .horizontal-wrapper,
  .produkte-page main.produkte {
    padding-top: 40px !important; /* 40–50px, wie du willst */
  }
}

@media (max-width: 1250px) {
  .panel.panel-color {
    height: auto !important;
    min-height: auto !important;
    padding-bottom: clamp(20px, 6vh, 40px);
    overflow: visible !important;
  }

  .produkte-page #panel-color .panel-title {
  margin-top: 19vh !important;
  text-align: center !important;
  width: 100% !important;
}


.p-arrow {
  position: absolute !important;
  top: 20% !important;
  transform: translateY(-50%) !important;
}

}

/* --------------------------------- */ 

@media (max-width: 1250px) {
  .panel:not(.panel-color) .product-text {
    height: 51vh !important;     /* echte, messbare Höhe */
    overflow: hidden;      /* verhindert unten rauslaufen */
  }
}

/* PANEL 2–14 / Produkttext p */
@media (max-width:1250px){
  .panel:not(.panel-color) .p-slide p{
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }
}

/* PANEL 2–14 / Produktüberschrift h3 */
@media (max-width:1250px){
  .panel:not(.panel-color) .p-slide .product-text h3{
    font-size: 1.1rem !important;
    margin-top: -6px !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }
}

/* PANEL 2–14 / Extra klein – wie bei Panel Color */
@media (max-width:340px){
  .panel:not(.panel-color) .p-slide p{
    font-size: 0.9rem !important;
    line-height: 1.0 !important;
  }
}

@media (max-width:1250px){
  .panel:not(.panel-color) .stage-box{
    height: auto !important;
    padding: 0 !important;
  }

  .panel:not(.panel-color) .stage-box > img{
    display: block;
  }

  .panel:not(.panel-color) .stage-pills{
    margin-top: 6px !important;
  }
}

/* ----------------------------------- */ 

/* ============================
   MOBIL: Popup für Panel 2–14
   eigenständiges Overlay wie
   Panel Color Mobile Popup
   ============================ */
@media (max-width: 1250px) {

  /* Desktop-Popup in der StageBox AUS auf Mobil */
  .panel:not(.panel-color) .info-popup {
    display: none !important;
  }

  /* Neues universelles Mobile-Popup */
  .info-popup-mobile {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    overflow-y: auto;

    padding: 10px 10px 10px;

    background: rgba(209, 170, 63, 0.2);
    backdrop-filter: blur(6px);

    /* zentrierte Box wie Panel Color mobile */
    width: min(75vw, 300px);
    height: 70vh;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    border-radius: 14px;

    border: 1px solid rgba(255,255,255,0.25);
  }

  .info-popup-mobile.is-open {
    display: block;
  }

  /* Innenaufbau */
  .info-popup-mobile .info-item {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
  }

  /* Bild */
  .info-popup-mobile img {
    display: block;
    max-width: 160px;
    margin: 0 auto 16px;
  }

  /* Titel */
  .info-popup-mobile h4 {
    font-size: clamp(16px, 4vw, 18px);
    margin-bottom: 12px;
  }

  /* Text */
  .info-popup-mobile .info-text p {
    font-size: clamp(15px, 3.8vw, 16px) !important;
    line-height: 1.32 !important;
  }

  /* Close Button */
  .info-popup-mobile .info-close-mobile {
    position: sticky;
    top: 0;
    margin-left: auto;
    font-size: 28px;
    color: #fff;
    border: none;
    background: none;
    cursor: pointer;
    display: block;
  }
}

@media (max-width: 1250px) {
  .info-popup-mobile .info-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important; 
  }

  .info-popup-mobile img {
    order: 1;
    margin: 0 auto 8px !important;
  }

  .info-popup-mobile .info-text {
    order: 2;
    width: 100%;
  }

  .info-popup-mobile .info-text h4 {
    margin-bottom: 6px !important;
  }
}

@media (max-width: 1250px) {

  .info-popup-mobile img {
    max-width: clamp(80px, 30vw, 130px) !important;
    height: auto !important;
    object-fit: contain !important;
  }

}

@media (max-width:1250px){
  .info-popup-mobile {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* Farbe wird per JS gesetzt */
  }
}


/* ---------------------------------*/ 

/* =========================================================
   MOBIL ONLY – Panel 13 (Emergency Service)
   Eigenes Bild-Popup wie ein großes Modal
   ========================================================= */
@media (max-width: 1250px) {

  /* i-Button in der Stagebox NUR bei Panel 13 */
  #panel-emergency-service .stage-box .info-trigger-emergency {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(209, 182, 98, 0.85);
    color: #ffffff;
    font-weight: 700;
    border: none;
    cursor: pointer;
    z-index: 15;
    font-size: 1rem;
  }

  /* Desktop NICHT anzeigen */
  @media (min-width: 1251px) {
    #panel-emergency-service .stage-box .info-trigger-emergency {
      display: none !important;
    }
  }

  /* -----------------------------------------
     Popup selbst — fullscreen Overlay
     ----------------------------------------- */
  .emergency-popup-mobile {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: none; /* wird per JS auf block gesetzt */
    justify-content: center;
    align-items: center;

    padding: 20px;

    background: rgba(44, 17, 0, 0.35);
    backdrop-filter: blur(6px);
  }

  .emergency-popup-mobile.is-open {
    display: flex;
  }

  /* Bild groß, aber immer responsiv */
  .emergency-popup-mobile img {
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.35);
  }

  /* Close: oben rechts im Popup */
  .emergency-popup-mobile .close-emergency-popup {
    position: absolute;
    top: 18px;
    right: 18px;

    font-size: 32px;
    color: #fff;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
  }
}

@media (max-width:600px){
  .panel:not(.panel-color) .stage-box{
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;

    /* Falls irgendwo Padding die Höhe unnötig groß macht */
    padding-bottom: 0 !important;
  }

  /* Bild darf normal fließen → kein erzwungenes Strecken */
  .panel:not(.panel-color) .stage-box > img{
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}


@media (max-width:1250px){
  #panel-color .colorcare-stage{
    height: auto !important;
    min-height: unset !important;
  }

  #panel-color .colorcare-stage > img{
    max-height: none !important;
    object-fit: contain !important;
  }
}

@media (max-width:500px){
#panel-colorcare {
  margin-top: 80px !important;  /* kannst du anpassen (20–120px) */
}
}

@media (min-width: 501px) and (max-width:1250px){
#panel-colorcare {
  margin-top: 120px !important;  /* kannst du anpassen (20–120px) */
}
}

@media (max-height: 560px) {

  /* Wegweiser selbst darf scrollen durchlassen */
  .produkte-page .produkte-wegweiser {
    overflow: visible !important;
  }

  /* Die UL-Liste bekommt Scroll */
  .produkte-page .produkte-wegweiser:not(.collapsed) ul {
    max-height: 55vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; /* für iOS */
    overscroll-behavior: contain !important;
  }
}

@media (max-width: 500px) {
body.produkte-page .rh-nav {
    top: calc(100px + env(safe-area-inset-top)) !important;
}
}
@media (max-height: 600px) {

  /* Eltern-Container darf Scroll nicht blockieren */
  body.produkte-page .rh-nav.open {
    overflow: visible !important;
    max-height: 65vh !important;
  }

  /* Der eigentliche scrollbare Bereich */
  body.produkte-page .rh-nav.open ul {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-right: 6px;
  }
}


@media (max-width: 1250px) {

  #back-to-top {
    position: fixed;
    right: 12px;
    bottom: 18px;

    width: 35px;
    height: 35px;

    border-radius: 50%;
    border: none;

    background: rgba(209, 181, 98, 0.705);
    color: #fff;
    font-size: 18px;
    line-height: 35px;
    text-align: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.35);

    cursor: pointer;
    z-index: 999999; /* über ALLEM */

    opacity: 1 !important;
    pointer-events: auto !important;
  }
}



/* Referenziert: dein aktuelles produkte HTML/CSS/JS */

/* ---------------------------------------------
   1) Touch-Feedback für Produkt-Slides (Panel Color + Panel 2–14)
   --------------------------------------------- */
@media (max-width: 1250px) {

  .p-slide:active, 
  .ccp-slide:active {
    transform: scale(0.98);
    transition: transform 0.1s ease !important;
  }
}

/* ---------------------------------------------
   2) Touch-Feedback für alle "i"-Buttons in Stageboxen
   --------------------------------------------- */
@media (max-width: 1250px) {

  .stage-box .info-trigger:active,
  #panel-color .info-trigger:active {
    transform: scale(0.88);
    opacity: 0.75;
    transition: transform 0.1s ease, opacity 0.1s ease !important;
  }
}

/* ---------------------------------------------
   3) Touch-Feedback für den Back-to-Top Button
   --------------------------------------------- */
@media (max-width: 1250px) {

  #back-to-top:active {
    transform: scale(0.90);
    transition: transform 0.1s ease !important;
  }
}



/* Referenziert: dein aktuelles produkte HTML/CSS/JS */
/* Produkte-Seite: doppelte Parallax-Render durch ::before deaktivieren */

.produkte-page #parallax .layer::before {
    background: none !important;
    content: none !important;
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */
/* Produkte-Page: Parallax-Layer 2–5 deutlich höher auf MOBIL */

@media (max-width:1250px) {

  .produkte-page #parallax .layer-2,
  .produkte-page #parallax .layer-3,
  .produkte-page #parallax .layer-4,
  .produkte-page #parallax .layer-5 {
      height: 1900vh !important;   /* viel länger */
  }
}
/* Referenziert: dein aktuelles produkte HTML/CSS/JS */
/* Produkte-Seite: Parallax-Layer 2–5 strecken + repeat aktivieren */

@media (max-width:1250px) {

  .produkte-page #parallax .layer-2,
  .produkte-page #parallax .layer-3,
  .produkte-page #parallax .layer-4,
  .produkte-page #parallax .layer-5 {
      background-repeat: repeat-y !important;
      background-size: 100% auto !important;  /* damit es sich sauber wiederholt */
  }
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */
/* Produkte-Page: Parallax-Layer 2–5 auf DESKTOP mit repeat-x */

@media (min-width:1251px) {

  .produkte-page #parallax .layer-2,
  .produkte-page #parallax .layer-3,
  .produkte-page #parallax .layer-4,
  .produkte-page #parallax .layer-5 {
      background-repeat: repeat-x !important;
      width: 1900vw !important;
      background-size: auto 100% !important; /* horizontal wiederholen */
  }
}

/* Referenziert: dein aktuelles produkte HTML/CSS/JS */
/* MOBIL – echter Pinch-Zoom für Emergency-Popup-Bild */

@media (max-width:1250px) {

  .emergency-popup-mobile .emergency-zoom-wrapper {
      overflow: auto !important;
      touch-action: pinch-zoom !important;
      -ms-touch-action: pinch-zoom !important;

      /* Zoom-Container braucht eine Mindesthöhe */
      max-height: 70vh;
  }

  .emergency-popup-mobile .emergency-zoom-wrapper img {
      width: 100%;
      height: auto;
      object-fit: contain;
      transform-origin: center center;
  }
}

/* responsiv fertig */

.produkte-page .panel {
  scroll-margin-top: calc(var(--wegweiser-top, 0px) + 44px);
}