/* ============================================================
   Ultralite Skin — pure CSS theme over Bootstrap 5
   Greift ausschliesslich ueber Bootstrap-CSS-Variablen und
   selektive Component-Overrides; keine HAML-Strukturaenderung.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bs-body-font-family: var(--ul-font-family);
  --bs-body-bg:          var(--ul-bg-color);
  --bs-body-color:       var(--ul-text-color);
  --bs-border-color:     var(--ul-border-color);
  --bs-border-radius:    var(--ul-border-radius);
  --bs-border-radius-sm: var(--ul-border-radius);
  --bs-border-radius-lg: var(--ul-border-radius);
  --bs-primary:          var(--ul-primary-color);
  --bs-link-color:       var(--ul-link-color);
  --bs-link-hover-color: var(--ul-link-hover-color);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: var(--ul-container-max, 1320px); }

/* --- Headings --------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--ul-heading-weight, 700);
  letter-spacing: -0.01em;
  color: var(--ul-text-color);
}

/* --- Navbar ----------------------------------------------------- */
.navbar,
nav.navbar {
  background: var(--ul-navbar-bg) !important;
  color:      var(--ul-navbar-text);
  border-bottom: 1px solid var(--ul-border-color);
  padding-top: .9rem;
  padding-bottom: .9rem;
}
.navbar .nav-link,
.navbar .navbar-brand {
  color: var(--ul-navbar-text) !important;
  font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--ul-accent-color) !important; }

/* --- Buttons ---------------------------------------------------- */
.btn {
  border-radius: var(--ul-border-radius, 0);
  text-transform: var(--ul-btn-text-transform, none);
  letter-spacing: var(--ul-btn-letter-spacing, normal);
  font-weight: 600;
  padding: .55rem 1.1rem;
}
.btn-primary {
  background-color: var(--ul-accent-color);
  border-color:     var(--ul-accent-color);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ul-link-hover-color);
  border-color:     var(--ul-link-hover-color);
}
.btn-outline-primary {
  color:        var(--ul-accent-color);
  border-color: var(--ul-accent-color);
}
.btn-outline-primary:hover {
  background-color: var(--ul-accent-color);
  border-color:     var(--ul-accent-color);
  color:            #fff;
}

/* --- Cards (Produkte / Taxon-Kacheln) --------------------------- */
.card {
  border: 1px solid var(--ul-border-color);
  border-radius: var(--ul-border-radius, 0);
  box-shadow: var(--ul-card-shadow, none);
  transition: transform .15s ease, box-shadow .15s ease;
  background-color: #fff;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.card .card-img-top {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 1rem;
  background: #fafafa;
}
.card .card-title { font-weight: 600; }

/* --- Forms ------------------------------------------------------ */
.form-control,
.form-select {
  border-radius: var(--ul-border-radius, 0);
  border-color:  var(--ul-border-color);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ul-accent-color);
  box-shadow: 0 0 0 .15rem rgba(0, 94, 168, .15);
}

/* --- Footer ----------------------------------------------------- */
footer,
.store-footer,
#store-footer {
  background-color: var(--ul-footer-bg);
  color:            var(--ul-footer-text);
}
footer a,
.store-footer a {
  color: var(--ul-footer-text);
  opacity: .85;
  text-decoration: none;
}
footer a:hover,
.store-footer a:hover { opacity: 1; text-decoration: underline; }
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.store-footer h1, .store-footer h2, .store-footer h3,
.store-footer h4, .store-footer h5, .store-footer h6 {
  color: var(--ul-footer-text);
}

/* --- Breadcrumbs & Badges -------------------------------------- */
.breadcrumb {
  background: transparent;
  padding-left: 0;
  font-size: .875rem;
}
.breadcrumb a { color: var(--ul-muted-color); }
.badge.bg-secondary {
  background-color: var(--ul-muted-color) !important;
  font-weight: 500;
}

/* --- Pagination ------------------------------------------------- */
.pagination .page-link {
  color: var(--ul-text-color);
  border-color: var(--ul-border-color);
  border-radius: 0;
}
.pagination .page-item.active .page-link {
  background-color: var(--ul-accent-color);
  border-color:     var(--ul-accent-color);
}