/* Contrast level 3 ("Medium"), approved by Joost 2026-10-28.
   Loaded after extra.min.css. Darker text and field edges, a grey frame for
   top bar, menu band and footer. Neutral greys (no blue tint, per Joost).
   Contrast on white: field border 3.1:1, placeholder 4.95:1, body text
   12.1:1; frame text on the frame 10.0:1. */
:root {
  --cl-text: #363636;
  --cl-text-muted: #595959;
  --cl-field-border: #929292;
  --cl-placeholder: #707070;
  --cl-orange: #e8771d;
  --cl-frame: #d0d0d0;        /* header + footer, one step darker than the band (Joost 2026-10-29) */
  --cl-header: #263238;     /* top bar + header, darker than the footer (Joost 2026-10-29) */
  --cl-frame-text: #2d2d2d;
  --cl-edge: #c6c6c6;
  --cl-band: #dcdcdc;         /* menu band with "Alle Kategorien": the former header grey (Joost 2026-10-29) */
  --cl-band-text: #111111;
  --cl-nav: #222222;
}

/* Form fields */
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"],
textarea, select {
  border: 1px solid var(--cl-field-border) !important;
  color: var(--cl-text) !important;
  border-radius: 4px;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--cl-placeholder) !important; opacity: 1; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--cl-orange) !important;
  box-shadow: 0 0 0 3px rgba(232, 119, 29, .2) !important;
  outline: none;
}
.form-text, small.text-muted { color: var(--cl-text-muted) !important; }
.gi-cart-select-inner { border-color: var(--cl-field-border) !important; }   /* cart country select draws its border on this wrapper */

/* Body copy: running text only (paragraphs, list items, cards, product description) */
main p:not(.gi-slide-content > p), main li, .card p, .card li,   /* hero slide text stays white */
.gi-single-desc, .gi-single-desc p, .gi-single-desc li, .img-caption {
  color: var(--cl-text) !important;
  font-weight: 400;
}
.card { border-color: var(--cl-edge) !important; }

/* Product tabs: filled chip with an edge, active tab orange */
.nav-tabs .product-tabs { background: var(--cl-frame) !important; border: 1px solid var(--cl-edge) !important; }
.nav-tabs .product-tabs .product-heading { color: var(--cl-nav) !important; }
.nav-tabs .product-tabs.active { background: var(--cl-orange) !important; border-color: var(--cl-orange) !important; }
.nav-tabs .product-tabs.active .product-heading { color: #fff !important; }

/* Buy-now tables: every other row light grey so a line is easy to follow (Joost 2026-10-29).
   Bootstrap paints stripes with an inset box-shadow, which the theme turns white; plain backgrounds instead. */
table.buy-now > tbody > tr > td { background-color: #fff !important; box-shadow: none !important; }
table.buy-now > tbody > tr:nth-child(even) > td { background-color: #f3f3f3 !important; }

/* Header */
.gi-header .header-top { background: var(--cl-header) !important; }
/* Charcoal header (Joost 2026-10-29): light text and icons; the dropdowns keep their own white panel */
.gi-header .header-top, .gi-header .header-top a, .gi-header .header-top span, .gi-header .header-top p,
.gi-header .header-top i, .gi-header .header-top .header-top-message,
.gi-header .gi-header-btn, .gi-header .gi-header-btn .header-icon i, .gi-header .gi-btn-stitle, .gi-header .gi-site-menu-icon i { color: #ffffff !important; }
.gi-header .gi-header-btn:hover .header-icon i, .gi-header .gi-header-btn:hover .gi-btn-stitle { color: var(--cl-orange) !important; }
.gi-header .gi-header-buttons .gi-header-btn .gi-header-count { background-color: var(--cl-orange) !important; color: #fff !important; opacity: 1; }   /* the dark badge vanished on charcoal */
/* The whole header is one grey band (Joost 2026-10-28); only the search box stays white */
.gi-header, .gi-header-bottom { background: var(--cl-header) !important; }
.gi-header-bottom { border-bottom: 0 !important; }
.gi-header { border-bottom: 1px solid var(--cl-edge) !important; }   /* one edge under the header, also on phones (no menu band there) */
.gi-search-group-form { display: flex !important; align-items: stretch; background: #fff !important; border: 1px solid var(--cl-field-border) !important; border-radius: 4px; overflow: hidden; }
.gi-search-group-form:focus-within { border-color: var(--cl-orange) !important; }
.gi-search-group-form input, .gi-search-group-form input:focus { border: 0 !important; box-shadow: none !important; color: var(--cl-text) !important; }
.gi-header-cat { background: var(--cl-band) !important; border-top: 0 !important; border-bottom: 0 !important; }
.gi-header-cat .nav-link, .gi-header-cat nav > ul > li > a, .gi-header-cat .gi-main-menu > ul > li > a,
.gi-header-cat .gi-category-toggle, .gi-header-cat .gi-category-toggle i, .gi-header-cat .gi-category-toggle .text,
.gi-header-cat .gi-location-toggle, .gi-header-cat .gi-location-toggle i, .gi-header-cat .gi-location-toggle a { color: var(--cl-band-text) !important; font-weight: 500; }
.gi-header-cat .nav-link:hover, .gi-header-cat nav > ul > li > a:hover, .gi-header-cat .gi-main-menu > ul > li > a:hover { color: var(--cl-band-text) !important; text-decoration: underline; text-underline-offset: 4px; }   /* orange hover vanishes on this grey (1.2:1) */
.gi-header-cat .gi-category-toggle, .gi-header-cat .gi-category-toggle i, .gi-header-cat .gi-category-toggle .text,
.gi-header-cat .gi-location-toggle, .gi-header-cat .gi-location-toggle i, .gi-header-cat .gi-location-toggle a { color: #fff !important; }   /* white text on the orange buttons */.gi-breadcrumb, .gi-breadcrumb * { border: 0 !important; box-shadow: none !important; }   /* no box around the breadcrumbs (Joost 2026-10-28) */

/* Footer: same grey as the top bar */
/* Footer: charcoal like the header (Joost 2026-10-29), copyright strip one step darker */
footer, footer > div { background-color: var(--cl-header) !important; background-image: none !important; }
footer p, footer li, footer a, footer span { color: #ffffff !important; opacity: 1 !important; }
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer .gi-footer-heading { color: #ffffff !important; border-color: rgba(255, 255, 255, .25) !important; }
/* World map as one large watermark across the footer (Joost 2026-10-29); the small copy behind Kontakt goes */
footer .footer-top { position: relative; isolation: isolate; }
footer .footer-top::before {
  content: ""; position: absolute; inset: 24px 0; z-index: -1; pointer-events: none;
  background: url(/images/world-map.png) center / contain no-repeat; filter: brightness(0) invert(1);   /* the PNG is dark at low alpha; this makes it a light watermark */
}
footer .widget.address { background-image: none !important; }
footer .footer-bottom { background-color: var(--cl-header) !important; border-top: 1px solid rgba(255, 255, 255, .12); }
footer .footer-bottom .gi-copy, footer .footer-bottom .gi-copy * { color: #e0e0e0 !important; }
footer .footer-bottom .footer-bottom-legal, footer .footer-bottom .footer-bottom-legal * { color: #c4c4c4 !important; }
footer a:hover { color: var(--cl-orange) !important; }

/* Category and product tiles, and the Wissen / Auswahlhilfe cards: separate white cards (Joost 2026-10-28/29) */
.gi-product-inner, .gi-blog-item {
  background: #fff !important;
  border: 1px solid var(--cl-edge) !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .07);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.gi-product-inner:hover, .gi-blog-item:hover {
  border-color: var(--cl-orange) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .12);
  transform: translateY(-2px);
}
.gi-product-inner .gi-pro-content { border: 0 !important; border-top: 1px solid #e6e6e6 !important; }
.gi-blog-block { display: flex; margin-bottom: 24px; }   /* same height per row; the markup's mb-6 does not exist in Bootstrap 5 */
.gi-blog-block > .gi-blog-item { width: 100%; }
.gi-blog-item .blog-info { height: 100%; }
.gi-blog-item .blog-info, .gi-blog-item .blog-img { border-radius: 0 !important; }   /* the card clips the corners */
.gi-blog-item .detail { border-top: 1px solid #e6e6e6; padding: 14px 16px 16px; }      /* text no longer touches the edge */
@media (prefers-reduced-motion: reduce) { .gi-product-inner, .gi-product-inner:hover, .gi-blog-item, .gi-blog-item:hover { transition: none; transform: none; } }

/* ISO badge on the charcoal footer: white disc behind the blue badge (Joost 2026-10-29) */
footer img[src*="ISO_logo"] { background: #fff; border-radius: 50%; padding: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
/* All footer icons orange, the same tone the theme uses for the location and phone icons (Joost 2026-10-29) */
footer i.fi, footer i[class*="fi-rr-"] { color: #e67e22 !important; }
/* World map watermark in the charcoal part of the header too (Joost 2026-10-29). The header itself carries the
   charcoal so one layer spans top bar + logo row; the menu band keeps its own light background. */
.gi-header { isolation: isolate; background: var(--cl-header) !important; }
.gi-header .header-top, .gi-header .gi-header-bottom { background: transparent !important; }
.gi-header::before {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; bottom: 6px; z-index: -1; pointer-events: none;
  background: url(/images/world-map.png) left center / contain no-repeat; filter: brightness(0) invert(1);   /* anchored left (Joost 2026-10-29) */
}
@media (min-width: 992px) { .gi-header::before { bottom: 66px; background-size: min(1000px, 90%) auto; } }   /* stop above the 60px menu band; wider, cropped top and bottom */
/* Logo a little higher, search box centred on the page (Joost 2026-10-29) */
.gi-header-logo .site-logo { transform: translateY(-16px); }
@media (min-width: 992px) {
  .gi-header-bottom .gi-flex { position: relative; justify-content: space-between; }
  .gi-header-bottom .gi-header-search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {   /* keep 28px clear of the logo and the account buttons */
  .gi-header-bottom .gi-header-search { width: calc(100% - 680px); }
  .gi-header-bottom .gi-header-search .header-search { min-width: 0 !important; padding: 0 !important; }   /* theme: min-width 400px + 30px sides */
  .gi-header-bottom .gi-header-search .gi-search-group-form { width: 100% !important; max-width: none; }
}

/* "Alle Kategorien" popup: darker panel, bold hover; the parent stays bold while its submenu is open (Joost 2026-10-29) */
.gi-cat-dropdown, .gi-cat-dropdown .mega-menu .mega-block, .gi-cat-dropdown .sub-menu.sub-menu-child {
  background-color: #e4e4e4 !important; border-color: #c6c6c6 !important;
}
.gi-cat-dropdown a, .gi-cat-dropdown a i { color: #2d2d2d !important; }
.gi-cat-dropdown li:hover > a, .gi-cat-dropdown a:hover { font-weight: 700 !important; color: #111111 !important; }
/* Popup fits the page: span the content width of the menu band's container instead of a fixed 1400px (Joost 2026-10-29).
   The menu wrappers go static so the container (.position-relative) is the reference box. */
@media (min-width: 992px) {
  .gi-header-cat .gi-category-icon-block, .gi-header-cat .gi-category-menu { position: static !important; }
  .gi-header-cat .gi-cat-dropdown { width: auto !important; left: 0 !important; right: 0 !important; }   /* edges line up with the two orange buttons */
  .gi-cat-dropdown .mega-menu li a { overflow-wrap: anywhere; hyphens: auto; }   /* long German words in narrow columns */
  .gi-cat-dropdown .gi-cat-tab .mega-menu { flex: 1 1 auto; width: 100%; }   /* columns fill the panel */
  .gi-cat-dropdown .mega-menu .mega-block { min-width: 0 !important; width: calc(25% - 15px) !important; }
  .gi-cat-dropdown .mega-menu .mega-block:last-child .sub-menu.sub-menu-child { left: auto !important; right: 100% !important; }   /* open leftwards at the right edge */
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .gi-cat-dropdown .mega-menu .mega-block:nth-child(3) .sub-menu.sub-menu-child { left: auto !important; right: 100% !important; }
}