/* ==================================================================
   OWNChild - eigene Styles fuer smartsensors.shop
   Kopfzeile, Hintergrund und Fusszeile wie www.tm3d.de (tm3d.css).
   Wird NACH den NOVA-Styles geladen und ueberschreibt diese.
   Bilder/Fonts liegen in templates/OWNChild/tm3d/ (Install-Skript).
   ================================================================== */

/* ---------- Schrift (wie tm3d.de, lokal - kein Google-Fonts-Abruf) ---------- */
@font-face { font-family: "Source Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url(../tm3d/fonts/source-sans-3-v15-latin-300.woff2) format("woff2"); }
@font-face { font-family: "Source Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(../tm3d/fonts/source-sans-3-v15-latin-regular.woff2) format("woff2"); }
@font-face { font-family: "Source Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(../tm3d/fonts/source-sans-3-v15-latin-600.woff2) format("woff2"); }

:root {
    --tm3d-width: 1200px;      /* Breite von Kopf, Inhalt und Fuss */
    --tm3d-font: "Source Sans", "Source Sans Pro", Verdana, Geneva, Arial, Helvetica, sans-serif;
    --tm3d-navy: #0c226c;
    --tm3d-blue: #006dbc;
    --tm3d-blue-hover: #338ac9;
    --tm3d-blue-line: #4d99d0;
    --tm3d-beige: #ffe7bd;     /* Inhaltsflaeche wie auf tm3d.de - fuer weiss: #fff */
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--tm3d-font);
}

/* ==================================================================
   Hintergrund (identisch zu tm3d.de)
   ================================================================== */
html body {
    background: var(--tm3d-navy) url(../tm3d/img/main-background.jpg) center / 100% 100% fixed;
}

/* Kopf (NOVA-Leiste mit Suche/Konto/Warenkorb), Inhalt und Fuss
   als zentrierte Spalte auf dem Hintergrund - wie die tm3d.de-Seite */
#jtl-nav-wrapper,
#main-wrapper,
#footer {
    max-width: var(--tm3d-width);
    margin-left: auto;
    margin-right: auto;
}
#main-wrapper {
    background: var(--tm3d-beige);
    padding-bottom: 10px;
}

.container {
    --bs-gutter-x: 0rem;
}

nav.navbar {
    height: auto;
}

/* Inhaltsklassen aus OWN 5.4 (in Artikeln/Seiten benutzt) */
.tm3d_header {
    float: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.tm3d_content {
    margin-bottom: 10px;
    padding: 10px;
    background: var(--tm3d-beige);
}
.btn_mark {
    margin-top: -1px;
    padding-top: 5px;
    padding-bottom: 4px;
}

/* ==================================================================
   tm3d-Kopfzeile: Logo + Icon-Menue
   (aus tm3d.de/assets/css/tm3d.css, alles unter .tm3d-top gekapselt,
    damit NOVA/Bootstrap nicht dazwischenfunkt)
   ================================================================== */
.tm3d-top {
    font: 300 14.4px/1.5 var(--tm3d-font);
    color: #3d3d3d;
    position: relative;
    z-index: 1040;             /* ueber der sticky NOVA-Leiste (1020/1030) */
}
.tm3d-top *, .tm3d-top *::before, .tm3d-top *::after { box-sizing: border-box; }
.tm3d-top a { text-decoration: none; }
.tm3d-top a:hover { text-decoration: none; }

.tm3d-top .site-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    max-width: var(--tm3d-width);
    margin: 0 auto; padding: 10px 0;
    min-height: 142px; position: relative;
}
.tm3d-top header.site-header {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    position: relative !important;
    top: auto !important;
    height: auto !important;
}
.tm3d-top header.site-header::before,
.tm3d-top header.site-header::after { display: none !important; }
.tm3d-top .logo { display: block; margin-top: 10px; line-height: 0; }
.tm3d-top .logo img { width: 277px; max-width: 100%; height: auto; border: 0; }
.tm3d-top .menu-toggle { display: none; }

.tm3d-top .mainmenu, .tm3d-top .mainmenu ul { list-style: none; margin: 0; padding: 0; }
.tm3d-top .mainmenu { display: flex; }
.tm3d-top .mainmenu > li {
    position: relative; min-width: 100px; height: 110px; margin-right: 1px;
    border: 1px solid transparent;
}
.tm3d-top .mainmenu > li:last-child { margin-right: 0; }
.tm3d-top .mainmenu > li > a {
    display: block; min-width: 80px; margin-top: 10px; padding: 8px 10px 5px;
    color: #d2d2d2; text-align: center;
    background: url(../tm3d/img/circle-bg.png) center 23px / 0 0 no-repeat;
    transition: background-size .2s ease-out, background-position .2s ease-out;
}
.tm3d-top .mainmenu > li.nodesc > a { padding: 12px 12px 25px; }
.tm3d-top .mainmenu .mm-icon {
    display: block; height: 44px; opacity: .5;
    background: url(../tm3d/img/icons-uni-white.png) no-repeat;
}
.tm3d-top .mainmenu .mm-title { display: block; font-size: 17.28px; line-height: 22px; white-space: nowrap; }
.tm3d-top .mainmenu .mm-desc  { display: block; font-size: 13.8px; line-height: 22px; color: #eee; max-width: 80px; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm3d-top .mainmenu > li:hover, .tm3d-top .mainmenu > li.active, .tm3d-top .mainmenu > li:focus-within { background: rgba(255,255,255,.2); }
.tm3d-top .mainmenu > li:hover > a, .tm3d-top .mainmenu > li.active > a, .tm3d-top .mainmenu > li:focus-within > a {
    color: #fff; background-position: center 0; background-size: 56px 56px;
}
.tm3d-top .mainmenu > li:hover .mm-icon, .tm3d-top .mainmenu > li.active .mm-icon, .tm3d-top .mainmenu > li:focus-within .mm-icon { opacity: 1; }
.tm3d-top .mainmenu > li:hover .mm-desc, .tm3d-top .mainmenu > li.active .mm-desc { color: #fff; }
.tm3d-top .mm-toggle { display: none; }

/* Dropdowns */
.tm3d-top .mainmenu ul {
    position: absolute; top: 110px; left: -1px; width: 205px;
    background: var(--tm3d-blue); display: none; z-index: 100;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.tm3d-top .mainmenu ul ul { top: 0; left: 205px; }
.tm3d-top .mainmenu > li:nth-last-child(-n+2) ul ul { left: auto; right: 205px; }
.tm3d-top .mainmenu li:hover > ul, .tm3d-top .mainmenu li:focus-within > ul { display: block; }
.tm3d-top .mainmenu ul li { position: relative; border-bottom: 1px solid var(--tm3d-blue-line); }
.tm3d-top .mainmenu ul li:last-child { border-bottom: 0; }
.tm3d-top .mainmenu ul a { display: block; padding: 10px 16px 10px 10px; font-size: 15px; line-height: 20px; color: #ebf7fc; }
.tm3d-top .mainmenu ul a:hover { color: #fff; }
.tm3d-top .mainmenu ul li.parent > a { background: url(../tm3d/img/icon-arrow-white.png) 98% center no-repeat; }
.tm3d-top .mainmenu ul li:hover, .tm3d-top .mainmenu ul li.active { background-color: var(--tm3d-blue-hover); }

/* ==================================================================
   NOVA-Kopf (Topbar "News | Kontakt", Suche/Icons, Kategorien)
   ================================================================== */
#header-top-bar {
    max-width: var(--tm3d-width);
    margin-left: auto !important;
    margin-right: auto !important;
}
/* NOVA berechnet die Navbar-Hoehe aus der Logo-Hoehe (Inline-CSS
   "nav.navbar { height: ... }"). Logo ist ausgeblendet -> Hoehe freigeben. */
header.fixed-navbar nav.navbar,
#jtl-nav-wrapper nav.navbar {
    height: auto !important;
    min-height: 0 !important;
}
header.fixed-navbar .navbar-brand,
#jtl-nav-wrapper .navbar-brand {
    display: none !important;
}
/* Kompakter Kopf (Werte aus dem echten DOM von NOVA 5.8 gemessen):
   - beide Navbars ohne eigenes Padding
   - Icon-Leiste #shop-nav nicht hoeher als das Suchfeld
   - Kategorien: 24px Scrollbar-Reserve unten entfernt,
     gelbe Linie 2px unter dem Text */
header.fixed-navbar nav.navbar,
#jtl-nav-wrapper nav.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#jtl-nav-wrapper nav.navbar:first-of-type {
    padding-top: 8px !important;
}
#jtl-nav-wrapper #shop-nav {
    height: auto !important;
    min-height: 0 !important;
}
#jtl-nav-wrapper #mainNavigation {
    height: auto !important;
    min-height: 0 !important;
}
#jtl-nav-wrapper #mainNavigation .nav-scrollbar-inner {
    padding-bottom: 0 !important;
    height: auto !important;
}
#jtl-nav-wrapper #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link {
    padding-top: 6px !important;
    padding-bottom: 8px !important;   /* 5.6px Linie + 2px Abstand */
    height: auto !important;
}

/* ==================================================================
   Artikelkacheln ohne weisse Flaechen (Liste + Slider)
   ================================================================== */
#product-list .product-wrapper,
#product-list .productbox,
#product-list .productbox-inner,
#product-list .productbox-image,
#product-list .productbox-images,
#product-list .square .inner,
#product-list .productbox-variations,
#product-list .productbox:hover .productbox-inner,
.productbox,
.productbox-inner,
.productbox-image,
.productbox-images,
.productbox .square .inner,
.productbox:hover .productbox-inner {
    background-color: transparent !important;
}
#product-list .productbox:hover .productbox-inner,
.productbox:hover .productbox-inner {
    box-shadow: none !important;
}

/* ==================================================================
   Fusszeile wie tm3d.de
   Aufbau NOVA 5.8: footer#footer > .container (Newsletter, Zeile
   .withdrawal-link-wrapper, Social, .footnote-vat) + Copyright-Block
   ================================================================== */
#footer {
    background: transparent;
    color: #fff;
    padding: 10px 0 0;
}

/* Weisses Feld: Button "Vertrag widerrufen" + Kleinunternehmer-Hinweis
   nebeneinander, so breit wie der Inhalt */
#footer > .container:has(.footnote-vat) {
    background: #fff;
    color: #3d3d3d;
    max-width: none;
    width: 100%;
    padding: 8px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
    row-gap: 6px;
}
#footer > .container:has(.footnote-vat) > * {
    flex: 0 0 100%;          /* Newsletter/Social etc. weiter volle Breite */
    margin-top: 0;
    margin-bottom: 0;
}
#footer .withdrawal-link-wrapper {
    flex: 0 0 auto !important;
    margin: 0 !important;
}
#footer .withdrawal-link-wrapper > * {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
}
#footer .withdrawal-link-wrapper .btn {
    white-space: nowrap;
    margin: 0;
}
#footer .footnote-vat {
    flex: 1 1 400px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #3d3d3d !important;
}
#footer .footnote-vat * { color: #3d3d3d !important; }

/* Fussmenue weiss auf dem Hintergrund */
.tm3d-footer { padding: 15px 0 40px; text-align: center; font-family: var(--tm3d-font); }
.tm3d-footer .footermenu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.tm3d-footer .footermenu li { padding: 0 11px; border-right: 1px solid rgba(255,255,255,.35); }
.tm3d-footer .footermenu li:last-child { border-right: 0; }
#footer .tm3d-footer .footermenu a,
#footer .tm3d-footer .footermenu a:visited { color: #fff !important; font-size: 14px; line-height: 20px; text-transform: uppercase; padding: 2px; text-decoration: none; transition: .3s ease-out; }
#footer .tm3d-footer .footermenu a:hover { color: #fff !important; text-decoration: underline; }

/* ==================================================================
   Tablet / Handy (gleicher Umbruch wie tm3d.de und NOVA: < 992px)
   ================================================================== */
@media (max-width: 1220px) {
    .tm3d-top .site-header { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 991px) {
    .tm3d-top .site-header { flex-wrap: wrap; align-items: center; min-height: 0; padding: 10px 12px; }
    .tm3d-top .logo { margin: 0; }
    .tm3d-top .logo img { width: 200px; }
    .tm3d-top .menu-toggle {
        display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
        background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff;
        font: 400 16px var(--tm3d-font); cursor: pointer; border-radius: 0;
    }
    .tm3d-top .menu-toggle span, .tm3d-top .menu-toggle span::before, .tm3d-top .menu-toggle span::after { display: block; width: 20px; height: 2px; background: #fff; position: relative; }
    .tm3d-top .menu-toggle span::before, .tm3d-top .menu-toggle span::after { content: ""; position: absolute; left: 0; }
    .tm3d-top .menu-toggle span::before { top: -6px; }
    .tm3d-top .menu-toggle span::after { top: 6px; }
    .tm3d-top .site-nav { flex-basis: 100%; display: none; margin-top: 10px; }
    .tm3d-top .site-header.nav-open .site-nav { display: block; }
    .tm3d-top .mainmenu { flex-direction: column; background: rgba(12,34,108,.92); }
    .tm3d-top .mainmenu > li { height: auto; min-width: 0; margin: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
    .tm3d-top .mainmenu > li > a, .tm3d-top .mainmenu > li.nodesc > a { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 50px 10px 10px; text-align: left; background: none !important; }
    .tm3d-top .mainmenu .mm-icon { width: 25px; height: 25px; flex: none; }
    .tm3d-top .mainmenu .mm-desc { max-width: none; margin: 0; }
    .tm3d-top .mm-toggle {
        display: block; position: absolute; right: 0; top: 0; width: 48px; height: 46px;
        border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 20px;
    }
    .tm3d-top .mm-toggle::before { content: "+"; }
    .tm3d-top .mainmenu li.open > .mm-toggle::before { content: "–"; }
    .tm3d-top .mainmenu ul, .tm3d-top .mainmenu ul ul, .tm3d-top .mainmenu > li:nth-last-child(-n+2) ul ul {
        position: static; width: auto; box-shadow: none; display: none; left: auto; right: auto;
    }
    .tm3d-top .mainmenu li:hover > ul, .tm3d-top .mainmenu li:focus-within > ul { display: none; }
    .tm3d-top .mainmenu li.open > ul { display: block; }
    .tm3d-top .mainmenu ul ul a { padding-left: 25px; }
    .tm3d-top .mainmenu ul ul ul a { padding-left: 40px; }
    .tm3d-top .mainmenu ul li.parent > a { background: none; }
}
/* ==================================================================
   Artikelkacheln: weisse Hover-Flaeche aus NOVA clear.css entfernen
   (.productbox-inner::before, gemessen in NOVA 5.8)
   ================================================================== */
.productbox.productbox-hover .productbox-inner::before,
.productbox.productbox-hover:hover .productbox-inner::before,
.productbox.productbox-hover:focus-within .productbox-inner::before {
    background-color: transparent !important;
    box-shadow: none !important;
}
#product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse:hover,
#product-list .productbox-hover:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Artikelkacheln: beim Hover etwas heller (statt NOVA-Weiss) */
:root {
    --tm3d-card-hover: #fff4e0;   /* heller als --tm3d-beige (#ffe7bd) */
}
body .productbox.productbox-hover:hover .productbox-inner::before,
body .productbox.productbox-hover:focus-within .productbox-inner::before {
    background-color: var(--tm3d-card-hover) !important;
    box-shadow: 0 2px 10px rgba(120, 90, 30, .18) !important;
}

/* Fuss: Button "Vertrag widerrufen" und Hinweistext oben buendig */
#footer > .container:has(.footnote-vat) {
    align-items: flex-start !important;
}
#footer .withdrawal-link-wrapper,
#footer .withdrawal-link-wrapper > *,
#footer .withdrawal-link-wrapper .btn,
#footer .footnote-vat,
#footer .footnote-vat > * {
    margin-top: 0 !important;
}
#footer .footnote-vat {
    line-height: 1.5;
}

/* Fuss: Bootstrap .mt-3 um den Button "Vertrag widerrufen" aufheben (16px) */
#footer .withdrawal-link-wrapper .mt-3,
#footer .withdrawal-link-wrapper > .col > div {
    margin-top: 0 !important;
}

/* Mobil: tm3d-Kopf UNTER dem NOVA-Menuepanel (Off-Canvas) und dessen Abdunklung */
@media (max-width: 991.98px) {
    .tm3d-top {
        z-index: 1 !important;
    }
}