/* Centered page frame */
.page {max-width: var(--max-content-width);margin: 0 auto;}
/* Top header (small) */
.topbar {background: #fff;padding: 12px 20px;display: flex;justify-content: center;box-shadow: 0 2px 6px rgba(0,0,0,0.1);border-radius: 6px;}
.topbar-inner {display: flex;width: 100%;max-width: 1200px;align-items: center;justify-content: space-between;}
.header-left .logo {height: 45px;width: auto;}
.header-center {display: flex;gap: 20px;justify-content: center;flex: 1;}
.header-center a {text-decoration: none;color: #333;font-weight: 600;transition: color 0.2s;}
.header-center a:hover {color: #006699;}
.header-right {display: flex;align-items: center;gap: 15px;}
.user-dropdown {position: relative;}
.user-dropdown button {background: none;border: none;font-weight: 600;color: #333;cursor: pointer;}
.dropdown-content {display: none;position: absolute;right: 0;top: 120%;background: #fff;border: 1px solid #ccc;border-radius: 6px;min-width: 150px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);z-index: 100;}
.dropdown-content a {display: block;padding: 10px 15px;text-decoration: none;color: #333;transition: background 0.2s;}
.dropdown-content a:hover {background: #f0f0f0;}
/* Page card (boxed) */
.card {background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:var(--border);}
/* MAIN LAYOUT */
.product-outer {  grid-template-columns: 1fr !important;justify-items: center;padding: 12px;}
/* Left column: content within inner card */
.left-col {  width: 100%;max-width: 1080px;margin: 0 auto;}
/* Gallery + info area */
.product-top {display:grid;grid-template-columns: 1fr 2fr;gap:24px;align-items:start;}
/* MEDIA/GALLERY */
.gallery {display:flex;flex-direction:column;gap:12px;}
.media-frame {width:320px;height:320px;background:#f7f7f8;border-radius:12px;border:var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:680px;aspect-ratio: 1 / 1; box-shadow: 0 6px 30px rgba(16,16,16,0.06);position: relative;}
.media-frame img, .media-frame video {width:100%;height:100%;object-fit: cover;display:block;}
.media-actions {display:flex;gap:8px;position:absolute;right:10px;top:10px;z-index:5;}
.icon-btn {background: rgba(255,255,255,0.9);border-radius:8px;padding:8px;border:1px solid #eee;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,0.04);}
.media-thumbs {display:flex;gap:10px;align-items:center;flex-wrap:wrap;overflow-x: auto;overflow-y: hidden;padding-bottom: 6px;scroll-behavior: smooth;}
.media-thumbs::-webkit-scrollbar {height: 8px;}
.media-thumbs::-webkit-scrollbar-thumb {background: #ccc;border-radius: 10px;}
.media-thumbs::-webkit-scrollbar-track {background: transparent;}
.thumb {width:72px;height:72px;flex:0 0 72px;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:#fff;display:flex;align-items:center;justify-content:center;}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb.active{border-color:var(--accent);box-shadow:0 6px 18px rgba(162,138,100,0.12)}
/* Middle info area (title / price / actions) */
.info {width: 100%;display:flex;flex-direction:column;gap:12px;}
.title { font-size:1.45rem; font-weight:700; color:var(--dark); margin:0; }
.meta { font-size:0.9rem; color:var(--muted); }
.price-block { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.price-current { font-size:1.6rem; font-weight:800; color:#233; }
.price-old { font-size:1rem; color:#9a9a9a; text-decoration:line-through; }
.price-badge { background:#fdecea;color:#e74c3c;padding:4px 8px;border-radius:8px;font-weight:700;font-size:0.85rem; }
/* Add to cart panel */
.buy-panel {margin-top:8px;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:10px;border: 1px solid #f0e8da;background: linear-gradient(180deg, rgba(201,181,138,0.04), rgba(255,255,255,0));}
.stock { font-weight:600; color: #2d6a2f; }
.qty-row { display:flex; gap:8px; align-items:center; }
.qty-controls { display:flex; border-radius:8px; overflow:hidden; border:1px solid #e0d9c8; }
.qty-controls button { width:44px;height:40px;border:none;background:var(--accent); color:#fff;cursor:pointer;font-size:18px; }
.qty-controls input { width:70px; height:40px; border:none; text-align:center; font-size:16px; padding:0 8px; }
.buy-actions { display:flex; gap:12px; align-items:center; margin-top:6px; }
.add-btn {background: linear-gradient(180deg,var(--accent), var(--accent-600));color:#fff;padding:12px 16px;border-radius:10px;border:none;cursor:pointer;font-weight:700;box-shadow:0 8px 22px rgba(163,143,106,0.16);}
.add-btn[disabled]{opacity:0.6; cursor:not-allowed}
.wish-btn { background:transparent;border:1px solid #eee;padding:10px;border-radius:10px;cursor:pointer }
/* Right column: sidebar */
.right-col { display:none; flex-direction:column; gap:16px; max-width:380px; }
.mini-card { padding:14px; border-radius:12px; background:var(--card); border:var(--border); box-shadow:var(--shadow); }
/* description & tabs */
.tabs { margin-top:8px; display:flex; gap:12px; border-bottom:1px solid #eee; padding-bottom:10px; }
.tab { padding:8px 12px; cursor:pointer; color:var(--muted); border-radius:8px; }
.tab.active { color:var(--dark); background: #fff; border: 1px solid #eee; box-shadow:0 6px 12px rgba(0,0,0,0.04) }
/* content sections */
.section { margin-top:16px; background:var(--card); border:var(--border); padding:16px; border-radius:12px; box-shadow:var(--shadow); }
.section h3{ margin:0 0 8px 0; font-size:1.05rem; color:var(--dark); }
.specs { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.spec-row { font-size:0.95rem; color:var(--muted); padding:8px;border-radius:8px;background:#fbfaf9;border:1px solid #f3efe7 }
/* related products grid */
.related-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-top:12px; }
.related-card { font-size:0.85rem; padding:6px; }
.related-thumb { width:100%; height:100px; } /* kleiner als vorher */
.related-card div.title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.related-thumb img{width:100%;height:100%;object-fit:cover;}
.related-card label {display: flex;align-items: center;gap: 8px;width: 100%;}
.related-card .related-title {flex: 1 1 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.related-label { display:flex; align-items:center; gap:6px; cursor:pointer; margin-top:4px; }
.related-label input { flex-shrink:0; }
.related-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* footer small note */
.small { font-size:0.9rem;color:var(--muted) }
/* responsiveness */
.thumb {
  position: relative;
}
.thumb[data-type="video"]::after {content: "\f04b"; /* Font Awesome Play-Symbol */font-family: "Font Awesome 6 Free";font-weight: 900;color: white;font-size: 20px;position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;background: rgba(0,0,0,0.35);border-radius: 8px;pointer-events: none;}
@media(max-width:1100px){
  .product-outer{ grid-template-columns: 1fr; }
  .right-col{ max-width:100%;}
  .product-top .info{ order:2 }
}
@media (max-width: 740px) {
  body {padding: 12px;font-size: 14px;}
  /* HEADER */
 .topbar-inner {justify-content: space-between;}
  /* Logo links, Menü-Button rechts */
  .header-left {flex: 0 0 auto;}
  .header-center.show {display: flex;animation: fadeIn 0.25s ease;}
  .menu-toggle {display: flex;align-items: center;justify-content: center;background: none;border: none;font-size: 1.6rem;cursor: pointer;olor: #333;}
  .header-right {gap: 10px;}
  @keyframes fadeIn {from { opacity: 0; transform: translateY(-5px); }to { opacity: 1; transform: translateY(0); }}
  /* PRODUCT LAYOUT */
  .product-top {display: flex;flex-direction: column;gap: 16px;}
  /* GALLERY */
  .gallery {width: 100%;align-items: center;}
  .media-frame {height: auto;aspect-ratio: 1 / 1;}
  .media-thumbs {justify-content: center;gap: 8px;flex-wrap: wrap;}
  .thumb {width: 56px;height: 56px;}
/* INFO PANEL */
  .info {gap: 10px;}
  .title {font-size: 1.25rem;}
  .price-current {font-size: 1.4rem;}
  .buy-panel {padding: 12px;}
  .qty-controls button,.qty-controls input {height: 36px;}
  .add-btn {width: 100%;text-align: center;padding: 10px;}
  .wish-btn {width: 100%;}
/* RELATED PRODUCTS */
  .related-grid {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));gap: 10px;}
  .related-card {font-size: 0.8rem;padding: 4px;}
  .related-thumb {height: 80px;}
/* TABS */
  .tabs {flex-wrap: wrap;gap: 6px;}
  .tab {flex: 1 1 auto;text-align: center;font-size: 0.85rem;padding: 6px 8px;}
/* SIDEBAR (right-col) wird unterhalb der main column */
  .right-col {}
  /* SECTIONS */
  .section {padding: 12px;}
/* SPEC ROWS */
  .specs {grid-template-columns: 1fr;}
/* FOOTER NOTE */
  .small {font-size: 0.8rem;}}
/* Mobile-Variante */
@media (max-width: 700px) {
  .topbar-inner {flex-wrap: wrap;align-items: center;}
  .header-left,.header-right {flex: 0 0 auto;}
  .header-center {flex: 1 1 100%;order: 1;width: 100%;display: flex;justify-content: center;flex-wrap: wrap;margin-top: 8px;gap: 10px;}
  .header-right {margin-left: auto;}
}
@media(max-width:520px){
  body{ padding:12px }
  .media-thumbs{ gap:8px }
  .thumb{ width:56px;height:56px; }
}
.thumb video {width: 100%;height: 100%;object-fit: cover;display: block;border-radius: 8px;}
/* === Modern Mobile Enhancement === */
@media (max-width: 700px) {

  /* Sanfter Farbverlauf im Hintergrund */
  body {background: linear-gradient(180deg, #f9f6f1 0%, #fdfcfb 100%);}
  /* Topbar bekommt Glas-Effekt */
  .topbar {background: rgba(255, 255, 255, 0.7);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.3);border-radius: 14px;box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);animation: fadeDown 0.4s ease-out;}
  @keyframes fadeDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Navigation Links als Pill Buttons */
  .header-center a {background: linear-gradient(90deg, #d6c59b 0%, #bfa872 100%);color: #fff;padding: 8px 14px;border-radius: 20px;font-weight: 600;text-decoration: none;transition: all 0.2s ease;box-shadow: 0 2px 6px rgba(180, 150, 90, 0.2);}
  .header-center a:hover {transform: translateY(-2px);box-shadow: 0 4px 10px rgba(180, 150, 90, 0.3);}
  /* Buttons etwas glänzender */
  .add-btn {background: linear-gradient(180deg, #ccb98c, #a48c5b);box-shadow: 0 6px 18px rgba(120, 100, 50, 0.25);transition: transform 0.2s ease, box-shadow 0.2s ease;}
  .add-btn:active {transform: scale(0.96);box-shadow: 0 4px 10px rgba(100, 80, 40, 0.3);}
  /* Produktkarten mit leichtem Hover-Glow */
  .related-card {background: rgba(255,255,255,0.85);border-radius: 12px;box-shadow: 0 2px 8px rgba(0,0,0,0.05);transition: box-shadow 0.25s ease, transform 0.2s ease;}
  .related-card:hover {box-shadow: 0 4px 16px rgba(0,0,0,0.08);transform: translateY(-2px);}
  /* Tabs mit Verlauf und sanfter Bewegung */
  .tab.active {background: linear-gradient(90deg, #d9c798, #bca86a);color: #fff;border: none;box-shadow: 0 4px 10px rgba(180,150,90,0.25);transform: translateY(-1px);}
  /* Allgemeine Übergänge für weicheren Look */
  * {
    transition: all 0.2s ease-in-out;
  }
}
/* Warenkorb */
.cart-wrapper {position: relative;display: flex;align-items: center;gap: 6px;cursor: pointer;font-family: Arial, sans-serif;}
.cart-icon {position: relative;font-size: 1.2em;color: #222;}
.cart-badge {position: absolute;top: -11px;right: -13px;background-color: red;color: white;border-radius: 50%;padding: 2px 6px;font-size: 0.65em;font-weight: bold;}
.cart-price {font-size: 0.9em;}

/* --------------------- FOOTER --------------------- */
footer {flex-shrink: 0;background: #eee;padding: 20px;text-align: center;font-size: 0.85em;margin-top: 40px;}
.footer-links a {color: #006699;text-decoration: none;margin: 0 10px;font-weight: bold;}
.footer-links a:hover {text-decoration: underline;}
/*---------------Gallerie Scroll-----------------------------*/
.thumbs-wrapper {position: relative;display: flex;align-items: center;width: 100%;max-width: 340px;margin: 0;}
.media-thumbs {display: flex;gap: 10px;overflow-x: auto;overflow-y: hidden;scroll-behavior: smooth;padding: 8px 0;flex-wrap: nowrap; /* wichtig: kein Umbruch! */scrollbar-width: thin;}
.media-thumbs::-webkit-scrollbar {height: 8px;}
.media-thumbs::-webkit-scrollbar-thumb {background: #ccc;border-radius: 10px;}
.scroll-btn {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(255,255,255,0.85);border: 1px solid #ddd;border-radius: 50%;width: 28px;height: 28px;cursor: pointer;font-size: 18px;display: flex;align-items: center;justify-content: center;z-index: 10;box-shadow: 0 2px 6px rgba(0,0,0,0.15);transition: background 0.2s ease;}
.scroll-btn:hover {background: rgba(255,255,255,1);}.scroll-btn.left { left: -12px; }.scroll-btn.right { right: -12px; }
.thumb.active {border-color: var(--accent);box-shadow: 0 0 10px rgba(163,143,106,0.25);}
.lb-arrow {position: absolute;top: 50%;transform: translateY(-50%);z-index: 1000; /* deutlich über dem Video */cursor: pointer;}
.lb-arrow {pointer-events: auto; /* Arrow-Klicks werden erkannt */}
.lb-content video {pointer-events: none; /* Video selbst blockiert keine Klicks auf darüberliegende Elemente */}
/* Produktoptionen */
.product-option {margin: 0.5em 0;display: flex;flex-direction: column;font-size: 0.95em;}
.product-option label {margin-bottom: 0.2em;font-weight: 600;}
.product-option select.option-select {padding: 0.35em 0.5em;border: 1px solid #ccc;border-radius: 4px;font-size: 0.95em; width: 150px;}
.product-option select.option-select:focus {outline: none;border-color: #007BFF;box-shadow: 0 0 3px rgba(0,123,255,0.5);}
/* Bilder Upload und Freitext*/
.upload-section { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.upload-preview { display:flex; gap:8px; overflow-x:auto; padding:4px; border:1px solid #e6e6e6; border-radius:8px; }
.upload-preview img { height:80px; object-fit:cover; border-radius:6px; cursor:pointer; }
.upload-preview .remove-btn { position:absolute; top:2px; right:2px; background:#fff; border:none; border-radius:50%; cursor:pointer; font-size:0.8rem; }
.custom-text-section { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.custom-text-section textarea { min-height:80px; padding:8px; border:1px solid #e6e6e6; border-radius:8px; font-family:inherit; font-size:0.95rem; resize:vertical; }
#cropper-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 10000;
}

#cropper-modal > div {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.cropper-body {
  flex: 1;
  min-height: 220px;
  position: relative;
}
.cropper-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;              /* WICHTIG */
}

@media (max-width: 768px) {
  .cropper-actions {
    justify-content: space-between;
  }

  .cropper-actions button {
    flex: 1 1 48%;               /* zwei pro Zeile */
  }

  /* Speichern + Abbrechen IMMER unten */
  #crop-save-btn,
  #crop-cancel-btn {
    flex: 1 1 100%;
  }
}
.cropper-container {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#sphere-bg{
    padding: 0.35em 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
    width: 150px;
}

.preview-btn{
    background: darkgray;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}
.preview-btn:hover{
  background: grey
  
}