/* ==========================================================================
   theme-b.css — NUR Typografie (Direction B) fuer alle Unterseiten.
   Aendert KEINE Farben. Wird nach style.css/shop.css/gallery.css geladen.
   Startseite (home.css) ist davon unberuehrt.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Body / Fliesstext */
body{font-family:'Inter',system-ui,sans-serif !important}

/* Display / Headlines */
h1,h2,h3,h4,h5,
.logo-text,.section-title,.shop-hero-title,.shop-banner-title,
.service-title,.detail-title,.modal-header h3,.info-card h3,
.footer-logo .logo-text,.cart-title,.similar-title{
  font-family:'Bricolage Grotesque','Inter',sans-serif !important;
  letter-spacing:-.02em;
}

/* Labels / Eyebrows / Mono */
.section-label,.eyebrow,.shop-eyebrow,.category-title,.detail-category,
.featured-badge,.logo-subtitle,.detail-qty-label,.footer-col h4{
  font-family:'JetBrains Mono',monospace !important;
  text-transform:uppercase;letter-spacing:.26em;
}

/* Display-Titel im B-Stil (UPPERCASE, fett, enges Tracking) — nur Form, keine Farbe */
.section-title,.shop-hero-title,.shop-banner-title{
  text-transform:uppercase !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  line-height:.95;
}

/* ---------- Einheitlich kantig (Radien -> 0), wie die Startseite ---------- */
:root{--radius:0}
.gallery-image,.gallery-item,.gallery-overlay,.lightbox-content,
.product-card,.card-image-wrap,.product-image,.detail-images-stack,.detail-stack-item,.detail-stack-img,
.btn,button,input,select,textarea,
.fdd-btn,.fdd-menu,.fdd-option,.quick-pill,.view-toggle-btn,
.language-switcher,.lang-btn,.filter-btn,.btn-load-more,.view-btn,
.info-card,.testimonial-card,.service-card,.cart-item,.similar-card,
.shop-banner-logo,.cart-btn{
  border-radius:0 !important;
}
/* Nav-Lang-Buttons wie auf der Startseite: kantig mit Rahmen */
.language-switcher{border:none !important}
.lang-btn{border:1px solid currentColor;opacity:.85}
.lang-btn.active{opacity:1}

/* ---------- Navigation: gleiche Geometrie & Typo wie Startseite (KEINE Farben) ---------- */
.nav-container{
  max-width:1280px !important;
  padding:18px 32px !important;
  height:auto !important;
}
.logo .logo-text,.logo-text{
  font-size:20px !important;letter-spacing:-.02em !important;line-height:.9 !important;
}
.logo .logo-subtitle,.logo-subtitle{
  font-size:10px !important;letter-spacing:.34em !important;
}
.nav-menu{gap:30px !important}
.nav-link{
  font-size:14px !important;font-weight:500 !important;letter-spacing:normal !important;
}
.nav-link::after,.nav-link.active::after{bottom:-6px !important}
.nav-right{gap:18px !important}
/* Sprach-Umschalter: flach, ohne Pillen-Hintergrund (Form wie Startseite) */
.language-switcher{background:transparent !important;padding:0 !important;gap:4px !important}
.lang-btn{
  padding:6px 10px !important;font-size:12px !important;
  font-weight:500 !important;letter-spacing:normal !important;
}

/* ---------- Mobile-Menü: identisch zu Start/Galerie (nav.css-Panel) ----------
   Überschreibt das abweichende style.css-Dropdown auf shop/legal-Seiten.        */
@media (max-width:768px){
  .nav-container{padding:18px 20px !important}
  .mobile-menu-btn{display:flex !important}
  /* offenes X liegt auf dem dunklen Panel → hell, wie Start/Galerie */
  .mobile-menu-btn.active span{background:#F5F0EA !important}
  .nav-menu{
    position:fixed !important;top:0 !important;right:0 !important;bottom:auto !important;left:auto !important;
    height:100vh !important;height:100dvh !important;width:min(80vw,320px) !important;
    background:#141010 !important;border-left:1px solid rgba(245,240,234,.09) !important;border-top:none !important;
    flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;
    gap:26px !important;padding:40px !important;transform:translateX(100%) !important;
    opacity:1 !important;visibility:visible !important;box-shadow:none !important;
    transition:transform .35s cubic-bezier(.2,.7,.2,1) !important;z-index:90 !important;
  }
  .nav-menu.active{transform:translateX(0) !important}
  .nav-link{font-size:20px !important;color:#9C938B !important;border-bottom:none !important;padding:0 !important}
  .nav-link:hover,.nav-link.active{color:#F5F0EA !important}
  .nav-link::after{display:none !important}
  .nav-link.active::after{
    content:"" !important;display:block !important;position:absolute !important;
    left:0 !important;right:0 !important;width:auto !important;bottom:-6px !important;
    height:2px !important;background:#E11D2A !important;
  }
}
/* Tablet-Range wie Startseite: horizontal, kein Hamburger (style.css-1024-Dropdown aus) */
@media (min-width:769px) and (max-width:1024px){
  .mobile-menu-btn{display:none !important}
  .nav-menu{
    position:static !important;flex-direction:row !important;height:auto !important;width:auto !important;
    background:transparent !important;border:none !important;box-shadow:none !important;
    padding:0 !important;gap:30px !important;transform:none !important;opacity:1 !important;visibility:visible !important;
  }
  .nav-link{font-size:14px !important;border-bottom:none !important;padding:0 !important}
}