/* =====================================================================
   kiwerkzeuge.de – Branding für HostBill-Checkout (template_2019 / Bootstrap 4)
   Einfügen als Custom CSS der Brand „kiwerkzeuge.de" (shop.kiwerkzeuge.de).
   Erzeugt aus den echten Design-Tokens der Website (assets/product.css).
   ---------------------------------------------------------------------
   Farbwelt: Dark-Surface + Violett→Mint-Verlauf, Inter, Radius 12px.
   ===================================================================== */

:root {
  --kiwz-bg:            #070814;
  --kiwz-bg-deep:       #050b16;
  --kiwz-surface:       #0c1827;
  --kiwz-surface-raise: #142134;
  --kiwz-border:        #26364a;
  --kiwz-border-strong: #364a62;
  --kiwz-text:          #f4f7fb;
  --kiwz-text-muted:    #a9b6c9;
  --kiwz-violet:        #8b67f7;
  --kiwz-violet-deep:   #6d28d9;
  --kiwz-mint:          #69d58a;
  --kiwz-radius:        12px;
  --kiwz-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Inter laden (falls die Brand die Font nicht schon einbindet) */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('https://kiwerkzeuge.de/assets/fonts/inter-latin.woff2') format('woff2');
}

/* ---- Grundfläche ---- */
body.template_2019,
body.template_2019 .main-content,
body.template_2019 #content,
body.template_2019 .order-body {
  background: radial-gradient(1200px 600px at 20% -10%, #101a33 0%, var(--kiwz-bg) 55%) fixed, var(--kiwz-bg) !important;
  color: var(--kiwz-text) !important;
  font-family: var(--kiwz-font) !important;
}
body.template_2019 { -webkit-font-smoothing: antialiased; }

/* ---- Kopf / Navbar ---- */
/* Grundfläche der Leiste dunkel … */
body.template_2019 .navbar,
body.template_2019 .navbar.fixed-top {
  background: rgba(8,12,26,.96) !important;
  border-bottom: 1px solid var(--kiwz-border) !important;
  backdrop-filter: blur(8px);
}
/* … und ALLE inneren Container transparent, damit die dunkle Leiste durchscheint */
body.template_2019 .navbar .navbar-left,
body.template_2019 .navbar .navbar-right,
body.template_2019 .navbar .navbar-body,
body.template_2019 .navbar .navbar-menu,
body.template_2019 .navbar .navbar-order,
body.template_2019 .navbar .navbar-nav,
body.template_2019 .navbar .sub-bar {
  background: transparent !important;
}
/* weiße Bootstrap-Utility-Flächen innerhalb der Leiste überschreiben */
body.template_2019 .navbar .bg-white,
body.template_2019 .navbar-body.bg-white,
body.template_2019 .navbar-search.bg-white,
body.template_2019 .navbar.sub-bar,
body.template_2019 .navbar.sub-bar.bg-white {
  background: rgba(8,12,26,.96) !important;
  border-color: var(--kiwz-border) !important;
}
/* rechte Menü-Links (hatten background:#fff + helle Trennlinie) */
body.template_2019 .navbar-menu .nav-link {
  background: transparent !important;
  color: var(--kiwz-text) !important;
  border-left: 1px solid var(--kiwz-border) !important;
}
body.template_2019 .navbar-menu .nav-link:hover {
  background: var(--kiwz-surface-raise) !important;
  color: #fff !important;
}
/* Such-Eingabe (input-group war weiß) */
body.template_2019 .navbar-search .input-group,
body.template_2019 .navbar-body .navbar-search .input-group {
  background: var(--kiwz-bg-deep) !important;
}
body.template_2019 .navbar-search .input-group input,
body.template_2019 .navbar-search input {
  background: var(--kiwz-bg-deep) !important;
  color: var(--kiwz-text) !important;
  border-color: var(--kiwz-border) !important;
}
body.template_2019 .navbar-search-icon.input-group-text,
body.template_2019 .navbar-search .input-group-text {
  background: var(--kiwz-bg-deep) !important;
  color: var(--kiwz-text-muted) !important;
  border-color: var(--kiwz-border) !important;
}
/* linke Navbar-Icon-Buttons */
body.template_2019 .navbar-left .btn-left-navbar { color: var(--kiwz-text) !important; }
body.template_2019 .navbar-brand img { max-height: 40px; width: auto; }

/* ---- Linke Sidebar (Original hart grau #464851 / Köpfe #545761) ---- */
body.template_2019 .sidebar {
  background-color: var(--kiwz-surface) !important;
  border-right: 1px solid var(--kiwz-border) !important;
}
body.template_2019 .sidebar .nav-item.nav-item-head .nav-link {
  background-color: var(--kiwz-surface-raise) !important;
  color: var(--kiwz-text-muted) !important;
}
body.template_2019 .sidebar .nav-link { color: var(--kiwz-text) !important; }
body.template_2019 .sidebar .nav-link .fa,
body.template_2019 .sidebar .nav-link i { color: var(--kiwz-text-muted) !important; }
body.template_2019 .sidebar .nav-link:hover,
body.template_2019 .sidebar .nav-link.nav-link-add:hover {
  background-color: var(--kiwz-surface-raise) !important;
  color: #fff !important;
}
/* aktiver Punkt mit violettem Akzent */
body.template_2019 .sidebar .nav-link.active,
body.template_2019 .sidebar .nav-item.active > .nav-link {
  background: linear-gradient(135deg, rgba(139,103,247,.22), rgba(105,213,138,.14)) !important;
  color: #fff !important;
  border-left: 3px solid var(--kiwz-violet) !important;
}

/* ---- Karten / Panels ---- */
body.template_2019 .card,
body.template_2019 .cart-summary-floater,
body.template_2019 .panel,
body.template_2019 .order-summary {
  background: var(--kiwz-surface) !important;
  border: 1px solid var(--kiwz-border) !important;
  border-radius: var(--kiwz-radius) !important;
  color: var(--kiwz-text) !important;
  box-shadow: 0 18px 48px rgba(3,6,15,.45);
}
body.template_2019 .card-header {
  background: var(--kiwz-surface-raise) !important;
  border-bottom: 1px solid var(--kiwz-border) !important;
  color: var(--kiwz-text) !important;
  font-weight: 700;
}
body.template_2019 .card-body { background: transparent !important; }

/* ---- Texte / Links ---- */
body.template_2019 h1, body.template_2019 h2, body.template_2019 h3,
body.template_2019 h4, body.template_2019 .h4, body.template_2019 label,
body.template_2019 strong { color: var(--kiwz-text) !important; }
body.template_2019 .text-muted, body.template_2019 small { color: var(--kiwz-text-muted) !important; }
body.template_2019 a { color: var(--kiwz-violet); }
body.template_2019 a:hover { color: #a98bff; }

/* ---- Primär-CTA (Weiter / Bestellen / In den Warenkorb) ---- */
body.template_2019 .btn-success,
body.template_2019 .btn-primary,
body.template_2019 .btn-order,
body.template_2019 .btn-checkout {
  background-image: linear-gradient(135deg, var(--kiwz-violet), var(--kiwz-mint)) !important;
  border: 0 !important;
  color: #07111f !important;
  font-weight: 750 !important;
  border-radius: var(--kiwz-radius) !important;
  box-shadow: 0 10px 26px rgba(139,103,247,.35);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
body.template_2019 .btn-success:hover,
body.template_2019 .btn-primary:hover,
body.template_2019 .btn-order:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(139,103,247,.45);
  color: #07111f !important;
}
/* Sekundär-Buttons */
body.template_2019 .btn-secondary,
body.template_2019 .btn-light,
body.template_2019 .btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--kiwz-border-strong) !important;
  color: var(--kiwz-text) !important;
  border-radius: var(--kiwz-radius) !important;
}

/* ---- Formularfelder ---- */
body.template_2019 .form-control,
body.template_2019 select,
body.template_2019 input[type="text"],
body.template_2019 input[type="email"],
body.template_2019 input[type="password"],
body.template_2019 textarea {
  background: var(--kiwz-bg-deep) !important;
  border: 1px solid var(--kiwz-border) !important;
  color: var(--kiwz-text) !important;
  border-radius: 10px !important;
}
body.template_2019 .form-control:focus {
  border-color: var(--kiwz-violet) !important;
  box-shadow: 0 0 0 3px rgba(139,103,247,.28) !important;
}
body.template_2019 ::placeholder { color: #6d7c92 !important; }

/* ---- Preise / Beträge hervorheben ---- */
body.template_2019 .price, body.template_2019 .amount,
body.template_2019 .cart-total, body.template_2019 .product-price {
  color: var(--kiwz-mint) !important;
  font-weight: 800 !important;
}

/* ---- Fortschritt / Schritte ---- */
body.template_2019 .cart-progress .active,
body.template_2019 .progress-bar,
body.template_2019 .step.active {
  background: linear-gradient(135deg, var(--kiwz-violet), var(--kiwz-mint)) !important;
  color: #07111f !important;
}

/* ---- Tabellen ---- */
body.template_2019 table, body.template_2019 .table {
  color: var(--kiwz-text) !important;
}
body.template_2019 .table td, body.template_2019 .table th {
  border-color: var(--kiwz-border) !important;
}

/* ---- Dropdown-Menü ---- */
body.template_2019 .navbar-dropdown-item,
body.template_2019 .dropdown-menu {
  background: var(--kiwz-surface) !important;
  color: var(--kiwz-text) !important;
  border: 1px solid var(--kiwz-border) !important;
}
body.template_2019 .navbar-dropdown-item:hover { background: var(--kiwz-surface-raise) !important; }

/* ---- Footer ---- */
body.template_2019 footer, body.template_2019 .footer {
  background: var(--kiwz-bg-deep) !important;
  border-top: 1px solid var(--kiwz-border) !important;
  color: var(--kiwz-text-muted) !important;
}