/*
 * CR-3D Navigations-Redesign (Desktop-Megamenu + Mobile-Offcanvas/Burger-Menu).
 * Ueberschreibt die alten Theme-Standardstile (Bootstrap-3-Navbar von 2015,
 * generische gruene Akzentfarbe #50d18e) mit dem im Shop etablierten Teal
 * (#07737a), mehr Weissraum und modernen Hover-/Uebergangseffekten.
 */

/* Globale Akzentfarbe bei Klick/Hover: das Basistheme setzt JEDEN Link
   (style.css: "a:focus,a:hover{color:#50d18e}") auf sein altes Gruen -
   die meisten Nav-Elemente haben zwar schon eigene, spezifischere
   Teal-Hover-Regeln (siehe unten), aber ueberall dort, wo es (noch) keine
   solche Extra-Regel gibt (Blog-/Content-Links, Footer, Sidebar-Widgets,
   Breadcrumbs etc.), blitzt sonst weiterhin das alte Gruen auf. Hier direkt
   an der Wurzel auf Teal umgestellt, site-weit. */
a:focus,
a:hover {
	color: #07737a;
}

/* Zweite, separate Gruen-Quelle: ".active-mobile" (Wrapper-Klasse fuer die
   Mobile-Topbar-Icons - Suche/Cart/Konto/Burger) bekommt beim Hover/Tap einen
   ganzflaechigen gruenen Hintergrund MIT !important direkt aus dem Basistheme
   (style.css: ".active-mobile:hover{background-color:#3ccc81 !important}").
   !important schlaegt Spezifitaet, also reicht eine normale Regel dagegen
   nicht (siehe die schon vorhandene, aber wirkungslose rgba(255,255,255,.06)-
   Hover-Regel weiter unten) - hier deshalb ebenfalls mit !important auf Teal. */
.active-mobile:hover {
	background-color: #07737a !important;
}

/* ==========================================================================
   Desktop-Megamenu (>= 1000px, header-v4)
   ========================================================================== */

#opal-masthead.header-v4 .header-main {
	transition: box-shadow .2s ease;
	/* Statt "justify-content: space-between" (zieht Logo/Menue/Icons ueber die
	   volle Fensterbreite auseinander - auf UHD-Monitoren mit riesigen Luecken)
	   wird die Gruppe jetzt als Block zentriert, mit fixem Abstand zwischen
	   den 3 Spalten. Der Abstand haengt so vom Inhalt (Logo-/Menuebreite) ab,
	   nicht von der Bildschirmbreite - bleibt bei jeder Aufloesung gleich eng. */
	justify-content: center;
	gap: 56px;
}

/* Vertikale Trennlinien (Logo|Menue und vor jedem Icon rechts) entfernt -
   wirkten bei den jetzt engeren Abstaenden unruhig/ueberfluessig. */
#opal-masthead.header-v4 #opal-logo {
	border-right: none;
}
#opal-masthead.header-v4 .header-right > div {
	border-left: none;
}

/* Menu-Links: mehr Laufweite + Teal-Unterstrich-Animation statt reinem Fett-Farbwechsel */
.navbar-mega .navbar-nav > li {
	padding: 0 18px;
}
.navbar-mega .navbar-nav > li > a {
	font-size: 14px !important;
	letter-spacing: .04em;
	padding: 12px 0;
	opacity: .92;
}
.navbar-mega .navbar-nav > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 2px;
	height: 2px;
	background: #1fb8bf;
	transition: right .25s ease;
}
.navbar-mega .navbar-nav > li > a:hover,
.navbar-mega .navbar-nav > li > a:focus,
.navbar-mega .navbar-nav > li.current-menu-item > a,
.navbar-mega .navbar-nav > li.current_page_item > a {
	opacity: 1;
}
.navbar-mega .navbar-nav > li > a:hover::after,
.navbar-mega .navbar-nav > li > a:focus::after,
.navbar-mega .navbar-nav > li.current-menu-item > a::after,
.navbar-mega .navbar-nav > li.current_page_item > a::after {
	right: 0;
}
.navbar-mega .navbar-nav > li > a .caret::before {
	transition: transform .2s ease;
}
.navbar-mega .navbar-nav > li:hover > a .caret::before {
	transform: translateY(2px);
}

/* Dropdown-Panels: Radius, Schatten, sanftes Einblenden statt hartem Kantensprung */
.navbar-mega .navbar-nav > li .dropdown-menu,
.navbar-mega .navbar-nav > li .sub-menu {
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(15, 30, 32, .16);
	border: 1px solid rgba(7, 115, 122, .08);
	padding: 10px 0;
	margin-top: 10px;
	/* Kein overflow:hidden - "3D-Drucker" etc. haben ein verschachteltes zweites
	   Dropdown-Level, das per left:100% NEBEN diesem Panel ausklappt und sonst
	   abgeschnitten würde. */
}

/* Kategorien mit vielen Geschwister-Eintraegen (z.B. "DIY-Drucker" mit 8
   Marken) bekommen automatisch "overflow: hidden auto" (Scrollbar bei zu
   vielen Eintraegen) - das schneidet dann auch das eigene Flyout von Kindern
   wie "VORON" horizontal ab, unabhaengig davon ob es links oder rechts
   oeffnet. Kategorien mit weniger Eintraegen (z.B. "Hotends/Extruder") sind
   davon nicht betroffen. Hier fuer ALLE verschachtelten Dropdown-Container
   overflow generell freigeben, damit Flyouts nie mehr abgeschnitten werden. */
.navbar-mega .navbar-nav ul.dropdown-menu {
	overflow: visible !important;
}
/* Lange FLACHE Untermenues (z.B. "Filamente" mit 30+ Eintraegen, keine
   eigenen Unter-Flyouts) liefen dadurch unten ueber den Viewport-Rand hinaus
   statt scrollbar zu werden. Nur bei Listen OHNE eigenes verschachteltes
   Dropdown (:has()-Check) eine Hoehenbegrenzung + Scrollbar geben - Listen
   MIT einem 3.-Ebene-Flyout (z.B. "DIY-Drucker" -> "VORON") bleiben
   overflow:visible, damit deren Kind-Flyout weiterhin ungeclippt bleibt. */
.navbar-mega .navbar-nav ul.dropdown-menu ul.dropdown-menu:not(:has(ul.dropdown-menu)) {
	max-height: 75vh;
	overflow-y: auto !important;
}
.navbar-mega .navbar-nav > li .dropdown-menu > li > a,
.navbar-mega .navbar-nav > li .sub-menu > li > a {
	padding: 9px 22px;
	font-size: 13.5px;
	color: #293133;
	transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.navbar-mega .navbar-nav > li .dropdown-menu > li > a:hover,
.navbar-mega .navbar-nav > li .dropdown-menu > li > a:focus,
.navbar-mega .navbar-nav > li .sub-menu > li > a:hover {
	background: rgba(7, 115, 122, .07);
	color: #07737a;
	padding-left: 26px;
}

/* Header-rechts (Suche/Mini-Warenkorb/Widgets): einheitliche Hover-Akzentfarbe */
#opal-masthead.header-v4 .header-right > div {
	transition: background .15s ease;
}
#opal-masthead.header-v4 .header-right > div:hover {
	background: rgba(255, 255, 255, .04);
}
#opal-masthead.header-v4 .search-focus {
	transition: color .15s ease, transform .15s ease;
}
#opal-masthead.header-v4 .search-focus:hover {
	color: #1fb8bf;
	transform: scale(1.08);
}

/* "Mein CR-3D": Icon statt Text-Link, Dropdown mit Konto-Links per CSS :hover
   (wie die Megamenu-Dropdowns - kein JS noetig). Ersetzt den reinen Text-Link
   im "header-v4"-Widget-Bereich (siehe cr3d_account_menu_shortcode()). */
.cr3d-account-widget {
	position: relative;
}
.cr3d-account-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	color: #fff;
	transition: color .15s ease;
}
.cr3d-account-toggle:hover,
.cr3d-account-toggle:focus {
	color: #1fb8bf;
}
.cr3d-account-icon {
	width: 18px;
	height: 18px;
}
.cr3d-account-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 220px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(15, 30, 32, .16);
	border: 1px solid rgba(7, 115, 122, .08);
	padding: 10px 0;
	margin-top: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
	z-index: 1000;
	font-family: Montserrat, sans-serif;
}
.cr3d-account-widget:hover .cr3d-account-dropdown,
.cr3d-account-widget:focus-within .cr3d-account-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.cr3d-account-dropdown-header {
	padding: 4px 20px 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid rgba(7, 115, 122, .1);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b7280;
	white-space: nowrap;
}
.cr3d-account-dropdown-links {
	display: flex;
	flex-direction: column;
}
/* Thematische Gruppen (Uebersicht / Bestellwesen / Konto-Einstellungen /
   Abmelden) statt einer einzelnen langen Liste - dezente Trennlinie dazwischen. */
.cr3d-account-dropdown-group {
	display: flex;
	flex-direction: column;
	padding: 6px 0;
	border-top: 1px solid rgba(7, 115, 122, .08);
}
.cr3d-account-dropdown-group:first-child {
	border-top: none;
	padding-top: 0;
}
.cr3d-account-dropdown-group-label {
	padding: 6px 22px 2px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #9aa1a6;
}
.cr3d-account-dropdown-links a {
	padding: 9px 22px;
	font-size: 13.5px;
	color: #293133;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.cr3d-account-dropdown-links a:hover {
	background: rgba(7, 115, 122, .07);
	color: #07737a;
	padding-left: 26px;
}
/* "Abmelden" als eigenstaendiger Button statt einem Link in der Liste. */
.cr3d-account-dropdown-group:has(.cr3d-account-logout-btn) {
	padding: 10px 14px 4px;
}
.cr3d-account-logout-btn {
	display: block;
	text-align: center;
	border-radius: 6px;
	background: rgba(7, 115, 122, .07) !important;
	font-weight: 600;
	padding: 9px 12px !important;
}
.cr3d-account-logout-btn:hover {
	background: #07737a !important;
	color: #fff !important;
	padding-left: 12px !important;
}

/* Duplizierter "Mein CR-3D"-Text-Link, der zusaetzlich (vermutlich versehentlich)
   im Desktop-Hauptmenue auftaucht - Klassenname "nur-mobil_account" zeigt die
   eigentliche Absicht: nur im Mobile-Menue sichtbar sein. */
.navbar-mega .navbar-nav > li.nur-mobil_account {
	display: none;
}

/* ==========================================================================
   Mobile Topbar (Burger-Button + Suche + Mini-Cart, < 1000px)
   ========================================================================== */

.topbar-mobile {
	/* !important noetig: eine dynamisch generierte Theme-Options-CSS (Primary-
	   Color-Einstellung) haengt ".topbar-mobile" mit in eine riesige Selektor-
	   Liste und setzt "background-color" auf die Teal-Akzentfarbe - dieses
	   <style>-Tag wird nach dieser Datei ausgegeben und wuerde sonst gewinnen. */
	background: #293133 !important;
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 6px 14px;
	position: relative;
}
/* Logo mittig, unabhaengig vom Flex-Layout (Burger links, Icons rechts) -
   dadurch bleibt "space-between" fuer die beiden aeusseren Gruppen erhalten
   und das Logo sitzt trotzdem exakt in der Mitte der Topbar, egal wie breit
   die beiden Seiten sind. */
.cr3d-mobile-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
}
.cr3d-mobile-logo img,
.cr3d-mobile-logo .custom-logo {
	max-height: 32px;
	width: auto;
}
.topbar-mobile .btn-offcanvas.offcanvas {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	transition: background .15s ease;
}
.topbar-mobile .btn-offcanvas.offcanvas:hover,
.topbar-mobile .btn-offcanvas.offcanvas:active {
	background: rgba(31, 184, 191, .22);
}
.topbar-mobile .btn-offcanvas.offcanvas .fa-bars {
	color: #fff;
	font-size: 18px;
}
.topbar-mobile .topbar-inner {
	display: flex;
	align-items: center;
	gap: 4px;
}
.topbar-mobile .active-mobile.search-popup,
.topbar-mobile .cr3d-mobile-minicart,
.topbar-mobile .cr3d-mobile-account {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	position: relative;
	transition: background .15s ease;
}
.topbar-mobile .active-mobile.search-popup:hover,
.topbar-mobile .cr3d-mobile-minicart:hover,
.topbar-mobile .cr3d-mobile-account:hover {
	background: rgba(255, 255, 255, .06);
}
.topbar-mobile .active-mobile.search-popup .fa,
.topbar-mobile .cr3d-mobile-minicart .fa,
.topbar-mobile .cr3d-mobile-account .fa {
	color: #fff;
	font-size: 17px;
}
.topbar-mobile .cr3d-mobile-minicart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	background: #1fb8bf;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* ==========================================================================
   Mobile Offcanvas-Menue (Burger-Panel)
   ========================================================================== */

/* Body-Scroll sperren, solange das Offcanvas-Menue offen ist - rein per CSS
   ueber :has(), kein JS noetig (bestehendes .active-Toggle aus js/functions.js
   reicht als Trigger). */
body:has(.row-offcanvas.active) {
	overflow: hidden;
}

/* Verdunkelter Hintergrund hinter dem Panel - vorher gab es keinerlei optische
   Trennung zwischen Panel und restlicher (weiterhin sichtbarer) Seite. Liegt
   als Pseudo-Element UNTER dem Panel und lässt Klicks zum bestehenden
   Offcanvas-Toggle-Button durch (kein eigener Klick-Handler noetig). */
.row-offcanvas::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(10, 16, 17, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 998;
}
.row-offcanvas.active::before {
	opacity: 1;
	visibility: visible;
}

/* Das Theme versteckt/zeigt das Panel urspruenglich per "left: -65%" / "left: 65%"
   (Prozent der eigenen 65%-Breite). Durch unsere neue Breite (86%/max 340px)
   passt dieser Prozentwert nicht mehr dazu - unter ~570px Viewport-Breite blieb
   dadurch ein sichtbarer Rand des Panels stehen, auch wenn es "zu" sein sollte.
   Fix: eigene, feste Position (fixed statt dem Theme-eigenen Verschiebe-Trick),
   die unabhaengig von der Panel-Breite immer sauber schliesst. */
.sidebar-offcanvas {
	width: 86%;
	max-width: 340px;
	box-shadow: 0 0 30px rgba(0, 0, 0, .35);
	z-index: 999;
	transition: left .3s ease;
}
/* Es gibt eine dynamische Theme-Options-CSS (Customizer "Zusaetzliches CSS",
   mobiler Sticky-Header-Modus), die ebenfalls "left" mit !important auf
   ".sidebar-offcanvas" setzt. #page (ID-Selektor) gibt unseren Regeln hier
   zuverlaessig die hoehere Spezifitaet und gewinnt daher unabhaengig davon,
   welchen Wert die Customizer-CSS gerade fuer den geschlossenen Zustand nutzt.

   NICHT mehr per "transform" geloest (frueherer Versuch, 2026-08-10) - eine
   auf #page-Spezifitaet erzwungene "left:0 !important" GRUNDregel wirkt IMMER,
   auch im "aktiv/offen"-Zustand, und ueberstimmt dort faelschlich die
   Customizer-eigene Oeffnen-Logik (die auf einer eigenen ".active"-Regel
   basiert) - das Panel blieb dadurch im geoeffneten Zustand unsichtbar auf
   der Kasse-Seite (Kundenmeldung 2026-08-10), obwohl es auf anderen Seiten
   funktionierte. Stattdessen einfacher, gezielter "left"-Ausgleich wie im
   Original: geschlossen ausserhalb des Panels selbst (-360px, unabhaengig von
   der eigenen Breite von max. 340px), offen bei 0 - der eigentliche
   522px-Rand-Bug kam ohnehin von der Customizer-CSS selbst (deren "-65%" war
   bei schmalen Viewports zu wenig), dort direkt auf "-80%" korrigiert statt
   hier eine parallele, kollidierende Loesung zu bauen. */
#page .sidebar-offcanvas {
	position: fixed !important;
	left: -360px !important;
}
#page .row-offcanvas.active .sidebar-offcanvas {
	left: 0 !important;
}
/* Das Theme verschiebt beim Oeffnen zusaetzlich den GESAMTEN Seiteninhalt
   ("row-offcanvas-left.active { left: 65% }") - das brauchen wir nicht mehr,
   da unser Panel jetzt unabhaengig (position:fixed) darueberliegt. Sonst
   wuerde die Seite dahinter sichtbar nach rechts rutschen. */
.row-offcanvas-left.active {
	left: 0 !important;
}

.offcanvas-head.bg-primary {
	background: linear-gradient(135deg, #07737a, #0a545a);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
}
.offcanvas-head span {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 13px;
	color: #fff;
	order: -1;
}
.offcanvas-head .btn-offcanvas.btn-default {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .15s ease, transform .15s ease;
}
.offcanvas-head .btn-offcanvas.btn-default:hover {
	background: rgba(255, 255, 255, .22);
	transform: rotate(90deg);
}
.offcanvas-head .btn-offcanvas.btn-default .fa-close {
	color: #fff;
	font-size: 14px;
}

.navbar-offcanvas {
	padding: 6px 0 40px;
}
.navbar-offcanvas ul#main-menu-offcanvas > li {
	border-bottom: 1px solid #eef1f2;
	transition: background .15s ease;
}
.navbar-offcanvas ul#main-menu-offcanvas > li.show {
	background: rgba(7, 115, 122, .05);
}
.navbar-offcanvas ul#main-menu-offcanvas > li > a {
	display: block;
	padding: 14px 20px;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	color: #293133;
	transition: color .15s ease, padding-left .15s ease;
}
.navbar-offcanvas ul#main-menu-offcanvas > li.show > a {
	color: #07737a;
	border-left: 3px solid #07737a;
	padding-left: 17px;
}
.navbar-offcanvas ul#main-menu-offcanvas li.active > a {
	color: #07737a;
}

/* Aufklapp-Pfeil rechts: rundes Chevron-Icon statt der alten grauen Box mit
   eckigem FontAwesome-Pfeil, dreht sich beim Aufklappen (.show) um 180°. */
.navbar-offcanvas ul#main-menu-offcanvas > li .caret {
	width: 32px;
	height: 32px;
	top: 8px;
	right: 8px;
	border: none;
	border-radius: 999px;
	background: rgba(7, 115, 122, .07);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, transform .2s ease;
}
.navbar-offcanvas ul#main-menu-offcanvas > li .caret:after {
	position: static;
	color: #07737a;
	font-size: 13px;
}
.navbar-offcanvas ul#main-menu-offcanvas > li .caret:hover {
	background: rgba(7, 115, 122, .16);
}
.navbar-offcanvas ul#main-menu-offcanvas > li.show > .caret {
	transform: rotate(180deg);
	background: rgba(7, 115, 122, .16);
}

.navbar-offcanvas ul#main-menu-offcanvas > li ul.dropdown-menu {
	display: none;
	position: static;
	float: none;
	box-shadow: none;
	border: none;
	background: #fbfcfc;
	margin: 0;
	padding: 4px 0 6px;
}
.navbar-offcanvas ul#main-menu-offcanvas > li ul li a {
	padding: 10px 20px 10px 32px;
	font-size: 13px;
	font-weight: 500;
	color: #4b5457;
	transition: color .15s ease, padding-left .15s ease;
}
.navbar-offcanvas ul#main-menu-offcanvas > li ul li a:hover {
	color: #07737a;
	padding-left: 36px;
}

/* ==========================================================================
   Scroll-to-Top-Pfeil + PayPal-Consent-Einstellungen-Button (unten rechts)
   ========================================================================== */
/* Der Kreis mit dem Cookie-Icon ist kein separates Cookie-Banner-Plugin,
   sondern der "Einstellungen"-Button aus dem PayPal-Consent-Snippet (DB-Snippet
   #34), damit Kunden ihre PayPal-Zustimmung spaeter widerrufen/erteilen koennen.
   Vorherige Version hatte 30px Abstand (wirkte zu weit auseinander) - jetzt wieder
   naeher zusammengerueckt (Cookie 70%, Scroll-Up 30% der Strecke), nur noch ca. 4px
   Abstand zwischen beiden. */
.scrollup {
	bottom: 82px !important;
}
.cr3d-paypal-settings-btn {
	bottom: 42px !important;
}

/* Navbar-Hoehe: die im schmalen Breakpoint (<=1389px) reduzierte Hoehe
   gefaellt auch bei breiteren Fenstern besser als die urspruengliche
   Theme-Standardhoehe (107-108px) - deshalb hier OHNE @media, gilt fuer
   jede Breite (>=1000px, wo das Desktop-Megamenu ueberhaupt sichtbar ist). */
#opal-masthead.header-v4 #opal-logo {
	padding-top: 20px;
	padding-bottom: 20px;
}
.navbar-mega .navbar-nav > li > a {
	padding-top: 8px;
	padding-bottom: 8px;
}
#opal-masthead.header-v4 .header-right > div {
	padding-top: 20px;
}

/* ==========================================================================
   Verdichtete Desktop-Navbar (1000px - 1389px)
   ========================================================================== */
/* Bei 1389px und darunter reicht der Platz nicht mehr fuer Schrift + Abstaende
   in voller Groesse - "Kontakt" (und bei kleineren Breiten mehr) rutscht in
   eine zweite Zeile. Schrift, Abstaende und Hoehe werden hier gestuft
   verkleinert, damit bis 999px (danach greift das Mobile-Offcanvas-Menue statt
   dem Desktop-Megamenu) alles einzeilig bleibt. Steht bewusst als letzter
   Block in der Datei: mehrere Basis-Regeln oben (z.B. Menu-Link-Schrift,
   ".cr3d-account-toggle"-Padding) haben dieselbe Selektor-Spezifitaet - bei
   gleicher Spezifitaet gewinnt in der Cascade die zuletzt notierte Regel,
   unabhaengig von @media, wenn beide zutreffen. */
/* Nur ".header-main" (Gap/Seitenpolster fuers verdichtete Flex-Layout) ist
   wirklich desktop-spezifisch - das galt vorher (ohne min-width) versehentlich
   auch < 1000px und quetschte dort die volle-Breite-Hintergrundfarbe des
   mobilen Logo-Balkens um 2x4px ein (nicht mehr buendig mit der Navleiste). */
@media (min-width: 1000px) and (max-width: 1389px) {
	#opal-masthead.header-v4 .header-main {
		gap: 12px;
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* Banner-Seiten (Startseite, 3D-Drucker, Filamente, ...): der KingComposer-Spacer
   "nav_spacing_kc" soll den Banner buendig unter die Navbar setzen (Unterkante Banner
   = Unterkante Navbar, nicht Seitenanfang). ".header-main" ist "position:absolute" und
   liegt daher ueber dem Textfluss (siehe Kommentar oben zu ".header-main" - die reale
   Hoehe wurde live gemessen: 68.8px bei 1024-1389px, 77.6px ab ~1920px). Die inline
   Hoehe, die KC pro Seite in den Spacer schreibt, wird hier per !important auf die
   groessere gemessene Navbar-Hoehe minus 5px "Sicherheitsueberhang" gezwungen - lieber
   der Banner-Kopf 5px unter der Navbar versteckt als eine sichtbare Luecke darunter. */
@media (min-width: 1000px) {
	.nav_spacing_kc {
		height: 73px !important;
	}
}
@media (max-width: 1389px) {
	#opal-masthead.header-v4 #opal-logo {
		padding: 20px 8px 20px 0;
	}
	#opal-masthead.header-v4 #opal-logo img {
		max-width: 100px;
		height: auto;
	}
	.navbar-mega .navbar-nav > li {
		padding: 0 10px;
	}
	.navbar-mega .navbar-nav > li > a {
		font-size: 12.5px !important;
		padding: 8px 0;
	}
	#opal-masthead.header-v4 .search-focus,
	#opal-masthead.header-v4 .textwidget a {
		padding: 0 8px !important;
		font-size: 1.2rem;
	}
	#opal-masthead.header-v4 .box-top .fa-shopping-basket {
		padding: 0 8px !important;
	}
	#opal-masthead.header-v4 .cr3d-account-toggle {
		padding: 0 8px;
	}
	#opal-masthead.header-v4 .header-right > div {
		padding-top: 20px;
	}
	#opal-masthead.header-v4 .header-right {
		transform: translateX(6px);
	}
}

/* Vertikales Kategorie-Menü (Sidebar-Widget, z.B. "Filamente"-Flyout): das
   Flyout hat kein max-height/overflow, laeuft bei vielen Unterpunkten also
   ueber den Viewport-Rand hinaus statt scrollbar zu werden. */
.widget_wpopal_menu_vertical .navbar-nav li .dropdown-menu {
	max-height: 80vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.widget_wpopal_menu_vertical .navbar-nav li .dropdown-menu::-webkit-scrollbar {
	width: 6px;
}
.widget_wpopal_menu_vertical .navbar-nav li .dropdown-menu::-webkit-scrollbar-thumb {
	background: rgba(7, 115, 122, 0.35);
	border-radius: 3px;
}