/*
 * TOPMETALLIC – Custom CSS (NOVA-Child)
 * Nur Schriften, Farben, Rahmen und Abstände. Bilder/Galerien werden NICHT verändert.
 * Diese Datei wird als letzte geladen und überschreibt NOVA-Styles.
 *
 * Akzentfarbe zusätzlich im Backend setzen: Template-Einstellungen → Colors → Primary = #0A5BB5
 * (damit werden auch alle NOVA-internen Primary-Stellen umgefärbt).
 */

/* ==========================================================================
   1. Variablen (CI)
   ========================================================================== */
:root {
    --tm-anthracite: #1C2127;   /* Header, Footer, Text */
    --tm-accent:     #0A5BB5;   /* Buttons, Links */
    --tm-accent-dark:#084A93;
    --tm-steel:      #4A5560;   /* Sekundärtext */
    --tm-surface:    #F2F4F6;   /* Flächen */
    --tm-line:       #D9DEE3;   /* Linien */
    --tm-instock:    #1F7A4D;   /* Status lieferbar */
    --tm-request:    #8A4B00;   /* Status auf Anfrage */
    --tm-topbar-text:#C9D0D7;

    --tm-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --tm-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==========================================================================
   2. Schriften – lokal (DSGVO), SIL OFL 1.1 (fonts/OFL-LICENSE.txt)
   ========================================================================== */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   3. Basis-Typografie
   ========================================================================== */
body,
.form-control,
.btn,
.dropdown-menu,
.popover,
.tooltip {
    font-family: var(--tm-font-sans);
}
body {
    color: var(--tm-anthracite);
    -webkit-font-smoothing: antialiased;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5,
.productlist-filter-headline,
.box-title,
.product-title {
    font-family: var(--tm-font-sans);
    color: var(--tm-anthracite);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h3, .h3, h4, .h4, h5, .h5 { font-weight: 600; }

.text-muted,
.vat_info,
.price-note,
.base_price,
.footnote-vat {
    color: var(--tm-steel) !important;
}

/* Art.-Nr. / technische Werte in Mono */
.product-sku span[itemprop="sku"],
.productbox-details dd:first-of-type,
.bulk-prices td:first-child,
code, kbd, samp {
    font-family: var(--tm-font-mono);
}

/* Links */
a { color: var(--tm-accent); }
a:hover, a:focus { color: var(--tm-accent-dark); }

/* Fokus gut sichtbar (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
select:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* ==========================================================================
   4. Eckige Formen (Radius 0)
   ========================================================================== */
.btn,
.form-control,
.custom-select,
.input-group > .form-control,
.input-group-append .btn,
.input-group-prepend .btn,
.bootstrap-select > .dropdown-toggle,
.card,
.card-header,
.alert,
.badge,
.modal-content,
.dropdown-menu,
.popover,
.list-group,
.list-group-item,
.pagination .page-link,
.nav-tabs .nav-link,
.custom-checkbox .custom-control-label::before {
    border-radius: 0 !important;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
    font-weight: 600;
    box-shadow: none !important;
}
.btn-primary {
    background-color: var(--tm-accent);
    border-color: var(--tm-accent);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--tm-accent-dark);
    border-color: var(--tm-accent-dark);
    color: #fff;
}
.btn-secondary {
    background-color: var(--tm-anthracite);
    border-color: var(--tm-anthracite);
    color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--tm-accent);
    border-color: var(--tm-accent);
    color: #fff;
}
.btn-outline-primary,
.btn-outline-secondary {
    border: 2px solid var(--tm-anthracite);
    background-color: #fff;
    color: var(--tm-anthracite);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--tm-anthracite);
    border-color: var(--tm-anthracite);
    color: #fff;
}
.btn-light {
    background-color: var(--tm-surface);
    border-color: var(--tm-surface);
    color: var(--tm-anthracite);
}

/* ==========================================================================
   6. Formulare
   ========================================================================== */
.form-control,
.custom-select {
    border-color: var(--tm-steel);
    color: var(--tm-anthracite);
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--tm-accent);
    box-shadow: none;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--tm-anthracite);
    border-color: var(--tm-anthracite);
}

/* ==========================================================================
   7. Topbar
   ========================================================================== */
#header-top-bar {
    background-color: var(--tm-anthracite);
    font-size: 0.8125rem;
}
#header-top-bar,
#header-top-bar #topbarNote {
    color: var(--tm-topbar-text);
}
#header-top-bar a:not(.dropdown-item):not(.btn),
#header-top-bar .nav-link {
    color: #fff;
}
#header-top-bar a:not(.dropdown-item):not(.btn):hover,
#header-top-bar .nav-link:hover {
    color: #fff;
    text-decoration: underline;
}
#header-top-bar .dropdown-toggle::after {
    border-top-color: #fff;
}

/* ==========================================================================
   8. Header
   ========================================================================== */
header#jtl-nav-wrapper {
    background-color: #fff;
    border-bottom: 1px solid var(--tm-line);
    box-shadow: none;
}
header#jtl-nav-wrapper a:not(.dropdown-item):not(.btn) {
    color: var(--tm-anthracite);
}
header#jtl-nav-wrapper a:not(.dropdown-item):not(.btn):hover {
    color: var(--tm-accent);
}

/* Suche: 2 px Rahmen, dunkler Button */
header .main-search .form-control,
header .search-wrapper .form-control {
    border: 2px solid var(--tm-anthracite);
    border-right: 0;
    background-color: #fff;
    color: var(--tm-anthracite);
}
header .main-search .form-control:focus,
header .search-wrapper .form-control:focus {
    border-color: var(--tm-accent);
}
header .main-search .input-group-append .btn,
header .search-wrapper .input-group-append .btn {
    background-color: var(--tm-anthracite);
    border-color: var(--tm-anthracite);
    color: #fff;
}
header .main-search .input-group-append .btn:hover,
header .search-wrapper .input-group-append .btn:hover {
    background-color: var(--tm-accent);
    border-color: var(--tm-accent);
}

/* Hauptnavigation */
#mainNavigation .nav-scrollbar-item > .nav-link,
#mainNavigation .navbar-nav > .nav-item > .nav-link {
    font-weight: 600;
    color: var(--tm-anthracite);
}
#mainNavigation .nav-scrollbar-item > .nav-link::before,
#mainNavigation .navbar-nav > .nav-item > .nav-link::before {
    border-color: var(--tm-accent) !important;
}
#mainNavigation .dropdown-menu {
    border-color: var(--tm-line);
}

/* Warenkorb-/Wunschzettel-Zähler */
#shop-nav .fa-sup,
#shop-nav .badge {
    background-color: var(--tm-accent);
    color: #fff;
}

/* ==========================================================================
   9. Breadcrumb
   ========================================================================== */
.breadcrumb {
    font-size: 0.8125rem;
}
.breadcrumb,
.breadcrumb a {
    color: var(--tm-steel);
}
.breadcrumb a:hover {
    color: var(--tm-accent);
}

/* ==========================================================================
   10. Produktlisten (nur Rahmen, Abstände, Text – keine Bild-Styles)
   ========================================================================== */
.productbox .productbox-inner {
    border: 1px solid var(--tm-line);
    background-color: #fff;
    transition: border-color .15s ease-in-out;
}
.productbox:hover .productbox-inner,
.productbox:focus-within .productbox-inner {
    border-color: var(--tm-accent);
}
.productbox-column .productbox-inner {
    padding-bottom: 1rem;
}
.productbox-column .productbox-title,
.productbox-column .price_wrapper,
.productbox-column .item-delivery-status,
.productbox-column .rating {
    padding-left: 1rem;
    padding-right: 1rem;
}
.productbox-column .productbox-title {
    margin-top: 1rem;
}
.productbox-title a {
    color: var(--tm-anthracite);
    font-weight: 600;
    text-decoration: none;
}
.productbox-column .price_wrapper {
    border-top: 1px solid var(--tm-line);
    margin-top: 0.625rem;
    padding-top: 0.5rem;
}
.productbox .price,
.price_wrapper .price {
    color: var(--tm-anthracite);
    font-weight: 700;
}
.productbox-row .productbox-inner {
    padding: 1rem;
}
.productbox-details dt {
    color: var(--tm-steel);
    font-weight: 500;
}

/* Lagerstatus */
.delivery-status .status-2,
.signal_image.status-2 { color: var(--tm-instock); font-weight: 600; }
.delivery-status .status-1,
.signal_image.status-1 { color: var(--tm-request); font-weight: 600; }

/* Ribbons im CI */
.ribbon-3 { background-color: var(--tm-anthracite); }
.ribbon-8 { background-color: var(--tm-instock); }

/* Unterkategorien & Filter */
.content-cats-small .sub-categories {
    border: 1px solid var(--tm-line);
    padding: 1rem;
}
.content-cats-small .sub-categories:hover {
    border-color: var(--tm-accent);
}
.productlist-filter-headline {
    border-bottom: 1px solid var(--tm-line);
    font-size: 1rem;
}
.productlist-page-nav {
    border-color: var(--tm-line);
}

/* ==========================================================================
   11. Artikeldetail (nur Text, Preise, Tabellen)
   ========================================================================== */
.product-detail .product-title {
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.product-detail .info-essential {
    color: var(--tm-steel);
    font-size: 0.875rem;
}
.product-detail .price_wrapper .price {
    font-size: 1.75rem;
}

/* Staffelpreise als Kasten */
.bulk-prices {
    border: 1px solid var(--tm-line);
    margin: 1rem 0;
}
.bulk-prices .table {
    margin-bottom: 0;
}
.bulk-prices thead th {
    background-color: var(--tm-surface);
    border: 0;
    font-weight: 600;
    padding: 0.75rem 1rem;
}
.bulk-prices td {
    border-top: 1px solid var(--tm-line);
    padding: 0.625rem 1rem;
}
.bulk-prices .bulk-price {
    font-weight: 600;
}

/* Tabs */
.nav-tabs {
    border-bottom: 2px solid var(--tm-anthracite);
}
.nav-tabs .nav-link {
    color: var(--tm-steel);
    font-weight: 600;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: var(--tm-anthracite);
}
.nav-tabs .nav-link::before {
    border-color: var(--tm-accent) !important;
}

/* ==========================================================================
   12. Tabellen, Karten, Pagination
   ========================================================================== */
.table { color: var(--tm-anthracite); }
.table td,
.table th { border-top-color: var(--tm-line); }
.table thead th {
    background-color: var(--tm-surface);
    border-bottom-color: var(--tm-line);
    font-weight: 600;
}
.card { border-color: var(--tm-line); }
.card-header { background-color: var(--tm-surface); font-weight: 600; }
.pagination .page-item.active .page-link {
    color: var(--tm-anthracite);
    font-weight: 700;
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
#footer {
    background-color: var(--tm-anthracite);
    color: var(--tm-topbar-text);
    font-size: 0.875rem;
}
#footer a:not(.btn),
#footer .nav-link {
    color: var(--tm-topbar-text);
    text-decoration: none;
}
#footer a:not(.btn):hover,
#footer .nav-link:hover {
    color: #fff;
    text-decoration: underline;
}
#footer .productlist-filter-headline,
#footer .box-title,
#footer .h5, #footer h5 {
    color: #fff;
    border: 0;
}
#footer hr {
    border-color: #333B44;
}
#footer .small,
#footer .footnote-vat {
    color: #9AA4AE !important;
}
#copyright {
    background-color: #161A1F;
    border-top: 1px solid #333B44;
    color: #9AA4AE;
    font-size: 0.8125rem;
}
#copyright a:not(.btn) { color: #9AA4AE; }