/* === 1. DEFINITION DER FARBPALETTE === */
:root {
    /* Helle Farben (Standard) */
    --bg-main: #f8f8f8;          /* Hintergrund der ganzen Seite */
    --bg-card: #ffffff;          /* Hintergrund von Karten/Containern */
    --text-main: #222222;        /* Haupttextfarbe */
    --text-muted: #555555;       /* Nebentext */
    --border-color: #dddddd;     /* Rahmen */
    --accent-color: #4444ff;     /* Deine Akzentfarbe (Blau) */
    --input-bg: #ffffff;         /* Hintergrund von Eingabefeldern */
    --shadow-color: rgba(0,0,0,0.1); /* Schatten */
    
    /* Spezielle Verläufe (Hero) */
    --hero-gradient: linear-gradient(135deg, #c0c0ff, #eaeaff);

     /* Resinique */
    --hero-resiniqueColor: #F1C6D4;
    --hero-resiniqueShape1: radial-gradient(circle at top left, #D55882 10%, transparent 10%);
    --hero-resiniqueShape2: radial-gradient(circle at bottom right, #A72A54 10%, transparent 10%);

    --color-resinique: #D55882;
    --color-woodynique: #7A3D1A;
    --color-lacy: #5DE0FD;
    --color-chaincharm: #2c335a;
    --color-jufionline: #4444ff;

    --color-valentinstag: #D63131;
    --color-ostern: #3ab128;

    --group-resinique: #fff0f5;
    --group-resiniqueSpezial: #fffae6;
    --rgba-button: rgba(255, 255, 255, 0.85);
    --rgba-buttonReversed: rgba(1, 1, 1, 0.15);
    
}

/* === 2. DARK MODE ÜBERSCHREIBUNGEN === */
/* Diese Werte greifen, wenn die Klasse .dark-mode im Body ist */
body.dark-mode {
    --bg-main: #121212;          /* Sehr dunkles Grau (angenehmer als pures Schwarz) */
    --bg-card: #1e1e1e;          /* Etwas helleres Grau für Karten */
    --text-main: #e0e0e0;        /* Fast Weiß (nicht 100%, das blendet) */
    --text-muted: #b0b0b0;       /* Helles Grau */
    --border-color: #333333;     /* Dunkle Rahmen */
    --accent-color: #7777ff;     /* Akzent etwas aufhellen, damit er auf Schwarz leuchtet */
    --input-bg: #2a2a2a;         /* Dunkle Eingabefelder */
    --shadow-color: rgba(0,0,0,0.5); /* Stärkerer Schatten für Tiefe */

    /* Dunklerer Verlauf für den Hero-Bereich */
    --hero-gradient: linear-gradient(135deg, #2a2a5a, #1a1a2e); 

    --color-resinique: #ff85a9;    /* Helleres Pink */
    --color-woodynique: #cd853f;   /* Eher Goldbraun/Peru, damit man es auf Schwarz sieht */
    --color-lacy: #5DE0FD;         /* Cyan leuchtet eh gut, kann bleiben */
    --color-chaincharm: #aab2ff;   /* Viel helleres Lila/Blau */
    --color-jufionline: #7777ff;

    --color-valentinstag: #AF2323;
    --color-ostern: #3ab128;

    --group-resinique: #1e1e1e;
    --group-resiniqueSpezial: #473900;
    --rgba-button: rgba(1, 1, 1, 0.85);
    --rgba-buttonReversed: rgba(255, 255, 255, 0.15);
}



/* RESET & BASIS */
html {
  scroll-behavior: smooth;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 160;
}

.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.logo a {
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-main);
}

.nav a {
  margin: 0 1rem;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;

}

.nav a:hover {
  color: var(--text-main);
}

.nav {
  display: flex;
  align-items: center;
  /* Dies schiebt alles nach rechts, was nach der Nav kommt (Button/Icon) */
  margin-left: auto; 
}

/* HERO */
.hero {
  background: var(--hero-gradient);
  text-align: center;
  padding: 6rem 2rem;
}

.hero-text h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-text p {
  margin-bottom: 2rem;
}

.btn {
  background: var(--accent-color);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
}

.btn:hover {
  background: #0000cc;
}

/* KATEGORIEN - Style Update */
.categories {
  text-align: center;
  padding: 3rem 1rem;
}

.category-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Basis-Design der Karte */
.category-card {
  background: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  width: 180px;
  height: 80px;
  
  /* WICHTIG: Padding hier entfernen, damit der Link bis zum Rand geht */
  padding: 0; 
  
  display: flex;
  align-items: center;     /* Zentriert den Inhalt (den Link) vertikal */
  justify-content: center; /* Zentriert den Inhalt (den Link) horizontal */
  
  transition: 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Der Link füllt nun die ganze Karte aus */
.category-card a {
  text-decoration: none;
  color: #333;
  font-weight: 700;
  font-size: 1.1rem;
  z-index: 2;
  text-shadow: 0 2px 10px rgba(255,255,255,0.5);
  
  /* WICHTIG: Der Link wird so groß wie die Karte */
  display: flex;           /* Damit wir den Text darin zentrieren können */
  width: 100%;
  height: 100%;
  align-items: center;     /* Text vertikal mittig */
  justify-content: center; /* Text horizontal mittig */
}

/* === 🟣 RESINIQUE (Pinke Wellen) === */
.category-card:has(a[href*="Resinique"]) {
  background-color: #F1C6D4;
  border-color: #D55882;
  background-image: 
    radial-gradient(circle at top left, #D55882 20%, transparent 20%),
    radial-gradient(circle at bottom right, #A72A54 20%, transparent 20%);
  background-size: 150% 150%; /* Muster anpassen für kleine Karte */
}
.category-card:has(a[href*="Resinique"]) a {
  color: black; /* Dunkler Text */
}
.category-card:has(a[href*="Resinique"]):hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 20px rgba(213, 88, 130, 0.4);
}


/* === 🟫 WOODYNIQUE (Holzmaserung) === */
.category-card:has(a[href*="Woodynique"]) {
  background-color: #5C2608;
  border-color: #7A3D1A;
  background-image: 
    repeating-linear-gradient(90deg, 
      rgba(255, 255, 255, 0.05) 0, 
      rgba(255, 255, 255, 0.05) 1px, 
      transparent 1px, 
      transparent 20px);
}
.category-card:has(a[href*="Woodynique"]) a {
  color: #F6B693; /* Heller Text */
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.category-card:has(a[href*="Woodynique"]):hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 20px rgba(122, 61, 26, 0.5);
}


/* === 🟦 LACY (Cyan/Schwarz Pop) === */
.category-card:has(a[href*="Lacy"]) {
  background-color: #01080F;
  border-color: #5DE0FD;
  /* Simuliert den diagonalen Streifen mit CSS Gradient */
  background: linear-gradient(135deg, #01080F 40%, #5DE0FD 40%, #5DE0FD 60%, #01080F 60%);
}
.category-card:has(a[href*="Lacy"]) a {
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,1);
}
.category-card:has(a[href*="Lacy"]):hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 0 20px rgba(93, 224, 253, 0.6); /* Neon Glow */
}


/* === ⛓️ CHAINCHARM (Gitter/Lila) === */
.category-card:has(a[href*="ChainCharm"]) {
  background-color: #2c335a;
  border-color: #BD9EAB;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 15px 15px;
}
.category-card:has(a[href*="ChainCharm"]) a {
  color: #BD9EAB; /* Altrosa Text */
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.category-card:has(a[href*="ChainCharm"]):hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 20px rgba(189, 158, 171, 0.4);
}

/* PRODUKTE */
.products {
  padding: 3rem 1rem;
  text-align: center;
  background: var(--bg-card);
}

.product-grid {
  display: grid;
  
  /* MOBIL: Standardmäßig 2 Spalten mit kleinem Abstand */
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem; 
  
  margin-top: 2rem;
  justify-content: center;
}

.product-card {
  background: var(--bg-card);
  padding: 0.5rem; /* (z.B. von 1.5rem oder 0.75rem weiter runter) */
  padding-bottom: 1rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  transition: 0.3s;
  overflow-wrap: break-word;
}

input, select, textarea {
    background-color: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.product-card img {
  width: 100%;  /* Das Bild nimmt die volle Breite der Karte ein */
  
  /* 1. Feste Höhe definieren */
  /* Experimentiere mit diesem Wert! 250px oder 300px sind oft gut. */
  height: 300px; 
  
  /* 2. Die Magie: Zuschneiden statt verzerren */
  object-fit: cover; 
  
  /* Optional: Falls deine Karten abgerundete Ecken haben, 
     sollte das Bild oben auch abgerundet sein */
  border-radius: 10px 10px 0 0; 
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px var(--shadow-color);
}

.home-page .product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.product-btn-option {
  margin-top: 0.5rem;
}

.home-page .product-card .product-btn-option {
	/* margin-top: auto; */
	align-self: center;
	width: 70%;
}

.product-card img {
  width: 100%;
  border-radius: 8px;
}

.product-card h3 {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Kleinere Labels für Optionen */
.product-card .option label {
  font-size: 0.8rem;
}

/* Weniger Padding in den Auswahlfeldern */
.product-card select,
.product-card .quantity-input {
  padding: 0.4rem;
  font-size: 0.85rem;
}

.product-card .price {
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

.product-card a {
  background: var(--bg-card);
  color: var(--text-main);
  border: none;
  cursor: pointer;
}

.price {
  font-weight: bold;
  margin: 0.5rem 0;
  color: var(--accent-color);
}

button {
  background: var(--accent-color);
  color: white;
  border: none;
  padding: 0.7rem 1rem;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #0000cc;
}

/* FOOTER */
.footer {  
  background: #222;
  color: white;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.9rem;
}

.footer a {
  color: #aaa;
  text-decoration: none;
}

.footer a:hover {
  color: white;
}

/* PRODUKTDETAIL */
.product-detail {
  padding: 3rem 1rem;
  background: var(--bg-main);
}

.product-detail-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 900px;
  margin: auto;
  align-items: flex-start;
  justify-content: center;
  background-color: var(--bg-main);
}

.product-detail img {
  max-width: 100%; /* More responsive */
  width: 350px;
  border-radius: 10px;
}

.detail-info {
  max-width: 400px;
}

.detail-info h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.detail-info .price {
  font-size: 1.3rem;
  color: var(--accent-color);
  font-weight: bold;
}

.detail-info .desc {
  margin: 1rem 0 2rem 0;
  color: var(--text-muted);
}

/* CHECKOUT */
.checkout {
  padding: 3rem 1rem;
  max-width: 600px;
  margin: auto;
}

.checkout h2, .checkout h3, .checkout h4 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.checkout form {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.checkout label {
  margin-top: 1rem;
  font-weight: 600;
}

.checkout input, .checkout textarea {
  margin-top: 0.5rem;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.checkout button {
  margin-top: 2rem;
}

.btn-primary-checkout {
  margin-top: 2rem;
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  background: #f4f4f4;
  padding: 0.8rem;
  margin: 0.5rem 0;
  border-radius: 5px;
  align-items: center;
}

.cart-item button {
  background: none;
  border: none;
  color: #c00;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 0 2rem 0;
}


.cart-buttons {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}


#add-to-cart {
  margin-top: 1.5rem;
  padding: 0.8rem 1.5rem;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#add-to-cart:hover {
  background: #0000cc;
}

.cart-item {
  /* This changes how items are aligned */
  justify-content: space-between;
  align-items: flex-start; /* Aligns to the top */
}

.cart-item-details {
  display: flex;
  flex-direction: column; /* Stacks name and options */
  gap: 0.25rem;
  margin-right: 1rem; /* Space before price */
}

.cart-item-options {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.cart-item-price {
  /* Groups the price and remove button */
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cart-item-price span {
  font-weight: bold;
  white-space: normal; /* ERLAUBT Umbruch, war 'nowrap' */
}

/* === 🔧 FIX: Warenkorb-Icon sichtbar auf Mobil === */
.cart-icon {
  display: none;
  text-decoration: none;
  color: var(--text-main);
  font-size: 1.5rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 20;
}

@media (max-width: 850px) {
  .nav {
    display: none;
  }

  .header {
    min-height: 4rem; /* z.B. 64px, gibt den Icons Platz */
  }

  .cart-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    right: 0.1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .cart-icon img {
    width: 45px;  /* oder 40px, je nach Wunsch */
    height: 45px; /* oder 40px, je nach Wunsch */
  }

  /* 🧮 Mobile Zähler */
  #cart-count-mobile {
    background: #ff4444;
    color: white;
    border-radius: 50%;
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
    font-weight: bold;
    position: relative;
    top: -8px;
    left: -10px;

  }


  #theme-toggle {
    display: flex !important; /* Überstimmt das display:none der .nav */
    position: absolute;      /* Damit wir ihn frei positionieren können */
    right: 4.5rem;           /* Platz lassen für das Warenkorb-Icon rechts daneben */
    top: 50%;
    transform: translateY(-50%);
    width: 35px;             /* Mobil etwas größer für bessere Bedienbarkeit */
    height: 35px;
    margin: 0;               /* Margin zurücksetzen für absolute Positionierung */
  }

  /* Sicherstellen, dass das Warenkorb-Icon nicht überlappt */
  .cart-icon {
    display: flex !important;
    right: 1rem;             /* Etwas Abstand zum Rand */
    /* ... restliche cart-icon Styles ... */
  }


.product-card img {
    /* 1. Bild soll den Bereich füllen (zuschneiden), nicht schrumpfen */
    object-fit: cover; 
    
    /* 2. Hintergrund transparent ist okay, aber meist nicht nötig bei cover */
    background-color: transparent; 
    
    /* 3. Padding der Karte (0.5rem) ausgleichen */
    /* Wir ziehen das Bild über den Rand hinaus */
    width: calc(100% + 1rem);       /* 100% + 0.5rem links + 0.5rem rechts */
    margin: -0.5rem -0.5rem 0.5rem -0.5rem; /* Zieht das Bild in die Ecken (Oben, Rechts, Unten, Links) */
    
    /* 4. Höhe festlegen */
    height: 200px;
    
    /* 5. Runde Ecken NUR OBEN, damit es perfekt in die Karte passt */
    border-radius: 10px 10px 0 0; 
    
    /* 6. Alten Fix entfernen */
    clip-path: none;
  }
}

/* === 🎨 Einheitliche Option-Felder === */
.options,
.optionsL {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;       /* zentriert horizontal */
  align-items: center;            /* vertikal schön mittig */
  margin: 1rem auto;              /* gleichmäßiger Abstand oben/unten */
  width: 90%;                     /* etwas Abstand zum Rand */
  max-width: 400px;               /* Begrenzung auf Desktop */
}

.option {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  flex: 1 1 150px;                /* flexible Breite */
  min-width: 120px;
}

.option label {
  font-weight: 500;
  text-align: left;
}

select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: var(--bg-card);
  width: 100%;
}

/* === 🎨 Styling für Mengen-Input === */
input.quantity-input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: var(--input-bg);
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem; /* Passt es an die Selects an */
}

/* Verhindert Pfeile in Firefox */
input[type="number"].quantity-input {
  -moz-appearance: textfield;
}

/* Verhindert Pfeile in Chrome, Safari, etc. */
input.quantity-input::-webkit-outer-spin-button,
input.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* DESKTOP: Auf größeren Bildschirmen (>700px) wechseln wir zurück 
   zu deinem flexiblen Raster-Layout mit größerem Abstand */
@media (min-width: 700px) {
  .product-grid {
    /* Deine alte Regel für große Bildschirme */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
  }
    .product-card {
    padding: 1.5rem; /* (Dein ursprünglicher Desktop-Wert) */
    padding-bottom: 2rem;
  }

  /* Setze die Schriftgrößen wieder hoch */
  .product-card h3 {
    font-size: 1.1rem; /* (Oder dein gewünschter Desktop-Wert) */
  }

  .product-card .price {
    font-size: 1rem;
  }

  /* Setze die Options-Felder wieder hoch */
  .product-card .option label {
    font-size: 0.9rem;
  }

  .product-card select,
  .product-card .quantity-input {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
  
 .category-card {
  width: 200px;
  padding: 0;
 }

  .category-card a {
  display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 1rem;
 }

 .product-detail img, 
  .gallery { /* Falls du später die Galerie nutzt */
    position: sticky;
    top: 100px; /* Abstand zum Header */
    align-self: flex-start;
  }
}

/* === 🍔 NEU: Sidebar Navigation === */

/* --- 1. Der Toggle-Button (Hamburger) --- */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10000; /* Muss über Sidebar und Overlay sein */
  
  /* Desktop: Normal im Flow */
  margin-right: 1rem;
  align-self: center;
  position: relative; 
}

.menu-toggle:hover {
  background: var(--rgba-buttonReversed);
  border-radius: 5px; /* Optional: Macht den Hintergrund-Fleck rundlich */
}

.menu-toggle span {
  width: 30px;
  height: 3px;
  background: var(--text-muted); /* Dunkle Striche, passt gut */
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* --- 2. Die Sidebar selbst --- */
.sidebar {
  height: 100vh; /* Volle Höhe */
  width: 280px;  /* Angenehme Breite */
  background: var(--bg-card);
  border-right: 1px solid var(--border-color);
  box-shadow: 2px 0 10px var(--shadow-color);
  
  position: fixed;
  top: 0;
  left: 0;
  
  transform: translateX(-100%); 
  transition: transform 0.3s ease-in-out; 
  z-index: 150; 
}

.sidebar.open {
  transform: translateX(0); /* Sichtbar machen (reinsliden) */
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 5rem 0 2rem 0; 
}

.sidebar-nav h3 {
  padding: 0 1rem 0.5rem 1rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.sidebar-nav a {
  text-decoration: none;
  color: var(--text-main);
  font-weight: 500;
  
  /* --- NEU: Angepasst für den Rand --- */
  padding: 1rem;
  padding-left: calc(1rem - 4px); /* Hält den Text aliniert */
  border-left: 4px solid transparent; /* Standardmäßig unsichtbar */
  border-radius: 0 5px 5px 0; /* Passt den Radius an */
  
  /* Fügt den Rand zur Hover-Animation hinzu */
  transition: border-color 0.2s ease-in-out, background 0.3s;
}

.sidebar-nav a:hover {
  background: var(--border-color); /* Leichter Hover-Effekt */
}

.sidebar-nav hr {
  margin: 1rem;
  border: none;
  border-top: 1px solid #eee;
}

/* --- 3. Das Overlay (Hintergrund-Abdunklung) --- */
.sidebar-overlay {
  display: none; /* Standardmäßig unsichtbar */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4); /* Dunkler Hintergrund */
  z-index: 140; /* Unter Sidebar, über dem Rest */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.sidebar-overlay.open {
  display: block; /* Sichtbar machen */
  opacity: 1;
}

/* --- 4. Animation für den Button (wird zu 'X') --- */
.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0; /* Mittleren Strich ausblenden */
}

.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}

/* --- 5. Mobile Anpassungen (sehr wichtig!) --- */
@media (max-width: 700px) {
  .menu-toggle {
    /* Auf Mobil positionieren wir ihn absolut,
       passend zu deinem .cart-icon (das auch absolut ist) */
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* .is-stuck-in-header ist für Scrollen, 
     .open ist für Klick. Sie können gleichzeitig aktiv sein. */
  
  .menu-toggle.open {
     /* Wenn offen, stelle sicher, dass er über dem Overlay bleibt */
     z-index: 10000;
  }

  /* Die .is-stuck-in-header-Klasse aus deinem JS (fürs Scrollen) */
  /*.menu-toggle.is-stuck-in-header {
      position: fixed;
      top: 1.2rem;
      left: 1rem;
      background: rgba(255,255,255,0.8); /* Leichter Hintergrund, wenn "sticky" */
     /* border-radius: 5px;
      backdrop-filter: blur(2px);
  }*/

   .category-card {
  width: 160px;
  padding: 0;
 }
}

/* === 🍔 NEU: Sidebar Suche Styling === */

.sidebar-search {
  /* Positioniert die Suche über den Links */
  padding: 0 1rem 1rem 1rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}

#searchInput {
  width: 100%;
  padding: 0.6rem;
  background: var(--input-bg); 
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 0.9rem;
  -webkit-appearance: none; /* Verhindert iOS-Styling */
}

.search-results {
  display: none; /* Standardmäßig versteckt */
  margin-top: 0.5rem;
  max-height: 250px; /* Höhe, bevor Scrollen beginnt */
  overflow-y: auto;
  background: var(--bg-card); 
  border: 1px solid var(--border-color);
  border-radius: 5px;
}

/* === 🔍 Styles für die Suchergebnisse mit Bild === */

.search-result-item {
  display: flex;
  align-items: center; /* Vertikal zentrieren */
  gap: 0.8rem;         /* Abstand zwischen Bild und Text */
  padding: 0.75rem;
  text-decoration: none;
  color: var(--text-main); /* Wichtig! */
  border-bottom: 1px solid var(--border-color);

  /* Der farbige Rand links */
  border-left: 4px solid var(--border-color); 
  padding-left: 0.5rem; 
  
  transition: background 0.2s;
}

/* NEU: Das kleine Vorschaubild */
.search-result-image {
  width: 50px;        /* Feste Breite */
  height: 50px;       /* Feste Höhe */
  object-fit: cover;  /* Bild wird zugeschnitten, nicht verzerrt */
  border-radius: 4px; /* Leicht abgerundet */
  background: #f0f0f0;
  flex-shrink: 0;     /* Verhindert, dass das Bild gequetscht wird */
}

/* NEU: Container für Name und Shop */
.search-result-info {
  display: flex;
  flex-direction: column; /* Untereinander */
  overflow: hidden;       /* Wichtig für lange Texte */
  flex-grow: 1;           /* Nimmt den restlichen Platz ein */
}

.search-result-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.2;
}

/* Alternative: Wenn du willst, dass der Name umbricht (mehrzeilig wird), 
   lösche die 3 Zeilen unter "Falls der Name..." und nutze stattdessen:
   line-height: 1.2; 
*/

.search-result-shop {
  font-size: 0.75rem;
  color: #666;
  margin-top: 2px;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: var(--border-color);
}


/* === 👣 NEU: Sticky Footer Fix === */

.page-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* === 📖 NEU: Styling für Impressum/Rechtstexte === */

.legal-content {
  /* Sorgt für Abstand und gute Lesbarkeit auf Desktop */
  max-width: 800px;
  margin: auto;
  padding: 3rem 2rem;
  background: var(--bg-card); /* Weißer Hintergrund, falls .products etc. grau sind */
}

/* Passt die Schriftgrößen an, ähnlich wie .detail-info */
.legal-content h2 {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--text-main);
}

.legal-content h3 {
  font-size: 1.5rem;
  margin-top: 2.5rem; /* Mehr Abstand zwischen den Abschnitten */
  margin-bottom: 1rem;
  border-bottom: 1px solid #eee; /* Trennlinie */
  padding-bottom: 0.5rem;
  color: var(--text-main);
}

.legal-content h4 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

/* Wichtig für die Lesbarkeit von Textwänden */
.legal-content p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--text-muted);
}

.legal-content p strong {
  color: var(--text-main);
}

/* === 📞 NEU: Styling für Kontakt-Seite === */

.contact-page {
  max-width: 900px;
  margin: auto;
  padding: 3rem 2rem;
  background: var(--bg-card); /* Leichter Hintergrund, um vom Header abzuheben */
}

.contact-page h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--text-main);
}

.contact-page .intro {
  font-size: 1.1rem;
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.outro {
  font-size: 0.9rem; /* Etwas kleiner, da es "Kleingedrucktes" ist */
  text-align: center;
  color: var(--text-muted);     /* Weicheres Grau statt Hart-Schwarz */
  margin-bottom: 0; /* Wird jetzt durch die Sektion gesteuert */
  max-width: 700px; /* Etwas breiter für die Lesbarkeit */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6; /* Besserer Zeilenabstand */
}

.contact-page h3 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}

/* Grid für die Kontakt-Karten */
.contact-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  display: flex; /* Sorgt für bessere Ausrichtung */
  flex-direction: column;
}

.contact-card .contact-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 1rem;
  color: var(--accent-color); /* Nutzt deine Haupt-Shopfarbe */
}

.contact-card h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.contact-card p {
  color: #666;
  margin-bottom: 1.5rem;
  flex-grow: 1; /* Schiebt den Button nach unten */
}

.contact-card .contact-address {
  font-style: italic;
  flex-grow: 0; /* Adresse soll nicht "wachsen" */
  min-height: 0;
}

/* Style für sekundäre/Placeholder-Buttons */
.btn-secondary {
  background: #eee;
  color: #444;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  font-weight: 500;
}

/* FAQ Vorlagen-Stil */
.contact-page .faq-title {
  margin-top: 4rem;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.faq-item h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.faq-item p {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}


/* CHECKOUT RESULT STYLING */
.checkout-results {
  /* Sorgt für Abstand und gute Lesbarkeit auf Desktop */
  max-width: 800px;
  margin: auto;
  padding: 3rem 2rem;
}

/* Passt die Schriftgrößen an, ähnlich wie .detail-info */
.checkout-results h2 {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--text-main);
}

.checkout-results h3 {
  font-size: 1.5rem;
  margin-top: 2.5rem; /* Mehr Abstand zwischen den Abschnitten */
  margin-bottom: 1rem;
  border-bottom: 1px solid #eee; /* Trennlinie */
  padding-bottom: 0.5rem;
  color: #333;
}

.checkout-results h4 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: #444;
}

/* Wichtig für die Lesbarkeit von Textwänden */
.checkout-results p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--text-muted);
  text-align: center;
}

.checkout-results p strong {
  color: var(--text-main);
}

/* Container, der den Button zentriert */
.button-container {
  display: flex;
  justify-content: center; 
  /* Verwenden Sie width: 100%; wenn der Container selbst nicht die volle Breite einnimmt */
  width: 100%;
}


/* Ihr ursprünglicher Button-Stil */
.checkout-btn {
  display: flex;
  align-items: center; 
  background: var(--accent-color);
  color: #e0e0e0;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  /* text-align: center; <-- Kann entfernt werden, da display: flex verwendet wird */
}

.checkout-btn:hover {
  background: #0000cc;
}

/* === 💅 NEU: Schöneres Checkout-Seiten-Styling === */

/* 1. Das Formular-Layout zentrieren und vereinheitlichen */
.checkout-form {
  display: flex;
  flex-direction: column;
  /* Zentriert die Elemente horizontal */
  align-items: center; 
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.checkout-form label {
  width: 100%;
  /* Gibt dem Label eine maximale Breite */
  max-width: 400px; 
}

.checkout-form input {
  width: 100%;
  max-width: 400px; /* Passt die Breite an */
}

.checkout-form .btn-primary-checkout {
  width: 100%;
  max-width: 400px; /* Passt die Breite an */
}

.checkout-form small {
  max-width: 400px; /* Passt die Breite an */
  text-align: center; /* Zentriert den Text */
  margin-top: 0.5rem;
}


/* 2. Die Warenkorb-Einträge (wie Produktkarten) */
.cart-item {
  /* Hintergrund und Rand wie .product-card */
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  
  padding: 1rem;
  display: flex;
  /* Vertikal zentrieren */
  align-items: center; 
  gap: 1rem;
  margin-bottom: 1rem;
  
  /* Alte Regeln überschreiben */
  align-items: center !important;
  justify-content: flex-start !important;
}

/* 3. Das neue Bild-Styling */
.cart-item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
  /* Verhindert, dass das Bild gequetscht wird */
  flex-shrink: 0; 
}

/* 4. Details (flex-grow) und Preis (margin-left) */
.cart-item-details {
  /* Nimmt den meisten Platz ein */
  flex-grow: 1; 
  /* Stellt sicher, dass der Text oben beginnt */
  align-self: center; 
  
  /* --- FIX FÜR MOBILE OVERFLOW --- */
  min-width: 0; /* Verhindert, dass das Flex-Item überläuft */
  word-break: break-word; /* Bricht lange Produktnamen um */
}
.cart-item-price {
  /* Stellt sicher, dass der Preis oben beginnt */
  align-self: center; 
  /* Schiebt den Preis ganz nach rechts */
  margin-left: auto; 

  /* --- FIX FÜR KREUZ-ZENTRIERUNG --- */
  display: flex;
  align-items: center; /* NEU: 'baseline' statt 'center' */
  gap: 1rem;           /* Abstand zwischen Preis und Kreuz */
}

/* === FIX: "Warenkorb leer" Text zentrieren (angepasst) === */
#cart-items p {
  text-align: center;
  /* Padding-Reihenfolge: Oben, Rechts, Unten, Links.
    Hier: 1.5rem oben, 0 rechts, 3.5rem unten, 0 links.
  */
  padding: 1.5rem 0 3.5rem 0; 
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* === 🌀 NEU: Spinner für Bezahl-Button === */

/* 1. Button anpassen, damit er Text/Spinner zentriert */
.btn-primary-checkout {
    /* (behält alle alten Stile wie width, padding, etc. bei) */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Eine Mindesthöhe ist gut, damit der Button nicht "springt" */
    min-height: 54px; 
}

/* 2. Der Spinner selbst (standardmäßig versteckt) */
.button-spinner {
  display: none;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3); /* Heller Rand auf blauem Button */
  border-radius: 50%;
  border-top-color: var(--bg-card); /* Weißer "Ladebalken" */
  animation: spin 1s ease-in-out infinite;
}

/* 3. Der Lade-Zustand (wenn die Klasse .is-loading hinzugefügt wird) */
.btn-primary-checkout.is-loading {
  cursor: not-allowed;
  opacity: 0.8;
}

/* 4. Text verstecken, wenn geladen wird */
.btn-primary-checkout.is-loading .button-text {
  display: none;
}

/* 5. Spinner anzeigen, wenn geladen wird */
.btn-primary-checkout.is-loading .button-spinner {
  display: block;
}

/* 6. Die Keyframe-Animation für die Drehung */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* === ℹ️ NEU: Info-Sektion (Disclaimer) === */
.info-section {
  background-color: var(--bg-main); /* Passt zum Body-Hintergrund */
  /* Mehr vertikaler Abstand (war 3rem) */
  padding: 4rem 1.5rem; 
  text-align: center;
}

.info-section h2 {
  font-size: 1.8rem; /* Etwas kleiner als Haupt-H2 */
  margin-bottom: 1.5rem;
  color: var(--text-main);
}

/* === 🛒 NEU: Klickbarer Link im Warenkorb === */
.cart-item-link {
  display: flex;         /* Bild und Text nebeneinander */
  align-items: center;   /* Vertikal zentrieren */
  gap: 1rem;             /* Abstand wie vorher */
  flex-grow: 1;          /* Nimmt den meisten Platz ein */
  text-decoration: none; /* Kein Unterstrich */
  color: inherit;        /* Normale Textfarbe */
  min-width: 0;          /* Verhindert Mobile-Overflow */
}

/* Optional: Kleiner Hover-Effekt */
.cart-item-link:hover .cart-item-details span {
  text-decoration: underline; 
}

/* Wir sorgen dafür, dass der Preis-Block nicht gequetscht wird */
.cart-item-price {
  flex-shrink: 0;
}

/* === 🔔 NEU: Custom Alert (Toast) === */

/* 1. Der Container (oben rechts) */
#toast-container {
  position: fixed;
  /* Passt zum Header-Padding */
  top: 1.25rem; 
  right: 1.25rem;
  z-index: 9999; /* Über allem */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Verhindert, dass Klicks "durchfallen" */
  pointer-events: none; 
}

/* 2. Die einzelne Nachricht */
.toast-message {
  /* Passt zum Footer/Info-Text */
  background: #222; 
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-weight: 500;
  
  /* Animation (Startzustand: unsichtbar & rechts) */
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

/* 3. Sichtbarer Zustand */
.toast-message.show {
  opacity: 1;
  transform: translateX(0);
}

/* 4. Auf Mobilgeräten: Oben zentriert */
@media (max-width: 700px) {
  #toast-container {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    align-items: center; /* Zentriert die Toasts */
  }

  .toast-message {
    /* Volle Breite minus Ränder */
    width: 100%; 
    max-width: 400px;
    text-align: center;
  }
}

/* === 🎨 NEU: Shop-Farben für Suche === */

/* Hauptshop: JuFiOnline (Blau) */
.search-result-item[data-shop="jufionline"] {
  border-left-color: var(--accent-color); /* */
}

/* Platzhalter für deine anderen Shops von index.html */
.search-result-item[data-shop="resinique"] {
  border-left-color: #D55882; /* (Beispiel: Blass-Violett) */
}

.search-result-item[data-shop="woodynique"] {
  border-left-color: #7A3D1A; /* (Beispiel: Dunkelgrau) */
}

/* LayoutShop (Rot) 
.search-result-item[data-shop="layoutshop"] {
  border-left-color: #C82909;  Farbe! 
} */

/* Beispiel1 (Gelb) 
.search-result-item[data-shop="beispiel1"] {
  border-left-color: #E0BF00; 
} */

/* Platzhalter für deine anderen Shops von index.html */
.search-result-item[data-shop="lacy"] {
  border-left-color: #5DE0FD; /* (Beispiel: Blass-Violett) */
}

.search-result-item[data-shop="chaincharm"] {
  border-left-color: #2c335a; /* (Beispiel: Dunkelgrau) */
}

/* === 🎨 NEU: Shop-Farben für Sidebar-Links === */

/* Hauptshop: JuFiOnline (Blau) */
/* Wir zielen auf 'index.html' OHNE Anker */
.sidebar-nav a[href="index.html"] {
  border-left-color: var(--accent-color); /* */
}

.sidebar-nav a[href="../index.html"] {
  border-left-color: var(--accent-color); /* */
}

.sidebar-nav a[href="../../index.html"] {
  border-left-color: var(--accent-color); /* */
}

/* Lacy (Beispiel-Farbe) */
.sidebar-nav a[href*="ResiniqueShop.html"] {
  border-left-color: #D55882;
}

/* ChainCharm (Beispiel-Farbe) */
.sidebar-nav a[href*="WoodyniqueShop.html"] {
  border-left-color: #7A3D1A;
}

/* LayoutShop (Rot) 
.sidebar-nav a[href*="LayoutShop.html"] {
  border-left-color: #C82909;  Farbe! 
} */

/* Beispiel1 (Gelb) 
.sidebar-nav a[href*="Beispiel1Shop.html"] {
  border-left-color: #E0BF00; 
} */

/* Lacy (Beispiel-Farbe) */
.sidebar-nav a[href*="LacyShop.html"] {
  border-left-color: #5DE0FD;
}

/* ChainCharm (Beispiel-Farbe) */
.sidebar-nav a[href*="ChainCharmShop.html"] {
  border-left-color: #2c335a;
}

/* === 💅 NEU: Checkout-Zusammenfassung === */
.cart-summary {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #eee;
}
.cart-summary h4 {
  text-align: right;
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.cart-summary .grand-total {
  text-align: right;
  font-size: 1.4rem;
  color: var(--text-main);
  margin-top: 1rem;
}

/* === ℹ️ NEU: Versand-Hinweis auf Produktseiten === */
.detail-info .shipping-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: -0.6rem; /* Zieht es näher an den Preis heran */
  margin-bottom: 1rem;
}

/* === 🎨 NEU: Styling für Text-Input in Optionen === */
.option input[type='text'] {
  /* Verwendet dieselben Stile wie dein select-Feld */
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: var(--input-bg);
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem; /* Passt es an die Selects an */
}

/* Passt das Padding auf Mobilgeräten an (wie bei den Selects) */
.product-card .option input[type='text'] {
  padding: 0.4rem;
  font-size: 0.85rem;
}

/* === 📝 NEU: Styling für Textarea (Mehrzeiliges Feld) === */
.option textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: var(--input-bg);
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  
  /* Erlaubt dem Nutzer, die Höhe zu ändern (aber nicht die Breite) */
  resize: vertical; 
  min-height: 60px; /* Mindesthöhe */
}

/* Mobil-Anpassung */
.product-card .option textarea {
  padding: 0.4rem;
  font-size: 0.85rem;
}

/* === ⚖️ Styling für die Rechtliche Checkbox === */
.legal-checkbox-container {
  display: flex;
  align-items: flex-start; /* Text oben bündig mit Checkbox */
  gap: 0.8rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 400px; /* Passt sich deinen anderen Inputs an */
  text-align: left;
}

/* Die Checkbox selbst etwas größer machen */
.legal-checkbox-container input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2.4rem; /* Leichte Korrektur nach unten */
  cursor: pointer;
  flex-shrink: 0; /* Verhindert Quetschen der Box */
  border: 1px solid #ccc;
  border-radius: 3px;
  background: var(--input-bg);
}

.legal-checkbox-container label {
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.4;
  width: auto; /* Überschreibt evtl. globale Label-Breiten */
}

.legal-checkbox-container label a {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Zurück-Button Styling */
.back-button-container {
  max-width: 900px;
  margin: 0 auto 1rem auto; /* Zentriert ihn über dem Produktcontainer */
  padding: 0 1rem;
}

.back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  transition: color 0.2s;
}

.back-btn:hover {
  color: var(--accent-color); /* Farbe! */
  background: none; /* Verhindert den blauen Hintergrund deiner Standard-Buttons */
  text-decoration: underline;
}

/* Style für ausverkaufte Buttons */
button:disabled, 
button.out-of-stock {
  background-color: #ccc !important; /* Grau */
  color: #666 !important;            /* Dunkelgrauer Text */
  cursor: not-allowed !important;    /* Verboten-Mauszeiger */
  transform: none !important;        /* Kein Hüpfen beim Hover */
  box-shadow: none !important;       /* Kein Schatten */
  pointer-events: none;              /* Verhindert Klicks sicher */
}

/* ========================================= */
/* 🖼️ BILDERGALERIE (Final & Bereinigt)      */
/* ========================================= */

/* --- BASIS (Desktop & Allgemein) --- */
.gallery {
  width: 100%;
  max-width: 400px; 
  display: block; 
  margin: 0 auto; /* Zentriert die Galerie */
}

.gallery-main {
  position: relative;
  margin-bottom: 0.75rem;
}

.gallery-main img {
  width: 100%;
  height: 350px; /* Feste Höhe des Hauptbildes auf Desktop */
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Container für Thumbnails (Desktop: Flexbox für Nebeneinander) */
.gallery-thumbnails {
  display: flex;
  flex-direction: row; /* Wichtig: Nebeneinander */
  flex-wrap: wrap;     /* Umbruch erlaubt (wenn ausgeklappt) */
  gap: 10px;           /* Abstand zwischen den Bildern */
  justify-content: center; /* Mittig unter dem Hauptbild */
}

/* Einzelnes Thumbnail (Desktop) */
.gallery-thumb {
  /* HIER ist der Fix für die Quadrate: */
  width: 65px !important;  /* Erzwingt feste Breite */
  height: 65px !important; /* Erzwingt feste Höhe */
  object-fit: cover;       /* Schneidet Bild quadratisch zu */
  
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.7;
  transition: all 0.2s;
  
  /* Verhindert, dass Flexbox die Bilder quetscht oder streckt */
  flex-shrink: 0; 
  flex-grow: 0;
}

.gallery-thumb:hover {
  opacity: 1;
}

.gallery-thumb.active {
  opacity: 1;
  border-color: var(--accent-color); /* Shop-Farbe */
}

/* --- "+X" OVERLAY STYLES (Desktop) --- */
/* Der Wrapper muss genauso groß sein wie ein Thumbnail */
.gallery-thumb-wrapper {
  position: relative;
  width: 65px !important;
  height: 65px !important;
  margin: 0;
  padding: 0;
  display: block;
  flex-shrink: 0; 
}

/* Das Bild im Wrapper */
.gallery-thumb-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Der dunkle Layer mit der Zahl (+3) */
.gallery-more-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--text-main);
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  z-index: 5;
}

.gallery-more-overlay:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.gallery-collapse-btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #f4f4f4;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --- PFEIL-BUTTONS (Perfekt Zentriert) --- */
.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--rgba-button);
  border: 1px solid rgba(0,0,0,0.05);
  
  font-size: 0 !important; /* Versteckt altes Zeichen */
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  
  cursor: pointer; z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gallery-btn::after {
  font-size: 1.2rem;
  color: var(--accent-color); /* Shop-Farbe */
  font-weight: bold;
  font-family: system-ui, sans-serif;
  margin-top: -2px;
}

.gallery-btn.prev::after { content: '❮'; }
.gallery-btn.next::after { content: '❯'; }

.gallery-btn:hover {
  background: var(--bg-card);
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.gallery-btn:hover::after { color: #0000cc; }

.gallery-btn.prev { left: 10px; }
.gallery-btn.next { right: 10px; }

/* ========================================= */
/* 📱 MOBILE ANPASSUNG (Side-by-Side Grid)   */
/* ========================================= */
@media (max-width: 700px) {

  .gallery {
    /* Grid: Links Bild, Rechts Leiste (70px breit) */
    display: grid;
    grid-template-columns: 1fr 70px; 
    gap: 10px;
    max-width: 100%;
    align-items: start;
  }

  .gallery-main {
    margin-bottom: 0;
    height: auto; /* Höhe passt sich an */
  }

  .gallery-main img {
    /* Quadratisch auf Mobile für gute Platzausnutzung */
    height: auto; 
    aspect-ratio: 1 / 1; 
  }

  .gallery-thumbnails {
  display: flex;
  flex-direction: column; 
  justify-content: flex-start;
  gap: 8px;
  
  /* 1. Höhe BERECHNEN */
  /* Wir ziehen etwas mehr ab (130px), damit die Leiste sicher kleiner ist 
     als das Hauptbild und nicht unten rausragt. */
  height: calc(100vw - 130px); 
  max-height: calc(100vw - 130px); 

  /* 2. SCROLLEN ERZWINGEN */
  /* 'scroll' statt 'auto' zwingt den Balken dazu, sichtbar zu sein, 
     damit du am PC siehst, dass es funktioniert. */
  overflow-y: scroll; 
  overflow-x: hidden;
  
  /* Wichtig für echtes Mobile-Feeling */
  -webkit-overflow-scrolling: touch; 
  
  padding-right: 4px; /* Etwas Platz für den Scrollbalken */
  margin-top: 0;
  
  /* 3. SCROLLBALKEN STYLING (Damit man ihn sieht!) */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--accent-color) #eee; /* Farbe Daumen / Farbe Hintergrund */
}

/* Scrollbalken für Chrome/Safari/Edge hübsch machen */
.gallery-thumbnails::-webkit-scrollbar {
  width: 6px; /* Breite des Balkens */
}

.gallery-thumbnails::-webkit-scrollbar-track {
  background: #eee; /* Hintergrund */
  border-radius: 3px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
  background-color: var(--accent-color); /* Farbe des Schiebers (Woodynique Braun) */
  border-radius: 3px;
  border: 1px solid #eee;
}

  /* WICHTIG: Auf Mobile überschreiben wir die festen 65px vom Desktop */
  .gallery-thumb {
    width: 100% !important; /* Füllt die 70px Spalte */
    height: auto !important; /* Höhe passt sich proportional an */
    aspect-ratio: 1 / 1;     /* Bleibt quadratisch */
    opacity: 1;
    margin: 0;
  }
  
  /* Elemente verstecken, die auf Mobile stören */
  .gallery-btn,
  .gallery-more-overlay,
  .gallery-collapse-btn {
    display: none !important;
  }
  
  /* JS-Wrapper ignorieren/auflösen, falls vorhanden */
  .gallery-thumb-wrapper {
    display: contents !important;
  }
  
  /* Bild im Wrapper muss sich auch anpassen */
  .gallery-thumb-wrapper img {
    width: 100% !important;
    height: auto !important;
  }
}

/* Checkbox Container Styling */
.checkbox-container {
  display: flex;
  flex-direction: column; /* Untereinander auflisten */
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: var(--input-bg);
  width: 100%;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none; /* Verhindert Textmarkierung beim schnellen Klicken */
}

/* Checkbox selbst etwas größer machen */
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-color); /* Deine Shop-Farbe! */
}

/* Container für die Gruppen (Grundfarbe, Zusatzfarbe etc.) */
.option-group {
  width: 100%;
  border: 1px solid #eee;
  padding: 0.8rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  background-color: var(--bg-card);
}

.option-group h4 {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  color: var(--accent-color); /* Resinique Pink */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Anpassung der Sub-Option (der genaue Ton), damit er leicht eingerückt ist */
.sub-option {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  border-left: 2px solid var(--accent-color);
  padding-left: 0.5rem;
  transition: all 0.3s ease;
}

/* Damit die Selects in der Gruppe die volle Breite nutzen, wenn nötig */
.option-group select {
  width: 100%;
}

/* Container für die versteckten Optionen */
.product-config-container {
  display: none; /* Standardmäßig versteckt */
  margin-top: 1rem;
  border-top: 1px dashed #ccc;
  padding-top: 1rem;
  animation: fadeIn 0.3s ease-in-out;
}

.product-config-container.open {
  display: block; /* Zeigen, wenn Klasse 'open' da ist */
}

/* Der neue Button zum Aufklappen */
.btn-config {
  background-color: var(--input-bg);
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.btn-config:hover {
  background-color: var(--accent-color);
  color: var(--text-main);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === DESIGN UPGRADE FÜR OPTIONEN === */

/* Basis-Design für alle Gruppen */
.option-group {
  background: var(--bg-card);
  border-left: 4px solid #ccc; /* Standard Rand links */
  border-radius: 0 8px 8px 0;  /* Rechts abgerundet */
  padding: 10px;
  margin-bottom: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.option-group h4 {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 🎨 Spezielles Design für FARBEN (Blau/Pink) */
.group-color {
  border-left-color: var(--accent-color); /* Resinique Pink */
  background: var(--group-resinique); /* Ganz leichtes Pink im Hintergrund */
}

.group-color h4::before {
  content: '🎨'; /* Pinsel-Icon automatisch davor */
  font-size: 1rem;
}

.group-color h4 {
  color: #A72A54;
}

/* ✨ Spezielles Design für EXTRAS (Gold/Gelb) */
.group-extra {
  border-left-color: #d4af37; /* Goldener Rand */
  background: var(--group-resiniqueSpezial); /* Ganz leichtes Gelb */
}

.group-extra h4::before {
  content: '✨'; /* Funkel-Icon automatisch davor */
  font-size: 1rem;
}

.group-extra h4 {
  color: #997b00;
}

/* Sub-Option (Das Feld, das aufklappt) noch deutlicher machen */
.sub-option {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 1px dashed rgba(0,0,0,0.2);
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === FIX: Ausrichtung auf der Detailseite === */

/* Wir überschreiben die Standard-Regeln von .optionsL, 
   aber NUR wenn es innerhalb von .detail-info steht */
.detail-info .optionsL {
  width: 100%;           /* Nutze die volle Breite (statt 90%) */
  max-width: 100%;       /* Entferne die Breitenbegrenzung */
  margin: 1rem 0;        /* Kein 'auto' mehr -> Linksbündig */
  justify-content: flex-start; /* Inhalt links anfangen lassen */
  padding: 0;            /* Kein unnötiges Padding */
}

/* Damit die einzelnen Options-Gruppen auch die volle Breite nutzen */
.detail-info .option {
  flex: 1 1 100%;        /* Zwingt die Elemente auf volle Zeilenbreite */
  width: 100%;
  max-width: 100%;
}

/* Optional: Damit der "Warenkorb"-Button auch linksbündig oder voll breit ist */
.detail-info .product-btn-option {
  width: 100%;          /* Button über die ganze Breite (sieht auf Mobile gut aus) */
  /* ODER: width: auto; für einen kleinen Button links */
  margin-top: 1rem;
}

/* === SHOP-SPEZIFISCHE STYLES === */

/* 🔵Lacy Design (Hellblau) */
.product-card.shop-lacy {
  border-color: var(--color-lacy); /* Optional: Pinker Rand um die ganze Karte */
}

/* Überschrift und Preis in Pink */
.product-card.shop-lacy .price {
  color: var(--color-lacy);
}

/* Alle Buttons in dieser Karte Pink machen */
.product-card.shop-lacy button {
  background-color: var(--color-lacy);
}

.product-card.shop-lacy button:hover {
  background-color: #0284A2;
}

/* Die Linien und Überschriften in den Optionen anpassen */
.product-card.shop-lacy .option-group h4 {
  color: var(--color-lacy);
}

.product-card.shop-lacy .sub-option {
  border-left-color: var(--color-lacy);
}

.product-card.shop-lacy .group-color {
   border-left-color: var(--color-lacy);
   background: var(--bg-card);
}

/* === SHOP-SPEZIFISCHE STYLES === */

/* 🟣 Resinique Design (Pink) */
.product-card.shop-resinique {
  border-color: #F1C6D4; /* Optional: Pinker Rand um die ganze Karte */
}

/* Überschrift und Preis in Pink */
.product-card.shop-resinique .price {
  color: var(--color-resinique);
}

/* Alle Buttons in dieser Karte Pink machen */
.product-card.shop-resinique button {
  background-color: var(--color-resinique);
}

.product-card.shop-resinique button:hover {
  background-color: #A72A54;
}

/* Die Linien und Überschriften in den Optionen anpassen */
/*  .product-card.shop-resinique .option-group h4 {
  color: #D55882;
} */

.product-card.shop-resinique .sub-option {
  border-left-color: var(--color-resinique);
}

.product-card.shop-resinique .group-color {
   border-left-color: var(--color-resinique);
   background: var(--bg-card);
}

/* === FIX: Resinique Optionen-Button (Pink) === */

/* 1. Normalzustand (vor dem Klick) */
.product-card.shop-resinique .btn-config {
  border-color: var(--color-resinique) !important; /* Pinker Rand */
  color: var(--color-resinique) !important;        /* Pinker Text */
  background-color: var(--bg-card);          /* Weißer Hintergrund */
}

/* 2. Hover-Zustand (Maus drüber) */
.product-card.shop-resinique .btn-config:hover {
  background-color: var(--color-resinique) !important; /* Pinker Hintergrund */
  color: var(--text-main) !important;              /* Weißer Text */
}

/* === FIX: Lacy Optionen-Button (Cyan) === */
.product-card.shop-lacy .btn-config {
  border-color: var(--color-lacy) !important;
  color: #0284A2 !important; /* Etwas dunkler für Lesbarkeit auf Weiß */
  background-color: var(--bg-card);
}

.product-card.shop-lacy .btn-config:hover {
  background-color: var(--color-lacy) !important;
  color: var(--text-main) !important;
}

/* Woodynique (Braun) */
.product-card.shop-woodynique {
  border-color: var(--color-woodynique); /* Optional: Pinker Rand um die ganze Karte */
}

/* Überschrift und Preis in Pink */
.product-card.shop-woodynique .price {
  color: var(--color-woodynique);
}

/* Alle Buttons in dieser Karte Pink machen */
.product-card.shop-woodynique button {
  background-color: var(--color-woodynique);
}

.product-card.shop-woodynique button:hover {
  background-color: #5C2608;
}

/* Die Linien und Überschriften in den Optionen anpassen */
.product-card.shop-woodynique .option-group h4 {
  color: var(--color-woodynique);
}

.product-card.shop-woodynique .sub-option {
  border-left-color: var(--color-woodynique);
}

.product-card.shop-woodynique .group-color {
   border-left-color: var(--color-woodynique);
   background: var(--bg-card);
}


/*  ChainCharm Design (Blau) */
.product-card.shop-chaincharm {
  border-color: var(--color-chaincharm); /* Optional: Pinker Rand um die ganze Karte */
}

/* Überschrift und Preis in Pink */
.product-card.shop-chaincharm .price {
  color: var(--color-chaincharm);
}

/* Alle Buttons in dieser Karte Pink machen */
.product-card.shop-chaincharm button {
  background-color: #BD9EAB;
}

.product-card.shop-chaincharm button:hover {
  background-color: #98677C;
}

/* Die Linien und Überschriften in den Optionen anpassen */
/*  .product-card.shop-chaincharm .option-group h4 {
  color: #D55882;
} */

.product-card.shop-chaincharm .sub-option {
  border-left-color: var(--color-chaincharm);
}

.product-card.shop-chaincharm .group-color {
   border-left-color: var(--color-chaincharm);
   background: var(--bg-card);
}

/* === FIX: Chaincharm Optionen-Button (Blau) === */

/* 1. Normalzustand (vor dem Klick) */
.product-card.shop-chaincharm .btn-config {
  border-color: #BD9EAB !important; /* Pinker Rand */
  color: var(--color-chaincharm) !important;        /* Pinker Text */
  background-color: var(--bg-card);          /* Weißer Hintergrund */
}

/* 2. Hover-Zustand (Maus drüber) */
.product-card.shop-chaincharm .btn-config:hover {
  background-color: #BD9EAB !important; /* Pinker Hintergrund */
  color: var(--text-main) !important;              /* Weißer Text */
}

/* === FIX: Woodynique Optionen-Button (Braun) === */
.product-card.shop-woodynique .btn-config {
  border-color: var(--color-woodynique) !important;
  color: #5C2608 !important; /* Etwas dunkler für Lesbarkeit auf Weiß */
  background-color: var(--bg-card);
}

.product-card.shop-woodynique .btn-config:hover {
  background-color: var(--color-woodynique) !important;
  color: var(--text-main) !important;
}



/* Valentinstag */
.product-card.shop-valentinstag {
  border-color: var(--color-valentinstag); /* Optional: Pinker Rand um die ganze Karte */
}

/* Überschrift und Preis in Pink */
.product-card.shop-valentinstag .price {
  color: var(--color-valentinstag);
}

/* Alle Buttons in dieser Karte Pink machen */
.product-card.shop-valentinstag button {
  background-color: var(--color-valentinstag);
}

.product-card.shop-valentinstag button:hover {
  background-color: #881B1B;
}

/* Die Linien und Überschriften in den Optionen anpassen */
/*  .product-card.shop-resinique .option-group h4 {
  color: #D55882;
} */

.product-card.shop-valentinstag .sub-option {
  border-left-color: var(--color-valentinstag);
}

.product-card.shop-valentinstag .group-color {
   border-left-color: var(--color-valentinstag);
   background: var(--bg-card);
}

/* === FIX: valentinstag Optionen-Button (Pink) === */

/* 1. Normalzustand (vor dem Klick) */
.product-card.shop-valentinstag .btn-config {
  border-color: var(--color-valentinstag) !important; /* Pinker Rand */
  color: #DC5050 !important;        /* Pinker Text */
  background-color: var(--bg-card);          /* Weißer Hintergrund */
}

/* 2. Hover-Zustand (Maus drüber) */
.product-card.shop-valentinstag .btn-config:hover {
  background-color: var(--color-valentinstag) !important; /* Pinker Hintergrund */
  color: var(--text-main) !important;              /* Weißer Text */
}




/* Ostern */
.product-card.shop-ostern{
  border-color: var(--color-ostern); /* Optional: Pinker Rand um die ganze Karte */
}

/* Überschrift und Preis in Pink */
.product-card.shop-ostern .price {
  color: var(--color-ostern);
}

/* Alle Buttons in dieser Karte Pink machen */
.product-card.shop-ostern button {
  background-color: var(--color-ostern);
}

.product-card.shop-ostern button:hover {
  background-color: #2C851E;
}

/* Die Linien und Überschriften in den Optionen anpassen */
/*  .product-card.shop-resinique .option-group h4 {
  color: #D55882;
} */

.product-card.shop-ostern .sub-option {
  border-left-color: var(--color-ostern);
}

.product-card.shop-ostern .group-color {
   border-left-color: var(--color-ostern);
   background: var(--bg-card);
}

/* === FIX: ostern Optionen-Button (Pink) === */

/* 1. Normalzustand (vor dem Klick) */
.product-card.shop-ostern .btn-config {
  border-color: var(--color-ostern) !important; /* Pinker Rand */
  color: #2C851E !important;        /* Pinker Text */
  background-color: var(--bg-card);          /* Weißer Hintergrund */
}

/* 2. Hover-Zustand (Maus drüber) */
.product-card.shop-ostern .btn-config:hover {
  background-color: var(--color-ostern) !important; /* Pinker Hintergrund */
  color: var(--text-main) !important;              /* Weißer Text */
}

/* === FIX: Letztes ungerades Element zentrieren (Mobil) === */
@media (max-width: 700px) {
  
  /* Die Logik: 
     1. Suche im Grid mit der Klasse 'center-last-item'
     2. Nimm das allerletzte Produkt (.product-card:last-child)
     3. Aber NUR, wenn es das 1., 3., 5. usw. ist (:nth-child(odd)) 
  */
  .product-grid.center-last-item .product-card:last-child:nth-child(odd) {
    
    /* Schritt A: Sage dem Element, es soll den Platz von 2 Spalten einnehmen */
    grid-column: span 2; 
    
    /* Schritt B: Beschränke die Breite wieder auf die Größe einer normalen Karte.
       (50% minus die Hälfte des Abstands von 1rem) */
    width: calc(50% - 0.5rem); 
    
    /* Schritt C: Zentriere es in dem neu gewonnenen Platz */
    margin: 0 auto; 
  }
}

/* === 🔍 ZOOM LIGHTBOX (Modal) === */

/* Der Hintergrund (dunkel und halbtransparent) */
.zoom-modal {
  display: none; /* Standardmäßig versteckt */
  position: fixed; 
  z-index: 20000; /* Muss ÜBER dem Header (160) und Sidebar (150) liegen */
  padding-top: 50px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; /* Scrollen erlauben, falls Bild riesig ist */
  background-color: rgba(0,0,0,0.9); /* Schwarzer Hintergrund, 90% Deckkraft */
  backdrop-filter: blur(5px); /* Optional: Weichzeichner für Hintergrund */
}

/* Das Bild im Modal */
.zoom-modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh; /* Bild passt fast komplett auf den Screen */
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(255,255,255,0.1);
  
  /* Animation beim Öffnen */
  animation-name: zoom;
  animation-duration: 0.3s;
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* Der Schließen-Button (X oben rechts) */
.close-zoom {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 20001;
}

.close-zoom:hover,
.close-zoom:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Anpassung für kleine Bildschirme (Handy) */
@media only screen and (max-width: 700px) {
  .zoom-modal-content {
    width: 100%; /* Bild volle Breite */
    max-height: auto; /* Höhe flexibel */
    margin-top: 30%; /* Etwas Abstand von oben */
  }
  
  .close-zoom {
    top: 10px;
    right: 20px;
    font-size: 50px; /* Größerer Button für Finger */
  }
}


/* === NEUES BUNDLE DESIGN (Responsiv & Schick) === */
.bundle-grid {
  display: grid;
  
  

  margin-top: 2rem;
  justify-content: center;
}

@media (min-width: 1000px) {
    .bundle-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.bundle-container {
    background: var(--bg-card);
    border: 2px dashed var(--accent-color); /* In WoodyniqueStyle gerne auf #8B4513 ändern */
    border-radius: 15px;
    padding: 20px;
    margin: 30px auto; /* Zentriert mit Abstand */
    max-width: 500px;  /* Begrenzt die Breite, damit es nicht riesig wird */
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
}

/* Label oben rechts */
.bundle-badge {
    position: absolute;
    top: -2px; /* Kleiner Überlappungseffekt */
    right: -2px;
    background: var(--accent-color); /* In WoodyniqueStyle anpassen */
    color: white;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 0 15px 0 15px;
    font-size: 0.9rem;
    box-shadow: -2px 2px 5px var(--shadow-color);
}

.bundle-title {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 1.4rem;
    color: var(--text-main);
}

/* Flex-Container für die Bilder und das Plus */
.bundle-visuals {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Bild-Wrapper für feste Größe */
.bundle-img-wrapper {
    width: 100%;  /* Feste Breite */
    height: 100%; /* Feste Höhe */
    background: var(--bg-card);
    border-radius: 10px;
    padding: 5px;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Das Bild selbst - wird NIEMALS verzerrt */
.bundle-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* WICHTIG: Kein Zuschneiden, Bild bleibt ganz sichtbar */
    display: block;
}

/* Das Plus-Zeichen */
.bundle-plus {
    font-size: 2rem;
    font-weight: bold;
    color: #888;
}

/* Preisbereich */
.bundle-price-area {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    margin-right: 10px;
}

.new-price {
    color: #e60000;
    font-weight: bold;
    font-size: 1.3rem;
}

/* Button Anpassung für Bundle */
.bundle-btn {
    background-color: #333;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    width: 100%;
    max-width: 250px;
}

.bundle-btn:hover {
    transform: scale(1.05);
    background-color: #000;
}

/* Handy-Ansicht: Etwas kleiner */
@media (max-width: 400px) {
    .bundle-img-wrapper {
        width: 70px;
        height: 70px;
    }
    .bundle-plus {
        font-size: 1.5rem;
    }
}

/* Styling für die Optionen IM Bundle */
.bundle-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin: 1.5rem 0;
  text-align: left;
}

.bundle-option-col {
  flex: 1;
  min-width: 200px; /* Damit es auf Handy umbricht */
  background: var(--bg-card);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #eee;
}

.bundle-option-col h4 {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
}

/* Damit die Selects im Bundle gut aussehen */
.bundle-option-col select, 
.bundle-option-col input {
  width: 100%;
  padding: 0.4rem;
  margin-top: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.no-style-link {
    /* Entfernt die blaue Farbe und ersetzt sie durch die Standard-Textfarbe des Elternelements */
    color: inherit; 
    
    /* Entfernt die Unterstreichung, die Links normalerweise haben */
    
}

/* Optional: Fügen Sie ein Hover-Verhalten hinzu, wenn der Benutzer mit der Maus darüberfährt */
.no-style-link:hover {
    text-decoration: underline; /* Fügt eine Unterstreichung beim Hovern hinzu (oder eine andere Farbe) */
    color: #333;  /* Eine etwas dunklere Farbe könnte hier auch gut aussehen */
}

body.dark-mode .bundle-container {
    background: #252525; /* Ein Tick heller als normale Karten */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05); /* Leichter weißer Glow */
}

/* Styling für Icons im Darkmode */
.dark-mode img.warenkorb-icon { 
    filter: invert(100%);
}

#theme-toggle {
  appearance: none;
  -webkit-appearance: none;
    display: inline-block;    /* Stellt sicher, dass Breite/Höhe wirken */
    outline: none;
    /* Grundstyling: Button unsichtbar machen, damit nur das Bild wirkt */
    background-color: transparent;
    border: none;
    cursor: pointer;
    
    /* 1. GRÖSSE HIER STEUERN */
    width: 22px;   /* Probier hier 40px, 30px oder 50px */
    height: 22px;  /* Entsprechend der Proportion deines Bildes */
    
    /* 2. PADDING ENTFERNEN (Wichtig!) */
    padding: 0; 
    
    /* 3. ABSTAND NACH AUSSEN (statt Padding) */
    
    margin-left: 1rem;
    position: relative; 
  top: unset;
  transform: none;
    
    /* Bild-Einstellungen */
    background-size: contain; /* Bild passt sich in die Box ein */
    background-repeat: no-repeat;
    background-position: center;
    
    /* Standard-Bild (Tag-Modus) */
    background-image: url('Bilder/toggle-night.png');
    
    /* Kleiner Hover-Effekt (optional) */
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

#theme-toggle:hover {
    transform: scale(1.05); /* Schalter wird beim Drüberfahren leicht größer */
}

/* Bildwechsel im Darkmode */
.dark-mode #theme-toggle {
    background-image: url('Bilder/toggle-day.png');
}




/* === 1. Gemeinsames Design für BEIDE Buttons === */
/* Wir nutzen hier beide IDs und die gemeinsame Klasse */
#theme-toggle,
#theme-toggle-sidebar,
.theme-toggle-btn {
    border: none;
    cursor: pointer;
    width: 22px;
    height: 22px;
    padding: 0;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('Bilder/toggle-night.png');
    transition: transform 0.2s ease;
    flex-shrink: 0;
    background-color: transparent; /* Wichtig für Sidebar */
}

/* Hover Effekt */
#theme-toggle:hover,
#theme-toggle-sidebar:hover {
    transform: scale(1.05);
}

/* Bildwechsel im Darkmode für BEIDE */
.dark-mode #theme-toggle,
.dark-mode #theme-toggle-sidebar {
    background-image: url('Bilder/toggle-day.png');
}

/* === 2. Steuerung der Sichtbarkeit (Desktop vs Mobile) === */

/* Standard: Mobile-Button ist versteckt, Desktop ist da */
.mobile-only {
    display: none !important;
}

/* Ab 850px (dein Breakpoint für Mobile) drehen wir den Spieß um */
@media (max-width: 850px) {
    /* Header Button verstecken */
    .desktop-only {
        display: none !important;
    }

    /* Sidebar Button anzeigen */
    .mobile-only {
        display: flex !important; /* oder block */
        align-items: center;
        margin-top: 20px;       /* Etwas Abstand nach oben */
        margin-left: 20px;      /* Einrückung passend zur Sidebar */
        width: auto;            /* Breite automatisch, falls Text dabei ist */
    }
    
    /* WICHTIG: Deine alte Regel entfernen/überschreiben! */
    /* Du hattest vorher eine Regel, die #theme-toggle auf Mobile erzwingt. */
    /* Da wir #theme-toggle jetzt die Klasse .desktop-only gegeben haben, */
    /* greift das display: none von oben. */
}


/* --- Galerie Ergänzungen --- */

/* Der "Weniger anzeigen" Button */
.gallery-collapse-btn {
    background: var(--bg-card);
    color: var(--accent-color);
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    margin-top: 5px;
    transition: all 0.2s;
}

.gallery-collapse-btn:hover {
    background: var(--border-color);
}

/* Darkmode Korrekturen für das Overlay und den Button */
body.dark-mode .gallery-more-overlay {
    background: rgba(0, 0, 0, 0.7); /* Etwas dunkler im Darkmode */
    color: var(--text-main);        /* Nutzt dein helles Grau aus dem Darkmode */
}

body.dark-mode .gallery-collapse-btn {
    background: var(--input-bg);    /* Dunklerer Hintergrund für den Button */
    color: var(--accent-color);
    border-color: var(--border-color);
}

/* Macht den Scrollbalken in der Galerie-Vorschau sichtbar */
.gallery-thumbnails::-webkit-scrollbar {
    width: 4px; /* Breite des Balkens */
    display: block;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
    background: var(--accent-color); /* Nutzt deine Akzentfarbe */
    border-radius: 10px;
}

.gallery-thumbnails::-webkit-scrollbar-track {
    background: var(--border-color);
}