/* ==========================================================================
   style-override.css — Landingpage Overrides (VOLLSTÄNDIGE DATEI)
   Gilt für: perlen-designs.de Landingpage
   Voraussetzung: Diese Datei NACH style.css laden
   Ziel:
   - 4K-Background bildschirmfüllend und scrollt sanft mit
   - Inhalt auf sinnvolle Max-Breite zentriert (Header/Footer/Sections)
   - Karten/Kacheln bleiben im bestehenden Look & Grid
   - Social Icons im Footer mittig, Hover-Glanz
   ========================================================================== */

/* 0) Root: Grundfarben & Z-Index-Schutz */
:root{
  --pd-max: 1200px;       /* Site-Content-Breite */
  --pd-pad: 16px;         /* Seite-Rand-Innenabstand */
  --pd-radius: 16px;      /* Standard-Radius für Panels */
  --pd-blur: 12px;        /* Blur-Stärke für Glas-Effekt */
  --pd-glass: rgba(10,12,16,.55);
  --pd-glass-deep: rgba(10,12,16,.70);
  --pd-border: rgba(255,255,255,.12);
  --pd-shadow: 0 10px 30px rgba(0,0,0,.35);
  --pd-shadow-soft: 0 6px 18px rgba(0,0,0,.25);
  --pd-accent: #ffa43b;
}

/* 1) Body + globaler 4K-Background (scrolled & crisp) */
html, body{
  height:100%;
}

body{
  background-image: url("images/butterfly-background-4k.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: scroll;     /* Bild scrollt mit, nicht fix */
  background-size: contain;          /* GANZES Motiv sichtbar */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  color: #e6ecff;
}

/* 2) Globale Content-Breite: alles mittig & begrenzt */
.pd-container, /* neue Hilfsklasse */
.shop-container,
.wrapper > .main-content > .shop-container,
main .shop-container,
header .shop-container,
footer .shop-container,
.container, .content, .page-inner{
  max-width: var(--pd-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pd-pad);
  box-sizing: border-box;
}

/* Fallback: mögliche globale Container ebenfalls einfassen */
header, nav, main, footer, .hero, .section, .footer-inner{
  box-sizing: border-box;
}

/* 3) Header/Navi „Glas“-Leiste, mittig begrenzt */
header, .site-header, nav, .topbar{
  background: transparent !important;
  box-shadow: none !important;
}

.header-inner, nav .nav-inner, .topbar .nav-inner, .site-header .nav-inner{
  max-width: var(--pd-max);
  margin-inline: auto;
  padding: 10px var(--pd-pad);
}

.navbar, .nav, .menu, .menu-bar{
  border-radius: 999px;
  background: linear-gradient( to bottom, rgba(14,16,22,.55), rgba(14,16,22,.35) );
  backdrop-filter: saturate(1.1) blur(var(--pd-blur));
  -webkit-backdrop-filter: saturate(1.1) blur(var(--pd-blur));
  border: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow-soft);
}

/* 4) Hero / Einleitungs-Panel */
.hero, .hero-banner, .intro-panel{
  background: transparent !important;
  box-shadow: none !important;
}

.hero .card, .intro-panel .card, .lead-panel, .headline-panel{
  background: var(--pd-glass);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow);
  backdrop-filter: blur(var(--pd-blur));
  -webkit-backdrop-filter: blur(var(--pd-blur));
}

/* 5) Sektionen/„Cards“-Kacheln – bestehendes Layout beibehalten */
.section, section, .panel, .card, .data-table-wrapper{
  background: var(--pd-glass);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow-soft);
  backdrop-filter: blur(var(--pd-blur));
  -webkit-backdrop-filter: blur(var(--pd-blur));
}

/* Gitter: 3 Spalten (Desktop), 2 (Tablet), 1 (Phone) */
.grid-cards, .cards, .highlight-grid{
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px){
  .grid-cards, .cards, .highlight-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px){
  .grid-cards, .cards, .highlight-grid{
    grid-template-columns: 1fr;
  }
}

/* Produkt-Kachel Bilder responsiv, ohne Gequetsche */
.card img, .product-card img, .tile img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--pd-radius) - 6px);
}

/* Buttons */
.btn, button, .primary-btn{
  background: linear-gradient(180deg, #ffa43b, #ff8d1f);
  color: #141821 !important;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(255,140,40,.25);
  transition: transform .08s ease, box-shadow .2s ease, filter .15s ease;
}
.btn:hover, button:hover, .primary-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 22px rgba(255,140,40,.32);
}

/* 6) Footer mittig, Content begrenzt, Social-Icons */
footer, .site-footer{
  background: linear-gradient( to bottom, rgba(10,12,16,.25), rgba(10,12,16,.65) ) !important;
  border-top: 1px solid var(--pd-border);
  box-shadow: 0 -10px 28px rgba(0,0,0,.25);
}

.footer-inner{
  max-width: var(--pd-max);
  margin-inline: auto;
  padding: 18px var(--pd-pad) 28px;
}

/* Social Row mittig */
.footer-social{
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin: 12px 0 6px;
}

/* 3D-Icon Style */
.footer-social a{
  width: 42px;
  height: 42px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), rgba(255,255,255,.08));
  box-shadow:
    inset 0 3px 10px rgba(255,255,255,.12),
    0 10px 24px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .12s ease, box-shadow .2s ease, filter .12s ease;
}
.footer-social a:hover{
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow:
    inset 0 3px 12px rgba(255,255,255,.16),
    0 12px 26px rgba(0,0,0,.42);
}
.footer-social img, .footer-social svg{
  width: 22px;
  height: 22px;
  display:block;
}

/* Footer Links in einer Linie, mittig */
.footer-links{
  display:flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items:center;
  margin-top: 10px;
}
.footer-links a{
  color: #cfe0ff;
  text-decoration: none;
  opacity: .9;
}
.footer-links a:hover{ opacity: 1; text-decoration: underline; }

/* Copyright-Zeile */
.footer-copy{
  text-align:center;
  font-size: 12px;
  color: #a9b8d6;
  opacity:.9;
  margin-top: 8px;
}

/* 7) Optische Feinschliffe */
h1,h2,h3{ text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.section-title{
  margin-top: 6px;
  margin-bottom: 10px;
}

/* 8) Sicherheitsnetz: überbreite Elemente verhindern */
img, video, canvas, iframe{ max-width: 100%; height: auto; }

/* 9) Optional: Scroll-Behavior und dezente Parallaxe-Illusion */
html{ scroll-behavior: smooth; }

/* 10) Falls irgendwo „full-width“-Container stören: einkassieren */
.full-width, .container-fluid, .stretch, .wide, .edge-to-edge{
  max-width: 100%;
}
.full-width > .shop-container,
.container-fluid > .shop-container,
.stretch > .shop-container{
  max-width: var(--pd-max);
  margin-inline: auto;
}

/* 11) Table/Datagrid in Panels weiterhin clean */
.table, table{
  background: transparent;
  color: inherit;
}
.data-table{
  width:100%;
  border-collapse: collapse;
}
.data-table th, .data-table td{
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 10px 8px;
}

/* 12) Kleine Abstände untereinander harmonisieren */
.section + .section,
.panel + .panel{ margin-top: 20px; }

/* 13) Fallback für mögliche externe Klassen des alten Themes */
.shop-hero, .shop-highlights, .shop-advantages, .shop-about{
  max-width: var(--pd-max);
  margin-inline:auto;
  padding-inline: var(--pd-pad);
}