/* ==========================================================================
   BERGTHRON – custom.css (v2)
   Dunkles, mystisches Overlay-Theme für den bestehenden OpenCart-Shop.
   Ändert NUR Optik – keine Struktur. Bestehendes Hintergrundbild bleibt
   unangetastet (wir setzen KEIN background-image auf body mehr).

   EINBINDUNG: siehe v1 – Datei hochladen und NACH stylesheet.css in
   header.twig verlinken, oder über den Custom-CSS-Bereich im Adminpanel
   einfügen.
   ========================================================================== */

/* -- Google Fonts: Headline weiterhin markant/golden, Fließtext jetzt klar
      lesbare Grotesk statt Serife -- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  --bt-bg:           #0e120f;   /* Fallback/Tönung, KEIN Ersatz für das Hintergrundbild */
  --bt-bg-alt:       #1a201b;   /* Flächen für Karten/Boxen, etwas heller als bg */
  --bt-bg-header:    #0a0d0a;   /* Topbar: am dunkelsten */
  --bt-bg-nav:       #1c231d;   /* Navi: sichtbar heller als Topbar -> Trennung */
  --bt-border:        #33402f;
  --bt-text:          #aaa;
  --bt-text-muted:    #9a9e93;
  --bt-accent:        #a8863f;
  --bt-accent-light:  #cdae6c;
  --bt-accent-dark:   #6f5726;
}

/* Body NICHT mit background-color/-image überschreiben, damit das
   vorhandene Hintergrundbild sichtbar bleibt. Nur Textfarbe/Font anpassen. */
body {
  color: var(--bt-text);
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--bt-accent-light);
}
a:hover,
a:focus {
  color: var(--bt-accent);
}

/* -- Überschriften: weiter Cinzel + Gold, das darf bleiben -- */
h1, h2, h3, h4, h5,
.list-unstyled > li > h4,
.product-thumb h4,
.panel-title {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.03em;
  color: var(--bt-accent-light);
  text-transform: uppercase;
}


/* ==========================================================================
   HEADER / NAVI: klare optische Trennung statt "zusammengeklebt"
   ========================================================================== */

#top {
  background-color: var(--bt-bg-header) !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

header {
  background-color: var(--bt-bg-header) !important;
  padding: 1.2rem 0;
}

#logo {
  padding: 0.5rem 0;
}
#logo img {
  filter: drop-shadow(0 0 8px rgba(168,134,63,0.25));
}

/* Die eigentliche Hauptnavigation deutlich abgesetzt: eigener Farbton,
   Trennlinie oben + Schatten nach unten, damit sie als eigene Ebene wirkt */
.navbar,
.navbar-default {
  background-color: var(--bt-bg-nav) !important;
  border-top: 1px solid var(--bt-border);
  border-bottom: 1px solid var(--bt-border);
  box-shadow: 0 6px 14px -8px rgba(0,0,0,0.6);
  margin-bottom: 1.5rem;
}

.navbar-default .navbar-nav > li > a,
#category ul li a {
  color: var(--bt-text) !important;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  padding: 1rem 1.1rem;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a {
  color: var(--bt-accent) !important;
  background-color: rgba(168,134,63,0.08) !important;
}
.dropdown-menu {
  background-color: var(--bt-bg-alt);
  border: 1px solid var(--bt-border);
  padding: 0.5rem 0;
}
.dropdown-menu > li > a {
  color: var(--bt-text) !important;
  padding: 0.5rem 1.2rem;
}
.dropdown-menu > li > a:hover {
  background-color: var(--bt-bg);
  color: var(--bt-accent) !important;
}

/* ==========================================================================
   INHALTSBEREICH – mehr Luft
   ========================================================================== */

#content,
.container {
  padding-top: 0.5rem;
}
#content > .row {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   PRODUKTKARTEN, PANELS, BUNDLES – kein bootstrap-Grau mehr
   Bootstrap/OpenCart nutzen für Bundles/Boxen häufig .panel-default,
   .well, .table, .list-group-item oder graue inline/Utility-Klassen.
   Wir fangen die gängigsten hier pauschal ab.
   ========================================================================== */

.product-thumb,
.panel,
.panel-default,
.panel-body,
.list-group-item,
.well,
.box,
.table,
.table > tbody > tr,
.table > tbody > tr > td,
.table > tbody > tr > th {
  background-color: var(--bt-bg-alt) !important;
  border-color: var(--bt-border) !important;
  color: var(--bt-text) !important;
}

.product-thumb {
  padding: 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.product-thumb:hover {
  border-color: var(--bt-accent-dark) !important;
  transform: translateY(-3px);
}
.product-thumb .caption {
  padding: 1rem 0.5rem 0.5rem;
}
.product-thumb .price,
.price-new {
  color: var(--bt-accent-light);
  font-weight: 600;
}
.price-old {
  color: var(--bt-text-muted);
}

/* Bundle-/Set-Blöcke (z.B. "zusammen nur", "Sie sparen") oft in eigener
   grauer Box: gleiche Behandlung, plus etwas Innenabstand */
.bundle,
.product-bundle,
.bundle-discount,
[class*="bundle"] {
  background-color: var(--bt-bg-alt) !important;
  border: 1px solid var(--bt-border) !important;
  padding: 1rem !important;
  border-radius: 3px;
}

/* -- Buttons -- */
.btn-primary,
.btn-success,
input[type="submit"].btn {
  background-color: var(--bt-accent-dark);
  border-color: var(--bt-accent-dark);
  color: #f2ead9;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.03em;
  border-radius: 2px;
  padding: 0.55rem 1.2rem;
}
.btn-primary:hover,
.btn-success:hover {
  background-color: var(--bt-accent);
  border-color: var(--bt-accent);
  color: #0e120f;
}

/* -- Neuigkeiten -- */
.news-list {
  padding: 0.5rem 0;
}
.news-list h4 a,
#content h4 a {
  color: var(--bt-accent-light);
}
#content img {
  border: 1px solid var(--bt-border);
}

hr {
  border-top: 1px solid var(--bt-border);
  margin: 1.8rem 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer,
#footer,
.footer {
  background-color: #090b09 !important;
  border-top: 1px solid var(--bt-border);
  color: var(--bt-text-muted);
  padding: 2.5rem 0 1.5rem;
  margin-top: 2rem;
}
footer .col-sm-3,
footer .col-sm-4,
footer .col-sm-6 {
  padding: 0 1.2rem;
  margin-bottom: 1.5rem;
}
footer a,
#footer a {
  color: var(--bt-text-muted) !important;
}
footer a:hover,
#footer a:hover {
  color: var(--bt-accent) !important;
}
footer h5,
#footer h5 {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--bt-accent-light);
  margin-bottom: 1rem;
}

/* -- Formularfelder -- */
#search input[type=text] {
   background-color: var(--bt-bg);
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--bt-accent);
  box-shadow: none;
}

/* -- Badges/Labels -- */
.label-danger,
.label-success {
  background-color: var(--bt-accent-dark);
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.6rem;
}


/* Buttons unten ausrichten – dafür muss die ganze Kette bis zur Box
   gestreckt werden, sonst hat .caption keine Höhe zum Wachsen. */
.row:has(> .product-layout) {
  display: flex;
  flex-wrap: wrap;
}
.product-layout {
  display: flex;
}
.product-thumb {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.product-thumb .caption {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.product-thumb .button-group {
  margin-top: auto;
}
@media (max-width: 575px) {
  .home-news h2 {
    margin-top: 20px;
  }
}

#home_img {
  position: relative;
}

#home_img img {
  width: 100%;
}

#home_img h1 {
  position: absolute;
  top: 10px;
  width: 100%;
  padding: 10px 20px;
  text-align: center;
  text-shadow: 2px 2px #000;
}